malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Simplify focus styles

Browse Source
This commit is contained in:
Tetrakern 2024-11-28 18:04:02 +01:00
parent 4bb00e5843
commit 7ec96596e6
20 changed files with 24 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/chapter.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/editor.css
View File

File diff suppressed because one or more lines are too long

2
css/properties.css
View File

File diff suppressed because one or more lines are too long

2
css/settings.css
View File

File diff suppressed because one or more lines are too long

2
css/story.css
View File

File diff suppressed because one or more lines are too long

6
src/scss/_card.scss
View File

@ -260,11 +260,7 @@
background: var(--card-image-placeholder, var(--placeholder-background));
border-radius: var(--this-border-radius);
overflow: hidden;
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
outline: var(--in-focus-outline);
}
outline-offset: 2px;
img {
position: absolute;

1
src/scss/_chapter.scss
View File

@ -241,7 +241,6 @@
}
&:focus-visible {
box-shadow: var(--in-focus-box-shadow-override, none) !important;
opacity: 1;
}
}

18
src/scss/_follows.scss
View File

@ -55,6 +55,11 @@
grid-template-rows: auto auto;
}
.follow-title {
padding: 0 2px; // Only for focus ring
margin: 0 -2px; // Compensate focus ring padding
}
.follow-title-link {
grid-area: 1 / 1 / 2 / 2;
font-weight: var(--font-weight-medium);
@ -111,14 +116,6 @@
font-size: var(--fs-xs);
padding: .35rem .75rem .45rem;
&:has(a:focus-visible) {
background: var(--in-focus-background);
:is(.follow-placeholder, .follow-meta) {
color: var(--in-focus-color) !important;
}
}
&:hover {
background: var(--navigation-subitem-background-hover);
}
@ -132,11 +129,6 @@
.follow-title-link {
color: var(--follow-title-link-color, var(--fg-400));
&:focus-visible {
background: none !important;
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
&:hover {
color: var(--follow-title-link-color-hover, var(--fg-200));
}

4
src/scss/_navigation.scss
View File

@ -216,10 +216,6 @@
height: fit-content;
transition: background-color .1s;
:is(a, label, button):focus-visible {
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
&:not(:hover) {
.sub-menu {
pointer-events: none;

11
src/scss/_story.scss
View File

@ -85,6 +85,10 @@ $header_breakpoint: 640px;
.story__taxonomies {
grid-area: 2 / 2 / 3 / 3;
align-self: center;
.tag-pill {
outline-offset: -1px;
}
}
.story__identity {
@ -147,12 +151,7 @@ $header_breakpoint: 640px;
display: block;
border-radius: var(--layout-border-radius-small);
box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
&:focus-visible {
outline: none;
background: none;
box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
}
outline-offset: 2px;
}
&:not(._in-content) {

22
src/scss/admin/_header.scss
View File

@ -69,10 +69,6 @@
outline: none;
}
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
}
&:hover {
background: var(--header-nav-item-background-hover);
color: var(--header-nav-item-color-hover);
@ -81,10 +77,6 @@
&.active {
background: var(--header-nav-item-background-active);
color: var(--header-nav-item-color-active);
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
}
}
}
}
@ -128,11 +120,6 @@
box-shadow: none;
outline: none;
}
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
outline: none;
}
}
.dashicons-plus {
@ -159,11 +146,6 @@
outline: none;
}
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
outline: none;
}
&:hover {
color: var(--subnav-item-color-hover);
border-bottom-color: var(--subnav-item-border-color-hover);
@ -173,10 +155,6 @@
color: var(--subnav-item-color-active);
font-weight: 600;
border-bottom-color: var(--subnav-item-border-color-active);
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
}
}
}
}

2
src/scss/admin/_properties.scss
View File

@ -1,6 +1,4 @@
body[class*="page_fictioneer"] {
--focus-color: #ef4d4d;
--in-focus-box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, .8);
--highlight-color: #72aee6;
--header-heading-color: #fff;

14
src/scss/common/_base.scss
View File

