From 3401ab012869662a5c1a624479165fcc81408c3f Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sun, 7 May 2023 10:04:14 +0900 Subject: [PATCH] :art: --- packages/frontend/src/pages/welcome.setup.vue | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue index 212d156a8..7728d97a6 100644 --- a/packages/frontend/src/pages/welcome.setup.vue +++ b/packages/frontend/src/pages/welcome.setup.vue @@ -1,8 +1,11 @@ <template> -<form class="mk-setup" @submit.prevent="submit()"> - <h1>Welcome to Misskey!</h1> - <div class="_gaps_m"> - <p>{{ i18n.ts.intro }}</p> +<form :class="$style.root" class="_panel" @submit.prevent="submit()"> + <div :class="$style.title"> + <div>Welcome to Misskey!</div> + <div :class="$style.version">v{{ version }}</div> + </div> + <div class="_gaps_m" style="padding: 32px;"> + <div>{{ i18n.ts.intro }}</div> <MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username> <template #label>{{ i18n.ts.username }}</template> <template #prefix>@</template> @@ -12,8 +15,8 @@ <template #label>{{ i18n.ts.password }}</template> <template #prefix><i class="ti ti-lock"></i></template> </MkInput> - <div class="bottom"> - <MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok> + <div> + <MkButton gradate large rounded type="submit" :disabled="submitting" data-cy-admin-ok style="margin: 0 auto;"> {{ submitting ? i18n.ts.processing : i18n.ts.done }}<MkEllipsis v-if="submitting"/> </MkButton> </div> @@ -25,7 +28,7 @@ import { } from 'vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; -import { host } from '@/config'; +import { host, version } from '@/config'; import * as os from '@/os'; import { login } from '@/account'; import { i18n } from '@/i18n'; @@ -54,36 +57,28 @@ function submit() { } </script> -<style lang="scss" scoped> -.mk-setup { +<style lang="scss" module> +.root { border-radius: var(--radius); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); overflow: hidden; max-width: 500px; margin: 32px auto; +} - > h1 { - margin: 0; - font-size: 1.5em; - text-align: center; - padding: 32px; - background: var(--accent); - color: #fff; - } +.title { + margin: 0; + font-size: 1.5em; + text-align: center; + padding: 32px; + background: var(--accentedBg); + color: var(--accent); + font-weight: bold; +} - > div { - padding: 32px; - background: var(--panel); - - > p { - margin-top: 0; - } - - > .bottom { - > * { - margin: 0 auto; - } - } - } +.version { + font-size: 70%; + font-weight: normal; + opacity: 0.7; } </style>