florian.wildeandClaude Opus 5
09bb98235b
Das Markup stammt von AdminLTE, dessen JavaScript wir bewusst nicht einbinden. Die Klasse sidebar-open liess sich damit setzen, aber nichts nahm sie wieder weg: keine Flaeche zum Antippen, kein Schliessen beim Navigieren, kein Escape. Auf dem Telefon blieb das Menue ueber dem Inhalt stehen. Jetzt gibt es einen eigenen Zustand, auf den Kopfzeile und Menue gemeinsam hoeren, eine abdunkelnde Flaeche dahinter, einen Schliessen-Knopf im Menuekopf und das Schliessen beim Navigieren. Der Inhalt dahinter scrollt nicht mehr mit. Ausserdem zeigt die Dashboard-Tabelle auf dem Telefon nur Host und Ablauf, den Kunden klein darunter - vorher war rechts die Haelfte abgeschnitten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
392 lines
7.9 KiB
CSS
392 lines
7.9 KiB
CSS
/*
|
|
* ProxLedger-Theme auf Basis von AdminLTE 4 (nur CSS) und Bootstrap 5.3.
|
|
* Farben laut Vorgabe; Info und Erfolg sind gegenüber AdminLTE abgedunkelt,
|
|
* damit weiße Schrift den Kontrast 4,5:1 erreicht.
|
|
*/
|
|
|
|
:root {
|
|
--pl-navy: #1e2a44;
|
|
--pl-primary: #007bff;
|
|
--pl-primary-dark: #0062cc;
|
|
--pl-info: #138496;
|
|
--pl-success: #1e7e34;
|
|
--pl-warning: #ffc107;
|
|
--pl-warning-text: #1f2d3d;
|
|
--pl-danger: #c82333;
|
|
--pl-neutral: #6c757d;
|
|
--pl-content-bg: #f4f6f9;
|
|
--pl-sidebar-bg: #343a40;
|
|
--pl-sidebar-text: #c2c7d0;
|
|
--pl-sidebar-divider: #4b545c;
|
|
--pl-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
|
|
--pl-logo-p: #1e2a44;
|
|
--pl-logo-linien: #17a2b8;
|
|
|
|
--bs-primary: var(--pl-primary);
|
|
--bs-primary-rgb: 0, 123, 255;
|
|
--bs-link-color: var(--pl-primary);
|
|
--bs-link-color-rgb: 0, 123, 255;
|
|
--bs-link-hover-color: var(--pl-primary-dark);
|
|
--bs-link-hover-color-rgb: 0, 98, 204;
|
|
--bs-body-font-size: 1rem;
|
|
--lte-sidebar-width: 250px;
|
|
}
|
|
|
|
:root[data-bs-theme="dark"] {
|
|
--pl-content-bg: #1b1f24;
|
|
--pl-sidebar-bg: #22272d;
|
|
/* Auf dunklem Grund wäre das dunkle P unsichtbar. */
|
|
--pl-logo-p: #e9ecef;
|
|
}
|
|
|
|
.pl-logo-p {
|
|
fill: var(--pl-logo-p);
|
|
}
|
|
|
|
.pl-logo-linien {
|
|
stroke: var(--pl-logo-linien);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--pl-content-bg);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ---------- Buttons und Links in Primärfarbe ---------- */
|
|
|
|
.btn-primary {
|
|
--bs-btn-bg: var(--pl-primary);
|
|
--bs-btn-border-color: var(--pl-primary);
|
|
--bs-btn-hover-bg: var(--pl-primary-dark);
|
|
--bs-btn-hover-border-color: var(--pl-primary-dark);
|
|
--bs-btn-active-bg: var(--pl-primary-dark);
|
|
--bs-btn-active-border-color: var(--pl-primary-dark);
|
|
--bs-btn-disabled-bg: var(--pl-primary);
|
|
--bs-btn-disabled-border-color: var(--pl-primary);
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
--bs-btn-color: var(--pl-primary);
|
|
--bs-btn-border-color: var(--pl-primary);
|
|
--bs-btn-hover-bg: var(--pl-primary);
|
|
--bs-btn-hover-border-color: var(--pl-primary);
|
|
--bs-btn-active-bg: var(--pl-primary);
|
|
--bs-btn-active-border-color: var(--pl-primary);
|
|
}
|
|
|
|
/* ---------- Statusfarben (eigene Klassen wegen abgedunkelter Töne) ---------- */
|
|
|
|
.pl-bg-info,
|
|
.pl-bg-success,
|
|
.pl-bg-danger,
|
|
.pl-bg-neutral,
|
|
.pl-bg-primary {
|
|
color: #fff;
|
|
}
|
|
|
|
.pl-bg-info {
|
|
background-color: var(--pl-info);
|
|
}
|
|
.pl-bg-success {
|
|
background-color: var(--pl-success);
|
|
}
|
|
.pl-bg-danger {
|
|
background-color: var(--pl-danger);
|
|
}
|
|
.pl-bg-neutral {
|
|
background-color: var(--pl-neutral);
|
|
}
|
|
.pl-bg-primary {
|
|
background-color: var(--pl-primary);
|
|
}
|
|
.pl-bg-warning {
|
|
color: var(--pl-warning-text);
|
|
background-color: var(--pl-warning);
|
|
}
|
|
|
|
.pl-text-danger {
|
|
color: var(--pl-danger) !important;
|
|
}
|
|
.pl-text-success {
|
|
color: var(--pl-success) !important;
|
|
}
|
|
.pl-text-warning {
|
|
color: #9a7400 !important;
|
|
}
|
|
:root[data-bs-theme="dark"] .pl-text-warning {
|
|
color: var(--pl-warning) !important;
|
|
}
|
|
|
|
/* ---------- Sidebar ---------- */
|
|
|
|
.app-sidebar {
|
|
background-color: var(--pl-sidebar-bg);
|
|
--lte-sidebar-color: var(--pl-sidebar-text);
|
|
--lte-sidebar-hover-color: #fff;
|
|
--lte-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
|
|
--lte-sidebar-menu-active-color: #fff;
|
|
--lte-sidebar-menu-active-bg: var(--pl-primary);
|
|
--lte-sidebar-header-color: #8a93a0;
|
|
--lte-sidebar-submenu-color: var(--pl-sidebar-text);
|
|
--lte-sidebar-submenu-hover-color: #fff;
|
|
--lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.08);
|
|
--bs-border-color: var(--pl-sidebar-divider);
|
|
}
|
|
|
|
.app-sidebar .sidebar-brand {
|
|
background-color: var(--pl-sidebar-bg);
|
|
}
|
|
|
|
.app-sidebar .brand-text {
|
|
font-weight: 300;
|
|
color: #fff;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.app-sidebar .nav-link {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.app-sidebar .nav-header {
|
|
padding-top: 1rem;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.pl-sidebar-user {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
padding: 0.85rem 0.9rem;
|
|
border-bottom: 1px solid var(--pl-sidebar-divider);
|
|
color: var(--pl-sidebar-text);
|
|
}
|
|
|
|
.pl-sidebar-user-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background-color: var(--pl-info);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.pl-sidebar-search {
|
|
padding: 0.75rem 0.9rem;
|
|
}
|
|
|
|
/* Im eingeklappten Zustand nur Icons zeigen */
|
|
.sidebar-collapse .pl-sidebar-user span,
|
|
.sidebar-collapse .pl-sidebar-search,
|
|
.sidebar-collapse .app-sidebar .brand-text {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* Fläche hinter dem geöffneten Menü auf schmalen Bildschirmen. Ein Knopf statt eines div,
|
|
* damit sie auch per Tastatur erreichbar ist.
|
|
*/
|
|
.pl-menu-hintergrund {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1037; /* unter dem Menü (1038), über allem anderen */
|
|
padding: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border: 0;
|
|
}
|
|
|
|
/* ---------- Inhaltsbereich ---------- */
|
|
|
|
.app-content-header {
|
|
padding: 1rem 0 0.5rem;
|
|
}
|
|
|
|
.app-main {
|
|
background-color: var(--pl-content-bg);
|
|
}
|
|
|
|
.pl-page-title {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ---------- Small Box ---------- */
|
|
|
|
.small-box {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.small-box > .inner {
|
|
padding: 1rem 1rem 0.25rem;
|
|
}
|
|
|
|
.small-box h3 {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.small-box .small-box-icon {
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 1rem;
|
|
font-size: 3.25rem;
|
|
line-height: 1;
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.small-box .small-box-footer {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.small-box .small-box-footer:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ---------- Karten ---------- */
|
|
|
|
.pl-card-outline-primary {
|
|
border-top: 3px solid var(--pl-primary);
|
|
}
|
|
.pl-card-outline-warning {
|
|
border-top: 3px solid var(--pl-warning);
|
|
}
|
|
.pl-card-outline-danger {
|
|
border-top: 3px solid var(--pl-danger);
|
|
}
|
|
.pl-card-outline-info {
|
|
border-top: 3px solid var(--pl-info);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.05rem;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ---------- Aufgabenliste (AdminLTE-Todo) ---------- */
|
|
|
|
.pl-todo-list {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.pl-todo-list > li {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
padding: 0.65rem 0.75rem;
|
|
margin-bottom: 0.4rem;
|
|
border-radius: 0.25rem;
|
|
border-left: 3px solid var(--pl-neutral);
|
|
background-color: var(--bs-secondary-bg);
|
|
}
|
|
|
|
.pl-todo-list > li.pl-todo-gefahr {
|
|
border-left-color: var(--pl-danger);
|
|
}
|
|
.pl-todo-list > li.pl-todo-warnung {
|
|
border-left-color: var(--pl-warning);
|
|
}
|
|
.pl-todo-list > li.pl-todo-info {
|
|
border-left-color: var(--pl-info);
|
|
}
|
|
|
|
.pl-todo-erledigt .pl-todo-text {
|
|
text-decoration: line-through;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ---------- Monospace-Werte mit Kopierfunktion ---------- */
|
|
|
|
.pl-mono {
|
|
font-family: var(--pl-font-mono);
|
|
font-size: 0.9375em;
|
|
}
|
|
|
|
.pl-copy-button {
|
|
padding: 0 0.25rem;
|
|
font-size: 0.85em;
|
|
line-height: 1;
|
|
color: var(--bs-secondary-color);
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
|
|
.pl-copy-button:hover {
|
|
color: var(--pl-primary);
|
|
}
|
|
|
|
/* ---------- Tabellen ---------- */
|
|
|
|
.pl-table-card .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pl-table-card .table > :not(caption) > * > * {
|
|
padding: 0.6rem 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ---------- Jahresbahn ---------- */
|
|
|
|
.pl-timeline-row {
|
|
position: relative;
|
|
height: 2rem;
|
|
background: linear-gradient(to right, var(--bs-secondary-bg) 1px, transparent 1px) repeat-x;
|
|
background-size: calc(100% / 12) 100%;
|
|
}
|
|
|
|
.pl-timeline-bar {
|
|
position: absolute;
|
|
top: 0.4rem;
|
|
height: 1.2rem;
|
|
border-radius: 0.6rem;
|
|
color: #fff;
|
|
font-size: 0.75rem;
|
|
line-height: 1.2rem;
|
|
padding: 0 0.5rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pl-timeline-heute {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background-color: var(--pl-danger);
|
|
}
|
|
|
|
/* ---------- Suchdialog (Strg+K) ---------- */
|
|
|
|
.pl-search-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1080;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.pl-search-dialog {
|
|
position: fixed;
|
|
top: 12vh;
|
|
left: 50%;
|
|
z-index: 1085;
|
|
width: min(680px, 92vw);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* ---------- Mobil ---------- */
|
|
|
|
@media (max-width: 575.98px) {
|
|
.pl-touch-target {
|
|
min-height: 44px;
|
|
}
|
|
}
|