diff --git a/src/app.css b/src/app.css index 0694e23f..16e08345 100644 --- a/src/app.css +++ b/src/app.css @@ -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; diff --git a/src/lib/element_ae_crud.svelte b/src/lib/element_ae_crud.svelte index 41314ebb..b657d43c 100644 --- a/src/lib/element_ae_crud.svelte +++ b/src/lib/element_ae_crud.svelte @@ -162,9 +162,10 @@ async function handle_obj_field_patch(new_field_value: any) { on:dblclick={() => { show_crud = true; }} - title="Double click to edit" + title="Double click to edit property" > + @@ -178,7 +179,7 @@ async function handle_obj_field_patch(new_field_value: any) {