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