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 .sr-only {
 180         position: absolute !important;
 181         width: 1px !important;
 182         height: 1px !important;
 183         padding: 0 !important;
 184         margin: -1px !important;
 185         overflow: hidden !important;
 186         clip: rect(0, 0, 0, 0) !important;
 187         white-space: nowrap !important;
 188         border: 0 !important;
 189 }
 190
 191 ul.distributed{
 192         display:table;
 193         width:100%;
 194         text-align:center;
 195         margin:0;
 196         padding:0;
 197         border-collapse:collapse;
 198 }
 199 ul.distributed li{
 200         display:table-cell;
 201         text-align:center;
 202 }
 203 ul.distributed.by2 li{
 204         width:50%;
 205 }
 206 ul.distributed.by3 li{
 207         width:33%;
 208 }
 209 ul.distributed.by4 li{
 210         width:25%;
 211 }
 212 ul.distributed.by5 li{
 213         width:20%;
 214 }
 215 ul.distributed.by6 li{
 216         width:16.6666%;
 217 }
 218 ul.distributed.by7 li{
 219         width:14.285%;
 220 }
 221
 222 a.active, button.active{
 223         font-weight:bold;
 224         text-decoration:none;
 225         border-bottom: 2px solid;
 226 }
 227 .active *{
 228         font-weight:inherit;
 229 }
 230
 231 .todo:hover, .todo *:hover{
 232         text-decoration: line-through;
 233         color:red !important;
 234 }
 235
 236
 237 .focusFade {
 238     -webkit-transition-property: color;
 239     -webkit-transition-duration: 0.2s;
 240     -webkit-transition-timing-function: ease;
 241     }
 242
 243 .extra-margin {
 244     margin-bottom: 16px;
 245 }
 246 .ellipsis{
 247    white-space: nowrap;
 248    text-overflow: ellipsis;
 249    overflow: hidden;
 250 }
 251 .block {display:block;}
 252 .inBlock{display:inline-block;}
 253 .right{float:right;margin-left:1em;}
 254 .left{float:left;margin-right:1em;}
 255 .userContent .right, .userContent .left{
 256         margin-bottom:1.5em;
 257 }
 258 img.right, img.left{max-width:50%;}
 259 .smooth{opacity:0.5;}
 260 .hidden{display:none;}
 261 .invisible{visibility:hidden;}
 262 .padded{padding:1.5em;}
 263 .marged{margin:1.5em 0 1.5em 0;}
 264
 265 .small{ font-size: 80%;}
 266 .big{   font-size: 150%;}
 267 .huge{  font-size: 200%;}
 268
 269 .absolute{
 270         position:absolute;
 271 }
 272 .relative{
 273         position:relative;
 274 }
 275 .nowrap {
 276         white-space: nowrap;
 277 }
 278 .center{
 279         text-align:center;
 280         margin-left:auto;
 281         margin-right:auto;
 282 }
 283
 284 .loading{
 285    -webkit-animation: loading 1s infinite linear;
 286    -moz-animation: loading 1s infinite linear;
 287    -o-animation: loading 1s infinite linear;
 288    animation: loading 1s infinite linear;
 289 }
 290 @-webkit-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 291 @-moz-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 292 @-o-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 293 @keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 294
 295 .spinning {
 296    position:relative;
 297    /*
 298    -webkit-animation: rotation 10s infinite linear;
 299    -moz-animation: rotation 10s infinite linear;
 300    -o-animation: rotation 10s infinite linear;
 301    animation: rotation 10s infinite linear;
 302    */
 303 }
 304 @-webkit-keyframes rotation {
 305    from {-webkit-transform: rotate(0deg);}
 306    to {-webkit-transform: rotate(359deg);}
 307 }
 308 @-moz-keyframes rotation {
 309    from {-moz-transform: rotate(0deg);}
 310    to {-moz-transform: rotate(359deg);}
 311 }
 312 @-o-keyframes rotation {
 313    from {-o-transform: rotate(0deg);}
 314    to {-o-transform: rotate(359deg);}
 315 }
 316 @keyframes rotation {
 317    from {transform: rotate(0deg);}
 318    to {transform: rotate(359deg);}
 319 }
 320 .vertical {
 321         -webkit-transform: rotate(-90deg);
 322         -moz-transform: rotate(-90deg);
 323         -ms-transform: rotate(-90deg);
 324         -o-transform: rotate(-90deg);
 325         filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 326 }
 327 .columns{column-gap: 0; -webkit-column-gap: 0;  -moz-column-gap: 0;}
 328 .columns.padded{column-gap: 2em;        -webkit-column-gap: 2em;        -moz-column-gap: 2em;}
 329 .columns li{
 330         display:inline-block;
 331         width:100%;
 332         column-break-inside: avoid;
 333         -moz-column-break-inside: avoid;
 334         -webkit-column-break-inside: avoid;
 335         break-inside: avoid-column;
 336         -webkit-break-inside: avoid-column;
 337         -moz-break-inside: avoid-column;
 338 }
 339 @media only screen and (min-width: 600px) {
 340         .columns{column-count: 2;       -webkit-column-count: 2;        -moz-column-count: 2;}
 341 }
 342 .columns.by3{column-count: 3;   -webkit-column-count: 3;        -moz-column-count: 3;}
 343
 344 /* And the rest is Eric & Seb, AGPLv3*/
 345
 346 label, select, input, button, textarea{
 347         font-size:inherit;
 348 }
 349 label {
 350         margin-right:1em;
 351         height: 1.2em;
 352         display: inline-block;
 353         text-transform: uppercase;
 354 }
 355
 356 select {
 357     height: 1.2em;
 358     -webkit-appearance: none;
 359     -moz-appearance: window;
 360 }
 361
 362 select[multiple],
 363 select[size] {
 364     height: auto;
 365     background-image: inherit;
 366 }
 367
 368 input[type=date] {
 369     -webkit-appearance: none;
 370     -moz-appearance: window;
 371 }
 372
 373 select, select option {
 374     height: 1.2em;
 375     text-transform: none;
 376 }
 377
 378 input, select {
 379     height: 1.2em;
 380     background: #fff;
 381     border: 1px inset #aaa;
 382 }
 383
 384
 385 input[type=text], textarea{
 386         width: 100%;
 387         max-width:10em;
 388         display: inline-block;
 389         border:2px solid black;
 390         border-radius:0.2em;
 391         -moz-border-radius:0.2em;
 392         -webkit-border-radius:0.2em;
 393 }
 394
 395 input[type=submit] {
 396     text-align: left;
 397     border: none;
 398 }
 399
 400 /**
 401  * For modern browsers
 402  * 1. The space content is one way to avoid an Opera bug when the
 403  *    contenteditable attribute is included anywhere else in the document.
 404  *    Otherwise it causes space to appear at the top and bottom of elements
 405  *    that are clearfixed.
 406  * 2. The use of `table` rather than `block` is only necessary if using
 407  *    `:before` to contain the top-margins of child elements.
 408  */
 409 .cf:before, .cf:after {
 410     content: " "; /* 1 */
 411     display: table; /* 2 */
 412 }
 413
 414 .cf:after {
 415     clear: both;
 416 }
 417
 418 /**
 419  * For IE 6/7 only
 420  * Include this rule to trigger hasLayout and contain floats.
 421  */
 422 .cf {
 423     *zoom: 1;
 424 }
 425
 426 /* icons */
 427
 428 @font-face {
 429         font-family: 'FontAwesome';
 430         src: url('/static/xstatic/fonts/fontawesome-webfont.eot');
 431         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');
 432         font-weight: normal;
 433         font-style: normal;
 434 }
 435
 436 /* FONT AWESOME CORE
 437  * -------------------------- */
 438 [class^="icon-"],
 439 [class*=" icon-"] {
 440   font-family: FontAwesome;
 441   font-weight: normal;
 442   font-style: normal;
 443   text-decoration: inherit;
 444   -webkit-font-smoothing: antialiased;
 445   *margin-right: .3em;
 446 }
 447 [class^="icon-"]:before,
 448 [class*=" icon-"]:before {
 449   text-decoration: inherit;
 450   display: inline-block;
 451   speak: none;
 452 }
 453 /* makes sure icons active on rollover in links */
 454 a [class^="icon-"],
 455 a [class*=" icon-"] {
 456   display: inline;
 457 }
 458
 459 /* reglo symbols variants */
 460 [class^="icon-"].resymbol,
 461 [class*=" icon-"].resymbol {
 462   font-family: Symbols;
 463 }
 464
 465 /* specific icon classes */
 466 .icon-archive:before { content: "\f187"; }
 467 .icon-bolt:before { content: "\f0e7"; }
 468 .icon-bullhorn:before { content: "\f0a1"; }
 469 .icon-calendar:before { content: "\f073"; }
 470 .icon-check:before { content: "\f046"; }
 471 .icon-check-empty:before { content: "\f096"; }
 472 .icon-chevron-sign-left:before { content: "\f137"; }
 473 .icon-chevron-sign-right:before { content: "\f138"; }
 474 .icon-comments:before { content: "\f086"; }
 475 .icon-double-angle-left:before { content: "\f100"; }
 476 .icon-download:before { content: "\f01a"; }
 477 .icon-envelope:before { content: "\f0e0"; }
 478 .icon-file:before { content: "\f15b"; }
 479 .icon-globe:before { content: "\f0ac"; }
 480 .icon-headphones:before { content: "\f025"; }
 481 .icon-home:before { content: "\f015"; }
 482 .icon-info-sign:before { content: "\f05a"; }
 483 .icon-microphone:before { content: "\f130"; }
 484 .icon-pause:before { content: "\f04c"; }
 485 .icon-play:before { content: "\f04b"; }
 486 .icon-play-sign:before { content: "\f144"; }
 487 .icon-plus-sign:before { content: "\f055"; }
 488 .icon-question-sign:before { content: "\f059"; }
 489 .icon-remove:before { content: "\f00d"; }
 490 .icon-rss:before { content: "\f09e"; }
 491 .icon-search:before { content: "\f002"; }
 492 .icon-share:before { content: "\f045"; }
 493 .icon-step-backward:before { content: "\f048"; }
 494 .icon-step-forward:before { content: "\f051"; }
 495 .icon-stop:before { content: "\f04d"; }
 496 .icon-trash:before { content: "\f014"; }
 497 .icon-volume-up:before { content: "\f028"; }