Refactor styles to use logical properties for positioning (#23944)
This commit is contained in:
Eugen Rochko
GitHub
parent
13db7d0075
commit
5ec33534f8
15 changed files with 279 additions and 571 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -73,8 +73,8 @@
|
|||
}
|
||||
|
||||
.display-name {
|
||||
margin-left: 15px;
|
||||
text-align: left;
|
||||
margin-inline-start: 15px;
|
||||
text-align: start;
|
||||
|
||||
i[data-hidden] {
|
||||
display: none;
|
||||
|
|
@ -138,22 +138,22 @@
|
|||
}
|
||||
|
||||
.older {
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
float: inline-start;
|
||||
padding-inline-start: 0;
|
||||
|
||||
.fa {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.newer {
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
float: inline-end;
|
||||
padding-inline-end: 0;
|
||||
|
||||
.fa {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -572,7 +577,7 @@ body,
|
|||
|
||||
.activity-stream {
|
||||
flex: 2 0 0;
|
||||
margin-right: 20px;
|
||||
margin-inline-end: 20px;
|
||||
max-width: calc(100% - 60px);
|
||||
|
||||
.entry {
|
||||
|
|
@ -625,12 +630,12 @@ body,
|
|||
}
|
||||
|
||||
.media-spoiler-toggle-buttons {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
|
||||
.button {
|
||||
overflow: visible;
|
||||
margin: 0 0 5px 5px;
|
||||
float: right;
|
||||
float: inline-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -651,7 +656,7 @@ body,
|
|||
|
||||
.special-action-button,
|
||||
.back-link {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
|
|
@ -669,7 +674,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;
|
||||
|
|
@ -696,7 +701,7 @@ body,
|
|||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
inset-inline-start: 15px;
|
||||
top: 15px;
|
||||
|
||||
.avatar {
|
||||
|
|
@ -764,7 +769,7 @@ a.name-tag,
|
|||
.avatar {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -778,7 +783,7 @@ a.name-tag,
|
|||
|
||||
.speech-bubble {
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid $ui-highlight-color;
|
||||
border-inset-inline-start: 4px solid $ui-highlight-color;
|
||||
|
||||
&.positive {
|
||||
border-left-color: $success-green;
|
||||
|
|
@ -794,7 +799,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;
|
||||
|
|
@ -808,7 +813,7 @@ a.name-tag,
|
|||
|
||||
&__owner {
|
||||
padding: 8px;
|
||||
padding-left: 12px;
|
||||
padding-inline-start: 12px;
|
||||
}
|
||||
|
||||
time {
|
||||
|
|
@ -832,7 +837,7 @@ a.name-tag,
|
|||
border: 0;
|
||||
|
||||
&__avatar-wrapper {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -841,7 +846,7 @@ a.name-tag,
|
|||
font-weight: 500;
|
||||
color: $darker-text-color;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
|
@ -892,7 +897,7 @@ a.name-tag,
|
|||
|
||||
&__icon {
|
||||
color: $dark-text-color;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -1090,7 +1095,7 @@ a.name-tag,
|
|||
|
||||
> h4 {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
&__table {
|
||||
|
|
@ -1102,7 +1107,7 @@ a.name-tag,
|
|||
&__date {
|
||||
white-space: nowrap;
|
||||
padding: 10px 0;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
min-width: 120px;
|
||||
|
||||
&.retention__table__average {
|
||||
|
|
@ -1160,7 +1165,7 @@ a.name-tag,
|
|||
|
||||
&__total {
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
color: $primary-text-color;
|
||||
|
|
@ -1262,7 +1267,7 @@ a.sparkline {
|
|||
}
|
||||
|
||||
&__value {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
color: $darker-text-color;
|
||||
padding: 11px 10px;
|
||||
}
|
||||
|
|
@ -1273,7 +1278,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} {
|
||||
|
|
@ -1309,7 +1314,7 @@ a.sparkline {
|
|||
}
|
||||
|
||||
&__rules {
|
||||
margin-left: 30px;
|
||||
margin-inline-start: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1431,7 +1436,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;
|
||||
}
|
||||
|
|
@ -1511,7 +1516,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 {
|
||||
|
|
@ -1531,7 +1536,7 @@ a.sparkline {
|
|||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
inset-inline-start: 15px;
|
||||
top: 15px;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
|
|
@ -1547,7 +1552,7 @@ a.sparkline {
|
|||
.username {
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
|
@ -1562,7 +1567,7 @@ a.sparkline {
|
|||
}
|
||||
|
||||
time {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1597,8 +1602,8 @@ a.sparkline {
|
|||
&__actions {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
text-align: right;
|
||||
inset-inline-end: 15px;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1621,7 +1626,7 @@ a.sparkline {
|
|||
flex: 0 0 auto;
|
||||
width: 200px;
|
||||
padding: 15px;
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
|
|
@ -1657,7 +1662,7 @@ a.sparkline {
|
|||
}
|
||||
|
||||
.section-skip-link {
|
||||
float: right;
|
||||
float: inline-end;
|
||||
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
|
|
@ -1707,7 +1712,7 @@ a.sparkline {
|
|||
|
||||
&__rules {
|
||||
list-style: disc;
|
||||
padding-left: 15px;
|
||||
padding-inline-start: 15px;
|
||||
margin-bottom: 20px;
|
||||
color: $darker-text-color;
|
||||
|
||||
|
|
@ -1796,7 +1801,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;
|
||||
|
|
@ -1806,7 +1811,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;
|
||||
|
|
@ -1825,7 +1830,7 @@ a.sparkline {
|
|||
background: $highlight-text-color;
|
||||
bottom: 0;
|
||||
top: calc(1.875rem + 1px);
|
||||
left: 0.6875rem;
|
||||
inset-inline-start: 0.6875rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
|
|||
|
|
@ -267,7 +267,7 @@ button {
|
|||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
.logo {
|
||||
height: 42px;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -101,6 +101,6 @@
|
|||
display: block;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
.emoji-mart-anchor-bar {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: $highlight-text-color;
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -159,7 +159,7 @@ code {
|
|||
|
||||
li {
|
||||
list-style: disc;
|
||||
margin-left: 18px;
|
||||
margin-inline-start: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -225,7 +225,7 @@ code {
|
|||
|
||||
&.select .hint {
|
||||
margin-top: 6px;
|
||||
margin-left: 150px;
|
||||
margin-inline-start: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -380,13 +380,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;
|
||||
}
|
||||
|
|
@ -517,10 +517,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,
|
||||
|
|
@ -572,8 +572,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;
|
||||
}
|
||||
|
||||
|
|
@ -588,7 +588,7 @@ code {
|
|||
|
||||
&__append {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
inset-inline-end: 3px;
|
||||
top: 1px;
|
||||
padding: 10px;
|
||||
padding-bottom: 9px;
|
||||
|
|
@ -606,7 +606,7 @@ code {
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 1px;
|
||||
width: 5px;
|
||||
background-image: linear-gradient(
|
||||
|
|
@ -780,7 +780,7 @@ code {
|
|||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -939,7 +939,7 @@ code {
|
|||
|
||||
.actions {
|
||||
padding: 30px 0;
|
||||
padding-right: 20px;
|
||||
padding-inline-end: 20px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -992,7 +992,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;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -269,7 +269,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 {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid $darker-text-color;
|
||||
padding-inline-start: 10px;
|
||||
border-inset-inline-start: 3px solid $darker-text-color;
|
||||
color: $darker-text-color;
|
||||
white-space: normal;
|
||||
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 2em;
|
||||
margin-inline-start: 2em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,273 +1,30 @@
|
|||
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,
|
||||
.announcements__item {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.announcements__item__range {
|
||||
padding-right: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.reactions-bar {
|
||||
margin-left: auto;
|
||||
margin-right: -2px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.reactions-bar__item__count {
|
||||
margin-left: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.announcements__pagination {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.notification__message {
|
||||
margin-left: 0;
|
||||
margin-right: 68px;
|
||||
}
|
||||
|
||||
.announcements__mastodon,
|
||||
.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 .compose-form__buttons-wrapper .character-counter__wrapper {
|
||||
margin-right: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.account__header__tabs__buttons > .icon-button {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.account__avatar-overlay-overlay {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.column-back-button--slim-button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.status__action-bar {
|
||||
&__counter {
|
||||
margin-right: 0;
|
||||
margin-left: 11px;
|
||||
|
||||
.status__action-bar-button {
|
||||
margin-right: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
margin-left: 0;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__icon {
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.picture-in-picture__header__account .display-name,
|
||||
.detailed-status__display-name .display-name {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detailed-status__display-avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.picture-in-picture__header__account .account__avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.icon-button__counter {
|
||||
margin-left: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.notifications-permission-banner__close {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.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),
|
||||
|
|
@ -282,49 +39,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';
|
||||
}
|
||||
|
|
@ -332,19 +46,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;
|
||||
}
|
||||
|
||||
.picture-in-picture {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
width: 20px;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
fill: $primary-text-color;
|
||||
}
|
||||
|
||||
|
|
@ -162,7 +162,7 @@ a.button.logo-button {
|
|||
min-height: 48px + 2px;
|
||||
|
||||
&__avatar {
|
||||
left: 15px;
|
||||
inset-inline-start: 15px;
|
||||
top: 17px;
|
||||
|
||||
.account__avatar {
|
||||
|
|
@ -176,12 +176,12 @@ a.button.logo-button {
|
|||
}
|
||||
|
||||
&__prepend {
|
||||
margin-left: 48px + 15px * 2;
|
||||
margin-inline-start: 48px + 15px * 2;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
&__prepend-icon-wrapper {
|
||||
left: -32px;
|
||||
inset-inline-start: -32px;
|
||||
}
|
||||
|
||||
.media-gallery,
|
||||
|
|
|
|||
|
|
@ -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-inset-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-inset-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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -3px 0 0;
|
||||
margin-left: 0.075em;
|
||||
margin-right: 0.075em;
|
||||
margin-inline-start: 0.075em;
|
||||
margin-inline-end: 0.075em;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
margin-bottom: 15px;
|
||||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -284,7 +284,7 @@
|
|||
}
|
||||
|
||||
.trends__item__current {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -340,9 +340,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;
|
||||
|
|
@ -363,7 +363,7 @@
|
|||
|
||||
tbody td.accounts-table__interrelationships {
|
||||
width: 21px;
|
||||
padding-right: 16px;
|
||||
padding-inline-end: 16px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
|
|
|
|||
Loading…
Reference in a new issue