--- /dev/null
+/* 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;
+ font-size: @s;
+ font-family: RE03;
+ text-transform: uppercase;
+ display: inline-block;
+}
+
+.breves h4 {
+ clear:both;
+ margin:10px 0 16px 0;
+ }
+
+
+
+.label p{
+ margin-top:5px;
+ margin-right:5px;
+ float:left;
+ text-decoration:underline;
+ }
+
+.breves-big {
+ width:350px;
+ margin:0 10px;
+ float:left
+}
+
+
+
+.breves-small {
+ width:165px;
+ margin:0 10px;
+ float:left
+ }
+
+.breves .suite {
+ margin:10px 0 40px 0;
+ height:20px;
+ width:124px;
+ background-color: @blue;
+ clear:both;
+ margin-left: 10px;
+ }
+
+.breves .symbol {
+ margin:2px 5px;
+ color:white;
+ font-size:@l;
+ }
+
+
+.breves .suite p {
+ color: white;
+ text-transform: uppercase;
+ letter-spacing:1px;
+ font-family: RE02;
+ font-size:@xs;
+ padding-top:4px;
+ }
+
+.breves-image {
+ position: relative;
+}
+
+.breves .trans {
+ text-transform: uppercase;
+ font-family: Reglo;
+ letter-spacing:1px;
+ font-size:@m;
+ background-color:@blue;
+ position: absolute;
+ left:10px;
+ top:-5px;
+ color:white;
+ padding:5px 7px 0px 7px;
+}
+
+
+
+/**** TO REWRITE ****/
+
+#content {
+ width: @content-width;
+ float: left;
+ margin-left: 60px;
+}
+
+#content.wide {
+ width: 498px + 50px + 370px;
+}
+/* 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 */
+#content h1 {
+ width: 996px;
+ }
+
+#content h3 {
+ margin-bottom:30px;
+ }
+
+a, .menuEmissions a, a:visited, .menuEmissions a:visited, a:active, .menuEmissions a:active {
+ color: lighten(@black, 20%);
+ }
+
+#content hr {
+ display: block;
+ height: 1px;
+ border-top: 3px solid @black;
+}
+
+
+
+
+.accordion {
+ margin-bottom:50px;
+ }
+
+.accordion .slide-out {
+ display: none;
+ }
+
+
+ .accordion .strip {
+ margin:2px 0;
+ height:20px;
+ background-color: @black;
+ color: white;
+ font-family:RE02;
+ text-transform: uppercase;
+ letter-spacing:1px;
+ font-size:@xs;
+ padding-top:4px;
+ .focusFade();
+ cursor: pointer;
+ }
+
+.accordion .strip:hover {
+ background-color: @black;
+ }
+
+.accordion .symbol {
+ color: white;
+ font-size:@l;
+ margin: 0px 5px;
+}
+
+.a-propos {
+ margin: 30px 10px;
+ }
+
+.a-propos p {
+ margin-bottom:15px;
+ }
+
+.a-propos h4 {
+ margin:15px 0;
+ height: 12px;
+ background-color:@black;
+ color:white;
+ font-family:RE02;
+ padding:4px;
+ letter-spacing:1px;
+ font-size:@xs;
+ display:inline-block;
+ }
+
+
+
+.associated-sounds {
+ margin: 30px 0;
+ .symbols {
+ font-size:@xl*1.3;
+ float: right;
+ line-height:50%;
+ }
+ .soundGrey {
+ background-color:#D0D0D0;
+ }
+ div.item {
+ margin-top: 20px;
+ padding: 10px;
+ }
+ h3 {
+ margin-bottom:30px;
+ }
+ }
+
+
+.todo:hover, .todo *:hover{
+ text-decoration: line-through;
+ color:red !important;
+}
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * contenteditable attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+.cf:before, .cf:after {
+ content: " "; /* 1 */
+ display: table; /* 2 */
+}
+
+.cf:after {
+ clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+ *zoom: 1;
+}
projects / panikweb.git / commitdiff