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

fix photoswipe layout issues (chrome)

Browse source
This commit is contained in:
tobi 2025-04-14 13:01:47 +02:00
commit 94039ad3ef
6 changed files with 44 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/assets/themes/midnight-trip.css
View file

@ -113,9 +113,6 @@ html, body {
.status .media .media-wrapper {
background: var(--bg-nearly-opaque);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
border: 0.2rem dashed var(--magenta);
}
/* Polls */
.status .text .poll {

1
web/assets/themes/solarized-dark.css
View file

@ -134,7 +134,6 @@ html, body {
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--base1);
border: 0.2rem dashed var(--base1);
}
.status .media .media-wrapper details video.plyr-video {
background: transparent;

1
web/assets/themes/solarized-light.css
View file

@ -124,7 +124,6 @@ html, body {
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--base1);
border: 0.2rem dashed var(--base1);
}
.status .media .media-wrapper details video.plyr-video {
background: transparent;

2
web/source/css/_colors.css
View file

@ -80,7 +80,7 @@ $profile-bg: $gray4;
$button-bg: $blue2;
$button-fg: $gray1;
$button-hover-bg: $blue3;
$button-focus-border: $blue3;
$button-focus-border: $button-hover-bg;
$button-danger-bg: $error3;
$button-danger-fg: $white1;

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

@ -38,7 +38,7 @@
}
details {
position: absolute;
position: relative;
height: 100%;
width: 100%;
@ -55,35 +55,6 @@
object-fit: cover;
}
&[open] summary {
height: auto;
width: auto;
margin: 1rem;
padding: 0;
.show {
display: none;
}
.eye.button .hide {
display: inline-block;
grid-column: 1 / span 3;
grid-row: 1 / span 2;
}
div.blurhash-container > canvas {
display: none;
}
/*
Hide focus outline on click
to avoid ugly artifacts.
*/
&:focus {
outline: none;
}
}
summary {
position: absolute;
height: 100%;
@ -110,6 +81,14 @@
margin: 0;
padding: 0.4rem;
/*
Make button outline really thick as we can't
know whether media has good contrast with it.
*/
&:focus-visible {
outline: 0.5rem dashed $button-focus-border;
}
.fa-fw {
line-height: $fa-fw;
}
@ -117,16 +96,6 @@
.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 {
@ -144,18 +113,42 @@
}
}
a.photoswipe-slide {
display: inline-block;
height: 100%;
&[open] summary {
height: auto;
width: auto;
cursor: pointer;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
.show {
display: none;
}
.eye.button .hide {
display: inline-block;
}
div.blurhash-container,
div.blurhash-container > canvas {
display: none;
}
}
a.photoswipe-slide,
a.unknown-attachment {
position: absolute;
width: 100%;
height: 100%;
/*
Inset outline to avoid outline
being hidden by overflow: hidden.
Make link outline really thick as we can't
know whether media has good contrast with it.
Indent outline to avoid being hidden by overflow: hidden.
*/
&:focus-visible {
outline: $button-focus-outline;
outline-offset: -0.25rem;
outline: 0.5rem dotted $link-fg;
outline-offset: -0.5rem;
}
}
@ -173,8 +166,7 @@
width: 100%;
height: 100%;
padding: 0.8rem;
border: 0.2rem dashed $white2;
display: flex;
flex-direction: column;
align-items: center;
@ -220,17 +212,13 @@
> span.eye.button {
font-size: smaller;
padding: 0 0.2rem 0 0.2rem;
padding: 0.2rem;
> .fa-fw {
line-height: 1.4rem;
}
}
}
&[open] > summary {
margin: 0.5rem;
}
}
}
@ -248,7 +236,7 @@
> span.eye.button {
font-size: small;
padding: 0 0.1rem 0 0.1rem;
padding: 0.1rem;
> .fa-fw {
line-height: 1.2rem;

1
web/source/css/_status-media.css
View file

@ -20,7 +20,6 @@
@import "./_media-wrapper.css";
.media {
grid-column: span 3;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: 10rem;