oraz data-label="..."
na kazdym | . Komorki specjalne:
.cell-actions - komorka z przyciskami (bez etykiety, pelna szer.)
.cell-block - etykieta nad wartoscia (dla dlugich tekstow)
========================================================= */
@media (max-width: 767.98px) {
table.table-cards thead {
display: none;
}
table.table-cards,
table.table-cards tbody,
table.table-cards tr,
table.table-cards td {
display: block;
width: 100%;
}
table.table-cards tr {
border: 1px solid var(--bs-border-color);
border-radius: .5rem;
padding: .55rem .9rem;
margin-bottom: .75rem;
background: var(--bs-body-bg);
}
table.table-cards tr:last-child {
margin-bottom: 0;
}
table.table-cards td {
border: 0 !important;
padding: .3rem 0 !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
text-align: right;
}
table.table-cards td::before {
content: attr(data-label);
font-weight: 600;
color: var(--bs-secondary-color);
text-align: left;
white-space: nowrap;
flex: 0 0 auto;
}
/* Etykieta nad wartoscia - dla dlugich tresci (komunikaty itp.) */
table.table-cards td.cell-block {
flex-direction: column;
align-items: stretch;
text-align: left;
gap: .15rem;
}
/* Komorka akcji: przyciski w rzedzie, zawijane, bez etykiety */
table.table-cards td.cell-actions {
justify-content: flex-start;
text-align: left;
padding-top: .6rem !important;
}
table.table-cards td.cell-actions::before {
display: none;
}
/* Puste komorki (np. brak opisu) chowamy na mobile */
table.table-cards td:empty {
display: none;
}
}
/* =========================================================
Wiersz aktywnego rekordu (np. aktywny plan w Schedules/Index).
Lista ma stala kolejnosc, wiec aktywny wiersz wyroznia sie kolorem,
a nie pozycja. Polprzezroczysta zielen dziala na jasnym i ciemnym tle.
Nadpisujemy --bs-table-bg (a nie background-color), zeby nie walczyc
ze zmiennymi tabel Bootstrapa.
========================================================= */
tr.row-plan-active > td {
--bs-table-bg: rgba(25, 135, 84, .10);
}
[data-bs-theme="dark"] tr.row-plan-active > td {
--bs-table-bg: rgba(45, 200, 130, .16);
}
/* W widoku "kart" (<768px) tlo maluje sam wiersz (razem z paddingiem karty),
wiec komorkom je zdejmujemy — inaczej zielen naklada sie dwukrotnie. */
@media (max-width: 767.98px) {
table.table-cards tr.row-plan-active > td {
--bs-table-bg: transparent;
}
table.table-cards tr.row-plan-active {
background: rgba(25, 135, 84, .10);
border-color: rgba(25, 135, 84, .45);
}
[data-bs-theme="dark"] table.table-cards tr.row-plan-active {
background: rgba(45, 200, 130, .16);
border-color: rgba(45, 200, 130, .45);
}
}
/* =========================================================
Zakladki widokow szczegolowych (.app-tabs) — Devices/Edit, Schedules/Index.
Bootstrap rysuje ramke .nav-tabs .nav-link dopiero na :hover/:focus (domyslnie
border: 1px solid transparent), wiec na ekranach dotykowych — gdzie nie ma kursora —
nieaktywne zakladki wygladaly jak zwykly tekst. Ramka i tlo sa tu widoczne od razu.
========================================================= */
.app-tabs .nav-link {
border-color: var(--bs-border-color);
background-color: var(--bs-tertiary-bg);
color: var(--bs-body-color);
}
.app-tabs .nav-link:hover {
border-color: var(--bs-border-color);
background-color: var(--bs-secondary-bg);
}
/* Aktywna zakladka "wycina" dolna linie paska i zlewa sie z trescia pod spodem. */
.app-tabs .nav-link.active {
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
font-weight: 600;
}
/* Zakladki akcentowane: tab-danger (operacje nieodwracalne), tab-warning (wstrzymanie).
Kolor niesie ostrzezenie takze wtedy, gdy zakladka nie jest aktywna. */
.app-tabs .nav-link.tab-danger {
color: var(--bs-danger);
}
.app-tabs .nav-link.tab-danger.active {
color: var(--bs-danger);
border-color: var(--bs-danger) var(--bs-danger) var(--bs-body-bg);
}
.app-tabs .nav-link.tab-warning {
color: var(--bs-warning-text-emphasis);
}
.app-tabs .nav-link.tab-warning.active {
color: var(--bs-warning-text-emphasis);
border-color: var(--bs-warning) var(--bs-warning) var(--bs-body-bg);
}
/* Telefon: zakladki dziela szerokosc po rowno w jednym rzedzie zamiast lamania sie
do drugiej linii (ikony i dlugie etykiety chowane sa w markupie przez d-none/d-sm-none). */
@media (max-width: 575.98px) {
.app-tabs {
flex-wrap: nowrap;
}
.app-tabs .nav-item {
flex: 1 1 0;
min-width: 0;
}
.app-tabs .nav-link {
width: 100%;
padding: .5rem .25rem;
font-size: .8125rem;
text-align: center;
}
}
/* =========================================================
Kafelek sterownika podlewania (Devices.cshtml): ikona kropli prowadzi do harmonogramu.
Domyslnie wyglada jak pozostale ikony typu (przygaszona), a klikalnosc sygnalizuje
kolorem akcentu. Kolor ustawiamy tutaj, a nie klasa utility text-body-tertiary,
bo utility Bootstrapa maja !important i hover nie mialby jak wygrac.
========================================================= */
.device-schedule-link {
color: var(--bs-tertiary-color);
transition: color .15s ease;
}
.device-schedule-link:hover,
.device-schedule-link:focus {
color: var(--bs-primary);
}
/* =========================================================
Kafelek: przycisk "Sprawdź stan połączenia u brokera" obok etykiety statusu
(_device.js -> refreshDeviceConnection). Kolor ustawiamy tutaj z tego samego powodu
co przy .device-schedule-link — utility Bootstrapa maja !important i hover by nie wygral.
Obrot ikony na czas zapytania to jedyny sygnal, ze cos sie dzieje: przycisk jest maly,
a odpowiedz brokera potrafi chwile zajac.
========================================================= */
.refresh-connection-btn {
color: var(--bs-tertiary-color);
line-height: 1;
transition: color .15s ease;
}
.refresh-connection-btn:hover,
.refresh-connection-btn:focus {
color: var(--bs-primary);
}
.refresh-connection-spinning svg {
display: inline-block;
animation: refreshConnectionSpin .8s linear infinite;
}
@keyframes refreshConnectionSpin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.refresh-connection-spinning svg {
animation: none;
opacity: .5;
}
}
|