From: Damian Zawadzki Date: Thu, 31 Mar 2022 07:23:39 +0000 (+0200) Subject: Audiobook player UI updated X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/fe91ba3abbf192dc851e377c1edb799aa7f1e47e Audiobook player UI updated --- diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index b79abf8e0..c456b6c37 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -30,16 +30,65 @@ // Ebook/Audiobook Btns (function() { - let button = $('.c-media__btn button'); + let button = $('.c-media__btn button:not(.l-button--media--full)'); + let popupLayer = $('.c-media__popup'); let closeButton = $('.c-media__popup__close'); + let playButton = $('.c-player__btn--md'); + let chaptersButton = $('.c-player__chapters span'); + let select = $('.c-select'); + let selectItem = $('.c-select li'); + let volumeButton = $('.icon-volume'); + + playButton.on('click', function() { + if($(this).find('.icon').hasClass('icon-play')) { + $(this).find('.icon-play').removeClass('icon-play').addClass('icon-pause'); + } else if($(this).find('.icon').hasClass('icon-pause')) { + $(this).find('.icon-pause').removeClass('icon-pause').addClass('icon-play'); + } + }); button.on('click', function () { let target = $(this).attr('id'); $('[data-popup=' + target).addClass('is-open'); + $('body').addClass('popup-open'); }); closeButton.on('click', function() { $(this).closest('.c-media__popup').removeClass('is-open'); + $('body').removeClass('popup-open'); + }); + + popupLayer.on('click', function(e) { + let _this = $(this); + if($(e.target).is(popupLayer)) { + _this.removeClass('is-open'); + $('body').removeClass('popup-open'); + } + }); + + chaptersButton.on('click', function() { + $(this).parent().toggleClass('is-active'); + }); + + select.on('click', function() { + $(this).toggleClass('is-active'); + }); + + selectItem.on('click', function() { + selectItem.removeClass('is-active'); + $(this).addClass('is-active'); + }); + + volumeButton.on('click', function() { + if($(this).hasClass('icon-volume')) { + $(this).removeClass('icon-volume').addClass('icon-mute'); + $(this).next().val(0); + $(this).next().css('background-size', '0% 100%'); + } else if($(this).hasClass('icon-mute')) { + $(this).removeClass('icon-mute').addClass('icon-volume'); + $(this).next().val(50); + $(this).next().css('background-size', '50% 100%'); + } }); $(document).keyup(function(e) { @@ -49,6 +98,40 @@ }); })(); +// Range +const rangeInputs = document.querySelectorAll('input[type="range"]') + +function handleInputChange(e) { + let target = e.target + if (e.target.type !== 'range') { + target = document.getElementById('range') + } + const min = target.min + const max = target.max + const val = target.value + + target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%' +} + +rangeInputs.forEach(input => { + input.addEventListener('input', handleInputChange) +}); + +// Quotes slider +(function () { + let slider = $('.l-author__quotes__slider'); + + slider.slick({ + slidesToScroll: 1, + slidesToShow: 1, + infinite: true, + dots: true, + arrows: false, + autoplay: true, + autoplaySpeed: 2500 + }); +})(); + // Text overlay toggler (function () { let overlays = $('.l-article__overlay'); @@ -93,4 +176,29 @@ } if($change.length) { change(); } -})(); \ No newline at end of file +})(); + +//Switch +(function() { + let $switchOnce = $('#switch-once'); + let $switchMonthly = $('#switch-monthly'); + + $switchMonthly.on('click', function() { + $('.l-checkout__payments__box').removeClass('once'); + }); + + $switchOnce.on('click', function() { + $('.l-checkout__payments__box').addClass('once'); + }); +})(); + +//Copy function +(function() { + let $copy = $('.js-copy'); + + $copy.on('click', function() { + let $copyText = $(this).closest('.l-checkout__info__item').find('input'); + $copyText.select(); + document.execCommand('copy'); + }); +})(); diff --git a/src/wolnelektury/static/2022/fonts/wl.svg b/src/wolnelektury/static/2022/fonts/wl.svg index c5fbd3eae..284c0f8cb 100644 --- a/src/wolnelektury/static/2022/fonts/wl.svg +++ b/src/wolnelektury/static/2022/fonts/wl.svg @@ -1,26 +1,47 @@ -Generated by IcoMoon + + + +{ + "fontFamily": "wl", + "fontURL": "https://intui.eu/", + "description": "pomorskie.travel\nFont generated by IcoMoon.", + "majorVersion": 1, + "minorVersion": 0, + "version": "Version 1.0", + "fontId": "wl", + "psName": "wl", + "subFamily": "Regular", + "fullName": "wl" +} + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/wolnelektury/static/2022/fonts/wl.ttf b/src/wolnelektury/static/2022/fonts/wl.ttf index 482f6ddcc..afc780698 100644 Binary files a/src/wolnelektury/static/2022/fonts/wl.ttf and b/src/wolnelektury/static/2022/fonts/wl.ttf differ diff --git a/src/wolnelektury/static/2022/fonts/wl.woff b/src/wolnelektury/static/2022/fonts/wl.woff index 4b6ad0072..ec958c571 100644 Binary files a/src/wolnelektury/static/2022/fonts/wl.woff and b/src/wolnelektury/static/2022/fonts/wl.woff differ diff --git a/src/wolnelektury/static/2022/index.html b/src/wolnelektury/static/2022/index.html index 246825a6e..3eaf87c07 100644 --- a/src/wolnelektury/static/2022/index.html +++ b/src/wolnelektury/static/2022/index.html @@ -1,443 +1,496 @@ - - - - - WolneLektury.pl - - - - + + + + + WolneLektury.pl + - - - - - + + - - -
-
- Strona główna - Literatura - romantyzm -
+
+ + -
-
- +
+
+
+

