diff --git a/app/css/player.css b/app/css/player.css index 7016539..efb5ddc 100644 --- a/app/css/player.css +++ b/app/css/player.css @@ -12,8 +12,6 @@ --miniplayer-display: flex; } - - /* NAVBAR */ .page-wrapper.with-sidebar[data-sidebar-hidden]>.sidebar { left: calc(-1 *var(--sidebar-width)); @@ -50,10 +48,6 @@ z-index: 10 } -#player:target>a { - display: none; -} - #player>a { position: absolute; z-index: 10 @@ -63,25 +57,6 @@ display: flex !important } -video[src=""] { - display: none; -} - -video::cue { - background: none !important; - font-family: var(--sub-font); - color: #fff !important; - text-shadow: 2px 2px 0 #000, - 2px -2px 0 #000, - -2px 2px 0 #000, - -2px -2px 0 #000, - 2px 0px 0 #000, - 0px 2px 0 #000, - -2px 0px 0 #000, - 0px -2px 0 #000, - 2px 2px 2px #000; -} - .controls { background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent); transition: .5s opacity ease; @@ -158,36 +133,47 @@ video::cue { .volume>input[type=range] { width: 0; transition: all .1s ease; - margin-right: 0 } .controls input[type=range] { -webkit-appearance: none; background: transparent; - margin: 0 + margin: 0; + cursor: pointer; } .controls input[type=range]:focus { outline: none; } -input#volume[type=range]::-webkit-slider-runnable-track { - width: 50%; +#volume::-webkit-slider-runnable-track { height: 3px; - cursor: pointer; background: linear-gradient(90deg, #e5204c var(--volume-level), rgba(255, 255, 255, .2) var(--volume-level)) } -input#progress[type=range]::-webkit-slider-runnable-track { - width: 50%; +#progress::-webkit-slider-runnable-track { height: 3px; - cursor: pointer; background: linear-gradient(90deg, #e5204c var(--progress), rgba(255, 255, 255, .4) var(--progress), rgba(255, 255, 255, .4) var(--buffer), rgba(255, 255, 255, .2) var(--buffer)) } +.controls input[type=range]:hover::-webkit-slider-thumb { + height: 12px; + width: 12px; + margin-top: -4px +} -input#progress[type=range] ~ img, -input#progress[type=range]::before { +.controls input[type=range]::-webkit-slider-thumb { + height: 0; + width: 0; + border-radius: 50%; + background: var(--accent-color); + -webkit-appearance: none; + margin-top: 2px; + transition: all .1s ease +} + +#progress+img, +#progress::before { pointer-events: none; opacity: 0; position: absolute; @@ -198,21 +184,48 @@ input#progress[type=range]::before { align-self: center; left: var(--progress); font-weight: 600; - transition: .2s opacity ease; + transition: .2s opacity ease } -input#progress[type=range] ~ img { +#progress+img { content: ""; height: var(--height); top: -2rem; width: 150px; } +#progress::before { + top: .5rem; + content: attr(data-ts) +} + +#progress:active~img, +#progress:active::before { + opacity: 1 +} .ctrl[disabled], #player:fullscreen #bpip, -#player:fullscreen #btheatre { - display: none; +#player:fullscreen #btheatre, +#player:target>a, +#progress+img[src=" "], +video[src=""] { + display: none +} + +video::cue { + background: none !important; + font-family: var(--sub-font); + color: #fff !important; + text-shadow: 2px 2px 0 #000, + 2px -2px 0 #000, + -2px 2px 0 #000, + -2px -2px 0 #000, + 2px 0px 0 #000, + 0px 2px 0 #000, + -2px 0px 0 #000, + 0px -2px 0 #000, + 2px 2px 2px #000; } #dl:not([download])>span { @@ -220,33 +233,6 @@ input#progress[type=range] ~ img { color: rgba(255, 255, 255, .4); } -input#progress[type=range]::before { - top: .5rem; - content: attr(data-ts); -} - -input#progress[type=range]:active ~ img, -input#progress[type=range]:active::before { - opacity: 1; -} - -input[type=range]:hover::-webkit-slider-thumb { - height: 12px; - width: 12px; - margin-top: -4px -} - -input[type=range]::-webkit-slider-thumb { - height: 0; - width: 0; - border-radius: 50%; - background: var(--accent-color); - cursor: pointer; - -webkit-appearance: none; - margin-top: 2px; - transition: all .1s ease; -} - #nowPlayingDisplay { padding-left: 1.2rem !important; } diff --git a/app/index.html b/app/index.html index 5d73b86..15e275e 100644 --- a/app/index.html +++ b/app/index.html @@ -234,7 +234,7 @@ Feed @@ -295,7 +295,7 @@