/* ============================================================ AUFGABEN IM BLATT-LOOK (wie in der nativen App) ------------------------------------------------------------ Die Aufgaben liegen als Blätter im Raster: hochkant im Papier- Format (DIN-A4-Verhältnis 1 : 1,414), heller Papierton, feiner Schatten — dazu ein gelber Klebezettel mit dem Vornamen und einer Büroklammer. Wie viele Blätter nebeneinander liegen, bestimmt der Ansichts- Umschalter: 3 Blätter (view-2col) oder 4 Blätter (view-3col). Am Handy sind es immer 2. Das Blatt behält dabei stets das DIN-A4-Verhältnis; alles darauf skaliert mit seiner Breite — dafür sorgt die Maßeinheit --twk-s (siehe unten). Aktiv nur, wenn die Klasse twk-sheets trägt. ============================================================ */ /* ---------- Raster: Blätter nebeneinander ---------- Vier Blätter erst ab 1024px, darunter drei, am Handy zwei. */ html.twk-sheets .task-grid, html.twk-sheets .pool-task-grid, html.twk-sheets .task-grid.view-list, html.twk-sheets .task-grid.view-1col, html.twk-sheets .task-grid.view-2col, html.twk-sheets .task-grid.view-3col { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px 18px !important; align-items: start; padding-bottom: 18px !important; /* Luft unter der letzten Reihe */ } @media (min-width: 1025px) { html.twk-sheets .task-grid.view-2col, html.twk-sheets .pool-task-grid.view-2col { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 22px 16px !important; } html.twk-sheets .task-grid.view-3col, html.twk-sheets .pool-task-grid.view-3col { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px 14px !important; } } /* ---------- Scrollbare Boxen (ab der fünften Aufgabe) ---------- Hat eine Box mehr als vier Aufgaben, liegt das Raster in einer scrollbaren Hülle (.task-list-container). Ein Scroll-Container schneidet alles ab, was über seine Innenkante ragt – und genau dort stehen Zettel und Büroklammer über (Klammer bis ~1,3 × --twk-s nach oben und ~0,75 × --twk-s nach links, --twk-s höchstens 24px). Die Hülle bekommt deshalb oben und links so viel Luft, dass beide auch beim größten Blatt vollständig zu sehen sind. */ html.twk-sheets .task-list-container { padding: 36px 8px 4px 20px !important; } /* ---------- Maßeinheit des Blattes ---------- --twk-s ist die Grundgröße (entspricht der Schriftgröße des Titels). Alles andere ist ein Vielfaches davon. Wo der Browser Container-Abfragen kennt, wächst sie mit der Blattbreite — dadurch sehen 3er- und 4er-Ansicht gleich aus, nur größer bzw. kleiner. Ohne Container-Abfragen greifen feste Werte. */ html.twk-sheets .task-card-block { --twk-s: 15px; } @media (min-width: 1025px) { html.twk-sheets .task-grid.view-2col .task-card-block, html.twk-sheets .pool-task-grid.view-2col .task-card-block { --twk-s: 13.5px; } html.twk-sheets .task-grid.view-3col .task-card-block, html.twk-sheets .pool-task-grid.view-3col .task-card-block { --twk-s: 12.5px; } } @supports (container-type: inline-size) { html.twk-sheets .task-card-block { container-type: inline-size; /* 7 % der Blattbreite — dasselbe Verhältnis wie im ursprünglichen Entwurf (13,5 px auf 186 px). Die Untergrenze hält die Schrift auch dann lesbar, wenn sechs Blätter in ein schmales Fenster müssen; die Obergrenze verhindert Plakatschrift. */ --twk-s: clamp(13.2px, 7.8cqw, 24px) !important; } } /* ---------- Das Blatt ---------- */ html.twk-sheets .task-card-block { position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; /* DIN-A4 hochkant */ height: auto !important; min-height: 0 !important; width: 100%; max-width: 420px; /* auf sehr breiten Schirmen nicht ins Plakathafte */ justify-self: center; padding: calc(var(--twk-s) * 1.62) calc(var(--twk-s) * 1.05) calc(var(--twk-s) * .9) !important; background: #fdfdfc !important; border: 1px solid rgba(0, 0, 0, .09) !important; border-left: 1px solid rgba(0, 0, 0, .09) !important; /* Farbbalken passt nicht zum Blatt */ border-radius: 2px !important; box-shadow: 0 5px 12px rgba(0, 0, 0, .13), 0 1px 2px rgba(0, 0, 0, .07) !important; overflow: visible !important; /* Zettel + Klammer dürfen überstehen */ transform: none; } html.twk-sheets .task-card-block:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, .17) !important; transform: translateY(-2px); } html.twk-sheets .task-card-block::before, html.twk-sheets .task-card-block::after { display: none !important; } html.dark-mode.twk-sheets .task-card-block { background: #212831 !important; border-color: rgba(255, 255, 255, .09) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, .5) !important; } /* ---------- Klebezettel + Büroklammer ---------- */ html.twk-sheets .twk-note { display: block !important; /* gegen fremde Ausblend-Regeln absichern */ position: absolute; top: calc(var(--twk-s) * -.82); /* ragt über die obere linke Ecke */ left: calc(var(--twk-s) * -.52); z-index: 4; padding: calc(var(--twk-s) * .3) calc(var(--twk-s) * 1.04) calc(var(--twk-s) * .3) calc(var(--twk-s) * 1.48); max-width: 78%; background: linear-gradient(180deg, #ffdf59 0%, #f8c93f 100%); color: #1c1c1e; font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Brush Script MT", cursive; font-size: calc(var(--twk-s) * .96); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: rotate(-5deg); box-shadow: 0 2px 5px rgba(0, 0, 0, .25); } html.twk-sheets .twk-clip { display: block !important; position: absolute; top: calc(var(--twk-s) * -1.41); /* Büroklammer klemmt über der Ecke */ left: calc(var(--twk-s) * -.74); z-index: 5; font-size: calc(var(--twk-s) * 1.41); line-height: 1; color: #3f434b; transform: rotate(24deg); pointer-events: none; } html.dark-mode.twk-sheets .twk-clip { color: #a8aeb8; } /* Aufgaben aus dem Pool: blaugraues Schildchen statt gelbem Namenszettel */ html.twk-sheets .twk-note-pool { background: linear-gradient(180deg, #7e8fa6 0%, #63748c 100%); color: #fff; letter-spacing: .3px; } html.dark-mode.twk-sheets .twk-note-pool { background: linear-gradient(180deg, #5b6b80 0%, #46546a 100%); } html.twk-sheets .twk-clip-pool { color: #4a5769; } html.dark-mode.twk-sheets .twk-clip-pool { color: #9fb0c4; } /* Avatar & Name entfallen – beides steht auf dem Zettel */ html.twk-sheets .task-card-avatar, html.twk-sheets .task-card-avatar-placeholder, html.twk-sheets .task-card-assignee, html.twk-sheets .task-card-footer-name, html.twk-sheets .task-card-footer-separator { display: none !important; } /* ---------- Inhalt des Blattes: fester Aufbau von oben nach unten ---------- 1) Kopf mit Status + Titel 2) Beschreibung, mittig im freien Raum 3) Frist 4) Fortschritt 5) Fußzeile am unteren Blattrand */ html.twk-sheets .task-card-header { display: flex !important; flex-direction: column; gap: 0 !important; margin: 0 !important; padding: 0 !important; flex: 1 1 auto; /* nimmt den freien Raum bis zur Frist */ min-height: 0; overflow: hidden; /* langer Text bleibt im Blatt */ } html.twk-sheets .task-card-body { padding: 0 !important; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; } /* Wrapper um den Titel (Übersetzungsfunktion) auf volle Blattbreite */ html.twk-sheets .task-card-body > .translatable, html.twk-sheets .task-card-body > div { width: 100%; min-width: 0; } /* Statusfähnchen über dem Titel (steht als erstes Kind in der Karte) */ html.twk-sheets .task-card-block > .twk-status, html.twk-sheets .task-card-block .twk-status, html.twk-sheets .task-card-block .task-rev-badge { align-self: flex-start; order: -1; /* immer ganz oben, vor dem Titel */ display: inline-block; margin: 0 0 calc(var(--twk-s) * .44) !important; padding: calc(var(--twk-s) * .15) calc(var(--twk-s) * .52); border-radius: calc(var(--twk-s) * .45); font-size: calc(var(--twk-s) * .78); font-weight: 600; line-height: 1.35; white-space: nowrap; } html.twk-sheets .twk-status-overdue { background: #fdeaea; color: #c02424; } html.twk-sheets .twk-status-new { background: #f3eefe; color: #7c4fd8; } html.twk-sheets .twk-status-progress { background: #fdf3e2; color: #b06a00; } html.twk-sheets .twk-status-revision { background: #e9f1fe; color: #2563c9; } html.twk-sheets .twk-status-done { background: #e6f7f0; color: #0c8a5c; } html.dark-mode.twk-sheets .twk-status-overdue { background: #3d1a1a; color: #e4837f; } html.dark-mode.twk-sheets .twk-status-new { background: #2a2140; color: #b49ae8; } html.dark-mode.twk-sheets .twk-status-progress { background: #3a2d14; color: #d8a353; } html.dark-mode.twk-sheets .twk-status-revision { background: #182a45; color: #7fa8e8; } html.dark-mode.twk-sheets .twk-status-done { background: #123b2d; color: #5ed2a2; } html.twk-sheets .task-card-title { padding-right: 0 !important; /* Platz für den Auslastungskreis entfällt hier */ width: 100%; font-size: var(--twk-s) !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; /* Titel höchstens drei Zeilen */ -webkit-box-orient: vertical; overflow: hidden; } /* Anhang-Symbol oben rechts auf dem Blatt */ html.twk-sheets .twk-attach { position: absolute; top: calc(var(--twk-s) * .6); right: calc(var(--twk-s) * .67); z-index: 4; font-size: calc(var(--twk-s) * .89); color: #64748b; transform: rotate(8deg); pointer-events: none; } html.dark-mode.twk-sheets .twk-attach { color: #94a3b8; } /* Außerhalb des Blatt-Looks nicht anzeigen (Markup ist immer da) */ html:not(.twk-sheets) .twk-attach { display: none !important; } /* Beschreibung: sitzt mittig im freien Raum zwischen Titel und Frist. Der gleiche Abstand oben und unten hält jedes Blatt ruhig — egal wie lang Titel oder Beschreibung sind. */ html.twk-sheets .task-card-desc { display: -webkit-box !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin: auto 0 !important; /* gleicher Abstand oben wie unten */ padding: calc(var(--twk-s) * .74) 0 !important; font-size: calc(var(--twk-s) * .85) !important; line-height: 1.45 !important; color: #6b7280 !important; } html.dark-mode.twk-sheets .task-card-desc { color: #8696a0 !important; } /* Außerhalb des Blatt-Looks bleibt die Beschreibung unsichtbar (Markup ist immer da) */ html:not(.twk-sheets) .task-card-desc { display: none !important; } /* Frist: genau eine Zeile über dem Fortschrittsbalken (Skript hebt sie dorthin) */ html.twk-sheets .task-sheet-deadline { flex: 0 0 auto; /* sitzt fest über dem Balken */ margin-top: 0 !important; margin-bottom: calc(var(--twk-s) * .37) !important; display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--twk-s) * .3) calc(var(--twk-s) * .44); font-size: calc(var(--twk-s) * .85) !important; line-height: 1.3 !important; } html.twk-sheets .task-sheet-deadline .task-card-deadline { display: flex; align-items: center; gap: calc(var(--twk-s) * .37); font-size: calc(var(--twk-s) * .85) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.twk-sheets .task-sheet-deadline .task-overdue-badge { font-size: calc(var(--twk-s) * .74) !important; } /* Der Balken folgt direkt darunter, ohne eigenen Abstand nach oben */ html.twk-sheets .task-sheet-deadline + .task-progress-container { margin-top: 0 !important; padding-top: 0 !important; } /* Fortschritt und Fußzeile sitzen unten am Blattrand. Der Bestand rückt sie um die Avatarbreite ein — die gibt es hier nicht. */ html.twk-sheets .task-progress-container { flex: 0 0 auto; margin: 0 !important; padding: 0 !important; } html.twk-sheets .task-progress-container::before { display: none !important; } html.twk-sheets .task-card-footer { flex: 0 0 auto; margin: calc(var(--twk-s) * .59) 0 0 !important; padding-top: calc(var(--twk-s) * .59) !important; border-top: 1px dashed rgba(0, 0, 0, .12); font-size: calc(var(--twk-s) * .81) !important; flex-wrap: wrap; gap: calc(var(--twk-s) * .3) calc(var(--twk-s) * .59); } html.twk-sheets .task-progress-container + .task-card-footer { margin-top: calc(var(--twk-s) * .44) !important; } html.dark-mode.twk-sheets .task-card-footer { border-top-color: rgba(255, 255, 255, .14); } /* Auslastungs-Kreis stört auf dem schmalen Blatt */ html.twk-sheets .task-card-block .task-card-workload, html.twk-sheets .task-card-block .workload-circle, html.twk-sheets .task-card-block .workload-circle-wrapper { display: none !important; } /* Der Stift-Knopf rückt in die untere Ecke */ html.twk-sheets .task-card-edit-btn { position: absolute !important; right: calc(var(--twk-s) * .44); bottom: calc(var(--twk-s) * .44); z-index: 3; font-size: calc(var(--twk-s) * .85); } /* ---------- Fortschritt: Balken und Schieberegler ---------- Beide sind gleich schlank und gleich rund; der Schieberegler zeigt den erreichten Anteil in der Spur an (--twk-p setzt task-sheets.js). */ html.twk-sheets .task-progress-bar { display: flex !important; align-items: center; gap: calc(var(--twk-s) * .44); width: 100%; min-width: 0; } /* Nur-Lese-Balken */ html.twk-sheets .task-progress-track { flex: 1 1 auto; min-width: 0; height: calc(var(--twk-s) * .44) !important; border-radius: 999px !important; background: rgba(0, 0, 0, .09) !important; overflow: hidden; } html.twk-sheets .task-progress-fill { height: 100% !important; border-radius: 999px !important; } html.dark-mode.twk-sheets .task-progress-track { background: rgba(255, 255, 255, .14) !important; } /* Schieberegler (nur für die zuständige Person) */ html.twk-sheets .task-progress-slider { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100% !important; min-width: 0; max-width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; height: calc(var(--twk-s) * .44) !important; border-radius: 999px !important; background: linear-gradient(90deg, #6486aa 0 var(--twk-p, 0%), rgba(0, 0, 0, .09) var(--twk-p, 0%) 100%) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08) !important; cursor: pointer; outline: none; } html.dark-mode.twk-sheets .task-progress-slider { background: linear-gradient(90deg, #7ea6cf 0 var(--twk-p, 0%), rgba(255, 255, 255, .16) var(--twk-p, 0%) 100%) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35) !important; } html.twk-sheets .task-progress-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: calc(var(--twk-s) * .96); height: calc(var(--twk-s) * .96); border-radius: 50%; background: #fff !important; border: calc(var(--twk-s) * .18) solid #6486aa; box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important; transition: transform .15s ease; } html.twk-sheets .task-progress-slider::-moz-range-thumb { width: calc(var(--twk-s) * .96); height: calc(var(--twk-s) * .96); border-radius: 50%; background: #fff !important; border: calc(var(--twk-s) * .18) solid #6486aa; box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important; } html.twk-sheets .task-progress-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } html.twk-sheets .task-progress-slider::-webkit-slider-thumb:active { transform: scale(1.05); cursor: grabbing; } html.dark-mode.twk-sheets .task-progress-slider::-webkit-slider-thumb { background: #2b323c !important; border-color: #7ea6cf; } html.dark-mode.twk-sheets .task-progress-slider::-moz-range-thumb { background: #2b323c !important; border-color: #7ea6cf; } html.twk-sheets .task-progress-percent { flex: 0 0 auto; font-size: calc(var(--twk-s) * .78) !important; min-width: calc(var(--twk-s) * 2.3); text-align: right; white-space: nowrap; } /* Fußzeilen-Hinweis („Klicken zum Verwalten") klein halten */ html.twk-sheets .task-card-footer .task-card-footer-hint, html.twk-sheets .task-card-footer > span:last-child { font-size: calc(var(--twk-s) * .78) !important; } /* ---------- Die Umschalter zeigen im Blatt-Look 4, 5 oder 6 Blätter ---------- view-list = 4, view-2col = 5, view-3col = 6 (siehe Raster oben). Die Chips im Bereichskopf entstehen an drei Stellen im Code (dashboard.php, get_zone_content.php und im Skript für Benutzer-Boxen). Statt alle drei zu ändern, wird das Spalten-Symbol hier ausgeblendet und durch die Zahl ersetzt — das greift überall. */ html.twk-sheets .section-layout-btn[data-layout="list"] > i, html.twk-sheets .section-layout-btn[data-layout="2col"] > i, html.twk-sheets .section-layout-btn[data-layout="3col"] > i { display: none !important; } html.twk-sheets .section-layout-btn[data-layout="list"]::after { content: "4"; } html.twk-sheets .section-layout-btn[data-layout="2col"]::after { content: "5"; } html.twk-sheets .section-layout-btn[data-layout="3col"]::after { content: "6"; } html.twk-sheets .section-layout-btn[data-layout="list"]::after, html.twk-sheets .section-layout-btn[data-layout="2col"]::after, html.twk-sheets .section-layout-btn[data-layout="3col"]::after { font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* ---------- Mittlere Bildschirme: immer drei Blätter ---------- */ @media (min-width: 701px) and (max-width: 1024px) { html.twk-sheets .task-grid, html.twk-sheets .pool-task-grid, html.twk-sheets .task-grid.view-list, html.twk-sheets .task-grid.view-1col, html.twk-sheets .task-grid.view-2col, html.twk-sheets .task-grid.view-3col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ---------- Kleine Bildschirme: zwei Blätter nebeneinander ---------- */ @media (max-width: 700px) { html.twk-sheets .task-grid, html.twk-sheets .pool-task-grid, html.twk-sheets .task-grid.view-list, html.twk-sheets .task-grid.view-1col, html.twk-sheets .task-grid.view-2col, html.twk-sheets .task-grid.view-3col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 14px !important; padding-bottom: 14px !important; } html.twk-sheets .task-card-block { --twk-s: 12px; } /* kleinere Blätter → weniger Luft nötig */ html.twk-sheets .task-list-container { padding: 24px 6px 4px 14px !important; } }