css: make gallery thumbnails fully clickable

[panikweb.git] / panikweb_templates / static / css / _specifics.scss

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index d5b19e50e9505fc60b4a35976581f01bd02a6ec4..cae6371406598f821a111904746338572bd10a85 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -1,10 +1,9 @@
-/* COLORS
+/* COLORS */
 
-@black: #000000;
-@orange: #CFBE00;  -- highlight & stuff
-@blue: #5f2167;    -- focus & stuff
-@white: #FFFFFF;
- */
+$black: #000000;
+$white: #FFFFFF;
+$primary: #FF7E83;
+$secondary: #0062CB;
 
 /****************************************************/
 /* FONTS */
@@ -64,7 +63,7 @@
 }
 
 h5.focus-title {
-       color: #5f2167;
+       color: $secondary;
 }
 
 .rightPart #search-form {
@@ -81,14 +80,6 @@ h5.focus-title {
     padding:5px 7px 0px 7px;
 }
 
-#RefreshWhatsOnAir {
-       opacity: 0.2;
-}
-
-#RefreshWhatsOnAir.spinning {
-       opacity: 0.8;
-}
-
 /****************************************************/
 /* WRAPPER */
 /****************************************************/
@@ -99,7 +90,7 @@ h5.focus-title {
 @media screen and (min-width: 760px) {
        #player-container.fixed {
                position: fixed;
-               top: 50px;
+               top: 60px;
                width: calc(0% + 235px);
        }
        .wrapper .rightPart{
@@ -234,13 +225,15 @@ body{
 }
 
 #metaNav ul li a{
-       height: 2em;
+       height: 3em;
+       line-height: 3em;
        display:block;
 }
 
 #metaNav ul li#nav-language span {
        cursor: pointer;
-       padding:0.4em 0 0.5em 0;
+       height: 3em;
+       line-height: 3em;
        display: inline-block;
 }
 
@@ -249,7 +242,6 @@ body{
 }
 
 #metaNav ul li a span{
-    padding:0.4em 0 0.5em 0;
        display:inline-block;
 }
 
@@ -280,7 +272,12 @@ body{
        width: 10em;
 }
 
+.icon-rss {
+       color: orange;
+}
+
 @media screen and (max-width:760px){
+       #bg-title { display: none; }
        #metaNav .iconLabel {display:none;}
        #metaNav ul li a span.nav-icon { display: inline-block; }
        #metaNav ul li {
@@ -304,7 +301,7 @@ body{
                padding: 0.2em 0 0 1ex;
        }
        #metaNav ul li a {
-               padding: 0 1ex;
+               padding: 0 0.8em;
        }
 }
 
@@ -312,14 +309,15 @@ body{
 /**** Commons ****/
 /****************************************************/
 
-.audio button {color:#CFBE00 !important;}
+.audio button {color:$primary !important;}
 /****************************************************/
 /**** HEADER ****/
 /****************************************************/
 
 /* PANIK LOGO */
 #Commons{
-       background: #fff;
+       position: relative;
+       z-index: 5;
 }
 #Commons .wrapper{
 }
@@ -382,7 +380,7 @@ body{
                font-family: RegloScale;
                text-transform: uppercase;
                padding-left: 0;
-               padding-top: 40px;
+               padding-top: 2rem;
                padding-bottom: 0;
        }
 
@@ -464,7 +462,7 @@ body{
 }
 
 #backgroundBox {
-       background: white center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
+       background: transparent center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
 }
 
 #All #backgroundBox h1.top {
@@ -474,7 +472,7 @@ body{
 }
 
 #backgroundBox h1 {
-       color: #CFBE00 !important;
+       color: $primary !important;
 }
 
 #All h1.top#radiopanik {
@@ -491,11 +489,11 @@ body{
 
 #specialHome div.rightPart h1,
 div.focus {
-       color: #5f2167;
+       color: $secondary;
 }
 
 h1.top#frequence {
-       color: #CFBE00;
+       color: $primary;
 }
 
 /****************************************************/
@@ -566,7 +564,7 @@ h1.top#frequence {
 /*#Home #player{   float: left; } */
 
 #player-container,
