denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Tables): implement flat table styling across ASNs, Domains, and IPRanges managers for improved visual consistency and user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 58s
Details

Browse Source
This commit is contained in:
denozord
2026-02-16 16:20:01 +07:00
parent 94efee905a
commit a322de4129
6 changed files with 128 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+49
View File
@@ -332,6 +332,55 @@ button:focus-visible,
--tblr-table-bg-type: rgba(32, 107, 196, 0.12);
}
/* ===== Table flat (без карточной подложки, как UniFi) ===== */
/* Только горизонтальные разделители, thead темнее, без вертикальных границ */
.table-flat {
--tblr-table-border-color: var(--tblr-border-color);
background: transparent;
}
.table-flat thead th {
font-weight: 600;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--tblr-table-border-color);
background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03));
color: var(--tblr-body-color);
padding: 0.75rem 1rem;
white-space: nowrap;
}
.table-flat tbody td {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--tblr-table-border-color);
background: transparent;
padding: 0.75rem 1rem;
vertical-align: middle;
}
.table-flat tbody tr:hover td {
background: var(--tblr-bg-surface-tertiary, rgba(0, 0, 0, 0.02));
}
.table-flat tbody tr.table-selected td,
.table-flat tbody tr.table-active td {
background: rgba(32, 107, 196, 0.08);
}
.table-flat tbody tr.table-selected:hover td,
.table-flat tbody tr.table-active:hover td {
background: rgba(32, 107, 196, 0.12);
}
/* В тёмной теме — чуть другие оттенки для thead */
[data-bs-theme="dark"] .table-flat thead th {
background: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] .table-flat tbody tr:hover td {
background: rgba(255, 255, 255, 0.04);
}
[data-bs-theme="dark"] .table-flat tbody tr.table-selected td,
[data-bs-theme="dark"] .table-flat tbody tr.table-active td {
background: rgba(32, 107, 196, 0.15);
}
.user-select-none {
user-select: none;
-webkit-user-select: none;