X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/7784eab91b17a8c74cd79eb15303d09842b2d91c..2aff714cb52d85d39824728d70b3272bb4fd5064:/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 aac3990f0..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,19 +24,24 @@ $teal: #007880; .sponsors-page { display: flex; - justify-content: space-between; margin-top: 48px; - - @include rwd(tablet) { - flex-wrap: wrap; + flex-wrap: wrap; + justify-content: space-around; + gap: 60px; + + @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); @@ -64,6 +52,7 @@ $teal: #007880; color: #474747; display: flex; align-items: center; + max-width: 8em; } .sponsor-logos { height: 140px; @@ -198,6 +187,38 @@ $teal: #007880; 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; + } + } } } @@ -211,6 +232,7 @@ $teal: #007880; } .with-filter .row div.filter-container { background: white; + width: 100%; top: 0; bottom: 100%; opacity: 0; @@ -226,6 +248,11 @@ $teal: #007880; opacity: 1; } } +.with-filter .row div.filter-container:hover { + top: 15px; + bottom: 5px; + opacity: 1; +} .l-books__input .filter-container { top: 0;