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

93
app/javascript/flavours/glitch/styles/admin.scss
View File

@@ -117,7 +117,7 @@ $content-width: 840px;
text-overflow: ellipsis;
i.fa {
margin-right: 5px;
margin-inline-end: 5px;
}
&:hover {
@@ -186,7 +186,10 @@ $content-width: 840px;
}
.content {
padding: 55px 15px 20px 25px;
padding-top: 55px;
padding-bottom: 20px;
padding-inline-start: 25px;
padding-inline-end: 15px;
@media screen and (max-width: $no-columns-breakpoint) {
max-width: none;
@@ -202,11 +205,12 @@ $content-width: 840px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: -15px -15px 0 0;
margin-top: -15px;
margin-inline-end: -15px;
& > * {
margin-top: 15px;
margin-right: 15px;
margin-inline-end: 15px;
}
}
@@ -385,7 +389,7 @@ $content-width: 840px;
z-index: 10;
width: 100%;
height: calc(100% - 56px);
left: 0;
inset-inline-start: 0;
bottom: 0;
overflow-y: auto;
background: $ui-base-color;
@@ -470,10 +474,11 @@ body,
.filters {
display: flex;
flex-wrap: wrap;
gap: 40px;
.filter-subset {
flex: 0 0 auto;
margin: 0 40px 20px 0;
margin-bottom: 20px;
&:last-child {
margin-bottom: 30px;
@@ -485,7 +490,7 @@ body,
li {
display: inline-block;
margin-right: 5px;
margin-inline-end: 5px;
}
}
@@ -563,7 +568,10 @@ body,
& > strong {
display: block;
margin: 0 0 10px -5px;
margin-top: 0;
margin-bottom: 10px;
margin-inline-end: 0;
margin-inline-start: -5px;
font-weight: 500;
font-size: 14px;
line-height: 18px;
@@ -588,7 +596,7 @@ body,
.activity-stream {
flex: 2 0 0;
margin-right: 20px;
margin-inline-end: 20px;
max-width: calc(100% - 60px);
.entry {
@@ -632,20 +640,23 @@ body,
margin-bottom: 5px;
#form_status_batch_action {
margin: 0 5px 5px 0;
margin-bottom: 5px;
margin-inline-end: 5px;
font-size: 14px;
}
input.button {
margin: 0 5px 5px 0;
margin-bottom: 5px;
margin-inline-end: 5px;
}
.media-spoiler-toggle-buttons {
margin-left: auto;
margin-inline-start: auto;
.button {
overflow: visible;
margin: 0 0 5px 5px;
margin-bottom: 5px;
margin-inline-start: 5px;
float: right;
}
}
@@ -667,7 +678,7 @@ body,
.special-action-button,
.back-link {
text-align: right;
text-align: end;
flex: 1 1 auto;
}
@@ -685,7 +696,7 @@ body,
display: block;
line-height: 20px;
padding: 15px;
padding-left: 15px * 2 + 40px;
padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color;
border-bottom: 1px solid darken($ui-base-color, 8%);
position: relative;
@@ -712,7 +723,7 @@ body,
&__avatar {
position: absolute;
left: 15px;
inset-inline-start: 15px;
top: 15px;
.avatar {
@@ -780,7 +791,7 @@ a.name-tag,
.avatar {
display: block;
margin: 0;
margin-right: 5px;
margin-inline-end: 5px;
border-radius: 50%;
}
@@ -794,7 +805,7 @@ a.name-tag,
.speech-bubble {
margin-bottom: 20px;
border-left: 4px solid $ui-highlight-color;
border-inline-start: 4px solid $ui-highlight-color;
&.positive {
border-left-color: $success-green;
@@ -810,7 +821,7 @@ a.name-tag,
&__bubble {
padding: 16px;
padding-left: 14px;
padding-inline-start: 14px;
font-size: 15px;
line-height: 20px;
border-radius: 4px 4px 4px 0;
@@ -824,7 +835,7 @@ a.name-tag,
&__owner {
padding: 8px;
padding-left: 12px;
padding-inline-start: 12px;
}
time {
@@ -848,7 +859,7 @@ a.name-tag,
border: 0;
&__avatar-wrapper {
margin-left: 0;
margin-inline-start: 0;
}
}
@@ -857,7 +868,7 @@ a.name-tag,
font-weight: 500;
color: $darker-text-color;
text-transform: uppercase;
text-align: right;
text-align: end;
a {
color: inherit;
@@ -908,7 +919,7 @@ a.name-tag,
&__icon {
color: $dark-text-color;
margin-right: 4px;
margin-inline-end: 4px;
font-weight: 500;
}
}
@@ -1106,7 +1117,7 @@ a.name-tag,
> h4 {
position: sticky;
left: 0;
inset-inline-start: 0;
}
&__table {
@@ -1118,7 +1129,7 @@ a.name-tag,
&__date {
white-space: nowrap;
padding: 10px 0;
text-align: left;
text-align: start;
min-width: 120px;
&.retention__table__average {
@@ -1176,7 +1187,7 @@ a.name-tag,
&__total {
display: block;
margin-right: 10px;
margin-inline-end: 10px;
font-weight: 500;
font-size: 28px;
color: $primary-text-color;
@@ -1278,7 +1289,7 @@ a.sparkline {
}
&__value {
text-align: right;
text-align: end;
color: $darker-text-color;
padding: 11px 10px;
}
@@ -1289,7 +1300,7 @@ a.sparkline {
height: 8px;
border-radius: 50%;
background: $ui-highlight-color;
margin-right: 10px;
margin-inline-end: 10px;
@for $i from 0 through 10 {
&--#{10 * $i} {
@@ -1325,7 +1336,7 @@ a.sparkline {
}
&__rules {
margin-left: 30px;
margin-inline-start: 30px;
}
}
@@ -1447,7 +1458,7 @@ a.sparkline {
height: 21px;
position: absolute;
bottom: 0;
right: 15px;
inset-inline-end: 15px;
background: linear-gradient(to left, $ui-base-color, transparent);
pointer-events: none;
}
@@ -1527,7 +1538,7 @@ a.sparkline {
background: $ui-base-color;
position: relative;
padding: 15px;
padding-left: 15px * 2 + 40px;
padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%);
&:first-child {
@@ -1547,7 +1558,7 @@ a.sparkline {
&__avatar {
position: absolute;
left: 15px;
inset-inline-start: 15px;
top: 15px;
border-radius: 4px;
width: 40px;
@@ -1563,7 +1574,7 @@ a.sparkline {
.username {
color: $primary-text-color;
font-weight: 500;
margin-right: 5px;
margin-inline-end: 5px;
a {
color: inherit;
@@ -1578,7 +1589,7 @@ a.sparkline {
}
time {
margin-left: 5px;
margin-inline-start: 5px;
vertical-align: baseline;
}
}
@@ -1613,8 +1624,8 @@ a.sparkline {
&__actions {
position: absolute;
top: 15px;
right: 15px;
text-align: right;
inset-inline-end: 15px;
text-align: end;
}
}
}
@@ -1637,7 +1648,7 @@ a.sparkline {
flex: 0 0 auto;
width: 200px;
padding: 15px;
padding-right: 0;
padding-inline-end: 0;
.button {
display: block;
@@ -1723,7 +1734,7 @@ a.sparkline {
&__rules {
list-style: disc;
padding-left: 15px;
padding-inline-start: 15px;
margin-bottom: 20px;
color: $darker-text-color;
@@ -1812,7 +1823,7 @@ a.sparkline {
li {
counter-increment: step 1;
padding-left: 2.5rem;
padding-inline-start: 2.5rem;
padding-bottom: 8px;
position: relative;
margin-bottom: 8px;
@@ -1822,7 +1833,7 @@ a.sparkline {
content: counter(step);
font-size: 0.625rem;
font-weight: 500;
left: 0;
inset-inline-start: 0;
display: flex;
justify-content: center;
align-items: center;
@@ -1841,7 +1852,7 @@ a.sparkline {
background: $highlight-text-color;
bottom: 0;
top: calc(1.875rem + 1px);
left: 0.6875rem;
inset-inline-start: 0.6875rem;
}
&:last-child {