X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/3670d9ac30e5610b64449450a1f0ef985eb9347d..d00a4bcb2ee6a3ec0c65600b854a86524dfa4d4b:/src/wolnelektury/static/2022/styles/layout/_annoy.scss diff --git a/src/wolnelektury/static/2022/styles/layout/_annoy.scss b/src/wolnelektury/static/2022/styles/layout/_annoy.scss index b02cbafee..18c8df847 100644 --- a/src/wolnelektury/static/2022/styles/layout/_annoy.scss +++ b/src/wolnelektury/static/2022/styles/layout/_annoy.scss @@ -271,7 +271,6 @@ } a { line-height: 1.35; - flex-grow: 1; color: #c32721; white-space: nowrap; border: solid #c32721; @@ -284,3 +283,164 @@ } } } + + +.annoy-banner_book-page-center { + background: white; + margin-top: 50px; + padding: 20px; + border: 1px solid #018189; + border-radius: 15px; + color:#018189; + + .annoy-banner-inner { + display: flex; + gap: 15px; + align-items: center; + + img { + width: 150px; + } + p { + margin: 0; + } + } +} + + + + + +.annoy-banner_seasonal { + background-color: #ffd430; + color: #083F4D; + border-radius: 10px; + padding: 15px 20px; + margin-top: 20px; + cursor: pointer; + + .annoy-banner-inner { + display: flex; + flex-direction: row; + gap: 20px; + align-items: flex-start; + justify-content: space-between; + + p { + margin: 0; + } + a { + line-height: 1.35; + color: #c32721; + white-space: nowrap; + border: solid #c32721; + border-width: 0 0 1px; + + &:hover { + text-decoration: none; + border-bottom-width: 2px; + } + } + a.action { + color: #fff; + background: #c92834; + padding: 9px 20px; + font-weight: 600; + border-radius: 15px; + border-width: 0; + &:hover { + border-bottom-width: 0; + } + } + + } + .state-box { + margin-top: 15px; + } + .bar-status-box { + display: flex; + justify-content: space-between; + } +} + + +.t-relative { + position: relative; +} +.annoy-banner_seasonal-overlay { + display: none; + + background-color: #ffd430; + color: #083F4D; + border-radius: 0 0 10px 10px; + position: absolute; + z-index: 1000; + left: 16px; + right: 16px; + padding: 15px 20px; + margin-top: -10px; + + &:before { + background: rgba(0,0,0,0); + height: 10px; + display: block; + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + border-radius: 0 0 10px 10px; + box-shadow: 0px 10px 10px black; + z-index: 999; + } + + .annoy-banner-inner { + display: flex; + flex-direction: column; + gap: 20px; + align-items: flex-start; + justify-content: space-between; + + @include rwd($break-flow) { + flex-direction: row; + } + + .annoy-banner-off { + background: none; + border-color: transparent; + + position: absolute; + top: 16px; + right: 16px; + padding: 12px 4px; + } + + video { + height: 240px; + width: 100%; + @include rwd($break-flow) { + height: 360px; + width: auto; + } + } + + .text { + margin-right: 60px; + h1 { + font-size: 1.5em; + margin: 0 0 1em; + font-weight: bold; + } + + p { + margin: 1em 0; + } + .l-button { + display: inline-block; + margin-top: 1em; + padding: 12px 20px; + } + } + + } +}