X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/48a6d2ddc3e5ce215beddd6369f01598651ad216..d00a4bcb2ee6a3ec0c65600b854a86524dfa4d4b:/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 432ee4d0c..18c8df847 100644
--- 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;
@@ -50,11 +51,12 @@
     .annoy-banner-off {
         font-size: 1.2rem !important;
     }
-    
+
     @include rwd($break-flow) {
         .annoy-banner-inner {
             padding: 0;
             margin: 10vh 10vw 20vh 10vw;
+            max-height: 70vh;
             flex-direction: row;
             overflow-y: unset;
 
@@ -67,7 +69,378 @@
 
         }
         .annoy-banner-off {
-            
+
+        }
+    }
+}
+
+
+.annoy-banner_crisis-container,
+.annoy-banner_top-container {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    box-shadow: 0 0 10px black;
+    display: flex;
+    background: #c32721;
+    color: black;
+    align-items:center;
+    cursor: pointer;
+
+    &.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);
+	}
+
+	@media screen and (max-width: 940px) {
+	    padding: 10px 0;
+	    height: auto;
+	    top: 0;
+	}
+    }
+
+
+    .annoy-banner_crisis,
+    .annoy-banner_top {
+	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 {
+		    max-height: 159px;
+		    display: block;
+
+		    @media screen and (max-width: 700px) {
+			max-height: 120px;
+		    }
+		}
+	    }
+
+	    .text-box {
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+
+		@media screen and (max-width: 700px) {
+		    p {
+			font-size: .9em;
+		    }
+		}
+
+		@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;
+		}
+		.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 {
+			    color: black;
+			}
+		    }
+		    .time-box {
+			width: 110px;
+			margin: auto;
+		    }
+		    .countdown {
+			margin: 0;
+		    }
+		}
+	    }
+
+	    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;
+
+		@media screen and (max-height: 700px) {
+		    font-size: .9em;
+		}
+		@media screen and (max-height: 400px) {
+		    white-space: nowrap;
+		}
+
+		&:hover {
+		    background: #ffd430;
+		    text-decoration: none;
+		}
+	    }
+	}
+    }
+    &.annoy-banner-style_crisis_quiet,
+    &.annoy-banner_top-container {
+	background: black;
+	color: white;
+	.annoy-banner-inner {
+	    align-items: center;
+
+	    .text-box {
+		.text {
+		    background: none;
+		    padding: 0;
+		    border: none;
+		    a {
+			color: #ffd430;
+		    }
+		}
+	    }
+	}
+    }
+}
+
+
+
+.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;
+            }
         }
+        
     }
 }