espeweb/static/css/_general.scss

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