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

Update tab focus styles

Browse Source
This commit is contained in:
Tetrakern 2024-11-25 22:16:26 +01:00
parent 443e9dbb30
commit b6dae55664
30 changed files with 78 additions and 104 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/comments.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/recommendation.css
View File

@ -1 +1 @@
.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{--focus-offset: 2px;float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,9.6692111959vw - 26.2595419847px,48px) clamp(24px,6.106870229vw + 1.0992366412px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;box-shadow:var(--recommendation-cover-box-shadow, var(--box-shadow-xl))}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}
.recommendation__header{margin-bottom:2rem}.recommendation__taxonomies{margin-bottom:1.5rem}.recommendation__thumbnail{float:right;max-width:clamp(100px,25.4452926209vw + 4.5801526718px,200px);margin:0 0 clamp(10px,9.6692111959vw - 26.2595419847px,48px) clamp(24px,6.106870229vw + 1.0992366412px,48px)}.recommendation__thumbnail :is(a,img){display:block;cursor:zoom-in;border-radius:var(--layout-border-radius-small)}.recommendation__thumbnail-image{width:inherit;box-shadow:var(--recommendation-cover-box-shadow, var(--box-shadow-xl))}@media(max-width: 768px){.recommendation__thumbnail-image{height:auto}}.recommendation__tags{margin:2rem 0 3rem}.recommendation__support,.recommendation__read-on{margin-top:1.5rem}.recommendation__support h5,.recommendation__read-on h5{margin-bottom:.5rem}.recommendation__support :is(i,.icon),.recommendation__read-on :is(i,.icon){color:var(--fg-600);margin-right:.5rem}.recommendation__list-item{line-height:1.3}.recommendation__list-item:not(:last-child){margin-bottom:.5rem}.recommendation__footer{clear:both}

2
css/story.css
View File

File diff suppressed because one or more lines are too long

9
src/scss/_card.scss
View File

@ -166,7 +166,6 @@
}
a {
--focus-offset: 1px;
color: var(--card-heading-link, var(--heading-link-color));
width: fit-content;
@ -188,7 +187,6 @@
&__delete,
&__info-toggle {
--focus-offset: -8px;
cursor: pointer;
position: absolute;
top: 0;
@ -256,7 +254,6 @@
}
&__image {
--focus-offset: 2px;
--this-border-radius: var(--layout-border-radius-small);
position: relative;
display: block;
@ -395,12 +392,6 @@
@include bp(desktop) {
padding: 0.175em 0.35em 0.175em 0;
}
@supports selector(:has(:focus-visible)) {
a:focus-visible {
outline: none;
}
}
}
&-link {

8
src/scss/_chapter.scss
View File

@ -235,11 +235,15 @@
height: 32px;
opacity: .5;
&:hover,
&:focus-visible {
&:hover {
background: var(--button-secondary-background-hover);
opacity: 1;
}
&:focus-visible {
box-shadow: var(--in-focus-box-shadow-override, none) !important;
opacity: 1;
}
}
.icon {

22
src/scss/_follows.scss
View File

@ -58,12 +58,6 @@
.follow-title-link {
grid-area: 1 / 1 / 2 / 2;
font-weight: var(--font-weight-medium);
@supports selector(:has(:focus-visible)) {
&:focus-visible {
outline: none;
}
}
}
.follow-meta {
@ -100,8 +94,6 @@
}
.follow-item {
--focus-offset: -2px;
&:not(:last-child) {
border-bottom: var(--navigation-subitem-divider);
}
@ -119,6 +111,14 @@
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);
}
@ -130,9 +130,13 @@
}
.follow-title-link {
--in-focus-outline: none;
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));
}

1
src/scss/_lightbox.scss
View File

