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

More clean up. Set the z index.

Browse Source
This commit is contained in:
Scott Idem
2025-04-30 17:44:55 -04:00
parent 15cb0aa0c5
commit 4906e45b61
2 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/lib/element_theme.svelte
View File

@@ -26,7 +26,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
} }
--> -->
<div> <section class="space-y-2">
<button <button
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary"
onclick={() => { onclick={() => {
@@ -74,13 +74,12 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
Change Theme Change Theme
</span> </span>
</button> --> </button> -->
</div>
<section class="space-y-2"> <!-- <section class="space-y-2">
<h2 class="strong">Theme:</h2> <h2 class="strong">Theme:</h2> -->
<div>
<!-- Light/Dark Theme: --> <!-- Light/Dark Theme: -->
<!-- <div>
<RadioGroup <RadioGroup
active="variant-glass-success" active="variant-glass-success"
hover="hover:variant-ringed-surface" hover="hover:variant-ringed-surface"
@@ -106,13 +105,30 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
Dark Dark
</RadioItem> </RadioItem>
</RadioGroup> </RadioGroup>
</div> </div> -->
<div> <div>
<!-- Theme Name: --> <!-- Theme Name: -->
<select <select
onchange={() => { onchange={(event) => {
$slct_trigger = 'set_theme_name'; // $slct_trigger = 'set_theme_name';
let new_theme_name = event.target.value;
// document.documentElement.theme = new_theme_name;
console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
// $slct_trigger = null;
// Update the body attribute named "data-theme" to the current theme name.
document.body.setAttribute('data-theme', new_theme_name);
// document.body.setAttribute('data-theme', $ae_loc?.theme_name);
// if ($ae_loc.theme_mode == 'light') {
// document.documentElement.classList.remove('dark');
// document.documentElement.classList.add('light');
// } else if ($ae_loc.theme_mode == 'dark') {
// document.documentElement.classList.remove('light');
// document.documentElement.classList.add('dark');
// }
}} }}
bind:value={$ae_loc.theme_name} bind:value={$ae_loc.theme_name}
class="select" class="select"
@@ -126,4 +142,5 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
<option value="wintry">Wintry</option> <option value="wintry">Wintry</option>
</select> </select>
</div> </div>
</section> </section>

4
src/routes/+layout.svelte
View File

@@ -855,6 +855,7 @@ max-w-max -->
hover:opacity-100 hover:opacity-100
duration-50 delay-1000 hover:delay-100 hover:ease-out duration-50 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all transition hover:transition-all
z-10 hover:z-20
" "
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn} class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
> >
@@ -1052,6 +1053,7 @@ max-w-max -->
hover:opacity-100 hover:opacity-100
duration-100 delay-1000 hover:delay-100 hover:ease-out duration-100 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all transition hover:transition-all
z-20 hover:z-30
" "
class:hidden={!$ae_loc?.app_cfg?.show_element__menu} class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
> >
@@ -1255,7 +1257,7 @@ hover:opacity-100 -->
font-size: .75rem; font-size: .75rem;
z-index: 15; /* z-index: 15; */
/* NOTE: transition when no longer hovering */ /* NOTE: transition when no longer hovering */
transition-property: opacity, background-color; transition-property: opacity, background-color;