Skip to content

Commit bcee3c3

Browse files
nulfrostnulfrost
committed
chore: move modal transition styles into main.css
1 parent 2515f33 commit bcee3c3

3 files changed

Lines changed: 120 additions & 116 deletions

File tree

‎app/assets/main.css‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -555,11 +555,30 @@ input[type='search']::-webkit-search-results-decoration {
555555
}
556556

557557
/* Locking the scroll whenever any of the modals are open */
558-
html:has(dialog[open]) {
558+
html:has(dialog:open) {
559559
overflow: hidden;
560560
}
561561

562562
/* Backdrop styling when any of the modals are open */
563-
dialog[open]::backdrop {
563+
dialog:open::backdrop {
564564
@apply bg-black/60;
565565
}
566+
567+
/* Modal transition styles */
568+
dialog {
569+
opacity: 0;
570+
transition: opacity 200ms ease;
571+
transition-behavior: allow-discrete;
572+
}
573+
574+
dialog:open {
575+
opacity: 1;
576+
transition: opacity 200ms ease;
577+
transition-behavior: allow-discrete;
578+
}
579+
580+
@starting-style {
581+
dialog:open {
582+
opacity: 0;
583+
}
584+
}

‎app/components/AuthModal.client.vue‎

Lines changed: 98 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -37,123 +37,108 @@ async function handleLogin() {
3737
</script>
3838

3939
<template>
40-
<Transition
41-
enter-active-class="transition-opacity duration-200"
42-
leave-active-class="transition-opacity duration-200"
43-
enter-from-class="opacity-0"
44-
leave-to-class="opacity-0"
45-
>
46-
<!-- Modal -->
47-
<Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg text-white">
48-
<div v-if="user?.handle" class="space-y-4">
49-
<div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
50-
<span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
51-
<div>
52-
<p class="font-mono text-xs text-fg-muted">
53-
{{ $t('auth.modal.connected_as', { handle: user.handle }) }}
54-
</p>
55-
</div>
40+
<!-- Modal -->
41+
<Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg">
42+
<div v-if="user?.handle" class="space-y-4">
43+
<div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
44+
<span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
45+
<div>
46+
<p class="font-mono text-xs text-fg-muted">
47+
{{ $t('auth.modal.connected_as', { handle: user.handle }) }}
48+
</p>
5649
</div>
57-
<button
58-
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
59-
@click="logout"
60-
>
61-
{{ $t('auth.modal.disconnect') }}
62-
</button>
6350
</div>
51+
<button
52+
class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
53+
@click="logout"
54+
>
55+
{{ $t('auth.modal.disconnect') }}
56+
</button>
57+
</div>
6458

65-
<!-- Disconnected state -->
66-
<form v-else class="space-y-4" @submit.prevent="handleLogin">
67-
<p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
68-
69-
<div class="space-y-3">
70-
<div>
71-
<label
72-
for="handle-input"
73-
class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
74-
>
75-
{{ $t('auth.modal.handle_label') }}
76-
</label>
77-
<input
78-
id="handle-input"
79-
v-model="handleInput"
80-
type="text"
81-
name="handle"
82-
:placeholder="$t('auth.modal.handle_placeholder')"
83-
autocomplete="off"
84-
spellcheck="false"
85-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
86-
/>
87-
</div>
59+
<!-- Disconnected state -->
60+
<form v-else class="space-y-4" @submit.prevent="handleLogin">
61+
<p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
8862

89-
<details class="text-sm">
90-
<summary
91-
class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
92-
>
93-
{{ $t('auth.modal.what_is_atmosphere') }}
94-
</summary>
95-
<div class="mt-3">
96-
<i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
97-
<template #npmx>
98-
<span class="font-bold">npmx.dev</span>
99-
</template>
100-
<template #atproto>
101-
<a
102-
href="https://atproto.com"
103-
target="_blank"
104-
class="text-blue-400 hover:underline"
105-
>
106-
AT Protocol
107-
</a>
108-
</template>
109-
<template #bluesky>
110-
<a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
111-
Bluesky
112-
</a>
113-
</template>
114-
<template #tangled>
115-
<a
116-
href="https://tangled.org"
117-
target="_blank"
118-
class="text-blue-400 hover:underline"
119-
>
120-
Tangled
121-
</a>
122-
</template>
123-
</i18n-t>
124-
</div>
125-
</details>
63+
<div class="space-y-3">
64+
<div>
65+
<label
66+
for="handle-input"
67+
class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
68+
>
69+
{{ $t('auth.modal.handle_label') }}
70+
</label>
71+
<input
72+
id="handle-input"
73+
v-model="handleInput"
74+
type="text"
75+
name="handle"
76+
:placeholder="$t('auth.modal.handle_placeholder')"
77+
autocomplete="off"
78+
spellcheck="false"
79+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
80+
/>
12681
</div>
12782

128-
<button
129-
type="submit"
130-
:disabled="!handleInput.trim()"
131-
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
132-
>
133-
{{ $t('auth.modal.connect') }}
134-
</button>
135-
<button
136-
type="button"
137-
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
138-
@click="handleCreateAccount"
139-
>
140-
{{ $t('auth.modal.create_account') }}
141-
</button>
142-
<hr />
143-
<button
144-
type="button"
145-
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
146-
@click="handleBlueskySignIn"
147-
>
148-
{{ $t('auth.modal.connect_bluesky') }}
149-
<svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
150-
<path
151-
fill="#0F73FF"
152-
d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
153-
></path>
154-
</svg>
155-
</button>
156-
</form>
157-
</Modal>
158-
</Transition>
83+
<details class="text-sm">
84+
<summary
85+
class="text-fg-subtle cursor-pointer hover:text-fg-muted transition-colors duration-200"
86+
>
87+
{{ $t('auth.modal.what_is_atmosphere') }}
88+
</summary>
89+
<div class="mt-3">
90+
<i18n-t keypath="auth.modal.atmosphere_explanation" tag="p">
91+
<template #npmx>
92+
<span class="font-bold">npmx.dev</span>
93+
</template>
94+
<template #atproto>
95+
<a href="https://atproto.com" target="_blank" class="text-blue-400 hover:underline">
96+
AT Protocol
97+
</a>
98+
</template>
99+
<template #bluesky>
100+
<a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
101+
Bluesky
102+
</a>
103+
</template>
104+
<template #tangled>
105+
<a href="https://tangled.org" target="_blank" class="text-blue-400 hover:underline">
106+
Tangled
107+
</a>
108+
</template>
109+
</i18n-t>
110+
</div>
111+
</details>
112+
</div>
113+
114+
<button
115+
type="submit"
116+
:disabled="!handleInput.trim()"
117+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
118+
>
119+
{{ $t('auth.modal.connect') }}
120+
</button>
121+
<button
122+
type="button"
123+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
124+
@click="handleCreateAccount"
125+
>
126+
{{ $t('auth.modal.create_account') }}
127+
</button>
128+
<hr />
129+
<button
130+
type="button"
131+
class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
132+
@click="handleBlueskySignIn"
133+
>
134+
{{ $t('auth.modal.connect_bluesky') }}
135+
<svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
136+
<path
137+
fill="#0F73FF"
138+
d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
139+
></path>
140+
</svg>
141+
</button>
142+
</form>
143+
</Modal>
159144
</template>

‎app/components/Modal.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function handleModalClose() {
1414
<template>
1515
<dialog
1616
id="modal"
17-
class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6"
17+
class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
1818
>
1919
<!-- Modal top header section -->
2020
<div class="flex items-center justify-between mb-6">

0 commit comments

Comments
 (0)