X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/298a2c3414d84d57ec9e691cfbc6d084530af278..ab9b52b00d9c995e2b2036f32270841bfebb11b2:/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 24152507e..70704f34d 100644
--- 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,16 +69,16 @@
 
         }
         .annoy-banner-off {
-            
+
         }
     }
 }
 
 
-.annoy-banner_crisis-container {
+.annoy-banner_crisis-container,
+.annoy-banner_top-container {
     position: sticky;
     top: 0;
-    height: 160px;
     z-index: 10;
     box-shadow: 0 0 10px black;
     display: flex;
@@ -87,18 +87,31 @@
     align-items:center;
     cursor: pointer;
 
-    @media screen and (min-height: 480px) {
-	height: 33vh;
-	top: calc(-33vh + 160px);
+    &.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 (max-width: 940px) {
-	padding: 10px 0;
-	height: auto;
-	top: 0;
+	@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_crisis,
+    .annoy-banner_top {
 	position: sticky;
 	top: 0;
 	width: 100%;
@@ -116,11 +129,11 @@
 	    .image-box {
 		position: relative;
 		img {
-		    height: 160px;
+		    max-height: 159px;
 		    display: block;
 
 		    @media screen and (max-width: 700px) {
-			height: 120px;
+			max-height: 120px;
 		    }
 		}
 	    }
@@ -137,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;
 		}
@@ -158,11 +189,16 @@
 			flex-grow: 1;
 
 			.l-checkout__support__bar span::after {
-			    right: auto;
-			    left: 5px;
 			    color: black;
 			}
 		    }
+		    .time-box {
+			width: 110px;
+			margin: auto;
+		    }
+		    .countdown {
+			margin: 0;
+		    }
 		}
 	    }
 
@@ -179,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;
@@ -186,4 +229,23 @@
 	    }
 	}
     }
+    &.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;
+		    }
+		}
+	    }
+	}
+    }
 }