diff --git a/core/css/apps.scss b/core/css/apps.scss index 822a27cc19..702ab5d75b 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -145,8 +145,9 @@ kbd { padding-left: 38px !important; } - &:focus, &:hover, + &:focus, + &:active, &.active, a.selected { &, @@ -156,6 +157,13 @@ kbd { } } + /* a instead of li is focused by keyboards */ + a:focus, + a:active { + opacity: 1; + box-shadow: inset 4px 0 var(--color-primary); + } + /* align loader */ &.icon-loading-small:after { left: 22px; @@ -204,8 +212,8 @@ kbd { display: inline-flex; flex-wrap: wrap; padding-left: 44px; - &:focus, &:hover, + &:focus, &.active, a.selected { &, @@ -488,7 +496,8 @@ kbd { padding: 5px; margin-right: 0; height: 38px; - &:hover { + &:hover, + &:focus { /* overlapp borders */ z-index: 1; } @@ -537,7 +546,8 @@ kbd { height: 44px; width: 44px; line-height: 44px; - &:hover, &:focus { + &:hover, + &:focus { opacity: 1; } } @@ -707,7 +717,8 @@ kbd { opacity: .57; &.opened, - &:hover { + &:hover, + &:focus { background-color: var(--color-main-background); opacity: 1; box-shadow: inset 4px 0 var(--color-primary); @@ -769,10 +780,13 @@ kbd { font-weight: 600; border-bottom: 1px solid var(--color-border); } - &:hover { + &:hover, + &:focus { border-bottom: 1px solid var(--color-border); } - &.selected, &:hover { + &.selected, + &:hover + &:focus { margin-bottom: 0px; color: var(--color-main-text); a { @@ -911,7 +925,9 @@ $popovericon-size: 16px; &[class*=' icon-'] { padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important; } - &:hover, &:focus, &.active { + &:hover, + &:focus, + &.active { opacity: 1 !important; } /* prevent .action class to break the design */ @@ -1056,13 +1072,15 @@ $popovericon-size: 16px; padding: 22px; opacity: .3; cursor: pointer; - &:hover, &:focus { + &:hover, + &:focus { opacity: .7; } &[class^='icon-star'], &[class*=' icon-star'] { opacity: .7; - &:hover, &:focus { + &:hover, + &:focus { opacity: 1 ; } @@ -1073,7 +1091,8 @@ $popovericon-size: 16px; } } - &:hover, &:focus, + &:hover, + &:focus, &.active { background-color: var(--color-background-dark); }