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" /> <ShieldUser size="1.1em" class="shrink-0" />
{/if} {/if}
<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/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?'} {access_label ?? 'Auth?'}
</span> </span>
</button> </button>
@@ -639,12 +639,12 @@ const theme_options = [
{#if !$ae_loc?.iframe} {#if !$ae_loc?.iframe}
<button <button
type="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} onclick={cycle_font_size}
title={font_title}> title={font_title}>
<span class="text-sm leading-none font-bold">{font_label}</span> <span class="text-sm leading-none font-bold">{font_label}</span>
<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> >Font</span>
</button> </button>
{/if} {/if}
@@ -653,43 +653,43 @@ const theme_options = [
{#if !$ae_loc?.iframe} {#if !$ae_loc?.iframe}
<button <button
type="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} onclick={toggle_theme_mode}
title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ?? title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
'unknown'})"> 'unknown'})">
{#if $ae_loc?.theme_mode === 'dark'} {#if $ae_loc?.theme_mode === 'dark'}
<Moon size="1.1em" class="shrink-0" /> <Moon size="1.1em" class="shrink-0" />
<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/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> >Dark</span>
{:else} {:else}
<Sun size="1.1em" class="shrink-0" /> <Sun size="1.1em" class="shrink-0" />
<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/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> >Light</span>
{/if} {/if}
</button> </button>
{/if} {/if}
<!-- EDIT MODE TOGGLE (authenticated+ only) ───────────────────── --> <!-- EDIT MODE TOGGLE (public+ only; was authenticated+) ───────────────────── -->
{#if $ae_loc?.authenticated_access} {#if $ae_loc?.public_access}
{#if $ae_loc.edit_mode} {#if $ae_loc.edit_mode}
<button <button
type="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={() => { onclick={() => {
$ae_loc.edit_mode = false; $ae_loc.edit_mode = false;
}} }}
title="Edit mode ON — click to turn off"> title="Edit mode ON — click to turn off">
<ToggleRight size="1em" class="inline-block text-sm" /> <ToggleRight size="1em" class="inline-block text-sm" />
<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/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> >Edit</span>
</button> </button>
{:else} {:else}
<button <button
type="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={() => { onclick={() => {
$ae_loc.edit_mode = true; $ae_loc.edit_mode = true;
}} }}
@@ -698,8 +698,8 @@ const theme_options = [
size="1em" size="1em"
class="inline-block text-sm opacity-50" /> class="inline-block text-sm opacity-50" />
<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/edit:max-w-20 group-hover/edit: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/edit:max-w-20 group-hover/edit:opacity-100"
>Edit</span> >Edit?</span>
</button> </button>
{/if} {/if}
{/if} {/if}
@@ -713,12 +713,12 @@ const theme_options = [
{#if expand} {#if expand}
<CircleX size="1.1em" class="shrink-0" /> <CircleX size="1.1em" class="shrink-0" />
<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/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> >Close</span>
{:else} {:else}
<Menu size="1.1em" class="shrink-0" /> <Menu size="1.1em" class="shrink-0" />
<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/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> >Menu</span>
{/if} {/if}
</button> </button>