Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-13 03:26:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Beautify the shortcuts settings options

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/shortcuts-settings.css
View file

@ -68,10 +68,13 @@
position: absolute; position: absolute;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
perspective: 500px;
} }
#shortcuts-settings-container .shortcuts-view-mode label input ~ * { #shortcuts-settings-container .shortcuts-view-mode label input ~ * {
opacity: 0.5; 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) { #shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) {
box-shadow: inset 0 0 0 3px var(--link-color); box-shadow: inset 0 0 0 3px var(--link-color);
@ -81,6 +84,7 @@
label label
input:is(:hover, :active, :checked) input:is(:hover, :active, :checked)
~ * { ~ * {
transform: scale(1);
opacity: 1; opacity: 1;
} }

3
src/components/shortcuts-settings.jsx
View file

@ -244,7 +244,8 @@ function ShortcutsSettings() {
states.settings.shortcutsViewMode = e.target.value; 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> </label>
))} ))}
</div> </div>