panikweb_templates/static/css/general.css

   1 /******************/
   2 /*HTML TAG DISPLAYS */
   3 /******************/
   4 body {
   5         font-family: "RegloNormal";
   6         line-height: normal;
   7         text-align: left;
   8         margin:1.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         text-align:center;
  47         padding:1em;
  48         font-family: 'RegloBold';
  49 }
  50 h1, h2, h3, h4, h5{
  51         font-family: 'RegloBold';
  52         line-height:1em;
  53         padding:0.2em 0 0.2em 0;
  54 }
  55 h1, h2, h3, h4{
  56         text-transform: uppercase;
  57 }
  58 h1 {    font-size: 6em;}
  59 h2 {    font-size: 4em;}
  60 h3 {    font-size: 3em;}
  61 h4 {    font-size: 1.8em;}
  62 h5 {    font-size: 1.1em;}
  63
  64 /*Specific rules for text writen by final users */
  65 .userContent h1 {       font-size: 2em;}
  66 .userContent h2  {      font-size: 1.7em;}
  67 .userContent h3  {      font-size: 1.5em;}
  68 .cuserContent h4  {     font-size: 1.4em;}
  69 .userContent h5  {      font-size: 1.3em;}
  70 .userContent h1, .userContent h2, .userContent h3, .cuserContent h4, .userContent h5{margin:2em 0 1em 0;}
  71 h1, h2, .squashed{
  72     font-family: 'RegloScale';
  73     }
  74
  75 nav{
  76         padding:0em;
  77         font-family: "RegloBold";
  78         text-transform: uppercase;
  79 }
  80 hr {
  81         height: 0;
  82         margin:0.5em 0 0.5em 0;
  83         padding:0;
  84         border-style:solid;
  85         border-width:2px 0 0 0 ;
  86         border-color:black;
  87 }
  88 table{
  89         margin:auto;
  90         table-layout:fixed;
  91 }
  92 table,td,tr  {
  93         padding:0;
  94         margin:0;
  95         word-wrap: break-word;
  96         text-overflow: ellipsis;
  97         overflow: hidden;
  98         text-align: center;
  99         vertical-align: middle;
 100         border: 1px solid #D0D0D0;
 101         border-collapse:collapse;
 102 }
 103 th {
 104         white-space: nowrap;
 105         text-transform: uppercase;
 106 }
 107 tr{
 108 }
 109 p {
 110     /*line-height: 1.2;*/
 111     margin-bottom: 1em;
 112 }
 113 p  a {
 114         text-decoration: underline
 115 }
 116
 117 em {
 118     font-family:"RegloBold";
 119 }
 120 strong{
 121         text-transform: uppercase;}
 122 blockquote {
 123         font-family:"RegloBold";
 124         color:#aaa;
 125         font-size: 1.5em;
 126         padding: 1em;
 127         font-style:italic;
 128 }
 129
 130 dl{}
 131 dt, dd{
 132         letter-spacing:1px;
 133         line-height: 150%;
 134 }
 135 dt {
 136         float:left;
 137         font-family: "RegloBold";
 138         margin-right: 0.3em;
 139 }
 140 dd {
 141         font-family: "RegloNormal";
 142 }
 143
 144 dt:after {
 145     content: ":";
 146 }
 147
 148 dl.metadata dt {
 149         clear: none;
 150         margin: 0;
 151 }
 152
 153 dl.metadata dd {
 154         margin-right: 4px;
 155     }
 156
 157 button {display:inline-block;}
 158 button {
 159         font-family: "RegloBold";
 160         text-transform: uppercase;
 161 }
 162 ul, ol, dl {
 163         margin: 0;
 164         padding: 0 0 0 2em;
 165 }
 166 nav ul, ul.inline, ul.custom, ul.custom li{
 167         list-style: none;
 168         margin: 0;
 169         padding: 0;
 170 }
 171 nav ul li, ul.inline li{
 172         display:inline;
 173 }
 174 ul.list{
 175         list-style-type:square; /*Not working but why?*/
 176         list-style-position:inside;
 177         column-rule:3px solid #999;
 178         -moz-column-rule:3px solid #999;
 179         -webkit-column-rule:3px solid #999;
 180 }
 181 ul.list > li{
 182         padding:0.5em 0 0.5em 0;
 183         border-bottom:1px solid #ccc;
 184 }
 185
 186 /******************/
 187 /*USEFULL CLASSES */
 188 /******************/
 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 }
 226 .active *{
 227         font-weight:inherit;
 228 }
 229
 230 .todo:hover, .todo *:hover{
 231         text-decoration: line-through;
 232         color:red !important;
 233 }
 234
 235
 236 .focusFade {
 237     -webkit-transition-property: color;
 238     -webkit-transition-duration: 0.2s;
 239     -webkit-transition-timing-function: ease;
 240     }
 241
 242 .extra-margin {
 243     margin-bottom: 16px;
 244 }
 245 .ellipsis{
 246    white-space: nowrap;
 247    text-overflow: ellipsis;
 248    overflow: hidden;
 249 }
 250 .block {display:block;}
 251 .inBlock{display:inline-block;}
 252 .right{float:right;margin-left:1em;}
 253 .left{float:left;margin-right:1em;}
 254 .userContent .right, .userContent .left{
 255         margin-bottom:1.5em;
 256 }
 257 img.right, img.left{max-width:50%;}
 258 .smooth{opacity:0.5;}
 259 .hidden{display:none;}
 260 .invisible{visibility:hidden;}
 261 .padded{padding:1.5em;}
 262 .marged{margin:1.5em 0 1.5em 0;}
 263
 264 .small{ font-size: 80%;}
 265 .big{   font-size: 150%;}
 266 .huge{  font-size: 200%;}
 267
 268 .absolute{
 269         position:absolute;
 270 }
 271 .relative{
 272         position:relative;
 273 }
 274 .nowrap {
 275         white-space: nowrap;
 276 }
 277 .center{
 278         text-align:center;
 279         margin-left:auto;
 280         margin-right:auto;
 281 }
 282
 283 .loading{
 284    -webkit-animation: loading 1s infinite linear;
 285    -moz-animation: loading 1s infinite linear;
 286    -o-animation: loading 1s infinite linear;
 287    animation: loading 1s infinite linear;
 288 }
 289 @-webkit-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 290 @-moz-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 291 @-o-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 292 @keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
 293
 294 .spinning {
 295    position:relative;
 296    -webkit-animation: rotation 10s infinite linear;
 297    -moz-animation: rotation 10s infinite linear;
 298    -o-animation: rotation 10s infinite linear;
 299    animation: rotation 10s infinite linear;
 300 }
 301 @-webkit-keyframes rotation {
 302    from {-webkit-transform: rotate(0deg);}
 303    to {-webkit-transform: rotate(359deg);}
 304 }
 305 @-moz-keyframes rotation {
 306    from {-moz-transform: rotate(0deg);}
 307    to {-moz-transform: rotate(359deg);}
 308 }
 309 @-o-keyframes rotation {
 310    from {-o-transform: rotate(0deg);}
 311    to {-o-transform: rotate(359deg);}
 312 }
 313 @keyframes rotation {
 314    from {transform: rotate(0deg);}
 315    to {transform: rotate(359deg);}
 316 }
 317 .vertical {
 318         -webkit-transform: rotate(-90deg);
 319         -moz-transform: rotate(-90deg);
 320         -ms-transform: rotate(-90deg);
 321         -o-transform: rotate(-90deg);
 322         filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 323 }
 324 .columns{column-gap: 0; -webkit-column-gap: 0;  -moz-column-gap: 0;}
 325 .columns.padded{column-gap: 2em;        -webkit-column-gap: 2em;        -moz-column-gap: 2em;}
 326 .columns li{
 327         display:inline-block;
 328         width:100%;
 329         column-break-inside: avoid;
 330         -moz-column-break-inside: avoid;
 331         -webkit-column-break-inside: avoid;
 332         break-inside: avoid-column;
 333         -webkit-break-inside: avoid-column;
 334         -moz-break-inside: avoid-column;
 335 }
 336 @media only screen and (min-width: 600px) {
 337         .columns{column-count: 2;       -webkit-column-count: 2;        -moz-column-count: 2;}
 338 }
 339 .columns.by3{column-count: 3;   -webkit-column-count: 3;        -moz-column-count: 3;}
 340
 341 /* And the rest is Eric & Seb, AGPLv3*/
 342
 343 label, selct, input, button, textarea{
 344         font-size:inherit;
 345 }
 346 label {
 347         margin-right:1em;
 348         height: 1.2em;
 349         display: inline-block;
 350         text-transform: uppercase;
 351 }
 352
 353 select {
 354     height: 1.2em;
 355     -webkit-appearance: none;
 356     -moz-appearance: window;
 357 }
 358
 359 select[multiple],
 360 select[size] {
 361     height: auto;
 362     background-image: inherit;
 363 }
 364
 365 input[type=date] {
 366     -webkit-appearance: none;
 367     -moz-appearance: window;
 368 }
 369
 370 select, select option {
 371     height: 1.2em;
 372     text-transform: none;
 373 }
 374
 375 input, select {
 376     height: 1.2em;
 377     background: #fff;
 378 }
 379
 380
 381 input[type=text], textarea{
 382         width: 100%;
 383         max-width:10em;
 384         display: inline-block;
 385         border:2px solid black;
 386         border-radius:0.2em;
 387         -moz-border-radius:0.2em;
 388         -webkit-border-radius:0.2em;
 389 }
 390
 391 input[type=submit] {
 392     text-align: left;
 393     border: none;
 394 }
 395
 396 /**
 397  * For modern browsers
 398  * 1. The space content is one way to avoid an Opera bug when the
 399  *    contenteditable attribute is included anywhere else in the document.
 400  *    Otherwise it causes space to appear at the top and bottom of elements
 401  *    that are clearfixed.
 402  * 2. The use of `table` rather than `block` is only necessary if using
 403  *    `:before` to contain the top-margins of child elements.
 404  */
 405 .cf:before, .cf:after {
 406     content: " "; /* 1 */
 407     display: table; /* 2 */
 408 }
 409
 410 .cf:after {
 411     clear: both;
 412 }
 413
 414 /**
 415  * For IE 6/7 only
 416  * Include this rule to trigger hasLayout and contain floats.
 417  */
 418 .cf {
 419     *zoom: 1;
 420 }
 421