8 /****************************************************/
11 .resymbol:hover,.control:hover{ opacity:0.5; }
14 text-transform: uppercase;
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;}
35 font-family: RegloNormal;
40 text-transform: uppercase;
45 border-bottom:3px solid black;
46 padding: 0.2em 0 0.2em 0;
47 margin: 0.2em 0 0.2em 0;
53 .sectionLabel, .label {
54 text-transform: uppercase;
59 .rightPart .right.sectionLabel {
61 border-bottom: 1px solid black;
70 .rightPart #search-form {
76 background-color:black;
81 padding:5px 7px 0px 7px;
84 /****************************************************/
86 /****************************************************/
87 .wrapper {max-width: 1560px; padding:0 1%;}
88 .wrapper.text {max-width: 780px; margin:auto;}
89 .wrapper .rightPart{margin-top:1em;}
91 @media screen and (min-width: 760px) {
92 #player-container.fixed {
95 width: calc(0% + 235px);
100 .wrapper.sided .leftPart,
101 .wrapper.sided .rightPart{
104 .wrapper.navigation .leftPart{
107 .wrapper.navigation .rightPart{
120 #specialHome .leftPart,
121 #specialHome .rightPart {
127 padding-bottom: 40px;
132 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
136 text-justify: distribute-all-lines;
139 display: inline-block;
146 font-family: "RegloBold";
147 text-transform: uppercase;
148 display:inline-block;
149 border: 1px solid #CCC !important;
153 border-radius: 0.7em;
154 -moz-border-radius: 0.7em;
155 -webkit-border-radius: 0.7em;
157 button.check, a.check {
159 text-transform: none;
160 display:inline-block;
166 font-family: "RegloBold";
167 text-transform: uppercase;
169 button.check:before, a.check:before {
170 display:inline-block;
174 padding:0.2em 0.5em 0.2em 0.5em;
175 border-radius: 0.2em;
176 -moz-border-radius: 0.2em;
177 -webkit-border-radius: 0.2em;
182 border:1px solid white;
194 /****************************************************/
196 /****************************************************/
201 /****************************************************/
203 /****************************************************/
207 background-color: #3a3a3a;
220 text-overflow: ellipsis;
224 #metaNav ul li#nav-search {
234 #metaNav ul li#nav-language span {
238 display: inline-block;
241 #metaNav ul li#nav-language span.lang-on {
245 #metaNav ul li a span{
246 display:inline-block;
249 #metaNav ul li a span.nav-icon {
252 #metaNav a:focus, #metaNav a:hover{
255 #metaNav ul li.active, #metaNav ul li.active a{
259 #metaNav ul li.active span.iconLabel {
262 #metaNav li#nav-search a {
267 display: inline-block;
272 border: 1px solid #ececec;
280 @media screen and (max-width:760px){
281 #bg-title { display: none; }
282 #metaNav .iconLabel {display:none;}
283 #metaNav ul li a span.nav-icon { display: inline-block; }
293 #metaNav ul li#nav-language {
294 padding: 0.2em 0 0 1em;
300 @media screen and (max-width:400px){
301 #metaNav ul li#nav-language {
302 padding: 0.2em 0 0 1ex;
309 /****************************************************/
311 /****************************************************/
313 .audio button {color:$primary !important;}
314 /****************************************************/
316 /****************************************************/
331 #mainHeader *{color:black !important;line-height:1em;}
332 #mainHeader #radioPanik{}
334 #Panik img{display:block;margin:auto;max-height:200px;}
338 #player-container #player{
343 #Changing h1.top a:hover {
347 @media screen and (max-width: 760px) {
354 #specialHome .leftPart h1.top {
357 #specialHome .leftPart h2 {
363 @media screen and (min-width: 760px) {
367 width: -webkit-calc(0% + 240px);
368 width: -moz-calc(0% + 240px);
369 width: calc(0% + 240px);
375 width: -webkit-calc(100% - 280px);
376 width: -moz-calc(100% - 280px);
377 width: calc(100% - 280px);
381 font-family: RegloScale;
382 text-transform: uppercase;
392 display: none !important;
401 #Emissions div.mainSub {
406 width: calc(98% - 320px);
409 #News div.mainSub ul,
410 #About div.mainSub ul,
411 #Emissions div.mainSub ul {
417 #News div.mainSub ul li,
418 #About div.mainSub ul li,
419 #Emissions div.mainSub ul li {
422 #News .news.wrapper {
426 #News .news.wrapper li a {
437 #Main > .soundfiles > .wrapper,
438 #Main > .news > .wrapper,
456 #fiber-content h2.title {
469 @media screen and (max-width: 760px) {
475 background: transparent center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
478 #All #backgroundBox h1.top {
485 color: $primary !important;
488 #All h1.top#radiopanik {
490 color: black !important;
491 padding-bottom: 30px;
495 #All #backgroundBox h1 {
500 #specialHome div.rightPart h1,
509 /****************************************************/
510 /**** SCREEN NAV ****/
511 #Nav nav{padding:0.1em;}
513 #Nav input{color:#333;}
516 border-width:0 0 2px 0;
518 border-color: transparent;
522 #Nav .active,#Nav .icon-check,#Nav .active *{
527 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
549 display: inline-block;
551 #Nav nav ul.distributed li {padding: 0;}
555 border-width:0 0 2px 0;border-style:solid;
557 #fiber-nav li, #fiber-nav li a{
566 #fiber-nav .selected > a,
567 #fiber-nav .current {
571 /****************************************************/
573 /****************************************************/
574 /*#Home #player{ float: left; } */
577 #player-container *{border-color:$primary !important;color:$primary !important;}
579 #player-container .metas, #player-container img{border-color:#fff;}
580 #player-container .padded{padding:0.3em;}
582 #player-container button,#player-container a{
584 #player-container .metas{
587 #DirectStreamPanikControler {
588 display:inline !important;
603 #Player.withPlaylist #player-container #Playlist{
604 border-top:2px solid black;
606 #Player.withPlaylist #player-container #Playlist{
611 #player-container #myPlaylist {
617 #player-container #myPlaylist a {
623 #player-container.minimized{
625 border-width:0px 2px 2px 0 !important;
626 border-bottom-right-radius:1em;
627 -moz-border-bottom-right-radius:1em;
628 -webkit-border-bottom-right-radius:1em;
630 #player-container.minimized #player{
636 #Playlist #playlistLabel{
640 #Playlist .playListControls{
642 #Playlist .playListControls button{
644 display:inline-block;
646 #Playlist .playListControls .playPause{
654 #Playlist .playing .icon-pause{
655 -webkit-animation: loading 1s infinite linear;
656 -moz-animation: loading 1s infinite linear;
657 -o-animation: loading 1s infinite linear;
658 animation: loading 1s infinite linear;
660 #Playlist .playlistControls button,#Playlist .playlistControls .button{
661 margin:0 0.1em 0 0.1em;
666 #Playlist .soundControls button{}
668 #player-container #Playlist ol{
673 #player-container #Playlist ol li{
678 #Playlist ol li .soundControls{
684 #Playlist ol li .title{
688 text-overflow: ellipsis;
692 text-transform:uppercase;
695 /*limit height of playlist*/
696 #player #CurrentlyPlaying,
697 #player-container #Playlist ol{
704 @media screen and (max-width: 760px) {
706 background-position: center 30px;
707 background-size: 130px;
709 #All h1.top#radiopanik {
715 #Player.withPlaylist #player-container #audioPlayer,
716 #Player.withPlaylist #player-container #audioPlayer,
717 #Player.withPlaylist #player-container #Playlist{
718 float:none !important;
719 width:auto !important;
720 border-right:none !important;
721 max-width:auto !important;
724 #player.on-chat-page {
728 div.chat-page .rightPart {
732 border-top: 1px solid #777;
737 /****************************************************/
738 /**** #Changing #Footer ... ****/
739 /****************************************************/
742 flex-direction: column;
758 #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 border-top:2px solid #333;
807 padding-bottom: 80px;
824 /****************************************************/
825 .inline .link{display:block;padding:1em;}
827 /**** EMISSIONS ****/
828 #Emission .emission-detail .title{}
831 #Emission-tabs-menu .sub{
835 .emission-detail .metas{
842 .emission-detail h4.subtitle {
845 font-family: 'Reglo';
846 text-transform: none;
850 .emission-detail ul.schedule {
855 .emission-detail ul.schedule .weekdiff {
859 .emission-detail article {
863 .emission-detail .logo{
868 @media screen and (max-width: 300px) {
869 .emission-detail .metas {
874 .emission-detail .logo{max-width:100%;}
876 .emission .mainHeader {
881 .emission .contacts {
886 .emission.inline, .emission.resume {
890 .emission.inline div.date {
893 display:inline-block;
897 .emission .archived {
901 .emission .link .description {
903 font-family: "RegloMedium";
912 .episode.resume, .episode.inline{
913 padding:1em 0.5em 1em;
915 .episode.inline .dateBloc, .episode.resume .dateBloc{
918 .episode.resume img {
919 border: 2px solid black;
922 .episode.resume .title{
925 .episode.resume .logo{
929 .episode.inline .logo {
934 .episode.resume .sound{
936 margin:0 0 0.5em 0.5em;
938 .episode.inline .sound.right{
944 .episode.inline .sound.right button{
948 padding-bottom:0.05em;
950 .episode.resume .sound.right .icon-download{
953 .episode.resume .sound.right .icon-download{
960 display: inline-block;
961 vertical-align: middle;
964 .episode.detail .logo.right{
968 .episode.resume .date .day, .emission-detail .date .day {
971 .episode.resume .content {
974 .episode.resume .content .title {
977 .episode.resume .logo {
981 .episode.inline .date{
985 #Emission-tabs-menu .emissions-newsitems {
989 #Emission-tabs-menu .emissions-newsitems ul.list li {
993 #Emission-tabs-menu .futur-episodes h5,
994 #Emission-tabs-menu .recent-episodes h5 {
998 #Emission-tabs-menu #search-form {
1002 div.extra-soundfiles h3 {
1007 div.extra-soundfiles ul li {
1011 div.extra-soundfiles ul li div.audio {
1019 div.extra-soundfiles ul strong {
1023 @media screen and (max-width: 400px) {
1029 .episode.resume .content {
1034 /****************************************************/
1052 font-family: "RegloBold";
1056 .newsRoll .title div{
1059 .newsRoll a, .newsRoll button img{
1060 border:3px 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: 100%; }
1090 .news li.item a {padding:1em;}
1098 border-bottom:3px solid #ccc;
1104 justify-content: space-between;
1108 @media only screen and (max-width: 970px) {
1112 box-sizing: border-box;
1117 @media only screen and (max-width: 970px) {
1118 .columns {column-count: 1; -webkit-column-count: 1; -moz-column-count: 1;}
1122 /****************************************************/
1124 /****************************************************/
1126 #Home #Nav .wrapper{
1127 max-width:auto !important;
1128 width:auto !important;
1132 @media screen and (max-width:800px){
1133 #Home .newsRoll .logo{
1137 @media screen and (max-width:600px){
1138 #Home .newsRoll .logo{
1144 /****************************************************/
1146 /****************************************************/
1148 .program.tabs nav ul li{
1154 .program.tabs nav ul li.week-arrow {
1156 padding-bottom: 5px;
1159 .program ul .dateBloc {
1163 .program ul .schedule {
1169 .program-week .programDate{
1173 .program-week .programCell{
1176 .program-week .nonStop .programDate{
1179 .program-week .nonStop .programCell{
1184 .program-week a.nonstop{
1188 .program-week .inline,.program-week .resume{padding:0;}
1189 .program-week .description{}
1191 .program-week .title {
1196 .program-week .smooth {
1200 padding-bottom: 8px;
1203 .program-week .emission h5,
1204 .program-week .smooth .title {
1206 text-transform: uppercase;
1209 .program-week .description {
1214 .program-week .programCell:hover {
1218 #Changing .program-week .programCell a {
1222 #Changing .program-week .programCell .smooth a {
1226 #Changing .program-week .programCell .smooth h5 a {
1231 /****************************************************/
1233 /****************************************************/
1235 .search li.previous-page {
1242 .search li.next-page {
1250 text-align: justify;
1254 /****************************************************/
1256 /****************************************************/
1263 height:50px !important;
1265 #grid .heure.vertical {
1269 padding:1em 0 1em 0;
1274 padding:0.5em 0.2em 0.5em 0.2em;
1277 border:1px dotted #ddd;
1284 #grid .highlighted,#grid .highlighted *{
1285 background:#333 !important;
1286 color:white !important;
1289 #grid .highlighted,#grid .highlighted *{
1290 background:#333 !important;
1291 color:white !important;
1293 #Emissions li.item.normal{
1296 #Emissions li.item.hightlighted{
1297 display:block !important;
1300 #gridNav span.category {
1301 text-transform: none;
1305 /**** Navigation for static pages ****/
1310 #fiber-nav li, #fiber-nav li a {
1321 text-decoration: underline;
1324 #fiber-content .episode a,
1325 #fiber-content ul.list a {
1326 text-decoration: none;
1329 #fiber-content a:hover {
1330 text-decoration: none;
1341 .userContent strong,
1342 #fiber-content strong {
1343 text-transform: none;
1344 font-family: "RegloBold";
1350 font-family: inherit;
1354 /**** SCREEN SIZE ADAPTATIONS ****/
1355 html #main{ font-size: 70%; }
1356 body { font-size: 18px;}
1357 @media (max-width: 300px){
1358 body #All{ font-size: 80%; }
1361 @media (min-width: 300px) and (max-width:800px){
1362 body #All{ font-size: 85%; }
1365 @media (min-width: 700px) and (max-width:1000px){
1366 body #All{ font-size: 90%; }
1369 @media (min-width: 1000px) {
1370 body #All{ font-size: 100%; }
1376 padding-bottom: 2em;
1379 #Home #subscribe-form {
1383 #subscribe-form ul.errorlist {
1394 #subscribe-form input {
1399 #Nav div.search form {
1403 div.episode.resume div.title {
1404 white-space: normal;
1407 #Home div.program.tabs {
1422 #recent-emissions h3,
1428 #recent-emissions h3.sectionLabel {
1432 .episode.soundfile {
1436 .soundfile .smooth {
1447 .frontpage.soundfile .audio {
1450 padding-bottom: 1ex;
1460 border: 1px solid #888;
1461 border-width: 1px 1px 0 1px;
1462 -webkit-transform-origin: bottom right;
1463 -webkit-transform: rotate(270deg);
1464 -moz-transform-origin: bottom right;
1465 -moz-transform: rotate(270deg);
1466 transform-origin: bottom right;
1467 transform: rotate(270deg);
1474 .soundfile .special,
1475 .newsitem .special {
1479 .newsitem .special .smooth {
1485 div.userContent ul {
1492 div.userContent h4 {
1493 text-transform: none;
1494 font-family: "Reglo";
1495 font-weight: normal;
1498 div.userContent h1 { font-size: 2em; }
1499 div.userContent h2 { font-size: 1.8em; }
1500 div.userContent h3 { font-size: 1.5em; }
1501 div.userContent h4 { font-size: 1.5em; }
1502 div.userContent a { text-decoration: underline; }
1504 div.userContent a.tag { text-decoration: none; }
1506 @media screen and (max-width: 760px) {
1513 #All #backgroundBox h1.top {
1517 #Player.withoutPlaylist #player-container #audioPlayer{
1521 #Player.withoutPlaylist #player-container #audioPlayer #Live{
1526 #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1528 background: $primary;
1530 #player-container * {color: white !important; }
1534 width:100% !important;
1540 #Player.withPlaylist #player-container #audioPlayer{
1543 border-right:2px solid black;
1545 #Player.withPlaylist #player-container #Playlist{
1550 #player-container #myPlaylist {
1554 #player-container #myPlaylist a {
1555 white-space: nowrap;
1558 #player-container #Playlist ol{
1567 div.extra-soundfiles {
1571 h3.episode-subtitle {
1581 background: #3A3A3A;
1582 background: rgba(10, 10, 10, 0.8);
1583 display: inline-block;
1587 .waveform span.done {
1588 background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
1591 .waveform span.done.current + span {
1592 background: $primary;
1595 .waveform i.duration {
1600 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1607 border-bottom: 1px dotted #666;
1610 div.fragment-sound {
1614 div.soundcell div.logo {
1615 vertical-align: top;
1618 div.fragment-sound {
1621 div.extra-soundfiles div.fragment-sound {
1625 div.extra-soundfiles div.fragment-name {
1632 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1634 div.extra-soundfiles ul li div.fragment-sound div.audio {
1638 #fiber-content div.extra-soundfiles strong {
1639 text-transform: uppercase;
1643 .nonstop-track-title, .nonstop-track-artist {
1648 padding-right: 75px;
1651 #fiber-content div.extra-soundfiles .soundfile-info strong {
1655 #fiber-content div.extra-soundfiles .soundfile-info a {
1656 text-decoration: none;
1659 #fiber-content div.extra-soundfiles {
1663 div.extra-soundfiles div.logo {
1664 display: inline-block;
1667 div#fiber-content div.extra-soundfiles ul.list {
1668 display: inline-block;
1670 width: calc(100% - 74px);
1673 div.download-links {
1679 div.hidden-download-links {
1680 display: none !important;
1683 div.episode-detail div.sound div.download-links {
1684 display: inline-block;
1689 div.extra-soundfiles div.download-links {
1697 div#agenda div.content-inline {
1701 div.previous-and-next-months {
1705 div.publication-date.date.smooth {
1709 #All h1.top.fullwidth {
1716 border: 1px solid #333;
1719 div#dialog-background,
1720 div.gallery div.first {
1726 background: rgba(0, 0, 0, 0.9);
1731 div.gallery div.first img {
1733 padding-bottom: 25px;
1735 margin-left: -320px;
1739 transition: all 0.5s ease;
1740 transform-origin: bottom left;
1743 div.portrait div.gallery div.first img {
1745 margin-left: -240px;
1749 border-bottom: 1px solid #ccc;
1752 div.gallery span.gallery-legend {
1753 display: inline-block;
1763 div.portrait div.gallery span.gallery-legend {
1767 div.gallery span.image {
1768 display: inline-block;
1772 @media screen and (max-width: 640px) {
1773 div.portrait div.gallery div.first img,
1774 div.gallery div.first img {
1780 display: inline-block;
1795 #fiber-content div.topikcellcontent a {
1796 text-decoration: none;
1800 #fiber-content div.cell.topik-large a {
1804 div.topikcellcontent h5 {
1808 div.topik-large div.topikcellcontent a {
1811 display: inline-block;
1815 div.topik-large div.topikcellcontent img {
1820 div.topik-large div.topikcellcontent a div {
1821 @media screen and (min-width: 760px) {
1827 white-space: nowrap;
1829 @media screen and (max-width: 760px) {
1835 div.topikcellcontent a {
1837 display: inline-block;
1840 box-sizing: border-box;
1845 div.topikcellcontent img {
1848 div.topikcellcontent h2 {
1852 @media only screen and (min-width: 1250px) {
1853 div.topikcellcontent a {
1854 display: inline-block;
1861 .program-week img.smooth {
1865 div#dialog-background {
1877 div#dialog-embed textarea {
1882 div#dialog-embed #close-button {
1888 min-height: auto !important;
1894 background: transparent;
1897 body#embed #Commons,
1898 body#embed #metaNav,
1900 body#embed #userLog,
1901 body#embed #panikdb,
1902 body#embed #Player {
1906 body#embed #Changing {
1911 body#embed #Main > .wrapper {
1919 body#embed ul.custom {
1920 display: inline-block;
1921 width: calc(100% - 72px);
1924 body#embed ul.custom .soundfile-info {
1928 body#embed span.fragment-title {
1929 font-weight: normal;
1932 ul.nonstop-playlist {
1941 p.playlist-disclaimer {
1948 #main-topiks #fiber-nav li ul {
1952 #main-topiks #fiber-nav li ul li {
1957 #main-topiks #fiber-nav li ul li a {
1966 @media screen and (min-width:760px){
1968 width: calc(90vw - 240px);
1987 transition: opacity 1s ease;
1994 #chat div.msg.msg-out span.content {
2000 display: inline-block;
2003 text-overflow: ellipsis;
2007 #chat span.content {
2008 display: inline-block;
2009 padding-left: 11rem;
2012 #chat div.msg.info span.content {
2018 @media screen and (max-width: 760px) {
2024 #chat span.content {
2030 h1.top > span.chat.with-logo {
2033 display: inline-block;
2034 max-width: calc(100% - 140px);
2043 border: 2px solid black;
2046 @media screen and (max-width:760px){
2050 h1.top > span.chat.with-logo {
2054 div.topikcellcontent a {
2057 #fiber-content div.topikcell a {
2062 div#CurrentlyChatting {
2067 div.description-emission-chat {
2075 div#chat.moderation .msg-in span.from {
2079 div#chat.moderation .msg-in span.from:hover::after {
2081 font-family: FontAwesome;
2086 div.programCell a.playlist {
2092 color: lighten($primary, 20);
2093 font-family: 'Reglo';
2094 text-transform: uppercase;
2102 -webkit-user-select: none;
2103 -moz-user-select: none;
2104 -ms-user-select: none;
2109 .rightPart .menucell {
2114 padding-bottom: 1rem;
2125 background: $secondary;
2127 animation-name: load_animation;
2128 animation-duration: 6000ms;
2129 animation-timing-function: ease-out;
2130 transition: opacity 200ms linear;
2136 @keyframes load_animation {
2141 .episode-auto-selection-cell.hide-emission-titles {
2142 .emission-title, .soundfile-info .sep {