im0o
fb1dd401b2
主题用 <html> 的 data-theme 标记显式选择，tokens.css 新增两组选择器块， 权重压过 prefers-color-scheme；选「跟随系统」则不标记，交回媒体查询， 系统主题切换时界面仍跟着变。 顺带把 InboundForm 和 TokenGate 里硬编码的 #fff 换成 var(--c-bg)： 深色主题的强调色是浅青，白字压在上面对比度不够，深色下会看不清。
89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
const emit = defineEmits<{ submit: [token: string] }>()
|
||
const value = ref('')
|
||
</script>
|
||
|
||
<template>
|
||
<div class="gate">
|
||
<form class="box" @submit.prevent="emit('submit', value)">
|
||
<h1>Patchbay</h1>
|
||
<p class="lead">需要访问令牌。</p>
|
||
<input
|
||
v-model="value"
|
||
class="field mono"
|
||
type="password"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
placeholder="令牌"
|
||
autofocus
|
||
/>
|
||
<button class="go" type="submit" :disabled="!value.trim()">进入</button>
|
||
<p class="where">
|
||
令牌位于服务端配置文件的同级目录 <code>.patchbay-token</code>，启动时也会输出到控制台。
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.gate {
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: 100%;
|
||
padding: var(--s-6);
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
max-width: 360px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
h1 {
|
||
font-size: var(--t-2xl);
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.lead {
|
||
color: var(--c-text-soft);
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.field {
|
||
width: 100%;
|
||
padding: var(--s-3) var(--s-4);
|
||
border: 1px solid var(--c-border-strong);
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-surface);
|
||
}
|
||
|
||
.go {
|
||
padding: var(--s-3) var(--s-4);
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-accent);
|
||
color: var(--c-bg);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.go:disabled {
|
||
background: var(--c-surface-sunken);
|
||
color: var(--c-text-faint);
|
||
border-color: var(--c-border);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.where {
|
||
color: var(--c-text-faint);
|
||
font-size: var(--t-sm);
|
||
line-height: 1.6;
|
||
margin-top: var(--s-2);
|
||
}
|
||
</style>
|