Introduce banner styles.

[wolnelektury.git] / src / annoy / static / annoy / banner.scss

diff --git a/src/annoy/static/annoy/banner.scss b/src/annoy/static/annoy/banner.scss
index c9ddd2d..746f869 100644 (file)
--- a/src/annoy/static/annoy/banner.scss
+++ b/src/annoy/static/annoy/banner.scss
@@ -36,6 +36,7 @@
     img {
         margin: 0;
         align-self: center;
+        width: auto;
         max-height: 40px;
         @media screen and (min-width: 400px) {
             max-height: 60px;
@@ -50,6 +51,7 @@
     p {
         margin: 0;
         font-size: 1.5em;
+        line-height: 1.1em;
 
         @media screen and (min-width: 400px) {
             font-size: 2em;
@@ -87,6 +89,10 @@
     top: 0;
     right: 0;
     color: black;
+    max-width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 
@@ -120,6 +126,7 @@
     font-size: 16pt;
     line-height: 26pt;
     padding: 0;
+    overflow: hidden;
 
     .annoy-banner-inner {
         padding: 0 40% 0 15%;
@@ -127,7 +134,7 @@
         overflow-y: scroll;
         padding-top: 20vh;
         padding-bottom: 2em;
-        width: 101vw;
+        width: 101%;
         box-sizing: border-box;
     }
 
@@ -212,8 +219,53 @@
         }
     }
 
+    &.annoy-banner-style_blackout_centre {
+        background: rgba(0,0,0,.5);
+
+        .annoy-banner-inner {
+            background: black;
+            position: absolute;
+            top: 14%;
+            left: 14%;
+            right: 14%;
+            bottom: 14%;
+            width: auto;
+            height: auto;
+            border: 2px solid white;
+            overflow-y: auto;
+        }
+
+    }
+    @media screen and (min-height: 500px) {
+        &.annoy-banner-style_blackout_upper {
+            background: rgba(0,0,0,.5);
+
+            .annoy-banner-inner {
+                background: black;
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 50%;
+                width: auto;
+                height: auto;
+                border-bottom: 2px solid white;
+                overflow-y: auto;
+                
+                .action {
+                    bottom: 20vh;
+                }
+            }
+
+            .annoy-banner-off {
+                bottom: 60vh;
+            }
+        }
+    }
     
 }
+
+
 .annoy-banner-on_blackout {
     position: fixed;
     z-index: 9999;
@@ -223,12 +275,21 @@
     color: white;
     border-radius: 1em 0 0 0;
     padding: .1em 1em;
+    max-width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 
 
 .dynamic-insert {
     background: orange;
+    margin: 1em 0;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
 
     &.with-image {
         min-height: 120px;
@@ -244,10 +305,14 @@
         .text {
             padding: 2em;
             flex: 1;
+            align-self: center;
         }
         img {
             border-radius: 100%;
             margin: 1em;
+            align-self: center;
+           width: 120px;
+           height: 120px;
         }
     }
 }
@@ -283,6 +348,7 @@
     p {
         margin: 0;
         font-size: 1.5em;
+        line-height: 1.15em;
 
         @media screen and (min-width: 400px) {
             font-size: 2em;