Adam Mickiewicz (tłum. Janina Kowalska-Nowak)

+

Dziady, część IV

+
+
+ +
+
+
+
+
+
+
-
- +
+
- -
-
-
-
- -
-
- -
-
- +
+ +
+
+
+
+ Henryk Sienkiewicz, Potop, Potop, tom pierwszy, tom 1, rozdział 1. Czyta Jasiek Staszczyk, reż. Jasiek Staszczyk +
+
+
+ + + +
+
    +
  • 2×
    • +
  • 1.75×
    • +
  • 1.5×
    • +
  • 1.25×
    • +
  • 1×
    • +
  • 0.75×
    • +
  • 0.5×
    • +
  • 0.25×
    • +
-
-
- -
-
Czyta Wiktor Korzeniewski, reż. Adam Bień
- +
+
1. Godzina pierwsza – godzina miłości
+
+ Rozdziały +
    +
  • Godzina pierwsza – godzina miłości
    • +
  • Druga godzina – godzina rozpaczy
    • +
  • Trzecia godzina – godzina przestrogi
    • +
+
+ - + +
+
+ + +
+
+
+
+ + + +
+
+

Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.

+
+
+
+
+
+
+

Pobieranie e-booka

+

Wybierz wersję dla siebie:

+
+
+
+
+

.pdf

+

Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.

+
+
+ .pdf
-
-
- - - +
+
+

.epub

+

Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.

-
-

Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.

+
+ .epub
-
-
-
-
-

Pobieranie e-booka

-

Wybierz wersję dla siebie:

+
+
+

.mobi

+

Natywny format dla czytnika Amazon Kindle.

-
-
-
-

.pdf

-

Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.

-
-
- .pdf -
-
-
-
-

.epub

-

Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.

-
-
- .epub -
-
-
-
-

.mobi

-

Natywny format dla czytnika Amazon Kindle.

-
-
- .mobi -
-
-
-
-

synchrobook (epub3)

-

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).

-
- -
-
-
-

inne formaty

- -
-
+
+ .mobi
-
-
-
-
-
-

Pobieranie audiobooka

-

Wybierz wersję dla siebie:

+
+
+

synchrobook (epub3)

+

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).

-
-
-
-

.mp3

-

Uniwersalny format, obsługiwany przez wszystkie urządzenia.

-
-
- .mp3 -
-
-
-
-

OggVorbis

-

Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.

-
-
- .ogg -
-
-
-
-

DAISY

-

Format dla osób z dysfunkcjami czytania.

-
-
- DAISY -
-
-
-
-

synchrobook

-

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.

-
- -
+ +
+
+
+

inne formaty

+
-
-
- -

Opis

- -

- Pericord i Brown dokonali wspólnie wielu wynalazków. Ich umiejętności doskonale się uzupełniają: pierwszy to geniusz twórczy, a drugi — umysł praktyczny, doskonale rozumie projekty współpracownika i wciela je w życie. -

-

- Wspólnicy pracują nad kolejnym pomysłem — maszyną latającą. Prototyp jest już prawie gotów i niebawem można będzie go przetestować. Na ostatnich etapach pracy między wspólnikami pojawia się kwestia sporna: komu należy się patent? Wynalazcy — autorowi projektu czy mechanikowi — temu, który skonstruował maszynę? -

