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

Tweaking things.

Browse Source
This commit is contained in:
Scott Idem
2026-06-16 20:09:52 -04:00
parent 3fc0a33044
commit 4c148206ac
1 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -258,11 +258,17 @@ function apply_theme(value: string) {
ae_sys_panel
flex max-h-[80vh] w-80 max-w-[94vw]
flex-col items-stretch
gap-0 overflow-x-hidden overflow-y-auto
rounded-xl border border-gray-200/70 bg-white/85 text-sm
text-gray-900 shadow-2xl backdrop-blur-md
dark:border-gray-700/70 dark:bg-gray-900/85
dark:text-gray-100
gap-0
overflow-x-hidden overflow-y-auto
rounded-xl border
border-primary-400-600/50
bg-white/0 dark:bg-gray-900/60
shadow-2xl backdrop-blur-md
text-sm
text-gray-950-50
transition-all
duration-300
">
<!-- Panel header: person info + close -->
<div
@@ -285,9 +291,9 @@ function apply_theme(value: string) {
</div>
<button
type="button"
class="btn btn-icon btn-sm preset-tonal-surface hover:preset-filled-error ml-2 shrink-0 transition-all"
class="btn btn-icon btn-sm preset-filled-tertiary-200-800 hover:preset-filled-error ml-2 shrink-0 transition-all"
onclick={toggle_expand}
title="Close menu">
title="Close the Aether system menu">
<CircleX size="1.1em" />
</button>
</div>
@@ -297,7 +303,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800">
<button
type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_signin = !sec_signin)}>
<span class="flex min-w-0 items-center gap-1.5">
{#if $ae_loc?.person_id && $ae_loc?.user_id}
@@ -337,7 +343,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800">
<button
type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_access = !sec_access)}>
<span class="flex min-w-0 items-center gap-1.5">
{#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
@@ -391,7 +397,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800">
<button
type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_appearance = !sec_appearance)}>
<span class="flex items-center gap-1">
<Palette size="1em" class="opacity-60" />
@@ -411,8 +417,8 @@ function apply_theme(value: string) {
type="button"
class="btn btn-sm flex-1 transition-all
{$ae_loc?.theme_mode === 'dark'
? 'preset-tonal-secondary hover:preset-filled-secondary-500'
: 'preset-tonal-warning hover:preset-filled-warning-500'}"
? 'preset-tonal-secondary hover:preset-filled-secondary-400-600'
: 'preset-tonal-secondary hover:preset-filled-secondary-400-600'}"
onclick={toggle_theme_mode}
title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
'unknown'})">
@@ -426,7 +432,7 @@ function apply_theme(value: string) {
</button>
<button
type="button"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary flex-1 transition-all"
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-400-600 flex-1 transition-all"
onclick={cycle_font_size}
title={font_title}>
<span class="text-sm leading-none font-bold"
@@ -438,11 +444,11 @@ function apply_theme(value: string) {
<!-- Theme picker: compact grouped select -->
<div class="flex items-center gap-2">
<span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">Theme</span>
<span class="shrink-0 text-xs text-surface-600-400">Theme</span>
<select
bind:value={$ae_loc.theme_name}
onchange={(e) => apply_theme((e.target as HTMLSelectElement).value)}
class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
class="flex-1 rounded-md border border-gray-200 px-2 py-1 text-xs text-surface-800-200 dark:border-gray-600 bg-surface-200-800"
title="Select theme (current: {$ae_loc.theme_name ?? 'default'})">
<optgroup label="System">
{#each skeleton_themes as opt (opt.value)}
@@ -470,7 +476,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800">
<button
type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_dev = !sec_dev)}>
<span class="flex items-center gap-1">
<Bug size="0.9em" class="opacity-60" />
@@ -596,16 +602,16 @@ function apply_theme(value: string) {
class="
ae_sys_bar__strip
flex h-9 flex-row items-center
gap-1
gap-1 px-2
rounded-xl border
border-gray-200/60
bg-white/30 px-2 shadow-lg
backdrop-blur-sm
transition-colors
border-primary-400-600/50
bg-white/30 dark:bg-gray-900/30
shadow-lg backdrop-blur-sm
text-gray-900-100
transition-all
duration-300
dark:border-gray-700/60 dark:bg-gray-900/30
"
class:border-primary-400={expand}>
class:border-primary-400-600={expand}>
<!-- AUTH STATUS SHIELD — hidden in iframe; host page manages auth context -->
{#if !$ae_loc?.iframe}
{#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous' && expand}
@@ -613,13 +619,14 @@ function apply_theme(value: string) {
type="button"
class="
btn btn-sm group/shield transition-all duration-200
preset-tonal-surface preset-outlined-surface
{$ae_loc?.access_type &&
$ae_loc?.access_type !== 'anonymous'
? $ae_loc?.user_access_type &&
$ae_loc?.access_type === $ae_loc?.user_access_type
? 'variant-outline-surface hover:variant-ghost-warning'
: 'variant-outline-warning hover:variant-ghost-warning'
: 'variant-outline-surface hover:variant-ghost-success'}
? 'hover:preset-tonal-success'
: 'preset-tonal-warning hover:preset-tonal-warning'
: 'preset-outlined-surface hover:preset-tonal-success'}
"
onclick={handle_shield_click}
title={$ae_loc?.access_type &&
@@ -721,9 +728,9 @@ function apply_theme(value: string) {
<!-- MENU EXPAND / COLLAPSE ───────────────────────────────────── -->
<button
type="button"
class="btn btn-sm preset-filled-tertiary-400-600 hover:preset-filled-success group/menu transition-all duration-200"
class="btn btn-sm preset-filled-tertiary-200-800 hover:preset-filled-success group/menu transition-all duration-200"
onclick={toggle_expand}
title={expand ? 'Close menu' : 'Open menu'}>
title={expand ? 'Close the Aether system menu' : 'Open menu'}>
{#if expand}
<CircleX size="1.1em" class="shrink-0" />
<span