hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow to specify accend and secondary colors

Browse source
This commit is contained in:
dtonon 2026-06-05 17:32:11 +01:00
parent 7cd9a68ae3
commit be3a4b34d3
23 changed files with 96 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/ChatContent.svelte
View file

@ -42,22 +42,22 @@
href="https://njump.me/{t.entity}"
target="_blank"
rel="noopener noreferrer"
class="text-brand hover:underline">@{u?.shortName ?? t.fallback}</a
class="text-accent hover:underline">@{u?.shortName ?? t.fallback}</a
>{:else if t.type === "entity"}{@const ref = t.id
? resolvedThreads[t.id]
: undefined}{#if ref}<a
href={threadRefHref(ref)}
class="text-brand hover:underline">{ref.title}</a
class="text-accent hover:underline">{ref.title}</a
>{:else}<a
href={t.href}
target="_blank"
rel="noopener noreferrer"
class="text-brand hover:underline">{t.label}</a
class="text-accent hover:underline">{t.label}</a
>{/if}{:else if t.type === "link"}<a
href={t.href}
title={t.href}
target="_blank"
rel="noopener noreferrer"
class="text-brand hover:underline">{t.label}</a
class="text-accent hover:underline">{t.label}</a
>{:else}{t.value}{/if}{/each}</span
>

4
src/lib/components/ChatSidebar.svelte
View file

@ -232,7 +232,7 @@
{expanded ? 'md:w-150 md:shadow-2xl' : 'md:w-80 md:shadow-lg'}"
>
<div class="mb-6 flex shrink-0 items-center justify-between">
<span class="text-brand text-[1.5rem] leading-7">Chat</span>
<span class="text-accent text-[1.5rem] leading-7">Chat</span>
<button
onclick={onToggle}
class="hidden rounded bg-neutral-100 transition-colors hover:bg-neutral-200 md:block dark:bg-neutral-800 dark:hover:bg-neutral-700"
@ -410,7 +410,7 @@
disabled={sending}
placeholder={auth.user ? "Message..." : "Login to send messages"}
{contextPubkeys}
textareaClass="w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
textareaClass="w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50"
/>
</div>
</aside>

2
src/lib/components/DeleteModal.svelte
View file

@ -70,7 +70,7 @@
disabled={deleteState.busy}
rows="2"
placeholder="Recorded with the deletion"
class="focus:ring-brand mb-4 w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
class="focus:ring-accent mb-4 w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
></textarea>
<div class="flex justify-end gap-2">

4
src/lib/components/DiscussionsFeed.svelte
View file

@ -97,11 +97,11 @@
<div class="mx-auto max-w-6xl">
<div class="flex flex-wrap items-center justify-between gap-2 py-2">
<h1 class="text-brand text-[1.65rem] leading-7">{title}</h1>
<h1 class="text-accent text-[1.65rem] leading-7">{title}</h1>
<div class="flex items-center gap-2">
<button
onclick={onNewTopic}
class="bg-brand hover:bg-brand-hover rounded px-4 py-1.5 font-medium text-white md:px-6 md:text-sm"
class="bg-accent hover:bg-accent-hover rounded px-4 py-1.5 font-medium text-white md:px-6 md:text-sm"
>
New discussion
</button>

4
src/lib/components/JoinModal.svelte
View file

@ -87,7 +87,7 @@
autocapitalize="off"
spellcheck="false"
onkeydown={(e) => e.key === "Enter" && onRetry()}
class="focus:ring-brand mb-3 w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
class="focus:ring-accent mb-3 w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
/>
{/if}
@ -104,7 +104,7 @@
type="button"
onclick={onRetry}
disabled={joinState.busy || (joinState.codeRequired && !code.trim())}
class="bg-brand hover:bg-brand-hover rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
class="bg-accent hover:bg-accent-hover rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
>
{joinState.busy ? "Trying…" : "Retry"}
</button>

4
src/lib/components/LatestDiscussions.svelte
View file

@ -28,7 +28,7 @@
</script>
<aside aria-label="Latest discussions">
<h2 class="text-brand pb-2 text-[1.5rem] leading-7">Latest discussions</h2>
<h2 class="text-accent pb-2 text-[1.5rem] leading-7">Latest discussions</h2>
{#if overviewStore.recent.length === 0}
<p class="text-sm text-neutral-400 dark:text-neutral-500">
{overviewStore.loading ? "Loading…" : "Nothing yet."}
@ -40,7 +40,7 @@
<li>
<a href="/thread/{t.id}" class="group block py-3">
<p
class="group-hover:text-brand line-clamp-2 text-lg leading-5 text-neutral-700 dark:text-neutral-300"
class="group-hover:text-accent line-clamp-2 text-lg leading-5 text-neutral-700 dark:text-neutral-300"
>
{t.title}
</p>

10
src/lib/components/LeftSidebar.svelte
View file

@ -76,7 +76,7 @@
<a
href="/room/{room.id}"
class="flex items-center gap-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-800
{activeRoom === room.id ? ' text-brand' : 'text-neutral-700 dark:text-neutral-300'}"
{activeRoom === room.id ? ' text-accent' : 'text-neutral-700 dark:text-neutral-300'}"
>
{room.name}
</a>
@ -105,7 +105,7 @@
href="/resource/{r.slug}"
aria-current={activeResource === r.slug ? "page" : undefined}
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
{activeResource === r.slug ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}"
{activeResource === r.slug ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}"
>{r.title}</a
>
{/each}
@ -113,7 +113,7 @@
href="/contacts"
aria-current={contactsActive ? "page" : undefined}
class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
{contactsActive ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}">Contacts</a
{contactsActive ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}">Contacts</a
>
</nav>
</div>
@ -123,7 +123,7 @@
<button
type="button"
onclick={resumeDraft}
class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-1.5 text-sm font-medium text-white"
class="bg-accent hover:bg-accent-hover w-full rounded px-3 py-1.5 text-sm font-medium text-white"
>
Resume draft
</button>
@ -159,7 +159,7 @@
<div class="mt-3 flex items-center gap-1">
<button
onclick={openLogin}
class="bg-brand hover:bg-brand-hover min-w-0 flex-1 rounded px-3 py-1.5 text-sm font-medium text-white"
class="bg-accent hover:bg-accent-hover min-w-0 flex-1 rounded px-3 py-1.5 text-sm font-medium text-white"
>
Login
</button>

10
src/lib/components/LoginModal.svelte
View file

@ -119,7 +119,7 @@
<button
onclick={handleExtension}
disabled={busy || !hasExtension}
class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
class="bg-accent hover:bg-accent-hover w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
>
{busy ? "Connecting…" : "Log in with extension"}
</button>
@ -131,7 +131,7 @@
<button
type="button"
onclick={showNsecView}
class="text-brand mt-4 block w-full text-center text-sm hover:underline"
class="text-accent mt-4 block w-full text-center text-sm hover:underline"
>
Or log in using your nsec
</button>
@ -149,12 +149,12 @@
autocorrect="off"
spellcheck="false"
onkeydown={(e) => e.key === "Enter" && handleNsec()}
class="focus:ring-brand w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 font-mono text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
class="focus:ring-accent w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 font-mono text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
/>
<button
onclick={handleNsec}
disabled={busy || !nsec.trim()}
class="bg-brand hover:bg-brand-hover mt-3 w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
class="bg-accent hover:bg-accent-hover mt-3 w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
>
{busy ? "Logging in…" : "Log in"}
</button>
@ -164,7 +164,7 @@
<button
type="button"
onclick={showExtensionView}
class="text-brand mt-4 block w-full text-center text-sm hover:underline"
class="text-accent mt-4 block w-full text-center text-sm hover:underline"
>
Log in with extension
</button>

2
src/lib/components/MessageEditor.svelte
View file

@ -103,7 +103,7 @@
{rows}
{placeholder}
{contextPubkeys}
textareaClass="block w-full rounded-t border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-y {minHeightClass}"
textareaClass="block w-full rounded-t border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 resize-y {minHeightClass}"
/>
{/if}
<div

16
src/lib/components/MobileMenu.svelte
View file

@ -120,7 +120,7 @@
<a
href="/"
onclick={onClose}
class="hover:text-brand py-2 text-xl text-neutral-700 dark:text-neutral-300"
class="hover:text-accent py-2 text-xl text-neutral-700 dark:text-neutral-300"
>{mode === "simple" ? "Discussions" : "Home"}</a
>
@ -139,7 +139,7 @@
href="/room/{room.id}"
onclick={onClose}
class="block py-1.5 text-xl
{activeRoom === room.id ? 'text-brand' : 'hover:text-brand text-neutral-700 dark:text-neutral-300'}"
{activeRoom === room.id ? 'text-accent' : 'hover:text-accent text-neutral-700 dark:text-neutral-300'}"
>
{room.name}
</a>
@ -158,8 +158,8 @@
href="/resource/{r.slug}"
onclick={onClose}
aria-current={activeResource === r.slug ? "page" : undefined}
class="hover:text-brand block py-1.5 text-xl
{activeResource === r.slug ? 'text-brand' : 'text-neutral-700 dark:text-neutral-300'}"
class="hover:text-accent block py-1.5 text-xl
{activeResource === r.slug ? 'text-accent' : 'text-neutral-700 dark:text-neutral-300'}"
>{r.title}</a
>
{/each}
@ -167,8 +167,8 @@
href="/contacts"
onclick={onClose}
aria-current={contactsActive ? "page" : undefined}
class="hover:text-brand block py-1.5 text-lg
{contactsActive ? 'text-brand' : 'text-neutral-700 dark:text-neutral-300'}">Contacts</a
class="hover:text-accent block py-1.5 text-lg
{contactsActive ? 'text-accent' : 'text-neutral-700 dark:text-neutral-300'}">Contacts</a
>
</nav>
@ -177,7 +177,7 @@
<button
type="button"
onclick={onResume}
class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-2 font-medium text-white"
class="bg-accent hover:bg-accent-hover w-full rounded px-3 py-2 font-medium text-white"
>
Resume draft
</button>
@ -219,7 +219,7 @@
<button
type="button"
onclick={onLogin}
class="bg-brand hover:bg-brand-hover min-w-0 flex-1 rounded px-3 py-2 text-lg font-medium text-white"
class="bg-accent hover:bg-accent-hover min-w-0 flex-1 rounded px-3 py-2 text-lg font-medium text-white"
>
Login
</button>

12
src/lib/components/NewDiscussionModal.svelte
View file

@ -151,7 +151,7 @@
{#if targetName}
<p class="text-sm text-neutral-700 dark:text-neutral-300">{targetName}</p>
{/if}
<h2 id="newdisc-title" class="text-brand text-2xl">New discussion</h2>
<h2 id="newdisc-title" class="text-accent text-2xl">New discussion</h2>
</div>
<button
type="button"
@ -190,7 +190,7 @@
bind:value={draftState.title}
disabled={draftState.publishing}
maxlength="72"
class="focus:ring-brand w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:ring-1 focus:outline-none disabled:opacity-50"
class="focus:ring-accent w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:ring-1 focus:outline-none disabled:opacity-50"
/>
</div>
@ -204,11 +204,11 @@
Labels
</label>
<div
class="focus-within:ring-brand flex min-h-[2.5rem] flex-wrap items-center gap-1.5 rounded border border-neutral-200 dark:border-neutral-700 px-3 py-1.5 focus-within:ring-1"
class="focus-within:ring-accent flex min-h-[2.5rem] flex-wrap items-center gap-1.5 rounded border border-neutral-200 dark:border-neutral-700 px-3 py-1.5 focus-within:ring-1"
>
{#each draftState.labels as l}
<span
class="bg-accent inline-flex items-center gap-1 rounded-lg px-2 py-0.5 text-sm text-white"
class="bg-secondary inline-flex items-center gap-1 rounded-lg px-2 py-0.5 text-sm text-white"
>
{l}
<button
@ -257,7 +257,7 @@
type="button"
onmousedown={(e) => e.preventDefault()}
onclick={() => onSuggestionClick(l)}
class="bg-accent hover:bg-accent-hover rounded-lg px-2.5 py-0.5 text-sm text-white"
class="bg-secondary hover:bg-secondary-hover rounded-lg px-2.5 py-0.5 text-sm text-white"
>
{l}
</button>
@ -304,7 +304,7 @@
disabled={draftState.publishing ||
!draftState.title.trim() ||
!draftState.content.trim()}
class="bg-brand hover:bg-brand-hover rounded px-5 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
class="bg-accent hover:bg-accent-hover rounded px-5 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
>
{draftState.publishing ? "Publishing…" : "Publish discussion"}
</button>

8
src/lib/components/PostContent.svelte
View file

@ -607,7 +607,7 @@
href={inline.href}
target={internal ? undefined : "_blank"}
rel={internal ? undefined : "noopener noreferrer"}
class="text-brand break-all hover:underline">{inline.label}</a
class="text-accent break-all hover:underline">{inline.label}</a
>
{:else if inline.type === "mention"}
{@const u = profiles[inline.pubkey] ?? resolvedUsers[inline.pubkey]}
@ -615,7 +615,7 @@
href="https://njump.me/{inline.entity}"
target="_blank"
rel="noopener noreferrer"
class="text-brand hover:underline">@{u?.shortName ?? inline.fallback}</a
class="text-accent hover:underline">@{u?.shortName ?? inline.fallback}</a
>
{:else if inline.type === "thread-quote"}
{@const u = profiles[inline.pubkey] ?? resolvedUsers[inline.pubkey]}
@ -640,7 +640,7 @@
{:else if inline.type === "entity"}
{@const ref = inline.id ? resolvedThreads[inline.id] : undefined}
{#if ref}
<a href={threadRefHref(ref)} class="text-brand hover:underline"
<a href={threadRefHref(ref)} class="text-accent hover:underline"
>{ref.title}</a
>
{:else}
@ -648,7 +648,7 @@
href="https://njump.me/{inline.entity}"
target="_blank"
rel="noopener noreferrer"
class="text-brand break-all hover:underline">{inline.label}</a
class="text-accent break-all hover:underline">{inline.label}</a
>
{/if}
{:else if inline.type === "strong"}

2
src/lib/components/Tag.svelte
View file

@ -3,6 +3,6 @@
let { label }: Props = $props();
</script>
<span class="bg-accent rounded-lg px-2.5 py-0 text-sm text-white">
<span class="bg-secondary rounded-lg px-2.5 py-0 text-sm text-white">
{label}
</span>

2
src/lib/components/ThreadItem.svelte
View file

@ -41,7 +41,7 @@
<!-- Col 1: title + byline -->
<div class="min-w-0 flex-1">
<div
class="group-hover:text-brand mb-1.5 text-lg leading-5 text-neutral-900 dark:text-neutral-100"
class="group-hover:text-accent mb-1.5 text-lg leading-5 text-neutral-900 dark:text-neutral-100"
>
{thread.title}
</div>

2
src/lib/components/ThreadScrubber.svelte
View file

@ -169,7 +169,7 @@
<!-- Thumb -->
<div
class="bg-brand absolute cursor-grab touch-none rounded-full transition-colors hover:bg-neutral-600 active:cursor-grabbing"
class="bg-accent absolute cursor-grab touch-none rounded-full transition-colors hover:bg-neutral-600 active:cursor-grabbing"
style="width: 4px; right: 3px; top: {thumbTop}px; height: {thumbHeight}px;"
onpointerdown={onThumbPointerDown}
onpointermove={onThumbPointerMove}

5
src/lib/config.ts
View file

@ -17,3 +17,8 @@ export const LABELS = (env.PUBLIC_LABELS ?? "")
.map((l) => l.trim())
.filter(Boolean);
export const BLOSSOM_URL = (env.PUBLIC_BLOSSOM_URL ?? "").replace(/\/$/, "");
// Theme color overrides: when set, replace the accent (primary) and secondary
// CSS variables defined in layout.css. Hover shades are derived in the layout.
export const ACCENT_COLOR = env.PUBLIC_ACCENT_COLOR ?? "";
export const SECONDARY_COLOR = env.PUBLIC_SECONDARY_COLOR ?? "";

27
src/routes/+layout.svelte
View file

@ -23,10 +23,31 @@
import { seedProfiles } from "$lib/profiles.svelte";
import { startChat } from "$lib/chat.svelte";
import { activeGroup, setActiveGroup } from "$lib/active.svelte";
import { MODE } from "$lib/config";
import { MODE, ACCENT_COLOR, SECONDARY_COLOR } from "$lib/config";
let { children } = $props();
// Optional env overrides for the theme colors. Set as inline custom props on
// <html> so they outrank the @theme `:root` defaults; hover shades are derived
// by darkening the base 15% so admins only set one value per color.
$effect(() => {
const root = document.documentElement;
if (ACCENT_COLOR) {
root.style.setProperty("--color-accent", ACCENT_COLOR);
root.style.setProperty(
"--color-accent-hover",
`color-mix(in srgb, ${ACCENT_COLOR} 85%, #000)`,
);
}
if (SECONDARY_COLOR) {
root.style.setProperty("--color-secondary", SECONDARY_COLOR);
root.style.setProperty(
"--color-secondary-hover",
`color-mix(in srgb, ${SECONDARY_COLOR} 85%, #000)`,
);
}
});
const mode = MODE;
const chatEnabled = true;
@ -168,7 +189,7 @@
onclick={() => (mobileView = "forum")}
aria-pressed={mobileView === "forum"}
class="flex flex-1 flex-col items-center gap-0.5 py-2 text-xs font-medium
{mobileView === 'forum' ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}"
{mobileView === 'forum' ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -192,7 +213,7 @@
onclick={() => (mobileView = "chat")}
aria-pressed={mobileView === "chat"}
class="flex flex-1 flex-col items-center gap-0.5 py-2 text-xs font-medium
{mobileView === 'chat' ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}"
{mobileView === 'chat' ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}"
>
<svg
xmlns="http://www.w3.org/2000/svg"

4
src/routes/+page.svelte
View file

@ -62,7 +62,7 @@
{#if partial}
<hr class="text-neutral-300 dark:text-neutral-600" />
{:else}
<h1 class="text-brand py-2 text-[1.65rem]">Forum rooms</h1>
<h1 class="text-accent py-2 text-[1.65rem]">Forum rooms</h1>
{/if}
{#if groupsStore.list.length === 0}
@ -83,7 +83,7 @@
>
<div class="min-w-0">
<h2
class="group-hover:text-brand text-2xl text-neutral-800 dark:text-neutral-200"
class="group-hover:text-accent text-2xl text-neutral-800 dark:text-neutral-200"
>
{room.name}
</h2>

8
src/routes/contacts/+page.svelte
View file

@ -72,7 +72,7 @@
</svelte:head>
<div class="mx-auto max-w-6xl">
<h1 class="text-brand py-2 text-[1.65rem]">Contacts</h1>
<h1 class="text-accent py-2 text-[1.65rem]">Contacts</h1>
{#if partial}
<div class="mb-8">
@ -120,7 +120,7 @@
href="https://njump.me/{c.npub}"
target="_blank"
rel="noopener noreferrer"
class="text-brand shrink-0 text-sm hover:underline"
class="text-accent shrink-0 text-sm hover:underline"
>
View profile ↗
</a>
@ -141,7 +141,7 @@
href={websiteHref(c.entry.website)}
target="_blank"
rel="noopener noreferrer"
class="text-brand truncate hover:underline"
class="text-accent truncate hover:underline"
>
{websiteLabel(c.entry.website)}
</a>
@ -161,7 +161,7 @@
<span class="text-neutral-400 dark:text-neutral-500">Manages:</span>
{#each rooms as r, i}<a
href="/room/{r.id}"
class="text-brand hover:underline">{r.name}</a
class="text-accent hover:underline">{r.name}</a
>{i < rooms.length - 1 ? ", " : ""}{/each}
</p>
{/if}

12
src/routes/layout.css
View file

@ -47,7 +47,7 @@ body {
}
.prose :is(h1) {
font-size: 1.65rem;
color: var(--color-brand);
color: var(--color-accent);
}
.prose :is(p) {
margin-top: 0;
@ -61,7 +61,7 @@ body {
color: var(--color-neutral-100);
}
:where(.dark) .prose :is(h1) {
color: var(--color-brand);
color: var(--color-accent);
}
:where(.dark) .prose :is(blockquote) {
color: var(--color-neutral-400);
@ -72,8 +72,8 @@ body {
}
@theme {
--color-brand: #e32a6d;
--color-brand-hover: #c4205a;
--color-accent: #ffaf25;
--color-accent-hover: #e69e1a;
--color-accent: #e32a6d;
--color-accent-hover: #c4205a;
--color-secondary: #ffaf25;
--color-secondary-hover: #e69e1a;
}

2
src/routes/resource/[slug]/+page.svelte
View file

@ -31,7 +31,7 @@
<div class="mx-auto max-w-6xl">
<a
href="/"
class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
class="hover:text-accent mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"

12
src/routes/thread/[id]/+page.svelte
View file

@ -350,7 +350,7 @@
<button
onclick={() => quotePost(p)}
disabled={!auth.user}
class="hover:text-brand flex cursor-pointer items-center gap-1.5 text-neutral-300 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-600"
class="hover:text-accent flex cursor-pointer items-center gap-1.5 text-neutral-300 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-600"
>
<span>Quote post</span>
<svg
@ -381,7 +381,7 @@
>
<a
href={MODE === "full" ? `/room/${detail.groupId}` : "/"}
class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
class="hover:text-accent mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -400,7 +400,7 @@
</svg>
Discussions
</a>
<h1 class="text-brand text-[1.65rem] leading-7">{detail.title}</h1>
<h1 class="text-accent text-[1.65rem] leading-7">{detail.title}</h1>
{#if isScrolled}
<div
class="pointer-events-none absolute right-0 left-0 h-8 bg-gradient-to-b from-white to-transparent transition-opacity duration-200 dark:from-neutral-900"
@ -458,7 +458,7 @@
<button
onclick={submitReply}
disabled={replying || !replyContent.trim()}
class="bg-brand hover:bg-brand-hover rounded px-6 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
class="bg-accent hover:bg-accent-hover rounded px-6 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
>
{replying ? "Posting…" : "post reply"}
</button>
@ -466,7 +466,7 @@
{:else}
<p class=" text-center text-neutral-500 dark:text-neutral-400">
To participate and reply, please
<button onclick={openLogin} class="text-brand hover:underline"
<button onclick={openLogin} class="text-accent hover:underline"
>login now</button
>
</p>
@ -493,7 +493,7 @@
onmousedown={(e) => e.preventDefault()}
onclick={quoteFromSelection}
style="top: {selectionTarget.top}px; left: {selectionTarget.left}px;"
class="bg-brand hover:bg-brand-hover fixed z-50 -translate-x-1/2 -translate-y-full rounded px-3 py-1 text-xs font-medium text-white shadow-md"
class="bg-accent hover:bg-accent-hover fixed z-50 -translate-x-1/2 -translate-y-full rounded px-3 py-1 text-xs font-medium text-white shadow-md"
>
Quote
</button>