mpuchstein/Owlerlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: wrap countdown accordions in Pico cards

Browse Source
This commit is contained in:
Matthias Puchstein
2026-03-06 16:31:17 +01:00
parent 35358c2d4e
commit 06fb4a9119
2 changed files with 89 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/styles/countdown.css
View File

@@ -21,10 +21,14 @@ mark[data-state="Paused"] { color: var(--pico-color-amber-500, #929200); }
mark[data-state="Finished"] { color: var(--pico-color-red-500, #b00020); }
mark[data-state="Idle"] { color: var(--pico-color-zinc-400, #666666); }
details {
.countdown-item-card {
margin-bottom: 0.75rem;
}
.countdown-item-card details {
margin-bottom: 0;
}
summary mark {
margin-left: 0.5rem;
}

166
src/features/countdown/components/CountdownPage.svelte
View File

@@ -98,106 +98,108 @@
</article>
{#each $countdownStore.items as item (item.id)}
<details on:toggle={(e) => (e.currentTarget as HTMLDetailsElement).open && countdownStore.select(item.id)}>
<summary>
{#if getSettings(item.id).icon}
<img
src={`${OVERLAY_SERVER_ORIGIN}/static/icons/${getSettings(item.id).icon}`}
alt={getSettings(item.id).icon}
style="width:1.2em;height:1.2em;vertical-align:middle;margin-right:0.3em;"
/>
{/if}
{item.label}
<mark data-state={item.state}>{item.state}</mark>
</summary>
<article class="countdown-item-card">
<details on:toggle={(e) => (e.currentTarget as HTMLDetailsElement).open && countdownStore.select(item.id)}>
<summary>
{#if getSettings(item.id).icon}
<img
src={`${OVERLAY_SERVER_ORIGIN}/static/icons/${getSettings(item.id).icon}`}
alt={getSettings(item.id).icon}
style="width:1.2em;height:1.2em;vertical-align:middle;margin-right:0.3em;"
/>
{/if}
{item.label}
<mark data-state={item.state}>{item.state}</mark>
</summary>
<p class="timer-display">
{#if $countdownStore.selectedId === item.id && $countdownStore.liveRemaining}
{formatDuration($countdownStore.liveRemaining)}
{:else}
{formatDuration(item.duration)}
{/if}
</p>
<p class="timer-display">
{#if $countdownStore.selectedId === item.id && $countdownStore.liveRemaining}
{formatDuration($countdownStore.liveRemaining)}
{:else}
{formatDuration(item.duration)}
{/if}
</p>
<div class="countdown-actions">
{#if item.state === "Idle"}
<button on:click={() => selectAndRun(item.id, countdownStore.startSelected)}>Start</button>
{:else if item.state === "Running"}
<button on:click={() => selectAndRun(item.id, countdownStore.pauseSelected)}>Pause</button>
{:else if item.state === "Paused"}
<button on:click={() => selectAndRun(item.id, countdownStore.resumeSelected)}>Resume</button>
{/if}
<button class="secondary" on:click={() => selectAndRun(item.id, countdownStore.resetSelected)}>Reset</button>
<button class="secondary contrast" on:click={() => selectAndRun(item.id, countdownStore.deleteSelected)}>Delete</button>
</div>
<div class="countdown-actions">
{#if item.state === "Idle"}
<button on:click={() => selectAndRun(item.id, countdownStore.startSelected)}>Start</button>
{:else if item.state === "Running"}
<button on:click={() => selectAndRun(item.id, countdownStore.pauseSelected)}>Pause</button>
{:else if item.state === "Paused"}
<button on:click={() => selectAndRun(item.id, countdownStore.resumeSelected)}>Resume</button>
{/if}
<button class="secondary" on:click={() => selectAndRun(item.id, countdownStore.resetSelected)}>Reset</button>
<button class="secondary contrast" on:click={() => selectAndRun(item.id, countdownStore.deleteSelected)}>Delete</button>
</div>
<hr />
<hr />
<p><small>Icon</small></p>
<div class="icon-picker">
{#each icons as name}
<p><small>Icon</small></p>
<div class="icon-picker">
{#each icons as name}
<button
class="icon-btn {getSettings(item.id).icon === name ? 'selected' : ''}"
on:click={() => {
updateSettings(item.id, {icon: name});
pushConfig(item.id);
}}
>
<img src={`${OVERLAY_SERVER_ORIGIN}/static/icons/${name}`} alt={name} />
</button>
{/each}
<button
class="icon-btn {getSettings(item.id).icon === name ? 'selected' : ''}"
class="icon-btn"
on:click={() => {
updateSettings(item.id, {icon: name});
updateSettings(item.id, {icon: ''});
pushConfig(item.id);
}}
>
<img src={`${OVERLAY_SERVER_ORIGIN}/static/icons/${name}`} alt={name} />
✕
</button>
{/each}
<button
class="icon-btn"
on:click={() => {
updateSettings(item.id, {icon: ''});
pushConfig(item.id);
}}
>
✕
</button>
</div>
</div>
<div class="overlay-colors">
<label>
Text
<input
type="color"
value={getSettings(item.id).textColor}
on:change={(e) => {
updateSettings(item.id, {textColor: e.currentTarget.value});
pushConfig(item.id);
}}
/>
</label>
<label>
<input
type="checkbox"
checked={getSettings(item.id).bgTransparent}
on:change={(e) => {
updateSettings(item.id, {bgTransparent: e.currentTarget.checked});
pushConfig(item.id);
}}
/>
Transparent BG
</label>
{#if !getSettings(item.id).bgTransparent}
<div class="overlay-colors">
<label>
BG
Text
<input
type="color"
value={getSettings(item.id).bgColor}
value={getSettings(item.id).textColor}
on:change={(e) => {
updateSettings(item.id, {bgColor: e.currentTarget.value});
updateSettings(item.id, {textColor: e.currentTarget.value});
pushConfig(item.id);
}}
/>
</label>
{/if}
</div>
<label>
<input
type="checkbox"
checked={getSettings(item.id).bgTransparent}
on:change={(e) => {
updateSettings(item.id, {bgTransparent: e.currentTarget.checked});
pushConfig(item.id);
}}
/>
Transparent BG
</label>
{#if !getSettings(item.id).bgTransparent}
<label>
BG
<input
type="color"
value={getSettings(item.id).bgColor}
on:change={(e) => {
updateSettings(item.id, {bgColor: e.currentTarget.value});
pushConfig(item.id);
}}
/>
</label>
{/if}
</div>
<div class="source-url">
<input readonly value={`${OVERLAY_SERVER_ORIGIN}/overlay/countdown?id=${item.id}`} />
<button class="secondary" on:click={() => copyUrl(item.id)}>Copy</button>
</div>
</details>
<div class="source-url">
<input readonly value={`${OVERLAY_SERVER_ORIGIN}/overlay/countdown?id=${item.id}`} />
<button class="secondary" on:click={() => copyUrl(item.id)}>Copy</button>
</div>
</details>
</article>
{/each}