89 lines
2.5 KiB
CSS
89 lines
2.5 KiB
CSS
|
/*
|
||
|
|
* Gruvbox theme polish.
|
||
|
|
*
|
||
|
|
* Core colour tokens live in 00-base.css. This file adds the warmer, grounded
|
||
|
|
* Gruvbox-specific surface treatment without changing layout behavior.
|
||
|
|
*/
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .site-header {
|
||
|
|
border-bottom-color: rgba(250, 189, 47, 0.2);
|
||
|
|
backdrop-filter: blur(16px) saturate(130%);
|
||
|
|
-webkit-backdrop-filter: blur(16px) saturate(130%);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .brand-mark {
|
||
|
|
background: linear-gradient(135deg, #d79921, #fe8019);
|
||
|
|
color: #1d2021;
|
||
|
|
box-shadow: 0 8px 22px rgba(254, 128, 25, 0.22);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .card,
|
||
|
|
:root[data-theme="gruvbox"] .app-sidebar,
|
||
|
|
:root[data-theme="gruvbox"] .storage-card,
|
||
|
|
:root[data-theme="gruvbox"] .storage-op-card,
|
||
|
|
:root[data-theme="gruvbox"] .metric-card,
|
||
|
|
:root[data-theme="gruvbox"] .logs-filter-card {
|
||
|
|
background: color-mix(in srgb, var(--card) 92%, #1d2021);
|
||
|
|
border-color: rgba(235, 219, 178, 0.16);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .admin-shell .app-sidebar {
|
||
|
|
border-color: rgba(250, 189, 47, 0.32);
|
||
|
|
background: linear-gradient(180deg, rgba(215, 153, 33, 0.12), rgba(40, 40, 40, 0.94));
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .admin-shell .sidebar-link.is-active {
|
||
|
|
border-color: rgba(250, 189, 47, 0.36);
|
||
|
|
background: rgba(215, 153, 33, 0.14);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .admin-shell .kicker,
|
||
|
|
:root[data-theme="gruvbox"] .kicker {
|
||
|
|
color: #fabd2f;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] h1 {
|
||
|
|
color: #fbf1c7;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .button-primary,
|
||
|
|
:root[data-theme="gruvbox"] .button.is-active {
|
||
|
|
border-color: rgba(250, 189, 47, 0.3);
|
||
|
|
background: linear-gradient(135deg, #d79921, #fabd2f);
|
||
|
|
color: #1d2021;
|
||
|
|
box-shadow: 0 10px 24px rgba(215, 153, 33, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .button-primary:hover {
|
||
|
|
background: linear-gradient(135deg, #fabd2f, #fe8019);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .button-outline,
|
||
|
|
:root[data-theme="gruvbox"] .button-ghost:hover,
|
||
|
|
:root[data-theme="gruvbox"] .button-outline:hover {
|
||
|
|
border-color: rgba(235, 219, 178, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .badge-active,
|
||
|
|
:root[data-theme="gruvbox"] .storage-detail-test.is-ok > span:last-child {
|
||
|
|
color: #b8bb26;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] .badge-disabled,
|
||
|
|
:root[data-theme="gruvbox"] .storage-detail-test.is-err > span:last-child,
|
||
|
|
:root[data-theme="gruvbox"] .form-error {
|
||
|
|
color: #fb4934;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] input:focus,
|
||
|
|
:root[data-theme="gruvbox"] select:focus,
|
||
|
|
:root[data-theme="gruvbox"] textarea:focus {
|
||
|
|
border-color: #fe8019;
|
||
|
|
box-shadow: 0 0 0 3px rgba(254, 128, 25, 0.18);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme="gruvbox"] ::selection {
|
||
|
|
background: #d79921;
|
||
|
|
color: #1d2021;
|
||
|
|
}
|