Files
AstralRinth/apps/frontend/src/pages/auth.vue
Prospector c39bb78e38 App redesign (#2946)
* Start of app redesign

* format

* continue progress

* Content page nearly done

* Fix recursion issues with content page

* Fix update all alignment

* Discover page progress

* Settings progress

* Removed unlocked-size hack that breaks web

* Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues

* Ads + run prettier

* Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor

* fix ads not hiding when plus log in

* rev lockfile changes/conflicts

* Fix sign in page

* Add generated

* (mostly) Data driven search

* Fix search mobile issue

* profile fixes

* Project versions page, fix typescript on UI lib and misc fixes

* Remove unused gallery component

* Fix linkfunction err

* Search filter controls at top, localization for locked filters

* Fix provided filter names

* Fix navigating from instance browse to main browse

* Friends frontend (#2995)

* Friends system frontend

* (almost) finish frontend

* finish friends, fix lint

* Fix lint

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

* Refresh macOS app icon

* Update web search UI more

* Fix link opens

* Fix frontend build

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2024-12-11 19:54:18 -08:00

103 lines
1.6 KiB
Vue

<script setup lang="ts">
definePageMeta({
middleware: ["launcher-auth"],
});
</script>
<template>
<NuxtPage class="auth-container universal-card" />
</template>
<style>
.auth-container {
width: 26rem;
max-width: calc(100% - 2rem);
margin: 1rem auto;
display: flex;
flex-direction: column;
gap: 2rem;
}
.auth-container h1 {
font-size: var(--font-size-xl);
margin: 0 0 -1rem 0;
color: var(--color-contrast);
}
.auth-container p {
margin: 0;
}
.auth-container .btn {
font-weight: 700;
min-height: 2.5rem;
text-decoration: none;
}
.centered-btn {
margin-inline: auto;
}
.btn.continue-btn svg {
margin: 0 0 0 0.5rem;
}
.third-party {
display: grid;
gap: var(--gap-md);
grid-template-columns: repeat(2, 1fr);
width: 100%;
}
.third-party .btn {
width: 100%;
vertical-align: middle;
}
.third-party .btn svg {
margin-right: var(--gap-sm);
width: 1.25rem;
height: 1.25rem;
}
@media screen and (max-width: 25.5rem) {
.third-party .btn {
grid-column: 1 / 3;
}
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--gap-md);
}
.auth-form .auth-form__input {
width: 100%;
flex-basis: auto;
}
.auth-form__additional-options {
align-items: center;
display: flex;
justify-content: center;
gap: var(--gap-md);
flex-wrap: wrap;
}
.turnstile {
display: flex;
justify-content: center;
overflow: hidden;
border-radius: var(--radius-md);
border: 2px solid var(--color-button-bg);
height: 65px;
width: 100%;
> div {
position: relative;
top: -2px;
min-width: calc(100% + 4px);
}
}
</style>