/* Kurnik Controller - wspólny arkusz stylów (powłoka aplikacji).
Wszystkie strony w data/*.html ładują ten plik jako pierwszy . */
:root {
--bg: #f4f5f7;
--fg: #1a1d23;
--card-bg: #ffffff;
--border: #d8dbe0;
--accent: #2563eb;
--danger: #dc2626;
--success: #16a34a;
--warning: #d97706;
--sidebar-width: 240px;
}
/* Ciemny motyw systemowy - tylko gdy strona nie ma wymuszonej klasy
.theme-light/.theme-dark (patrz theme.js, KurnikTheme mode "auto"). */
@media (prefers-color-scheme: dark) {
:root:not(.theme-light) {
--bg: #14161a;
--fg: #e6e8eb;
--card-bg: #1e2127;
--border: #30343b;
--accent: #5b9dff;
--danger: #f87171;
--success: #4ade80;
--warning: #fbbf24;
}
}
/* Ręczny przełącznik motywu (KurnikTheme.set('dark'/'light')) - nadpisuje
zarówno domyślny jasny motyw, jak i preferencję systemową. */
html.theme-dark {
--bg: #14161a;
--fg: #e6e8eb;
--card-bg: #1e2127;
--border: #30343b;
--accent: #5b9dff;
--danger: #f87171;
--success: #4ade80;
--warning: #fbbf24;
}
html.theme-light {
--bg: #f4f5f7;
--fg: #1a1d23;
--card-bg: #ffffff;
--border: #d8dbe0;
--accent: #2563eb;
--danger: #dc2626;
--success: #16a34a;
--warning: #d97706;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: var(--bg);
color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
}
h1,
h2,
h3 {
line-height: 1.25;
}
/* ---------------------------------------------------------------------
Layout aplikacji: sidebar (stała pozycja) + treść główna.
Znaczniki wymagane na każdej stronie: ...
. nav.js wypełnia #sidebar i sam dokłada przycisk
hamburgera + tło (.sidebar-backdrop) do . */
.app-shell {
display: flex;
min-height: 100vh;
}
.sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
background: var(--card-bg);
border-right: 1px solid var(--border);
z-index: 100;
transition: transform 0.25s ease;
}
.sidebar-header {
padding: 20px;
font-weight: 700;
font-size: 1.05rem;
border-bottom: 1px solid var(--border);
}
.sidebar-nav {
display: flex;
flex-direction: column;
padding: 8px 0;
}
.nav-group-header {
padding: 12px 20px 4px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.55;
}
.nav-link {
padding: 10px 20px;
color: var(--fg);
text-decoration: none;
font-size: 0.92rem;
border-left: 3px solid transparent;
}
.nav-link:hover {
background: rgba(127, 127, 127, 0.1);
}
.nav-link.active {
border-left-color: var(--accent);
color: var(--accent);
font-weight: 600;
background: rgba(37, 99, 235, 0.08);
}
.main-content {
flex: 1;
min-width: 0;
margin-left: var(--sidebar-width);
padding: 24px;
}
.nav-hamburger {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 101;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--fg);
font-size: 1.2rem;
cursor: pointer;
}
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 99;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.main-content {
margin-left: 0;
padding-top: 72px;
}
.nav-hamburger {
display: flex;
}
body.sidebar-open .sidebar {
transform: translateX(0);
}
body.sidebar-open .sidebar-backdrop {
display: block;
}
}
/* ---------------------------------------------------------------------
Karty i siatka pulpitu. */
.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card h2 {
margin: 0 0 12px;
font-size: 1rem;
font-weight: 600;
}
.card p {
margin: 6px 0;
font-size: 0.92rem;
}
.grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.plain-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.9rem;
}
/* ---------------------------------------------------------------------
Odznaki statusu. */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
/* Tak jak .form-group[hidden] / .btn[hidden] poniżej - .status-badge
(display: inline-flex) bije domyślne [hidden]{display:none} z arkusza
przeglądarki, więc element z atrybutem hidden byłby zawsze widoczny. */
.status-badge[hidden] {
display: none;
}
.status-badge::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.status-ok {
background: rgba(22, 163, 74, 0.15);
color: var(--success);
}
.status-warn {
background: rgba(217, 119, 6, 0.15);
color: var(--warning);
}
.status-error {
background: rgba(220, 38, 38, 0.15);
color: var(--danger);
}
/* ---------------------------------------------------------------------
Formularze i przyciski - współdzielone przez login.html, config.html itd. */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
/* Reguła klasy .form-group (display: flex) ma wyższy priorytet w kaskadzie
niż domyślne [hidden]{display:none} z arkusza przeglądarki - bez tego
nadanie atrybutu hidden elementowi .form-group (np. przełączanie
widoczności pola "Rola" w kreatorze dodawania urządzenia, zob.
data/devices.html) nie chowa go wcale. */
.form-group[hidden] { display: none; }
.form-group label {
font-size: 0.85rem;
font-weight: 600;
}
input,
select,
textarea {
font: inherit;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
}
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--card-bg);
color: var(--fg);
cursor: pointer;
font: inherit;
}
.btn:hover {
filter: brightness(0.97);
}
/* Tak jak .form-group[hidden] powyżej - .btn (display: inline-flex) bije
domyślne [hidden]{display:none}, więc np. button.hidden = !canEdit()
(devices.html) nie chowałoby przycisku bez tego. */
.btn[hidden] { display: none; }
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn-danger {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
/* Wspólny feedback zapisu na przyciskach (KurnikUI.withButtonFeedback) - jedna
konwencja dla wszystkich podstron. */
.btn.btn-saved {
background: var(--success) !important;
border-color: var(--success) !important;
color: #fff !important;
}
.btn.btn-error {
background: var(--danger) !important;
border-color: var(--danger) !important;
color: #fff !important;
}
/* Wspólne toasty (KurnikUI.toast) - powiadomienia w prawym górnym rogu. */
.kurnik-toast-host {
position: fixed;
top: 16px;
right: 16px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.kurnik-toast {
min-width: 200px;
max-width: 360px;
padding: 10px 14px;
border-radius: 8px;
color: #fff;
font-size: 0.88rem;
font-weight: 600;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
opacity: 0;
transform: translateX(24px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.kurnik-toast.show {
opacity: 1;
transform: translateX(0);
}
.kurnik-toast.ok {
background: var(--success);
}
.kurnik-toast.error {
background: var(--danger);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
th,
td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--border);
}
/* ---------------------------------------------------------------------
Strona logowania (bez powłoki sidebar/main-content). */
body.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.login-card {
width: 100%;
max-width: 360px;
}
.login-card h1 {
font-size: 1.25rem;
margin: 0 0 20px;
text-align: center;
}
.login-error {
color: var(--danger);
font-size: 0.85rem;
margin: 0 0 12px;
}