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;