From 8b6f88f7aa064a9584b81dcb90ead459bd717095 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Sat, 23 Dec 2023 06:23:17 +0900
Subject: [PATCH] feat: RTL Layout Support
---
README.md | 2 +
packages/backend/src/server/web/bios.css | 4 +-
packages/backend/src/server/web/cli.css | 2 +-
packages/backend/src/server/web/style.css | 16 +++----
packages/backend/src/services/send-email.ts | 2 +-
.../client/src/components/MkAbuseReport.vue | 6 +--
.../src/components/MkAbuseReportWindow.vue | 2 +-
packages/client/src/components/MkButton.vue | 6 +--
.../src/components/MkChannelFollowButton.vue | 6 +--
.../src/components/MkChannelPreview.vue | 10 ++---
packages/client/src/components/MkChart.vue | 2 +-
.../client/src/components/MkChartTooltip.vue | 2 +-
.../client/src/components/MkContainer.vue | 8 ++--
.../client/src/components/MkCropperDialog.vue | 2 +-
packages/client/src/components/MkCwButton.vue | 4 +-
.../src/components/MkDateSeparatedList.vue | 8 ++--
.../client/src/components/MkDrive.file.vue | 10 ++---
.../client/src/components/MkDrive.folder.vue | 12 +++---
.../src/components/MkDrive.navFolder.vue | 2 +-
packages/client/src/components/MkDrive.vue | 4 +-
.../src/components/MkDriveFileThumbnail.vue | 2 +-
.../src/components/MkDriveSelectDialog.vue | 2 +-
.../client/src/components/MkEmojiPicker.vue | 4 +-
.../src/components/MkFileListForAdmin.vue | 10 +++--
packages/client/src/components/MkFolder.vue | 2 +-
.../client/src/components/MkFollowButton.vue | 6 +--
.../src/components/MkGalleryPostPreview.vue | 4 +-
packages/client/src/components/MkGoogle.vue | 2 +-
.../client/src/components/MkImageViewer.vue | 6 +--
packages/client/src/components/MkInfo.vue | 4 +-
.../src/components/MkInstanceCardMini.vue | 4 +-
.../src/components/MkInstanceSelectDialog.vue | 2 +-
.../client/src/components/MkInstanceStats.vue | 2 +-
.../src/components/MkInstanceTicker.vue | 2 +-
packages/client/src/components/MkKeyValue.vue | 2 +-
.../client/src/components/MkLaunchPad.vue | 6 +--
packages/client/src/components/MkLink.vue | 2 +-
packages/client/src/components/MkMedia.vue | 4 +-
.../client/src/components/MkMediaBanner.vue | 2 +-
.../client/src/components/MkMediaCaption.vue | 10 ++---
.../client/src/components/MkMediaList.vue | 2 +-
packages/client/src/components/MkMenu.vue | 16 +++----
packages/client/src/components/MkModal.vue | 10 ++---
.../src/components/MkModalPageWindow.vue | 4 +-
.../client/src/components/MkModalWindow.vue | 6 +--
packages/client/src/components/MkMoved.vue | 7 +++-
packages/client/src/components/MkNote.vue | 36 ++++++++--------
.../client/src/components/MkNoteDetailed.vue | 10 ++---
.../client/src/components/MkNoteHeader.vue | 8 ++--
.../client/src/components/MkNotePreview.vue | 2 +-
packages/client/src/components/MkNoteSub.vue | 42 +++++++++----------
.../client/src/components/MkNotification.vue | 10 ++---
.../src/components/MkNotificationToast.vue | 2 +-
.../src/components/MkObjectView.value.vue | 6 +--
.../client/src/components/MkPagePreview.vue | 6 +--
.../client/src/components/MkPageWindow.vue | 2 +-
.../client/src/components/MkPagination.vue | 4 +-
packages/client/src/components/MkPoll.vue | 6 +--
.../client/src/components/MkPollEditor.vue | 2 +-
packages/client/src/components/MkPostForm.vue | 10 +++--
.../src/components/MkPostFormAttaches.vue | 6 +--
.../client/src/components/MkQuoteButton.vue | 2 +-
.../client/src/components/MkReactedUsers.vue | 2 +-
.../components/MkReactionsViewer.details.vue | 12 +++---
.../client/src/components/MkRemoteCaution.vue | 2 +-
.../src/components/MkShowMoreButton.vue | 2 +-
packages/client/src/components/MkSparkle.vue | 2 +-
.../src/components/MkSubNoteContent.vue | 16 +++----
.../client/src/components/MkSuperMenu.vue | 12 +++---
packages/client/src/components/MkTab.vue | 10 ++---
packages/client/src/components/MkTagCloud.vue | 2 +-
packages/client/src/components/MkTimeline.vue | 6 +--
packages/client/src/components/MkToast.vue | 4 +-
.../src/components/MkTutorialDialog.vue | 6 +--
.../client/src/components/MkUrlPreview.vue | 2 +-
.../client/src/components/MkUserCardMini.vue | 6 +--
.../client/src/components/MkUsersTooltip.vue | 4 +-
.../client/src/components/MkVisibility.vue | 2 +-
.../src/components/MkVisibilityPicker.vue | 6 +--
packages/client/src/components/MkWidgets.vue | 4 +-
packages/client/src/components/MkWindow.vue | 20 ++++-----
.../client/src/components/form/checkbox.vue | 2 +-
.../client/src/components/form/folder.vue | 10 ++---
packages/client/src/components/form/input.vue | 8 ++--
packages/client/src/components/form/link.vue | 10 ++---
packages/client/src/components/form/radio.vue | 8 ++--
.../client/src/components/form/select.vue | 8 ++--
.../client/src/components/form/switch.vue | 6 +--
.../client/src/components/global/MkAd.vue | 2 +-
.../client/src/components/global/MkAvatar.vue | 6 +--
.../src/components/global/MkLoading.vue | 2 +-
.../global/MkMisskeyFlavoredMarkdown.vue | 4 +-
.../src/components/global/MkPageHeader.vue | 36 ++++++++--------
.../client/src/components/global/MkUrl.vue | 2 +-
.../src/components/page/page.switch.vue | 2 +-
packages/client/src/init.ts | 4 +-
packages/client/src/pages/about-firefish.vue | 6 +--
packages/client/src/pages/admin/_header_.vue | 21 ++++++----
packages/client/src/pages/admin/emojis.vue | 4 +-
packages/client/src/pages/admin/index.vue | 2 +-
.../src/pages/admin/overview.federation.vue | 6 +--
.../src/pages/admin/overview.metrics.vue | 4 +-
.../client/src/pages/admin/overview.stats.vue | 12 +++---
.../client/src/pages/admin/overview.user.vue | 4 +-
.../client/src/pages/admin/promotions.vue | 2 +-
.../client/src/pages/admin/queue.chart.vue | 2 +-
packages/client/src/pages/admin/relays.vue | 2 +-
packages/client/src/pages/admin/users.vue | 4 +-
packages/client/src/pages/channel.vue | 16 +++----
packages/client/src/pages/emojis.emoji.vue | 2 +-
packages/client/src/pages/explore.users.vue | 20 ++++-----
packages/client/src/pages/follow-requests.vue | 6 +--
packages/client/src/pages/gallery/edit.vue | 4 +-
packages/client/src/pages/gallery/post.vue | 6 +--
.../pages/messaging/messaging-room.form.vue | 4 +-
.../messaging/messaging-room.message.vue | 38 +++++++++--------
.../src/pages/messaging/messaging-room.vue | 4 +-
packages/client/src/pages/miauth.vue | 4 +-
.../client/src/pages/my-antennas/index.vue | 4 +-
.../page-editor/page-editor.container.vue | 4 +-
.../src/pages/page-editor/page-editor.vue | 4 +-
packages/client/src/pages/page.vue | 12 +++---
packages/client/src/pages/settings/2fa.vue | 13 +++---
.../src/pages/settings/import-export.vue | 2 +-
packages/client/src/pages/settings/index.vue | 2 +-
.../client/src/pages/settings/migration.vue | 2 +-
packages/client/src/pages/settings/navbar.vue | 4 +-
packages/client/src/pages/settings/plugin.vue | 2 +-
.../client/src/pages/settings/profile.vue | 4 +-
.../client/src/pages/settings/security.vue | 6 +--
packages/client/src/pages/settings/theme.vue | 28 ++++++-------
packages/client/src/pages/theme-editor.vue | 4 +-
packages/client/src/pages/user-info.vue | 4 +-
packages/client/src/pages/user/home.vue | 36 ++++++++--------
.../client/src/pages/user/index.photos.vue | 4 +-
packages/client/src/pages/user/reactions.vue | 4 +-
.../client/src/pages/welcome.entrance.a.vue | 28 ++++++-------
.../client/src/pages/welcome.entrance.b.vue | 14 +++----
.../client/src/pages/welcome.entrance.c.vue | 22 +++++-----
packages/client/src/scripts/langmap.ts | 13 ++++++
packages/client/src/style.scss | 16 +++----
packages/client/src/ui/_common_/common.vue | 4 +-
.../src/ui/_common_/navbar-for-mobile.vue | 30 ++++++-------
packages/client/src/ui/_common_/navbar.vue | 14 +++----
.../src/ui/_common_/statusbar-federation.vue | 6 +--
.../src/ui/_common_/statusbar-user-list.vue | 2 +-
.../src/ui/_common_/stream-indicator.vue | 2 +-
packages/client/src/ui/_common_/upload.vue | 4 +-
packages/client/src/ui/deck.vue | 27 ++++++------
.../client/src/ui/deck/antenna-column.vue | 2 +-
.../client/src/ui/deck/channel-column.vue | 2 +-
packages/client/src/ui/deck/column.vue | 10 ++---
packages/client/src/ui/deck/direct-column.vue | 2 +-
packages/client/src/ui/deck/list-column.vue | 2 +-
.../client/src/ui/deck/mentions-column.vue | 2 +-
.../src/ui/deck/notifications-column.vue | 2 +-
packages/client/src/ui/deck/tl-column.vue | 2 +-
.../client/src/ui/deck/widgets-column.vue | 2 +-
packages/client/src/ui/universal.vue | 30 ++++++-------
packages/client/src/ui/visitor/a.vue | 4 +-
packages/client/src/ui/visitor/b.vue | 8 ++--
packages/client/src/ui/visitor/header.vue | 18 ++++----
packages/client/src/ui/visitor/kanban.vue | 4 +-
packages/client/src/widgets/aiscript.vue | 2 +-
packages/client/src/widgets/calendar.vue | 2 +-
packages/client/src/widgets/clock.vue | 8 ++--
packages/client/src/widgets/federation.vue | 4 +-
packages/client/src/widgets/job-queue.vue | 2 +-
packages/client/src/widgets/memo.vue | 2 +-
.../src/widgets/server-metric/cpu-mem.vue | 4 +-
.../client/src/widgets/server-metric/cpu.vue | 4 +-
.../client/src/widgets/server-metric/disk.vue | 4 +-
.../src/widgets/server-metric/meilisearch.vue | 4 +-
.../client/src/widgets/server-metric/mem.vue | 4 +-
.../client/src/widgets/server-metric/net.vue | 4 +-
packages/client/src/widgets/slideshow.vue | 2 +-
packages/client/src/widgets/timeline.vue | 4 +-
177 files changed, 642 insertions(+), 609 deletions(-)
diff --git a/README.md b/README.md
index 0939c371..1ac4ff60 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,8 @@
## 細かい変更点
+- マージされていない本家版へのプルリクエストを独断でマージ
+ - RTL Layout Support ([!10452](https://git.joinfirefish.org/firefish/firefish/-/merge_requests/10452))
- `emojis` の API エンドポイント（Misskey v13- 互換）を追加（[firefish-mkdir](https://git.mkdir.uk/hiira/firefish-mkdir) から取り込み）
- Docker のベースイメージに Node v21 を使用
- HTML のコードに入るコメントアートを削除
diff --git a/packages/backend/src/server/web/bios.css b/packages/backend/src/server/web/bios.css
index d6a1285e..719ac90b 100644
--- a/packages/backend/src/server/web/bios.css
+++ b/packages/backend/src/server/web/bios.css
@@ -83,8 +83,8 @@ button {
color: rgb(156, 207, 216);
font-size: 16px;
padding: 0 20px;
- margin-right: 5px;
- margin-left: 5px;
+ margin-inline-end: 5px;
+ margin-inline-start: 5px;
}
button:hover {
background: #555;
diff --git a/packages/backend/src/server/web/cli.css b/packages/backend/src/server/web/cli.css
index 740a2aa1..cfbe047f 100644
--- a/packages/backend/src/server/web/cli.css
+++ b/packages/backend/src/server/web/cli.css
@@ -19,7 +19,7 @@ main {
img {
border-radius: 10px;
- margin-right: 10px;
+ margin-inline-end: 10px;
}
#form {
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index cb99a160..8a16ca84 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -13,7 +13,7 @@ html {
position: fixed;
z-index: 10000;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100vw;
height: 100vh;
cursor: wait;
@@ -25,9 +25,9 @@ html {
#splashIcon {
position: absolute;
top: 0;
- right: 0;
+ inset-inline-end: 0;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
margin: auto;
width: 64px;
height: 64px;
@@ -37,9 +37,9 @@ html {
#splashSpinner {
position: absolute;
top: 0;
- right: 0;
+ inset-inline-end: 0;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
margin: auto;
display: inline-block;
width: 28px;
@@ -51,7 +51,7 @@ html {
#splashSpinner > .spinner {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 28px;
height: 28px;
fill-rule: evenodd;
@@ -113,9 +113,9 @@ html {
#splashText {
position: absolute;
top: 0;
- right: 0;
+ inset-inline-end: 0;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
margin: auto;
display: inline-block;
width: 70%;
diff --git a/packages/backend/src/services/send-email.ts b/packages/backend/src/services/send-email.ts
index ccc6b365..fd8f7328 100644
--- a/packages/backend/src/services/send-email.ts
+++ b/packages/backend/src/services/send-email.ts
@@ -47,7 +47,7 @@ export async function sendEmail(
<body style="background: #191724; padding: 16px; margin: 0; font-family: sans-serif; font-size: 14px;">
<main style="max-width: 500px; margin: 0 auto; background: #1f1d2e; color: #e0def4; border-radius: 20px;">
<header style="padding: 32px; background: #31748f; color: #e0def4; display: flex; border-radius: 20px;">
- <img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-right: 16px;"/>
+ <img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-inline-end: 16px;"/>
<h1 style="margin: 0 0 1em 0;">${meta.name}</h1>
</header>
<article style="padding: 32px;">
diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index 55365239..24067e6a 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -100,9 +100,9 @@ function resolve() {
> .target {
width: 35%;
box-sizing: border-box;
- text-align: left;
+ text-align: initial;
padding: 24px;
- border-right: solid 1px var(--divider);
+ border-inline-end: solid 1px var(--divider);
> .info {
display: flex;
@@ -129,7 +129,7 @@ function resolve() {
}
> .names {
- margin-left: 0.3em;
+ margin-inline-start: 0.3em;
padding: 0 8px;
flex: 1;
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 8d567586..c6fc768a 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -9,7 +9,7 @@
<template #header>
<i
:class="icon('ph-warning-circle')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i>
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
<template #name>
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 071e981d..02a7ed66 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -128,8 +128,8 @@ function onMousedown(evt: MouseEvent): void {
overflow: clip;
box-sizing: border-box;
transition: background 0.1s ease;
- margin-right: 0.2rem;
- margin-left: 0.2rem;
+ margin-inline-end: 0.2rem;
+ margin-inline-start: 0.2rem;
&:not(:disabled):hover {
background: var(--buttonHoverBg);
@@ -227,7 +227,7 @@ function onMousedown(evt: MouseEvent): void {
position: absolute;
z-index: 0;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
border-radius: 6px;
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index c1910bc5..b9a20e4b 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -93,9 +93,9 @@ async function onClick() {
pointer-events: none;
position: absolute;
top: -5px;
- right: -5px;
+ inset-inline-end: -5px;
bottom: -5px;
- left: -5px;
+ inset-inline-start: -5px;
border: 2px solid var(--focus);
border-radius: 32px;
}
@@ -130,7 +130,7 @@ async function onClick() {
}
> span {
- margin-right: 6px;
+ margin-inline-end: 6px;
}
}
</style>
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index f824a1b2..c23217c0 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -12,7 +12,7 @@
<I18n
:src="i18n.ts._channel.usersCount"
tag="span"
- style="margin-left: 4px"
+ style="margin-inline-start: 4px"
>
<template #n>
<b>{{ channel.usersCount }}</b>
@@ -24,7 +24,7 @@
<I18n
:src="i18n.ts._channel.notesCount"
tag="span"
- style="margin-left: 4px"
+ style="margin-inline-start: 4px"
>
<template #n>
<b>{{ channel.notesCount }}</b>
@@ -88,7 +88,7 @@ const bannerStyle = computed(() => {
> .fade {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
@@ -97,7 +97,7 @@ const bannerStyle = computed(() => {
> .name {
position: absolute;
top: 16px;
- left: 16px;
+ inset-inline-start: 16px;
padding: 12px 16px;
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
@@ -111,7 +111,7 @@ const bannerStyle = computed(() => {
position: absolute;
z-index: 1;
bottom: 16px;
- right: 16px;
+ inset-inline-end: 16px;
padding: 8px 12px;
font-size: 80%;
-webkit-backdrop-filter: var(--blur, blur(8px));
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index adfed3fb..30aef8f7 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -459,7 +459,7 @@ onMounted(() => {
> .fetching {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
-webkit-backdrop-filter: var(--blur, blur(12px));
diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
index 659dc6d3..6886f827 100644
--- a/packages/client/src/components/MkChartTooltip.vue
+++ b/packages/client/src/components/MkChartTooltip.vue
@@ -61,7 +61,7 @@ const emit = defineEmits<{
height: 8px;
border-width: 1px;
border-style: solid;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
}
}
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 404f9844..794524c5 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -217,7 +217,7 @@ export default defineComponent({
> header {
position: sticky;
top: var(--stickyTop, 0px);
- left: 0;
+ inset-inline-start: 0;
color: var(--panelHeaderFg);
background: var(--panelHeaderBg);
border-bottom: solid 0.5px var(--panelHeaderDivider);
@@ -229,7 +229,7 @@ export default defineComponent({
padding: 12px 16px;
> ::v-deep(i) {
- margin-right: 6px;
+ margin-inline-end: 6px;
transform: translateY(0.1em);
}
@@ -242,7 +242,7 @@ export default defineComponent({
position: absolute;
z-index: 2;
top: 0;
- right: 0;
+ inset-inline-end: 0;
height: 100%;
> ::v-deep(button) {
@@ -265,7 +265,7 @@ export default defineComponent({
position: absolute;
z-index: 10;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 1c566993..7504abe1 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -160,7 +160,7 @@ onMounted(() => {
position: absolute;
z-index: 10;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
display: flex;
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index a8e74173..c851158a 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -84,9 +84,9 @@ defineExpose({
&.fade {
display: block;
- position: absolute;
+ position: sticky;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
> span {
display: inline-block;
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index 124de083..1628724f 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -176,18 +176,18 @@ export default defineComponent({
> span {
&:first-child {
- margin-right: 8px;
+ margin-inline-end: 8px;
> .icon {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
}
&:last-child {
- margin-left: 8px;
+ margin-inline-start: 8px;
> .icon {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
}
}
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 5163b9f7..5105fc0f 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -308,7 +308,7 @@ async function deleteFile() {
> .label {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
pointer-events: none;
&:before,
@@ -322,14 +322,14 @@ async function deleteFile() {
&:before {
top: 0;
- left: 57px;
+ inset-inline-start: 57px;
width: 28px;
height: 8px;
}
&:after {
top: 57px;
- left: 0;
+ inset-inline-start: 0;
width: 8px;
height: 28px;
}
@@ -345,14 +345,14 @@ async function deleteFile() {
position: absolute;
z-index: 2;
top: 0;
- left: 0;
+ inset-inline-start: 0;
}
> p {
position: absolute;
z-index: 3;
top: 19px;
- left: -28px;
+ inset-inline-start: -28px;
width: 120px;
margin: 0;
text-align: center;
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 38dc6186..cf34f6e1 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -302,7 +302,7 @@ function onContextmenu(ev: MouseEvent) {
> .checkbox {
position: absolute;
bottom: 8px;
- right: 8px;
+ inset-inline-end: 8px;
width: 16px;
height: 16px;
background: #fff;
@@ -319,9 +319,9 @@ function onContextmenu(ev: MouseEvent) {
pointer-events: none;
position: absolute;
top: -4px;
- right: -4px;
+ inset-inline-end: -4px;
bottom: -4px;
- left: -4px;
+ inset-inline-start: -4px;
border: 2px dashed var(--focus);
border-radius: 4px;
}
@@ -333,9 +333,9 @@ function onContextmenu(ev: MouseEvent) {
color: var(--desktopDriveFolderFg);
> i {
- margin-right: 4px;
- margin-left: 2px;
- text-align: left;
+ margin-inline-end: 4px;
+ margin-inline-start: 2px;
+ text-align: initial;
}
}
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index cfd889ae..b972fbce 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -126,7 +126,7 @@ function onDrop(ev: DragEvent) {
}
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
</style>
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 55c7d989..29803965 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -848,7 +848,7 @@ onBeforeUnmount(() => {
}
> .menu {
- margin-left: auto;
+ margin-inline-start: auto;
padding: 0 12px;
}
}
@@ -916,7 +916,7 @@ onBeforeUnmount(() => {
> .dropzone {
position: absolute;
- left: 0;
+ inset-inline-start: 0;
top: 38px;
width: 100%;
height: calc(100% - 38px);
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index 9fe0a62c..81d4a0cf 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -88,7 +88,7 @@ const isThumbnailAvailable = computed(() => {
width: 30%;
height: auto;
margin: 0;
- right: 4%;
+ inset-inline-end: 4%;
bottom: 4%;
}
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
index 1047acce..5ec929a8 100644
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -22,7 +22,7 @@
}}
<span
v-if="selected.length > 0"
- style="margin-left: 8px; opacity: 0.5"
+ style="margin-inline-start: 8px; opacity: 0.5"
>({{ number(selected.length) }})</span
>
</template>
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index c4cdf682..bdd93449 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -634,7 +634,7 @@ defineExpose({
> header {
/*position: sticky;
top: 0;
- left: 0;*/
+ inset-inline-start: 0;*/
height: 32px;
line-height: 32px;
z-index: 2;
@@ -647,7 +647,7 @@ defineExpose({
> header {
position: sticky;
top: 0;
- left: 0;
+ inset-inline-start: 0;
height: 32px;
line-height: 32px;
z-index: 1;
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
index e6a02a83..021f9ba1 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -36,7 +36,9 @@
<div v-else>{{ i18n.ts.system }}</div>
</div>
<div>
- <span style="margin-right: 1em">{{ file.type }}</span>
+ <span style="margin-inline-end: 1em">{{
+ file.type
+ }}</span>
<span>{{ bytes(file.size) }}</span>
</div>
<div>
@@ -82,7 +84,7 @@ const props = defineProps<{
display: flex;
width: 100%;
box-sizing: border-box;
- text-align: left;
+ text-align: initial;
align-items: center;
&:hover {
@@ -95,7 +97,7 @@ const props = defineProps<{
}
> .body {
- margin-left: 0.3em;
+ margin-inline-start: 0.3em;
padding: 8px;
flex: 1;
@@ -125,7 +127,7 @@ const props = defineProps<{
position: absolute;
z-index: 10;
top: 8px;
- left: 8px;
+ inset-inline-start: 8px;
padding: 2px 4px;
background: #ff0000bf;
color: #fff;
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 354b2c59..1c22d0e4 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -159,7 +159,7 @@ export default defineComponent({
padding: 12px 16px 12px 0;
> i {
- margin-right: 6px;
+ margin-inline-end: 6px;
}
&:empty {
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 46599947..50a2cc12 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -235,9 +235,9 @@ onBeforeUnmount(() => {
pointer-events: none;
position: absolute;
top: -5px;
- right: -5px;
+ inset-inline-end: -5px;
bottom: -5px;
- left: -5px;
+ inset-inline-start: -5px;
border: 2px solid var(--focus);
border-radius: 32px;
}
@@ -272,7 +272,7 @@ onBeforeUnmount(() => {
}
> span {
- margin-right: 6px;
+ margin-inline-end: 6px;
}
}
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index e393c6ac..e82a5234 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -82,7 +82,7 @@ const props = defineProps<{
display: flex;
> .avatar {
- margin-left: auto;
+ margin-inline-start: auto;
width: 32px;
height: 32px;
}
@@ -104,7 +104,7 @@ const props = defineProps<{
position: absolute;
z-index: -1;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index 94e10ccd..66c9ceb1 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -52,7 +52,7 @@ const search = () => {
margin: 0;
padding: 0 16px;
border: solid 1px var(--divider);
- border-left: none;
+ border-inline-start: none;
border-radius: 0 4px 4px 0;
&:active {
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
index a75928be..aa6378e8 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -84,9 +84,9 @@ const modal = ref<InstanceType<typeof MkModal>>();
opacity: 0.8;
> span + span {
- margin-left: 0.5em;
- padding-left: 0.5em;
- border-left: solid 1px rgba(255, 255, 255, 0.5);
+ margin-inline-start: 0.5em;
+ padding-inline-start: 0.5em;
+ border-inline-start: solid 1px rgba(255, 255, 255, 0.5);
}
}
}
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 1247903a..f62f1677 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -80,10 +80,10 @@ function close() {
}
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
> .close {
- margin-left: auto;
+ margin-inline-start: auto;
float: right;
}
}
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index 54b4b319..bd7556f1 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -59,7 +59,7 @@ function getInstanceIcon(instance): string {
height: ($bodyTitleHieght + $bodyInfoHieght);
object-fit: cover;
border-radius: 4px;
- margin-right: 10px;
+ margin-inline-end: 10px;
}
> :global(.body) {
@@ -67,7 +67,7 @@ function getInstanceIcon(instance): string {
overflow: hidden;
font-size: 0.9em;
color: var(--fg);
- padding-right: 8px;
+ padding-inline-end: 8px;
> :global(.host) {
display: block;
diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue
index e328695e..3075f0ad 100644
--- a/packages/client/src/components/MkInstanceSelectDialog.vue
+++ b/packages/client/src/components/MkInstanceSelectDialog.vue
@@ -169,7 +169,7 @@ const cancel = () => {
> .icon {
width: 16px;
height: 16px;
- margin-right: 8px;
+ margin-inline-end: 8px;
float: left;
}
}
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index 9e4ff2b5..7aee0478 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -222,7 +222,7 @@ onMounted(() => {
> .title {
position: absolute;
top: 24px;
- left: 24px;
+ inset-inline-start: 24px;
}
}
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index a365cbc8..65d7a85c 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -112,7 +112,7 @@ function getInstanceIcon(instance): string {
> .name {
display: none;
- margin-left: 4px;
+ margin-inline-start: 4px;
font-size: 0.85em;
vertical-align: top;
font-weight: bold;
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index a454ea94..e4d47dd8 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -9,7 +9,7 @@
v-if="copy"
v-tooltip="i18n.ts.copy"
class="_textButton"
- style="margin-left: 0.5em"
+ style="margin-inline-start: 0.5em"
@click="copy_"
>
<i :class="icon('ph-clipboard-text', false)"></i>
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index 9e194f8e..7893e169 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -121,7 +121,7 @@ function close() {
box-sizing: border-box;
overflow: auto;
overscroll-behavior: contain;
- text-align: left;
+ text-align: initial;
border-radius: 16px;
&.asDrawer {
@@ -169,13 +169,13 @@ function close() {
> .indicator {
position: absolute;
top: 32px;
- left: 32px;
+ inset-inline-start: 32px;
color: var(--indicator);
font-size: 8px;
@media (max-width: 500px) {
top: 16px;
- left: 16px;
+ inset-inline-start: 16px;
}
}
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index b49bac86..3608b01a 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -59,7 +59,7 @@ useTooltip(el, (showing) => {
word-break: break-all;
> .icon {
- padding-left: 2px;
+ padding-inline-start: 2px;
font-size: 0.9em;
}
}
diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/MkMedia.vue
index dad2f9e7..bd816230 100644
--- a/packages/client/src/components/MkMedia.vue
+++ b/packages/client/src/components/MkMedia.vue
@@ -205,7 +205,7 @@ watch(
border-radius: 6px;
overflow: hidden;
top: 12px;
- right: 12px;
+ inset-inline-end: 12px;
> * {
background-color: var(--accentedBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
@@ -241,7 +241,7 @@ watch(
display: inline-block;
font-size: 14px;
font-weight: bold;
- left: 12px;
+ inset-inline-start: 12px;
opacity: 0.5;
padding: 0 6px;
text-align: center;
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 8c3fd680..155ee987 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -114,7 +114,7 @@ onMounted(() => {
}
> *:not(:last-child) {
- margin-right: 0.2em;
+ margin-inline-end: 0.2em;
}
> .icon {
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index b44fa0d5..8cfe1826 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -207,7 +207,7 @@ export default defineComponent({
flex-direction: row;
overflow: scroll;
position: fixed;
- left: 0;
+ inset-inline-start: 0;
top: 0;
}
@media (max-width: 850px) {
@@ -245,7 +245,7 @@ export default defineComponent({
> .text-count {
opacity: 0.7;
position: absolute;
- right: 0;
+ inset-inline-end: 0;
}
}
@@ -318,9 +318,9 @@ export default defineComponent({
opacity: 0.8;
> span + span {
- margin-left: 0.5em;
- padding-left: 0.5em;
- border-left: solid 1px rgba(255, 255, 255, 0.5);
+ margin-inline-start: 0.5em;
+ padding-inline-start: 0.5em;
+ border-inline-start: solid 1px rgba(255, 255, 255, 0.5);
}
}
}
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 0d6f098f..8b0077bd 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -312,7 +312,7 @@ const previewableCount = props.mediaList.filter((media) =>
position: absolute;
bottom: 30px;
- left: 50%;
+ inset-inline-start: 50%;
transform: translateX(-50%);
width: 75%;
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 1054061d..35fb5a6b 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -359,7 +359,7 @@ onBeforeUnmount(() => {
white-space: nowrap;
font-size: 0.9em;
line-height: 20px;
- text-align: left;
+ text-align: initial;
outline: none;
&:before {
@@ -367,8 +367,8 @@ onBeforeUnmount(() => {
display: block;
position: absolute;
top: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
margin: auto;
width: calc(100% - 16px);
margin-bottom: 0.2rem;
@@ -472,7 +472,7 @@ onBeforeUnmount(() => {
cursor: default;
> .caret {
- margin-left: auto;
+ margin-inline-start: auto;
}
&.childShowing {
@@ -486,12 +486,12 @@ onBeforeUnmount(() => {
}
> i {
- margin-right: 5px;
+ margin-inline-end: 5px;
width: 20px;
}
> .avatar {
- margin-right: 5px;
+ margin-inline-end: 5px;
width: 20px;
height: 20px;
}
@@ -499,7 +499,7 @@ onBeforeUnmount(() => {
> .indicator {
position: absolute;
top: 5px;
- left: 13px;
+ inset-inline-start: 13px;
color: var(--indicator);
font-size: 12px;
}
@@ -531,7 +531,7 @@ onBeforeUnmount(() => {
}
> i {
- margin-right: 14px;
+ margin-inline-end: 14px;
width: 24px;
}
}
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index f6b52a62..0f42db59 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -539,8 +539,8 @@ defineExpose({
position: fixed;
top: 0;
bottom: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
margin: auto;
padding: 32px;
// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
@@ -604,7 +604,7 @@ defineExpose({
&.drawer {
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
overflow: clip;
@@ -612,8 +612,8 @@ defineExpose({
> .content {
position: fixed;
bottom: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
margin: auto;
> ::v-deep(*) {
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index bd443790..11ac9b08 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -196,7 +196,7 @@ function onContextmenu(ev: MouseEvent) {
@media (max-width: 500px) {
height: $height-narrow;
line-height: $height-narrow;
- padding-left: 16px;
+ padding-inline-start: 16px;
> button {
height: $height-narrow;
@@ -208,7 +208,7 @@ function onContextmenu(ev: MouseEvent) {
flex: 1;
> .icon {
- margin-right: 0.5em;
+ margin-inline-end: 0.5em;
}
}
}
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index cab0f07a..a7bc4765 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -148,7 +148,7 @@ defineExpose({
> .title {
flex: 1;
line-height: $height;
- padding-left: 32px;
+ padding-inline-start: 32px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
@@ -157,12 +157,12 @@ defineExpose({
@media (max-width: 500px) {
line-height: $height-narrow;
- padding-left: 16px;
+ padding-inline-start: 16px;
}
}
> button + .title {
- padding-left: 0;
+ padding-inline-start: 0;
}
}
diff --git a/packages/client/src/components/MkMoved.vue b/packages/client/src/components/MkMoved.vue
index abb2d14a..88eeac25 100644
--- a/packages/client/src/components/MkMoved.vue
+++ b/packages/client/src/components/MkMoved.vue
@@ -1,6 +1,9 @@
<template>
<div class="msjugskd _block">
- <i :class="icon('ph-airplane-takeoff')" style="margin-right: 8px" />
+ <i
+ :class="icon('ph-airplane-takeoff')"
+ style="margin-inline-end: 8px"
+ />
{{ i18n.ts.accountMoved }}
<MkMention class="link" :username="acct" :host="host" />
</div>
@@ -26,7 +29,7 @@ defineProps<{
border-radius: var(--radius);
> .link {
- margin-left: 4px;
+ margin-inline-start: 4px;
color: var(--accent);
}
}
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index f42642f6..95a99c82 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -693,8 +693,8 @@ defineExpose({
position: absolute;
z-index: 10;
top: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
bottom: 0;
margin: auto;
width: calc(100% - 8px);
@@ -721,8 +721,8 @@ defineExpose({
display: block;
margin-bottom: -4px;
margin-top: 16px;
- border-left: 2px solid currentColor;
- margin-left: calc((var(--avatarSize) / 2) - 1px);
+ border-inline-start: 2px solid currentColor;
+ margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
opacity: 0.25;
}
}
@@ -747,14 +747,14 @@ defineExpose({
z-index: 2;
width: 0;
display: flex;
- margin-right: 0;
+ margin-inline-end: 0;
margin-top: 0;
flex-grow: 0;
pointer-events: none;
}
> div > i {
- margin-left: -0.5px;
+ margin-inline-start: -0.5px;
}
> .info {
display: flex;
@@ -764,11 +764,11 @@ defineExpose({
color: #f6c177;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
> .hide {
- margin-left: auto;
+ margin-inline-start: auto;
color: inherit;
}
}
@@ -781,7 +781,7 @@ defineExpose({
cursor: pointer;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
> span {
@@ -796,7 +796,7 @@ defineExpose({
}
> .info {
- margin-left: auto;
+ margin-inline-start: auto;
font-size: 0.9em;
display: flex;
@@ -806,7 +806,7 @@ defineExpose({
display: inline-flex;
align-items: center;
> .dropdownIcon {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
@@ -818,9 +818,9 @@ defineExpose({
&::after {
content: "";
position: absolute;
- border-left: 2px solid currentColor;
+ border-inline-start: 2px solid currentColor;
border-top: 2px solid currentColor;
- margin-left: calc(var(--avatarSize) / 2 - 1px);
+ margin-inline-start: calc(var(--avatarSize) / 2 - 1px);
width: calc(var(--avatarSize) / 2 + 14px);
border-top-left-radius: calc(var(--avatarSize) / 4);
top: calc(50% - 1px);
@@ -836,7 +836,7 @@ defineExpose({
height: 1.2em;
border-radius: 2em;
overflow: hidden;
- margin-right: 0.4em;
+ margin-inline-end: 0.4em;
background: var(--panelHighlight);
}
.username {
@@ -884,7 +884,7 @@ defineExpose({
height: var(--avatarSize);
position: relative;
top: 0;
- left: 0;
+ inset-inline-start: 0;
}
> .header {
width: 0;
@@ -956,7 +956,7 @@ defineExpose({
transition: background 0.2s;
}
&:first-of-type {
- margin-left: -0.5em;
+ margin-inline-start: -0.5em;
&::before {
border-radius: 100px 0 0 100px;
}
@@ -1003,7 +1003,7 @@ defineExpose({
margin-top: 0px;
}
> .line {
- margin-right: 0;
+ margin-inline-end: 0;
&::before {
margin-top: 8px;
}
@@ -1016,7 +1016,7 @@ defineExpose({
padding-top: 104px;
}
> .main > .header-container > .avatar {
- margin-right: 10px;
+ margin-inline-end: 10px;
// top: calc(14px + var(--stickyTop, 0px));
}
}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 0bbae02e..f74121b2 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -500,8 +500,8 @@ onUnmounted(() => {
position: absolute;
z-index: 10;
top: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
bottom: 0;
margin: auto;
width: calc(100% - 8px);
@@ -539,7 +539,7 @@ onUnmounted(() => {
> :deep(.chips) {
padding-block: 6px 12px;
- padding-left: 32px;
+ padding-inline-start: 32px;
&:last-child {
margin-bottom: 12px;
}
@@ -651,7 +651,7 @@ onUnmounted(() => {
padding: 12px 0 0 0;
font-size: 1.05rem;
> .header > .body {
- padding-left: 10px;
+ padding-inline-start: 10px;
}
}
> .clips,
@@ -660,7 +660,7 @@ onUnmounted(() => {
padding-inline: 16px !important;
}
> :deep(.underline) {
- padding-left: 16px !important;
+ padding-inline-start: 16px !important;
}
}
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 5f580faa..ef6b82b6 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -31,7 +31,7 @@
})
"
:class="icon('ph-pencil', false)"
- style="margin-left: 0.4rem"
+ style="margin-inline-start: 0.4rem"
></i>
</MkA>
<MkVisibility :note="note" />
@@ -97,7 +97,7 @@ function openServerInfo() {
> .avatar {
width: 3.7em;
height: 3.7em;
- margin-right: 1em;
+ margin-inline-end: 1em;
}
> .user-info {
width: 0;
@@ -166,7 +166,7 @@ function openServerInfo() {
.info {
display: inline-flex;
flex-shrink: 0;
- margin-left: 0.5em;
+ margin-inline-start: 0.5em;
font-size: 0.9em;
.created-at {
max-width: 100%;
@@ -177,7 +177,7 @@ function openServerInfo() {
.ticker {
display: inline-flex;
- margin-left: 0.5em;
+ margin-inline-start: 0.5em;
vertical-align: middle;
> .name {
display: none;
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index 62bcc0f0..1c0e6954 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -79,7 +79,7 @@ defineProps<{
overflow-wrap: break-word;
> .text {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
}
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 53ff99ed..b03e3fc0 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -483,7 +483,7 @@ function noteClick(e) {
outline: none;
&.children {
padding: 10px 0 0 var(--indent);
- padding-left: var(--indent) !important;
+ padding-inline-start: var(--indent) !important;
font-size: 1em;
cursor: auto;
@@ -496,7 +496,7 @@ function noteClick(e) {
display: flex;
> .avatar-container {
- margin-right: 8px;
+ margin-inline-end: 8px;
z-index: 2;
> .avatar {
flex-shrink: 0;
@@ -561,7 +561,7 @@ function noteClick(e) {
transition: background 0.2s;
}
&:first-of-type {
- margin-left: -0.5em;
+ margin-inline-start: -0.5em;
&::before {
border-radius: 100px 0 0 100px;
}
@@ -607,19 +607,19 @@ function noteClick(e) {
&.reply,
&.reply-to {
> .main > .body {
- margin-right: -24px;
- padding-right: 24px;
+ margin-inline-end: -24px;
+ padding-inline-end: 24px;
margin-top: -12px;
padding-top: 12px;
- margin-left: calc(0px - var(--avatarSize) - 32px);
- padding-left: calc(var(--avatarSize) + 32px);
+ margin-inline-start: calc(0px - var(--avatarSize) - 32px);
+ padding-inline-start: calc(var(--avatarSize) + 32px);
border-radius: var(--radius);
}
}
&.reply-to {
> .main > .body {
- margin-left: calc(0px - var(--avatarSize) - 38px);
- padding-left: calc(var(--avatarSize) + 38px);
+ margin-inline-start: calc(0px - var(--avatarSize) - 38px);
+ padding-inline-start: calc(var(--avatarSize) + 38px);
margin-top: -16px;
padding-top: 16px;
}
@@ -627,7 +627,7 @@ function noteClick(e) {
&.reply {
--avatarSize: 38px;
.avatar-container {
- margin-right: 8px !important;
+ margin-inline-end: 8px !important;
}
}
> .reply,
@@ -651,7 +651,7 @@ function noteClick(e) {
flex-grow: 0 !important;
margin-top: -10px !important;
margin-bottom: 10px !important;
- margin-right: 10px !important;
+ margin-inline-end: 10px !important;
&::before {
border-left-style: dashed !important;
border-bottom-left-radius: 100px !important;
@@ -706,7 +706,7 @@ function noteClick(e) {
display: flex;
flex-direction: column;
align-items: center;
- margin-right: 14px;
+ margin-inline-end: 14px;
width: var(--avatarSize);
> .avatar {
width: var(--avatarSize);
@@ -727,8 +727,8 @@ function noteClick(e) {
&::before {
content: "";
position: absolute;
- border-left: 2px solid currentColor;
- margin-left: calc((var(--avatarSize) / 2) - 1px);
+ border-inline-start: 2px solid currentColor;
+ margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
width: calc(var(--indent) / 2);
inset-block: 0;
min-height: 8px;
@@ -753,7 +753,7 @@ function noteClick(e) {
> .line {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
bottom: 0;
}
}
@@ -763,15 +763,15 @@ function noteClick(e) {
> .line {
position: absolute;
z-index: 2;
- left: 0;
+ inset-inline-start: 0;
top: 0;
opacity: 0.25;
&::after {
content: "";
position: absolute;
- border-left: 2px solid currentColor;
+ border-inline-start: 2px solid currentColor;
border-bottom: 2px solid currentColor;
- margin-left: calc((var(--avatarSize) / 2) - 1px);
+ margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
width: calc(var(--indent) / 2);
height: calc((var(--avatarSize) / 2));
border-bottom-left-radius: calc(var(--indent) / 2);
@@ -794,7 +794,7 @@ function noteClick(e) {
// border-top: 1px solid var(--X13);
// position: absolute;
// bottom: 0;
- // margin-left: calc(var(--avatarSize) + 12px);
+ // margin-inline-start: calc(var(--avatarSize) + 12px);
// inset-inline: 0;
// }
}
@@ -822,7 +822,7 @@ function noteClick(e) {
--indent: 35px;
}
> .children:not(.single) {
- padding-left: 28px !important;
+ padding-inline-start: 28px !important;
}
}
&.reply-to {
@@ -833,7 +833,7 @@ function noteClick(e) {
margin-bottom: 0 !important;
}
> .main > .avatar-container {
- margin-right: 10px;
+ margin-inline-end: 10px;
}
&:first-child > .main > .body {
margin-top: -20px;
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 7c158d06..71173eda 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -399,7 +399,7 @@ useTooltip(reactionRef, (showing) => {
flex-shrink: 0;
width: 42px;
height: 42px;
- margin-right: 8px;
+ margin-inline-end: 8px;
> .icon {
display: block;
@@ -412,7 +412,7 @@ useTooltip(reactionRef, (showing) => {
position: absolute;
z-index: 1;
bottom: -2px;
- right: -2px;
+ inset-inline-end: -2px;
width: 20px;
height: 20px;
box-sizing: border-box;
@@ -496,7 +496,7 @@ useTooltip(reactionRef, (showing) => {
}
> .time {
- margin-left: auto;
+ margin-inline-start: auto;
font-size: 0.9em;
}
}
@@ -520,11 +520,11 @@ useTooltip(reactionRef, (showing) => {
}
> i:first-child {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
> i:last-child {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
}
}
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index c5ca37d3..54d66ad2 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -53,7 +53,7 @@ onMounted(() => {
.mk-notification-toast {
position: fixed;
- left: 0;
+ inset-inline-start: 0;
width: 250px;
top: 32px;
padding: 0 32px;
diff --git a/packages/client/src/components/MkObjectView.value.vue b/packages/client/src/components/MkObjectView.value.vue
index 99836f22..aa384a8e 100644
--- a/packages/client/src/components/MkObjectView.value.vue
+++ b/packages/client/src/components/MkObjectView.value.vue
@@ -150,7 +150,7 @@ export default defineComponent({
> .element {
display: block;
- padding-left: 16px;
+ padding-inline-start: 16px;
}
}
@@ -164,7 +164,7 @@ export default defineComponent({
> .kv {
display: block;
- padding-left: 16px;
+ padding-inline-start: 16px;
> .toggle {
width: 16px;
@@ -178,7 +178,7 @@ export default defineComponent({
> .k {
display: inline;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
> .v {
diff --git a/packages/client/src/components/MkPagePreview.vue b/packages/client/src/components/MkPagePreview.vue
index 034c6fed..eee861d0 100644
--- a/packages/client/src/components/MkPagePreview.vue
+++ b/packages/client/src/components/MkPagePreview.vue
@@ -71,7 +71,7 @@ defineProps<{
}
& + article {
- left: 100px;
+ inset-inline-start: 100px;
width: calc(100% - 100px);
}
}
@@ -103,7 +103,7 @@ defineProps<{
display: inline-block;
width: 16px;
height: 16px;
- margin-right: 4px;
+ margin-inline-end: 4px;
vertical-align: top;
}
@@ -125,7 +125,7 @@ defineProps<{
height: 100px;
& + article {
- left: 0;
+ inset-inline-start: 0;
width: 100%;
}
}
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index d237f180..0c00cd8e 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -17,7 +17,7 @@
v-if="pageMetadata.value.icon"
class="icon"
:class="pageMetadata.value.icon"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i>
<span>{{ pageMetadata.value.title }}</span>
</template>
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index da8e7e7e..f12e7ed1 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -491,8 +491,8 @@ defineExpose({
.cxiknjgy {
> .button {
- margin-left: auto;
- margin-right: auto;
+ margin-inline-start: auto;
+ margin-inline-end: auto;
}
}
.list > :deep(._button) {
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 48211f17..8b66ed23 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -167,7 +167,7 @@ const vote = async (id) => {
> .backdrop {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
height: 100%;
background: var(--accent);
background: linear-gradient(
@@ -186,12 +186,12 @@ const vote = async (id) => {
border-radius: 3px;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
color: var(--accent);
}
> .votes {
- margin-left: 4px;
+ margin-inline-start: 4px;
opacity: 0.7;
}
}
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index 622ac7fd..abacb413 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -195,7 +195,7 @@ watch(
color: #f00;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 175e6412..917eee7e 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -99,7 +99,9 @@
</button>
</div>
<div v-if="visibility === 'specified'" class="to-specified">
- <span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
+ <span style="margin-inline-end: 8px">{{
+ i18n.ts.recipient
+ }}</span>
<div class="visibleUsers">
<span v-for="u in visibleUsers" :key="u.id">
<MkAcct :user="u" />
@@ -1120,7 +1122,7 @@ onMounted(() => {
> .right {
position: absolute;
top: 0;
- right: 0;
+ inset-inline-end: 0;
display: flex;
align-items: center;
@@ -1135,7 +1137,7 @@ onMounted(() => {
margin: 0 0 0 8px;
& + .localOnly {
- margin-left: 0 !important;
+ margin-inline-start: 0 !important;
}
> span:only-child > i {
@@ -1182,7 +1184,7 @@ onMounted(() => {
}
> i {
- margin-left: 6px;
+ margin-inline-start: 6px;
}
}
}
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index a879bd5d..ea051c58 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -172,7 +172,7 @@ function showFileMenu(file, ev: MouseEvent) {
position: relative;
width: 64px;
height: 64px;
- margin-right: 4px;
+ margin-inline-end: 4px;
border-radius: 4px;
cursor: move;
@@ -193,7 +193,7 @@ function showFileMenu(file, ev: MouseEvent) {
width: 64px;
height: 64px;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 2;
background: var(--header);
color: var(--fg);
@@ -209,7 +209,7 @@ function showFileMenu(file, ev: MouseEvent) {
display: block;
position: absolute;
top: 8px;
- right: 8px;
+ inset-inline-end: 8px;
margin: 0;
padding: 0;
}
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
index baa09d71..24189e0f 100644
--- a/packages/client/src/components/MkQuoteButton.vue
+++ b/packages/client/src/components/MkQuoteButton.vue
@@ -51,7 +51,7 @@ function quote(): void {
> .count {
display: inline;
- margin-left: 8px;
+ margin-inline-start: 8px;
opacity: 0.7;
}
}
diff --git a/packages/client/src/components/MkReactedUsers.vue b/packages/client/src/components/MkReactedUsers.vue
index f906c1b0..dbce566a 100644
--- a/packages/client/src/components/MkReactedUsers.vue
+++ b/packages/client/src/components/MkReactedUsers.vue
@@ -18,7 +18,7 @@
:custom-emojis="note.emojis"
style="max-width: 100%"
/>
- <span style="margin-left: 4px">{{
+ <span style="margin-inline-start: 4px">{{
note.reactions[reaction]
}}</span>
</button>
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 0d992ae4..3eb5edf7 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -69,11 +69,11 @@ const emit = defineEmits<{
flex: 1;
min-width: 0;
font-size: 0.95em;
- border-left: solid 0.5px var(--divider);
- padding-left: 10px;
- margin-left: 10px;
- margin-right: 14px;
- text-align: left;
+ border-inline-start: solid 0.5px var(--divider);
+ padding-inline-start: 10px;
+ margin-inline-start: 10px;
+ margin-inline-end: 14px;
+ text-align: initial;
> .user {
line-height: 24px;
@@ -88,7 +88,7 @@ const emit = defineEmits<{
> .avatar {
width: 24px;
height: 24px;
- margin-right: 3px;
+ margin-inline-end: 3px;
}
}
}
diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
index 23a7a731..64d5f98e 100644
--- a/packages/client/src/components/MkRemoteCaution.vue
+++ b/packages/client/src/components/MkRemoteCaution.vue
@@ -28,7 +28,7 @@ defineProps<{
border-radius: var(--radius);
> .link {
- margin-left: 4px;
+ margin-inline-start: 4px;
color: var(--accent);
}
}
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 9b817e12..67a13435 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -39,7 +39,7 @@ defineExpose({
display: block;
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
padding: 20px;
margin-bottom: -10px;
diff --git a/packages/client/src/components/MkSparkle.vue b/packages/client/src/components/MkSparkle.vue
index f97a9d68..5bb484e3 100644
--- a/packages/client/src/components/MkSparkle.vue
+++ b/packages/client/src/components/MkSparkle.vue
@@ -138,7 +138,7 @@ onUnmounted(() => {
> svg {
position: absolute;
top: -32px;
- left: -32px;
+ inset-inline-start: -32px;
pointer-events: none;
}
}
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index a3b6e440..5b134e95 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -35,7 +35,7 @@
/>
</p>
<div class="wrmlmaau">
- <div
+ <bdi
class="content"
:class="{
collapsed,
@@ -154,7 +154,7 @@
v-model="showContent"
:note="note"
/>
- </div>
+ </bdi>
<MkButton
v-if="hasMfm && defaultStore.state.animatedMfm"
mini
@@ -270,7 +270,7 @@ function focusFooter(ev) {
display: inline-block;
border-radius: 6px;
padding: 0.2em 0.2em;
- margin-right: 0.2em;
+ margin-inline-end: 0.2em;
color: var(--accent);
transition: background 0.2s;
&:hover,
@@ -286,7 +286,7 @@ function focusFooter(ev) {
margin-bottom: 10px;
overflow-wrap: break-word;
> .text {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
}
@@ -296,7 +296,7 @@ function focusFooter(ev) {
> .body {
transition: filter 0.1s;
> .rp {
- margin-left: 4px;
+ margin-inline-start: 4px;
font-style: oblique;
color: var(--renote);
}
@@ -304,7 +304,7 @@ function focusFooter(ev) {
display: inline-block;
border-radius: 6px;
padding: 0.2em 0.2em;
- margin-right: 0.2em;
+ margin-inline-end: 0.2em;
color: var(--accent);
transition: background 0.2s;
&:hover,
@@ -393,8 +393,8 @@ function focusFooter(ev) {
}
> :deep(button) {
margin-top: 10px;
- margin-left: 0;
- margin-right: 0.4rem;
+ margin-inline-start: 0;
+ margin-inline-end: 0.4rem;
}
> .fade {
position: absolute;
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index ac7cdc01..f761b619 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -113,7 +113,7 @@ export default defineComponent({
> .icon {
width: 32px;
- margin-right: 2px;
+ margin-inline-end: 2px;
flex-shrink: 0;
text-align: center;
opacity: 0.8;
@@ -123,7 +123,7 @@ export default defineComponent({
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- padding-right: 12px;
+ padding-inline-end: 12px;
}
}
}
@@ -136,8 +136,8 @@ export default defineComponent({
border-top: none;
}
- margin-left: 0;
- margin-right: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
> .title {
font-size: 1em;
@@ -160,13 +160,13 @@ export default defineComponent({
> .icon {
display: block;
- margin-right: 0;
+ margin-inline-end: 0;
margin-bottom: 12px;
font-size: 1.5em;
}
> .text {
- padding-right: 0;
+ padding-inline-end: 0;
width: 100%;
font-size: 0.8em;
}
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 8e3108ec..7891b5b7 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -81,11 +81,11 @@ export default defineComponent({
}
&:not(:first-child) {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
> .icon {
- margin-right: 6px;
+ margin-inline-end: 6px;
}
&:empty {
@@ -104,7 +104,7 @@ export default defineComponent({
black calc(100% - 90px),
transparent
);
- padding-right: 90px !important;
+ padding-inline-end: 90px !important;
white-space: nowrap;
&::-webkit-scrollbar {
@@ -116,7 +116,7 @@ export default defineComponent({
align-items: center;
flex: unset;
margin: 0;
- margin-right: 8px;
+ margin-inline-end: 8px;
padding: 0.5em 1em;
border-radius: 100px;
background: var(--buttonBg);
@@ -124,7 +124,7 @@ export default defineComponent({
margin-top: -0.1em;
}
> .count {
- margin-right: -0.2em;
+ margin-inline-end: -0.2em;
}
}
}
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue
index 3a40fbde..d8912424 100644
--- a/packages/client/src/components/MkTagCloud.vue
+++ b/packages/client/src/components/MkTagCloud.vue
@@ -111,7 +111,7 @@ defineExpose({
> .tags {
position: absolute;
top: 999px;
- left: 999px;
+ inset-inline-start: 999px;
}
}
</style>
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 57a7600e..532fe940 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -333,9 +333,9 @@ defineExpose({
z-index: -1;
}
i {
- margin-left: 0.7em;
- border-left: 1px solid var(--accentedBg);
- padding-left: 0.4em;
+ margin-inline-start: 0.7em;
+ border-inline-start: 1px solid var(--accentedBg);
+ padding-inline-start: 0.4em;
}
}
}
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 5ee7e500..351fb177 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -56,8 +56,8 @@ onMounted(() => {
.mk-toast {
> .body {
position: fixed;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
top: 0;
margin: 0 auto;
margin-top: 16px;
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index d73cf155..ea88d3f1 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -305,11 +305,11 @@ function close(res) {
}
&:first-child {
- padding-right: 8px;
+ padding-inline-end: 8px;
}
&:last-child {
- padding-left: 8px;
+ padding-inline-start: 8px;
}
}
@@ -319,7 +319,7 @@ function close(res) {
}
> .ok {
- margin-left: auto;
+ margin-inline-start: auto;
}
}
}
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 8632ce71..89a232e2 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -267,7 +267,7 @@ onUnmounted(() => {
overflow: hidden;
> span {
font-weight: 600;
- margin-right: 0.4em;
+ margin-inline-end: 0.4em;
}
}
}
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 90349fb4..943ed812 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -55,7 +55,7 @@ const props = withDefaults(
display: block;
width: ($bodyTitleHieght + $bodyInfoHieght);
height: ($bodyTitleHieght + $bodyInfoHieght);
- margin-right: 12px;
+ margin-inline-end: 12px;
}
> :global(.body) {
@@ -63,7 +63,7 @@ const props = withDefaults(
overflow: hidden;
font-size: 0.9em;
color: var(--fg);
- padding-right: 8px;
+ padding-inline-end: 8px;
> :global(.name) {
display: block;
@@ -88,7 +88,7 @@ const props = withDefaults(
// > :global(.moderation) {
// display: flex;
// gap: 1rem;
- // margin-right: 1rem;
+ // margin-inline-end: 1rem;
// }
}
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
index 25af3ac1..84d9a3af 100644
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ b/packages/client/src/components/MkUsersTooltip.vue
@@ -34,7 +34,7 @@ const emit = defineEmits<{
<style lang="scss" scoped>
.beaffaef {
font-size: 0.9em;
- text-align: left;
+ text-align: initial;
> .user {
line-height: 24px;
@@ -49,7 +49,7 @@ const emit = defineEmits<{
> .avatar {
width: 24px;
height: 24px;
- margin-right: 3px;
+ margin-inline-end: 3px;
}
}
}
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 34da3c2e..b9ff257f 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -79,6 +79,6 @@ if (
<style lang="scss" module>
.visibility,
.localOnly {
- margin-left: 0.5em;
+ margin-inline-start: 0.5em;
}
</style>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 7a9ace08..91285015 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -202,7 +202,7 @@ function choose(
display: flex;
padding: 8px 14px;
font-size: 12px;
- text-align: left;
+ text-align: initial;
width: 100%;
box-sizing: border-box;
@@ -229,7 +229,7 @@ function choose(
display: flex;
justify-content: center;
align-items: center;
- margin-right: 10px;
+ margin-inline-end: 10px;
width: 16px;
top: 0;
bottom: 0;
@@ -258,7 +258,7 @@ function choose(
display: flex;
justify-content: center;
align-items: center;
- margin-left: 10px;
+ margin-inline-start: 10px;
width: 16px;
top: 0;
bottom: 0;
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 0991cefc..32b9e801 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -207,11 +207,11 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
}
> .config {
- right: 8px + 8px + 32px;
+ inset-inline-end: 8px + 8px + 32px;
}
> .remove {
- right: 8px;
+ inset-inline-end: 8px;
}
> .handle {
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 102ff244..608c8f70 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -530,7 +530,7 @@ defineExpose({
.ebkgocck {
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
> .body {
overflow: clip;
@@ -578,7 +578,7 @@ defineExpose({
}
> .left {
- margin-right: 16px;
+ margin-inline-end: 16px;
}
> .right {
@@ -615,7 +615,7 @@ defineExpose({
&.top {
top: -($size);
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: $size;
cursor: ns-resize;
@@ -623,7 +623,7 @@ defineExpose({
&.right {
top: 0;
- right: -($size);
+ inset-inline-end: -($size);
width: $size;
height: 100%;
cursor: ew-resize;
@@ -631,7 +631,7 @@ defineExpose({
&.bottom {
bottom: -($size);
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: $size;
cursor: ns-resize;
@@ -639,7 +639,7 @@ defineExpose({
&.left {
top: 0;
- left: -($size);
+ inset-inline-start: -($size);
width: $size;
height: 100%;
cursor: ew-resize;
@@ -647,7 +647,7 @@ defineExpose({
&.top-left {
top: -($size);
- left: -($size);
+ inset-inline-start: -($size);
width: $size * 2;
height: $size * 2;
cursor: nwse-resize;
@@ -655,7 +655,7 @@ defineExpose({
&.top-right {
top: -($size);
- right: -($size);
+ inset-inline-end: -($size);
width: $size * 2;
height: $size * 2;
cursor: nesw-resize;
@@ -663,7 +663,7 @@ defineExpose({
&.bottom-right {
bottom: -($size);
- right: -($size);
+ inset-inline-end: -($size);
width: $size * 2;
height: $size * 2;
cursor: nwse-resize;
@@ -671,7 +671,7 @@ defineExpose({
&.bottom-left {
bottom: -($size);
- left: -($size);
+ inset-inline-start: -($size);
width: $size * 2;
height: $size * 2;
cursor: nesw-resize;
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index 78a6f68f..ed862e68 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -104,7 +104,7 @@ const toggle = () => {
}
> .label {
- margin-left: 12px;
+ margin-inline-start: 12px;
margin-top: 2px;
display: block;
transition: inherit;
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index c289701d..40a61d19 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -53,7 +53,7 @@ const opened = ref(props.defaultOpen);
}
> .icon {
- margin-right: 0.75em;
+ margin-inline-end: 0.75em;
flex-shrink: 0;
text-align: center;
opacity: 0.8;
@@ -62,7 +62,7 @@ const opened = ref(props.defaultOpen);
display: none;
& + .text {
- padding-left: 4px;
+ padding-inline-start: 4px;
}
}
}
@@ -71,16 +71,16 @@ const opened = ref(props.defaultOpen);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- padding-right: 12px;
+ padding-inline-end: 12px;
}
> .right {
- margin-left: auto;
+ margin-inline-start: auto;
opacity: 0.7;
white-space: nowrap;
> .text:not(:empty) {
- margin-right: 0.75em;
+ margin-inline-end: 0.75em;
}
}
}
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index e54302ed..7a48c8d4 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -259,13 +259,13 @@ defineExpose({
}
> .prefix {
- left: 0;
- padding-right: 6px;
+ inset-inline-start: 0;
+ padding-inline-end: 6px;
}
> .suffix {
- right: 0;
- padding-left: 6px;
+ inset-inline-end: 0;
+ padding-inline-start: 6px;
}
&.inline {
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index f20d37dc..01a5e56a 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -66,7 +66,7 @@ defineProps<{
}
> .icon {
- margin-right: 0.75em;
+ margin-inline-end: 0.75em;
flex-shrink: 0;
text-align: center;
color: var(--fgTransparentWeak);
@@ -75,7 +75,7 @@ defineProps<{
display: none;
& + .text {
- padding-left: 4px;
+ padding-inline-start: 4px;
}
}
}
@@ -84,16 +84,16 @@ defineProps<{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- padding-right: 12px;
+ padding-inline-end: 12px;
}
> .right {
- margin-left: auto;
+ margin-inline-start: auto;
opacity: 0.7;
white-space: nowrap;
> .text:not(:empty) {
- margin-right: 0.75em;
+ margin-inline-end: 0.75em;
}
}
}
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index 2c6d59bb..77830863 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -38,7 +38,7 @@ function toggle(x) {
.novjtctn {
position: relative;
display: inline-block;
- text-align: left;
+ text-align: initial;
cursor: pointer;
padding: 8px 10px;
min-width: 60px;
@@ -112,9 +112,9 @@ function toggle(x) {
display: block;
position: absolute;
top: 3px;
- right: 3px;
+ inset-inline-end: 3px;
bottom: 3px;
- left: 3px;
+ inset-inline-start: 3px;
border-radius: 100%;
opacity: 0;
transform: scale(0);
@@ -123,7 +123,7 @@ function toggle(x) {
}
> .label {
- margin-left: 28px;
+ margin-inline-start: 28px;
display: block;
line-height: 20px;
cursor: pointer;
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index 6ad9967b..a933847a 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -282,13 +282,13 @@ function show(ev: MouseEvent) {
}
> .prefix {
- left: 0;
- padding-right: 6px;
+ inset-inline-start: 0;
+ padding-inline-end: 6px;
}
> .suffix {
- right: 0;
- padding-left: 6px;
+ inset-inline-end: 0;
+ padding-inline-start: 6px;
}
&.inline {
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 2b7c7663..d8dd038f 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -73,7 +73,7 @@ function toggle(x) {
> .knob {
position: absolute;
top: 3px;
- left: 3px;
+ inset-inline-start: 3px;
width: 15px;
height: 15px;
background: var(--swutchOffFg);
@@ -92,7 +92,7 @@ function toggle(x) {
}
> .label {
- margin-left: 12px;
+ margin-inline-start: 12px;
margin-top: 2px;
display: block;
transition: inherit;
@@ -126,7 +126,7 @@ function toggle(x) {
border-color: var(--swutchOnBg) !important;
> .knob {
- left: 12px;
+ inset-inline-start: 12px;
background: var(--swutchOnFg);
}
}
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index 542070aa..619b4226 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -158,7 +158,7 @@ function reduceFrequency(): void {
> .menu {
position: absolute;
top: 1px;
- right: 1px;
+ inset-inline-end: 1px;
> .info-circle {
border: 3px solid var(--panel);
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index acda80be..7c3616db 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -144,8 +144,8 @@ watch(
> .inner {
position: absolute;
bottom: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
top: 0;
border-radius: 100%;
z-index: 1;
@@ -159,7 +159,7 @@ watch(
position: absolute;
z-index: 1;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 18%;
height: 18%;
}
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
index e5709d95..7a30cbd2 100644
--- a/packages/client/src/components/global/MkLoading.vue
+++ b/packages/client/src/components/global/MkLoading.vue
@@ -112,7 +112,7 @@ const props = withDefaults(
.spinner {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 999;
width: var(--size);
height: var(--size);
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 7c5d1adf..406e2914 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -354,9 +354,9 @@ const props = withDefaults(
::v-deep(blockquote) {
display: block;
margin: 8px 0;
- padding-left: 12px;
+ padding-inline-start: 12px;
color: var(--fgTransparentWeak);
- border-left: solid 4px var(--fgTransparent);
+ border-inline-start: solid 4px var(--fgTransparent);
}
::v-deep(pre) {
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index c68c2695..17698ffb 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -374,13 +374,13 @@ onUnmounted(() => {
display: flex;
> .buttons {
&:not(:empty) {
- margin-right: 8px;
- margin-left: calc(0px - var(--margin));
+ margin-inline-end: 8px;
+ margin-inline-start: calc(0px - var(--margin));
}
> .avatar {
width: 32px;
height: 32px;
- margin-left: var(--margin);
+ margin-inline-start: var(--margin);
}
}
}
@@ -393,16 +393,16 @@ onUnmounted(() => {
&.right {
justify-content: flex-end;
z-index: 2;
- // margin-right: calc(0px - var(--margin));
- // margin-left: var(--margin);
+ // margin-inline-end: calc(0px - var(--margin));
+ // margin-inline-start: var(--margin);
> .button:last-child {
- margin-right: calc(0px - var(--margin));
+ margin-inline-end: calc(0px - var(--margin));
}
}
> .fullButton {
& + .fullButton {
- margin-left: 12px;
+ margin-inline-start: 12px;
}
}
}
@@ -419,7 +419,7 @@ onUnmounted(() => {
max-width: 400px;
overflow: auto;
white-space: nowrap;
- text-align: left;
+ text-align: initial;
font-weight: bold;
flex-shrink: 0;
> .avatar {
@@ -428,11 +428,11 @@ onUnmounted(() => {
width: $size;
height: $size;
vertical-align: bottom;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
> .icon {
- margin-right: 8px;
+ margin-inline-end: 8px;
min-width: 16px;
width: 1em;
text-align: center;
@@ -458,7 +458,7 @@ onUnmounted(() => {
> .chevron {
display: inline-block;
- margin-left: 6px;
+ margin-inline-start: 6px;
}
}
}
@@ -474,14 +474,14 @@ onUnmounted(() => {
}
> .left {
min-width: 20%;
- margin-left: -10px;
- padding-left: 10px;
+ margin-inline-start: -10px;
+ padding-inline-start: 10px;
}
> .right {
- // margin-left: auto;
+ // margin-inline-start: auto;
min-width: max-content;
- margin-right: -10px;
- padding-right: 10px;
+ margin-inline-end: -10px;
+ padding-inline-end: 10px;
}
> .tabs {
@@ -555,7 +555,7 @@ onUnmounted(() => {
}
> .icon + .title {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
> .title {
transition: opacity 0.2s;
@@ -564,7 +564,7 @@ onUnmounted(() => {
> .highlight {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
height: 3px;
background: var(--accent);
border-radius: 999px;
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 5a8c6245..b2e4a3ef 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -84,7 +84,7 @@ const target = self ? null : "_blank";
}
> .icon {
- padding-left: 2px;
+ padding-inline-start: 2px;
font-size: 0.9em;
}
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/page.switch.vue
index f9314cc8..3e8e6042 100644
--- a/packages/client/src/components/page/page.switch.vue
+++ b/packages/client/src/components/page/page.switch.vue
@@ -53,7 +53,7 @@ export default defineComponent({
margin: 16px auto;
& + .hkcxmtwj {
- margin-left: 16px;
+ margin-inline-start: 16px;
}
}
</style>
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 3608ce28..5cc708f6 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -35,6 +35,7 @@ import { set } from "@/scripts/idb-proxy";
import { login, refreshAccount, signout, updateAccount } from "@/account";
import components from "@/components";
+import { langmap } from "@/scripts/langmap";
import { lang, ui, version } from "@/config";
import directives from "@/directives";
import { i18n } from "@/i18n";
@@ -123,7 +124,8 @@ function checkForSplash() {
// #region Set lang attr
const html = document.documentElement;
html.setAttribute("lang", lang || "en-US");
- // #endregion
+ html.setAttribute("dir", langmap[lang].rtl ? "rtl" : "ltr");
+ //#endregion
// #region loginId
const params = new URLSearchParams(location.search);
diff --git a/packages/client/src/pages/about-firefish.vue b/packages/client/src/pages/about-firefish.vue
index 6dc931a4..d52acc3b 100644
--- a/packages/client/src/pages/about-firefish.vue
+++ b/packages/client/src/pages/about-firefish.vue
@@ -170,7 +170,7 @@
:key="sponsor"
style="
margin-bottom: 0.5rem;
- margin-right: 0.5rem;
+ margin-inline-end: 0.5rem;
font-size: 1.7rem;
"
>
@@ -192,7 +192,7 @@
:key="patron"
style="
margin-bottom: 0.5rem;
- margin-right: 0.5rem;
+ margin-inline-end: 0.5rem;
"
>
<Mfm :text="`${patron}`" />
@@ -324,7 +324,7 @@ definePageMetadata({
> .emoji {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
visibility: hidden;
> .emoji {
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index 7b0b6270..873d209e 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -40,7 +40,10 @@
class="fullButton"
primary
@click.stop="action.handler"
- ><i :class="action.icon" style="margin-right: 6px"></i
+ ><i
+ :class="action.icon"
+ style="margin-inline-end: 6px"
+ ></i
>{{ action.text }}</MkButton
>
<button
@@ -205,7 +208,7 @@ onUnmounted(() => {
margin: 0 var(--margin);
&.right {
- margin-left: auto;
+ margin-inline-start: auto;
}
&:empty {
@@ -233,7 +236,7 @@ onUnmounted(() => {
> .fullButton {
& + .fullButton {
- margin-left: 12px;
+ margin-inline-start: 12px;
}
}
}
@@ -244,10 +247,10 @@ onUnmounted(() => {
max-width: 400px;
overflow: auto;
white-space: nowrap;
- text-align: left;
+ text-align: initial;
font-weight: bold;
flex-shrink: 0;
- margin-left: 24px;
+ margin-inline-start: 24px;
> .avatar {
$size: 32px;
@@ -260,7 +263,7 @@ onUnmounted(() => {
}
> .icon {
- margin-right: 8px;
+ margin-inline-end: 8px;
width: 16px;
text-align: center;
}
@@ -285,7 +288,7 @@ onUnmounted(() => {
> .chevron {
display: inline-block;
- margin-left: 6px;
+ margin-inline-start: 6px;
}
}
}
@@ -294,7 +297,7 @@ onUnmounted(() => {
> .tabs {
position: relative;
- margin-left: 16px;
+ margin-inline-start: 16px;
font-size: 0.8em;
overflow: auto;
white-space: nowrap;
@@ -314,7 +317,7 @@ onUnmounted(() => {
}
> .icon + .title {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
}
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index bc67be36..ff4cbc00 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -463,7 +463,7 @@ definePageMetadata(
display: flex;
align-items: center;
padding: 11px;
- text-align: left;
+ text-align: initial;
border: solid 1px var(--panel);
&:hover {
@@ -514,7 +514,7 @@ definePageMetadata(
display: flex;
align-items: center;
padding: 12px;
- text-align: left;
+ text-align: initial;
&:hover {
color: var(--accent);
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 273f035f..155837ca 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -443,7 +443,7 @@ defineExpose({
width: 32%;
max-width: 280px;
box-sizing: border-box;
- border-right: solid 0.5px var(--divider);
+ border-inline-end: solid 0.5px var(--divider);
overflow: auto;
height: 100%;
}
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 6996b35f..f3346453 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -106,7 +106,7 @@ onMounted(async () => {
> .title {
position: absolute;
top: 20px;
- left: 20px;
+ inset-inline-start: 20px;
font-size: 90%;
}
@@ -117,7 +117,7 @@ onMounted(async () => {
> .subTitle {
position: absolute;
bottom: 20px;
- right: 20px;
+ inset-inline-end: 20px;
font-size: 85%;
}
}
@@ -138,7 +138,7 @@ onMounted(async () => {
place-items: center;
height: 100%;
aspect-ratio: 1;
- margin-right: 12px;
+ margin-inline-end: 12px;
background: var(--accentedBg);
color: var(--accent);
border-radius: 10px;
diff --git a/packages/client/src/pages/admin/overview.metrics.vue b/packages/client/src/pages/admin/overview.metrics.vue
index c8d7efad..f1c4f4d2 100644
--- a/packages/client/src/pages/admin/overview.metrics.vue
+++ b/packages/client/src/pages/admin/overview.metrics.vue
@@ -121,7 +121,7 @@ onUnmounted(() => {
> .pie {
height: 82px;
flex-shrink: 0;
- margin-right: 16px;
+ margin-inline-end: 16px;
}
> div {
@@ -136,7 +136,7 @@ onUnmounted(() => {
margin-bottom: 4px;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index e0e715fd..01410460 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -14,7 +14,7 @@
<div class="value">
<MkNumber
:value="stats.originalUsersCount"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
/>
</div>
<div class="label">{{ i18n.ts.users }}</div>
@@ -28,7 +28,7 @@
<div class="value">
<MkNumber
:value="stats.originalNotesCount"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
/>
</div>
<div class="label">{{ i18n.ts.notes }}</div>
@@ -42,7 +42,7 @@
<div class="value">
<MkNumber
:value="stats.instances"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
/>
</div>
<div class="label">{{ i18n.ts.instances }}</div>
@@ -56,7 +56,7 @@
<div class="value">
<MkNumber
:value="onlineUsersCount"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
/>
</div>
<div class="label">{{ i18n.ts.online }}</div>
@@ -70,7 +70,7 @@
<div class="value">
<MkNumber
:value="emojiCount"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
/>
</div>
<div class="label">{{ i18n.ts.emojis }}</div>
@@ -141,7 +141,7 @@ onMounted(async () => {
place-items: center;
height: 100%;
aspect-ratio: 1;
- margin-right: 12px;
+ margin-inline-end: 12px;
background: var(--accentedBg);
color: var(--accent);
border-radius: 10px;
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index 8a220893..d838b1ed 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -39,7 +39,7 @@ const props = defineProps<{
display: block;
width: ($bodyTitleHieght + $bodyInfoHieght);
height: ($bodyTitleHieght + $bodyInfoHieght);
- margin-right: 12px;
+ margin-inline-end: 12px;
}
> :global(.body) {
@@ -47,7 +47,7 @@ const props = defineProps<{
overflow: hidden;
font-size: 0.9em;
color: var(--fg);
- padding-right: 8px;
+ padding-inline-end: 8px;
> :global(.name) {
display: block;
diff --git a/packages/client/src/pages/admin/promotions.vue b/packages/client/src/pages/admin/promotions.vue
index 7f3da4d1..6604b42b 100644
--- a/packages/client/src/pages/admin/promotions.vue
+++ b/packages/client/src/pages/admin/promotions.vue
@@ -42,7 +42,7 @@
class="button"
inline
primary
- style="margin-right: 12px"
+ style="margin-inline-end: 12px"
@click="save(ad)"
><i :class="icon('ph-floppy-disk-back')"></i>
{{ i18n.ts.save }}</MkButton
diff --git a/packages/client/src/pages/admin/queue.chart.vue b/packages/client/src/pages/admin/queue.chart.vue
index ed4702e0..6cf25265 100644
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.vue
@@ -47,7 +47,7 @@
>
{{ job[0] }}
</a>
- <span style="margin-left: 8px; opacity: 0.7"
+ <span style="margin-inline-start: 8px; opacity: 0.7"
>({{ number(job[1]) }} jobs)</span
>
</div>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 6ffd4ae5..b5a46f4e 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -118,7 +118,7 @@ definePageMetadata({
> .icon {
width: 1em;
- margin-right: 0.75em;
+ margin-inline-end: 0.75em;
&.accepted {
color: var(--success);
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 56855a8e..c69fbd4b 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -223,10 +223,10 @@ definePageMetadata(
margin-bottom: 16px;
> * {
- margin-right: 16px;
+ margin-inline-end: 16px;
&:last-child {
- margin-right: 0;
+ margin-inline-end: 0;
}
}
}
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index f141cc6f..1730d0cd 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -43,7 +43,7 @@
><I18n
:src="i18n.ts._channel.usersCount"
tag="span"
- style="margin-left: 4px"
+ style="margin-inline-start: 4px"
><template #n
><b>{{
channel.usersCount
@@ -56,7 +56,7 @@
><I18n
:src="i18n.ts._channel.notesCount"
tag="span"
- style="margin-left: 4px"
+ style="margin-inline-start: 4px"
><template #n
><b>{{
channel.notesCount
@@ -165,14 +165,14 @@ definePageMetadata(
position: absolute;
z-index: 1;
top: 16px;
- left: 16px;
+ inset-inline-start: 16px;
}
> .toggle {
position: absolute;
z-index: 2;
top: 8px;
- right: 8px;
+ inset-inline-end: 8px;
font-size: 1.2em;
width: 48px;
height: 48px;
@@ -194,7 +194,7 @@ definePageMetadata(
> .fade {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
@@ -204,7 +204,7 @@ definePageMetadata(
position: absolute;
z-index: 1;
bottom: 16px;
- right: 16px;
+ inset-inline-end: 16px;
padding: 8px 12px;
font-size: 80%;
background: rgba(0, 0, 0, 0.7);
@@ -221,7 +221,7 @@ definePageMetadata(
position: absolute;
z-index: 1;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
-webkit-backdrop-filter: var(--blur, blur(16px));
@@ -236,7 +236,7 @@ definePageMetadata(
> .toggle {
top: 0;
- right: 0;
+ inset-inline-end: 0;
height: 100%;
background: transparent;
}
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index c1edd640..574f8fdf 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -58,7 +58,7 @@ function menu(ev) {
display: flex;
align-items: center;
padding: 12px;
- text-align: left;
+ text-align: initial;
background: var(--panel);
border-radius: 8px;
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 9f3a4391..d7cadbfd 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -10,7 +10,7 @@
<template #header
><i
:class="icon('ph-bookmark ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.pinnedUsers }}</template
>
@@ -24,7 +24,7 @@
<template #header
><i
:class="icon('ph-chart-line-up ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.popularUsers }}</template
>
@@ -38,7 +38,7 @@
<template #header
><i
:class="icon('ph-activity ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.recentlyUpdatedUsers }}</template
>
@@ -52,7 +52,7 @@
<template #header
><i
:class="icon('ph-butterfly ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.recentlyRegisteredUsers }}</template
>
@@ -70,7 +70,7 @@
<template #header
><i
:class="icon('ph-compass ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.popularTags }}</template
>
@@ -96,7 +96,7 @@
<template #header
><i
:class="icon('ph-hash ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ tag }}</template
>
@@ -108,7 +108,7 @@
<template #header
><i
:class="icon('ph-chart-line-up ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.popularUsers }}</template
>
@@ -118,7 +118,7 @@
<template #header
><i
:class="icon('ph-activity ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.recentlyUpdatedUsers }}</template
>
@@ -128,7 +128,7 @@
<template #header
><i
:class="icon('ph-rocket-launch ph-fw')"
- style="margin-right: 0.5em"
+ style="margin-inline-end: 0.5em"
></i
>{{ i18n.ts.recentlyDiscoveredUsers }}</template
>
@@ -253,7 +253,7 @@ os.api("hashtags/list", {
<style lang="scss" scoped>
.vxjfqztj {
> * {
- margin-right: 16px;
+ margin-inline-end: 16px;
&.local {
font-weight: bold;
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index a3282a7e..0f465c5c 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -176,8 +176,8 @@ definePageMetadata(
text-overflow: ellipsis;
opacity: 0.7;
font-size: 14px;
- padding-right: 40px;
- padding-left: 8px;
+ padding-inline-end: 40px;
+ padding-inline-start: 8px;
box-sizing: border-box;
@media (max-width: 500px) {
@@ -189,7 +189,7 @@ definePageMetadata(
position: absolute;
top: 0;
bottom: 0;
- right: 0;
+ inset-inline-end: 0;
margin: auto 0;
> button {
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index 330a12f2..7f79c7f3 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -181,7 +181,7 @@ definePageMetadata(
> .name {
position: absolute;
top: 8px;
- left: 9px;
+ inset-inline-start: 9px;
padding: 8px;
background: var(--panel);
}
@@ -189,7 +189,7 @@ definePageMetadata(
> .remove {
position: absolute;
top: 8px;
- right: 9px;
+ inset-inline-end: 9px;
padding: 8px;
background: var(--panel);
}
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index f34fc505..25b414db 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -302,13 +302,13 @@ definePageMetadata(
color: #eb6f92;
::v-deep(.count) {
- margin-left: 0.5em;
+ margin-inline-start: 0.5em;
}
}
}
> .other {
- margin-left: auto;
+ margin-inline-start: auto;
> button {
padding: 8px;
@@ -339,7 +339,7 @@ definePageMetadata(
}
> .koudoku {
- margin-left: auto;
+ margin-inline-start: auto;
}
}
}
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 21f132c1..da5fff78 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -358,7 +358,7 @@ defineExpose({
> .remove {
display: none;
position: absolute;
- right: -6px;
+ inset-inline-end: -6px;
top: -6px;
margin: 0;
padding: 0;
@@ -394,7 +394,7 @@ defineExpose({
}
> .send {
- margin-left: auto;
+ margin-inline-start: auto;
color: var(--accent);
&:hover {
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index f1ce1baf..d52b8476 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -156,7 +156,7 @@ function del(): void {
position: absolute;
z-index: 1;
top: -4px;
- right: -4px;
+ inset-inline-end: -4px;
margin: 0;
padding: 0;
cursor: pointer;
@@ -250,17 +250,17 @@ function del(): void {
}
> i {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
}
}
&:not(.isMe) {
- padding-left: var(--margin);
+ padding-inline-start: var(--margin);
> .content {
- padding-left: 16px;
- padding-right: 32px;
+ padding-inline-start: 16px;
+ padding-inline-end: 32px;
> .balloon {
$color: var(--X4);
@@ -271,11 +271,11 @@ function del(): void {
}
&:not(.noText):before {
- left: -14px;
+ inset-inline-start: -14px;
border-top: solid 8px transparent;
- border-right: solid 8px $color;
+ border-inline-end: solid 8px $color;
border-bottom: solid 8px transparent;
- border-left: solid 8px transparent;
+ border-inline-start: solid 8px transparent;
}
> .content {
@@ -286,24 +286,26 @@ function del(): void {
}
> footer {
- text-align: left;
+ text-align: initial;
}
}
}
&.isMe {
flex-direction: row-reverse;
- padding-right: var(--margin);
- right: var(--margin); // 削除時にposition: absoluteになったときに使う
+ padding-inline-end: var(--margin);
+ inset-inline-end: var(
+ --margin
+ ); // 削除時にposition: absoluteになったときに使う
> .content {
- padding-right: 16px;
- padding-left: 32px;
+ padding-inline-end: 16px;
+ padding-inline-start: 32px;
text-align: right;
> .balloon {
background: $me-balloon-color;
- text-align: left;
+ text-align: initial;
::selection {
color: var(--accent);
@@ -315,12 +317,12 @@ function del(): void {
}
&:not(.noText):before {
- right: -14px;
- left: auto;
+ inset-inline-end: -14px;
+ inset-inline-start: auto;
border-top: solid 8px transparent;
- border-right: solid 8px transparent;
+ border-inline-end: solid 8px transparent;
border-bottom: solid 8px transparent;
- border-left: solid 8px $me-balloon-color;
+ border-inline-start: solid 8px $me-balloon-color;
}
> .content {
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 1747147e..b3b20da4 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -400,7 +400,7 @@ XMessage:last-of-type {
}
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
@@ -436,7 +436,7 @@ XMessage:last-of-type {
> i {
display: inline-block;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
}
}
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index 34dd7825..44df56bc 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -41,7 +41,7 @@
>
<i
:class="icon('ph-shield-warning ph-xl', false)"
- style="margin-right: 0.5rem"
+ style="margin-inline-end: 0.5rem"
></i>
{{ i18n.ts._permissions.allPermissions }}
</div>
@@ -54,7 +54,7 @@
>
<i
:class="icon(`ph-${getIcon(p)} ph-xl`, false)"
- style="margin-right: 0.5rem"
+ style="margin-inline-end: 0.5rem"
></i>
{{ i18n.t(`_permissions.${p}`) }}
</div>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index a027e8b4..db819ab8 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -107,7 +107,7 @@ definePageMetadata({
float: left;
min-width: 25px;
padding: 13px;
- margin-right: 10px;
+ margin-inline-end: 10px;
border: solid 1px var(--divider);
border-radius: 6px;
@@ -137,7 +137,7 @@ definePageMetadata({
.notify-icon {
position: relative;
top: -1em;
- left: -0.5em;
+ inset-inline-start: -0.5em;
&.ph-circle ph-fill {
color: var(--indicator);
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index f769fc21..8fb5ed62 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -125,7 +125,7 @@ export default defineComponent({
box-shadow: 0 1px rgba(#000, 0.07);
> i {
- margin-right: 6px;
+ margin-inline-end: 6px;
}
&:empty {
@@ -137,7 +137,7 @@ export default defineComponent({
position: absolute;
z-index: 2;
top: 0;
- right: 0;
+ inset-inline-end: 0;
> button {
padding: 0;
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 4d160845..625b9753 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -576,7 +576,7 @@ definePageMetadata(
box-shadow: 0 1px rgba(#000, 0.07);
> i {
- margin-right: 6px;
+ margin-inline-end: 6px;
}
&:empty {
@@ -588,7 +588,7 @@ definePageMetadata(
position: absolute;
z-index: 2;
top: 0;
- right: 0;
+ inset-inline-end: 0;
> button {
padding: 0;
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index f776158b..7e39269a 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -369,7 +369,7 @@ definePageMetadata(
width: fit-content;
position: relative;
top: -10px;
- left: 1rem;
+ inset-inline-start: 1rem;
> .menu {
vertical-align: bottom;
@@ -381,7 +381,7 @@ definePageMetadata(
}
> .koudoku {
- margin-left: 4px;
+ margin-inline-start: 4px;
vertical-align: bottom;
}
}
@@ -408,7 +408,7 @@ definePageMetadata(
color: #eb6f92;
::v-deep(.count) {
- margin-left: 0.5em;
+ margin-inline-start: 0.5em;
}
}
}
@@ -425,7 +425,7 @@ definePageMetadata(
}
> .user {
- margin-left: auto;
+ margin-inline-start: auto;
display: flex;
align-items: center;
@@ -440,7 +440,7 @@ definePageMetadata(
}
> .koudoku {
- margin-left: auto;
+ margin-inline-start: auto;
margin: 1rem;
}
}
@@ -452,7 +452,7 @@ definePageMetadata(
border-top: solid 0.5px var(--divider);
> .link {
- margin-right: 2em;
+ margin-inline-end: 2em;
}
}
}
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 75c2e32f..b88e18c6 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -7,7 +7,7 @@
<template #icon
><i
:class="icon('ph-shield-check')"
- style="margin-right: 0.5rem"
+ style="margin-inline-end: 0.5rem"
></i
></template>
<template #label>{{ i18n.ts.totp }}</template>
@@ -18,7 +18,7 @@
<MkButton @click="renewTOTP"
><i
:class="icon('ph-shield-check')"
- style="margin-right: 0.5rem"
+ style="margin-inline-end: 0.5rem"
></i
>{{ i18n.ts._2fa.renewTOTP }}</MkButton
>
@@ -27,7 +27,7 @@
<MkButton v-else @click="unregisterTOTP"
><i
:class="icon('ph-shield-slash')"
- style="margin-right: 0.5rem"
+ style="margin-inline-end: 0.5rem"
></i
>{{ i18n.ts.unregister }}</MkButton
>
@@ -42,7 +42,10 @@
<MkFolder>
<template #icon
- ><i :class="icon('ph-key')" style="margin-right: 0.5rem"></i
+ ><i
+ :class="icon('ph-key')"
+ style="margin-inline-end: 0.5rem"
+ ></i
></template>
<template #label>{{ i18n.ts.securityKeyAndPasskey }}</template>
<div class="_gaps_s">
@@ -67,7 +70,7 @@
<MkButton primary @click="addSecurityKey"
><i
:class="icon('ph-key')"
- style="margin-right: 0.5rem"
+ style="margin-inline-end: 0.5rem"
></i
>{{ i18n.ts._2fa.registerSecurityKey }}</MkButton
>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 4dd64e0f..325fe83a 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -284,6 +284,6 @@ definePageMetadata({
<style module>
.button {
- margin-right: 16px;
+ margin-inline-end: 16px;
}
</style>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 47812e53..2ddb434d 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -344,7 +344,7 @@ definePageMetadata(INFO);
> .nav {
width: 34%;
- padding-right: 32px;
+ padding-inline-end: 32px;
box-sizing: border-box;
}
diff --git a/packages/client/src/pages/settings/migration.vue b/packages/client/src/pages/settings/migration.vue
index 527b297c..6afa33ca 100644
--- a/packages/client/src/pages/settings/migration.vue
+++ b/packages/client/src/pages/settings/migration.vue
@@ -37,7 +37,7 @@
class="button"
:disabled="accountAlias.length >= 10"
inline
- style="margin-right: 8px"
+ style="margin-inline-end: 8px"
@click="add"
><i :class="icon('ph-plus')"></i> {{ i18n.ts.add }}</FormButton
>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index 7410fd22..d5660769 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -1,7 +1,7 @@
<template>
<div class="_formRoot">
<FormSlot>
- <VueDraggable v-model="items" animation="150" delay="50">
+ <VueDraggable v-model="items" :animation="150" :delay="50">
<div
v-for="(element, index) in items"
:key="index"
@@ -161,7 +161,7 @@ definePageMetadata({
> .itemText {
position: relative;
font-size: 0.9em;
- margin-left: 1rem;
+ margin-inline-start: 1rem;
}
> .itemRemove {
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 8633f97a..64bd89ad 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -16,7 +16,7 @@
>
<span style="display: flex"
><b>{{ plugin.name }}</b
- ><span style="margin-left: auto"
+ ><span style="margin-inline-start: auto"
>v{{ plugin.version }}</span
></span
>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 99486adf..7de6bba9 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -110,7 +110,7 @@
<MkButton
:disabled="fields.length >= 16"
inline
- style="margin-right: 8px"
+ style="margin-inline-end: 8px"
@click="addField"
><i :class="icon('ph-plus')"></i>
{{ i18n.ts.add }}</MkButton
@@ -323,7 +323,7 @@ definePageMetadata({
> .bannerEdit {
position: absolute;
top: 16px;
- right: 16px;
+ inset-inline-end: 16px;
}
}
</style>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 6d773813..9a64f53b 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -150,7 +150,7 @@ definePageMetadata({
> .icon {
width: 1em;
- margin-right: 0.75em;
+ margin-inline-end: 0.75em;
&.succ {
color: var(--success);
@@ -167,11 +167,11 @@ definePageMetadata({
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- margin-right: 12px;
+ margin-inline-end: 12px;
}
> .time {
- margin-left: auto;
+ margin-inline-start: auto;
opacity: 0.7;
}
}
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index c4c34d7c..1ac95ca7 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -288,13 +288,13 @@ definePageMetadata({
> .toggleWrapper {
display: inline-block;
- text-align: left;
+ text-align: initial;
padding: 0 100px;
vertical-align: bottom;
input {
position: absolute;
- left: -99em;
+ inset-inline-start: -99em;
}
&:focus-within > .toggle {
@@ -321,12 +321,12 @@ definePageMetadata({
}
> .before {
- left: -70px;
+ inset-inline-start: -70px;
color: var(--accent);
}
> .after {
- right: -68px;
+ inset-inline-end: -68px;
color: var(--fg);
}
}
@@ -336,7 +336,7 @@ definePageMetadata({
position: relative;
z-index: 1;
top: 3px;
- left: 3px;
+ inset-inline-start: 3px;
width: 50px - 6;
height: 50px - 6;
background-color: #ffcf96;
@@ -355,21 +355,21 @@ definePageMetadata({
.crater--1 {
top: 18px;
- left: 10px;
+ inset-inline-start: 10px;
width: 4px;
height: 4px;
}
.crater--2 {
top: 28px;
- left: 22px;
+ inset-inline-start: 22px;
width: 6px;
height: 6px;
}
.crater--3 {
top: 10px;
- left: 25px;
+ inset-inline-start: 25px;
width: 8px;
height: 8px;
}
@@ -384,7 +384,7 @@ definePageMetadata({
.star--1 {
top: 10px;
- left: 35px;
+ inset-inline-start: 35px;
z-index: 0;
width: 30px;
height: 3px;
@@ -392,7 +392,7 @@ definePageMetadata({
.star--2 {
top: 18px;
- left: 28px;
+ inset-inline-start: 28px;
z-index: 1;
width: 30px;
height: 3px;
@@ -400,7 +400,7 @@ definePageMetadata({
.star--3 {
top: 27px;
- left: 40px;
+ inset-inline-start: 40px;
z-index: 0;
width: 30px;
height: 3px;
@@ -415,7 +415,7 @@ definePageMetadata({
.star--4 {
top: 16px;
- left: 11px;
+ inset-inline-start: 11px;
z-index: 0;
width: 2px;
height: 2px;
@@ -424,7 +424,7 @@ definePageMetadata({
.star--5 {
top: 32px;
- left: 17px;
+ inset-inline-start: 17px;
z-index: 0;
width: 3px;
height: 3px;
@@ -433,7 +433,7 @@ definePageMetadata({
.star--6 {
top: 36px;
- left: 28px;
+ inset-inline-start: 28px;
z-index: 0;
width: 2px;
height: 2px;
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 474fe51b..15cd92e4 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -372,8 +372,8 @@ definePageMetadata({
> .preview {
position: absolute;
top: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
bottom: 0;
margin: auto;
width: 42px;
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 8929c809..49dadea9 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -671,7 +671,7 @@ definePageMetadata(
display: block;
width: 64px;
height: 64px;
- margin-right: 16px;
+ margin-inline-end: 16px;
}
> .body {
@@ -751,7 +751,7 @@ definePageMetadata(
}
> :global(.ip) {
- margin-left: auto;
+ margin-inline-start: auto;
}
}
</style>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index a676de94..e293f54a 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -179,7 +179,7 @@
v-tooltip.noDelay="i18n.ts.isModerator"
style="
color: var(--badge);
- margin-left: 0.5rem;
+ margin-inline-start: 0.5rem;
"
><i :class="icon('ph-gavel')"></i
></span>
@@ -525,7 +525,7 @@ onUnmounted(() => {
> .fade {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 78px;
background: linear-gradient(
@@ -537,7 +537,7 @@ onUnmounted(() => {
> .followed {
position: absolute;
top: 10px;
- left: 120px;
+ inset-inline-start: 120px;
padding: 4px 8px;
color: #fff;
background: rgba(0, 0, 0, 0.7);
@@ -553,7 +553,7 @@ onUnmounted(() => {
> .title {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
padding: 0 0 8px 154px;
box-sizing: border-box;
@@ -572,7 +572,7 @@ onUnmounted(() => {
> .followed {
position: relative;
top: -4px;
- left: 4px;
+ inset-inline-start: 4px;
padding: 4px 8px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
@@ -589,7 +589,7 @@ onUnmounted(() => {
> .bottom {
> * {
display: inline-block;
- margin-right: 16px;
+ margin-inline-end: 16px;
line-height: 20px;
opacity: 0.8;
@@ -612,7 +612,7 @@ onUnmounted(() => {
> .fade {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 78px;
background: linear-gradient(
@@ -624,7 +624,7 @@ onUnmounted(() => {
> .actions {
position: absolute;
top: 6px;
- right: 12px;
+ inset-inline-end: 12px;
padding: 8px;
border-radius: 24px;
display: flex;
@@ -635,7 +635,7 @@ onUnmounted(() => {
> .title {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
padding: 0 0 8px 154px;
box-sizing: border-box;
@@ -653,7 +653,7 @@ onUnmounted(() => {
> .bottom {
> * {
display: inline-block;
- margin-right: 16px;
+ margin-inline-end: 16px;
line-height: 20px;
opacity: 0.8;
@@ -686,7 +686,7 @@ onUnmounted(() => {
> .followed {
position: relative;
top: -4px;
- left: 4px;
+ inset-inline-start: 4px;
padding: 4px 8px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
@@ -703,7 +703,7 @@ onUnmounted(() => {
> .followedWindow {
position: relative;
top: -25px;
- left: 80px;
+ inset-inline-start: 80px;
padding: 4px 8px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
@@ -714,7 +714,7 @@ onUnmounted(() => {
> .bottom {
> * {
display: inline-block;
- margin-right: 8px;
+ margin-inline-end: 8px;
opacity: 0.8;
}
}
@@ -724,7 +724,7 @@ onUnmounted(() => {
display: block;
position: absolute;
top: 170px;
- left: 16px;
+ inset-inline-start: 16px;
z-index: 2;
width: 120px;
height: 120px;
@@ -841,15 +841,15 @@ onUnmounted(() => {
padding-bottom: 0;
> .bottom {
> .username {
- margin-right: 0;
+ margin-inline-end: 0;
}
}
}
> .avatar {
top: 90px;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
width: 92px;
height: 92px;
margin: auto;
@@ -906,7 +906,7 @@ onUnmounted(() => {
> .sub {
max-width: 350px;
min-width: 350px;
- margin-left: var(--margin);
+ margin-inline-start: var(--margin);
}
}
}
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index a9859b07..dd3c3e5e 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,7 +1,7 @@
<template>
<MkContainer id="photos-container" :max-height="300" :foldable="true">
<template #header
- ><i :class="icon('ph-image')" style="margin-right: 0.5em"></i
+ ><i :class="icon('ph-image')" style="margin-inline-end: 0.5em"></i
>{{ i18n.ts.images }}</template
>
<div class="ujigsodd">
@@ -115,7 +115,7 @@ onMounted(() => {
text-align: center;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index bed1ab55..de43f2a9 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -55,7 +55,7 @@ const pagination = {
> .avatar {
width: 24px;
height: 24px;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
> .reaction {
@@ -64,7 +64,7 @@ const pagination = {
}
> .createdAt {
- margin-left: auto;
+ margin-inline-start: auto;
}
}
}
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 2c409a67..4cdc1094 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -51,7 +51,7 @@
rounded
gradate
data-cy-signup
- style="margin-right: 12px"
+ style="margin-inline-end: 12px"
@click="signup()"
>{{ i18n.ts.signup }}</MkButton
>
@@ -65,7 +65,7 @@
<MkButton
inline
rounded
- style="margin-left: 12px; margin-top: 12px"
+ style="margin-inline-start: 12px; margin-top: 12px"
onclick="window.location.href='/explore'"
>Explore</MkButton
>
@@ -208,7 +208,7 @@ function showMenu(ev) {
> .bg {
position: absolute;
top: 0;
- right: 0;
+ inset-inline-end: 0;
width: 80%; // 100%からshapeの幅を引いている
height: 100%;
}
@@ -217,7 +217,7 @@ function showMenu(ev) {
position: absolute;
top: 0;
bottom: 0;
- right: 64px;
+ inset-inline-end: 64px;
margin: auto;
width: 500px;
height: calc(100% - 128px);
@@ -245,7 +245,7 @@ function showMenu(ev) {
> .shape1 {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: var(--accent);
@@ -254,7 +254,7 @@ function showMenu(ev) {
> .shape2 {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: var(--accent);
@@ -265,7 +265,7 @@ function showMenu(ev) {
> .misskey {
position: absolute;
top: 42px;
- left: 42px;
+ inset-inline-start: 42px;
width: 140px;
@media (max-width: 450px) {
@@ -276,11 +276,11 @@ function showMenu(ev) {
> .emojis {
position: absolute;
bottom: 32px;
- left: 115px;
+ inset-inline-start: 115px;
transform: scale(1.5);
> * {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
@media (max-width: 1200px) {
@@ -309,7 +309,7 @@ function showMenu(ev) {
> .menu {
position: absolute;
top: 16px;
- right: 16px;
+ inset-inline-end: 16px;
width: 32px;
height: 32px;
border-radius: 8px;
@@ -352,8 +352,8 @@ function showMenu(ev) {
> .federation {
position: absolute;
bottom: 16px;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
margin: auto;
background: var(--acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
@@ -361,7 +361,7 @@ function showMenu(ev) {
border-radius: 999px;
overflow: clip;
width: 35%;
- left: 50%;
+ inset-inline-start: 50%;
padding: 8px 0;
@media (max-width: 900px) {
@@ -386,7 +386,7 @@ function showMenu(ev) {
display: inline-block;
width: 20px;
height: 20px;
- margin-right: 5px;
+ margin-inline-end: 5px;
border-radius: 999px;
}
}
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 2758f11c..fd498235 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -193,7 +193,7 @@ export default defineComponent({
> .bg {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
}
@@ -202,7 +202,7 @@ export default defineComponent({
position: absolute;
top: 0;
bottom: 0;
- right: 64px;
+ inset-inline-end: 64px;
margin: auto;
width: 500px;
height: calc(100% - 128px);
@@ -226,7 +226,7 @@ export default defineComponent({
> .shape {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: var(--accent);
@@ -236,7 +236,7 @@ export default defineComponent({
> .misskey {
position: absolute;
bottom: 64px;
- left: 64px;
+ inset-inline-start: 64px;
width: 160px;
}
@@ -293,9 +293,9 @@ export default defineComponent({
padding: 16px 0;
> span:not(:last-child) {
- padding-right: 1em;
- margin-right: 1em;
- border-right: solid 1px rgba(255, 255, 255, 0.5);
+ padding-inline-end: 1em;
+ margin-inline-end: 1em;
+ border-inline-end: solid 1px rgba(255, 255, 255, 0.5);
}
}
}
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index d131bb94..ff4bb356 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -210,7 +210,7 @@ export default defineComponent({
> .bg {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
}
@@ -218,7 +218,7 @@ export default defineComponent({
> .fade {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
@@ -227,10 +227,10 @@ export default defineComponent({
> .emojis {
position: absolute;
bottom: 32px;
- left: 35px;
+ inset-inline-start: 35px;
> * {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
@media (max-width: 1200px) {
@@ -259,7 +259,7 @@ export default defineComponent({
> .bg {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 128px;
background-position: center;
@@ -269,7 +269,7 @@ export default defineComponent({
> .fade {
position: absolute;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 128px;
background: linear-gradient(
@@ -314,9 +314,9 @@ export default defineComponent({
> div {
> span:not(:last-child) {
- padding-right: 1em;
- margin-right: 1em;
- border-right: solid 0.5px var(--divider);
+ padding-inline-end: 1em;
+ margin-inline-end: 1em;
+ border-inline-end: solid 0.5px var(--divider);
}
}
@@ -334,7 +334,7 @@ export default defineComponent({
> .menu {
position: absolute;
top: 16px;
- right: 16px;
+ inset-inline-end: 16px;
width: 32px;
height: 32px;
border-radius: 8px;
@@ -351,7 +351,7 @@ export default defineComponent({
font-size: 0.9em;
> *:not(:last-child) {
- margin-right: 1.5em;
+ margin-inline-end: 1.5em;
}
}
}
diff --git a/packages/client/src/scripts/langmap.ts b/packages/client/src/scripts/langmap.ts
index 0831aec0..1f8a1428 100644
--- a/packages/client/src/scripts/langmap.ts
+++ b/packages/client/src/scripts/langmap.ts
@@ -20,15 +20,19 @@ export const langmap = {
},
ar: {
nativeName: "العربية",
+ rtl: true,
},
"ar-AR": {
nativeName: "العربية",
+ rtl: true,
},
"ar-MA": {
nativeName: "العربية",
+ rtl: true,
},
"ar-SA": {
nativeName: "العربية (السعودية)",
+ rtl: true,
},
"ay-BO": {
nativeName: "Aymar aru",
@@ -206,9 +210,11 @@ export const langmap = {
},
fa: {
nativeName: "فارسی",
+ rtl: true,
},
"fa-IR": {
nativeName: "فارسی",
+ rtl: true,
},
"fb-LT": {
nativeName: "Leet Speak",
@@ -275,9 +281,11 @@ export const langmap = {
},
he: {
nativeName: "עברית",
+ rtl: true,
},
"he-IL": {
nativeName: "עברית",
+ rtl: true,
},
hi: {
nativeName: "हिन्दी",
@@ -485,6 +493,7 @@ export const langmap = {
},
"ps-AF": {
nativeName: "پښتو",
+ rtl: true,
},
pt: {
nativeName: "Português",
@@ -614,9 +623,11 @@ export const langmap = {
},
ur: {
nativeName: "اردو",
+ rtl: true,
},
"ur-PK": {
nativeName: "اردو",
+ rtl: true,
},
uz: {
nativeName: "O'zbek",
@@ -635,9 +646,11 @@ export const langmap = {
},
yi: {
nativeName: "ייִדיש",
+ rtl: true,
},
"yi-DE": {
nativeName: "ייִדיש (German)",
+ rtl: true,
},
zh: {
nativeName: "中文",
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index bc28b436..f345297f 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -212,7 +212,7 @@ hr {
._modalBg {
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: var(--modalBg);
@@ -389,11 +389,11 @@ hr {
margin: 0 !important;
&:not(:first-child) {
- margin-left: 8px !important;
+ margin-inline-start: 8px !important;
}
&:not(:last-child) {
- margin-right: 8px !important;
+ margin-inline-end: 8px !important;
}
}
}
@@ -531,8 +531,8 @@ hr {
content: "";
position: absolute;
top: 0;
- right: 0;
- left: 0;
+ inset-inline-end: 0;
+ inset-inline-start: 0;
bottom: 0;
z-index: -1;
background: var(--bg);
@@ -582,7 +582,7 @@ hr {
}
._beta {
- margin-left: 0.7em;
+ margin-inline-start: 0.7em;
font-size: 65%;
padding: 2px 3px;
color: var(--accent);
@@ -611,7 +611,7 @@ hr {
opacity: 0.7;
> ._icon {
- margin-right: 4px;
+ margin-inline-end: 4px;
display: none;
}
}
@@ -648,7 +648,7 @@ hr {
// content: "";
// position: absolute;
// bottom: 0;
- // left: 0;
+ // inset-inline-start: 0;
// width: 0%;
// border-bottom: 1px solid currentColor;
// transition: 0.3s ease-in-out;
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index c11b528f..5fe30402 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -95,7 +95,7 @@ if ($i) {
position: fixed;
z-index: 4000000;
top: 15px;
- right: 15px;
+ inset-inline-end: 15px;
&:before {
content: "";
@@ -114,7 +114,7 @@ if ($i) {
#devTicker {
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 2147483647;
color: #f6c177;
background: #6e6a86;
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index f0f83b8d..54302683 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -197,7 +197,7 @@ function more() {
> .banner {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background-size: cover;
@@ -244,7 +244,7 @@ function more() {
height: 40px;
color: var(--fgOnAccent);
font-weight: bold;
- text-align: left;
+ text-align: initial;
&:before {
content: "";
@@ -254,8 +254,8 @@ function more() {
margin: auto;
position: absolute;
top: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
bottom: 0;
border-radius: 999px;
background: linear-gradient(
@@ -274,8 +274,8 @@ function more() {
> .icon {
position: relative;
- margin-left: 30px;
- margin-right: 8px;
+ margin-inline-start: 30px;
+ margin-inline-end: 8px;
width: 32px;
}
@@ -303,12 +303,12 @@ function more() {
position: relative;
display: flex;
align-items: center;
- padding-left: 30px;
+ padding-inline-start: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
- text-align: left;
+ text-align: initial;
box-sizing: border-box;
margin-top: 16px;
@@ -317,7 +317,7 @@ function more() {
width: 32px;
aspect-ratio: 1;
transform: translateX(-100%);
- left: 50%;
+ inset-inline-start: 50%;
}
}
}
@@ -333,26 +333,26 @@ function more() {
> .item {
position: relative;
display: block;
- padding-left: 24px;
+ padding-inline-start: 24px;
line-height: 2.85rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
- text-align: left;
+ text-align: initial;
box-sizing: border-box;
color: var(--navFg);
> .icon {
position: relative;
width: 32px;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
> .indicator {
position: absolute;
top: 0;
- left: 20px;
+ inset-inline-start: 20px;
color: var(--navIndicator);
font-size: 8px;
}
@@ -385,8 +385,8 @@ function more() {
margin: auto;
position: absolute;
top: 0;
- left: 0;
- right: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index d0bab518..05298b8b 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -268,7 +268,7 @@ function more(ev: MouseEvent) {
background: var(--navBg);
}
#firefish_app > .wallpaper:not(.centered) & {
- border-right: 1px solid var(--divider);
+ border-inline-end: 1px solid var(--divider);
}
contain: strict;
display: flex;
@@ -277,8 +277,8 @@ function more(ev: MouseEvent) {
&:not(.iconOnly) {
> .body {
- margin-left: -200px;
- padding-left: 200px;
+ margin-inline-start: -200px;
+ padding-inline-start: 200px;
box-sizing: content-box;
width: $nav-width;
@@ -289,7 +289,7 @@ function more(ev: MouseEvent) {
> .banner {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background-size: cover;
@@ -362,7 +362,7 @@ function more(ev: MouseEvent) {
}
> .text {
- margin-left: 1rem;
+ margin-inline-start: 1rem;
}
}
@@ -420,7 +420,7 @@ function more(ev: MouseEvent) {
> .icon {
position: relative;
width: 32px;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
> .indicator {
@@ -609,7 +609,7 @@ function more(ev: MouseEvent) {
> .indicator {
position: absolute;
top: 6px;
- left: 24px;
+ inset-inline-start: 24px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index f33561b1..a6fdb60c 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -107,14 +107,14 @@ function getInstanceIcon(instance): string {
::v-deep(.item) {
display: inline-block;
vertical-align: bottom;
- margin-right: 5em;
+ margin-inline-end: 5em;
> .icon {
display: inline-block;
height: var(--height);
aspect-ratio: 1;
vertical-align: bottom;
- margin-right: 1em;
+ margin-inline-end: 1em;
}
> .host {
@@ -122,7 +122,7 @@ function getInstanceIcon(instance): string {
}
&.colored {
- padding-right: 1em;
+ padding-inline-end: 1em;
color: #fff;
}
}
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 53dea3c2..60630d44 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -105,7 +105,7 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
height: var(--height);
aspect-ratio: 1;
vertical-align: bottom;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
> .text {
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index 04b29e1a..cc444f5b 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -51,7 +51,7 @@ onUnmounted(() => {
position: fixed;
z-index: 16385;
bottom: 8px;
- right: 8px;
+ inset-inline-end: 8px;
margin: 0;
padding: 6px 12px;
font-size: 0.9em;
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index b7ecc038..674ae27c 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -67,7 +67,7 @@ const zIndex = os.claimZIndex("high");
<style lang="scss" scoped>
.mk-uploader {
position: fixed;
- right: 16px;
+ inset-inline-end: 16px;
width: 260px;
top: 32px;
padding: 16px 20px;
@@ -125,7 +125,7 @@ const zIndex = os.claimZIndex("high");
flex-shrink: 1;
}
.mk-uploader > ol > li > .top > .name > i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
.mk-uploader > ol > li > .top > .status {
display: block;
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 21901916..9d54d682 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -440,20 +440,21 @@ async function deleteProfile() {
&.center {
> .column:first-of-type {
- margin-left: auto;
+ margin-inline-start: auto;
}
> .column:last-of-type {
- margin-right: auto;
+ margin-inline-end: auto;
}
}
> .column {
flex-shrink: 0;
- border-right: solid var(--deckDividerThickness) var(--bg);
+ border-inline-end: solid var(--deckDividerThickness) var(--bg);
&:first-of-type {
- border-left: solid var(--deckDividerThickness) var(--bg);
+ border-inline-start: solid var(--deckDividerThickness)
+ var(--bg);
}
&.folder {
@@ -480,8 +481,8 @@ async function deleteProfile() {
> .sideMenu {
flex-shrink: 0;
- margin-right: 0;
- margin-left: auto;
+ margin-inline-end: 0;
+ margin-inline-start: auto;
display: flex;
flex-direction: column;
justify-content: center;
@@ -528,7 +529,7 @@ async function deleteProfile() {
position: fixed;
z-index: 1000;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
padding: 16px;
display: flex;
width: 100%;
@@ -545,14 +546,14 @@ async function deleteProfile() {
color: var(--fg);
&:not(:last-child) {
- margin-right: 12px;
+ margin-inline-end: 12px;
}
@media (max-width: 400px) {
height: 60px;
&:not(:last-child) {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
}
@@ -563,7 +564,7 @@ async function deleteProfile() {
> .indicator {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
color: var(--indicator);
font-size: 16px;
}
@@ -573,11 +574,11 @@ async function deleteProfile() {
}
&:first-child {
- margin-left: 0;
+ margin-inline-start: 0;
}
&:last-child {
- margin-right: 0;
+ margin-inline-end: 0;
}
> * {
@@ -601,7 +602,7 @@ async function deleteProfile() {
> .menu {
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index 6a39cfcc..600e7861 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -7,7 +7,7 @@
>
<template #header>
<i :class="icon('ph-flying-saucer')"></i
- ><span style="margin-left: 8px">{{ column.name }}</span>
+ ><span style="margin-inline-start: 8px">{{ column.name }}</span>
</template>
<XTimeline
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/channel-column.vue
index af11c360..d7c9ac53 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -7,7 +7,7 @@
>
<template #header>
<i :class="icon('ph-television')"></i
- ><span style="margin-left: 8px">{{ column.name }}</span>
+ ><span style="margin-inline-start: 8px">{{ column.name }}</span>
</template>
<XTimeline
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index ac99d6b8..e2a2d8d9 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -334,7 +334,7 @@ function onDrop(ev) {
position: absolute;
z-index: 1000;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: var(--focus);
@@ -348,7 +348,7 @@ function onDrop(ev) {
position: absolute;
z-index: 1000;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: var(--focus);
@@ -443,7 +443,7 @@ function onDrop(ev) {
> .toggleActive,
> .action {
- margin-left: -16px;
+ margin-inline-start: -16px;
}
> .action {
@@ -455,8 +455,8 @@ function onDrop(ev) {
}
> .menu {
- margin-left: auto;
- margin-right: -16px;
+ margin-inline-start: auto;
+ margin-inline-end: -16px;
}
}
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index 33d0389c..b3c46f26 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -7,7 +7,7 @@
<template #header
><i
:class="icon('ph-envelope-simple-open')"
- style="margin-right: 8px"
+ style="margin-inline-end: 8px"
></i
>{{ column.name }}</template
>
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 761c62ab..60c2229e 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -7,7 +7,7 @@
>
<template #header>
<i :class="icon('ph-list-bullets')"></i
- ><span style="margin-left: 8px">{{ column.name }}</span>
+ ><span style="margin-inline-start: 8px">{{ column.name }}</span>
</template>
<XTimeline
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index d2a49824..7ed8d4c9 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -5,7 +5,7 @@
@parent-focus="($event) => emit('parent-focus', $event)"
>
<template #header
- ><i :class="icon('ph-at')" style="margin-right: 8px"></i
+ ><i :class="icon('ph-at')" style="margin-inline-end: 8px"></i
>{{ column.name }}</template
>
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index 2fdece9e..fc1792c9 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -6,7 +6,7 @@
@parent-focus="($event) => emit('parent-focus', $event)"
>
<template #header
- ><i :class="icon('ph-bell')" style="margin-right: 8px"></i
+ ><i :class="icon('ph-bell')" style="margin-inline-end: 8px"></i
>{{ column.name }}</template
>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 9c7b4404..6465ff05 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -21,7 +21,7 @@
v-else-if="column.tl === 'global'"
:class="icon('ph-planet')"
></i>
- <span style="margin-left: 8px">{{ column.name }}</span>
+ <span style="margin-inline-start: 8px">{{ column.name }}</span>
</template>
<div v-if="disabled" class="iwaalbte">
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 45534dce..41435c0c 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -7,7 +7,7 @@
@parent-focus="($event) => emit('parent-focus', $event)"
>
<template #header
- ><i :class="icon('ph-browser')" style="margin-right: 8px"></i
+ ><i :class="icon('ph-browser')" style="margin-inline-end: 8px"></i
>{{ column.name }}</template
>
<div class="wtdtxvec">
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 01e50e7f..1bdd1285 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -539,7 +539,7 @@ console.log(mainRouter.currentRoute.value.name);
}
&:not(.isMobile) {
> .contents {
- border-right: 0.5px solid var(--divider);
+ border-inline-end: 0.5px solid var(--divider);
}
}
&.wallpaper {
@@ -573,8 +573,8 @@ console.log(mainRouter.currentRoute.value.name);
}
> :deep(.sidebar:not(.iconOnly)) {
- margin-left: -200px;
- padding-left: 200px;
+ margin-inline-start: -200px;
+ padding-inline-start: 200px;
box-sizing: content-box;
.banner {
pointer-events: none;
@@ -618,7 +618,7 @@ console.log(mainRouter.currentRoute.value.name);
hsla(0, 0%, 0%, 0) 100%
) !important;
width: 125% !important;
- left: -12.5% !important;
+ inset-inline-start: -12.5% !important;
height: 145% !important;
}
}
@@ -677,7 +677,7 @@ console.log(mainRouter.currentRoute.value.name);
> .widgetsDrawer {
position: fixed;
top: 0;
- right: 0;
+ inset-inline-end: 0;
z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
@@ -691,7 +691,7 @@ console.log(mainRouter.currentRoute.value.name);
> .postButton,
.widgetButton {
bottom: var(--stickyBottom);
- right: 1.5rem;
+ inset-inline-end: 1.5rem;
height: 4rem;
width: 4rem;
background-position: center;
@@ -724,7 +724,7 @@ console.log(mainRouter.currentRoute.value.name);
position: fixed;
z-index: 1000;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px;
display: flex;
width: 100%;
@@ -763,7 +763,7 @@ console.log(mainRouter.currentRoute.value.name);
> .indicator {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
color: var(--indicator);
font-size: 16px;
}
@@ -774,20 +774,20 @@ console.log(mainRouter.currentRoute.value.name);
}
&:not(:last-child) {
- margin-right: 12px;
+ margin-inline-end: 12px;
}
@media (max-width: 400px) {
height: 60px;
&:not(:last-child) {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
}
> .indicator {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
color: var(--indicator);
font-size: 16px;
}
@@ -797,11 +797,11 @@ console.log(mainRouter.currentRoute.value.name);
}
&:first-child {
- margin-left: 0;
+ margin-inline-start: 0;
}
&:last-child {
- margin-right: 0;
+ margin-inline-end: 0;
}
> * {
@@ -825,7 +825,7 @@ console.log(mainRouter.currentRoute.value.name);
> .menuDrawer {
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
@@ -843,6 +843,6 @@ console.log(mainRouter.currentRoute.value.name);
.statusbars {
position: sticky;
top: 0;
- left: 0;
+ inset-inline-start: 0;
}
</style>
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 6006e407..1688b9be 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -230,7 +230,7 @@ export default defineComponent({
}
&:first-child {
- margin-right: 16px;
+ margin-inline-end: 16px;
}
}
}
@@ -278,7 +278,7 @@ export default defineComponent({
> .header {
position: sticky;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 1000;
}
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 4e7fbf2f..05b5a740 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -216,7 +216,7 @@ defineExpose({
> .kanban {
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 500px;
height: 100vh;
overflow: auto;
@@ -253,7 +253,7 @@ defineExpose({
position: fixed;
z-index: 1001;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100vw;
height: 100vh;
}
@@ -262,7 +262,7 @@ defineExpose({
position: fixed;
z-index: 1001;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 240px;
height: 100vh;
background: var(--panel);
@@ -272,7 +272,7 @@ defineExpose({
padding: 16px;
> .icon {
- margin-right: 1em;
+ margin-inline-end: 1em;
}
}
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 5458efb6..f1ea238c 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -171,7 +171,7 @@ export default defineComponent({
$height: 60px;
position: sticky;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 1000;
line-height: $height;
-webkit-backdrop-filter: var(--blur, blur(32px));
@@ -194,7 +194,7 @@ export default defineComponent({
border-bottom: solid $line transparent;
> .icon {
- margin-right: 0.5em;
+ margin-inline-end: 0.5em;
}
&.page {
@@ -212,7 +212,7 @@ export default defineComponent({
position: relative;
> .icon + .text {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
> .avatar {
@@ -221,7 +221,7 @@ export default defineComponent({
width: $size;
height: $size;
vertical-align: middle;
- margin-right: 8px;
+ margin-inline-end: 8px;
pointer-events: none;
}
@@ -243,15 +243,15 @@ export default defineComponent({
}
> .right {
- margin-left: auto;
+ margin-inline-start: auto;
> .search {
background: var(--bg);
border-radius: 999px;
width: 230px;
line-height: $height - 20px;
- margin-right: 16px;
- text-align: left;
+ margin-inline-end: 16px;
+ text-align: initial;
> * {
opacity: 0.7;
@@ -294,7 +294,7 @@ export default defineComponent({
text-align: center;
> .icon + .text {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
> .avatar {
@@ -303,7 +303,7 @@ export default defineComponent({
width: $size;
height: $size;
vertical-align: middle;
- margin-right: 8px;
+ margin-inline-end: 8px;
pointer-events: none;
}
}
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index c92dc9fd..ccccbc6d 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -172,7 +172,7 @@ export default defineComponent({
> .back {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
@@ -263,7 +263,7 @@ export default defineComponent({
> .announcements {
margin: 32px 0;
- text-align: left;
+ text-align: initial;
> header {
padding: 12px 16px;
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index a00f143d..5bbcc693 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -188,7 +188,7 @@ defineExpose<WidgetComponentExpose>({
> .logs {
border-top: solid 0.5px var(--divider);
- text-align: left;
+ text-align: initial;
padding: 16px;
&:empty {
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index b37970eb..64565ed9 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -203,7 +203,7 @@ defineExpose<WidgetComponentExpose>({
opacity: 0.8;
> b {
- margin-left: 2px;
+ margin-inline-start: 2px;
}
}
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index 6cdd520d..8a5e7b8f 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -246,22 +246,22 @@ defineExpose<WidgetComponentExpose>({
&.a {
top: 14px;
- left: 14px;
+ inset-inline-start: 14px;
}
&.b {
top: 14px;
- right: 14px;
+ inset-inline-end: 14px;
}
&.c {
bottom: 14px;
- left: 14px;
+ inset-inline-start: 14px;
}
&.d {
bottom: 14px;
- right: 14px;
+ inset-inline-end: 14px;
}
}
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 79b5469c..3224a720 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -141,7 +141,7 @@ defineExpose<WidgetComponentExpose>({
height: ($bodyTitleHieght + $bodyInfoHieght);
object-fit: cover;
border-radius: 4px;
- margin-right: 8px;
+ margin-inline-end: 8px;
}
> .body {
@@ -149,7 +149,7 @@ defineExpose<WidgetComponentExpose>({
overflow: hidden;
font-size: 0.9em;
color: var(--fg);
- padding-right: 8px;
+ padding-inline-end: 8px;
> .a {
display: block;
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index 8e5cb860..bfce4755 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -254,7 +254,7 @@ defineExpose<WidgetComponentExpose>({
> .icon {
color: var(--warn);
- margin-left: auto;
+ margin-inline-start: auto;
animation: warnBlink 1s infinite;
}
}
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 7159b924..416e4934 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -113,7 +113,7 @@ defineExpose<WidgetComponentExpose>({
display: block;
position: absolute;
bottom: 8px;
- right: 8px;
+ inset-inline-end: 8px;
margin: 0;
padding: 0 10px;
height: 28px;
diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index df03b813..b9fede1d 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -179,11 +179,11 @@ function onStatsLog(statsLog) {
width: 50%;
&:first-child {
- padding-right: 5px;
+ padding-inline-end: 5px;
}
&:last-child {
- padding-left: 5px;
+ padding-inline-start: 5px;
}
> text {
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index 4a18098f..3997d629 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -42,7 +42,7 @@ onBeforeUnmount(() => {
> .pie {
height: 82px;
flex-shrink: 0;
- margin-right: 16px;
+ margin-inline-end: 16px;
}
> div {
@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
margin-bottom: 4px;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index 71ebd173..b2fef6ea 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -35,7 +35,7 @@ const available = computed(() => props.meta.fs.total - props.meta.fs.used);
> .pie {
height: 82px;
flex-shrink: 0;
- margin-right: 16px;
+ margin-inline-end: 16px;
}
> div {
@@ -50,7 +50,7 @@ const available = computed(() => props.meta.fs.total - props.meta.fs.used);
margin-bottom: 4px;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
diff --git a/packages/client/src/widgets/server-metric/meilisearch.vue b/packages/client/src/widgets/server-metric/meilisearch.vue
index ea9d1120..44d8c110 100644
--- a/packages/client/src/widgets/server-metric/meilisearch.vue
+++ b/packages/client/src/widgets/server-metric/meilisearch.vue
@@ -62,7 +62,7 @@ onBeforeUnmount(() => {
> .pie {
height: 82px;
flex-shrink: 0;
- margin-right: 16px;
+ margin-inline-end: 16px;
}
> div {
@@ -77,7 +77,7 @@ onBeforeUnmount(() => {
margin-bottom: 4px;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
index b5ea5fd1..481bf18b 100644
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -50,7 +50,7 @@ onBeforeUnmount(() => {
> .pie {
height: 82px;
flex-shrink: 0;
- margin-right: 16px;
+ margin-inline-end: 16px;
}
> div {
@@ -65,7 +65,7 @@ onBeforeUnmount(() => {
margin-bottom: 4px;
> i {
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
index 592604c5..633ac5e8 100644
--- a/packages/client/src/widgets/server-metric/net.vue
+++ b/packages/client/src/widgets/server-metric/net.vue
@@ -138,11 +138,11 @@ function onStatsLog(statsLog) {
width: 50%;
&:first-child {
- padding-right: 5px;
+ padding-inline-end: 5px;
}
&:last-child {
- padding-left: 5px;
+ padding-inline-start: 5px;
}
> text {
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
index 6a7ec6c5..e47e75f8 100644
--- a/packages/client/src/widgets/slideshow.vue
+++ b/packages/client/src/widgets/slideshow.vue
@@ -152,7 +152,7 @@ defineExpose<WidgetComponentExpose>({
> .slide {
position: absolute;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
background-size: cover;
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index a51ff32c..c429a460 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -31,7 +31,7 @@
v-else-if="widgetProps.src === 'antenna'"
:class="icon('ph-television')"
></i>
- <span style="margin-left: 8px">{{
+ <span style="margin-inline-start: 8px">{{
widgetProps.src === "list"
? widgetProps.list.name
: widgetProps.src === "antenna"
@@ -46,7 +46,7 @@
: 'ph-caret-down ph-lg',
)
"
- style="margin-left: 8px"
+ style="margin-inline-start: 8px"
></i>
</button>
</template>