Merge branch 'develop' of codeberg.org:calckey/calckey into develop
This commit is contained in:
commit
2a87323242
13 changed files with 247 additions and 199 deletions
|
@ -1290,7 +1290,7 @@ loadRawImages: Carregar les imatges originals en comptes de mostrar les miniatur
|
||||||
noteFavoritesCount: Nombre de notes afegides a favorits
|
noteFavoritesCount: Nombre de notes afegides a favorits
|
||||||
useSystemFont: Fes servir la font per defecte del sistema
|
useSystemFont: Fes servir la font per defecte del sistema
|
||||||
contact: Contacte
|
contact: Contacte
|
||||||
clips: Clips
|
clips: Retalls
|
||||||
experimentalFeatures: Característiques experimentals
|
experimentalFeatures: Característiques experimentals
|
||||||
developer: Desenvolupador
|
developer: Desenvolupador
|
||||||
makeExplorableDescription: Si desactives aquesta funció el teu compte no sortirà a
|
makeExplorableDescription: Si desactives aquesta funció el teu compte no sortirà a
|
||||||
|
@ -1496,7 +1496,7 @@ gallery: Galeria
|
||||||
popularPosts: Pàgines populars
|
popularPosts: Pàgines populars
|
||||||
shareWithNote: Comparteix amb una publicació
|
shareWithNote: Comparteix amb una publicació
|
||||||
expiration: Data límit
|
expiration: Data límit
|
||||||
memo: Memo
|
memo: Recordatori
|
||||||
priority: Prioritat
|
priority: Prioritat
|
||||||
high: Alta
|
high: Alta
|
||||||
middle: Mitjana
|
middle: Mitjana
|
||||||
|
@ -1537,7 +1537,7 @@ incorrectPassword: Contrasenya incorrecta.
|
||||||
clickToFinishEmailVerification: Feu clic a [{ok}] per completar la verificació del
|
clickToFinishEmailVerification: Feu clic a [{ok}] per completar la verificació del
|
||||||
correu electrònic.
|
correu electrònic.
|
||||||
overridedDeviceKind: Tipus de dispositiu
|
overridedDeviceKind: Tipus de dispositiu
|
||||||
smartphone: Smartphone
|
smartphone: Telèfon intel·ligent
|
||||||
tablet: Tauleta
|
tablet: Tauleta
|
||||||
auto: Automàtic
|
auto: Automàtic
|
||||||
recentNHours: Últimes {n} hores
|
recentNHours: Últimes {n} hores
|
||||||
|
@ -1625,7 +1625,7 @@ customKaTeXMacroDescription: "Configura macros per escriure expressions matemàt
|
||||||
objectStorageRegion: Regió
|
objectStorageRegion: Regió
|
||||||
objectStoragePrefix: Prefix
|
objectStoragePrefix: Prefix
|
||||||
objectStoragePrefixDesc: Els fitxers es guardaran dins de carpetes amb aquest prefix.
|
objectStoragePrefixDesc: Els fitxers es guardaran dins de carpetes amb aquest prefix.
|
||||||
objectStorageEndpoint: Endpoint
|
objectStorageEndpoint: Extrem
|
||||||
newNoteRecived: Hi han notes noves
|
newNoteRecived: Hi han notes noves
|
||||||
sounds: Sons
|
sounds: Sons
|
||||||
listen: Escoltar
|
listen: Escoltar
|
||||||
|
@ -1748,7 +1748,7 @@ reverse: Revés
|
||||||
objectStorageBucket: Cubell
|
objectStorageBucket: Cubell
|
||||||
objectStorageBucketDesc: Si us plau específica el nom del cubell que faràs servir
|
objectStorageBucketDesc: Si us plau específica el nom del cubell que faràs servir
|
||||||
al teu proveïdor.
|
al teu proveïdor.
|
||||||
clip: Clip
|
clip: Retall
|
||||||
createNew: Crear una nova
|
createNew: Crear una nova
|
||||||
optional: Opcional
|
optional: Opcional
|
||||||
jumpToSpecifiedDate: Vés a una data concreta
|
jumpToSpecifiedDate: Vés a una data concreta
|
||||||
|
@ -2059,3 +2059,4 @@ older: Més antic
|
||||||
silencedWarning: S'està mostrant aquesta pàgina per què aquest usuari és d'un servidor
|
silencedWarning: S'està mostrant aquesta pàgina per què aquest usuari és d'un servidor
|
||||||
que l'administrador a silenciat, així que pot ser spam.
|
que l'administrador a silenciat, així que pot ser spam.
|
||||||
jumpToPrevious: Vés a l'anterior
|
jumpToPrevious: Vés a l'anterior
|
||||||
|
cw: Avís de contingut
|
||||||
|
|
|
@ -1171,6 +1171,8 @@ _mfm:
|
||||||
sparkleDescription: "Verleiht Inhalt einen glitzernden Partikeleffekt."
|
sparkleDescription: "Verleiht Inhalt einen glitzernden Partikeleffekt."
|
||||||
rotate: "Drehen"
|
rotate: "Drehen"
|
||||||
rotateDescription: "Dreht den Inhalt um einen angegebenen Winkel."
|
rotateDescription: "Dreht den Inhalt um einen angegebenen Winkel."
|
||||||
|
fade: "Ein-/Ausblenden"
|
||||||
|
fadeDescription: "Blended Inhalt ein and aus."
|
||||||
plain: "Schlicht"
|
plain: "Schlicht"
|
||||||
plainDescription: "Deaktiviert jegliche MFM-Syntax, die sich innerhalb dieses MFM-Effekts\
|
plainDescription: "Deaktiviert jegliche MFM-Syntax, die sich innerhalb dieses MFM-Effekts\
|
||||||
\ befindet."
|
\ befindet."
|
||||||
|
|
|
@ -1267,6 +1267,8 @@ _mfm:
|
||||||
sparkleDescription: "Gives content a sparkling particle effect."
|
sparkleDescription: "Gives content a sparkling particle effect."
|
||||||
rotate: "Rotate"
|
rotate: "Rotate"
|
||||||
rotateDescription: "Turns content by a specified angle."
|
rotateDescription: "Turns content by a specified angle."
|
||||||
|
fade: "Fade"
|
||||||
|
fadeDescription: "Fades content in and out."
|
||||||
position: "Position"
|
position: "Position"
|
||||||
positionDescription: "Move content by a specified amount."
|
positionDescription: "Move content by a specified amount."
|
||||||
scale: "Scale"
|
scale: "Scale"
|
||||||
|
|
|
@ -1077,6 +1077,8 @@ _mfm:
|
||||||
sparkle: "Paillettes"
|
sparkle: "Paillettes"
|
||||||
sparkleDescription: "Ajoute un effet scintillant au contenu."
|
sparkleDescription: "Ajoute un effet scintillant au contenu."
|
||||||
rotate: "Pivoter"
|
rotate: "Pivoter"
|
||||||
|
fade: "Apparaître/Disparaître"
|
||||||
|
fadeDescription: "Fait apparaître et disparaître le contenu."
|
||||||
plainDescription: Désactiver les effets de tous les MFM contenus dans cet effet
|
plainDescription: Désactiver les effets de tous les MFM contenus dans cet effet
|
||||||
MFM.
|
MFM.
|
||||||
rotateDescription: Pivoter le contenu d'un angle spécifique.
|
rotateDescription: Pivoter le contenu d'un angle spécifique.
|
||||||
|
|
|
@ -910,6 +910,8 @@ _mfm:
|
||||||
fontDescription: "Puoi scegliere il tipo di carattere per il contenuto."
|
fontDescription: "Puoi scegliere il tipo di carattere per il contenuto."
|
||||||
rainbow: "Arcobaleno"
|
rainbow: "Arcobaleno"
|
||||||
rotate: "Ruota"
|
rotate: "Ruota"
|
||||||
|
fade: "Dissolvenza"
|
||||||
|
fadeDescription: "Dissolvenza in entrata e in uscita del contenuto."
|
||||||
_instanceTicker:
|
_instanceTicker:
|
||||||
none: "Nascondi"
|
none: "Nascondi"
|
||||||
remote: "Mostra solo per gli/le utenti remotə"
|
remote: "Mostra solo per gli/le utenti remotə"
|
||||||
|
|
|
@ -13,7 +13,7 @@ password: "Wachtwoord"
|
||||||
forgotPassword: "Wachtwoord vergeten"
|
forgotPassword: "Wachtwoord vergeten"
|
||||||
fetchingAsApObject: "Ophalen vanuit de Fediverse"
|
fetchingAsApObject: "Ophalen vanuit de Fediverse"
|
||||||
ok: "Ok"
|
ok: "Ok"
|
||||||
gotIt: "Begrepen"
|
gotIt: "Begrepen!"
|
||||||
cancel: "Annuleren"
|
cancel: "Annuleren"
|
||||||
enterUsername: "Voer een gebruikersnaam in"
|
enterUsername: "Voer een gebruikersnaam in"
|
||||||
renotedBy: "Hergedeeld door {user}"
|
renotedBy: "Hergedeeld door {user}"
|
||||||
|
@ -51,8 +51,8 @@ deleteAndEditConfirm: "Weet je zeker dat je deze post wilt verwijderen en dan be
|
||||||
Je verliest alle reacties, boosts en antwoorden erop."
|
Je verliest alle reacties, boosts en antwoorden erop."
|
||||||
addToList: "Aan lijst toevoegen"
|
addToList: "Aan lijst toevoegen"
|
||||||
sendMessage: "Verstuur bericht"
|
sendMessage: "Verstuur bericht"
|
||||||
copyUsername: "Kopiëren gebruikersnaam "
|
copyUsername: "Gebruikersnaam kopiëren"
|
||||||
searchUser: "Zoeken een gebruiker"
|
searchUser: "Zoek een gebruiker"
|
||||||
reply: "Antwoord"
|
reply: "Antwoord"
|
||||||
loadMore: "Laad meer"
|
loadMore: "Laad meer"
|
||||||
showMore: "Toon meer"
|
showMore: "Toon meer"
|
||||||
|
@ -517,3 +517,5 @@ withFileAntenna: Alleen posts met bestanden
|
||||||
enableServiceworker: Schakel pushmeldingen voor je browser in
|
enableServiceworker: Schakel pushmeldingen voor je browser in
|
||||||
renoteUnmute: Ontdemp boosts
|
renoteUnmute: Ontdemp boosts
|
||||||
jumpToPrevious: Spring naar vorige
|
jumpToPrevious: Spring naar vorige
|
||||||
|
caseSensitive: Hoofdlettergevoelig
|
||||||
|
cw: Inhoudswaarschuwing
|
||||||
|
|
|
@ -518,7 +518,7 @@ onUnmounted(() => {
|
||||||
cursor: unset;
|
cursor: unset;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
&:first-of-type {
|
&:first-child {
|
||||||
padding-top: 28px;
|
padding-top: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -299,6 +299,11 @@ const props = withDefaults(
|
||||||
filter: hue-rotate(360deg) contrast(150%) saturate(150%);
|
filter: hue-rotate(360deg) contrast(150%) saturate(150%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes mfm-fade {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -3,31 +3,32 @@
|
||||||
v-if="show"
|
v-if="show"
|
||||||
ref="el"
|
ref="el"
|
||||||
class="fdidabkb"
|
class="fdidabkb"
|
||||||
:class="{ slim: narrow, thin: thin_ }"
|
:class="{ thin: thin_, tabs: tabs?.length > 0 }"
|
||||||
:style="{ background: bg }"
|
:style="{ background: bg }"
|
||||||
@click="onClick"
|
@click="onClick"
|
||||||
>
|
>
|
||||||
<button
|
<div class="left">
|
||||||
v-if="props.displayBackButton"
|
<div class="buttons">
|
||||||
class="_button button icon backButton"
|
<button
|
||||||
@click.stop="goBack()"
|
v-if="props.displayBackButton"
|
||||||
@touchstart="preventDrag"
|
class="_button button icon backButton"
|
||||||
v-tooltip.noDelay="i18n.ts.goBack"
|
@click.stop="goBack()"
|
||||||
>
|
@touchstart="preventDrag"
|
||||||
<i class="ph-caret-left ph-bold ph-lg"></i>
|
v-tooltip.noDelay="i18n.ts.goBack"
|
||||||
</button>
|
>
|
||||||
<div v-if="narrow" class="buttons left" @click="openAccountMenu">
|
<i class="ph-caret-left ph-bold ph-lg"></i>
|
||||||
<MkAvatar
|
</button>
|
||||||
v-if="props.displayMyAvatar && $i"
|
<MkAvatar
|
||||||
class="avatar"
|
v-if="narrow && props.displayMyAvatar && $i"
|
||||||
:user="$i"
|
class="avatar button"
|
||||||
:disable-preview="true"
|
:user="$i"
|
||||||
disableLink
|
:disable-preview="true"
|
||||||
/>
|
disableLink
|
||||||
</div>
|
@click.stop="openAccountMenu"
|
||||||
<template v-if="metadata">
|
/>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="!hideTitle"
|
v-if="!hideTitle && metadata"
|
||||||
class="titleContainer"
|
class="titleContainer"
|
||||||
@click="showTabsPopup"
|
@click="showTabsPopup"
|
||||||
>
|
>
|
||||||
|
@ -66,7 +67,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav ref="tabsEl" v-if="hasTabs" class="tabs">
|
</div>
|
||||||
|
<template v-if="metadata">
|
||||||
|
<nav ref="tabsEl" v-if="hasTabs" class="tabs" :class="{collapse: hasTabs && tabs.length > 3}">
|
||||||
<button
|
<button
|
||||||
v-for="tab in tabs"
|
v-for="tab in tabs"
|
||||||
:ref="(el) => (tabRefs[tab.key] = el)"
|
:ref="(el) => (tabRefs[tab.key] = el)"
|
||||||
|
@ -90,11 +93,13 @@
|
||||||
v-if="narrow"
|
v-if="narrow"
|
||||||
:user="metadata.avatar"
|
:user="metadata.avatar"
|
||||||
:full="false"
|
:full="false"
|
||||||
|
class="fullButton"
|
||||||
></MkFollowButton>
|
></MkFollowButton>
|
||||||
<MkFollowButton
|
<MkFollowButton
|
||||||
v-else
|
v-else
|
||||||
:user="metadata.avatar"
|
:user="metadata.avatar"
|
||||||
:full="true"
|
:full="true"
|
||||||
|
class="fullButton"
|
||||||
></MkFollowButton>
|
></MkFollowButton>
|
||||||
</template>
|
</template>
|
||||||
<template v-for="action in actions">
|
<template v-for="action in actions">
|
||||||
|
@ -124,7 +129,6 @@ import {
|
||||||
nextTick,
|
nextTick,
|
||||||
reactive,
|
reactive,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import tinycolor from "tinycolor2";
|
|
||||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||||
import { popupMenu } from "@/os";
|
import { popupMenu } from "@/os";
|
||||||
import { scrollToTop } from "@/scripts/scroll";
|
import { scrollToTop } from "@/scripts/scroll";
|
||||||
|
@ -236,25 +240,9 @@ function goBack(): void {
|
||||||
window.history.back();
|
window.history.back();
|
||||||
}
|
}
|
||||||
|
|
||||||
const calcBg = () => {
|
|
||||||
const rawBg = metadata?.bg || "var(--bg)";
|
|
||||||
const tinyBg = tinycolor(
|
|
||||||
rawBg.startsWith("var(")
|
|
||||||
? getComputedStyle(document.documentElement).getPropertyValue(
|
|
||||||
rawBg.slice(4, -1)
|
|
||||||
)
|
|
||||||
: rawBg
|
|
||||||
);
|
|
||||||
tinyBg.setAlpha(0.85);
|
|
||||||
bg.value = tinyBg.toRgbString();
|
|
||||||
};
|
|
||||||
|
|
||||||
let ro: ResizeObserver | null;
|
let ro: ResizeObserver | null;
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
calcBg();
|
|
||||||
globalEvents.on("themeChanged", calcBg);
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => [props.tab, props.tabs],
|
() => [props.tab, props.tabs],
|
||||||
() => {
|
() => {
|
||||||
|
@ -264,17 +252,15 @@ onMounted(() => {
|
||||||
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
|
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
|
||||||
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
|
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
|
||||||
const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
|
const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
|
||||||
tabEl.style = `--width: ${tabSizeX}px`;
|
if (props.tabs.length > 3) {
|
||||||
|
tabEl.style = `--width: ${tabSizeX}px`;
|
||||||
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const parentRect = tabsEl.getBoundingClientRect();
|
|
||||||
const rect = tabEl.getBoundingClientRect();
|
|
||||||
const left =
|
|
||||||
rect.left - parentRect.left + tabsEl?.scrollLeft;
|
|
||||||
tabHighlightEl.style.width = tabSizeX + "px";
|
tabHighlightEl.style.width = tabSizeX + "px";
|
||||||
tabHighlightEl.style.transform = `translateX(${left}px)`;
|
tabHighlightEl.style.transform = `translateX(${tabEl.offsetLeft}px)`;
|
||||||
window.requestAnimationFrame(() => {
|
window.requestAnimationFrame(() => {
|
||||||
tabsEl?.scrollTo({
|
tabsEl?.scrollTo({
|
||||||
left: left - 60,
|
left: tabEl.offsetLeft - 60,
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -299,7 +285,6 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
globalEvents.off("themeChanged", calcBg);
|
|
||||||
if (ro) ro.disconnect();
|
if (ro) ro.disconnect();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -308,99 +293,97 @@ onUnmounted(() => {
|
||||||
.fdidabkb {
|
.fdidabkb {
|
||||||
--height: 55px;
|
--height: 55px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
|
||||||
border-bottom: solid 0.5px var(--divider);
|
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
|
padding-inline: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
padding-inline: 12p
|
||||||
|
}
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
> .left {
|
||||||
|
min-width: unset !important;
|
||||||
|
max-width: 40%;
|
||||||
|
}
|
||||||
|
> .left, > .right {
|
||||||
|
flex: unset !important;
|
||||||
|
}
|
||||||
|
&:not(.tabs) {
|
||||||
|
> .left {
|
||||||
|
width: 0 !important;
|
||||||
|
flex-grow: 1 !important;
|
||||||
|
max-width: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.tabs {
|
||||||
|
> .left {
|
||||||
|
flex-shrink: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons ~ .titleContainer > .title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-bottom: solid 0.5px var(--divider);
|
||||||
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
opacity: .85;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
|
||||||
&.thin {
|
&.thin {
|
||||||
--height: 45px;
|
--height: 45px;
|
||||||
|
|
||||||
> .buttons {
|
.buttons {
|
||||||
> .button {
|
> .button {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.slim {
|
> .left {
|
||||||
> .titleContainer {
|
display: flex;
|
||||||
flex: 1;
|
> .buttons {
|
||||||
margin: 0 auto;
|
&:not(:empty) {
|
||||||
|
margin-left: calc(0px - var(--margin));
|
||||||
> *:first-child {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
}
|
||||||
|
> .avatar {
|
||||||
> *:last-child {
|
width: 32px;
|
||||||
margin-right: auto;
|
height: 32px;
|
||||||
}
|
margin-left: var(--margin);
|
||||||
}
|
|
||||||
> .tabs {
|
|
||||||
padding-inline: 12px;
|
|
||||||
mask: linear-gradient(
|
|
||||||
to right,
|
|
||||||
transparent,
|
|
||||||
black 10px 80%,
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
-webkit-mask: linear-gradient(
|
|
||||||
to right,
|
|
||||||
transparent,
|
|
||||||
black 10px 80%,
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
margin-left: -10px;
|
|
||||||
padding-left: 22px;
|
|
||||||
scrollbar-width: none;
|
|
||||||
&::before {
|
|
||||||
content: unset;
|
|
||||||
}
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
// Force right padding
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 20%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .buttons {
|
.buttons {
|
||||||
--margin: 8px;
|
--margin: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
margin: 0 var(--margin);
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
margin-right: auto;
|
|
||||||
|
|
||||||
> .avatar {
|
|
||||||
$size: 32px;
|
|
||||||
display: inline-block;
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
vertical-align: bottom;
|
|
||||||
margin: 0 8px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
margin-left: auto;
|
justify-content: flex-end;
|
||||||
:deep(.follow-button) {
|
// margin-right: calc(0px - var(--margin));
|
||||||
margin-right: 6px;
|
// margin-left: var(--margin);
|
||||||
|
> .button:last-child {
|
||||||
|
margin-right: calc(0px - var(--margin));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .button/*, @at-root .backButton*/ {
|
> .button/*, @at-root .backButton*/ {
|
||||||
/* I don't know how to get this to work */
|
/* I don't know how to get this to work */
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -428,85 +411,117 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .backButton {
|
> .left {
|
||||||
display: flex;
|
> .backButton {
|
||||||
align-items: center;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
margin-left: 1rem;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
> .titleContainer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 400px;
|
|
||||||
overflow: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-left: 24px;
|
|
||||||
margin-right: 1rem;
|
|
||||||
|
|
||||||
> .avatar {
|
|
||||||
$size: 32px;
|
|
||||||
display: inline-block;
|
|
||||||
width: $size;
|
|
||||||
height: $size;
|
|
||||||
vertical-align: bottom;
|
|
||||||
margin: 0 8px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
> .titleContainer {
|
||||||
> .icon {
|
display: flex;
|
||||||
margin-right: 8px;
|
align-items: center;
|
||||||
width: 16px;
|
max-width: 400px;
|
||||||
text-align: center;
|
overflow: auto;
|
||||||
transform: translate(0em);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .title {
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
line-height: 1.1;
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
> .subtitle {
|
flex-shrink: 0;
|
||||||
opacity: 0.6;
|
margin-right: 1rem;
|
||||||
font-size: 0.8em;
|
|
||||||
font-weight: normal;
|
> .avatar {
|
||||||
white-space: nowrap;
|
$size: 32px;
|
||||||
|
display: inline-block;
|
||||||
|
width: $size;
|
||||||
|
height: $size;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin: 0 8px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .title {
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
&.activeTab {
|
line-height: 1.1;
|
||||||
text-align: center;
|
|
||||||
|
> .subtitle {
|
||||||
> .chevron {
|
opacity: 0.6;
|
||||||
display: inline-block;
|
font-size: 0.8em;
|
||||||
margin-left: 6px;
|
font-weight: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
&.activeTab {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
> .chevron {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
> .left, > .right {
|
||||||
|
flex-basis: 100%;
|
||||||
|
flex-shrink: 9999;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
> .left {
|
||||||
|
min-width: 20%;
|
||||||
|
margin-left: -10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
> .right {
|
||||||
|
// margin-left: auto;
|
||||||
|
min-width: max-content;
|
||||||
|
margin-right: -10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
> .tabs {
|
> .tabs {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
contain: strict;
|
contain: content;
|
||||||
|
display: flex;
|
||||||
|
padding-inline: 20px;
|
||||||
|
margin-inline: -20px;
|
||||||
|
mask: linear-gradient(
|
||||||
|
to right,
|
||||||
|
transparent,
|
||||||
|
black 20px calc(100% - 20px),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
-webkit-mask: linear-gradient(
|
||||||
|
to right,
|
||||||
|
transparent,
|
||||||
|
black 20px calc(100% - 20px),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
scrollbar-width: none;
|
||||||
|
|
||||||
&::before {
|
&.collapse {
|
||||||
content: "";
|
--width: 38px;
|
||||||
display: inline-block;
|
> .tab {
|
||||||
height: 40%;
|
width: 38px;
|
||||||
border-left: 1px solid var(--divider);
|
min-width: 38px !important;
|
||||||
margin-right: 1em;
|
&:not(.active) > .title {
|
||||||
margin-left: 10px;
|
opacity: 0;
|
||||||
vertical-align: -1px;
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .tab {
|
> .tab {
|
||||||
|
@ -515,12 +530,12 @@ onUnmounted(() => {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-inline: 10px solid transparent;
|
border-inline: 10px solid transparent;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-width: max-content;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
width: 38px;
|
|
||||||
--width: 38px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: color 0.2s, opacity 0.2s, width 0.2s;
|
transition: color 0.2s, opacity 0.2s, width 0.2s, min-width .2s;
|
||||||
|
--width: max-content;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -531,9 +546,7 @@ onUnmounted(() => {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
width: var(--width);
|
width: var(--width);
|
||||||
}
|
min-width: var(--width) !important;
|
||||||
&:not(.active) > .title {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .icon + .title {
|
> .icon + .title {
|
||||||
|
@ -543,7 +556,6 @@ onUnmounted(() => {
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .highlight {
|
> .highlight {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
|
@ -253,6 +253,16 @@ export default defineComponent({
|
||||||
style = `background-color: #${color};`;
|
style = `background-color: #${color};`;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case "fade": {
|
||||||
|
const direction = token.props.args.out
|
||||||
|
? "alternate-reverse"
|
||||||
|
: "alternate";
|
||||||
|
const speed = validTime(token.props.args.speed) || "1.5s";
|
||||||
|
style =
|
||||||
|
this.$store.state.animatedMfm && !reducedMotion()
|
||||||
|
? `animation: mfm-fade ${speed} linear infinite; animation-direction: ${direction};`
|
||||||
|
: "";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (style == null) {
|
if (style == null) {
|
||||||
return h("span", {}, [
|
return h("span", {}, [
|
||||||
|
|
|
@ -353,6 +353,16 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="section _block">
|
||||||
|
<div class="title">{{ i18n.ts._mfm.fade }}</div>
|
||||||
|
<div class="content">
|
||||||
|
<p>{{ i18n.ts._mfm.fadeDescription }}</p>
|
||||||
|
<div class="preview">
|
||||||
|
<Mfm :text="preview_fade"/>
|
||||||
|
<MkTextarea v-model="preview_fade"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="section _block">
|
<div class="section _block">
|
||||||
<div class="title">{{ i18n.ts._mfm.position }}</div>
|
<div class="title">{{ i18n.ts._mfm.position }}</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
@ -406,10 +416,8 @@
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>{{ i18n.ts._mfm.plainDescription }}</p>
|
<p>{{ i18n.ts._mfm.plainDescription }}</p>
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
<Mfm :text="preview_plain" />
|
<Mfm :text="preview_plain"/>
|
||||||
<MkTextarea v-model="preview_plain"
|
<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
|
||||||
><span>MFM</span></MkTextarea
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -479,6 +487,7 @@ let preview_bg = $ref("$[bg.color=ff0000 Background color]");
|
||||||
let preview_plain = $ref(
|
let preview_plain = $ref(
|
||||||
"<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>"
|
"<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>"
|
||||||
);
|
);
|
||||||
|
let preview_fade = $ref('$[fade 🍮] $[fade.out 🍮] $[fade.speed=5s 🍮]');
|
||||||
|
|
||||||
definePageMetadata({
|
definePageMetadata({
|
||||||
title: i18n.ts._mfm.cheatSheet,
|
title: i18n.ts._mfm.cheatSheet,
|
||||||
|
|
|
@ -19,4 +19,5 @@ export const MFM_TAGS = [
|
||||||
"rainbow",
|
"rainbow",
|
||||||
"sparkle",
|
"sparkle",
|
||||||
"rotate",
|
"rotate",
|
||||||
|
"fade",
|
||||||
];
|
];
|
||||||
|
|
|
@ -103,7 +103,7 @@ body::-webkit-scrollbar-thumb {
|
||||||
}
|
}
|
||||||
|
|
||||||
html._themeChanging_ {
|
html._themeChanging_ {
|
||||||
&, * {
|
&, *, ::before, ::after {
|
||||||
transition: background 1s ease, border 1s ease !important;
|
transition: background 1s ease, border 1s ease !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue