panikweb_templates/static/css/_general.scss

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