panikweb_templates/static/css/_general.scss

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