@import 'tailwindcss'; /* Enable class-based dark mode for Tailwind v4. Without this, Tailwind v4 defaults to @media (prefers-color-scheme: dark), which ignores the .dark class on and always follows the OS setting. This makes the dark/light toggle in e_app_theme.svelte actually work. */ @custom-variant dark (&:where(.dark, .dark *)); @import '@skeletonlabs/skeleton'; /* Register Preset Themes */ /* @import '@skeletonlabs/skeleton/themes/{theme-name}'; */ @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/concord'; @import '@skeletonlabs/skeleton/themes/crimson'; @import '@skeletonlabs/skeleton/themes/hamlindigo'; @import '@skeletonlabs/skeleton/themes/modern'; @import '@skeletonlabs/skeleton/themes/nouveau'; @import '@skeletonlabs/skeleton/themes/rocket'; @import '@skeletonlabs/skeleton/themes/terminus'; @import '@skeletonlabs/skeleton/themes/vintage'; @import '@skeletonlabs/skeleton/themes/wintry'; /* @import '@skeletonlabs/skeleton/themes/ae_c_osit'; */ /* @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'; /* Add your theme import for your theme: "osit-custom-theme" here */ /* @plugin '@tailwindcss/forms'; */ /* @plugin '@tailwindcss/typography'; */ /* @import "tailwindcss/theme.css" layer(theme); */ /* @import "tailwindcss/preflight"; */ @import 'tailwindcss/utilities.css' layer(utilities); /*@tailwind utilities;*/ /* Register a Custom Themes */ /* Make sure to resolve the relative path. */ /* Note the .css extension is optional. */ /* @import '../{my-theme-name}'; */ /* @import '@fontsource/open-sans'; */ /* https://www.skeleton.dev/docs/guides/cookbook/light-switch */ /* @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *)); */ @layer base { :root { --background: 0 0% 100%; --foreground: 224 71.4% 4.1%; --muted: 220 14.3% 95.9%; --muted-foreground: 220 8.9% 46.1%; --popover: 0 0% 100%; --popover-foreground: 224 71.4% 4.1%; --card: 0 0% 100%; --card-foreground: 224 71.4% 4.1%; --border: 220 13% 91%; --input: 220 13% 91%; --primary: 220.9 39.3% 11%; --primary-foreground: 210 20% 98%; --secondary: 220 14.3% 95.9%; --secondary-foreground: 220.9 39.3% 11%; --accent: 220 14.3% 95.9%; --accent-foreground: 220.9 39.3% 11%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 210 20% 98%; --ring: 224 71.4% 4.1%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } /* .dark { --background: 224 71.4% 4.1%; --foreground: 210 20% 98%; --muted: 215 27.9% 16.9%; --muted-foreground: 217.9 10.6% 64.9%; --popover: 224 71.4% 4.1%; --popover-foreground: 210 20% 98%; --card: 224 71.4% 4.1%; --card-foreground: 210 20% 98%; --border: 215 27.9% 16.9%; --input: 215 27.9% 16.9%; --primary: 210 20% 98%; --primary-foreground: 220.9 39.3% 11%; --secondary: 215 27.9% 16.9%; --secondary-foreground: 210 20% 98%; --accent: 215 27.9% 16.9%; --accent-foreground: 210 20% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 20% 98%; --ring: 216 12.2% 83.9%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --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 { * { border-color: hsl(var(--border)); } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } /* Tailwind preflight strips native select padding — restore it globally */ select { padding-inline: 0.5rem; } } /* There are no more Tailwind layers. */ html, body { @apply h-full overflow-hidden; /* font-family: 'Liberation Sans', sans-serif; */ /* font-family: 'Noto Sans', sans-serif; */ } html.super_access #appShell { background-color: hsla(0, 100%, 50%, 0.5); } html.manager_access #appShell { background-color: hsla(0, 50%, 75%, 0.5); } html.administrator_access #appShell { background-color: hsla(40, 50%, 85%, 0.25); } html.trusted_access #appShell { background-color: hsla(20, 50%, 85%, 0.25); } /* default theme */ /* @font-face { font-family: 'Liberation Sans', sans-serif; font-family: 'Noto Sans', sans-serif; src: url('/fonts/liberation/LiberationSans-Regular.ttf'); src: url('/fonts/noto/NotoSans-Regular.ttf'); font-display: swap; } */ /* modern theme */ @font-face { font-family: 'Quicksand'; src: url('/fonts/Quicksand.ttf'); font-display: swap; } /* :root [data-theme='modern'] { */ /* --theme-rounded-base: 20px; --theme-rounded-container: 4px; */ /* --theme-font-family-base: 'Liberation Sans', sans-serif; */ /* --theme-font-family-heading: 'Liberation Sans', sans-serif; */ /* } */ /* Using Skeleton Tailwind Presets */ /* Built in colors (also with "contrast" option): * - primary * - secondary * - tertiary * - success * - warning * - error * - surface */ /* Built in presets: * - Filled - a filled preset of the primary brand color. * - Tonal - a tonal preset of the primary brand color. * - Outlined - an outlined preset of the primary brand color. */ /* Additional customized presets: * - Glass - a custom preset using background transparency and backdrop blur. * - Elevated - mixes a filled preset with a shadow. * - Ghost - has no style by default, but shows a tonal preset on hover. * - Ghost Icon - has no style by default, but shows a branded tonal preset on hover. * - Gradient - a custom preset generated using Tailwind gradient primitives. */ /* Generic button types needed: * - primary * - secondary * - tertiary * - success * - warning * - error * - neutral * - surface * - info * - danger * - normal * - outline * - text */ /* Aether specific button types needed: * - open or view * - close or hide * - help * - save * - delete * - cancel * - confirm * - reset * - submit * - next or previous * - back * - edit * - create * - add * - remove * - copy * - paste * - download * - upload * - print * - share * - search * - filter * - sort * - select * - clear * - toggle or switch * - expand or collapse * - configure or settings * - refresh or reload * - sync or synchronize * - play or pause * - stop * - like or dislike * - favorite or unfavorite * - follow or unfollow * - subscribe or unsubscribe * - vote or unvote * - rate or review * - report or flag * - block or unblock * - accept or decline * - agree or disagree * - confirm or cancel * - approve or reject */ /* Create a custom preset in your global stylesheet */ /* .preset-gradient { background-image: linear-gradient(-45deg, var(--color-primary-300), var(--color-primary-700)); color: var(--color-primary-contrast-500); } */ /* .preset-glass-primary { background: color-mix(in oklab, var(--color-primary-500) 40%, transparent); box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset; backdrop-filter: blur(16px); } */ /* * - tonal buttons - use these for most buttons * - filled buttons - use these for buttons that need to stand out * - outlined buttons - use these for buttons that need to be less prominent (sort of like TW v3 ghost) */ /* 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; */ } .ae_btn_secondary { @apply preset-tonal-secondary border border-secondary-500 transition-all; /* hover:preset-filled-secondary-500 */ } .ae_btn_tertiary { @apply preset-tonal-tertiary border border-tertiary-500 transition-all; } .ae_btn_success { @apply preset-tonal-success border border-success-500 transition-all; } .ae_btn_warning { @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; } .ae_btn_surface { @apply preset-tonal-surface border border-surface-500 transition-all; } /* 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-100 dark:border-cyan-900 hover:bg-cyan-200 hover:dark:bg-cyan-800 transition-all; } /* Buttons are for filled and outlined presets */ .ae_btn_secondary_filled { @apply preset-filled-secondary-200-800 border border-secondary-500 transition-all; /* hover:preset-filled-secondary-500 */ } .ae_btn_secondary_outlined { @apply preset-outlined-secondary-200-800 hover:preset-filled-secondary-400-600 text-secondary-950-50 transition-all; } .ae_btn_success_filled { @apply preset-filled-success-200-800 border border-success-500 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_filled { @apply preset-filled-warning-200-800 border border-warning-500 transition-all; } .ae_btn_warning_outlined { @apply preset-outlined-warning-200-800 hover:preset-filled-warning-400-600 text-warning-950-50 transition-all; } .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 */ .ae_container_system_menu { @apply container; } .ae_container_system_options { @apply container; } .ae_container_system_help { @apply container; } .ae_container_module { @apply container; /* @apply container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; */ } /* .ae_container_module_main { @apply container; } */ .ae_module_header { /* LCI request 3a5997 */ /* bg-gray-300 */ @apply preset-tonal-surface rounded-md flex flex-col md:flex-row flex-wrap gap-0.25 items-center justify-between w-full max-w-7xl p-1 px-2; } [data-theme='AE_c_LCI'] .ae_module_header { /* LCI request 3a5997 */ /* bg-gray-300 */ @apply preset-tonal-primary; } [data-theme='AE_c_LCI'] .ae_obj__event_presenter { @apply preset-filled-success-500; /* --color-success-500; */ } .ae_container_module_content { @apply container; } .ae_container_module_menu { @apply w-full max-w-7xl 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 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 flex-wrap 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 { @apply container preset-tonal-success border border-success-500 rounded-md flex flex-row items-center my-2 p-2; } .ae_container_results { @apply container; } .ae_container_content { @apply container; } .ae_container_content_header { @apply container; } .ae_container_content_content { @apply container; } .ae_container_content_footer { @apply container; } .ae_container_alert { @apply container; } .ae_container_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 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 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; } .ae_container_warning { @apply container; } .ae_container_tag { @apply container; } .ae_container_modal { @apply container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8; } .ae_container_modal_header { @apply container; } .ae_container_modal_content { @apply container; } .ae_container_modal_footer { @apply container; } /* Standard Aether object properties: * - id * - name * - enable * - hide * - priority * - sort * - group * - notes */ .card-footer { border-top: 1px solid hsla(0, 0%, 0%, 0.5); margin-top: 1em; padding-top: 1em; opacity: 0.5; } /* Tailwind: This "fixes" Tailwind's default group button styles that do not seem to allow hiding buttons. */ .btn-group a.hidden, .btn-group button.hidden { display: none; } .ae_d_none { display: none; } /* Allow content to scroll horizontal if too wide */ .ae_h_scrollfix { max-width: 100%; overflow-x: auto; } /* These helps with the Skeleton Tailwind modal utility. */ .ae_modal_scrollfix { /* Allow modal content to scroll if it's too long */ overflow-y: auto; max-height: 96vh; /* max-height: 99%; */ } .ae_debug { /* A darker pink outline */ outline: thin dashed; outline-color: hsla(0, 100%, 50%, 0.15); /* A light pink background color */ background-color: hsla(0, 100%, 50%, 0.15); } .ae_debug:hover { /* A darker pink outline */ outline-color: hsla(0, 100%, 50%, 0.5); /* A light pink background color */ background-color: hsla(0, 100%, 50%, 0.4); } /* Deal with being in an iframe */ #appShell #shell-header.iframe { display: none; } #appShell #shell-footer.iframe { display: none; } .iframe .module_header, .iframe .module_footer { display: none; } /* Remove the background from the body in all cases */ /* body[data-theme] { */ /* background: none; */ /* background-image: none; */ /* } */ /* Remove the background from the body if using iframes */ /* body[data-theme]:has(#page.iframe) { */ /* background: none; */ /* background-image: none; */ /* background-image: url('https://static.oneskyit.com/c/CHOW/images/CHOW_2024_yellow_background.png'); */ /* background-size: cover; */ /* } */ main { /* background: none; background-color: hsla(0, 0%, 100%, 0.92); */ } main > section { background: none; background-color: hsla(0, 0%, 100%, 0.92); padding: 0.5em; } /* @media (min-width: 640px) { main>div, main>section { padding: 0; max-width: 100%; } } */ /* @media (min-width: 768px) { main>div, main>section { padding: 0; max-width: 100%; } } */ .ae_sponsorships { /* background: none; */ /* background-color: hsla(0, 0%, 100%, 0.92); */ /* background-image: url('https://static.oneskyit.com/c/CHOW/images/CHOW_2024_yellow_background.png'); */ /* background-size: cover; */ } pre.pre_wrap { white-space: pre-wrap; word-break: normal; word-wrap: normal; border: none; max-width: 100%; overflow-x: auto; } input.required { /* border-right: solid medium var(--color-warning-500); */ /* color: var(--color-warning-500); */ } input:required { /* background-color: var(--alert-color-lightest); */ /* border: solid 2px red; */ /* outline: dashed thin var(--alert-color-lighter); */ /* border-right: solid medium var(--alert-color-mid); */ /* border-right: solid medium var(--warning-color-mid); */ /* border-right: solid medium var(--error-color-mid); */ } /* input:required:hover { background-color: var(--alert-color-lighter); border-right: solid thick var(--alert-color-darker); } */ /* input:required::before { display: block; content: '*'; color: var(--warning-color-darker); top: 5px; left: 5px; } */ .input_required::after { content: '*'; color: rgb(var(--color-error-500) / 0.9); position: relative; /* top: 0em; */ left: 0.25em; } /* Make the group a flex row by default */ /* div.btn-group { */ /* display: flex; */ /* gap: 0; */ /* flex-direction: row; */ /* justify-content: space-around; */ /* align-items: center; */ /* margin: 0; padding: 0; */ /* } */ /* Make all button elements except for the the first button element not rounded on the left. */ /* Make all button elements except for the fhe last button element not rounded on the right. */ /* These helps with the Skeleton (Tailwind?) button group element. */ .btn-group button { border-radius: 0; border: none; } /* .md:btn-group button, .lg:btn-group button { border-radius: 0; border: none; } */ /* div.btn-group button:first-child { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; } div.btn-group button:last-child { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; } */ .ae_obj_prop .label { } .ae_obj_prop .value { font-weight: bold; } .ae_md_hide { /* outline: medium dashed green; */ /* display: none; */ } @media (max-width: 767px) { .ae_md_hide { /* outline: medium dashed red; */ display: none; } } @media (min-width: 768px) { .ae_lg_hide { /* outline: medium dashed blue; */ display: none; } } /* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */ div.ae_quick_modal_container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: hsla(0, 0%, 0%, 0.5); } /* The section.ae_quick_popover should be above the rest of the content and centered on the page. */ section.ae_quick_popover { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; background-color: hsla(0, 0%, 100%, 0.95); padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5); min-height: 98%; min-width: 98%; } section.ae_quick_popover_small { position: fixed; top: 1em; left: 50%; transform: translate(-50%, 0%); z-index: 100; background-color: hsla(0, 0%, 100%, 0.95); padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5); min-height: 24rem; max-height: 95%; min-width: 50%; max-width: 95%; } .fade_50 { opacity: 0.5; } .fade_50:hover { opacity: 1; } .auth_view_only { display: none; } .ae_root--auth_access .auth_view_only { display: initial; } img.qr_code { /* outline: solid thin hsla(30, 100%, 50%, .1); */ /* width: 1.50in; */ } img.qr_code:hover { /* outline: solid thin green; */ /* width: 2.50in; */ } img.qr_code:focus { /* outline: solid thin red; */ /* width: 2.50in; */ } .dim { opacity: 0.5; color: hsla(0, 0%, 50%, 0.95); } .dim_warning { opacity: 0.5; /* color: hsla(0, 100%, 50%, .95); */ /* background should be hash marks */ background-image: repeating-linear-gradient( -45deg, hsla(0, 100%, 50%, 0.25), hsla(0, 100%, 50%, 0.25) 10px, transparent 10px, transparent 20px ); } .alert { /* background-color: hsla(0, 100%, 50%, .1); */ outline: dashed thin hsla(0, 100%, 50%, 0.5); } @media (max-width: 767px) { .sk_header.hide_sm { display: none; } .sk_header.show_sm { display: initial; } .sk_header.show_md { display: none; } } @media (min-width: 768px) { .sk_header.hide_md { display: none; } .sk_header.show_md { display: initial; } .sk_header.show_sm { display: none; } } /* We need to reset many of the styles for the reset_css class. */ .reset_css p { margin: 0.75em 0; } .reset_css ol { list-style-type: decimal; } .reset_css ul { list-style-type: disc; } .reset_css li { margin-left: 1.5em; } /* Reset anchor tags to the default color and underline. */ .reset_css a { color: hsla(210, 100%, 50%, 1); text-decoration: underline; } .reset_css a:hover { color: hsla(210, 100%, 50%, 0.75); text-decoration: none; } /* .ae_btn.btn-danger, .ae_btn.btn-info, .ae_btn.btn-warning { border-radius: 60px; } */ /* .ae_margin_xs { margin: 0.25em; } .ae_margin_sm { margin: 0.5em; } .ae_margin_md { margin: 0.75em; } .ae_margin_lg { margin: 1em; } .ae_margin_lg { margin: 1.25em; } */ /* BEGIN: Overrides and fixes specific to Novi and IDAA */ .iframe .novi_btn { border-radius: 60px; /* border-color: hsla(0, 0%, 50%, .5); */ /* border-color: hsla(0, 0%, 0%, .15); */ } .iframe .novi_m0 { margin: 0; } .iframe .novi_p0 { padding: 0; } .iframe .dark .novi_label { color: white; } .iframe .dark .novi_black { color: black; } .iframe .dark .novi_white { color: white; } .iframe .dark .novi_bg_black { background-color: black; } .iframe .dark .novi_bg_white { background-color: white; } .iframe .dark .novi_bg_gray { background-color: hsla(0, 0%, 50%, 1); } .iframe .dark .novi_bg_light_gray { background-color: hsla(0, 0%, 95%, 1); } .iframe .dark .novi_bg_dark_gray { background-color: hsla(0, 0%, 20%, 1); } .iframe .novi_bg_light { background-color: hsla(0, 0%, 0%, 0.15); color: hsla(0, 0%, 20%, 1); } .iframe .novi_bg_dark { background-color: hsla(0, 0%, 0%, 0.25); color: hsla(0, 0%, 95%, 1); } .iframe .novi_margin_sm { /* margin: 0.5em; */ } .iframe .novi_text_wrap { /* white-space: normal; */ white-space: pre-wrap; word-break: break-word; } /* END: Overrides and fixes specific to Novi and IDAA */ .iframe button.ae_normal, .iframe .btn.ae_normal { /* font: normal 1em sans-serif; */ font-size: 1rem; } .iframe button.ae_smaller, .iframe .btn.ae_smaller, .iframe button.novi_smaller, .iframe .btn.novi_smaller { font-size: 0.8rem; } .iframe button.ae_smallest, .iframe .btn.ae_smallest, .iframe button.novi_smallest, .iframe .btn.novi_smallest { font-size: 0.65rem; }