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

Port babd86e594 and 45848d6547 to glitch-soc

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -49,7 +49,7 @@
color: $primary-text-color;
background: rgba($base-overlay-background, 0.5);
bottom: 6px;
left: 6px;
inset-inline-start: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
@ -133,7 +133,7 @@
object-fit: cover;
position: absolute;