/* UI skins — activated via */
:root,
[data-skin="forest"] {
--coffee-primary: #1b5e20;
--coffee-primary-hover: #154918;
--coffee-primary-rgb: 27, 94, 32;
--coffee-page-bg: #f5f7f5;
--coffee-surface: #ffffff;
--coffee-text: #1b1c1d;
--coffee-muted: #666666;
--coffee-border: rgba(0, 0, 0, 0.08);
--coffee-elevated-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
color-scheme: light;
}
[data-skin="espresso"] {
--coffee-primary: #5d4037;
--coffee-primary-hover: #4e342e;
--coffee-primary-rgb: 93, 64, 55;
--coffee-page-bg: #f7f3ef;
--coffee-surface: #ffffff;
--coffee-text: #2c2420;
--coffee-muted: #6d5d54;
--coffee-border: rgba(93, 64, 55, 0.12);
--coffee-elevated-shadow: 0 1px 3px rgba(93, 64, 55, 0.08);
color-scheme: light;
}
[data-skin="ocean"] {
--coffee-primary: #0d47a1;
--coffee-primary-hover: #0a3880;
--coffee-primary-rgb: 13, 71, 161;
--coffee-page-bg: #f3f6fb;
--coffee-surface: #ffffff;
--coffee-text: #1a2332;
--coffee-muted: #5a6a7e;
--coffee-border: rgba(13, 71, 161, 0.1);
--coffee-elevated-shadow: 0 1px 3px rgba(13, 71, 161, 0.07);
color-scheme: light;
}
[data-skin="teal"] {
--coffee-primary: #00695c;
--coffee-primary-hover: #004d40;
--coffee-primary-rgb: 0, 105, 92;
--coffee-page-bg: #f0f7f6;
--coffee-surface: #ffffff;
--coffee-text: #16302c;
--coffee-muted: #4f6d67;
--coffee-border: rgba(0, 105, 92, 0.1);
--coffee-elevated-shadow: 0 1px 3px rgba(0, 105, 92, 0.07);
color-scheme: light;
}
[data-skin="amber"] {
--coffee-primary: #ef6c00;
--coffee-primary-hover: #e65100;
--coffee-primary-rgb: 239, 108, 0;
--coffee-page-bg: #fff8f0;
--coffee-surface: #ffffff;
--coffee-text: #3e2723;
--coffee-muted: #7a5c45;
--coffee-border: rgba(239, 108, 0, 0.12);
--coffee-elevated-shadow: 0 1px 3px rgba(239, 108, 0, 0.08);
color-scheme: light;
}
[data-skin="slate"] {
--coffee-primary: #37474f;
--coffee-primary-hover: #263238;
--coffee-primary-rgb: 55, 71, 79;
--coffee-page-bg: #f4f5f6;
--coffee-surface: #ffffff;
--coffee-text: #212529;
--coffee-muted: #607077;
--coffee-border: rgba(55, 71, 79, 0.12);
--coffee-elevated-shadow: 0 1px 3px rgba(55, 71, 79, 0.08);
color-scheme: light;
}
[data-skin="berry"] {
--coffee-primary: #880e4f;
--coffee-primary-hover: #6a0b3d;
--coffee-primary-rgb: 136, 14, 79;
--coffee-page-bg: #faf4f7;
--coffee-surface: #ffffff;
--coffee-text: #2a1520;
--coffee-muted: #7a5566;
--coffee-border: rgba(136, 14, 79, 0.1);
--coffee-elevated-shadow: 0 1px 3px rgba(136, 14, 79, 0.07);
color-scheme: light;
}
[data-skin="indigo"] {
--coffee-primary: #283593;
--coffee-primary-hover: #1a237e;
--coffee-primary-rgb: 40, 53, 147;
--coffee-page-bg: #f4f5fb;
--coffee-surface: #ffffff;
--coffee-text: #1b1f3b;
--coffee-muted: #5c638a;
--coffee-border: rgba(40, 53, 147, 0.1);
--coffee-elevated-shadow: 0 1px 3px rgba(40, 53, 147, 0.07);
color-scheme: light;
}
[data-skin="olive"] {
--coffee-primary: #558b2f;
--coffee-primary-hover: #33691e;
--coffee-primary-rgb: 85, 139, 47;
--coffee-page-bg: #f6f7f2;
--coffee-surface: #ffffff;
--coffee-text: #24301c;
--coffee-muted: #627055;
--coffee-border: rgba(85, 139, 47, 0.12);
--coffee-elevated-shadow: 0 1px 3px rgba(85, 139, 47, 0.07);
color-scheme: light;
}
[data-skin="midnight"] {
--coffee-primary: #81c784;
--coffee-primary-hover: #66bb6a;
--coffee-primary-rgb: 129, 199, 132;
--coffee-page-bg: #1a1d21;
--coffee-surface: #252a31;
--coffee-text: #e8eaed;
--coffee-muted: #9aa0a6;
--coffee-border: rgba(255, 255, 255, 0.1);
--coffee-elevated-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
color-scheme: dark;
}
body .ui.green.text {
color: var(--coffee-primary) !important;
}
body .ui.green.basic.button,
body .ui.basic.green.button {
color: var(--coffee-primary) !important;
box-shadow: 0 0 0 1px rgba(var(--coffee-primary-rgb), 0.55) inset !important;
}
body .ui.green.basic.button:hover,
body .ui.basic.green.button:hover {
background: rgba(var(--coffee-primary-rgb), 0.08) !important;
color: var(--coffee-primary-hover) !important;
}
/* Shared skin application */
html {
background: var(--coffee-page-bg);
}
body {
background: var(--coffee-page-bg) !important;
color: var(--coffee-text);
}
body .ui.header,
body .ui.header .content {
color: var(--coffee-text);
}
body .ui.grey.text,
body .ui.tiny.grey.text,
body .ui.small.grey.text {
color: var(--coffee-muted) !important;
}
body .ui.segment,
body .ui.raised.segment,
body .ui.card,
body .ui.cards > .card {
background: var(--coffee-surface) !important;
color: var(--coffee-text);
border-color: var(--coffee-border) !important;
box-shadow: var(--coffee-elevated-shadow) !important;
}
body .ui.table {
color: var(--coffee-text);
background: var(--coffee-surface);
}
body .ui.table thead th {
background: rgba(var(--coffee-primary-rgb), 0.06) !important;
color: var(--coffee-text) !important;
}
body .ui.celled.table tr td,
body .ui.celled.table tr th {
border-color: var(--coffee-border) !important;
}
body .ui.form input,
body .ui.form textarea,
body .ui.form select,
body .ui.input > input {
background: var(--coffee-surface) !important;
color: var(--coffee-text) !important;
border-color: var(--coffee-border) !important;
}
body .ui.label {
background: rgba(var(--coffee-primary-rgb), 0.12);
color: var(--coffee-text);
}
body .ui.green.label,
body .ui.tiny.green.label {
background: rgba(var(--coffee-primary-rgb), 0.18) !important;
color: var(--coffee-text) !important;
}
/* Midnight-specific contrast tweaks */
[data-skin="midnight"] .ui.inverted.green.menu.app-top-menu,
[data-skin="midnight"] .app-mobile-sidebar {
background: #12151a !important;
border-bottom: 1px solid var(--coffee-border);
}
[data-skin="midnight"] .ui.message {
background: var(--coffee-surface);
color: var(--coffee-text);
box-shadow: none;
}
[data-skin="midnight"] .ui.basic.button,
[data-skin="midnight"] .ui.basic.green.button {
color: var(--coffee-primary) !important;
box-shadow: 0 0 0 1px rgba(var(--coffee-primary-rgb), 0.55) inset !important;
}
[data-skin="midnight"] .ui.table tbody tr td {
border-color: var(--coffee-border) !important;
}
[data-skin="midnight"] a:not(.ui.button):not(.item) {
color: var(--coffee-primary);
}
/* Admin skin picker */
.admin-skins-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.admin-skin-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--coffee-border);
border-radius: 0.65rem;
background: var(--coffee-surface);
box-shadow: var(--coffee-elevated-shadow);
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.admin-skin-card:hover {
border-color: rgba(var(--coffee-primary-rgb), 0.45);
transform: translateY(-1px);
}
.admin-skin-card--active {
border-color: var(--coffee-primary);
box-shadow: 0 0 0 2px rgba(var(--coffee-primary-rgb), 0.25);
}
.admin-skin-card__swatches {
display: flex;
height: 2.5rem;
border-radius: 0.4rem;
overflow: hidden;
border: 1px solid var(--coffee-border);
}
.admin-skin-card__swatch {
flex: 1;
}
.admin-skin-card__name {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--coffee-text);
}
.admin-skin-card__desc {
margin: 0;
font-size: 0.9rem;
color: var(--coffee-muted);
line-height: 1.4;
}
.admin-skin-card__badge {
position: absolute;
top: 0.65rem;
right: 0.65rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 0.25rem 0.5rem;
border-radius: 999px;
background: var(--coffee-primary);
color: #fff;
}
.admin-skin-card__form {
margin: 0 !important;
}
.admin-skin-card__form .button {
width: 100%;
margin: 0 !important;
}