@ -148,6 +148,7 @@
width: fit-content;
min-width: get_clamp(26, 32, 320, 375);
box-shadow: var(--button-box-shadow);
outline-offset: 3px;
transition: color, background-color, border-color, opacity;
transition-duration: var(--transition-duration);
@ -178,11 +179,6 @@ button[type=submit]:where(:not(._inline)),
.button {
@extend %button;
&:is(button, a, label):focus-visible {
color: var(--in-focus-color) !important;
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
&._secondary {
background: var(--button-secondary-background);
color: var(--button-secondary-color);
@ -329,10 +325,6 @@ button[type=submit]:where(:not(._inline)),
text-shadow: none;
width: fit-content;
contain: layout paint style; // Improve performance
&:focus-visible {
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
}
&:not(._inline):hover {
@ -744,10 +736,6 @@ html:not(.logged-in) body:not(.logged-in) {
padding: 4px;
margin-right: -4px;
&:focus-visible.marked {
color: var(--in-focus-color);
}
&:not(.marked) {
color: var(--checkmark-not-checked);
text-shadow: none;

7
src/scss/common/_lightmode.scss
View File

@ -162,13 +162,6 @@
--card-footer-icon-color: var(--fg-800);
--card-text-icon-color: var(--fg-600);
// === FOCUS =================================================================
// --in-focus-color: white;
// --in-focus-outline: none;
--in-focus-background: #5593f6;
// --in-focus-box-shadow: 0 0 0 3px var(--in-focus-background);
// === NAVIGATION ============================================================
--navigation-background: var(--bg-50);

7
src/scss/common/_properties.scss
View File

@ -292,13 +292,6 @@
--card-unavailable-filter: grayscale(0.5) blur(1.5px);
--card-frame-border-color: var(--bg-800);
// === FOCUS =================================================================
--in-focus-color: white;
--in-focus-outline: none;
--in-focus-background: #ef4d4d;
--in-focus-box-shadow: 0 0 0 3px var(--in-focus-background);
// === NAVIGATION ============================================================
--navigation-background: var(--bg-900);

39
src/scss/common/_setup.scss
View File

@ -9,49 +9,16 @@ html:is(:root) {
-webkit-tap-highlight-color: transparent;
}
:focus {
outline: none;
}
[hidden] {
display: none !important;
}
*:not(input, textarea, select, .wp-block-file a, .button-unset-oauth, .toggle):focus-visible,
input:is([type=checkbox], [type=radio], [type=range], [type=submit]):focus-visible,
.user-is-tabbing select:focus-visible,
.oauth-login-link button:focus-visible,
.user-is-tabbing .showcase li:focus-within,
.custom-skin._upload:focus-within,
:is(.button, .comment-respond-option-toggle):focus-visible,
.wp-block-file:focus-within a:focus-visible {
outline-offset: var(--in-focus-outline-offset, 0px);
outline: var(--in-focus-outline) !important;
background: var(--in-focus-background) !important;
}
a:focus-visible img,
.wp-block-image img[data-lightbox]:focus-visible,
.toggle:focus-visible {
outline-offset: var(--in-focus-outline-offset, 0px);
outline: var(--in-focus-outline) !important;
box-shadow: var(--in-focus-box-shadow);
}
.user-is-tabbing *:not(.checkmark, select, input, textarea):focus-visible,
.user-is-tabbing select:focus-visible {
color: var(--in-focus-color) !important;
}
body:not(.user-is-tabbing) :is(.modal__close, .dialog-modal__close) {
body:where(:not(.user-is-tabbing)) :is(input, select, textarea):focus {
outline: none;
}
#wpadminbar {
--in-focus-background: #2c3338;
--in-focus-color: #72aee6;
--in-focus-box-shadow: none;
--in-focus-outline: none;
body:where(.user-is-tabbing) :is(input, select, textarea):focus {
outline-offset: 3px;
}
body {

4
src/scss/common/_tabs.scss
View File

@ -26,10 +26,6 @@
text-shadow: var(--tab-text-shadow-hover, var(--tab-text-shadow));
}
&:focus-visible {
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
&._current {
background: var(--tab-background-active);
color: var(--tab-color-active);

3
src/scss/common/_utility.scss
View File

@ -287,7 +287,8 @@ body:not(.is-editor):not(.is-admin) {
}
@include bp(desktop) {
&:hover {
&:hover,
&:focus {
&::before {
opacity: 1;
}