refactor(css): global.css (871 Zeilen Monolith) in 15 Dateien aufgeteilt
Nach Zuständigkeit getrennt (tokens/base/layout/cards/forms/badges/theme- toggle/command-palette/alert/utilities/scanner/table/split-layout/akte-grid/ responsive) unter frontend/src/styles/global/, größte Datei jetzt 135 statt 871 Zeilen. tailwind.css importiert alle in ursprünglicher Reihenfolge im selben Layer (global-css) - Cascade-Layer-Reihenfolge unverändert, im gebauten CSS verifiziert. Dabei toten Code entfernt: .badge-ready/-limited/-not-ready/-unknown und .card-grid/.stat-number (Reste von vor der Tailwind-Migration, nirgends mehr im Code referenziert). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
@media (min-width: 900px) {
|
||||
.akte-grid {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-areas:
|
||||
"kopf kopf"
|
||||
"aktionen aktionen"
|
||||
"stamm wartung"
|
||||
"beladung pruefungen"
|
||||
"verantwortlich maengel"
|
||||
"dokumente dokumente"
|
||||
"historie historie";
|
||||
}
|
||||
|
||||
.akte-grid.ist-fahrzeug {
|
||||
grid-template-areas:
|
||||
"kopf kopf"
|
||||
"aktionen aktionen"
|
||||
"wartung stamm"
|
||||
"pruefungen beladung"
|
||||
"maengel verantwortlich"
|
||||
"dokumente dokumente"
|
||||
"historie historie";
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.split-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.split-layout-sidebar,
|
||||
.split-layout-sidebar-sm {
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.page-wide {
|
||||
padding: 1.25rem 1rem 2rem;
|
||||
}
|
||||
|
||||
/* Sidebar -> horizontale Topbar zurückklappen (Mobile-Durchgang) */
|
||||
.app-shell {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
height: auto;
|
||||
position: sticky;
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.topbar-nav {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.topbar-nav a {
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user