150 lines
5.3 KiB
CSS
150 lines
5.3 KiB
CSS
/*
|
|
* SysDeck — branding.css (v0.3.0)
|
|
*
|
|
* THE COCKPIT SHELL SKIN. Cockpit documents /usr/share/cockpit/branding.css
|
|
* as the official override point for the shell chrome (sidebar, header,
|
|
* login screen). This file restyles that chrome to the SysDeck Web
|
|
* Edition 0.3.0 look — midnight surfaces, teal accent, soft-tinted
|
|
* states — so the shell matches the plugin pages (which wear
|
|
* shared/sysdeck-web.css since 0.3.0).
|
|
*
|
|
* Install:
|
|
* sudo make install-branding (backs up any existing branding.css)
|
|
* Uninstall:
|
|
* sudo make uninstall-branding (restores the backup, if any)
|
|
*
|
|
* Selector strategy: Cockpit ≥ 300 uses PatternFly v5 (pf-v5-*), older
|
|
* releases use PatternFly v4 (pf-c-*). Both are covered below via raw
|
|
* property overrides plus the PatternFly component CSS variables; rules
|
|
* that miss on an older/newer release simply no-op. This file cannot
|
|
* break the shell — worst case some selectors don't match.
|
|
*/
|
|
|
|
/* ── brand tokens (affect all PatternFly components in the shell) ──── */
|
|
|
|
:root {
|
|
--pf-v5-global--primary-color--100: #3fc9b0;
|
|
--pf-v5-global--primary-color--200: #2fb59e;
|
|
--pf-v5-global--primary-color--300: #26a08c;
|
|
--pf-v5-global--link--Color: #3fc9b0;
|
|
--pf-v5-global--link--Color--hover: #2fb59e;
|
|
--pf-v5-global--link--Color--visited: #3fc9b0;
|
|
|
|
--pf-c-global--primary-color--100: #3fc9b0; /* PatternFly v4 shells */
|
|
--pf-c-global--link--Color: #3fc9b0;
|
|
--pf-c-global--link--Color--hover: #2fb59e;
|
|
}
|
|
|
|
/* ── page header ──────────────────────────────────────────────────── */
|
|
|
|
.pf-v5-c-page__header, .pf-c-page__header {
|
|
background-color: #1e1e1e;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
|
|
}
|
|
|
|
.pf-v5-c-page__header-brand, .pf-c-page__header-brand,
|
|
.pf-v5-c-page__header-brand-link, .pf-c-page__header-brand-link {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
/* ── the nav sidebar — the big visual win ─────────────────────────── */
|
|
|
|
.pf-v5-c-page__sidebar, .pf-c-page__sidebar {
|
|
background-color: #1a1c22; /* web edition --sidebar */
|
|
border-right: 1px solid rgba(255, 255, 255, 0.10);
|
|
--pf-v5-c-page__sidebar--BackgroundColor: #1a1c22;
|
|
}
|
|
|
|
.pf-v5-c-page__sidebar-body, .pf-c-page__sidebar-body {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.pf-v5-c-nav, .pf-c-nav {
|
|
--pf-v5-c-nav__link--Color: #8a8f98;
|
|
--pf-v5-c-nav__link--hover--Color: #f0f0f0;
|
|
--pf-v5-c-nav__link--hover--BackgroundColor: #262b33;
|
|
--pf-v5-c-nav__link--focus--BackgroundColor: #262b33;
|
|
--pf-v5-c-nav__link--m-current--Color: #3fc9b0;
|
|
--pf-v5-c-nav__link--m-current--BackgroundColor: rgba(63, 201, 176, 0.15);
|
|
--pf-v5-c-nav__section-title--Color: #6a7078;
|
|
--pf-v5-c-nav__item--BackgroundColor: transparent;
|
|
}
|
|
|
|
.pf-v5-c-nav__link, .pf-c-nav__link {
|
|
color: #8a8f98;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.pf-v5-c-nav__link:hover, .pf-c-nav__link:hover {
|
|
background-color: #262b33;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.pf-v5-c-nav__link.pf-m-current, .pf-c-nav__link.pf-m-current,
|
|
li.pf-v5-c-nav__item.pf-m-current .pf-v5-c-nav__link {
|
|
background-color: rgba(63, 201, 176, 0.15);
|
|
color: #3fc9b0;
|
|
border-left-color: #3fc9b0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pf-v5-c-nav__section-title, .pf-c-nav__section-title {
|
|
color: #6a7078;
|
|
font-size: 0.6875rem;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
/* ── main canvas + cards inside the shell (about page, dashboards) ── */
|
|
|
|
.pf-v5-c-page__main, .pf-c-page__main { background-color: #1e1e1e; }
|
|
|
|
.pf-v5-c-page__main-section, .pf-c-page__main-section { background-color: #1e1e1e; }
|
|
.pf-v5-c-page__main-section.pf-m-dark-100,
|
|
.pf-v5-c-page__main-section.pf-m-dark-200 { background-color: #1a1c22; }
|
|
|
|
.pf-v5-c-card, .pf-c-card {
|
|
background-color: #2a2f38;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 10px;
|
|
--pf-v5-c-card--BackgroundColor: #2a2f38;
|
|
}
|
|
|
|
.pf-v5-c-card__title, .pf-c-card__title { color: #f0f0f0; }
|
|
.pf-v5-c-card__body, .pf-c-card__body { color: #d5d8dd; }
|
|
|
|
/* ── the login screen ─────────────────────────────────────────────── */
|
|
|
|
#login {
|
|
background-color: #1e1e1e;
|
|
background-image: radial-gradient(ellipse at 50% -20%, rgba(63, 201, 176, 0.10), transparent 60%);
|
|
}
|
|
|
|
#login .container, #login .form-group, #login label { color: #d5d8dd; }
|
|
|
|
#login h1, #login .brand { color: #f0f0f0; }
|
|
|
|
#login input, #login .form-control {
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
border-color: rgba(255, 255, 255, 0.14);
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
#login .btn-primary, #login button[type="submit"] {
|
|
background-color: #3fc9b0;
|
|
border-color: #3fc9b0;
|
|
color: #0d1512;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#login .btn-primary:hover { background-color: #2fb59e; }
|
|
|
|
/* crossfade / spinner accents (older shells) */
|
|
.spinner, .pf-v5-c-spinner { --pf-v5-c-spinner--Color: #3fc9b0; }
|
|
|
|
/* thin dark scrollbars to match the plugin pages */
|
|
* { scrollbar-width: thin; scrollbar-color: #3a4150 transparent; }
|
|
*::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
*::-webkit-scrollbar-track { background: transparent; }
|
|
*::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 999px; }
|
|
*::-webkit-scrollbar-thumb:hover { background: #3fc9b0; }
|