From 7bdf47fa774158419e97f44485396273b52959b7 Mon Sep 17 00:00:00 2001 From: freeplay Date: Sun, 9 Jul 2023 22:48:03 -0400 Subject: [PATCH] left & right properties to inset-inline --- packages/backend/src/server/web/style.css | 16 ++++++------ packages/client/src/components/MkButton.vue | 2 +- .../src/components/MkChannelFollowButton.vue | 4 +-- .../src/components/MkChannelPreview.vue | 6 ++--- packages/client/src/components/MkChart.vue | 2 +- .../client/src/components/MkContainer.vue | 6 ++--- .../client/src/components/MkCropperDialog.vue | 2 +- packages/client/src/components/MkCwButton.vue | 2 +- .../client/src/components/MkDrive.file.vue | 10 +++---- .../client/src/components/MkDrive.folder.vue | 6 ++--- packages/client/src/components/MkDrive.vue | 2 +- .../src/components/MkDriveFileThumbnail.vue | 2 +- .../client/src/components/MkEmojiPicker.vue | 4 +-- .../src/components/MkFileListForAdmin.vue | 2 +- .../client/src/components/MkFollowButton.vue | 4 +-- .../src/components/MkGalleryPostPreview.vue | 2 +- .../client/src/components/MkInstanceStats.vue | 2 +- .../client/src/components/MkLaunchPad.vue | 4 +-- packages/client/src/components/MkMedia.vue | 4 +-- .../client/src/components/MkMediaCaption.vue | 4 +-- .../client/src/components/MkMediaList.vue | 2 +- packages/client/src/components/MkMenu.vue | 6 ++--- packages/client/src/components/MkModal.vue | 10 +++---- packages/client/src/components/MkNote.vue | 6 ++--- .../client/src/components/MkNoteDetailed.vue | 4 +-- packages/client/src/components/MkNoteSub.vue | 4 +-- .../client/src/components/MkNotification.vue | 2 +- .../src/components/MkNotificationToast.vue | 2 +- .../client/src/components/MkPagePreview.vue | 4 +-- packages/client/src/components/MkPoll.vue | 2 +- packages/client/src/components/MkPostForm.vue | 2 +- .../src/components/MkPostFormAttaches.vue | 4 +-- .../src/components/MkShowMoreButton.vue | 2 +- packages/client/src/components/MkSparkle.vue | 2 +- packages/client/src/components/MkTagCloud.vue | 2 +- packages/client/src/components/MkToast.vue | 4 +-- packages/client/src/components/MkUserInfo.vue | 4 +-- .../client/src/components/MkUserPreview.vue | 6 ++--- packages/client/src/components/MkWidgets.vue | 4 +-- packages/client/src/components/MkWindow.vue | 18 ++++++------- packages/client/src/components/form/input.vue | 4 +-- packages/client/src/components/form/radio.vue | 4 +-- .../client/src/components/form/select.vue | 4 +-- .../client/src/components/form/switch.vue | 4 +-- .../client/src/components/global/MkAd.vue | 2 +- .../client/src/components/global/MkAvatar.vue | 6 ++--- .../src/components/global/MkLoading.vue | 2 +- .../src/components/global/MkPageHeader.vue | 2 +- packages/client/src/pages/about-calckey.vue | 2 +- .../src/pages/admin/overview.federation.vue | 4 +-- packages/client/src/pages/channel.vue | 12 ++++----- packages/client/src/pages/follow-requests.vue | 2 +- packages/client/src/pages/gallery/edit.vue | 4 +-- .../pages/messaging/messaging-room.form.vue | 2 +- .../messaging/messaging-room.message.vue | 10 +++---- .../client/src/pages/my-antennas/index.vue | 2 +- .../page-editor/page-editor.container.vue | 2 +- .../src/pages/page-editor/page-editor.vue | 2 +- packages/client/src/pages/page.vue | 2 +- .../client/src/pages/settings/profile.vue | 2 +- packages/client/src/pages/settings/theme.vue | 26 +++++++++---------- packages/client/src/pages/theme-editor.vue | 4 +-- packages/client/src/pages/user/home.vue | 24 ++++++++--------- .../client/src/pages/welcome.entrance.a.vue | 20 +++++++------- .../client/src/pages/welcome.entrance.b.vue | 8 +++--- .../client/src/pages/welcome.entrance.c.vue | 12 ++++----- packages/client/src/style.scss | 8 +++--- packages/client/src/ui/_common_/common.vue | 4 +-- .../src/ui/_common_/navbar-for-mobile.vue | 14 +++++----- packages/client/src/ui/_common_/navbar.vue | 14 +++++----- .../src/ui/_common_/stream-indicator.vue | 2 +- packages/client/src/ui/_common_/upload.vue | 2 +- packages/client/src/ui/deck.vue | 6 ++--- packages/client/src/ui/deck/column.vue | 4 +-- packages/client/src/ui/universal.vue | 16 ++++++------ packages/client/src/ui/visitor/a.vue | 2 +- packages/client/src/ui/visitor/b.vue | 6 ++--- packages/client/src/ui/visitor/header.vue | 2 +- packages/client/src/ui/visitor/kanban.vue | 2 +- packages/client/src/widgets/clock.vue | 8 +++--- packages/client/src/widgets/memo.vue | 2 +- packages/client/src/widgets/slideshow.vue | 2 +- 82 files changed, 219 insertions(+), 219 deletions(-) diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css index 9b2ee2d9cc..66f36c4335 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; @@ -40,9 +40,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; @@ -54,7 +54,7 @@ html { #splashSpinner > .spinner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 28px; height: 28px; fill-rule: evenodd; @@ -120,9 +120,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/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue index 5589a681b8..b6f49aa192 100644 --- a/packages/client/src/components/MkButton.vue +++ b/packages/client/src/components/MkButton.vue @@ -224,7 +224,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 09ee8794cd..2ec8328125 100644 --- a/packages/client/src/components/MkChannelFollowButton.vue +++ b/packages/client/src/components/MkChannelFollowButton.vue @@ -92,9 +92,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; } diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue index 8e3b7d3037..ab9f37e0fd 100644 --- a/packages/client/src/components/MkChannelPreview.vue +++ b/packages/client/src/components/MkChannelPreview.vue @@ -86,7 +86,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)); @@ -95,7 +95,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)); @@ -109,7 +109,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 fab89e0b0c..255fa615ba 100644 --- a/packages/client/src/components/MkChart.vue +++ b/packages/client/src/components/MkChart.vue @@ -1098,7 +1098,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/MkContainer.vue b/packages/client/src/components/MkContainer.vue index a04960911e..aae857873b 100644 --- a/packages/client/src/components/MkContainer.vue +++ b/packages/client/src/components/MkContainer.vue @@ -208,7 +208,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); @@ -233,7 +233,7 @@ export default defineComponent({ position: absolute; z-index: 2; top: 0; - right: 0; + inset-inline-end: 0; height: 100%; > ::v-deep(button) { @@ -256,7 +256,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 b7d25bd35d..ca2215eb48 100644 --- a/packages/client/src/components/MkCropperDialog.vue +++ b/packages/client/src/components/MkCropperDialog.vue @@ -158,7 +158,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 4db39f1ac9..5eaff720e2 100644 --- a/packages/client/src/components/MkCwButton.vue +++ b/packages/client/src/components/MkCwButton.vue @@ -86,7 +86,7 @@ defineExpose({ display: block; position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; width: 100%; > span { display: inline-block; diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue index 894fab4698..c2f0b2fe88 100644 --- a/packages/client/src/components/MkDrive.file.vue +++ b/packages/client/src/components/MkDrive.file.vue @@ -301,7 +301,7 @@ async function deleteFile() { > .label { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; pointer-events: none; &:before, @@ -315,14 +315,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; } @@ -338,14 +338,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 1df1516b82..0cd612abce 100644 --- a/packages/client/src/components/MkDrive.folder.vue +++ b/packages/client/src/components/MkDrive.folder.vue @@ -305,7 +305,7 @@ function onContextmenu(ev: MouseEvent) { > .checkbox { position: absolute; bottom: 8px; - right: 8px; + inset-inline-end: 8px; width: 16px; height: 16px; background: #fff; @@ -322,9 +322,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; } diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue index 9182f1a850..e7014f353c 100644 --- a/packages/client/src/components/MkDrive.vue +++ b/packages/client/src/components/MkDrive.vue @@ -900,7 +900,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 48b5428177..fb25be92fc 100644 --- a/packages/client/src/components/MkDriveFileThumbnail.vue +++ b/packages/client/src/components/MkDriveFileThumbnail.vue @@ -97,7 +97,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/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue index 09d61518d8..988847b3cd 100644 --- a/packages/client/src/components/MkEmojiPicker.vue +++ b/packages/client/src/components/MkEmojiPicker.vue @@ -632,7 +632,7 @@ defineExpose({ > header { /*position: sticky; top: 0; - left: 0;*/ + inset-inline-start: 0;*/ height: 32px; line-height: 32px; z-index: 2; @@ -645,7 +645,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 258e0f0585..6e18b88b6b 100644 --- a/packages/client/src/components/MkFileListForAdmin.vue +++ b/packages/client/src/components/MkFileListForAdmin.vue @@ -128,7 +128,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/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue index 114e3a74bc..8eda0e22a8 100644 --- a/packages/client/src/components/MkFollowButton.vue +++ b/packages/client/src/components/MkFollowButton.vue @@ -227,9 +227,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; } diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue index 9eff017215..1292c5ddf1 100644 --- a/packages/client/src/components/MkGalleryPostPreview.vue +++ b/packages/client/src/components/MkGalleryPostPreview.vue @@ -103,7 +103,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/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue index c2a5071730..9eace1716f 100644 --- a/packages/client/src/components/MkInstanceStats.vue +++ b/packages/client/src/components/MkInstanceStats.vue @@ -284,7 +284,7 @@ onMounted(() => { > .title { position: absolute; top: 24px; - left: 24px; + inset-inline-start: 24px; } } diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue index 30e170f290..a568fc6fc2 100644 --- a/packages/client/src/components/MkLaunchPad.vue +++ b/packages/client/src/components/MkLaunchPad.vue @@ -170,13 +170,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/MkMedia.vue b/packages/client/src/components/MkMedia.vue index d697054b6a..03dc301a22 100644 --- a/packages/client/src/components/MkMedia.vue +++ b/packages/client/src/components/MkMedia.vue @@ -176,7 +176,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)); @@ -209,7 +209,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/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue index 6e7ee2004e..8cfe182609 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; } } diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue index e5b13cf7ed..f3c3c597a9 100644 --- a/packages/client/src/components/MkMediaList.vue +++ b/packages/client/src/components/MkMediaList.vue @@ -285,7 +285,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 2712d4b35e..0c4dfc9874 100644 --- a/packages/client/src/components/MkMenu.vue +++ b/packages/client/src/components/MkMenu.vue @@ -368,8 +368,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; @@ -500,7 +500,7 @@ onBeforeUnmount(() => { > .indicator { position: absolute; top: 5px; - left: 13px; + inset-inline-start: 13px; color: var(--indicator); font-size: 12px; } diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue index 2393d4396d..ee9d08fe06 100644 --- a/packages/client/src/components/MkModal.vue +++ b/packages/client/src/components/MkModal.vue @@ -523,8 +523,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だとやたら重い。なんとかしたい @@ -588,7 +588,7 @@ defineExpose({ &.drawer { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; overflow: clip; @@ -596,8 +596,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/MkNote.vue b/packages/client/src/components/MkNote.vue index 8b5a73a6bd..3f22612700 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -624,8 +624,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); @@ -815,7 +815,7 @@ defineExpose({ height: var(--avatarSize); position: relative; top: 0; - left: 0; + inset-inline-start: 0; } > .header { width: 0; diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue index 82055d61b3..ac9649423c 100644 --- a/packages/client/src/components/MkNoteDetailed.vue +++ b/packages/client/src/components/MkNoteDetailed.vue @@ -478,8 +478,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); diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index 0156b5b992..2120563818 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -682,7 +682,7 @@ function noteClick(e) { > .line { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; bottom: 0; } } @@ -692,7 +692,7 @@ function noteClick(e) { > .line { position: absolute; z-index: 2; - left: 0; + inset-inline-start: 0; top: 0; opacity: 0.25; &::after { diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue index d8d308b3de..7b41957fa6 100644 --- a/packages/client/src/components/MkNotification.vue +++ b/packages/client/src/components/MkNotification.vue @@ -420,7 +420,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; diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue index 20b0848554..96ca960007 100644 --- a/packages/client/src/components/MkNotificationToast.vue +++ b/packages/client/src/components/MkNotificationToast.vue @@ -52,7 +52,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/MkPagePreview.vue b/packages/client/src/components/MkPagePreview.vue index 2c9820cf3c..eee861d0d7 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); } } @@ -125,7 +125,7 @@ defineProps<{ height: 100px; & + article { - left: 0; + inset-inline-start: 0; width: 100%; } } diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue index 68d59fc1a7..ea470e31be 100644 --- a/packages/client/src/components/MkPoll.vue +++ b/packages/client/src/components/MkPoll.vue @@ -166,7 +166,7 @@ const vote = async (id) => { > .backdrop { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; height: 100%; background: var(--accent); background: linear-gradient( diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue index e82e3b5198..61ac626b4a 100644 --- a/packages/client/src/components/MkPostForm.vue +++ b/packages/client/src/components/MkPostForm.vue @@ -1059,7 +1059,7 @@ onMounted(() => { > .right { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; > .text-count { opacity: 0.7; diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue index 8592756753..0c70e83ffd 100644 --- a/packages/client/src/components/MkPostFormAttaches.vue +++ b/packages/client/src/components/MkPostFormAttaches.vue @@ -217,7 +217,7 @@ export default defineComponent({ width: 64px; height: 64px; top: 0; - left: 0; + inset-inline-start: 0; z-index: 2; background: rgba(17, 17, 17, 0.7); color: #fff; @@ -233,7 +233,7 @@ export default defineComponent({ display: block; position: absolute; top: 8px; - right: 8px; + inset-inline-end: 8px; margin: 0; padding: 0; } diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue index e2d9b7d499..8a43e95610 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 6cfe4401a7..8d1142eefa 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/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue index a44ca12726..f705a284d1 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; } } diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue index 8d173e3e1f..bf4d8be89e 100644 --- a/packages/client/src/components/MkToast.vue +++ b/packages/client/src/components/MkToast.vue @@ -55,8 +55,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/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue index 9c2763e533..27681ce1c2 100644 --- a/packages/client/src/components/MkUserInfo.vue +++ b/packages/client/src/components/MkUserInfo.vue @@ -78,7 +78,7 @@ defineProps<{ display: block; position: absolute; top: 62px; - left: 13px; + inset-inline-start: 13px; z-index: 2; width: 58px; height: 58px; @@ -144,7 +144,7 @@ defineProps<{ > .koudoku-button { position: absolute; top: 8px; - right: 8px; + inset-inline-end: 8px; margin-bottom: 1rem; } } diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue index 6c3838fd2e..dfd1eb0fa6 100644 --- a/packages/client/src/components/MkUserPreview.vue +++ b/packages/client/src/components/MkUserPreview.vue @@ -205,7 +205,7 @@ onMounted(() => { > .followed { position: absolute; top: 12px; - left: 12px; + inset-inline-start: 12px; padding: 4px 8px; color: #fff; background: rgba(0, 0, 0, 0.7); @@ -244,7 +244,7 @@ onMounted(() => { display: block; position: absolute; top: 70px; - left: 13px; + inset-inline-start: 13px; z-index: 2; width: 58px; height: 58px; @@ -388,7 +388,7 @@ onMounted(() => { > .follow-button-container { position: absolute; top: 8px; - right: 8px; + inset-inline-end: 8px; z-index: 3; color: white; } diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue index a5e56c0750..8d5258d1b5 100644 --- a/packages/client/src/components/MkWidgets.vue +++ b/packages/client/src/components/MkWidgets.vue @@ -211,11 +211,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 667fd1c768..cad983a488 100644 --- a/packages/client/src/components/MkWindow.vue +++ b/packages/client/src/components/MkWindow.vue @@ -526,7 +526,7 @@ defineExpose({ .ebkgocck { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; > .body { overflow: clip; @@ -611,7 +611,7 @@ defineExpose({ &.top { top: -($size); - left: 0; + inset-inline-start: 0; width: 100%; height: $size; cursor: ns-resize; @@ -619,7 +619,7 @@ defineExpose({ &.right { top: 0; - right: -($size); + inset-inline-end: -($size); width: $size; height: 100%; cursor: ew-resize; @@ -627,7 +627,7 @@ defineExpose({ &.bottom { bottom: -($size); - left: 0; + inset-inline-start: 0; width: 100%; height: $size; cursor: ns-resize; @@ -635,7 +635,7 @@ defineExpose({ &.left { top: 0; - left: -($size); + inset-inline-start: -($size); width: $size; height: 100%; cursor: ew-resize; @@ -643,7 +643,7 @@ defineExpose({ &.top-left { top: -($size); - left: -($size); + inset-inline-start: -($size); width: $size * 2; height: $size * 2; cursor: nwse-resize; @@ -651,7 +651,7 @@ defineExpose({ &.top-right { top: -($size); - right: -($size); + inset-inline-end: -($size); width: $size * 2; height: $size * 2; cursor: nesw-resize; @@ -659,7 +659,7 @@ defineExpose({ &.bottom-right { bottom: -($size); - right: -($size); + inset-inline-end: -($size); width: $size * 2; height: $size * 2; cursor: nwse-resize; @@ -667,7 +667,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/input.vue b/packages/client/src/components/form/input.vue index 6923cf5c38..9a1bc92fc7 100644 --- a/packages/client/src/components/form/input.vue +++ b/packages/client/src/components/form/input.vue @@ -267,12 +267,12 @@ defineExpose({ } > .prefix { - left: 0; + inset-inline-start: 0; padding-inline-end: 6px; } > .suffix { - right: 0; + inset-inline-end: 0; padding-inline-start: 6px; } diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue index 8a268f54ba..0385b275f7 100644 --- a/packages/client/src/components/form/radio.vue +++ b/packages/client/src/components/form/radio.vue @@ -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); diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue index 419142d9f2..1972ae570a 100644 --- a/packages/client/src/components/form/select.vue +++ b/packages/client/src/components/form/select.vue @@ -282,12 +282,12 @@ function show(ev: MouseEvent) { } > .prefix { - left: 0; + inset-inline-start: 0; padding-inline-end: 6px; } > .suffix { - right: 0; + inset-inline-end: 0; padding-inline-start: 6px; } diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue index 0257ede143..b94be08e87 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); @@ -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 89498c5dc8..68a44947be 100644 --- a/packages/client/src/components/global/MkAd.vue +++ b/packages/client/src/components/global/MkAd.vue @@ -157,7 +157,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 9340b84e9d..068be80572 100644 --- a/packages/client/src/components/global/MkAvatar.vue +++ b/packages/client/src/components/global/MkAvatar.vue @@ -135,8 +135,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; @@ -150,7 +150,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 4f031829a8..caa30c60eb 100644 --- a/packages/client/src/components/global/MkLoading.vue +++ b/packages/client/src/components/global/MkLoading.vue @@ -114,7 +114,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/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue index 750f1d78b6..e9dd51e6e3 100644 --- a/packages/client/src/components/global/MkPageHeader.vue +++ b/packages/client/src/components/global/MkPageHeader.vue @@ -562,7 +562,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/pages/about-calckey.vue b/packages/client/src/pages/about-calckey.vue index f68933924f..25ddaad42e 100644 --- a/packages/client/src/pages/about-calckey.vue +++ b/packages/client/src/pages/about-calckey.vue @@ -272,7 +272,7 @@ definePageMetadata({ > .emoji { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; visibility: hidden; > .emoji { diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue index edbbac74e1..8babfc804c 100644 --- a/packages/client/src/pages/admin/overview.federation.vue +++ b/packages/client/src/pages/admin/overview.federation.vue @@ -140,7 +140,7 @@ onMounted(async () => { > .title { position: absolute; top: 20px; - left: 20px; + inset-inline-start: 20px; font-size: 90%; } @@ -151,7 +151,7 @@ onMounted(async () => { > .subTitle { position: absolute; bottom: 20px; - right: 20px; + inset-inline-end: 20px; font-size: 85%; } } diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue index 7e570313a7..b4668a8dc2 100644 --- a/packages/client/src/pages/channel.vue +++ b/packages/client/src/pages/channel.vue @@ -169,14 +169,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; @@ -198,7 +198,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)); @@ -208,7 +208,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); @@ -225,7 +225,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)); @@ -240,7 +240,7 @@ definePageMetadata( > .toggle { top: 0; - right: 0; + inset-inline-end: 0; height: 100%; background: transparent; } diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue index ef3daa0862..07d0cff72a 100644 --- a/packages/client/src/pages/follow-requests.vue +++ b/packages/client/src/pages/follow-requests.vue @@ -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 a98e643b3d..039f5cba6e 100644 --- a/packages/client/src/pages/gallery/edit.vue +++ b/packages/client/src/pages/gallery/edit.vue @@ -179,7 +179,7 @@ definePageMetadata( > .name { position: absolute; top: 8px; - left: 9px; + inset-inline-start: 9px; padding: 8px; background: var(--panel); } @@ -187,7 +187,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/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue index 739f8bba80..49d7e891e1 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; diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue index 240cf31cf6..d58b90b2f5 100644 --- a/packages/client/src/pages/messaging/messaging-room.message.vue +++ b/packages/client/src/pages/messaging/messaging-room.message.vue @@ -154,7 +154,7 @@ function del(): void { position: absolute; z-index: 1; top: -4px; - right: -4px; + inset-inline-end: -4px; margin: 0; padding: 0; cursor: pointer; @@ -269,7 +269,7 @@ function del(): void { } &:not(.noText):before { - left: -14px; + inset-inline-start: -14px; border-top: solid 8px transparent; border-inline-end: solid 8px $color; border-bottom: solid 8px transparent; @@ -292,7 +292,7 @@ function del(): void { &.isMe { flex-direction: row-reverse; padding-inline-end: var(--margin); - right: var(--margin); // 削除時にposition: absoluteになったときに使う + inset-inline-end: var(--margin); // 削除時にposition: absoluteになったときに使う > .content { padding-inline-end: 16px; @@ -313,8 +313,8 @@ function del(): void { } &:not(.noText):before { - right: -14px; - left: auto; + inset-inline-end: -14px; + inset-inline-start: auto; border-top: solid 8px transparent; border-inline-end: solid 8px transparent; border-bottom: solid 8px transparent; diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue index 99e5b8026e..85f567c175 100644 --- a/packages/client/src/pages/my-antennas/index.vue +++ b/packages/client/src/pages/my-antennas/index.vue @@ -138,7 +138,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 1c09c62189..77b309cb95 100644 --- a/packages/client/src/pages/page-editor/page-editor.container.vue +++ b/packages/client/src/pages/page-editor/page-editor.container.vue @@ -135,7 +135,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 c1c9d7a1c1..dbf7d98566 100644 --- a/packages/client/src/pages/page-editor/page-editor.vue +++ b/packages/client/src/pages/page-editor/page-editor.vue @@ -591,7 +591,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 af621fa843..f1f4e9e527 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; diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue index 114afdb7f1..1229539c13 100644 --- a/packages/client/src/pages/settings/profile.vue +++ b/packages/client/src/pages/settings/profile.vue @@ -325,7 +325,7 @@ definePageMetadata({ > .bannerEdit { position: absolute; top: 16px; - right: 16px; + inset-inline-end: 16px; } } diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue index d89379feca..45226450ca 100644 --- a/packages/client/src/pages/settings/theme.vue +++ b/packages/client/src/pages/settings/theme.vue @@ -307,7 +307,7 @@ definePageMetadata({ input { position: absolute; - left: -99em; + inset-inline-start: -99em; } &:focus-within > .toggle { @@ -334,12 +334,12 @@ definePageMetadata({ } > .before { - left: -70px; + inset-inline-start: -70px; color: var(--accent); } > .after { - right: -68px; + inset-inline-end: -68px; color: var(--fg); } } @@ -349,7 +349,7 @@ definePageMetadata({ position: relative; z-index: 1; top: 3px; - left: 3px; + inset-inline-start: 3px; width: 50px - 6; height: 50px - 6; background-color: #ffcf96; @@ -368,21 +368,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; } @@ -397,7 +397,7 @@ definePageMetadata({ .star--1 { top: 10px; - left: 35px; + inset-inline-start: 35px; z-index: 0; width: 30px; height: 3px; @@ -405,7 +405,7 @@ definePageMetadata({ .star--2 { top: 18px; - left: 28px; + inset-inline-start: 28px; z-index: 1; width: 30px; height: 3px; @@ -413,7 +413,7 @@ definePageMetadata({ .star--3 { top: 27px; - left: 40px; + inset-inline-start: 40px; z-index: 0; width: 30px; height: 3px; @@ -428,7 +428,7 @@ definePageMetadata({ .star--4 { top: 16px; - left: 11px; + inset-inline-start: 11px; z-index: 0; width: 2px; height: 2px; @@ -437,7 +437,7 @@ definePageMetadata({ .star--5 { top: 32px; - left: 17px; + inset-inline-start: 17px; z-index: 0; width: 3px; height: 3px; @@ -446,7 +446,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 cec2cb980b..472f7cb2a9 100644 --- a/packages/client/src/pages/theme-editor.vue +++ b/packages/client/src/pages/theme-editor.vue @@ -371,8 +371,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/home.vue b/packages/client/src/pages/user/home.vue index d5e6ed031e..781378ba6a 100644 --- a/packages/client/src/pages/user/home.vue +++ b/packages/client/src/pages/user/home.vue @@ -532,7 +532,7 @@ onUnmounted(() => { > .fade { position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 78px; background: linear-gradient( @@ -544,7 +544,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); @@ -555,7 +555,7 @@ onUnmounted(() => { > .title { position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; width: 100%; padding: 0 0 8px 154px; box-sizing: border-box; @@ -574,7 +574,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); @@ -609,7 +609,7 @@ onUnmounted(() => { > .fade { position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 78px; background: linear-gradient( @@ -621,7 +621,7 @@ onUnmounted(() => { > .actions { position: absolute; top: 6px; - right: 12px; + inset-inline-end: 12px; padding: 8px; border-radius: 24px; display: flex; @@ -632,7 +632,7 @@ onUnmounted(() => { > .title { position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; width: 100%; padding: 0 0 8px 154px; box-sizing: border-box; @@ -683,7 +683,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); @@ -695,7 +695,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); @@ -716,7 +716,7 @@ onUnmounted(() => { display: block; position: absolute; top: 170px; - left: 16px; + inset-inline-start: 16px; z-index: 2; width: 120px; height: 120px; @@ -837,8 +837,8 @@ onUnmounted(() => { > .avatar { top: 90px; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; width: 92px; height: 92px; margin: auto; diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue index 8906fb2c3e..8ea8f8af2c 100644 --- a/packages/client/src/pages/welcome.entrance.a.vue +++ b/packages/client/src/pages/welcome.entrance.a.vue @@ -201,7 +201,7 @@ function showMenu(ev) { > .bg { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; width: 80%; // 100%からshapeの幅を引いている height: 100%; } @@ -210,7 +210,7 @@ function showMenu(ev) { position: absolute; top: 0; bottom: 0; - right: 64px; + inset-inline-end: 64px; margin: auto; width: 500px; height: calc(100% - 128px); @@ -238,7 +238,7 @@ function showMenu(ev) { > .shape1 { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: var(--accent); @@ -247,7 +247,7 @@ function showMenu(ev) { > .shape2 { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: var(--accent); @@ -258,7 +258,7 @@ function showMenu(ev) { > .misskey { position: absolute; top: 42px; - left: 42px; + inset-inline-start: 42px; width: 140px; @media (max-width: 450px) { @@ -269,7 +269,7 @@ function showMenu(ev) { > .emojis { position: absolute; bottom: 32px; - left: 115px; + inset-inline-start: 115px; transform: scale(1.5); > * { @@ -303,7 +303,7 @@ function showMenu(ev) { > .menu { position: absolute; top: 16px; - right: 16px; + inset-inline-end: 16px; width: 32px; height: 32px; border-radius: 8px; @@ -346,8 +346,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)); @@ -355,7 +355,7 @@ function showMenu(ev) { border-radius: 999px; overflow: clip; width: 35%; - left: 50%; + inset-inline-start: 50%; padding: 8px 0; @media (max-width: 900px) { diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue index a6e8a387d4..cd48766a3e 100644 --- a/packages/client/src/pages/welcome.entrance.b.vue +++ b/packages/client/src/pages/welcome.entrance.b.vue @@ -192,7 +192,7 @@ export default defineComponent({ > .bg { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; } @@ -201,7 +201,7 @@ export default defineComponent({ position: absolute; top: 0; bottom: 0; - right: 64px; + inset-inline-end: 64px; margin: auto; width: 500px; height: calc(100% - 128px); @@ -225,7 +225,7 @@ export default defineComponent({ > .shape { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: var(--accent); @@ -235,7 +235,7 @@ export default defineComponent({ > .misskey { position: absolute; bottom: 64px; - left: 64px; + inset-inline-start: 64px; width: 160px; } diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue index b3d0c32f6d..0c3bd82a93 100644 --- a/packages/client/src/pages/welcome.entrance.c.vue +++ b/packages/client/src/pages/welcome.entrance.c.vue @@ -209,7 +209,7 @@ export default defineComponent({ > .bg { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; } @@ -217,7 +217,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); @@ -226,7 +226,7 @@ export default defineComponent({ > .emojis { position: absolute; bottom: 32px; - left: 35px; + inset-inline-start: 35px; > * { margin-inline-end: 8px; @@ -258,7 +258,7 @@ export default defineComponent({ > .bg { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 128px; background-position: center; @@ -268,7 +268,7 @@ export default defineComponent({ > .fade { position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 128px; background: linear-gradient( @@ -333,7 +333,7 @@ export default defineComponent({ > .menu { position: absolute; top: 16px; - right: 16px; + inset-inline-end: 16px; width: 32px; height: 32px; border-radius: 8px; diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index 1228e7f61d..bb66bdb2d8 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -202,7 +202,7 @@ hr { ._modalBg { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background: var(--modalBg); @@ -521,8 +521,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); @@ -638,7 +638,7 @@ hr { content: ""; position: absolute; bottom: 0; - left: 0; + inset-inline-start: 0; width: 0%; border-bottom: 1px solid var(--link); 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 e87c3c6d6f..dfde4f9595 100644 --- a/packages/client/src/ui/_common_/common.vue +++ b/packages/client/src/ui/_common_/common.vue @@ -93,7 +93,7 @@ if ($i) { position: fixed; z-index: 4000000; top: 15px; - right: 15px; + inset-inline-end: 15px; &:before { content: ""; @@ -112,7 +112,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 f0bca466fb..cae18ba5d5 100644 --- a/packages/client/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue @@ -189,7 +189,7 @@ function more() { > .banner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-size: cover; @@ -246,8 +246,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( @@ -309,7 +309,7 @@ function more() { width: 32px; aspect-ratio: 1; transform: translateX(-100%); - left: 50%; + inset-inline-start: 50%; } } } @@ -344,7 +344,7 @@ function more() { > .indicator { position: absolute; top: 0; - left: 20px; + inset-inline-start: 20px; color: var(--navIndicator); font-size: 8px; } @@ -377,8 +377,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 6dd0d4b03c..91e5308dff 100644 --- a/packages/client/src/ui/_common_/navbar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -293,8 +293,8 @@ function more(ev: MouseEvent) { 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); @@ -311,7 +311,7 @@ function more(ev: MouseEvent) { > .indicator { position: absolute; top: 0; - left: 20px; + inset-inline-start: 20px; color: var(--navIndicator); font-size: 8px; } @@ -379,7 +379,7 @@ function more(ev: MouseEvent) { > .icon, > .text { position: relative; - left: 3rem; + inset-inline-start: 3rem; margin: 0; width: auto; color: var(--fgOnAccent); @@ -405,7 +405,7 @@ function more(ev: MouseEvent) { > .banner { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-size: cover; @@ -558,7 +558,7 @@ function more(ev: MouseEvent) { > .indicator { position: absolute; top: 6px; - left: 24px; + inset-inline-start: 24px; color: var(--navIndicator); font-size: 8px; } @@ -578,7 +578,7 @@ function more(ev: MouseEvent) { aspect-ratio: 1/1; } > .icon { - left: unset; + inset-inline-start: unset; } > .text { display: none; diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue index a3d06295cf..3bd47614a1 100644 --- a/packages/client/src/ui/_common_/stream-indicator.vue +++ b/packages/client/src/ui/_common_/stream-indicator.vue @@ -48,7 +48,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 411342c2fa..38c529b8ff 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"); diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue index f74f6a5ee8..e22fe09229 100644 --- a/packages/client/src/ui/visitor/a.vue +++ b/packages/client/src/ui/visitor/a.vue @@ -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 454345d96f..2aa28b274e 100644 --- a/packages/client/src/ui/visitor/b.vue +++ b/packages/client/src/ui/visitor/b.vue @@ -210,7 +210,7 @@ defineExpose({ > .kanban { position: fixed; top: 0; - left: 0; + inset-inline-start: 0; width: 500px; height: 100vh; overflow: auto; @@ -247,7 +247,7 @@ defineExpose({ position: fixed; z-index: 1001; top: 0; - left: 0; + inset-inline-start: 0; width: 100vw; height: 100vh; } @@ -256,7 +256,7 @@ defineExpose({ position: fixed; z-index: 1001; top: 0; - left: 0; + inset-inline-start: 0; width: 240px; height: 100vh; background: var(--panel); diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue index 77db0ecdd6..7a7c0d0d48 100644 --- a/packages/client/src/ui/visitor/header.vue +++ b/packages/client/src/ui/visitor/header.vue @@ -169,7 +169,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)); diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue index 67f5473a32..e3552c0fc3 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); diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue index 0b6575dac7..aab041e950 100644 --- a/packages/client/src/widgets/clock.vue +++ b/packages/client/src/widgets/clock.vue @@ -250,22 +250,22 @@ defineExpose({ &.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/memo.vue b/packages/client/src/widgets/memo.vue index 85cb1f7471..1ec5cedce2 100644 --- a/packages/client/src/widgets/memo.vue +++ b/packages/client/src/widgets/memo.vue @@ -118,7 +118,7 @@ defineExpose({ 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/slideshow.vue b/packages/client/src/widgets/slideshow.vue index 243875f36d..5f51a32b85 100644 --- a/packages/client/src/widgets/slideshow.vue +++ b/packages/client/src/widgets/slideshow.vue @@ -157,7 +157,7 @@ defineExpose({ > .slide { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; background-size: cover;