src/wolnelektury/static/2022/more.scss

   1 body.is-open {
   2     height: 100%;
   3     overflow-y: hidden;
   4 }
   5
   6 .l-change-pop {
   7     margin-top: 18px;
   8 }
   9 .is-open .l-change-pop {
  10     height: auto;
  11     margin-top: 18px;
  12     padding: 10px 50px;
  13 }
  14
  15 .l-navigation__logo {
  16     height: 44px;
  17 }
  18
  19 .l-navigation__menu {
  20     .scrollable {
  21         height: 100%;
  22         overflow-y: scroll;
  23         padding-bottom: 30px;
  24     }
  25 }
  26
  27 .l-navigation__menu__book__header {
  28     display: flex;
  29     align-items: center;
  30     justify-content: space-between;
  31
  32     p {
  33         margin: 0;
  34
  35         &.korona {
  36             &:before {
  37                 content: url('images/korona.svg');
  38                 width: 21px;
  39                 margin-right: -21px;
  40                 position: relative;
  41                 top: -10px;
  42                 left: -3px;
  43             }
  44         }
  45     }
  46 }
  47 .l-navigation__menu__book {
  48     .button {
  49         display: inline-block;
  50         font-size: 16px;
  51         font-weight: 700;
  52         padding: 0 20px;
  53         min-width: 212px;
  54         line-height: 38px;
  55         text-align: center;
  56
  57         /* green 700 */
  58         background: #92BD39;
  59         color: #083F4D;
  60         border-radius: 6px;
  61
  62         transition: background-color 150ms;
  63
  64         &:hover {
  65             background-color: #FBC40F;
  66         }
  67     }
  68 }
  69 .l-navigation__menu__book__info {
  70     img {
  71         width: 42px;
  72         height: 60px;
  73     }
  74 }
  75 .l-navigation__menu__links ul li a em {
  76     font-style: normal;
  77     color: #FFA500;
  78     font-weight: 600;
  79 }
  80 .l-navigation__login {
  81     color: #74BDC2;
  82     margin-right: 20px;
  83
  84     a {
  85         color: white;
  86     }
  87 }
  88 .l-navigation__actions {
  89     position: relative;
  90     height: 44px;
  91
  92     .user {
  93         margin-right: 25px;
  94     }
  95 }
  96
  97
  98 .l-books {
  99     margin-right: -17px;
 100 }
 101 .l-books__grid {
 102     margin-right: -17px;
 103 }
 104
 105 .l-books__item {
 106     width: 212px;
 107
 108     margin-right: 17px !important; // reverse the 5n+5 rule.
 109
 110     transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
 111 }
 112
 113
 114 .by-popularity {
 115     .l-books__item {
 116         order: attr(data-pop);
 117     }
 118 }
 119
 120
 121
 122 .toggle-input {
 123     left: calc(50% - 77px/2);
 124     opacity: 0;
 125     position: absolute;
 126     //top: 0;
 127     height: 26px;
 128     width: 77px;
 129     z-index: 2;
 130
 131     &:checked {
 132         z-index: 0;
 133     }
 134 }
 135
 136 .l-checkout__box {
 137     position: relative;
 138 }
 139
 140 .l-checkout__payments {
 141     display: none;
 142 }
 143 .toggle-input{
 144     &#switch-once:checked {
 145         ~.l-switch__wrapper {
 146             label {
 147                 &:nth-of-type(1) { color: #003C3C; }
 148                 &:nth-of-type(2) { color: #74BDC2; }
 149             }
 150             .toggle {
 151                 left: 5px;
 152             }
 153         }
 154         ~.payments-once {
 155             display: flex;
 156         }
 157     }
 158     &#switch-monthly:checked {
 159         ~.l-switch__wrapper {
 160             label {
 161                 &:nth-of-type(1) { color: #74BDC2; }
 162                 &:nth-of-type(2) { color: #003C3C; }
 163             }
 164             .toggle {
 165                 left: 39px;
 166             }
 167         }
 168         ~.payments-recurring {
 169             display: flex;
 170         }
 171     }
 172 }
 173
 174 .l-checkout__footer__content__item > div ul {
 175   font-weight: normal;
 176   font-size: 15px;
 177   line-height: 150%;
 178   color: #808080;
 179 }
 180
 181
 182 .l-checkout__form__row {
 183     .iframe {
 184         margin-bottom: 16px;
 185     }
 186 }
 187
 188
 189
 190 .l-books__item__content {
 191     width: 100%;
 192
 193     .fragment-text {
 194         max-width: 390px;
 195         margin-top: 20px;
 196         font-weight: 400;
 197         font-size: 18px;
 198         font-size: 1.125rem;
 199         line-height: 150%;
 200         color: #474747;
 201
 202         h1, h2, h3, h4 {
 203             font-size: 1em;
 204         }
 205     }
 206 }
 207
 208
 209
 210 #user-menu {
 211     //display: none;
 212
 213     position:absolute;
 214     top: 60px;
 215     z-index: 1;
 216
 217     position: absolute;
 218     width: 186px;
 219     top: 48px;
 220     right: 45px;
 221
 222     /* yellow 900 */
 223     background: #F7BA00;
 224     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
 225     border-radius: 10px;
 226     overflow: hidden;
 227
 228     opacity:0;
 229     pointer-events: none;
 230     transition: 200ms opacity;
 231
 232     &.is-open {
 233         //display: block;
 234         pointer-events: all;
 235         opacity: 100%;
 236     }
 237
 238     ul {
 239         margin: 0;
 240         padding: 0;
 241         list-style: none;
 242
 243         li {
 244             a {
 245                 color: #474747;
 246                 display: block;
 247                 line-height: 27px;
 248                 padding: 8px 21px;
 249                 &:hover {
 250                     color: #474747;
 251                     background: #EDAA00;
 252                 }
 253
 254                 strong {
 255                     font-weight: 600;
 256                 }
 257             }
 258         }
 259     }
 260 }
 261
 262
 263 form {
 264     label.required:before {
 265         content: "* ";
 266         color: #FF4C54;
 267     }
 268     .helptext {
 269         color: #808080;
 270         font-size: 15px;
 271         line-height: 150%;
 272         margin-bottom: 30px;
 273     }
 274
 275 }
 276
 277 .socialaccount_providers {
 278     list-style: none;
 279     padding: 0;
 280
 281     li {
 282         display: inline-block;
 283         margin-right: 10px;
 284     }
 285 }
 286
 287
 288
 289 .page-simple {
 290     margin-bottom: 70px;
 291     padding-bottom: 30px;
 292     border-radius: 10px;
 293     background: #E1F1F2;
 294     display: flex;
 295     flex-direction: column;
 296     align-items: center;
 297
 298     .white-box {
 299         // for legacy templates
 300         width: 100%;
 301         display: flex;
 302         flex-direction: column;
 303         align-items: center;
 304     }
 305
 306     h1 {
 307         width: 100%;
 308         margin: 0 0 50px 0;
 309         padding: 32px 45px;
 310         border-radius: 10px 10px 0 0;
 311
 312         font-style: italic;
 313         font-weight: 300;
 314         font-size: 48px;
 315         line-height: 55px;
 316         letter-spacing: -0.02em;
 317         background: #083F4D;
 318         color: #92BD39;
 319     }
 320
 321     > p, form, > .normal-text {
 322         min-width: 300px;
 323         margin-left: 50px;
 324         margin-right: 50px;
 325         width: auto;
 326     }
 327
 328     .wlfund {
 329         margin: 0;
 330         width: 90%;
 331         border-collapse: separate;
 332
 333         tr {
 334             td {
 335                 padding: .625rem .3125rem .625rem;
 336                 border-top: .625rem solid rgba(255,255,255,0);
 337                 border-bottom: 1px solid #083F4D;
 338                 text-align: center;
 339             }
 340         }
 341     }
 342 }
 343
 344 .page-simple, .nice-controls {
 345     button, input[type=submit] {
 346         margin: 24px 0;
 347         height: 56px;
 348         background: #083F4D;
 349         border: none;
 350         border-radius: 3px;
 351         font-weight: 600;
 352         font-size: 20px;
 353         line-height: 25px;
 354         display: flex;
 355         align-items: center;
 356         justify-content: center;
 357         text-align: center;
 358         color: #FFFFFF;
 359         width: 340px;
 360
 361         &.active {
 362             outline: 2px solid #083F4D;
 363             outline-offset: 3px;
 364         }
 365
 366         &:disabled {
 367             opacity: .8;
 368         }
 369     }
 370
 371     label {
 372         font-style: normal;
 373         font-weight: 600;
 374         font-size: 15px;
 375         line-height: 160%;
 376         color: #083F4D;
 377         margin-top: 24px;
 378     }
 379
 380     input, textarea, select {
 381         display: block;
 382         width: 100%;
 383         background: #FFFFFF;
 384         color: black;
 385         border: 1px solid #D5ECED;
 386         border-radius: 3px;
 387         transition: all cubic-bezier(0, 0, 0.2, 1) 250ms;
 388         padding: 10px;
 389         outline: 0;
 390     }
 391     input, select {
 392         height: 56px;
 393     }
 394     input[type=checkbox], input[type=radio] {
 395         display: inline;
 396         float: left;
 397         width: 1.2em;
 398         height: 1.2em;
 399         vertical-align: middle;
 400         margin-right: 1em;
 401     }
 402 }
 403
 404
 405 .experiment {
 406     display: flex;
 407     align-items: center;
 408 }
 409
 410
 411
 412 .page-simple {
 413     .form-info {
 414         h2 {
 415             font-size: 1.5em;
 416             margin-top: 0;
 417         }
 418     }
 419 }
 420
 421
 422 .funding-promo-bar {
 423     margin: 18px auto;
 424
 425     .l-checkout__support {
 426         margin: 0;
 427         a {
 428             display: flex;
 429             align-items: start;
 430
 431             .buttonlike {
 432                 margin-right: 10px;
 433                 background: #FFA500;
 434                 //color: #083F4D;
 435                 color: black;
 436                 border-radius: 5px;
 437                 font-size: 1.125rem;
 438                 line-height: 50px;
 439                 letter-spacing: -0.01em;
 440                 padding: 0 20px;
 441                 font-weight: 600;
 442                 transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
 443                 &:hover {
 444                     background: #92BD39;
 445                 }
 446             }
 447             .funding-bar-container {
 448                 flex-grow: 1;
 449             }
 450         }
 451     }
 452 }
 453
 454
 455 .l-change-pop {
 456     margin-bottom: 18px;
 457 }
 458
 459
 460 .page-simple button.button-orange {
 461     background: #FFA500;
 462     color: black;
 463     transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
 464     &:hover {
 465         background: #92BD39;
 466     }
 467 }