mirror of
https://example.com
synced 2024-11-22 12:06:39 +09:00
feat: RTL Layout Support
This commit is contained in:
freeplay
parent
558b3c5f3c
commit
8b6f88f7aa
GPG key ID:
712D413B3A9FED5C
177 changed files with 642 additions and 609 deletions
|
|
@ -38,6 +38,8 @@
|
|||
|
||||
## 細かい変更点
|
||||
|
||||
- マージされていない本家版へのプルリクエストを独断でマージ
|
||||
- RTL Layout Support ([!10452](https://git.joinfirefish.org/firefish/firefish/-/merge_requests/10452))
|
||||
- `emojis` の API エンドポイント（Misskey v13- 互換）を追加（[firefish-mkdir](https://git.mkdir.uk/hiira/firefish-mkdir) から取り込み）
|
||||
- Docker のベースイメージに Node v21 を使用
|
||||
- HTML のコードに入るコメントアートを削除
|
||||
|
|
|
|||
|
|
@ -83,8 +83,8 @@ button {
|
|||
color: rgb(156, 207, 216);
|
||||
font-size: 16px;
|
||||
padding: 0 20px;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
margin-inline-end: 5px;
|
||||
margin-inline-start: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background: #555;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ main {
|
|||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
#form {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ html {
|
|||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
cursor: wait;
|
||||
|
|
@ -25,9 +25,9 @@ html {
|
|||
#splashIcon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
margin: auto;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
|
@ -37,9 +37,9 @@ html {
|
|||
#splashSpinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
|
|
@ -51,7 +51,7 @@ html {
|
|||
#splashSpinner > .spinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
fill-rule: evenodd;
|
||||
|
|
@ -113,9 +113,9 @@ html {
|
|||
#splashText {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export async function sendEmail(
|
|||
<body style="background: #191724; padding: 16px; margin: 0; font-family: sans-serif; font-size: 14px;">
|
||||
<main style="max-width: 500px; margin: 0 auto; background: #1f1d2e; color: #e0def4; border-radius: 20px;">
|
||||
<header style="padding: 32px; background: #31748f; color: #e0def4; display: flex; border-radius: 20px;">
|
||||
<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-right: 16px;"/>
|
||||
<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-inline-end: 16px;"/>
|
||||
<h1 style="margin: 0 0 1em 0;">${meta.name}</h1>
|
||||
</header>
|
||||
<article style="padding: 32px;">
|
||||
|
|
|
|||
|
|
@ -100,9 +100,9 @@ function resolve() {
|
|||
> .target {
|
||||
width: 35%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
padding: 24px;
|
||||
border-right: solid 1px var(--divider);
|
||||
border-inline-end: solid 1px var(--divider);
|
||||
|
||||
> .info {
|
||||
display: flex;
|
||||
|
|
@ -129,7 +129,7 @@ function resolve() {
|
|||
}
|
||||
|
||||
> .names {
|
||||
margin-left: 0.3em;
|
||||
margin-inline-start: 0.3em;
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<template #header>
|
||||
<i
|
||||
:class="icon('ph-warning-circle')"
|
||||
style="margin-right: 0.5em"
|
||||
style="margin-inline-end: 0.5em"
|
||||
></i>
|
||||
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
|
||||
<template #name>
|
||||
|
|
|
|||
|
|
@ -128,8 +128,8 @@ function onMousedown(evt: MouseEvent): void {
|
|||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.1s ease;
|
||||
margin-right: 0.2rem;
|
||||
margin-left: 0.2rem;
|
||||
margin-inline-end: 0.2rem;
|
||||
margin-inline-start: 0.2rem;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--buttonHoverBg);
|
||||
|
|
@ -227,7 +227,7 @@ function onMousedown(evt: MouseEvent): void {
|
|||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
|
|
|
|||
|
|
@ -93,9 +93,9 @@ async function onClick() {
|
|||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
inset-inline-end: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
inset-inline-start: -5px;
|
||||
border: 2px solid var(--focus);
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@ async function onClick() {
|
|||
}
|
||||
|
||||
> span {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<I18n
|
||||
:src="i18n.ts._channel.usersCount"
|
||||
tag="span"
|
||||
style="margin-left: 4px"
|
||||
style="margin-inline-start: 4px"
|
||||
>
|
||||
<template #n>
|
||||
<b>{{ channel.usersCount }}</b>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<I18n
|
||||
:src="i18n.ts._channel.notesCount"
|
||||
tag="span"
|
||||
style="margin-left: 4px"
|
||||
style="margin-inline-start: 4px"
|
||||
>
|
||||
<template #n>
|
||||
<b>{{ channel.notesCount }}</b>
|
||||
|
|
@ -88,7 +88,7 @@ const bannerStyle = computed(() => {
|
|||
> .fade {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), var(--X15));
|
||||
|
|
@ -97,7 +97,7 @@ const bannerStyle = computed(() => {
|
|||
> .name {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
inset-inline-start: 16px;
|
||||
padding: 12px 16px;
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
|
|
@ -111,7 +111,7 @@ const bannerStyle = computed(() => {
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
inset-inline-end: 16px;
|
||||
padding: 8px 12px;
|
||||
font-size: 80%;
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
|
|
|
|||
|
|
@ -459,7 +459,7 @@ onMounted(() => {
|
|||
> .fetching {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backdrop-filter: var(--blur, blur(12px));
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const emit = defineEmits<{
|
|||
height: 8px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ export default defineComponent({
|
|||
> header {
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
color: var(--panelHeaderFg);
|
||||
background: var(--panelHeaderBg);
|
||||
border-bottom: solid 0.5px var(--panelHeaderDivider);
|
||||
|
|
@ -229,7 +229,7 @@ export default defineComponent({
|
|||
padding: 12px 16px;
|
||||
|
||||
> ::v-deep(i) {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
transform: translateY(0.1em);
|
||||
}
|
||||
|
||||
|
|
@ -242,7 +242,7 @@ export default defineComponent({
|
|||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
height: 100%;
|
||||
|
||||
> ::v-deep(button) {
|
||||
|
|
@ -265,7 +265,7 @@ export default defineComponent({
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), var(--X15));
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ onMounted(() => {
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -84,9 +84,9 @@ defineExpose({
|
|||
|
||||
&.fade {
|
||||
display: block;
|
||||
position: absolute;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
> span {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -176,18 +176,18 @@ export default defineComponent({
|
|||
|
||||
> span {
|
||||
&:first-child {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
|
||||
> .icon {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
|
||||
> .icon {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -308,7 +308,7 @@ async function deleteFile() {
|
|||
> .label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&:before,
|
||||
|
|
@ -322,14 +322,14 @@ async function deleteFile() {
|
|||
|
||||
&:before {
|
||||
top: 0;
|
||||
left: 57px;
|
||||
inset-inline-start: 57px;
|
||||
width: 28px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 57px;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 8px;
|
||||
height: 28px;
|
||||
}
|
||||
|
|
@ -345,14 +345,14 @@ async function deleteFile() {
|
|||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
> p {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 19px;
|
||||
left: -28px;
|
||||
inset-inline-start: -28px;
|
||||
width: 120px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -302,7 +302,7 @@ function onContextmenu(ev: MouseEvent) {
|
|||
> .checkbox {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #fff;
|
||||
|
|
@ -319,9 +319,9 @@ function onContextmenu(ev: MouseEvent) {
|
|||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
inset-inline-end: -4px;
|
||||
bottom: -4px;
|
||||
left: -4px;
|
||||
inset-inline-start: -4px;
|
||||
border: 2px dashed var(--focus);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -333,9 +333,9 @@ function onContextmenu(ev: MouseEvent) {
|
|||
color: var(--desktopDriveFolderFg);
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
margin-left: 2px;
|
||||
text-align: left;
|
||||
margin-inline-end: 4px;
|
||||
margin-inline-start: 2px;
|
||||
text-align: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ function onDrop(ev: DragEvent) {
|
|||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -848,7 +848,7 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> .menu {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -916,7 +916,7 @@ onBeforeUnmount(() => {
|
|||
|
||||
> .dropzone {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 38px;
|
||||
width: 100%;
|
||||
height: calc(100% - 38px);
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const isThumbnailAvailable = computed(() => {
|
|||
width: 30%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
right: 4%;
|
||||
inset-inline-end: 4%;
|
||||
bottom: 4%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}}
|
||||
<span
|
||||
v-if="selected.length > 0"
|
||||
style="margin-left: 8px; opacity: 0.5"
|
||||
style="margin-inline-start: 8px; opacity: 0.5"
|
||||
>({{ number(selected.length) }})</span
|
||||
>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -634,7 +634,7 @@ defineExpose({
|
|||
> header {
|
||||
/*position: sticky;
|
||||
top: 0;
|
||||
left: 0;*/
|
||||
inset-inline-start: 0;*/
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
z-index: 2;
|
||||
|
|
@ -647,7 +647,7 @@ defineExpose({
|
|||
> header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,9 @@
|
|||
<div v-else>{{ i18n.ts.system }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span style="margin-right: 1em">{{ file.type }}</span>
|
||||
<span style="margin-inline-end: 1em">{{
|
||||
file.type
|
||||
}}</span>
|
||||
<span>{{ bytes(file.size) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -82,7 +84,7 @@ const props = defineProps<{
|
|||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -95,7 +97,7 @@ const props = defineProps<{
|
|||
}
|
||||
|
||||
> .body {
|
||||
margin-left: 0.3em;
|
||||
margin-inline-start: 0.3em;
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
|
||||
|
|
@ -125,7 +127,7 @@ const props = defineProps<{
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
inset-inline-start: 8px;
|
||||
padding: 2px 4px;
|
||||
background: #ff0000bf;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ export default defineComponent({
|
|||
padding: 12px 16px 12px 0;
|
||||
|
||||
> i {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
|
|
|||
|
|
@ -235,9 +235,9 @@ onBeforeUnmount(() => {
|
|||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
inset-inline-end: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
inset-inline-start: -5px;
|
||||
border: 2px solid var(--focus);
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
|
@ -272,7 +272,7 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> span {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ const props = defineProps<{
|
|||
display: flex;
|
||||
|
||||
> .avatar {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@ const props = defineProps<{
|
|||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const search = () => {
|
|||
margin: 0;
|
||||
padding: 0 16px;
|
||||
border: solid 1px var(--divider);
|
||||
border-left: none;
|
||||
border-inline-start: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
&:active {
|
||||
|
|
|
|||
|
|
@ -84,9 +84,9 @@ const modal = ref<InstanceType<typeof MkModal>>();
|
|||
opacity: 0.8;
|
||||
|
||||
> span + span {
|
||||
margin-left: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
border-left: solid 1px rgba(255, 255, 255, 0.5);
|
||||
margin-inline-start: 0.5em;
|
||||
padding-inline-start: 0.5em;
|
||||
border-inline-start: solid 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,10 +80,10 @@ function close() {
|
|||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
> .close {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ function getInstanceIcon(instance): string {
|
|||
height: ($bodyTitleHieght + $bodyInfoHieght);
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
> :global(.body) {
|
||||
|
|
@ -67,7 +67,7 @@ function getInstanceIcon(instance): string {
|
|||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
color: var(--fg);
|
||||
padding-right: 8px;
|
||||
padding-inline-end: 8px;
|
||||
|
||||
> :global(.host) {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ const cancel = () => {
|
|||
> .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@ onMounted(() => {
|
|||
> .title {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
inset-inline-start: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ function getInstanceIcon(instance): string {
|
|||
|
||||
> .name {
|
||||
display: none;
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
font-size: 0.85em;
|
||||
vertical-align: top;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
v-if="copy"
|
||||
v-tooltip="i18n.ts.copy"
|
||||
class="_textButton"
|
||||
style="margin-left: 0.5em"
|
||||
style="margin-inline-start: 0.5em"
|
||||
@click="copy_"
|
||||
>
|
||||
<i :class="icon('ph-clipboard-text', false)"></i>
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ function close() {
|
|||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
border-radius: 16px;
|
||||
|
||||
&.asDrawer {
|
||||
|
|
@ -169,13 +169,13 @@ function close() {
|
|||
> .indicator {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 32px;
|
||||
inset-inline-start: 32px;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
inset-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ useTooltip(el, (showing) => {
|
|||
word-break: break-all;
|
||||
|
||||
> .icon {
|
||||
padding-left: 2px;
|
||||
padding-inline-start: 2px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@ watch(
|
|||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
inset-inline-end: 12px;
|
||||
> * {
|
||||
background-color: var(--accentedBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
|
|
@ -241,7 +241,7 @@ watch(
|
|||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
left: 12px;
|
||||
inset-inline-start: 12px;
|
||||
opacity: 0.5;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
margin-inline-end: 0.2em;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ export default defineComponent({
|
|||
flex-direction: row;
|
||||
overflow: scroll;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
|
|
@ -245,7 +245,7 @@ export default defineComponent({
|
|||
> .text-count {
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -318,9 +318,9 @@ export default defineComponent({
|
|||
opacity: 0.8;
|
||||
|
||||
> span + span {
|
||||
margin-left: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
border-left: solid 1px rgba(255, 255, 255, 0.5);
|
||||
margin-inline-start: 0.5em;
|
||||
padding-inline-start: 0.5em;
|
||||
border-inline-start: solid 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -312,7 +312,7 @@ const previewableCount = props.mediaList.filter((media) =>
|
|||
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: 75%;
|
||||
|
|
|
|||
|
|
@ -359,7 +359,7 @@ onBeforeUnmount(() => {
|
|||
white-space: nowrap;
|
||||
font-size: 0.9em;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
|
|
@ -367,8 +367,8 @@ onBeforeUnmount(() => {
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - 16px);
|
||||
margin-bottom: 0.2rem;
|
||||
|
|
@ -472,7 +472,7 @@ onBeforeUnmount(() => {
|
|||
cursor: default;
|
||||
|
||||
> .caret {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
&.childShowing {
|
||||
|
|
@ -486,12 +486,12 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> i {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
@ -499,7 +499,7 @@ onBeforeUnmount(() => {
|
|||
> .indicator {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 13px;
|
||||
inset-inline-start: 13px;
|
||||
color: var(--indicator);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -531,7 +531,7 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
> i {
|
||||
margin-right: 14px;
|
||||
margin-inline-end: 14px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -539,8 +539,8 @@ defineExpose({
|
|||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: auto;
|
||||
padding: 32px;
|
||||
// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
|
||||
|
|
@ -604,7 +604,7 @@ defineExpose({
|
|||
&.drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: clip;
|
||||
|
|
@ -612,8 +612,8 @@ defineExpose({
|
|||
> .content {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: auto;
|
||||
|
||||
> ::v-deep(*) {
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ function onContextmenu(ev: MouseEvent) {
|
|||
@media (max-width: 500px) {
|
||||
height: $height-narrow;
|
||||
line-height: $height-narrow;
|
||||
padding-left: 16px;
|
||||
padding-inline-start: 16px;
|
||||
|
||||
> button {
|
||||
height: $height-narrow;
|
||||
|
|
@ -208,7 +208,7 @@ function onContextmenu(ev: MouseEvent) {
|
|||
flex: 1;
|
||||
|
||||
> .icon {
|
||||
margin-right: 0.5em;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ defineExpose({
|
|||
> .title {
|
||||
flex: 1;
|
||||
line-height: $height;
|
||||
padding-left: 32px;
|
||||
padding-inline-start: 32px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -157,12 +157,12 @@ defineExpose({
|
|||
|
||||
@media (max-width: 500px) {
|
||||
line-height: $height-narrow;
|
||||
padding-left: 16px;
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> button + .title {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div class="msjugskd _block">
|
||||
<i :class="icon('ph-airplane-takeoff')" style="margin-right: 8px" />
|
||||
<i
|
||||
:class="icon('ph-airplane-takeoff')"
|
||||
style="margin-inline-end: 8px"
|
||||
/>
|
||||
{{ i18n.ts.accountMoved }}
|
||||
<MkMention class="link" :username="acct" :host="host" />
|
||||
</div>
|
||||
|
|
@ -26,7 +29,7 @@ defineProps<{
|
|||
border-radius: var(--radius);
|
||||
|
||||
> .link {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -693,8 +693,8 @@ defineExpose({
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - 8px);
|
||||
|
|
@ -721,8 +721,8 @@ defineExpose({
|
|||
display: block;
|
||||
margin-bottom: -4px;
|
||||
margin-top: 16px;
|
||||
border-left: 2px solid currentColor;
|
||||
margin-left: calc((var(--avatarSize) / 2) - 1px);
|
||||
border-inline-start: 2px solid currentColor;
|
||||
margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
|
@ -747,14 +747,14 @@ defineExpose({
|
|||
z-index: 2;
|
||||
width: 0;
|
||||
display: flex;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-top: 0;
|
||||
flex-grow: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> div > i {
|
||||
margin-left: -0.5px;
|
||||
margin-inline-start: -0.5px;
|
||||
}
|
||||
> .info {
|
||||
display: flex;
|
||||
|
|
@ -764,11 +764,11 @@ defineExpose({
|
|||
color: #f6c177;
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
> .hide {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -781,7 +781,7 @@ defineExpose({
|
|||
cursor: pointer;
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
> span {
|
||||
|
|
@ -796,7 +796,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .info {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
|
||||
|
|
@ -806,7 +806,7 @@ defineExpose({
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
> .dropdownIcon {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -818,9 +818,9 @@ defineExpose({
|
|||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 2px solid currentColor;
|
||||
border-inline-start: 2px solid currentColor;
|
||||
border-top: 2px solid currentColor;
|
||||
margin-left: calc(var(--avatarSize) / 2 - 1px);
|
||||
margin-inline-start: calc(var(--avatarSize) / 2 - 1px);
|
||||
width: calc(var(--avatarSize) / 2 + 14px);
|
||||
border-top-left-radius: calc(var(--avatarSize) / 4);
|
||||
top: calc(50% - 1px);
|
||||
|
|
@ -836,7 +836,7 @@ defineExpose({
|
|||
height: 1.2em;
|
||||
border-radius: 2em;
|
||||
overflow: hidden;
|
||||
margin-right: 0.4em;
|
||||
margin-inline-end: 0.4em;
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
.username {
|
||||
|
|
@ -884,7 +884,7 @@ defineExpose({
|
|||
height: var(--avatarSize);
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
> .header {
|
||||
width: 0;
|
||||
|
|
@ -956,7 +956,7 @@ defineExpose({
|
|||
transition: background 0.2s;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: -0.5em;
|
||||
margin-inline-start: -0.5em;
|
||||
&::before {
|
||||
border-radius: 100px 0 0 100px;
|
||||
}
|
||||
|
|
@ -1003,7 +1003,7 @@ defineExpose({
|
|||
margin-top: 0px;
|
||||
}
|
||||
> .line {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
&::before {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
|
@ -1016,7 +1016,7 @@ defineExpose({
|
|||
padding-top: 104px;
|
||||
}
|
||||
> .main > .header-container > .avatar {
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
// top: calc(14px + var(--stickyTop, 0px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -500,8 +500,8 @@ onUnmounted(() => {
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: calc(100% - 8px);
|
||||
|
|
@ -539,7 +539,7 @@ onUnmounted(() => {
|
|||
|
||||
> :deep(.chips) {
|
||||
padding-block: 6px 12px;
|
||||
padding-left: 32px;
|
||||
padding-inline-start: 32px;
|
||||
&:last-child {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
|
@ -651,7 +651,7 @@ onUnmounted(() => {
|
|||
padding: 12px 0 0 0;
|
||||
font-size: 1.05rem;
|
||||
> .header > .body {
|
||||
padding-left: 10px;
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
}
|
||||
> .clips,
|
||||
|
|
@ -660,7 +660,7 @@ onUnmounted(() => {
|
|||
padding-inline: 16px !important;
|
||||
}
|
||||
> :deep(.underline) {
|
||||
padding-left: 16px !important;
|
||||
padding-inline-start: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
})
|
||||
"
|
||||
:class="icon('ph-pencil', false)"
|
||||
style="margin-left: 0.4rem"
|
||||
style="margin-inline-start: 0.4rem"
|
||||
></i>
|
||||
</MkA>
|
||||
<MkVisibility :note="note" />
|
||||
|
|
@ -97,7 +97,7 @@ function openServerInfo() {
|
|||
> .avatar {
|
||||
width: 3.7em;
|
||||
height: 3.7em;
|
||||
margin-right: 1em;
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
> .user-info {
|
||||
width: 0;
|
||||
|
|
@ -166,7 +166,7 @@ function openServerInfo() {
|
|||
.info {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
margin-left: 0.5em;
|
||||
margin-inline-start: 0.5em;
|
||||
font-size: 0.9em;
|
||||
.created-at {
|
||||
max-width: 100%;
|
||||
|
|
@ -177,7 +177,7 @@ function openServerInfo() {
|
|||
|
||||
.ticker {
|
||||
display: inline-flex;
|
||||
margin-left: 0.5em;
|
||||
margin-inline-start: 0.5em;
|
||||
vertical-align: middle;
|
||||
> .name {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ defineProps<{
|
|||
overflow-wrap: break-word;
|
||||
|
||||
> .text {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -483,7 +483,7 @@ function noteClick(e) {
|
|||
outline: none;
|
||||
&.children {
|
||||
padding: 10px 0 0 var(--indent);
|
||||
padding-left: var(--indent) !important;
|
||||
padding-inline-start: var(--indent) !important;
|
||||
font-size: 1em;
|
||||
cursor: auto;
|
||||
|
||||
|
|
@ -496,7 +496,7 @@ function noteClick(e) {
|
|||
display: flex;
|
||||
|
||||
> .avatar-container {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
z-index: 2;
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -561,7 +561,7 @@ function noteClick(e) {
|
|||
transition: background 0.2s;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-left: -0.5em;
|
||||
margin-inline-start: -0.5em;
|
||||
&::before {
|
||||
border-radius: 100px 0 0 100px;
|
||||
}
|
||||
|
|
@ -607,19 +607,19 @@ function noteClick(e) {
|
|||
&.reply,
|
||||
&.reply-to {
|
||||
> .main > .body {
|
||||
margin-right: -24px;
|
||||
padding-right: 24px;
|
||||
margin-inline-end: -24px;
|
||||
padding-inline-end: 24px;
|
||||
margin-top: -12px;
|
||||
padding-top: 12px;
|
||||
margin-left: calc(0px - var(--avatarSize) - 32px);
|
||||
padding-left: calc(var(--avatarSize) + 32px);
|
||||
margin-inline-start: calc(0px - var(--avatarSize) - 32px);
|
||||
padding-inline-start: calc(var(--avatarSize) + 32px);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
&.reply-to {
|
||||
> .main > .body {
|
||||
margin-left: calc(0px - var(--avatarSize) - 38px);
|
||||
padding-left: calc(var(--avatarSize) + 38px);
|
||||
margin-inline-start: calc(0px - var(--avatarSize) - 38px);
|
||||
padding-inline-start: calc(var(--avatarSize) + 38px);
|
||||
margin-top: -16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
|
@ -627,7 +627,7 @@ function noteClick(e) {
|
|||
&.reply {
|
||||
--avatarSize: 38px;
|
||||
.avatar-container {
|
||||
margin-right: 8px !important;
|
||||
margin-inline-end: 8px !important;
|
||||
}
|
||||
}
|
||||
> .reply,
|
||||
|
|
@ -651,7 +651,7 @@ function noteClick(e) {
|
|||
flex-grow: 0 !important;
|
||||
margin-top: -10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
margin-inline-end: 10px !important;
|
||||
&::before {
|
||||
border-left-style: dashed !important;
|
||||
border-bottom-left-radius: 100px !important;
|
||||
|
|
@ -706,7 +706,7 @@ function noteClick(e) {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
margin-inline-end: 14px;
|
||||
width: var(--avatarSize);
|
||||
> .avatar {
|
||||
width: var(--avatarSize);
|
||||
|
|
@ -727,8 +727,8 @@ function noteClick(e) {
|
|||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 2px solid currentColor;
|
||||
margin-left: calc((var(--avatarSize) / 2) - 1px);
|
||||
border-inline-start: 2px solid currentColor;
|
||||
margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
|
||||
width: calc(var(--indent) / 2);
|
||||
inset-block: 0;
|
||||
min-height: 8px;
|
||||
|
|
@ -753,7 +753,7 @@ function noteClick(e) {
|
|||
> .line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -763,15 +763,15 @@ function noteClick(e) {
|
|||
> .line {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
opacity: 0.25;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 2px solid currentColor;
|
||||
border-inline-start: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
margin-left: calc((var(--avatarSize) / 2) - 1px);
|
||||
margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
|
||||
width: calc(var(--indent) / 2);
|
||||
height: calc((var(--avatarSize) / 2));
|
||||
border-bottom-left-radius: calc(var(--indent) / 2);
|
||||
|
|
@ -794,7 +794,7 @@ function noteClick(e) {
|
|||
// border-top: 1px solid var(--X13);
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// margin-left: calc(var(--avatarSize) + 12px);
|
||||
// margin-inline-start: calc(var(--avatarSize) + 12px);
|
||||
// inset-inline: 0;
|
||||
// }
|
||||
}
|
||||
|
|
@ -822,7 +822,7 @@ function noteClick(e) {
|
|||
--indent: 35px;
|
||||
}
|
||||
> .children:not(.single) {
|
||||
padding-left: 28px !important;
|
||||
padding-inline-start: 28px !important;
|
||||
}
|
||||
}
|
||||
&.reply-to {
|
||||
|
|
@ -833,7 +833,7 @@ function noteClick(e) {
|
|||
margin-bottom: 0 !important;
|
||||
}
|
||||
> .main > .avatar-container {
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
&:first-child > .main > .body {
|
||||
margin-top: -20px;
|
||||
|
|
|
|||
|
|
@ -399,7 +399,7 @@ useTooltip(reactionRef, (showing) => {
|
|||
flex-shrink: 0;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
|
||||
> .icon {
|
||||
display: block;
|
||||
|
|
@ -412,7 +412,7 @@ useTooltip(reactionRef, (showing) => {
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
inset-inline-end: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -496,7 +496,7 @@ useTooltip(reactionRef, (showing) => {
|
|||
}
|
||||
|
||||
> .time {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
|
@ -520,11 +520,11 @@ useTooltip(reactionRef, (showing) => {
|
|||
}
|
||||
|
||||
> i:first-child {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
> i:last-child {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ onMounted(() => {
|
|||
|
||||
.mk-notification-toast {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 250px;
|
||||
top: 32px;
|
||||
padding: 0 32px;
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ export default defineComponent({
|
|||
|
||||
> .element {
|
||||
display: block;
|
||||
padding-left: 16px;
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ export default defineComponent({
|
|||
|
||||
> .kv {
|
||||
display: block;
|
||||
padding-left: 16px;
|
||||
padding-inline-start: 16px;
|
||||
|
||||
> .toggle {
|
||||
width: 16px;
|
||||
|
|
@ -178,7 +178,7 @@ export default defineComponent({
|
|||
|
||||
> .k {
|
||||
display: inline;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
> .v {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ defineProps<{
|
|||
}
|
||||
|
||||
& + article {
|
||||
left: 100px;
|
||||
inset-inline-start: 100px;
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
|
|
@ -103,7 +103,7 @@ defineProps<{
|
|||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +125,7 @@ defineProps<{
|
|||
height: 100px;
|
||||
|
||||
& + article {
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
v-if="pageMetadata.value.icon"
|
||||
class="icon"
|
||||
:class="pageMetadata.value.icon"
|
||||
style="margin-right: 0.5em"
|
||||
style="margin-inline-end: 0.5em"
|
||||
></i>
|
||||
<span>{{ pageMetadata.value.title }}</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -491,8 +491,8 @@ defineExpose({
|
|||
|
||||
.cxiknjgy {
|
||||
> .button {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
}
|
||||
.list > :deep(._button) {
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ const vote = async (id) => {
|
|||
> .backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
background: linear-gradient(
|
||||
|
|
@ -186,12 +186,12 @@ const vote = async (id) => {
|
|||
border-radius: 3px;
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
> .votes {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ watch(
|
|||
color: #f00;
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,9 @@
|
|||
</button>
|
||||
</div>
|
||||
<div v-if="visibility === 'specified'" class="to-specified">
|
||||
<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
|
||||
<span style="margin-inline-end: 8px">{{
|
||||
i18n.ts.recipient
|
||||
}}</span>
|
||||
<div class="visibleUsers">
|
||||
<span v-for="u in visibleUsers" :key="u.id">
|
||||
<MkAcct :user="u" />
|
||||
|
|
@ -1120,7 +1122,7 @@ onMounted(() => {
|
|||
> .right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -1135,7 +1137,7 @@ onMounted(() => {
|
|||
margin: 0 0 0 8px;
|
||||
|
||||
& + .localOnly {
|
||||
margin-left: 0 !important;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
> span:only-child > i {
|
||||
|
|
@ -1182,7 +1184,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
> i {
|
||||
margin-left: 6px;
|
||||
margin-inline-start: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ function showFileMenu(file, ev: MouseEvent) {
|
|||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
|
||||
|
|
@ -193,7 +193,7 @@ function showFileMenu(file, ev: MouseEvent) {
|
|||
width: 64px;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 2;
|
||||
background: var(--header);
|
||||
color: var(--fg);
|
||||
|
|
@ -209,7 +209,7 @@ function showFileMenu(file, ev: MouseEvent) {
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ function quote(): void {
|
|||
|
||||
> .count {
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
:custom-emojis="note.emojis"
|
||||
style="max-width: 100%"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{
|
||||
<span style="margin-inline-start: 4px">{{
|
||||
note.reactions[reaction]
|
||||
}}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -69,11 +69,11 @@ const emit = defineEmits<{
|
|||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 0.95em;
|
||||
border-left: solid 0.5px var(--divider);
|
||||
padding-left: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 14px;
|
||||
text-align: left;
|
||||
border-inline-start: solid 0.5px var(--divider);
|
||||
padding-inline-start: 10px;
|
||||
margin-inline-start: 10px;
|
||||
margin-inline-end: 14px;
|
||||
text-align: initial;
|
||||
|
||||
> .user {
|
||||
line-height: 24px;
|
||||
|
|
@ -88,7 +88,7 @@ const emit = defineEmits<{
|
|||
> .avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ defineProps<{
|
|||
border-radius: var(--radius);
|
||||
|
||||
> .link {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ defineExpose({
|
|||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
margin-bottom: -10px;
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ onUnmounted(() => {
|
|||
> svg {
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
left: -32px;
|
||||
inset-inline-start: -32px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
/>
|
||||
</p>
|
||||
<div class="wrmlmaau">
|
||||
<div
|
||||
<bdi
|
||||
class="content"
|
||||
:class="{
|
||||
collapsed,
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
v-model="showContent"
|
||||
:note="note"
|
||||
/>
|
||||
</div>
|
||||
</bdi>
|
||||
<MkButton
|
||||
v-if="hasMfm && defaultStore.state.animatedMfm"
|
||||
mini
|
||||
|
|
@ -270,7 +270,7 @@ function focusFooter(ev) {
|
|||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
padding: 0.2em 0.2em;
|
||||
margin-right: 0.2em;
|
||||
margin-inline-end: 0.2em;
|
||||
color: var(--accent);
|
||||
transition: background 0.2s;
|
||||
&:hover,
|
||||
|
|
@ -286,7 +286,7 @@ function focusFooter(ev) {
|
|||
margin-bottom: 10px;
|
||||
overflow-wrap: break-word;
|
||||
> .text {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ function focusFooter(ev) {
|
|||
> .body {
|
||||
transition: filter 0.1s;
|
||||
> .rp {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
font-style: oblique;
|
||||
color: var(--renote);
|
||||
}
|
||||
|
|
@ -304,7 +304,7 @@ function focusFooter(ev) {
|
|||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
padding: 0.2em 0.2em;
|
||||
margin-right: 0.2em;
|
||||
margin-inline-end: 0.2em;
|
||||
color: var(--accent);
|
||||
transition: background 0.2s;
|
||||
&:hover,
|
||||
|
|
@ -393,8 +393,8 @@ function focusFooter(ev) {
|
|||
}
|
||||
> :deep(button) {
|
||||
margin-top: 10px;
|
||||
margin-left: 0;
|
||||
margin-right: 0.4rem;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0.4rem;
|
||||
}
|
||||
> .fade {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ export default defineComponent({
|
|||
|
||||
> .icon {
|
||||
width: 32px;
|
||||
margin-right: 2px;
|
||||
margin-inline-end: 2px;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
|
|
@ -123,7 +123,7 @@ export default defineComponent({
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -136,8 +136,8 @@ export default defineComponent({
|
|||
border-top: none;
|
||||
}
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
|
||||
> .title {
|
||||
font-size: 1em;
|
||||
|
|
@ -160,13 +160,13 @@ export default defineComponent({
|
|||
|
||||
> .icon {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-bottom: 12px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
> .text {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,11 +81,11 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 6px;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
|
@ -104,7 +104,7 @@ export default defineComponent({
|
|||
black calc(100% - 90px),
|
||||
transparent
|
||||
);
|
||||
padding-right: 90px !important;
|
||||
padding-inline-end: 90px !important;
|
||||
white-space: nowrap;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
|
@ -116,7 +116,7 @@ export default defineComponent({
|
|||
align-items: center;
|
||||
flex: unset;
|
||||
margin: 0;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 100px;
|
||||
background: var(--buttonBg);
|
||||
|
|
@ -124,7 +124,7 @@ export default defineComponent({
|
|||
margin-top: -0.1em;
|
||||
}
|
||||
> .count {
|
||||
margin-right: -0.2em;
|
||||
margin-inline-end: -0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ defineExpose({
|
|||
> .tags {
|
||||
position: absolute;
|
||||
top: 999px;
|
||||
left: 999px;
|
||||
inset-inline-start: 999px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -333,9 +333,9 @@ defineExpose({
|
|||
z-index: -1;
|
||||
}
|
||||
i {
|
||||
margin-left: 0.7em;
|
||||
border-left: 1px solid var(--accentedBg);
|
||||
padding-left: 0.4em;
|
||||
margin-inline-start: 0.7em;
|
||||
border-inline-start: 1px solid var(--accentedBg);
|
||||
padding-inline-start: 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,8 +56,8 @@ onMounted(() => {
|
|||
.mk-toast {
|
||||
> .body {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
|
|
|
|||
|
|
@ -305,11 +305,11 @@ function close(res) {
|
|||
}
|
||||
|
||||
&:first-child {
|
||||
padding-right: 8px;
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: 8px;
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -319,7 +319,7 @@ function close(res) {
|
|||
}
|
||||
|
||||
> .ok {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -267,7 +267,7 @@ onUnmounted(() => {
|
|||
overflow: hidden;
|
||||
> span {
|
||||
font-weight: 600;
|
||||
margin-right: 0.4em;
|
||||
margin-inline-end: 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const props = withDefaults(
|
|||
display: block;
|
||||
width: ($bodyTitleHieght + $bodyInfoHieght);
|
||||
height: ($bodyTitleHieght + $bodyInfoHieght);
|
||||
margin-right: 12px;
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
> :global(.body) {
|
||||
|
|
@ -63,7 +63,7 @@ const props = withDefaults(
|
|||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
color: var(--fg);
|
||||
padding-right: 8px;
|
||||
padding-inline-end: 8px;
|
||||
|
||||
> :global(.name) {
|
||||
display: block;
|
||||
|
|
@ -88,7 +88,7 @@ const props = withDefaults(
|
|||
// > :global(.moderation) {
|
||||
// display: flex;
|
||||
// gap: 1rem;
|
||||
// margin-right: 1rem;
|
||||
// margin-inline-end: 1rem;
|
||||
// }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const emit = defineEmits<{
|
|||
<style lang="scss" scoped>
|
||||
.beaffaef {
|
||||
font-size: 0.9em;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
|
||||
> .user {
|
||||
line-height: 24px;
|
||||
|
|
@ -49,7 +49,7 @@ const emit = defineEmits<{
|
|||
> .avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 3px;
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,6 +79,6 @@ if (
|
|||
<style lang="scss" module>
|
||||
.visibility,
|
||||
.localOnly {
|
||||
margin-left: 0.5em;
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ function choose(
|
|||
display: flex;
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -229,7 +229,7 @@ function choose(
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
width: 16px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -258,7 +258,7 @@ function choose(
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
margin-inline-start: 10px;
|
||||
width: 16px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -207,11 +207,11 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
|
|||
}
|
||||
|
||||
> .config {
|
||||
right: 8px + 8px + 32px;
|
||||
inset-inline-end: 8px + 8px + 32px;
|
||||
}
|
||||
|
||||
> .remove {
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
}
|
||||
|
||||
> .handle {
|
||||
|
|
|
|||
|
|
@ -530,7 +530,7 @@ defineExpose({
|
|||
.ebkgocck {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
|
||||
> .body {
|
||||
overflow: clip;
|
||||
|
|
@ -578,7 +578,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .left {
|
||||
margin-right: 16px;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
|
||||
> .right {
|
||||
|
|
@ -615,7 +615,7 @@ defineExpose({
|
|||
|
||||
&.top {
|
||||
top: -($size);
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: $size;
|
||||
cursor: ns-resize;
|
||||
|
|
@ -623,7 +623,7 @@ defineExpose({
|
|||
|
||||
&.right {
|
||||
top: 0;
|
||||
right: -($size);
|
||||
inset-inline-end: -($size);
|
||||
width: $size;
|
||||
height: 100%;
|
||||
cursor: ew-resize;
|
||||
|
|
@ -631,7 +631,7 @@ defineExpose({
|
|||
|
||||
&.bottom {
|
||||
bottom: -($size);
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: $size;
|
||||
cursor: ns-resize;
|
||||
|
|
@ -639,7 +639,7 @@ defineExpose({
|
|||
|
||||
&.left {
|
||||
top: 0;
|
||||
left: -($size);
|
||||
inset-inline-start: -($size);
|
||||
width: $size;
|
||||
height: 100%;
|
||||
cursor: ew-resize;
|
||||
|
|
@ -647,7 +647,7 @@ defineExpose({
|
|||
|
||||
&.top-left {
|
||||
top: -($size);
|
||||
left: -($size);
|
||||
inset-inline-start: -($size);
|
||||
width: $size * 2;
|
||||
height: $size * 2;
|
||||
cursor: nwse-resize;
|
||||
|
|
@ -655,7 +655,7 @@ defineExpose({
|
|||
|
||||
&.top-right {
|
||||
top: -($size);
|
||||
right: -($size);
|
||||
inset-inline-end: -($size);
|
||||
width: $size * 2;
|
||||
height: $size * 2;
|
||||
cursor: nesw-resize;
|
||||
|
|
@ -663,7 +663,7 @@ defineExpose({
|
|||
|
||||
&.bottom-right {
|
||||
bottom: -($size);
|
||||
right: -($size);
|
||||
inset-inline-end: -($size);
|
||||
width: $size * 2;
|
||||
height: $size * 2;
|
||||
cursor: nwse-resize;
|
||||
|
|
@ -671,7 +671,7 @@ defineExpose({
|
|||
|
||||
&.bottom-left {
|
||||
bottom: -($size);
|
||||
left: -($size);
|
||||
inset-inline-start: -($size);
|
||||
width: $size * 2;
|
||||
height: $size * 2;
|
||||
cursor: nesw-resize;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ const toggle = () => {
|
|||
}
|
||||
|
||||
> .label {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
transition: inherit;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const opened = ref(props.defaultOpen);
|
|||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 0.75em;
|
||||
margin-inline-end: 0.75em;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
|
|
@ -62,7 +62,7 @@ const opened = ref(props.defaultOpen);
|
|||
display: none;
|
||||
|
||||
& + .text {
|
||||
padding-left: 4px;
|
||||
padding-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -71,16 +71,16 @@ const opened = ref(props.defaultOpen);
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
|
||||
> .text:not(:empty) {
|
||||
margin-right: 0.75em;
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -259,13 +259,13 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .prefix {
|
||||
left: 0;
|
||||
padding-right: 6px;
|
||||
inset-inline-start: 0;
|
||||
padding-inline-end: 6px;
|
||||
}
|
||||
|
||||
> .suffix {
|
||||
right: 0;
|
||||
padding-left: 6px;
|
||||
inset-inline-end: 0;
|
||||
padding-inline-start: 6px;
|
||||
}
|
||||
|
||||
&.inline {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ defineProps<{
|
|||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 0.75em;
|
||||
margin-inline-end: 0.75em;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
color: var(--fgTransparentWeak);
|
||||
|
|
@ -75,7 +75,7 @@ defineProps<{
|
|||
display: none;
|
||||
|
||||
& + .text {
|
||||
padding-left: 4px;
|
||||
padding-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -84,16 +84,16 @@ defineProps<{
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
|
||||
> .text:not(:empty) {
|
||||
margin-right: 0.75em;
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ function toggle(x) {
|
|||
.novjtctn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
cursor: pointer;
|
||||
padding: 8px 10px;
|
||||
min-width: 60px;
|
||||
|
|
@ -112,9 +112,9 @@ function toggle(x) {
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
inset-inline-end: 3px;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
inset-inline-start: 3px;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
|
|
@ -123,7 +123,7 @@ function toggle(x) {
|
|||
}
|
||||
|
||||
> .label {
|
||||
margin-left: 28px;
|
||||
margin-inline-start: 28px;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -282,13 +282,13 @@ function show(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
> .prefix {
|
||||
left: 0;
|
||||
padding-right: 6px;
|
||||
inset-inline-start: 0;
|
||||
padding-inline-end: 6px;
|
||||
}
|
||||
|
||||
> .suffix {
|
||||
right: 0;
|
||||
padding-left: 6px;
|
||||
inset-inline-end: 0;
|
||||
padding-inline-start: 6px;
|
||||
}
|
||||
|
||||
&.inline {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ function toggle(x) {
|
|||
> .knob {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
inset-inline-start: 3px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: var(--swutchOffFg);
|
||||
|
|
@ -92,7 +92,7 @@ function toggle(x) {
|
|||
}
|
||||
|
||||
> .label {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
transition: inherit;
|
||||
|
|
@ -126,7 +126,7 @@ function toggle(x) {
|
|||
border-color: var(--swutchOnBg) !important;
|
||||
|
||||
> .knob {
|
||||
left: 12px;
|
||||
inset-inline-start: 12px;
|
||||
background: var(--swutchOnFg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ function reduceFrequency(): void {
|
|||
> .menu {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
inset-inline-end: 1px;
|
||||
|
||||
> .info-circle {
|
||||
border: 3px solid var(--panel);
|
||||
|
|
|
|||
|
|
@ -144,8 +144,8 @@ watch(
|
|||
> .inner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 0;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
|
|
@ -159,7 +159,7 @@ watch(
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 18%;
|
||||
height: 18%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const props = withDefaults(
|
|||
.spinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 999;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
|
|
|||
|
|
@ -354,9 +354,9 @@ const props = withDefaults(
|
|||
::v-deep(blockquote) {
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
padding-left: 12px;
|
||||
padding-inline-start: 12px;
|
||||
color: var(--fgTransparentWeak);
|
||||
border-left: solid 4px var(--fgTransparent);
|
||||
border-inline-start: solid 4px var(--fgTransparent);
|
||||
}
|
||||
|
||||
::v-deep(pre) {
|
||||
|
|
|
|||
|
|
@ -374,13 +374,13 @@ onUnmounted(() => {
|
|||
display: flex;
|
||||
> .buttons {
|
||||
&:not(:empty) {
|
||||
margin-right: 8px;
|
||||
margin-left: calc(0px - var(--margin));
|
||||
margin-inline-end: 8px;
|
||||
margin-inline-start: calc(0px - var(--margin));
|
||||
}
|
||||
> .avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: var(--margin);
|
||||
margin-inline-start: var(--margin);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -393,16 +393,16 @@ onUnmounted(() => {
|
|||
&.right {
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
// margin-right: calc(0px - var(--margin));
|
||||
// margin-left: var(--margin);
|
||||
// margin-inline-end: calc(0px - var(--margin));
|
||||
// margin-inline-start: var(--margin);
|
||||
> .button:last-child {
|
||||
margin-right: calc(0px - var(--margin));
|
||||
margin-inline-end: calc(0px - var(--margin));
|
||||
}
|
||||
}
|
||||
|
||||
> .fullButton {
|
||||
& + .fullButton {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -419,7 +419,7 @@ onUnmounted(() => {
|
|||
max-width: 400px;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
> .avatar {
|
||||
|
|
@ -428,11 +428,11 @@ onUnmounted(() => {
|
|||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
min-width: 16px;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
|
|
@ -458,7 +458,7 @@ onUnmounted(() => {
|
|||
|
||||
> .chevron {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
margin-inline-start: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -474,14 +474,14 @@ onUnmounted(() => {
|
|||
}
|
||||
> .left {
|
||||
min-width: 20%;
|
||||
margin-left: -10px;
|
||||
padding-left: 10px;
|
||||
margin-inline-start: -10px;
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
> .right {
|
||||
// margin-left: auto;
|
||||
// margin-inline-start: auto;
|
||||
min-width: max-content;
|
||||
margin-right: -10px;
|
||||
padding-right: 10px;
|
||||
margin-inline-end: -10px;
|
||||
padding-inline-end: 10px;
|
||||
}
|
||||
|
||||
> .tabs {
|
||||
|
|
@ -555,7 +555,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
> .icon + .title {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
> .title {
|
||||
transition: opacity 0.2s;
|
||||
|
|
@ -564,7 +564,7 @@ onUnmounted(() => {
|
|||
> .highlight {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 3px;
|
||||
background: var(--accent);
|
||||
border-radius: 999px;
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const target = self ? null : "_blank";
|
|||
}
|
||||
|
||||
> .icon {
|
||||
padding-left: 2px;
|
||||
padding-inline-start: 2px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default defineComponent({
|
|||
margin: 16px auto;
|
||||
|
||||
& + .hkcxmtwj {
|
||||
margin-left: 16px;
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import { set } from "@/scripts/idb-proxy";
|
|||
|
||||
import { login, refreshAccount, signout, updateAccount } from "@/account";
|
||||
import components from "@/components";
|
||||
import { langmap } from "@/scripts/langmap";
|
||||
import { lang, ui, version } from "@/config";
|
||||
import directives from "@/directives";
|
||||
import { i18n } from "@/i18n";
|
||||
|
|
@ -123,7 +124,8 @@ function checkForSplash() {
|
|||
// #region Set lang attr
|
||||
const html = document.documentElement;
|
||||
html.setAttribute("lang", lang || "en-US");
|
||||
// #endregion
|
||||
html.setAttribute("dir", langmap[lang].rtl ? "rtl" : "ltr");
|
||||
//#endregion
|
||||
|
||||
// #region loginId
|
||||
const params = new URLSearchParams(location.search);
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@
|
|||
:key="sponsor"
|
||||
style="
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
font-size: 1.7rem;
|
||||
"
|
||||
>
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
:key="patron"
|
||||
style="
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
"
|
||||
>
|
||||
<Mfm :text="`${patron}`" />
|
||||
|
|
@ -324,7 +324,7 @@ definePageMetadata({
|
|||
> .emoji {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
visibility: hidden;
|
||||
|
||||
> .emoji {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,10 @@
|
|||
class="fullButton"
|
||||
primary
|
||||
@click.stop="action.handler"
|
||||
><i :class="action.icon" style="margin-right: 6px"></i
|
||||
><i
|
||||
:class="action.icon"
|
||||
style="margin-inline-end: 6px"
|
||||
></i
|
||||
>{{ action.text }}</MkButton
|
||||
>
|
||||
<button
|
||||
|
|
@ -205,7 +208,7 @@ onUnmounted(() => {
|
|||
margin: 0 var(--margin);
|
||||
|
||||
&.right {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
|
@ -233,7 +236,7 @@ onUnmounted(() => {
|
|||
|
||||
> .fullButton {
|
||||
& + .fullButton {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -244,10 +247,10 @@ onUnmounted(() => {
|
|||
max-width: 400px;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
margin-left: 24px;
|
||||
margin-inline-start: 24px;
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
|
|
@ -260,7 +263,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -285,7 +288,7 @@ onUnmounted(() => {
|
|||
|
||||
> .chevron {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
margin-inline-start: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -294,7 +297,7 @@ onUnmounted(() => {
|
|||
|
||||
> .tabs {
|
||||
position: relative;
|
||||
margin-left: 16px;
|
||||
margin-inline-start: 16px;
|
||||
font-size: 0.8em;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
|
|
@ -314,7 +317,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
> .icon + .title {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -463,7 +463,7 @@ definePageMetadata(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 11px;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
border: solid 1px var(--panel);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -514,7 +514,7 @@ definePageMetadata(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
|
|
|
|||
|
|
@ -443,7 +443,7 @@ defineExpose({
|
|||
width: 32%;
|
||||
max-width: 280px;
|
||||
box-sizing: border-box;
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-inline-end: solid 0.5px var(--divider);
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue