panikweb_templates/static/css/specifics.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
  14 .episode.inline{
  15         color:#999;
  16 }
  17 /* FONTS */
  18 h1.title{
  19         text-transform: uppercase;
  20 }
  21 .date, .dateBloc {
  22         text-align: center;
  23         font-family: "Reglo";
  24         text-transform: uppercase;
  25 }
  26 .dateBloc span{display:block;}
  27 .dateBloc *{line-height: 100%;}
  28 .dateBloc  .day {font-size: 2.2em;}
  29 .dateBloc .number {font-size: 2.2em;}
  30 .dateBloc  .month {font-size: 0.8em;}
  31 .dateBloc .time {font-size: 1.2em;}
  32
  33 .tabs .ui-tabs-nav {
  34     font-family: "Reglo";
  35     text-transform: uppercase;
  36 }
  37 .legend{
  38         font-size:1.2em;
  39         font-weight:bold;
  40         border-bottom:3px solid black;
  41         padding: 0.2em 0 0.2em 0;
  42         margin: 0.2em 0 0.2em 0;
  43 }
  44 /* SIZES
  45
  46 @xxs: 8px;
  47 @xs: 10px;
  48 @s: 12px;
  49 @m: 16px;
  50 @l: 20px;
  51 @xl: 36px;
  52 @xxl: 60px;
  53 @xxxl: 80px;
  54 @xxs: 0.667em;
  55 @xs: 0.833em;
  56 @s: 1em;
  57 @m: 1.33em;
  58 @l: 1.66em;
  59 @xl: 3em;
  60 @xxl: 5em;
  61 @xxxl: 6.667em;
  62
  63 @player-width: 210px;
  64 @content-width: 498px;
  65 @breves-width: 370px;
  66 */
  67 /*@wrapper-width: @player-width + 60px + @content-width + 50px + @breves-width;*/
  68 /*@wrapper-width:auto;*/
  69 /*@import "mixins";*/
  70 /*@import "forms";*/
  71
  72 /* GLOBAL STYLES */
  73
  74 body {
  75     background-color: white;
  76     color: #000305;
  77     font-size: 14px;
  78     font-family: "RegloNormal";
  79     line-height: 1.5;
  80     text-align: left;
  81     margin:40px auto;
  82     /*padding: 0px 10px;*/
  83     clear: both;
  84 }
  85 #main {padding:1em;}
  86 .wrapper {width: auto;}
  87 @media screen and (min-width:300px) and (max-width: 400px) {
  88         #main {font-size: 85%;}
  89 }
  90 @media screen and (min-width:400px) and (max-width: 780px) {
  91         #main {font-size: 90%;}
  92 }
  93
  94
  95 .symbol{
  96         font-size: 3em !important;
  97         font-family: "RegloSymbol" !important;
  98         line-height: 70% !important;
  99 }
 100 .symbol.big{
 101         font-size: 4em !important;
 102 }
 103 .symbol.huge{
 104         font-size: 6em !important;
 105 }
 106
 107 .label {
 108     text-transform: uppercase;
 109     font-family: "Reglo";
 110     letter-spacing:1px;
 111     font-size:1.3em;
 112     background-color:black;
 113     position: absolute;
 114     left:10px;
 115     top:-5px;
 116     color:white;
 117     padding:5px 7px 0px 7px;
 118 }
 119 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
 120 nav.menu{
 121         width:100%;
 122         text-align: justify;
 123         text-justify: distribute-all-lines;
 124 }
 125 nav.menu li{
 126         display: inline-block;
 127         margin-right:2em;
 128 }
 129
 130 button.tag {
 131         font-size: 0.8em;
 132         font-family: "RegloBold";
 133         letter-spacing: 1px;
 134         text-transform: uppercase;
 135         display:inline-block;
 136         border: 1px solid black;
 137         margin: 2px 2px;
 138         padding: 3px 3px 0px 3px;
 139         border-radius: 7px;
 140         -moz-border-radius: 7px;
 141 }
 142 .list > li{
 143     padding:0.5em;
 144     min-height: 2.5em;
 145     border-bottom: 1px solid #000000;
 146 }
 147
 148 /**** TABS ****/
 149
 150
 151 /* GLOBAL SITE NAV */
 152
 153 #search-form{content:'Rechercher';}
 154 #search-form:focus{content:'';}
 155 #metaNav {
 156         color:white;
 157         background-color: black;
 158         position:fixed;
 159         top:0px;
 160         width:100%;
 161         font-family: "Reglo";
 162         text-transform: uppercase;
 163 }
 164 #metaNav input {float:right;width:150px;}
 165 #metaNav nav{
 166         padding: 0.5em 0 0 0.5em;
 167         margin-right:150px;
 168 }
 169
 170 #metaNav nav{
 171 }
 172 #metaNav ul,#metaNav li{margin:0 !important;padding:0 !important;}
 173 #metaNav ul li{
 174         display: inline-block;
 175         max-width:20%;
 176         white-space: nowrap;
 177         text-overflow: ellipsis;
 178         overflow:hidden;
 179 }
 180 #metaNav ul li a{
 181         color:white;
 182         margin-right:1em;
 183         letter-spacing:1px;
 184 }
 185
 186
 187 #siteNav > div {
 188     float:left;
 189     }
 190
 191 #advanced > div {
 192     float: left;
 193 }
 194 /*
 195 .menuMedia {
 196     color: @orange;
 197     width: @player-width;
 198     a, a:active, a:visited {
 199         color: @orange;
 200     }
 201 }
 202
 203 .menuEmissions {
 204     color: @black;
 205     width: @content-width;
 206     margin-left:60px;
 207 }
 208
 209 .menuNews {
 210     color: @blue;
 211     width: @breves-width;
 212     margin-left:50px;
 213     a, a:active, a:visited {
 214       color: @blue;
 215     }
 216 }
 217
 218 .absolute {
 219     background-color:@orange;
 220     position: absolute;
 221     left:10px;
 222     top:-5px;
 223     color:white;
 224     padding:5px 7px 0px 7px;
 225 }
 226 */
 227
 228
 229 /****************************************************/
 230 /**** PLAYER ****/
 231 #Home #player{   float: left; }
 232
 233 #player{
 234         max-width:300px;
 235 }
 236 #player .controls, #player hr{border-width:3px 0;}
 237 #player .item{border-width:1px 0;}
 238 #player img {border-width:2px;}
 239
 240 #player .direct {       position:relative;}
 241 #player .direct img {   width:100%;}
 242 #player .direct .control {
 243         font-size: 100px;
 244         position:absolute;
 245         margin-left:75px;
 246         margin-top:10px;
 247 }
 248
 249 #player .controls {
 250     text-align: center;
 251     margin: 0 0 1em 0;
 252 }
 253
 254 #player hr {
 255     height: 1px;
 256     border: 0;
 257 }
 258 #player .current{
 259         margin-top:1em;
 260 }
 261
 262 #player .playlist .item {
 263         min-height:60px;
 264         margin:20px 0;
 265 }
 266 #player .playlist .item img{    float:left;}
 267
 268 /*
 269 .previousNext {
 270         margin: 40px 0 16px 0;
 271         height: 22px;
 272 }
 273
 274 .previousNext .symbol {
 275         width:50px;
 276         height: 22px;
 277         background-color:@orange;
 278         color:white;
 279         font-size:@l;
 280         text-align:center;
 281         margin-right:2px;
 282         padding-top:6px;
 283 }
 284 */
 285
 286
 287 /****************************************************/
 288 /**** EMISSIONS ****/
 289 #Emission{max-width:600px;}
 290 #Emission .emission-detail .title{}
 291 /**** Detail    ****/
 292 .emission-detail .metas {
 293     float: left;
 294     width: 40%;
 295     margin: 0 1em 1em 0 ;
 296     }
 297 .emission-detail .description{
 298         font-family: "RegloBold";
 299         font-size: 1.3em;
 300 }
 301 .emission-detail .logo{max-width:50%;}
 302 @media screen and (max-width: 300px) {
 303         .emission-detail .metas {
 304                 float: none;
 305                 width: auto;
 306                 margin: 0;
 307         }
 308         .emission-detail .logo{max-width:100%;}
 309 }
 310 .emission-detail .schedule{
 311         font-family: "RegloBold";
 312         line-height: 175%;
 313         font-size: 17.6px;
 314         text-transform: inherit;
 315 }
 316 .emission-detail .control {
 317     text-transform: uppercase;
 318     font-family: "Reglo";
 319         white-space: nowrap;
 320         text-overflow: ellipsis;
 321         overflow: hidden;
 322 }
 323 .emission-detail .control .symbol{
 324         font-size: 6em;
 325         line-height: 80%;
 326         float:left;
 327 }
 328 .emission .control .listen{
 329         line-height:5em;
 330 }
 331
 332 .emission .mainHeader {
 333     overflow: hidden;
 334     margin-bottom:1.5em;
 335 }
 336 /**** Inline    ****/
 337 .emission-inline {
 338 }
 339
 340 .emission-inline div.date {
 341         min-height: 3em;
 342         text-align: center;
 343         display:inline-block;
 344         float:left;
 345         margin-right:1em;
 346 }
 347 .emission-inline .controls {
 348     margin-top:0px;
 349     text-align: center;
 350     float:right;
 351 }
 352
 353 .emission-inline .controls .symbol {
 354     margin-right:5px;
 355     float:left;
 356 }
 357 .emission-inline .link {
 358         display:block;
 359     padding-right: 50px;
 360 }
 361 .emission-inline .archived *{
 362         color:#aaa;
 363 }
 364
 365 .emission-inline .link .description {
 366         margin: 0px 0 5px 0;
 367         font-family: "RegloMedium";
 368 }
 369
 370
 371 /**** EPISODE ****/
 372 /**** Liste   ****/
 373 .episodes .list > li{
 374     border-bottom: 0px solid #000000;
 375 }
 376 /**** Detail  ****/
 377 .episode-detail {
 378         min-height: 100px;
 379 }
 380
 381 .episode-detail img {
 382         margin-top: 17px;
 383         border: 2px solid black;
 384 }
 385
 386 .episode-detail .title{
 387
 388 }
 389 .episode-detail .date{
 390         float: left;
 391 }
 392 .episode-detail .logo,
 393  .episode-detail .controls{
 394         float: right;
 395 }
 396
 397 @media screen and (max-width: 300px) {
 398         .episode-detail .logo{display:none;}
 399 }
 400 .episode-detail .date {
 401         width: 3.5em;
 402         text-align: center;
 403         margin-right: 1em;
 404 }
 405 .episode-detail .date .day, .emission-detail .date .day {
 406         margin-top: 20px;
 407 }
 408
 409 .episode-detail .date .time, .emission-details .time {
 410         margin: 5px 0 10px 0;
 411         font-size: 1.2em;
 412 }
 413
 414 .episode-detail .content {
 415         padding-left: 5em;
 416 }
 417
 418 .episode-detail .content .title {
 419         margin: 16px 0 10px 0;
 420 }
 421
 422 .episode-detail .logo {
 423         width: 100px;
 424         margin:0px 1em;
 425         max-width:20%;
 426 }
 427 .episode-detail .logo img{
 428         width:100%;
 429 }
 430
 431 .episode-detail .controls {
 432         margin-top: 10px;
 433         width: 90px;
 434         text-align: center;
 435 }
 436 .episode.inline .date{ font-size:50%; margin-top:1em;}
 437
 438 .episode.inline .content {
 439         padding-left: 5em;
 440 }
 441 /**** PROGRAM ****/
 442
 443 .program .dateBloc {
 444         float:left;
 445         padding-top:1em;
 446         margin-right:2em;
 447 }
 448
 449