Seasonal overlays

[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 e91d585..18c8df8 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_annoy.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
@@ -51,7 +51,7 @@
     .annoy-banner-off {
         font-size: 1.2rem !important;
     }
-    
+
     @include rwd($break-flow) {
         .annoy-banner-inner {
             padding: 0;
@@ -69,7 +69,7 @@
 
         }
         .annoy-banner-off {
-            
+
         }
     }
 }
@@ -89,10 +89,14 @@
 
     &.annoy-banner_top-container {
        padding: 16px 0;
+
+       @media screen and (max-height: 700px) {
+           padding: 5px 0;
+       }
     }
     &.annoy-banner_crisis-container {
        height: 160px;
-    
+
        @media screen and (min-height: 480px) {
            height: 33vh;
            top: calc(-33vh + 160px);
@@ -146,11 +150,29 @@
                    }
                }
 
+               @media screen and (max-height: 700px) {
+                   flex-direction: row;
+                   justify-content: space-between;
+                   p {
+                       font-size: .9em;
+                   }
+               }
+
+
                .text {
                    background: #edc016;
                    padding: 1em;
                    border: 3px solid black;
                }
+
+               @media screen and (max-height: 400px) {
+                   align-items: center;
+                   .text {
+                       height: 1.2em;
+                       overflow: hidden;
+                   }
+               }
+
                a {
                    color: #c32721;
                }
@@ -193,6 +215,13 @@
                display: block;
                transition: background-color .2s;
 
+               @media screen and (max-height: 700px) {
+                   font-size: .9em;
+               }
+               @media screen and (max-height: 400px) {
+                   white-space: nowrap;
+               }
+
                &:hover {
                    background: #ffd430;
                    text-decoration: none;
@@ -220,3 +249,198 @@
        }
     }
 }
+
+
+
+.annoy-banner_book-page {
+    background-color: #ffd430;
+    color: #083F4D;
+    border-radius: 10px;
+    padding: 15px 20px;
+    margin-top: 20px;
+
+    .annoy-banner-inner {
+       display: flex;
+       flex-direction: row;
+       gap: 20px;
+       align-items: flex-start;
+       justify-content: space-between;
+
+       p {
+           margin: 0;
+       }
+       a {
+           line-height: 1.35;
+           color: #c32721;
+           white-space: nowrap;
+           border: solid #c32721;
+           border-width: 0 0 1px;
+
+           &:hover {
+               text-decoration: none;
+               border-bottom-width: 2px;
+           }
+       }
+    }
+}
+
+
+.annoy-banner_book-page-center {
+    background: white;
+    margin-top: 50px;
+    padding: 20px;
+    border: 1px solid #018189;
+    border-radius: 15px;
+    color:#018189;
+
+    .annoy-banner-inner {
+       display: flex;
+       gap: 15px;
+       align-items: center;
+
+       img {
+           width: 150px;
+       }
+       p {
+           margin: 0;
+       }
+    }
+}
+
+
+
+
+
+.annoy-banner_seasonal {
+    background-color: #ffd430;
+    color: #083F4D;
+    border-radius: 10px;
+    padding: 15px 20px;
+    margin-top: 20px;
+    cursor: pointer;
+
+    .annoy-banner-inner {
+       display: flex;
+       flex-direction: row;
+       gap: 20px;
+       align-items: flex-start;
+       justify-content: space-between;
+
+       p {
+           margin: 0;
+       }
+       a {
+           line-height: 1.35;
+           color: #c32721;
+           white-space: nowrap;
+           border: solid #c32721;
+           border-width: 0 0 1px;
+
+           &:hover {
+               text-decoration: none;
+               border-bottom-width: 2px;
+           }
+       }
+        a.action { 
+            color: #fff;
+            background: #c92834;
+            padding: 9px 20px;
+            font-weight: 600;
+            border-radius: 15px;
+           border-width: 0;
+           &:hover {
+               border-bottom-width: 0;
+            }
+        }
+
+    }
+        .state-box {
+            margin-top: 15px;
+        }
+        .bar-status-box {
+            display: flex;
+            justify-content: space-between;
+        }
+}
+
+
+.t-relative {
+    position: relative;
+}
+.annoy-banner_seasonal-overlay {
+    display: none;
+    
+    background-color: #ffd430;
+    color: #083F4D;
+    border-radius: 0 0 10px 10px;
+    position: absolute;
+    z-index: 1000;
+    left: 16px;
+    right: 16px;
+    padding: 15px 20px;
+    margin-top: -10px;
+
+    &:before {
+        background: rgba(0,0,0,0);
+        height: 10px;
+        display: block;
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border-radius: 0 0 10px 10px;
+        box-shadow: 0px 10px 10px black;
+        z-index: 999;
+    }  
+    
+    .annoy-banner-inner {
+       display: flex;
+       flex-direction: column;
+       gap: 20px;
+       align-items: flex-start;
+       justify-content: space-between;
+
+        @include rwd($break-flow) {
+            flex-direction: row;
+        }
+        
+        .annoy-banner-off {
+            background: none;
+            border-color: transparent;
+
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            padding: 12px 4px;
+        }
+        
+        video {
+            height: 240px;
+            width: 100%;
+            @include rwd($break-flow) {
+                height: 360px;
+                width: auto;
+            }
+        }
+
+        .text {
+            margin-right: 60px;
+            h1 {
+                font-size: 1.5em;
+                margin: 0 0 1em;
+                font-weight: bold;
+            }
+        
+           p {
+               margin: 1em 0;
+           }
+            .l-button {
+                display: inline-block;
+                margin-top: 1em;
+                padding: 12px 20px;
+            }
+        }
+        
+    }
+}