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;}
322 /****************************************************/
324 /****************************************************/
331 @media screen and (max-width: $size_m) {
338 display: inline-block;
339 background: url(../img/top-flowers.png) bottom left no-repeat;
342 @media screen and (max-width: $size_m) {
346 background-size: contain;
351 background: url(../img/petite.png) no-repeat;
357 @media screen and (max-width: $size_s) {
358 transform: scale(0.8);
360 @media screen and (max-width: $size_m) {
367 display: inline-block;
370 #mainHeader *{color:black !important;line-height:1em;}
372 #Panik img{display:block;margin:auto;max-height:200px;}
376 #player-container #player{
381 #Changing h1.top a:hover {
386 background: white no-repeat;
387 background-image: url(../img/back1.png), url(../img/back2.png), url(../img/back3.png);
388 background-position: top 0 left -30px, top 300px right -30px, top 700px left -50px;
391 @media screen and (min-width: $size_m) {
393 box-sizing: border-box;
397 box-sizing: border-box;
401 text-transform: uppercase;
404 padding-bottom: 20px;
412 display: none !important;
421 #Emissions div.mainSub {
426 width: calc(98% - 320px);
429 #News div.mainSub ul,
430 #About div.mainSub ul,
431 #Emissions div.mainSub ul {
436 #News div.mainSub ul li,
437 #About div.mainSub ul li,
438 #Emissions div.mainSub ul li {
441 #News .news.wrapper {
445 #News .news.wrapper li a {
457 #Main > .soundfiles > .wrapper,
458 #Main > .news > .wrapper,
477 #fiber-content h2.title {
485 background: transparent;
489 #All #backgroundBox h1.top {
496 color: $primary !important;
499 #All h1.top#radiopanik {
504 #All #backgroundBox h1 {
509 #specialHome div.rightPart h1,
518 /****************************************************/
519 /**** SCREEN NAV ****/
520 #Nav nav{padding:0.1em;}
522 #Nav input{color:#333;}
525 border-width:0 0 2px 0;
527 border-color: transparent;
531 #Nav .active,#Nav .icon-check,#Nav .active *{
536 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
558 display: inline-block;
560 #Nav nav ul.distributed li {padding: 0;}
564 border-width:0 0 2px 0;border-style:solid;
566 #fiber-nav li, #fiber-nav li a{
575 #fiber-nav .selected > a,
576 #fiber-nav .current {
580 /****************************************************/
582 /****************************************************/
583 /*#Home #player{ float: left; } */
585 #player-container .metas, #player-container img{border-color:#fff;}
586 #player-container .padded{padding:0.3em;}
588 #player-container button,#player-container a{
590 #player-container .metas{
593 #DirectStreamPanikControler {
595 #DirectStreamPanikControler div.label {
597 @media screen and (max-width: $size_m) {
615 @media screen and (max-width: $size_m) {
616 padding: 0.6em 0 0 0;
625 left: calc(50% - 200px);
631 #Player.withPlaylist {
637 #player-container #myPlaylist a {
641 #player-container.minimized{
643 border-width:0px 2px 2px 0 !important;
644 border-bottom-right-radius:1em;
645 -moz-border-bottom-right-radius:1em;
646 -webkit-border-bottom-right-radius:1em;
648 #player-container.minimized #player{
658 #Playlist #playlistLabel{
662 #Playlist .playListControls{
664 #Playlist .playListControls button{
666 display:inline-block;
668 #Playlist .playListControls .playPause{
674 @media screen and (max-width: $size_m) {
679 #Playlist .playing .icon-pause{
680 -webkit-animation: loading 1s infinite linear;
681 -moz-animation: loading 1s infinite linear;
682 -o-animation: loading 1s infinite linear;
683 animation: loading 1s infinite linear;
685 #Playlist .playlistControls button,#Playlist .playlistControls .button{
686 margin:0 0.1em 0 0.1em;
691 #Playlist .soundControls button{}
693 #player-container #Playlist ol li{
698 #Playlist ol li .soundControls{
704 #Playlist ol li.active .soundControls {
707 #Playlist ol li .title{
708 display:inline-block;
710 text-overflow: ellipsis;
714 @media screen and (max-width: $size_m) {
716 background-position: center 30px;
718 #All h1.top#radiopanik {
723 #Player.withPlaylist #player-container #audioPlayer,
724 #Player.withPlaylist #player-container #audioPlayer,
725 #Player.withPlaylist #player-container #Playlist{
726 float:none !important;
727 width:auto !important;
728 border-right:none !important;
729 max-width:auto !important;
732 #player.on-chat-page {
736 div.chat-page .rightPart {
740 border-top: 1px solid #777;
745 /****************************************************/
746 /**** #Changing #Footer ... ****/
747 /****************************************************/
750 flex-direction: column;
760 @media screen and (max-width: $size_m) {
772 #Changing a:hover,#Changing button:hover {
773 text-decoration:none;
775 /* GLOBAL SITE NAV */
784 -moz-box-shadow: 0px 0px 3px #000;
785 -webkit-box-shadow: 0px 0px 3px #000;
786 box-shadow: 0px 0px 3px #000;
787 border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
792 background-color:$primary;
793 border: 2px solid black;
794 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);
797 background-color:grey;
801 background-color:green;
806 background-color:$primary;
818 background: url(../img/footer-provisoire-min.jpeg) bottom center no-repeat;
820 padding-bottom: 80px;
828 text-decoration: none;
836 @media screen and (max-width: $size_m) {
837 padding-bottom: 30px;
842 /****************************************************/
843 .inline .link{display:block;padding:1em;}
845 /**** EMISSIONS ****/
853 .episode.resume, .episode.inline{
854 padding:1em 0.5em 1em;
856 .episode.inline .dateBloc, .episode.resume .dateBloc{
859 .episode.resume img {
860 border: 2px solid black;
863 .episode.resume .title{
866 .episode.resume .logo{
870 .episode.inline .logo {
875 .episode.resume .sound{
877 margin:0 0 0.5em 0.5em;
879 .episode.inline .sound.right{
885 .episode.inline .sound.right button{
889 padding-bottom:0.05em;
891 .episode.resume .sound.right .icon-download{
894 .episode.resume .sound.right .icon-download{
901 display: inline-block;
902 vertical-align: middle;
905 .episode.detail .logo.right{
909 .episode.resume .date .day, .emission-detail .date .day {
912 .episode.resume .content {
915 .episode.resume .content .title {
918 .episode.resume .logo {
922 .episode.inline .date{
926 #Emission-tabs-menu .emissions-newsitems {
930 #Emission-tabs-menu .emissions-newsitems ul.list li {
934 #Emission-tabs-menu .futur-episodes h5,
935 #Emission-tabs-menu .recent-episodes h5 {
939 #Emission-tabs-menu #search-form {
943 div.extra-soundfiles h3 {
948 div.extra-soundfiles ul li {
952 div.extra-soundfiles ul li div.audio {
960 div.extra-soundfiles ul strong {
964 /****************************************************/
985 .newsRoll .title div{
988 .newsRoll a, .newsRoll button img{
989 border:3px solid $secondary;
992 .newsRoll .by3 button {
996 .soundfiles .special a,
1001 .special .labels .item,
1002 .newsRoll .labels .item{
1004 background: $secondary;
1010 .newsList .current a{
1013 /****************************************************/
1017 .soundfiles ul.custom li a,
1018 .news ul.custom li a { max-width: 98%; }
1019 .news li.item a {padding:1em;}
1027 border-bottom:3px solid #ccc;
1030 /****************************************************/
1032 /****************************************************/
1034 #Home #Nav .wrapper{
1035 max-width:auto !important;
1036 width:auto !important;
1039 /****************************************************/
1041 /****************************************************/
1043 .program.tabs nav ul li{
1049 .program.tabs nav ul li.week-arrow {
1051 padding-bottom: 5px;
1054 .program ul .dateBloc {
1058 .program ul .schedule {
1064 .program-week .programDate{
1068 .program-week .programCell{
1071 .program-week .nonStop .programDate{
1074 .program-week .nonStop .programCell{
1079 .program-week a.nonstop{
1083 .program-week .inline,.program-week .resume{padding:0;}
1084 .program-week .description{}
1086 .program-week .title {
1091 .program-week .smooth {
1095 padding-bottom: 8px;
1098 .program-week .emission h5,
1099 .program-week .smooth .title {
1101 text-transform: uppercase;
1104 .program-week .description {
1109 .program-week .programCell:hover {
1113 #Changing .program-week .programCell a {
1117 #Changing .program-week .programCell .smooth a {
1121 #Changing .program-week .programCell .smooth h5 a {
1126 /****************************************************/
1128 /****************************************************/
1130 .search li.previous-page {
1137 .search li.next-page {
1145 text-align: justify;
1149 /****************************************************/
1151 /****************************************************/
1158 height:50px !important;
1160 #grid .heure.vertical {
1164 padding:1em 0 1em 0;
1169 padding:0.5em 0.2em 0.5em 0.2em;
1172 border:1px dotted #ddd;
1179 #grid .highlighted,#grid .highlighted *{
1180 background:#333 !important;
1181 color:white !important;
1184 #grid .highlighted,#grid .highlighted *{
1185 background:#333 !important;
1186 color:white !important;
1188 #Emissions li.item.normal{
1191 #Emissions li.item.hightlighted{
1192 display:block !important;
1195 #gridNav span.category {
1196 text-transform: none;
1200 /**** Navigation for static pages ****/
1205 #fiber-nav li, #fiber-nav li a {
1216 text-decoration: underline;
1219 #fiber-content .episode a,
1220 #fiber-content ul.list a {
1221 text-decoration: none;
1224 #fiber-content a:hover {
1225 text-decoration: none;
1236 .userContent strong,
1237 #fiber-content strong {
1238 text-transform: none;
1244 font-family: inherit;
1248 /**** SCREEN SIZE ADAPTATIONS ****/
1249 html #main{ font-size: 70%; }
1250 body { font-size: 18px;}
1251 @media (max-width: 300px){
1252 body #All{ font-size: 80%; }
1255 @media (min-width: 300px) and (max-width:800px){
1256 body #All{ font-size: 85%; }
1259 @media (min-width: 800px) and (max-width:$size_m){
1260 body #All{ font-size: 90%; }
1263 @media (min-width: $size_m) {
1264 body #All{ font-size: 100%; }
1270 padding-bottom: 2em;
1273 #Home #subscribe-form {
1277 #subscribe-form ul.errorlist {
1288 #subscribe-form input {
1293 #Nav div.search form {
1297 div.episode.resume div.title {
1298 white-space: normal;
1301 #Home div.program.tabs {
1316 #recent-emissions h3,
1322 #recent-emissions h3.sectionLabel {
1326 .episode.soundfile {
1330 .soundfile .smooth {
1341 .frontpage.soundfile .audio {
1344 padding-bottom: 1ex;
1354 border: 1px solid #888;
1355 border-width: 1px 1px 0 1px;
1356 -webkit-transform-origin: bottom right;
1357 -webkit-transform: rotate(270deg);
1358 -moz-transform-origin: bottom right;
1359 -moz-transform: rotate(270deg);
1360 transform-origin: bottom right;
1361 transform: rotate(270deg);
1368 .soundfile .special,
1369 .newsitem .special {
1373 .newsitem .special .smooth {
1379 div.userContent ul {
1386 div.userContent h4 {
1387 text-transform: none;
1388 font-weight: normal;
1391 div.userContent h1 { font-size: 2em; }
1392 div.userContent h2 { font-size: 1.8em; }
1393 div.userContent h3 { font-size: 1.5em; }
1394 div.userContent h4 { font-size: 1.5em; }
1395 div.userContent a { text-decoration: underline; }
1397 div.userContent a.tag { text-decoration: none; }
1399 @media screen and (max-width: $size_m) {
1406 #All #backgroundBox h1.top {
1410 #Player.withoutPlaylist #player-container #audioPlayer{
1414 #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1418 #player-container * {color: white !important; }
1422 width:100% !important;
1424 border-top: 2px solid red;
1435 div.extra-soundfiles {
1439 h3.episode-subtitle {
1451 background: $orange;
1452 background: linear-gradient(to top, darken($orange, 20%) 0%, $orange 40%);
1453 display: inline-block;
1458 .waveform span.done {
1459 background: linear-gradient(to top, darken($red, 5%) 0%, darken($red, 10%) 100%);
1462 .waveform span.done.current + span {
1466 .waveform i.duration {
1478 border-bottom: 1px dotted #666;
1481 div.fragment-sound {
1485 div.soundcell div.logo {
1486 vertical-align: top;
1489 div.fragment-sound {
1492 div.extra-soundfiles div.fragment-sound {
1496 div.extra-soundfiles div.fragment-name {
1503 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1505 div.extra-soundfiles ul li div.fragment-sound div.audio {
1509 #fiber-content div.extra-soundfiles strong {
1510 text-transform: uppercase;
1514 .nonstop-track-title, .nonstop-track-artist {
1519 padding-right: 75px;
1522 #fiber-content div.extra-soundfiles .soundfile-info strong {
1526 #fiber-content div.extra-soundfiles .soundfile-info a {
1527 text-decoration: none;
1530 #fiber-content div.extra-soundfiles {
1534 div.extra-soundfiles div.logo {
1535 display: inline-block;
1538 div#fiber-content div.extra-soundfiles ul.list {
1539 display: inline-block;
1541 width: calc(100% - 74px);
1544 div.download-links {
1550 div.hidden-download-links {
1551 display: none !important;
1554 div.episode-detail div.sound div.download-links {
1555 display: inline-block;
1560 div.extra-soundfiles div.download-links {
1568 div#agenda div.content-inline {
1572 div.previous-and-next-months {
1576 div.publication-date.date.smooth {
1580 #All h1.top.fullwidth {
1586 flex-direction: row;
1592 @media screen and (max-width: $size_s) {
1604 background: $secondary;
1607 border-bottom: 3px solid $yellow;
1616 div#dialog-background,
1617 div.gallery div.first {
1623 background: rgba(0, 0, 0, 0.9);
1628 div.gallery div.first img {
1630 padding-bottom: 25px;
1632 margin-left: -500px;
1636 transition: all 0.5s ease;
1637 transform-origin: bottom left;
1640 div.portrait div.gallery div.first img {
1642 margin-left: -240px;
1648 div.gallery span.gallery-legend {
1649 display: inline-block;
1659 div.portrait div.gallery span.gallery-legend {
1663 @media screen and (max-width: $size_m) {
1664 div.portrait div.gallery div.first img,
1665 div.gallery div.first img {
1671 display: inline-block;
1686 #fiber-content div.topikcellcontent a {
1687 text-decoration: none;
1691 #fiber-content div.topikcell .topik-large a {
1695 div.topikcellcontent h5 {
1699 div.topikcellcontent.topik-large a {
1702 display: inline-block;
1706 div.topikcellcontent.topik-large img {
1711 div.topikcellcontent.topik-large a div {
1712 @media screen and (min-width: 760px) {
1718 white-space: nowrap;
1720 @media screen and (max-width: 760px) {
1726 div.topikcellcontent a {
1728 display: inline-block;
1731 box-sizing: border-box;
1736 div.topikcellcontent img {
1739 div.topikcellcontent h2 {
1743 .program-week img.smooth {
1747 div#dialog-background {
1760 div#dialog-embed textarea {
1765 div#dialog-embed #close-button {
1771 min-height: auto !important;
1774 div.soundfile-info {
1780 background: transparent;
1783 body#embed #Commons,
1784 body#embed #metaNav,
1786 body#embed #userLog,
1787 body#embed #panikdb,
1788 body#embed #Player {
1792 body#embed #Changing {
1797 body#embed #Main > .wrapper {
1808 body#embed ul.custom {
1809 display: inline-block;
1810 width: calc(100% - 110px);
1813 body#embed ul.custom .soundfile-info {
1817 body#embed span.fragment-title {
1818 font-weight: normal;
1830 table.playlist td.tracktime {
1835 p.playlist-disclaimer {
1842 #main-topiks #fiber-nav li ul {
1846 #main-topiks #fiber-nav li ul li {
1851 #main-topiks #fiber-nav li ul li a {
1860 @media screen and (min-width:$size_m){
1862 width: calc(90vw - 240px);
1881 transition: opacity 1s ease;
1888 #chat div.msg.msg-out span.content {
1894 display: inline-block;
1897 text-overflow: ellipsis;
1901 #chat span.content {
1902 display: inline-block;
1903 padding-left: 11rem;
1906 #chat div.msg.info span.content {
1912 @media screen and (max-width: $size_m) {
1918 #chat span.content {
1924 h1.top > span.chat.with-logo {
1927 display: inline-block;
1928 max-width: calc(100% - 140px);
1937 border: 2px solid black;
1940 @media screen and (max-width:$size_m){
1944 h1.top > span.chat.with-logo {
1948 div.topikcellcontent a {
1951 #fiber-content div.topikcell a {
1956 div#CurrentlyChatting {
1961 div.description-emission-chat {
1969 div#chat.moderation .msg-in span.from {
1973 div#chat.moderation .msg-in span.from:hover::after {
1975 font-family: FontAwesome;
1980 div.programCell a.playlist {
1986 color: lighten($primary, 20);
1987 text-transform: uppercase;
1995 -webkit-user-select: none;
1996 -moz-user-select: none;
1997 -ms-user-select: none;
2003 box-sizing: border-box;
2004 transition: all ease 0.5s;
2010 box-sizing: border-box;
2012 padding-bottom: 20px;
2015 @media screen and (max-width: $size_s) {
2016 width: calc(50% - 1rem);
2027 @extend %image-bordure;
2028 @media screen and (max-width: $size_s) {
2034 text-transform: uppercase;
2039 transition: all ease 0.5s;
2045 text-transform: lowercase;
2053 div.emission-detail {
2069 transition: all .2s;
2071 background-color: $blue;
2074 @media screen and (max-width: $size_s) {
2086 transition: all .2s;
2093 background: $yellow url($data_uri_facebook) center center no-repeat;
2096 background-color: $red;
2098 @media screen and (max-width:$size_m) {
2105 background: $yellow url($data_uri_twitter) center center no-repeat;
2110 background: $yellow url($data_uri_instagram) center center no-repeat;
2114 background-repeat: no-repeat;
2119 background: url($data_uri_start), url($data_uri_pause);
2120 background-position: 0 0, -50px 0;
2124 background: url($data_uri_pause);
2125 background-position: 0 0;
2128 div.playListControls {
2129 button.action-pause {
2130 background-repeat: no-repeat;
2133 background: url($data_uri_pause);
2136 button.action-play {
2137 background-repeat: no-repeat;
2140 background: url($data_uri_play);
2145 background: transparent top center repeat-x;
2149 div#specialHome h1.top {
2150 background: transparent bottom center repeat-x;
2151 padding-bottom: 62px;
2155 div#specialHome h1.top {
2159 padding-bottom: 14px;
2161 padding-right: 10px;
2163 padding-bottom: 10px;
2168 @media screen and (max-width: $size_m) {
2179 div.emission-detail {
2186 text-transform: none;
2195 @extend %image-bordure;
2196 @media screen and (max-width: $size_s) {
2206 box-sizing: border-box;
2210 border-bottom: solid 1px #ff8b57;
2211 text-decoration: none;
2213 background: #ff8b57;
2223 flex-direction: column;
2225 justify-content: space-between,
2229 align-self: flex-end;
2231 @media screen and (max-width: $size_s) {
2234 @media screen and (max-width: $size_m) {
2238 button.action-play {
2241 button.action-share {
2242 text-transform: none;
2244 button.icon-play-sign {
2251 background: transparent;
2255 &.playing button.icon-pause {
2267 div.emission-episodes {
2277 box-sizing: border-box;
2281 display: inline-block;
2282 margin-bottom: 1rem;
2286 @extend %image-bordure;
2312 div.emission-episodes.archive::after {
2329 @media screen and (max-width: $size_m) {
2337 @media screen and (max-width: $size_m) {
2344 text-transform: lowercase;
2348 padding-bottom: 2rem;
2352 padding-right: 10px;
2353 transition: padding 0.2s;
2361 .playing button.no-icon-remove::after {
2380 background: $secondary;
2382 animation-name: load_animation;
2383 animation-duration: 6000ms;
2384 animation-timing-function: ease-out;
2385 transition: opacity 200ms linear;
2391 @keyframes load_animation {
2397 text-transform: uppercase;
2404 @media screen and (max-width:$size_m){
2410 padding-bottom: 2rem;
2413 .episode-auto-selection-cell.hide-emission-titles {
2414 .emission-title, .soundfile-info .sep {
2419 #detour-vers-le-footer {
2432 flex-direction: column;
2433 justify-content: space-between;
2435 @media screen and (max-width:$size_m){
2447 @media screen and (max-width:$size_m){
2448 justify-content: center;
2455 padding: 0.3em 0.6em;
2456 background: #ff8b57;
2458 border-radius: 10px;
2460 background: darken(#ff8b57, 20%);