mirror of
https://git.boykissers.com/pawkey/pawkey-sk.git
synced 2025-12-20 04:04:16 +00:00
feat!: extensive theme overhaul (#9)
This commit is contained in:
Leafus
@@ -24,7 +24,7 @@
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
panelBorder: '" solid 1px var(--MI_THEME-divider)',
|
||||
panelBorder: 'solid 1px var(--MI_THEME-divider)',
|
||||
thread: ':lighten<12<@panel',
|
||||
windowHeader: ':alpha<0.85<@panel',
|
||||
popup: ':lighten<3<@panel',
|
||||
|
||||
88
packages/frontend-shared/themes/psDark.json5
Normal file
88
packages/frontend-shared/themes/psDark.json5
Normal file
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"base": "dark",
|
||||
"props": {
|
||||
"accent": "#cba6f7",
|
||||
"accentDarken": ":darken<10<@accent",
|
||||
"accentLighten": ":lighten<10<@accent",
|
||||
"accentedBg": ":alpha<0.15<@accent",
|
||||
"focus": ":alpha<0.3<@accent",
|
||||
"bg": "#11111b",
|
||||
"acrylicBg": ":alpha<0.5<@bg",
|
||||
"fg": "#cdd6f4",
|
||||
"fgTransparentWeak": ":alpha<0.75<@fg",
|
||||
"fgTransparent": ":alpha<0.5<@fg",
|
||||
"fgHighlighted": ":lighten<3<@fg",
|
||||
"fgOnAccent": "#000000",
|
||||
"divider": "rgba(255, 255, 255, 0.1)",
|
||||
"indicator": "@accent",
|
||||
"panel": ":lighten<3<@bg",
|
||||
"panelHighlight": ":lighten<3<@panel",
|
||||
"panelHeaderBg": ":lighten<3<@panel",
|
||||
"panelHeaderFg": "@fg",
|
||||
"panelHeaderDivider": "rgba(0, 0, 0, 0)",
|
||||
"panelBorder": "\" solid 1px var(--divider)",
|
||||
"acrylicPanel": ":alpha<0.5<@panel",
|
||||
"popup": ":lighten<3<@panel",
|
||||
"shadow": "rgba(0, 0, 0, 0.3)",
|
||||
"header": ":alpha<0.7<@panel",
|
||||
"navBg": "@panel",
|
||||
"navFg": "@fg",
|
||||
"navHoverFg": ":lighten<17<@fg",
|
||||
"navActive": "@accent",
|
||||
"navIndicator": "@indicator",
|
||||
"link": "#cba6f7",
|
||||
"hashtag": "#cba6f7",
|
||||
"mention": "@accent",
|
||||
"mentionMe": "@mention",
|
||||
"renote": "#eba0ac",
|
||||
"modalBg": "rgba(0, 0, 0, 0.5)",
|
||||
"scrollbarHandle": "rgba(255, 255, 255, 0.2)",
|
||||
"scrollbarHandleHover": "rgba(255, 255, 255, 0.4)",
|
||||
"dateLabelFg": "@fg",
|
||||
"infoBg": "#cdd6f4",
|
||||
"infoFg": "#fff",
|
||||
"infoWarnBg": "#42321c",
|
||||
"infoWarnFg": "#ffbd3e",
|
||||
"switchBg": "rgba(255, 255, 255, 0.15)",
|
||||
"cwBg": "#687390",
|
||||
"cwFg": "#393f4f",
|
||||
"cwHoverBg": "#707b97",
|
||||
"buttonBg": "rgba(255, 255, 255, 0.05)",
|
||||
"buttonHoverBg": "rgba(255, 255, 255, 0.1)",
|
||||
"buttonGradateA": "@accent",
|
||||
"buttonGradateB": ":hue<20<@accent",
|
||||
"inputBorder": "rgba(255, 255, 255, 0.1)",
|
||||
"inputBorderHover": "rgba(255, 255, 255, 0.2)",
|
||||
"listItemHoverBg": "rgba(255, 255, 255, 0.03)",
|
||||
"driveFolderBg": ":alpha<0.3<@accent",
|
||||
"wallpaperOverlay": "rgba(0, 0, 0, 0.5)",
|
||||
"badge": "#31b1ce",
|
||||
"messageBg": "@bg",
|
||||
"success": "#86b300",
|
||||
"error": "#ec4137",
|
||||
"warn": "#ecb637",
|
||||
"codeString": "#ffb675",
|
||||
"codeNumber": "#cfff9e",
|
||||
"codeBoolean": "#c59eff",
|
||||
"htmlThemeColor": "@bg",
|
||||
"X2": ":darken<2<@panel",
|
||||
"X3": "rgba(255, 255, 255, 0.05)",
|
||||
"X4": "rgba(255, 255, 255, 0.1)",
|
||||
"X5": "rgba(255, 255, 255, 0.05)",
|
||||
"X6": "rgba(255, 255, 255, 0.15)",
|
||||
"X7": "rgba(255, 255, 255, 0.05)",
|
||||
"X8": ":lighten<5<@accent",
|
||||
"X9": ":darken<5<@accent",
|
||||
"X10": ":alpha<0.4<@accent",
|
||||
"X11": "rgba(0, 0, 0, 0.3)",
|
||||
"X12": "rgba(255, 255, 255, 0.1)",
|
||||
"X13": "rgba(255, 255, 255, 0.15)",
|
||||
"X14": ":alpha<0.5<@navBg",
|
||||
"X15": ":alpha<0<@panel",
|
||||
"X16": ":alpha<0.7<@panel",
|
||||
"X17": ":alpha<0.8<@bg"
|
||||
},
|
||||
"author": "Leafus",
|
||||
"id": "ec668ba7-7682-486a-a10f-b4a5b2717d92",
|
||||
"name": "Puppy Space Theme"
|
||||
}
|
||||
94
packages/frontend-shared/themes/pwDark.json5
Normal file
94
packages/frontend-shared/themes/pwDark.json5
Normal file
@@ -0,0 +1,94 @@
|
||||
{
|
||||
id: 'dark',
|
||||
|
||||
name: 'Pawkey Dark',
|
||||
author: 'Leafus',
|
||||
desc: 'Pawkey Dark theme from our own Colorscheme',
|
||||
kind: 'dark',
|
||||
|
||||
props: {
|
||||
accent: '#b89bea',
|
||||
accentDarken: ':darken<10<@accent',
|
||||
accentLighten: ':lighten<10<@accent',
|
||||
accentedBg: ':alpha<0.15<@accent',
|
||||
love: '#dd2e44',
|
||||
focus: ':alpha<0.3<@accent',
|
||||
bg: '#09090a',
|
||||
acrylicBg: ':alpha<0.5<@bg',
|
||||
fg: '#f7efff',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
fgHighlighted: ':lighten<3<@fg',
|
||||
fgOnAccent: '#000000',
|
||||
fgOnWhite: '#333',
|
||||
divider: 'rgba(255, 255, 255, 0.1)',
|
||||
indicator: '@accent',
|
||||
panel: ':lighten<3<@bg',
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
panelBorder: 'solid 1px var(--MI_THEME-divider)',
|
||||
thread: ':lighten<12<@panel',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
windowHeader: ':alpha<0.85<@panel',
|
||||
popup: ':lighten<3<@panel',
|
||||
shadow: 'rgba(0, 0, 0, 0.3)',
|
||||
header: ':alpha<0.7<@panel',
|
||||
navBg: '@panel',
|
||||
navFg: '@fg',
|
||||
navHoverFg: ':lighten<17<@fg',
|
||||
navActive: '@accent',
|
||||
navIndicator: '@indicator',
|
||||
link: '#b89bea',
|
||||
hashtag: '#b89bea',
|
||||
mention: '@accent',
|
||||
mentionMe: '@mention',
|
||||
renote: '#fb96f9',
|
||||
modalBg: 'rgba(0, 0, 0, 0.5)',
|
||||
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
|
||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||
dateLabelFg: '@fg',
|
||||
infoBg: '#adedff',
|
||||
infoFg: '#fff',
|
||||
infoWarnBg: '#704830',
|
||||
infoWarnFg: '#fab387',
|
||||
folderHeaderBg: 'rgba(255, 255, 255, 0.05)',
|
||||
folderHeaderHoverBg: 'rgba(255, 255, 255, 0.1)',
|
||||
buttonBg: ':lighten<5<@panel',
|
||||
buttonHoverBg: ':lighten<10<@panel',
|
||||
buttonGradateA: '@accent',
|
||||
buttonGradateB: ':hue<20<@accent',
|
||||
switchBg: 'rgba(255, 255, 255, 0.15)',
|
||||
switchOffBg: 'rgba(255, 255, 255, 0.1)',
|
||||
switchOffFg: ':alpha<0.8<@fg',
|
||||
switchOnBg: '@accentedBg',
|
||||
switchOnFg: '@accent',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||
badge: '#89dceb',
|
||||
messageBg: '@bg',
|
||||
success: '#c3ffad',
|
||||
error: '#ff5557',
|
||||
warn: '#f9e2af',
|
||||
codeString: '#ffb675',
|
||||
codeNumber: '#cfff9e',
|
||||
codeBoolean: '#c59eff',
|
||||
deckBg: '#000',
|
||||
htmlThemeColor: '@bg',
|
||||
X3: 'rgba(255, 255, 255, 0.05)',
|
||||
X4: 'rgba(255, 255, 255, 0.1)',
|
||||
X5: 'rgba(255, 255, 255, 0.05)',
|
||||
X6: 'rgba(255, 255, 255, 0.15)',
|
||||
X7: 'rgba(255, 255, 255, 0.05)',
|
||||
X11: 'rgba(0, 0, 0, 0.3)',
|
||||
X12: 'rgba(255, 255, 255, 0.1)',
|
||||
X13: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
|
||||
codeHighlighter: {
|
||||
base: 'one-dark-pro',
|
||||
},
|
||||
}
|
||||
@@ -4,16 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="instance" :class="$style.root" :style="{ backgroundImage: `url(${ instance.backgroundImageUrl })` }"></div>
|
||||
<template v-if="instance">
|
||||
<video v-if="isVideo" :class="$style.root" :src="instance.backgroundImageUrl" autoplay loop muted
|
||||
playsinline></video>
|
||||
<div v-else :class="$style.root" :style="{ backgroundImage: `url(${instance.backgroundImageUrl})` }"></div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { instance } from '@/instance.js';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const isVideo = computed(() => {
|
||||
if (!instance?.backgroundImageUrl) return false;
|
||||
const url = instance.backgroundImageUrl.toLowerCase();
|
||||
return url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
video {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #user>
|
||||
<MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)">
|
||||
<MkUserName :user="note.user"/>
|
||||
<MkAvatar :user="note.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
</I18n>
|
||||
@@ -495,7 +496,7 @@ if (!props.mock) {
|
||||
}
|
||||
}
|
||||
|
||||
function boostVisibility(forceMenu: boolean = false) {
|
||||
function boostVisibility(forceMenu = false) {
|
||||
if (renoting) return;
|
||||
|
||||
if (!prefer.s.showVisibilitySelectorOnBoost && !forceMenu) {
|
||||
@@ -505,7 +506,7 @@ function boostVisibility(forceMenu: boolean = false) {
|
||||
}
|
||||
}
|
||||
|
||||
function renote(visibility: Visibility, localOnly: boolean = false) {
|
||||
function renote(visibility: Visibility, localOnly = false) {
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
showMovedDialog();
|
||||
|
||||
@@ -1204,9 +1205,12 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: var(--MI-radius-sm);
|
||||
transition: all 300ms;
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
background: color-mix(in srgb, var(--MI_THEME-renote) 10%, transparent) !important;
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -498,7 +498,7 @@ useTooltip(quoteButton, async (showing) => {
|
||||
});
|
||||
});
|
||||
|
||||
function boostVisibility(forceMenu: boolean = false) {
|
||||
function boostVisibility(forceMenu = false) {
|
||||
if (renoting) return;
|
||||
|
||||
if (!prefer.s.showVisibilitySelectorOnBoost && !forceMenu) {
|
||||
@@ -532,7 +532,7 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') {
|
||||
});
|
||||
}
|
||||
|
||||
function renote(visibility: Visibility, localOnly: boolean = false) {
|
||||
function renote(visibility: Visibility, localOnly = false) {
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
showMovedDialog();
|
||||
|
||||
@@ -1084,9 +1084,12 @@ function animatedMFM() {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: var(--MI-radius-sm);
|
||||
transition: all 300ms;
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
background: color-mix(in srgb, var(--MI_THEME-renote) 10%, transparent) !important;
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -302,7 +302,7 @@ function boostVisibility(forceMenu: boolean = false) {
|
||||
}
|
||||
}
|
||||
|
||||
function renote(visibility: Visibility, localOnly: boolean = false) {
|
||||
function renote(visibility: Visibility, localOnly = false) {
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
showMovedDialog();
|
||||
|
||||
@@ -459,11 +459,14 @@ if (props.detail) {
|
||||
.noteFooterButton {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
padding-top: 10px;
|
||||
opacity: 0.7;
|
||||
margin-top: 10px;
|
||||
border-radius: var(--MI-radius-sm);
|
||||
transition: all 300ms;
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
background: color-mix(in srgb, var(--MI_THEME-renote) 10%, transparent) !important;
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,19 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template>
|
||||
<div :class="$style.wrapper" data-cy-signin-page-password>
|
||||
<div class="_gaps" :class="$style.root">
|
||||
<div :class="$style.avatar" :style="{ backgroundImage: user ? `url('${user.avatarUrl}')` : undefined }"></div>
|
||||
<div :class="$style.avatar">
|
||||
<i class="ti ti-user"></i>
|
||||
</div>
|
||||
<div :class="$style.welcomeBackMessage">
|
||||
<I18n :src="i18n.ts.welcomeBackWithName" tag="span">
|
||||
<template #name><Mfm :text="user.name ?? user.username" :plain="true"/></template>
|
||||
<template #name><Mfm :text="username || 'User'" :plain="true"/></template>
|
||||
</I18n>
|
||||
</div>
|
||||
|
||||
<!-- password入力 -->
|
||||
<form class="_gaps_s" @submit.prevent="onSubmit">
|
||||
<!-- ブラウザ オートコンプリート用 -->
|
||||
<input type="hidden" name="username" autocomplete="username" :value="user.username">
|
||||
<input type="hidden" name="username" autocomplete="username" :value="username">
|
||||
|
||||
<MkInput v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required autofocus data-cy-signin-password>
|
||||
<MkInput v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required autofocus data-cy-signin-page-password>
|
||||
<template #prefix><i class="ti ti-lock"></i></template>
|
||||
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
|
||||
</MkInput>
|
||||
@@ -29,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
|
||||
<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
|
||||
<MkCaptcha v-if="instance.enableFC" ref="fc" v-model="fcResponse" provider="fc" :sitekey="instance.fcSiteKey"/>
|
||||
<MkCaptcha v-if="instance.enableTestcaptcha" ref="testcaptcha" v-model="testcaptchaResponse" provider="testcaptcha"/>
|
||||
<MkCaptcha v-if="instance.enableTestcaptcha" ref="testcaptcha" v-model="testcaptchaResponse" provider="testcaptcha" :sitekey="null"/>
|
||||
</div>
|
||||
|
||||
<MkButton type="submit" :disabled="needCaptcha && captchaFailed" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
@@ -53,7 +55,7 @@ export type PwResponse = {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, useTemplateRef, defineAsyncComponent } from 'vue';
|
||||
import { ref, computed, useTemplateRef, defineAsyncComponent, onMounted, watch } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
|
||||
import { instance } from '@/instance.js';
|
||||
@@ -65,7 +67,8 @@ import MkInput from '@/components/MkInput.vue';
|
||||
import MkCaptcha from '@/components/MkCaptcha.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
user: Misskey.entities.UserDetailed;
|
||||
user?: Misskey.entities.UserDetailed | null;
|
||||
username: string;
|
||||
needCaptcha: boolean;
|
||||
}>();
|
||||
|
||||
@@ -129,6 +132,14 @@ function resetCaptcha() {
|
||||
testcaptcha.value?.reset();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('XPassword mounted with username:', props.username);
|
||||
});
|
||||
|
||||
watch(() => props.username, (newUsername) => {
|
||||
console.log('Username changed in XPassword:', newUsername);
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
resetCaptcha,
|
||||
});
|
||||
@@ -147,13 +158,15 @@ defineExpose({
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin: 0 auto 0 auto;
|
||||
width: 64px;
|
||||
margin: 0 auto;
|
||||
background-color: color-mix(in srgb, var(--MI_THEME-fg), transparent 85%);
|
||||
color: color-mix(in srgb, var(--MI_THEME-fg), transparent 25%);
|
||||
text-align: center;
|
||||
height: 64px;
|
||||
background: #ddd;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 100%;
|
||||
width: 64px;
|
||||
font-size: 24px;
|
||||
line-height: 64px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.welcomeBackMessage {
|
||||
|
||||
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
key="password"
|
||||
ref="passwordPageEl"
|
||||
|
||||
:user="userInfo!"
|
||||
:username="userInfo?.username ?? ''"
|
||||
:needCaptcha="needCaptcha"
|
||||
|
||||
@passwordSubmitted="onPasswordSubmitted"
|
||||
@@ -159,13 +159,23 @@ function onUseTotp(): void {
|
||||
|
||||
async function onUsernameSubmitted(username: string) {
|
||||
waiting.value = true;
|
||||
console.log('Username submitted:', username);
|
||||
|
||||
userInfo.value = await misskeyApi('users/show', {
|
||||
username,
|
||||
}).catch(() => null);
|
||||
// Store the username even if the API call fails
|
||||
const submittedUsername = username;
|
||||
|
||||
// Only fetch user info if we don't already have it
|
||||
if (!userInfo.value || userInfo.value.username !== username) {
|
||||
userInfo.value = await misskeyApi('users/show', {
|
||||
username,
|
||||
}).catch(() => {
|
||||
// If the API call fails, create a minimal user object with just the username
|
||||
return { username } as Misskey.entities.UserDetailed;
|
||||
});
|
||||
}
|
||||
|
||||
await tryLogin({
|
||||
username,
|
||||
username: submittedUsername,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -188,9 +198,7 @@ async function onPasswordSubmitted(pw: PwResponse) {
|
||||
'hcaptcha-response': pw.captcha.hCaptchaResponse,
|
||||
'm-captcha-response': pw.captcha.mCaptchaResponse,
|
||||
'g-recaptcha-response': pw.captcha.reCaptchaResponse,
|
||||
'frc-captcha-solution': pw.captcha.fcResponse,
|
||||
'turnstile-response': pw.captcha.turnstileResponse,
|
||||
'testcaptcha-response': pw.captcha.testcaptchaResponse,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -238,11 +246,13 @@ async function tryLogin(req: Partial<Misskey.entities.SigninFlowRequest>): Promi
|
||||
case 'captcha': {
|
||||
needCaptcha.value = true;
|
||||
page.value = 'password';
|
||||
console.log('Page changed to password (captcha), userInfo:', userInfo.value);
|
||||
break;
|
||||
}
|
||||
case 'password': {
|
||||
needCaptcha.value = false;
|
||||
page.value = 'password';
|
||||
console.log('Page changed to password, userInfo:', userInfo.value);
|
||||
break;
|
||||
}
|
||||
case 'totp': {
|
||||
|
||||
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
>
|
||||
<div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
|
||||
<div v-if="user != null">
|
||||
<div :class="$style.banner" :style="user.bannerUrl ? { backgroundImage: `url(${prefer.s.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` } : ''">
|
||||
<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${prefer.s.disableShowingAnimatedImages ? getStaticImageUrl(user.bannerUrl) : user.bannerUrl})` : ''">
|
||||
<span v-if="$i && $i.id != user.id && user.isFollowed && user.isFollowing" :class="$style.followed">{{ i18n.ts.mutuals }}</span>
|
||||
<span v-else-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
|
||||
<span v-else-if="$i && $i.id != user.id && user.isFollowing" :class="$style.followed">{{ i18n.ts.following }}</span>
|
||||
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</div>
|
||||
<svg viewBox="0 0 128 128" :class="$style.avatarBack">
|
||||
<g transform="matrix(1.6,0,0,1.6,-38.4,-51.2)">
|
||||
<path d="M64,32C81.661,32 96,46.339 96,64C95.891,72.184 104,72 104,72C104,72 74.096,80 64,80C52.755,80 24,72 24,72C24,72 31.854,72.018 32,64C32,46.339 46.339,32 64,32Z" style="fill: var(--MI_THEME-popup);"/>
|
||||
<path d="M64,32C81.661,32 96,46.339 96,64C96,72 104,72 104,72C104,72 74.096,80 64,80C52.755,80 24,72 24,72C24,72 32,72 32,64C32,46.339 46.339,32 64,32Z" style="fill: var(--MI_THEME-popup);"/>
|
||||
</g>
|
||||
</svg>
|
||||
<MkAvatar :class="$style.avatar" :user="user" indicator/>
|
||||
|
||||
@@ -4,22 +4,43 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="instance" :class="$style.root">
|
||||
<PwVisitorMusic/>
|
||||
<div :class="[$style.main, $style.panel]">
|
||||
<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl ? $style.wideIcon : $style.mainIcon"/>
|
||||
<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
|
||||
<div :class="$style.mainFg">
|
||||
<h1 :class="$style.mainTitle">
|
||||
<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
|
||||
<!-- <img class="logo" v-if="instance.logoImageUrl" :src="instance.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
|
||||
<span>{{ instanceName }}</span>
|
||||
</h1>
|
||||
<div :class="$style.mainAbout">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="sanitizeHtml(instance.description) || i18n.ts.headlineMisskey"></div>
|
||||
<div v-if="instance" :class="$style.root">
|
||||
<div :class="[$style.main, $style.panel]">
|
||||
<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt=""
|
||||
:class="instance.sidebarLogoUrl ? $style.wideIcon : $style.mainIcon" />
|
||||
<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i
|
||||
class="ti ti-dots"></i></button>
|
||||
<div :class="$style.mainFg">
|
||||
<h1 :class="$style.mainTitle">
|
||||
<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
|
||||
<!-- <img class="logo" v-if="instance.logoImageUrl" :src="instance.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
|
||||
<span>{{ instanceName }}</span>
|
||||
</h1>
|
||||
<div :class="$style.mainAbout">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div v-html="sanitizeHtml(instance.description) || i18n.ts.headlineMisskey"></div>
|
||||
</div>
|
||||
<div v-if="instance.disableRegistration || instance.federation !== 'all'" :class="$style.mainWarn"
|
||||
class="_gaps_s">
|
||||
<MkInfo v-if="instance.disableRegistration" warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
|
||||
<MkInfo v-if="instance.federation === 'specified'" warn>{{ i18n.ts.federationSpecified }}</MkInfo>
|
||||
<MkInfo v-else-if="instance.federation === 'none'" warn>{{ i18n.ts.federationDisabled }}</MkInfo>
|
||||
</div>
|
||||
<div v-if="instance.approvalRequiredForSignup" :class="$style.mainWarn">
|
||||
<MkInfo warn>{{ i18n.ts.approvalRequiredToRegister }}</MkInfo>
|
||||
</div>
|
||||
<div class="_gaps_s" :class="$style.mainActions">
|
||||
<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;"
|
||||
@click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
|
||||
<MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">{{ i18n.ts.login
|
||||
}}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="instance.disableRegistration || instance.federation !== 'all'" :class="$style.mainWarn" class="_gaps_s">
|
||||
<div
|
||||
v-if="instance.disableRegistration || instance.federation !== 'all'" :class="$style.mainWarn"
|
||||
class="_gaps_s"
|
||||
>
|
||||
<MkInfo v-if="instance.disableRegistration" warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
|
||||
<MkInfo v-if="instance.federation === 'specified'" warn>{{ i18n.ts.federationSpecified }}</MkInfo>
|
||||
<MkInfo v-else-if="instance.federation === 'none'" warn>{{ i18n.ts.federationDisabled }}</MkInfo>
|
||||
@@ -27,29 +48,36 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<div v-if="instance.approvalRequiredForSignup" :class="$style.mainWarn">
|
||||
<MkInfo warn>{{ i18n.ts.approvalRequiredToRegister }}</MkInfo>
|
||||
</div>
|
||||
<div class="_gaps_s" :class="$style.mainActions">
|
||||
<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
|
||||
<MkButton v-if="instance.policies.ltlAvailable" :class="$style.mainAction" full rounded link to="/explore">{{ i18n.ts.explore }}</MkButton>
|
||||
<MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
|
||||
<div :class="$style.mainActions">
|
||||
<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup @click="signup()">
|
||||
{{ i18n.ts.joinThisServer }}
|
||||
</MkButton>
|
||||
<MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">
|
||||
{{ i18n.ts.login }}
|
||||
</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="stats" :class="$style.stats">
|
||||
<div :class="[$style.statsItem, $style.panel]">
|
||||
<div :class="$style.statsItemLabel">{{ i18n.ts.users }}</div>
|
||||
<div :class="$style.statsItemCount"><MkNumber :value="stats.originalUsersCount"/></div>
|
||||
<div :class="$style.statsItemCount">
|
||||
<MkNumber :value="stats.originalUsersCount"/>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[$style.statsItem, $style.panel]">
|
||||
<div :class="$style.statsItemLabel">{{ i18n.ts.notes }}</div>
|
||||
<div :class="$style.statsItemCount"><MkNumber :value="stats.originalNotesCount"/></div>
|
||||
<div :class="$style.statsItemCount">
|
||||
<MkNumber :value="stats.originalNotesCount"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="instance.policies.ltlAvailable" :class="[$style.tl, $style.panel]">
|
||||
<!-- <div v-if="instance.policies.ltlAvailable" :class="[$style.tl, $style.panel]">
|
||||
<div :class="$style.tlHeader">{{ i18n.ts.letsLookAtTimeline }}</div>
|
||||
<div :class="$style.tlBody">
|
||||
<MkTimeline src="local"/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div :class="$style.panel">
|
||||
<XActiveUsersChart/>
|
||||
</div>
|
||||
@@ -59,14 +87,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import sanitizeHtml from '@/utility/sanitize-html.js';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import sanitizeHtml from '@/scripts/sanitize-html.js';
|
||||
import XSigninDialog from '@/components/MkSigninDialog.vue';
|
||||
import XSignupDialog from '@/components/MkSignupDialog.vue';
|
||||
import PwVisitorMusic from '@/components/PwVisitorMusic.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
@@ -74,7 +103,6 @@ import { instance } from '@/instance.js';
|
||||
import MkNumber from '@/components/MkNumber.vue';
|
||||
import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue';
|
||||
import { openInstanceMenu } from '@/ui/_common_/common.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
|
||||
const stats = ref<Misskey.entities.StatsResponse | null>(null);
|
||||
|
||||
@@ -114,8 +142,9 @@ function showMenu(ev: MouseEvent) {
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--MI-radius);
|
||||
background: color-mix(in srgb, var(--MI_THEME-bg) 50%, transparent) !important;
|
||||
backdrop-filter: blur(25px);
|
||||
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
@@ -176,6 +205,9 @@ function showMenu(ev: MouseEvent) {
|
||||
}
|
||||
|
||||
.mainActions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
|
||||
@@ -77,6 +77,7 @@ const themeColorStyle = computed<CSSProperties>(() => {
|
||||
|
||||
.icon {
|
||||
height: 2ex;
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -28,6 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #user>
|
||||
<MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)">
|
||||
<MkUserName :user="note.user"/>
|
||||
<MkAvatar :user="note.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
</I18n>
|
||||
@@ -494,7 +495,7 @@ if (!props.mock) {
|
||||
}
|
||||
}
|
||||
|
||||
function boostVisibility(forceMenu: boolean = false) {
|
||||
function boostVisibility(forceMenu = false) {
|
||||
if (renoting) return;
|
||||
|
||||
if (!prefer.s.showVisibilitySelectorOnBoost && !forceMenu) {
|
||||
@@ -504,7 +505,7 @@ function boostVisibility(forceMenu: boolean = false) {
|
||||
}
|
||||
}
|
||||
|
||||
function renote(visibility: Visibility, localOnly: boolean = false) {
|
||||
function renote(visibility: Visibility, localOnly = false) {
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
showMovedDialog();
|
||||
|
||||
@@ -948,6 +949,12 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
|
||||
.footerButton {
|
||||
font-size: 90%;
|
||||
color: var(--MI_THEME-renote);
|
||||
background: color-mix(in srgb, var(--MI_THEME-renote) 10%, transparent) !important;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1020,7 +1027,6 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
|
||||
.renoteAvatar {
|
||||
flex-shrink: 0;
|
||||
display: none; /* same as Firefish, but keeping the element around in case someone wants to add it back via CSS override */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 8px 0 0;
|
||||
@@ -1234,9 +1240,12 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: var(--MI-radius-sm);
|
||||
transition: all 300ms;
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
background: color-mix(in srgb, var(--MI_THEME-renote) 10%, transparent) !important;
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #user>
|
||||
<MkA v-user-preview="note.userId" :class="$style.renoteName" :to="userPage(note.user)">
|
||||
<MkUserName :user="note.user"/>
|
||||
<MkAvatar :user="note.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
</I18n>
|
||||
@@ -503,7 +504,7 @@ useTooltip(quoteButton, async (showing) => {
|
||||
});
|
||||
});
|
||||
|
||||
function boostVisibility(forceMenu: boolean = false) {
|
||||
function boostVisibility(forceMenu = false) {
|
||||
if (renoting) return;
|
||||
|
||||
if (!prefer.s.showVisibilitySelectorOnBoost && !forceMenu) {
|
||||
@@ -537,7 +538,7 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') {
|
||||
});
|
||||
}
|
||||
|
||||
function renote(visibility: Visibility, localOnly: boolean = false) {
|
||||
function renote(visibility: Visibility, localOnly = false) {
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
showMovedDialog();
|
||||
|
||||
@@ -1143,9 +1144,12 @@ onUnmounted(() => {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
border-radius: var(--MI-radius-sm);
|
||||
transition: all 300ms;
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
background: color-mix(in srgb, var(--MI_THEME-renote) 10%, transparent) !important;
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1167,6 +1171,7 @@ onUnmounted(() => {
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
border-bottom: solid 0.5px var(--MI_THEME-divider);
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@@ -1177,6 +1182,7 @@ onUnmounted(() => {
|
||||
padding: 12px 8px;
|
||||
border-top: solid 2px transparent;
|
||||
border-bottom: solid 2px transparent;
|
||||
border-radius: var(--MI-radius-lg);
|
||||
|
||||
> i {
|
||||
margin-right: 8px;
|
||||
@@ -1184,7 +1190,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.tabActive {
|
||||
border-bottom: solid 2px var(--MI_THEME-accent);
|
||||
background: color-mix(in srgb, var(--MI_THEME-accent) 10%, transparent) !important;
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
.tab_renotes {
|
||||
|
||||
@@ -316,7 +316,7 @@ function boostVisibility(forceMenu: boolean = false) {
|
||||
}
|
||||
}
|
||||
|
||||
function renote(visibility: Visibility, localOnly: boolean = false) {
|
||||
function renote(visibility: Visibility, localOnly = false) {
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
showMovedDialog();
|
||||
|
||||
@@ -517,9 +517,12 @@ if (props.detail) {
|
||||
padding: 8px;
|
||||
padding-top: 10px;
|
||||
opacity: 0.7;
|
||||
border-radius: var(--MI-radius-sm);
|
||||
transition: all 300ms;
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
background: color-mix(in srgb, var(--MI_THEME-renote) 10%, transparent) !important;
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
}
|
||||
// Responsible for Reply borders 448 and 508
|
||||
|
||||
@@ -28,10 +28,6 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref="tabHighlightEl"
|
||||
:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -201,8 +197,10 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.tabsInner {
|
||||
display: inline-block;
|
||||
height: var(--height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -210,9 +208,10 @@ onUnmounted(() => {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
color: var(--MI_THEME-accent);
|
||||
height: 35px;
|
||||
border-radius: var(--MI-radius-lg);
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@@ -220,7 +219,8 @@ onUnmounted(() => {
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
color: var(--MI_THEME-accent);
|
||||
background: color-mix(in srgb, var(--MI_THEME-accent) 10%, transparent) !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
&.animate {
|
||||
@@ -243,19 +243,9 @@ onUnmounted(() => {
|
||||
&.animate {
|
||||
transition: width .15s linear, padding-left .15s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.tabHighlight {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background: var(--MI_THEME-accent);
|
||||
border-radius: var(--MI-radius-ellipse);
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
|
||||
&.animate {
|
||||
transition: width 0.15s ease, left 0.15s ease;
|
||||
@media (max-width: 500px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -150,13 +150,7 @@ onUnmounted(() => {
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
border-bottom: solid 0.5px transparent;
|
||||
width: 100%;
|
||||
color: var(--MI_THEME-pageHeaderFg);
|
||||
}
|
||||
|
||||
@container style(--MI_THEME-pageHeaderBg: var(--MI_THEME-bg)) {
|
||||
.root {
|
||||
border-bottom: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.upper,
|
||||
@@ -242,14 +236,16 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--height);
|
||||
width: calc(var(--height) - (var(--margin)));
|
||||
width: 35px;
|
||||
margin-right: 10px;
|
||||
height: 35px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-radius: var(--MI-radius-xs);
|
||||
border-radius: var(--MI-radius-lg);
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: color-mix(in srgb, var(--MI_THEME-accent) 10%, transparent) !important;
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
|
||||
@@ -862,8 +862,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.tab {
|
||||
margin-bottom: calc(5px / 2);
|
||||
padding: calc(5px / 2) 0;
|
||||
margin-bottom: calc(var(--MI-margin) / 2);
|
||||
padding: calc(var(--MI-margin) / 2) 0;
|
||||
background: color-mix(in srgb, var(--MI_THEME-bg) 65%, transparent);
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
border-radius: var(--MI-radius-sm);
|
||||
|
||||
@@ -7,11 +7,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<div v-if="meta" :class="$style.root">
|
||||
<MkFeaturedPhotos :class="$style.bg"/>
|
||||
<XTimeline v-if="meta.policies.ltlAvailable" :class="$style.tl"/>
|
||||
<div :class="$style.shape1"></div>
|
||||
<div :class="$style.shape2"></div>
|
||||
<div :class="$style.logoWrapper">
|
||||
<div :class="$style.poweredBy">Powered by</div>
|
||||
<img :src="misskeysvg" :class="$style.misskey"/>
|
||||
<div class="logo-wrapper">
|
||||
<!-- <div class="powered-by">Powered by</div> -->
|
||||
<img :src="misskeysvg" class="misskey"/>
|
||||
</div>
|
||||
<div class="emojis">
|
||||
<MkEmoji :normal="true" :noStyle="true" emoji="🐾"/>
|
||||
@@ -22,15 +20,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<div class="contents">
|
||||
<MkVisitorDashboard/>
|
||||
</div>
|
||||
<div v-if="instances && instances.length > 0" :class="$style.federation">
|
||||
<!-- <div v-if="instances && instances.length > 0" class="federation">
|
||||
<MarqueeText :duration="40">
|
||||
<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
|
||||
<!--<MkInstanceCardMini :instance="instance"/>-->
|
||||
<img v-if="instance.iconUrl" :class="$style.federationInstanceIcon" :src="getInstanceIcon(instance)" alt=""/>
|
||||
<span class="_monospace">{{ instance.host }}</span>
|
||||
<MkInstanceCardMini :instance="instance"/>
|
||||
<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
|
||||
<span class="name _monospace">{{ instance.host }}</span>
|
||||
</MkA>
|
||||
</MarqueeText>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -76,7 +74,7 @@ misskeyApiGet('federation/instances', {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80vw; // 100%からshapeの幅を引いている
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@@ -93,30 +91,10 @@ misskeyApiGet('federation/instances', {
|
||||
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
|
||||
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shape1 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(--MI_THEME-accent);
|
||||
clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
|
||||
}
|
||||
.shape2 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(--MI_THEME-accent);
|
||||
clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.logoWrapper {
|
||||
position: fixed;
|
||||
@@ -141,11 +119,11 @@ misskeyApiGet('federation/instances', {
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
position: relative;
|
||||
width: min(430px, calc(100% - 32px));
|
||||
margin-left: 128px;
|
||||
padding: 100px 0 100px 0;
|
||||
> .contents {
|
||||
position: relative;
|
||||
width: min(500px, calc(100% - 32px));
|
||||
margin: auto;
|
||||
padding: 100px 0 100px 0;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
margin: auto;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import { markRaw, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import lightTheme from '@@/themes/l-light.json5';
|
||||
import darkTheme from '@@/themes/d-green-lime.json5';
|
||||
import darkTheme from '@@/themes/pwDark.json5';
|
||||
import { hemisphere } from '@@/js/intl-const.js';
|
||||
import type { DeviceKind } from '@/utility/device-kind.js';
|
||||
import type { Plugin } from '@/plugin.js';
|
||||
|
||||
@@ -15,14 +15,14 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--MI-radius-xs: 5px;
|
||||
--MI-radius-sm: 5px;
|
||||
--MI-radius: 5px;
|
||||
--MI-radius-md: 5px;
|
||||
--MI-radius-lg: 5px;
|
||||
--MI-radius-xl: 5px;
|
||||
--MI-radius-ellipse: 5px;
|
||||
--MI-radius-full: 5px;
|
||||
--MI-radius-xs: 7px;
|
||||
--MI-radius-sm: 9px;
|
||||
--MI-radius: 10px;
|
||||
--MI-radius-md: 12px;
|
||||
--MI-radius-lg: 15px;
|
||||
--MI-radius-xl: 18px;
|
||||
--MI-radius-ellipse: 15px;
|
||||
--MI-radius-full: 25px;
|
||||
|
||||
--MI-marginFull: 16px;
|
||||
--MI-marginHalf: 10px;
|
||||
|
||||
@@ -423,6 +423,9 @@ function getPointerEvents() {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2147483647;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
color: #ff0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px 5px;
|
||||
|
||||
@@ -449,6 +449,7 @@ function menuEdit() {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 3px;
|
||||
line-height: 2.85rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -4,13 +4,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<div v-if="!narrow && !isRoot" :class="$style.side">
|
||||
<div :class="$style.banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
|
||||
<div :class="$style.dashboard">
|
||||
<MkVisitorDashboard/>
|
||||
<div :class="$style.root">
|
||||
<div v-if="!narrow && !isRoot" :class="$style.side">
|
||||
<div :class="$style.banner">
|
||||
<video v-if="isVideo" :src="instance.backgroundImageUrl" autoplay loop muted playsinline></video>
|
||||
<div v-else
|
||||
class="image"
|
||||
:style="{ backgroundImage: instance.backgroundImageUrl ? `url(${instance.backgroundImageUrl})` : 'none' }">
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.dashboard">
|
||||
<MkVisitorDashboard />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="$style.main">
|
||||
<button v-if="!isRoot" :class="$style.homeButton" class="_button" @click="goHome">
|
||||
@@ -71,10 +77,50 @@ onMounted(() => {
|
||||
}, { passive: true });
|
||||
}
|
||||
});
|
||||
|
||||
const isVideo = computed(() => {
|
||||
if (!instance?.backgroundImageUrl) return false;
|
||||
const url = instance.backgroundImageUrl.toLowerCase();
|
||||
return url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg');
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
showMenu: showMenu,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate(-25deg)
|
||||
}
|
||||
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate(10deg)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:500px) {
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: none
|
||||
}
|
||||
|
||||
.github-corner .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" module>
|
||||
@@ -115,29 +161,119 @@ onMounted(() => {
|
||||
background: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
aspect-ratio: 1.5;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
|
||||
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
|
||||
}
|
||||
>.banner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
|
||||
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
|
||||
|
||||
.dashboard {
|
||||
position: relative;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
> video {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
> .image {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
>.dashboard {
|
||||
position: relative;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
>.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
>.header {
|
||||
background: var(--MI_THEME-panel);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
>.wide {
|
||||
line-height: 50px;
|
||||
padding: 0 16px;
|
||||
|
||||
>.link {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
>.narrow {
|
||||
>.menu {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.menu-back {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
>.menu {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 240px;
|
||||
height: 100vh;
|
||||
background: var(--MI_THEME-panel);
|
||||
|
||||
>.link {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
|
||||
>.icon {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
>.divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
>.action {
|
||||
padding: 16px;
|
||||
|
||||
>button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-radius: var(--MI-radius-ellipse);
|
||||
|
||||
&._button {
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user