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