The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-11-26 14:44:19 +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/borders";
@import "./vars/gradients"; @import "./vars/gradients";
@import "./vars/transitions"; @import "./vars/transitions";
@import "./vars/animations";
@import "./mixins/typography"; @import "./mixins/typography";
@import "./mixins/transitions"; @import "./mixins/transitions";
@import "./mixins/helpers"; @import "./mixins/helpers";

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

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

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

@ -80,3 +80,42 @@ h3 {
button { button {
background-color: $color-primary-d; 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;