diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2024-03-30 16:02:03 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-30 16:02:03 +0900 |
| commit | b96d9c6973b1c861306fdb9f51256cee5325a2b1 (patch) | |
| tree | b6aba03fba4f018e35213da755d4064a602bb1d6 /packages/frontend/src/components/MkSwitch.button.vue | |
| parent | enhance(frontend): 2要素認証セットアップウィザードにアプリ... (diff) | |
| download | misskey-b96d9c6973b1c861306fdb9f51256cee5325a2b1.tar.gz misskey-b96d9c6973b1c861306fdb9f51256cee5325a2b1.tar.bz2 misskey-b96d9c6973b1c861306fdb9f51256cee5325a2b1.zip | |
fix/enhance(frontend): 映像・音声周りの改修 (#13206)
* enhance(frontend): 映像・音声周りの改修
* fix
* fix design
* fix lint
* キーボードショートカットを整備
* Update Changelog
* fix
* feat: ループ再生
* ネイティブの動作と同期されるように
* Update Changelog
* key指定を消す
Diffstat (limited to 'packages/frontend/src/components/MkSwitch.button.vue')
| -rw-r--r-- | packages/frontend/src/components/MkSwitch.button.vue | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/packages/frontend/src/components/MkSwitch.button.vue b/packages/frontend/src/components/MkSwitch.button.vue index c95c933663..226908e221 100644 --- a/packages/frontend/src/components/MkSwitch.button.vue +++ b/packages/frontend/src/components/MkSwitch.button.vue @@ -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> |