me
/
glitchier-soc
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>
th-downstream
Plastikmensch 2 years ago 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

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

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

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

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

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

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

93
app/javascript/flavours/glitch/styles/admin.scss
Unescape 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 {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

40
app/javascript/flavours/glitch/styles/components/media.scss
Unescape 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);

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -30,7 +30,7 @@
line-height: 18px;
font-size: 16px;
padding: 15px;
padding-right: 30px;
padding-inline-end: 30px;
}
.search__icon .fa {
@ -130,7 +130,7 @@
line-height: 18px;
font-size: 16px;
padding: 15px;
padding-right: 30px;
padding-inline-end: 30px;
}
.search__icon .fa {
@ -174,11 +174,12 @@
}
.notification__report {
padding: 15px 15px 15px (48px + 15px * 2);
padding: 15px;
padding-inline-start: (48px + 15px * 2);
min-height: 48px + 2px;
&__avatar {
left: 15px;
inset-inline-start: 15px;
top: 17px;
}
}
@ -265,7 +266,7 @@
.navigation-panel {
margin: 0;
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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,131 +1,43 @@
body.rtl {
direction: rtl;
.column-header > button {
text-align: right;
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;
.reactions-bar {
direction: rtl;
}
.drawer__inner__mastodon > img {
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 {
float: left;
}
.navigation-bar__profile {
margin-left: 0;
margin-right: 8px;
}
.search__input {
.compose-form .autosuggest-textarea__textarea {
padding-right: 10px;
padding-left: 30px;
}
.search__icon .fa {
right: auto;
left: 10px;
padding-left: 10px + 22px;
}
.columns-area {
direction: rtl;
}
.column-header__buttons {
left: 0;
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;
.react-swipeable-view-container > * {
direction: rtl;
}
.account__avatar-wrapper {
float: right;
}
.column-header__back-button {
padding-left: 5px;
padding-right: 0;
}
.column-header__setting-arrows {
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 {
float: left;
}
.status__avatar {
margin-left: 10px;
margin-right: 0;
// Those are used for public pages
left: auto;
right: 10px;
}
.activity-stream .status.light {
padding-left: 10px;
padding-right: 68px;
@ -142,16 +54,6 @@ body.rtl {
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 {
left: auto;
right: 42px;
@ -162,138 +64,34 @@ body.rtl {
margin-left: 8px;
}
.account__avatar-overlay-overlay {
right: auto;
left: 0;
}
.column-back-button--slim-button {
right: auto;
left: 0;
}
.status__relative-time,
.activity-stream .status.light .status__header .status__meta {
float: 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 {
float: right;
margin-right: 0;
margin-left: 18px;
}
.status__action-bar-dropdown {
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 {
text-align: right;
}
.detailed-status__display-avatar {
margin-right: 0;
margin-left: 10px;
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 {
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 {
right: auto;
left: 3px;
&::after {
right: auto;
left: 0;
background-image: linear-gradient(
to left,
rgba(darken($ui-base-color, 10%), 0),
@ -308,49 +106,6 @@ body.rtl {
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 {
content: '\F054';
}
@ -358,14 +113,4 @@ body.rtl {
.fa-chevron-right::before {
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
Unescape View File

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

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

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

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

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

Write Preview
Loading…
Cancel
Save