The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-11-26 06:34:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

improved ui non-mouse focus callout

Browse Source
This commit is contained in:
thecozies 2024-04-10 09:24:25 -05:00 committed by Mr-Wiseguy
parent a293673a32
commit 0555d5cd97
6 changed files with 68 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

1
assets/scss/styles/base.scss
View File

@ -5,6 +5,7 @@
@import "./vars/borders";
@import "./vars/gradients";
@import "./vars/transitions";
@import "./vars/animations";
@import "./mixins/typography";
@import "./mixins/transitions";
@import "./mixins/helpers";

22
assets/scss/styles/components/Config.scss
View File

@ -114,17 +114,18 @@
.config-option__tab-label {
@extend %label-sm;
@include trans-colors-opa;
display: block;
padding: space(12) 0 space(8);
position: relative;
padding: space(8) 0;
height: auto;
margin: 0 space(12);
margin-right: space(16);
margin: space(4) space(12) 0;
color: $color-text-inactive;
tab-index: none;
transition: color $transition-quick;
&:hover {
cursor: pointer;
color: $color-text;
}
}
@ -138,13 +139,20 @@
&:not(:disabled) {
&:checked + .config-option__tab-label {
border-bottom: 1dp;
border-color: $color-border-hard;
border-color: $color-text;
color: $color-text;
&:hover {
cursor: default;
}
}
.rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
animation: $focus-anim-border;
color: $color-secondary;
border-color: $color-secondary;
}
&:focus + .config-option__tab-label,
&:hover + .config-option__tab-label {
color: $color-text;
@ -179,7 +187,7 @@
.rmlui-window:not([mouse-active]) &:focus {
@include border($color-a);
background-color: $color-secondary;
animation: $focus-anim-bg;
}
&:hover {
@ -201,7 +209,7 @@
.config-option__details {
@extend %label-xs;
color: $color-secondary;
color: $color-primary;
margin: space(14) space(12) 0;
height: space(18);
}

8
assets/scss/styles/components/Tabs.scss
View File

@ -37,6 +37,14 @@
}
}
.rmlui-window:not([mouse-active]) &:focus {
animation: $focus-anim-border;
&:selected .tab__indicator {
animation: $focus-anim-bg;
}
}
&:focus, &:hover {
cursor: pointer;
color: $color-text;

39
assets/scss/styles/global.scss
View File

@ -80,3 +80,42 @@ h3 {
button {
background-color: $color-primary-d;
}
@keyframes blue-pulse {
0% {
color: $color-secondary;
}
50% {
color: $color-secondary-l;
}
to {
color: $color-secondary;
}
}
@keyframes blue-pulse-with-border {
0% {
color: $color-secondary;
border-color: $color-secondary;
}
50% {
color: $color-secondary-l;
border-color: $color-secondary-l;
}
to {
color: $color-secondary;
border-color: $color-secondary;
}
}
@keyframes blue-pulse-background {
0% {
background-color: $color-secondary;
}
50% {
background-color: $color-secondary-l;
}
to {
background-color: $color-secondary;
}
}

4
assets/scss/styles/vars/_animations.scss Normal file
View File

@ -0,0 +1,4 @@
$focus-anim: blue-pulse-with-border 0.75s infinite;
$focus-anim-border: blue-pulse 0.75s infinite;
$focus-anim-bg: blue-pulse-background 0.75s infinite;