@ -15,7 +15,6 @@
}
&__close {
--focus-offset: -12px;
position: absolute;
top: -0.5rem;
right: -0.5rem;

16
src/scss/_navigation.scss
View File

@ -98,7 +98,6 @@
}
.main-navigation {
--focus-offset: -2px;
top: calc(-0.1px - var(--nav-observer-offset, 0px)); // -0.1px to prevent hairline gaps
z-index: 1000;
color: var(--navigation-color);
@ -217,6 +216,10 @@
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;
@ -374,17 +377,6 @@
.user-is-tabbing {
:is(.main-navigation, .icon-menu) {
:is(.menu-item, .page_item) {
:where(a, label, button):focus-visible {
color: var(--navigation-color-hover);
background: var(--navigation-item-background-hover);
}
.sub-menu {
:where(a, label, button):focus-visible {
color: var(--navigation-subitem-color-hover, var(--navigation-color-hover));
}
}
&:focus-within {
background: var(--navigation-item-background-hover);

1
src/scss/_pagination.scss
View File

@ -6,7 +6,6 @@
grid-column: 1 / -1; // Span all grid columns if any
.page-numbers {
--focus-offset: -2px;
@extend %button;
background: var(--pagination-background);
color: var(--pagination-color);

1
src/scss/_profile.scss
View File

@ -101,7 +101,6 @@
margin: 2rem 0;
.oauth-login-link {
--focus-offset: -2px;
position: relative;
display: flex;
flex-direction: column;

1
src/scss/_reader-settings.scss
View File

@ -42,7 +42,6 @@
}
&__toggle {
--focus-offset: 2px;
border-radius: 50%;
&[aria-checked="true"] {

1
src/scss/_recommendation.scss
View File

@ -8,7 +8,6 @@
}
&__thumbnail {
--focus-offset: 2px;
float: right;
max-width: get_clamp(100, 200, 375, 768);
margin: 0 0 get_clamp(10, 48, 375, 768) get_clamp(24, 48, 375, 768);

5
src/scss/_showcase.scss
View File

@ -33,7 +33,6 @@
}
&__list-item {
--focus-offset: 2px;
position: relative;
aspect-ratio: var(--showcase-item-aspect-ratio);
border-radius: var(--layout-border-radius-small);
@ -71,10 +70,6 @@
display: block;
height: 100%;
&:focus-visible {
outline: none;
}
&:hover {
img {
transform: scale(1.05);

1
src/scss/_socialmedia.scss
View File

@ -3,7 +3,6 @@
gap: 16px get_clamp(12, 16, 320, 480);
&__item {
--focus-offset: 1px;
cursor: pointer;
display: block;
color: (--media-button-color, var(--fg-600));

13
src/scss/_story.scss
View File

@ -143,7 +143,17 @@ $header_breakpoint: 640px;
}
&__thumbnail {
--focus-offset: 2px;
a {
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));
}
}
&:not(._in-content) {
grid-area: 1 / 1 / 4 / 2;
@ -185,7 +195,6 @@ $header_breakpoint: 640px;
height: 100%;
max-height: var(--this-img-height);
object-fit: cover;
box-shadow: var(--story-cover-box-shadow, var(--box-shadow-xl));
}
}

2
src/scss/comments.scss
View File

@ -12,7 +12,6 @@
}
.comment-respond-option-toggle {
--focus-offset: -2px;
display: block;
span {
@ -463,7 +462,6 @@
}
&__author {
--focus-offset: -2px;
font-size: 13px;
line-height: 1.2;
padding-top: 2px;

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

@ -176,11 +176,11 @@ button[type=submit]:where(:not(._inline)),
}
.button {
--focus-offset: -2px;
@extend %button;
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
&:is(button, a, label):focus-visible {
color: var(--in-focus-color) !important;
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
&._secondary {
@ -319,7 +319,6 @@ button[type=submit]:where(:not(._inline)),
cursor: pointer;
&:not(._inline) {
--focus-offset: -2px;
display: block;
background: var(--tag-background);
color: var(--tag-color);
@ -332,7 +331,7 @@ button[type=submit]:where(:not(._inline)),
contain: layout paint style; // Improve performance
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
}
@ -479,7 +478,6 @@ button[type=submit]:where(:not(._inline)),
.popup-menu {
--translateX: translateX(0);
--translateY: translateY(0);
--focus-offset: -2px;
position: absolute;
z-index: 10;
background: var(--popup-menu-background);
@ -697,7 +695,6 @@ html:not(.logged-in) body:not(.logged-in) {
}
&-link {
--focus-offset: 1px;
grid-area: 1 / 2 / 2 / 3;
color: var(--chapter-list-link-color, var(--heading-link-color));
font-family: var(--ff-chapter-list-title);
@ -739,7 +736,6 @@ html:not(.logged-in) body:not(.logged-in) {
}
.checkmark {
--focus-offset: 2px;
grid-area: 1 / 3 / 3 / 4;
display: block;
color: var(--checkmark-checked);

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

@ -605,7 +605,6 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
// =============================================================================
.wp-block-file:where(:not(.no-theme-style)) {
--focus-offset: 2px;
display: flex;
gap: 0 1px;
flex-direction: row-reverse;
@ -625,12 +624,6 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
}
}
&:focus-within {
a:focus-visible {
outline: none;
}
}
&:hover :is(a, a.wp-block-file__button) {
background: var(--button-file-block-background-hover);
color: var(--button-file-block-color-hover) !important;

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

@ -12,7 +12,6 @@
}
select {
--focus-offset: -2px;
cursor: pointer;
option {
@ -96,7 +95,6 @@ select {
}
input[type=range] {
--focus-offset: -2px;
cursor: pointer;
padding: 5px;
margin: 0;
@ -148,7 +146,6 @@ input[type=number] {
input[type=checkbox],
input[type=radio] {
--focus-offset: 2px;
cursor: pointer;
position: relative;
background: var(--input-background);
@ -227,7 +224,6 @@ input[type=radio] {
}
&__operator {
--focus-offset: -2px;
--this-border-radius: var(--input-border-radius, var(--layout-border-radius-small));
position: absolute;
top: 0;

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

@ -164,9 +164,10 @@
// === FOCUS =================================================================
--in-focus-border-color: var(--red-500);
// --in-focus-outline: 2px solid var(--in-focus-border-color);
--in-focus-box-shadow: inset 0 0 0 2px rgb(255 255 255 / 75%);
// --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 ============================================================

1
src/scss/common/_modals.scss
View File

@ -238,7 +238,6 @@
.dialog-modal__close,
.modal .close {
--focus-offset: -4px;
position: absolute;
top: 0;
right: 0;

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

@ -294,9 +294,10 @@
// === FOCUS =================================================================
--in-focus-border-color: #ef4d4d;
--in-focus-outline: 2px solid var(--in-focus-border-color);
--in-focus-box-shadow: inset 0 0 0 2px rgb(0 0 0 / 75%);
--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 ============================================================

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

@ -17,32 +17,36 @@ html:is(:root) {
display: none !important;
}
*:not(input, textarea, select, .wp-block-file a, .button-unset-oauth):focus-visible,
*: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,
.button:focus-visible,
.oauth-login-link button:focus-visible,
.story__thumbnail a:focus-visible img,
.user-is-tabbing .showcase li:focus-within,
.comment-respond-option-toggle:focus-visible {
outline: var(--in-focus-outline);
outline-offset: var(--focus-offset, 0);
.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;
box-shadow: var(--in-focus-box-shadow);
}
// Split off for browsers without support
@supports selector(:has(:focus-visible)) {
.wp-block-file:has(a:focus-visible),
.card__link-list li:has(a:focus-visible),
.oauth-login-link:has(:focus-visible),
.follow-item:has(:focus-visible) {
outline: var(--in-focus-outline);
outline-offset: var(--focus-offset, 0);
input:is([type=checkbox], [type=radio], [type=range], [type=submit]):focus-visible,
:is(select, button, .oauth-login-link):not(.toggle):focus-visible,
.custom-skin._upload:focus-within,
.wp-block-file:focus-within a {
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
// Prevent double outline
.oauth-login-link button:focus-visible {
outline: none;
a:focus-visible img,
.toggle:focus-visible {
outline-offset: var(--in-focus-outline-offset, 0px);
outline: var(--in-focus-outline) !important;
box-shadow: var(--in-focus-box-shadow);
}
*:not(.checkmark):focus-visible {
color: var(--in-focus-color) !important;
}
body:not(.user-is-tabbing) :is(.modal__close, .dialog-modal__close) {
@ -70,7 +74,6 @@ body {
main {
img {
--focus-offset: 2px;
max-width: 100%;
max-height: 100%;
}

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

@ -8,7 +8,6 @@
}
&__item {
--focus-offset: -2px;
background: var(--tab-background);
color: var(--tab-color);
font-size: var(--fs-dxs);
@ -28,7 +27,7 @@
}
&:focus-visible {
box-shadow: var(--in-focus-box-shadow);
box-shadow: var(--in-focus-box-shadow-override, none) !important;
}
&._current {

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

@ -69,7 +69,6 @@ body:not(.is-editor):not(.is-admin) {
}
.truncate {
--focus-offset: -2px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;