8 $player-bottom-limit: 30000px;
11 /****************************************************/
16 .inline .date, .resume .date{
21 .dateBloc{display:inline-block;}
22 .dateBloc *{line-height: 100%;}
23 .dateBloc .day {font-size: 1.8em;}
24 .dateBloc .number {font-size: 1.8em;}
25 .dateBloc .month {font-size: 0.8em;}
26 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
42 border-bottom: 1px solid $primary;
43 padding: 0.2em 0 0.2em 0;
44 margin: 0.2em 0 0.2em 0;
60 .sectionLabel, .label {
64 .rightPart .right.sectionLabel {
66 border-bottom: 1px solid black;
74 .rightPart #search-form {
80 background-color:black;
85 padding:5px 7px 0px 7px;
88 /****************************************************/
90 /****************************************************/
91 .wrapper {max-width: 1560px; padding:0 1%;}
92 .wrapper.text {max-width: 780px; margin:auto;}
93 .wrapper .rightPart{margin-top:1em;}
95 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
99 text-justify: distribute-all-lines;
102 display: inline-block;
110 display:inline-block;
111 border: 1px solid #CCC !important;
115 border-radius: 0.7em;
116 -moz-border-radius: 0.7em;
117 -webkit-border-radius: 0.7em;
119 button.check, a.check {
121 text-transform: none;
122 display:inline-block;
129 button.check:before, a.check:before {
130 display:inline-block;
134 padding:0.2em 0.5em 0.2em 0.5em;
135 border-radius: 0.2em;
136 -moz-border-radius: 0.2em;
137 -webkit-border-radius: 0.2em;
142 border:1px solid white;
154 /****************************************************/
156 /****************************************************/
158 background: white url(../img/pattern.png) top left repeat fixed;
161 /****************************************************/
163 /****************************************************/
167 background: $primary;
168 background: linear-gradient($primary 95%, black 100%);
177 @media screen and (max-width: $mobile-limit) {
186 text-overflow: ellipsis;
190 #metaNav ul li#nav-search {
200 #metaNav ul li#nav-language span {
204 display: inline-block;
207 #metaNav ul li#nav-language span.lang-on {
211 #metaNav ul li a span{
212 display:inline-block;
215 #metaNav ul li a span.nav-icon {
218 #metaNav a:focus, #metaNav a:hover{
221 #metaNav ul li.active, #metaNav ul li.active a{
225 #metaNav ul li.active span.iconLabel {
228 #metaNav li#nav-search a {
233 display: inline-block;
238 border: 1px solid #ececec;
254 @media screen and (max-width: $mobile-limit){
255 #bg-title { display: none; }
256 #metaNav .iconLabel {display:none;}
257 #metaNav ul li a span.nav-icon { display: inline-block; }
267 #metaNav ul li#nav-language {
268 padding: 0.2em 0 0 1em;
274 @media screen and (max-width:400px){
275 #metaNav ul li#nav-language {
276 padding: 0.2em 0 0 1ex;
283 /****************************************************/
285 /****************************************************/
288 color: $primary !important;
291 .audio button:hover {
292 color: lighten($primary, 20%) !important;
296 /****************************************************/
298 /****************************************************/
312 #mainHeader *{color:black !important;line-height:1em;}
313 #mainHeader #radioPanik{}
315 #Panik img{display:block;margin:auto;max-height:200px;}
319 #player-container #player{
324 #Changing h1.top a:hover {
328 @media screen and (max-width: $mobile-limit) {
334 #specialHome .leftPart h1.top {
337 #specialHome .leftPart h2 {
346 box-sizing: border-box;
351 @media screen and (max-width: $mobile-limit) {
359 @media screen and (min-width: $mobile-limit) {
371 display: none !important;
380 #Emissions div.mainSub {
385 width: calc(98% - 320px);
388 #News div.mainSub ul,
389 #About div.mainSub ul,
390 #Emissions div.mainSub ul {
395 #News div.mainSub ul li,
396 #About div.mainSub ul li,
397 #Emissions div.mainSub ul li {
400 #News .news.wrapper {
404 #News .news.wrapper li a {
415 #Main > .soundfiles > .wrapper,
416 #Main > .news > .wrapper,
435 #fiber-content h2.title {
443 background: transparent 10px 15px no-repeat url(../img/logo-lautre.png);
446 @media screen and (max-width: $mobile-limit){
452 #All #backgroundBox h1.top {
458 color: $primary !important;
470 background: $primary;
479 color: black !important;
484 #All #backgroundBox h1 {
489 #specialHome div.rightPart h1,
498 /****************************************************/
499 /**** SCREEN NAV ****/
500 #Nav nav{padding:0.1em;}
502 #Nav input{color: $text-color;}
505 border-width:0 0 2px 0;
507 border-color: transparent;
511 #Nav .active,#Nav .icon-check,#Nav .active *{
516 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
534 display: inline-block;
536 #Nav nav ul.distributed li {padding: 0;}
540 border-width:0 0 2px 0;border-style:solid;
542 #fiber-nav li, #fiber-nav li a{
551 #fiber-nav .selected > a,
552 #fiber-nav .current {
556 /****************************************************/
558 /****************************************************/
559 /*#Home #player{ float: left; } */
561 #player-container .metas, #player-container img{border-color:#fff;}
562 #player-container .padded{padding:0.3em;}
564 #player-container button,#player-container a{
566 #player-container .metas{
569 #DirectStreamPanikControler {
570 display:inline !important;
589 background: $primary;
591 box-shadow: 0 0 4px 2px transparentize(darken($primary, 30%), 0.5);
593 @media screen and (max-width: $mobile-limit) {
598 border: 1px solid darken($primary, 30%);
599 border-width: 1px 0 0 0;
603 #player-container #myPlaylist {
609 #player-container #myPlaylist a {
615 #player-container.minimized{
617 border-width:0px 2px 2px 0 !important;
618 border-bottom-right-radius:1em;
619 -moz-border-bottom-right-radius:1em;
620 -webkit-border-bottom-right-radius:1em;
622 #player-container.minimized #player{
628 #Playlist #playlistLabel{
632 #Playlist .playListControls{
634 #Playlist .playListControls button{
636 display:inline-block;
638 #Playlist .playListControls .playPause{
646 #Playlist .playing .icon-pause{
647 -webkit-animation: loading 1s infinite linear;
648 -moz-animation: loading 1s infinite linear;
649 -o-animation: loading 1s infinite linear;
650 animation: loading 1s infinite linear;
652 #Playlist .playlistControls button,#Playlist .playlistControls .button{
653 margin:0 0.1em 0 0.1em;
658 #Playlist .soundControls button{}
660 #player-container #Playlist ol{
665 #player-container #Playlist ol li{
670 #Playlist ol li .soundControls{
676 #Playlist ol li .title{
680 text-overflow: ellipsis;
686 /*limit height of playlist*/
687 #player #CurrentlyPlaying,
688 #player-container #Playlist ol{
695 @media screen and (max-width: $mobile-limit) {
697 background-position: center 0px;
698 background-size: 130px;
706 #Player.withPlaylist #player-container #audioPlayer,
707 #Player.withPlaylist #player-container #audioPlayer,
708 #Player.withPlaylist #player-container #Playlist{
709 float:none !important;
710 width:auto !important;
711 border-right:none !important;
712 max-width:auto !important;
715 #player.on-chat-page {
719 div.chat-page .rightPart {
723 border-top: 1px solid #777;
728 /****************************************************/
729 /**** #Changing #Footer ... ****/
730 /****************************************************/
733 flex-direction: column;
753 text-decoration:none;
755 /* GLOBAL SITE NAV */
764 -moz-box-shadow: 0px 0px 3px #000;
765 -webkit-box-shadow: 0px 0px 3px #000;
766 box-shadow: 0px 0px 3px #000;
767 border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
772 background-color:$primary;
773 border: 2px solid black;
774 background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%, transparent);
777 background-color:grey;
781 background-color:green;
786 background-color:$primary;
798 border-top:2px solid #333;
800 padding-bottom: 80px;
817 /****************************************************/
818 .inline .link{display:block;padding:1em;}
820 /**** EMISSIONS ****/
821 #Emission .emission-detail .title{}
824 #Emission-tabs-menu .sub{
828 .emission-detail .metas{
835 .emission-detail h4.subtitle {
838 text-transform: none;
842 .emission-detail ul.schedule {
847 .emission-detail ul.schedule .weekdiff {
851 .emission-detail article {
855 .emission-detail .logo{
860 @media screen and (max-width: 300px) {
861 .emission-detail .metas {
866 .emission-detail .logo{max-width:100%;}
874 @media screen and (max-width: $mobile-limit) {
879 .emission .contacts {
884 .emission.inline, .emission.resume {
888 .emission.inline div.date {
891 display:inline-block;
895 .emission .archived {
899 .emission .link .description {
909 .episode.resume, .episode.inline{
910 padding:1em 0.5em 1em;
912 .episode.inline .dateBloc, .episode.resume .dateBloc{
915 .episode.resume img {
916 border: 2px solid black;
919 .episode.resume .title{
922 .episode.resume .logo{
926 .episode.inline .logo {
931 .episode.resume .sound{
933 margin:0 0 0.5em 0.5em;
935 .episode.inline .sound.right{
941 .episode.inline .sound.right button{
945 padding-bottom:0.05em;
947 .episode.resume .sound.right .icon-download{
950 .episode.resume .sound.right .icon-download{
957 display: inline-block;
958 vertical-align: middle;
961 .episode.detail .logo.right{
963 @media screen and (max-width: $mobile-limit) {
969 .episode.resume .date .day, .emission-detail .date .day {
972 .episode.resume .content {
975 .episode.resume .content .title {
978 .episode.resume .logo {
982 .episode.inline .date{
986 #Emission-tabs-menu .emissions-newsitems {
990 #Emission-tabs-menu .emissions-newsitems ul.list li {
994 #Emission-tabs-menu .futur-episodes h5,
995 #Emission-tabs-menu .recent-episodes h5 {
999 #Emission-tabs-menu #search-form {
1003 div.extra-soundfiles h3 {
1008 div.extra-soundfiles ul li {
1012 div.extra-soundfiles ul li div.audio {
1020 div.extra-soundfiles ul strong {
1024 @media screen and (max-width: 400px) {
1030 .episode.resume .content {
1035 /****************************************************/
1056 .newsRoll .title div{
1059 .newsRoll a, .newsRoll button img{
1060 border: 1px solid $secondary;
1063 .newsRoll .by3 button {
1067 .soundfiles .special a,
1072 .special .labels .item,
1073 .newsRoll .labels .item{
1075 background: $secondary;
1081 .newsList .current a{
1084 /****************************************************/
1088 .soundfiles ul.custom li a,
1089 .news ul.custom li a { max-width: 98%; }
1090 .news li.item a {padding:1em;}
1098 border-bottom:3px solid #ccc;
1100 @media only screen and (max-width: 970px) {
1101 .columns {column-count: 1; -webkit-column-count: 1; -moz-column-count: 1;}
1105 /****************************************************/
1107 /****************************************************/
1109 #Home #Nav .wrapper{
1110 max-width:auto !important;
1111 width:auto !important;
1115 @media screen and (max-width:800px){
1116 #Home .newsRoll .logo{
1120 @media screen and (max-width:600px){
1121 #Home .newsRoll .logo{
1127 /****************************************************/
1129 /****************************************************/
1131 .program.tabs nav ul li{
1137 .program.tabs nav ul li.week-arrow {
1139 padding-bottom: 5px;
1142 .program ul .dateBloc {
1146 .program ul .schedule {
1152 .program-week .programDate{
1156 .program-week .programCell{
1159 .program-week .nonStop .programDate{
1162 .program-week .nonStop .programCell{
1167 .program-week a.nonstop{
1171 .program-week .inline,.program-week .resume{padding:0;}
1172 .program-week .description{}
1174 .program-week .title {
1179 .program-week .smooth {
1183 padding-bottom: 8px;
1186 .program-week .emission h5,
1187 .program-week .smooth .title {
1191 .program-week .description {
1196 .program-week .programCell:hover {
1200 #Changing .program-week .programCell a {
1204 #Changing .program-week .programCell .smooth a {
1208 #Changing .program-week .programCell .smooth h5 a {
1213 /****************************************************/
1215 /****************************************************/
1217 .search li.previous-page {
1224 .search li.next-page {
1232 text-align: justify;
1236 /****************************************************/
1238 /****************************************************/
1245 height:50px !important;
1247 #grid .heure.vertical {
1251 padding:1em 0 1em 0;
1256 padding:0.5em 0.2em 0.5em 0.2em;
1259 border:1px dotted #ddd;
1266 #grid .highlighted,#grid .highlighted *{
1267 background:#333 !important;
1268 color:white !important;
1271 #grid .highlighted,#grid .highlighted *{
1272 background:#333 !important;
1273 color:white !important;
1275 #Emissions li.item.normal{
1278 #Emissions li.item.hightlighted{
1279 display:block !important;
1285 #gridNav span.category {
1286 text-transform: none;
1290 /**** Navigation for static pages ****/
1295 #fiber-nav li, #fiber-nav li a {
1306 text-decoration: underline;
1309 #fiber-content .episode a,
1310 #fiber-content ul.list a {
1311 text-decoration: none;
1314 #fiber-content a:hover {
1315 text-decoration: none;
1326 .userContent strong,
1327 #fiber-content strong {
1328 text-transform: none;
1334 font-family: inherit;
1338 /**** SCREEN SIZE ADAPTATIONS ****/
1339 html #main{ font-size: 70%; }
1340 body { font-size: 18px;}
1341 @media (max-width: 300px){
1342 body #All{ font-size: 80%; }
1345 @media (min-width: 300px) and (max-width:800px){
1346 body #All{ font-size: 85%; }
1349 @media (min-width: 700px) and (max-width:1000px){
1350 body #All{ font-size: 90%; }
1353 @media (min-width: 1000px) {
1354 body #All{ font-size: 100%; }
1360 padding-bottom: 2em;
1363 #Home #subscribe-form {
1367 #subscribe-form ul.errorlist {
1378 #subscribe-form input {
1383 #Nav div.search form {
1387 div.episode.resume div.title {
1388 white-space: normal;
1391 #Home div.program.tabs {
1409 transition: all linear 0.2s;
1413 #recent-emissions h3,
1419 #recent-emissions h3.sectionLabel {
1423 .episode.soundfile {
1427 .soundfile .smooth {
1438 .frontpage.soundfile .audio {
1441 padding-bottom: 1ex;
1451 border: 1px solid #888;
1452 border-width: 1px 1px 0 1px;
1453 -webkit-transform-origin: bottom right;
1454 -webkit-transform: rotate(270deg);
1455 -moz-transform-origin: bottom right;
1456 -moz-transform: rotate(270deg);
1457 transform-origin: bottom right;
1458 transform: rotate(270deg);
1465 .soundfile .special,
1466 .newsitem .special {
1470 .newsitem .special .smooth {
1476 div.userContent ul {
1483 div.userContent h4 {
1484 text-transform: none;
1485 font-weight: normal;
1488 div.userContent h1 { font-size: 2em; }
1489 div.userContent h2 { font-size: 1.8em; }
1490 div.userContent h3 { font-size: 1.5em; }
1491 div.userContent h4 { font-size: 1.5em; }
1492 div.userContent a { text-decoration: underline; }
1494 div.userContent a.tag { text-decoration: none; }
1496 @media screen and (max-width: $player-bottom-limit) {
1503 #All #backgroundBox h1.top {
1507 #Player #player-container #audioPlayer{
1511 #Player #player-container #audioPlayer #Live{
1521 background: $primary;
1523 #player-container * {color: white !important; }
1527 width:100% !important;
1533 #Player.withPlaylist #player-container #audioPlayer{
1537 #Player.withPlaylist #player-container #Playlist{
1542 #player-container #myPlaylist {
1546 #player-container #myPlaylist a {
1547 white-space: nowrap;
1550 #player-container #Playlist ol{
1559 div.extra-soundfiles {
1563 h3.episode-subtitle {
1573 background: $primary;
1574 background: linear-gradient(to top, $primary 0%, lighten($primary, 10%) 80%);
1575 display: inline-block;
1580 .waveform span.done {
1581 background: linear-gradient(to top, #5A5A5A 0%, #A5A5A5 80%);
1584 .waveform span.done.current + span {
1585 background: $primary;
1588 .waveform i.duration {
1593 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1600 border-bottom: 1px dotted #666;
1603 div.fragment-sound {
1607 div.soundcell div.logo {
1608 vertical-align: top;
1611 div.fragment-sound {
1614 div.extra-soundfiles div.fragment-sound {
1618 div.extra-soundfiles div.fragment-name {
1625 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1627 div.extra-soundfiles ul li div.fragment-sound div.audio {
1631 #fiber-content div.extra-soundfiles strong {
1635 .nonstop-track-title, .nonstop-track-artist {
1640 padding-right: 75px;
1643 #fiber-content div.extra-soundfiles .soundfile-info strong {
1647 #fiber-content div.extra-soundfiles .soundfile-info a {
1648 text-decoration: none;
1651 #fiber-content div.extra-soundfiles {
1655 div.extra-soundfiles div.logo {
1656 display: inline-block;
1659 div#fiber-content div.extra-soundfiles ul.list {
1660 display: inline-block;
1662 width: calc(100% - 74px);
1665 div.download-links {
1671 div.hidden-download-links {
1672 display: none !important;
1675 div.episode-detail div.sound div.download-links {
1676 display: inline-block;
1681 div.extra-soundfiles div.download-links {
1689 div#agenda div.content-inline {
1693 div.previous-and-next-months {
1697 div.publication-date.date.smooth {
1701 #All h1.top.fullwidth {
1708 border: 1px solid #333;
1711 div#dialog-background,
1712 div.gallery div.first {
1718 background: rgba(0, 0, 0, 0.9);
1723 div.gallery div.first img {
1725 padding-bottom: 25px;
1727 margin-left: -320px;
1731 transition: all 0.5s ease;
1732 transform-origin: bottom left;
1735 div.portrait div.gallery div.first img {
1737 margin-left: -240px;
1741 border-bottom: 1px solid #ccc;
1744 div.gallery span.gallery-legend {
1745 display: inline-block;
1755 div.portrait div.gallery span.gallery-legend {
1759 @media screen and (max-width: 640px) {
1760 div.portrait div.gallery div.first img,
1761 div.gallery div.first img {
1767 display: inline-block;
1782 #fiber-content div.topikcellcontent a {
1783 text-decoration: none;
1787 #fiber-content div.topikcell .topik-large a {
1791 div.topikcellcontent h5 {
1795 div.topikcellcontent.topik-large a {
1798 display: inline-block;
1802 div.topikcellcontent.topik-large img {
1807 div.topikcellcontent.topik-large a div {
1808 @media screen and (min-width: $mobile-limit) {
1814 white-space: nowrap;
1816 @media screen and (max-width: $mobile-limit) {
1822 div.topikcellcontent a {
1824 display: inline-block;
1827 box-sizing: border-box;
1832 div.topikcellcontent img {
1835 div.topikcellcontent h2 {
1839 @media only screen and (min-width: 1250px) {
1840 div.topikcellcontent a {
1841 display: inline-block;
1848 .program-week img.smooth {
1852 div#dialog-background {
1864 div#dialog-embed textarea {
1869 div#dialog-embed #close-button {
1875 min-height: auto !important;
1881 background: transparent;
1884 body#embed #Commons,
1885 body#embed #metaNav,
1887 body#embed #userLog,
1888 body#embed #panikdb,
1889 body#embed #Player {
1893 body#embed #Changing {
1898 body#embed #Main > .wrapper {
1906 body#embed ul.custom {
1907 display: inline-block;
1908 width: calc(100% - 72px);
1911 body#embed ul.custom .soundfile-info {
1915 body#embed span.fragment-title {
1916 font-weight: normal;
1928 table.playlist td.tracktime {
1933 p.playlist-disclaimer {
1940 #main-topiks #fiber-nav li ul {
1944 #main-topiks #fiber-nav li ul li {
1949 #main-topiks #fiber-nav li ul li a {
1958 @media screen and (min-width: $mobile-limit){
1960 width: calc(90vw - 240px);
1979 transition: opacity 1s ease;
1986 #chat div.msg.msg-out span.content {
1992 display: inline-block;
1995 text-overflow: ellipsis;
1999 #chat span.content {
2000 display: inline-block;
2001 padding-left: 11rem;
2004 #chat div.msg.info span.content {
2010 @media screen and (max-width: $mobile-limit) {
2016 #chat span.content {
2022 h1.top > span.chat.with-logo {
2025 display: inline-block;
2026 max-width: calc(100% - 140px);
2035 border: 2px solid black;
2038 @media screen and (max-width: $mobile-limit){
2042 h1.top > span.chat.with-logo {
2046 div.topikcellcontent a {
2049 #fiber-content div.topikcell a {
2054 div#CurrentlyChatting {
2059 div.description-emission-chat {
2067 div#chat.moderation .msg-in span.from {
2071 div#chat.moderation .msg-in span.from:hover::after {
2073 font-family: FontAwesome;
2078 div.programCell a.playlist {
2084 color: lighten($primary, 20);
2092 -webkit-user-select: none;
2093 -moz-user-select: none;
2094 -ms-user-select: none;
2099 .rightPart .menucell {
2104 padding-bottom: 1rem;
2115 background: $secondary;
2117 animation-name: load_animation;
2118 animation-duration: 6000ms;
2119 animation-timing-function: ease-out;
2120 transition: opacity 200ms linear;
2126 @keyframes load_animation {
2136 div.around-nav-previous, div.around-nav-next {
2140 background: $primary;
2142 border: 1px solid $primary;
2143 @media screen and (max-width: $mobile-limit) {
2151 transition: all linear 0.2s;
2158 div.around-nav-inner {
2162 margin-bottom: 250px;
2163 border-top: 1px solid $primary;
2165 div.around-nav-inner-2 {
2168 transition: transform linear 0.2s;
2171 border-right: 1px solid $primary;
2172 box-sizing: border-box;
2180 background: $primary;
2183 @media screen and (max-width: 400px) {
2185 width: calc(100vw - 80px);
2196 div.around-slot-details {
2197 div.around-details {
2198 box-sizing: border-box;
2203 border: 1px solid $primary;
2204 border-width: 1px 2px;
2213 @media screen and (max-width: $mobile-limit) {
2222 @media screen and (max-width: $mobile-limit) {
2246 #recent-news div.newsitem-home,
2247 #recent-sounds div.episode.soundfile {
2252 display: inline-block;
2258 border: 1px solid $primary;
2261 margin-bottom: 20px;
2268 background: $primary;
2275 #Emission-container {
2286 #Emission-tabs-menu,
2287 #Emission-tabs-detail {
2290 clip-path: polygon(0 0, 95% 0, 100% 30%, 100% 100%, 10% 100%, 0% 100%, 0 0);
2306 background: $text-color;
2310 margin-bottom: 20px;
2314 span.program-period,
2316 text-transform: lowercase;
2319 div.episode.soundfile {
2325 button.icon-plus-sign, button.icon-download {
2332 background: url(../img/listen.png) top left no-repeat;
2337 text-indent: -10000px;
2341 background-position: -286px 0px;
2343 @media screen and (max-width: $mobile-limit) {
2350 border-bottom: 1px solid $primary;
2353 .episode-auto-selection-cell.hide-emission-titles {
2354 .emission-title, .soundfile-info .sep {