15 font-family: Roboto, sans-serif;
25 background: url(../img/border1.jpeg) fixed repeat;
27 display: inline-block;
30 transition: transform ease 0.2s;
34 transform: scale(0.9);
39 /****************************************************/
43 .resymbol:hover,.control:hover{ opacity:0.5; }
45 text-transform: uppercase;
47 .inline .date, .resume .date{
52 .dateBloc{display:inline-block;}
53 .dateBloc *{line-height: 100%;}
54 .dateBloc .day {font-size: 1.8em;}
55 .dateBloc .number {font-size: 1.8em;}
56 .dateBloc .month {font-size: 0.8em;}
57 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
69 text-transform: uppercase;
73 border-bottom:3px solid black;
74 padding: 0.2em 0 0.2em 0;
75 margin: 0.2em 0 0.2em 0;
85 .rightPart #search-form {
91 background-color:black;
96 padding:5px 7px 0px 7px;
99 /****************************************************/
101 /****************************************************/
102 .wrapper {max-width: 1560px; padding:0 1%;}
103 .wrapper.text {max-width: 780px; margin:auto;}
104 .wrapper .rightPart{margin-top:1em;}
106 @media screen and (min-width: $size_m) {
107 #player-container.fixed {
110 width: calc(0% + 235px);
115 .wrapper.sided .leftPart,
116 .wrapper.sided .rightPart{
119 .wrapper.navigation .leftPart{
122 .wrapper.navigation .rightPart{
135 #specialHome .leftPart,
136 #specialHome .rightPart {
142 padding-bottom: 40px;
147 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
151 text-justify: distribute-all-lines;
154 display: inline-block;
161 text-transform: uppercase;
162 display:inline-block;
163 border: 1px solid #CCC !important;
167 border-radius: 0.7em;
168 -moz-border-radius: 0.7em;
169 -webkit-border-radius: 0.7em;
171 button.check, a.check {
173 text-transform: none;
174 display:inline-block;
180 text-transform: uppercase;
182 button.check:before, a.check:before {
183 display:inline-block;
187 padding:0.2em 0.5em 0.2em 0.5em;
188 border-radius: 0.2em;
189 -moz-border-radius: 0.2em;
190 -webkit-border-radius: 0.2em;
195 border:1px solid white;
207 /****************************************************/
209 /****************************************************/
214 /****************************************************/
216 /****************************************************/
220 background-color: #3a3a3a;
233 text-overflow: ellipsis;
237 #metaNav ul li#nav-search {
247 #metaNav ul li#nav-language span {
251 display: inline-block;
254 #metaNav ul li#nav-language span.lang-on {
258 #metaNav ul li a span{
259 display:inline-block;
262 #metaNav ul li a span.nav-icon {
265 #metaNav a:focus, #metaNav a:hover{
268 #metaNav ul li.active, #metaNav ul li.active a{
272 #metaNav ul li.active span.iconLabel {
275 #metaNav li#nav-search a {
280 display: inline-block;
285 border: 1px solid #ececec;
293 @media screen and (max-width:$size_m){
294 #bg-title { display: none; }
295 #metaNav .iconLabel {display:none;}
296 #metaNav ul li a span.nav-icon { display: inline-block; }
306 #metaNav ul li#nav-language {
307 padding: 0.2em 0 0 1em;
311 /****************************************************/
313 /****************************************************/
315 .audio button, .audio a {color:$primary;}
316 /****************************************************/
318 /****************************************************/
325 @media screen and (max-width: $size_m) {
332 display: inline-block;
333 background: url(../img/top-flowers.png) bottom left no-repeat;
336 @media screen and (max-width: $size_m) {
340 background-size: contain;
345 background: url(../img/petite.png) no-repeat;
354 display: inline-block;
357 #mainHeader *{color:black !important;line-height:1em;}
359 #Panik img{display:block;margin:auto;max-height:200px;}
363 #player-container #player{
368 #Changing h1.top a:hover {
373 background: white no-repeat;
374 background-image: url(../img/back1.png), url(../img/back2.png), url(../img/back3.png);
375 background-position: top 0 left -30px, top 300px right -30px, top 700px left -50px;
378 @media screen and (min-width: $size_m) {
380 box-sizing: border-box;
384 box-sizing: border-box;
388 text-transform: uppercase;
391 padding-bottom: 20px;
399 display: none !important;
408 #Emissions div.mainSub {
413 width: calc(98% - 320px);
416 #News div.mainSub ul,
417 #About div.mainSub ul,
418 #Emissions div.mainSub ul {
423 #News div.mainSub ul li,
424 #About div.mainSub ul li,
425 #Emissions div.mainSub ul li {
428 #News .news.wrapper {
432 #News .news.wrapper li a {
444 #Main > .soundfiles > .wrapper,
445 #Main > .news > .wrapper,
464 #fiber-content h2.title {
472 background: transparent;
476 #All #backgroundBox h1.top {
483 color: $primary !important;
486 #All h1.top#radiopanik {
491 #All #backgroundBox h1 {
496 #specialHome div.rightPart h1,
505 /****************************************************/
506 /**** SCREEN NAV ****/
507 #Nav nav{padding:0.1em;}
509 #Nav input{color:#333;}
512 border-width:0 0 2px 0;
514 border-color: transparent;
518 #Nav .active,#Nav .icon-check,#Nav .active *{
523 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
545 display: inline-block;
547 #Nav nav ul.distributed li {padding: 0;}
551 border-width:0 0 2px 0;border-style:solid;
553 #fiber-nav li, #fiber-nav li a{
562 #fiber-nav .selected > a,
563 #fiber-nav .current {
567 /****************************************************/
569 /****************************************************/
570 /*#Home #player{ float: left; } */
572 #player-container .metas, #player-container img{border-color:#fff;}
573 #player-container .padded{padding:0.3em;}
575 #player-container button,#player-container a{
577 #player-container .metas{
580 #DirectStreamPanikControler {
582 #DirectStreamPanikControler div.label {
584 @media screen and (max-width: $size_m) {
602 @media screen and (max-width: $size_m) {
603 padding: 0.6em 0 0 0;
612 left: calc(50% - 200px);
618 #Player.withPlaylist {
624 #player-container #myPlaylist a {
628 #player-container.minimized{
630 border-width:0px 2px 2px 0 !important;
631 border-bottom-right-radius:1em;
632 -moz-border-bottom-right-radius:1em;
633 -webkit-border-bottom-right-radius:1em;
635 #player-container.minimized #player{
645 #Playlist #playlistLabel{
649 #Playlist .playListControls{
651 #Playlist .playListControls button{
653 display:inline-block;
655 #Playlist .playListControls .playPause{
661 @media screen and (max-width: $size_m) {
666 #Playlist .playing .icon-pause{
667 -webkit-animation: loading 1s infinite linear;
668 -moz-animation: loading 1s infinite linear;
669 -o-animation: loading 1s infinite linear;
670 animation: loading 1s infinite linear;
672 #Playlist .playlistControls button,#Playlist .playlistControls .button{
673 margin:0 0.1em 0 0.1em;
678 #Playlist .soundControls button{}
680 #player-container #Playlist ol li{
685 #Playlist ol li .soundControls{
691 #Playlist ol li.active .soundControls {
694 #Playlist ol li .title{
695 display:inline-block;
697 text-overflow: ellipsis;
701 @media screen and (max-width: $size_m) {
703 background-position: center 30px;
705 #All h1.top#radiopanik {
710 #Player.withPlaylist #player-container #audioPlayer,
711 #Player.withPlaylist #player-container #audioPlayer,
712 #Player.withPlaylist #player-container #Playlist{
713 float:none !important;
714 width:auto !important;
715 border-right:none !important;
716 max-width:auto !important;
719 #player.on-chat-page {
723 div.chat-page .rightPart {
727 border-top: 1px solid #777;
732 /****************************************************/
733 /**** #Changing #Footer ... ****/
734 /****************************************************/
737 flex-direction: column;
747 @media screen and (max-width: $size_m) {
759 #Changing a:hover,#Changing button:hover {
760 text-decoration:none;
762 /* GLOBAL SITE NAV */
771 -moz-box-shadow: 0px 0px 3px #000;
772 -webkit-box-shadow: 0px 0px 3px #000;
773 box-shadow: 0px 0px 3px #000;
774 border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
779 background-color:$primary;
780 border: 2px solid black;
781 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);
784 background-color:grey;
788 background-color:green;
793 background-color:$primary;
805 background: url(../img/footer-provisoire-min.jpeg) bottom center no-repeat;
807 padding-bottom: 80px;
815 text-decoration: none;
823 @media screen and (max-width: $size_m) {
824 padding-bottom: 30px;
829 /****************************************************/
830 .inline .link{display:block;padding:1em;}
832 /**** EMISSIONS ****/
840 .episode.resume, .episode.inline{
841 padding:1em 0.5em 1em;
843 .episode.inline .dateBloc, .episode.resume .dateBloc{
846 .episode.resume img {
847 border: 2px solid black;
850 .episode.resume .title{
853 .episode.resume .logo{
857 .episode.inline .logo {
862 .episode.resume .sound{
864 margin:0 0 0.5em 0.5em;
866 .episode.inline .sound.right{
872 .episode.inline .sound.right button{
876 padding-bottom:0.05em;
878 .episode.resume .sound.right .icon-download{
881 .episode.resume .sound.right .icon-download{
888 display: inline-block;
889 vertical-align: middle;
892 .episode.detail .logo.right{
896 .episode.resume .date .day, .emission-detail .date .day {
899 .episode.resume .content {
902 .episode.resume .content .title {
905 .episode.resume .logo {
909 .episode.inline .date{
913 #Emission-tabs-menu .emissions-newsitems {
917 #Emission-tabs-menu .emissions-newsitems ul.list li {
921 #Emission-tabs-menu .futur-episodes h5,
922 #Emission-tabs-menu .recent-episodes h5 {
926 #Emission-tabs-menu #search-form {
930 div.extra-soundfiles h3 {
935 div.extra-soundfiles ul li {
939 div.extra-soundfiles ul li div.audio {
947 div.extra-soundfiles ul strong {
951 /****************************************************/
972 .newsRoll .title div{
975 .newsRoll a, .newsRoll button img{
976 border:3px solid $secondary;
979 .newsRoll .by3 button {
983 .soundfiles .special a,
988 .special .labels .item,
989 .newsRoll .labels .item{
991 background: $secondary;
997 .newsList .current a{
1000 /****************************************************/
1004 .soundfiles ul.custom li a,
1005 .news ul.custom li a { max-width: 98%; }
1006 .news li.item a {padding:1em;}
1014 border-bottom:3px solid #ccc;
1017 /****************************************************/
1019 /****************************************************/
1021 #Home #Nav .wrapper{
1022 max-width:auto !important;
1023 width:auto !important;
1026 /****************************************************/
1028 /****************************************************/
1030 .program.tabs nav ul li{
1036 .program.tabs nav ul li.week-arrow {
1038 padding-bottom: 5px;
1041 .program ul .dateBloc {
1045 .program ul .schedule {
1051 .program-week .programDate{
1055 .program-week .programCell{
1058 .program-week .nonStop .programDate{
1061 .program-week .nonStop .programCell{
1066 .program-week a.nonstop{
1070 .program-week .inline,.program-week .resume{padding:0;}
1071 .program-week .description{}
1073 .program-week .title {
1078 .program-week .smooth {
1082 padding-bottom: 8px;
1085 .program-week .emission h5,
1086 .program-week .smooth .title {
1088 text-transform: uppercase;
1091 .program-week .description {
1096 .program-week .programCell:hover {
1100 #Changing .program-week .programCell a {
1104 #Changing .program-week .programCell .smooth a {
1108 #Changing .program-week .programCell .smooth h5 a {
1113 /****************************************************/
1115 /****************************************************/
1117 .search li.previous-page {
1124 .search li.next-page {
1132 text-align: justify;
1136 /****************************************************/
1138 /****************************************************/
1145 height:50px !important;
1147 #grid .heure.vertical {
1151 padding:1em 0 1em 0;
1156 padding:0.5em 0.2em 0.5em 0.2em;
1159 border:1px dotted #ddd;
1166 #grid .highlighted,#grid .highlighted *{
1167 background:#333 !important;
1168 color:white !important;
1171 #grid .highlighted,#grid .highlighted *{
1172 background:#333 !important;
1173 color:white !important;
1175 #Emissions li.item.normal{
1178 #Emissions li.item.hightlighted{
1179 display:block !important;
1182 #gridNav span.category {
1183 text-transform: none;
1187 /**** Navigation for static pages ****/
1192 #fiber-nav li, #fiber-nav li a {
1203 text-decoration: underline;
1206 #fiber-content .episode a,
1207 #fiber-content ul.list a {
1208 text-decoration: none;
1211 #fiber-content a:hover {
1212 text-decoration: none;
1223 .userContent strong,
1224 #fiber-content strong {
1225 text-transform: none;
1231 font-family: inherit;
1235 /**** SCREEN SIZE ADAPTATIONS ****/
1236 html #main{ font-size: 70%; }
1237 body { font-size: 18px;}
1238 @media (max-width: 300px){
1239 body #All{ font-size: 80%; }
1242 @media (min-width: 300px) and (max-width:800px){
1243 body #All{ font-size: 85%; }
1246 @media (min-width: 800px) and (max-width:$size_m){
1247 body #All{ font-size: 90%; }
1250 @media (min-width: $size_m) {
1251 body #All{ font-size: 100%; }
1257 padding-bottom: 2em;
1260 #Home #subscribe-form {
1264 #subscribe-form ul.errorlist {
1275 #subscribe-form input {
1280 #Nav div.search form {
1284 div.episode.resume div.title {
1285 white-space: normal;
1288 #Home div.program.tabs {
1303 #recent-emissions h3,
1309 #recent-emissions h3.sectionLabel {
1313 .episode.soundfile {
1317 .soundfile .smooth {
1328 .frontpage.soundfile .audio {
1331 padding-bottom: 1ex;
1341 border: 1px solid #888;
1342 border-width: 1px 1px 0 1px;
1343 -webkit-transform-origin: bottom right;
1344 -webkit-transform: rotate(270deg);
1345 -moz-transform-origin: bottom right;
1346 -moz-transform: rotate(270deg);
1347 transform-origin: bottom right;
1348 transform: rotate(270deg);
1355 .soundfile .special,
1356 .newsitem .special {
1360 .newsitem .special .smooth {
1366 div.userContent ul {
1373 div.userContent h4 {
1374 text-transform: none;
1375 font-weight: normal;
1378 div.userContent h1 { font-size: 2em; }
1379 div.userContent h2 { font-size: 1.8em; }
1380 div.userContent h3 { font-size: 1.5em; }
1381 div.userContent h4 { font-size: 1.5em; }
1382 div.userContent a { text-decoration: underline; }
1384 div.userContent a.tag { text-decoration: none; }
1386 @media screen and (max-width: $size_m) {
1393 #All #backgroundBox h1.top {
1397 #Player.withoutPlaylist #player-container #audioPlayer{
1401 #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1405 #player-container * {color: white !important; }
1409 width:100% !important;
1411 border-top: 2px solid red;
1422 div.extra-soundfiles {
1426 h3.episode-subtitle {
1438 background: $orange;
1439 background: linear-gradient(to top, darken($orange, 20%) 0%, $orange 40%);
1440 display: inline-block;
1445 .waveform span.done {
1446 background: linear-gradient(to top, darken($red, 5%) 0%, darken($red, 10%) 100%);
1449 .waveform span.done.current + span {
1453 .waveform i.duration {
1465 border-bottom: 1px dotted #666;
1468 div.fragment-sound {
1472 div.soundcell div.logo {
1473 vertical-align: top;
1476 div.fragment-sound {
1479 div.extra-soundfiles div.fragment-sound {
1483 div.extra-soundfiles div.fragment-name {
1490 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1492 div.extra-soundfiles ul li div.fragment-sound div.audio {
1496 #fiber-content div.extra-soundfiles strong {
1497 text-transform: uppercase;
1501 .nonstop-track-title, .nonstop-track-artist {
1506 padding-right: 75px;
1509 #fiber-content div.extra-soundfiles .soundfile-info strong {
1513 #fiber-content div.extra-soundfiles .soundfile-info a {
1514 text-decoration: none;
1517 #fiber-content div.extra-soundfiles {
1521 div.extra-soundfiles div.logo {
1522 display: inline-block;
1525 div#fiber-content div.extra-soundfiles ul.list {
1526 display: inline-block;
1528 width: calc(100% - 74px);
1531 div.download-links {
1537 div.hidden-download-links {
1538 display: none !important;
1541 div.episode-detail div.sound div.download-links {
1542 display: inline-block;
1547 div.extra-soundfiles div.download-links {
1555 div#agenda div.content-inline {
1559 div.previous-and-next-months {
1563 div.publication-date.date.smooth {
1567 #All h1.top.fullwidth {
1573 flex-direction: row;
1579 @media screen and (max-width: $size_s) {
1591 background: $secondary;
1594 border-bottom: 3px solid $yellow;
1603 div#dialog-background,
1604 div.gallery div.first {
1610 background: rgba(0, 0, 0, 0.9);
1615 div.gallery div.first img {
1617 padding-bottom: 25px;
1619 margin-left: -500px;
1623 transition: all 0.5s ease;
1624 transform-origin: bottom left;
1627 div.portrait div.gallery div.first img {
1629 margin-left: -240px;
1635 div.gallery span.gallery-legend {
1636 display: inline-block;
1646 div.portrait div.gallery span.gallery-legend {
1650 @media screen and (max-width: $size_m) {
1651 div.portrait div.gallery div.first img,
1652 div.gallery div.first img {
1658 display: inline-block;
1673 #fiber-content div.topikcellcontent a {
1674 text-decoration: none;
1678 #fiber-content div.topikcell .topik-large a {
1682 div.topikcellcontent h5 {
1686 div.topikcellcontent.topik-large a {
1689 display: inline-block;
1693 div.topikcellcontent.topik-large img {
1698 div.topikcellcontent.topik-large a div {
1699 @media screen and (min-width: 760px) {
1705 white-space: nowrap;
1707 @media screen and (max-width: 760px) {
1713 div.topikcellcontent a {
1715 display: inline-block;
1718 box-sizing: border-box;
1723 div.topikcellcontent img {
1726 div.topikcellcontent h2 {
1730 .program-week img.smooth {
1734 div#dialog-background {
1747 div#dialog-embed textarea {
1752 div#dialog-embed #close-button {
1758 min-height: auto !important;
1761 div.soundfile-info {
1767 background: transparent;
1770 body#embed #Commons,
1771 body#embed #metaNav,
1773 body#embed #userLog,
1774 body#embed #panikdb,
1775 body#embed #Player {
1779 body#embed #Changing {
1784 body#embed #Main > .wrapper {
1795 body#embed ul.custom {
1796 display: inline-block;
1797 width: calc(100% - 110px);
1800 body#embed ul.custom .soundfile-info {
1804 body#embed span.fragment-title {
1805 font-weight: normal;
1817 table.playlist td.tracktime {
1822 p.playlist-disclaimer {
1829 #main-topiks #fiber-nav li ul {
1833 #main-topiks #fiber-nav li ul li {
1838 #main-topiks #fiber-nav li ul li a {
1847 @media screen and (min-width:$size_m){
1849 width: calc(90vw - 240px);
1868 transition: opacity 1s ease;
1875 #chat div.msg.msg-out span.content {
1881 display: inline-block;
1884 text-overflow: ellipsis;
1888 #chat span.content {
1889 display: inline-block;
1890 padding-left: 11rem;
1893 #chat div.msg.info span.content {
1899 @media screen and (max-width: $size_m) {
1905 #chat span.content {
1911 h1.top > span.chat.with-logo {
1914 display: inline-block;
1915 max-width: calc(100% - 140px);
1924 border: 2px solid black;
1927 @media screen and (max-width:$size_m){
1931 h1.top > span.chat.with-logo {
1935 div.topikcellcontent a {
1938 #fiber-content div.topikcell a {
1943 div#CurrentlyChatting {
1948 div.description-emission-chat {
1956 div#chat.moderation .msg-in span.from {
1960 div#chat.moderation .msg-in span.from:hover::after {
1962 font-family: FontAwesome;
1967 div.programCell a.playlist {
1973 color: lighten($primary, 20);
1974 text-transform: uppercase;
1982 -webkit-user-select: none;
1983 -moz-user-select: none;
1984 -ms-user-select: none;
1990 box-sizing: border-box;
1991 transition: all ease 0.5s;
1997 box-sizing: border-box;
1999 padding-bottom: 20px;
2002 @media screen and (max-width: $size_s) {
2003 width: calc(50% - 1rem);
2014 @extend %image-bordure;
2015 @media screen and (max-width: $size_s) {
2021 text-transform: uppercase;
2026 transition: all ease 0.5s;
2032 text-transform: lowercase;
2040 div.emission-detail {
2056 transition: all .2s;
2058 background-color: $blue;
2061 @media screen and (max-width: $size_s) {
2073 transition: all .2s;
2080 background: $yellow url($data_uri_facebook) center center no-repeat;
2083 background-color: $red;
2085 @media screen and (max-width:$size_m) {
2092 background: $yellow url($data_uri_twitter) center center no-repeat;
2097 background: $yellow url($data_uri_instagram) center center no-repeat;
2101 background-repeat: no-repeat;
2106 background: url($data_uri_start), url($data_uri_pause);
2107 background-position: 0 0, -50px 0;
2111 background: url($data_uri_pause);
2112 background-position: 0 0;
2115 div.playListControls {
2116 button.action-pause {
2117 background-repeat: no-repeat;
2120 background: url($data_uri_pause);
2123 button.action-play {
2124 background-repeat: no-repeat;
2127 background: url($data_uri_play);
2132 background: transparent top center repeat-x;
2136 div#specialHome h1.top {
2137 background: transparent bottom center repeat-x;
2138 padding-bottom: 62px;
2142 div#specialHome h1.top {
2146 padding-bottom: 14px;
2148 padding-right: 10px;
2150 padding-bottom: 10px;
2155 @media screen and (max-width: $size_m) {
2166 div.emission-detail {
2173 text-transform: none;
2182 @extend %image-bordure;
2183 @media screen and (max-width: $size_s) {
2191 box-sizing: border-box;
2195 border-bottom: solid 1px #ff8b57;
2196 text-decoration: none;
2198 background: #ff8b57;
2211 @media screen and (max-width: $size_m) {
2215 button.action-play {
2218 button.action-share {
2219 text-transform: none;
2225 div.emission-episodes {
2235 box-sizing: border-box;
2239 display: inline-block;
2240 margin-bottom: 1rem;
2244 @extend %image-bordure;
2270 div.emission-episodes.archive::after {
2287 @media screen and (max-width: $size_m) {
2295 @media screen and (max-width: $size_m) {
2302 text-transform: lowercase;
2306 padding-bottom: 2rem;
2310 padding-right: 10px;
2311 transition: padding 0.2s;
2319 .playing button.no-icon-remove::after {
2338 background: $secondary;
2340 animation-name: load_animation;
2341 animation-duration: 6000ms;
2342 animation-timing-function: ease-out;
2343 transition: opacity 200ms linear;
2349 @keyframes load_animation {
2356 text-transform: uppercase;
2363 @media screen and (max-width:$size_m){
2369 padding-bottom: 2rem;
2372 .episode-auto-selection-cell.hide-emission-titles {
2373 .emission-title, .soundfile-info .sep {