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

Never ending working styling for light and dark mode in Novi.

Browse Source
This commit is contained in:
Scott Idem
2025-08-08 15:57:46 -04:00
parent 5187f6455a
commit b95111503d
6 changed files with 255 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/ae-c-idaa-light.css Normal file
View File

@@ -0,0 +1,205 @@
[data-theme='AE_c_IDAA_light'] {
--text-scaling: 1.067;
--base-font-color: var(--color-surface-950);
--base-font-family: system-ui, sans-serif;
--base-font-size: inherit;
--base-line-height: inherit;
--base-font-weight: normal;
--base-font-style: normal;
--base-letter-spacing: 0em;
--heading-font-color: inherit;
--heading-font-family: inherit;
--heading-font-weight: bold;
--heading-font-style: normal;
--heading-letter-spacing: inherit;
--anchor-font-color: var(--color-primary-600);
--anchor-font-family: inherit;
--anchor-font-size: inherit;
--anchor-line-height: inherit;
--anchor-font-weight: inherit;
--anchor-font-style: inherit;
--anchor-letter-spacing: inherit;
--anchor-text-decoration: none;
--anchor-text-decoration-hover: underline;
--anchor-text-decoration-active: none;
--anchor-text-decoration-focus: none;
--spacing: 0.25rem;
--radius-base: 0.375rem;
--radius-container: 0.75rem;
--default-border-width: 1px;
--default-divide-width: 1px;
--default-ring-width: 1px;
--body-background-color: var(--color-surface-50);
--color-primary-50: oklch(85.73% 0.07 251.8deg);
--color-primary-100: oklch(78.5% 0.09 252.03deg);
--color-primary-200: oklch(71.06% 0.1 253.6deg);
--color-primary-300: oklch(63.76% 0.12 253.85deg);
--color-primary-400: oklch(56.32% 0.14 255.25deg);
--color-primary-500: oklch(49.23% 0.15 256.36deg);
--color-primary-600: oklch(43.11% 0.14 258.86deg);
--color-primary-700: oklch(36.85% 0.14 261.54deg);
--color-primary-800: oklch(30.41% 0.13 263.99deg);
--color-primary-900: oklch(23.91% 0.12 265.91deg);
--color-primary-950: oklch(16.96% 0.12 264.05deg);
--color-primary-contrast-light: var(--color-primary-50);
--color-primary-contrast-500: var(--color-primary-contrast-light);
--color-primary-contrast-600: var(--color-primary-contrast-light);
--color-primary-contrast-700: var(--color-primary-contrast-light);
--color-primary-contrast-800: var(--color-primary-contrast-light);
--color-primary-contrast-900: var(--color-primary-contrast-light);
--color-primary-contrast-950: var(--color-primary-contrast-light);
--color-secondary-50: oklch(96.26% 0.06 196.24deg);
--color-secondary-100: oklch(89.14% 0.07 220.79deg);
--color-secondary-200: oklch(82.13% 0.08 234.87deg);
--color-secondary-300: oklch(75.03% 0.11 245.33deg);
--color-secondary-400: oklch(68.15% 0.14 250.72deg);
--color-secondary-500: oklch(61.37% 0.16 255.34deg);
--color-secondary-600: oklch(55.1% 0.16 256.81deg);
--color-secondary-700: oklch(48.64% 0.15 258.4deg);
--color-secondary-800: oklch(41.84% 0.15 260.39deg);
--color-secondary-900: oklch(35.05% 0.14 262.03deg);
--color-secondary-950: oklch(28.12% 0.14 262.47deg);
--color-secondary-contrast-light: var(--color-secondary-50);
--color-secondary-contrast-600: var(--color-secondary-contrast-light);
--color-secondary-contrast-700: var(--color-secondary-contrast-light);
--color-secondary-contrast-800: var(--color-secondary-contrast-light);
--color-secondary-contrast-900: var(--color-secondary-contrast-light);
--color-secondary-contrast-950: var(--color-secondary-contrast-light);
--color-tertiary-50: oklch(100% 0 none);
--color-tertiary-100: oklch(96.07% 0.01 251.15deg);
--color-tertiary-200: oklch(91.88% 0.03 252.69deg);
--color-tertiary-300: oklch(87.99% 0.05 253.24deg);
--color-tertiary-400: oklch(83.81% 0.06 253.57deg);
--color-tertiary-500: oklch(79.93% 0.08 253.32deg);
--color-tertiary-600: oklch(72.53% 0.08 251.75deg);
--color-tertiary-700: oklch(64.93% 0.08 249.75deg);
--color-tertiary-800: oklch(57.14% 0.09 247.99deg);
--color-tertiary-900: oklch(49.18% 0.09 246.55deg);
--color-tertiary-950: oklch(41.1% 0.09 246.54deg);
--color-tertiary-contrast-light: var(--color-tertiary-50);
--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
--color-success-50: oklch(95.82% 0.06 184.52deg);
--color-success-100: oklch(91.55% 0.08 172.29deg);
--color-success-200: oklch(87.44% 0.11 165.22deg);
--color-success-300: oklch(83.26% 0.13 161.2deg);
--color-success-400: oklch(79.56% 0.16 157.13deg);
--color-success-500: oklch(76.12% 0.18 153.61deg);
--color-success-600: oklch(69.31% 0.17 151.81deg);
--color-success-700: oklch(62.07% 0.16 149.95deg);
--color-success-800: oklch(54.9% 0.15 147.65deg);
--color-success-900: oklch(47.26% 0.14 145.54deg);
--color-success-950: oklch(39.64% 0.13 143.79deg);
--color-success-contrast-light: var(--color-success-50);
--color-success-contrast-800: var(--color-success-contrast-light);
--color-success-contrast-900: var(--color-success-contrast-light);
--color-success-contrast-950: var(--color-success-contrast-light);
--color-warning-50: oklch(98.26% 0.1 108.02deg);
--color-warning-100: oklch(95.84% 0.12 104.66deg);
--color-warning-200: oklch(93.48% 0.13 102.21deg);
--color-warning-300: oklch(91.49% 0.15 100.17deg);
--color-warning-400: oklch(89.28% 0.16 98.19deg);
--color-warning-500: oklch(87.14% 0.17 96.01deg);
--color-warning-600: oklch(79.88% 0.16 96.31deg);
--color-warning-700: oklch(72.35% 0.14 95.62deg);
--color-warning-800: oklch(64.73% 0.13 95.92deg);
--color-warning-900: oklch(56.77% 0.11 94.87deg);
--color-warning-950: oklch(48.63% 0.1 95.22deg);
--color-warning-contrast-light: var(--color-warning-50);
--color-warning-contrast-800: var(--color-warning-contrast-light);
--color-warning-contrast-900: var(--color-warning-contrast-light);
--color-warning-contrast-950: var(--color-warning-contrast-light);
--color-error-50: oklch(81.88% 0.1 38.14deg);
--color-error-100: oklch(75.88% 0.13 31.15deg);
--color-error-200: oklch(70.29% 0.16 27.32deg);
--color-error-300: oklch(65.15% 0.19 25.65deg);
--color-error-400: oklch(60.98% 0.21 25.56deg);
--color-error-500: oklch(57.86% 0.22 26.62deg);
--color-error-600: oklch(52.52% 0.2 26.86deg);
--color-error-700: oklch(46.81% 0.18 27.02deg);
--color-error-800: oklch(41.15% 0.16 27.63deg);
--color-error-900: oklch(35.01% 0.14 27.9deg);
--color-error-950: oklch(28.69% 0.12 29.23deg);
--color-error-contrast-light: var(--color-error-50);
--color-error-contrast-400: var(--color-error-contrast-light);
--color-error-contrast-500: var(--color-error-contrast-light);
--color-error-contrast-600: var(--color-error-contrast-light);
--color-error-contrast-700: var(--color-error-contrast-light);
--color-error-contrast-800: var(--color-error-contrast-light);
--color-error-contrast-900: var(--color-error-contrast-light);
--color-error-contrast-950: var(--color-error-contrast-light);
--color-surface-50: oklch(100% 0 none);
--color-surface-100: oklch(93.98% 0 105.57deg);
--color-surface-200: oklch(87.66% 0 67.88deg);
--color-surface-300: oklch(81.35% 0 106.1deg);
--color-surface-400: oklch(74.79% 0 84.45deg);
--color-surface-500: oklch(68.29% 0 91.36deg);
--color-surface-600: oklch(60.99% 0 91.38deg);
--color-surface-700: oklch(53.5% 0 84.49deg);
--color-surface-800: oklch(46.03% 0 91.43deg);
--color-surface-900: oklch(37.94% 0 84.52deg);
--color-surface-950: oklch(29.34% 0 84.54deg);
--color-surface-contrast-light: var(--color-surface-50);
--color-surface-contrast-700: var(--color-surface-contrast-light);
--color-surface-contrast-800: var(--color-surface-contrast-light);
--color-surface-contrast-900: var(--color-surface-contrast-light);
--color-surface-contrast-950: var(--color-surface-contrast-light);
}