-

- Trup w obłokach czyli historia maszyny latającej w powietrzu (oryg. The Great Brown-Pericord Motor) to opowiadanie z dreszczykiem, pióra Arthura Conana Doyle'a, autora Przygód Sherlocka Holmesa. -

-
-
-
-
-
-

Ta książka jest dostępna dla tysięcy dzieciaków dzięki darowiznom od osób takich jak Ty!

-
- Dorzuć się! - Dorzuć się! -
-
-
-
-
-
-

O autorze

-
-
- Adam Mickiewicz -
- Źródło: Wikipedia -
-
-
-

Adam Mickiewicz

-

- Ur. 24 grudnia 1798 r. w Zaosiu koło Nowogródka
- Zm. 26 listopada 1855 r. w Konstantynopolu (dziś: Stambuł) -

-

- Najważniejsze dzieła:
- Ballady i romanse (1822), Grażyna (1823), Sonety krymskie (1826), Konrad Wallenrod (1828), - Dziady (cz.II i IV 1823, cz.III 1832), Księgi narodu polskiego i pielgrzymstwa polskiego (1833), - Pan Tadeusz (1834); wiersze: Oda do młodości (1820), Do Matki Polki (1830), Śmierć pułkownika (1831), - Reduta Ordona (1831)... -

-
+
-
-
-
-
- - Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten - nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. - -

Adam Mickiewicz – Dziady, część I

+
+
+
+

Pobieranie audiobooka

+

Wybierz wersję dla siebie:

+
+
+
+
+

.mp3

+

Uniwersalny format, obsługiwany przez wszystkie urządzenia.

+
+
+ .mp3 +
+
+
+
+

OggVorbis

+

Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.

+
+
+ .ogg +
-
- - Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten - nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. - -

Adam Mickiewicz – Dziady, część II

+
+
+

DAISY

+

Format dla osób z dysfunkcjami czytania.

+
+
+ DAISY +
-
- - Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten - nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. - -

Adam Mickiewicz – Dziady, część III

+
+
+

synchrobook

+

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.

+
+
+
-
-
-
-

Motywy występujące w tym utworze Wszystkie motywy

-
- -
-
    -
  • - źródłowy plik XML -
    • -
  • - miksuj treść utworu -
    • -
  • - utwór na Platformie Redakcyjnej -
    • + +
    +

    Opis

    +

    + Pericord i Brown dokonali wspólnie wielu wynalazków. Ich umiejętności doskonale się uzupełniają: + pierwszy to geniusz twórczy, a drugi — umysł praktyczny, doskonale rozumie projekty współpracownika + i wciela je w życie. +

    +

    + Wspólnicy pracują nad kolejnym pomysłem — maszyną latającą. Prototyp jest już prawie gotów i niebawem + można będzie go przetestować. Na ostatnich etapach pracy między wspólnikami pojawia się kwestia sporna: + komu należy się patent? Wynalazcy — autorowi projektu czy mechanikowi — temu, który skonstruował maszynę? +

    +

    + Trup w obłokach czyli historia maszyny latającej w powietrzu (oryg. The Great Brown-Pericord Motor) + to opowiadanie z dreszczykiem, pióra Arthura Conana Doyle'a, autora Przygód Sherlocka Holmesa. +

    +

    Spis treści:

    +
      +
    • Dziady. Poema
      • +
    • Przedmowa
      • +
    • Upiór
      • +
    • Dziady, część II
      • +
    • Dziady, część IV
      • +
    • Dziady, część III
      • +
    • Dziady. Widowisko, część I
    -
-
- -
-
-
-

Tytuły powiązane

-
- - - - - -
+ + +
+
+

Ta książka jest dostępna dla tysięcy dzieciaków dzięki darowiznom od osób takich jak Ty!

+ Dorzuć się!
+
+ Dorzuć się! +
-
- -
-
-
- FUNDACJA Nowoczesna Polska -
    -
  • ul. Marszałkowska 84/92 lok. 125
    • -
  • 00-514 Warszawa
    • -
- +
+ +
+
+
+

O autorze

+
+
+ Adam Mickiewicz +
+ Źródło: Wikipedia +
+
+
+

Adam Mickiewicz

+
+

+ Ur. 24 grudnia 1798 r. w Zaosiu koło Nowogródka
+ Zm. 26 listopada 1855 r. w Konstantynopolu (dziś: Stambuł) +

