Stu Leak
16fb407a3c
- Implement full web interface with Go html/template server - Add GX component library (buttons, dialogs, tables, forms, etc.) - Create scene/performer/studio/movie detail and listing pages - Add Adult Empire scraper for additional metadata sources - Implement movie support with database schema - Add import and sync services for data management - Include comprehensive API and frontend documentation - Add custom color scheme and responsive layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
89 lines
1.7 KiB
CSS
89 lines
1.7 KiB
CSS
/*
|
|
* GX CHECKBOX — Premium Minimal Neon
|
|
* Dark-only, Flamingo Pink subtle glow
|
|
*/
|
|
|
|
.gx-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
font-size: 1rem;
|
|
color: var(--color-text-primary);
|
|
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
/* Hide native checkbox */
|
|
.gx-checkbox input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Custom box */
|
|
.gx-checkbox-box {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 6px;
|
|
|
|
background: var(--color-bg-card);
|
|
border: 2px solid var(--color-border-soft);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
transition:
|
|
border-color var(--transition),
|
|
background var(--transition),
|
|
box-shadow var(--transition-fast),
|
|
transform var(--transition-fast);
|
|
}
|
|
|
|
/* Checkmark icon */
|
|
.gx-checkbox-check {
|
|
width: 12px;
|
|
height: 12px;
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
transition: opacity var(--transition), transform var(--transition-fast);
|
|
|
|
background: var(--color-brand);
|
|
clip-path: polygon(
|
|
14% 44%, 0 58%, 40% 100%,
|
|
100% 6%, 84% -6%, 38% 72%
|
|
);
|
|
}
|
|
|
|
/* Hover — soft neon border */
|
|
.gx-checkbox:hover .gx-checkbox-box {
|
|
border-color: var(--color-brand);
|
|
box-shadow: var(--shadow-glow-pink-soft);
|
|
}
|
|
|
|
/* Checked state */
|
|
.gx-checkbox input:checked + .gx-checkbox-box {
|
|
background: rgba(255, 79, 163, 0.12);
|
|
border-color: var(--color-brand);
|
|
box-shadow: var(--shadow-glow-pink);
|
|
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Reveal checkmark */
|
|
.gx-checkbox input:checked + .gx-checkbox-box .gx-checkbox-check {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* Disabled */
|
|
.gx-checkbox.disabled,
|
|
.gx-checkbox input:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|