HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

left & right properties to inset-inline

Browse source
This commit is contained in:
freeplay 2023-07-09 22:48:03 -04:00
parent b914747176
commit 7bdf47fa77
82 changed files with 219 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/backend/src/server/web/style.css
View file

@ -13,7 +13,7 @@ html {
position: fixed; position: fixed;
z-index: 10000; z-index: 10000;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
cursor: wait; cursor: wait;
@ -25,9 +25,9 @@ html {
#splashIcon { #splashIcon {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
margin: auto; margin: auto;
width: 64px; width: 64px;
height: 64px; height: 64px;
@ -40,9 +40,9 @@ html {
#splashSpinner { #splashSpinner {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
margin: auto; margin: auto;
display: inline-block; display: inline-block;
width: 28px; width: 28px;
@ -54,7 +54,7 @@ html {
#splashSpinner > .spinner { #splashSpinner > .spinner {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 28px; width: 28px;
height: 28px; height: 28px;
fill-rule: evenodd; fill-rule: evenodd;
@ -120,9 +120,9 @@ html {
#splashText { #splashText {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
margin: auto; margin: auto;
display: inline-block; display: inline-block;
width: 70%; width: 70%;

2
packages/client/src/components/MkButton.vue
View file

@ -224,7 +224,7 @@ function onMousedown(evt: MouseEvent): void {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: 6px;

4
packages/client/src/components/MkChannelFollowButton.vue
View file

@ -92,9 +92,9 @@ async function onClick() {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: -5px; top: -5px;
right: -5px; inset-inline-end: -5px;
bottom: -5px; bottom: -5px;
left: -5px; inset-inline-start: -5px;
border: 2px solid var(--focus); border: 2px solid var(--focus);
border-radius: 32px; border-radius: 32px;
} }

6
packages/client/src/components/MkChannelPreview.vue
View file

@ -86,7 +86,7 @@ const bannerStyle = computed(() => {
> .fade { > .fade {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--X15));
@ -95,7 +95,7 @@ const bannerStyle = computed(() => {
> .name { > .name {
position: absolute; position: absolute;
top: 16px; top: 16px;
left: 16px; inset-inline-start: 16px;
padding: 12px 16px; padding: 12px 16px;
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
@ -109,7 +109,7 @@ const bannerStyle = computed(() => {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 16px; bottom: 16px;
right: 16px; inset-inline-end: 16px;
padding: 8px 12px; padding: 8px 12px;
font-size: 80%; font-size: 80%;
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));

2
packages/client/src/components/MkChart.vue
View file

@ -1098,7 +1098,7 @@ onMounted(() => {
> .fetching { > .fetching {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-backdrop-filter: var(--blur, blur(12px)); -webkit-backdrop-filter: var(--blur, blur(12px));

6
packages/client/src/components/MkContainer.vue
View file

@ -208,7 +208,7 @@ export default defineComponent({
> header { > header {
position: sticky; position: sticky;
top: var(--stickyTop, 0px); top: var(--stickyTop, 0px);
left: 0; inset-inline-start: 0;
color: var(--panelHeaderFg); color: var(--panelHeaderFg);
background: var(--panelHeaderBg); background: var(--panelHeaderBg);
border-bottom: solid 0.5px var(--panelHeaderDivider); border-bottom: solid 0.5px var(--panelHeaderDivider);
@ -233,7 +233,7 @@ export default defineComponent({
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
height: 100%; height: 100%;
> ::v-deep(button) { > ::v-deep(button) {
@ -256,7 +256,7 @@ export default defineComponent({
position: absolute; position: absolute;
z-index: 10; z-index: 10;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--X15));

2
packages/client/src/components/MkCropperDialog.vue
View file

@ -158,7 +158,7 @@ onMounted(() => {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;

2
packages/client/src/components/MkCwButton.vue
View file

@ -86,7 +86,7 @@ defineExpose({
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
> span { > span {
display: inline-block; display: inline-block;

10
packages/client/src/components/MkDrive.file.vue
View file

@ -301,7 +301,7 @@ async function deleteFile() {
> .label { > .label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
pointer-events: none; pointer-events: none;
&:before, &:before,
@ -315,14 +315,14 @@ async function deleteFile() {
&:before { &:before {
top: 0; top: 0;
left: 57px; inset-inline-start: 57px;
width: 28px; width: 28px;
height: 8px; height: 8px;
} }
&:after { &:after {
top: 57px; top: 57px;
left: 0; inset-inline-start: 0;
width: 8px; width: 8px;
height: 28px; height: 28px;
} }
@ -338,14 +338,14 @@ async function deleteFile() {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
} }
> p { > p {
position: absolute; position: absolute;
z-index: 3; z-index: 3;
top: 19px; top: 19px;
left: -28px; inset-inline-start: -28px;
width: 120px; width: 120px;
margin: 0; margin: 0;
text-align: center; text-align: center;

6
packages/client/src/components/MkDrive.folder.vue
View file

@ -305,7 +305,7 @@ function onContextmenu(ev: MouseEvent) {
> .checkbox { > .checkbox {
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 8px; inset-inline-end: 8px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: #fff; background: #fff;
@ -322,9 +322,9 @@ function onContextmenu(ev: MouseEvent) {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: -4px; top: -4px;
right: -4px; inset-inline-end: -4px;
bottom: -4px; bottom: -4px;
left: -4px; inset-inline-start: -4px;
border: 2px dashed var(--focus); border: 2px dashed var(--focus);
border-radius: 4px; border-radius: 4px;
} }

2
packages/client/src/components/MkDrive.vue
View file

@ -900,7 +900,7 @@ onBeforeUnmount(() => {
> .dropzone { > .dropzone {
position: absolute; position: absolute;
left: 0; inset-inline-start: 0;
top: 38px; top: 38px;
width: 100%; width: 100%;
height: calc(100% - 38px); height: calc(100% - 38px);

2
packages/client/src/components/MkDriveFileThumbnail.vue
View file

@ -97,7 +97,7 @@ const isThumbnailAvailable = computed(() => {
width: 30%; width: 30%;
height: auto; height: auto;
margin: 0; margin: 0;
right: 4%; inset-inline-end: 4%;
bottom: 4%; bottom: 4%;
} }

4
packages/client/src/components/MkEmojiPicker.vue
View file

@ -632,7 +632,7 @@ defineExpose({
> header { > header {
/*position: sticky; /*position: sticky;
top: 0; top: 0;
left: 0;*/ inset-inline-start: 0;*/
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
z-index: 2; z-index: 2;
@ -645,7 +645,7 @@ defineExpose({
> header { > header {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
z-index: 1; z-index: 1;

2
packages/client/src/components/MkFileListForAdmin.vue
View file

@ -128,7 +128,7 @@ const props = defineProps<{
position: absolute; position: absolute;
z-index: 10; z-index: 10;
top: 8px; top: 8px;
left: 8px; inset-inline-start: 8px;
padding: 2px 4px; padding: 2px 4px;
background: #ff0000bf; background: #ff0000bf;
color: #fff; color: #fff;

4
packages/client/src/components/MkFollowButton.vue
View file

@ -227,9 +227,9 @@ onBeforeUnmount(() => {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: -5px; top: -5px;
right: -5px; inset-inline-end: -5px;
bottom: -5px; bottom: -5px;
left: -5px; inset-inline-start: -5px;
border: 2px solid var(--focus); border: 2px solid var(--focus);
border-radius: 32px; border-radius: 32px;
} }

2
packages/client/src/components/MkGalleryPostPreview.vue
View file

@ -103,7 +103,7 @@ const props = defineProps<{
position: absolute; position: absolute;
z-index: -1; z-index: -1;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), transparent); background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);

2
packages/client/src/components/MkInstanceStats.vue
View file

@ -284,7 +284,7 @@ onMounted(() => {
> .title { > .title {
position: absolute; position: absolute;
top: 24px; top: 24px;
left: 24px; inset-inline-start: 24px;
} }
} }

4
packages/client/src/components/MkLaunchPad.vue
View file

@ -170,13 +170,13 @@ function close() {
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 32px; top: 32px;
left: 32px; inset-inline-start: 32px;
color: var(--indicator); color: var(--indicator);
font-size: 8px; font-size: 8px;
@media (max-width: 500px) { @media (max-width: 500px) {
top: 16px; top: 16px;
left: 16px; inset-inline-start: 16px;
} }
} }

4
packages/client/src/components/MkMedia.vue
View file

@ -176,7 +176,7 @@ watch(
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
top: 12px; top: 12px;
right: 12px; inset-inline-end: 12px;
> * { > * {
background-color: var(--accentedBg); background-color: var(--accentedBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));
@ -209,7 +209,7 @@ watch(
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
left: 12px; inset-inline-start: 12px;
opacity: 0.5; opacity: 0.5;
padding: 0 6px; padding: 0 6px;
text-align: center; text-align: center;

4
packages/client/src/components/MkMediaCaption.vue
View file

@ -207,7 +207,7 @@ export default defineComponent({
flex-direction: row; flex-direction: row;
overflow: scroll; overflow: scroll;
position: fixed; position: fixed;
left: 0; inset-inline-start: 0;
top: 0; top: 0;
} }
@media (max-width: 850px) { @media (max-width: 850px) {
@ -245,7 +245,7 @@ export default defineComponent({
> .text-count { > .text-count {
opacity: 0.7; opacity: 0.7;
position: absolute; position: absolute;
right: 0; inset-inline-end: 0;
} }
} }

2
packages/client/src/components/MkMediaList.vue
View file

@ -285,7 +285,7 @@ const previewableCount = props.mediaList.filter((media) =>
position: absolute; position: absolute;
bottom: 30px; bottom: 30px;
left: 50%; inset-inline-start: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 75%; width: 75%;

6
packages/client/src/components/MkMenu.vue
View file

@ -368,8 +368,8 @@ onBeforeUnmount(() => {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
margin: auto; margin: auto;
width: calc(100% - 16px); width: calc(100% - 16px);
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
@ -500,7 +500,7 @@ onBeforeUnmount(() => {
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 13px; inset-inline-start: 13px;
color: var(--indicator); color: var(--indicator);
font-size: 12px; font-size: 12px;
} }

10
packages/client/src/components/MkModal.vue
View file

@ -523,8 +523,8 @@ defineExpose({
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
margin: auto; margin: auto;
padding: 32px; padding: 32px;
// TODO: mask-imageはiOSだとやたら重い。なんとかしたい // TODO: mask-imageはiOSだとやたら重い。なんとかしたい
@ -588,7 +588,7 @@ defineExpose({
&.drawer { &.drawer {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: clip; overflow: clip;
@ -596,8 +596,8 @@ defineExpose({
> .content { > .content {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
margin: auto; margin: auto;
> ::v-deep(*) { > ::v-deep(*) {

6
packages/client/src/components/MkNote.vue
View file

@ -624,8 +624,8 @@ defineExpose({
position: absolute; position: absolute;
z-index: 10; z-index: 10;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
width: calc(100% - 8px); width: calc(100% - 8px);
@ -815,7 +815,7 @@ defineExpose({
height: var(--avatarSize); height: var(--avatarSize);
position: relative; position: relative;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
} }
> .header { > .header {
width: 0; width: 0;

4
packages/client/src/components/MkNoteDetailed.vue
View file

@ -478,8 +478,8 @@ onUnmounted(() => {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
width: calc(100% - 8px); width: calc(100% - 8px);

4
packages/client/src/components/MkNoteSub.vue
View file

@ -682,7 +682,7 @@ function noteClick(e) {
> .line { > .line {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
} }
} }
@ -692,7 +692,7 @@ function noteClick(e) {
> .line { > .line {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
left: 0; inset-inline-start: 0;
top: 0; top: 0;
opacity: 0.25; opacity: 0.25;
&::after { &::after {

2
packages/client/src/components/MkNotification.vue
View file

@ -420,7 +420,7 @@ useTooltip(reactionRef, (showing) => {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: -2px; bottom: -2px;
right: -2px; inset-inline-end: -2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
box-sizing: border-box; box-sizing: border-box;

2
packages/client/src/components/MkNotificationToast.vue
View file

@ -52,7 +52,7 @@ onMounted(() => {
.mk-notification-toast { .mk-notification-toast {
position: fixed; position: fixed;
left: 0; inset-inline-start: 0;
width: 250px; width: 250px;
top: 32px; top: 32px;
padding: 0 32px; padding: 0 32px;

4
packages/client/src/components/MkPagePreview.vue
View file

@ -71,7 +71,7 @@ defineProps<{
} }
& + article { & + article {
left: 100px; inset-inline-start: 100px;
width: calc(100% - 100px); width: calc(100% - 100px);
} }
} }
@ -125,7 +125,7 @@ defineProps<{
height: 100px; height: 100px;
& + article { & + article {
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
} }
} }

2
packages/client/src/components/MkPoll.vue
View file

@ -166,7 +166,7 @@ const vote = async (id) => {
> .backdrop { > .backdrop {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
height: 100%; height: 100%;
background: var(--accent); background: var(--accent);
background: linear-gradient( background: linear-gradient(

2
packages/client/src/components/MkPostForm.vue
View file

@ -1059,7 +1059,7 @@ onMounted(() => {
> .right { > .right {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
> .text-count { > .text-count {
opacity: 0.7; opacity: 0.7;

4
packages/client/src/components/MkPostFormAttaches.vue
View file

@ -217,7 +217,7 @@ export default defineComponent({
width: 64px; width: 64px;
height: 64px; height: 64px;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 2; z-index: 2;
background: rgba(17, 17, 17, 0.7); background: rgba(17, 17, 17, 0.7);
color: #fff; color: #fff;
@ -233,7 +233,7 @@ export default defineComponent({
display: block; display: block;
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; inset-inline-end: 8px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }

2
packages/client/src/components/MkShowMoreButton.vue
View file

@ -39,7 +39,7 @@ defineExpose({
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
margin-bottom: -10px; margin-bottom: -10px;

2
packages/client/src/components/MkSparkle.vue
View file

@ -138,7 +138,7 @@ onUnmounted(() => {
> svg { > svg {
position: absolute; position: absolute;
top: -32px; top: -32px;
left: -32px; inset-inline-start: -32px;
pointer-events: none; pointer-events: none;
} }
} }

2
packages/client/src/components/MkTagCloud.vue
View file

@ -111,7 +111,7 @@ defineExpose({
> .tags { > .tags {
position: absolute; position: absolute;
top: 999px; top: 999px;
left: 999px; inset-inline-start: 999px;
} }
} }
</style> </style>

4
packages/client/src/components/MkToast.vue
View file

@ -55,8 +55,8 @@ onMounted(() => {
.mk-toast { .mk-toast {
> .body { > .body {
position: fixed; position: fixed;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
top: 0; top: 0;
margin: 0 auto; margin: 0 auto;
margin-top: 16px; margin-top: 16px;

4
packages/client/src/components/MkUserInfo.vue
View file

@ -78,7 +78,7 @@ defineProps<{
display: block; display: block;
position: absolute; position: absolute;
top: 62px; top: 62px;
left: 13px; inset-inline-start: 13px;
z-index: 2; z-index: 2;
width: 58px; width: 58px;
height: 58px; height: 58px;
@ -144,7 +144,7 @@ defineProps<{
> .koudoku-button { > .koudoku-button {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; inset-inline-end: 8px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }

6
packages/client/src/components/MkUserPreview.vue
View file

@ -205,7 +205,7 @@ onMounted(() => {
> .followed { > .followed {
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 12px; inset-inline-start: 12px;
padding: 4px 8px; padding: 4px 8px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
@ -244,7 +244,7 @@ onMounted(() => {
display: block; display: block;
position: absolute; position: absolute;
top: 70px; top: 70px;
left: 13px; inset-inline-start: 13px;
z-index: 2; z-index: 2;
width: 58px; width: 58px;
height: 58px; height: 58px;
@ -388,7 +388,7 @@ onMounted(() => {
> .follow-button-container { > .follow-button-container {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; inset-inline-end: 8px;
z-index: 3; z-index: 3;
color: white; color: white;
} }

4
packages/client/src/components/MkWidgets.vue
View file

@ -211,11 +211,11 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
} }
> .config { > .config {
right: 8px + 8px + 32px; inset-inline-end: 8px + 8px + 32px;
} }
> .remove { > .remove {
right: 8px; inset-inline-end: 8px;
} }
> .handle { > .handle {

18
packages/client/src/components/MkWindow.vue
View file

@ -526,7 +526,7 @@ defineExpose({
.ebkgocck { .ebkgocck {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
> .body { > .body {
overflow: clip; overflow: clip;
@ -611,7 +611,7 @@ defineExpose({
&.top { &.top {
top: -($size); top: -($size);
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: $size; height: $size;
cursor: ns-resize; cursor: ns-resize;
@ -619,7 +619,7 @@ defineExpose({
&.right { &.right {
top: 0; top: 0;
right: -($size); inset-inline-end: -($size);
width: $size; width: $size;
height: 100%; height: 100%;
cursor: ew-resize; cursor: ew-resize;
@ -627,7 +627,7 @@ defineExpose({
&.bottom { &.bottom {
bottom: -($size); bottom: -($size);
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: $size; height: $size;
cursor: ns-resize; cursor: ns-resize;
@ -635,7 +635,7 @@ defineExpose({
&.left { &.left {
top: 0; top: 0;
left: -($size); inset-inline-start: -($size);
width: $size; width: $size;
height: 100%; height: 100%;
cursor: ew-resize; cursor: ew-resize;
@ -643,7 +643,7 @@ defineExpose({
&.top-left { &.top-left {
top: -($size); top: -($size);
left: -($size); inset-inline-start: -($size);
width: $size * 2; width: $size * 2;
height: $size * 2; height: $size * 2;
cursor: nwse-resize; cursor: nwse-resize;
@ -651,7 +651,7 @@ defineExpose({
&.top-right { &.top-right {
top: -($size); top: -($size);
right: -($size); inset-inline-end: -($size);
width: $size * 2; width: $size * 2;
height: $size * 2; height: $size * 2;
cursor: nesw-resize; cursor: nesw-resize;
@ -659,7 +659,7 @@ defineExpose({
&.bottom-right { &.bottom-right {
bottom: -($size); bottom: -($size);
right: -($size); inset-inline-end: -($size);
width: $size * 2; width: $size * 2;
height: $size * 2; height: $size * 2;
cursor: nwse-resize; cursor: nwse-resize;
@ -667,7 +667,7 @@ defineExpose({
&.bottom-left { &.bottom-left {
bottom: -($size); bottom: -($size);
left: -($size); inset-inline-start: -($size);
width: $size * 2; width: $size * 2;
height: $size * 2; height: $size * 2;
cursor: nesw-resize; cursor: nesw-resize;

4
packages/client/src/components/form/input.vue
View file

@ -267,12 +267,12 @@ defineExpose({
} }
> .prefix { > .prefix {
left: 0; inset-inline-start: 0;
padding-inline-end: 6px; padding-inline-end: 6px;
} }
> .suffix { > .suffix {
right: 0; inset-inline-end: 0;
padding-inline-start: 6px; padding-inline-start: 6px;
} }

4
packages/client/src/components/form/radio.vue
View file

@ -112,9 +112,9 @@ function toggle(x) {
display: block; display: block;
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 3px; inset-inline-end: 3px;
bottom: 3px; bottom: 3px;
left: 3px; inset-inline-start: 3px;
border-radius: 100%; border-radius: 100%;
opacity: 0; opacity: 0;
transform: scale(0); transform: scale(0);

4
packages/client/src/components/form/select.vue
View file

@ -282,12 +282,12 @@ function show(ev: MouseEvent) {
} }
> .prefix { > .prefix {
left: 0; inset-inline-start: 0;
padding-inline-end: 6px; padding-inline-end: 6px;
} }
> .suffix { > .suffix {
right: 0; inset-inline-end: 0;
padding-inline-start: 6px; padding-inline-start: 6px;
} }

4
packages/client/src/components/form/switch.vue
View file

@ -73,7 +73,7 @@ function toggle(x) {
> .knob { > .knob {
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 3px; inset-inline-start: 3px;
width: 15px; width: 15px;
height: 15px; height: 15px;
background: var(--swutchOffFg); background: var(--swutchOffFg);
@ -126,7 +126,7 @@ function toggle(x) {
border-color: var(--swutchOnBg) !important; border-color: var(--swutchOnBg) !important;
> .knob { > .knob {
left: 12px; inset-inline-start: 12px;
background: var(--swutchOnFg); background: var(--swutchOnFg);
} }
} }

2
packages/client/src/components/global/MkAd.vue
View file

@ -157,7 +157,7 @@ function reduceFrequency(): void {
> .menu { > .menu {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 1px; inset-inline-end: 1px;
> .info-circle { > .info-circle {
border: 3px solid var(--panel); border: 3px solid var(--panel);

6
packages/client/src/components/global/MkAvatar.vue
View file

@ -135,8 +135,8 @@ watch(
> .inner { > .inner {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
top: 0; top: 0;
border-radius: 100%; border-radius: 100%;
z-index: 1; z-index: 1;
@ -150,7 +150,7 @@ watch(
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 18%; width: 18%;
height: 18%; height: 18%;
} }

2
packages/client/src/components/global/MkLoading.vue
View file

@ -114,7 +114,7 @@ const props = withDefaults(
.spinner { .spinner {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 999; z-index: 999;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);

2
packages/client/src/components/global/MkPageHeader.vue
View file

@ -562,7 +562,7 @@ onUnmounted(() => {
> .highlight { > .highlight {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
height: 3px; height: 3px;
background: var(--accent); background: var(--accent);
border-radius: 999px; border-radius: 999px;

2
packages/client/src/pages/about-calckey.vue
View file

@ -272,7 +272,7 @@ definePageMetadata({
> .emoji { > .emoji {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
visibility: hidden; visibility: hidden;
> .emoji { > .emoji {

4
packages/client/src/pages/admin/overview.federation.vue
View file

@ -140,7 +140,7 @@ onMounted(async () => {
> .title { > .title {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 20px; inset-inline-start: 20px;
font-size: 90%; font-size: 90%;
} }
@ -151,7 +151,7 @@ onMounted(async () => {
> .subTitle { > .subTitle {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
right: 20px; inset-inline-end: 20px;
font-size: 85%; font-size: 85%;
} }
} }

12
packages/client/src/pages/channel.vue
View file

@ -169,14 +169,14 @@ definePageMetadata(
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 16px; top: 16px;
left: 16px; inset-inline-start: 16px;
} }
> .toggle { > .toggle {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 8px; top: 8px;
right: 8px; inset-inline-end: 8px;
font-size: 1.2em; font-size: 1.2em;
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -198,7 +198,7 @@ definePageMetadata(
> .fade { > .fade {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--X15));
@ -208,7 +208,7 @@ definePageMetadata(
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 16px; bottom: 16px;
right: 16px; inset-inline-end: 16px;
padding: 8px 12px; padding: 8px 12px;
font-size: 80%; font-size: 80%;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
@ -225,7 +225,7 @@ definePageMetadata(
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-backdrop-filter: var(--blur, blur(16px)); -webkit-backdrop-filter: var(--blur, blur(16px));
@ -240,7 +240,7 @@ definePageMetadata(
> .toggle { > .toggle {
top: 0; top: 0;
right: 0; inset-inline-end: 0;
height: 100%; height: 100%;
background: transparent; background: transparent;
} }

2
packages/client/src/pages/follow-requests.vue
View file

@ -189,7 +189,7 @@ definePageMetadata(
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; inset-inline-end: 0;
margin: auto 0; margin: auto 0;
> button { > button {

4
packages/client/src/pages/gallery/edit.vue
View file

@ -179,7 +179,7 @@ definePageMetadata(
> .name { > .name {
position: absolute; position: absolute;
top: 8px; top: 8px;
left: 9px; inset-inline-start: 9px;
padding: 8px; padding: 8px;
background: var(--panel); background: var(--panel);
} }
@ -187,7 +187,7 @@ definePageMetadata(
> .remove { > .remove {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 9px; inset-inline-end: 9px;
padding: 8px; padding: 8px;
background: var(--panel); background: var(--panel);
} }

2
packages/client/src/pages/messaging/messaging-room.form.vue
View file

@ -358,7 +358,7 @@ defineExpose({
> .remove { > .remove {
display: none; display: none;
position: absolute; position: absolute;
right: -6px; inset-inline-end: -6px;
top: -6px; top: -6px;
margin: 0; margin: 0;
padding: 0; padding: 0;

10
packages/client/src/pages/messaging/messaging-room.message.vue
View file

@ -154,7 +154,7 @@ function del(): void {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: -4px; top: -4px;
right: -4px; inset-inline-end: -4px;
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
@ -269,7 +269,7 @@ function del(): void {
} }
&:not(.noText):before { &:not(.noText):before {
left: -14px; inset-inline-start: -14px;
border-top: solid 8px transparent; border-top: solid 8px transparent;
border-inline-end: solid 8px $color; border-inline-end: solid 8px $color;
border-bottom: solid 8px transparent; border-bottom: solid 8px transparent;
@ -292,7 +292,7 @@ function del(): void {
&.isMe { &.isMe {
flex-direction: row-reverse; flex-direction: row-reverse;
padding-inline-end: var(--margin); padding-inline-end: var(--margin);
right: var(--margin); // 削除時にposition: absoluteになったときに使う inset-inline-end: var(--margin); // 削除時にposition: absoluteになったときに使う
> .content { > .content {
padding-inline-end: 16px; padding-inline-end: 16px;
@ -313,8 +313,8 @@ function del(): void {
} }
&:not(.noText):before { &:not(.noText):before {
right: -14px; inset-inline-end: -14px;
left: auto; inset-inline-start: auto;
border-top: solid 8px transparent; border-top: solid 8px transparent;
border-inline-end: solid 8px transparent; border-inline-end: solid 8px transparent;
border-bottom: solid 8px transparent; border-bottom: solid 8px transparent;

2
packages/client/src/pages/my-antennas/index.vue
View file

@ -138,7 +138,7 @@ definePageMetadata({
.notify-icon { .notify-icon {
position: relative; position: relative;
top: -1em; top: -1em;
left: -0.5em; inset-inline-start: -0.5em;
&.ph-circle ph-fill { &.ph-circle ph-fill {
color: var(--indicator); color: var(--indicator);

2
packages/client/src/pages/page-editor/page-editor.container.vue
View file

@ -135,7 +135,7 @@ export default defineComponent({
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
> button { > button {
padding: 0; padding: 0;

2
packages/client/src/pages/page-editor/page-editor.vue
View file

@ -591,7 +591,7 @@ definePageMetadata(
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
> button { > button {
padding: 0; padding: 0;

2
packages/client/src/pages/page.vue
View file

@ -369,7 +369,7 @@ definePageMetadata(
width: fit-content; width: fit-content;
position: relative; position: relative;
top: -10px; top: -10px;
left: 1rem; inset-inline-start: 1rem;
> .menu { > .menu {
vertical-align: bottom; vertical-align: bottom;

2
packages/client/src/pages/settings/profile.vue
View file

@ -325,7 +325,7 @@ definePageMetadata({
> .bannerEdit { > .bannerEdit {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 16px; inset-inline-end: 16px;
} }
} }
</style> </style>

26
packages/client/src/pages/settings/theme.vue
View file

@ -307,7 +307,7 @@ definePageMetadata({
input { input {
position: absolute; position: absolute;
left: -99em; inset-inline-start: -99em;
} }
&:focus-within > .toggle { &:focus-within > .toggle {
@ -334,12 +334,12 @@ definePageMetadata({
} }
> .before { > .before {
left: -70px; inset-inline-start: -70px;
color: var(--accent); color: var(--accent);
} }
> .after { > .after {
right: -68px; inset-inline-end: -68px;
color: var(--fg); color: var(--fg);
} }
} }
@ -349,7 +349,7 @@ definePageMetadata({
position: relative; position: relative;
z-index: 1; z-index: 1;
top: 3px; top: 3px;
left: 3px; inset-inline-start: 3px;
width: 50px - 6; width: 50px - 6;
height: 50px - 6; height: 50px - 6;
background-color: #ffcf96; background-color: #ffcf96;
@ -368,21 +368,21 @@ definePageMetadata({
.crater--1 { .crater--1 {
top: 18px; top: 18px;
left: 10px; inset-inline-start: 10px;
width: 4px; width: 4px;
height: 4px; height: 4px;
} }
.crater--2 { .crater--2 {
top: 28px; top: 28px;
left: 22px; inset-inline-start: 22px;
width: 6px; width: 6px;
height: 6px; height: 6px;
} }
.crater--3 { .crater--3 {
top: 10px; top: 10px;
left: 25px; inset-inline-start: 25px;
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
@ -397,7 +397,7 @@ definePageMetadata({
.star--1 { .star--1 {
top: 10px; top: 10px;
left: 35px; inset-inline-start: 35px;
z-index: 0; z-index: 0;
width: 30px; width: 30px;
height: 3px; height: 3px;
@ -405,7 +405,7 @@ definePageMetadata({
.star--2 { .star--2 {
top: 18px; top: 18px;
left: 28px; inset-inline-start: 28px;
z-index: 1; z-index: 1;
width: 30px; width: 30px;
height: 3px; height: 3px;
@ -413,7 +413,7 @@ definePageMetadata({
.star--3 { .star--3 {
top: 27px; top: 27px;
left: 40px; inset-inline-start: 40px;
z-index: 0; z-index: 0;
width: 30px; width: 30px;
height: 3px; height: 3px;
@ -428,7 +428,7 @@ definePageMetadata({
.star--4 { .star--4 {
top: 16px; top: 16px;
left: 11px; inset-inline-start: 11px;
z-index: 0; z-index: 0;
width: 2px; width: 2px;
height: 2px; height: 2px;
@ -437,7 +437,7 @@ definePageMetadata({
.star--5 { .star--5 {
top: 32px; top: 32px;
left: 17px; inset-inline-start: 17px;
z-index: 0; z-index: 0;
width: 3px; width: 3px;
height: 3px; height: 3px;
@ -446,7 +446,7 @@ definePageMetadata({
.star--6 { .star--6 {
top: 36px; top: 36px;
left: 28px; inset-inline-start: 28px;
z-index: 0; z-index: 0;
width: 2px; width: 2px;
height: 2px; height: 2px;

4
packages/client/src/pages/theme-editor.vue
View file

@ -371,8 +371,8 @@ definePageMetadata({
> .preview { > .preview {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
width: 42px; width: 42px;

24
packages/client/src/pages/user/home.vue
View file

@ -532,7 +532,7 @@ onUnmounted(() => {
> .fade { > .fade {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 78px; height: 78px;
background: linear-gradient( background: linear-gradient(
@ -544,7 +544,7 @@ onUnmounted(() => {
> .followed { > .followed {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 120px; inset-inline-start: 120px;
padding: 4px 8px; padding: 4px 8px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
@ -555,7 +555,7 @@ onUnmounted(() => {
> .title { > .title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
padding: 0 0 8px 154px; padding: 0 0 8px 154px;
box-sizing: border-box; box-sizing: border-box;
@ -574,7 +574,7 @@ onUnmounted(() => {
> .followed { > .followed {
position: relative; position: relative;
top: -4px; top: -4px;
left: 4px; inset-inline-start: 4px;
padding: 4px 8px; padding: 4px 8px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
@ -609,7 +609,7 @@ onUnmounted(() => {
> .fade { > .fade {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 78px; height: 78px;
background: linear-gradient( background: linear-gradient(
@ -621,7 +621,7 @@ onUnmounted(() => {
> .actions { > .actions {
position: absolute; position: absolute;
top: 6px; top: 6px;
right: 12px; inset-inline-end: 12px;
padding: 8px; padding: 8px;
border-radius: 24px; border-radius: 24px;
display: flex; display: flex;
@ -632,7 +632,7 @@ onUnmounted(() => {
> .title { > .title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
padding: 0 0 8px 154px; padding: 0 0 8px 154px;
box-sizing: border-box; box-sizing: border-box;
@ -683,7 +683,7 @@ onUnmounted(() => {
> .followed { > .followed {
position: relative; position: relative;
top: -4px; top: -4px;
left: 4px; inset-inline-start: 4px;
padding: 4px 8px; padding: 4px 8px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
@ -695,7 +695,7 @@ onUnmounted(() => {
> .followedWindow { > .followedWindow {
position: relative; position: relative;
top: -25px; top: -25px;
left: 80px; inset-inline-start: 80px;
padding: 4px 8px; padding: 4px 8px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
@ -716,7 +716,7 @@ onUnmounted(() => {
display: block; display: block;
position: absolute; position: absolute;
top: 170px; top: 170px;
left: 16px; inset-inline-start: 16px;
z-index: 2; z-index: 2;
width: 120px; width: 120px;
height: 120px; height: 120px;
@ -837,8 +837,8 @@ onUnmounted(() => {
> .avatar { > .avatar {
top: 90px; top: 90px;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
width: 92px; width: 92px;
height: 92px; height: 92px;
margin: auto; margin: auto;

20
packages/client/src/pages/welcome.entrance.a.vue
View file

@ -201,7 +201,7 @@ function showMenu(ev) {
> .bg { > .bg {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
width: 80%; // 100%からshapeの幅を引いている width: 80%; // 100%からshapeの幅を引いている
height: 100%; height: 100%;
} }
@ -210,7 +210,7 @@ function showMenu(ev) {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 64px; inset-inline-end: 64px;
margin: auto; margin: auto;
width: 500px; width: 500px;
height: calc(100% - 128px); height: calc(100% - 128px);
@ -238,7 +238,7 @@ function showMenu(ev) {
> .shape1 { > .shape1 {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--accent); background: var(--accent);
@ -247,7 +247,7 @@ function showMenu(ev) {
> .shape2 { > .shape2 {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--accent); background: var(--accent);
@ -258,7 +258,7 @@ function showMenu(ev) {
> .misskey { > .misskey {
position: absolute; position: absolute;
top: 42px; top: 42px;
left: 42px; inset-inline-start: 42px;
width: 140px; width: 140px;
@media (max-width: 450px) { @media (max-width: 450px) {
@ -269,7 +269,7 @@ function showMenu(ev) {
> .emojis { > .emojis {
position: absolute; position: absolute;
bottom: 32px; bottom: 32px;
left: 115px; inset-inline-start: 115px;
transform: scale(1.5); transform: scale(1.5);
> * { > * {
@ -303,7 +303,7 @@ function showMenu(ev) {
> .menu { > .menu {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 16px; inset-inline-end: 16px;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 8px; border-radius: 8px;
@ -346,8 +346,8 @@ function showMenu(ev) {
> .federation { > .federation {
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
margin: auto; margin: auto;
background: var(--acrylicPanel); background: var(--acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));
@ -355,7 +355,7 @@ function showMenu(ev) {
border-radius: 999px; border-radius: 999px;
overflow: clip; overflow: clip;
width: 35%; width: 35%;
left: 50%; inset-inline-start: 50%;
padding: 8px 0; padding: 8px 0;
@media (max-width: 900px) { @media (max-width: 900px) {

8
packages/client/src/pages/welcome.entrance.b.vue
View file

@ -192,7 +192,7 @@ export default defineComponent({
> .bg { > .bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -201,7 +201,7 @@ export default defineComponent({
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 64px; inset-inline-end: 64px;
margin: auto; margin: auto;
width: 500px; width: 500px;
height: calc(100% - 128px); height: calc(100% - 128px);
@ -225,7 +225,7 @@ export default defineComponent({
> .shape { > .shape {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--accent); background: var(--accent);
@ -235,7 +235,7 @@ export default defineComponent({
> .misskey { > .misskey {
position: absolute; position: absolute;
bottom: 64px; bottom: 64px;
left: 64px; inset-inline-start: 64px;
width: 160px; width: 160px;
} }

12
packages/client/src/pages/welcome.entrance.c.vue
View file

@ -209,7 +209,7 @@ export default defineComponent({
> .bg { > .bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -217,7 +217,7 @@ export default defineComponent({
> .fade { > .fade {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
@ -226,7 +226,7 @@ export default defineComponent({
> .emojis { > .emojis {
position: absolute; position: absolute;
bottom: 32px; bottom: 32px;
left: 35px; inset-inline-start: 35px;
> * { > * {
margin-inline-end: 8px; margin-inline-end: 8px;
@ -258,7 +258,7 @@ export default defineComponent({
> .bg { > .bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 128px; height: 128px;
background-position: center; background-position: center;
@ -268,7 +268,7 @@ export default defineComponent({
> .fade { > .fade {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 128px; height: 128px;
background: linear-gradient( background: linear-gradient(
@ -333,7 +333,7 @@ export default defineComponent({
> .menu { > .menu {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 16px; inset-inline-end: 16px;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 8px; border-radius: 8px;

8
packages/client/src/style.scss
View file

@ -202,7 +202,7 @@ hr {
._modalBg { ._modalBg {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--modalBg); background: var(--modalBg);
@ -521,8 +521,8 @@ hr {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
left: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
background: var(--bg); background: var(--bg);
@ -638,7 +638,7 @@ hr {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
width: 0%; width: 0%;
border-bottom: 1px solid var(--link); border-bottom: 1px solid var(--link);
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;

4
packages/client/src/ui/_common_/common.vue
View file

@ -93,7 +93,7 @@ if ($i) {
position: fixed; position: fixed;
z-index: 4000000; z-index: 4000000;
top: 15px; top: 15px;
right: 15px; inset-inline-end: 15px;
&:before { &:before {
content: ""; content: "";
@ -112,7 +112,7 @@ if ($i) {
#devTicker { #devTicker {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 2147483647; z-index: 2147483647;
color: #f6c177; color: #f6c177;
background: #6e6a86; background: #6e6a86;

14
packages/client/src/ui/_common_/navbar-for-mobile.vue
View file

@ -189,7 +189,7 @@ function more() {
> .banner { > .banner {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: cover; background-size: cover;
@ -246,8 +246,8 @@ function more() {
margin: auto; margin: auto;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
border-radius: 999px; border-radius: 999px;
background: linear-gradient( background: linear-gradient(
@ -309,7 +309,7 @@ function more() {
width: 32px; width: 32px;
aspect-ratio: 1; aspect-ratio: 1;
transform: translateX(-100%); transform: translateX(-100%);
left: 50%; inset-inline-start: 50%;
} }
} }
} }
@ -344,7 +344,7 @@ function more() {
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 0; top: 0;
left: 20px; inset-inline-start: 20px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
} }
@ -377,8 +377,8 @@ function more() {
margin: auto; margin: auto;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
border-radius: 999px; border-radius: 999px;
background: var(--accentedBg); background: var(--accentedBg);

14
packages/client/src/ui/_common_/navbar.vue
View file

@ -293,8 +293,8 @@ function more(ev: MouseEvent) {
margin: auto; margin: auto;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
right: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
border-radius: 999px; border-radius: 999px;
background: var(--accentedBg); background: var(--accentedBg);
@ -311,7 +311,7 @@ function more(ev: MouseEvent) {
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 0; top: 0;
left: 20px; inset-inline-start: 20px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
} }
@ -379,7 +379,7 @@ function more(ev: MouseEvent) {
> .icon, > .icon,
> .text { > .text {
position: relative; position: relative;
left: 3rem; inset-inline-start: 3rem;
margin: 0; margin: 0;
width: auto; width: auto;
color: var(--fgOnAccent); color: var(--fgOnAccent);
@ -405,7 +405,7 @@ function more(ev: MouseEvent) {
> .banner { > .banner {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: cover; background-size: cover;
@ -558,7 +558,7 @@ function more(ev: MouseEvent) {
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 24px; inset-inline-start: 24px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
} }
@ -578,7 +578,7 @@ function more(ev: MouseEvent) {
aspect-ratio: 1/1; aspect-ratio: 1/1;
} }
> .icon { > .icon {
left: unset; inset-inline-start: unset;
} }
> .text { > .text {
display: none; display: none;

2
packages/client/src/ui/_common_/stream-indicator.vue
View file

@ -48,7 +48,7 @@ onUnmounted(() => {
position: fixed; position: fixed;
z-index: 16385; z-index: 16385;
bottom: 8px; bottom: 8px;
right: 8px; inset-inline-end: 8px;
margin: 0; margin: 0;
padding: 6px 12px; padding: 6px 12px;
font-size: 0.9em; font-size: 0.9em;

2
packages/client/src/ui/_common_/upload.vue
View file

@ -67,7 +67,7 @@ const zIndex = os.claimZIndex("high");
<style lang="scss" scoped> <style lang="scss" scoped>
.mk-uploader { .mk-uploader {
position: fixed; position: fixed;
right: 16px; inset-inline-end: 16px;
width: 260px; width: 260px;
top: 32px; top: 32px;
padding: 16px 20px; padding: 16px 20px;

6
packages/client/src/ui/deck.vue
View file

@ -529,7 +529,7 @@ async function deleteProfile() {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
padding: 16px; padding: 16px;
display: flex; display: flex;
width: 100%; width: 100%;
@ -564,7 +564,7 @@ async function deleteProfile() {
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
color: var(--indicator); color: var(--indicator);
font-size: 16px; font-size: 16px;
} }
@ -602,7 +602,7 @@ async function deleteProfile() {
> .menu { > .menu {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 1001; z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);

4
packages/client/src/ui/deck/column.vue
View file

@ -334,7 +334,7 @@ function onDrop(ev) {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--focus); background: var(--focus);
@ -348,7 +348,7 @@ function onDrop(ev) {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--focus); background: var(--focus);

16
packages/client/src/ui/universal.vue
View file

@ -554,7 +554,7 @@ console.log(mainRouter.currentRoute.value.name);
hsla(0, 0%, 0%, 0) 100% hsla(0, 0%, 0%, 0) 100%
) !important; ) !important;
width: 125% !important; width: 125% !important;
left: -12.5% !important; inset-inline-start: -12.5% !important;
height: 145% !important; height: 145% !important;
} }
} }
@ -613,7 +613,7 @@ console.log(mainRouter.currentRoute.value.name);
> .widgetsDrawer { > .widgetsDrawer {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; inset-inline-end: 0;
z-index: 1001; z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
@ -627,7 +627,7 @@ console.log(mainRouter.currentRoute.value.name);
> .postButton, > .postButton,
.widgetButton { .widgetButton {
bottom: var(--stickyBottom); bottom: var(--stickyBottom);
right: 1.5rem; inset-inline-end: 1.5rem;
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;
background-position: center; background-position: center;
@ -660,7 +660,7 @@ console.log(mainRouter.currentRoute.value.name);
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
bottom: 0; bottom: 0;
left: 0; inset-inline-start: 0;
padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px; padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px;
display: flex; display: flex;
width: 100%; width: 100%;
@ -699,7 +699,7 @@ console.log(mainRouter.currentRoute.value.name);
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
color: var(--indicator); color: var(--indicator);
font-size: 16px; font-size: 16px;
} }
@ -723,7 +723,7 @@ console.log(mainRouter.currentRoute.value.name);
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
color: var(--indicator); color: var(--indicator);
font-size: 16px; font-size: 16px;
} }
@ -761,7 +761,7 @@ console.log(mainRouter.currentRoute.value.name);
> .menuDrawer { > .menuDrawer {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 1001; z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
@ -779,6 +779,6 @@ console.log(mainRouter.currentRoute.value.name);
.statusbars { .statusbars {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
} }
</style> </style>

2
packages/client/src/ui/visitor/a.vue
View file

@ -278,7 +278,7 @@ export default defineComponent({
> .header { > .header {
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 1000; z-index: 1000;
} }

6
packages/client/src/ui/visitor/b.vue
View file

@ -210,7 +210,7 @@ defineExpose({
> .kanban { > .kanban {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 500px; width: 500px;
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
@ -247,7 +247,7 @@ defineExpose({
position: fixed; position: fixed;
z-index: 1001; z-index: 1001;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
@ -256,7 +256,7 @@ defineExpose({
position: fixed; position: fixed;
z-index: 1001; z-index: 1001;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 240px; width: 240px;
height: 100vh; height: 100vh;
background: var(--panel); background: var(--panel);

2
packages/client/src/ui/visitor/header.vue
View file

@ -169,7 +169,7 @@ export default defineComponent({
$height: 60px; $height: 60px;
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
z-index: 1000; z-index: 1000;
line-height: $height; line-height: $height;
-webkit-backdrop-filter: var(--blur, blur(32px)); -webkit-backdrop-filter: var(--blur, blur(32px));

2
packages/client/src/ui/visitor/kanban.vue
View file

@ -172,7 +172,7 @@ export default defineComponent({
> .back { > .back {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);

8
packages/client/src/widgets/clock.vue
View file

@ -250,22 +250,22 @@ defineExpose<WidgetComponentExpose>({
&.a { &.a {
top: 14px; top: 14px;
left: 14px; inset-inline-start: 14px;
} }
&.b { &.b {
top: 14px; top: 14px;
right: 14px; inset-inline-end: 14px;
} }
&.c { &.c {
bottom: 14px; bottom: 14px;
left: 14px; inset-inline-start: 14px;
} }
&.d { &.d {
bottom: 14px; bottom: 14px;
right: 14px; inset-inline-end: 14px;
} }
} }

2
packages/client/src/widgets/memo.vue
View file

@ -118,7 +118,7 @@ defineExpose<WidgetComponentExpose>({
display: block; display: block;
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 8px; inset-inline-end: 8px;
margin: 0; margin: 0;
padding: 0 10px; padding: 0 10px;
height: 28px; height: 28px;

2
packages/client/src/widgets/slideshow.vue
View file

@ -157,7 +157,7 @@ defineExpose<WidgetComponentExpose>({
> .slide { > .slide {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: cover; background-size: cover;