mirror of
https://tangled.org/evan.jarrett.net/at-container-registry
synced 2026-09-27 12:44:16 +00:00
impeccable:harden on all admin panel
This commit is contained in:
Evan Jarrett
@@ -94,24 +94,24 @@
|
||||
/* ========================================
|
||||
ADDITIONAL CSS VARIABLES
|
||||
======================================== */
|
||||
/* Card elevation. In dark mode, shadows disappear against a dark surface —
|
||||
depth is communicated primarily by the base-100 → base-200 surface ramp.
|
||||
Tinted or glow shadows read as highlights, not elevation; use neutral-black. */
|
||||
:root {
|
||||
--shadow-card-hover:
|
||||
0 8px 25px oklch(67.1% 0.05 145 / 0.25), 0 4px 12px oklch(0% 0 0 / 0.1);
|
||||
--color-helm-light: oklch(31% 0.181 267.5);
|
||||
--color-helm-dark: oklch(64.6% 0.19 273.2);
|
||||
}
|
||||
|
||||
[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);
|
||||
0 2px 4px -1px oklch(0% 0 0 / 0.55),
|
||||
0 12px 24px -6px oklch(0% 0 0 / 0.45);
|
||||
}
|
||||
|
||||
[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);
|
||||
0 1px 2px oklch(0% 0 0 / 0.06),
|
||||
0 8px 24px -6px oklch(0% 0 0 / 0.12);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -260,21 +260,23 @@
|
||||
|
||||
/* ----------------------------------------
|
||||
HELM BRAND COLOR (official Helm blue #0F1689)
|
||||
Tokens live on :root (--color-helm-{light,dark}) so the value is
|
||||
declared once and any future brand shift updates every consumer.
|
||||
---------------------------------------- */
|
||||
.text-helm {
|
||||
@apply text-[oklch(31%_0.181_267.5)];
|
||||
color: var(--color-helm-light);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .text-helm {
|
||||
@apply text-[oklch(64.6%_0.19_273.2)];
|
||||
color: var(--color-helm-dark);
|
||||
}
|
||||
|
||||
.badge-helm {
|
||||
--badge-color: oklch(31% 0.181 267.5);
|
||||
--badge-color: var(--color-helm-light);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .badge-helm {
|
||||
--badge-color: oklch(64.6% 0.19 273.2);
|
||||
--badge-color: var(--color-helm-dark);
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
@@ -296,37 +298,9 @@
|
||||
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;
|
||||
@apply cursor-pointer;
|
||||
transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
@@ -351,7 +325,6 @@
|
||||
@apply text-base-content;
|
||||
}
|
||||
|
||||
.recent-accounts-item:hover,
|
||||
.recent-accounts-item.focused {
|
||||
@apply bg-base-200;
|
||||
}
|
||||
@@ -369,3 +342,81 @@
|
||||
@apply block w-full;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
KEYBOARD FOCUS RING
|
||||
Applied only on :focus-visible so mouse users don't see it.
|
||||
Uses the primary hue so it reads as part of the Deep Ocean palette.
|
||||
======================================== */
|
||||
:where(a, button, [role="button"], [role="tab"], input, select, textarea, summary, [tabindex]):focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
HOVER-ONLY CARD AFFORDANCE
|
||||
Guard behind pointer: fine to prevent sticky hover state on touch.
|
||||
======================================== */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.card-interactive:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.recent-accounts-item:hover {
|
||||
@apply bg-base-200;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
TOUCH TARGET SIZING
|
||||
Small buttons and compact form controls meet the keyboard minimum on
|
||||
desktop but fall below the 44×44 recommended touch target on touch
|
||||
devices (WCAG 2.5.5). Grow them on any device that can't reliably
|
||||
produce hover — covers pure touch as well as hybrid touchscreen
|
||||
laptops where `pointer: coarse` alone misses.
|
||||
======================================== */
|
||||
@media (pointer: coarse), (hover: none) {
|
||||
/* Icon-only buttons grow both axes — daisyUI's circle/square variants
|
||||
are the marker for these. */
|
||||
:is(.btn-circle, .btn-square):is(.btn-xs, .btn-sm) {
|
||||
min-width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
/* Text buttons only need vertical clearance — padding handles width. */
|
||||
.btn-xs, .btn-sm {
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
/* Small checkbox/radio: expand the clickable region without distorting
|
||||
the control itself. */
|
||||
:is(.checkbox, .radio):is(.checkbox-xs, .radio-xs, .checkbox-sm, .radio-sm) {
|
||||
min-width: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
/* daisyUI menu items (used in dropdowns) are small link-like elements.
|
||||
Ensure they meet the tap threshold. */
|
||||
.menu li > a,
|
||||
.menu li > button {
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
REDUCED MOTION
|
||||
Honor users who opt out of animation. Collapse all durations to a
|
||||
near-instant value rather than removing transitions entirely, so
|
||||
state changes still fire (transitionend listeners, etc.).
|
||||
======================================== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user