panikweb_templates/static/css/style.less

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