Commit d88dc0a1 authored by fred's avatar fred
Browse files

Revert "Leaving LESS"

This reverts commit 8584bb90.
parent 546b2f82
......@@ -19,7 +19,7 @@ time, mark, audio, video {
padding: 0;
border: 0;
font-size: 100%;
/*font: inherit;*/
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
......
/* COLORS */
@black: #000000;
@orange: #FF6633;
@blue: #0000FF;
@white: #FFFFFF;
/* SIZES
@xxs: 8px;
@xs: 10px;
@s: 12px;
@m: 16px;
@l: 20px;
@xl: 36px;
@xxl: 60px;
@xxxl: 80px;
*/
@xxs: 0.667em;
@xs: 0.833em;
@s: 1em;
@m: 1.33em;
@l: 1.66em;
@xl: 3em;
@xxl: 5em;
@xxxl: 6.667em;
@player-width: 210px;
@content-width: 498px;
@breves-width: 370px;
/*@wrapper-width: @player-width + 60px + @content-width + 50px + @breves-width;*/
@wrapper-width:auto;
@import "mixins";
@import "forms";
@import "tags";
body {
background-color: @white;
color: #000305;
font-size: 12px;
font-family: RE01;
line-height: 1.5;
text-align: left;
margin:40px auto;
/*padding: 0px 10px;*/
clear: both;
}
@media screen and (max-width: 300px) {
body {font-size: 9px;}
}
@media screen and (min-width:300px) and (max-width: 400px) {
body {font-size: 10px;}
}
@media screen and (min-width:400px) and (max-width: 800px) {
body {font-size: 11px;}
}
article{font-size: @m;}
/* Mixins & USEFUL CLASSES */
.squash(@x, @y: 1) {
transform: scale(@x, @y);
-webkit-transform: scale(@x, @y);
-moz-transform: scale(@x, @y);
-ms-transform: scale(@x, @y);
-o-transform: scale(@x, @y);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width:200%;
}
.focusFade {
-webkit-transition-property: color;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease;
}
.extra-margin {
margin-bottom: 16px;
}
.ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.wrapper {
width: @wrapper-width;
.clearfix
}
.symbol{
font-family: RE06 !important;
}
.symbol:hover,.control:hover{
color: @blue;
}
.label {
text-transform: uppercase;
font-family: Reglo;
letter-spacing:1px;
font-size:@m;
background-color:@black;
position: absolute;
left:10px;
top:-5px;
color:white;
padding:5px 7px 0px 7px;
}
/*
.symbol {
font-family: RE06;
font-size: @xxl*1.5;
line-height: 80%;
}
.symbol-absolute {
position:absolute;
font-family: RE06;
font-size: @xxl*2;
line-height: 80%;
float: left;
top:21px;
left:68px;
}
*/
.block {display:block;}
button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
width:100%;
text-align: justify;
text-justify: distribute-all-lines;
}
nav.menu li{
display: inline-block;
margin-right:2em;
}
/* GLOBAL STYLES */
#main {padding:1em;}
/* GLOBAL SITE NAV */
#search-form{content:'Rechercher';}
#search-form:focus{content:'';}
#metaNav {
color:white;
background-color: lighten(@black, 10%);
position:fixed;
top:0px;
width:100%;
font-family: Reglo;
text-transform: uppercase;
font-size: @s*1.2;
}
#metaNav input {float:right;width:150px;margin:0.3em;}
#metaNav nav{
padding: 0.3em;
margin-right:150px;
}
#metaNav nav{
}
#metaNav ul,#metaNav li{margin:0 !important;padding:0 !important;}
#metaNav ul li{
display: inline-block;
max-width:20%;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}
#metaNav ul li a{
color:white;
margin-right:1em;
letter-spacing:1px;
}
#siteNav > div {
float:left;
}
#advanced > div {
float: left;
}
#siteNav h2 {
font-size: 120px;
font-family: Reglo;
text-transform: uppercase;
.squash(.5);
}
.menuMedia {
color: @orange;
width: @player-width;
a, a:active, a:visited {
color: @orange;
}
}
.menuEmissions {
color: @black;
width: @content-width;
margin-left:60px;
}
.menuNews {
color: @blue;
width: @breves-width;
margin-left:50px;
a, a:active, a:visited {
color: @blue;
}
}
.absolute {
background-color:@orange;
position: absolute;
left:10px;
top:-5px;
color:white;
padding:5px 7px 0px 7px;
}
/****************************************************/
/**** PLAYER ****/
#player{
color: @orange;
}
#player .label {
background:@orange;
}
#player .symbol{
color: @orange;
font-size: @xxl;
}
#player .direct .control {
font-size: @xxxl;
position:absolute;
left:50%;
top:30px;
margin-left:-@xxl/2;
}
#Home #player{
float: left;
width: @player-width;
}
#player .direct {
position:relative;
}
#player a, #player a:visited, #player a:active {
color: lighten(@orange, 20%);
}
#player .date {
font-size: @m;
clear: both;
margin-top:5px;
}
#player .meta {
font-size: @m;
}
#player .date {
font-family: RE01;
font-size: @m;
line-height: 115%;
margin-bottom:12px;
}
#player .controls {
text-align: center;
margin: 0px 0 15px 0;
border-top: 3px solid @orange;
}
#player hr {
height: 1px;
border: 0;
border-top: 3px solid @orange;
}
#player .current{
margin-top:1em;
}
.previousNext {
margin: 40px 0 16px 0;
height: 22px;
}
.previousNext .symbol {
width:50px;
height: 22px;
background-color:@orange;
color:white;
font-size:@l;
text-align:center;
margin-right:2px;
padding-top:6px;
}
.playlist .item {
min-height:60px;
margin:20px 0;
}
#player img {
border: 2px solid @orange;
}
.direct img {
width:100%;
}
.playlist .item img{
float:left;
}
/****************************************************/
/**** EMISSIONS ****/
/**** Detail ****/
.emission{max-width:600px;margin:auto;}
.emission nav{
margin-bottom:2em;
font-family: RE03;
text-transform: uppercase;
font-size: @s;
}
.emission nav a.active,
.emission nav a:hover{
border-bottom: 3px solid @black;text-decoration:none;
}
.emission-detail{
}
.emission-detail .title{
.squash(0.5);
text-transform: uppercase;
}
.emission-detail .metas {
float: left;
width: 40%;
margin: 0 1em 1em 0 ;
}
.emission-detail .logo{max-width:50%;}
@media screen and (max-width: 300px) {
.emission-detail .metas {
float: none;
width: auto;
margin: 0;
}
.emission-detail .logo{max-width:100%;}
}
.emission-detail .schedule{
font-family: RE03;
line-height: 175%;
font-size: 17.6px;
text-transform: inherit;
}
.emission-detail .control {
text-transform: uppercase;
font-family: Reglo;
font-size:@m;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.emission-detail .control .symbol{
font-size: @xxl*1.1;
line-height: 80%;
float:left;
}
.emission .control .listen{
line-height:5em;
}
.emission-detail .website{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.emission-detail .email{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.emission .mainHeader {
overflow: hidden;
margin-bottom:1.5em;
}
.emission .mainHeader nav {
height: 65px;
margin-top: 20px;
}
.emission .mainHeader nav ul {
font-size: @l;
font-family: Reglo;
text-transform: uppercase;
margin-bottom: 45px;
transform : scale(1,2);
-webkit-transform:scale(1,2);
-moz-transform:scale(1,2);
-ms-transform:scale(1,2);
-o-transform:scale(1,2);
line-height:1%;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
letter-spacing:1px;
}
.emission .mainHeader nav ul li {
float: left;
display: inline;
width:50%;
}
.emission .mainHeader nav a:link,
.emission .mainHeader nav a:visited {
color: @black;
display: inline-block;
width: 249px;
padding: 20px 0px;
text-align: center;
}
.emission .mainHeader nav a:hover,
.emission .mainHeader nav a:active, .mainHeader nav .active a:link,
.emission .mainHeader nav .active a:visited {
color: white;
background-color: @black;
}
/**** Inline ****/
.emission-inline {
padding:0.5em;
min-height: 2.5em;
border-bottom: 1px solid #000000;
overflow:hidden;
}
.emission-inline div.date {
min-height: 3em;
text-align: center;
display:inline-block;
float:left;
margin-right:1em;
}
.emission-inline .date span {
display:inline-block;
font-family: RE03;
text-transform: uppercase;
font-size: @s;
line-height: 100%;
}
.emission-inline .controls {
margin-top:0px;
text-align: center;
float:right;
}
.emission-inline .controls .symbol {
font-size:@xl;
width:20px;
margin-right:5px;
float:left;
}
.emission-inline .link {
display:block;
padding-right: 50px;
}
.emission-inline .archived *{
color:#aaa;
}
.emission-inline .link .description {
font-size: @s;
margin: 0px 0 5px 0;
font-family: RE02;
line-height: 115%;
}
ul.tagsArchives {
margin-top:5px;
overflow:hidden;
margin-bottom:15px;
}
ul.tagsArchives li {
font-size: @xxs;
font-family: RE03;
letter-spacing: 1px;
text-transform: uppercase;
float: left;
border: 1px solid @black;
margin: 2px 2px;
padding: 3px 3px 0px 3px;
border-radius: 7px;
-moz-border-radius: 7px;
}
/**** EPISODE ****/
/**** Detail ****/
.episode-detail {
border-top: 3px solid @black;
min-height: 100px;
}
.episode-detail img {
margin-top: 17px;
border: 2px solid @black;
}
.episode-detail .title{
}
.episode-detail .date{
float: left;
}
.episode-detail .logo,
.episode-detail .controls{
float: right;
}
@media screen and (max-width: 300px) {
.episode-detail .logo{display:none;}
}
.episode-detail .date {
font-family: Reglo;
text-transform: uppercase;
width: 50px;
text-align: center;
margin-right: 5px;
}
.episode-detail .date *{
line-height: 100%;
}
.episode-detail .date .day, .emission-detail .date .day {
margin-top: 20px;
font-size: @l*1.6;
}
.episode-detail .date .number {
font-size: @l*1.6;
}
.episode-detail .date .month {
font-size: @s*0.9;
margin-bottom:1em;
}
.episode-detail .date .time, .emission-details .time {
margin: 5px 0 10px 0;
font-size: @m;
}
.episode-detail .content {
padding-left: 60px;
}
.episode-detail .content .title {
margin: 16px 0 10px 0;
}
.episode-detail .episode-detail .credits dt {
letter-spacing:1px;
font-size: @s*1.1;
font-family: RE03;
line-height: 133%;
}
.episode-detail .episode-detail .credits dd {
letter-spacing:1px;
font-size: @s;
font-family: RE01;
line-height: 150%;
margin-left: 4px;
}
.episode-detail .logo {
width: 100px;
margin-right:0px 1em;
max-width:20%;
}
.episode-detail .logo img{
width:100%;
}
.episode-detail .controls {
width: 77px;
text-align: center;
font-size: @xxl;
line-height: 0px !important;
}
/****************************************************/
/**** Breves ****/
.breves, #content.breve {
color:@blue;
a, a:visited, a:active {
color:@blue;
}
a:hover{
color: lighten(@blue, 30%);
}
}
.breves {
width: @breves-width;
float: left;
margin-left: 50px;
}
.breves img {
border: 2px solid @blue;
}
.breves-header span {
background-color: @blue;
color: white;
padding: 10px @s;
height: @s;