mirror of
https://tangled.org/evan.jarrett.net/at-container-registry
synced 2026-05-01 13:35:46 +00:00
373 lines
11 KiB
CSS
373 lines
11 KiB
CSS
/* ========================================
|
|
TAILWIND + DAISYUI
|
|
======================================== */
|
|
@import "tailwindcss";
|
|
|
|
/* Content sources for class detection */
|
|
@source "../../templates/**/*.html";
|
|
@source "../../public/js/**/*.js";
|
|
@source "../../../hold/admin/templates/**/*.html";
|
|
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@plugin "daisyui" {
|
|
themes:
|
|
light --default,
|
|
dark --prefersdark;
|
|
}
|
|
|
|
/* ============================================
|
|
DARK - "Deep Ocean"
|
|
============================================ */
|
|
@plugin "daisyui/theme" {
|
|
name: "dark";
|
|
default: false;
|
|
prefersdark: true;
|
|
color-scheme: "dark";
|
|
--color-base-100: oklch(19.5% 0.036 257.7);
|
|
--color-base-200: oklch(23.2% 0.041 253.9);
|
|
--color-base-300: oklch(28% 0.049 252);
|
|
--color-base-content: oklch(95.4% 0.022 211);
|
|
--color-primary: oklch(60% 0.126 221.723);
|
|
--color-primary-content: oklch(10% 0.126 221.723);
|
|
--color-secondary: oklch(76.43% 0.135 57.94);
|
|
--color-secondary-content: oklch(26% 0.079 36.259);
|
|
--color-accent: oklch(77.32% 0.1 187.98);
|
|
--color-accent-content: oklch(27% 0.046 192.524);
|
|
--color-neutral: oklch(32.3% 0.032 259.7);
|
|
--color-neutral-content: oklch(93.3% 0.026 208.7);
|
|
--color-info: oklch(74% 0.16 232.661);
|
|
--color-info-content: oklch(29% 0.066 243.157);
|
|
--color-success: oklch(76% 0.177 163.223);
|
|
--color-success-content: oklch(37% 0.077 168.94);
|
|
--color-warning: oklch(82% 0.189 84.429);
|
|
--color-warning-content: oklch(41% 0.112 45.904);
|
|
--color-error: oklch(71% 0.194 13.428);
|
|
--color-error-content: oklch(27% 0.105 12.094);
|
|
--radius-selector: 0.5rem;
|
|
--radius-field: 0.25rem;
|
|
--radius-box: 0.5rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 1px;
|
|
--depth: 1;
|
|
--noise: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
LIGHT - "Surface / Shallow Water"
|
|
============================================ */
|
|
@plugin "daisyui/theme" {
|
|
name: "light";
|
|
default: true
|
|
prefersdark: false;
|
|
color-scheme: "light";
|
|
--color-base-100: oklch(99.4% 0.004 214.3);
|
|
--color-base-200: oklch(97.3% 0.01 212.5);
|
|
--color-base-300: oklch(93.7% 0.02 212.5);
|
|
--color-base-content: oklch(21.1% 0.037 254.4);
|
|
--color-primary: oklch(60% 0.126 221.723);
|
|
--color-primary-content: oklch(10% 0.126 221.723);
|
|
--color-secondary: oklch(76.43% 0.135 57.94);
|
|
--color-secondary-content: oklch(26% 0.079 36.259);
|
|
--color-accent: oklch(77.32% 0.1 187.98);
|
|
--color-accent-content: oklch(27% 0.046 192.524);
|
|
--color-neutral: oklch(32.3% 0.032 259.7);
|
|
--color-neutral-content: oklch(93.3% 0.026 208.7);
|
|
--color-info: oklch(74% 0.16 232.661);
|
|
--color-info-content: oklch(29% 0.066 243.157);
|
|
--color-success: oklch(76% 0.177 163.223);
|
|
--color-success-content: oklch(37% 0.077 168.94);
|
|
--color-warning: oklch(82% 0.189 84.429);
|
|
--color-warning-content: oklch(41% 0.112 45.904);
|
|
--color-error: oklch(71% 0.194 13.428);
|
|
--color-error-content: oklch(27% 0.105 12.094);
|
|
--radius-selector: 0.5rem;
|
|
--radius-field: 0.25rem;
|
|
--radius-box: 0.5rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 1px;
|
|
--depth: 1;
|
|
--noise: 0;
|
|
}
|
|
|
|
/* ========================================
|
|
ADDITIONAL CSS VARIABLES
|
|
======================================== */
|
|
:root {
|
|
--shadow-card-hover:
|
|
0 8px 25px oklch(67.1% 0.05 145 / 0.25), 0 4px 12px oklch(0% 0 0 / 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--shadow-card-hover:
|
|
0 8px 25px oklch(67.1% 0.05 145 / 0.2), 0 4px 12px oklch(0% 0 0 / 0.2);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--shadow-card-hover:
|
|
0 8px 25px oklch(53.1% 0.1 144.8 / 0.25), 0 4px 12px oklch(0% 0 0 / 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--shadow-card-hover:
|
|
0 8px 25px oklch(63.1% 0.07 144.7 / 0.2), 0 4px 12px oklch(0% 0 0 / 0.2);
|
|
}
|
|
|
|
/* ========================================
|
|
NAVBAR GHOST BUTTON HOVER
|
|
Override DaisyUI's neutral hover for nav icons
|
|
======================================== */
|
|
.navbar .btn-ghost:hover {
|
|
--btn-bg: oklch(from var(--color-secondary) l c h / 0.15);
|
|
--btn-border: transparent;
|
|
}
|
|
|
|
/* ========================================
|
|
THEME-AWARE ICON SWITCHING
|
|
======================================== */
|
|
.icon-light {
|
|
display: block;
|
|
}
|
|
.icon-dark {
|
|
display: none;
|
|
}
|
|
[data-theme="dark"] .icon-light {
|
|
display: none;
|
|
}
|
|
[data-theme="dark"] .icon-dark {
|
|
display: block;
|
|
}
|
|
|
|
/* ========================================
|
|
STICKY FOOTER LAYOUT
|
|
======================================== */
|
|
@layer base {
|
|
body {
|
|
@apply min-h-screen flex flex-col;
|
|
}
|
|
|
|
main {
|
|
@apply flex-1;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
TYPOGRAPHY (PROSE) THEME INTEGRATION
|
|
======================================== */
|
|
@layer base {
|
|
/* Make prose inherit DaisyUI theme colors */
|
|
.prose {
|
|
--tw-prose-body: var(--color-base-content);
|
|
--tw-prose-headings: var(--color-base-content);
|
|
--tw-prose-lead: var(--color-base-content);
|
|
--tw-prose-links: var(--color-primary);
|
|
--tw-prose-bold: var(--color-base-content);
|
|
--tw-prose-counters: var(--color-base-content);
|
|
--tw-prose-bullets: var(--color-base-content);
|
|
--tw-prose-hr: var(--color-base-300);
|
|
--tw-prose-quotes: var(--color-base-content);
|
|
--tw-prose-quote-borders: var(--color-base-300);
|
|
--tw-prose-captions: var(--color-base-content);
|
|
--tw-prose-code: var(--color-base-content);
|
|
--tw-prose-pre-code: var(--color-base-content);
|
|
--tw-prose-pre-bg: var(--color-base-200);
|
|
--tw-prose-th-borders: var(--color-base-300);
|
|
--tw-prose-td-borders: var(--color-base-300);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
SVG SPRITE ICONS
|
|
======================================== */
|
|
.icon {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
vertical-align: -0.125em;
|
|
}
|
|
|
|
/* Icon sizes (matching Tailwind size-* utilities) */
|
|
.icon.size-3 { width: 0.75rem; height: 0.75rem; }
|
|
.icon.size-4 { width: 1rem; height: 1rem; }
|
|
.icon.size-5 { width: 1.25rem; height: 1.25rem; }
|
|
.icon.size-6 { width: 1.5rem; height: 1.5rem; }
|
|
.icon.size-8 { width: 2rem; height: 2rem; }
|
|
|
|
/* Special size for slightly larger than 1rem (used in star/pull count) */
|
|
.icon.size-\[1\.1rem\] { width: 1.1rem; height: 1.1rem; }
|
|
|
|
/* Animate spin for loader icons */
|
|
.icon.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* ========================================
|
|
ACCESSIBILITY UTILITIES
|
|
======================================== */
|
|
@layer utilities {
|
|
/* Screen reader only - visually hidden but accessible */
|
|
.sr-only {
|
|
@apply absolute w-px h-px p-0 -m-px overflow-hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
CUSTOM COMPONENTS (Not in DaisyUI)
|
|
======================================== */
|
|
@layer components {
|
|
/* ----------------------------------------
|
|
COMMAND / CODE DISPLAY
|
|
---------------------------------------- */
|
|
.cmd {
|
|
@apply flex items-center gap-2 relative w-full overflow-hidden;
|
|
@apply bg-base-200 border border-base-300 rounded-md;
|
|
@apply px-3 py-2;
|
|
}
|
|
|
|
.cmd code {
|
|
@apply font-mono text-sm truncate;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
EXPANDABLE SEARCH (nav-specific)
|
|
Uses transform instead of width for GPU-accelerated animation
|
|
---------------------------------------- */
|
|
.nav-search-wrapper {
|
|
@apply relative flex items-center;
|
|
}
|
|
|
|
.nav-search-form {
|
|
@apply absolute right-full mr-2;
|
|
@apply w-62 opacity-0;
|
|
@apply transition-[transform,opacity] duration-300;
|
|
transform: scaleX(0);
|
|
transform-origin: right;
|
|
}
|
|
|
|
.nav-search-wrapper.expanded .nav-search-form {
|
|
@apply opacity-100;
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
HELM BRAND COLOR (official Helm blue #0F1689)
|
|
---------------------------------------- */
|
|
.text-helm {
|
|
@apply text-[oklch(31%_0.181_267.5)];
|
|
}
|
|
|
|
[data-theme="dark"] .text-helm {
|
|
@apply text-[oklch(64.6%_0.19_273.2)];
|
|
}
|
|
|
|
.badge-helm {
|
|
--badge-color: oklch(31% 0.181 267.5);
|
|
}
|
|
|
|
[data-theme="dark"] .badge-helm {
|
|
--badge-color: oklch(64.6% 0.19 273.2);
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
TIER BADGE COLORS
|
|
---------------------------------------- */
|
|
.badge-owner {
|
|
@apply badge-primary;
|
|
}
|
|
|
|
.badge-deckhand {
|
|
@apply badge-ghost;
|
|
}
|
|
|
|
.badge-bosun {
|
|
@apply badge-secondary;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
CARD EXTENSIONS
|
|
---------------------------------------- */
|
|
.card-interactive {
|
|
@apply cursor-pointer duration-500;
|
|
transition-property: box-shadow, transform;
|
|
}
|
|
|
|
.card-interactive:hover {
|
|
box-shadow: var(--shadow-card-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
ACTOR-TYPEAHEAD COMPONENT STYLING
|
|
---------------------------------------- */
|
|
actor-typeahead {
|
|
/* Use DaisyUI CSS variables - they auto-switch with theme */
|
|
--color-background: var(--color-base-100);
|
|
--color-border: var(--color-base-300);
|
|
--color-shadow: var(--color-base-content);
|
|
--color-hover: var(--color-base-200);
|
|
--color-avatar-fallback: var(--color-base-300);
|
|
--radius: 0.5rem;
|
|
--padding-menu: 0.25rem;
|
|
z-index: 50;
|
|
}
|
|
|
|
actor-typeahead::part(handle) {
|
|
@apply text-base-content;
|
|
}
|
|
|
|
actor-typeahead::part(menu) {
|
|
@apply shadow-lg;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
RECENT ACCOUNTS DROPDOWN
|
|
---------------------------------------- */
|
|
.recent-accounts-dropdown {
|
|
@apply absolute top-full left-0 right-0;
|
|
@apply bg-base-100 border border-base-300;
|
|
@apply rounded-lg shadow-lg;
|
|
@apply max-h-60 overflow-y-auto z-50;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.recent-accounts-header {
|
|
@apply px-3 py-2 text-xs font-semibold uppercase;
|
|
@apply text-base-content/60 border-b border-base-300;
|
|
}
|
|
|
|
.recent-accounts-item {
|
|
@apply px-3 py-2.5;
|
|
@apply cursor-pointer transition-colors duration-150;
|
|
@apply text-base-content;
|
|
}
|
|
|
|
.recent-accounts-item:hover,
|
|
.recent-accounts-item.focused {
|
|
@apply bg-base-200;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
MENU FORM ITEM (styled like menu <a>)
|
|
For forms inside DaisyUI menu dropdowns
|
|
Uses label as visible element, button is sr-only
|
|
---------------------------------------- */
|
|
.menu li > form {
|
|
@apply w-full;
|
|
}
|
|
|
|
.menu li > form > label {
|
|
@apply block w-full;
|
|
}
|
|
}
|