Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-25 20:06:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] fix: Fix broken audio player layout in Safari

Browse Source 
Port 1dafd8c9dd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-06-04 17:34:13 +02:00
committed by Claire
parent 6bb29dec13
commit 4dbbe520fb
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/javascript/flavours/glitch/styles/components.scss
View File

@@ -7355,18 +7355,19 @@ img.modal-warning {
}
.audio-player {
overflow: hidden;
box-sizing: border-box;
container: audio-player / inline-size;
position: relative;
background: var(--player-background-color, var(--background-color));
color: var(--player-foreground-color);
border-radius: 8px;
padding-bottom: 44px;
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
aspect-ratio: 16 / 9;
color: var(--player-foreground-color);
background: var(--player-background-color, var(--background-color));
border-radius: 8px;
outline: 1px solid var(--media-outline-color);
outline-offset: -1px;
aspect-ratio: 16 / 9;
container: audio-player / inline-size;
&__controls {
display: grid;
@@ -7415,9 +7416,17 @@ img.modal-warning {
}
&__visualizer {
width: 100%;
max-width: 200px;
}
.video-player__seek {
position: absolute;
inset: 0 0 auto;
height: 24px;
z-index: 1; /* Ensure this renders on top of audio player controls */
}
&.inactive {
.video-player__seek,
.audio-player__controls,