X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/fe91ba3abbf192dc851e377c1edb799aa7f1e47e..9c2555ad140dca1c09cde628bd22aac811e05b7e:/src/wolnelektury/static/2022/styles/components/_player.scss diff --git a/src/wolnelektury/static/2022/styles/components/_player.scss b/src/wolnelektury/static/2022/styles/components/_player.scss index 7ef0760dc..2589d9c0c 100644 --- a/src/wolnelektury/static/2022/styles/components/_player.scss +++ b/src/wolnelektury/static/2022/styles/components/_player.scss @@ -50,6 +50,13 @@ } } } +.jp-state-playing { + .c-player__btn { + .icon.icon-play { + left: 1px; + } + } +} .c-player__btns { display: flex; @@ -77,6 +84,13 @@ border-color: rgba(#007880, 0.5); } + &:disabled { + opacity: .33; + &:hover { + border-color: transparent; + } + } + &.c-player__btn--md { width: 50px; height: 50px; .icon-play { @@ -95,6 +109,17 @@ } } } +.jp-state-playing { + .c-player__btns { + button { + &.c-player__btn--md { + .icon-play { + left: 0; + } + } + } + } +} .c-player__timeline { max-width: 590px; @@ -107,13 +132,20 @@ height: 10px; width: 100%; display: block; - background: #FFFFFF; + background: #F2F2F2; border-radius: 5px; position: relative; overflow: hidden; - span { - width: 40%; + span.jp-seek-bar { + height: 100%; + position: absolute; + border-radius: 5px; + background-color: #FFFFFF; + top: 0; left: 0; + } + + span.jp-play-bar { height: 100%; position: absolute; border-radius: 5px; @@ -123,6 +155,22 @@ } } + + + +.c-player__title { + top: -27px; + left: 0; + position: absolute; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 140%; + letter-spacing: 0.05em; + color: #083F4D; +} + + .c-player__info { top: -27px; left: 0; @@ -148,7 +196,7 @@ z-index: 1; &.is-active { - span { + > span { &:after { transform: rotate(180deg); } @@ -160,7 +208,7 @@ } } - span { + > span { display: flex; align-items: center; cursor: pointer; @@ -194,6 +242,14 @@ list-style-type: decimal; margin: 5px 0; color: white; + cursor: pointer; + + span { + display: none; + } + span.title { + display: inline; + } } } } @@ -211,47 +267,28 @@ cursor: pointer; } - input[type=range] { + .jp-volume-bar { width: 100px; - -webkit-appearance: none; - background: 0 0; - border: 0; border-radius: 5px; height: 10px; - color: #006066; display: block; - margin: 0; - padding: 0; - transition: box-shadow .3s ease; - outline: 0; - background: white; - background-image: linear-gradient(#006066, #006066); - background-size: 60% 100%; - background-repeat: no-repeat; + } + .jp-volume-bar-value { + display: block; + height: 10px; + border-radius: 5px; + background: #006066; } } -input[type=range]::-webkit-slider-thumb { - height: 10px; - width: 10px; - background: #006066; - border-radius: 50%; - cursor: pointer; -} - -input[type=range], -input[type=range]::-webkit-slider-runnable-track, -input[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; -} .c-player__length { width: 100%; display: block; position: relative; - span { + > span { position: absolute; padding-top: 10px; font-style: normal; @@ -263,5 +300,16 @@ input[type=range]::-webkit-slider-thumb { &:nth-child(1) { left: 0; } &:nth-child(2) { right: 0; } + &:nth-child(3) { + left: 0; + right: 0; + text-align: center; + } } } + + +.project-icon { + max-width: 100px; + max-height: 50px; +}