panikweb_templates/static/css/_general.scss

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