2179 lines
51 KiB
CSS
2179 lines
51 KiB
CSS
/* === Design-Tokens === */
|
|
:root {
|
|
--accent: #0071e3;
|
|
--accent-hover: #0077ed;
|
|
--accent-active: #006ad1;
|
|
--accent-soft: #e8f1fd;
|
|
|
|
--text: #1d1d1f;
|
|
--text-muted: #6e6e73;
|
|
--text-subtle: #86868b;
|
|
|
|
--bg: #f5f5f7;
|
|
--surface: #ffffff;
|
|
--surface-alt: #fafafc;
|
|
--surface-sunk: #f0f0f2;
|
|
|
|
--line: #d2d2d7;
|
|
--line-soft: #e8e8ed;
|
|
|
|
--green: #248a3d;
|
|
--amber: #b25000;
|
|
--red: #d70015;
|
|
|
|
--r-sm: 6px;
|
|
--r-md: 8px;
|
|
--r-lg: 12px;
|
|
--r-xl: 16px;
|
|
--r-pill: 980px;
|
|
|
|
--sh-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
|
|
--sh-2: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
|
|
--sh-3: 0 8px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
|
|
|
|
--ease: cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
|
|
/* === Basis & Reset === */
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
|
|
Roboto, Helvetica, Arial, sans-serif;
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.container { padding: 20px 24px; }
|
|
|
|
/* === Kopfzeile & Navigation === */
|
|
header {
|
|
background: rgba(255,255,255,.82);
|
|
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
backdrop-filter: saturate(180%) blur(20px);
|
|
border-bottom: 1px solid var(--line-soft);
|
|
color: var(--text);
|
|
padding: 10px 24px;
|
|
}
|
|
|
|
.header-bar {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 19px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
letter-spacing: -0.02em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-right: 140px;
|
|
}
|
|
|
|
.header-logo {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 44px;
|
|
width: auto;
|
|
max-width: 120px;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.header-toggle {
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 6px 10px;
|
|
min-width: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.header-toggle-icon { font-size: 16px; }
|
|
|
|
@media (max-width: 520px) {
|
|
.header-logo { height: 36px; max-width: 80px; }
|
|
header h1 { font-size: 16px; padding-right: 100px; }
|
|
}
|
|
|
|
/* === Seiten-Menü (links ausfahrend) === */
|
|
.side-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 280px;
|
|
max-width: 80vw;
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--line-soft);
|
|
box-shadow: var(--sh-3);
|
|
z-index: 200;
|
|
transform: translateX(-100%);
|
|
transition: transform .3s var(--ease);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.side-menu.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.side-menu-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.side-menu-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.theme-toggle-circle {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--surface-sunk);
|
|
border: 1px solid var(--line-soft);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
transition: background .2s var(--ease), transform .1s var(--ease);
|
|
}
|
|
|
|
.theme-toggle-circle:hover { background: var(--line-soft); }
|
|
.theme-toggle-circle:active { transform: scale(.95); }
|
|
|
|
.side-menu-content {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.menu-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.menu-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.menu-section button { width: 100%; justify-content: center; }
|
|
|
|
.menu-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--line-soft);
|
|
margin: 0;
|
|
}
|
|
|
|
/* === Show Mode === */
|
|
.show-mode-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--bg);
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.show-mode-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 24px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--line-soft);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.show-mode-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.show-mode-content .container {
|
|
padding: 0;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.show-mode-content .section-title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.show-mode-paused {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-soft);
|
|
padding: 12px 24px;
|
|
border-radius: var(--r-pill);
|
|
box-shadow: var(--sh-3);
|
|
font-weight: 600;
|
|
z-index: 1001;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Kompakte Darstellung im Show Mode */
|
|
.show-mode-content {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.show-mode-content .table-wrap {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.show-mode-content table {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.show-mode-content th,
|
|
.show-mode-content td {
|
|
padding: 3px 4px !important;
|
|
}
|
|
|
|
.show-mode-content thead tr:nth-child(1) th,
|
|
.show-mode-content thead tr:nth-child(2) th {
|
|
position: static;
|
|
}
|
|
|
|
.show-mode-content th.rot {
|
|
height: 60px !important;
|
|
}
|
|
|
|
.show-mode-content .proj-name {
|
|
min-width: 120px !important;
|
|
}
|
|
|
|
.show-mode-content .status {
|
|
min-width: 160px !important;
|
|
}
|
|
|
|
.show-mode-content .status-edit {
|
|
min-height: 24px !important;
|
|
padding: 3px 5px !important;
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.show-mode-content .person-cell {
|
|
width: 22px !important;
|
|
}
|
|
|
|
.show-mode-content .lph-cell {
|
|
width: 38px !important;
|
|
}
|
|
|
|
.show-mode-content .lph-cell input {
|
|
width: 30px !important;
|
|
}
|
|
|
|
.show-mode-content .bar {
|
|
height: 3px !important;
|
|
margin-top: 2px !important;
|
|
}
|
|
|
|
.show-mode-content .group-header td {
|
|
padding: 4px 6px !important;
|
|
}
|
|
|
|
.show-mode-content #boardLegend {
|
|
display: none;
|
|
}
|
|
|
|
.show-mode-content .load-grid {
|
|
gap: 12px;
|
|
}
|
|
|
|
.show-mode-content .load-row {
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
|
|
gap: 10px !important;
|
|
}
|
|
|
|
.show-mode-content .load-card {
|
|
padding: 10px 12px !important;
|
|
}
|
|
|
|
.show-mode-content .load-card h3 {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.show-mode-content .load-num {
|
|
font-size: 22px !important;
|
|
}
|
|
|
|
.show-mode-content .load-detail {
|
|
font-size: 10px !important;
|
|
margin-top: 6px !important;
|
|
}
|
|
|
|
.show-mode-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
font-size: 24px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Show Mode: Auslastungs-Steuerelemente und Überschrift ausblenden */
|
|
.show-mode-overlay .show-mode-content #load .section-title,
|
|
.show-mode-overlay .show-mode-content #load .toolbar {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show Mode: Bearbeitung deaktivieren */
|
|
.show-mode-content .person-cell,
|
|
.show-mode-content .lph-cell input,
|
|
.show-mode-content .status-edit {
|
|
pointer-events: none !important;
|
|
cursor: default !important;
|
|
}
|
|
|
|
.show-mode-content .del-proj {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.show-mode-content input[type=text].edit-name,
|
|
.show-mode-content input[type=checkbox] {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.show-mode-content button {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.side-menu-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,.35);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
z-index: 150;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity .3s var(--ease), visibility .3s var(--ease);
|
|
}
|
|
|
|
.side-menu.open ~ .side-menu-backdrop {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
button.active {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.week-date {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Abteilungs-Tabs: Segmented Control */
|
|
.dept-tabs {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
min-height: 54px;
|
|
background: var(--bg);
|
|
padding: 0;
|
|
}
|
|
|
|
.menu-corner-btn {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 54px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg);
|
|
border: none;
|
|
border-right: 1px solid var(--line-soft);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
transition: background .2s var(--ease);
|
|
}
|
|
|
|
.menu-corner-btn:hover { background: var(--surface-sunk); }
|
|
.menu-corner-btn:active { transform: none; }
|
|
|
|
.dept-tabs-center {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
flex-wrap: wrap;
|
|
padding: 12px 24px 0 24px;
|
|
}
|
|
|
|
.dept-tab {
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
padding: 10px 22px;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: var(--r-md);
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
transition: background .2s var(--ease), color .2s var(--ease);
|
|
}
|
|
|
|
.dept-tab:hover {
|
|
background: rgba(0,0,0,.045);
|
|
color: var(--text);
|
|
}
|
|
|
|
.dept-tab.active {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
box-shadow: var(--sh-1);
|
|
}
|
|
|
|
/* Unter-Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
background: var(--bg);
|
|
padding: 6px 24px 0 24px;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.tab {
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
padding: 8px 14px;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: var(--r-sm) var(--r-sm) 0 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: color .2s var(--ease), box-shadow .2s var(--ease);
|
|
}
|
|
|
|
.tab:hover { color: var(--text); }
|
|
|
|
.tab.active {
|
|
background: transparent;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
box-shadow: inset 0 -2px 0 var(--accent);
|
|
}
|
|
|
|
/* === Buttons & Formulare === */
|
|
button {
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: var(--r-pill);
|
|
padding: 7px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
letter-spacing: -0.01em;
|
|
transition: background .2s var(--ease), transform .1s var(--ease),
|
|
box-shadow .2s var(--ease);
|
|
}
|
|
|
|
button:hover { background: var(--accent-hover); }
|
|
button:active { background: var(--accent-active); transform: scale(.97); }
|
|
|
|
button:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(0,113,227,.35);
|
|
}
|
|
|
|
button.secondary {
|
|
background: rgba(0,0,0,.06);
|
|
color: var(--text);
|
|
}
|
|
button.secondary:hover { background: rgba(0,0,0,.10); }
|
|
button.secondary:active { background: rgba(0,0,0,.14); }
|
|
|
|
button.danger { background: var(--red); }
|
|
button.danger:hover { background: #e8112d; }
|
|
button.danger:active { background: #b8000f; }
|
|
|
|
button.small {
|
|
padding: 3px 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
select,
|
|
input[type=text],
|
|
input[type=date] {
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
font-size: 13px;
|
|
font-family: inherit;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
|
|
}
|
|
|
|
select:focus,
|
|
input[type=text]:focus,
|
|
input[type=date]:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(0,113,227,.18);
|
|
}
|
|
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding-right: 28px;
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236e6e73' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.role-checkboxes {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.role-checkboxes label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
input[type=checkbox] { accent-color: var(--accent); }
|
|
|
|
/* === Tabellen & Matrix === */
|
|
table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
background: var(--surface);
|
|
font-size: 12px;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid var(--line-soft);
|
|
padding: 5px 7px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
thead tr:nth-child(1) th {
|
|
background: var(--surface-sunk);
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
border: 1px solid var(--line);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
thead tr:nth-child(2) th {
|
|
background: var(--surface-alt);
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
border: 1px solid var(--line);
|
|
position: sticky;
|
|
top: 0; /* Wird von adjustStickyOffsets() dynamisch überschrieben */
|
|
z-index: 6;
|
|
}
|
|
|
|
th.rot {
|
|
background: var(--surface);
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
height: 90px;
|
|
padding: 4px 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
td.left {
|
|
text-align: left;
|
|
min-width: 80px;
|
|
}
|
|
|
|
tr:nth-child(even) td { background: var(--surface-alt); }
|
|
|
|
.proj-name {
|
|
font-weight: 600;
|
|
min-width: 160px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.group-header td {
|
|
background: var(--surface-sunk) !important;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
color: var(--text);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* === Status-Felder in der Projektzeile === */
|
|
.status {
|
|
min-width: 240px;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.status-edit {
|
|
width: 100%;
|
|
min-height: 34px;
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-sm);
|
|
padding: 5px 7px;
|
|
font-size: 11px;
|
|
font-family: inherit;
|
|
line-height: 1.4;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
|
|
}
|
|
|
|
.status-edit:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(0,113,227,.18);
|
|
}
|
|
|
|
.status-edit.status-new { color: var(--green); }
|
|
.status-edit.status-duplicated { color: var(--text); }
|
|
.status-edit p { margin: 0 0 4px; }
|
|
.status-edit p:last-child { margin-bottom: 0; }
|
|
.status-edit b,
|
|
.status-edit strong { font-weight: 600; }
|
|
|
|
.status-toolbar {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
margin-bottom: 4px;
|
|
background: rgba(255,255,255,.9);
|
|
-webkit-backdrop-filter: saturate(180%) blur(16px);
|
|
backdrop-filter: saturate(180%) blur(16px);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-md);
|
|
padding: 3px;
|
|
gap: 2px;
|
|
box-shadow: var(--sh-2);
|
|
z-index: 10;
|
|
}
|
|
|
|
.status:focus-within .status-toolbar { display: flex; }
|
|
|
|
.status-toolbar button {
|
|
padding: 3px 7px;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
min-width: 24px;
|
|
border-radius: var(--r-sm);
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: none;
|
|
}
|
|
|
|
.status-toolbar button:hover { background: rgba(0,0,0,.06); }
|
|
.status-toolbar button:active { background: rgba(0,0,0,.10); transform: none; }
|
|
|
|
.status-toolbar button.color-red { color: var(--red); }
|
|
.status-toolbar button.color-green { color: var(--green); }
|
|
.status-toolbar button.color-blue { color: var(--accent); }
|
|
.status-toolbar button.color-black {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* === Personen-Zuweisungszellen === */
|
|
.person-cell {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
width: 26px;
|
|
transition: background .12s var(--ease);
|
|
}
|
|
|
|
.person-cell.on {
|
|
background: var(--green) !important;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.person-cell.optional {
|
|
background: #d18b00 !important;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.locked-cell {
|
|
cursor: not-allowed !important;
|
|
background: var(--surface-sunk) !important;
|
|
opacity: .65;
|
|
}
|
|
|
|
.locked-cell input {
|
|
background: var(--surface-sunk) !important;
|
|
cursor: not-allowed !important;
|
|
border-color: var(--line-soft) !important;
|
|
}
|
|
|
|
/* Gesperrte Zellen immer grau, auch wenn X/(X) gesetzt ist */
|
|
.person-cell.locked-cell.on,
|
|
.person-cell.locked-cell.optional {
|
|
background: var(--surface-sunk) !important;
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
/* === Rollenfarben === */
|
|
.person-cell.role-planung {
|
|
background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
|
|
rgb(212, 245, 224);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.person-cell.role-projektleitung {
|
|
background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
|
|
rgb(255, 219, 219);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.person-cell.role-bauüberwachung {
|
|
background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
|
|
rgb(203, 238, 255);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.role-planung,
|
|
.role-planung.rot {
|
|
background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
|
|
rgb(212, 245, 224);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.role-projektleitung,
|
|
.role-projektleitung.rot {
|
|
background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
|
|
rgb(255, 219, 219);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.role-bauüberwachung,
|
|
.role-bauüberwachung.rot {
|
|
background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
|
|
rgb(203, 238, 255);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
th.role-planung,
|
|
th.role-projektleitung,
|
|
th.role-bauüberwachung { color: var(--text); }
|
|
|
|
/* === LPH / Balken / Überschriften === */
|
|
.lph-cell { width: 50px; }
|
|
|
|
.lph-cell input {
|
|
width: 38px;
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-sm);
|
|
padding: 3px;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.bar {
|
|
height: 5px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--line-soft);
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bar > div {
|
|
height: 100%;
|
|
background: var(--green);
|
|
border-radius: var(--r-pill);
|
|
transition: width .3s var(--ease);
|
|
}
|
|
|
|
/* Markierung der amtierenden Leistungsphase (gesetzt im Tab "Projekte") */
|
|
.lph-cell.lp-aktiv {
|
|
background: var(--accent-soft);
|
|
box-shadow: inset 0 2px 0 var(--accent);
|
|
}
|
|
|
|
.lph-cell.lp-aktiv input {
|
|
border-color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
margin: 24px 0 10px;
|
|
color: var(--text);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* === Lade-/Auswertungsübersicht === */
|
|
.load-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.load-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 14px;
|
|
align-items: start;
|
|
width: 100%;
|
|
}
|
|
|
|
.load-row-title {
|
|
grid-column: 1 / -1;
|
|
width: 100%;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 0 0 2px 0;
|
|
padding-top: 4px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.load-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-lg);
|
|
padding: 16px 18px;
|
|
min-width: 0;
|
|
width: 100%;
|
|
box-shadow: var(--sh-1);
|
|
transition: box-shadow .2s var(--ease), transform .2s var(--ease);
|
|
}
|
|
|
|
.load-card:hover {
|
|
box-shadow: var(--sh-2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.load-card h3 {
|
|
margin: 0 0 4px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.load-num {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.load-detail {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.load-detail div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.load-detail div:last-child { border-bottom: none; }
|
|
|
|
/* === Modal, Form-Elemente & Listen === */
|
|
.modal-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,.35);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--surface);
|
|
padding: 28px;
|
|
border-radius: var(--r-xl);
|
|
max-width: 500px;
|
|
width: 90%;
|
|
max-height: 85vh;
|
|
overflow: auto;
|
|
box-shadow: var(--sh-3);
|
|
}
|
|
|
|
.modal h2 {
|
|
margin-top: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.form-row {
|
|
margin-bottom: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.form-row label {
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* === LP-Aufwand-Maske als Matrix-Tabelle ===
|
|
Zeilen = Leistungsphasen, Spalten = Rollen + "amtierend" (Radio). */
|
|
.lp-matrix {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 6px 0 12px;
|
|
}
|
|
.lp-matrix thead th {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
text-align: left;
|
|
padding: 4px 8px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.lp-matrix th.lp-lph {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 6px 8px;
|
|
white-space: nowrap;
|
|
}
|
|
.lp-matrix td {
|
|
padding: 3px 8px;
|
|
}
|
|
.lp-matrix td input[type=text] {
|
|
width: 64px;
|
|
padding: 4px 7px;
|
|
font-size: 13px;
|
|
}
|
|
.lp-matrix tbody th.lp-lph,
|
|
.lp-matrix tbody td {
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.lp-matrix tbody tr:last-child th.lp-lph,
|
|
.lp-matrix tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.lp-matrix tbody tr:nth-child(even) th.lp-lph,
|
|
.lp-matrix tbody tr:nth-child(even) td {
|
|
background: var(--surface-alt);
|
|
}
|
|
|
|
/* LP-Aufwand- und Neues-Projekt-Modal etwas breiter für die Matrix-Tabelle */
|
|
#lpModal .modal,
|
|
#newProjModal .modal {
|
|
max-width: 640px;
|
|
}
|
|
|
|
.person-list-item,
|
|
.person-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
width: 100%;
|
|
}
|
|
|
|
.person-list-item {
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 4px;
|
|
overflow-x: auto;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.person-card:last-child,
|
|
.person-list-item:last-child { border-bottom: none; }
|
|
|
|
.person-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 4px;
|
|
cursor: pointer;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.person-header:hover { background: var(--surface-sunk); }
|
|
|
|
.person-toggle {
|
|
flex: 0 0 auto;
|
|
font-size: 11px;
|
|
color: var(--text-subtle);
|
|
width: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.person-list-item span.drag-handle,
|
|
.person-header span.drag-handle {
|
|
flex: 0 0 auto;
|
|
color: var(--text-subtle);
|
|
cursor: grab;
|
|
}
|
|
|
|
.person-list-item input[type=text],
|
|
.person-header input[type=text] { flex: 0 0 auto; max-width: 25vw; }
|
|
.person-list-item input[type=text]:nth-of-type(1),
|
|
.person-header input[type=text]:nth-of-type(1) { max-width: 80px; }
|
|
.person-list-item input[type=text]:nth-of-type(2),
|
|
.person-header input[type=text]:nth-of-type(2) { max-width: 180px; }
|
|
|
|
.person-list-item select,
|
|
.person-header select,
|
|
.person-header .role-checkboxes {
|
|
flex: 0 0 auto;
|
|
min-width: 110px;
|
|
}
|
|
|
|
.person-list-item button,
|
|
.person-header button {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* === Hinweise & Hilfsklassen === */
|
|
.legend {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin: 10px 0;
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.legend span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.legend-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.legend-item {
|
|
flex: 0 0 auto;
|
|
padding: 6px 10px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-sm);
|
|
color: var(--text);
|
|
user-select: none;
|
|
transition: opacity .2s var(--ease), background .2s var(--ease);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.legend-item:hover { opacity: .8; }
|
|
|
|
.legend-item.present {
|
|
background: var(--green);
|
|
color: #fff;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.legend-item span {
|
|
font-weight: 600;
|
|
color: inherit;
|
|
}
|
|
|
|
.legend-item.locked-legend-item { opacity: .7; }
|
|
|
|
#boardLegend {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.swatch {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow: auto;
|
|
max-height: 75vh;
|
|
border-radius: var(--r-lg);
|
|
border: 1px solid var(--line-soft);
|
|
box-shadow: var(--sh-1);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.hint {
|
|
color: var(--text-subtle);
|
|
font-size: 12px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.del-proj {
|
|
color: var(--red);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lock-notice button { margin-left: 12px; }
|
|
|
|
.locked-legend-item {
|
|
opacity: .7;
|
|
filter: grayscale(.35);
|
|
}
|
|
|
|
input[type=text].edit-name {
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
font-weight: 600;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
padding: 3px 5px;
|
|
border-radius: var(--r-sm);
|
|
}
|
|
|
|
input[type=text].edit-name:hover { background: rgba(0,0,0,.03); }
|
|
|
|
input[type=text].edit-name:focus {
|
|
background: var(--surface);
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(0,113,227,.18);
|
|
outline: none;
|
|
}
|
|
|
|
/* === Scrollbars (WebKit) === */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(0,0,0,.2);
|
|
border-radius: var(--r-pill);
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); background-clip: content-box; }
|
|
|
|
/* ============================================================
|
|
=== DARK MODE ===
|
|
Automatisch nach Systemeinstellung ODER manuell per
|
|
<html data-theme="dark"> auslösbar.
|
|
============================================================ */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not([data-theme="light"]) { color-scheme: dark; }
|
|
|
|
html:not([data-theme="light"]) {
|
|
--accent: #0a84ff;
|
|
--accent-hover: #2f95ff;
|
|
--accent-active: #0060df;
|
|
--accent-soft: #10263f;
|
|
|
|
--text: #f5f5f7;
|
|
--text-muted: #a1a1a6;
|
|
--text-subtle: #86868b;
|
|
|
|
--bg: #000000;
|
|
--surface: #1c1c1e;
|
|
--surface-alt: #232326;
|
|
--surface-sunk: #2c2c2e;
|
|
|
|
--line: #3a3a3c;
|
|
--line-soft: #2c2c2e;
|
|
|
|
--green: #30d158;
|
|
--amber: #ff9f0a;
|
|
--red: #ff453a;
|
|
|
|
--sh-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
|
|
--sh-2: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
|
|
--sh-3: 0 12px 40px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5);
|
|
}
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
--accent: #0a84ff;
|
|
--accent-hover: #2f95ff;
|
|
--accent-active: #0060df;
|
|
--accent-soft: #10263f;
|
|
|
|
--text: #f5f5f7;
|
|
--text-muted: #a1a1a6;
|
|
--text-subtle: #86868b;
|
|
|
|
--bg: #000000;
|
|
--surface: #1c1c1e;
|
|
--surface-alt: #232326;
|
|
--surface-sunk: #2c2c2e;
|
|
|
|
--line: #3a3a3c;
|
|
--line-soft: #2c2c2e;
|
|
|
|
--green: #30d158;
|
|
--amber: #ff9f0a;
|
|
--red: #ff453a;
|
|
|
|
--sh-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
|
|
--sh-2: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
|
|
--sh-3: 0 12px 40px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5);
|
|
}
|
|
|
|
/* Gemeinsame Dark-Style-Regeln (System oder manuell) */
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not([data-theme="light"]) header {
|
|
background: rgba(28,28,30,.75);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
html:not([data-theme="light"]) .side-menu {
|
|
background: var(--surface);
|
|
border-right-color: var(--line);
|
|
}
|
|
html:not([data-theme="light"]) .side-menu-header,
|
|
html:not([data-theme="light"]) .menu-divider {
|
|
border-color: var(--line);
|
|
}
|
|
html:not([data-theme="light"]) .show-mode-overlay { background: var(--bg); }
|
|
html:not([data-theme="light"]) .show-mode-header {
|
|
background: var(--surface);
|
|
border-bottom-color: var(--line);
|
|
}
|
|
html:not([data-theme="light"]) .show-mode-paused {
|
|
background: var(--surface);
|
|
border-color: var(--line);
|
|
}
|
|
html:not([data-theme="light"]) .theme-toggle-circle {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html:not([data-theme="light"]) .menu-corner-btn {
|
|
background: var(--bg);
|
|
border-right-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html:not([data-theme="light"]) .menu-corner-btn:hover { background: var(--surface-sunk); }
|
|
html:not([data-theme="light"]) .header-logo { filter: brightness(.92); }
|
|
html:not([data-theme="light"]) .dept-tab:hover { background: rgba(255,255,255,.08); }
|
|
html:not([data-theme="light"]) .dept-tab.active { background: var(--surface-sunk); }
|
|
html:not([data-theme="light"]) .tabs { border-bottom: 1px solid var(--line); }
|
|
|
|
html:not([data-theme="light"]) button:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.45); }
|
|
html:not([data-theme="light"]) button.secondary { background: rgba(255,255,255,.10); color: var(--text); }
|
|
html:not([data-theme="light"]) button.secondary:hover { background: rgba(255,255,255,.15); }
|
|
html:not([data-theme="light"]) button.secondary:active { background: rgba(255,255,255,.20); }
|
|
html:not([data-theme="light"]) button.danger { background: #d70015; }
|
|
html:not([data-theme="light"]) button.danger:hover { background: #ff453a; }
|
|
html:not([data-theme="light"]) button.danger:active { background: #a3000f; }
|
|
|
|
html:not([data-theme="light"]) select,
|
|
html:not([data-theme="light"]) input[type=text],
|
|
html:not([data-theme="light"]) input[type=date] {
|
|
background-color: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html:not([data-theme="light"]) select:focus,
|
|
html:not([data-theme="light"]) input[type=text]:focus,
|
|
html:not([data-theme="light"]) input[type=date]:focus {
|
|
box-shadow: 0 0 0 3px rgba(10,132,255,.28);
|
|
}
|
|
html:not([data-theme="light"]) select {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23a1a1a6' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
|
|
}
|
|
html:not([data-theme="light"]) ::placeholder { color: var(--text-subtle); }
|
|
|
|
html:not([data-theme="light"]) th.rot { background: var(--surface); }
|
|
|
|
html:not([data-theme="light"]) .status-edit {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
}
|
|
html:not([data-theme="light"]) .status-edit:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.28); }
|
|
html:not([data-theme="light"]) .status-edit.status-new { color: var(--green); }
|
|
html:not([data-theme="light"]) .status-toolbar {
|
|
background: rgba(44,44,46,.9);
|
|
border-color: var(--line);
|
|
}
|
|
html:not([data-theme="light"]) .status-toolbar button:hover { background: rgba(255,255,255,.10); }
|
|
html:not([data-theme="light"]) .status-toolbar button:active { background: rgba(255,255,255,.16); }
|
|
|
|
html:not([data-theme="light"]) .person-cell.on { background: #1e7a38 !important; color: #fff; }
|
|
html:not([data-theme="light"]) .person-cell.optional { background: #9a6200 !important; color: #fff; }
|
|
html:not([data-theme="light"]) .locked-cell { background: #38383a !important; opacity: .55; }
|
|
html:not([data-theme="light"]) .locked-cell input {
|
|
background: #38383a !important;
|
|
border-color: var(--line) !important;
|
|
color: var(--text-muted) !important;
|
|
}
|
|
html:not([data-theme="light"]) .person-cell.locked-cell.on,
|
|
html:not([data-theme="light"]) .person-cell.locked-cell.optional {
|
|
background: #38383a !important;
|
|
color: var(--text-subtle) !important;
|
|
}
|
|
|
|
html:not([data-theme="light"]) .person-cell.role-planung,
|
|
html:not([data-theme="light"]) .role-planung,
|
|
html:not([data-theme="light"]) .role-planung.rot {
|
|
background: #1b3626;
|
|
background-attachment: scroll;
|
|
color: var(--text);
|
|
}
|
|
html:not([data-theme="light"]) .person-cell.role-projektleitung,
|
|
html:not([data-theme="light"]) .role-projektleitung,
|
|
html:not([data-theme="light"]) .role-projektleitung.rot {
|
|
background: #3d2224;
|
|
background-attachment: scroll;
|
|
color: var(--text);
|
|
}
|
|
html:not([data-theme="light"]) .person-cell.role-bauüberwachung,
|
|
html:not([data-theme="light"]) .role-bauüberwachung,
|
|
html:not([data-theme="light"]) .role-bauüberwachung.rot {
|
|
background: #17313f;
|
|
background-attachment: scroll;
|
|
color: var(--text);
|
|
}
|
|
html:not([data-theme="light"]) th.role-planung,
|
|
html:not([data-theme="light"]) th.role-projektleitung,
|
|
html:not([data-theme="light"]) th.role-bauüberwachung { color: var(--text); }
|
|
|
|
html:not([data-theme="light"]) .lph-cell input {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html:not([data-theme="light"]) .bar { background: #38383a; }
|
|
|
|
html:not([data-theme="light"]) .load-card { border-color: var(--line); }
|
|
html:not([data-theme="light"]) .modal-bg { background: rgba(0,0,0,.6); }
|
|
html:not([data-theme="light"]) .modal { border: 1px solid var(--line); }
|
|
|
|
html:not([data-theme="light"]) .swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
|
|
html:not([data-theme="light"]) .table-wrap { border-color: var(--line); }
|
|
html:not([data-theme="light"]) .del-proj { color: var(--red); }
|
|
html:not([data-theme="light"]) input[type=text].edit-name { border-color: transparent; background: transparent; }
|
|
html:not([data-theme="light"]) input[type=text].edit-name:hover { background: rgba(255,255,255,.06); }
|
|
html:not([data-theme="light"]) input[type=text].edit-name:focus {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(10,132,255,.28);
|
|
}
|
|
html:not([data-theme="light"]) .locked-legend-item { opacity: .6; }
|
|
html:not([data-theme="light"]) .legend-item.present { color: #fff; }
|
|
|
|
html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; }
|
|
html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: content-box; }
|
|
}
|
|
|
|
html[data-theme="dark"] header {
|
|
background: rgba(28,28,30,.75);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
html[data-theme="dark"] .side-menu {
|
|
background: var(--surface);
|
|
border-right-color: var(--line);
|
|
}
|
|
html[data-theme="dark"] .side-menu-header,
|
|
html[data-theme="dark"] .menu-divider {
|
|
border-color: var(--line);
|
|
}
|
|
html[data-theme="dark"] .show-mode-overlay { background: var(--bg); }
|
|
html[data-theme="dark"] .show-mode-header {
|
|
background: var(--surface);
|
|
border-bottom-color: var(--line);
|
|
}
|
|
html[data-theme="dark"] .show-mode-paused {
|
|
background: var(--surface);
|
|
border-color: var(--line);
|
|
}
|
|
html[data-theme="dark"] .theme-toggle-circle {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="dark"] .menu-corner-btn {
|
|
background: var(--bg);
|
|
border-right-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="dark"] .menu-corner-btn:hover { background: var(--surface-sunk); }
|
|
html[data-theme="dark"] .header-logo { filter: brightness(.92); }
|
|
html[data-theme="dark"] .dept-tab:hover { background: rgba(255,255,255,.08); }
|
|
html[data-theme="dark"] .dept-tab.active { background: var(--surface-sunk); }
|
|
html[data-theme="dark"] .tabs { border-bottom: 1px solid var(--line); }
|
|
|
|
html[data-theme="dark"] button:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.45); }
|
|
html[data-theme="dark"] button.secondary { background: rgba(255,255,255,.10); color: var(--text); }
|
|
html[data-theme="dark"] button.secondary:hover { background: rgba(255,255,255,.15); }
|
|
html[data-theme="dark"] button.secondary:active { background: rgba(255,255,255,.20); }
|
|
html[data-theme="dark"] button.danger { background: #d70015; }
|
|
html[data-theme="dark"] button.danger:hover { background: #ff453a; }
|
|
html[data-theme="dark"] button.danger:active { background: #a3000f; }
|
|
|
|
html[data-theme="dark"] select,
|
|
html[data-theme="dark"] input[type=text],
|
|
html[data-theme="dark"] input[type=date] {
|
|
background-color: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="dark"] select:focus,
|
|
html[data-theme="dark"] input[type=text]:focus,
|
|
html[data-theme="dark"] input[type=date]:focus {
|
|
box-shadow: 0 0 0 3px rgba(10,132,255,.28);
|
|
}
|
|
html[data-theme="dark"] select {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23a1a1a6' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
|
|
}
|
|
html[data-theme="dark"] ::placeholder { color: var(--text-subtle); }
|
|
|
|
html[data-theme="dark"] th.rot { background: var(--surface); }
|
|
|
|
html[data-theme="dark"] .status-edit {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
}
|
|
html[data-theme="dark"] .status-edit:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.28); }
|
|
html[data-theme="dark"] .status-edit.status-new { color: var(--green); }
|
|
html[data-theme="dark"] .status-toolbar {
|
|
background: rgba(44,44,46,.9);
|
|
border-color: var(--line);
|
|
}
|
|
html[data-theme="dark"] .status-toolbar button:hover { background: rgba(255,255,255,.10); }
|
|
html[data-theme="dark"] .status-toolbar button:active { background: rgba(255,255,255,.16); }
|
|
|
|
html[data-theme="dark"] .person-cell.on { background: #1e7a38 !important; color: #fff; }
|
|
html[data-theme="dark"] .person-cell.optional { background: #9a6200 !important; color: #fff; }
|
|
html[data-theme="dark"] .locked-cell { background: #38383a !important; opacity: .55; }
|
|
html[data-theme="dark"] .locked-cell input {
|
|
background: #38383a !important;
|
|
border-color: var(--line) !important;
|
|
color: var(--text-muted) !important;
|
|
}
|
|
html[data-theme="dark"] .person-cell.locked-cell.on,
|
|
html[data-theme="dark"] .person-cell.locked-cell.optional {
|
|
background: #38383a !important;
|
|
color: var(--text-subtle) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] .person-cell.role-planung,
|
|
html[data-theme="dark"] .role-planung,
|
|
html[data-theme="dark"] .role-planung.rot {
|
|
background: #1b3626;
|
|
background-attachment: scroll;
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="dark"] .person-cell.role-projektleitung,
|
|
html[data-theme="dark"] .role-projektleitung,
|
|
html[data-theme="dark"] .role-projektleitung.rot {
|
|
background: #3d2224;
|
|
background-attachment: scroll;
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="dark"] .person-cell.role-bauüberwachung,
|
|
html[data-theme="dark"] .role-bauüberwachung,
|
|
html[data-theme="dark"] .role-bauüberwachung.rot {
|
|
background: #17313f;
|
|
background-attachment: scroll;
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="dark"] th.role-planung,
|
|
html[data-theme="dark"] th.role-projektleitung,
|
|
html[data-theme="dark"] th.role-bauüberwachung { color: var(--text); }
|
|
|
|
html[data-theme="dark"] .lph-cell input {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--line);
|
|
color: var(--text);
|
|
}
|
|
html[data-theme="dark"] .bar { background: #38383a; }
|
|
|
|
html[data-theme="dark"] .load-card { border-color: var(--line); }
|
|
html[data-theme="dark"] .modal-bg { background: rgba(0,0,0,.6); }
|
|
html[data-theme="dark"] .modal { border: 1px solid var(--line); }
|
|
|
|
html[data-theme="dark"] .swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
|
|
html[data-theme="dark"] .table-wrap { border-color: var(--line); }
|
|
html[data-theme="dark"] .del-proj { color: var(--red); }
|
|
html[data-theme="dark"] input[type=text].edit-name { border-color: transparent; background: transparent; }
|
|
html[data-theme="dark"] input[type=text].edit-name:hover { background: rgba(255,255,255,.06); }
|
|
html[data-theme="dark"] input[type=text].edit-name:focus {
|
|
background: var(--surface-sunk);
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(10,132,255,.28);
|
|
}
|
|
html[data-theme="dark"] .locked-legend-item { opacity: .6; }
|
|
html[data-theme="dark"] .legend-item.present { color: #fff; }
|
|
|
|
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; }
|
|
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: content-box; }
|
|
|
|
/* === GANTT / Projektplan === */
|
|
.modal-wide {
|
|
max-width: 900px;
|
|
width: 92%;
|
|
}
|
|
|
|
.gantt-container {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-lg);
|
|
padding: 12px 0;
|
|
box-shadow: var(--sh-1);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.gantt-chart {
|
|
width: 100%;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.gantt-row {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 32px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.gantt-row.gantt-header,
|
|
.gantt-row.gantt-days {
|
|
height: 26px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.gantt-timeline {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gantt-row.gantt-project {
|
|
height: 34px;
|
|
}
|
|
|
|
.gantt-row.gantt-project.highlighted {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.gantt-row.gantt-vacation {
|
|
height: 22px;
|
|
background: transparent;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.gantt-label {
|
|
width: 220px;
|
|
flex: 0 0 220px;
|
|
min-width: 220px;
|
|
max-width: 220px;
|
|
height: 100%;
|
|
align-self: stretch;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
border-right: 1px solid var(--line-soft);
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 10;
|
|
background: var(--surface);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.gantt-row.gantt-header .gantt-label,
|
|
.gantt-row.gantt-days .gantt-label {
|
|
background: var(--surface);
|
|
z-index: 15;
|
|
}
|
|
|
|
.gantt-row.gantt-project.highlighted .gantt-label {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.gantt-row.gantt-vacation .gantt-label {
|
|
font-weight: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.gantt-row.gantt-todo .gantt-label {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.gantt-vacation-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--amber);
|
|
}
|
|
|
|
.gantt-month,
|
|
.gantt-day {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-right: 1px solid var(--line-soft);
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
padding: 2px 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.gantt-month {
|
|
background: var(--surface-sunk);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.gantt-day {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gantt-day.weekend {
|
|
background: var(--surface-sunk);
|
|
opacity: .7;
|
|
}
|
|
|
|
.gantt-day.gantt-week {
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
/* Raster-Overlay: liegt über die gesamte Timeline-Breite (rechts der Labels).
|
|
Wochenend-Flächen zeichnen ohne z-index (Zeilen liegen darüber, sind aber
|
|
transparent); die Heute-Linie bekommt z-index, damit sie über den Balken,
|
|
aber unter den sticky Labels liegt. */
|
|
.gantt-grid-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 220px;
|
|
right: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gantt-grid-weekend {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: var(--surface-sunk);
|
|
opacity: .55;
|
|
}
|
|
|
|
.gantt-grid-today {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
border-left: 2px solid var(--red);
|
|
opacity: .7;
|
|
z-index: 9;
|
|
}
|
|
|
|
.gantt-bar {
|
|
position: absolute;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
border-radius: var(--r-sm);
|
|
overflow: hidden;
|
|
box-shadow: var(--sh-1);
|
|
}
|
|
|
|
.gantt-bar.project {
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.gantt-bar .gantt-progress {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,.22);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gantt-bar-label {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 0 8px;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.gantt-bar.vacation {
|
|
top: 4px;
|
|
bottom: 4px;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
rgba(255, 159, 10, .55),
|
|
rgba(255, 159, 10, .55) 6px,
|
|
rgba(255, 159, 10, .35) 6px,
|
|
rgba(255, 159, 10, .35) 12px
|
|
);
|
|
border: 1px solid var(--amber);
|
|
border-radius: var(--r-pill);
|
|
}
|
|
|
|
.gantt-row.gantt-todo { height: 26px; font-size: 11px; }
|
|
.gantt-row.gantt-todo.done { opacity: .55; }
|
|
.gantt-row.gantt-milestone-row { height: 40px; font-size: 11px; background: transparent; }
|
|
.gantt-row.gantt-milestone-row .gantt-milestone { top: 6px; }
|
|
.gantt-row.gantt-milestone-row .gantt-milestone-label { top: 24px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
|
|
.gantt-row.gantt-todo-add {
|
|
height: 34px;
|
|
font-size: 12px;
|
|
background: var(--surface-alt);
|
|
position: relative;
|
|
}
|
|
.gantt-todo-add-sticky {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--surface-alt);
|
|
border-right: 1px solid var(--line-soft);
|
|
height: 100%;
|
|
align-self: stretch;
|
|
box-sizing: border-box;
|
|
}
|
|
.gantt-todo-add-sticky .gantt-label {
|
|
position: static;
|
|
border-right: none;
|
|
background: transparent;
|
|
flex: 0 0 220px;
|
|
width: 220px;
|
|
min-width: 220px;
|
|
max-width: 220px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 12px;
|
|
}
|
|
.gantt-bar.todo {
|
|
top: 5px;
|
|
bottom: 5px;
|
|
background: var(--accent);
|
|
border-radius: var(--r-sm);
|
|
}
|
|
.gantt-bar.todo.done {
|
|
background: var(--green);
|
|
}
|
|
.gantt-bar.todo.critical {
|
|
background: var(--red);
|
|
box-shadow: 0 0 0 2px rgba(215,0,21,.25);
|
|
}
|
|
.gantt-todo-add-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: nowrap;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
flex-shrink: 0;
|
|
padding-right: 8px;
|
|
}
|
|
.gantt-todo-add input[type=text],
|
|
.gantt-todo-add input[type=date] {
|
|
padding: 4px 7px;
|
|
font-size: 12px;
|
|
}
|
|
.gantt-todo-add input[type=text] {
|
|
flex: 0 0 180px;
|
|
width: 180px;
|
|
min-width: 140px;
|
|
}
|
|
.gantt-todo-add input[type=date] {
|
|
flex: 0 0 120px;
|
|
width: 120px;
|
|
min-width: 120px;
|
|
}
|
|
.gantt-todo-add button {
|
|
flex: 0 0 auto;
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
}
|
|
.gantt-todo-add .gantt-timeline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
}
|
|
.gantt-todo-actions {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* === GANTT Abhängigkeiten (Dependencies) === */
|
|
.gantt-dependencies-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 8;
|
|
overflow: visible;
|
|
}
|
|
|
|
.gantt-dep-path {
|
|
fill: none;
|
|
stroke: var(--accent);
|
|
stroke-width: 2.2px;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
opacity: 0.85;
|
|
transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
.gantt-dep-path.conflict {
|
|
stroke: var(--red);
|
|
stroke-dasharray: 5 3;
|
|
}
|
|
|
|
.gantt-dep-path.done {
|
|
stroke: var(--green);
|
|
}
|
|
|
|
.gantt-dep-path.highlight {
|
|
stroke-width: 3.5px;
|
|
opacity: 1;
|
|
filter: drop-shadow(0 0 3px rgba(0, 113, 227, 0.4));
|
|
}
|
|
|
|
.gantt-dep-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
margin-left: 6px;
|
|
max-width: 100px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
border: 1px solid rgba(0, 113, 227, 0.2);
|
|
}
|
|
|
|
.gantt-dep-badge.conflict {
|
|
background: rgba(215, 0, 21, 0.1);
|
|
color: var(--red);
|
|
border-color: rgba(215, 0, 21, 0.2);
|
|
}
|
|
.gantt-todo-actions button {
|
|
padding: 2px 7px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.gantt-milestone {
|
|
position: absolute;
|
|
top: 2px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-bottom: 12px solid var(--red);
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
cursor: grab;
|
|
}
|
|
.gantt-milestone:active { cursor: grabbing; }
|
|
|
|
.gantt-milestone-label {
|
|
position: absolute;
|
|
top: 16px;
|
|
transform: translateX(-50%);
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gantt-bar.project,
|
|
.gantt-bar.vacation { cursor: grab; }
|
|
.gantt-bar.project:active,
|
|
.gantt-bar.vacation:active { cursor: grabbing; }
|
|
|
|
.gantt-resize {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 10px;
|
|
cursor: col-resize;
|
|
z-index: 3;
|
|
}
|
|
.gantt-resize-left { left: 0; }
|
|
.gantt-resize-right { right: 0; }
|
|
.gantt-resize:hover { background: rgba(255,255,255,.25); }
|
|
|
|
.gantt-form {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.gantt-form-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.gantt-form-row input[type=date] { flex: 1 1 140px; }
|
|
.gantt-form-row input[type=text] { flex: 2 1 200px; }
|
|
|
|
.gantt-modal-preview .gantt-chart {
|
|
min-width: auto;
|
|
}
|
|
|
|
/* === Datumsbereich-Picker (Von/Bis in einem Kalenderfenster) === */
|
|
.range-picker {
|
|
position: fixed;
|
|
z-index: 1100;
|
|
width: 288px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-lg);
|
|
box-shadow: var(--sh-3);
|
|
padding: 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.range-picker-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.range-picker-title {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.range-picker-hint {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.range-picker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.range-picker-weekday {
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.range-picker-day {
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
border-radius: var(--r-sm);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.range-picker-day:hover { background: var(--surface-sunk); }
|
|
.range-picker-day.weekend { color: var(--text-subtle); }
|
|
.range-picker-day.today { outline: 1px solid var(--accent); outline-offset: -1px; }
|
|
.range-picker-day.in-range { background: var(--accent-soft); border-radius: 0; }
|
|
.range-picker-day.sel-start,
|
|
.range-picker-day.sel-end {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.range-picker-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Anzeige-Feld, das den Picker öffnet */
|
|
.range-picker-display {
|
|
cursor: pointer;
|
|
background: var(--surface);
|
|
min-width: 170px;
|
|
}
|
|
|
|
.person-absences {
|
|
padding: 8px 8px 8px 40px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
background: var(--surface-alt);
|
|
}
|
|
|
|
.absence-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.absence-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: var(--r-pill);
|
|
padding: 3px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.absence-chip small {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.absence-form {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.absence-form input[type=date] { width: 130px; }
|
|
.absence-form select { min-width: 110px; }
|
|
|
|
/* Dark mode GANTT */
|
|
@media (prefers-color-scheme: dark) {
|
|
html:not([data-theme="light"]) .gantt-container { border-color: var(--line); }
|
|
html:not([data-theme="light"]) .gantt-row { border-color: var(--line); }
|
|
html:not([data-theme="light"]) .gantt-row.gantt-header,
|
|
html:not([data-theme="light"]) .gantt-row.gantt-days { border-color: var(--line); }
|
|
html:not([data-theme="light"]) .gantt-month { background: var(--surface-sunk); }
|
|
html:not([data-theme="light"]) .gantt-day.weekend { background: var(--surface-sunk); }
|
|
html:not([data-theme="light"]) .gantt-row.gantt-project.highlighted { background: var(--accent-soft); }
|
|
html:not([data-theme="light"]) .person-absences { background: var(--surface-sunk); border-color: var(--line); }
|
|
html:not([data-theme="light"]) .absence-chip { background: var(--surface); border-color: var(--line); }
|
|
}
|
|
|
|
html[data-theme="dark"] .gantt-container { border-color: var(--line); }
|
|
html[data-theme="dark"] .gantt-row { border-color: var(--line); }
|
|
html[data-theme="dark"] .gantt-row.gantt-header,
|
|
html[data-theme="dark"] .gantt-row.gantt-days { border-color: var(--line); }
|
|
html[data-theme="dark"] .gantt-month { background: var(--surface-sunk); }
|
|
html[data-theme="dark"] .gantt-day.weekend { background: var(--surface-sunk); }
|
|
html[data-theme="dark"] .gantt-row.gantt-project.highlighted { background: var(--accent-soft); }
|
|
html[data-theme="dark"] .person-absences { background: var(--surface-sunk); border-color: var(--line); }
|
|
html[data-theme="dark"] .absence-chip { background: var(--surface); border-color: var(--line); } |