javier.2526/doli-front
javier.2526
/
doli-front
mirror of https://github.com/JavMB/doli-front.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor CSS styles for improved readability and consistency

This commit is contained in:
javiermengual 2026-02-19 16:44:24 +01:00
parent e9b4231409
commit 3a1844e17f
2 changed files with 133 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/style.css
View File

@ -1750,10 +1750,24 @@ button:disabled {
min-height: 1rem;
}
.db-sub-green { color: var(--green-600); font-weight: 500; }
.db-sub-amber { color: var(--amber-600); font-weight: 500; }
.db-sub-red { color: var(--red-600); font-weight: 500; }
.db-sub-muted { color: var(--text-secondary); }
.db-sub-green {
color: var(--green-600);
font-weight: 500;
}
.db-sub-amber {
color: var(--amber-600);
font-weight: 500;
}
.db-sub-red {
color: var(--red-600);
font-weight: 500;
}
.db-sub-muted {
color: var(--text-secondary);
}
/* Skeleton loaders */
.db-kpi-skeleton {
@ -1772,8 +1786,13 @@ button:disabled {
}
@keyframes db-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Middle row: chart + recent */
@ -1826,7 +1845,9 @@ button:disabled {
font-weight: 500;
}
.db-see-all:hover { text-decoration: underline; }
.db-see-all:hover {
text-decoration: underline;
}
/* Chart body */
.db-chart-body {
@ -1856,9 +1877,13 @@ button:disabled {
transition: background var(--transition-fast);
}
.db-recent-item:last-child { border-bottom: none; }
.db-recent-item:last-child {
border-bottom: none;
}
.db-recent-item:hover { background: var(--gray-50); }
.db-recent-item:hover {
background: var(--gray-50);
}
.db-recent-dot {
width: 30px;
@ -1878,7 +1903,9 @@ button:disabled {
transition: color var(--transition-fast);
}
.db-recent-item:hover .db-recent-arrow { color: var(--gray-500); }
.db-recent-item:hover .db-recent-arrow {
color: var(--gray-500);
}
.db-recent-info {
flex: 1;
@ -1925,9 +1952,13 @@ button:disabled {
}
/* Monitoring table */
.db-table-card { margin-bottom: var(--space-4); }
.db-table-card {
margin-bottom: var(--space-4);
}
.db-table-wrap { overflow-x: auto; }
.db-table-wrap {
overflow-x: auto;
}
.db-monitoring-table {
width: 100%;
@ -1948,10 +1979,17 @@ button:disabled {
white-space: nowrap;
}
.db-th-right { text-align: right !important; }
.db-th-right {
text-align: right !important;
}
.db-monitoring-table thead th:first-child { padding-left: var(--space-5); }
.db-monitoring-table thead th:last-child { padding-right: var(--space-5); }
.db-monitoring-table thead th:first-child {
padding-left: var(--space-5);
}
.db-monitoring-table thead th:last-child {
padding-right: var(--space-5);
}
.db-table-row {
cursor: pointer;
@ -1965,17 +2003,47 @@ button:disabled {
transition: background var(--transition-fast);
}
.db-table-row:last-child td { border-bottom: none; }
.db-table-row:hover td { background: var(--gray-50); }
.db-table-row:last-child td {
border-bottom: none;
}
.db-table-row td:first-child { padding-left: var(--space-5); }
.db-table-row td:last-child { padding-right: var(--space-5); }
.db-table-row:hover td {
background: var(--gray-50);
}
.db-cell-num { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.db-cell-client { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-cell-right { text-align: right; }
.db-remain-due { color: var(--red-600); font-weight: 600; }
.db-remain-ok { color: var(--green-600); }
.db-table-row td:first-child {
padding-left: var(--space-5);
}
.db-table-row td:last-child {
padding-right: var(--space-5);
}
.db-cell-num {
font-variant-numeric: tabular-nums;
font-weight: 500;
white-space: nowrap;
}
.db-cell-client {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-cell-right {
text-align: right;
}
.db-remain-due {
color: var(--red-600);
font-weight: 600;
}
.db-remain-ok {
color: var(--green-600);
}
.db-table-loading {
text-align: center;
@ -1995,8 +2063,13 @@ button:disabled {
margin: 0;
}
.db-error { color: var(--red-600); }
.db-td-center { text-align: center; }
.db-error {
color: var(--red-600);
}
.db-td-center {
text-align: center;
}
/* Recent skeleton */
.db-recent-skeleton {
@ -2029,8 +2102,13 @@ button:disabled {
animation: db-shimmer 1.4s infinite;
}
.db-skel-lines span:first-child { width: 70%; }
.db-skel-lines span:last-child { width: 50%; }
.db-skel-lines span:first-child {
width: 70%;
}
.db-skel-lines span:last-child {
width: 50%;
}
.db-skel-right {
display: flex;
@ -2048,21 +2126,35 @@ button:disabled {
animation: db-shimmer 1.4s infinite;
}
.db-skel-right span:first-child { width: 60px; }
.db-skel-right span:last-child { width: 44px; }
.db-skel-right span:first-child {
width: 60px;
}
.db-skel-right span:last-child {
width: 44px;
}
/* Responsive */
@media (max-width: 1100px) {
.db-kpi-row { grid-template-columns: repeat(2, 1fr); }
.db-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.db-mid-row { grid-template-columns: 1fr; }
.db-mid-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 580px) {
.db-kpi-row { grid-template-columns: 1fr; }
.db-greeting { font-size: 1.1rem; }
.db-kpi-row {
grid-template-columns: 1fr;
}
.db-greeting {
font-size: 1.1rem;
}
}
/* Keep legacy dashboard-subtitle for possible other uses */