Updates
This commit is contained in:
parent
28040f44f4
commit
2394248d53
13 changed files with 571 additions and 538 deletions
|
|
@ -1,67 +1,69 @@
|
|||
<template>
|
||||
<PageShell as="form" @submit.prevent="handleSubmit">
|
||||
<ClientOnly>
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!memberData" class="loading-state">
|
||||
<p style="color: var(--text-faint); margin-bottom: 12px">
|
||||
Please sign in to access your profile settings.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="
|
||||
openLoginModal({
|
||||
title: 'Sign in to your profile',
|
||||
description: 'Enter your email to manage your profile settings',
|
||||
})
|
||||
"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- PAGE HEADER -->
|
||||
<PageHeader
|
||||
title="Edit Profile"
|
||||
subtitle="How you appear to other members"
|
||||
>
|
||||
<NuxtLink
|
||||
v-if="memberId && memberData?.status === MEMBER_STATUSES.ACTIVE && formData.showInDirectory"
|
||||
:to="`/members/${memberId}`"
|
||||
class="view-profile-link"
|
||||
<div v-else-if="!memberData" class="loading-state">
|
||||
<p style="color: var(--text-faint); margin-bottom: 12px">
|
||||
Please sign in to access your profile settings.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="
|
||||
openLoginModal({
|
||||
title: 'Sign in to your profile',
|
||||
description: 'Enter your email to manage your profile settings',
|
||||
})
|
||||
"
|
||||
>
|
||||
View my public profile →
|
||||
</NuxtLink>
|
||||
</PageHeader>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ColumnsLayout cols="2">
|
||||
<template #left>
|
||||
<PageSection>
|
||||
<div class="section-label">Basics</div>
|
||||
<template v-else>
|
||||
<!-- PAGE HEADER -->
|
||||
<PageHeader
|
||||
title="Edit Profile"
|
||||
subtitle="How you appear to other members"
|
||||
>
|
||||
<NuxtLink
|
||||
v-if="
|
||||
memberId &&
|
||||
memberData?.status === MEMBER_STATUSES.ACTIVE &&
|
||||
formData.showInDirectory
|
||||
"
|
||||
:to="`/members/${memberId}`"
|
||||
class="view-profile-link"
|
||||
>
|
||||
View my public profile →
|
||||
</NuxtLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<ColumnsLayout cols="2">
|
||||
<template #left>
|
||||
<PageSection>
|
||||
<div class="section-label">Basics</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input
|
||||
v-model="formData.name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Pronouns</label>
|
||||
<input
|
||||
v-model="formData.pronouns"
|
||||
type="text"
|
||||
placeholder="e.g., she/her, they/them"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.pronounsPrivacy" />
|
||||
>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Timezone</label>
|
||||
|
|
@ -73,190 +75,194 @@
|
|||
searchable-placeholder="Search timezones..."
|
||||
placeholder="Select a timezone"
|
||||
class="timezone-select"
|
||||
:ui="{
|
||||
content: 'tz-content',
|
||||
item: 'tz-item',
|
||||
input: 'tz-input',
|
||||
}"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.timeZonePrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Avatar</label>
|
||||
<div class="avatar-row">
|
||||
<button
|
||||
v-for="ghost in availableGhosts"
|
||||
:key="ghost.value"
|
||||
type="button"
|
||||
class="avatar-option"
|
||||
:class="{ selected: formData.avatar === ghost.value }"
|
||||
:title="ghost.label"
|
||||
@click="formData.avatar = ghost.value"
|
||||
>
|
||||
<img :src="ghost.image" :alt="ghost.label" />
|
||||
</button>
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.avatarPrivacy" />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">About You</div>
|
||||
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Studio / Organization</label>
|
||||
<input
|
||||
v-model="formData.studio"
|
||||
type="text"
|
||||
placeholder="Studio name"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.studioPrivacy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Location</label>
|
||||
<input
|
||||
v-model="formData.location"
|
||||
type="text"
|
||||
placeholder="Toronto, ON"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.locationPrivacy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Bio</label>
|
||||
<textarea
|
||||
v-model="formData.bio"
|
||||
rows="4"
|
||||
placeholder="Share your background, interests, and experience..."
|
||||
maxlength="300"
|
||||
></textarea>
|
||||
<div class="char-count">
|
||||
{{ formData.bio?.length || 0 }} / 300
|
||||
</div>
|
||||
<PrivacyToggle v-model="formData.bioPrivacy" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>What I Do</label>
|
||||
<CraftTagSelector
|
||||
v-model="formData.craftTags"
|
||||
:tags="craftTags"
|
||||
@suggest="openTagSuggest('craft')"
|
||||
/>
|
||||
<PrivacyToggle v-model="formData.craftTagsPrivacy" />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Visibility</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.showInDirectory"
|
||||
aria-label="Show in Member Directory"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Show in Member Directory
|
||||
<span class="toggle-sub"
|
||||
>Your profile will appear in the public member listing</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<PageSection>
|
||||
<div class="section-label">Board</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Slack Handle</label>
|
||||
<input
|
||||
v-model="formData.boardSlackHandle"
|
||||
type="text"
|
||||
placeholder="@yourslackname"
|
||||
/>
|
||||
<div class="field-help">
|
||||
Shown on your board posts so other members can reach out.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="posts-header">
|
||||
<div class="posts-heading">Your Posts</div>
|
||||
<NuxtLink to="/board" class="posts-new-link">+ New Post</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div v-if="myPosts.length === 0" class="posts-empty">
|
||||
No posts yet.
|
||||
<NuxtLink to="/board" class="posts-empty-link">
|
||||
Visit the Board
|
||||
</NuxtLink>
|
||||
to share what you're seeking or offering.
|
||||
</div>
|
||||
|
||||
<ul v-else class="posts-list">
|
||||
<li v-for="post in myPosts" :key="post._id" class="post-item">
|
||||
<div class="post-body">
|
||||
<div class="post-title">{{ post.title }}</div>
|
||||
<div class="post-excerpt">{{ postExcerpt(post) }}</div>
|
||||
</div>
|
||||
<div class="post-actions">
|
||||
<NuxtLink to="/board" class="post-action">Edit</NuxtLink>
|
||||
<label>Avatar</label>
|
||||
<div class="avatar-row">
|
||||
<button
|
||||
v-for="ghost in availableGhosts"
|
||||
:key="ghost.value"
|
||||
type="button"
|
||||
class="post-action post-action-danger"
|
||||
@click="handleDeletePost(post)"
|
||||
class="avatar-option"
|
||||
:class="{ selected: formData.avatar === ghost.value }"
|
||||
:title="ghost.label"
|
||||
@click="formData.avatar = ghost.value"
|
||||
>
|
||||
Delete
|
||||
<img :src="ghost.image" :alt="ghost.label" >
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</PageSection>
|
||||
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Notifications</div>
|
||||
|
||||
<div
|
||||
v-for="toggle in notificationToggles"
|
||||
:key="toggle.key"
|
||||
class="toggle-field"
|
||||
>
|
||||
<USwitch
|
||||
v-model="formData.notifications[toggle.key]"
|
||||
:aria-label="toggle.label"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
{{ toggle.label }}
|
||||
<span class="toggle-sub">{{ toggle.sub }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
</ColumnsLayout>
|
||||
</PageSection>
|
||||
|
||||
<!-- ======== SAVE BAR ======== -->
|
||||
<div class="save-bar">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="saving || !hasChanges"
|
||||
>
|
||||
{{ saving ? "Saving..." : "Save Profile" }}
|
||||
</button>
|
||||
<button type="button" class="btn" @click="resetForm">
|
||||
Reset Changes
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">About You</div>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="row-2">
|
||||
<div class="field">
|
||||
<label>Studio / Organization</label>
|
||||
<input
|
||||
v-model="formData.studio"
|
||||
type="text"
|
||||
placeholder="Studio name"
|
||||
>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Location</label>
|
||||
<input
|
||||
v-model="formData.location"
|
||||
type="text"
|
||||
placeholder="Toronto, ON"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Bio</label>
|
||||
<textarea
|
||||
v-model="formData.bio"
|
||||
rows="4"
|
||||
placeholder="Share your background, interests, and experience..."
|
||||
maxlength="300"
|
||||
/>
|
||||
<div class="char-count">
|
||||
{{ formData.bio?.length || 0 }} / 300
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>What I Do</label>
|
||||
<CraftTagSelector
|
||||
v-model="formData.craftTags"
|
||||
:tags="craftTags"
|
||||
@suggest="openTagSuggest('craft')"
|
||||
/>
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Visibility</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
<USwitch
|
||||
v-model="formData.showInDirectory"
|
||||
aria-label="Show in Member Directory"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
Show in Member Directory
|
||||
<span class="toggle-sub"
|
||||
>Your profile will appear in the private member
|
||||
directory.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<PageSection>
|
||||
<div class="section-label">Board</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Gamma Space Slack Handle</label>
|
||||
<input
|
||||
v-model="formData.boardSlackHandle"
|
||||
type="text"
|
||||
placeholder="@yourslackname"
|
||||
>
|
||||
<div class="field-help">
|
||||
Shown on your board posts so other members can reach out.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="posts-header">
|
||||
<div class="posts-heading">Your Posts</div>
|
||||
<NuxtLink to="/board" class="posts-new-link"
|
||||
>+ New Post</NuxtLink
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-if="myPosts.length === 0" class="posts-empty">
|
||||
No posts yet.
|
||||
<NuxtLink to="/board" class="posts-empty-link">
|
||||
Visit the Board
|
||||
</NuxtLink>
|
||||
to share what you're seeking or offering.
|
||||
</div>
|
||||
|
||||
<ul v-else class="posts-list">
|
||||
<li v-for="post in myPosts" :key="post._id" class="post-item">
|
||||
<div class="post-body">
|
||||
<div class="post-title">{{ post.title }}</div>
|
||||
<div class="post-excerpt">{{ postExcerpt(post) }}</div>
|
||||
</div>
|
||||
<div class="post-actions">
|
||||
<NuxtLink to="/board" class="post-action">Edit</NuxtLink>
|
||||
<button
|
||||
type="button"
|
||||
class="post-action post-action-danger"
|
||||
@click="handleDeletePost(post)"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</PageSection>
|
||||
|
||||
<PageSection divider="top">
|
||||
<div class="section-label">Notifications</div>
|
||||
|
||||
<div
|
||||
v-for="toggle in notificationToggles"
|
||||
:key="toggle.key"
|
||||
class="toggle-field"
|
||||
>
|
||||
<USwitch
|
||||
v-model="formData.notifications[toggle.key]"
|
||||
:aria-label="toggle.label"
|
||||
/>
|
||||
<div class="toggle-label">
|
||||
{{ toggle.label }}
|
||||
<span class="toggle-sub">{{ toggle.sub }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</PageSection>
|
||||
</template>
|
||||
</ColumnsLayout>
|
||||
|
||||
<!-- ======== SAVE BAR ======== -->
|
||||
<div class="save-bar">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="saving || !hasChanges"
|
||||
>
|
||||
{{ saving ? "Saving..." : "Save Profile" }}
|
||||
</button>
|
||||
<button type="button" class="btn" @click="resetForm">
|
||||
Reset Changes
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
|
||||
<TagSuggestModal
|
||||
v-model:open="showTagSuggestModal"
|
||||
:pool="tagSuggestPool"
|
||||
/>
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
|
|
@ -265,7 +271,7 @@ import { MEMBER_STATUSES } from "~/composables/useMemberStatus";
|
|||
import { TIMEZONE_OPTIONS } from "~/config/timezones";
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
middleware: "auth",
|
||||
});
|
||||
|
||||
const { memberData, checkMemberStatus } = useAuth();
|
||||
|
|
@ -274,27 +280,67 @@ const { posts: myPosts, fetchPosts, deletePost } = useBoardPosts();
|
|||
const toast = useToast();
|
||||
|
||||
const availableGhosts = [
|
||||
{ value: "disbelieving", label: "Disbelieving", image: "/ghosties/Ghost-Disbelieving.png" },
|
||||
{ value: "double-take", label: "Double Take", image: "/ghosties/Ghost-Double-Take.png" },
|
||||
{ value: "exasperated", label: "Exasperated", image: "/ghosties/Ghost-Exasperated.png" },
|
||||
{
|
||||
value: "disbelieving",
|
||||
label: "Disbelieving",
|
||||
image: "/ghosties/Ghost-Disbelieving.png",
|
||||
},
|
||||
{
|
||||
value: "double-take",
|
||||
label: "Double Take",
|
||||
image: "/ghosties/Ghost-Double-Take.png",
|
||||
},
|
||||
{
|
||||
value: "exasperated",
|
||||
label: "Exasperated",
|
||||
image: "/ghosties/Ghost-Exasperated.png",
|
||||
},
|
||||
{ value: "mild", label: "Mild", image: "/ghosties/Ghost-Mild.png" },
|
||||
{ value: "sweet", label: "Sweet", image: "/ghosties/Ghost-Sweet.png" },
|
||||
{ value: "wtf", label: "WTF", image: "/ghosties/Ghost-WTF.png" },
|
||||
];
|
||||
|
||||
// Compute current UTC offset for an IANA timezone (DST-aware).
|
||||
const utcOffset = (tz) => {
|
||||
try {
|
||||
const parts = new Intl.DateTimeFormat("en-US", {
|
||||
timeZone: tz,
|
||||
timeZoneName: "longOffset",
|
||||
}).formatToParts(new Date());
|
||||
const name = parts.find((p) => p.type === "timeZoneName")?.value || "";
|
||||
// "GMT-05:00" → "UTC-05:00"; "GMT" → "UTC+00:00"
|
||||
if (name === "GMT") return "UTC+00:00";
|
||||
return name.replace("GMT", "UTC");
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
// Include the saved timezone as a custom option if it's not in the curated list.
|
||||
const timezoneItems = computed(() => {
|
||||
const saved = formData.timeZone;
|
||||
const list = [...TIMEZONE_OPTIONS];
|
||||
if (saved && !list.some((t) => t.value === saved)) {
|
||||
list.unshift({ label: saved, value: saved });
|
||||
const list = TIMEZONE_OPTIONS.map((t) => {
|
||||
const off = utcOffset(t.value);
|
||||
return { ...t, label: off ? `${t.label} (${off})` : t.label };
|
||||
});
|
||||
if (saved && !TIMEZONE_OPTIONS.some((t) => t.value === saved)) {
|
||||
const off = utcOffset(saved);
|
||||
list.unshift({ label: off ? `${saved} (${off})` : saved, value: saved });
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
const notificationToggles = [
|
||||
{ key: "events", label: "Event reminders", sub: "Get notified about upcoming events" },
|
||||
{ key: "updates", label: "Community updates", sub: "New posts from members you follow" },
|
||||
{
|
||||
key: "events",
|
||||
label: "Event reminders",
|
||||
sub: "Get notified about upcoming events",
|
||||
},
|
||||
{
|
||||
key: "updates",
|
||||
label: "Community updates",
|
||||
sub: "New posts from members you follow",
|
||||
},
|
||||
];
|
||||
|
||||
const { data: tagsData } = await useFetch("/api/tags");
|
||||
|
|
@ -321,14 +367,7 @@ const formData = reactive({
|
|||
location: "",
|
||||
showInDirectory: true,
|
||||
craftTags: [],
|
||||
craftTagsPrivacy: "members",
|
||||
boardSlackHandle: "",
|
||||
pronounsPrivacy: "members",
|
||||
timeZonePrivacy: "members",
|
||||
avatarPrivacy: "members",
|
||||
studioPrivacy: "members",
|
||||
bioPrivacy: "members",
|
||||
locationPrivacy: "members",
|
||||
notifications: {
|
||||
events: true,
|
||||
updates: true,
|
||||
|
|
@ -364,15 +403,6 @@ const loadProfile = () => {
|
|||
const board = memberData.value.board || {};
|
||||
formData.boardSlackHandle = board.slackHandle || "";
|
||||
|
||||
const privacy = memberData.value.privacy || {};
|
||||
formData.pronounsPrivacy = privacy.pronouns || "members";
|
||||
formData.timeZonePrivacy = privacy.timeZone || "members";
|
||||
formData.avatarPrivacy = privacy.avatar || "members";
|
||||
formData.studioPrivacy = privacy.studio || "members";
|
||||
formData.bioPrivacy = privacy.bio || "members";
|
||||
formData.locationPrivacy = privacy.location || "members";
|
||||
formData.craftTagsPrivacy = privacy.craftTags || "members";
|
||||
|
||||
const notifs = memberData.value.notifications || {};
|
||||
formData.notifications.events = notifs.events ?? true;
|
||||
formData.notifications.updates = notifs.updates ?? true;
|
||||
|
|
@ -397,7 +427,8 @@ const handleSubmit = async () => {
|
|||
console.error("Profile save error:", error);
|
||||
toast.add({
|
||||
title: "Update failed",
|
||||
description: error.data?.statusMessage || error.data?.message || "Please try again.",
|
||||
description:
|
||||
error.data?.statusMessage || error.data?.message || "Please try again.",
|
||||
color: "error",
|
||||
});
|
||||
} finally {
|
||||
|
|
@ -474,11 +505,6 @@ useHead({
|
|||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ---- PRIVACY TOGGLE SPACING ---- */
|
||||
.field :deep(.priv) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ---- FIELD LABELS (distinct from .section-label) ---- */
|
||||
.field label {
|
||||
font-size: 11px;
|
||||
|
|
@ -703,11 +729,6 @@ useHead({
|
|||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ---- TIMEZONE SELECT ---- */
|
||||
.timezone-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.row-2 {
|
||||
|
|
@ -721,3 +742,85 @@ useHead({
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Non-scoped: targets USelectMenu button root which does not inherit scoped data attribute. */
|
||||
button.timezone-select {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
padding: 5px 8px !important;
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: var(--text-bright) !important;
|
||||
background: var(--input-bg) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
min-height: 0;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-color: transparent;
|
||||
}
|
||||
|
||||
button.timezone-select:hover {
|
||||
background: var(--input-bg) !important;
|
||||
}
|
||||
|
||||
button.timezone-select:focus,
|
||||
button.timezone-select:focus-visible,
|
||||
button.timezone-select[aria-expanded="true"] {
|
||||
border-color: var(--candle) !important;
|
||||
}
|
||||
|
||||
/* Popup content (portalled to body) */
|
||||
.tz-content {
|
||||
background: var(--input-bg) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
|
||||
--tw-ring-shadow: 0 0 #0000 !important;
|
||||
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
}
|
||||
|
||||
/* Search input wrapper inside popup */
|
||||
.tz-input {
|
||||
border-bottom: 1px dashed var(--border) !important;
|
||||
}
|
||||
|
||||
.tz-input input {
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: var(--text-bright) !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 6px 8px !important;
|
||||
box-shadow: none !important;
|
||||
--tw-ring-shadow: 0 0 #0000 !important;
|
||||
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
||||
}
|
||||
|
||||
/* Option rows */
|
||||
.tz-item {
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: var(--text) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
.tz-item::before {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.tz-item[data-highlighted]::before,
|
||||
.tz-item[data-highlighted]:not([data-disabled])::before {
|
||||
background: var(--surface-hover) !important;
|
||||
}
|
||||
|
||||
.tz-item[data-highlighted],
|
||||
.tz-item[data-highlighted]:not([data-disabled]) {
|
||||
color: var(--text-bright) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue