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

[Glitch] Refactor <Video> to TypeScript

Browse Source 
Port e5fd61a84e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2025-03-28 13:15:43 +01:00
committed by Claire
parent c06527cf5d
commit f19116c430
13 changed files with 1211 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7521,6 +7521,15 @@ img.modal-warning {
}
}
.media-gallery__actions {
opacity: 0;
transition: opacity 0.1s ease;
&.active {
opacity: 1;
}
}
&.inactive {
video,
.video-player__controls {
@@ -7671,7 +7680,7 @@ img.modal-warning {
inset-inline-start: 0;
top: 50%;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
background: $white;
}
&__handle {
@@ -7684,7 +7693,7 @@ img.modal-warning {
inset-inline-start: 0;
margin-inline-start: -6px;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
opacity: 0;
@@ -7738,7 +7747,7 @@ img.modal-warning {
height: 4px;
border-radius: 4px;
top: 14px;
background: lighten($ui-highlight-color, 8%);
background: $white;
}
&__buffer {
@@ -7754,7 +7763,7 @@ img.modal-warning {
height: 12px;
top: 10px;
margin-inline-start: -6px;
background: lighten($ui-highlight-color, 8%);
background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
.no-reduce-motion & {
@@ -7763,6 +7772,7 @@ img.modal-warning {
&.active {
opacity: 1;
cursor: grabbing;
}
}
@@ -7773,6 +7783,28 @@ img.modal-warning {
}
}
&__hotkey-indicator {
position: absolute;
top: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
background: rgba($base-shadow-color, 0.45);
backdrop-filter: var(--background-filter);
color: $white;
border-radius: 8px;
padding: 16px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
&__label {
font-size: 15px;
font-weight: 500;
}
}
&.detailed,
&.fullscreen {
.video-player__buttons {