X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/150c16b9cecccacdbf17360d334fc618172f4179..9b999d1b69b2f5da8ec2b456240739344cf9e9a9:/src/wolnelektury/static/2022/styles/local.scss?ds=sidebyside diff --git a/src/wolnelektury/static/2022/styles/local.scss b/src/wolnelektury/static/2022/styles/local.scss index d9aafcf2d..982350906 100644 --- a/src/wolnelektury/static/2022/styles/local.scss +++ b/src/wolnelektury/static/2022/styles/local.scss @@ -1,24 +1,7 @@ -$teal: #007880; - - -.l-change-pop { - transition: 350ms all; - - p { - a { - color: $teal; - } - } -} - -.is-open .l-change-pop { - height: 0; - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; -} +$teal: #007880; +$green: #92BD39; +$red: #FF4C54; .ui-autocomplete a { @@ -41,28 +24,38 @@ $teal: #007880; .sponsors-page { display: flex; - justify-content: space-between; margin-top: 48px; + flex-wrap: wrap; + justify-content: space-around; + gap: 60px; - @include rwd(tablet) { - flex-wrap: wrap; + @include rwd($break-wide) { + gap: 0; + justify-content: space-between; + flex-wrap: nowrap; } .sponsors-column { - margin: 1em 40px; + margin: 1em 0; display: flex; flex-direction: column; align-items: center; font-size: 0; + .sponsors-column-name { font-weight: $regular; @include font-size(18px); - line-height: 150%; + line-height: 115%; + height: 62px; + margin: 0; text-align: center; color: #474747; + display: flex; + align-items: center; + max-width: 8em; } .sponsor-logos { - height: 120px; + height: 140px; overflow: hidden; a { margin-top: 20px; @@ -84,10 +77,187 @@ $teal: #007880; right: -210px; color: #083F4D; } -.funding-description { +.funding-details { h2 { margin-top: 0; - font-size: 1.125rem; - line-height: 1.35; + margin-bottom: 1.5rem; + } + .funding-description { + h2 { + font-size: 1.25rem; + line-height: 1.35; + } + } +} + + + + +.book-container { + position: relative; + + .set-tools { + display: none; + font-size: 12px; + position: absolute; + bottom: 0px; + right: 0; + left: 0; + background: black; + background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); + color: white; + padding: 30px 10px 10px; + + .sets { + span { + padding: 3px 18px 3px 3px; + background: white; + color: black; + margin-right: 5px; + margin-bottom: 5px; + display: inline-block; + border-radius: 3px; + position: relative; + + .close { + margin-left: 5px; + position: absolute; + top: 0; + right: 0; + font-family: wl; + font-size: 10px; + color: #FF4C54; + padding: 4px; + + &:hover { + text-decoration: none; + color: black; + cursor: pointer; + } + } + } + } + .add-set-tag { + input { + width: 100%; + } + button { + font-family: wl; + position: absolute; + right: 12px; + color: #FF4C54; + bottom: 10px; + font-size: 12px; + border: 0; + background: none; + padding: 3px; + } + } } } + + +.book-container-activator { + &:hover, &.hover, &.ac-hover { + .book-container { + &.book-liked { + .icon-liked { + font-size: 2em; + } + + .set-tools { + display: block; + } + } + } + } +} + + +.filter-container { + position: absolute; + top: 15px; + bottom: 25px; + + display: flex; + align-items: center; + + .filter { + background: #FBC40F; + padding: 5px 10px; + margin-left: 5px; + border-radius: 15px; + white-space: nowrap; + + a { + color: currentColor; + } + a:hover { + color: inherit; + } + + &.filter-category-epoch { + background: $teal; + color: white; + } + &.filter-category-kind { + background: $red; + } + &.filter-category-genre { + background: $green; + } + &.filter-category-set { + background: white; + color: black; + border: 1px solid #888; + + &:after { + content: ''; + font-family: 'wl' !important; + font-size: .9em; + margin-left: 3px; + color: $red; + } + } + } +} + +.with-filter { + padding: 20px 0 0; + position: relative; + + h2 { + margin-bottom: 0; + } +} +.with-filter .row div.filter-container { + background: white; + width: 100%; + top: 0; + bottom: 100%; + opacity: 0; + overflow: hidden; + + transition: opacity .2s, all .3s; + +} +.with-filter.filters-enabled { + .row div.filter-container{ + top: 15px; + bottom: 5px; + opacity: 1; + } +} +.with-filter .row div.filter-container:hover { + top: 15px; + bottom: 5px; + opacity: 1; +} + +.l-books__input .filter-container { + top: 0; + bottom: 0; + right: 10px; + padding: 10px 0; + +}