[Glitch] Refactor styles to use logical properties for positioning (#2156)
Portbabd86e594and45848d6547to glitch-soc Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
This commit is contained in:
Plastikmensch
GitHub
parent
0cbd579ef0
commit
f28942cef9
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -266,7 +266,7 @@ button {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
inset-inline-start: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user