tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Refactor styles to use logical properties for positioning (#2156)

Browse Source 
Port babd86e594 and 45848d6547 to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
This commit is contained in:
Plastikmensch
2023-04-16 17:45:18 +02:00
committed by GitHub
parent 0cbd579ef0
commit f28942cef9
36 changed files with 349 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,7 +49,7 @@
color: $primary-text-color;
background: rgba($base-overlay-background, 0.5);
bottom: 6px;
left: 6px;
inset-inline-start: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
@@ -133,7 +133,7 @@
object-fit: cover;
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
z-index: 0;
background: $base-overlay-background;
@@ -207,16 +207,16 @@
.media-modal__closer {
position: absolute;
top: 0;
left: 0;
right: 0;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
}
.media-modal__navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
pointer-events: none;
transition: opacity 0.3s linear;
@@ -259,18 +259,18 @@
}
.media-modal__nav--left {
left: 0;
inset-inline-start: 0;
}
.media-modal__nav--right {
right: 0;
inset-inline-end: 0;
}
.media-modal__overlay {
max-width: 600px;
position: absolute;
left: 0;
right: 0;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
margin: 0 auto;
@@ -357,7 +357,7 @@
.media-modal__close {
position: absolute;
right: 8px;
inset-inline-end: 8px;
top: 8px;
z-index: 100;
}
@@ -502,8 +502,8 @@
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
inset-inline-start: 0;
inset-inline-end: 0;
box-sizing: border-box;
background: linear-gradient(
0deg,
@@ -531,7 +531,7 @@
display: none;
position: absolute;
top: 0;
left: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
z-index: 4;
@@ -654,7 +654,7 @@
&.active {
overflow: visible;
width: 50px;
margin-right: 16px;
margin-inline-end: 16px;
}
&::before {
@@ -665,7 +665,7 @@
display: block;
position: absolute;
height: 4px;
left: 0;
inset-inline-start: 0;
top: 50%;
transform: translate(0, -50%);
}
@@ -675,7 +675,7 @@
position: absolute;
height: 4px;
border-radius: 4px;
left: 0;
inset-inline-start: 0;
top: 50%;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
@@ -688,8 +688,8 @@
width: 12px;
height: 12px;
top: 50%;
left: 0;
margin-left: -6px;
inset-inline-start: 0;
margin-inline-start: -6px;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
@@ -760,7 +760,7 @@
width: 12px;
height: 12px;
top: 10px;
margin-left: -6px;
margin-inline-start: -6px;
background: lighten($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);