X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/d019a9b5e928dcf777852d0c8d5413fd3d69b4dd..d10c63f27d1494a04d57a6c805d093089526430a:/src/wolnelektury/static/2022/more.scss

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index 604c24d38..3733e3ca2 100644
--- a/src/wolnelektury/static/2022/more.scss
+++ b/src/wolnelektury/static/2022/more.scss
@@ -1,3 +1,489 @@
+body.is-open {
+    height: 100%;
+    overflow-y: hidden;
+}
+
+.l-change-pop {
+    margin-top: 18px;
+}
+.is-open .l-change-pop {
+    height: auto;
+    margin-top: 18px;
+    padding: 10px 50px;
+}
+
+.l-navigation__logo {
+    height: 44px;
+}
+
+.l-navigation__menu {
+    .scrollable {
+        height: 100%;
+        overflow-y: scroll;
+        padding-bottom: 30px;
+    }
+}
+
+.l-navigation__menu__book__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    p {
+        margin: 0;
+
+        &.korona {
+            &:before {
+                content: url('images/korona.svg');
+                width: 21px;
+                margin-right: -21px;
+                position: relative;
+                top: -10px;
+                left: -3px;
+            }
+        }
+    }
+}
+.l-navigation__menu__book {
+    .button {
+        display: inline-block;
+        font-size: 16px;
+        font-weight: 700;
+        padding: 0 20px;
+        min-width: 212px;
+        line-height: 38px;
+        text-align: center;
+
+        /* green 700 */
+        background: #92BD39;
+        color: #083F4D;
+        border-radius: 6px;
+
+        transition: background-color 150ms;
+
+        &:hover {
+            background-color: #FBC40F;
+        }
+    }
+}
+.l-navigation__menu__book__info {
+    img {
+        width: 42px;
+        height: 60px;
+    }
+}
+.l-navigation__menu__links ul li a em {
+    font-style: normal;
+    color: #FFA500;
+    font-weight: 600;
+}
+.l-navigation__login {
+    color: #74BDC2;
+    margin-right: 20px;
+    
+    a {
+        color: white;
+    }
+}
+.l-navigation__actions {
+    position: relative;
+    height: 44px;
+
+    .user {
+        margin-right: 25px;
+    }
+}
+
+
+.l-books {
+    margin-right: -17px;
+}
+.l-books__grid {
+    margin-right: -17px;
+}
+
 .l-books__item {
     width: 212px;
+
+    margin-right: 17px !important; // reverse the 5n+5 rule.
+
+    transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
+}
+
+
+.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__payments {
+    display: none;
+}
+.toggle-input{
+    &#switch-once:checked {
+        ~.l-switch__wrapper {
+            label {
+                &:nth-of-type(1) { color: #003C3C; }
+                &:nth-of-type(2) { color: #74BDC2; }
+            }
+            .toggle {
+                left: 5px;
+            }
+        }
+        ~.payments-once {
+            display: flex;
+        }
+    }
+    &#switch-monthly:checked {
+        ~.l-switch__wrapper {
+            label {
+                &:nth-of-type(1) { color: #74BDC2; }
+                &:nth-of-type(2) { color: #003C3C; }
+            }
+            .toggle {
+                left: 39px;
+            }
+        }
+        ~.payments-recurring {
+            display: flex;
+        }
+    }
+}
+
+.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;
+    }
+}
+
+
+
+.page-simple {
+    margin-bottom: 70px;
+    padding-bottom: 30px;
+    border-radius: 10px;
+    background: #E1F1F2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .white-box {
+        // for legacy templates
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    h1 {
+        width: 100%;
+        margin: 0 0 50px 0;
+        padding: 32px 45px;
+        border-radius: 10px 10px 0 0;
+
+        font-style: italic;
+        font-weight: 300;
+        font-size: 48px;
+        line-height: 55px;
+        letter-spacing: -0.02em;
+        background: #083F4D;
+        color: #92BD39;
+    }
+
+    > p, form, > .normal-text {
+        min-width: 300px;
+        margin-left: 50px;
+        margin-right: 50px;
+        width: auto;
+    }
+
+    .wlfund {
+        margin: 0;
+        width: 90%;
+        border-collapse: separate;
+
+        tr {
+            td {
+                padding: .625rem .3125rem .625rem;
+                border-top: .625rem solid rgba(255,255,255,0);
+                border-bottom: 1px solid #083F4D;
+                text-align: center;
+            }
+        }
+    }
+}
+
+.page-simple, .nice-controls {
+    button, input[type=submit] {
+        margin: 24px 0;
+        height: 56px;
+        background: #083F4D;
+        border: none;
+        border-radius: 3px;
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        color: #FFFFFF;
+        width: 340px;
+
+        &.active {
+            outline: 2px solid #083F4D;
+            outline-offset: 3px;
+        }
+        
+        &:disabled {
+            opacity: .8;
+        }
+    }
+
+    label {
+        font-style: normal;
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 160%;
+        color: #083F4D;
+        margin-top: 24px;
+    }
+
+    input, textarea, select {
+        display: block;
+        width: 100%;
+        background: #FFFFFF;
+        color: black;
+        border: 1px solid #D5ECED;
+        border-radius: 3px;
+        transition: all cubic-bezier(0, 0, 0.2, 1) 250ms;
+        padding: 10px;
+        outline: 0;
+    }
+    input, select {
+        height: 56px;
+    }
+    input[type=checkbox], input[type=radio] {
+        display: inline;
+        float: left;
+        width: 1.2em;
+        height: 1.2em;
+        vertical-align: middle;
+        margin-right: 1em;
+    }
+}
+
+
+.experiment {
+    display: flex;
+    align-items: center;
+}
+
+
+
+.page-simple {
+    .form-info {
+        h2 {
+            font-size: 1.5em;
+            margin-top: 0;
+        }
+    }
+}
+
+
+.funding-promo-bar {
+    margin: 18px auto;
+
+    .l-checkout__support {
+        margin: 0;
+        a {
+            display: flex;
+            align-items: start;
+
+            .buttonlike {
+                margin-right: 10px;
+                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;
+            }
+        }
+    }
+}
+
+.l-checkout__support__bar {
+    overflow: hidden;
+}
+
+
+.l-change-pop {
+    margin-bottom: 18px;
+}
+
+
+.page-simple button.button-orange {
+    background: #FFA500;
+    color: black;
+    transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
+    &:hover {
+        background: #92BD39;
+    }
+}
+
+
+.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;
+    }
 }