X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/1249091e84840ca27aa6047db36c8e899328f15c..0b270a76ad73162f894285c360a0ee87fa84e536:/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..52729f9f6 100644 --- a/src/wolnelektury/static/2022/styles/components/_player.scss +++ b/src/wolnelektury/static/2022/styles/components/_player.scss @@ -1,10 +1,15 @@ .c-player { - display: flex; width: 100%; align-items: center; position: relative; background-color: #D5ECED; - padding: 25px 34px 25px 14px; + padding: 105px 70px 25px 70px; + + @include rwd($break-flow) { + display: flex; + flex-direction: row; + padding: 25px 34px 25px 14px; + } } .c-player__head { @@ -50,11 +55,43 @@ } } } +.jp-state-playing { + .c-player__btn { + .icon.icon-play { + left: 1px; + } + } +} .c-player__btns { display: flex; align-items: center; + .play-prev { + position: absolute; + left: calc(30% - 20px); + top: 15px; + @include rwd($break-flow) { + position: static; + } + } + .jp-play { + position: absolute; + left: calc(50% - 25px); + top: 10px; + @include rwd($break-flow) { + position: static; + } + } + .play-next { + position: absolute; + left: calc(70% - 20px); + top: 15px; + @include rwd($break-flow) { + position: static; + } + } + button { padding: 0; display: flex; @@ -77,6 +114,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,13 +139,26 @@ } } } +.jp-state-playing { + .c-player__btns { + button { + &.c-player__btn--md { + .icon-play { + left: 0; + } + } + } + } +} .c-player__timeline { - max-width: 590px; - width: calc(100% - 60px); - margin-left: auto; - margin-right: 0; - position: relative; + @include rwd($break-flow) { + position: relative; + width: calc(100% - 60px); + margin-left: auto; + max-width: 590px; + margin-right: 0; + } & > span { height: 10px; @@ -131,6 +188,8 @@ } + + .c-player__title { top: -27px; left: 0; @@ -145,8 +204,6 @@ .c-player__info { - top: -27px; - left: 0; position: absolute; font-style: normal; font-weight: normal; @@ -154,11 +211,20 @@ line-height: 140%; letter-spacing: 0.05em; color: #083F4D; + + top: 70px; + left: 16px; + + @include rwd($break-flow) { + top: -27px; + left: 0; + } } .c-player__chapters { - top: -27px; - right: 0; + top: 35px - 8.4px; + right: calc(10% - 50px); + width: 100px; position: absolute; font-style: normal; font-weight: normal; @@ -168,8 +234,13 @@ color: #083F4D; z-index: 1; + @include rwd($break-flow) { + top: -27px; + right: 0; + } + &.is-active { - span { + > span { &:after { transform: rotate(180deg); } @@ -181,10 +252,11 @@ } } - span { + > span { display: flex; align-items: center; cursor: pointer; + justify-content: center; &:after { margin-left: 5px; @@ -215,16 +287,28 @@ list-style-type: decimal; margin: 5px 0; color: white; + cursor: pointer; + + span { + display: none; + } + span.title { + display: inline; + } } } } .c-player__volume { - display: flex; + display: none; align-items: center; justify-content: center; margin-left: 40px; + @include rwd($break-flow) { + display: flex; + } + .icon { font-size: 21px; color: #007880; @@ -232,49 +316,32 @@ 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; + + @include rwd($break-flow) { + position: relative; + display: block; + width: 100%; + } > span { position: absolute; - padding-top: 10px; font-style: normal; font-weight: normal; font-size: 12px; @@ -282,7 +349,40 @@ input[type=range]::-webkit-slider-thumb { letter-spacing: 0.05em; color: #083F4D; - &:nth-child(1) { left: 0; } - &:nth-child(2) { right: 0; } + bottom: 22px; + + @include rwd($break-flow) { + padding-top: 10px; + bottom: auto; + } + + &.jp-current-time { + left: 16px; + + @include rwd($break-flow) { + left: 0; + } + } + &.time-left { + right: 16px; + @include rwd($break-flow) { + right: 0; + } + } + &.total-time-left { + left: 0; + right: 0; + bottom: 5px; + text-align: center; + @include rwd($break-flow) { + bottom: auto; + } + } } } + + +.project-icon { + max-width: 100px; + max-height: 50px; +}