10 /****************************************************/
14 .resymbol:hover,.control:hover{ opacity:0.5; }
16 text-transform: uppercase;
18 .inline .date, .resume .date{
23 .dateBloc{display:inline-block;}
24 .dateBloc *{line-height: 100%;}
25 .dateBloc .day {font-size: 1.8em;}
26 .dateBloc .number {font-size: 1.8em;}
27 .dateBloc .month {font-size: 0.8em;}
28 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
40 text-transform: uppercase;
44 border-bottom:3px solid black;
45 padding: 0.2em 0 0.2em 0;
46 margin: 0.2em 0 0.2em 0;
52 .sectionLabel, .label {
53 text-transform: uppercase;
57 .rightPart .right.sectionLabel {
59 border-bottom: 1px solid black;
67 .rightPart #search-form {
73 background-color:black;
78 padding:5px 7px 0px 7px;
85 #RefreshWhatsOnAir.spinning {
89 /****************************************************/
91 /****************************************************/
92 .wrapper {max-width: 1560px; padding:0 1%;}
93 .wrapper.text {max-width: 780px; margin:auto;}
94 .wrapper .rightPart{margin-top:1em;}
96 @media screen and (min-width: $size_m) {
97 #player-container.fixed {
100 width: calc(0% + 235px);
105 .wrapper.sided .leftPart,
106 .wrapper.sided .rightPart{
109 .wrapper.navigation .leftPart{
112 .wrapper.navigation .rightPart{
125 #specialHome .leftPart,
126 #specialHome .rightPart {
132 padding-bottom: 40px;
137 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
141 text-justify: distribute-all-lines;
144 display: inline-block;
151 text-transform: uppercase;
152 display:inline-block;
153 border: 1px solid #CCC !important;
157 border-radius: 0.7em;
158 -moz-border-radius: 0.7em;
159 -webkit-border-radius: 0.7em;
161 button.check, a.check {
163 text-transform: none;
164 display:inline-block;
170 text-transform: uppercase;
172 button.check:before, a.check:before {
173 display:inline-block;
177 padding:0.2em 0.5em 0.2em 0.5em;
178 border-radius: 0.2em;
179 -moz-border-radius: 0.2em;
180 -webkit-border-radius: 0.2em;
185 border:1px solid white;
197 /****************************************************/
199 /****************************************************/
204 /****************************************************/
206 /****************************************************/
210 background-color: #3a3a3a;
223 text-overflow: ellipsis;
227 #metaNav ul li#nav-search {
236 #metaNav ul li#nav-language span {
238 padding:0.4em 0 0.5em 0;
239 display: inline-block;
242 #metaNav ul li#nav-language span.lang-on {
246 #metaNav ul li a span{
247 padding:0.4em 0 0.5em 0;
248 display:inline-block;
251 #metaNav ul li a span.nav-icon {
254 #metaNav a:focus, #metaNav a:hover{
257 #metaNav ul li.active, #metaNav ul li.active a{
261 #metaNav ul li.active span.iconLabel {
264 #metaNav li#nav-search a {
269 display: inline-block;
274 border: 1px solid #ececec;
282 @media screen and (max-width:$size_m){
283 #bg-title { display: none; }
284 #metaNav .iconLabel {display:none;}
285 #metaNav ul li a span.nav-icon { display: inline-block; }
295 #metaNav ul li#nav-language {
296 padding: 0.2em 0 0 1em;
300 /****************************************************/
302 /****************************************************/
304 .audio button, .audio a {color:$primary;}
305 /****************************************************/
307 /****************************************************/
319 display: inline-block;
323 display: inline-block;
324 @media screen and (min-width: $size_m) {
329 #mainHeader *{color:black !important;line-height:1em;}
331 #Panik img{display:block;margin:auto;max-height:200px;}
335 #player-container #player{
340 #Changing h1.top a:hover {
344 @media screen and (max-width: $size_m) {
359 @media screen and (min-width: $size_m) {
361 box-sizing: border-box;
365 box-sizing: border-box;
369 text-transform: uppercase;
372 padding-bottom: 20px;
380 display: none !important;
389 #Emissions div.mainSub {
394 width: calc(98% - 320px);
397 #News div.mainSub ul,
398 #About div.mainSub ul,
399 #Emissions div.mainSub ul {
404 #News div.mainSub ul li,
405 #About div.mainSub ul li,
406 #Emissions div.mainSub ul li {
409 #News .news.wrapper {
413 #News .news.wrapper li a {
425 #Main > .soundfiles > .wrapper,
426 #Main > .news > .wrapper,
445 #fiber-content h2.title {
453 background: transparent url(../img/logo-2018.png) bottom 7px left 10px no-repeat;
454 @media screen and (max-width: $size_m) {
455 background-size: 320px;
459 #All #backgroundBox h1.top {
466 color: $primary !important;
469 #All h1.top#radiopanik {
474 #All #backgroundBox h1 {
479 #specialHome div.rightPart h1,
488 /****************************************************/
489 /**** SCREEN NAV ****/
490 #Nav nav{padding:0.1em;}
492 #Nav input{color:#333;}
495 border-width:0 0 2px 0;
497 border-color: transparent;
501 #Nav .active,#Nav .icon-check,#Nav .active *{
506 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
528 display: inline-block;
530 #Nav nav ul.distributed li {padding: 0;}
534 border-width:0 0 2px 0;border-style:solid;
536 #fiber-nav li, #fiber-nav li a{
545 #fiber-nav .selected > a,
546 #fiber-nav .current {
550 /****************************************************/
552 /****************************************************/
553 /*#Home #player{ float: left; } */
555 #player-container .metas, #player-container img{border-color:#fff;}
556 #player-container .padded{padding:0.3em;}
558 #player-container button,#player-container a{
560 #player-container .metas{
563 #DirectStreamPanikControler {
565 #DirectStreamPanikControler div.label {
567 @media screen and (max-width: $size_m) {
583 @media screen and (max-width: $size_m) {
595 #Player.withPlaylist {
601 #player-container #myPlaylist a {
605 #player-container.minimized{
607 border-width:0px 2px 2px 0 !important;
608 border-bottom-right-radius:1em;
609 -moz-border-bottom-right-radius:1em;
610 -webkit-border-bottom-right-radius:1em;
612 #player-container.minimized #player{
622 #Playlist #playlistLabel{
626 #Playlist .playListControls{
628 #Playlist .playListControls button{
630 display:inline-block;
632 #Playlist .playListControls .playPause{
638 @media screen and (max-width: $size_m) {
643 #Playlist .playing .icon-pause{
644 -webkit-animation: loading 1s infinite linear;
645 -moz-animation: loading 1s infinite linear;
646 -o-animation: loading 1s infinite linear;
647 animation: loading 1s infinite linear;
649 #Playlist .playlistControls button,#Playlist .playlistControls .button{
650 margin:0 0.1em 0 0.1em;
655 #Playlist .soundControls button{}
657 #player-container #Playlist ol li{
662 #Playlist ol li .soundControls{
668 #Playlist ol li.active .soundControls {
671 #Playlist ol li .title{
672 display:inline-block;
674 text-overflow: ellipsis;
678 @media screen and (max-width: $size_m) {
680 background-position: center 30px;
682 #All h1.top#radiopanik {
687 #Player.withPlaylist #player-container #audioPlayer,
688 #Player.withPlaylist #player-container #audioPlayer,
689 #Player.withPlaylist #player-container #Playlist{
690 float:none !important;
691 width:auto !important;
692 border-right:none !important;
693 max-width:auto !important;
696 #player.on-chat-page {
700 div.chat-page .rightPart {
704 border-top: 1px solid #777;
709 /****************************************************/
710 /**** #Changing #Footer ... ****/
711 /****************************************************/
714 flex-direction: column;
722 @media screen and (max-width: $size_m) {
732 #Changing a:hover,#Changing button:hover {
733 text-decoration:none;
735 /* GLOBAL SITE NAV */
744 -moz-box-shadow: 0px 0px 3px #000;
745 -webkit-box-shadow: 0px 0px 3px #000;
746 box-shadow: 0px 0px 3px #000;
747 border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
752 background-color:$primary;
753 border: 2px solid black;
754 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);
757 background-color:grey;
761 background-color:green;
766 background-color:$primary;
778 background: white url($data_uri_delim2) 0 20px repeat-x;
789 @media screen and (max-width: $size_m) {
790 padding-bottom: 30px;
795 /****************************************************/
796 .inline .link{display:block;padding:1em;}
798 /**** EMISSIONS ****/
799 #Emission .emission-detail .title{}
802 #Emission-tabs-menu .sub{
806 .emission-detail .metas{
813 .emission-detail h4.subtitle {
816 text-transform: none;
820 .emission-detail ul.schedule {
825 .emission-detail ul.schedule .weekdiff {
829 .emission-detail article {
833 .emission-detail .logo{
838 .emission .mainHeader {
843 .emission .contacts {
848 .emission.inline, .emission.resume {
852 .emission.inline div.date {
855 display:inline-block;
859 .emission .archived {
863 .emission .link .description {
873 .episode.resume, .episode.inline{
874 padding:1em 0.5em 1em;
876 .episode.inline .dateBloc, .episode.resume .dateBloc{
879 .episode.resume img {
880 border: 2px solid black;
883 .episode.resume .title{
886 .episode.resume .logo{
890 .episode.inline .logo {
895 .episode.resume .sound{
897 margin:0 0 0.5em 0.5em;
899 .episode.inline .sound.right{
905 .episode.inline .sound.right button{
909 padding-bottom:0.05em;
911 .episode.resume .sound.right .icon-download{
914 .episode.resume .sound.right .icon-download{
921 display: inline-block;
922 vertical-align: middle;
925 .episode.detail .logo.right{
929 .episode.resume .date .day, .emission-detail .date .day {
932 .episode.resume .content {
935 .episode.resume .content .title {
938 .episode.resume .logo {
942 .episode.inline .date{
946 #Emission-tabs-menu .emissions-newsitems {
950 #Emission-tabs-menu .emissions-newsitems ul.list li {
954 #Emission-tabs-menu .futur-episodes h5,
955 #Emission-tabs-menu .recent-episodes h5 {
959 #Emission-tabs-menu #search-form {
963 div.extra-soundfiles h3 {
968 div.extra-soundfiles ul li {
972 div.extra-soundfiles ul li div.audio {
980 div.extra-soundfiles ul strong {
984 /****************************************************/
1005 .newsRoll .title div{
1008 .newsRoll a, .newsRoll button img{
1009 border:3px solid $secondary;
1012 .newsRoll .by3 button {
1016 .soundfiles .special a,
1021 .special .labels .item,
1022 .newsRoll .labels .item{
1024 background: $secondary;
1030 .newsList .current a{
1033 /****************************************************/
1037 .soundfiles ul.custom li a,
1038 .news ul.custom li a { max-width: 98%; }
1039 .news li.item a {padding:1em;}
1047 border-bottom:3px solid #ccc;
1050 /****************************************************/
1052 /****************************************************/
1054 #Home #Nav .wrapper{
1055 max-width:auto !important;
1056 width:auto !important;
1059 /****************************************************/
1061 /****************************************************/
1063 .program.tabs nav ul li{
1069 .program.tabs nav ul li.week-arrow {
1071 padding-bottom: 5px;
1074 .program ul .dateBloc {
1078 .program ul .schedule {
1084 .program-week .programDate{
1088 .program-week .programCell{
1091 .program-week .nonStop .programDate{
1094 .program-week .nonStop .programCell{
1099 .program-week a.nonstop{
1103 .program-week .inline,.program-week .resume{padding:0;}
1104 .program-week .description{}
1106 .program-week .title {
1111 .program-week .smooth {
1115 padding-bottom: 8px;
1118 .program-week .emission h5,
1119 .program-week .smooth .title {
1121 text-transform: uppercase;
1124 .program-week .description {
1129 .program-week .programCell:hover {
1133 #Changing .program-week .programCell a {
1137 #Changing .program-week .programCell .smooth a {
1141 #Changing .program-week .programCell .smooth h5 a {
1146 /****************************************************/
1148 /****************************************************/
1150 .search li.previous-page {
1157 .search li.next-page {
1165 text-align: justify;
1169 /****************************************************/
1171 /****************************************************/
1178 height:50px !important;
1180 #grid .heure.vertical {
1184 padding:1em 0 1em 0;
1189 padding:0.5em 0.2em 0.5em 0.2em;
1192 border:1px dotted #ddd;
1199 #grid .highlighted,#grid .highlighted *{
1200 background:#333 !important;
1201 color:white !important;
1204 #grid .highlighted,#grid .highlighted *{
1205 background:#333 !important;
1206 color:white !important;
1208 #Emissions li.item.normal{
1211 #Emissions li.item.hightlighted{
1212 display:block !important;
1215 #gridNav span.category {
1216 text-transform: none;
1220 /**** Navigation for static pages ****/
1225 #fiber-nav li, #fiber-nav li a {
1236 text-decoration: underline;
1239 #fiber-content .episode a,
1240 #fiber-content ul.list a {
1241 text-decoration: none;
1244 #fiber-content a:hover {
1245 text-decoration: none;
1256 .userContent strong,
1257 #fiber-content strong {
1258 text-transform: none;
1264 font-family: inherit;
1268 /**** SCREEN SIZE ADAPTATIONS ****/
1269 html #main{ font-size: 70%; }
1270 body { font-size: 18px;}
1271 @media (max-width: 300px){
1272 body #All{ font-size: 80%; }
1275 @media (min-width: 300px) and (max-width:800px){
1276 body #All{ font-size: 85%; }
1279 @media (min-width: 800px) and (max-width:$size_m){
1280 body #All{ font-size: 90%; }
1283 @media (min-width: $size_m) {
1284 body #All{ font-size: 100%; }
1290 padding-bottom: 2em;
1293 #Home #subscribe-form {
1297 #subscribe-form ul.errorlist {
1308 #subscribe-form input {
1313 #Nav div.search form {
1317 div.episode.resume div.title {
1318 white-space: normal;
1321 #Home div.program.tabs {
1336 #recent-emissions h3,
1342 #recent-emissions h3.sectionLabel {
1346 .episode.soundfile {
1350 .soundfile .smooth {
1361 .frontpage.soundfile .audio {
1364 padding-bottom: 1ex;
1374 border: 1px solid #888;
1375 border-width: 1px 1px 0 1px;
1376 -webkit-transform-origin: bottom right;
1377 -webkit-transform: rotate(270deg);
1378 -moz-transform-origin: bottom right;
1379 -moz-transform: rotate(270deg);
1380 transform-origin: bottom right;
1381 transform: rotate(270deg);
1388 .soundfile .special,
1389 .newsitem .special {
1393 .newsitem .special .smooth {
1399 div.userContent ul {
1406 div.userContent h4 {
1407 text-transform: none;
1408 font-weight: normal;
1411 div.userContent h1 { font-size: 2em; }
1412 div.userContent h2 { font-size: 1.8em; }
1413 div.userContent h3 { font-size: 1.5em; }
1414 div.userContent h4 { font-size: 1.5em; }
1415 div.userContent a { text-decoration: underline; }
1417 div.userContent a.tag { text-decoration: none; }
1419 @media screen and (max-width: $size_m) {
1426 #All #backgroundBox h1.top {
1430 #Player.withoutPlaylist #player-container #audioPlayer{
1434 #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1436 background: $primary;
1438 #player-container * {color: white !important; }
1442 width:100% !important;
1454 div.extra-soundfiles {
1458 h3.episode-subtitle {
1468 background: $primary;
1469 background: linear-gradient(to top, darken($primary, 20%) 0%, $primary 40%);
1470 display: inline-block;
1474 .waveform span.done {
1475 background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
1476 background: linear-gradient(to top, darken($primary, 5%) 0%, darken($secondary, 10%) 100%);
1479 .waveform span.done.current + span {
1480 background: $yellow;
1483 .waveform i.duration {
1488 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1493 div.fragment-sound {
1497 div.soundcell div.logo {
1498 vertical-align: top;
1501 div.fragment-sound {
1504 div.extra-soundfiles div.fragment-sound {
1508 div.extra-soundfiles div.fragment-name {
1515 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1517 div.extra-soundfiles ul li div.fragment-sound div.audio {
1521 #fiber-content div.extra-soundfiles strong {
1522 text-transform: uppercase;
1526 .nonstop-track-title, .nonstop-track-artist {
1531 padding-right: 75px;
1534 #fiber-content div.extra-soundfiles .soundfile-info strong {
1538 #fiber-content div.extra-soundfiles .soundfile-info a {
1539 text-decoration: none;
1542 #fiber-content div.extra-soundfiles {
1546 div.extra-soundfiles div.logo {
1547 display: inline-block;
1550 div#fiber-content div.extra-soundfiles ul.list {
1551 display: inline-block;
1553 width: calc(100% - 72px);
1556 div.download-links {
1562 div.hidden-download-links {
1563 display: none !important;
1566 div.episode-detail div.sound div.download-links {
1567 display: inline-block;
1572 div.extra-soundfiles div.download-links {
1580 div#agenda div.content-inline {
1584 div.previous-and-next-months {
1588 div.publication-date.date.smooth {
1592 #All h1.top.fullwidth {
1598 flex-direction: row;
1605 @media screen and (max-width: $size_s) {
1618 background: $secondary;
1621 border-bottom: 3px solid $yellow;
1630 div#dialog-background,
1631 div.gallery div.first {
1637 background: rgba(0, 0, 0, 0.9);
1642 div.gallery div.first img {
1644 padding-bottom: 25px;
1646 margin-left: -500px;
1650 transition: all 0.5s ease;
1651 transform-origin: bottom left;
1654 div.portrait div.gallery div.first img {
1656 margin-left: -240px;
1662 div.gallery span.gallery-legend {
1663 display: inline-block;
1673 div.portrait div.gallery span.gallery-legend {
1677 @media screen and (max-width: $size_m) {
1678 div.portrait div.gallery div.first img,
1679 div.gallery div.first img {
1685 display: inline-block;
1699 #fiber-content div.topikcell a {
1700 text-decoration: none;
1704 #fiber-content div.topikcell .topik-large a {
1708 div.topikcellcontent h5 {
1712 div.topikcellcontent.topik-large a {
1715 display: inline-block;
1719 div.topikcellcontent.topik-large img {
1724 div.topikcellcontent a {
1726 display: inline-block;
1729 box-sizing: border-box;
1734 div.topikcellcontent img {
1737 div.topikcellcontent h2 {
1741 .program-week img.smooth {
1745 div#dialog-background {
1758 div#dialog-embed textarea {
1763 div#dialog-embed #close-button {
1769 min-height: auto !important;
1772 div.soundfile-info {
1778 background: transparent;
1781 body#embed #Commons,
1782 body#embed #metaNav,
1784 body#embed #userLog,
1785 body#embed #panikdb,
1786 body#embed #Player {
1790 body#embed #Changing {
1795 body#embed #Main > .wrapper {
1806 body#embed ul.custom {
1807 display: inline-block;
1808 width: calc(100% - 110px);
1811 body#embed ul.custom .soundfile-info {
1815 body#embed span.fragment-title {
1816 font-weight: normal;
1828 table.playlist td.tracktime {
1833 p.playlist-disclaimer {
1840 #main-topiks #fiber-nav li ul {
1844 #main-topiks #fiber-nav li ul li {
1849 #main-topiks #fiber-nav li ul li a {
1858 @media screen and (min-width:$size_m){
1860 width: calc(90vw - 240px);
1879 transition: opacity 1s ease;
1886 #chat div.msg.msg-out span.content {
1892 display: inline-block;
1895 text-overflow: ellipsis;
1899 #chat span.content {
1900 display: inline-block;
1901 padding-left: 11rem;
1904 #chat div.msg.info span.content {
1910 @media screen and (max-width: $size_m) {
1916 #chat span.content {
1922 h1.top > span.chat.with-logo {
1925 display: inline-block;
1926 max-width: calc(100% - 140px);
1935 border: 2px solid black;
1938 @media screen and (max-width:$size_m){
1942 h1.top > span.chat.with-logo {
1946 div.topikcellcontent a {
1949 #fiber-content div.topikcell a {
1954 div#CurrentlyChatting {
1959 div.description-emission-chat {
1967 div#chat.moderation .msg-in span.from {
1971 div#chat.moderation .msg-in span.from:hover::after {
1973 font-family: FontAwesome;
1978 div.programCell a.playlist {
1984 color: lighten($primary, 20);
1985 text-transform: uppercase;
1993 -webkit-user-select: none;
1994 -moz-user-select: none;
1995 -ms-user-select: none;
2000 a:hover div.emission-tile img {
2007 box-sizing: border-box;
2010 @media screen and (max-width: $size_m) {
2016 //filter: grayscale(100%);
2020 box-sizing: border-box;
2022 background: url(../img/big-flower.png);
2023 background-clip: content-box;
2031 text-transform: uppercase;
2038 background: $primary;
2049 background: $yellow;
2063 background: $yellow url($data_uri_facebook) center center no-repeat;
2069 background: $yellow url($data_uri_twitter) center center no-repeat;
2074 background: $yellow url($data_uri_instagram) center center no-repeat;
2078 background-repeat: no-repeat;
2083 background: url($data_uri_start), url($data_uri_pause);
2084 background-position: 0 0, -50px 0;
2088 background: url($data_uri_pause);
2089 background-position: 0 0;
2092 div.playListControls {
2093 button.action-pause {
2094 background-repeat: no-repeat;
2097 background: url($data_uri_pause);
2100 button.action-play {
2101 background-repeat: no-repeat;
2104 background: url($data_uri_play);
2109 background: transparent top center repeat-x;
2113 div#specialHome h1.top {
2114 background: transparent bottom center repeat-x;
2115 padding-bottom: 62px;
2119 div#specialHome h1.top {
2123 background: url($data_uri_news_delim1) bottom center repeat-x;
2124 padding-bottom: 14px;
2126 flex-direction: row;
2127 > h2, > div { width: 50%; box-sizing: border-box; padding-bottom: 30px; padding-top: 30px;}
2130 padding-right: 10px;
2131 background: $primary;
2138 @media screen and (max-width: $size_m) {
2149 div.emission-detail {
2159 padding-bottom: 14px;
2161 flex-direction: row;
2162 @media screen and (max-width: $size_m) {
2166 @media screen and (max-width: $size_s) {
2173 @media screen and (max-width: $size_m) {
2176 @media screen and (max-width: $size_s) {
2187 @media screen and (max-width: $size_m) {
2190 @media screen and (max-width: $size_s) {
2194 box-sizing: border-box;
2200 &.emission-episode div.emission-info {
2201 @media screen and (max-width: $size_m) {
2208 @media screen and (max-width: $size_m) {
2214 @media screen and (max-width: $size_m) {
2215 padding-bottom: 150px;
2221 @media screen and (max-width: $size_m) {
2224 button.action-play {
2227 button.action-share {
2228 text-transform: none;
2234 div.emission-episodes {
2236 background: $yellow;
2237 @media screen and (max-width: $size_m) {
2246 box-sizing: border-box;
2250 @media screen and (max-width: $size_m) {
2254 display: inline-block;
2257 //filter: grayscale(100%);
2258 box-sizing: border-box;
2260 background: url(../img/big-flower.png);
2261 background-clip: content-box;
2275 display: inline-block;
2276 background: $yellow;
2282 text-transform: uppercase;
2289 background: $primary;
2304 @media screen and (max-width: $size_s) {
2316 div.emission-episodes.archive::after {
2333 @media screen and (max-width: $size_m) {
2341 @media screen and (max-width: $size_m) {
2348 text-transform: uppercase;
2354 .playing button.no-icon-remove::after {
2359 background: transparent url(../img/bandeau-2018.svg) top left no-repeat;
2360 background-size: 100% auto;