9 /****************************************************/
13 .resymbol:hover,.control:hover{ opacity:0.5; }
15 text-transform: uppercase;
17 .inline .date, .resume .date{
22 .dateBloc{display:inline-block;}
23 .dateBloc *{line-height: 100%;}
24 .dateBloc .day {font-size: 1.8em;}
25 .dateBloc .number {font-size: 1.8em;}
26 .dateBloc .month {font-size: 0.8em;}
27 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
39 text-transform: uppercase;
43 border-bottom:3px solid black;
44 padding: 0.2em 0 0.2em 0;
45 margin: 0.2em 0 0.2em 0;
51 .sectionLabel, .label {
52 text-transform: uppercase;
56 .rightPart .right.sectionLabel {
58 border-bottom: 1px solid black;
66 .rightPart #search-form {
72 background-color:black;
77 padding:5px 7px 0px 7px;
84 #RefreshWhatsOnAir.spinning {
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 @media screen and (min-width: 760px) {
96 #player-container.fixed {
99 width: calc(0% + 235px);
104 .wrapper.sided .leftPart,
105 .wrapper.sided .rightPart{
108 .wrapper.navigation .leftPart{
111 .wrapper.navigation .rightPart{
124 #specialHome .leftPart,
125 #specialHome .rightPart {
131 padding-bottom: 40px;
136 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
140 text-justify: distribute-all-lines;
143 display: inline-block;
150 text-transform: uppercase;
151 display:inline-block;
152 border: 1px solid #CCC !important;
156 border-radius: 0.7em;
157 -moz-border-radius: 0.7em;
158 -webkit-border-radius: 0.7em;
160 button.check, a.check {
162 text-transform: none;
163 display:inline-block;
169 text-transform: uppercase;
171 button.check:before, a.check:before {
172 display:inline-block;
176 padding:0.2em 0.5em 0.2em 0.5em;
177 border-radius: 0.2em;
178 -moz-border-radius: 0.2em;
179 -webkit-border-radius: 0.2em;
184 border:1px solid white;
196 /****************************************************/
198 /****************************************************/
200 background: $primary;
203 /****************************************************/
205 /****************************************************/
209 background-color: #3a3a3a;
222 text-overflow: ellipsis;
226 #metaNav ul li#nav-search {
235 #metaNav ul li#nav-language span {
237 padding:0.4em 0 0.5em 0;
238 display: inline-block;
241 #metaNav ul li#nav-language span.lang-on {
245 #metaNav ul li a span{
246 padding:0.4em 0 0.5em 0;
247 display:inline-block;
250 #metaNav ul li a span.nav-icon {
253 #metaNav a:focus, #metaNav a:hover{
256 #metaNav ul li.active, #metaNav ul li.active a{
260 #metaNav ul li.active span.iconLabel {
263 #metaNav li#nav-search a {
268 display: inline-block;
273 border: 1px solid #ececec;
281 @media screen and (max-width:760px){
282 #bg-title { display: none; }
283 #metaNav .iconLabel {display:none;}
284 #metaNav ul li a span.nav-icon { display: inline-block; }
294 #metaNav ul li#nav-language {
295 padding: 0.2em 0 0 1em;
298 @media screen and (max-width:400px){
299 #metaNav ul li#nav-language {
300 padding: 0.2em 0 0 1ex;
307 /****************************************************/
309 /****************************************************/
311 .audio button, .audio a {color:$primary;}
312 /****************************************************/
314 /****************************************************/
326 display: inline-block;
330 display: inline-block;
334 #mainHeader *{color:black !important;line-height:1em;}
336 #Panik img{display:block;margin:auto;max-height:200px;}
340 #player-container #player{
345 #Changing h1.top a:hover {
349 @media screen and (max-width: 760px) {
360 background: $secondary;
364 @media screen and (min-width: 760px) {
366 box-sizing: border-box;
370 box-sizing: border-box;
374 text-transform: uppercase;
377 padding-bottom: 20px;
385 display: none !important;
394 #Emissions div.mainSub {
399 width: calc(98% - 320px);
402 #News div.mainSub ul,
403 #About div.mainSub ul,
404 #Emissions div.mainSub ul {
409 #News div.mainSub ul li,
410 #About div.mainSub ul li,
411 #Emissions div.mainSub ul li {
414 #News .news.wrapper {
418 #News .news.wrapper li a {
430 #Main > .soundfiles > .wrapper,
431 #Main > .news > .wrapper,
450 #fiber-content h2.title {
458 background: transparent url(../img/logo-esperanzah.png) 7px 35px no-repeat;
461 #All #backgroundBox h1.top {
468 color: $primary !important;
471 #All h1.top#radiopanik {
476 #All #backgroundBox h1 {
481 #specialHome div.rightPart h1,
490 /****************************************************/
491 /**** SCREEN NAV ****/
492 #Nav nav{padding:0.1em;}
494 #Nav input{color:#333;}
497 border-width:0 0 2px 0;
499 border-color: transparent;
503 #Nav .active,#Nav .icon-check,#Nav .active *{
508 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
530 display: inline-block;
532 #Nav nav ul.distributed li {padding: 0;}
536 border-width:0 0 2px 0;border-style:solid;
538 #fiber-nav li, #fiber-nav li a{
547 #fiber-nav .selected > a,
548 #fiber-nav .current {
552 /****************************************************/
554 /****************************************************/
555 /*#Home #player{ float: left; } */
557 #player-container .metas, #player-container img{border-color:#fff;}
558 #player-container .padded{padding:0.3em;}
560 #player-container button,#player-container a{
562 #player-container .metas{
565 #DirectStreamPanikControler {
567 #DirectStreamPanikControler div.label {
569 @media screen and (max-width: 760px) {
585 @media screen and (max-width: 760px) {
595 #Player.withPlaylist {
601 #player-container #myPlaylist a {
606 #player-container.minimized{
608 border-width:0px 2px 2px 0 !important;
609 border-bottom-right-radius:1em;
610 -moz-border-bottom-right-radius:1em;
611 -webkit-border-bottom-right-radius:1em;
613 #player-container.minimized #player{
623 #Playlist #playlistLabel{
627 #Playlist .playListControls{
629 #Playlist .playListControls button{
631 display:inline-block;
633 #Playlist .playListControls .playPause{
639 @media screen and (max-width: 760px) {
644 #Playlist .playing .icon-pause{
645 -webkit-animation: loading 1s infinite linear;
646 -moz-animation: loading 1s infinite linear;
647 -o-animation: loading 1s infinite linear;
648 animation: loading 1s infinite linear;
650 #Playlist .playlistControls button,#Playlist .playlistControls .button{
651 margin:0 0.1em 0 0.1em;
656 #Playlist .soundControls button{}
658 #player-container #Playlist ol li{
663 #Playlist ol li .soundControls{
669 #Playlist ol li .title{
673 text-overflow: ellipsis;
677 @media screen and (max-width: 760px) {
679 background-position: center 30px;
681 #All h1.top#radiopanik {
686 #Player.withPlaylist #player-container #audioPlayer,
687 #Player.withPlaylist #player-container #audioPlayer,
688 #Player.withPlaylist #player-container #Playlist{
689 float:none !important;
690 width:auto !important;
691 border-right:none !important;
692 max-width:auto !important;
695 #player.on-chat-page {
699 div.chat-page .rightPart {
703 border-top: 1px solid #777;
708 /****************************************************/
709 /**** #Changing #Footer ... ****/
710 /****************************************************/
713 flex-direction: column;
728 #Changing a:hover,#Changing button:hover {
729 text-decoration:none;
731 /* GLOBAL SITE NAV */
740 -moz-box-shadow: 0px 0px 3px #000;
741 -webkit-box-shadow: 0px 0px 3px #000;
742 box-shadow: 0px 0px 3px #000;
743 border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
748 background-color:$primary;
749 border: 2px solid black;
750 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);
753 background-color:grey;
757 background-color:green;
762 background-color:$primary;
774 background: $primary url(../img/delim2.png) 0 20px repeat-x;
785 @media screen and (max-width: 760px) {
786 padding-bottom: 30px;
791 /****************************************************/
792 .inline .link{display:block;padding:1em;}
794 /**** EMISSIONS ****/
795 #Emission .emission-detail .title{}
798 #Emission-tabs-menu .sub{
802 .emission-detail .metas{
809 .emission-detail h4.subtitle {
812 text-transform: none;
816 .emission-detail ul.schedule {
821 .emission-detail ul.schedule .weekdiff {
825 .emission-detail article {
829 .emission-detail .logo{
834 @media screen and (max-width: 300px) {
835 .emission-detail .metas {
840 .emission-detail .logo{max-width:100%;}
842 .emission .mainHeader {
847 .emission .contacts {
852 .emission.inline, .emission.resume {
856 .emission.inline div.date {
859 display:inline-block;
863 .emission .archived {
867 .emission .link .description {
877 .episode.resume, .episode.inline{
878 padding:1em 0.5em 1em;
880 .episode.inline .dateBloc, .episode.resume .dateBloc{
883 .episode.resume img {
884 border: 2px solid black;
887 .episode.resume .title{
890 .episode.resume .logo{
894 .episode.inline .logo {
899 .episode.resume .sound{
901 margin:0 0 0.5em 0.5em;
903 .episode.inline .sound.right{
909 .episode.inline .sound.right button{
913 padding-bottom:0.05em;
915 .episode.resume .sound.right .icon-download{
918 .episode.resume .sound.right .icon-download{
925 display: inline-block;
926 vertical-align: middle;
929 .episode.detail .logo.right{
933 .episode.resume .date .day, .emission-detail .date .day {
936 .episode.resume .content {
939 .episode.resume .content .title {
942 .episode.resume .logo {
946 .episode.inline .date{
950 #Emission-tabs-menu .emissions-newsitems {
954 #Emission-tabs-menu .emissions-newsitems ul.list li {
958 #Emission-tabs-menu .futur-episodes h5,
959 #Emission-tabs-menu .recent-episodes h5 {
963 #Emission-tabs-menu #search-form {
967 div.extra-soundfiles h3 {
972 div.extra-soundfiles ul li {
976 div.extra-soundfiles ul li div.audio {
984 div.extra-soundfiles ul strong {
988 @media screen and (max-width: 400px) {
994 .episode.resume .content {
999 /****************************************************/
1020 .newsRoll .title div{
1023 .newsRoll a, .newsRoll button img{
1024 border:3px solid $secondary;
1027 .newsRoll .by3 button {
1031 .soundfiles .special a,
1036 .special .labels .item,
1037 .newsRoll .labels .item{
1039 background: $secondary;
1045 .newsList .current a{
1048 /****************************************************/
1052 .soundfiles ul.custom li a,
1053 .news ul.custom li a { max-width: 98%; }
1054 .news li.item a {padding:1em;}
1062 border-bottom:3px solid #ccc;
1064 @media only screen and (max-width: 970px) {
1065 .columns {column-count: 1; -webkit-column-count: 1; -moz-column-count: 1;}
1069 /****************************************************/
1071 /****************************************************/
1073 #Home #Nav .wrapper{
1074 max-width:auto !important;
1075 width:auto !important;
1079 @media screen and (max-width:800px){
1080 #Home .newsRoll .logo{
1084 @media screen and (max-width:600px){
1085 #Home .newsRoll .logo{
1091 /****************************************************/
1093 /****************************************************/
1095 .program.tabs nav ul li{
1101 .program.tabs nav ul li.week-arrow {
1103 padding-bottom: 5px;
1106 .program ul .dateBloc {
1110 .program ul .schedule {
1116 .program-week .programDate{
1120 .program-week .programCell{
1123 .program-week .nonStop .programDate{
1126 .program-week .nonStop .programCell{
1131 .program-week a.nonstop{
1135 .program-week .inline,.program-week .resume{padding:0;}
1136 .program-week .description{}
1138 .program-week .title {
1143 .program-week .smooth {
1147 padding-bottom: 8px;
1150 .program-week .emission h5,
1151 .program-week .smooth .title {
1153 text-transform: uppercase;
1156 .program-week .description {
1161 .program-week .programCell:hover {
1165 #Changing .program-week .programCell a {
1169 #Changing .program-week .programCell .smooth a {
1173 #Changing .program-week .programCell .smooth h5 a {
1178 /****************************************************/
1180 /****************************************************/
1182 .search li.previous-page {
1189 .search li.next-page {
1197 text-align: justify;
1201 /****************************************************/
1203 /****************************************************/
1210 height:50px !important;
1212 #grid .heure.vertical {
1216 padding:1em 0 1em 0;
1221 padding:0.5em 0.2em 0.5em 0.2em;
1224 border:1px dotted #ddd;
1231 #grid .highlighted,#grid .highlighted *{
1232 background:#333 !important;
1233 color:white !important;
1236 #grid .highlighted,#grid .highlighted *{
1237 background:#333 !important;
1238 color:white !important;
1240 #Emissions li.item.normal{
1243 #Emissions li.item.hightlighted{
1244 display:block !important;
1247 #gridNav span.category {
1248 text-transform: none;
1252 /**** Navigation for static pages ****/
1257 #fiber-nav li, #fiber-nav li a {
1268 text-decoration: underline;
1271 #fiber-content ul.list a {
1272 text-decoration: none;
1275 #fiber-content a:hover {
1276 text-decoration: none;
1287 .userContent strong,
1288 #fiber-content strong {
1289 text-transform: none;
1295 font-family: inherit;
1299 /**** SCREEN SIZE ADAPTATIONS ****/
1300 html #main{ font-size: 70%; }
1301 body { font-size: 18px;}
1302 @media (max-width: 300px){
1303 body #All{ font-size: 80%; }
1306 @media (min-width: 300px) and (max-width:800px){
1307 body #All{ font-size: 85%; }
1310 @media (min-width: 700px) and (max-width:1000px){
1311 body #All{ font-size: 90%; }
1314 @media (min-width: 1000px) {
1315 body #All{ font-size: 100%; }
1321 padding-bottom: 2em;
1324 #Home #subscribe-form {
1328 #subscribe-form ul.errorlist {
1339 #subscribe-form input {
1344 #Nav div.search form {
1348 div.episode.resume div.title {
1349 white-space: normal;
1352 #Home div.program.tabs {
1367 #recent-emissions h3,
1373 #recent-emissions h3.sectionLabel {
1377 .episode.soundfile {
1381 .soundfile .smooth {
1392 .frontpage.soundfile .audio {
1395 padding-bottom: 1ex;
1405 border: 1px solid #888;
1406 border-width: 1px 1px 0 1px;
1407 -webkit-transform-origin: bottom right;
1408 -webkit-transform: rotate(270deg);
1409 -moz-transform-origin: bottom right;
1410 -moz-transform: rotate(270deg);
1411 transform-origin: bottom right;
1412 transform: rotate(270deg);
1419 .soundfile .special,
1420 .newsitem .special {
1424 .newsitem .special .smooth {
1430 div.userContent ul {
1437 div.userContent h4 {
1438 text-transform: none;
1439 font-weight: normal;
1442 div.userContent h1 { font-size: 2em; }
1443 div.userContent h2 { font-size: 1.8em; }
1444 div.userContent h3 { font-size: 1.5em; }
1445 div.userContent h4 { font-size: 1.5em; }
1446 div.userContent a { text-decoration: underline; }
1448 div.userContent a.tag { text-decoration: none; }
1450 @media screen and (max-width: 760px) {
1457 #All #backgroundBox h1.top {
1461 #Player.withoutPlaylist #player-container #audioPlayer{
1465 #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1467 background: $primary;
1469 #player-container * {color: white !important; }
1473 width:100% !important;
1485 div.extra-soundfiles {
1489 h3.episode-subtitle {
1499 background: $primary;
1500 background: linear-gradient(to top, darken($primary, 20%) 0%, $primary 40%);
1501 display: inline-block;
1505 .waveform span.done {
1506 background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
1507 background: linear-gradient(to top, darken($primary, 5%) 0%, darken($secondary, 10%) 100%);
1510 .waveform span.done.current + span {
1511 background: $yellow;
1514 .waveform i.duration {
1519 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1524 div.fragment-sound {
1528 div.soundcell div.logo {
1529 vertical-align: top;
1532 div.fragment-sound {
1535 div.extra-soundfiles div.fragment-sound {
1539 div.extra-soundfiles div.fragment-name {
1546 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1548 div.extra-soundfiles ul li div.fragment-sound div.audio {
1552 #fiber-content div.extra-soundfiles strong {
1553 text-transform: uppercase;
1557 .nonstop-track-title, .nonstop-track-artist {
1562 padding-right: 75px;
1565 #fiber-content div.extra-soundfiles .soundfile-info strong {
1569 #fiber-content div.extra-soundfiles .soundfile-info a {
1570 text-decoration: none;
1573 #fiber-content div.extra-soundfiles {
1577 div.extra-soundfiles div.logo {
1578 display: inline-block;
1581 div#fiber-content div.extra-soundfiles ul.list {
1582 display: inline-block;
1584 width: calc(100% - 72px);
1587 div.download-links {
1593 div.hidden-download-links {
1594 display: none !important;
1597 div.episode-detail div.sound div.download-links {
1598 display: inline-block;
1603 div.extra-soundfiles div.download-links {
1611 div#agenda div.content-inline {
1615 div.previous-and-next-months {
1619 div.publication-date.date.smooth {
1623 #All h1.top.fullwidth {
1630 border: 1px solid #333;
1633 div#dialog-background,
1634 div.gallery div.first {
1640 background: rgba(0, 0, 0, 0.9);
1645 div.gallery div.first img {
1647 padding-bottom: 25px;
1649 margin-left: -320px;
1653 transition: all 0.5s ease;
1654 transform-origin: bottom left;
1657 div.portrait div.gallery div.first img {
1659 margin-left: -240px;
1663 border-bottom: 1px solid #ccc;
1666 div.gallery span.gallery-legend {
1667 display: inline-block;
1677 div.portrait div.gallery span.gallery-legend {
1681 @media screen and (max-width: 640px) {
1682 div.portrait div.gallery div.first img,
1683 div.gallery div.first img {
1689 display: inline-block;
1703 #fiber-content div.topikcell a {
1704 text-decoration: none;
1708 #fiber-content div.topikcell .topik-large a {
1712 div.topikcellcontent h5 {
1716 div.topikcellcontent.topik-large a {
1719 display: inline-block;
1723 div.topikcellcontent.topik-large img {
1728 div.topikcellcontent a {
1730 display: inline-block;
1733 box-sizing: border-box;
1738 div.topikcellcontent img {
1741 div.topikcellcontent h2 {
1745 @media only screen and (min-width: 1250px) {
1746 div.topikcellcontent a {
1747 display: inline-block;
1754 .program-week img.smooth {
1758 div#dialog-background {
1771 div#dialog-embed textarea {
1776 div#dialog-embed #close-button {
1782 min-height: auto !important;
1785 div.soundfile-info {
1791 background: transparent;
1794 body#embed #Commons,
1795 body#embed #metaNav,
1797 body#embed #userLog,
1798 body#embed #panikdb,
1799 body#embed #Player {
1803 body#embed #Changing {
1808 body#embed #Main > .wrapper {
1819 body#embed ul.custom {
1820 display: inline-block;
1821 width: calc(100% - 110px);
1824 body#embed ul.custom .soundfile-info {
1828 body#embed span.fragment-title {
1829 font-weight: normal;
1841 table.playlist td.tracktime {
1846 p.playlist-disclaimer {
1853 #main-topiks #fiber-nav li ul {
1857 #main-topiks #fiber-nav li ul li {
1862 #main-topiks #fiber-nav li ul li a {
1871 @media screen and (min-width:760px){
1873 width: calc(90vw - 240px);
1892 transition: opacity 1s ease;
1899 #chat div.msg.msg-out span.content {
1905 display: inline-block;
1908 text-overflow: ellipsis;
1912 #chat span.content {
1913 display: inline-block;
1914 padding-left: 11rem;
1917 #chat div.msg.info span.content {
1923 @media screen and (max-width: 760px) {
1929 #chat span.content {
1935 h1.top > span.chat.with-logo {
1938 display: inline-block;
1939 max-width: calc(100% - 140px);
1948 border: 2px solid black;
1951 @media screen and (max-width:760px){
1955 h1.top > span.chat.with-logo {
1959 div.topikcellcontent a {
1962 #fiber-content div.topikcell a {
1967 div#CurrentlyChatting {
1972 div.description-emission-chat {
1980 div#chat.moderation .msg-in span.from {
1984 div#chat.moderation .msg-in span.from:hover::after {
1986 font-family: FontAwesome;
1991 div.programCell a.playlist {
1997 color: lighten($primary, 20);
1998 text-transform: uppercase;
2006 -webkit-user-select: none;
2007 -moz-user-select: none;
2008 -ms-user-select: none;
2013 a:hover div.emission-tile img {
2018 background: $primary;
2020 box-sizing: border-box;
2023 @media screen and (max-width: 760px) {
2029 //filter: grayscale(100%);
2040 text-transform: uppercase;
2047 background: $primary;
2057 background: $yellow;
2070 background: $yellow url($data_uri_facebook) center center no-repeat;
2075 background: $yellow url($data_uri_twitter) center center no-repeat;
2079 background-repeat: no-repeat;
2084 background: url($data_uri_start), url($data_uri_pause);
2085 background-position: 0 0, -50px 0;
2089 background: url($data_uri_pause);
2090 background-position: 0 0;
2093 div.playListControls {
2094 button.action-pause {
2095 background-repeat: no-repeat;
2098 background: url($data_uri_pause);
2101 button.action-play {
2102 background-repeat: no-repeat;
2105 background: url($data_uri_play);
2110 background: url(../img/delim1.png) top center repeat-x;
2114 div#specialHome h1.top {
2115 background: url(../img/delim1.png) bottom center repeat-x;
2116 padding-bottom: 62px;
2120 background: url(img/news_delim1.png) bottom center repeat-x;
2121 padding-bottom: 14px;
2123 flex-direction: row;
2124 > h2, > div { width: 50%; box-sizing: border-box; padding-bottom: 30px; padding-top: 30px;}
2127 padding-right: 10px;
2128 background: $primary;
2135 @media screen and (max-width: 760px) {
2146 div.emission-detail {
2147 background: url(img/news_delim1.png) bottom center repeat-x;
2148 padding-bottom: 14px;
2150 flex-direction: row;
2151 @media screen and (max-width: 760px) {
2156 @media screen and (max-width: 760px) {
2166 @media screen and (max-width: 760px) {
2169 box-sizing: border-box;
2175 &.emission-episode div.emission-info {
2176 @media screen and (max-width: 760px) {
2183 @media screen and (max-width: 760px) {
2189 @media screen and (max-width: 760px) {
2190 padding-bottom: 150px;
2196 @media screen and (max-width: 760px) {
2199 button.action-play {
2202 button.action-share {
2203 text-transform: none;
2209 div.emission-episodes {
2211 background: $yellow;
2212 @media screen and (max-width: 760px) {
2224 @media screen and (max-width: 760px) {
2228 display: inline-block;
2231 //filter: grayscale(100%);
2245 display: inline-block;
2246 background: $yellow;
2252 text-transform: uppercase;
2259 background: $primary;
2275 @media screen and (max-width: 760px) {
2283 @media screen and (max-width: 760px) {
2290 text-transform: uppercase;