X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/1249091e84840ca27aa6047db36c8e899328f15c..ba83b8311a93602de7f733c9a9e183e3ebbb006c:/src/wolnelektury/static/2022/styles/components/_player.scss?ds=inline diff --git a/src/wolnelektury/static/2022/styles/components/_player.scss b/src/wolnelektury/static/2022/styles/components/_player.scss index 8b4ee513f..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; @@ -131,6 +156,8 @@ } + + .c-player__title { top: -27px; left: 0; @@ -169,7 +196,7 @@ z-index: 1; &.is-active { - span { + > span { &:after { transform: rotate(180deg); } @@ -181,7 +208,7 @@ } } - span { + > span { display: flex; align-items: center; cursor: pointer; @@ -215,6 +242,14 @@ list-style-type: decimal; margin: 5px 0; color: white; + cursor: pointer; + + span { + display: none; + } + span.title { + display: inline; + } } } } @@ -232,40 +267,21 @@ 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%; @@ -284,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; +}