mirrors/gotosocial
1
0
Fork 1
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-04-15 13:54:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

tweaks

Browse source
This commit is contained in:
tobi 2025-04-09 13:53:00 +02:00
parent 3089ac3780
commit befa318065
6 changed files with 43 additions and 18 deletions
Show stats 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 {
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 {
@ -139,8 +149,13 @@
height: 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
thick border around avatars.
*/
&:focus {
outline-offset: 0.2rem;
&:focus-visible {
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
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
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
and checkboxes when they're focused (ie., by clicking
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
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
@ -100,7 +100,7 @@ $summary-focus-outline: 0.1rem dashed $link-fg;
This is used when we've got a preformatted
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 *****
@ -122,7 +122,7 @@ body {
a {
color: $link-fg;
&:focus {
&:focus-visible {
outline: $link-focus-outline;
}
}
@ -182,12 +182,12 @@ main {
background: $button-hover-bg;
}
&:focus {
&:focus-visible {
outline: $button-focus-outline;
}
}
summary:focus {
summary:focus-visible {
outline: $summary-focus-outline;
}
@ -209,8 +209,8 @@ input, select, textarea, .input {
border-color: $input-focus-border;
}
&[type=checkbox]:focus,
&[type=radio]:focus {
&[type=checkbox]:focus-visible,
&[type=radio]:focus-visible {
outline: $input-clickable-focus-outline;
}

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

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

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

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

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

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