diff options
| author | Samuel Newman <mozzius@protonmail.com> | 2024-09-16 21:37:33 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-09-16 21:37:33 +0100 |
| commit | 8241747fc22bb4363ff6cf48d54013cc72db7624 (patch) | |
| tree | e6cd31d82100fb9c99f3443d7b2753672b55373c /bskyweb/templates/base.html | |
| parent | 38c8f01594ff515fbe49d00a777d70449e804fd4 (diff) | |
| download | voidsky-8241747fc22bb4363ff6cf48d54013cc72db7624.tar.zst | |
[Video] Volume controls on web (#5363)
* split up VideoWebControls * add basic slider * logarithmic volume * integrate mute state * fix typo * shared video volume * rm log * animate in/out * disable for touch devices * remove flicker on touch devices * more detailed comment * move into correct context provider * add minHeight * hack * bettern umber --------- Co-authored-by: Hailey <me@haileyok.com>
Diffstat (limited to 'bskyweb/templates/base.html')
| -rw-r--r-- | bskyweb/templates/base.html | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index aa7efc5eb..5dc5a9e8a 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -258,6 +258,51 @@ .force-no-clicks * { pointer-events: none !important; } + + input[type=range][orient=vertical] { + writing-mode: vertical-lr; + direction: rtl; + appearance: slider-vertical; + width: 16px; + vertical-align: bottom; + -webkit-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; + } + + input[type="range"][orient=vertical]::-webkit-slider-runnable-track { + background: white; + height: 100%; + width: 4px; + border-radius: 4px; + } + + input[type="range"][orient=vertical]::-moz-range-track { + background: white; + height: 100%; + width: 4px; + border-radius: 4px; + } + + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + border-radius: 50%; + background-color: white; + height: 16px; + width: 16px; + margin-left: -6px; + } + + input[type="range"][orient=vertical]::-moz-range-thumb { + border: none; + border-radius: 50%; + background-color: white; + height: 16px; + width: 16px; + margin-left: -6px; + } </style> {% include "scripts.html" %} <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"> |