+
+ +
-
-
- Wolne Lektury to projekt prowadzony przez fundację Nowoczesna Polska.
- Hosting: ICM. -
-
- MKiDN -
-
- Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra Kultury i Dziedzictwa Narodowego - pochodzących z Funduszu Promocji Kultury – państwowego funduszu celowego. +
+
+
+
+
+ + Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten + nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. + +

Adam Mickiewicz – Dziady, część I

+
+
+ + Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten + nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. + +

Adam Mickiewicz – Dziady, część II

+
+
+ + Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten + nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. + +

Adam Mickiewicz – Dziady, część III

+
+
+
+
+

Motywy występujące w tym utworze Wszystkie motywy

+
+ +
+ +
+
+ + +
+
+
+

Tytuły powiązane

+
+ + + + + +
+
+
+
+ +
+
+
+ FUNDACJA Nowoczesna Polska +
    +
  • ul. Marszałkowska 84/92 lok. 125
    • +
  • 00-514 Warszawa
    • +
+ +
+
+
+ Wolne Lektury to projekt prowadzony przez fundację Nowoczesna Polska.
+ Hosting: ICM. +
+
+ MKiDN +
+
+ Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra Kultury i Dziedzictwa Narodowego + pochodzących z Funduszu Promocji Kultury – państwowego funduszu celowego. +
+
+
+
- - - + + + diff --git a/src/wolnelektury/static/2022/styles/base/_icons.scss b/src/wolnelektury/static/2022/styles/base/_icons.scss index 4dd55d6d0..c3facfb35 100644 --- a/src/wolnelektury/static/2022/styles/base/_icons.scss +++ b/src/wolnelektury/static/2022/styles/base/_icons.scss @@ -6,28 +6,32 @@ $icomoon-font-family: "wl" !default; $icomoon-font-path: "../fonts" !default; $icon-liked: "\e900"; -$icon-arrow-right: "\e901"; -$icon-arrow-up: "\e902"; $icon-audio: "\e903"; $icon-book: "\e904"; $icon-eye: "\e905"; +$icon-prev: "\e901"; +$icon-next: "\e902"; $icon-play: "\e906"; $icon-pause: "\e907"; -$icon-quote: "\e908"; -$icon-search: "\e909"; -$icon-acc-1: "\e90a"; -$icon-acc-2: "\e90b"; -$icon-acc-3: "\e90c"; -$icon-all: "\e90d"; -$icon-arrow-down: "\e90e"; -$icon-close: "\e90f"; +$icon-volume: "\e908"; +$icon-mute: "\e909"; +$icon-quote: "\e90a"; +$icon-search: "\e90b"; +$icon-acc-1: "\e90c"; +$icon-acc-2: "\e90d"; +$icon-acc-3: "\e90e"; +$icon-all: "\e90f"; +$icon-arrow-right: "\e910"; +$icon-arrow-up: "\e911"; +$icon-arrow-down: "\e912"; +$icon-close: "\e913"; @font-face { font-family: '#{$icomoon-font-family}'; src: - url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?79zz52') format('truetype'), - url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?79zz52') format('woff'), - url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?79zz52##{$icomoon-font-family}') format('svg'); + url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?79zz52') format('truetype'), + url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?79zz52') format('woff'), + url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?79zz52##{$icomoon-font-family}') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -53,16 +57,6 @@ $icon-close: "\e90f"; content: $icon-liked; } } -.icon-arrow-right { - &:before { - content: $icon-arrow-right; - } -} -.icon-arrow-up { - &:before { - content: $icon-arrow-up; - } -} .icon-audio { &:before { content: $icon-audio; @@ -78,6 +72,16 @@ $icon-close: "\e90f"; content: $icon-eye; } } +.icon-prev { + &:before { + content: $icon-prev; + } +} +.icon-next { + &:before { + content: $icon-next; + } +} .icon-play { &:before { content: $icon-play; @@ -88,6 +92,16 @@ $icon-close: "\e90f"; content: $icon-pause; } } +.icon-volume { + &:before { + content: $icon-volume; + } +} +.icon-mute { + &:before { + content: $icon-mute; + } +} .icon-quote { &:before { content: $icon-quote; @@ -118,6 +132,16 @@ $icon-close: "\e90f"; content: $icon-all; } } +.icon-arrow-right { + &:before { + content: $icon-arrow-right; + } +} +.icon-arrow-up { + &:before { + content: $icon-arrow-up; + } +} .icon-arrow-down { &:before { content: $icon-arrow-down; diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss index 520654ddb..1cb758414 100644 --- a/src/wolnelektury/static/2022/styles/components/_media.scss +++ b/src/wolnelektury/static/2022/styles/components/_media.scss @@ -42,16 +42,11 @@ background: #F2F2F2; padding: 15px 24px; border-radius: 0 0 5px 5px; - max-width: 830px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; - .project-logo { - padding-left: 35px; - } - .icons {} .content { padding-left: 35px; @@ -80,12 +75,19 @@ z-index: 10; top: 0; left: 0; - width: 100%; height: 100%; align-items: center; justify-content: center; background-color: rgba($color-black, 0.35); display: none; + overflow-y: scroll; + padding: 150px 40px 40px 40px; + width: 100%; + + @include rwd(screen-md) { + padding: 40px 40px 40px 40px; + align-items: flex-start; + } &.is-open { display: flex; diff --git a/src/wolnelektury/static/2022/styles/components/_module.scss b/src/wolnelektury/static/2022/styles/components/_module.scss index f298f51d9..7d298762b 100644 --- a/src/wolnelektury/static/2022/styles/components/_module.scss +++ b/src/wolnelektury/static/2022/styles/components/_module.scss @@ -8,3 +8,5 @@ @import "media"; @import "player"; @import "support"; +@import "checkbox"; +@import "select"; diff --git a/src/wolnelektury/static/2022/styles/components/_player.scss b/src/wolnelektury/static/2022/styles/components/_player.scss index 060429826..7ef0760dc 100644 --- a/src/wolnelektury/static/2022/styles/components/_player.scss +++ b/src/wolnelektury/static/2022/styles/components/_player.scss @@ -3,9 +3,19 @@ width: 100%; align-items: center; position: relative; - padding: 25px 34px; background-color: #D5ECED; - border-radius: 5px; + 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 { @@ -41,6 +51,51 @@ } } +.c-player__btns { + display: flex; + align-items: center; + + button { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + 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); + } + + &.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; + } + } +} + .c-player__timeline { max-width: 590px; width: calc(100% - 60px); @@ -48,23 +103,6 @@ margin-right: 0; position: relative; - &: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; - display: flex; - align-items: center; - justify-content: center; - margin-left: -70px; - } - & > span { height: 10px; width: 100%; @@ -79,13 +117,25 @@ height: 100%; position: absolute; border-radius: 5px; - background-color: #083F4D; + background-color: #006066; top: 0; left: 0; } } } .c-player__info { + 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__chapters { top: -27px; right: 0; position: absolute; @@ -95,6 +145,105 @@ line-height: 140%; letter-spacing: 0.05em; color: #083F4D; + z-index: 1; + + &.is-active { + span { + &:after { + transform: rotate(180deg); + } + } + ul { + opacity: 1; + transform: none; + pointer-events: all; + } + } + + span { + display: flex; + align-items: center; + cursor: pointer; + + &: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; + } + } +} + +.c-player__volume { + display: flex; + align-items: center; + justify-content: center; + margin-left: 40px; + + .icon { + font-size: 21px; + color: #007880; + margin-right: 8px; + cursor: pointer; + } + + input[type=range] { + 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; + } +} + +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 { diff --git a/src/wolnelektury/static/2022/styles/components/_select.scss b/src/wolnelektury/static/2022/styles/components/_select.scss new file mode 100644 index 000000000..1ed5dd760 --- /dev/null +++ b/src/wolnelektury/static/2022/styles/components/_select.scss @@ -0,0 +1,62 @@ +.c-select { + margin: 0 5px 0 5px; + margin-right: 15px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + + &.is-active { + ul { + li { + display: flex; + &:first-child { + border-radius: 4px 4px 0 0 !important; + } + + &:last-child { + border-radius: 0 0 4px 4px !important; + } + &:hover { + background: darken(#083F4D, 5%); + } + &.is-active { + border-radius: 0; + color: #007880; + background: #74bdc2; + } + } + } + } + + ul { + margin: 0; + li { + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 15px; + line-height: 120%; + display: none; + cursor: pointer; + width: 43px; + height: 22px; + transition: background $ease-out 450ms; + text-align: center; + color: #ffffff; + background: #083F4D; + &.is-active { + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border-radius: 4px; + color: #007880; + &:hover { + background: #74bdc2; + } + } + } + } +}