-   #player-container *{border-color:#CFBE00 !important;color:#CFBE00 !important;}
+   #player-container *{border-color:$primary !important;color:$primary !important;}
 
 #player-container .metas, #player-container img{border-color:#fff;}
 #player-container .padded{padding:0.3em;}
@@ -690,7 +688,7 @@ h1.top#frequence {
        opacity:0.9;
        padding-top:0.2em;
        height:auto;
-       overflow:auto;
+       overflow: hidden;
 }
 
 @media screen and (max-width: 760px) {
@@ -713,6 +711,17 @@ h1.top#frequence {
                max-width:auto !important;
        }
 
+       #player.on-chat-page {
+               display: none;
+       }
+
+       div.chat-page .rightPart {
+               font-size: 95%;
+               margin-top: 4em;
+               padding-top: 1em;
+               border-top: 1px solid #777;
+       }
+
 }
 
 /****************************************************/
@@ -727,7 +736,8 @@ h1.top#frequence {
 #Main{
        flex-grow: 1;
        color:#333;
-       background-color: white;
+       position: relative;
+       z-index: 1;
 }
 #Main >.wrapper{
        padding-bottom:2em;
@@ -756,7 +766,7 @@ h1.top#frequence {
        padding: 0.3em;
        font-size:0.9em;
        color:black;
-       background-color:#CFBE00;
+       background-color:$primary;
        border: 2px solid black;
        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);
 }
@@ -770,7 +780,7 @@ h1.top#frequence {
        color:white;
 }
 #userLog .log.error{
-       background-color:#CFBE00;
+       background-color:$primary;
        border-color:yellow;
 }
 #main {}
@@ -785,6 +795,8 @@ h1.top#frequence {
        border-top:2px solid #333;
        padding-top: 2em;
        padding-bottom: 80px;
+       position: relative;
+       z-index: 3;
 }
 
 #Footer ul {
@@ -903,7 +915,7 @@ h1.top#frequence {
 .episode.resume .logo{
        float: right;
 }
