$black: #000000;
$white: #FFFFFF;
-$primary: #FF7E83;
-$secondary: #0062CB;
+$primary: #af0c06;
+$secondary: #af0c06;
+$player-width: 300px;
+$player-bottom-limit: 30000px;
+$text-color: #333;
/****************************************************/
/* FONTS */
-.resymbol:hover,.control:hover{ opacity:0.5; }
.date, .dateBloc {
- font-family: "Reglo";
- text-transform: uppercase;
}
.inline .date, .resume .date{
text-align: center;
.date.smooth {
text-transform: none;
font-size: 100%;
- font-family: RegloNormal;
}
.tabs .ui-tabs-nav {
- font-family: "Reglo";
- text-transform: uppercase;
}
.legend{
- font-family: "Reglo";
font-size:1.2em;
- border-bottom:3px solid black;
+ color: $primary;
+ border-bottom: 1px solid $primary;
padding: 0.2em 0 0.2em 0;
margin: 0.2em 0 0.2em 0;
}
+
#Main .sectionLabel{
+ position: relative;
margin-bottom:1em;
+ &::after {
+ display: block;
+ content: "";
+ height: 4px;
+ width: 75px;
+ background: $primary;
+ }
+ margin-bottom: 20px;
}
.sectionLabel, .label {
- text-transform: uppercase;
- font-family: "Reglo";
font-size:1.3em;
}
.wrapper.text {max-width: 780px; margin:auto;}
.wrapper .rightPart{margin-top:1em;}
-@media screen and (min-width: 760px) {
- #player-container.fixed {
- position: fixed;
- top: 60px;
- width: calc(0% + 235px);
- }
- .wrapper .rightPart{
- margin-top:0;
- }
- .wrapper.sided .leftPart,
- .wrapper.sided .rightPart{
- width:45%;
- }
- .wrapper.navigation .leftPart{
- width:60%;
- }
- .wrapper.navigation .rightPart{
- width:35%;
- }
- .wrapper .leftPart{
- float:left;
- }
- .wrapper .rightPart{
- float:right;
- }
- #specialHome {
- padding-left: 0;
- }
- /*
- #specialHome .leftPart,
- #specialHome .rightPart {
- width: 100%;
- }
- */
- p.intro {
- padding-top: 0px;
- padding-bottom: 40px;
- }
-}
-
-
button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
width:100%;
button.tag, a.tag{
font-size:0.9em;
background:white;
- font-family: "RegloBold";
- text-transform: uppercase;
+ font-weight: bold;
display:inline-block;
border: 1px solid #CCC !important;
color:#342E2E;
}
.category{
- font-family: "RegloBold";
- text-transform: uppercase;
}
button.check:before, a.check:before {
display:inline-block;
/**** BODY ****/
/****************************************************/
body{
- background: white;
- color: #333;
+ background: white url(../img/pattern.png) top left repeat fixed;
+ color: $text-color;
}
/****************************************************/
/**** metaNAV ****/
/****************************************************/
#metaNav {
- color: #e8e8e8;
- background-color: #3a3a3a;
- position:fixed;
- z-index:1000;
+ color: white;
+ background: $primary;
+ background: linear-gradient($primary 95%, black 100%);
+ position: absolute;
+ z-index: 0;
top:0px;
width:100%;
font-size: 90%;
}
-#metaNav ul{
+#metaNav ul {
+ margin-left: 300px;
+ @media screen and (max-width: $mobile-limit) {
+ margin-left: 0;
+ }
}
+
#metaNav ul li{
float: left;
padding: 0 1em;
width: 10em;
}
+.top {
+ a.button.icon-rss {
+ position: absolute;
+ right: 1rem;
+ font-size: 30px;
+ }
+}
+
.icon-rss {
- color: orange;
+ color: $primary;
}
-@media screen and (max-width:760px){
+@media screen and (max-width: $mobile-limit){
#bg-title { display: none; }
#metaNav .iconLabel {display:none;}
#metaNav ul li a span.nav-icon { display: inline-block; }
padding: 0.2em 0 0 1em;
}
div#Changing {
- margin: 0 5px;
+ margin: 0;
}
}
@media screen and (max-width:400px){
/**** Commons ****/
/****************************************************/
-.audio button {color:$primary !important;}
+.audio button {
+ color: $primary !important;
+ opacity: 1;
+}
+.audio button:hover {
+ color: lighten($primary, 20%) !important;
+ opacity: 1;
+}
+
/****************************************************/
/**** HEADER ****/
/****************************************************/
}
#mainHeader {
padding-bottom:1em;
+ font-size:70%;
}
-#mainHeader {
- font-size:70%;
-}
+
#mainHeader *{color:black !important;line-height:1em;}
#mainHeader #radioPanik{}
opacity: 1.0;
}
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $mobile-limit) {
#All h1.top {
font-size: 60px;
padding: 0;
padding-top: 10px;
- text-align: center;
}
#specialHome .leftPart h1.top {
display: none;
}
}
-@media screen and (min-width: 760px) {
- #Commons {
- float: left;
- width: 20%;
- width: -webkit-calc(0% + 240px);
- width: -moz-calc(0% + 240px);
- width: calc(0% + 240px);
- }
- #Changing {
- position: relative;
- float: right;
- width: 78%;
- width: -webkit-calc(100% - 280px);
- width: -moz-calc(100% - 280px);
- width: calc(100% - 280px);
+.contextual-menu,
+#Commons,
+#Changing {
+ box-sizing: border-box;
+ padding: 0 100px;
+ width: 100%;
+ max-width: 1400px;
+ margin: 0 auto;
+ @media screen and (max-width: $mobile-limit) {
+ padding: 0 5px;
}
+}
+
+#mainHeader {
+}
+
+@media screen and (min-width: $mobile-limit) {
#All h1.top {
- font-size: 120px;
- font-family: RegloScale;
- text-transform: uppercase;
+ font-size: 50px;
padding-left: 0;
padding-top: 2rem;
padding-bottom: 0;
#About div.mainSub ul,
#Emissions div.mainSub ul {
padding: 0;
- font-family: Reglo;
font-weight: normal;
}
padding-left: 0;
}
- #Nav header.marged,
#Main > .marged {
margin: 0;
}
}
#backgroundBox {
- background: transparent center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
+ background: transparent 10px 15px no-repeat url(../img/logo-lautre.png);
+ position: absolute;
+ top: -60px;
+ @media screen and (max-width: $mobile-limit){
+ position: static;
+ max-width: none;
+ }
}
#All #backgroundBox h1.top {
font-size: 50px;
padding-left: 10px;
- width: 200%;
}
#backgroundBox h1 {
color: $primary !important;
}
-#All h1.top#radiopanik {
+#All h1.top {
+ color: $primary;
+ position: relative;
+ font-weight: 500;
+ &::after {
+ display: block;
+ content: "";
+ height: 4px;
+ width: 75px;
+ background: $primary;
+ position: absolute;
+ bottom: -1px;
+ }
+ margin-bottom: 20px;
+}
+
+#All h1.top#radio {
padding-top: 0;
color: black !important;
- padding-bottom: 30px;
- height: 130px;
+ padding-bottom: 0px;
+ height: 190px;
}
#All #backgroundBox h1 {
/**** SCREEN NAV ****/
#Nav nav{padding:0.1em;}
-#Nav input{color:#333;}
+#Nav input{color: $text-color;}
#Nav ul li button,
#Nav ul li a {
border-width:0 0 2px 0;
border-color: #333;
}
-#Nav nav{
- margin:0;
-}
-
#specialHome h2,
#Nav h2{
margin:0;
/****************************************************/
/*#Home #player{ float: left; } */
-#player-container,
- #player-container *{border-color:$primary !important;color:$primary !important;}
-
#player-container .metas, #player-container img{border-color:#fff;}
#player-container .padded{padding:0.3em;}
padding:0 0 0 0;
}
-#Player.withPlaylist #player-container #Playlist{
- border-top:2px solid black;
-}
-#Player.withPlaylist #player-container #Playlist{
- margin-top: 1em;
- padding-top: 1em;
+#localList {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ background: $primary;
+ width: 500px;
+ box-shadow: 0 0 4px 2px transparentize(darken($primary, 30%), 0.5);
+ padding: 1rem;
+ @media screen and (max-width: $mobile-limit) {
+ width: auto;
+ left: 0;
+ bottom: 66px;
+ box-shadow: none;
+ border: 1px solid darken($primary, 30%);
+ border-width: 1px 0 0 0;
+ }
}
#player-container #myPlaylist {
overflow: hidden;
}
#player .active{
- text-transform:uppercase;
font-weight:bold;
}
/*limit height of playlist*/
overflow: hidden;
}
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $mobile-limit) {
#backgroundBox {
- background-position: center 30px;
+ background-position: center 0px;
background-size: 130px;
}
- #All h1.top#radiopanik {
+ #All h1.top#radio {
height: 80px;
}
#Player{
#Main{
flex-grow: 1;
- color:#333;
+ color: $text-color;
position: relative;
z-index: 1;
}
+#specialHome {
+}
#Main >.wrapper{
padding-bottom:2em;
}
#Home #Main{
min-height:0;
}
-#Changing a:hover,#Changing button:hover {
- opacity:0.6;
+#Changing a:hover {
+ opacity: 0.7;
text-decoration:none;
}
/* GLOBAL SITE NAV */
.emission-detail h4.subtitle {
margin-top: 1em;
font-weight: normal;
- font-family: 'Reglo';
text-transform: none;
float: left;
}
}
.emission-detail .logo{max-width:100%;}
}
-.emission .mainHeader {
- overflow: hidden;
- margin-bottom:1.5em;
+
+.mainHeader {
+ overflow: hidden;
+ margin-top: 0;
+ margin-bottom:1.5em;
+ margin-left: 280px;
+ @media screen and (max-width: $mobile-limit) {
+ margin-left: 0;
+ }
}
.emission .contacts {
.emission .link .description {
margin: 0px 0 5px 0;
- font-family: "RegloMedium";
}
.episode.detail .logo.right{
max-width:50%;
+ @media screen and (max-width: $mobile-limit) {
+ max-width: 100%;
+ clear: none;
+ }
}
.episode.resume .date .day, .emission-detail .date .day {
opacity:0.9;
width:100%;
text-align: left;
- font-family: "RegloBold";
position: absolute;
left: 0;
}
padding: 1em;
}
.newsRoll a, .newsRoll button img{
- border:3px solid $secondary;
+ border: 1px solid $secondary;
}
.newsRoll .by3 button {
.logo img{
display:block;
border-style:solid;
- border-width:3px;
+ border-width: 1px;
}
ul.newsSpecial{
border-bottom:3px solid #ccc;
.program-week .emission h5,
.program-week .smooth .title {
- color: #333;
- text-transform: uppercase;
+ color: $text-color;
}
.program-week .description {
display:block !important;
}
+#gridNav {
+ margin-top: 1rem;
+}
#gridNav span.category {
text-transform: none;
}
.userContent strong,
#fiber-content strong {
text-transform: none;
- font-family: "RegloBold";
font-style: normal;
}
#recent-news,
#recent-sounds {
margin-top: 2em;
+ .icon-rss {
+ position: absolute;
+ right: 2rem;
+ }
}
#recent-emissions h3,
div.userContent h3,
div.userContent h4 {
text-transform: none;
- font-family: "Reglo";
font-weight: normal;
}
div.userContent a.tag { text-decoration: none; }
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $player-bottom-limit) {
#streamSymbol{
top: 0;
}
width: 94%;
}
- #Player.withoutPlaylist #player-container #audioPlayer{
- margin:auto;
- width:100%;
+ #Player #player-container #audioPlayer{
+ margin:auto;
+ width:100%;
}
- #Player.withoutPlaylist #player-container #audioPlayer #Live{
- font-size:150%;
+ #Player #player-container #audioPlayer #Live{
+ font-size:150%;
}
- #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
+ #player-container {
+ width:100%;
+ left:0;
+ }
#player-container{
background: $primary;
}
#Player.withPlaylist #player-container #audioPlayer{
float:left;
width:50%;
- border-right:2px solid black;
}
#Player.withPlaylist #player-container #Playlist{
float:right;
}
.waveform span {
- background: #3A3A3A;
- background: rgba(10, 10, 10, 0.8);
+ background: $primary;
+ background: linear-gradient(to top, $primary 0%, lighten($primary, 10%) 80%);
display: inline-block;
- width: 0.50%;
+ // 100% / n_samples
+ width: 0.2%;
}
.waveform span.done {
- background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
+ background: linear-gradient(to top, #5A5A5A 0%, #A5A5A5 80%);
}
.waveform span.done.current + span {
}
#fiber-content div.extra-soundfiles strong {
- text-transform: uppercase;
}
}
div.topikcellcontent.topik-large a div {
- @media screen and (min-width: 760px) {
+ @media screen and (min-width: $mobile-limit) {
display: flex;
}
margin-top: 1ex;
margin-top: 0;
white-space: nowrap;
margin-right: 1ex;
- @media screen and (max-width: 760px) {
+ @media screen and (max-width: $mobile-limit) {
padding-bottom: 0;
}
}
width: 90vw;
}
-@media screen and (min-width:760px){
+@media screen and (min-width: $mobile-limit){
div.commands {
width: calc(90vw - 240px);
}
color: #666;
}
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $mobile-limit) {
#chat span.from {
display: block;
position: static;
border: 2px solid black;
}
-@media screen and (max-width:760px){
+@media screen and (max-width: $mobile-limit){
div.top-logo {
display: none;
}
#bg-title {
display: none;
color: lighten($primary, 20);
- font-family: 'Reglo';
- text-transform: uppercase;
line-height: 100%;
font-size: 250px;
font-size: 25vh;
100% { right: 0%; }
}
+div.around-nav {
+ max-width: 100%;
+ position: relative;
+ display: flex;
+ height: 350px;
+ div.around-nav-previous, div.around-nav-next {
+ flex: 1;
+ min-width: 20px;
+ text-align: center;
+ background: $primary;
+ height: 50px;
+ border: 1px solid $primary;
+ button {
+ line-height: 45px;
+ color: white;
+ }
+ }
+ div.around-nav-inner {
+ background: white;
+ overflow: hidden;
+ max-width: 100%;
+ margin-bottom: 250px;
+ border-top: 1px solid $primary;
+ }
+ div.around-nav-inner-2 {
+ position: relative;
+ width: 4000px;
+ transition: transform linear 0.2s;
+ div.around-block {
+ cursor: pointer;
+ border-right: 1px solid $primary;
+ box-sizing: border-box;
+ padding: 0 1rem;
+ background: white;
+ display: block;
+ width: 244px;
+ float: left;
+ &.highlight {
+ background: $primary;
+ color: white;
+ }
+ }
+ }
+ div.around-slot-details {
+ div.around-details {
+ box-sizing: border-box;
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 50px;
+ border: 1px solid $primary;
+ border-width: 1px 2px;
+ background: white;
+ width: 100%;
+ p {
+ margin: 1rem;
+ }
+ img {
+ float: right;
+ margin-left: 1rem;
+ border: none;
+ }
+ }
+ }
+}
+
+#recent-sounds,
+#recent-news {
+ max-width: 100%;
+ overflow: hidden;
+ & > div {
+ display: flex;
+ }
+}
+
+#recent-news div.newsitem-home,
+#recent-sounds div.episode.soundfile {
+ background: white;
+ width: 180px;
+ min-width: 180px;
+ margin-right: 10px;
+ display: inline-block;
+ height: 220px;
+}
+
+#newsletter {
+ background: white;
+ border: 1px solid $primary;
+ padding: 1ex;
+ h4 {
+ margin-bottom: 20px;
+ }
+ h4::after {
+ display: block;
+ content: "";
+ height: 4px;
+ width: 75px;
+ background: $primary;
+ }
+ a {
+ line-height: 150%;
+ }
+}
+
+#Emission-container {
+ h2 {
+ }
+}
+
+div.program,
+#recent-emissions,
+#recent-news,
+#recent-sounds,
+.emissions,
+.emission-archives,
+#Emission-tabs-menu,
+#Emission-tabs-detail {
+ background: white;
+ padding: 1rem;
+ clip-path: polygon(0 0, 95% 0, 100% 30%, 100% 100%, 10% 100%, 0% 100%, 0 0);
+}
+
+div.program.tabs {
+ clip-path: none;
+}
+
+header h3 {
+ color: $text-color;
+ position: relative;
+ font-weight: 500;
+ &::after {
+ display: block;
+ content: "";
+ height: 4px;
+ width: 75px;
+ background: $text-color;
+ position: absolute;
+ bottom: -1px;
+ }
+ margin-bottom: 20px;
+
+}
+
+span.program-period,
+span.date {
+ text-transform: lowercase;
+}
+
+div.episode.soundfile {
+ position: relative;
+ div.sound {
+ position: absolute;
+ right: 5px;
+ top: 130px;
+ button.icon-plus-sign, button.icon-download {
+ display: none;
+ }
+ }
+}
+
+a.listen-home {
+ background: url(../img/listen.png) top left no-repeat;
+ margin-top: 20px;
+ display: block;
+ width: 286px;
+ height: 97px;
+ text-indent: -10000px;
+ overflow: hidden;
+ cursor: pointer;
+ &:hover {
+ background-position: -286px 0px;
+ }
+ @media screen and (max-width: $mobile-limit) {
+ display: none;
+ }
+}
+
+
+ul.list > li{
+ border-bottom: 1px solid $primary;
+}
+
.episode-auto-selection-cell.hide-emission-titles {
.emission-title, .soundfile-info .sep {
display: none;
projects / panikweb.git / blobdiff