mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-10-29 19:12:25 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

tweaks

Browse source
This commit is contained in:
tobi 2025-04-09 13:53:00 +02:00
commit befa318065
6 changed files with 43 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web/source/css/_media-wrapper.css
View file

@ -117,6 +117,16 @@
.hide { .hide {
display: none; display: none;
} }
&:focus-visible {
/*
Can't rely on media having background with
decent contrast so inset and use button-fg
instead so focus is definitely visible.
*/
outline: 0.25rem dashed $button-fg;
outline-offset: -0.25rem;
}
} }
.show.sensitive { .show.sensitive {
@ -139,8 +149,13 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
&:focus { /*
outline-offset: -0.15rem; Inset outline to avoid outline
being hidden by overflow: hidden.
*/
&:focus-visible {
outline: $button-focus-outline;
outline-offset: -0.25rem;
} }
} }

5
web/source/css/_profile-header.css
View file

@ -94,8 +94,9 @@
Offset to avoid clashing with Offset to avoid clashing with
thick border around avatars. thick border around avatars.
*/ */
&:focus { &:focus-visible {
outline-offset: 0.2rem; outline: $button-focus-outline;
outline-offset: 0.25rem;
} }
} }

20
web/source/css/base.css
View file

@ -72,26 +72,26 @@ $fa-fw: 1.28571429em;
Outline to give links when they're Outline to give links when they're
focused (ie., by clicking or tabbing to them). focused (ie., by clicking or tabbing to them).
*/ */
$link-focus-outline: 0.15rem dotted $link-fg; $link-focus-outline: 0.25rem dotted $link-fg;
/* /*
Outline to give buttons when they're Outline to give buttons when they're
focused (ie., by clicking or tabbing to them). focused (ie., by clicking or tabbing to them).
*/ */
$button-focus-outline: 0.15rem dashed $button-focus-border; $button-focus-outline: 0.25rem dashed $button-focus-border;
/* /*
Outline to give input elements like radio buttons Outline to give input elements like radio buttons
and checkboxes when they're focused (ie., by clicking and checkboxes when they're focused (ie., by clicking
or tabbing to them). or tabbing to them).
*/ */
$input-clickable-focus-outline: 0.15rem dashed $input-focus-border; $input-clickable-focus-outline: 0.25rem dashed $input-focus-border;
/* /*
Outline to give summary elements when they're Outline to give summary elements when they're
focused (ie., by clicking or tabbing to them). focused (ie., by clicking or tabbing to them).
*/ */
$summary-focus-outline: 0.1rem dashed $link-fg; $summary-focus-outline: 0.25rem dotted $link-fg;
/* /*
Outline to give <pre> elements when they're Outline to give <pre> elements when they're
@ -100,7 +100,7 @@ $summary-focus-outline: 0.1rem dashed $link-fg;
This is used when we've got a preformatted This is used when we've got a preformatted
code block with a scroll bar inside of it. code block with a scroll bar inside of it.
*/ */
$pre-focus-outline: 0.1rem dashed $link-fg; $pre-focus-outline: 0.25rem dashed $link-fg;
/****************************************** /******************************************
***** SECTION 2: BASIC GLOBAL STYLING ***** ***** SECTION 2: BASIC GLOBAL STYLING *****
@ -122,7 +122,7 @@ body {
a { a {
color: $link-fg; color: $link-fg;
&:focus { &:focus-visible {
outline: $link-focus-outline; outline: $link-focus-outline;
} }
} }
@ -182,12 +182,12 @@ main {
background: $button-hover-bg; background: $button-hover-bg;
} }
&:focus { &:focus-visible {
outline: $button-focus-outline; outline: $button-focus-outline;
} }
} }
summary:focus { summary:focus-visible {
outline: $summary-focus-outline; outline: $summary-focus-outline;
} }
@ -209,8 +209,8 @@ input, select, textarea, .input {
border-color: $input-focus-border; border-color: $input-focus-border;
} }
&[type=checkbox]:focus, &[type=checkbox]:focus-visible,
&[type=radio]:focus { &[type=radio]:focus-visible {
outline: $input-clickable-focus-outline; outline: $input-clickable-focus-outline;
} }

8
web/source/css/status.css
View file

@ -299,6 +299,14 @@
position: absolute; position: absolute;
z-index: 0; z-index: 0;
&:focus-visible {
/*
Inset focus to compensate for themes where
statuses have a really thick border.
*/
outline-offset: -0.25rem;
}
} }
&:first-child { &:first-child {

5
web/source/frontend/index.js
View file

@ -144,11 +144,12 @@ lightbox.on('uiRegister', function() {
el.setAttribute('rel', 'noopener'); el.setAttribute('rel', 'noopener');
pswp.on('change', () => { pswp.on('change', () => {
switch (true) { switch (true) {
case pswp.currSlide.data.parentStatus: case pswp.currSlide.data.parentStatus !== undefined:
// Link to parent status. // Link to parent status.
el.href = pswp.currSlide.data.parentStatus; el.href = pswp.currSlide.data.parentStatus;
break; break;
case pswp.currSlide.data.element && pswp.currSlide.data.element.dataset.pswpParentStatus: case pswp.currSlide.data.element !== undefined &&
pswp.currSlide.data.element.dataset.pswpParentStatus !== undefined:
// Link to parent status. // Link to parent status.
el.href = pswp.currSlide.data.element.dataset.pswpParentStatus; el.href = pswp.currSlide.data.element.dataset.pswpParentStatus;
break; break;

4
web/source/settings/style.css
View file

@ -575,7 +575,7 @@ form {
width: fit-content; width: fit-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:focus { &:focus-visible {
outline: 0.15rem dashed $button-focus-border; outline: 0.15rem dashed $button-focus-border;
outline-offset: -0.15rem; outline-offset: -0.15rem;
} }
@ -1331,7 +1331,7 @@ button.tab-button {
.pseudolink { .pseudolink {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
&:focus { &:focus-visible {
outline: 0.15rem dotted $button-focus-border; outline: 0.15rem dotted $button-focus-border;
} }
} }