AkkomaGang/akkoma-fe
5
13
Fork 62
Code Issues 81 Pull requests 21 Projects Releases 1 Wiki Activity

RTL Support #258

Open
yheuhtozr wants to merge 5 commits from yheuhtozr/pleroma-fe:rtl-enabled into develop
pull from: yheuhtozr/pleroma-fe:rtl-enabled
merge into: AkkomaGang:develop
Conversation 4 Commits 5 Files changed 122 +1477 -1262
122 changed files with 1477 additions and 1262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
src/App.scss
View file

@ -2,7 +2,7 @@
@import './_variables.scss'; @import './_variables.scss';
:root { :root {
--navbar-height: 3.5rem; --navbar-block-size: 3.5rem;
--post-line-height: 1.4; --post-line-height: 1.4;
} }
@ -126,7 +126,7 @@ nav {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--topBarShadow); box-shadow: var(--topBarShadow);
box-sizing: border-box; box-sizing: border-box;
height: var(--navbar-height); block-size: var(--navbar-block-size);
position: fixed; position: fixed;
} }
@ -135,7 +135,7 @@ nav {
} }
.column.-scrollable { .column.-scrollable {
top: var(--navbar-height); inset-block-start: var(--navbar-block-size);
position: sticky; position: sticky;
} }
@ -150,11 +150,11 @@ nav {
.app-bg-wrapper { .app-bg-wrapper {
position: fixed; position: fixed;
height: 100%; block-size: 100%;
top: var(--navbar-height); inset-block-start: var(--navbar-block-size);
z-index: -1000; z-index: -1000;
left: 0; inset-inline-start: 0;
right: -20px; inset-inline-end: -20px;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: var(--wallpaper); background-color: var(--wallpaper);
@ -185,11 +185,12 @@ nav {
grid-template-areas: "sidebar content"; grid-template-areas: "sidebar content";
grid-template-rows: 1fr; grid-template-rows: 1fr;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin-block: 0;
margin-inline: auto;
align-content: flex-start; align-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
min-height: 100vh; min-block-size: 100vb;
overflow-x: clip; overflow-x: clip;
.column { .column {
@ -200,13 +201,15 @@ nav {
box-sizing: border-box; box-sizing: border-box;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
margin: 0 calc(var(--___columnMargin) / 2); margin-block: 0;
padding: calc(var(--___columnMargin)) 0; margin-inline: calc(var(--___columnMargin) / 2);
padding-block: calc(var(--___columnMargin));
padding-inline: 0;
row-gap: var(--___columnMargin); row-gap: var(--___columnMargin);
align-content: start; align-content: start;
&:not(.-scrollable) { &:not(.-scrollable) {
margin-top: var(--navbar-height); margin-block-start: var(--navbar-block-size);
} }
&:hover { &:hover {
@ -214,46 +217,46 @@ nav {
} }
&.-full-height { &.-full-height {
margin-bottom: 0; margin-block-end: 0;
padding-top: 0; padding-block-start: 0;
padding-bottom: 0; padding-block-end: 0;
} }
&.-scrollable { &.-scrollable {
--___paddingIncrease: calc(var(--columnGap) / 2); --___paddingIncrease: calc(var(--columnGap) / 2);
position: sticky; position: sticky;
top: var(--navbar-height); inset-block-start: var(--navbar-block-size);
max-height: calc(100vh - var(--navbar-height)); max-block-size: calc(100vb - var(--navbar-block-size));
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin-left: calc(var(--___paddingIncrease) * -1); margin-inline-start: calc(var(--___paddingIncrease) * -1);
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); padding-inline-start: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode // On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
// might implement old style of hiding scrollbars later if there's demand // might implement old style of hiding scrollbars later if there's demand
@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) { @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
&:not(.-show-scrollbar) { &:not(.-show-scrollbar) {
scrollbar-width: none; scrollbar-width: none;
margin-right: calc(var(--___paddingIncrease) * -1); margin-inline-end: calc(var(--___paddingIncrease) * -1);
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2); padding-inline-end: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: block; display: block;
width: 0; inline-size: 0;
} }
} }
} }
.panel-heading.-sticky { .panel-heading.-sticky {
top: calc(var(--columnGap) / -1); inset-block-start: calc(var(--columnGap) / -1);
} }
} }
} }
&.-has-new-post-button { &.-has-new-post-button {
.column { .column {
padding-bottom: 10rem; padding-block-end: 10rem;
} }
} }
@ -261,7 +264,7 @@ nav {
.column { .column {
.panel-heading.-sticky { .panel-heading.-sticky {
position: relative; position: relative;
top: 0; inset-block-start: 0;
} }
} }
} }
@ -289,16 +292,16 @@ nav {
} }
&.-mobile { &.-mobile {
grid-template-columns: 100vw; grid-template-columns: 100vi;
grid-template-areas: "content"; grid-template-areas: "content";
padding: 0; padding: 0;
.column { .column {
margin-left: 0; margin-inline-start: 0;
margin-right: 0; margin-inline-end: 0;
padding-top: 0; padding-block-start: 0;
margin-top: var(--navbar-height); margin-block-start: var(--navbar-block-size);
margin-bottom: 0; margin-block-end: 0;
} }
.panel-heading, .panel-heading,
@ -306,8 +309,8 @@ nav {
.panel-heading::before, .panel-heading::before,
.panel, .panel,
.panel::after { .panel::after {
border-top-left-radius: 0; border-start-start-radius: 0;
border-top-right-radius: 0; border-start-end-radius: 0;
} }
#sidebar, #sidebar,
@ -435,7 +438,7 @@ nav {
} }
&.-fullwidth { &.-fullwidth {
width: 100%; inline-size: 100%;
} }
&.-hover-highlight { &.-hover-highlight {
@ -453,7 +456,7 @@ textarea,
border-radius: 0; border-radius: 0;
background: none; background: none;
box-shadow: none; box-shadow: none;
height: unset; block-size: unset;
} }
--_padding: 0.5em; --_padding: 0.5em;
@ -476,7 +479,8 @@ textarea,
position: relative; position: relative;
line-height: 2; line-height: 2;
hyphens: none; hyphens: none;
padding: 0 var(--_padding); padding-block: 0;
padding-inline: var(--_padding);
&:disabled, &:disabled,
&[disabled=disabled], &[disabled=disabled],
@ -515,12 +519,12 @@ textarea,
display: inline-block; display: inline-block;
content: ''; content: '';
transition: box-shadow 200ms; transition: box-shadow 200ms;
width: 1.1em; inline-size: 1.1em;
height: 1.1em; block-size: 1.1em;
border-radius: 100%; // Radio buttons should always be circle border-radius: 100%; // Radio buttons should always be circle
box-shadow: 0 0 2px black inset; box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow); box-shadow: var(--inputShadow);
margin-right: 0.5em; margin-inline-end: 0.5em;
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
@ -554,13 +558,13 @@ textarea,
display: inline-block; display: inline-block;
content: '✓'; content: '✓';
transition: color 200ms; transition: color 200ms;
width: 1.1em; inline-size: 1.1em;
height: 1.1em; block-size: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0 0 2px black inset; box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow); box-shadow: var(--inputShadow);
margin-right: 0.5em; margin-inline-end: 0.5em;
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
@ -573,7 +577,7 @@ textarea,
} }
} }
&.resize-height { &.resize-block-size {
resize: vertical; resize: vertical;
} }
} }
@ -603,7 +607,7 @@ option {
.btn-block { .btn-block {
display: block; display: block;
width: 100%; inline-size: 100%;
} }
.btn-group { .btn-group {
@ -616,13 +620,13 @@ option {
flex: 1 1 auto; flex: 1 1 auto;
&:not(:last-child) { &:not(:last-child) {
border-top-right-radius: 0; border-start-end-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
&:not(:first-child) { &:not(:first-child) {
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-end-start-radius: 0;
} }
} }
} }
@ -641,10 +645,11 @@ option {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
border-radius: 99px; border-radius: 99px;
max-width: 10em; max-inline-size: 10em;
min-width: 1.7em; min-inline-size: 1.7em;
height: 1.3em; block-size: 1.3em;
padding: 0.15em 0.15em; padding-block: 0.15em;
padding-inline: 0.15em;
vertical-align: middle; vertical-align: middle;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -664,8 +669,10 @@ option {
} }
.alert { .alert {
margin: 0 0.35em; margin-block: 0;
padding: 0 0.25em; margin-inline: 0.35em;
padding-block: 0;
padding-inline: 0.25em;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
@ -726,13 +733,13 @@ option {
} }
.notice-dismissible { .notice-dismissible {
padding-right: 4rem; padding-inline-end: 4rem;
position: relative; position: relative;
.dismiss { .dismiss {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
right: 0; inset-inline-end: 0;
padding: 0.5em; padding: 0.5em;
color: inherit; color: inherit;
} }
@ -746,7 +753,8 @@ option {
.fa-old-padding { .fa-old-padding {
&.svg-inline--fa { &.svg-inline--fa {
padding: 0 0.3em; padding-block: 0;
padding-inline: 0.3em;
} }
} }
@ -759,13 +767,14 @@ option {
a { a {
display: inline-block; display: inline-block;
padding: 1em 0; padding-block: 1em;
width: 100%; padding-inline: 0;
inline-size: 100%;
} }
} }
.btn.button-default { .btn.button-default {
min-height: 2em; min-block-size: 2em;
} }
.new-status-notification { .new-status-notification {
@ -835,3 +844,26 @@ option {
.fade-leave-active { .fade-leave-active {
opacity: 0; opacity: 0;
} }
// Those containers are not affected by
// external directionality.
.site-name,
.status-username,
.account-name,
.shortName,
.userNameFull,
.userName,
.serverName,
.StatusBody > .body,
.user-card-bio,
.search-result .hashtag a,
.panel-body::before,
.form-control#username:not(:placeholder-shown), .form-control#password,
.emoji-search > .form-control,
.form-post-subject, .form-post-subject + .emoji-picker-icon, .main-input,
.name-changer#username, textarea.bio, .profile-fields input:not(:placeholder-shown),
.name-changer#username + .emoji-picker-icon, textarea.bio + .emoji-picker-icon,
input[type=email], input[type=password], input[type=number] {
unicode-bidi: isolate;
direction: initial;
}

1
src/App.vue
View file

@ -2,6 +2,7 @@
<div <div
id="app-loaded" id="app-loaded"
:style="bgStyle" :style="bgStyle"
:dir="$t('_locale.dir')"
> >
<div <div
id="app_bg_wrapper" id="app_bg_wrapper"

8
src/components/account_actions/account_actions.vue
View file

@ -110,9 +110,11 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.AccountActions { .AccountActions {
.ellipsis-button { .ellipsis-button {
width: 2.5em; inline-size: 2.5em;
margin: -0.5em 0; margin-block: -0.5em;
padding: 0.5em 0; margin-inline: 0;
padding-block: 0.5em;
padding-inline: 0;
text-align: center; text-align: center;
&:not(:hover) .icon { &:not(:hover) .icon {

10
src/components/announcement/announcement.vue
View file

@ -102,14 +102,14 @@
@import "../../variables"; @import "../../variables";
.announcement { .announcement {
border-bottom-width: 1px; border-block-end-width: 1px;
border-bottom-style: solid; border-block-end-style: solid;
border-bottom-color: var(--border, $fallback--border); border-block-end-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
padding: var(--status-margin, $status-margin); padding: var(--status-margin, $status-margin);
.heading, .body { .heading, .body {
margin-bottom: var(--status-margin, $status-margin); margin-block-end: var(--status-margin, $status-margin);
} }
.footer { .footer {
@ -129,7 +129,7 @@
.btn { .btn {
flex: 1; flex: 1;
margin: 1em; margin: 1em;
max-width: 10em; max-inline-size: 10em;
} }
} }
} }

4
src/components/announcement_editor/announcement_editor.vue
View file

@ -47,12 +47,12 @@
flex-direction: column; flex-direction: column;
.announcement-metadata { .announcement-metadata {
margin-top: 0.5em; margin-block-start: 0.5em;
} }
.post-textarea { .post-textarea {
resize: vertical; resize: vertical;
height: 10em; block-size: 10em;
overflow: none; overflow: none;
box-sizing: content-box; box-sizing: content-box;
} }

4
src/components/announcements_page/announcements_page.vue
View file

@ -68,11 +68,11 @@
padding: var(--status-margin, $status-margin); padding: var(--status-margin, $status-margin);
.heading, .body { .heading, .body {
margin-bottom: var(--status-margin, $status-margin); margin-block-end: var(--status-margin, $status-margin);
} }
.post-button { .post-button {
min-width: 10em; min-inline-size: 10em;
} }
} }
} }

5
src/components/async_component_error/async_component_error.vue
View file

@ -31,12 +31,13 @@ export default {
<style lang="scss"> <style lang="scss">
.async-component-error { .async-component-error {
display: flex; display: flex;
height: 100%; block-size: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.btn { .btn {
margin: .5em; margin: .5em;
padding: .5em 2em; padding-block: .5em;
padding-inline: 2em;
} }
} }
</style> </style>

76
src/components/attachment/attachment.scss
View file

@ -6,7 +6,7 @@
position: relative; position: relative;
align-self: flex-start; align-self: flex-start;
line-height: 0; line-height: 0;
height: 100%; block-size: 100%;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: $fallback--attachmentRadius; border-radius: $fallback--attachmentRadius;
@ -16,7 +16,7 @@
.attachment-wrapper { .attachment-wrapper {
flex: 1 1 auto; flex: 1 1 auto;
height: 200px; block-size: 200px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -24,9 +24,9 @@
.description-container { .description-container {
flex: 0 1 0; flex: 0 1 0;
display: flex; display: flex;
padding-top: 0.5em; padding-block-start: 0.5em;
z-index: 1; z-index: 1;
max-height: 50%; max-block-size: 50%;
p { p {
flex: 1; flex: 1;
@ -42,10 +42,10 @@
&.-static { &.-static {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; inset-block-end: 0;
padding-top: 0; padding-block-start: 0;
background: var(--popover); background: var(--popover);
box-shadow: var(--popupShadow); box-shadow: var(--popupShadow);
} }
@ -53,15 +53,15 @@
.description-field { .description-field {
flex: 1; flex: 1;
min-width: 0; min-inline-size: 0;
box-sizing: content-box; box-sizing: content-box;
overflow: hidden; overflow: hidden;
transition: min-height 200ms 100ms; transition: min-block-size 200ms 100ms;
padding-bottom: var(--_padding); padding-block-end: var(--_padding);
height: calc(var(--post-line-height) * 1em); block-size: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em); min-block-size: calc(var(--post-line-height) * 1em);
resize: none; resize: none;
&.scrollable-form { &.scrollable-form {
@ -77,14 +77,14 @@
& .oembed-container { & .oembed-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
} }
.image-container { .image-container {
.image { .image {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
} }
} }
@ -92,8 +92,8 @@
& .video-container { & .video-container {
& .flash, & .flash,
& video { & video {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
object-fit: contain; object-fit: contain;
align-self: center; align-self: center;
} }
@ -104,8 +104,8 @@
align-items: flex-end; align-items: flex-end;
audio { audio {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
} }
} }
@ -114,15 +114,15 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: 0.5em; padding-block-start: 0.5em;
} }
.play-icon { .play-icon {
position: absolute; position: absolute;
font-size: 64px; font-size: 64px;
top: calc(50% - 32px); inset-block-start: calc(50% - 32px);
left: calc(50% - 32px); inset-inline-start: calc(50% - 32px);
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
@ -134,10 +134,10 @@
.attachment-buttons { .attachment-buttons {
display: flex; display: flex;
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
top: 0; inset-block-start: 0;
margin-top: 0.5em; margin-block-start: 0.5em;
margin-right: 0.5em; margin-inline-end: 0.5em;
z-index: 1; z-index: 1;
.attachment-button { .attachment-button {
@ -145,9 +145,9 @@
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
width: 2em; inline-size: 2em;
height: 2em; block-size: 2em;
margin-left: 0.5em; margin-inline-start: 0.5em;
font-size: 1.25em; font-size: 1.25em;
// TODO: theming? hard to theme with unknown background image color // TODO: theming? hard to theme with unknown background image color
background: rgba(230, 230, 230, 0.7); background: rgba(230, 230, 230, 0.7);
@ -165,12 +165,12 @@
.oembed-container { .oembed-container {
line-height: 1.2em; line-height: 1.2em;
flex: 1 0 100%; flex: 1 0 100%;
width: 100%; inline-size: 100%;
margin-right: 15px; margin-inline-end: 15px;
display: flex; display: flex;
img { img {
width: 100%; inline-size: 100%;
} }
.image { .image {
@ -178,7 +178,7 @@
img { img {
border: 0px; border: 0px;
border-radius: 5px; border-radius: 5px;
height: 100%; block-size: 100%;
object-fit: cover; object-fit: cover;
} }
} }
@ -221,7 +221,7 @@
color: var(--postLink, $fallback--link); color: var(--postLink, $fallback--link);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
height: auto; block-size: auto;
line-height: 1.5; line-height: 1.5;
&:not(.-editable) { &:not(.-editable) {
@ -242,7 +242,7 @@
.description-container { .description-container {
flex: 1; flex: 1;
padding-left: 0.5em; padding-inline-start: 0.5em;
} }
.attachment-buttons { .attachment-buttons {
@ -253,7 +253,7 @@
a { a {
display: inline-block; display: inline-block;
max-width: 100%; max-inline-size: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

14
src/components/autosuggest/autosuggest.vue
View file

@ -31,15 +31,15 @@
&-input { &-input {
display: block; display: block;
width: 100%; inline-size: 100%;
} }
&-results { &-results {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 100%; inset-block-start: 100%;
right: 0; inset-inline-end: 0;
max-height: 400px; max-block-size: 400px;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-style: solid; border-style: solid;
@ -48,8 +48,8 @@
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
border-top-left-radius: 0; border-start-start-radius: 0;
border-top-right-radius: 0; border-start-end-radius: 0;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
overflow-y: auto; overflow-y: auto;

11
src/components/avatar_list/avatar_list.vue
View file

@ -26,20 +26,21 @@
// For hiding overflowing elements // For hiding overflowing elements
flex-wrap: wrap; flex-wrap: wrap;
height: 24px; block-size: 24px;
.avatars-item { .avatars-item {
margin: 0 0 5px 5px; margin-block: 0 5px;
margin-inline: 5px 0;
&:first-child { &:first-child {
padding-left: 5px; padding-inline-start: 5px;
} }
.avatar-small { .avatar-small {
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
height: 24px; block-size: 24px;
width: 24px; inline-size: 24px;
} }
} }
} }

19
src/components/basic_user_card/basic_user_card.vue
View file

@ -51,20 +51,21 @@
display: flex; display: flex;
flex: 1 0; flex: 1 0;
margin: 0; margin: 0;
padding: 0.6em 1em; padding-block: 0.6em;
padding-inline: 1em;
&-collapsed-content { &-collapsed-content {
margin-left: 0.7em; margin-inline-start: 0.7em;
text-align: left; text-align: start;
flex: 1; flex: 1;
min-width: 0; min-inline-size: 0;
} }
&-user-name { &-user-name {
img { img {
object-fit: contain; object-fit: contain;
height: 16px; block-size: 16px;
width: 16px; inline-size: 16px;
vertical-align: middle; vertical-align: middle;
} }
} }
@ -72,7 +73,7 @@
&-user-name-value, &-user-name-value,
&-screen-name { &-screen-name {
display: inline-block; display: inline-block;
max-width: 100%; max-inline-size: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -80,8 +81,8 @@
&-expanded-content { &-expanded-content {
flex: 1; flex: 1;
margin-left: 0.7em; margin-inline-start: 0.7em;
min-width: 0; min-inline-size: 0;
} }
} }
</style> </style>

6
src/components/block_card/block_card.vue
View file

@ -35,10 +35,10 @@
<style lang="scss"> <style lang="scss">
.block-card-content-container { .block-card-content-container {
margin-top: 0.5em; margin-block-start: 0.5em;
text-align: right; text-align: end;
button { button {
width: 10em; inline-size: 10em;
} }
} }
</style> </style>

14
src/components/checkbox/checkbox.vue
View file

@ -37,22 +37,22 @@ export default {
.checkbox { .checkbox {
position: relative; position: relative;
display: inline-block; display: inline-block;
min-height: 1.2em; min-block-size: 1.2em;
&-indicator { &-indicator {
position: relative; position: relative;
padding-left: 1.2em; padding-inline-start: 1.2em;
} }
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
top: 0; inset-block-start: 0;
display: block; display: block;
content: '✓'; content: '✓';
transition: color 200ms; transition: color 200ms;
width: 1.1em; inline-size: 1.1em;
height: 1.1em; block-size: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0px 0px 2px black inset; box-shadow: 0px 0px 2px black inset;
@ -96,7 +96,7 @@ export default {
} }
& > span { & > span {
margin-left: .5em; margin-inline-start: .5em;
} }
} }
</style> </style>

27
src/components/color_input/color_input.scss
View file

@ -6,9 +6,10 @@
&-field.input { &-field.input {
display: inline-flex; display: inline-flex;
flex: 0 0 0; flex: 0 0 0;
max-width: 9em; max-inline-size: 9em;
align-items: stretch; align-items: stretch;
padding: .2em 8px; padding-block: .2em;
padding-inline: 8px;
input { input {
background: none; background: none;
@ -20,23 +21,23 @@
&.textColor { &.textColor {
flex: 1 0 3em; flex: 1 0 3em;
min-width: 3em; min-inline-size: 3em;
padding: 0; padding: 0;
} }
&.nativeColor { &.nativeColor {
flex: 0 0 2em; flex: 0 0 2em;
min-width: 2em; min-inline-size: 2em;
align-self: center; align-self: center;
height: 2em; block-size: 2em;
} }
} }
.computedIndicator, .computedIndicator,
.transparentIndicator { .transparentIndicator {
flex: 0 0 2em; flex: 0 0 2em;
min-width: 2em; min-inline-size: 2em;
align-self: center; align-self: center;
height: 100%; block-size: 100%;
} }
.transparentIndicator { .transparentIndicator {
// forgot to install counter-strike source, ooops // forgot to install counter-strike source, ooops
@ -47,16 +48,16 @@
content: ''; content: '';
background-color: #000000; background-color: #000000;
position: absolute; position: absolute;
height: 50%; block-size: 50%;
width: 50%; inline-size: 50%;
} }
&::after { &::after {
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
} }
&::before { &::before {
bottom: 0; inset-block-end: 0;
right: 0; inset-inline-end: 0;
} }
} }
} }

3
src/components/color_input/color_input.vue
View file

@ -21,6 +21,7 @@
:id="name + '-t'" :id="name + '-t'"
class="textColor unstyled" class="textColor unstyled"
type="text" type="text"
dir="ltr"
:value="modelValue || fallback" :value="modelValue || fallback"
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
@ -112,7 +113,7 @@ export default {
<style lang="scss"> <style lang="scss">
.color-control { .color-control {
input.text-input { input.text-input {
max-width: 7em; max-inline-size: 7em;
flex: 1; flex: 1;
} }
} }

8
src/components/contrast_ratio/contrast_ratio.vue
View file

@ -88,17 +88,17 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: -4px; margin-block-start: -4px;
margin-bottom: 5px; margin-block-end: 5px;
.label { .label {
margin-right: 1em; margin-inline-end: 1em;
} }
.rating { .rating {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
} }
</style> </style>

52
src/components/conversation/conversation.vue
View file

@ -205,9 +205,9 @@
.conversation-dive-to-top-level-box { .conversation-dive-to-top-level-box {
padding: var(--status-margin, $status-margin); padding: var(--status-margin, $status-margin);
border-bottom-width: 1px; border-block-end-width: 1px;
border-bottom-style: solid; border-block-end-style: solid;
border-bottom-color: var(--border, $fallback--border); border-block-end-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
display: flex; display: flex;
@ -216,8 +216,8 @@
} }
.thread-ancestors { .thread-ancestors {
margin-left: var(--status-margin, $status-margin); margin-inline-start: var(--status-margin, $status-margin);
border-left: 2px solid var(--border, $fallback--border); border-inline-start: 2px solid var(--border, $fallback--border);
} }
.thread-ancestor.-faded .StatusContent { .thread-ancestor.-faded .StatusContent {
@ -227,10 +227,10 @@
} }
.thread-ancestor-dive-box { .thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin); padding-inline-start: var(--status-margin, $status-margin);
border-bottom-width: 1px; border-block-end-width: 1px;
border-bottom-style: solid; border-block-end-style: solid;
border-bottom-color: var(--border, $fallback--border); border-block-end-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
/* Make the button stretch along the whole row */ /* Make the button stretch along the whole row */
&, &-inner { &, &-inner {
@ -244,9 +244,9 @@
} }
.conversation-status { .conversation-status {
border-bottom-width: 1px; border-block-end-width: 1px;
border-bottom-style: solid; border-block-end-style: solid;
border-bottom-color: var(--border, $fallback--border); border-block-end-color: var(--border, $fallback--border);
border-radius: 0; border-radius: 0;
} }
@ -255,24 +255,30 @@
.thread-ancestor:last-child .thread-ancestor-dive-box, .thread-ancestor:last-child .thread-ancestor-dive-box,
&:last-child .conversation-status, &:last-child .conversation-status,
&.-expanded .thread-tree .conversation-status { &.-expanded .thread-tree .conversation-status {
border-bottom: none; border-block-end: none;
} }
.thread-ancestors + .thread-tree > .conversation-status { .thread-ancestors + .thread-tree > .conversation-status {
border-top-width: 1px; border-block-start-width: 1px;
border-top-style: solid; border-block-start-style: solid;
border-top-color: var(--border, $fallback--border); border-block-start-color: var(--border, $fallback--border);
} }
/* expanded conversation in timeline */ /* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body { &.status-fadein.-expanded .thread-body {
border-left-width: 4px; border-inline-start-width: 4px;
border-left-style: solid; border-inline-start-style: solid;
border-left-color: $fallback--cRed; border-inline-start-color: $fallback--cRed;
border-left-color: var(--cRed, $fallback--cRed); border-inline-start-color: var(--cRed, $fallback--cRed);
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-start-start-radius: 0;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-start-end-radius: 0;
border-bottom: 1px solid var(--border, $fallback--border); border-end-start-radius: $fallback--panelRadius;
border-end-end-radius: $fallback--panelRadius;
border-start-start-radius: 0;
border-start-end-radius: 0;
border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
border-block-end: 1px solid var(--border, $fallback--border);
} }
&.-expanded.status-fadein { &.-expanded.status-fadein {

41
src/components/desktop_nav/desktop_nav.scss
View file

@ -1,7 +1,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.DesktopNav { .DesktopNav {
width: 100%; inline-size: 100%;
input { input {
color: var(--inputTopbarText, var(--inputText)); color: var(--inputTopbarText, var(--inputText));
@ -13,13 +13,14 @@
.inner-nav { .inner-nav {
display: grid; display: grid;
grid-template-rows: var(--navbar-height); grid-template-rows: var(--navbar-block-size);
grid-template-columns: 2fr auto 2fr; grid-template-columns: 2fr auto 2fr;
grid-template-areas: "nav-left logo actions"; grid-template-areas: "nav-left logo actions";
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.2em; padding-block: 0;
padding-inline: 1.2em;
margin: auto; margin: auto;
max-width: 1110px; max-inline-size: 1110px;
} }
&.-logoLeft .inner-nav { &.-logoLeft .inner-nav {
@ -71,27 +72,27 @@
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--topBarText, $fallback--fg); background-color: var(--topBarText, $fallback--fg);
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
bottom: 0; inset-block-end: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
} }
img { img {
display: inline-block; display: inline-block;
height: var(--navbar-height); block-size: var(--navbar-block-size);
} }
} }
.nav-icon { .nav-icon {
margin-left: 0.2em; margin-inline-start: 0.2em;
width: 2em; inline-size: 2em;
height: 100%; block-size: 100%;
text-align: center; text-align: center;
&.router-link-active { &.router-link-active {
font-size: 1.2em; font-size: 1.2em;
margin-top: 0.05em; margin-block-start: 0.05em;
.svg-inline--fa { .svg-inline--fa {
font-weight: bolder; font-weight: bolder;
@ -109,12 +110,12 @@
.-wide { .-wide {
.nav-icon { .nav-icon {
margin-left: 0.7em; margin-inline-start: 0.7em;
} }
} }
.left { .left {
padding-left: 5px; padding-inline-start: 5px;
display: flex; display: flex;
} }
@ -122,9 +123,9 @@
grid-area: nav-left; grid-area: nav-left;
.favicon { .favicon {
height: 28px; block-size: 28px;
vertical-align: middle; vertical-align: middle;
padding-right: 5px; padding-inline-end: 5px;
} }
} }
@ -134,15 +135,15 @@
.item { .item {
flex: 1; flex: 1;
line-height: var(--navbar-height); line-height: var(--navbar-block-size);
height: var(--navbar-height); block-size: var(--navbar-block-size);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
&.right { &.right {
justify-content: flex-end; justify-content: flex-end;
text-align: right; text-align: end;
} }
} }
} }

38
src/components/dialog_modal/dialog_modal.vue
View file

@ -30,33 +30,37 @@
// TODO: unify with other modals. // TODO: unify with other modals.
.dark-overlay { .dark-overlay {
&::before { &::before {
bottom: 0; inset-block-end: 0;
content: " "; content: " ";
display: block; display: block;
cursor: default; cursor: default;
left: 0; inset-inline-start: 0;
position: fixed; position: fixed;
right: 0; inset-inline-end: 0;
top: 0; inset-block-start: 0;
background: rgba(27,31,35,.5); background: rgba(27,31,35,.5);
z-index: 2000; z-index: 2000;
} }
} }
.dialog-modal.panel { .dialog-modal.panel {
top: 0; inset-block-start: 0;
left: 50%; inset-inline-start: 50%;
max-height: 80vh; max-block-size: 80vb;
max-width: 90vw; max-inline-size: 90vi;
margin: 15vh auto; margin-block: 15vb;
margin-inline: auto;
position: fixed; position: fixed;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 2001; z-index: 2001;
cursor: default; cursor: default;
display: block; display: block;
width: max-content; inline-size: max-content;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
[dir="rtl"] & {
transform: translateX(50%);
}
.dialog-modal-heading { .dialog-modal-heading {
.title { .title {
@ -66,7 +70,8 @@
.dialog-modal-content { .dialog-modal-content {
margin: 0; margin: 0;
padding: 1rem 1rem; padding-block: 1rem;
padding-inline: 1rem;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
white-space: normal; white-space: normal;
@ -74,17 +79,18 @@
.dialog-modal-footer { .dialog-modal-footer {
margin: 0; margin: 0;
padding: .5em .5em; padding-block: .5em;
padding-inline: .5em;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-top: 1px solid $fallback--border; border-block-start: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border); border-block-start: 1px solid var(--border, $fallback--border);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
button { button {
width: auto; inline-size: auto;
margin-left: .5rem; margin-inline-start: .5rem;
} }
} }
} }

9
src/components/domain_mute_card/domain_mute_card.vue
View file

@ -34,20 +34,21 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.6em 1em 0.6em 0; padding-block: 0.6em 0.6em;
padding-inline: 0 1em;
&-domain { &-domain {
margin-right: 1em; margin-inline-end: 1em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
button { button {
width: 10em; inline-size: 10em;
} }
.autosuggest-results & { .autosuggest-results & {
padding-left: 1em; padding-inline-start: 1em;
} }
} }
</style> </style>

14
src/components/edit_status_modal/edit_status_modal.vue
View file

@ -28,20 +28,20 @@
} }
.edit-form-modal-panel { .edit-form-modal-panel {
flex-shrink: 0; flex-shrink: 0;
margin-top: 25%; margin-block-start: 25%;
margin-bottom: 2em; margin-block-end: 2em;
width: 100%; inline-size: 100%;
max-width: 700px; max-inline-size: 700px;
@media (orientation: landscape) { @media (orientation: landscape) {
margin-top: 8%; margin-block-start: 8%;
} }
.form-bottom-left { .form-bottom-left {
max-width: 6.5em; max-inline-size: 6.5em;
.emoji-icon { .emoji-icon {
justify-content: right; justify-content: end;
} }
} }
} }

38
src/components/emoji_input/emoji_input.vue
View file

@ -70,14 +70,15 @@
position: relative; position: relative;
&.with-picker input { &.with-picker input {
padding-right: 30px; padding-inline-end: 30px;
} }
.emoji-picker-icon { .emoji-picker-icon {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
right: 0; inset-inline-end: 0;
margin: .2em .25em; margin-block: .2em;
margin-inline: .25em;
font-size: 1.3em; font-size: 1.3em;
cursor: pointer; cursor: pointer;
line-height: 24px; line-height: 24px;
@ -90,7 +91,7 @@
.emoji-picker-panel { .emoji-picker-panel {
position: absolute; position: absolute;
z-index: 20; z-index: 20;
margin-top: 2px; margin-block-start: 2px;
&.hide { &.hide {
display: none display: none
@ -101,19 +102,20 @@
&-panel { &-panel {
position: absolute; position: absolute;
z-index: 20; z-index: 20;
margin-top: 2px; margin-block-start: 2px;
&.hide { &.hide {
display: none display: none
} }
&-body { &-body {
margin: 0 0.5em 0 0.5em; margin-block: 0 0;
margin-inline: 0.5em 0.5em;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: var(--popupShadow); box-shadow: var(--popupShadow);
min-width: 75%; min-inline-size: 75%;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg); background-color: var(--popover, $fallback--bg);
color: $fallback--link; color: $fallback--link;
@ -130,22 +132,23 @@
&-item { &-item {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
padding: 0.2em 0.4em; padding-block: 0.2em;
border-bottom: 1px solid rgba(0, 0, 0, 0.4); padding-inline: 0.4em;
height: 32px; border-block-end: 1px solid rgba(0, 0, 0, 0.4);
block-size: 32px;
.image { .image {
width: 32px; inline-size: 32px;
height: 32px; block-size: 32px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-size: 32px; font-size: 32px;
margin-right: 4px; margin-inline-end: 4px;
img { img {
width: 32px; inline-size: 32px;
height: 32px; block-size: 32px;
object-fit: contain; object-fit: contain;
} }
} }
@ -154,7 +157,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin: 0 0.1em 0 0.2em; margin-block: 0 0;
margin-inline: 0.2em 0.1em;
.displayText { .displayText {
line-height: 1.5; line-height: 1.5;

73
src/components/emoji_picker/emoji_picker.scss
View file

@ -2,21 +2,21 @@
.Notification { .Notification {
.emoji-picker { .emoji-picker {
min-width: 160%; min-inline-size: 160%;
width: 150%; inline-size: 150%;
overflow: hidden; overflow: hidden;
left: -70%; inset-inline-start: -70%;
max-width: 100%; max-inline-size: 100%;
@media (min-width: 800px) and (max-width: 1300px) { @media (min-width: 800px) and (max-width: 1300px) {
left: -50%; inset-inline-start: -50%;
min-width: 50%; min-inline-size: 50%;
max-width: 130%; max-inline-size: 130%;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
left: -10%; inset-inline-start: -10%;
min-width: 50%; min-inline-size: 50%;
max-width: 130%; max-inline-size: 130%;
} }
} }
} }
@ -24,8 +24,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
margin: 0 !important; margin: 0 !important;
z-index: 100; z-index: 100;
background-color: $fallback--bg; background-color: $fallback--bg;
@ -50,20 +50,21 @@
} }
.keep-open-label { .keep-open-label {
padding: 0 7px; padding-block: 0;
padding-inline: 7px;
display: flex; display: flex;
} }
.heading { .heading {
margin-top: 10px; margin-block-start: 10px;
height: 4.8em; block-size: 4.8em;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0px; min-block-size: 0px;
} }
.emoji-tabs { .emoji-tabs {
@ -71,14 +72,14 @@
} }
.emoji-groups { .emoji-groups {
min-height: 200px; min-block-size: 200px;
} }
.additional-tabs { .additional-tabs {
border-left: 1px solid; border-inline-start: 1px solid;
border-left-color: $fallback--icon; border-inline-start-color: $fallback--icon;
border-left-color: var(--icon, $fallback--icon); border-inline-start-color: var(--icon, $fallback--icon);
padding-left: 7px; padding-inline-start: 7px;
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -89,7 +90,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: auto; overflow: auto;
width: 100%; inline-size: 100%;
white-space: nowrap; white-space: nowrap;
@ -98,14 +99,14 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px; inline-size: 32px;
height: 32px; block-size: 32px;
padding: .4em; padding: .4em;
cursor: pointer; cursor: pointer;
img { img {
max-width: 100%; max-inline-size: 100%;
max-height: 100%; max-block-size: 100%;
object-fit: contain; object-fit: contain;
} }
@ -119,7 +120,7 @@
} }
&.active { &.active {
border-bottom: 4px solid; border-block-end: 4px solid;
svg { svg {
color: $fallback--lightText; color: $fallback--lightText;
@ -142,7 +143,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-block-size: 0;
&.hidden { &.hidden {
opacity: 0; opacity: 0;
@ -158,7 +159,7 @@
flex: 0 0 auto; flex: 0 0 auto;
input { input {
width: 100%; inline-size: 100%;
} }
} }
@ -189,12 +190,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 5px; padding-inline-start: 5px;
justify-content: left; justify-content: start;
&-title { &-title {
font-size: 0.85em; font-size: 0.85em;
width: 100%; inline-size: 100%;
margin: 0; margin: 0;
&.disabled { &.disabled {
@ -204,8 +205,8 @@
} }
&-item { &-item {
width: 32px; inline-size: 32px;
height: 32px; block-size: 32px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
font-size: 32px; font-size: 32px;
@ -217,8 +218,8 @@
img { img {
object-fit: contain; object-fit: contain;
max-width: 100%; max-inline-size: 100%;
max-height: 100%; max-block-size: 100%;
} }
} }

24
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -47,7 +47,7 @@
.emoji-reactions { .emoji-reactions {
display: flex; display: flex;
margin-top: 0.25em; margin-block-start: 0.25em;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -56,16 +56,17 @@
} }
.emoji-reaction { .emoji-reaction {
padding: 0 0.5em; padding-block: 0;
margin-right: 0.5em; padding-inline: 0.5em;
margin-top: 0.5em; margin-inline-end: 0.5em;
margin-block-start: 0.5em;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
.reaction-emoji { .reaction-emoji {
width: 2.55em !important; inline-size: 2.55em !important;
margin-right: 0.25em; margin-inline-end: 0.25em;
} }
&:focus { &:focus {
outline: none; outline: none;
@ -81,9 +82,10 @@
} }
.emoji-reaction-expand { .emoji-reaction-expand {
padding: 0 0.5em; padding-block: 0;
margin-right: 0.5em; padding-inline: 0.5em;
margin-top: 0.5em; margin-inline-end: 0.5em;
margin-block-start: 0.5em;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -94,8 +96,8 @@
.button-default.picked-reaction { .button-default.picked-reaction {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent, $fallback--link);
margin-left: -1px; // offset the border, can't use inset shadows either margin-inline-start: -1px; // offset the border, can't use inset shadows either
margin-right: calc(0.5em - 1px); margin-inline-end: calc(0.5em - 1px);
} }
</style> </style>

2
src/components/extra_buttons/extra_buttons.vue
View file

@ -213,7 +213,7 @@
.ExtraButtons { .ExtraButtons {
/* override of popover internal stuff */ /* override of popover internal stuff */
.popover-trigger-button { .popover-trigger-button {
width: auto; inline-size: auto;
} }
.popover-trigger { .popover-trigger {

3
src/components/favorite_button/favorite_button.vue
View file

@ -45,7 +45,8 @@
> :first-child { > :first-child {
padding: 10px; padding: 10px;
margin: -10px -8px -10px -10px; margin-block: -10px -10px;
margin-inline: -10px -8px;
} }
.action-counter { .action-counter {

14
src/components/flash/flash.vue
View file

@ -45,18 +45,18 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.Flash { .Flash {
display: inline-block; display: inline-block;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
position: relative; position: relative;
.player { .player {
height: 100%; block-size: 100%;
width: 100%; inline-size: 100%;
} }
.placeholder { .placeholder {
height: 100%; block-size: 100%;
width: 100%; inline-size: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -65,7 +65,7 @@
} }
.hider { .hider {
top: 0; inset-block-start: 0;
} }
.label { .label {

13
src/components/follow_card/follow_card.vue
View file

@ -46,15 +46,16 @@
} }
&-button { &-button {
margin-top: 0.5em; margin-block-start: 0.5em;
padding: 0 1.5em; padding-block: 0;
margin-left: 1em; padding-inline: 1.5em;
margin-inline-start: 1em;
} }
&-follow-button { &-follow-button {
margin-top: 0.5em; margin-block-start: 0.5em;
margin-left: auto; margin-inline-start: auto;
width: 10em; inline-size: 10em;
} }
} }
</style> </style>

10
src/components/follow_request_card/follow_request_card.vue
View file

@ -47,14 +47,14 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
button { button {
margin-top: 0.5em; margin-block-start: 0.5em;
margin-right: 0.5em; margin-inline-end: 0.5em;
flex: 1 1; flex: 1 1;
max-width: 12em; max-inline-size: 12em;
min-width: 8em; min-inline-size: 8em;
&:last-child { &:last-child {
margin-right: 0; margin-inline-end: 0;
} }
} }
} }

11
src/components/font_control/font_control.vue
View file

@ -43,6 +43,7 @@
v-model="family" v-model="family"
class="custom-font" class="custom-font"
type="text" type="text"
dir="ltr"
> >
</div> </div>
</template> </template>
@ -53,17 +54,17 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.font-control { .font-control {
input.custom-font { input.custom-font {
min-width: 10em; min-inline-size: 10em;
} }
&.custom { &.custom {
/* TODO Should make proper joiners... */ /* TODO Should make proper joiners... */
.font-switcher { .font-switcher {
border-top-right-radius: 0; border-start-end-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.custom-font { .custom-font {
border-top-left-radius: 0; border-start-start-radius: 0;
border-bottom-left-radius: 0; border-end-start-radius: 0;
} }
} }
} }

32
src/components/gallery/gallery.vue
View file

@ -96,18 +96,18 @@
.gallery-row { .gallery-row {
position: relative; position: relative;
height: 0; block-size: 0;
width: 100%; inline-size: 100%;
flex-grow: 1; flex-grow: 1;
&:not(:first-child) { &:not(:first-child) {
margin-top: 0.5em; margin-block-start: 0.5em;
} }
} }
&.-long { &.-long {
.gallery-rows { .gallery-rows {
max-height: 25em; max-block-size: 25em;
overflow: hidden; overflow: hidden;
mask: mask:
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
@ -135,14 +135,15 @@
line-height: 2; line-height: 2;
button { button {
padding: 0 2em; padding-block: 0;
padding-inline: 2em;
} }
} }
.gallery-row { .gallery-row {
&.-grid, &.-grid,
&.-minimal { &.-minimal {
height: auto; block-size: auto;
.gallery-row-inner { .gallery-row-inner {
position: relative; position: relative;
} }
@ -151,18 +152,18 @@
.gallery-row-inner { .gallery-row-inner {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; inset-block-end: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-content: stretch; align-content: stretch;
&.-grid { &.-grid {
width: 100%; inline-size: 100%;
height: auto; block-size: auto;
position: relative; position: relative;
display: grid; display: grid;
grid-column-gap: 0.5em; grid-column-gap: 0.5em;
@ -176,12 +177,13 @@
} }
.gallery-item { .gallery-item {
margin: 0 0.5em 0 0; margin-block: 0 0;
margin-inline: 0 0.5em;
flex-grow: 1; flex-grow: 1;
height: 100%; block-size: 100%;
box-sizing: border-box; box-sizing: border-box;
// to make failed images a bit more noticeable on chromium // to make failed images a bit more noticeable on chromium
min-width: 2em; min-inline-size: 2em;
&:last-child { &:last-child {
margin: 0; margin: 0;
} }

14
src/components/global_notice_list/global_notice_list.vue
View file

@ -29,8 +29,8 @@
.global-notice-list { .global-notice-list {
position: fixed; position: fixed;
top: 50px; inset-block-start: 50px;
width: 100%; inline-size: 100%;
pointer-events: none; pointer-events: none;
z-index: 1001; z-index: 1001;
display: flex; display: flex;
@ -40,12 +40,12 @@
.global-notice { .global-notice {
pointer-events: auto; pointer-events: auto;
text-align: center; text-align: center;
width: 40em; inline-size: 40em;
max-width: calc(100% - 3em); max-inline-size: calc(100% - 3em);
display: flex; display: flex;
padding-left: 1.5em; padding-inline-start: 1.5em;
line-height: 2; line-height: 2;
margin-bottom: 0.5em; margin-block-end: 0.5em;
.notice-message { .notice-message {
flex: 1 1 100%; flex: 1 1 100%;
@ -87,7 +87,7 @@
} }
.close-notice { .close-notice {
padding-right: 0.2em; padding-inline-end: 0.2em;
.svg-inline--fa:hover { .svg-inline--fa:hover {
opacity: 0.6; opacity: 0.6;
} }

6
src/components/image_cropper/image_cropper.vue
View file

@ -60,15 +60,15 @@
img { img {
display: block; display: block;
max-width: 100%; max-inline-size: 100%;
} }
} }
&-buttons-wrapper { &-buttons-wrapper {
margin-top: 10px; margin-block-start: 10px;
button { button {
margin-top: 5px; margin-block-start: 5px;
} }
} }
} }

20
src/components/link-preview/link-preview.vue
View file

@ -40,15 +40,15 @@
flex-direction: row; flex-direction: row;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
margin-top: 0.5em; margin-block-start: 0.5em;
.card-image { .card-image {
flex-shrink: 0; flex-shrink: 0;
width: 120px; inline-size: 120px;
max-width: 25%; max-inline-size: 25%;
img { img {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
object-fit: cover; object-fit: cover;
border-radius: $fallback--attachmentRadius; border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
@ -56,7 +56,7 @@
} }
.card-content { .card-content {
max-height: 100%; max-block-size: 100%;
margin: 0.5em; margin: 0.5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -67,18 +67,20 @@
} }
.card-description { .card-description {
margin: 0.5em 0 0 0; margin-block: 0.5em 0;
margin-inline: 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word; word-break: break-word;
line-height: 1.2em; line-height: 1.2em;
// cap description at 3 lines, the 1px is to clean up some stray pixels // cap description at 3 lines, the 1px is to clean up some stray pixels
// TODO: fancier fade-out at the bottom to show off that it's too long? // TODO: fancier fade-out at the bottom to show off that it's too long?
max-height: calc(1.2em * 3 - 1px); max-block-size: calc(1.2em * 3 - 1px);
} }
.nsfw-alert { .nsfw-alert {
margin: 2em 0; margin-block: 2em;
margin-inline: 0;
} }
color: $fallback--text; color: $fallback--text;

6
src/components/list/list.vue
View file

@ -39,9 +39,9 @@ export default {
.list { .list {
&-item:not(:last-child) { &-item:not(:last-child) {
border-bottom: 1px solid; border-block-end: 1px solid;
border-bottom-color: $fallback--border; border-block-end-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border); border-block-end-color: var(--border, $fallback--border);
} }
&-empty-content { &-empty-content {

13
src/components/list_edit/list_edit.vue
View file

@ -72,19 +72,20 @@
.list-edit { .list-edit {
.input-wrap { .input-wrap {
display: flex; display: flex;
margin: 0.7em 0.5em 0.7em 0.5em; margin-block: 0.7em 0.7em;
margin-inline: 0.5em 0.5em;
input { input {
width: 100%; inline-size: 100%;
} }
} }
.search-icon { .search-icon {
margin-right: 0.3em; margin-inline-end: 0.3em;
} }
.member-list { .member-list {
padding-bottom: 0.7rem; padding-block-end: 0.7rem;
} }
.basic-user-card:hover, .basic-user-card:hover,
@ -96,9 +97,9 @@
.go-back-button { .go-back-button {
text-align: center; text-align: center;
line-height: 1; line-height: 1;
height: 100%; block-size: 100%;
align-self: start; align-self: start;
width: var(--__panel-heading-height-inner); inline-size: var(--__panel-heading-block-size-inner);
} }
.btn { .btn {

8
src/components/list_new/list_new.vue
View file

@ -67,11 +67,11 @@
.list-new { .list-new {
.search-icon { .search-icon {
margin-right: 0.3em; margin-inline-end: 0.3em;
} }
.member-list { .member-list {
padding-bottom: 0.7rem; padding-block-end: 0.7rem;
} }
.basic-user-card:hover, .basic-user-card:hover,
@ -83,9 +83,9 @@
.go-back-button { .go-back-button {
text-align: center; text-align: center;
line-height: 1; line-height: 1;
height: 100%; block-size: 100%;
align-self: start; align-self: start;
width: var(--__panel-heading-height-inner); inline-size: var(--__panel-heading-block-size-inner);
} }
.btn { .btn {

7
src/components/list_user_search/list_user_search.vue
View file

@ -31,15 +31,16 @@
.input-wrap { .input-wrap {
display: flex; display: flex;
margin: 0.7em 0.5em 0.7em 0.5em; margin-block: 0.7em 0.7em;
margin-inline: 0.5em 0.5em;
input { input {
width: 100%; inline-size: 100%;
} }
} }
.search-icon { .search-icon {
margin-right: 0.3em; margin-inline-end: 0.3em;
} }
</style> </style>

16
src/components/local_bubble_panel/local_bubble_panel.scss
View file

@ -2,20 +2,20 @@
margin: 1em; margin: 1em;
table { table {
width:100%; inline-size:100%;
text-align: left; text-align: start;
padding-left:10px; padding-inline-start:10px;
padding-bottom:20px; padding-block-end:20px;
th, td { th, td {
width: 180px; inline-size: 180px;
max-width: 360px; max-inline-size: 360px;
overflow: hidden; overflow: hidden;
vertical-align: text-top; vertical-align: text-block-start;
} }
th+th, td+td { th+th, td+td {
width: auto; inline-size: auto;
} }
} }
} }

13
src/components/login_form/login_form.vue
View file

@ -101,8 +101,8 @@
padding: 0.6em; padding: 0.6em;
.btn { .btn {
min-height: 2em; min-block-size: 2em;
width: 10em; inline-size: 10em;
} }
.register { .register {
@ -110,7 +110,7 @@
} }
.login-bottom { .login-bottom {
margin-top: 1.0em; margin-block-start: 1.0em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -120,17 +120,18 @@
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.3em 0.5em 0.6em; padding-block: 0.3em 0.6em;
padding-inline: 0.5em;
line-height:24px; line-height:24px;
} }
.form-bottom { .form-bottom {
display: flex; display: flex;
padding: 0.5em; padding: 0.5em;
height: 32px; block-size: 32px;
button { button {
width: 10em; inline-size: 10em;
} }
p { p {

75
src/components/media_modal/media_modal.vue
View file

@ -115,9 +115,9 @@
<script src="./media_modal.js"></script> <script src="./media_modal.js"></script>
<style lang="scss"> <style lang="scss">
$modal-view-button-icon-height: 3em; $modal-view-button-icon-block-size: 3em;
$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2); $modal-view-button-icon-half-block-size: calc(#{$modal-view-button-icon-block-size} / 2);
$modal-view-button-icon-width: 3em; $modal-view-button-icon-block-size: 3em;
$modal-view-button-icon-margin: 0.5em; $modal-view-button-icon-margin: 0.5em;
.modal-view.media-modal-view { .modal-view.media-modal-view {
@ -156,16 +156,16 @@ $modal-view-button-icon-margin: 0.5em;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
max-width: 100%; max-inline-size: 100%;
max-height: 100%; max-block-size: 100%;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
flex-grow: 1; flex-grow: 1;
justify-content: center; justify-content: center;
&-inner { &-inner {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -178,24 +178,25 @@ $modal-view-button-icon-margin: 0.5em;
.counter { .counter {
/* Hardcoded since background is also hardcoded */ /* Hardcoded since background is also hardcoded */
color: white; color: white;
margin-top: 1em; margin-block-start: 1em;
text-shadow: 0 0 10px black, 0 0 10px black; text-shadow: 0 0 10px black, 0 0 10px black;
padding: 0.2em 2em; padding-block: 0.2em;
padding-inline: 2em;
} }
.description { .description {
flex: 0 0 auto; flex: 0 0 auto;
overflow-y: auto; overflow-y: auto;
min-height: 1em; min-block-size: 1em;
max-width: 500px; max-inline-size: 500px;
max-height: 9.5em; max-block-size: 9.5em;
word-break: break-word; word-break: break-word;
white-space: pre-line; white-space: pre-line;
} }
.modal-image { .modal-image {
max-width: 100%; max-inline-size: 100%;
max-height: 100%; max-block-size: 100%;
image-orientation: from-image; // NOTE: only FF supports this image-orientation: from-image; // NOTE: only FF supports this
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein; animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
@ -205,8 +206,8 @@ $modal-view-button-icon-margin: 0.5em;
} }
.loading-spinner { .loading-spinner {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
display: flex; display: flex;
@ -228,15 +229,15 @@ $modal-view-button-icon-margin: 0.5em;
overflow: visible; overflow: visible;
cursor: pointer; cursor: pointer;
transition: opacity 333ms cubic-bezier(.4,0,.22,1); transition: opacity 333ms cubic-bezier(.4,0,.22,1);
height: $modal-view-button-icon-height; block-size: $modal-view-button-icon-block-size;
width: $modal-view-button-icon-width; inline-size: $modal-view-button-icon-block-size;
.button-icon { .button-icon {
position: absolute; position: absolute;
height: $modal-view-button-icon-height; block-size: $modal-view-button-icon-block-size;
width: $modal-view-button-icon-width; inline-size: $modal-view-button-icon-block-size;
font-size: 1rem; font-size: 1rem;
line-height: $modal-view-button-icon-height; line-height: $modal-view-button-icon-block-size;
color: #FFF; color: #FFF;
text-align: center; text-align: center;
background-color: rgba(0,0,0,.3); background-color: rgba(0,0,0,.3);
@ -246,42 +247,42 @@ $modal-view-button-icon-margin: 0.5em;
.modal-view-button-arrow { .modal-view-button-arrow {
position: absolute; position: absolute;
display: block; display: block;
top: 50%; inset-block-start: 50%;
margin-top: $modal-view-button-icon-half-height; margin-block-start: $modal-view-button-icon-half-block-size;
width: $modal-view-button-icon-width; inline-size: $modal-view-button-icon-block-size;
height: $modal-view-button-icon-height; block-size: $modal-view-button-icon-block-size;
.arrow-icon { .arrow-icon {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
line-height: $modal-view-button-icon-height; line-height: $modal-view-button-icon-block-size;
color: #FFF; color: #FFF;
text-align: center; text-align: center;
background-color: rgba(0,0,0,.3); background-color: rgba(0,0,0,.3);
} }
&--prev { &--prev {
left: 0; inset-inline-start: 0;
.arrow-icon { .arrow-icon {
left: $modal-view-button-icon-margin; inset-inline-start: $modal-view-button-icon-margin;
} }
} }
&--next { &--next {
right: 0; inset-inline-end: 0;
.arrow-icon { .arrow-icon {
right: $modal-view-button-icon-margin; inset-inline-end: $modal-view-button-icon-margin;
} }
} }
} }
.modal-view-button-hide { .modal-view-button-hide {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
right: 0; inset-inline-end: 0;
.button-icon { .button-icon {
top: $modal-view-button-icon-margin; inset-block-start: $modal-view-button-icon-margin;
right: $modal-view-button-icon-margin; inset-inline-end: $modal-view-button-icon-margin;
} }
} }
} }

17
src/components/mention_link/mention_link.scss
View file

@ -15,11 +15,11 @@
.mention-avatar { .mention-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
width: 1.5em; inline-size: 1.5em;
height: 1.5em; block-size: 1.5em;
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
margin-right: 0.2em; margin-inline-end: 0.2em;
} }
.full { .full {
@ -27,14 +27,14 @@
display: inline-block; display: inline-block;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
top: 100%; inset-block-start: 100%;
left: 0; inset-inline-start: 0;
height: 100%; block-size: 100%;
word-wrap: normal; word-wrap: normal;
white-space: nowrap; white-space: nowrap;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
z-index: 1; z-index: 1;
margin-top: 0.25em; margin-block-start: 0.25em;
padding: 0.5em; padding: 0.5em;
user-select: all; user-select: all;
} }
@ -66,7 +66,8 @@
opacity: 0.8; opacity: 0.8;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
padding: 0 0.1em; padding-block: 0;
padding-inline: 0.1em;
vertical-align: -25%; vertical-align: -25%;
margin: 0; margin: 0;
} }

2
src/components/mentions_line/mentions_line.scss
View file

@ -6,7 +6,7 @@
} }
.showMoreLess { .showMoreLess {
margin-left: 0.5em; margin-inline-start: 0.5em;
white-space: normal; white-space: normal;
color: var(--link); color: var(--link);
} }

47
src/components/mobile_nav/mobile_nav.vue
View file

@ -99,10 +99,10 @@
.MobileNav { .MobileNav {
.mobile-nav { .mobile-nav {
display: grid; display: grid;
line-height: var(--navbar-height); line-height: var(--navbar-block-size);
grid-template-rows: 50px; grid-template-rows: 50px;
grid-template-columns: 2fr auto; grid-template-columns: 2fr auto;
width: 100%; inline-size: 100%;
box-sizing: border-box; box-sizing: border-box;
a { a {
color: var(--topBarLink, $fallback--link); color: var(--topBarLink, $fallback--link);
@ -110,7 +110,7 @@
} }
.mobile-inner-nav { .mobile-inner-nav {
width: 100%; inline-size: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -118,13 +118,15 @@
.mobile-nav-button { .mobile-nav-button {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
padding: 0 1em; padding-block: 0;
padding-inline: 1em;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.site-name { .site-name {
padding: 0 .3em; padding-block: 0;
padding-inline: .3em;
display: inline-block; display: inline-block;
} }
@ -135,24 +137,24 @@
.alert-dot { .alert-dot {
border-radius: 100%; border-radius: 100%;
height: 8px; block-size: 8px;
width: 8px; inline-size: 8px;
position: absolute; position: absolute;
left: calc(50% - 4px); inset-inline-start: calc(50% - 4px);
top: calc(50% - 4px); inset-block-start: calc(50% - 4px);
margin-left: 6px; margin-inline-start: 6px;
margin-top: -6px; margin-block-start: -6px;
background-color: $fallback--cRed; background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed); background-color: var(--badgeNotification, $fallback--cRed);
} }
.mobile-notifications-drawer { .mobile-notifications-drawer {
width: 100%; inline-size: 100%;
height: 100vh; block-size: 100vb;
overflow-x: hidden; overflow-x: hidden;
position: fixed; position: fixed;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
box-shadow: 1px 1px 4px rgba(0,0,0,.6); box-shadow: 1px 1px 4px rgba(0,0,0,.6);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
transition-property: transform; transition-property: transform;
@ -164,6 +166,9 @@
&.-closed { &.-closed {
transform: translateX(100%); transform: translateX(100%);
box-shadow: none; box-shadow: none;
[dir="rtl"] & {
transform: translate(-100%);
}
} }
} }
@ -172,8 +177,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
z-index: 1; z-index: 1;
width: 100%; inline-size: 100%;
height: 50px; block-size: 50px;
line-height: 50px; line-height: 50px;
position: absolute; position: absolute;
color: var(--topBarText); color: var(--topBarText);
@ -184,14 +189,14 @@
.title { .title {
font-size: 1.3em; font-size: 1.3em;
margin-left: 0.6em; margin-inline-start: 0.6em;
} }
} }
.mobile-notifications { .mobile-notifications {
margin-top: 50px; margin-block-start: 50px;
width: 100vw; inline-size: 100vi;
height: calc(100vh - var(--navbar-height)); block-size: calc(100vb - var(--navbar-block-size));
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;

8
src/components/mobile_post_status_button/mobile_post_status_button.vue
View file

@ -16,12 +16,12 @@
.MobilePostButton { .MobilePostButton {
&.button-default { &.button-default {
width: 5em; inline-size: 5em;
height: 5em; block-size: 5em;
border-radius: 100%; border-radius: 100%;
position: fixed; position: fixed;
bottom: 1.5em; inset-block-end: 1.5em;
right: 1.5em; inset-inline-end: 1.5em;
// TODO: this needs its own color, it has to stand out enough and link color // TODO: this needs its own color, it has to stand out enough and link color
// is not very optimal for this particular use. // is not very optimal for this particular use.
background-color: $fallback--fg; background-color: $fallback--fg;

18
src/components/mod_modal/mod_modal.scss
View file

@ -6,13 +6,13 @@
.mod-modal-panel { .mod-modal-panel {
/* Explanation: /* Explanation:
* Modal is positioned vertically centered. * Modal is positioned vertically centered.
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen * 100vb - 100% = Distance between modal's top+bottom boundaries and screen
* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen * (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
* + 100% - we move modal completely off-screen, it's top boundary touches * + 100% - we move modal completely off-screen, it's top boundary touches
* bottom of the screen * bottom of the screen
* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
*/ */
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
/* For mobile, the modal takes 100% of the available screen. /* For mobile, the modal takes 100% of the available screen.
@ -28,17 +28,17 @@
transition: transform; transition: transform;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-duration: 300ms; transition-duration: 300ms;
width: 1000px; inline-size: 1000px;
max-width: 90vw; max-inline-size: 90vi;
height: 90vh; block-size: 90vb;
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
max-width: 100vw; max-inline-size: 100vi;
height: 100%; block-size: 100%;
} }
.panel-body { .panel-body {
height: inherit; block-size: inherit;
} }
} }
} }

15
src/components/mod_modal/mod_modal_content.scss
View file

@ -1,21 +1,22 @@
@import 'src/_variables.scss'; @import 'src/_variables.scss';
.mod_tab-switcher { .mod_tab-switcher {
height: 100%; block-size: 100%;
.content { .content {
margin: 1em 1em 1.4em; margin-block: 1em 1.4em;
margin-inline: 1em;
> div { > div {
margin-bottom: .5em; margin-block-end: .5em;
&:last-child { &:last-child {
margin-bottom: 0; margin-block-end: 0;
} }
} }
textarea { textarea {
width: 100%; inline-size: 100%;
max-width: 100%; max-inline-size: 100%;
height: 100px; block-size: 100px;
} }
} }
} }

27
src/components/mod_modal/tabs/reports_tab/reports_tab.scss
View file

@ -6,8 +6,8 @@
} }
& > :not(:last-child) { & > :not(:last-child) {
border-bottom: 1px solid; border-block-end: 1px solid;
border-bottom-color: var(--border, #222); border-block-end-color: var(--border, #222);
} }
.report-content { .report-content {
@ -15,12 +15,12 @@
} }
.report-author { .report-author {
padding-top: 0.5em; padding-block-start: 0.5em;
} }
.small-avatar { .small-avatar {
height: 25px; block-size: 25px;
width: 25px; inline-size: 25px;
padding-right: 0.4em; padding-inline-end: 0.4em;
vertical-align: middle; vertical-align: middle;
} }
@ -46,11 +46,11 @@
.note-header { .note-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 0.5em; padding-block-end: 0.5em;
} }
button { button {
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
} }
@ -60,10 +60,11 @@
} }
button { button {
min-height: 2em; min-block-size: 2em;
min-width: 10em; min-inline-size: 10em;
padding: 0 2em; padding-block: 0;
margin-top: 0.5em; padding-inline: 2em;
margin-block-start: 0.5em;
} }
} }
} }
@ -71,7 +72,7 @@
.panel-footer { .panel-footer {
display: flex; display: flex;
& > * { & > * {
margin-right: 0.5em; margin-inline-end: 0.5em;
} }
} }
} }

8
src/components/modal/modal.vue
View file

@ -37,10 +37,10 @@ export default {
.modal-view { .modal-view {
z-index: 2000; z-index: 2000;
position: fixed; position: fixed;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; inset-block-end: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

4
src/components/moderation_tools/moderation_tools.vue
View file

@ -166,11 +166,11 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.moderation-tools-popover { .moderation-tools-popover {
height: 100%; block-size: 100%;
z-index: 999; z-index: 999;
.trigger { .trigger {
display: flex !important; display: flex !important;
height: 100%; block-size: 100%;
} }
} }

16
src/components/mrf_transparency_panel/mrf_transparency_panel.scss
View file

@ -2,20 +2,20 @@
margin: 1em; margin: 1em;
table { table {
width:100%; inline-size:100%;
text-align: left; text-align: start;
padding-left:10px; padding-inline-start:10px;
padding-bottom:20px; padding-block-end:20px;
th, td { th, td {
width: 180px; inline-size: 180px;
max-width: 360px; max-inline-size: 360px;
overflow: hidden; overflow: hidden;
vertical-align: text-top; vertical-align: text-block-start;
} }
th+th, td+td { th+th, td+td {
width: auto; inline-size: auto;
} }
} }
} }

6
src/components/mute_card/mute_card.vue
View file

@ -35,10 +35,10 @@
<style lang="scss"> <style lang="scss">
.mute-card-content-container { .mute-card-content-container {
margin-top: 0.5em; margin-block-start: 0.5em;
text-align: right; text-align: end;
button { button {
width: 10em; inline-size: 10em;
} }
} }
</style> </style>

38
src/components/nav_panel/nav_panel.vue
View file

@ -121,23 +121,23 @@
li { li {
position: relative; position: relative;
border-bottom: 1px solid; border-block-end: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
padding: 0; padding: 0;
&:first-child .menu-item { &:first-child .menu-item {
border-top-right-radius: $fallback--panelRadius; border-start-end-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius); border-start-end-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius; border-start-start-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius); border-start-start-radius: var(--panelRadius, $fallback--panelRadius);
} }
&:last-child .menu-item { &:last-child .menu-item {
border-bottom-right-radius: $fallback--panelRadius; border-end-end-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius); border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius; border-end-start-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius); border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
} }
} }
@ -148,10 +148,11 @@
.menu-item { .menu-item {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
height: 3.5em; block-size: 3.5em;
line-height: 3.5em; line-height: 3.5em;
padding: 0 1em; padding-block: 0;
width: 100%; padding-inline: 1em;
inline-size: 100%;
color: $fallback--link; color: $fallback--link;
color: var(--link, $fallback--link); color: var(--link, $fallback--link);
@ -184,15 +185,16 @@
} }
.timelines-chevron { .timelines-chevron {
margin-left: 0.8em; margin-inline-start: 0.8em;
font-size: 1.1em; font-size: 1.1em;
} }
.timelines-background { .timelines-background {
padding: 0 0 0 0.6em; padding-block: 0 0;
padding-inline: 0.6em 0;
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--selectedMenu, $fallback--lightBg); background-color: var(--selectedMenu, $fallback--lightBg);
border-top: 1px solid; border-block-start: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
} }
@ -203,13 +205,13 @@
} }
.fa-scale-110 { .fa-scale-110 {
margin-right: 0.8em; margin-inline-end: 0.8em;
} }
.badge { .badge {
position: absolute; position: absolute;
right: 0.6rem; inset-inline-end: 0.6rem;
top: 1.25em; inset-block-start: 1.25em;
} }
} }
</style> </style>

18
src/components/notification/notification.scss
View file

@ -1,7 +1,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.notification-reaction-emoji { .notification-reaction-emoji {
width: 40px; inline-size: 40px;
display: inline-flex; display: inline-flex;
vertical-align: middle; vertical-align: middle;
flex-direction: column; flex-direction: column;
@ -9,7 +9,7 @@
// TODO Copypaste from Status, should unify it somehow // TODO Copypaste from Status, should unify it somehow
.Notification { .Notification {
border-bottom: 1px solid; border-block-end: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
word-wrap: break-word; word-wrap: break-word;
@ -23,8 +23,9 @@
} }
&.-muted { &.-muted {
padding: 0.25em 0.6em; padding-block: 0.25em;
height: 1.2em; padding-inline: 0.6em;
block-size: 1.2em;
line-height: 1.2em; line-height: 1.2em;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -48,7 +49,7 @@
.status-username { .status-username {
font-weight: normal; font-weight: normal;
flex: 0 1 auto; flex: 0 1 auto;
margin-right: 0.2em; margin-inline-end: 0.2em;
font-size: smaller; font-size: smaller;
} }
@ -58,7 +59,7 @@
.mute-words { .mute-words {
flex: 1 0 5em; flex: 1 0 5em;
margin-left: 0.2em; margin-inline-start: 0.2em;
&::before { &::before {
content: ' '; content: ' ';
@ -67,13 +68,14 @@
.unmute { .unmute {
flex: 0 0 auto; flex: 0 0 auto;
margin-left: auto; margin-inline-start: auto;
display: block; display: block;
} }
} }
.type-icon { .type-icon {
margin: 0 0.1em; margin-block: 0;
margin-inline: 0.1em;
} }
&.-type--repeat .type-icon { &.-type--repeat .type-icon {

4
src/components/notifications/notification_filters.vue
View file

@ -117,8 +117,8 @@ export default {
> button { > button {
line-height: 100%; line-height: 100%;
height: 100%; block-size: 100%;
width: var(--__panel-heading-height-inner); inline-size: var(--__panel-heading-block-size-inner);
text-align: center; text-align: center;
svg { svg {

48
src/components/notifications/notifications.scss
View file

@ -3,7 +3,7 @@
.Notifications { .Notifications {
&:not(.minimal) { &:not(.minimal) {
// a bit of a hack to allow scrolling below notifications // a bit of a hack to allow scrolling below notifications
padding-bottom: 15em; padding-block-end: 15em;
} }
.loadmore-error { .loadmore-error {
@ -16,10 +16,10 @@
.notification-overlay { .notification-overlay {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
bottom: 0; inset-block-end: 0;
pointer-events: none; pointer-events: none;
} }
@ -44,7 +44,7 @@
} }
&:last-child .Notification { &:last-child .Notification {
border-bottom: none; border-block-end: none;
} }
.non-mention { .non-mention {
@ -52,11 +52,11 @@
flex: 1; flex: 1;
flex-wrap: nowrap; flex-wrap: nowrap;
padding: 0.6em; padding: 0.6em;
min-width: 0; min-inline-size: 0;
.avatar-container { .avatar-container {
width: 32px; inline-size: 32px;
height: 32px; block-size: 32px;
} }
--link: var(--faintLink); --link: var(--faintLink);
@ -78,14 +78,15 @@
} }
.follow-text, .move-text { .follow-text, .move-text {
padding: 0.5em 0; padding-block: 0.5em;
padding-inline: 0;
overflow-wrap: break-word; overflow-wrap: break-word;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.follow-name { .follow-name {
display: block; display: block;
max-width: 100%; max-inline-size: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -103,12 +104,12 @@
.notification-right { .notification-right {
flex: 1; flex: 1;
padding-left: 0.8em; padding-inline-start: 0.8em;
min-width: 0; min-inline-size: 0;
.timeago { .timeago {
min-width: 3em; min-inline-size: 3em;
text-align: right; text-align: end;
} }
} }
@ -117,12 +118,12 @@
} }
.notification-details { .notification-details {
min-width: 0; min-inline-size: 0;
word-wrap: break-word; word-wrap: break-word;
line-height: var(--post-line-height); line-height: var(--post-line-height);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; inline-size: 100%;
flex: 1 1 0; flex: 1 1 0;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -136,23 +137,24 @@
.username { .username {
font-weight: bolder; font-weight: bolder;
max-width: 100%; max-inline-size: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.timeago { .timeago {
margin-right: 0.2em; margin-inline-end: 0.2em;
} }
.status-content { .status-content {
margin: 0; margin: 0;
max-height: 300px; max-block-size: 300px;
} }
h1 { h1 {
word-break: break-all; word-break: break-all;
margin: 0 0 0.3em; margin-block: 0 0.3em;
margin-inline: 0;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
line-height: 1.5; line-height: 1.5;
@ -164,8 +166,8 @@
p { p {
margin: 0; margin: 0;
margin-top: 0; margin-block-start: 0;
margin-bottom: 0.3em; margin-block-end: 0.3em;
} }
} }
} }

2
src/components/panel_loading/panel_loading.vue
View file

@ -27,7 +27,7 @@ export default {}
.panel-loading { .panel-loading {
display: flex; display: flex;
height: 100%; block-size: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 2em; font-size: 2em;

19
src/components/password_reset/password_reset.vue
View file

@ -89,19 +89,20 @@
display: flex; display: flex;
flex: 1 0; flex: 1 0;
flex-direction: column; flex-direction: column;
margin-top: 0.6em; margin-block-start: 0.6em;
max-width: 18rem; max-inline-size: 18rem;
> * { > * {
min-width: 0; min-inline-size: 0;
} }
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1em; margin-block-end: 1em;
padding: 0.3em 0; padding-block: 0.3em;
padding-inline: 0;
line-height: 1.85em; line-height: 1.85em;
} }
@ -114,16 +115,18 @@
.alert { .alert {
padding: 0.5em; padding: 0.5em;
margin: 0.3em 0 1em; margin-block: 0.3em 1em;
margin-inline: 0;
} }
.password-reset-required { .password-reset-required {
background-color: var(--alertError, $fallback--alertError); background-color: var(--alertError, $fallback--alertError);
padding: 10px 0; padding-block: 10px;
padding-inline: 0;
} }
.notice-dismissible { .notice-dismissible {
padding-right: 2rem; padding-inline-end: 2rem;
} }
.dismiss { .dismiss {

30
src/components/poll/poll.vue
View file

@ -25,7 +25,7 @@
</div> </div>
<div <div
class="result-fill" class="result-fill"
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }" :style="{ 'block-size': `${percentageForOption(option.votes_count)}%` }"
/> />
</div> </div>
<div <div
@ -96,13 +96,15 @@
.votes { .votes {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 0 0.5em; margin-block: 0 0.5em;
margin-inline: 0;
} }
.poll-option { .poll-option {
margin: 0.75em 0.5em; margin-block: 0.75em;
margin-inline: 0.5em;
} }
.option-result { .option-result {
height: 100%; block-size: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative; position: relative;
@ -112,16 +114,17 @@
.option-result-label { .option-result-label {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.1em 0.25em; padding-block: 0.1em;
padding-inline: 0.25em;
z-index: 1; z-index: 1;
word-break: break-word; word-break: break-word;
} }
.result-percentage { .result-percentage {
width: 3.5em; inline-size: 3.5em;
flex-shrink: 0; flex-shrink: 0;
} }
.result-fill { .result-fill {
height: 100%; block-size: 100%;
position: absolute; position: absolute;
color: $fallback--text; color: $fallback--text;
color: var(--pollText, $fallback--text); color: var(--pollText, $fallback--text);
@ -129,16 +132,16 @@
background-color: var(--poll, $fallback--lightBg); background-color: var(--poll, $fallback--lightBg);
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius); border-radius: var(--panelRadius, $fallback--panelRadius);
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
transition: width 0.5s; transition: block-size 0.5s;
} }
.option-vote { .option-vote {
display: flex; display: flex;
align-items: center; align-items: center;
} }
input { input {
width: 3.5em; inline-size: 3.5em;
} }
.footer { .footer {
display: flex; display: flex;
@ -148,8 +151,9 @@
cursor: progress; cursor: progress;
} }
.poll-vote-button { .poll-vote-button {
padding: 0 0.5em; padding-block: 0;
margin-right: 0.5em; padding-inline: 0.5em;
margin-inline-end: 0.5em;
} }
} }
</style> </style>

31
src/components/poll/poll_form.vue
View file

@ -100,49 +100,50 @@
.poll-form { .poll-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 0.5em 0.5em; padding-block: 0 0.5em;
padding-inline: 0.5em;
.add-option { .add-option {
align-self: flex-start; align-self: flex-start;
padding-top: 0.25em; padding-block-start: 0.25em;
padding-left: 0.1em; padding-inline-start: 0.1em;
} }
.poll-option { .poll-option {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.25em; margin-block-end: 0.25em;
} }
.input-container { .input-container {
width: 100%; inline-size: 100%;
input { input {
// Hack: dodge the floating X icon // Hack: dodge the floating X icon
padding-right: 2.5em; padding-inline-end: 2.5em;
width: 100%; inline-size: 100%;
} }
} }
.delete-option { .delete-option {
// Hack: Move the icon over the input box // Hack: Move the icon over the input box
width: 1.5em; inline-size: 1.5em;
margin-left: -1.5em; margin-inline-start: -1.5em;
z-index: 1; z-index: 1;
} }
.poll-type-expiry { .poll-type-expiry {
margin-top: 0.5em; margin-block-start: 0.5em;
display: flex; display: flex;
width: 100%; inline-size: 100%;
} }
.poll-type { .poll-type {
margin-right: 0.75em; margin-inline-end: 0.75em;
flex: 1 1 60%; flex: 1 1 60%;
.poll-type-select { .poll-type-select {
padding-right: 0.75em; padding-inline-end: 0.75em;
} }
} }
@ -150,8 +151,8 @@
display: flex; display: flex;
.expiry-amount { .expiry-amount {
width: 3em; inline-size: 3em;
text-align: right; text-align: end;
} }
} }
} }

16
src/components/popover/popover.js
View file

@ -53,6 +53,11 @@ const Popover = {
return return
} }
const viewport = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
const isRTL = this.$t('_locale.dir') == "rtl"
const inlineStartOf = (box) => isRTL ? viewport.width - box.right : box.left
const inlineEndOf = (box) => isRTL ? viewport.width - box.left : box.right
// Popover will be anchored around this element, trigger ref is the container, so // Popover will be anchored around this element, trigger ref is the container, so
// its children are what are inside the slot. Expect only one v-slot:trigger. // its children are what are inside the slot. Expect only one v-slot:trigger.
const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
@ -61,7 +66,7 @@ const Popover = {
const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
const screenBox = anchorEl.getBoundingClientRect() const screenBox = anchorEl.getBoundingClientRect()
// Screen position of the origin point for popover // Screen position of the origin point for popover
const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top } const origin = { x: inlineStartOf(screenBox) + screenBox.width * 0.5, y: screenBox.top }
const content = this.$refs.content const content = this.$refs.content
// Minor optimization, don't call a slow reflow call if we don't have to // Minor optimization, don't call a slow reflow call if we don't have to
const parentBounds = this.boundTo && const parentBounds = this.boundTo &&
@ -73,11 +78,11 @@ const Popover = {
// What are the screen bounds for the popover? Viewport vs container // What are the screen bounds for the popover? Viewport vs container
// when using viewport, using default margin values to dodge the navbar // when using viewport, using default margin values to dodge the navbar
const xBounds = this.boundTo && this.boundTo.x === 'container' ? { const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
min: parentBounds.left + (margin.left || 0), min: inlineStartOf(parentBounds) + (margin.left || 0),
max: parentBounds.right - (margin.right || 0) max: inlineEndOf(parentBounds) - (margin.right || 0)
} : { } : {
min: 0 + (margin.left || 10), min: 0 + (margin.left || 10),
max: window.innerWidth - (margin.right || 10) max: viewport.width - (margin.right || 10)
} }
const yBounds = this.boundTo && this.boundTo.y === 'container' ? { const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
@ -122,12 +127,13 @@ const Popover = {
const xOffset = (this.offset && this.offset.x) || 0 const xOffset = (this.offset && this.offset.x) || 0
const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
const translateXLogical = isRTL ? -translateX : translateX
// Note, separate translateX and translateY avoids blurry text on chromium, // Note, separate translateX and translateY avoids blurry text on chromium,
// single translate or translate3d resulted in blurry text. // single translate or translate3d resulted in blurry text.
this.styles = { this.styles = {
opacity: 1, opacity: 1,
transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)` transform: `translateX(${Math.round(translateXLogical)}px) translateY(${Math.round(translateY)}px)`
} }
}, },
showPopover () { showPopover () {

47
src/components/popover/popover.vue
View file

@ -39,7 +39,7 @@
.popover { .popover {
z-index: 500; z-index: 500;
position: absolute; position: absolute;
min-width: 0; min-inline-size: 0;
} }
.popover-default { .popover-default {
@ -48,10 +48,10 @@
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
bottom: 0; inset-block-end: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
z-index: 3; z-index: 3;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
@ -75,27 +75,30 @@
.dropdown-menu { .dropdown-menu {
display: block; display: block;
padding: .5rem 0; padding-block: .5rem;
padding-inline: 0;
font-size: 1em; font-size: 1em;
text-align: left; text-align: start;
list-style: none; list-style: none;
max-width: 100vw; max-inline-size: 100vi;
z-index: 200; z-index: 200;
white-space: nowrap; white-space: nowrap;
.dropdown-divider { .dropdown-divider {
height: 0; block-size: 0;
margin: .5rem 0; margin-block: .5rem;
margin-inline: 0;
overflow: hidden; overflow: hidden;
border-top: 1px solid $fallback--border; border-block-start: 1px solid $fallback--border;
border-top: 1px solid var(--border, $fallback--border); border-block-start: 1px solid var(--border, $fallback--border);
} }
.dropdown-item { .dropdown-item {
line-height: 21px; line-height: 21px;
overflow: hidden; overflow: hidden;
display: block; display: block;
padding: 0.5em 0.75em; padding-block: 0.5em;
padding-inline: 0.75em;
clear: both; clear: both;
font-weight: 400; font-weight: 400;
text-align: inherit; text-align: inherit;
@ -104,16 +107,16 @@
border-radius: 0px; border-radius: 0px;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
box-sizing: border-box; box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text); --btnText: var(--popoverText, $fallback--text);
&-icon { &-icon {
svg { svg {
width: 22px; inline-size: 22px;
margin-right: 0.75rem; margin-inline-end: 0.75rem;
color: var(--menuPopoverIcon, $fallback--icon) color: var(--menuPopoverIcon, $fallback--icon)
} }
} }
@ -136,10 +139,10 @@
.menu-checkbox { .menu-checkbox {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
min-width: 22px; min-inline-size: 22px;
max-width: 22px; max-inline-size: 22px;
min-height: 22px; min-block-size: 22px;
max-height: 22px; max-block-size: 22px;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
border-radius: 0px; border-radius: 0px;
@ -147,7 +150,7 @@
background-color: var(--input, $fallback--fg); background-color: var(--input, $fallback--fg);
box-shadow: 0px 0px 2px black inset; box-shadow: 0px 0px 2px black inset;
box-shadow: var(--inputShadow); box-shadow: var(--inputShadow);
margin-right: 0.75em; margin-inline-end: 0.75em;
&.menu-checkbox-checked::after { &.menu-checkbox-checked::after {
font-size: 1.25em; font-size: 1.25em;

67
src/components/post_status_form/post_status_form.vue
View file

@ -346,17 +346,17 @@
position: relative; position: relative;
.attachments { .attachments {
margin-bottom: 0.5em; margin-block-end: 0.5em;
} }
.form-bottom { .form-bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0.5em; padding: 0.5em;
height: 2.5em; block-size: 2.5em;
button { button {
width: 10em; inline-size: 10em;
} }
p { p {
@ -369,14 +369,14 @@
.form-bottom-left { .form-bottom-left {
display: flex; display: flex;
flex: 1; flex: 1;
padding-right: 7px; padding-inline-end: 7px;
margin-right: 7px; margin-inline-end: 7px;
max-width: 10em; max-inline-size: 10em;
} }
.preview-heading { .preview-heading {
display: flex; display: flex;
padding-left: 0.5em; padding-inline-start: 0.5em;
} }
.preview-toggle { .preview-toggle {
@ -388,14 +388,14 @@
text-decoration: underline; text-decoration: underline;
} }
svg, i { svg, i {
margin-left: 0.2em; margin-inline-start: 0.2em;
font-size: 0.8em; font-size: 0.8em;
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
.preview-container { .preview-container {
margin-bottom: 1em; margin-block-end: 1em;
} }
.preview-error { .preview-error {
@ -423,17 +423,17 @@
.visibility-tray { .visibility-tray {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 5px; padding-block-start: 5px;
align-items: baseline; align-items: baseline;
} }
.visibility-notice.edit-warning { .visibility-notice.edit-warning {
> :first-child { > :first-child {
margin-top: 0; margin-block-start: 0;
} }
> :last-child { > :last-child {
margin-bottom: 0; margin-block-end: 0;
} }
} }
@ -441,7 +441,8 @@
font-size: 1.85em; font-size: 1.85em;
line-height: 1.1; line-height: 1.1;
flex: 1; flex: 1;
padding: 0 0.1em; padding-block: 0;
padding-inline: 0.1em;
display: flex; display: flex;
align-items: center; align-items: center;
@ -470,7 +471,7 @@
// Order is not necessary but a good indicator // Order is not necessary but a good indicator
.media-upload-icon { .media-upload-icon {
order: 1; order: 1;
justify-content: left; justify-content: start;
} }
.emoji-icon { .emoji-icon {
@ -480,7 +481,7 @@
.poll-icon { .poll-icon {
order: 3; order: 3;
justify-content: right; justify-content: end;
} }
.error { .error {
@ -488,29 +489,29 @@
} }
.media-upload-wrapper { .media-upload-wrapper {
margin-right: .2em; margin-inline-end: .2em;
margin-bottom: .5em; margin-block-end: .5em;
width: 18em; inline-size: 18em;
img, video { img, video {
object-fit: contain; object-fit: contain;
max-height: 10em; max-block-size: 10em;
} }
.video { .video {
max-height: 10em; max-block-size: 10em;
} }
input { input {
flex: 1; flex: 1;
width: 100%; inline-size: 100%;
} }
} }
.status-input-wrapper { .status-input-wrapper {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; inline-size: 100%;
flex-direction: column; flex-direction: column;
} }
@ -528,7 +529,8 @@
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.25em 0.5em 0.5em; padding-block: 0.25em 0.5em;
padding-inline: 0.5em;
line-height: 1.85; line-height: 1.85;
} }
@ -536,12 +538,12 @@
// TODO: make a resizable textarea component? // TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden; overflow: hidden;
transition: min-height 200ms 100ms; transition: min-block-size 200ms 100ms;
// stock padding + 1 line of text (for counter) // stock padding + 1 line of text (for counter)
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em); padding-block-end: calc(var(--_padding) + var(--post-line-height) * 1em);
// two lines of text // two lines of text
height: calc(var(--post-line-height) * 1em); block-size: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em); min-block-size: calc(var(--post-line-height) * 1em);
resize: none; resize: none;
&.scrollable-form { &.scrollable-form {
@ -555,10 +557,11 @@
.character-counter { .character-counter {
position: absolute; position: absolute;
bottom: 0; inset-block-end: 0;
right: 0; inset-inline-end: 0;
padding: 0; padding: 0;
margin: 0 0.5em; margin-block: 0;
margin-inline: 0.5em;
&.error { &.error {
color: $fallback--cRed; color: $fallback--cRed;
@ -582,8 +585,8 @@
.drop-indicator { .drop-indicator {
position: absolute; position: absolute;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
font-size: 5em; font-size: 5em;
display: flex; display: flex;
align-items: center; align-items: center;

10
src/components/post_status_modal/post_status_modal.vue
View file

@ -27,13 +27,13 @@
.post-form-modal-panel { .post-form-modal-panel {
flex-shrink: 0; flex-shrink: 0;
margin-top: 25%; margin-block-start: 25%;
margin-bottom: 2em; margin-block-end: 2em;
width: 100%; inline-size: 100%;
max-width: 700px; max-inline-size: 700px;
@media (orientation: landscape) { @media (orientation: landscape) {
margin-top: 8%; margin-block-start: 8%;
} }
} }
</style> </style>

3
src/components/quote_button/quote_button.vue
View file

@ -27,7 +27,8 @@
> :first-child { > :first-child {
padding: 10px; padding: 10px;
margin: -10px -8px -10px -10px; margin-block: -10px -10px;
margin-inline: -10px -8px;
} }
.action-counter { .action-counter {

20
src/components/quote_card/quote_card.vue
View file

@ -21,15 +21,15 @@
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
margin-top: 0.5em; margin-block-start: 0.5em;
.card-image { .card-image {
flex-shrink: 0; flex-shrink: 0;
width: 120px; inline-size: 120px;
max-width: 25%; max-inline-size: 25%;
img { img {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
object-fit: cover; object-fit: cover;
border-radius: $fallback--attachmentRadius; border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius); border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
@ -37,7 +37,7 @@
} }
.card-content { .card-content {
max-height: 100%; max-block-size: 100%;
margin: 0.5em; margin: 0.5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -48,18 +48,20 @@
} }
.card-description { .card-description {
margin: 0.5em 0 0 0; margin-block: 0.5em 0;
margin-inline: 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word; word-break: break-word;
line-height: 1.2em; line-height: 1.2em;
// cap description at 3 lines, the 1px is to clean up some stray pixels // cap description at 3 lines, the 1px is to clean up some stray pixels
// TODO: fancier fade-out at the bottom to show off that it's too long? // TODO: fancier fade-out at the bottom to show off that it's too long?
max-height: calc(1.2em * 3 - 1px); max-block-size: calc(1.2em * 3 - 1px);
} }
.nsfw-alert { .nsfw-alert {
margin: 2em 0; margin-block: 2em;
margin-inline: 0;
} }
color: $fallback--text; color: $fallback--text;

17
src/components/react_button/react_button.vue
View file

@ -34,7 +34,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.custom-reaction { .custom-reaction {
width: 30px !important; inline-size: 30px !important;
} }
.ReactButton { .ReactButton {
@ -48,15 +48,15 @@
} }
.reaction-picker-divider { .reaction-picker-divider {
height: 1px; block-size: 1px;
width: 100%; inline-size: 100%;
margin: 0.5em; margin: 0.5em;
background-color: var(--border, $fallback--border); background-color: var(--border, $fallback--border);
} }
.reaction-picker { .reaction-picker {
width: 10em; inline-size: 10em;
height: 9em; block-size: 9em;
font-size: 1.5em; font-size: 1.5em;
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
@ -91,7 +91,7 @@
/* override of popover internal stuff */ /* override of popover internal stuff */
.popover-trigger-button { .popover-trigger-button {
width: auto; inline-size: auto;
} }
.popover-trigger { .popover-trigger {
@ -106,7 +106,10 @@
.popover { .popover {
transform: translateX(-64px) translateY(5px); transform: translateX(-64px) translateY(5px);
min-width: 70%; min-inline-size: 70%;
[dir="rtl"] & {
transform: translateX(64px) translateY(5px);
}
} }
} }

28
src/components/registration/registration.vue
View file

@ -286,7 +286,7 @@ $validations-cRed: #f04124;
flex-direction: row; flex-direction: row;
> * { > * {
min-width: 0; min-inline-size: 0;
} }
} }
@ -296,23 +296,24 @@ $validations-cRed: #f04124;
} }
.text-fields { .text-fields {
margin-top: 0.6em; margin-block-start: 0.6em;
flex: 1 0; flex: 1 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
textarea { textarea {
min-height: 100px; min-block-size: 100px;
resize: vertical; resize: vertical;
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.3em 0; padding-block: 0.3em;
padding-inline: 0;
line-height: 2; line-height: 2;
margin-bottom: 1em; margin-block-end: 1em;
} }
.form-group--error { .form-group--error {
@ -327,8 +328,8 @@ $validations-cRed: #f04124;
} }
.form-error { .form-error {
margin-top: -0.7em; margin-block-start: -0.7em;
text-align: left; text-align: start;
span { span {
font-size: 0.85em; font-size: 0.85em;
@ -337,8 +338,9 @@ $validations-cRed: #f04124;
.form-error ul { .form-error ul {
list-style: none; list-style: none;
padding: 0 0 0 5px; padding-block: 0 0;
margin-top: 0; padding-inline: 5px 0;
margin-block-start: 0;
li::before { li::before {
content: "• "; content: "• ";
@ -351,13 +353,13 @@ $validations-cRed: #f04124;
} }
.captcha { .captcha {
max-width: 350px; max-inline-size: 350px;
margin-bottom: 0.4em; margin-block-end: 0.4em;
} }
.btn { .btn {
margin-top: 0.6em; margin-block-start: 0.6em;
height: 2em; block-size: 2em;
} }
.error { .error {

6
src/components/remote_follow/remote_follow.vue
View file

@ -28,11 +28,11 @@
<style lang="scss"> <style lang="scss">
.remote-follow { .remote-follow {
max-width: 220px; max-inline-size: 220px;
.remote-button { .remote-button {
width: 100%; inline-size: 100%;
min-height: 2em; min-block-size: 2em;
} }
} }
</style> </style>

3
src/components/reply_button/reply_button.vue
View file

@ -44,7 +44,8 @@
> :first-child { > :first-child {
padding: 10px; padding: 10px;
margin: -10px -8px -10px -10px; margin-block: -10px -10px;
margin-inline: -10px -8px;
} }
.action-counter { .action-counter {

3
src/components/retweet_button/retweet_button.vue
View file

@ -64,7 +64,8 @@
> :first-child { > :first-child {
padding: 10px; padding: 10px;
margin: -10px -8px -10px -10px; margin-block: -10px -10px;
margin-inline: -10px -8px;
} }
.action-counter { .action-counter {

29
src/components/rich_content/rich_content.scss
View file

@ -1,6 +1,7 @@
.RichContent { .RichContent {
blockquote { blockquote {
margin: 0.2em 0 0.2em 2em; margin-block: 0.2em 0.2em;
margin-inline: 2em 0;
font-style: italic; font-style: italic;
} }
@ -17,31 +18,37 @@
} }
p { p {
margin: 0 0 1em 0; margin-block: 0 1em;
margin-inline: 0 0;
} }
p:last-child { p:last-child {
margin: 0 0 0 0; margin-block: 0 0;
margin-inline: 0 0;
} }
h1 { h1 {
font-size: 1.1em; font-size: 1.1em;
line-height: 1.2em; line-height: 1.2em;
margin: 1.4em 0; margin-block: 1.4em;
margin-inline: 0;
} }
h2 { h2 {
font-size: 1.1em; font-size: 1.1em;
margin: 1em 0; margin-block: 1em;
margin-inline: 0;
} }
h3 { h3 {
font-size: 1em; font-size: 1em;
margin: 1.2em 0; margin-block: 1.2em;
margin-inline: 0;
} }
h4 { h4 {
margin: 1.1em 0; margin-block: 1.1em;
margin-inline: 0;
} }
.img { .img {
@ -50,14 +57,14 @@
.emoji { .emoji {
display: inline-block; display: inline-block;
width: var(--emoji-size, 32px); inline-size: var(--emoji-size, 32px);
height: var(--emoji-size, 32px); block-size: var(--emoji-size, 32px);
} }
.img, .img,
video { video {
max-width: 100%; max-inline-size: 100%;
max-height: 400px; max-block-size: 400px;
vertical-align: middle; vertical-align: middle;
object-fit: contain; object-fit: contain;
} }

6
src/components/scope_selector/scope_selector.vue
View file

@ -81,10 +81,10 @@
.scope { .scope {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
min-width: 1.3em; min-inline-size: 1.3em;
min-height: 1.3em; min-block-size: 1.3em;
text-align: center; text-align: center;
margin-right: 0.4em; margin-inline-end: 0.4em;
&.selected svg { &.selected svg {
color: $fallback--lightText; color: $fallback--lightText;

8
src/components/search/search.vue
View file

@ -149,7 +149,7 @@
.search-result { .search-result {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid; border-block-end: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
} }
@ -169,7 +169,7 @@
justify-content: center; justify-content: center;
.search-input { .search-input {
width: 100%; inline-size: 100%;
line-height: 1.125rem; line-height: 1.125rem;
font-size: 1rem; font-size: 1rem;
padding: 0.5rem; padding: 0.5rem;
@ -177,7 +177,7 @@
} }
.search-button { .search-button {
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
} }
@ -200,7 +200,7 @@
.count { .count {
flex: 0 0 auto; flex: 0 0 auto;
width: 2rem; inline-size: 2rem;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2.25rem; line-height: 2.25rem;
font-weight: 500; font-weight: 500;

8
src/components/search_bar/search_bar.vue
View file

@ -63,21 +63,21 @@
justify-content: flex-end; justify-content: flex-end;
&.-expanded { &.-expanded {
width: 100%; inline-size: 100%;
} }
.search-bar-input, .search-bar-input,
.search-button { .search-button {
height: 29px; block-size: 29px;
} }
.search-bar-input { .search-bar-input {
flex: 1 0 auto; flex: 1 0 auto;
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
.cancel-search { .cancel-search {
height: 50px; block-size: 50px;
} }
.cancel-icon { .cancel-icon {

17
src/components/select/select.vue
View file

@ -36,23 +36,24 @@ label.Select {
color: $fallback--text; color: $fallback--text;
color: var(--inputText, --text, $fallback--text); color: var(--inputText, --text, $fallback--text);
margin: 0; margin: 0;
padding: 0 2em 0 .2em; padding-block: 0 0;
padding-inline: .2em 2em;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--inputFont, sans-serif); font-family: var(--inputFont, sans-serif);
font-size: 1em; font-size: 1em;
width: 100%; inline-size: 100%;
z-index: 1; z-index: 1;
height: 2em; block-size: 2em;
line-height: 16px; line-height: 16px;
} }
.select-down-icon { .select-down-icon {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
bottom: 0; inset-block-end: 0;
right: 5px; inset-inline-end: 5px;
height: 100%; block-size: 100%;
width: 0.875em; inline-size: 0.875em;
color: $fallback--text; color: $fallback--text;
color: var(--inputText, $fallback--text); color: var(--inputText, $fallback--text);
line-height: 2; line-height: 2;

14
src/components/selectable_list/selectable_list.vue
View file

@ -59,7 +59,7 @@
align-items: center; align-items: center;
> * { > * {
min-width: 0; min-inline-size: 0;
} }
} }
@ -76,10 +76,11 @@
&-header { &-header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.6em 0; padding-block: 0.6em;
border-bottom: 2px solid; padding-inline: 0;
border-bottom-color: $fallback--border; border-block-end: 2px solid;
border-bottom-color: var(--border, $fallback--border); border-block-end-color: $fallback--border;
border-block-end-color: var(--border, $fallback--border);
&-actions { &-actions {
flex: 1; flex: 1;
@ -87,7 +88,8 @@
} }
&-checkbox-wrapper { &-checkbox-wrapper {
padding: 0 10px; padding-block: 0;
padding-inline: 10px;
flex: none; flex: none;
} }
} }

5
src/components/settings_modal/helpers/modified_indicator.vue
View file

@ -43,8 +43,9 @@ export default {
position: relative; position: relative;
.modified-tooltip { .modified-tooltip {
margin: 0.5em 1em; margin-block: 0.5em;
min-width: 10em; margin-inline: 1em;
min-inline-size: 10em;
text-align: center; text-align: center;
} }
} }

5
src/components/settings_modal/helpers/server_side_indicator.vue
View file

@ -43,8 +43,9 @@ export default {
position: relative; position: relative;
.serverside-tooltip { .serverside-tooltip {
margin: 0.5em 1em; margin-block: 0.5em;
min-width: 10em; margin-inline: 1em;
min-inline-size: 10em;
text-align: center; text-align: center;
} }
} }

37
src/components/settings_modal/settings_modal.scss
View file

@ -5,12 +5,12 @@
.setting-list, .setting-list,
.option-list { .option-list {
list-style-type: none; list-style-type: none;
padding-left: 2em; padding-inline-start: 2em;
li { li {
margin-bottom: 0.5em; margin-block-end: 0.5em;
} }
.suboptions { .suboptions {
margin-top: 0.3em margin-block-start: 0.3em
} }
} }
@ -18,13 +18,13 @@
.settings-modal-panel { .settings-modal-panel {
/* Explanation: /* Explanation:
* Modal is positioned vertically centered. * Modal is positioned vertically centered.
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen * 100vb - 100% = Distance between modal's top+bottom boundaries and screen
* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen * (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
* + 100% - we move modal completely off-screen, it's top boundary touches * + 100% - we move modal completely off-screen, it's top boundary touches
* bottom of the screen * bottom of the screen
* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
*/ */
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
/* For mobile, the modal takes 100% of the available screen. /* For mobile, the modal takes 100% of the available screen.
@ -40,23 +40,24 @@
transition: transform; transition: transform;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-duration: 300ms; transition-duration: 300ms;
width: 1000px; inline-size: 1000px;
max-width: 90vw; max-inline-size: 90vi;
height: 90vh; block-size: 90vb;
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
max-width: 100vw; max-inline-size: 100vi;
height: 100%; block-size: 100%;
} }
>.panel-body { >.panel-body {
height: 100%; block-size: 100%;
overflow-y: hidden; overflow-y: hidden;
.btn { .btn {
min-height: 2em; min-block-size: 2em;
min-width: 10em; min-inline-size: 10em;
padding: 0 2em; padding-block: 0;
padding-inline: 2em;
} }
} }
} }
@ -64,7 +65,7 @@
.settings-footer { .settings-footer {
display: flex; display: flex;
>* { >* {
margin-right: 0.5em; margin-inline-end: 0.5em;
} }
.extra-content { .extra-content {
@ -74,8 +75,8 @@
.logout-button { .logout-button {
position: absolute; position: absolute;
right: 20px; inset-inline-end: 20px;
padding-right: 10px; padding-inline-end: 10px;
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
display: none; display: none;

31
src/components/settings_modal/settings_modal_content.scss
View file

@ -1,18 +1,19 @@
@import 'src/_variables.scss'; @import 'src/_variables.scss';
.settings_tab-switcher { .settings_tab-switcher {
height: 100%; block-size: 100%;
.setting-item { .setting-item {
border-bottom: 2px solid var(--fg, $fallback--fg); border-block-end: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em; margin-block: 1em 1.4em;
padding-bottom: 1.4em; margin-inline: 1em;
padding-block-end: 1.4em;
> div, > div,
> label { > label {
display: block; display: block;
margin-bottom: .5em; margin-block-end: .5em;
&:last-child { &:last-child {
margin-bottom: 0; margin-block-end: 0;
} }
} }
@ -21,24 +22,24 @@
.option-list { .option-list {
margin: 0; margin: 0;
padding-left: .5em; padding-inline-start: .5em;
} }
} }
&:last-child { &:last-child {
border-bottom: none; border-block-end: none;
padding-bottom: 0; padding-block-end: 0;
margin-bottom: 1em; margin-block-end: 1em;
} }
select { select {
min-width: 10em; min-inline-size: 10em;
} }
textarea { textarea {
width: 100%; inline-size: 100%;
max-width: 100%; max-inline-size: 100%;
height: 100px; block-size: 100px;
} }
.unavailable, .unavailable,
@ -48,7 +49,7 @@
} }
.number-input { .number-input {
max-width: 6em; max-inline-size: 6em;
} }
} }
} }

2
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -76,7 +76,7 @@
<textarea <textarea
id="muteWords" id="muteWords"
v-model="muteWordsString" v-model="muteWordsString"
class="resize-height" class="resize-block-size"
/> />
<div>{{ $t('settings.filtering_explanation') }}</div> <div>{{ $t('settings.filtering_explanation') }}</div>
</li> </li>

6
src/components/settings_modal/tabs/general_tab.vue
View file

@ -612,11 +612,11 @@
<script src="./general_tab.js"></script> <script src="./general_tab.js"></script>
<style lang="scss"> <style lang="scss">
.settings-profile { .settings-profile {
margin-bottom: 1em; margin-block-end: 1em;
} }
#settings-profile-new-name { #settings-profile-new-name {
margin-left: 1em; margin-inline-start: 1em;
margin-right: 1em; margin-inline-end: 1em;
} }
</style> </style>

15
src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
View file

@ -1,18 +1,19 @@
.mutes-and-blocks-tab { .mutes-and-blocks-tab {
height: 100%; block-size: 100%;
.usersearch-wrapper { .usersearch-wrapper {
padding: 1em; padding: 1em;
} }
.bulk-actions { .bulk-actions {
text-align: right; text-align: end;
padding: 0 1em; padding-block: 0;
min-height: 2em; padding-inline: 1em;
min-block-size: 2em;
} }
.bulk-action-button { .bulk-action-button {
width: 10em inline-size: 10em
} }
.domain-mute-form { .domain-mute-form {
@ -23,7 +24,7 @@
.domain-mute-button { .domain-mute-button {
align-self: flex-end; align-self: flex-end;
margin-top: 1em; margin-block-start: 1em;
width: 10em inline-size: 10em
} }
} }

64
src/components/settings_modal/tabs/profile_tab.scss
View file

@ -5,25 +5,25 @@
} }
.expire-posts-days { .expire-posts-days {
margin-left: 1em; margin-inline-start: 1em;
} }
.visibility-tray { .visibility-tray {
padding-top: 5px; padding-block-start: 5px;
} }
input[type=file] { input[type=file] {
padding: 5px; padding: 5px;
height: auto; block-size: auto;
} }
.banner-background-preview { .banner-background-preview {
max-width: 100%; max-inline-size: 100%;
width: 300px; inline-size: 300px;
position: relative; position: relative;
img { img {
width: 100%; inline-size: 100%;
} }
} }
@ -33,33 +33,33 @@
} }
.name-changer { .name-changer {
width: 100%; inline-size: 100%;
} }
.current-avatar-container { .current-avatar-container {
position: relative; position: relative;
width: 150px; inline-size: 150px;
height: 150px; block-size: 150px;
} }
.current-avatar { .current-avatar {
display: block; display: block;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
border-radius: $fallback--avatarRadius; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius); border-radius: var(--avatarRadius, $fallback--avatarRadius);
} }
.reset-button { .reset-button {
position: absolute; position: absolute;
top: 0.2em; inset-block-start: 0.2em;
right: 0.2em; inset-inline-end: 0.2em;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
opacity: 0.7; opacity: 0.7;
width: 1.5em; inline-size: 1.5em;
height: 1.5em; block-size: 1.5em;
text-align: center; text-align: center;
line-height: 1.5em; line-height: 1.5em;
font-size: 1.5em; font-size: 1.5em;
@ -75,14 +75,14 @@
} }
.oauth-tokens { .oauth-tokens {
width: 100%; inline-size: 100%;
th { th {
text-align: left; text-align: start;
} }
.actions { .actions {
text-align: right; text-align: end;
} }
} }
@ -91,12 +91,13 @@
} }
&-bulk-actions { &-bulk-actions {
text-align: right; text-align: end;
padding: 0 1em; padding-block: 0;
min-height: 2em; padding-inline: 1em;
min-block-size: 2em;
button { button {
width: 10em; inline-size: 10em;
} }
} }
@ -107,13 +108,13 @@
button { button {
align-self: flex-end; align-self: flex-end;
margin-top: 1em; margin-block-start: 1em;
width: 10em; inline-size: 10em;
} }
} }
.setting-subitem { .setting-subitem {
margin-left: 1.75em; margin-inline-start: 1.75em;
} }
.profile-fields { .profile-fields {
@ -121,15 +122,18 @@
& > .emoji-input { & > .emoji-input {
flex: 1 1 auto; flex: 1 1 auto;
margin: 0 0.2em 0.5em; margin-block: 0 0.5em;
min-width: 0; margin-inline: 0.2em;
min-inline-size: 0;
} }
.delete-field { .delete-field {
width: 20px; inline-size: 20px;
align-self: center; align-self: center;
margin: 0 0.2em 0.5em; margin-block: 0 0.5em;
padding: 0 0.5em; margin-inline: 0.2em;
padding-block: 0;
padding-inline: 0.5em;
} }
} }
} }

2
src/components/settings_modal/tabs/profile_tab.vue
View file

@ -22,7 +22,7 @@
> >
<textarea <textarea
v-model="newBio" v-model="newBio"
class="bio resize-height" class="bio resize-block-size"
/> />
</EmojiInput> </EmojiInput>
<p v-if="role === 'admin' || role === 'moderator'"> <p v-if="role === 'admin' || role === 'moderator'">

6
src/components/settings_modal/tabs/security_tab/mfa.vue
View file

@ -157,14 +157,14 @@
flex-wrap: wrap; flex-wrap: wrap;
.qr-code { .qr-code {
flex: 1; flex: 1;
padding-right: 10px; padding-inline-end: 10px;
} }
.verify { flex: 1; } .verify { flex: 1; }
.error { margin: 4px 0 0 0; } .error { margin: 4px 0 0 0; }
.confirm-otp-actions { .confirm-otp-actions {
button { button {
width: 15em; inline-size: 15em;
margin-top: 5px; margin-block-start: 5px;
} }
} }

8
src/components/settings_modal/tabs/theme_tab/preview.vue
View file

@ -140,9 +140,9 @@ export default {}
} }
.underlay-preview { .underlay-preview {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
bottom: 0; inset-block-end: 0;
left: 10px; inset-inline-start: 10px;
right: 10px; inset-inline-end: 10px;
} }
</style> </style>

115
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View file

@ -1,24 +1,24 @@
@import 'src/_variables.scss'; @import 'src/_variables.scss';
.theme-tab { .theme-tab {
padding-bottom: 2em; padding-block-end: 2em;
.theme-warning { .theme-warning {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin-bottom: .5em; margin-block-end: .5em;
.buttons { .buttons {
.btn { .btn {
margin-bottom: .5em; margin-block-end: .5em;
} }
} }
} }
.preset-switcher { .preset-switcher {
margin-right: 1em; margin-inline-end: 1em;
} }
.style-control { .style-control {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
margin-bottom: 5px; margin-block-end: 5px;
.label { .label {
flex: 1; flex: 1;
@ -39,17 +39,17 @@
} }
input, select { input, select {
min-width: 3em; min-inline-size: 3em;
margin: 0; margin: 0;
flex: 0; flex: 0;
&[type=number] { &[type=number] {
min-width: 5em; min-inline-size: 5em;
} }
&[type=range] { &[type=range] {
flex: 1; flex: 1;
min-width: 3em; min-inline-size: 3em;
align-self: flex-start; align-self: flex-start;
} }
} }
@ -75,7 +75,7 @@
.color-container{ .color-container{
> h4 { > h4 {
width: 99%; inline-size: 99%;
} }
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
@ -86,21 +86,22 @@
.shadow-container, .shadow-container,
.radius-container, .radius-container,
.presets-container { .presets-container {
margin: 1em 1em 0; margin-block: 1em 0;
margin-inline: 1em;
} }
.tab-header { .tab-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
width: 100%; inline-size: 100%;
min-height: 30px; min-block-size: 30px;
margin-bottom: 1em; margin-block-end: 1em;
p { p {
flex: 1; flex: 1;
margin: 0; margin: 0;
margin-right: .5em; margin-inline-end: .5em;
} }
} }
@ -109,21 +110,22 @@
flex-direction: column; flex-direction: column;
.btn { .btn {
min-width: 1px; min-inline-size: 1px;
flex: 0 auto; flex: 0 auto;
padding: 0 1em; padding-block: 0;
margin-bottom: .5em; padding-inline: 1em;
margin-block-end: .5em;
} }
} }
.shadow-selector { .shadow-selector {
.override { .override {
flex: 1; flex: 1;
margin-left: .5em; margin-inline-start: .5em;
} }
.select-container { .select-container {
margin-top: -4px; margin-block-start: -4px;
margin-bottom: -3px; margin-block-end: -3px;
} }
} }
@ -136,7 +138,7 @@
.presets, .presets,
.import-export { .import-export {
margin-bottom: .5em; margin-block-end: .5em;
} }
.import-export { .import-export {
@ -144,26 +146,28 @@
} }
.override { .override {
margin-left: .5em; margin-inline-start: .5em;
} }
} }
.save-load-options { .save-load-options {
flex-wrap: wrap; flex-wrap: wrap;
margin-top: .5em; margin-block-start: .5em;
justify-content: center; justify-content: center;
.keep-option { .keep-option {
margin: 0 .5em .5em; margin-block: 0 .5em;
min-width: 25%; margin-inline: .5em;
min-inline-size: 25%;
} }
} }
.preview-container { .preview-container {
border-top: 1px dashed; border-block-start: 1px dashed;
border-bottom: 1px dashed; border-block-end: 1px dashed;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
margin: 1em 0; margin-block: 1em;
margin-inline: 0;
padding: 1em; padding: 1em;
background-color: var(--wallpaper); background-color: var(--wallpaper);
background-image: var(--body-background-image); background-image: var(--body-background-image);
@ -179,22 +183,22 @@
flex: 1; flex: 1;
h4 { h4 {
margin-bottom: .25em; margin-block-end: .25em;
} }
.icons { .icons {
margin-top: .5em; margin-block-start: .5em;
display: flex; display: flex;
i { i {
margin-right: 1em; margin-inline-end: 1em;
} }
} }
} }
} }
.after-post { .after-post {
margin-top: 1em; margin-block-start: 1em;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -204,15 +208,15 @@
color: black; color: black;
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
margin-right: 1em; margin-inline-end: 1em;
} }
.avatar-alt { .avatar-alt {
flex: 0 auto; flex: 0 auto;
margin-left: 28px; margin-inline-start: 28px;
font-size: 12px; font-size: 12px;
min-width: 20px; min-inline-size: 20px;
min-height: 20px; min-block-size: 20px;
line-height: 20px; line-height: 20px;
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@ -220,8 +224,8 @@
.avatar { .avatar {
flex: 0 auto; flex: 0 auto;
width: 48px; inline-size: 48px;
height: 48px; block-size: 48px;
font-size: 14px; font-size: 14px;
line-height: 48px; line-height: 48px;
} }
@ -233,38 +237,39 @@
.checkbox { .checkbox {
display: inline-flex; display: inline-flex;
align-items: baseline; align-items: baseline;
margin-right: 1em; margin-inline-end: 1em;
flex: 1; flex: 1;
} }
} }
.separator { .separator {
margin: 1em; margin: 1em;
border-bottom: 1px solid; border-block-end: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
} }
.btn { .btn {
min-width: 3em; min-inline-size: 3em;
} }
} }
} }
.radius-item, .radius-item,
.color-item { .color-item {
min-width: 20em; min-inline-size: 20em;
margin: 5px 6px 0 0; margin-block: 5px 0;
margin-inline: 0 6px;
display:flex; display:flex;
flex-direction: column; flex-direction: column;
flex: 1 1 0; flex: 1 1 0;
&.wide { &.wide {
min-width: 60% min-inline-size: 60%
} }
&:not(.wide):nth-child(2n+1) { &:not(.wide):nth-child(2n+1) {
margin-right: 7px; margin-inline-end: 7px;
} }
@ -289,20 +294,20 @@
.theme-color-cl, .theme-color-cl,
.theme-radius-in, .theme-radius-in,
.theme-color-in { .theme-color-in {
margin-left: 4px; margin-inline-start: 4px;
} }
.theme-radius-in { .theme-radius-in {
min-width: 1em; min-inline-size: 1em;
} }
.theme-radius-in { .theme-radius-in {
max-width: 7em; max-inline-size: 7em;
flex: 1; flex: 1;
} }
.theme-radius-lb{ .theme-radius-lb{
max-width: 50em; max-inline-size: 50em;
} }
.theme-preview-content { .theme-preview-content {
@ -310,23 +315,23 @@
} }
.btn { .btn {
margin-left: .25em; margin-inline-start: .25em;
margin-right: .25em; margin-inline-end: .25em;
} }
} }
.extra-content { .extra-content {
.apply-container { .apply-container {
padding-left: 15vw; padding-inline-start: 15vi;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-evenly; justify-content: space-evenly;
flex-grow: 1; flex-grow: 1;
.btn { .btn {
flex-grow: 1; flex-grow: 1;
min-height: 2em; min-block-size: 2em;
min-width: 0; min-inline-size: 0;
max-width: 10em; max-inline-size: 10em;
padding: 0; padding: 0;
} }
} }

33
src/components/shadow_control/shadow_control.vue
View file

@ -223,11 +223,12 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
margin-bottom: 1em; margin-block-end: 1em;
.shadow-preview-container, .shadow-preview-container,
.shadow-tweak { .shadow-tweak {
margin: 5px 6px 0 0; margin-block: 5px 0;
margin-inline: 0 6px;
} }
.shadow-preview-container { .shadow-preview-container {
flex: 0; flex: 0;
@ -237,8 +238,8 @@
$side: 15em; $side: 15em;
input[type=number] { input[type=number] {
width: 5em; inline-size: 5em;
min-width: 2em; min-inline-size: 2em;
} }
.x-shift-control, .x-shift-control,
.y-shift-control { .y-shift-control {
@ -258,15 +259,15 @@
.x-shift-control .wrap, .x-shift-control .wrap,
input[type=range] { input[type=range] {
margin: 0; margin: 0;
width: $side; inline-size: $side;
height: 2em; block-size: 2em;
} }
.y-shift-control { .y-shift-control {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
.wrap { .wrap {
width: 2em; inline-size: 2em;
height: $side; block-size: $side;
} }
input[type=range] { input[type=range] {
transform-origin: 1em 1em; transform-origin: 1em 1em;
@ -291,8 +292,8 @@
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
.preview-block { .preview-block {
width: 33%; inline-size: 33%;
height: 33%; block-size: 33%;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
@ -303,7 +304,7 @@
.shadow-tweak { .shadow-tweak {
flex: 1; flex: 1;
min-width: 280px; min-inline-size: 280px;
.id-control { .id-control {
align-items: stretch; align-items: stretch;
@ -313,13 +314,15 @@
} }
.shadow-switcher, .btn { .shadow-switcher, .btn {
min-width: 1px; min-inline-size: 1px;
margin-right: 5px; margin-inline-end: 5px;
} }
.btn { .btn {
padding: 0 .4em; padding-block: 0;
margin: 0 .1em; padding-inline: .4em;
margin-block: 0;
margin-inline: .1em;
} }
} }
} }

45
src/components/side_drawer/side_drawer.vue
View file

@ -226,10 +226,10 @@
.side-drawer-container { .side-drawer-container {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
transition-duration: 0s; transition-duration: 0s;
@ -243,13 +243,16 @@
.side-drawer-container-closed { .side-drawer-container-closed {
transition-delay: 0.35s; transition-delay: 0.35s;
transform: translate(-100%); transform: translate(-100%);
[dir="rtl"] & {
transform: translate(200%);
}
} }
.side-drawer-darken { .side-drawer-darken {
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
width: 100vw; inline-size: 100vi;
height: 100vh; block-size: 100vb;
position: fixed; position: fixed;
z-index: -1; z-index: -1;
transition: 0.35s; transition: 0.35s;
@ -270,10 +273,12 @@
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition: 0.35s; transition: 0.35s;
transition-property: transform; transition-property: transform;
margin: 0 0 0 -100px; margin-block: 0 0;
padding: 0 0 1em 100px; margin-inline: -100px 0;
width: 80%; padding-block: 0 1em;
max-width: 20em; padding-inline: 100px 0;
inline-size: 80%;
max-inline-size: 20em;
flex: 0 0 80%; flex: 0 0 80%;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow); box-shadow: var(--panelShadow);
@ -287,7 +292,7 @@
--icon: var(--popoverIcon, $fallback--icon); --icon: var(--popoverIcon, $fallback--icon);
.badge { .badge {
margin-left: 10px; margin-inline-start: 10px;
} }
} }
@ -298,8 +303,8 @@
img { img {
flex: none; flex: none;
height: 50px; block-size: 50px;
margin-right: 0.85em; margin-inline-end: 0.85em;
} }
span { span {
@ -315,6 +320,9 @@
.side-drawer-closed { .side-drawer-closed {
transform: translate(-100%); transform: translate(-100%);
[dir="rtl"] & {
transform: translate(200%);
}
} }
.side-drawer-heading { .side-drawer-heading {
@ -331,7 +339,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
border-bottom: 1px solid; border-block-end: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
} }
@ -346,9 +354,10 @@
a, button { a, button {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
height: 3em; block-size: 3em;
line-height: 3em; line-height: 3em;
padding: 0 0.7em; padding-block: 0;
padding-inline: 0.7em;
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;

6
src/components/staff_panel/staff_panel.vue
View file

@ -29,11 +29,11 @@
<style lang="scss"> <style lang="scss">
.staff-group { .staff-group {
padding-left: 1em; padding-inline-start: 1em;
padding-top: 1em; padding-block-start: 1em;
.basic-user-card { .basic-user-card {
padding-left: 0; padding-inline-start: 0;
} }
} }

134
src/components/status/status.scss
View file

@ -1,7 +1,7 @@
@import "../../_variables.scss"; @import "../../_variables.scss";
.Status { .Status {
min-width: 0; min-inline-size: 0;
white-space: normal; white-space: normal;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word; word-break: break-word;
@ -33,7 +33,8 @@
display: flex; display: flex;
.deleted-text { .deleted-text {
margin: 0.5em 0; margin-block: 0.5em;
margin-inline: 0;
align-items: center; align-items: center;
} }
} }
@ -47,16 +48,17 @@
} }
> * { > * {
min-width: 0; min-inline-size: 0;
} }
&.-repeat { &.-repeat {
padding-top: 0; padding-block-start: 0;
} }
} }
.pin { .pin {
padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0; padding-block: var(--status-margin, $status-margin) 0;
padding-inline: var(--status-margin, $status-margin);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -72,25 +74,25 @@
} }
.left-side { .left-side {
margin-right: var(--status-margin, $status-margin); margin-inline-end: var(--status-margin, $status-margin);
} }
.right-side { .right-side {
flex: 1; flex: 1;
min-width: 0; min-inline-size: 0;
} }
.usercard { .usercard {
margin-bottom: var(--status-margin, $status-margin); margin-block-end: var(--status-margin, $status-margin);
} }
.status-username { .status-username {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
max-width: 85%; max-inline-size: 85%;
font-weight: bold; font-weight: bold;
flex-shrink: 1; flex-shrink: 1;
margin-right: 0.4em; margin-inline-end: 0.4em;
text-overflow: ellipsis; text-overflow: ellipsis;
--_still_image-label-scale: 0.25; --_still_image-label-scale: 0.25;
@ -98,13 +100,13 @@
} }
.status-favicon { .status-favicon {
height: 18px; block-size: 18px;
width: 18px; inline-size: 18px;
margin-right: 0.4em; margin-inline-end: 0.4em;
} }
.status-heading { .status-heading {
margin-bottom: 0.5em; margin-block-end: 0.5em;
.emoji { .emoji {
--emoji-size: 16px; --emoji-size: 16px;
@ -123,8 +125,8 @@
} }
.account-name { .account-name {
min-width: 1.6em; min-inline-size: 1.6em;
margin-right: 0.4em; margin-inline-end: 0.4em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -133,7 +135,7 @@
.heading-left { .heading-left {
display: flex; display: flex;
min-width: 0; min-inline-size: 0;
flex-wrap: wrap; flex-wrap: wrap;
img { img {
@ -152,7 +154,7 @@
.button-unstyled { .button-unstyled {
padding: 5px; padding: 5px;
margin: -5px; margin: -5px;
height: min-content; block-size: min-content;
&:hover svg { &:hover svg {
color: $fallback--lightText; color: $fallback--lightText;
@ -161,7 +163,7 @@
} }
.svg-inline--fa { .svg-inline--fa {
margin-left: 0.25em; margin-inline-start: 0.25em;
} }
} }
@ -171,7 +173,7 @@
} }
.timeago { .timeago {
margin-right: 0.2em; margin-inline-end: 0.2em;
} }
& .heading-reply-row, & .heading-reply-row,
@ -179,22 +181,22 @@
position: relative; position: relative;
align-content: baseline; align-content: baseline;
font-size: 0.85em; font-size: 0.85em;
margin-top: 0.2em; margin-block-start: 0.2em;
line-height: 130%; line-height: 130%;
max-width: 100%; max-inline-size: 100%;
align-items: stretch; align-items: stretch;
} }
& .reply-to-popover, & .reply-to-popover,
& .reply-to-no-popover, & .reply-to-no-popover,
& .mentions { & .mentions {
min-width: 0; min-inline-size: 0;
margin-right: 0.4em; margin-inline-end: 0.4em;
flex-shrink: 0; flex-shrink: 0;
} }
.reply-glued-label { .reply-glued-label {
margin-right: 0.5em; margin-inline-end: 0.5em;
} }
.reply-to-popover { .reply-to-popover {
@ -202,9 +204,9 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; inset-block-end: 0;
width: 100%; inline-size: 100%;
border-bottom: 1px solid var(--faint); border-block-end: 1px solid var(--faint);
pointer-events: none; pointer-events: none;
} }
@ -217,9 +219,9 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 50%; inset-block-start: 50%;
width: 100%; inline-size: 100%;
border-bottom: 1px solid var(--faint); border-block-end: 1px solid var(--faint);
pointer-events: none; pointer-events: none;
} }
} }
@ -244,23 +246,24 @@
} }
.replies { .replies {
margin-top: 0.25em; margin-block-start: 0.25em;
line-height: 1.3; line-height: 1.3;
font-size: 0.85em; font-size: 0.85em;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
& > * { & > * {
margin-right: 0.4em; margin-inline-end: 0.4em;
} }
} }
.reply-link { .reply-link {
height: 17px; block-size: 17px;
} }
.repeat-info { .repeat-info {
padding: 0.4em var(--status-margin, $status-margin); padding-block: 0.4em;
padding-inline: var(--status-margin, $status-margin);
.repeat-icon { .repeat-icon {
color: $fallback--cGreen; color: $fallback--cGreen;
@ -270,18 +273,18 @@
.repeater-avatar { .repeater-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
margin-left: 28px; margin-inline-start: 28px;
width: 20px; inline-size: 20px;
height: 20px; block-size: 20px;
} }
.repeater-name { .repeater-name {
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 0; margin-inline-end: 0;
.emoji { .emoji {
width: 14px; inline-size: 14px;
height: 14px; block-size: 14px;
vertical-align: middle; vertical-align: middle;
object-fit: contain; object-fit: contain;
} }
@ -304,21 +307,22 @@
.status-actions { .status-actions {
position: relative; position: relative;
width: 100%; inline-size: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: left; justify-content: start;
margin-top: var(--status-margin, $status-margin); margin-block-start: var(--status-margin, $status-margin);
> * { > * {
min-width: fit-content; min-inline-size: fit-content;
flex: 1; flex: 1;
} }
} }
.muted { .muted {
padding: 0.25em 0.6em; padding-block: 0.25em;
height: 1.2em; padding-inline: 0.6em;
block-size: 1.2em;
line-height: 1.2em; line-height: 1.2em;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -342,7 +346,7 @@
.status-username { .status-username {
font-weight: normal; font-weight: normal;
flex: 0 1 auto; flex: 0 1 auto;
margin-right: 0.2em; margin-inline-end: 0.2em;
font-size: smaller; font-size: smaller;
} }
@ -352,7 +356,7 @@
.mute-words { .mute-words {
flex: 1 0 5em; flex: 1 0 5em;
margin-left: 0.2em; margin-inline-start: 0.2em;
&::before { &::before {
content: " "; content: " ";
@ -361,14 +365,14 @@
.unmute { .unmute {
flex: 0 0 auto; flex: 0 0 auto;
margin-left: auto; margin-inline-start: auto;
display: block; display: block;
} }
} }
.reply-form { .reply-form {
padding-top: 0; padding-block-start: 0;
padding-bottom: 0; padding-block-end: 0;
} }
.reply-body { .reply-body {
@ -376,8 +380,8 @@
} }
.quote-form { .quote-form {
padding-top: 0; padding-block-start: 0;
padding-bottom: 0; padding-block-end: 0;
} }
.quote-body { .quote-body {
@ -385,11 +389,11 @@
} }
.favs-repeated-users { .favs-repeated-users {
margin-top: var(--status-margin, $status-margin); margin-block-start: var(--status-margin, $status-margin);
} }
.stats { .stats {
width: 100%; inline-size: 100%;
display: flex; display: flex;
line-height: 1em; line-height: 1em;
} }
@ -404,15 +408,15 @@
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
height: 100%; block-size: 100%;
width: 1px; inline-size: 1px;
left: 0; inset-inline-start: 0;
background-color: var(--faint, $fallback--faint); background-color: var(--faint, $fallback--faint);
} }
} }
.stat-count { .stat-count {
margin-right: var(--status-margin, $status-margin); margin-inline-end: var(--status-margin, $status-margin);
user-select: none; user-select: none;
.stat-title { .stat-title {
@ -435,18 +439,18 @@
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
.repeater-avatar { .repeater-avatar {
margin-left: 20px; margin-inline-start: 20px;
} }
.post-avatar { .post-avatar {
width: 40px; inline-size: 40px;
height: 40px; block-size: 40px;
// TODO define those other way somehow? // TODO define those other way somehow?
// stylelint-disable rscss/class-format // stylelint-disable rscss/class-format
&.-compact { &.-compact {
width: 32px; inline-size: 32px;
height: 32px; block-size: 32px;
} }
} }
} }

2
src/components/status/status.vue
View file

@ -267,7 +267,7 @@
v-if="!isPreview" v-if="!isPreview"
:status-id="status.parent_visible && status.in_reply_to_status_id" :status-id="status.parent_visible && status.in_reply_to_status_id"
class="reply-to-popover" class="reply-to-popover"
style="min-width: 0" style="min-inline-size: 0"
:class="{ '-strikethrough': !status.parent_visible }" :class="{ '-strikethrough': !status.parent_visible }"
> >
<button <button

48
src/components/status_body/status_body.scss
View file

@ -7,7 +7,7 @@
.translation { .translation {
border: 1px solid var(--accent, $fallback--link); border: 1px solid var(--accent, $fallback--link);
border-radius: var(--panelRadius, $fallback--panelRadius); border-radius: var(--panelRadius, $fallback--panelRadius);
margin-top: 1em; margin-block-start: 1em;
padding: 0.5em; padding: 0.5em;
} }
.emoji { .emoji {
@ -22,27 +22,27 @@
._mfm_x2_ { ._mfm_x2_ {
.emoji { .emoji {
width: 100px; inline-size: 100px;
height: 100px; block-size: 100px;
} }
} }
._mfm_x3_ { ._mfm_x3_ {
.emoji { .emoji {
width: 150px; inline-size: 150px;
height: 150px; block-size: 150px;
} }
} }
._mfm_x4_ { ._mfm_x4_ {
.emoji { .emoji {
width: 200px; inline-size: 200px;
height: 200px; block-size: 200px;
} }
} }
.attachments { .attachments {
margin-top: 0.5em; margin-block-start: 0.5em;
} }
& .text, & .text,
@ -57,7 +57,7 @@
.summary { .summary {
display: block; display: block;
font-style: italic; font-style: italic;
padding-bottom: 0.5em; padding-block-end: 0.5em;
} }
.text { .text {
@ -68,12 +68,12 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
height: 1.4em; block-size: 1.4em;
} }
} }
.summary-wrapper { .summary-wrapper {
margin-bottom: 0.5em; margin-block-end: 0.5em;
border-style: solid; border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
@ -83,7 +83,7 @@
position: relative; position: relative;
.summary { .summary {
max-height: 2em; max-block-size: 2em;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -98,13 +98,13 @@
&.-tall-status { &.-tall-status {
position: relative; position: relative;
height: 220px; block-size: 220px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
z-index: 1; z-index: 1;
.media-body-wrapper { .media-body-wrapper {
min-height: 0; min-block-size: 0;
mask: mask:
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
linear-gradient(to top, white, white); linear-gradient(to top, white, white);
@ -122,21 +122,21 @@
& .cw-status-hider { & .cw-status-hider {
display: inline-block; display: inline-block;
word-break: break-all; word-break: break-all;
width: 100%; inline-size: 100%;
text-align: center; text-align: center;
} }
.tall-status-hider { .tall-status-hider {
position: absolute; position: absolute;
height: 70px; block-size: 70px;
margin-top: 150px; margin-block-start: 150px;
line-height: 110px; line-height: 110px;
z-index: 2; z-index: 2;
} }
.tall-subject-hider { .tall-subject-hider {
// position: absolute; // position: absolute;
padding-bottom: 0.5em; padding-block-end: 0.5em;
} }
& .status-unhider, & .status-unhider,
@ -165,12 +165,12 @@
& .body:not(:active), & .body:not(:active),
& .attachments { & .attachments {
max-height: 3.25em; max-block-size: 3.25em;
} }
.body { .body {
white-space: normal; white-space: normal;
min-width: 5em; min-inline-size: 5em;
flex: 5 1 auto; flex: 5 1 auto;
} }
@ -187,11 +187,11 @@
} }
.attachments { .attachments {
margin-top: 0; margin-block-start: 0;
flex: 1 1 0; flex: 1 1 0;
min-width: 5em; min-inline-size: 5em;
height: 100%; block-size: 100%;
margin-left: 0.5em; margin-inline-start: 0.5em;
} }
.summary-wrapper { .summary-wrapper {

10
src/components/status_content/status_content.vue
View file

@ -67,12 +67,12 @@
<style lang="scss"> <style lang="scss">
.StatusContent { .StatusContent {
flex: 1; flex: 1;
min-width: 0; min-inline-size: 0;
img, video { img, video {
&.emoji { &.emoji {
width: 50px; inline-size: 50px;
height: 50px; block-size: 50px;
} }
} }
@ -89,8 +89,8 @@
animation: none !important; animation: none !important;
} }
.emoji { .emoji {
width: 32px !important; inline-size: 32px !important;
height: 32px !important; block-size: 32px !important;
} }
} }
} }

10
src/components/status_history_modal/status_history_modal.vue
View file

@ -34,13 +34,13 @@
} }
.status-history-modal-panel { .status-history-modal-panel {
flex-shrink: 0; flex-shrink: 0;
margin-top: 25%; margin-block-start: 25%;
margin-bottom: 2em; margin-block-end: 2em;
width: 100%; inline-size: 100%;
max-width: 700px; max-inline-size: 700px;
@media (orientation: landscape) { @media (orientation: landscape) {
margin-top: 8%; margin-block-start: 8%;
} }
} }
</style> </style>

4
src/components/status_popover/status_popover.vue
View file

@ -43,8 +43,8 @@
/* popover styles load on-demand, so we need to override */ /* popover styles load on-demand, so we need to override */
.status-popover.popover { .status-popover.popover {
font-size: 1rem; font-size: 1rem;
min-width: 15em; min-inline-size: 15em;
max-width: 95%; max-inline-size: 95%;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);

17
src/components/sticker_picker/sticker_picker.vue
View file

@ -35,12 +35,12 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.sticker-picker { .sticker-picker {
width: 100%; inline-size: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
margin: 0 !important; margin: 0 !important;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg); background-color: var(--popover, $fallback--bg);
@ -53,19 +53,20 @@
--icon: var(--popoverIcon, $fallback--icon); --icon: var(--popoverIcon, $fallback--icon);
.contents { .contents {
min-height: 250px; min-block-size: 250px;
.sticker-picker-content { .sticker-picker-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 4px; padding-block: 0;
padding-inline: 4px;
.sticker { .sticker {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
margin: 4px; margin: 4px;
width: 56px; inline-size: 56px;
height: 56px; block-size: 56px;
img { img {
height: 100%; block-size: 100%;
&:hover { &:hover {
filter: drop-shadow(0 0 5px var(--accent, $fallback--link)); filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
} }

23
src/components/still-image/still-image.vue
View file

@ -37,19 +37,19 @@
canvas { canvas {
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
bottom: 0; inset-block-end: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
object-fit: contain; object-fit: contain;
visibility: var(--_still-image-canvas-visibility, visible); visibility: var(--_still-image-canvas-visibility, visible);
} }
img { img {
width: 100%; inline-size: 100%;
height: 100%; block-size: 100%;
object-fit: contain; object-fit: contain;
&::before { &::before {
@ -64,12 +64,13 @@
position: absolute; position: absolute;
line-height: 1; line-height: 1;
font-size: 0.7em; font-size: 0.7em;
top: 0.5em; inset-block-start: 0.5em;
left: 0.5em; inset-inline-start: 0.5em;
background: rgba(127, 127, 127, 0.5); background: rgba(127, 127, 127, 0.5);
color: #fff; color: #fff;
display: block; display: block;
padding: 2px 4px; padding-block: 2px;
padding-inline: 4px;
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2; z-index: 2;

Some files were not shown because too many files have changed in this diff Show more