diff options
| author | dakkar <dakkar@thenautilus.net> | 2022-04-07 11:56:27 +0100 |
|---|---|---|
| committer | dakkar <dakkar@thenautilus.net> | 2022-04-07 11:56:27 +0100 |
| commit | 880e7dfa7d8cee1aa33976a0b82ea6e286c3ee64 (patch) | |
| tree | c44ea13bbb57820e625d43b17fcbcfe4130b0907 | |
| parent | vlc seek via progress bar (diff) | |
| download | media-control-880e7dfa7d8cee1aa33976a0b82ea6e286c3ee64.tar.gz media-control-880e7dfa7d8cee1aa33976a0b82ea6e286c3ee64.tar.bz2 media-control-880e7dfa7d8cee1aa33976a0b82ea6e286c3ee64.zip | |
style progress/seek bar
| -rw-r--r-- | resources/index.html | 25 |
1 files changed, 24 insertions, 1 deletions
diff --git a/resources/index.html b/resources/index.html index e28bac8..207672b 100644 --- a/resources/index.html +++ b/resources/index.html @@ -270,10 +270,33 @@ .bd-yellow { background-color: yellow } .bd-blue { background-color: blue; color: white } + /* Range styling (firefox only) from + https://css-tricks.com/sliding-nightmare-understanding-range-input/ + https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ + */ input[type=range] { + display: block; width: 100%; + height: 1em; position: relative; - transform: scaleY(5); + background: transparent; + } + [type=range]::-moz-range-track { + width: 100%; + height: 0.2em; + background: #ccc; + } + [type=range]::-moz-range-progress { + height: 0.4em; + background: #48a; + } + [type=range]::-moz-range-thumb { + border: solid 0.1em #48a; + padding: 0; + width: 0.4em; + height: 0.8em; + border-radius: 0.5em; + background: #4bf; } .file-list { |