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: 115%;
  61             height: 62px;
  62             margin: 0;
  63             text-align: center;
  64             color: #474747;
  65             display: flex;
  66             align-items: center;
  67         }
  68         .sponsor-logos {
  69             height: 140px;
  70             overflow: hidden;
  71             a {
  72                 margin-top: 20px;
  73                 display: block;
  74                 width: 120px;
  75                 height: 120px;
  76             }
  77         }
  78     }
  79 }
  80
  81
  82
  83
  84 .l-checkout__support__bar span.little-progress::after {
  85     white-space: nowrap;
  86     justify-content: left;
  87     width: 200px;
  88     right: -210px;
  89     color: #083F4D;
  90 }
  91 .funding-details {
  92     h2 {
  93         margin-top: 0;
  94         margin-bottom: 1.5rem;
  95     }
  96     .funding-description {
  97         h2 {
  98             font-size: 1.25rem;
  99             line-height: 1.35;
 100         }
 101     }
 102 }
 103
 104
 105
 106
 107 .book-container {
 108     position: relative;
 109
 110     .set-tools {
 111         display: none;
 112         font-size: 12px;
 113         position: absolute;
 114         bottom: 0px;
 115         right: 0;
 116         left: 0;
 117         background: black;
 118         background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
 119         color: white;
 120         padding: 30px 10px 10px;
 121
 122         .sets {
 123             span {
 124                 padding: 3px 18px 3px 3px;
 125                 background: white;
 126                 color: black;
 127                 margin-right: 5px;
 128                 margin-bottom: 5px;
 129                 display: inline-block;
 130                 border-radius: 3px;
 131                 position: relative;
 132
 133                 .close {
 134                     margin-left: 5px;
 135                     position: absolute;
 136                     top: 0;
 137                     right: 0;
 138                     font-family: wl;
 139                     font-size: 10px;
 140                     color: #FF4C54;
 141                     padding: 4px;
 142
 143                     &:hover {
 144                         text-decoration: none;
 145                         color: black;
 146                         cursor: pointer;
 147                     }
 148                 }
 149             }
 150         }
 151         .add-set-tag {
 152             input {
 153                 width: 100%;
 154             }
 155             button {
 156                 font-family: wl;
 157                 position: absolute;
 158                 right: 12px;
 159                 color: #FF4C54;
 160                 bottom: 10px;
 161                 font-size: 12px;
 162                 border: 0;
 163                 background: none;
 164                 padding: 3px;
 165             }
 166         }
 167     }
 168 }
 169
 170
 171 .book-container-activator {
 172     &:hover, &.hover, &.ac-hover {
 173         .book-container {
 174             &.book-liked {
 175                 .icon-liked {
 176                     font-size: 2em;
 177                 }
 178
 179                 .set-tools {
 180                     display: block;
 181                 }
 182             }
 183         }
 184     }
 185 }
 186
 187
 188 .filter-container {
 189     position: absolute;
 190     top: 15px;
 191     bottom: 25px;
 192
 193     display: flex;
 194     align-items: center;
 195
 196     .filter {
 197         background: #FBC40F;
 198         padding: 5px 10px;
 199         margin-left: 5px;
 200         border-radius: 15px;
 201     }
 202 }
 203
 204 .with-filter {
 205     padding: 20px 0 0;
 206     position: relative;
 207
 208     h2 {
 209         margin-bottom: 0;
 210     }
 211 }
 212 .with-filter .row div.filter-container {
 213     background: white;
 214     top: 0;
 215     bottom: 100%;
 216     opacity: 0;
 217     overflow: hidden;
 218
 219     transition: opacity .2s, all .3s;
 220
 221 }
 222 .with-filter.filters-enabled {
 223     .row div.filter-container{
 224         top: 15px;
 225         bottom: 5px;
 226         opacity: 1;
 227     }
 228 }
 229
 230 .l-books__input .filter-container {
 231     top: 0;
 232     bottom: 0;
 233     right: 10px;
 234     padding: 10px 0;
 235
 236 }