fix/enhance(frontend): 映像・音声周りの改修 (#13206)

* enhance(frontend): 映像・音声周りの改修

* fix

* fix design

* fix lint

* キーボードショートカットを整備

* Update Changelog

* fix

* feat: ループ再生

* ネイティブの動作と同期されるように

* Update Changelog

* key指定を消す
This commit is contained in:
かっこかり 2024-03-30 16:02:03 +09:00 committed by GitHub
parent 50da7d2a27
commit b96d9c6973
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 373 additions and 19 deletions

View file

@ -41,13 +41,15 @@ const toggle = () => {
<style lang="scss" module>
.button {
--height: 21px;
position: relative;
display: inline-flex;
flex-shrink: 0;
margin: 0;
box-sizing: border-box;
width: 32px;
height: 23px;
width: calc(var(--height) * 1.6);
height: calc(var(--height) + 2px); //
outline: none;
background: var(--switchOffBg);
background-clip: content-box;
@ -69,9 +71,10 @@ const toggle = () => {
.knob {
position: absolute;
box-sizing: border-box;
top: 3px;
width: 15px;
height: 15px;
width: calc(var(--height) - 6px);
height: calc(var(--height) - 6px);
border-radius: 999px;
transition: all 0.2s ease;
@ -82,7 +85,7 @@ const toggle = () => {
}
.knobChecked {
left: 12px;
left: calc(calc(100% - var(--height)) + 3px);
background: var(--switchOnFg);
}
</style>