bronku/cake-order-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactoring html and css

Browse source
This commit is contained in:
bronkuu 2026-06-15 14:43:50 +02:00
parent 8194cea85e
commit a91b196e64
16 changed files with 1299 additions and 1383 deletions
Download patch file Download diff file Expand all files Collapse all files

241
server/static/card.css Normal file
View file

@ -0,0 +1,241 @@
/* ========== CARDS ========== */
.card {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--border-radius-md);
display: flex;
flex-direction: column;
> header {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--outline-variant);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--surface-container-low);
h2 {
font-size: 1rem;
font-weight: 600;
color: var(--on-surface);
display: flex;
align-items: center;
gap: 0.5rem;
.material-symbols-outlined {
font-size: 1.25rem;
color: var(--on-surface-variant);
}
}
}
> div,
> form {
padding: 1rem;
flex: 1;
}
> footer {
padding: 0.5rem 0.75rem;
border-top: 1px solid var(--outline-variant);
background: var(--surface-container-lowest);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
color: var(--on-surface-variant);
}
}
.card > .table-container {
overflow-x: auto;
padding: 0;
}
/* ========== METRICS GRID ========== */
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
> div {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--border-radius-md);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
.label {
font-size: 0.75rem;
font-weight: 500;
color: var(--on-surface-variant);
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 0.25rem;
.material-symbols-outlined {
font-size: 1rem;
}
}
.value {
font-size: 1.75rem;
font-weight: 700;
color: var(--on-surface);
line-height: 1.2;
}
.change {
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.25rem;
&.positive {
color: var(--success-text);
}
&.warning {
color: var(--warning-text);
}
.material-symbols-outlined {
font-size: 1rem;
}
}
}
}
@media (max-width: 64em) {
.metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 48em) {
.metrics-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ========== SPLIT PANE ========== */
.split-pane {
display: flex;
gap: 1rem;
flex: 1;
min-height: 0;
> div:first-child {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
> aside {
width: 20rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
}
@media (max-width: 64em) {
.split-pane {
flex-direction: column;
}
.split-pane > aside {
width: 100%;
}
}
/* ========== DATA TABLE ========== */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
thead {
background: var(--surface-container-low);
border-bottom: 1px solid var(--outline-variant);
}
th {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: left;
white-space: nowrap;
&.right {
text-align: right;
}
&.center {
text-align: center;
}
}
td {
padding: 0.5rem 0.75rem;
color: var(--on-surface);
white-space: nowrap;
.truncate {
max-width: 12.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
}
tbody tr {
border-bottom: 1px solid var(--outline-variant);
transition: background var(--transition);
height: 2.5rem;
&:hover {
background: var(--surface-container-low);
}
&:nth-child(even) {
background: var(--surface-bright);
&:hover {
background: var(--surface-container-low);
}
}
}
.order-id {
font-weight: 700;
color: var(--primary);
text-decoration: none;
}
.customer {
font-weight: 500;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-muted {
color: var(--on-surface-variant);
}
}