one of many positioning fixes

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / local.scss

diff --git a/src/wolnelektury/static/2022/styles/local.scss b/src/wolnelektury/static/2022/styles/local.scss
index a8185cd..f72b997 100644 (file)
--- a/src/wolnelektury/static/2022/styles/local.scss
+++ b/src/wolnelektury/static/2022/styles/local.scss
@@ -1,39 +1,259 @@
+
 $teal: #007880;
+$green: #92BD39;
+$red: #FF4C54;
 
 
-.l-change-pop {
-    transition: 350ms all;
-    
-    p {
-        a {
-            color: $teal;
+
+.jp-state-playing .icon-play {
+  &:before {
+    content: $icon-pause;
+  }
+}
+.jp-state-muted .icon-volume {
+  &:before {
+    content: $icon-mute;
+  }
+}
+
+
+.sponsors-page {
+    display: flex;
+    margin-top: 48px;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 60px;
+
+    @include rwd($break-wide) {
+        gap: 0;
+        justify-content: space-between;
+        flex-wrap: nowrap;
+    }
+
+    .sponsors-column {
+        margin: 1em 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 0;
+
+        .sponsors-column-name {
+            font-weight: $regular;
+            @include font-size(18px);
+            line-height: 115%;
+            height: 62px;
+            margin: 0;
+            text-align: center;
+            color: #474747;
+            display: flex;
+            align-items: center;
+            max-width: 8em;
+        }
+        .sponsor-logos {
+            height: 140px;
+            overflow: hidden;
+            a {
+                margin-top: 20px;
+                display: block;
+                width: 120px;
+                height: 120px;
+            }
         }
     }
 }
 
 
-.is-open .l-change-pop {
-    height: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
+
+
+.l-checkout__support__bar span.little-progress::after {
+    white-space: nowrap;
+    justify-content: left;
+    width: 200px;
+    right: -210px;
+    color: #083F4D;
 }
+.funding-details {
+    h2 {
+        margin-top: 0;
+        margin-bottom: 1.5rem;
+    }
+    .funding-description {
+        h2 {
+            font-size: 1.25rem;
+            line-height: 1.35;
+        }
+    }
+}
+
 
 
-.ui-autocomplete a {
-    display: block;
-    transition: none;
+
+.book-container {
+    position: relative;
+
+    .set-tools {
+        display: none;
+        font-size: 12px;
+        position: absolute;
+        bottom: 0px;
+        right: 0;
+        left: 0;
+        background: black;
+        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
+        color: white;
+        padding: 30px 10px 10px;
+
+        .sets {
+            span {
+                padding: 3px 18px 3px 3px;
+                background: white;
+                color: black;
+                margin-right: 5px;
+                margin-bottom: 5px;
+                display: inline-block;
+                border-radius: 3px;
+                position: relative;
+
+                .close {
+                    margin-left: 5px;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    font-family: wl;
+                    font-size: 10px;
+                    color: #FF4C54;
+                    padding: 4px;
+                    
+                    &:hover {
+                        text-decoration: none;
+                        color: black;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+        .add-set-tag {
+            input {
+                width: 100%;
+            }
+            button {
+                font-family: wl;
+                position: absolute;
+                right: 12px;
+                color: #FF4C54;
+                bottom: 10px;
+                font-size: 12px;
+                border: 0;
+                background: none;
+                padding: 3px;
+            }
+        }
+    }
 }
 
 
-.jp-state-playing .icon-play {
-  &:before {
-    content: $icon-pause;
-  }
+.book-container-activator {
+    &:hover, &.hover, &.ac-hover {
+        .book-container {
+            &.book-liked {
+                .icon-liked {
+                    font-size: 2em;
+                }
+
+                .set-tools {
+                    display: block;
+                }
+            }
+        }
+    }
 }
-.jp-state-muted .icon-volume {
-  &:before {
-    content: $icon-mute;
-  }
+
+
+.filter-container {
+    position: absolute;
+    top: 15px;
+    bottom: 25px;
+
+    display: flex;
+    align-items: center;
+
+    .filter {
+        background: #FBC40F;
+        padding: 5px 10px;
+        margin-left: 5px;
+        border-radius: 15px;
+        white-space: nowrap;
+
+        a {
+            color: currentColor;
+        }
+        a:hover {
+            color: inherit;
+        }
+
+        &.filter-category-epoch {
+            background: $teal;
+            color: white;
+        }
+        &.filter-category-kind {
+            background: $red;
+        }
+        &.filter-category-genre {
+            background: $green;
+        }
+        &.filter-category-set {
+            background: white;
+            color: black;
+            border: 1px solid #888;
+
+            &:after {
+                content: '';
+                font-family: 'wl' !important;
+                font-size: .9em;
+                margin-left: 3px;
+                color: $red;
+            }
+        }
+    }
+}
+
+.with-filter {
+    padding: 20px 0 0;
+    position: relative;
+    width: 100%;
+
+    h2 {
+        margin-bottom: 0;
+    }
+}
+.with-filter .row div.filter-container {
+    background: white;
+    width: 100%;
+    top: 0;
+    bottom: 100%;
+    opacity: 0;
+    overflow: hidden;
+
+    transition: opacity .2s, all .3s;
+    
+}
+.with-filter.filters-enabled {
+    .row div.filter-container{
+        top: 15px;
+        bottom: 5px;
+        opacity: 1;
+    }
+}
+.with-filter .row div.filter-container:hover {
+        top: 15px;
+        bottom: 5px;
+        opacity: 1;
+}
+
+.l-books__input .filter-container {
+    top: 0;
+    bottom: 0;
+    right: 10px;
+    padding: 10px 0;
+
 }