Beautify the shortcuts settings options

This commit is contained in:
Lim Chee Aun 2023-03-19 15:11:20 +08:00
parent 15551ec3c9
commit e9cd02e5e9
2 changed files with 7 additions and 2 deletions

View file

@ -68,10 +68,13 @@
position: absolute;
opacity: 0;
pointer-events: none;
perspective: 500px;
}
#shortcuts-settings-container .shortcuts-view-mode label input ~ * {
opacity: 0.5;
transition: opacity 0.2s;
transform-origin: bottom;
transform: scale(0.975);
transition: all 0.2s ease-out;
}
#shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) {
box-shadow: inset 0 0 0 3px var(--link-color);
@ -81,6 +84,7 @@
label
input:is(:hover, :active, :checked)
~ * {
transform: scale(1);
opacity: 1;
}

View file

@ -244,7 +244,8 @@ function ShortcutsSettings() {
states.settings.shortcutsViewMode = e.target.value;
}}
/>{' '}
<img src={imgURL} alt="" /> <span>{label}</span>
<img src={imgURL} alt="" width="80" height="58" />{' '}
<span>{label}</span>
</label>
))}
</div>