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>
178 lines
3.8 KiB
CSS
178 lines
3.8 KiB
CSS
/*
|
|
* GOONDEX — BUTTONS
|
|
* Modern neon-subtle buttons using Flamingo Pink brand theme.
|
|
* Compatible with GX_Button + theme variables.
|
|
*/
|
|
|
|
/* ================================
|
|
* BASE BUTTON STYLE
|
|
* ================================ */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
padding: 0.85rem 1.8rem;
|
|
border-radius: var(--radius);
|
|
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
|
|
color: var(--color-text-primary);
|
|
background: var(--color-bg-elevated);
|
|
|
|
border: 1px solid var(--color-border-soft);
|
|
|
|
transition: background var(--transition),
|
|
border-color var(--transition),
|
|
box-shadow var(--transition),
|
|
transform var(--transition-fast);
|
|
}
|
|
|
|
/* Hover glow (SUBTLE, medium intensity) */
|
|
.btn:hover {
|
|
background: var(--color-bg-card);
|
|
border-color: var(--color-brand);
|
|
box-shadow: var(--shadow-glow-pink-soft);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Active press */
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Disabled */
|
|
.btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
/* ================================
|
|
* PRIMARY BUTTON
|
|
* ================================ */
|
|
.btn-primary,
|
|
.btn.brand,
|
|
.btn.pink {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--color-brand) 0%,
|
|
var(--color-brand-hover) 90%
|
|
);
|
|
border: none;
|
|
color: #fff;
|
|
text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.btn-primary:hover,
|
|
.btn.brand:hover,
|
|
.btn.pink:hover {
|
|
box-shadow: var(--shadow-glow-pink);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
|
|
/* ================================
|
|
* SECONDARY BUTTON
|
|
* ================================ */
|
|
.btn-secondary {
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-border-soft);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--color-brand);
|
|
color: var(--color-brand);
|
|
box-shadow: var(--shadow-glow-pink-soft);
|
|
}
|
|
|
|
|
|
/* ================================
|
|
* SMALL BUTTONS (STAT CARDS)
|
|
* ================================ */
|
|
.btn-small {
|
|
padding: 0.55rem 1.1rem;
|
|
font-size: 0.85rem;
|
|
border-radius: calc(var(--radius) - 4px);
|
|
}
|
|
|
|
.btn-small:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
|
|
/* ================================
|
|
* FULL-WIDTH BUTTONS
|
|
* ================================ */
|
|
.btn-block {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* ================================
|
|
* GHOST BUTTON
|
|
* (transparent, subtle neon edges)
|
|
* ================================ */
|
|
.btn-ghost {
|
|
background: transparent;
|
|
border: 1px solid var(--color-border-soft);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
border-color: var(--color-brand);
|
|
color: var(--color-brand);
|
|
box-shadow: var(--shadow-glow-pink-soft);
|
|
}
|
|
|
|
|
|
/* ================================
|
|
* DANGER BUTTON (warning orange)
|
|
* ================================ */
|
|
.btn-danger {
|
|
background: var(--color-warning);
|
|
color: #000;
|
|
border: none;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #ffc7a8;
|
|
}
|
|
|
|
|
|
/* ================================
|
|
* BUTTON HOVER EFFECT (GX-style)
|
|
* ================================ */
|
|
.btn .hoverEffect,
|
|
.btn-secondary .hoverEffect,
|
|
.btn-small .hoverEffect {
|
|
position: relative;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn .hoverEffect div,
|
|
.btn-secondary .hoverEffect div,
|
|
.btn-small .hoverEffect div {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
opacity: 0;
|
|
background: radial-gradient(circle,
|
|
var(--color-brand-glow) 0%,
|
|
transparent 80%
|
|
);
|
|
transition: opacity 0.35s ease;
|
|
}
|
|
|
|
.btn:hover .hoverEffect div,
|
|
.btn-secondary:hover .hoverEffect div,
|
|
.btn-small:hover .hoverEffect div {
|
|
opacity: 1;
|
|
}
|