Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making things look nicer.

Browse Source
This commit is contained in:
Scott Idem
2026-04-01 18:09:17 -04:00
parent 601bcf94b0
commit 38c5345060
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -629,7 +629,7 @@ const theme_options = [
<ShieldUser size="1.1em" class="shrink-0" />
{/if}
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/shield:max-w-20 group-hover/shield:opacity-100">
class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/shield:max-w-20 group-hover/shield:opacity-100">
{access_label ?? 'Auth?'}
</span>
</button>
@@ -639,12 +639,12 @@ const theme_options = [
{#if !$ae_loc?.iframe}
<button
type="button"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary group/font transition-all duration-200"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary group/font transition-all duration-700 hover:duration-200"
onclick={cycle_font_size}
title={font_title}>
<span class="text-sm leading-none font-bold">{font_label}</span>
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/font:max-w-20 group-hover/font:opacity-100"
class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/font:max-w-20 group-hover/font:opacity-100 group-hover/display:inline-block"
>Font</span>
</button>
{/if}
@@ -653,43 +653,43 @@ const theme_options = [
{#if !$ae_loc?.iframe}
<button
type="button"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary group/mode transition-all duration-200"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary group/mode transition-all duration-500 hover:duration-200"
onclick={toggle_theme_mode}
title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
'unknown'})">
{#if $ae_loc?.theme_mode === 'dark'}
<Moon size="1.1em" class="shrink-0" />
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
>Dark</span>
{:else}
<Sun size="1.1em" class="shrink-0" />
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
>Light</span>
{/if}
</button>
{/if}
<!-- EDIT MODE TOGGLE (authenticated+ only) ───────────────────── -->
{#if $ae_loc?.authenticated_access}
<!-- EDIT MODE TOGGLE (public+ only; was authenticated+) ───────────────────── -->
{#if $ae_loc?.public_access}
{#if $ae_loc.edit_mode}
<button
type="button"
class="btn btn-sm preset-tonal-warning hover:preset-tonal-success group/edit transition-all duration-200"
class="btn btn-sm preset-tonal-warning hover:preset-tonal-success group/edit transition-all duration-500 hover:duration-200 pl-.05 pr-1.5"
onclick={() => {
$ae_loc.edit_mode = false;
}}
title="Edit mode ON — click to turn off">
<ToggleRight size="1em" class="inline-block text-sm" />
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
class="btn-label max-w-0 overflow-hidden text-xs font-semibold opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
>Edit</span>
</button>
{:else}
<button
type="button"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-warning group/edit transition-all duration-200"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-warning group/edit transition-all duration-500 hover:duration-200 pl-.05 pr-1.5"
onclick={() => {
$ae_loc.edit_mode = true;
}}
@@ -698,8 +698,8 @@ const theme_options = [
size="1em"
class="inline-block text-sm opacity-50" />
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
>Edit</span>
class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
>Edit?</span>
</button>
{/if}
{/if}
@@ -713,12 +713,12 @@ const theme_options = [
{#if expand}
<CircleX size="1.1em" class="shrink-0" />
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
>Close</span>
{:else}
<Menu size="1.1em" class="shrink-0" />
<span
class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
>Menu</span>
{/if}
</button>