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