X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/349f8b311ecdf30a181b94a8c7747867bacca356..6407cf24cd6cf3f9ea6fdf4a8924dad109a590e6:/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 060429826..52729f9f6 100644 --- a/src/wolnelektury/static/2022/styles/components/_player.scss +++ b/src/wolnelektury/static/2022/styles/components/_player.scss @@ -1,11 +1,26 @@ .c-player { - display: flex; width: 100%; align-items: center; position: relative; - padding: 25px 34px; background-color: #D5ECED; - border-radius: 5px; + padding: 105px 70px 25px 70px; + + @include rwd($break-flow) { + display: flex; + flex-direction: row; + padding: 25px 34px 25px 14px; + } +} + +.c-player__head { + background: #006066; + padding: 8px 14px; + border-radius: 5px 5px 0px 0px; + font-weight: 600; + font-size: 12px; + line-height: 140%; + letter-spacing: 0.02em; + color: #FFFFFF; } .c-player__btn { @@ -40,54 +55,144 @@ } } } +.jp-state-playing { + .c-player__btn { + .icon.icon-play { + left: 1px; + } + } +} -.c-player__timeline { - max-width: 590px; - width: calc(100% - 60px); - margin-left: auto; - margin-right: 0; - position: relative; +.c-player__btns { + display: flex; + align-items: center; - &:before { - content: "1×"; - font-weight: bold; - font-size: 15px; - line-height: 120%; - text-align: center; - color: #007880; - position: absolute; - top: 0; - bottom: 0; - margin: auto; + .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; align-items: center; justify-content: center; - margin-left: -70px; + background-color: transparent; + width: 40px; height: 40px; + border-radius: 50%; + cursor: pointer; + margin: 0 5px; + outline: 0; + border: 1px solid transparent; + transition: border-color $ease-out 450ms; + + &:first-child { + margin-left: 0; + } + + &:hover { + border-color: rgba(#007880, 0.5); + } + + &:disabled { + opacity: .33; + &:hover { + border-color: transparent; + } + } + + &.c-player__btn--md { + width: 50px; height: 50px; + .icon-play { + font-size: 20px; + position: relative; + left: 2px; + } + .icon-pause { + font-size: 20px; + } + } + + .icon { + color: #007880; + font-size: 16px; + } + } +} +.jp-state-playing { + .c-player__btns { + button { + &.c-player__btn--md { + .icon-play { + left: 0; + } + } + } + } +} + +.c-player__timeline { + @include rwd($break-flow) { + position: relative; + width: calc(100% - 60px); + margin-left: auto; + max-width: 590px; + margin-right: 0; } & > span { 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: #083F4D; + background-color: #FFFFFF; + top: 0; left: 0; + } + + span.jp-play-bar { + height: 100%; + position: absolute; + border-radius: 5px; + background-color: #006066; top: 0; left: 0; } } } -.c-player__info { + + + +.c-player__title { top: -27px; - right: 0; + left: 0; position: absolute; font-style: normal; font-weight: normal; @@ -97,14 +202,146 @@ color: #083F4D; } + +.c-player__info { + position: absolute; + font-style: normal; + font-weight: normal; + font-size: 12px; + 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: 35px - 8.4px; + right: calc(10% - 50px); + width: 100px; + position: absolute; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 140%; + letter-spacing: 0.05em; + color: #083F4D; + z-index: 1; + + @include rwd($break-flow) { + top: -27px; + right: 0; + } + + &.is-active { + > span { + &:after { + transform: rotate(180deg); + } + } + ul { + opacity: 1; + transform: none; + pointer-events: all; + } + } + + > span { + display: flex; + align-items: center; + cursor: pointer; + justify-content: center; + + &:after { + margin-left: 5px; + content: $icon-arrow-down; + font-family: '#{$icomoon-font-family}' !important; + transition: transform $ease-out 450ms; + } + } + + ul { + width: 283px; + position: absolute; + background-color: #083F4D; + transform: translateY(-10px); + opacity: 0; + box-shadow: 0 0 20px rgba(1, 129, 137, 0.2); + transition: all $ease-out 450ms; + list-style-position: inside; + border-radius: 10px; + right: 0; + margin: 10px 0 0; + padding: 15px; + pointer-events: none; + li { + font-size: 12px; + line-height: 140%; + letter-spacing: 0.05em; + list-style-type: decimal; + margin: 5px 0; + color: white; + cursor: pointer; + + span { + display: none; + } + span.title { + display: inline; + } + } + } +} + +.c-player__volume { + display: none; + align-items: center; + justify-content: center; + margin-left: 40px; + + @include rwd($break-flow) { + display: flex; + } + + .icon { + font-size: 21px; + color: #007880; + margin-right: 8px; + cursor: pointer; + } + + .jp-volume-bar { + width: 100px; + border-radius: 5px; + height: 10px; + display: block; + background: white; + } + .jp-volume-bar-value { + display: block; + height: 10px; + border-radius: 5px; + background: #006066; + } +} + + .c-player__length { - width: 100%; - display: block; - position: relative; - span { + @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; @@ -112,7 +349,40 @@ 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; +}