panikweb_templates/static/css/style.css

   1 /* COLORS
   2
   3 @black: #000000;
   4 @orange: #FF6633;
   5 @blue: #0000FF;
   6 @white: #FFFFFF;
   7  */
   8 .symbol:hover,.control:hover{    color: blue;    }
   9
  10 #player, #player .symbol{    color: #FF6633;    }
  11 #player .label {        background-color:#FF6633;  }
  12 #player .controls, #player hr,player .item,#player img{border-color:#FF6633;}
  13 /* SIZES
  14
  15 @xxs: 8px;
  16 @xs: 10px;
  17 @s: 12px;
  18 @m: 16px;
  19 @l: 20px;
  20 @xl: 36px;
  21 @xxl: 60px;
  22 @xxxl: 80px;
  23 @xxs: 0.667em;
  24 @xs: 0.833em;
  25 @s: 1em;
  26 @m: 1.33em;
  27 @l: 1.66em;
  28 @xl: 3em;
  29 @xxl: 5em;
  30 @xxxl: 6.667em;
  31
  32 @player-width: 210px;
  33 @content-width: 498px;
  34 @breves-width: 370px;
  35 */
  36 /*@wrapper-width: @player-width + 60px + @content-width + 50px + @breves-width;*/
  37 /*@wrapper-width:auto;*/
  38 /*@import "mixins";*/
  39 /*@import "forms";*/
  40
  41 /* GLOBAL STYLES */
  42
  43 body {
  44     background-color: white;
  45     color: #000305;
  46     font-size: 14px;
  47     font-family: "RegloNormal";
  48     line-height: 1.5;
  49     text-align: left;
  50     margin:40px auto;
  51     /*padding: 0px 10px;*/
  52     clear: both;
  53 }
  54 #main {padding:1em;}
  55 .wrapper {width: auto;}
  56 @media screen and (min-width:300px) and (max-width: 400px) {
  57         #main {font-size: 85%;}
  58 }
  59 @media screen and (min-width:400px) and (max-width: 780px) {
  60         #main {font-size: 90%;}
  61 }
  62 /* Mixins & USEFUL CLASSES */
  63 .squash(@x, @y: 1) {
  64     transform: scale(@x, @y);
  65     -webkit-transform: scale(@x, @y);
  66     -moz-transform: scale(@x, @y);
  67     -ms-transform: scale(@x, @y);
  68     -o-transform: scale(@x, @y);
  69     -webkit-transform-origin: 0 0;
  70     -moz-transform-origin: 0 0;
  71     -ms-transform-origin: 0 0;
  72     transform-origin: 0 0;
  73         width:200%;
  74     }
  75
  76 .focusFade {
  77     -webkit-transition-property: color;
  78     -webkit-transition-duration: 0.2s;
  79     -webkit-transition-timing-function: ease;
  80     }
  81
  82 .extra-margin {
  83     margin-bottom: 16px;
  84 }
  85 .ellipsis{
  86    white-space: nowrap;
  87    text-overflow: ellipsis;
  88    overflow: hidden;
  89 }
  90
  91 .symbol{
  92         font-size: 3em;
  93         font-family: "RegloSymbol" !important;
  94         line-height: 70% !important;
  95 }
  96 .symbol.big{
  97         font-size: 4em;
  98 }
  99 .symbol.huge{
 100         font-size: 6em;
 101 }
 102
 103
 104
 105 .label {
 106     text-transform: uppercase;
 107     font-family: "Reglo";
 108     letter-spacing:1px;
 109     font-size:1.3em;
 110     background-color:black;
 111     position: absolute;
 112     left:10px;
 113     top:-5px;
 114     color:white;
 115     padding:5px 7px 0px 7px;
 116 }
 117 /*
 118 .symbol {
 119     font-family: RegloSymbol;
 120     font-size: @xxl*1.5;
 121     line-height: 80%;
 122 }
 123
 124 .symbol-absolute {
 125     position:absolute;
 126     font-family: RegloSymbol;
 127     font-size: @xxl*2;
 128     line-height: 80%;
 129     float: left;
 130     top:21px;
 131     left:68px;
 132 }
 133 */
 134 .block {display:block;}
 135 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
 136 nav.menu{
 137         width:100%;
 138         text-align: justify;
 139         text-justify: distribute-all-lines;
 140 }
 141 nav.menu li{
 142         display: inline-block;
 143         margin-right:2em;
 144 }
 145
 146 /* GLOBAL SITE NAV */
 147
 148 #search-form{content:'Rechercher';}
 149 #search-form:focus{content:'';}
 150 #metaNav {
 151         color:white;
 152         background-color: black;
 153         position:fixed;
 154         top:0px;
 155         width:100%;
 156         font-family: "Reglo";
 157         text-transform: uppercase;
 158 }
 159 #metaNav input {float:right;width:150px;}
 160 #metaNav nav{
 161         padding: 0.5em 0 0 0.5em;
 162         margin-right:150px;
 163 }
 164
 165 #metaNav nav{
 166 }
 167 #metaNav ul,#metaNav li{margin:0 !important;padding:0 !important;}
 168 #metaNav ul li{
 169         display: inline-block;
 170         max-width:20%;
 171         white-space: nowrap;
 172         text-overflow: ellipsis;
 173         overflow:hidden;
 174 }
 175 #metaNav ul li a{
 176         color:white;
 177         margin-right:1em;
 178         letter-spacing:1px;
 179 }
 180
 181
 182 #siteNav > div {
 183     float:left;
 184     }
 185
 186 #advanced > div {
 187     float: left;
 188 }
 189 /*
 190 .menuMedia {
 191     color: @orange;
 192     width: @player-width;
 193     a, a:active, a:visited {
 194         color: @orange;
 195     }
 196 }
 197
 198 .menuEmissions {
 199     color: @black;
 200     width: @content-width;
 201     margin-left:60px;
 202 }
 203
 204 .menuNews {
 205     color: @blue;
 206     width: @breves-width;
 207     margin-left:50px;
 208     a, a:active, a:visited {
 209       color: @blue;
 210     }
 211 }
 212
 213 .absolute {
 214     background-color:@orange;
 215     position: absolute;
 216     left:10px;
 217     top:-5px;
 218     color:white;
 219     padding:5px 7px 0px 7px;
 220 }
 221 */
 222
 223
 224 /****************************************************/
 225 /**** PLAYER ****/
 226 #Home #player{   float: left; }
 227
 228 #player{
 229         max-width:300px;
 230 }
 231 #player .controls, #player hr{border-width:3px 0;}
 232 #player .item{border-width:1px 0;}
 233 #player img {border-width:2px;}
 234
 235 #player .direct {       position:relative;}
 236 #player .direct img {   width:100%;}
 237 #player .direct .control {
 238         font-size: 100px;
 239         position:absolute;
 240         margin-left:75px;
 241         margin-top:10px;
 242 }
 243
 244 #player .controls {
 245     text-align: center;
 246     margin: 0 0 1em 0;
 247 }
 248
 249 #player hr {
 250     height: 1px;
 251     border: 0;
 252 }
 253 #player .current{
 254         margin-top:1em;
 255 }
 256
 257 #player .playlist .item {
 258         min-height:60px;
 259         margin:20px 0;
 260 }
 261 #player .playlist .item img{    float:left;}
 262
 263 /*
 264 .previousNext {
 265         margin: 40px 0 16px 0;
 266         height: 22px;
 267 }
 268
 269 .previousNext .symbol {
 270         width:50px;
 271         height: 22px;
 272         background-color:@orange;
 273         color:white;
 274         font-size:@l;
 275         text-align:center;
 276         margin-right:2px;
 277         padding-top:6px;
 278 }
 279 */
 280
 281
 282 /****************************************************/
 283 /**** EMISSIONS ****/
 284 /**** Detail    ****/
 285 .emission{max-width:600px;margin:auto;}
 286 .emission-detail .title{
 287         text-transform: uppercase;
 288 }
 289 .emission-detail .metas {
 290     float: left;
 291     width: 40%;
 292     margin: 0 1em 1em 0 ;
 293     }
 294 .emission-detail .description{
 295         font-family: "RegloBold";
 296         font-size: 1.3em;
 297 }
 298 .emission-detail .logo{max-width:50%;}
 299 @media screen and (max-width: 300px) {
 300         .emission-detail .metas {
 301                 float: none;
 302                 width: auto;
 303                 margin: 0;
 304         }
 305         .emission-detail .logo{max-width:100%;}
 306 }
 307 .emission-detail .schedule{
 308         font-family: "RegloBold";
 309         line-height: 175%;
 310         font-size: 17.6px;
 311         text-transform: inherit;
 312 }
 313 .emission-detail .control {
 314     text-transform: uppercase;
 315     font-family: "Reglo";
 316         white-space: nowrap;
 317         text-overflow: ellipsis;
 318         overflow: hidden;
 319 }
 320 .emission-detail .control .symbol{
 321         font-size: 6em;
 322         line-height: 80%;
 323         float:left;
 324 }
 325 .emission .control .listen{
 326         line-height:5em;
 327 }
 328
 329 .emission .mainHeader {
 330     overflow: hidden;
 331     margin-bottom:1.5em;
 332 }
 333 /*
 334 .emission .mainHeader nav {
 335     height: 65px;
 336     margin-top: 20px;
 337 }
 338
 339 .emission .mainHeader nav ul {
 340     font-size: @l;
 341     font-family: "Reglo";
 342     text-transform: uppercase;
 343     margin-bottom: 45px;
 344     transform : scale(1,2);
 345     -webkit-transform:scale(1,2);
 346     -moz-transform:scale(1,2);
 347     -ms-transform:scale(1,2);
 348     -o-transform:scale(1,2);
 349     line-height:1%;
 350     width: 100%;
 351     list-style: none;
 352     margin: 0;
 353     padding: 0;
 354     letter-spacing:1px;
 355 }
 356
 357 .emission .mainHeader nav ul li {
 358     float: left;
 359     display: inline;
 360     width:50%;
 361 }
 362
 363 .emission .mainHeader nav a:link,
 364  .emission  .mainHeader nav a:visited {
 365     color: black;
 366     display: inline-block;
 367     width: 249px;
 368     padding: 20px 0px;
 369     text-align: center;
 370 }
 371
 372 .emission .mainHeader nav a:hover,
 373  .emission .mainHeader nav a:active, .mainHeader nav .active a:link,
 374   .emission  .mainHeader nav .active a:visited {
 375     color: white;
 376     background-color: black;
 377 }
 378 */
 379 /**** Inline    ****/
 380 .emission-inline {
 381     padding:0.5em;
 382     min-height: 2.5em;
 383     border-bottom: 1px solid #000000;
 384     overflow:hidden;
 385 }
 386
 387 .emission-inline div.date {
 388         min-height: 3em;
 389         text-align: center;
 390         display:inline-block;
 391         float:left;
 392         margin-right:1em;
 393 }
 394 /*
 395 .emission-inline .date span {
 396         display:inline-block;
 397         font-family: RegloBold;
 398         text-transform: uppercase;
 399         font-size: @s;
 400         line-height: 100%;
 401 }
 402 */
 403
 404 .emission-inline .controls {
 405     margin-top:0px;
 406     text-align: center;
 407     float:right;
 408 }
 409
 410 .emission-inline .controls .symbol {
 411     margin-right:5px;
 412     float:left;
 413 }
 414 .emission-inline .link {
 415         display:block;
 416     padding-right: 50px;
 417 }
 418 .emission-inline .archived *{
 419         color:#aaa;
 420 }
 421
 422 .emission-inline .link .description {
 423         margin: 0px 0 5px 0;
 424         font-family: "RegloMedium";
 425 }
 426
 427 ul.tagsArchives {
 428         margin-top:5px;
 429         overflow:hidden;
 430         margin-bottom:15px;
 431 }
 432
 433 ul.tagsArchives li {
 434         font-size: 0.8em;
 435         font-family: "RegloBold";
 436         letter-spacing: 1px;
 437         text-transform: uppercase;
 438         float: left;
 439         border: 1px solid black;
 440         margin: 2px 2px;
 441         padding: 3px 3px 0px 3px;
 442         border-radius: 7px;
 443         -moz-border-radius: 7px;
 444 }
 445
 446 /**** EPISODE ****/
 447 /**** Detail    ****/
 448 .episode-detail {
 449         border-top: 3px solid black;
 450         min-height: 100px;
 451 }
 452
 453 .episode-detail img {
 454         margin-top: 17px;
 455         border: 2px solid black;
 456 }
 457
 458 .episode-detail .title{
 459
 460 }
 461 .episode-detail .date{
 462         float: left;
 463 }
 464 .episode-detail .logo,
 465  .episode-detail .controls{
 466         float: right;
 467 }
 468
 469 @media screen and (max-width: 300px) {
 470         .episode-detail .logo{display:none;}
 471 }
 472 .episode-detail .date {
 473         font-family: "Reglo";
 474         text-transform: uppercase;
 475         width: 3.5em;
 476         text-align: center;
 477         margin-right: 1em;
 478 }
 479 .episode-detail .date *{
 480         line-height: 100%;
 481 }
 482 .episode-detail .date .day, .emission-detail .date .day {
 483         margin-top: 20px;
 484         font-size: 2.2em;
 485 }
 486
 487 .episode-detail .date .number {
 488         font-size: 2.2em;
 489 }
 490
 491 .episode-detail .date .month {
 492         font-size: 0.8em;
 493 }
 494 .episode-detail .date .time, .emission-details .time {
 495         margin: 5px 0 10px 0;
 496         font-size: 1.2em;
 497 }
 498
 499 .episode-detail .content {
 500         padding-left: 4em;
 501 }
 502
 503 .episode-detail .content .title {
 504         margin: 16px 0 10px 0;
 505 }
 506
 507 .episode-detail .logo {
 508         width: 100px;
 509         margin:0px 1em;
 510         max-width:20%;
 511 }
 512 .episode-detail .logo img{
 513         width:100%;
 514 }
 515
 516 .episode-detail .controls {
 517         margin-top: 10px;
 518         width: 90px;
 519         text-align: center;
 520 }
 521
 522
 523
 524
 525 /****************************************************/
 526 /**** Breves
 527
 528 .breves, #content.breve {
 529     color:@blue;
 530     a, a:visited, a:active {
 531         color:@blue;
 532     }
 533     a:hover{
 534         color: lighten(@blue, 30%);
 535     }
 536 }
 537
 538 .breves {
 539     width: @breves-width;
 540     float: left;
 541     margin-left: 50px;
 542 }
 543
 544 .breves img {
 545     border: 2px solid @blue;
 546 }
 547
 548 .breves-header span {
 549     background-color: @blue;
 550     color: white;
 551     padding: 10px @s;
 552     height: @s;
 553     font-size: @s;
 554     font-family: RegloBold;
 555     text-transform: uppercase;
 556     display: inline-block;
 557 }
 558
 559 .breves h4 {
 560   clear:both;
 561     margin:10px 0 16px 0;
 562     }
 563
 564
 565
 566 .label p{
 567   margin-top:5px;
 568   margin-right:5px;
 569   float:left;
 570   text-decoration:underline;
 571   }
 572
 573 .breves-big {
 574     width:350px;
 575     margin:0 10px;
 576     float:left
 577 }
 578
 579
 580
 581 .breves-small {
 582     width:165px;
 583     margin:0 10px;
 584     float:left
 585     }
 586
 587 .breves .suite {
 588     margin:10px 0 40px 0;
 589     height:20px;
 590     width:124px;
 591     background-color: @blue;
 592     clear:both;
 593     margin-left: 10px;
 594     }
 595
 596 .breves .symbol {
 597     margin:2px 5px;
 598     color:white;
 599     font-size:@l;
 600     }
 601
 602
 603 .breves .suite p {
 604     color: white;
 605     text-transform: uppercase;
 606     letter-spacing:1px;
 607     font-family: RegloMedium;
 608     font-size:@xs;
 609     padding-top:4px;
 610     }
 611
 612 .breves-image {
 613     position: relative;
 614 }
 615
 616 .breves .trans {
 617     text-transform: uppercase;
 618     font-family: Reglo;
 619     letter-spacing:1px;
 620     font-size:@m;
 621     background-color:@blue;
 622     position: absolute;
 623     left:10px;
 624     top:-5px;
 625     color:white;
 626     padding:5px 7px 0px 7px;
 627 }
 628  ****/
 629
 630
 631 /**** TO REWRITE ****/
 632
 633 /* The h1 needs to be two times bigger, than it’s containing box, because with the matrix transform we’re going to squash it in 2 */
 634 /*
 635 #content h1 {
 636     width: 996px;
 637     }
 638
 639 #content h3 {
 640     margin-bottom:30px;
 641     }
 642
 643 #content {
 644     width: @content-width;
 645     float: left;
 646     margin-left: 60px;
 647 }
 648
 649 #content.wide {
 650     width: 498px + 50px + 370px;
 651 }
 652 a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissions a:active {
 653     color: lighten(@black, 20%);
 654     }
 655
 656 #content hr {
 657     display: block;
 658     height: 1px;
 659     border-top: 3px solid @black;
 660 }
 661
 662
 663
 664
 665 .accordion {
 666     margin-bottom:50px;
 667     }
 668
 669 .accordion .slide-out {
 670     display: none;
 671     }
 672
 673
 674  .accordion .strip {
 675      margin:2px 0;
 676      height:20px;
 677     background-color: @black;
 678     color: white;
 679     font-family:RegloMedium;
 680     text-transform: uppercase;
 681     letter-spacing:1px;
 682     font-size:@xs;
 683     padding-top:4px;
 684     .focusFade();
 685     cursor: pointer;
 686     }
 687
 688 .accordion .strip:hover {
 689     background-color: @black;
 690     }
 691
 692 .accordion .symbol {
 693         color: white;
 694         font-size:@l;
 695         margin: 0px 5px;
 696 }
 697
 698 .a-propos {
 699     margin: 30px 10px;
 700     }
 701
 702 .a-propos p {
 703     margin-bottom:15px;
 704     }
 705
 706 .a-propos h4 {
 707     margin:15px 0;
 708     height: 12px;
 709     background-color:@black;
 710     color:white;
 711     font-family:RegloMedium;
 712     padding:4px;
 713     letter-spacing:1px;
 714     font-size:@xs;
 715     display:inline-block;
 716     }
 717
 718
 719
 720 .associated-sounds {
 721     margin: 30px 0;
 722     .symbols {
 723         font-size:@xl*1.3;
 724         float: right;
 725         line-height:50%;
 726     }
 727     .soundGrey {
 728         background-color:#D0D0D0;
 729     }
 730    div.item {
 731        margin-top: 20px;
 732        padding: 10px;
 733        }
 734     h3 {
 735         margin-bottom:30px;
 736     }
 737     }
 738
 739 */
 740 .todo:hover, .todo *:hover{
 741         text-decoration: line-through;
 742         color:red !important;
 743 }
 744 /**
 745  * For modern browsers
 746  * 1. The space content is one way to avoid an Opera bug when the
 747  *    contenteditable attribute is included anywhere else in the document.
 748  *    Otherwise it causes space to appear at the top and bottom of elements
 749  *    that are clearfixed.
 750  * 2. The use of `table` rather than `block` is only necessary if using
 751  *    `:before` to contain the top-margins of child elements.
 752  */
 753 .cf:before, .cf:after {
 754     content: " "; /* 1 */
 755     display: table; /* 2 */
 756 }
 757
 758 .cf:after {
 759     clear: both;
 760 }
 761
 762 /**
 763  * For IE 6/7 only
 764  * Include this rule to trigger hasLayout and contain floats.
 765  */
 766 .cf {
 767     *zoom: 1;
 768 }