MP3 in OPDS

[wolnelektury.git] / src / wolnelektury / static / 2022 / more.scss

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index 604c24d..60c7a1e 100644 (file)
--- a/src/wolnelektury/static/2022/more.scss
+++ b/src/wolnelektury/static/2022/more.scss
@@ -1,3 +1,322 @@
+@import "styles/utils/mixins";
+
+body.is-open {
+    height: 100%;
+    overflow-y: hidden;
+}
+
+.l-navigation__menu {
+    .scrollable {
+        height: 100%;
+        overflow-y: scroll;
+        padding-bottom: 30px;
+    }
+}
+
+.l-navigation__menu__links ul li a em {
+    font-style: normal;
+    color: #FFA500;
+    font-weight: 600;
+}
+
+.l-collections .l-books {
+    width: 100%;
+}
+.l-books, .l-books__grid {
+    @include rwd($break-wide) {
+        //justify-content: space-between;
+        gap: 20px;
+        .l-books__item {
+            margin: 0;
+        }
+    }
+}
+
+.slick-track {
+    margin: 0;
+
+    .l-books__item {
+        @include rwd($break-wide) {
+
+            width: 214.4px;
+            margin-left: 17px;
+            margin-right: 0;
+            &:first-of-type {
+                margin-left: 0px;
+            }
+        }
+    }
+}
+
+
+

 .l-books__item {
 .l-books__item {

-    width: 212px;
+    //transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
+
+    width: 100%;
+    padding: 5.28vw;
+
+    @include rwd($B2) {
+        width: calc(50vw - 32px/2 - 10px);
+        padding: 3.8vw;
+    }
+    @include rwd($B3) {
+        width: calc(33.33vw - 32px/3 - 10px);
+        padding: 2.73vw;
+    }
+    @include rwd($B4) {
+        width: calc(25vw - 32px/4 - 10px);
+        padding: 2.1vw;
+    }
+
+    @include rwd($B5) {
+        width: calc(20vw - 32px/5 - 10px);
+        padding: 1.63vw;
+    }
+
+    @include rwd($break-wide) {
+        width: 212px;
+        padding: 21px;
+    }
+}
+
+
+
+
+
+.by-popularity {
+    .l-books__item {
+        order: attr(data-pop);
+    }
+}
+
+
+
+.toggle-input {
+    left: calc(50% - 77px/2);
+    opacity: 0;
+    position: absolute;
+    //top: 0;
+    height: 26px;
+    width: 77px;
+    z-index: 2;
+
+    &:checked {
+        z-index: 0;
+    }
+}
+
+.l-checkout__box {
+    position: relative;
+}
+
+
+.l-checkout__footer__content__item > div ul {
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 150%;
+  color: #808080;
+}
+
+
+.l-checkout__form__row {
+    .iframe {
+        margin-bottom: 16px;
+    }
+}
+
+
+
+.l-books__item__content {
+    width: 100%;
+   
+    .fragment-text {
+        max-width: 390px;
+        margin-top: 20px;
+        font-weight: 400;
+        font-size: 18px;
+        font-size: 1.125rem;
+        line-height: 150%;
+        color: #474747;
+        
+        h1, h2, h3, h4 {
+            font-size: 1em;
+        }
+    }
+}
+
+
+
+#user-menu {
+    //display: none;
+
+    position:absolute;
+    top: 60px;
+    z-index: 1;
+
+    position: absolute;
+    width: 186px;
+    top: 48px;
+    right: 45px;
+
+    /* yellow 900 */
+    background: #F7BA00;
+    box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
+    border-radius: 10px;
+    overflow: hidden;
+
+    opacity:0;
+    pointer-events: none;
+    transition: 200ms opacity;
+    
+    &.is-open {
+        //display: block;
+        pointer-events: all;
+        opacity: 100%;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+            a {
+                color: #474747;
+                display: block;
+                line-height: 27px;
+                padding: 8px 21px;
+                &:hover {
+                    color: #474747;
+                    background: #EDAA00;
+                }
+
+                strong {
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+}
+
+
+form {
+    label.required:before {
+        content: "* ";
+        color: #FF4C54;
+    }
+    .helptext {
+        color: #808080;
+        font-size: 15px;
+        line-height: 150%;
+        margin-bottom: 30px;
+    }
+
+}
+
+.socialaccount_providers {
+    list-style: none;
+    padding: 0;
+
+    li {
+        display: inline-block;
+        margin-right: 10px;
+    }
+}
+
+
+
+
+
+.experiment {
+    display: flex;
+    margin: 1em 16px;
+    font-size: 1.5em;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 2em;
+    @include rwd($break-flow) {
+        flex-direction: row;
+        align-items: flex-end;
+    }
+
+    > span, > div {
+       text-align: center;
+       @include rwd($break-flow) {
+           width: 50%;
+       }
+    }        
+}
+
+
+.legend {
+    margin: 1em 16px;
+    font-size: .7em;
+    color: #777;
+    text-align:right;
+    font-style:italic;
+}
+
+
+.funding-promo-bar {
+    margin: 18px auto;
+
+    .l-checkout__support {
+        margin: 0;
+        a {
+            display: flex;
+            align-items: start;
+            gap: 0 10px;
+
+            flex-wrap: wrap;
+            @include rwd($B4) {
+                flex-wrap: nowrap;
+            }
+
+            .buttonlike {
+                background: #FFA500;
+                //color: #083F4D;
+                color: black;
+                border-radius: 5px;
+                font-size: 1.125rem;
+                line-height: 50px;
+                letter-spacing: -0.01em;
+                padding: 0 20px;
+                font-weight: 600;
+                transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
+                &:hover {
+                    background: #92BD39;
+                }
+            }
+            .funding-bar-container {
+                flex-grow: 1;
+
+                display: contents;
+                @include rwd($B4) {
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+.l-checkout__support__bar {
+    overflow: hidden;
+}
+
+.poll-bar {
+    height: 10px;
+    width: 100%;
+    display: block;
+    border-radius: 5px;
+    position: relative;
+    overflow: hidden;
+
+    .poll-bar-inner {
+      height: 100%;
+      position: absolute;
+      border-radius: 5px;
+      background-color: #006066;
+      top: 0; left: 0;
+    }

 }
 }