19
src/app.css
View File

@@ -19,6 +19,7 @@
/* @import '@skeletonlabs/skeleton/themes/ae_c_lci'; */
@import './ae-osit-default.css';
@import './ae-c-lci.css';
@import './ae-c-idaa-light.css';
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
@@ -77,7 +78,7 @@
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
/* .dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
@@ -105,7 +106,7 @@
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
} */
}
@layer base {
@@ -879,6 +880,20 @@ img.qr_code:focus {
.iframe .novi_btn {
border-radius: 60px;
border-color: hsla(0, 0%, 50%, .5);
}
.iframe .novi_label {
color: white;
}
.iframe .novi_black {
color: black;
}
.iframe .novi_white {
color: white;
}
.iframe .novi_margin_sm {

27
src/lib/e_app_help_tech.svelte
View File

@@ -121,6 +121,8 @@ function send_help_tech_email() {
body_html: body_html,
});
help_tech_text = ''; // Clear the text area after sending
}
</script>
@@ -169,17 +171,17 @@ function send_help_tech_email() {
<h3
class="
text-base font-semibold text-gray-800
text-base font-semibold text-gray-800 dark:text-gray-200
w-fit
"
>
{#if e_success}
<span class="text-green-500">
<span class="text-green-800 dark:text-green-200 font-semibold">
<BadgeQuestionMark class="inline-block mr-2" />
Help Requested
</span>
{:else}
<span class="text-gray-800 font-semibold">
<span class="text-gray-800 dark:text-gray-200 font-semibold">
<BadgeQuestionMark class="inline-block mr-2" />
<!-- Request Technical Help -->
Notify Technical Support
@@ -222,7 +224,7 @@ function send_help_tech_email() {
})}
>
<textarea
class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded"
class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded text-gray-950 dark:text-gray-50"
placeholder="Send with or without a description...."
bind:value={help_tech_text}
></textarea>
@@ -255,14 +257,20 @@ function send_help_tech_email() {
<div
class="
text-sm text-gray-500 text-center italic
text-sm text-gray-700 dark:text-gray-300 text-center italic
"
>
This is intended for technical issues only. Please contact your organization's staff if you have a question about your membership, recorded content, meetings, or posts.
</div>
<div
class="border border-gray-300 rounded p-2">
class="
border border-gray-300 rounded p-2
w-full
max-w-2xl
overflow-scroll
"
>
<div
class="
d-flex align-items-center justify-content-between
@@ -272,8 +280,7 @@ function send_help_tech_email() {
>
<h4
class="
text-base font-semibold text-gray-800
text-base font-semibold text-gray-800 dark:text-gray-200
flex flex-row gap-1 items-center justify-center
"
>
@@ -310,6 +317,7 @@ function send_help_tech_email() {
<li><span class="text-sm text-gray-500">Browser =</span> {navigator.userAgent}</li>
<li><span class="text-sm text-gray-500">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
<li><span class="text-sm text-gray-500">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
<li><span class="text-sm text-gray-500">Dark mode =</span> {window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}</li>
<li><span class="text-sm text-gray-500">In iframe =</span> {$ae_loc?.iframe}</li>
<li><span class="text-sm text-gray-500">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
<li><span class="text-sm text-gray-500">Theme Name =</span> {$ae_loc?.theme_name}</li>
@@ -336,7 +344,7 @@ function send_help_tech_email() {
{/if}
</ul>
<div class="text-sm text-gray-500 text-center italic">
<div class="text-sm text-gray-700 dark:text-gray-300 text-center italic">
This information will be included in the help request to assist technical support in diagnosing the issue.
</div>
@@ -366,6 +374,7 @@ function send_help_tech_email() {
onclick={() => ($ae_sess.show_help_tech = true)}
class="
btn btn-sm
preset-tonal-surface
preset-outlined-warning-600-400
transition-all
{btn_class}

1
src/lib/e_app_theme.svelte
View File

@@ -105,6 +105,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
<option value="wintry">Wintry</option>
<!-- <option value="ae_c_osit">OSIT</option> -->
<option value="AE_OSIT_default">OSIT</option>
<option value="AE_c_IDAA_light">IDAA - light</option>
<option value="AE_c_LCI">LCI</option>
</select>
</div>

8
src/routes/+layout.svelte
View File

@@ -385,6 +385,14 @@ if ($ae_loc?.site_cfg_json?.theme_name) {
}
if ($ae_loc?.site_cfg_json?.theme_mode) {
$ae_loc.theme_mode = $ae_loc.site_cfg_json.theme_mode;
if (browser && window.matchMedia('(prefers-color-scheme: dark)').matches) {
$ae_loc.theme_mode = 'dark';
} else {
$ae_loc.theme_mode = 'light';
}
$ae_loc.theme_mode = 'dark';
}

9
src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
View File

@@ -55,7 +55,10 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
class="flex flex-row gap-1 items-center justify-around"
>
<label
class="text-sm w-32 md:w-42 form-group"
class="
novi_label
text-sm text-gray-700 dark:text-gray-300 w-32 md:w-42 form-group
"
for="qry_limit__posts">
Max posts:
@@ -231,7 +234,7 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
// $idaa_sess.bb.show__inline_edit__post_obj = true;
}}
class="
novi_btn btn-tertiary
novi_btn novi_white btn-tertiary
text-xs
btn btn-sm
preset-tonal-warning preset-outlined-warning-200-800 hover:preset-filled-warning-200-800
@@ -249,7 +252,7 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
e_class=""
e_class_form_hidden="float-right"
e_class_form_showing="inline-block"
btn_class="novi_btn"
btn_class="novi_btn novi_white"
show_btn_class=""