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;
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%;

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

@ -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;

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

@ -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;
}

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

@ -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));

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

@ -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));

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

@ -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));

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

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

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

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

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

@ -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;

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

@ -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;
}

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

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

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

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

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

@ -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;

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

@ -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;

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

@ -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;
}

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

@ -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);

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

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

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

@ -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;
}
}

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

@ -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;

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

@ -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;
}
}

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

@ -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%;

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

@ -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;
}

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

@ -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(*) {

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

@ -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;

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

@ -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);

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

@ -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 {

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

@ -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;

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

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

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

@ -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%;
}
}

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

@ -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(

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

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

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

@ -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;
}

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

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

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

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

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

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

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

@ -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;

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

@ -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;
}
}

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

@ -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;
}

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

@ -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 {

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

@ -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;

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

@ -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;
}

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

@ -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);

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

@ -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;
}

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

@ -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);
}
}

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

@ -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);

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

@ -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%;
}

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

@ -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);

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

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

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

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

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

@ -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%;
}
}

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

@ -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;
}

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

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

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

@ -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);
}

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

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

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

@ -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;

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

@ -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);

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

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

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

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

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

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

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

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

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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) {

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

@ -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;
}

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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);

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

@ -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;

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

@ -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;

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

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

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

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

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

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

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

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

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

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

@ -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);

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

@ -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));

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

@ -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);

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

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

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

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

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

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