Add banner style.

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _annoy.scss

diff --git a/src/wolnelektury/static/2022/styles/layout/_annoy.scss b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
index 432ee4d..9ff6a0d 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_annoy.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
@@ -14,6 +14,7 @@
     background: linear-gradient(180deg, rgba(0,0,0,1) 90%, rgba(0,0, 0,.5) 100%);
 
     .annoy-banner-inner {
+        max-height: 100vh;
         overflow-y: auto;
         padding: 0 0 30px 0;
         display: flex;
@@ -55,6 +56,7 @@
         .annoy-banner-inner {
             padding: 0;
             margin: 10vh 10vw 20vh 10vw;
+            max-height: 70vh;
             flex-direction: row;
             overflow-y: unset;
 
@@ -71,3 +73,135 @@
         }
     }
 }
+
+
+.annoy-banner_crisis-container {
+    position: sticky;
+    top: 0;
+    height: 160px;
+    z-index: 10;
+    box-shadow: 0 0 10px black;
+    display: flex;
+    background: #c32721;
+    color: black;
+    align-items:center;
+    cursor: pointer;
+
+    @media screen and (min-height: 480px) {
+       height: 33vh;
+       top: calc(-33vh + 160px);
+    }
+
+    @media screen and (max-width: 940px) {
+       padding: 10px 0;
+       height: auto;
+       top: 0;
+    }
+
+    .annoy-banner_crisis {
+       position: sticky;
+       top: 0;
+       width: 100%;
+
+       .annoy-banner-inner {
+           max-width: 1172px;
+           margin: auto;
+           padding-right: 16px;
+           padding-left: 16px;
+
+           display: flex;
+           gap: 20px;
+           align-items: flex-start;
+
+           .image-box {
+               position: relative;
+               img {
+                   height: 159px;
+                   display: block;
+
+                   @media screen and (max-width: 700px) {
+                       height: 120px;
+                   }
+               }
+           }
+
+           .text-box {
+               flex-grow: 1;
+               display: flex;
+               flex-direction: column;
+               gap: 10px;
+
+               @media screen and (max-width: 700px) {
+                   p {
+                       font-size: .9em;
+                   }
+               }
+
+               .text {
+                   background: #edc016;
+                   padding: 1em;
+                   border: 3px solid black;
+               }
+               a {
+                   color: #c32721;
+               }
+               .state-box {
+                   display: flex;
+                   gap: 10px;
+                   align-items: center;
+                   @media screen and (max-width: 700px) {
+                       flex-direction: column;
+                       align-items: stretch;
+                       text-align: center;
+                   }
+                   .progress-box {
+                       flex-grow: 1;
+
+                       .l-checkout__support__bar span::after {
+                           right: auto;
+                           left: 5px;
+                           color: black;
+                       }
+                   }
+               }
+           }
+
+           p {
+               margin: 0;
+           }
+
+           a.action {
+               background: #edc016;
+               color: black;
+               padding: .8em 1em;
+               border: 3px solid black;
+               border-radius: 10px;
+               display: block;
+               transition: background-color .2s;
+
+               &:hover {
+                   background: #ffd430;
+                   text-decoration: none;
+               }
+           }
+       }
+    }
+    &.annoy-banner-style_crisis_quiet {
+       background: black;
+       color: white;
+       .annoy-banner-inner {
+           align-items: center;
+
+           .text-box {
+               .text {
+                   background: none;
+                   padding: 0;
+                   border: none;
+                   a {
+                       color: #ffd430;
+                   }
+               }
+           }
+       }
+    }
+}