-.topik.inline .logo,
+.topik-link .logo,
 .episode.inline .logo {
        min-height: 50px;
        float: left;
@@ -1016,6 +1028,10 @@ div.extra-soundfiles ul strong {
        max-width: 500px;
 }
 
+#newsRoll li {
+       background: white;
+}
+
 .newsRoll .title{
        background:black;
        color:white;
@@ -1031,7 +1047,7 @@ div.extra-soundfiles ul strong {
        padding: 1em;
 }
 .newsRoll a, .newsRoll button img{
-    border:3px solid #5f2167;
+    border:3px solid $secondary;
 }
 
 .newsRoll .by3 button {
@@ -1046,7 +1062,7 @@ div.extra-soundfiles ul strong {
 .special .labels .item,
 .newsRoll .labels .item{
        display:block;
-       background: #5f2167;
+       background: $secondary;
        color:white;
        margin:0.1em;
        font-size:0.9em;
@@ -1278,6 +1294,7 @@ ul.newsSpecial{
        text-decoration: underline;
 }
 
+#fiber-content .episode a,
 #fiber-content ul.list a {
        text-decoration: none;
 }
@@ -1481,7 +1498,7 @@ div.userContent a.tag { text-decoration: none; }
 
        #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
        #player-container{
-               background: #CFBE00;
+               background: $primary;
        }
         #player-container * {color: white !important; }
        #player-container{
@@ -1535,6 +1552,7 @@ h3.episode-subtitle {
 
 .waveform span {
        background: #3A3A3A;
+       background: rgba(10, 10, 10, 0.8);
        display: inline-block;
        width: 0.50%;
 }
@@ -1544,19 +1562,24 @@ h3.episode-subtitle {
 }
 
 .waveform span.done.current + span {
-       background: #CFBE00;
+       background: $primary;
 }
 
 .waveform i.duration {
        position: absolute;
        right: 4px;
        bottom: 4px;
-       color: #CFBE00;
+       color: $primary;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        font-style: normal;
        font-weight: bold;
 }
 
+span.timestamp {
+       cursor: pointer;
+       border-bottom: 1px dotted #666;
+}
+
 div.fragment-sound {
        position: relative;
 }
@@ -1617,7 +1640,7 @@ div.extra-soundfiles div.logo {
 div#fiber-content div.extra-soundfiles ul.list {
        display: inline-block;
        width: 88%;
-       width: calc(100% - 72px);
+       width: calc(100% - 74px);
 }
 
 div.download-links {
@@ -1633,7 +1656,7 @@ div.hidden-download-links {
 div.episode-detail div.sound div.download-links {
        display: inline-block;
        padding-top: 1ex;
-       padding-left: 1ex;
+       padding-left: 3em;
 }
 
 div.extra-soundfiles div.download-links {
@@ -1714,6 +1737,11 @@ div.portrait div.gallery span.gallery-legend {
        margin-top: 330px;
 }
 
+div.gallery span.image {
+       display: inline-block;
+       cursor: pointer;
+}
+
 @media screen and (max-width: 640px) {
        div.portrait div.gallery div.first img,
        div.gallery div.first img {
@@ -1731,17 +1759,18 @@ ul.tags {
        clear: both;
 }
 
-div.topik.inline {
+a.topik-link {
        clear: both;
-        margin-top: 1em;
+       display: block;
+       margin-top: 1em;
 }
 
-#fiber-content div.topikcell a {
+#fiber-content div.topikcellcontent a {
        text-decoration: none;
        height: 500px;
 }
 
-#fiber-content div.topikcell .topik-large a {
+#fiber-content div.cell.topik-large a {
        height: auto;
 }
 
@@ -1749,16 +1778,31 @@ div.topikcellcontent h5 {
        padding-top: 1ex;
 }
 
-div.topikcellcontent.topik-large a {
+div.topik-large div.topikcellcontent a {
        width: 100%;
        float: none;
        display: inline-block;
        text-align: left;
 }
 
-div.topikcellcontent.topik-large img {
-       float: left;
-       margin-right: 1em;
+div.topik-large div.topikcellcontent img {
+       width: 100%;
+       display: block;
+}
+
+div.topik-large div.topikcellcontent a div {
+       @media screen and (min-width: 760px) {
+               display: flex;
+       }
+       margin-top: 1ex;
+       h2 {
+               margin-top: 0;
+               white-space: nowrap;
+               margin-right: 1ex;
+               @media screen and (max-width: 760px) {
+                       padding-bottom: 0;
+               }
+       }
 }
 
 div.topikcellcontent a {
@@ -1949,6 +1993,18 @@ div.chat-area {
        color: #666;
 }
 
+@media screen and (max-width: 760px) {
+    #chat span.from {
+        display: block;
+        position: static;
+        width: auto;
+    }
+    #chat span.content {
+        display: block;
+        padding-left: 2rem;
+    }
+}
+
 h1.top > span.chat.with-logo {
        position: relative;
        left: 140px;
@@ -2008,3 +2064,60 @@ div#chat.moderation .msg-in span.from:hover::after {
 div.programCell a.playlist {
        font-size: 80%;
 }
+
+#bg-title {
+       display: none;
+       color: lighten($primary, 20);
+       font-family: 'Reglo';
+       text-transform: uppercase;
+       line-height: 100%;
+       font-size: 250px;
+       font-size: 25vh;
+       position: absolute;
+       left: -260px;
+       top: 48vh;
+       z-index: 0;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
+       cursor: default;
+}
+
+.rightPart .menucell {
+       ul {
+               list-style: none;
+               padding: 0;
+               li {
+                       padding-bottom: 1rem;
+               }
+       }
+}
+
+div#loading-page {
+       position: fixed;
+       top: 0;
+       left: 0;
+       right: 0;
+       height: 5px;
+       background: $secondary;
+       z-index: 1100;
+       animation-name: load_animation;
+       animation-duration: 6000ms;
+       animation-timing-function: ease-out;
+       transition: opacity 200ms linear;
+       &.fade {
+               opacity: 0;
+       }
+}
+
+@keyframes load_animation {
+       0% { right: 100%; }
+       100% { right: 0%; }
+}
+
+.episode-auto-selection-cell.hide-emission-titles {
+       .emission-title, .soundfile-info .sep {
+               display: none;
+       }
+}