M app/javascript/flavours/glitch/styles/about.scss => app/javascript/flavours/glitch/styles/about.scss +2 -2
@@ 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;
M app/javascript/flavours/glitch/styles/accessibility.scss => app/javascript/flavours/glitch/styles/accessibility.scss +1 -1
@@ 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;
}
}
M app/javascript/flavours/glitch/styles/accounts.scss => app/javascript/flavours/glitch/styles/accounts.scss +6 -6
@@ 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;
}
}
M app/javascript/flavours/glitch/styles/admin.scss => app/javascript/flavours/glitch/styles/admin.scss +52 -41
@@ 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 {
M app/javascript/flavours/glitch/styles/basics.scss => app/javascript/flavours/glitch/styles/basics.scss +1 -1
@@ 266,7 266,7 @@ button {
overflow: hidden;
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: -1000;
}
M app/javascript/flavours/glitch/styles/components/about.scss => app/javascript/flavours/glitch/styles/components/about.scss +2 -2
@@ 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 {
M app/javascript/flavours/glitch/styles/components/accounts.scss => app/javascript/flavours/glitch/styles/components/accounts.scss +22 -21
@@ 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;
}
}
M app/javascript/flavours/glitch/styles/components/announcements.scss => app/javascript/flavours/glitch/styles/components/announcements.scss +5 -5
@@ 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;
}
M app/javascript/flavours/glitch/styles/components/columns.scss => app/javascript/flavours/glitch/styles/components/columns.scss +22 -20
@@ 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;
M app/javascript/flavours/glitch/styles/components/compose_form.scss => app/javascript/flavours/glitch/styles/components/compose_form.scss +15 -14
@@ 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 {
M app/javascript/flavours/glitch/styles/components/directory.scss => app/javascript/flavours/glitch/styles/components/directory.scss +1 -1
@@ 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;
M app/javascript/flavours/glitch/styles/components/doodle.scss => app/javascript/flavours/glitch/styles/components/doodle.scss +4 -4
@@ 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;
M app/javascript/flavours/glitch/styles/components/drawer.scss => app/javascript/flavours/glitch/styles/components/drawer.scss +7 -7
@@ 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);
M app/javascript/flavours/glitch/styles/components/emoji.scss => app/javascript/flavours/glitch/styles/components/emoji.scss +6 -3
@@ 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;
M app/javascript/flavours/glitch/styles/components/emoji_picker.scss => app/javascript/flavours/glitch/styles/components/emoji_picker.scss +5 -5
@@ 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);
M app/javascript/flavours/glitch/styles/components/error_boundary.scss => app/javascript/flavours/glitch/styles/components/error_boundary.scss +2 -2
@@ 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 {
M app/javascript/flavours/glitch/styles/components/explore.scss => app/javascript/flavours/glitch/styles/components/explore.scss +2 -2
@@ 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 {
M app/javascript/flavours/glitch/styles/components/local_settings.scss => app/javascript/flavours/glitch/styles/components/local_settings.scss +3 -3
@@ 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;
}
M app/javascript/flavours/glitch/styles/components/media.scss => app/javascript/flavours/glitch/styles/components/media.scss +20 -20
@@ 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);
M app/javascript/flavours/glitch/styles/components/misc.scss => app/javascript/flavours/glitch/styles/components/misc.scss +41 -39
@@ 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%;
}
M app/javascript/flavours/glitch/styles/components/modal.scss => app/javascript/flavours/glitch/styles/components/modal.scss +27 -27
@@ 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;
}
M app/javascript/flavours/glitch/styles/components/privacy_policy.scss => app/javascript/flavours/glitch/styles/components/privacy_policy.scss +3 -3
@@ 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 {
M app/javascript/flavours/glitch/styles/components/search.scss => app/javascript/flavours/glitch/styles/components/search.scss +5 -5
@@ 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;
}
M app/javascript/flavours/glitch/styles/components/sensitive.scss => app/javascript/flavours/glitch/styles/components/sensitive.scss +1 -1
@@ 4,7 4,7 @@
align-items: center;
position: absolute;
top: 4px;
- left: 4px;
+ inset-inline-start: 4px;
z-index: 100;
}
M app/javascript/flavours/glitch/styles/components/signed_out.scss => app/javascript/flavours/glitch/styles/components/signed_out.scss +1 -1
@@ 101,7 101,7 @@
}
.account__avatar-wrapper {
- margin-left: 0;
+ margin-inline-start: 0;
}
.spacer {
M app/javascript/flavours/glitch/styles/components/single_column.scss => app/javascript/flavours/glitch/styles/components/single_column.scss +6 -5
@@ 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;
}
M app/javascript/flavours/glitch/styles/components/status.scss => app/javascript/flavours/glitch/styles/components/status.scss +33 -31
@@ 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 {
M app/javascript/flavours/glitch/styles/containers.scss => app/javascript/flavours/glitch/styles/containers.scss +3 -3
@@ 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;
}
}
M app/javascript/flavours/glitch/styles/forms.scss => app/javascript/flavours/glitch/styles/forms.scss +19 -18
@@ 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;
M app/javascript/flavours/glitch/styles/modal.scss => app/javascript/flavours/glitch/styles/modal.scss +1 -1
@@ 25,7 25,7 @@
height: 100%;
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
}
}
}
M app/javascript/flavours/glitch/styles/polls.scss => app/javascript/flavours/glitch/styles/polls.scss +1 -1
@@ 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 {
M app/javascript/flavours/glitch/styles/rich_text.scss => app/javascript/flavours/glitch/styles/rich_text.scss +3 -3
@@ 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;
M app/javascript/flavours/glitch/styles/rtl.scss => app/javascript/flavours/glitch/styles/rtl.scss +6 -261
@@ 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;
- }
}
M app/javascript/flavours/glitch/styles/statuses.scss => app/javascript/flavours/glitch/styles/statuses.scss +6 -5
@@ 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,
M app/javascript/flavours/glitch/styles/tables.scss => app/javascript/flavours/glitch/styles/tables.scss +11 -11
@@ 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;
}
M app/javascript/flavours/glitch/styles/widgets.scss => app/javascript/flavours/glitch/styles/widgets.scss +4 -4
@@ 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;