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

Updating the module menu to the new styling

Browse Source
This commit is contained in:
Scott Idem
2025-06-20 15:12:38 -04:00
parent e5d41a7467
commit eebcd7c731
8 changed files with 106 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/app.css
View File

@@ -277,6 +277,9 @@ html.trusted_access #appShell {
/* Buttons default to the tonal presets */
/* Buttons based on Skeleton Tailwind preset classes */
.ae_btn_neutral {
@apply preset-tonal hover:preset-outlined border transition-all;
}
.ae_btn_primary {
@apply preset-tonal-primary border border-primary-500 transition-all;
}
@@ -291,7 +294,7 @@ html.trusted_access #appShell {
@apply preset-tonal-success border border-success-500 transition-all;
}
.ae_btn_warning {
@apply preset-tonal-warning border border-warning-500 transition-all;
@apply preset-tonal-warning border border-warning-500 text-warning-950-50 transition-all;
}
.ae_btn_error {
@apply preset-tonal-error border border-error-500 transition-all;
@@ -301,7 +304,7 @@ html.trusted_access #appShell {
}
/* Buttons customized for Aether using Skeleton Tailwind preset classes */
.ae_btn_info {
@apply border text-cyan-950 dark:text-cyan-50 bg-cyan-50 dark:bg-cyan-950 border-cyan-500 transition-all;
@apply border text-cyan-950 dark:text-cyan-50 bg-cyan-50 dark:bg-cyan-950 border-cyan-100 dark:border-cyan-900 hover:bg-cyan-200 hover:dark:bg-cyan-800 transition-all;
}
/* Buttons are for filled and outlined presets */
@@ -310,15 +313,29 @@ html.trusted_access #appShell {
/* hover:preset-filled-secondary-500 */
}
.ae_btn_secondary_outlined {
@apply preset-outlined-secondary-200-800 hover:preset-filled-secondary-200-800 border border-secondary-500 transition-all;
@apply preset-outlined-secondary-200-800 hover:preset-filled-secondary-400-600 text-secondary-950-50 transition-all;
}
.ae_btn_success_outlined {
@apply preset-outlined-success-200-800 hover:preset-filled-success-400-600 text-success-950-50 transition-all;
}
.ae_btn_warning_outlined {
@apply preset-outlined-warning-200-800 hover:preset-filled-warning-200-800 border border-warning-500 transition-all;
@apply preset-outlined-warning-200-800 hover:preset-filled-warning-400-600 text-warning-950-50 transition-all;
}
.ae_btn_surface_surface {
.ae_btn_surface_filled {
@apply preset-filled-surface-200-800 border border-surface-500 transition-all;
}
.ae_btn_surface_outlined {
@apply preset-outlined-surface-200-800 hover:preset-filled-surface-400-600 text-surface-950-50 transition-all;
}
.ae_btn_error_outlined {
@apply preset-outlined-error-200-800 hover:preset-filled-error-400-600 text-error-950-50 transition-all;
}
.ae_btn_info_filled {
@apply border text-cyan-950 dark:text-cyan-50 bg-cyan-200 dark:bg-cyan-800 border-cyan-200 dark:border-cyan-800 transition-all;
}
.ae_btn_info_outlined {
@apply border text-cyan-950 dark:text-cyan-50 bg-cyan-50 dark:bg-cyan-950 border-cyan-200 dark:border-cyan-800 transition-all;
}
/* Containers customized for Aether using Skeleton Tailwind preset classes */
@@ -348,10 +365,30 @@ html.trusted_access #appShell {
@apply container;
}
.ae_container_module_menu {
@apply container;
@apply w-full flex flex-col items-center justify-center gap-1 p-1
border rounded-md border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-700 hover:duration-300;
}
.ae_container_module_options {
@apply container;
@apply
text-cyan-950 dark:text-cyan-50
bg-cyan-50 dark:bg-cyan-950 hover:bg-cyan-100 dark:hover:bg-cyan-900
border border-cyan-200 dark:border-cyan-800 hover:border-cyan-400 dark:hover:border-cyan-600
rounded-md
flex flex-row items-center justify-around
w-full max-w-full
p-2
transition-all;
}
.ae_container_module_help {
@apply
text-yellow-950 dark:text-yellow-50
bg-yellow-50 dark:bg-yellow-950 hover:bg-yellow-100 dark:hover:bg-yellow-900
border border-yellow-200 dark:border-yellow-800 hover:border-yellow-400 dark:hover:border-yellow-600
rounded-md
w-lg max-w-full
p-2
transition-all;
/* bg-yellow-100 border border-yellow-400 p-2 rounded-md max-w-xl */
}
.ae_container_actions {
@@ -377,10 +414,25 @@ html.trusted_access #appShell {
@apply container;
}
.ae_container_help {
@apply container;
@apply
text-yellow-950 dark:text-yellow-50
bg-yellow-50 dark:bg-yellow-950 hover:bg-yellow-100 dark:hover:bg-yellow-900
border border-yellow-200 dark:border-yellow-800 hover:border-yellow-400 dark:hover:border-yellow-600
rounded-md
max-w-full
p-2
transition-all;
/* bg-yellow-100 border border-yellow-400 p-2 rounded-md max-w-xl */
}
.ae_container_info {
@apply container;
@apply
text-cyan-950 dark:text-cyan-50
bg-cyan-50 dark:bg-cyan-950 hover:bg-cyan-100 dark:hover:bg-cyan-900
border border-cyan-200 dark:border-cyan-800 hover:border-cyan-400 dark:hover:border-cyan-600
rounded-md
max-w-full
p-2
transition-all;
}
.ae_container_msg {
@apply container;