treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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

Port babd86e594 and 45848d6547 to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
pull/59/head
Plastikmensch 2023-04-16 17:45:18 +02:00 committed by GitHub
parent 0cbd579ef0
commit f28942cef9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 349 additions and 579 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/styles/about.scss
View File

@ -28,14 +28,14 @@ $fluid-breakpoint: $maximum-width + 20px;
position: relative; position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
padding: 1em 1.75em; padding: 1em 1.75em;
padding-left: 3em; padding-inline-start: 3em;
font-weight: 500; font-weight: 500;
counter-increment: list-counter; counter-increment: list-counter;
&::before { &::before {
content: counter(list-counter); content: counter(list-counter);
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background: $highlight-text-color; background: $highlight-text-color;

2
app/javascript/flavours/glitch/styles/accessibility.scss
View File

@ -25,7 +25,7 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
content: '\F00C'; content: '\F00C';
font-size: 50%; font-size: 50%;
font-family: FontAwesome; font-family: FontAwesome;
right: -0.55em; inset-inline-end: -0.55em;
top: -0.44em; top: -0.44em;
} }
} }

12
app/javascript/flavours/glitch/styles/accounts.scss
View File

@ -73,8 +73,8 @@
} }
.display-name { .display-name {
margin-left: 15px; margin-inline-start: 15px;
text-align: left; text-align: start;
i[data-hidden] { i[data-hidden] {
display: none; display: none;
@ -139,21 +139,21 @@
.older { .older {
float: left; float: left;
padding-left: 0; padding-inline-start: 0;
.fa { .fa {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
} }
.newer { .newer {
float: right; float: right;
padding-right: 0; padding-inline-start: 0;
.fa { .fa {
display: inline-block; display: inline-block;
margin-left: 5px; margin-inline-start: 5px;
} }
} }

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

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

2
app/javascript/flavours/glitch/styles/basics.scss
View File

@ -266,7 +266,7 @@ button {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: -1000; z-index: -1000;
} }

4
app/javascript/flavours/glitch/styles/components/about.scss
View File

@ -5,7 +5,7 @@
&__preview { &__preview {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
@ -211,7 +211,7 @@
} }
.account__avatar-wrapper { .account__avatar-wrapper {
margin-left: 0; margin-inline-start: 0;
} }
.account__relationship { .account__relationship {

43
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

@ -31,7 +31,7 @@
padding: 0; padding: 0;
& > .account__avatar-wrapper { & > .account__avatar-wrapper {
margin: 0 8px 0 0; margin-inline-end: 8px;
} }
& > .display-name { & > .display-name {
@ -57,8 +57,8 @@
.account__avatar-wrapper { .account__avatar-wrapper {
float: left; float: left;
margin-left: 12px; margin-inline-start: 12px;
margin-right: 12px; margin-inline-end: 12px;
} }
.account__avatar { .account__avatar {
@ -74,7 +74,7 @@
&-inline { &-inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-inline-end: 5px;
} }
&-composite { &-composite {
@ -95,7 +95,7 @@
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; inset-inline-start: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: $primary-text-color; color: $primary-text-color;
text-shadow: 1px 1px 2px $base-shadow-color; text-shadow: 1px 1px 2px $base-shadow-color;
@ -128,7 +128,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; inset-inline-end: 0;
z-index: 1; z-index: 1;
img { img {
@ -198,12 +198,12 @@
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
flex: 0 1 100%; flex: 0 1 100%;
border-left: 1px solid lighten($ui-base-color, 8%); border-inline-start: 1px solid lighten($ui-base-color, 8%);
padding: 10px 0; padding: 10px 0;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
&:first-child { &:first-child {
border-left: 0; border-inline-start: 0;
} }
&.active { &.active {
@ -247,12 +247,12 @@
.account-authorize__avatar { .account-authorize__avatar {
float: left; float: left;
margin-right: 10px; margin-inline-end: 10px;
} }
.notification__report { .notification__report {
padding: 8px 10px; padding: 8px 10px;
padding-left: 68px; padding-inline-start: 68px;
position: relative; position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
min-height: 54px; min-height: 54px;
@ -272,14 +272,15 @@
&__avatar { &__avatar {
position: absolute; position: absolute;
left: 10px; inset-inline-start: 10px;
top: 10px; top: 10px;
} }
} }
.notification__message { .notification__message {
margin-left: 42px; margin-inline-start: 42px;
padding: 8px 0 0 26px; padding-top:8px;
padding-inline-start: 26px;
cursor: default; cursor: default;
color: $darker-text-color; color: $darker-text-color;
font-size: 15px; font-size: 15px;
@ -346,7 +347,7 @@
&__icons { &__icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; inset-inline-start: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 24px; font-size: 24px;
} }
@ -387,7 +388,7 @@
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; inset-inline-start: 50%;
width: 0; width: 0;
height: 0; height: 0;
transform: translateX(-50%); transform: translateX(-50%);
@ -431,7 +432,7 @@
&__message { &__message {
position: relative; position: relative;
margin-left: 58px; margin-inline-start: 58px;
color: $dark-text-color; color: $dark-text-color;
padding: 8px 0; padding: 8px 0;
padding-top: 0; padding-top: 0;
@ -446,7 +447,7 @@
} }
&__icon-wrapper { &__icon-wrapper {
left: -26px; inset-inline-start: -26px;
position: absolute; position: absolute;
} }
@ -500,7 +501,7 @@
&__info { &__info {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; inset-inline-start: 10px;
} }
&__image { &__image {
@ -544,7 +545,7 @@
margin-top: -81px; margin-top: -81px;
height: 130px; height: 130px;
overflow: hidden; overflow: hidden;
margin-left: -2px; // aligns the pfp with content below margin-inline-start: -2px; // aligns the pfp with content below
.account-role { .account-role {
margin: 0 2px; margin: 0 2px;
@ -635,8 +636,8 @@
color: $darker-text-color; color: $darker-text-color;
.columns-area--mobile & { .columns-area--mobile & {
padding-left: 20px; padding-inline-start: 20px;
padding-right: 20px; padding-inline-end: 20px;
} }
} }

10
app/javascript/flavours/glitch/styles/components/announcements.scss
View File

@ -84,13 +84,13 @@
display: block; display: block;
font-weight: 500; font-weight: 500;
margin-bottom: 10px; margin-bottom: 10px;
padding-right: 18px; padding-inline-end: 18px;
} }
&__unread { &__unread {
position: absolute; position: absolute;
top: 19px; top: 19px;
right: 19px; inset-inline-end: 19px;
display: block; display: block;
background: $highlight-text-color; background: $highlight-text-color;
border-radius: 50%; border-radius: 50%;
@ -104,7 +104,7 @@
color: $darker-text-color; color: $darker-text-color;
position: absolute; position: absolute;
bottom: 3px; bottom: 3px;
right: 0; inset-inline-end: 0;
} }
} }
@ -121,7 +121,7 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin-top: 15px; margin-top: 15px;
margin-left: -2px; margin-inline-start: -2px;
width: calc(100% - (90px - 33px)); width: calc(100% - (90px - 33px));
&__item { &__item {
@ -162,7 +162,7 @@
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
margin-left: 6px; margin-inline-start: 6px;
color: $darker-text-color; color: $darker-text-color;
} }

42
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -182,7 +182,8 @@ $ui-header-height: 55px;
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
padding: 0 5px 0 0; padding: 0;
padding-inline-end: 5px;
z-index: 3; z-index: 3;
&:hover { &:hover {
@ -190,13 +191,14 @@ $ui-header-height: 55px;
} }
&:last-child { &:last-child {
padding: 0 15px 0 0; padding: 0;
padding-inline-end: 15px;;
} }
} }
.column-back-button__icon { .column-back-button__icon {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
.column-back-button--slim { .column-back-button--slim {
@ -209,7 +211,7 @@ $ui-header-height: 55px;
font-size: 16px; font-size: 16px;
padding: 15px; padding: 15px;
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
top: -48px; top: -48px;
} }
@ -263,7 +265,7 @@ $ui-header-height: 55px;
.column-link__icon { .column-link__icon {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
.column-subheading { .column-subheading {
@ -289,8 +291,8 @@ $ui-header-height: 55px;
content: ''; content: '';
position: absolute; position: absolute;
bottom: -13px; bottom: -13px;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
margin: 0 auto; margin: 0 auto;
width: 60%; width: 60%;
pointer-events: none; pointer-events: none;
@ -329,7 +331,7 @@ $ui-header-height: 55px;
color: inherit; color: inherit;
background: transparent; background: transparent;
font: inherit; font: inherit;
text-align: left; text-align: start;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -377,7 +379,7 @@ $ui-header-height: 55px;
.column-header__buttons { .column-header__buttons {
height: 48px; height: 48px;
display: flex; display: flex;
margin-left: 0; margin-inline-start: 0;
} }
.column-header__links { .column-header__links {
@ -385,7 +387,7 @@ $ui-header-height: 55px;
} }
.column-header__links .text-btn { .column-header__links .text-btn {
margin-right: 10px; margin-inline-end: 10px;
} }
.column-header__button { .column-header__button {
@ -444,7 +446,7 @@ $ui-header-height: 55px;
@media screen and (min-width: $no-gap-breakpoint) { @media screen and (min-width: $no-gap-breakpoint) {
b, b,
i { i {
margin-right: 5px; margin-inline-end: 5px;
} }
br { br {
@ -530,12 +532,12 @@ $ui-header-height: 55px;
padding: 5px; padding: 5px;
&:first-child { &:first-child {
padding-right: 7px; padding-inline-end: 7px;
} }
&:last-child { &:last-child {
padding-left: 7px; padding-inline-start: 7px;
margin-left: 5px; margin-inline-start: 5px;
} }
} }
} }
@ -559,7 +561,7 @@ $ui-header-height: 55px;
.column-header__icon { .column-header__icon {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
.column-settings__pillbar { .column-settings__pillbar {
@ -725,7 +727,7 @@ $ui-header-height: 55px;
.column-inline-form { .column-inline-form {
padding: 7px 15px; padding: 7px 15px;
padding-right: 5px; padding-inline-end: 5px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
@ -801,12 +803,12 @@ $ui-header-height: 55px;
&__placeholder { &__placeholder {
color: $dark-text-color; color: $dark-text-color;
padding-left: 2px; padding-inline-start: 2px;
font-size: 12px; font-size: 12px;
} }
&__value-container { &__value-container {
padding-left: 6px; padding-inline-start: 6px;
} }
&__multi-value { &__multi-value {
@ -889,7 +891,7 @@ $ui-header-height: 55px;
&__close { &__close {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; inset-inline-end: 10px;
} }
h2 { h2 {
@ -948,7 +950,7 @@ $ui-header-height: 55px;
&__background { &__background {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
height: 220px; height: 220px;
width: auto; width: auto;

29
app/javascript/flavours/glitch/styles/components/compose_form.scss
View File

@ -4,7 +4,7 @@
.emoji-picker-dropdown { .emoji-picker-dropdown {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active { ::-webkit-scrollbar-track:active {
@ -113,8 +113,8 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
flex: 0 0 auto; flex: 0 0 auto;
margin-left: 5px; margin-inline-start: 5px;
margin-right: 10px; margin-inline-end: 10px;
top: -1px; top: -1px;
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
@ -254,13 +254,14 @@
display: block; display: block;
position: absolute; position: absolute;
top: 29px; top: 29px;
right: 5px; inset-inline-end: 5px;
bottom: 5px; bottom: 5px;
overflow: hidden; overflow: hidden;
& > .textarea_icon { & > .textarea_icon {
display: block; display: block;
margin: 2px 0 0 2px; margin-top: 2px;
margin-inline-start: 2px;
width: 24px; width: 24px;
height: 24px; height: 24px;
color: $lighter-text-color; color: $lighter-text-color;
@ -334,7 +335,7 @@
&__uses { &__uses {
flex: 0 0 auto; flex: 0 0 auto;
text-align: right; text-align: end;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -403,8 +404,8 @@
position: absolute; position: absolute;
z-index: 2; z-index: 2;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
@ -435,7 +436,7 @@
.fa { .fa {
font-size: 34px; font-size: 34px;
margin-right: 10px; margin-inline-end: 10px;
} }
span { span {
@ -462,7 +463,7 @@
.upload-progress__tracker { .upload-progress__tracker {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
height: 6px; height: 6px;
border-radius: 6px; border-radius: 6px;
background: $ui-highlight-color; background: $ui-highlight-color;
@ -515,7 +516,7 @@
.character-counter__wrapper { .character-counter__wrapper {
align-self: center; align-self: center;
margin-right: 4px; margin-inline-end: 4px;
} }
.privacy-dropdown.active { .privacy-dropdown.active {
@ -567,7 +568,7 @@
color: $lighter-text-color; color: $lighter-text-color;
&:not(:first-child) { &:not(:first-child) {
margin-left: 10px; margin-inline-start: 10px;
} }
strong { strong {
@ -635,11 +636,11 @@
} }
.emoji-mart-search { .emoji-mart-search {
padding-right: 10px; padding-inline-end: 10px;
} }
.emoji-mart-search-icon { .emoji-mart-search-icon {
right: 10px + 5px; inset-inline-end: 10px + 5px;
} }
.emoji-mart-scroll { .emoji-mart-scroll {

2
app/javascript/flavours/glitch/styles/components/directory.scss
View File

@ -55,7 +55,7 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 10px; margin-inline-end: 10px;
top: -1px; top: -1px;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;

8
app/javascript/flavours/glitch/styles/components/doodle.scss
View File

@ -35,8 +35,8 @@ $doodle-background: #d9e1e8;
label { label {
display: inline-block; display: inline-block;
width: 70px; width: 70px;
text-align: right; text-align: end;
margin-right: 2px; margin-inline-end: 2px;
} }
input[type='number'], input[type='number'],
@ -46,14 +46,14 @@ $doodle-background: #d9e1e8;
span.val { span.val {
display: inline-block; display: inline-block;
text-align: left; text-align: start;
width: 50px; width: 50px;
} }
} }
} }
.doodle-palette { .doodle-palette {
padding-right: 0 !important; padding-inline-end: 0 !important;
border: 1px solid black; border: 1px solid black;
line-height: 0.2rem; line-height: 0.2rem;
flex-grow: 0; flex-grow: 0;

14
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@ -8,11 +8,11 @@
flex: none; flex: none;
&:first-child { &:first-child {
padding-left: 10px; padding-inline-start: 10px;
} }
&:last-child { &:last-child {
padding-right: 10px; padding-inline-end: 10px;
} }
@include single-column('screen and (max-width: 630px)') { @include single-column('screen and (max-width: 630px)') {
@ -126,7 +126,7 @@
.navigation-bar__profile { .navigation-bar__profile {
flex: 1 1 auto; flex: 1 1 auto;
margin-left: 8px; margin-inline-start: 8px;
overflow: hidden; overflow: hidden;
} }
@ -150,7 +150,7 @@
.fa { .fa {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
} }
@ -187,7 +187,7 @@
.drawer__inner { .drawer__inner {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
background: lighten($ui-base-color, 13%); background: lighten($ui-base-color, 13%);
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -237,14 +237,14 @@
.pseudo-drawer { .pseudo-drawer {
background: lighten($ui-base-color, 13%); background: lighten($ui-base-color, 13%);
font-size: 13px; font-size: 13px;
text-align: left; text-align: start;
} }
.drawer__backdrop { .drawer__backdrop {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba($base-overlay-background, 0.5); background: rgba($base-overlay-background, 0.5);

9
app/javascript/flavours/glitch/styles/components/emoji.scss
View File

@ -31,7 +31,7 @@
.emoji-picker-dropdown__modifiers { .emoji-picker-dropdown__modifiers {
position: absolute; position: absolute;
top: 60px; top: 60px;
right: 11px; inset-inline-end: 11px;
cursor: pointer; cursor: pointer;
} }
@ -39,7 +39,7 @@
position: absolute; position: absolute;
z-index: 4; z-index: 4;
top: -4px; top: -4px;
left: -8px; inset-inline-start: -8px;
background: $simple-background-color; background: $simple-background-color;
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
@ -72,7 +72,10 @@
.emoji-button { .emoji-button {
display: block; display: block;
padding: 5px 5px 2px 2px; padding-top: 5px;
padding-bottom: 2px;
padding-inline-start: 2px;
padding-inline-end: 5px;
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;

10
app/javascript/flavours/glitch/styles/components/emoji_picker.scss
View File

@ -71,7 +71,7 @@
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
position: absolute; position: absolute;
bottom: -3px; bottom: -3px;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: darken($ui-highlight-color, 3%); background-color: darken($ui-highlight-color, 3%);
@ -106,7 +106,7 @@
.emoji-mart-search { .emoji-mart-search {
padding: 10px; padding: 10px;
padding-right: 45px; padding-inline-end: 45px;
background: $simple-background-color; background: $simple-background-color;
position: relative; position: relative;
@ -114,7 +114,7 @@
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
padding: 7px 9px; padding: 7px 9px;
padding-right: 25px; padding-inline-end: 25px;
font-family: inherit; font-family: inherit;
display: block; display: block;
width: 100%; width: 100%;
@ -142,7 +142,7 @@
.emoji-mart-search-icon { .emoji-mart-search-icon {
position: absolute; position: absolute;
top: 18px; top: 18px;
right: 45px + 5px; inset-inline-end: 45px + 5px;
z-index: 2; z-index: 2;
padding: 2px 5px 1px; padding: 2px 5px 1px;
border: 0; border: 0;
@ -177,7 +177,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba($ui-secondary-color, 0.7); background-color: rgba($ui-secondary-color, 0.7);

4
app/javascript/flavours/glitch/styles/components/error_boundary.scss
View File

@ -17,8 +17,8 @@
ul { ul {
list-style: disc; list-style: disc;
margin-left: 0; margin-inline-start: 0;
padding-left: 1em; padding-inline-start: 1em;
} }
textarea.web_app_crash-stacktrace { textarea.web_app_crash-stacktrace {

4
app/javascript/flavours/glitch/styles/components/explore.scss
View File

@ -20,7 +20,7 @@
.search .fa { .search .fa {
top: 10px; top: 10px;
right: 10px; inset-inline-end: 10px;
color: $dark-text-color; color: $dark-text-color;
} }
@ -104,7 +104,7 @@
object-fit: fill; object-fit: fill;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 0; z-index: 0;
&--hidden { &--hidden {

6
app/javascript/flavours/glitch/styles/components/local_settings.scss
View File

@ -20,12 +20,12 @@
.boolean label, .boolean label,
.radio_buttons label { .radio_buttons label {
position: relative; position: relative;
padding-left: 28px; padding-inline-start: 28px;
padding-top: 3px; padding-top: 3px;
input { input {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 0; top: 0;
} }
} }
@ -149,7 +149,7 @@
ul { ul {
padding: 10px; padding: 10px;
margin-left: 12px; margin-inline-start: 12px;
list-style: disc inside; list-style: disc inside;
} }

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

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

80
app/javascript/flavours/glitch/styles/components/misc.scss
View File

@ -281,13 +281,15 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
width: auto !important; width: auto !important;
padding: 0 4px 0 2px; padding: 0;
padding-inline-end: 4px;
padding-inline-start: 2px;
} }
&__counter { &__counter {
display: inline-block; display: inline-block;
width: auto; width: auto;
margin-left: 4px; margin-inline-start: 4px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
@ -375,7 +377,7 @@ body > [data-popper-placement] {
} }
.notification__favourite-icon-wrapper { .notification__favourite-icon-wrapper {
left: 0; inset-inline-start: 0;
position: absolute; position: absolute;
.fa.star-icon { .fa.star-icon {
@ -654,7 +656,7 @@ body > [data-popper-placement] {
} }
&.right { &.right {
left: -9px; inset-inline-start: -9px;
&::before { &::before {
transform: rotate(-90deg); transform: rotate(-90deg);
@ -666,7 +668,7 @@ body > [data-popper-placement] {
} }
&.left { &.left {
right: -9px; inset-inline-end: -9px;
&::before { &::before {
transform: rotate(90deg); transform: rotate(90deg);
@ -749,8 +751,8 @@ body > [data-popper-placement] {
display: block; display: block;
line-height: 18px; line-height: 18px;
max-width: 311px; max-width: 311px;
right: 0; inset-inline-end: 0;
text-align: left; text-align: start;
z-index: 9999; z-index: 9999;
& > ul { & > ul {
@ -764,12 +766,12 @@ body > [data-popper-placement] {
} }
&.dropdown__right { &.dropdown__right {
right: 0; inset-inline-end: 0;
} }
&.dropdown__left { &.dropdown__left {
& > ul { & > ul {
left: -98px; inset-inline-start: -98px;
} }
} }
@ -834,23 +836,23 @@ body > [data-popper-placement] {
.drawer { .drawer {
flex: 0 0 auto; flex: 0 0 auto;
padding: 10px; padding: 10px;
padding-left: 5px; padding-inline-start: 5px;
padding-right: 5px; padding-inline-end: 5px;
&:first-child { &:first-child {
padding-left: 10px; padding-inline-start: 10px;
} }
&:last-child { &:last-child {
padding-right: 10px; padding-inline-end: 10px;
} }
} }
.columns-area > div { .columns-area > div {
.column, .column,
.drawer { .drawer {
padding-left: 5px; padding-inline-start: 5px;
padding-right: 5px; padding-inline-end: 5px;
} }
} }
} }
@ -897,12 +899,12 @@ body > [data-popper-placement] {
} }
span { span {
margin-left: 5px; margin-inline-start: 5px;
display: none; display: none;
} }
span.icon { span.icon {
margin-left: 0; margin-inline-start: 0;
display: inline; display: inline;
} }
} }
@ -912,7 +914,7 @@ body > [data-popper-placement] {
&__badge { &__badge {
position: absolute; position: absolute;
left: 9px; inset-inline-start: 9px;
top: -13px; top: -13px;
background: $ui-highlight-color; background: $ui-highlight-color;
border: 2px solid lighten($ui-base-color, 8%); border: 2px solid lighten($ui-base-color, 8%);
@ -926,7 +928,7 @@ body > [data-popper-placement] {
&__issue-badge { &__issue-badge {
position: absolute; position: absolute;
left: 11px; inset-inline-start: 11px;
bottom: 1px; bottom: 1px;
display: block; display: block;
background: $error-red; background: $error-red;
@ -1039,7 +1041,7 @@ body > [data-popper-placement] {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
line-height: 0; line-height: 0;
left: 8px; inset-inline-start: 8px;
opacity: 0; opacity: 0;
transition: opacity 0.25s ease; transition: opacity 0.25s ease;
} }
@ -1058,7 +1060,7 @@ body > [data-popper-placement] {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
line-height: 0; line-height: 0;
right: 10px; inset-inline-end: 10px;
opacity: 1; opacity: 1;
transition: opacity 0.25s ease; transition: opacity 0.25s ease;
} }
@ -1070,7 +1072,7 @@ body > [data-popper-placement] {
.react-toggle-thumb { .react-toggle-thumb {
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 1px; inset-inline-start: 1px;
width: 22px; width: 22px;
height: 22px; height: 22px;
border: 1px solid $ui-base-color; border: 1px solid $ui-base-color;
@ -1082,7 +1084,7 @@ body > [data-popper-placement] {
} }
.react-toggle--checked .react-toggle-thumb { .react-toggle--checked .react-toggle-thumb {
left: 27px; inset-inline-start: 27px;
border-color: $ui-highlight-color; border-color: $ui-highlight-color;
} }
@ -1176,7 +1178,7 @@ body > [data-popper-placement] {
thead { thead {
position: absolute; position: absolute;
left: -9999px; inset-inline-start: -9999px;
} }
td { td {
@ -1318,9 +1320,9 @@ button.icon-button.active i.fa-retweet {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: -1px; bottom: -1px;
padding-left: 15px; // space for the box shadow to be visible padding-inline-start: 15px; // space for the box shadow to be visible
z-index: 999; z-index: 999;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -1335,7 +1337,7 @@ button.icon-button.active i.fa-retweet {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
border-left: 1px solid lighten($ui-base-color, 20%); border-inline-start: 1px solid lighten($ui-base-color, 20%);
box-shadow: 0 0 5px black; box-shadow: 0 0 5px black;
border-bottom: 1px solid $ui-base-color; border-bottom: 1px solid $ui-base-color;
} }
@ -1381,7 +1383,7 @@ button.icon-button.active i.fa-retweet {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; inset-inline-start: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
align-items: center; align-items: center;
@ -1473,7 +1475,7 @@ button.icon-button.active i.fa-retweet {
.spoiler-button { .spoiler-button {
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -1481,7 +1483,7 @@ button.icon-button.active i.fa-retweet {
&--minified { &--minified {
display: flex; display: flex;
left: 4px; inset-inline-start: 4px;
top: 4px; top: 4px;
width: auto; width: auto;
height: auto; height: auto;
@ -1539,7 +1541,7 @@ button.icon-button.active i.fa-retweet {
color: $darker-text-color; color: $darker-text-color;
display: inline-block; display: inline-block;
margin-bottom: 14px; margin-bottom: 14px;
margin-left: 8px; margin-inline-start: 8px;
vertical-align: middle; vertical-align: middle;
} }
@ -1589,7 +1591,7 @@ button.icon-button.active i.fa-retweet {
display: flex; display: flex;
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;
left: 0; inset-inline-start: 0;
opacity: 0; opacity: 0;
position: fixed; position: fixed;
top: 0; top: 0;
@ -1614,9 +1616,9 @@ button.icon-button.active i.fa-retweet {
.upload-area__background { .upload-area__background {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
z-index: -1; z-index: -1;
border-radius: 4px; border-radius: 4px;
background: $ui-base-color; background: $ui-base-color;
@ -1646,7 +1648,7 @@ button.icon-button.active i.fa-retweet {
height: 3px; height: 3px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 9999; z-index: 9999;
} }
@ -1657,7 +1659,7 @@ button.icon-button.active i.fa-retweet {
.icon-badge { .icon-badge {
position: absolute; position: absolute;
display: block; display: block;
right: -0.25em; inset-inline-end: -0.25em;
top: -0.25em; top: -0.25em;
background-color: $ui-highlight-color; background-color: $ui-highlight-color;
border-radius: 50%; border-radius: 50%;
@ -1710,7 +1712,7 @@ button.icon-button.active i.fa-retweet {
&__relative-time { &__relative-time {
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: $darker-text-color;
padding-left: 15px; padding-inline-start: 15px;
} }
&__names { &__names {
@ -1759,8 +1761,8 @@ button.icon-button.active i.fa-retweet {
.ui .flash-message { .ui .flash-message {
margin-top: 10px; margin-top: 10px;
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
margin-bottom: 0; margin-bottom: 0;
min-width: 75%; min-width: 75%;
} }

54
app/javascript/flavours/glitch/styles/components/modal.scss
View File

@ -10,8 +10,8 @@
.modal-root__overlay { .modal-root__overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
background: rgba($base-overlay-background, 0.7); background: rgba($base-overlay-background, 0.7);
transition: background 0.5s; transition: background 0.5s;
@ -20,7 +20,7 @@
.modal-root__container { .modal-root__container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -41,7 +41,7 @@
.media-modal__zoom-button { .media-modal__zoom-button {
position: absolute; position: absolute;
right: 64px; inset-inline-end: 64px;
top: 8px; top: 8px;
z-index: 100; z-index: 100;
pointer-events: auto; pointer-events: auto;
@ -93,7 +93,7 @@
& > div { & > div {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -292,8 +292,8 @@
} }
&__extra { &__extra {
padding-right: 65px; padding-inline-end: 65px;
padding-left: 185px; padding-inline-start: 185px;
text-align: center; text-align: center;
} }
} }
@ -325,7 +325,7 @@
.onboarding-modal__page-four, .onboarding-modal__page-four,
.onboarding-modal__page-five { .onboarding-modal__page-five {
p { p {
text-align: left; text-align: start;
} }
.figure { .figure {
@ -345,7 +345,7 @@
&.non-interactive { &.non-interactive {
pointer-events: none; pointer-events: none;
text-align: left; text-align: start;
} }
} }
} }
@ -360,11 +360,11 @@
margin: 0 10px; margin: 0 10px;
&:first-child { &:first-child {
margin-left: 0; margin-inline-start: 0;
} }
&:last-child { &:last-child {
margin-right: 0; margin-inline-end: 0;
} }
p { p {
@ -410,7 +410,7 @@
display: inline-block; display: inline-block;
max-width: 30px; max-width: 30px;
max-height: auto; max-height: auto;
margin-left: 10px; margin-inline-start: 10px;
} }
.boost-modal, .boost-modal,
@ -497,9 +497,9 @@
& > div { & > div {
flex: 1 1 auto; flex: 1 1 auto;
text-align: right; text-align: end;
color: $lighter-text-color; color: $lighter-text-color;
padding-right: 10px; padding-inline-end: 10px;
} }
.button { .button {
@ -711,7 +711,7 @@
& > span { & > span {
font-size: 17px; font-size: 17px;
font-weight: 500; font-weight: 500;
margin-left: 10px; margin-inline-start: 10px;
} }
} }
@ -735,11 +735,11 @@
} }
.emoji-mart-search { .emoji-mart-search {
padding-right: 10px; padding-inline-end: 10px;
} }
.emoji-mart-search-icon { .emoji-mart-search-icon {
right: 10px + 5px; inset-inline-end: 10px + 5px;
} }
} }
@ -797,7 +797,7 @@
.report-modal__comment { .report-modal__comment {
padding: 20px; padding: 20px;
border-right: 1px solid $ui-secondary-color; border-inline-end: 1px solid $ui-secondary-color;
max-width: 320px; max-width: 320px;
p { p {
@ -947,7 +947,7 @@
& > .react-toggle, & > .react-toggle,
& > .icon, & > .icon,
button:first-child { button:first-child {
margin-right: 10px; margin-inline-end: 10px;
} }
} }
} }
@ -980,8 +980,8 @@
} }
.confirmation-modal__do_not_ask_again { .confirmation-modal__do_not_ask_again {
padding-left: 20px; padding-inline-start: 20px;
padding-right: 20px; padding-inline-end: 20px;
padding-bottom: 10px; padding-bottom: 10px;
font-size: 14px; font-size: 14px;
@ -1023,7 +1023,7 @@
border: 1px solid darken($simple-background-color, 14%); border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
padding-right: 30px; padding-inline-end: 30px;
} }
} }
@ -1047,7 +1047,7 @@
&__label { &__label {
color: $inverted-text-color; color: $inverted-text-color;
margin: 0; margin: 0;
margin-left: 8px; margin-inline-start: 8px;
} }
} }
} }
@ -1058,7 +1058,7 @@
.report-modal__close { .report-modal__close {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; inset-inline-end: 10px;
} }
} }
@ -1204,13 +1204,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
} }
&__preview { &__preview {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
right: 10px; inset-inline-end: 10px;
z-index: 2; z-index: 2;
cursor: move; cursor: move;
transition: opacity 0.1s ease; transition: opacity 0.1s ease;
@ -1270,7 +1270,7 @@
ul { ul {
padding: 10px; padding: 10px;
margin-left: 12px; margin-inline-start: 12px;
list-style: disc inside; list-style: disc inside;
} }

6
app/javascript/flavours/glitch/styles/components/privacy_policy.scss
View File

@ -89,7 +89,7 @@
&::before { &::before {
content: counter(list-counter) '.'; content: counter(list-counter) '.';
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
} }
} }
@ -101,13 +101,13 @@
width: 0.375em; width: 0.375em;
height: 0.375em; height: 0.375em;
top: 0.5em; top: 0.5em;
left: 0.25em; inset-inline-start: 0.25em;
} }
ul > li, ul > li,
ol > li { ol > li {
position: relative; position: relative;
padding-left: 1.75em; padding-inline-start: 1.75em;
} }
& > ul > li p { & > ul > li p {

10
app/javascript/flavours/glitch/styles/components/search.scss
View File

@ -8,7 +8,7 @@
display: block; display: block;
padding: 15px; padding: 15px;
padding-right: 30px; padding-inline-end: 30px;
line-height: 18px; line-height: 18px;
font-size: 16px; font-size: 16px;
@ -44,7 +44,7 @@
.fa { .fa {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 10px; inset-inline-end: 10px;
z-index: 2; z-index: 2;
display: inline-block; display: inline-block;
opacity: 0; opacity: 0;
@ -98,7 +98,7 @@
.fa { .fa {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
} }
@ -120,7 +120,7 @@
.fa { .fa {
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
} }
} }
@ -170,7 +170,7 @@
flex: 0 0 auto; flex: 0 0 auto;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
text-align: right; text-align: end;
color: $secondary-text-color; color: $secondary-text-color;
text-decoration: none; text-decoration: none;
} }

2
app/javascript/flavours/glitch/styles/components/sensitive.scss
View File

@ -4,7 +4,7 @@
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; inset-inline-start: 4px;
z-index: 100; z-index: 100;
} }

2
app/javascript/flavours/glitch/styles/components/signed_out.scss
View File

@ -101,7 +101,7 @@
} }
.account__avatar-wrapper { .account__avatar-wrapper {
margin-left: 0; margin-inline-start: 0;
} }
.spacer { .spacer {

11
app/javascript/flavours/glitch/styles/components/single_column.scss
View File

@ -30,7 +30,7 @@
line-height: 18px; line-height: 18px;
font-size: 16px; font-size: 16px;
padding: 15px; padding: 15px;
padding-right: 30px; padding-inline-end: 30px;
} }
.search__icon .fa { .search__icon .fa {
@ -130,7 +130,7 @@
line-height: 18px; line-height: 18px;
font-size: 16px; font-size: 16px;
padding: 15px; padding: 15px;
padding-right: 30px; padding-inline-end: 30px;
} }
.search__icon .fa { .search__icon .fa {
@ -174,11 +174,12 @@
} }
.notification__report { .notification__report {
padding: 15px 15px 15px (48px + 15px * 2); padding: 15px;
padding-inline-start: (48px + 15px * 2);
min-height: 48px + 2px; min-height: 48px + 2px;
&__avatar { &__avatar {
left: 15px; inset-inline-start: 15px;
top: 17px; top: 17px;
} }
} }
@ -265,7 +266,7 @@
.navigation-panel { .navigation-panel {
margin: 0; margin: 0;
background: $ui-base-color; background: $ui-base-color;
border-left: 1px solid lighten($ui-base-color, 8%); border-inline-start: 1px solid lighten($ui-base-color, 8%);
height: 100vh; height: 100vh;
} }

64
app/javascript/flavours/glitch/styles/components/status.scss
View File

@ -164,9 +164,10 @@
.status__content__spoiler-icon { .status__content__spoiler-icon {
display: inline-block; display: inline-block;
margin: 0 0 0 5px; margin-inline-start: 5px;
border-left: 1px solid currentColor; border-inline-start: 1px solid currentColor;
padding: 0 0 0 4px; padding: 0;
padding-inline-start: 4px;
font-size: 16px; font-size: 16px;
vertical-align: -2px; vertical-align: -2px;
} }
@ -195,7 +196,7 @@
} }
.status__prepend-icon-wrapper { .status__prepend-icon-wrapper {
left: -26px; inset-inline-start: -26px;
position: absolute; position: absolute;
} }
@ -241,7 +242,7 @@
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) { @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
// Add margin to avoid Edge auto-hiding scrollbar appearing over content. // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
padding-right: 28px; // 12px + 16px padding-inline-end: 28px; // 12px + 16px
} }
@keyframes fade { @keyframes fade {
@ -310,8 +311,8 @@
&.has-background::before { &.has-background::before {
display: block; display: block;
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-image: linear-gradient( background-image: linear-gradient(
@ -339,8 +340,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
background: linear-gradient( background: linear-gradient(
rgba($ui-base-color, 0), rgba($ui-base-color, 0),
rgba($ui-base-color, 1) rgba($ui-base-color, 1)
@ -395,7 +396,7 @@
display: inline-block; display: inline-block;
color: $dark-text-color; color: $dark-text-color;
font-size: 14px; font-size: 14px;
text-align: right; text-align: end;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -436,8 +437,8 @@
.status__visibility-icon, .status__visibility-icon,
.status__reply-icon, .status__reply-icon,
.text-icon { .text-icon {
padding-left: 2px; padding-inline-start: 2px;
padding-right: 2px; padding-inline-end: 2px;
} }
.status__collapse-button.active > .fa-angle-double-up { .status__collapse-button.active > .fa-angle-double-up {
@ -503,7 +504,7 @@
.status__prepend { .status__prepend {
margin-top: -2px; margin-top: -2px;
margin-bottom: 8px; margin-bottom: 8px;
margin-left: 58px; margin-inline-start: 58px;
color: $dark-text-color; color: $dark-text-color;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
@ -526,10 +527,10 @@
} }
.status__action-bar-button { .status__action-bar-button {
margin-right: 18px; margin-inline-end: 18px;
&.icon-button--with-counter { &.icon-button--with-counter {
margin-right: 14px; margin-inline-end: 14px;
} }
} }
@ -610,7 +611,7 @@
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 17px; line-height: 17px;
margin-left: 6px; margin-inline-start: 6px;
} }
.status__display-name, .status__display-name,
@ -681,12 +682,12 @@ a.status__display-name,
.detailed-status__display-avatar { .detailed-status__display-avatar {
float: left; float: left;
margin-right: 10px; margin-inline-end: 10px;
} }
.status__avatar { .status__avatar {
flex: none; flex: none;
margin: 0 10px 0 0; margin-inline-end: 10px;
height: 48px; height: 48px;
width: 48px; width: 48px;
} }
@ -739,9 +740,9 @@ a.status__display-name,
&__actions { &__actions {
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
top: 0; top: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -826,7 +827,8 @@ a.status-card {
.status-card__content { .status-card__content {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
padding: 14px 14px 14px 8px; padding: 14px;
padding-inline-start: 8px;
} }
.status-card__description { .status-card__description {
@ -852,7 +854,7 @@ a.status-card {
position: absolute; position: absolute;
transform-origin: 50% 50%; transform-origin: 50% 50%;
top: 50%; top: 50%;
left: 50%; inset-inline-start: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
@ -919,7 +921,7 @@ a.status-card.compact:hover {
object-fit: fill; object-fit: fill;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 0; z-index: 0;
background: $base-overlay-background; background: $base-overlay-background;
@ -941,7 +943,7 @@ a.status-card.compact:hover {
color: $dark-text-color; color: $dark-text-color;
padding: 8px 18px; padding: 8px 18px;
cursor: default; cursor: default;
border-right: 1px solid lighten($ui-base-color, 8%); border-inline-end: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -956,7 +958,7 @@ a.status-card.compact:hover {
&__list { &__list {
list-style: none; list-style: none;
padding: 4px 0; padding: 4px 0;
padding-left: 8px; padding-inline-start: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -1016,10 +1018,10 @@ a.status-card.compact:hover {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-left: 4px solid $highlight-text-color; border-inline-start: 4px solid $highlight-text-color;
pointer-events: none; pointer-events: none;
} }
} }
@ -1028,12 +1030,12 @@ a.status-card.compact:hover {
.picture-in-picture { .picture-in-picture {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; inset-inline-end: 20px;
width: 300px; width: 300px;
&.left { &.left {
right: unset; inset-inline-end: unset;
left: 20px; inset-inline-start: 20px;
} }
&__footer { &__footer {
@ -1059,7 +1061,7 @@ a.status-card.compact:hover {
} }
.account__avatar { .account__avatar {
margin-right: 10px; margin-inline-end: 10px;
} }
.display-name { .display-name {

6
app/javascript/flavours/glitch/styles/containers.scss
View File

@ -18,7 +18,7 @@
.logo { .logo {
height: 42px; height: 42px;
margin-right: 10px; margin-inline-end: 10px;
} }
a { a {
@ -75,7 +75,7 @@
height: 40px; height: 40px;
@include avatar-size(40px); @include avatar-size(40px);
margin-right: 10px; margin-inline-end: 10px;
img { img {
width: 100%; width: 100%;
@ -104,6 +104,6 @@
display: block; display: block;
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
margin-left: 10px; margin-inline-start: 10px;
} }
} }

37
app/javascript/flavours/glitch/styles/forms.scss
View File

@ -54,12 +54,12 @@ code {
.radio > label { .radio > label {
position: relative; position: relative;
padding-left: 28px; padding-inline-start: 28px;
input { input {
position: absolute; position: absolute;
top: -2px; top: -2px;
left: 0; inset-inline-start: 0;
} }
} }
} }
@ -79,7 +79,7 @@ code {
.label_input, .label_input,
.hint { .hint {
padding-left: 28px; padding-inline-start: 28px;
} }
.label_input__wrapper { .label_input__wrapper {
@ -89,7 +89,7 @@ code {
label.checkbox { label.checkbox {
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 0; inset-inline-start: 0;
} }
label a { label a {
@ -160,7 +160,7 @@ code {
li { li {
list-style: disc; list-style: disc;
margin-left: 18px; margin-inline-start: 18px;
} }
} }
@ -226,7 +226,7 @@ code {
&.select .hint { &.select .hint {
margin-top: 6px; margin-top: 6px;
margin-left: 150px; margin-inline-start: 150px;
} }
} }
@ -381,13 +381,13 @@ code {
width: auto; width: auto;
position: relative; position: relative;
padding-top: 5px; padding-top: 5px;
padding-left: 25px; padding-inline-start: 25px;
flex: 1 1 auto; flex: 1 1 auto;
} }
input[type='checkbox'] { input[type='checkbox'] {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 5px; top: 5px;
margin: 0; margin: 0;
} }
@ -518,10 +518,10 @@ code {
font-weight: 500; font-weight: 500;
outline: 0; outline: 0;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 10px; margin-inline-end: 10px;
&:last-child { &:last-child {
margin-right: 0; margin-inline-end: 0;
} }
&:active, &:active,
@ -573,8 +573,8 @@ code {
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%); border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px; border-radius: 4px;
padding-left: 10px; padding-inline-start: 10px;
padding-right: 30px; padding-inline-end: 30px;
height: 41px; height: 41px;
} }
@ -589,7 +589,7 @@ code {
&__append { &__append {
position: absolute; position: absolute;
right: 3px; inset-inline-end: 3px;
top: 1px; top: 1px;
padding: 10px; padding: 10px;
padding-bottom: 9px; padding-bottom: 9px;
@ -607,7 +607,7 @@ code {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 1px; bottom: 1px;
width: 5px; width: 5px;
background-image: linear-gradient( background-image: linear-gradient(
@ -781,7 +781,7 @@ code {
li { li {
display: inline-block; display: inline-block;
margin-right: 10px; margin-inline-end: 10px;
} }
a { a {
@ -867,7 +867,8 @@ code {
flex: 0 0 auto; flex: 0 0 auto;
background: $simple-background-color; background: $simple-background-color;
padding: 4px; padding: 4px;
margin: 0 10px 20px 0; margin-inline-end: 10px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block; display: inline-block;
@ -940,7 +941,7 @@ code {
.actions { .actions {
padding: 30px 0; padding: 30px 0;
padding-right: 20px; padding-inline-end: 20px;
flex: 0 0 auto; flex: 0 0 auto;
} }
} }
@ -993,7 +994,7 @@ code {
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 4px; padding-inline-end: 4px;
position: relative; position: relative;
top: 1px; top: 1px;
transition: border-color 300ms linear; transition: border-color 300ms linear;

2
app/javascript/flavours/glitch/styles/modal.scss
View File

@ -25,7 +25,7 @@
height: 100%; height: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
} }
} }
} }

2
app/javascript/flavours/glitch/styles/polls.scss
View File

@ -277,7 +277,7 @@
border: 1px solid darken($simple-background-color, 14%); border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
padding-right: 30px; padding-inline-end: 30px;
} }
.icon-button.disabled { .icon-button.disabled {

6
app/javascript/flavours/glitch/styles/rich_text.scss
View File

@ -13,8 +13,8 @@
} }
blockquote { blockquote {
padding-left: 10px; padding-inline-start: 10px;
border-left: 3px solid $darker-text-color; border-inline-start: 3px solid $darker-text-color;
color: $darker-text-color; color: $darker-text-color;
white-space: normal; white-space: normal;
@ -75,7 +75,7 @@
ul, ul,
ol { ol {
margin-left: 2em; margin-inline-start: 2em;
p { p {
margin: 0; margin: 0;

267
app/javascript/flavours/glitch/styles/rtl.scss
View File

@ -1,131 +1,43 @@
body.rtl { body.rtl {
direction: rtl; direction: rtl;
.column-header > button { .reactions-bar {
text-align: right; direction: rtl;
padding-left: 0;
padding-right: 15px;
}
.radio-button__input {
margin-right: 0;
margin-left: 10px;
}
.display-name {
text-align: right;
}
.notification__message {
margin-left: 0;
margin-right: 68px;
} }
.drawer__inner__mastodon > img { .drawer__inner__mastodon > img {
transform: scaleX(-1); transform: scaleX(-1);
} }
.notification__favourite-icon-wrapper {
left: auto;
right: -26px;
}
.column-link__icon,
.column-header__icon {
margin-right: 0;
margin-left: 5px;
}
.compose-form .character-counter__wrapper {
margin-right: 0;
margin-left: 4px;
}
.boost-modal__status-time { .boost-modal__status-time {
float: left; float: left;
} }
.navigation-bar__profile { .compose-form .autosuggest-textarea__textarea {
margin-left: 0;
margin-right: 8px;
}
.search__input {
padding-right: 10px; padding-right: 10px;
padding-left: 30px; padding-left: 10px + 22px;
}
.search__icon .fa {
right: auto;
left: 10px;
} }
.columns-area { .columns-area {
direction: rtl; direction: rtl;
} }
.column-header__buttons { .react-swipeable-view-container > * {
left: 0; direction: rtl;
right: auto;
margin-left: 0;
margin-right: -15px;
}
.column-inline-form .icon-button {
margin-left: 0;
margin-right: 5px;
}
.column-header__links .text-btn {
margin-left: 10px;
margin-right: 0;
} }
.account__avatar-wrapper { .account__avatar-wrapper {
float: right; float: right;
} }
.column-header__back-button {
padding-left: 5px;
padding-right: 0;
}
.column-header__setting-arrows { .column-header__setting-arrows {
float: left; float: left;
.column-header__setting-btn {
&:first-child {
padding-left: 7px;
padding-right: 5px;
}
&:last-child {
padding-right: 7px;
padding-left: 5px;
margin-right: 5px;
margin-left: 0;
}
}
}
.setting-toggle__label {
margin-left: 0;
margin-right: 8px;
} }
.setting-meta__label { .setting-meta__label {
float: left; float: left;
} }
.status__avatar {
margin-left: 10px;
margin-right: 0;
// Those are used for public pages
left: auto;
right: 10px;
}
.activity-stream .status.light { .activity-stream .status.light {
padding-left: 10px; padding-left: 10px;
padding-right: 68px; padding-right: 68px;
@ -142,16 +54,6 @@ body.rtl {
padding-left: 0; padding-left: 0;
} }
.status__prepend {
margin-left: 0;
margin-right: 58px;
}
.status__prepend-icon-wrapper {
left: auto;
right: -26px;
}
.activity-stream .pre-header .pre-header__icon { .activity-stream .pre-header .pre-header__icon {
left: auto; left: auto;
right: 42px; right: 42px;
@ -162,138 +64,34 @@ body.rtl {
margin-left: 8px; margin-left: 8px;
} }
.account__avatar-overlay-overlay {
right: auto;
left: 0;
}
.column-back-button--slim-button {
right: auto;
left: 0;
}
.status__relative-time, .status__relative-time,
.activity-stream .status.light .status__header .status__meta { .activity-stream .status.light .status__header .status__meta {
float: left; float: left;
text-align: left; text-align: left;
} }
.status__action-bar {
&__counter {
margin-right: 0;
margin-left: 11px;
.status__action-bar-button {
margin-right: 0;
margin-left: 4px;
}
}
}
.status__action-bar-button { .status__action-bar-button {
float: right; float: right;
margin-right: 0;
margin-left: 18px;
} }
.status__action-bar-dropdown { .status__action-bar-dropdown {
float: right; float: right;
} }
.privacy-dropdown__dropdown {
margin-left: 0;
margin-right: 40px;
}
.privacy-dropdown__option__icon {
margin-left: 10px;
margin-right: 0;
}
.detailed-status__display-name .display-name { .detailed-status__display-name .display-name {
text-align: right; text-align: right;
} }
.detailed-status__display-avatar { .detailed-status__display-avatar {
margin-right: 0;
margin-left: 10px;
float: right; float: right;
} }
.detailed-status__favorites,
.detailed-status__reblogs {
margin-left: 0;
margin-right: 6px;
}
.fa-ul {
margin-left: 2.14285714em;
}
.fa-li {
left: auto;
right: -2.14285714em;
}
.admin-wrapper { .admin-wrapper {
direction: rtl; direction: rtl;
} }
.admin-wrapper .sidebar ul a i.fa,
a.table-action-link i.fa {
margin-right: 0;
margin-left: 5px;
}
.simple_form .check_boxes .checkbox label {
padding-left: 0;
padding-right: 25px;
}
.simple_form .input.with_label.boolean label.checkbox {
padding-left: 25px;
padding-right: 0;
}
.simple_form .check_boxes .checkbox input[type='checkbox'],
.simple_form .input.boolean input[type='checkbox'] {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio {
left: auto;
right: 0;
}
.simple_form .input.radio_buttons .radio > label {
padding-right: 28px;
padding-left: 0;
}
.simple_form .input-with-append .input input {
padding-left: 142px;
padding-right: 0;
}
.simple_form .input.boolean label.checkbox {
left: auto;
right: 0;
}
.simple_form .input.boolean .label_input,
.simple_form .input.boolean .hint {
padding-left: 0;
padding-right: 28px;
}
.simple_form .label_input__append { .simple_form .label_input__append {
right: auto;
left: 3px;
&::after { &::after {
right: auto;
left: 0;
background-image: linear-gradient( background-image: linear-gradient(
to left, to left,
rgba(darken($ui-base-color, 10%), 0), rgba(darken($ui-base-color, 10%), 0),
@ -308,49 +106,6 @@ body.rtl {
no-repeat left 8px center / auto 16px; no-repeat left 8px center / auto 16px;
} }
.table th,
.table td {
text-align: right;
}
.filters .filter-subset {
margin-right: 0;
margin-left: 45px;
}
@media screen and (min-width: 631px) {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
&:first-child {
padding-left: 5px;
padding-right: 10px;
}
}
.columns-area > div {
.column,
.drawer {
padding-left: 5px;
padding-right: 5px;
}
}
}
.columns-area--mobile .column,
.columns-area--mobile .drawer {
padding-left: 0;
padding-right: 0;
}
.card__bar .display-name {
margin-left: 0;
margin-right: 15px;
text-align: right;
}
.fa-chevron-left::before { .fa-chevron-left::before {
content: '\F054'; content: '\F054';
} }
@ -358,14 +113,4 @@ body.rtl {
.fa-chevron-right::before { .fa-chevron-right::before {
content: '\F053'; content: '\F053';
} }
.column-back-button__icon {
margin-right: 0;
margin-left: 5px;
}
.simple_form .input.radio_buttons .radio > label input {
left: auto;
right: 0;
}
} }

11
app/javascript/flavours/glitch/styles/statuses.scss
View File

@ -93,7 +93,7 @@
width: 20px; width: 20px;
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-inline-end: 5px;
fill: $primary-text-color; fill: $primary-text-color;
} }
@ -154,11 +154,12 @@ a.button.logo-button {
} }
.status { .status {
padding: 15px 15px 15px (48px + 15px * 2); padding: 15px;
padding-inline-start: (48px + 15px * 2);
min-height: 48px + 2px; min-height: 48px + 2px;
&__avatar { &__avatar {
left: 15px; inset-inline-start: 15px;
top: 17px; top: 17px;
.account__avatar { .account__avatar {
@ -175,7 +176,7 @@ a.button.logo-button {
padding: 8px 0; padding: 8px 0;
padding-bottom: 2px; padding-bottom: 2px;
margin: initial; margin: initial;
margin-left: 48px + 15px * 2; margin-inline-start: 48px + 15px * 2;
padding-top: 15px; padding-top: 15px;
} }
@ -184,7 +185,7 @@ a.button.logo-button {
margin: initial; margin: initial;
float: initial; float: initial;
width: auto; width: auto;
left: -32px; inset-inline-start: -32px;
} }
.media-gallery, .media-gallery,

22
app/javascript/flavours/glitch/styles/tables.scss
View File

@ -10,7 +10,7 @@
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
border-top: 1px solid $ui-base-color; border-top: 1px solid $ui-base-color;
text-align: left; text-align: start;
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
} }
@ -91,12 +91,12 @@
&:first-child { &:first-child {
border-radius: 4px 0 0; border-radius: 4px 0 0;
border-left: 1px solid darken($ui-base-color, 8%); border-inline-start: 1px solid darken($ui-base-color, 8%);
} }
&:last-child { &:last-child {
border-radius: 0 4px 0 0; border-radius: 0 4px 0 0;
border-right: 1px solid darken($ui-base-color, 8%); border-inline-end: 1px solid darken($ui-base-color, 8%);
} }
} }
} }
@ -125,7 +125,7 @@ button.table-action-link,
a.table-action-link { a.table-action-link {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
margin-right: 5px; margin-inline-end: 5px;
padding: 0 10px; padding: 0 10px;
color: $darker-text-color; color: $darker-text-color;
font-weight: 500; font-weight: 500;
@ -136,11 +136,11 @@ a.table-action-link {
i.fa { i.fa {
font-weight: 400; font-weight: 400;
margin-right: 5px; margin-inline-end: 5px;
} }
&:first-child { &:first-child {
padding-left: 0; padding-inline-start: 0;
} }
} }
@ -172,7 +172,7 @@ a.table-action-link {
&__actions, &__actions,
&__content { &__content {
padding: 8px 0; padding: 8px 0;
padding-right: 16px; padding-inline-end: 16px;
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
@ -188,8 +188,8 @@ a.table-action-link {
align-items: center; align-items: center;
&__actions { &__actions {
text-align: right; text-align: end;
padding-right: 16px - 5px; padding-inline-end: 16px - 5px;
} }
} }
@ -296,7 +296,7 @@ a.table-action-link {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 10px; margin-inline-end: 10px;
.emojione { .emojione {
width: 32px; width: 32px;
@ -315,7 +315,7 @@ a.table-action-link {
&__extra { &__extra {
flex: 0 0 auto; flex: 0 0 auto;
text-align: right; text-align: end;
color: $darker-text-color; color: $darker-text-color;
font-weight: 500; font-weight: 500;
} }

8
app/javascript/flavours/glitch/styles/widgets.scss
View File

@ -165,7 +165,7 @@
margin-bottom: 15px; margin-bottom: 15px;
.fa { .fa {
margin-right: 5px; margin-inline-end: 5px;
color: $darker-text-color; color: $darker-text-color;
} }
} }
@ -298,7 +298,7 @@
padding: 10px; padding: 10px;
&:first-child { &:first-child {
text-align: left; text-align: start;
} }
} }
@ -329,9 +329,9 @@
tbody td.accounts-table__extra { tbody td.accounts-table__extra {
width: 120px; width: 120px;
text-align: right; text-align: end;
color: $darker-text-color; color: $darker-text-color;
padding-right: 16px; padding-inline-end: 16px;
a { a {
text-decoration: none; text-decoration: none;