panikweb_templates/static/css/_general.scss

   1 /******************/
   2 /*HTML TAG DISPLAYS */
   3 /******************/
   4 body {
   5         font-family: "RegloNormal";
   6         line-height: normal;
   7         text-align: left;
   8         margin:2.8em auto 0 auto;
   9         /*padding: 0px 10px;*/
  10         clear: both;
  11 }
  12 code,pre{
  13         display:block;
  14         overflow:auto;
  15         padding:0.5em;
  16         background:black !important;
  17         color:white !important;
  18         font-family:monospace;
  19 }
  20 audio {
  21         display:block;
  22         width: 90%;
  23         margin:0.5em auto 1em auto;
  24 }
  25
  26 a {
  27         color:inherit;
  28         text-decoration: none;
  29 }
  30 .userContent a:hover {
  31     text-decoration: underline;
  32 }
  33 a.block:hover,nav a:hover{
  34     text-decoration: none;
  35 }
  36 button, .button{
  37         margin:0 0 0 0;
  38         padding: 0 0 0 0;
  39         cursor:pointer ;
  40         background:none;
  41 }
  42 img {max-width:100%;}
  43 img.logo{border:2px solid black;}
  44
  45 header{
  46         padding:0 0 2em 0;
  47         font-family: 'RegloBold';
  48 }
  49 h1, h2, h3, h4, h5{
  50         font-family: 'RegloBold';
  51         line-height:1em;
  52         padding:0.2em 0 0.2em 0;
  53 }
  54 h1, h2, h3, h4{
  55         text-transform: uppercase;
  56 }
  57 h1 {    font-size: 6em;}
  58 h2 {    font-size: 4em;}
  59 h3 {    font-size: 3em;}
  60 h4 {    font-size: 1.8em;}
  61 h5 {    font-size: 1.1em;}
  62
  63 /*Specific rules for text writen by final users */
  64 .userContent h1 {       font-size: 2em;}
  65 .userContent h2  {      font-size: 1.9em;}
  66 h1, h2, h3, h4, .squashed{
  67     font-family: 'RegloScale';
  68     }
  69
  70 nav{
  71         padding:0em;
  72         font-family: "RegloBold";
  73         text-transform: uppercase;
  74 }
  75 hr {
  76         height: 0;
  77         margin:0.5em 0 0.5em 0;
  78         padding:0;
  79         border-style:solid;
  80         border-width:2px 0 0 0 ;
  81         border-color:black;
  82 }
  83 table{
  84         margin:auto;
  85         table-layout:fixed;
  86 }
  87 table,td,tr  {
  88         padding:0;
  89         margin:0;
  90         word-wrap: break-word;
  91         text-overflow: ellipsis;
  92         text-align: center;
  93         vertical-align: middle;
  94         border: 1px solid #D0D0D0;
  95         border-collapse:collapse;
  96 }
  97 th {
  98         white-space: nowrap;
  99         text-transform: uppercase;
 100 }
 101 tr{
 102 }
 103 p {
 104     /*line-height: 1.2;*/
 105     margin-bottom: 1em;
 106 }
 107 p  a {
 108         text-decoration: underline
 109 }
 110
 111 em {
 112     font-family: "RegloBold";
 113     font-style: normal;
 114 }
 115 strong{
 116         text-transform: uppercase;}
 117 blockquote {
 118         padding: 1em;
 119         font-style:italic;
 120 }
 121
 122 dl{}
 123 dt, dd{
 124         letter-spacing:1px;
 125         line-height: 150%;
 126 }
 127 dt {
 128         float:left;
 129         font-family: "RegloBold";
 130         margin-right: 0.3em;
 131 }
 132 dd {
 133         font-family: "RegloNormal";
 134 }
 135
 136 dt:after {
 137     content: ":";
 138 }
 139
 140 dl.metadata dt {
 141         clear: none;
 142         margin: 0;
 143 }
 144
 145 dl.metadata dd {
 146         margin-right: 4px;
 147     }
 148
 149 button {display:inline-block;}
 150 button {
 151         font-family: "RegloBold";
 152         text-transform: uppercase;
 153 }
 154 ul, ol, dl {
 155         margin: 0;
 156         padding: 0 0 0 2em;
 157 }
 158 nav ul, ul.inline, ul.custom, ul.custom li{
 159         list-style: none;
 160         margin: 0;
 161         padding: 0;
 162 }
 163 nav ul li, ul.inline li{
 164         display:inline;
 165 }
 166 ul.list{
 167         list-style-type:square; /*Not working but why?*/
 168         list-style-position:inside;
 169 }
 170 ul.list > li{
 171         padding:0.5em 0 0.5em 0;
 172         border-bottom:1px solid #ccc;
 173 }
 174
 175 /******************/
 176 /*USEFULL CLASSES */
 177 /******************/
 178
 179
 180 ul.distributed{
 181         display:table;
 182         width:100%;
 183         text-align:center;
 184         margin:0;
 185         padding:0;
 186         border-collapse:collapse;
 187 }
 188 ul.distributed li{
 189         display:table-cell;
 190         text-align:center;
 191 }
 192 ul.distributed.by2 li{
 193         width:50%;
 194 }
 195 ul.distributed.by3 li{
 196         width:33%;
 197 }
 198 ul.distributed.by4 li{
 199         width:25%;
 200 }
 201 ul.distributed.by5 li{
 202         width:20%;
 203 }
 204 ul.distributed.by6 li{
 205         width:16.6666%;
 206 }
 207 ul.distributed.by7 li{
 208         width:14.285%;
 209 }
 210
 211 a.active, button.active{
 212         font-weight:bold;
 213         text-decoration:none;
 214         border-bottom: 2px solid;
 215 }
 216 .active *{
 217         font-weight:inherit;
 218 }
 219
 220 .todo:hover, .todo *:hover{
 221         text-decoration: line-through;
 222         color:red !important;
 223 }
 224
 225
 226 .focusFade {
 227     -webkit-transition-property: color;
 228     -webkit-transition-duration: 0.2s;
 229     -webkit-transition-timing-function: ease;
 230     }
 231
 232 .extra-margin {
 233     margin-bottom: 16px;
 234 }
 235 .ellipsis{
 236    white-space: nowrap;
 237    text-overflow: ellipsis;
 238    overflow: hidden;
 239 }
 240 .block {display:block;}
 241 .inBlock{display:inline-block;}
 242 .right{float:right;margin-left:1em;}
 243 .left{float:left;margin-right:1em;}
 244 .userContent .right, .userContent .left{
 245         margin-bottom:1.5em;
 246 }
 247 img.right, img.left{max-width:50%;}
 248 .smooth{opacity:0.5;}
 249 .hidden{display:none;}
 250 .invisible{visibility:hidden;}
 251 .padded{padding:1.5em;}
 252 .marged{margin:1.5em 0 1.5em 0;}
 253
 254 .small{ font-size: 80%;}
 255 .big{   font-size: 150%;}
 256 .huge{  font-size: 200%;}
 257
 258 .absolute{
 259         position:absolute;
 260 }
 261 .relative{
 262         position:relative;
 263 }
 264 .nowrap {
 265         white-space: nowrap;
 266 }
 267 .center{
 268         text-align:center;
 269         margin-left:auto;
 270         margin-right:auto;
 271 }
 272
 273 .loading{
 274    -webkit-animation: loading 1s infinite linear;
 275    -moz-animation: loading 1s infinite linear;
 276    -o-animation: loading 1s infinite linear;
 277    animation: loading 1s infinite linear;
 278 }
 279 @-webkit-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 280 @-moz-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 281 @-o-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 282 @keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 283
 284 .spinning {
 285    position:relative;
 286    /*
 287    -webkit-animation: rotation 10s infinite linear;
 288    -moz-animation: rotation 10s infinite linear;
 289    -o-animation: rotation 10s infinite linear;
 290    animation: rotation 10s infinite linear;
 291    */
 292 }
 293 @-webkit-keyframes rotation {
 294    from {-webkit-transform: rotate(0deg);}
 295    to {-webkit-transform: rotate(359deg);}
 296 }
 297 @-moz-keyframes rotation {
 298    from {-moz-transform: rotate(0deg);}
 299    to {-moz-transform: rotate(359deg);}
 300 }
 301 @-o-keyframes rotation {
 302    from {-o-transform: rotate(0deg);}
 303    to {-o-transform: rotate(359deg);}
 304 }
 305 @keyframes rotation {
 306    from {transform: rotate(0deg);}
 307    to {transform: rotate(359deg);}
 308 }
 309 .vertical {
 310         -webkit-transform: rotate(-90deg);
 311         -moz-transform: rotate(-90deg);
 312         -ms-transform: rotate(-90deg);
 313         -o-transform: rotate(-90deg);
 314         filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 315 }
 316 .columns{column-gap: 0; -webkit-column-gap: 0;  -moz-column-gap: 0;}
 317 .columns.padded{column-gap: 2em;        -webkit-column-gap: 2em;        -moz-column-gap: 2em;}
 318 .columns li{
 319         display:inline-block;
 320         width:100%;
 321         column-break-inside: avoid;
 322         -moz-column-break-inside: avoid;
 323         -webkit-column-break-inside: avoid;
 324         break-inside: avoid-column;
 325         -webkit-break-inside: avoid-column;
 326         -moz-break-inside: avoid-column;
 327 }
 328 @media only screen and (min-width: 600px) {
 329         .columns{column-count: 2;       -webkit-column-count: 2;        -moz-column-count: 2;}
 330 }
 331 .columns.by3{column-count: 3;   -webkit-column-count: 3;        -moz-column-count: 3;}
 332
 333 /* And the rest is Eric & Seb, AGPLv3*/
 334
 335 label, select, input, button, textarea{
 336         font-size:inherit;
 337 }
 338 label {
 339         margin-right:1em;
 340         height: 1.2em;
 341         display: inline-block;
 342         text-transform: uppercase;
 343 }
 344
 345 select {
 346     height: 1.2em;
 347     -webkit-appearance: none;
 348     -moz-appearance: window;
 349 }
 350
 351 select[multiple],
 352 select[size] {
 353     height: auto;
 354     background-image: inherit;
 355 }
 356
 357 input[type=date] {
 358     -webkit-appearance: none;
 359     -moz-appearance: window;
 360 }
 361
 362 select, select option {
 363     height: 1.2em;
 364     text-transform: none;
 365 }
 366
 367 input, select {
 368     height: 1.2em;
 369     background: #fff;
 370     border: 1px inset #aaa;
 371 }
 372
 373
 374 input[type=text], textarea{
 375         width: 100%;
 376         max-width:10em;
 377         display: inline-block;
 378         border:2px solid black;
 379         border-radius:0.2em;
 380         -moz-border-radius:0.2em;
 381         -webkit-border-radius:0.2em;
 382 }
 383
 384 input[type=submit] {
 385     text-align: left;
 386     border: none;
 387 }
 388
 389 /**
 390  * For modern browsers
 391  * 1. The space content is one way to avoid an Opera bug when the
 392  *    contenteditable attribute is included anywhere else in the document.
 393  *    Otherwise it causes space to appear at the top and bottom of elements
 394  *    that are clearfixed.
 395  * 2. The use of `table` rather than `block` is only necessary if using
 396  *    `:before` to contain the top-margins of child elements.
 397  */
 398 .cf:before, .cf:after {
 399     content: " "; /* 1 */
 400     display: table; /* 2 */
 401 }
 402
 403 .cf:after {
 404     clear: both;
 405 }
 406
 407 /**
 408  * For IE 6/7 only
 409  * Include this rule to trigger hasLayout and contain floats.
 410  */
 411 .cf {
 412     *zoom: 1;
 413 }
 414
 415 /* icons */
 416
 417 @font-face {
 418   font-family: 'FontAwesome';
 419   src: url('../font-awesome/font/fontawesome-webfont.eot?v=3.2.1');
 420   src: url('../font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font-awesome/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font-awesome/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font-awesome/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 421   font-weight: normal;
 422   font-style: normal;
 423 }
 424 /* FONT AWESOME CORE
 425  * -------------------------- */
 426 [class^="icon-"],
 427 [class*=" icon-"] {
 428   font-family: FontAwesome;
 429   font-weight: normal;
 430   font-style: normal;
 431   text-decoration: inherit;
 432   -webkit-font-smoothing: antialiased;
 433   *margin-right: .3em;
 434 }
 435 [class^="icon-"]:before,
 436 [class*=" icon-"]:before {
 437   text-decoration: inherit;
 438   display: inline-block;
 439   speak: none;
 440 }
 441 /* makes sure icons active on rollover in links */
 442 a [class^="icon-"],
 443 a [class*=" icon-"] {
 444   display: inline;
 445 }
 446
 447 /* reglo symbols variants */
 448 [class^="icon-"].resymbol,
 449 [class*=" icon-"].resymbol {
 450   font-family: Symbols;
 451 }
 452
 453 /* specific icon classes */
 454 .icon-archive:before { content: "\f187"; }
 455 .icon-bolt:before { content: "\f0e7"; }
 456 .icon-bullhorn:before { content: "\f0a1"; }
 457 .icon-calendar:before { content: "\f073"; }
 458 .icon-check:before { content: "\f046"; }
 459 .icon-check-empty:before { content: "\f096"; }
 460 .icon-chevron-sign-left:before { content: "\f137"; }
 461 .icon-chevron-sign-right:before { content: "\f138"; }
 462 .icon-comments:before { content: "\f086"; }
 463 .icon-double-angle-left:before { content: "\f100"; }
 464 .icon-download:before { content: "\f01a"; }
 465 .icon-envelope:before { content: "\f0e0"; }
 466 .icon-file:before { content: "\f15b"; }
 467 .icon-globe:before { content: "\f0ac"; }
 468 .icon-headphones:before { content: "\f025"; }
 469 .icon-home:before { content: "\f015"; }
 470 .icon-info-sign:before { content: "\f05a"; }
 471 .icon-microphone:before { content: "\f130"; }
 472 .icon-pause:before { content: "\f04c"; }
 473 .icon-play:before { content: "\f04b"; }
 474 .icon-play-sign:before { content: "\f144"; }
 475 .icon-plus-sign:before { content: "\f055"; }
 476 .icon-question-sign:before { content: "\f059"; }
 477 .icon-remove:before { content: "\f00d"; }
 478 .icon-rss:before { content: "\f09e"; }
 479 .icon-search:before { content: "\f002"; }
 480 .icon-share:before { content: "\f045"; }
 481 .icon-step-backward:before { content: "\f048"; }
 482 .icon-step-forward:before { content: "\f051"; }
 483 .icon-stop:before { content: "\f04d"; }
 484 .icon-trash:before { content: "\f014"; }
 485 .icon-volume-up:before { content: "\f028"; }