Goondex/internal/web/static/css/theme.css
Stu Leak 16fb407a3c v0.1.0-dev4: Add web frontend with UI component library
- 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>
2025-11-17 10:47:30 -05:00

127 lines
3.0 KiB
CSS

/*
* GOONDEX THEME / VARIABLES / RESET
* Updated for: Dark mode only + Medium Flamingo Pink neon accents
*/
/* ===========================
* VARIABLES
* =========================== */
:root {
/* --- BRAND IDENTITY --- */
--color-brand: #FF4FA3; /* Flamingo Pink (core) */
--color-brand-hover: #FF6AB7; /* Slightly brighter pink */
--color-brand-glow: rgba(255, 79, 163, 0.35); /* SUBTLE neon glow */
/* --- TEXT --- */
--color-text-primary: #F5F5F7;
--color-text-secondary: #A0A3AB;
--color-header: #E08FEA;
--color-keypoint: #FF6ACB;
/* --- ALERTS --- */
--color-warning: #FFAA88;
--color-info: #7EE7E7;
/* --- BACKGROUND LAYERS (dark only) --- */
--color-bg-dark: #0A0A0C;
--color-bg-card: #151517;
--color-bg-elevated: #212124;
/* --- BORDERS --- */
--color-border: #3d3d44;
--color-border-soft: rgba(255, 79, 163, 0.15); /* Flamingo soft border */
/* --- RADII --- */
--radius: 12px;
--radius-soft: 20px;
/* --- MOTION --- */
--transition-fast: 0.15s ease;
--transition: 0.25s ease;
/* --- UI GRID --- */
--rail-width: 180px;
/* --- GLOWS + SHADOWS (medium intensity only) --- */
--shadow-glow-pink: 0 0 18px rgba(255, 79, 163, 0.28);
--shadow-glow-pink-soft: 0 0 38px rgba(255, 79, 163, 0.14);
--shadow-elevated: 0 6px 22px rgba(0, 0, 0, 0.6);
}
/* ===========================
* RESET
* =========================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===========================
* BASE
* =========================== */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: var(--color-text-primary);
background: var(--color-bg-dark);
overflow-x: hidden;
}
/* ===========================
* SCROLLBARS (dark + pink accent)
* =========================== */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-dark);
}
::-webkit-scrollbar-thumb {
background: var(--color-brand);
border-radius: 6px;
box-shadow: var(--shadow-glow-pink-soft);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-brand-hover);
box-shadow: var(--shadow-glow-pink);
}
/* ===========================
* TEXT SELECTION
* =========================== */
::selection {
background: var(--color-brand);
color: white;
}
/* ===========================
* UTILITY CLASSES (for GX + layouts)
* =========================== */
/* Subtle glowing border */
.glow-border {
border: 1px solid var(--color-border-soft);
box-shadow: var(--shadow-glow-pink-soft);
}
/* Card elevation */
.elevated {
background: var(--color-bg-elevated);
box-shadow: var(--shadow-elevated);
}
/* Brand glow text (subtle) */
.text-glow {
text-shadow: 0 0 12px var(--color-brand-glow);
}
/* Pink glow panel (subtle accent for navbar or hero) */
.panel-glow {
box-shadow: inset 0 0 60px rgba(255, 79, 163, 0.08),
0 0 22px rgba(255, 79, 163, 0.20);
}