src/wolnelektury/static/2022/styles/local.scss

   1 $teal: #007880;
   2
   3
   4 .l-change-pop {
   5     transition: 350ms all;
   6
   7     p {
   8         a {
   9             color: $teal;
  10         }
  11     }
  12 }
  13
  14
  15 .is-open .l-change-pop {
  16     height: 0;
  17     margin-top: 0;
  18     margin-bottom: 0;
  19     padding-top: 0;
  20     padding-bottom: 0;
  21 }
  22
  23
  24 .ui-autocomplete a {
  25     display: block;
  26     transition: none;
  27 }
  28
  29
  30 .jp-state-playing .icon-play {
  31   &:before {
  32     content: $icon-pause;
  33   }
  34 }
  35 .jp-state-muted .icon-volume {
  36   &:before {
  37     content: $icon-mute;
  38   }
  39 }
  40
  41
  42 .sponsors-page {
  43     display: flex;
  44     justify-content: space-between;
  45     margin-top: 48px;
  46
  47     @include rwd(tablet) {
  48         flex-wrap: wrap;
  49     }
  50
  51     .sponsors-column {
  52         margin: 1em 40px;
  53         display: flex;
  54         flex-direction: column;
  55         align-items: center;
  56         font-size: 0;
  57         .sponsors-column-name {
  58             font-weight: $regular;
  59             @include font-size(18px);
  60             line-height: 150%;
  61             text-align: center;
  62             color: #474747;
  63         }
  64         .sponsor-logos {
  65             height: 120px;
  66             overflow: hidden;
  67             a {
  68                 margin-top: 20px;
  69                 display: block;
  70                 width: 120px;
  71                 height: 120px;
  72             }
  73         }
  74     }
  75 }
  76
  77
  78
  79
  80 .l-checkout__support__bar span.little-progress::after {
  81     white-space: nowrap;
  82     justify-content: left;
  83     width: 200px;
  84     right: -210px;
  85     color: #083F4D;
  86 }
  87 .funding-details {
  88     h2 {
  89         margin-top: 0;
  90         margin-bottom: 1.5rem;
  91     }
  92     .funding-description {
  93         h2 {
  94             font-size: 1.25rem;
  95             line-height: 1.35;
  96         }
  97     }
  98 }
  99
 100
 101
 102
 103 .book-container {
 104     position: relative;
 105
 106     .set-tools {
 107         display: none;
 108         font-size: 12px;
 109         position: absolute;
 110         bottom: 0px;
 111         right: 0;
 112         left: 0;
 113         background: black;
 114         background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
 115         color: white;
 116         padding: 30px 10px 10px;
 117
 118         .sets {
 119             span {
 120                 padding: 3px 18px 3px 3px;
 121                 background: white;
 122                 color: black;
 123                 margin-right: 5px;
 124                 margin-bottom: 5px;
 125                 display: inline-block;
 126                 border-radius: 3px;
 127                 position: relative;
 128
 129                 .close {
 130                     margin-left: 5px;
 131                     position: absolute;
 132                     top: 0;
 133                     right: 0;
 134                     font-family: wl;
 135                     font-size: 10px;
 136                     color: #FF4C54;
 137                     padding: 4px;
 138
 139                     &:hover {
 140                         text-decoration: none;
 141                         color: black;
 142                         cursor: pointer;
 143                     }
 144                 }
 145             }
 146         }
 147         .add-set-tag {
 148             input {
 149                 width: 100%;
 150             }
 151             button {
 152                 font-family: wl;
 153                 position: absolute;
 154                 right: 12px;
 155                 color: #FF4C54;
 156                 bottom: 10px;
 157                 font-size: 12px;
 158                 border: 0;
 159                 background: none;
 160                 padding: 3px;
 161             }
 162         }
 163     }
 164 }
 165
 166
 167 .book-container-activator {
 168     &:hover, &.hover, &.ac-hover {
 169         .book-container {
 170             &.book-liked {
 171                 .icon-liked {
 172                     font-size: 2em;
 173                 }
 174
 175                 .set-tools {
 176                     display: block;
 177                 }
 178             }
 179         }
 180     }
 181 }
 182
 183
 184 .filter-container {
 185     position: absolute;
 186     top: 15px;
 187     bottom: 25px;
 188
 189     display: flex;
 190     align-items: center;
 191
 192     .filter {
 193         background: #FBC40F;
 194         padding: 5px 10px;
 195         margin-left: 5px;
 196         border-radius: 15px;
 197     }
 198 }
 199
 200 .with-filter {
 201     padding: 20px 0 0;
 202     position: relative;
 203
 204     h2 {
 205         margin-bottom: 0;
 206     }
 207 }
 208 .with-filter .row div.filter-container {
 209     background: white;
 210     top: 0;
 211     bottom: 100%;
 212     opacity: 0;
 213     overflow: hidden;
 214
 215     transition: opacity .2s, all .3s;
 216
 217 }
 218 .with-filter.filters-enabled {
 219     .row div.filter-container{
 220         top: 15px;
 221         bottom: 5px;
 222         opacity: 1;
 223     }
 224 }
 225
 226 .l-books__input .filter-container {
 227     top: 0;
 228     bottom: 0;
 229     right: 10px;
 230     padding: 10px 0;
 231
 232 }