SARS-CoV-2, SARS-CoV-2 everywhere

[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 96bd8ab264a8157f43d3d2f66114ab36ca862730..946456ad98eee151dd479ce3c89f543b016accb6 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -80,14 +80,6 @@ h5.focus-title {
     padding:5px 7px 0px 7px;
 }
 
-#RefreshWhatsOnAir {
-       opacity: 0.2;
-}
-
-#RefreshWhatsOnAir.spinning {
-       opacity: 0.8;
-}
-
 /****************************************************/
 /* WRAPPER */
 /****************************************************/
@@ -98,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{
@@ -202,7 +194,8 @@ button.check:before, a.check:before {
 /**** BODY ****/
 /****************************************************/
 body{
-       background: white;
+       background: white url(../img/sars-cov-2.jpeg);
+       background-size: cover;
        color: #333;
 }
 /****************************************************/
@@ -233,13 +226,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;
 }
 
@@ -248,7 +243,6 @@ body{
 }
 
 #metaNav ul li a span{
-    padding:0.4em 0 0.5em 0;
        display:inline-block;
 }
 
@@ -308,7 +302,7 @@ body{
                padding: 0.2em 0 0 1ex;
        }
        #metaNav ul li a {
-               padding: 0 1ex;
+               padding: 0 0.8em;
        }
 }
 
@@ -387,7 +381,7 @@ body{
                font-family: RegloScale;
                text-transform: uppercase;
                padding-left: 0;
-               padding-top: 40px;
+               padding-top: 2rem;
                padding-bottom: 0;
        }
 
@@ -695,7 +689,7 @@ h1.top#frequence {
        opacity:0.9;
        padding-top:0.2em;
        height:auto;
-       overflow:auto;
+       overflow: hidden;
 }
 
 @media screen and (max-width: 760px) {
@@ -718,6 +712,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;
+       }
+
 }
 
 /****************************************************/
@@ -911,7 +916,7 @@ h1.top#frequence {
 .episode.resume .logo{
        float: right;
 }
-.topik.inline .logo,
+.topik-link .logo,
 .episode.inline .logo {
        min-height: 50px;
        float: left;
@@ -1290,6 +1295,7 @@ ul.newsSpecial{
        text-decoration: underline;
 }
 
+#fiber-content .episode a,
 #fiber-content ul.list a {
        text-decoration: none;
 }
@@ -1570,6 +1576,11 @@ h3.episode-subtitle {
        font-weight: bold;
 }
 
+span.timestamp {
+       cursor: pointer;
+       border-bottom: 1px dotted #666;
+}
+
 div.fragment-sound {
        position: relative;
 }
@@ -1630,7 +1641,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 {
@@ -1744,9 +1755,10 @@ 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 {
@@ -1770,8 +1782,23 @@ div.topikcellcontent.topik-large a {
 }
 
 div.topikcellcontent.topik-large img {
-       float: left;
-       margin-right: 1em;
+       width: 100%;
+       display: block;
+}
+
+div.topikcellcontent.topik-large 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 {
@@ -1962,6 +1989,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;
@@ -2040,3 +2079,41 @@ div.programCell a.playlist {
        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;
+       }
+}