/* ProcPlan — Kanban-Design. * * Themes via `theme-bright-active` class auf . * Alle Farben in CSS-Custom-Properties → /custom/custom.css kann überschreiben. */ :root { /* Dark theme (default) — Werte aus der ProcPlan-Referenzpalette (DarkNeutral/Blue/Red/Green) */ --bg: #101214; --bg-elev: #161a1d; --bg-card: #282e33; --border: #2c333a; --text: #dee4ea; --text-dim: #738496; --accent: #579dff; --accent-hover: #388bff; --danger: #f87168; --ok: #4bce97; --shadow: rgba(3,4,4,0.50); /* Liste & Karte (dark) */ --list-bg: #22272b; --list-title: #b6c2cf; --card-bg: #2c333a; --card-bg-hover: #38414a; --card-title: #b6c2cf; --badge-bg: #1d2125; --header-h: 56px; --gap: 8px; --radius: 10px; --tap: 44px; color-scheme: dark; } html.theme-bright-active { --bg: #f7f8f9; --bg-elev: #ffffff; --bg-card: #ffffff; --border: #dcdfe4; --text: #091e42; --text-dim: #626f86; --accent: #0c66e4; --accent-hover: #0055cc; --danger: #c9372c; --shadow: rgba(9,30,66,0.13); /* Liste & Karte (bright) */ --list-bg: #f1f2f4; --list-title: #091e42; --card-bg: #ffffff; --card-bg-hover: #f1f2f4; --card-title: #172b4d; --badge-bg: #f1f2f4; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } html { -webkit-text-size-adjust: 100%; /* Verhindert, dass das Dokument selbst scrollt (App-Verhalten) */ overflow: hidden; overscroll-behavior: none; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.4; overscroll-behavior: none; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } body.ka-loading > .ka-screen { visibility: hidden; } .ka-screen { min-height: 100%; } [hidden] { display: none !important; } /* ───── Login ───── */ #login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 24px; } .ka-login-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; width: 100%; max-width: 360px; box-shadow: 0 8px 24px var(--shadow); } .ka-login-card h1 { font-size: 1.5rem; margin: 0 0 16px; text-align: center; } .ka-login-card form, .ka-login-card #totp-step { display: flex; flex-direction: column; gap: 14px; } .ka-login-card label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--text-dim); } .ka-login-card input { height: var(--tap); padding: 0 12px; font-size: 1rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); -webkit-appearance: none; } .ka-login-card input:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .ka-login-card button[type=submit], .ka-login-card #totp-submit, .ka-login-card #totp-back { height: var(--tap); border: none; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s ease; } .ka-totp-actions #totp-submit, .ka-totp-actions #totp-back { flex: 1; } .ka-login-card button[type=submit]:disabled, .ka-login-card #totp-submit:disabled, .ka-login-card #totp-back:disabled { opacity: .5; cursor: wait; } .ka-totp-actions { display: flex; gap: 8px; } .ka-error { color: var(--danger); font-size: .9rem; margin: 0; } /* ───── App-Shell ───── */ .ka-header { position: sticky; top: 0; z-index: 10; height: var(--header-h); background: var(--bg-elev); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 12px; } .ka-header h1 { font-size: 1.1rem; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ka-icon-btn { width: var(--tap); height: var(--tap); background: transparent; color: var(--text); border: none; border-radius: var(--radius); cursor: pointer; font-size: 1.2rem; } .ka-icon-btn--danger { color: var(--danger); } #app-main { padding: 12px; min-height: calc(100vh - var(--header-h)); } /* Board-view erweitert app-main auf volle Höhe ohne extra padding */ #app-main.ka-board-active { padding: 8px 8px 0 8px; } /* ───── Boards-Liste ───── */ .ka-boards { display: flex; flex-direction: column; gap: var(--gap); } .ka-boards-group { display: flex; flex-direction: column; gap: var(--gap); } @media (min-width: 600px) { /* Desktop: bis zu 3 Board-Kacheln pro Zeile, Liste auf 960px begrenzt */ .ka-boards { max-width: 960px; margin: 0 auto; } .ka-boards-group { flex-direction: row; flex-wrap: wrap; } .ka-board-tile-row { flex: 0 1 calc((100% - 2 * var(--gap)) / 3); max-width: calc((100% - 2 * var(--gap)) / 3); } } .ka-boards-section-label { font-size: .75rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 4px 4px 0; } .ka-boards-section-label + .ka-boards-group { margin-top: 2px; } .ka-board-tile-row { display: block; } .ka-board-tile { border-radius: 12px; min-height: 96px; display: flex; flex-direction: row; align-items: stretch; cursor: pointer; transition: transform .1s ease, box-shadow .15s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); position: relative; overflow: hidden; } .ka-board-tile:active { transform: scale(.98); } .ka-board-tile .ka-title { font-weight: 700; font-size: 1rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .ka-board-tile .ka-meta { color: rgba(255,255,255,.75); font-size: .8rem; } .ka-board-tile.ka-add { align-items: center; justify-content: center; padding: 16px; background: var(--bg-elev); border: 2px dashed var(--border); color: var(--text-dim); box-shadow: none; } .ka-board-tile.ka-add .ka-plus { font-size: 1.6rem; } .ka-board-drag-handle { display: flex; align-items: center; justify-content: center; width: 36px; flex-shrink: 0; cursor: grab; opacity: .55; padding: 0 2px; color: #fff; } .ka-board-drag-handle:active { cursor: grabbing; opacity: .8; } .ka-board-drag-handle .ka-icon { width: 16px; height: 16px; } .ka-board-tile-content { flex: 1; min-width: 0; padding: 16px 16px 16px 0; display: flex; flex-direction: column; gap: 8px; } /* ───── Board-Toolbar ───── */ .ka-board-toolbar { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; } .ka-board-toolbar .ka-btn { font-size: .85rem; height: 32px; padding: 0 10px; } /* ───── Board-View (Kanban) ───── */ .ka-board-view { display: flex; gap: var(--gap); align-items: flex-start; overflow-x: auto; overflow-y: hidden; padding-bottom: 16px; min-height: calc(100vh - var(--header-h) - 24px); -webkit-overflow-scrolling: touch; } /* ───── Liste (Spalte) ───── */ .ka-list { flex: 0 0 272px; min-width: 272px; background: var(--list-bg); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 32px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); position: relative; overflow: hidden; } /* Listenfarbe: wird als Hintergrundfarbe per Inline-Style gesetzt */ .ka-list-head { padding: 10px 8px 8px 12px; display: flex; align-items: flex-start; gap: 4px; position: sticky; top: 0; z-index: 1; background: var(--list-bg); border-radius: 12px 12px 0 0; } .ka-list-head .ka-title { font-weight: 700; font-size: 14px; flex: 1; color: var(--list-title); word-break: break-word; line-height: 1.3; padding: 2px 4px; margin: -2px -4px; border-radius: 4px; } .ka-list-head .ka-title-input { flex: 1; font-weight: 700; font-size: 14px; background: var(--bg-elev); color: var(--list-title); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; font-family: inherit; } .ka-list-head .ka-list-actions { display: flex; gap: 2px; flex-shrink: 0; } .ka-list-menu-btn { width: 28px; height: 28px; padding: 0; background: transparent; border: none; border-radius: 4px; color: var(--text-dim); cursor: pointer; font-size: 1.1rem; line-height: 1; } .ka-list-body { padding: 4px 4px 4px 4px; flex: 1 1 auto; overflow-y: auto; min-height: 40px; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; } .ka-list-body::-webkit-scrollbar { width: 6px; } .ka-list-body::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 3px; } .ka-list-foot { padding: 4px; display: flex; align-items: center; } /* ───── Karte (Vorderseite) ───── */ .ka-card { background: var(--card-bg); border-radius: 8px; box-shadow: 0 1px 2px rgba(9,30,66,0.2); cursor: pointer; transition: box-shadow .12s ease, background .12s ease; overflow: hidden; position: relative; touch-action: pan-y; flex-shrink: 0; } /* Cover */ .ka-card-cover { width: 100%; height: 112px; background-size: cover; background-position: center; } /* Labels */ .ka-card-labels { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 0; } .ka-label { display: inline-block; height: 8px; min-width: 40px; max-width: 96px; border-radius: 4px; cursor: pointer; transition: filter .12s; font-size: 0; overflow: hidden; /* text hidden until expanded */ } /* Expanded: triggered by body.ka-labels-expanded (card preview) or .ka-label-expanded class (card modal — always expanded). */ body.ka-labels-expanded .ka-label, .ka-label.ka-label-expanded { height: 20px; line-height: 20px; padding: 0 8px; min-width: 0; max-width: none; font-size: 11px; font-weight: 700; white-space: nowrap; /* color is set via inline style (text_color) */ } /* Titel */ .ka-card-title { padding: 6px 8px; font-size: 14px; font-weight: 500; color: var(--card-title); white-space: pre-wrap; word-break: break-word; line-height: 1.4; } .ka-card-title:only-child { padding-top: 10px; } /* Badges */ .ka-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; } .ka-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--text-dim); background: var(--badge-bg); border-radius: 4px; padding: 2px 6px; line-height: 1.5; min-height: 20px; box-sizing: border-box; } /* Fälligkeitsstatus */ .ka-badge-due.ka-due-done { background: #164b35; color: #4bce97; } .ka-badge-due.ka-due-soon { background: #332e1b; color: #f5cd47; } .ka-badge-due.ka-due-overdue { background: #381916; color: #f87168; } html.theme-bright-active .ka-badge-due.ka-due-done { background: #dcfff1; color: #216e4e; } html.theme-bright-active .ka-badge-due.ka-due-soon { background: #fff7d6; color: #7f5f01; } html.theme-bright-active .ka-badge-due.ka-due-overdue { background: #ffeceb; color: #ae2e24; } /* Badge-Icon (Kalender) und Custom-Field-Badge */ .ka-badge-icon { display: inline-flex; align-items: center; font-size: 0.85em; } .ka-badge-cf { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Drag-Handle (nur Mobile sichtbar, per media query) */ .ka-card-drag-handle { display: none; } /* Schnell-Bearbeiten-Button (hover) */ .ka-card-edit-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 24px; text-align: center; color: var(--text-dim); opacity: 0; transition: opacity .12s; z-index: 1; } /* Karte-Hinzufügen: Fake-Karte + Actions */ .ka-add-card-form { padding: 0 4px 4px; } .ka-add-card-textarea { width: 100%; min-height: 64px; resize: none; background: var(--card-bg); color: var(--card-title); border: 2px solid var(--accent); border-radius: 8px; padding: 8px; font-size: 14px; font-family: inherit; box-shadow: 0 2px 8px rgba(9,30,66,0.25); } .ka-add-card-textarea:focus { outline: none; } .ka-add-card-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; } /* Eingabefeld in der Fake-Karte — Optik wie ka-card-title */ .ka-add-card-input { display: block; width: 100%; background: transparent; border: none; outline: none; color: var(--card-title); font-size: 14px; font-family: inherit; padding: 6px 8px; line-height: 1.4; cursor: text; } /* Accent-Border während der Eingabe */ .ka-card--adding { border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(9,30,66,0.25); cursor: default; } /* Pending: gedimmt + Spinner sichtbar */ .ka-card--pending { opacity: 0.55; } .ka-add-card-spinner { display: none; width: 14px; height: 14px; border: 2px solid var(--text-dim); border-top-color: var(--accent); border-radius: 50%; animation: ka-card-spin 0.65s linear infinite; margin: 0 8px 7px auto; } .ka-card--pending .ka-add-card-spinner { display: block; } @keyframes ka-card-spin { to { transform: rotate(360deg); } } .ka-add-card-btn { width: 100%; padding: 8px 10px; background: transparent; color: var(--text-dim); border: none; border-radius: 8px; text-align: left; cursor: pointer; font-size: 13px; transition: background .12s, color .12s; } .ka-add-list-tile { flex: 0 0 272px; min-width: 272px; display: flex; align-items: flex-start; padding-top: 0; } .ka-add-list-btn { width: 100%; padding: 10px 14px; background: rgba(255,255,255,.15); color: #fff; border: none; border-radius: 12px; text-align: left; cursor: pointer; font-size: 14px; font-weight: 500; transition: background .12s; backdrop-filter: blur(4px); } html.theme-bright-active .ka-add-list-btn { background: rgba(0,0,0,.12); color: var(--text); } /* ───── Generisches Modal (immer zentriert, bei Überlänge oben verankert + scrollbar) ───── */ .ka-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; z-index: 9100; overflow-y: auto; padding: 24px 12px; } .ka-modal { background: var(--bg-elev); color: var(--text); border-radius: 16px; width: 100%; max-width: 560px; padding: 16px; box-shadow: 0 8px 24px var(--shadow); margin: auto 0; flex-shrink: 0; } .ka-modal .ka-panel-overlay-title { margin-bottom: 12px; } .ka-modal .ka-panel-overlay-title h2 { margin: 0; font-size: 1.1rem; } .ka-modal textarea, .ka-modal input[type=text], .ka-modal input[type=date] { width: 100%; min-height: 80px; padding: 10px; font-size: 1rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; font-family: inherit; } .ka-modal input[type=text], .ka-modal input[type=date] { min-height: var(--tap); } .ka-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } /* ───── Buttons ───── */ .ka-btn { height: var(--tap); padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); font-size: .95rem; cursor: pointer; transition: background .12s; } .ka-btn.ka-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .ka-btn.ka-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .ka-btn.ka-small { height: 32px; padding: 0 10px; font-size: .85rem; } /* ───── Toast ───── */ .ka-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; box-shadow: 0 8px 24px var(--shadow); width: max-content; max-width: min(380px, 90vw); z-index: 9500; display: flex; align-items: center; gap: 12px; } .ka-toast-action { background: none; border: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0; flex-shrink: 0; } /* ───── Empty State ───── */ .ka-empty { text-align: center; color: var(--text-dim); padding: 32px 16px; } /* ───── Drag-and-Drop ───── */ .ka-card.ka-dragging { opacity: .35; } .ka-drag-ghost { position: fixed; pointer-events: none; z-index: 500; background: var(--card-bg); border-radius: 8px; box-shadow: 0 12px 32px var(--shadow); transform: rotate(1deg); overflow: hidden; } .ka-drop-placeholder { background: rgba(88,130,255,.12); border: 2px dashed var(--accent); border-radius: 8px; } body.ka-dragging-body { cursor: grabbing; user-select: none; -webkit-user-select: none; } /* ───── Karten-Detail-Modal (2-Spalten) ───── */ .ka-cm-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 100; overflow-y: auto; padding: 24px 12px; } .ka-card-modal { background: var(--bg-elev); border-radius: 12px; width: 100%; max-width: 768px; margin: auto; box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: clip; position: relative; } @media (min-width: 640px) { /* Desktop: breiteres Karten-Detailmodal */ .ka-card-modal { max-width: 960px; } /* Desktop: etwas größere Schrift im Karten-Detailmodal */ .ka-card-modal .ka-cm-title { font-size: 21px; } .ka-card-modal .ka-cm-breadcrumb { font-size: 13px; } .ka-card-modal .ka-cm-section-title { font-size: 15px; } .ka-card-modal .ka-cm-desc-placeholder, .ka-card-modal .ka-cm-desc-textarea, .ka-card-modal .ka-markdown { font-size: 15px; } .ka-card-modal .ka-due-chip { font-size: 14px; } .ka-card-modal .ka-cm-card-labels .ka-label-expanded { font-size: 13px; } .ka-card-modal .ka-cm-action-btn, .ka-card-modal .ka-cm-special-btn { font-size: 14px; } .ka-card-modal .ka-checklist-title { font-size: 12px; } .ka-card-modal .ka-cl-item-text { font-size: 15px; } .ka-card-modal .ka-cl-item-due, .ka-card-modal .ka-cl-item-user { font-size: 12px; } .ka-card-modal .ka-comment-body { font-size: 14px; } .ka-card-modal .ka-comment-meta { font-size: 12px; } .ka-card-modal .ka-activity-item { font-size: 13px; } .ka-card-modal .ka-attachment-name, .ka-card-modal .ka-url-label { font-size: 14px; } .ka-card-modal .ka-cf-card-key { font-size: .95rem; } .ka-card-modal .ka-cf-card-row input[type=text], .ka-card-modal .ka-cf-card-row input[type=number], .ka-card-modal .ka-cf-card-row select, .ka-card-modal .ka-cf-card-row textarea { font-size: 1rem; } } /* Cover-Bereich */ .ka-cm-cover { width: 100%; height: 168px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; } .ka-cm-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; z-index: 2; } /* Modal-Kopf */ .ka-cm-header { padding: 16px 48px 0 16px; position: relative; } .ka-cm-title-wrap { width: 100%; } .ka-cm-title { width: 100%; font-size: 20px; font-weight: 600; background: transparent; border: none; color: var(--text); font-family: inherit; padding: 4px 6px; border-radius: 4px; line-height: 1.4; -webkit-appearance: none; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ka-cm-title:focus { outline: none; background: var(--bg); box-shadow: 0 0 0 2px var(--accent); text-overflow: clip; overflow: auto; } .ka-cm-breadcrumb { font-size: 12px; color: var(--text-dim); margin: 2px 0 0 8px; display: flex; align-items: center; gap: 4px; } /* Zweispaltiger Body */ .ka-cm-body { display: flex; gap: 0; padding: 12px 16px 16px; } .ka-cm-main { flex: 1; min-width: 0; padding-right: 16px; } .ka-cm-sidebar { width: 212px; flex-shrink: 0; } /* Bereits in den Favoriten angezeigte Buttons nicht doppelt in Hinzufügen/Aktionen anzeigen */ .ka-cm-sidebar .ka-cm-fav-duplicate { display: none; } @media (max-width: 639px) { .ka-cm-body { flex-direction: column; } .ka-cm-main { padding-right: 0; } .ka-cm-sidebar { width: 100%; margin-top: 16px; } } /* Kommentare und Aktivitäten — unterhalb von Body (nach Sidebar auf Mobile) */ .ka-cm-bottom { padding: 0 16px 16px; } /* ───── Favoriten (Board-Einstellung "Karteninteraktionen") ───── */ .ka-cm-favorites { margin-bottom: 16px; } .ka-cm-favorites h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 0 0 8px; } .ka-cm-favorites-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ka-cm-favorites-list .ka-cm-action-btn { width: 32px; height: 32px; padding: 0; margin-bottom: 0; justify-content: center; min-height: 0; } .ka-cm-favorites-list .ka-cm-action-btn > span:not(.ka-btn-icon) { display: none; } .ka-cm-favorites-list .ka-cm-action-btn .ka-btn-icon { width: auto; } @media (min-width: 640px) { /* 1/3 größer als die Basisgröße (32px / 14px Icon) — nur Desktop */ .ka-cm-favorites-list .ka-cm-action-btn { width: 43px; height: 43px; } .ka-cm-favorites-list .ka-cm-action-btn .ka-icon { width: 19px; height: 19px; } } @media (max-width: 639px) { .ka-cm-favorites-list { flex-direction: row; } .ka-cm-favorites-list .ka-cm-action-btn { width: 64px; height: 64px; min-height: 0; } .ka-cm-favorites-list .ka-cm-action-btn .ka-icon { width: 28px; height: 28px; } } /* ───── Mobile: Slide-In-Leiste (Kommentar-Schnelleingabe + Quick Actions) ───── */ .ka-cm-mobile-bar { display: none; } @media (max-width: 599px) { /* Offset, damit die fixe Leiste beim Herunterscrollen keinen Inhalt verdeckt */ .ka-cm-bottom { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .ka-cm-mobile-bar { display: flex; align-items: flex-end; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; background: var(--bg-elev); border-top: 1px solid var(--border); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(0,0,0,.25); } } .ka-cm-mobile-comment-input { flex: 1; min-width: 0; height: var(--tap); max-height: var(--tap); padding: 8px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; font-family: inherit; line-height: 1.4; -webkit-appearance: none; resize: none; overflow-y: auto; } .ka-cm-mobile-comment-input:focus { outline: none; border-color: var(--accent); } .ka-cm-mobile-icon-btn { flex-shrink: 0; width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border: none; border-radius: 50%; cursor: pointer; } .ka-cm-mobile-icon-btn:disabled { opacity: .5; cursor: wait; } .ka-cm-mobile-quick-btn { background: var(--bg-card); color: var(--text); } .ka-cm-mobile-icon-btn .ka-icon { font-size: 1.35rem; } /* ───── Quick-Actions-Menü (Panel-Overlay) ───── */ .ka-quick-actions-list { display: flex; flex-direction: column; gap: 4px; } .ka-quick-actions-item { display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 6px; background: none; border: none; color: var(--text); font-size: 14px; cursor: pointer; } .ka-quick-actions-item .ka-btn-icon { display: flex; align-items: center; color: var(--text-dim); flex-shrink: 0; } /* Meta-Zeile (Labels + Datum) */ .ka-cm-meta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } .ka-cm-meta-block { min-width: 80px; } .ka-cm-meta-block h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 0 0 6px; } .ka-cm-card-labels { display: flex; flex-wrap: wrap; gap: 4px; } .ka-cm-card-labels .ka-label { height: 28px; border-radius: 4px; cursor: pointer; } .ka-cm-card-labels .ka-label.ka-label-expanded { height: 28px; line-height: 28px; padding: 0 10px; font-size: 12px; } /* Fälligkeitsdatum-Chip */ .ka-due-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); transition: background .12s; } /* ───── Apple-style Toggle (alle input[type=checkbox]) ───── */ input[type=checkbox] { -webkit-appearance: none; appearance: none; position: relative; display: inline-block; width: 36px; height: 20px; border-radius: 10px; background: var(--border); cursor: pointer; transition: background .22s ease; flex-shrink: 0; vertical-align: middle; margin: 0; border: none; } input[type=checkbox]::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .22s ease; box-shadow: 0 1px 4px rgba(0,0,0,.35); } input[type=checkbox]:checked { background: var(--accent); } input[type=checkbox]:checked::after { transform: translateX(16px); } input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Größere Toggles für Einstellungskontexte */ .ka-bg-pattern-label input[type=checkbox], .ka-cf-toggle-label input[type=checkbox], .ka-cover-bg-toggle input[type=checkbox] { width: 44px; height: 26px; border-radius: 13px; } .ka-bg-pattern-label input[type=checkbox]::after, .ka-cf-toggle-label input[type=checkbox]::after, .ka-cover-bg-toggle input[type=checkbox]::after { width: 22px; height: 22px; top: 50%; transform: translateY(-50%); } .ka-bg-pattern-label input[type=checkbox]:checked::after, .ka-cf-toggle-label input[type=checkbox]:checked::after, .ka-cover-bg-toggle input[type=checkbox]:checked::after { transform: translateX(18px) translateY(-50%); } /* Checkbox im Due-Chip: klassische Checkbox statt Apple-Toggle */ .ka-due-chip input[type=checkbox] { width: 15px; height: 15px; border-radius: 3px; background: transparent; border: 1.5px solid currentColor; cursor: pointer; flex-shrink: 0; transition: background .12s, border-color .12s; } .ka-due-chip input[type=checkbox]::after { width: 4px; height: 8px; border-radius: 0; background: transparent; border-right: 2px solid #fff; border-bottom: 2px solid #fff; box-shadow: none; top: 1px; left: 4px; transform: rotate(45deg); transition: opacity .12s; opacity: 0; } .ka-due-chip input[type=checkbox]:checked { background: currentColor; border-color: currentColor; } .ka-due-chip input[type=checkbox]:checked::after { opacity: 1; transform: rotate(45deg); } .ka-due-text { cursor: pointer; } .ka-due-chip.ka-due-done { background: #164b35; color: #4bce97; border-color: #164b35; } .ka-due-chip.ka-due-soon { background: #332e1b; color: #f5cd47; border-color: #332e1b; } .ka-due-chip.ka-due-overdue { background: #381916; color: #f87168; border-color: #381916; } html.theme-bright-active .ka-due-chip.ka-due-done { background: #dcfff1; color: #216e4e; border-color: #baf3db; } html.theme-bright-active .ka-due-chip.ka-due-soon { background: #fff7d6; color: #7f5f01; border-color: #f8e6a0; } html.theme-bright-active .ka-due-chip.ka-due-overdue { background: #ffeceb; color: #ae2e24; border-color: #ffd5d2; } /* Abschnitte im Modal */ /* Archiviert-Banner */ .ka-cm-archived-banner { background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; } .ka-cm-section { margin-bottom: 20px; } .ka-cm-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .ka-cm-section-title .ka-section-icon { font-size: 16px; color: var(--text-dim); } /* Beschreibung */ .ka-cm-desc-placeholder { background: var(--bg); border-radius: 6px; padding: 10px 12px; color: var(--text-dim); font-size: 14px; cursor: pointer; min-height: 60px; } .ka-cm-desc-textarea { width: 100%; min-height: 96px; resize: vertical; background: var(--bg); color: var(--text); border: 2px solid var(--accent); border-radius: 6px; padding: 8px 12px; font-size: 14px; font-family: inherit; line-height: 1.5; } .ka-cm-desc-textarea:focus { outline: none; } .ka-cm-desc-actions { display: flex; gap: 8px; margin-top: 6px; } /* Checklisten */ .ka-checklist { margin-bottom: 16px; } .ka-checklist-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ka-checklist-title { flex: 1; font-size: 11px; font-weight: 700; color: var(--text); background: transparent; border: none; font-family: inherit; padding: 5px 6px; border-radius: 4px; cursor: pointer; -webkit-appearance: none; min-width: 0; min-height: var(--tap); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ka-checklist-title:focus { outline: none; background: var(--bg); box-shadow: 0 0 0 2px var(--accent); } .ka-auto-name-input, .ka-modal input.ka-auto-name-input { width: 100%; box-sizing: border-box; padding: 0; background: transparent; border: none; border-radius: 0; min-height: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); } .ka-auto-name-input:focus, .ka-modal input.ka-auto-name-input:focus { outline: none; box-shadow: none; } .ka-auto-input, .ka-modal input.ka-auto-input { width: 100%; box-sizing: border-box; padding: 6px 8px; min-height: var(--tap); border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px; } .ka-auto-select, .ka-modal select.ka-auto-select { width: 100%; box-sizing: border-box; padding: 0 28px 0 8px; height: var(--tap); border: 1px solid var(--border); border-radius: 4px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; -webkit-appearance: none; appearance: none; } .ka-checklist-more { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); padding: 0; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Fortschrittsbalken */ .ka-progress-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ka-progress-pct { font-size: 11px; color: var(--text-dim); width: 28px; flex-shrink: 0; } .ka-progress-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .ka-progress-fill { height: 100%; background: var(--ok); border-radius: 3px; transition: width .2s; } .ka-progress-fill.ka-progress-done { background: var(--ok); } /* Checklist-Items */ .ka-cl-items { display: flex; flex-direction: column; gap: 2px; } .ka-cl-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; } .ka-cl-item input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex-shrink: 0; border: 2px solid var(--text-dim); border-radius: 3px; background: transparent; cursor: pointer; position: relative; transition: background 120ms, border-color 120ms; } .ka-cl-item input[type=checkbox]::after { content: none; } .ka-cl-item input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); } .ka-cl-item input[type=checkbox]:checked::after { content: ''; position: absolute; left: 3px; top: 0px; width: 5px; height: 9px; border-radius: 0; background: transparent; box-shadow: none; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); transition: none; } .ka-cl-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ka-cl-item-text { font-size: 14px; line-height: 1.4; color: var(--text); background: transparent; border: none; font-family: inherit; resize: none; padding: 0; word-break: break-word; } .ka-cl-item-text.ka-checked { text-decoration: line-through; color: var(--text-dim); } .ka-cl-item--divider .ka-cl-item-text { color: transparent; text-decoration: none; user-select: none; position: relative; } .ka-cl-item--divider .ka-cl-item-text::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); } .ka-cl-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .ka-cl-item-due, .ka-cl-item-user { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-dim); background: var(--bg-elev); border-radius: 4px; padding: 1px 5px; cursor: pointer; white-space: nowrap; } .ka-cl-item-due .ka-icon, .ka-cl-item-user .ka-icon { width: 11px; height: 11px; flex-shrink: 0; } .ka-cl-more { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 0 2px; flex-shrink: 0; } /* ka-cl-item-menu popup */ .ka-cl-item-menu { position: fixed; z-index: 9999; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.22); padding: 4px; min-width: 190px; } .ka-cl-item-menu button { display: flex; align-items: center; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; gap: 0; } .ka-cl-item-menu button .ka-icon { width: 14px; height: 14px; flex-shrink: 0; } .ka-cl-item-menu button.danger { color: var(--danger); } .ka-cl-item-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; } /* User picker list inside modal */ .ka-cl-user-list { display: flex; flex-direction: column; gap: 6px; min-width: 220px; } .ka-cl-user-option { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 14px; padding: 8px 12px; border-radius: 6px; cursor: pointer; } .ka-cl-user-option.ka-cl-user-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .ka-cl-user-option .ka-icon { width: 14px; height: 14px; flex-shrink: 0; } /* Neues Checklist-Item */ .ka-cl-add-form { padding: 4px 6px; } .ka-cl-add-input { width: 100%; background: var(--bg); color: var(--text); border: 2px solid var(--accent); border-radius: 4px; padding: 6px 8px; font-size: 13px; font-family: inherit; resize: none; } .ka-cl-add-input:focus { outline: none; } .ka-cl-add-btn { background: transparent; border: none; color: var(--text-dim); font-size: 13px; padding: 4px 6px; cursor: pointer; border-radius: 4px; text-align: left; margin-top: 2px; width: 100%; } /* Sidebar-Buttons */ .ka-cm-sidebar h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 0 0 6px; } .ka-cm-sidebar-group { margin-bottom: 16px; } .ka-cm-action-btn { width: 100%; padding: 6px 10px; background: var(--bg); color: var(--text); border: none; border-radius: 4px; text-align: left; cursor: pointer; font-size: 13px; font-family: inherit; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; transition: background .12s; } .ka-cm-action-btn.danger { color: var(--danger); } .ka-cm-action-btn .ka-btn-icon { font-size: 14px; width: 16px; text-align: center; } /* Label-Picker Popover */ .ka-label-picker { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px; width: 240px; box-shadow: 0 8px 24px var(--shadow); } .ka-label-picker h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text); } .ka-label-picker-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .ka-label-color-btn { width: 32px; height: 32px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: transform .1s, border-color .1s; position: relative; overflow: hidden; } .ka-label-color-btn.selected { border-color: var(--text); } .ka-label-name-input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 13px; font-family: inherit; margin-bottom: 8px; } .ka-label-name-input:focus { outline: none; border-color: var(--accent); } /* Cover-Picker */ .ka-cover-picker { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px; width: 240px; box-shadow: 0 8px 24px var(--shadow); } .ka-cover-picker h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; } .ka-cover-color-grid { display: flex; flex-wrap: wrap; gap: 4px; } .ka-cover-color-btn { width: 40px; height: 40px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: transform .1s, border-color .1s; position: relative; overflow: hidden; } .ka-cover-color-btn.selected { border-color: var(--text); } .ka-cover-remove-btn { width: 100%; margin-top: 8px; padding: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--danger); cursor: pointer; font-size: 12px; } @media (max-width: 599px) { .ka-cover-remove-btn { min-height: 44px; font-size: 14px; padding: 10px; } } .ka-cover-picker-content { display: flex; flex-direction: column; gap: 4px; } .ka-cover-section-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; } .ka-cover-bg-toggle { padding: 2px 0; } .ka-cover-upload-btn { width: 100%; margin-top: 2px; height: var(--tap); padding: 0 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); cursor: pointer; font-size: 14px; text-align: left; box-sizing: border-box; font-family: inherit; } /* Markdown-Toolbar */ .ka-md-toolbar { display: flex; gap: 2px; padding: 4px 0; flex-wrap: wrap; } .ka-md-toolbar--sticky { position: sticky; top: 0; z-index: 5; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 4px 0; margin-bottom: 4px; } .ka-md-tb-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; cursor: pointer; font-size: 12px; color: var(--text); line-height: 1.5; min-width: 28px; text-align: center; } .ka-md-tb-btn code { font-family: monospace; font-size: 11px; } @media (min-width: 600px) { /* Um 1/3 vergrößert gegenüber der Basisgröße (Desktop only) */ .ka-md-tb-btn { font-size: 16px; padding: 3px 9px; min-width: 37px; } .ka-md-tb-btn code { font-size: 15px; } } /* Inline-Code und Code-Block im Markdown */ .ka-markdown code { font-family: monospace; font-size: 0.88em; background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; } .ka-markdown pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 6px 0; } .ka-markdown pre code { background: none; border: none; padding: 0; font-size: 0.85em; display: block; } .ka-markdown a { color: var(--accent); text-decoration: underline; } /* Anhang-Badge und Thumbnail */ .ka-att-badge { flex-shrink: 0; width: 40px; height: 40px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--text-dim); letter-spacing: .03em; overflow: hidden; text-align: center; } .ka-att-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } /* Drag & Drop Zone */ .ka-att-drop-zone { display: none; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 12px; border: 2px dashed var(--border); border-radius: 6px; color: var(--text-dim); font-size: 12px; cursor: default; } @media (min-width: 600px) { .ka-att-drop-zone { display: flex; } .ka-att-drop-zone .ka-icon { font-size: 14px; } .ka-att-drop-zone.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb, 87,157,255),.06); } } /* Anhang-Upload-Fortschritt */ .ka-att-upload-progress { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; } .ka-att-upload-label { font-size: 12px; color: var(--text-dim); } .ka-att-upload-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .ka-att-upload-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 200ms ease; width: 0%; } /* Socket-Disconnect-Banner */ .ka-disconnect-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9900; background: #c92a2a; color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: background-color 400ms ease; } /* Verbindung wiederhergestellt: kurz grün aufblitzen, dann ausfaden */ .ka-disconnect-banner.ka-disconnect-banner--reconnected { background: #2f9e44; } .ka-disconnect-banner.ka-anim-out { animation: ka-fade-out 400ms ease forwards; } .ka-disconnect-reconnect-btn { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 2px 10px; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; } /* Template-Popup */ .ka-template-popup { position: fixed; z-index: 1100; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); min-width: 220px; max-width: 300px; max-height: 320px; overflow-y: auto; padding: 6px 0; } .ka-template-popup-title { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px 4px; } .ka-template-card-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px; } .ka-template-card-name { flex: 1; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ka-template-card-add { flex-shrink: 0; width: 26px; height: 26px; background: transparent; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: center; } .ka-template-card-add .ka-icon { font-size: 13px; } .ka-template-empty { font-size: 12px; color: var(--text-dim); padding: 8px 12px; } .ka-template-pick-btn { margin-left: 4px; } /* Board-Hintergrund-Picker */ .ka-bg-picker { display: flex; flex-direction: column; gap: 12px; } .ka-bg-picker h4 { margin: 0 0 6px; font-size: 12px; color: var(--text-dim); } .ka-bg-colors { display: flex; flex-wrap: wrap; gap: 8px; } .ka-bg-swatch { width: 48px; height: 36px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform .1s, border-color .1s; position: relative; overflow: hidden; } .ka-bg-swatch.selected { border-color: var(--text); } .ka-bg-gradients { display: flex; flex-wrap: wrap; gap: 8px; } .ka-bg-gradient-swatch { width: 80px; height: 36px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: transform .1s, border-color .1s; } .ka-bg-gradient-swatch.selected { border-color: var(--text); } /* ───── Inline-Listen-Popover (Aktions-Menü) ───── */ .ka-list-menu-popup { position: fixed; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 6px 0; min-width: 200px; z-index: 9999; box-shadow: 0 8px 24px var(--shadow); } .ka-list-menu-popup button:not(.ka-list-menu-close) { display: block; width: 100%; padding: 8px 14px; background: transparent; border: none; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; font-family: inherit; } .ka-list-menu-popup button.danger { color: var(--danger); } .ka-list-menu-popup hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; } .ka-list-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 2px 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .ka-list-menu-header-title { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .ka-list-menu-close { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: none; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ka-list-menu-close .ka-icon { width: 14px; height: 14px; } .ka-list-color-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; } .ka-list-color-dot { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s, border-color .1s; position: relative; overflow: hidden; } .ka-list-color-dot.selected { border-color: var(--text); } .ka-list-color-dot.ka-color-none { background: var(--bg-card); border: 2px dashed var(--border); position: relative; } .ka-list-color-dot.ka-color-none::after { content: '×'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--text-dim); line-height: 1; } /* ───── Custom-Fields ───── */ .ka-cf-manager-section { margin-bottom: 20px; } .ka-cf-section-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 8px; } .ka-cf-group-header-row { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); padding: 6px 2px 2px; } .ka-cf-no-groups { font-size: .85rem; color: var(--text-dim); margin-bottom: 8px; } .ka-cf-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .ka-cf-sortable-section { display: flex; flex-direction: column; gap: 6px; } .ka-cf-row { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; /* Gruppen-Zeilen ohne Edit/Delete-Buttons (z.B. Default-Gruppe "Allgemein") sollen gleich hoch sein wie Zeilen mit Buttons (44px Icon-Button + Padding) */ min-height: 56px; } .ka-cf-key { flex: 1; word-break: break-word; font-size: 13px; } .ka-cf-editor { display: flex; flex-direction: column; gap: 12px; } .ka-cf-label { display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: .9rem; } .ka-cf-label input, .ka-cf-label select { height: var(--tap); padding: 0 10px; font-size: 1rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); } .ka-cf-group-headline { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 12px 0 4px; } .ka-cf-sublabel { padding-left: 16px; font-size: .85rem !important; } .ka-cf-scope-readonly { display: inline-block; font-size: .9rem; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px; height: var(--tap); line-height: var(--tap); } /* ───── Karteninteraktionen-Manager (Favoriten-Buttons) ───── */ .ka-cardint-list { display: flex; flex-direction: column; } .ka-cardint-category-header { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; } .ka-cardint-category-header:first-child { margin-top: 0; } .ka-cardint-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 0; flex: 1; } .ka-cardint-compact-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; margin-bottom: 8px; font-size: 12px; color: var(--text-dim); } .ka-cardint-compact-row span { flex: 1; } .ka-cardint-compact-row input[type=checkbox] { cursor: pointer; flex-shrink: 0; width: 44px; height: 26px; border-radius: 13px; } .ka-cardint-compact-row input[type=checkbox]::after { width: 22px; height: 22px; top: 50%; transform: translateY(-50%); } .ka-cardint-compact-row input[type=checkbox]:checked::after { transform: translateX(18px) translateY(-50%); } .ka-cardint-badge-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .ka-cardint-color-btn { width: 32px; height: 32px; border-radius: 4px; background: #758195; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: transform .1s; } .ka-cardint-picker-part { display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 14px; } .ka-cardint-reset-part { position: absolute; inset: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.2); cursor: pointer; } .ka-cardint-reset-part .ka-icon { pointer-events: none; } .ka-cardint-row { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; } .ka-cardint-icon { display: flex; align-items: center; color: var(--text-dim); } .ka-cardint-label { flex: 1; font-size: 13px; color: var(--text); } .ka-cardint-star-btn { width: 32px; height: 32px; flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-dim); display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color .1s; } .ka-cardint-star-btn .ka-icon { width: 18px; height: 18px; } .ka-cardint-star-btn--active { color: #f5cd47; } .ka-cardint-star-btn--active .ka-icon { fill: #f5cd47; } /* Kompakte Sidebar-Gruppe */ .ka-cm-sidebar-group--compact { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ka-cm-sidebar-group--compact > h5 { width: 100%; } .ka-cm-sidebar-group--compact .ka-cm-action-btn { width: 32px; height: 32px; padding: 0; margin-bottom: 0; justify-content: center; min-height: 0; } .ka-cm-sidebar-group--compact .ka-cm-action-btn > span:not(.ka-btn-icon) { display: none; } .ka-cm-sidebar-group--compact .ka-cm-action-btn .ka-btn-icon { width: auto; } @media (min-width: 640px) { /* Desktop: gleiche Größe wie ka-cm-favorites-list */ .ka-cm-sidebar-group--compact .ka-cm-action-btn { width: 43px; height: 43px; } .ka-cm-sidebar-group--compact .ka-cm-action-btn .ka-icon { width: 19px; height: 19px; } } @media (max-width: 639px) { .ka-cm-sidebar-group--compact .ka-cm-action-btn { width: 64px; height: 64px; min-height: 0; } .ka-cm-sidebar-group--compact .ka-cm-action-btn .ka-icon { width: 28px; height: 28px; } } .ka-cf-card-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); } .ka-cf-card-header { margin: 0 0 8px; font-size: .9rem; color: var(--text-dim); font-weight: 600; } .ka-cf-card-row { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; } .ka-cf-card-key { width: 120px; flex-shrink: 0; color: var(--text-dim); font-size: .9rem; } .ka-cf-card-row input[type=text], .ka-cf-card-row input[type=number], .ka-cf-card-row select { flex: 1; height: 36px; padding: 0 8px; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: .95rem; -webkit-appearance: none; appearance: none; } .ka-cf-card-row input[type=checkbox] { cursor: pointer; } .ka-cf-date-btn { flex: 1; height: 36px; min-width: 0; padding: 0 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: .95rem; text-align: left; cursor: pointer; } .ka-cf-textarea { flex: 1; min-width: 0; width: 100%; padding: 6px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: .95rem; font-family: inherit; resize: vertical; } .ka-cf-textarea:focus { outline: none; border-color: var(--accent); } /* ───── Mobile: Carousel-Slider für Listen ───── */ @media (max-width: 599px) { /* app-main als Flex-Spalte: Board-View wächst, Dots unten */ #app-main.ka-board-active { padding: 8px 0 0 0; display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: hidden; } /* Board-View als horizontaler Scroll-Snap-Container */ .ka-board-view { flex: 1; min-height: 0; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; align-items: flex-start; gap: 8px; padding-left: 12px; padding-right: 12px; padding-bottom: 0; } /* Jede Liste = ein Carousel-Element; schmalere Breite zeigt Rand der Nachbarliste */ .ka-list { flex: 0 0 calc(100vw - 80px); min-width: calc(100vw - 80px); /* Viewport-Basis statt %, damit iOS Safari in Flex-Containern nicht scheitert. * 50px = app-main-top-pad(8) + dots-bar(~26) + Puffer(16) */ max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px) - 50px - env(safe-area-inset-bottom, 0px)); max-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - 50px - env(safe-area-inset-bottom, 0px)); scroll-snap-align: center; } /* Add-List-Tile im Scroll-Container verbergen; Header-Button übernimmt */ .ka-add-list-tile { display: none; } } /* ───── Carousel-Dots (mobile: position fixed am unteren Bildschirmrand) ───── */ .ka-carousel-dots { display: none; } @media (max-width: 599px) { .ka-carousel-dots { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; justify-content: center; align-items: center; gap: 8px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events: none; background: transparent; } .ka-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(128, 128, 128, 0.5); transition: background 0.2s, transform 0.15s; flex-shrink: 0; } .ka-carousel-dot.active { background: var(--accent); transform: scale(1.5); } } /* ───── SVG Icons ───── */ .ka-sprite { display: none; } .ka-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ka-icon-btn .ka-icon, .ka-list-menu-btn .ka-icon { font-size: 1.2rem; } .ka-card-edit-btn .ka-icon { font-size: 13px; } .ka-cm-close .ka-icon { font-size: 1.1rem; } .ka-cl-more .ka-icon { font-size: 14px; } .ka-section-icon .ka-icon { font-size: 16px; } /* ───── Checklist Drag & Sort ───── */ .ka-cl-drag-handle, .ka-checklist-drag-handle, .ka-cf-drag-handle, .ka-cardint-drag-handle { cursor: grab; color: var(--text-dim); padding: 0 3px; flex-shrink: 0; display: flex; align-items: center; opacity: 0; transition: opacity .12s; font-size: 16px; touch-action: none; } .ka-cl-drag-handle:active, .ka-checklist-drag-handle:active, .ka-cf-drag-handle:active, .ka-cardint-drag-handle:active { cursor: grabbing; } .ka-sort-dragging { opacity: 0; } .ka-sort-placeholder { border: 2px dashed var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); margin: 2px 0; } /* ───── Mobile touch targets ───── */ @media (max-width: 599px) { .ka-list-menu-btn { width: 44px; height: 44px; font-size: 1.3rem; } .ka-cm-action-btn { min-height: 44px; } .ka-filter-popup-input { min-height: var(--tap); } .ka-cl-drag-handle, .ka-checklist-drag-handle, .ka-cf-drag-handle, .ka-cardint-drag-handle { opacity: 1; min-width: 32px; min-height: 32px; } .ka-cl-more { min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; } .ka-checklist-more { min-height: 36px; padding: 0 10px; } /* Cards allow vertical pan so the list can scroll; drag starts only from the handle */ .ka-card { touch-action: pan-y; padding-right: 36px; } .ka-card--divider { padding-right: 0; } .ka-card-edit-btn { display: none; } /* Cover füllt volle Kartenbreite (padding-right kompensieren) */ .ka-card-cover { width: calc(100% + 36px); } /* Drag-Handle startet unterhalb des Covers; Karte muss mindestens Cover + Handle fassen */ /* Doppelter Selektor (.ka-card.ka-card--has-cover, 0,2,0) überschreibt .ka-card{min-height:64px} (0,1,0) weiter unten */ .ka-card.ka-card--has-cover { min-height: 156px; } .ka-card--has-cover .ka-card-drag-handle { top: 112px; height: calc(100% - 112px); min-height: 44px; } .ka-card-drag-handle { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: 36px; height: 100%; min-height: 44px; color: var(--text-dim); touch-action: none; cursor: grab; opacity: 0.55; } /* Inputs and selects in modals and overlays: taller tap targets, no iOS zoom */ .ka-card-modal input:not([type=checkbox]), .ka-card-modal select, .ka-panel-overlay-box input:not([type=checkbox]), .ka-panel-overlay-box select, .ka-avatar-popup input:not([type=checkbox]):not([type=file]):not([type=color]) { min-height: 44px; font-size: 16px; padding: 8px 10px; box-sizing: border-box; } .ka-card-modal textarea, .ka-panel-overlay-box textarea { font-size: 16px; } /* Custom-Field Datum-Button: Button statt input, braucht eigenes Mobile-Override */ .ka-cf-date-btn { min-height: 44px; font-size: 1rem; } /* Template-Popup: Einfügen-Button größer für Touch */ .ka-template-card-add { width: 44px; height: 44px; } .ka-template-card-add .ka-icon { font-size: 20px; } /* Close-Buttons */ .ka-cm-close { width: 42px; height: 42px; } /* Markdown-Toolbar: größer für Touch */ .ka-md-tb-btn { font-size: 16px; padding: 3px 9px; min-width: 36px; min-height: 30px; } .ka-md-tb-btn code { font-size: 15px; } } /* ───── Panel-Overlay (Labels, Datum, Titelbild, Verschieben) ───── */ .ka-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; } .ka-panel-overlay-box { background: var(--bg-elev); border-radius: 12px; padding: 16px; max-width: 300px; width: 100%; max-height: 80vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 16px 48px var(--shadow); } /* Verhindert, dass iOS-native Inputs (date etc.) aus dem Overlay herausragen */ .ka-panel-overlay-box input, .ka-panel-overlay-box select, .ka-panel-overlay-box textarea { max-width: 100%; min-width: 0; box-sizing: border-box; } .ka-panel-overlay-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ka-panel-overlay-title > span { font-size: 14px; font-weight: 700; color: var(--text); } .ka-panel-overlay-close { width: 28px; height: 28px; background: transparent; border: none; border-radius: 50%; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ka-panel-overlay-close .ka-icon { width: 16px; height: 16px; } @media (max-width: 599px) { .ka-panel-overlay-close { width: 56px; height: 56px; } .ka-panel-overlay-close .ka-icon { width: 22px; height: 22px; } .ka-list-menu-close { width: 56px; height: 56px; } .ka-list-menu-close .ka-icon { width: 22px; height: 22px; } .ka-due-chip input[type=checkbox] { width: 24px; height: 24px; border-radius: 5px; } .ka-due-chip input[type=checkbox]::after { width: 6px; height: 13px; top: 2px; left: 7px; } } /* ───── Archiv-Ansicht ───── */ .ka-archived-list { display: flex; flex-direction: column; gap: 6px; } .ka-archived-card-row { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .ka-archived-card-info { flex: 1; min-width: 0; } .ka-archived-card-info-clickable { cursor: pointer; } .ka-archived-card-title { font-size: 13px; color: var(--text); word-break: break-word; display: flex; align-items: center; gap: 4px; } .ka-archived-card-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; display: flex; flex-direction: column; gap: 1px; } .ka-archived-card-date { display: flex; align-items: center; gap: 3px; } .ka-archived-card-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; } .ka-archived-card-actions .ka-btn { height: 32px; padding: 0 10px; font-size: 12px; } .ka-archived-search-row { display: flex; gap: 6px; margin-bottom: 12px; } .ka-archived-search-row .ka-archived-search-input { flex: 1; min-width: 0; } .ka-archived-search-btn { flex-shrink: 0; width: var(--tap); min-height: var(--tap); display: flex; align-items: center; justify-content: center; padding: 0; } .ka-board-activity-list { display: flex; flex-direction: column; gap: 2px; } .ka-modal-board-activities .ka-activity-item { font-size: 12px; } .ka-board-act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ka-board-act-main em { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; } .ka-board-act-main span { display: block; color: var(--text-dim); } .ka-activity-auto-label { font-size: 10px; color: var(--text-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ka-activity-item--auto { flex-wrap: wrap; } .ka-activity-item--auto > .ka-activity-auto-label { flex: 0 0 100%; margin-bottom: 1px; padding-left: 30px; } /* ───── Automation-Editor ───── */ .ka-modal-automation-editor { max-width: 680px; } .ka-auto-step-row > div > .ka-auto-step-grip { display: none; } @media (min-width: 600px) { .ka-auto-step-row > div > .ka-auto-step-grip { display: flex; } } @media (max-width: 599px) { .ka-modal-automation-editor { padding: 12px; } .ka-auto-trigger-list, .ka-auto-step-list { max-height: none; } .ka-modal-automation-editor input.ka-auto-name-input { padding: 10px 0; } .ka-modal-automation-editor .ka-btn.ka-small { height: var(--tap); padding: 0 16px; font-size: .95rem; } .ka-filter-cf-form-btns .ka-btn.ka-small { height: var(--tap); padding: 0 16px; font-size: .95rem; } } /* ───── Karte: Mindesthöhe für bessere Tippbarkeit ───── */ .ka-card { min-height: 64px; } /* ───── Divider-Karte (Titel = "---") ───── */ .ka-card--divider { min-height: 0; background: transparent; box-shadow: none; border-radius: 4px; cursor: default; display: flex; align-items: center; padding: 16px 0; } .ka-card--divider hr { flex: 1; border: none; border-top: 2px solid var(--border); margin: 0 8px; pointer-events: none; } .ka-card--divider .ka-card-drag-handle { display: flex; align-items: center; justify-content: center; position: static; height: auto; min-height: 0; color: var(--text-dim); cursor: grab; opacity: 0; } .ka-divider-label { flex-shrink: 0; padding: 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } @media (max-width: 599px) { .ka-card--divider .ka-card-drag-handle { opacity: 0.55; } } /* ───── Board-Einstellungen-Button & Dropdown ───── */ .ka-board-settings-btn { width: 32px; height: 32px; padding: 0; background: rgba(255,255,255,.15); border: none; border-radius: 8px; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s; } .ka-board-settings-btn .ka-icon { font-size: 16px; } html.theme-bright-active .ka-board-settings-btn { background: rgba(0,0,0,.12); color: var(--text); } .ka-board-settings-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; z-index: 300; overflow-y: auto; padding: 24px 12px; } .ka-board-settings-popup { padding: 6px 0; } .ka-board-settings-popup .ka-panel-overlay-title { margin-bottom: 6px; } .ka-board-settings-popup button:not(.ka-panel-overlay-close):not(.ka-board-settings-quick-btn) { display: block; width: 100%; padding: 9px 16px; background: transparent; border: none; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; font-family: inherit; } .ka-board-settings-popup hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; } .ka-settings-menu-item { display: flex !important; align-items: center; gap: 10px; } .ka-settings-menu-item .ka-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-dim); } .ka-settings-menu-item.ka-comment-menu-danger .ka-icon { color: var(--danger); } .ka-board-settings-quick-bar { display: flex; justify-content: space-around; padding: 4px 8px 6px; } .ka-board-settings-quick-btn { display: flex !important; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); background: transparent; border: none; border-radius: 8px; color: var(--text); cursor: pointer; flex-shrink: 0; } .ka-board-settings-quick-btn .ka-icon { width: 18px; height: 18px; } .ka-board-settings-quick-btn { position: relative; } .ka-fav-indicator-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #f5cd47; pointer-events: none; } /* ───── Label-Manager (in Board-Einstellungen) ───── */ .ka-label-manager-dot { width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0; } /* ───── Label-Zuweisung im Karten-Popup (kompakte Inline-Pills) ───── */ .ka-label-assign-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .ka-label-assign-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; border: none; cursor: pointer; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.92); transition: filter .12s; box-sizing: border-box; white-space: nowrap; } .ka-label-assign-btn--no-text { width: 56px; padding: 0; justify-content: center; } .ka-label-assign-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ka-label-assign-check { display: none; } .ka-label-assign-btn.selected { outline: 2px solid var(--text); outline-offset: 1px; } /* Label group header full-width in flex-wrap */ .ka-label-assign-list .ka-label-group-header { flex-basis: 100%; margin: 4px 0 2px; } /* Label group header in picker */ .ka-label-group-header { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin: 10px 0 4px; padding: 0 2px; } /* Label scope pills (list restrictions in editor) */ .ka-label-scope-lists { display: flex; flex-wrap: wrap; gap: 6px; } .ka-label-scope-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; white-space: nowrap; } .ka-label-scope-pill.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); color: var(--accent); } @media (max-width: 599px) { .ka-label-assign-btn { height: 36px; border-radius: 18px; font-size: 13px; padding: 0 14px; } .ka-label-assign-btn--no-text { width: 72px; padding: 0; } .ka-label-scope-pill { height: 36px; border-radius: 18px; font-size: 13px; padding: 0 16px; } } /* ───── Checkliste: Mehr-Button quadratisch ───── */ .ka-checklist-more { width: 32px; height: 32px; } @media (max-width: 599px) { .ka-checklist-more { min-width: 36px; min-height: 36px; padding: 0; } } /* ───── Mobile: Archiv-Zone im Header während Drag ───── */ .ka-archive-zone { position: absolute; inset: 0; background: rgba(220, 50, 50, 0.92); display: flex; align-items: center; justify-content: center; z-index: 20; border-radius: 0; transition: background .15s; pointer-events: none; } .ka-archive-zone.active { background: rgba(180, 30, 30, 1); } .ka-archive-zone .ka-icon { font-size: 2rem; color: #fff; } /* ───── Markdown-Rendering ───── */ .ka-markdown { font-size: 14px; line-height: 1.6; color: var(--text); } .ka-markdown h1, .ka-markdown h2, .ka-markdown h3, .ka-markdown h4 { margin: 10px 0 4px; font-weight: 700; line-height: 1.3; color: var(--text); } .ka-markdown h1 { font-size: 1.25em; } .ka-markdown h2 { font-size: 1.1em; } .ka-markdown h3 { font-size: 1em; } .ka-markdown h4 { font-size: .95em; } .ka-markdown p { margin: 0 0 8px; } .ka-markdown hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; } .ka-markdown strong { font-weight: 700; } .ka-markdown em { font-style: italic; } .ka-md-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; } .ka-md-table th, .ka-md-table td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; } .ka-md-table th { background: var(--bg-card); font-weight: 700; } .ka-md-table tr:nth-child(even) td { background: rgba(128,128,128,.04); } /* ───── Beschreibung: Markdown-Vorschau ───── */ .ka-cm-desc-rendered { background: var(--bg); border-radius: 6px; padding: 10px 12px; cursor: pointer; min-height: 60px; transition: max-height 0.25s ease; } /* Beschreibung: Accordion (zu lange Beschreibungen einklappen) */ .ka-cm-desc-rendered.ka-desc-collapsed { max-height: 160px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 55%, transparent 100%); } @media (min-width: 640px) { /* Desktop hat mehr Bildschirmfläche zur Verfügung — doppelte Texthöhe vor dem Abschneiden */ .ka-cm-desc-rendered.ka-desc-collapsed { max-height: 320px; } } .ka-cm-desc-rendered.ka-desc-expanded { max-height: 9999px; -webkit-mask-image: none; mask-image: none; } /* Accordion-Chevron-Button */ .ka-desc-chevron-wrap { display: flex; justify-content: center; margin-top: 2px; } .ka-desc-chevron-btn { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim); transition: transform 0.2s ease; } .ka-desc-chevron-btn .ka-icon { width: 14px; height: 14px; transition: transform 0.2s ease; } .ka-desc-chevron-btn.ka-desc-chevron-rotated .ka-icon { transform: rotate(180deg); } /* Beschreibung: Clipboard-Button */ .ka-desc-copy-btn { display: flex; align-items: center; justify-content: center; margin-top: 4px; padding: 3px 6px; background: transparent; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--text-dim); width: 28px; height: 28px; } .ka-desc-copy-btn .ka-icon { width: 14px; height: 14px; } /* ───── Kommen­tare & Aktivitäten (Accordion) ───── */ .ka-cm-accordion-header { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; padding: 4px 0; } .ka-cm-accordion-toggle { font-size: 11px; color: var(--text-dim); background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; cursor: pointer; margin-left: auto; } @media (max-width: 599px) { /* 1/3 größer für bessere Antippbarkeit auf Mobile */ .ka-cm-accordion-toggle { font-size: 15px; padding: 3px 11px; border-radius: 13px; } } .ka-comment-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; } .ka-comment-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .ka-comment-meta strong { color: var(--text); } .ka-comment-body { font-size: 13px; } .ka-comment-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .ka-comment-more { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 4px; flex-shrink: 0; } .ka-comment-more .ka-icon { width: 14px; height: 14px; } .ka-comment-menu { position: fixed; z-index: 9200; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 4px; min-width: 140px; box-shadow: 0 4px 16px rgba(0,0,0,.25); } .ka-comment-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 7px 10px; font-size: 13px; color: var(--text); border-radius: 4px; font-family: inherit; white-space: nowrap; } .ka-comment-menu-item .ka-icon { width: 14px; height: 14px; flex-shrink: 0; } .ka-comment-menu-danger { color: var(--danger); } /* Mobile: fullscreen description editor overlay */ .ka-desc-mobile-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 2100; height: 100vh; height: 100dvh; /* dvh shrinks when iOS virtual keyboard appears */ background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } .ka-desc-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; } .ka-desc-mobile-overlay .ka-md-toolbar { flex-shrink: 0; padding: 4px 12px; background: var(--bg-card); border-bottom: 1px solid var(--border); } .ka-desc-mobile-textarea { flex: 1; resize: none; width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px; font-size: 14px; font-family: inherit; } .ka-desc-mobile-textarea:focus { outline: none; } .ka-comment-add-area { margin-top: 8px; } .ka-comment-body.ka-desc-collapsed { max-height: 160px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 55%, transparent 100%); } .ka-comment-body.ka-desc-expanded { max-height: 9999px; -webkit-mask-image: none; mask-image: none; } .ka-activity-item { font-size: 12px; color: var(--text-dim); padding: 3px 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 6px; } .ka-activity-date { margin-left: auto; font-size: 11px; text-align: right; flex-shrink: 0; } .ka-activity-item:last-child { border-bottom: none; } .ka-activity-item strong { color: var(--text); min-width: 24px; flex-shrink: 0; } .ka-activity-card-link { cursor: pointer; text-decoration: underline; color: var(--accent); } /* ───── Anhänge & URLs ───── */ .ka-attachment-item, .ka-url-item { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; } .ka-attachment-name, .ka-url-label { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ka-attachment-size { font-size: 11px; color: var(--text-dim); flex-shrink: 0; } .ka-attachment-del, .ka-url-del { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 4px; flex-shrink: 0; } .ka-attachment-download { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--accent); cursor: pointer; font-size: 12px; padding: 3px 8px; flex-shrink: 0; } .ka-url-link { color: var(--accent); text-decoration: none; } .ka-att-drag-handle, .ka-url-drag-handle { cursor: grab; color: var(--text-dim); padding: 0 3px; display: flex; align-items: center; opacity: 0; flex-shrink: 0; touch-action: none; font-size: 16px; } .ka-att-drag-handle:active, .ka-url-drag-handle:active { cursor: grabbing; } @media (max-width: 599px) { .ka-att-drag-handle, .ka-url-drag-handle { opacity: 1; min-width: 28px; min-height: 28px; } } .ka-section-add-btn { width: 100%; padding: 6px 0; background: transparent; border: 1px dashed var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; font-size: 13px; margin-top: 4px; } .ka-url-add-form, .ka-attachment-add-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .ka-url-add-form input { padding: 6px 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 13px; } /* ───── Spezialfeatures (Custom Actions) ───── */ .ka-cm-special-btn { width: 100%; padding: 8px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; text-align: left; cursor: pointer; font-size: 13px; font-family: inherit; margin-bottom: 4px; transition: background .12s; } .ka-cm-special-btn:disabled { opacity: .6; cursor: wait; } /* ───── Custom Date Picker (ka-panel-date) ───── */ .ka-datepicker { width: 100%; } .ka-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ka-dp-month-label { font-size: 14px; font-weight: 700; color: var(--text); } .ka-dp-nav { width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .ka-dp-daynames { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .ka-dp-daynames > span { text-align: center; font-size: 11px; color: var(--text-dim); padding: 4px 0; } .ka-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ka-dp-cell { width: 100%; height: 32px; background: transparent; border: none; border-radius: 6px; color: var(--text); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .1s; } .ka-dp-cell.ka-dp-other { color: var(--text-dim); opacity: .45; } .ka-dp-cell.ka-dp-today { border: 1.5px solid var(--accent); } .ka-dp-cell.ka-dp-selected { background: var(--accent); color: #fff; } .ka-dp-cell.ka-dp-selected.ka-dp-today { border-color: var(--accent-hover); } .ka-dp-time-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; } .ka-dp-time-label { font-size: 13px; color: var(--text-dim); flex-shrink: 0; } .ka-dp-time-input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; font-size: 13px; font-family: inherit; } .ka-dp-save-btn { height: 36px; font-size: 13px; } .ka-dp-remove-btn { width: 36px; height: 36px; } .ka-move-action-btn { height: 36px; font-size: 13px; } .ka-dp-time-clear-btn { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-dim); padding: 0; } .ka-dp-time-clear-btn .ka-icon { width: 14px; height: 14px; } .ka-dp-time-clear-btn:hover { color: var(--text); border-color: var(--text-dim); } @media (max-width: 599px) { .ka-dp-save-btn { height: var(--tap); font-size: .95rem; } .ka-dp-remove-btn { width: var(--tap); height: var(--tap); } .ka-move-action-btn { height: var(--tap); font-size: .95rem; } .ka-dp-time-clear-btn { width: var(--tap); height: var(--tap); } } /* Mobile: 40px Abstand links/rechts zum Antippen (Panel Overlay + andere Modals) */ @media (max-width: 599px) { .ka-panel-overlay { padding: 16px 40px; } .ka-modal-backdrop { padding: 24px 40px; } } /* Mobile: Kartendetail-Modal — vollflächig, kein Rand, sticky Header */ @media (max-width: 599px) { .ka-cm-backdrop { padding: 0; display: block; /* kein Flex-Centering — Modal füllt die volle Breite */ } .ka-card-modal { border-radius: 0; min-height: 100vh; /* mindestens vollbild-hoch, scrollbar wenn mehr Inhalt */ max-width: 100%; margin: 0; overflow: visible; /* damit position:sticky im Header funktioniert */ box-shadow: none; } .ka-cm-header { position: sticky; top: 0; z-index: 10; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding-bottom: 12px; } /* Close-Button: bleibt position:absolute innerhalb des sticky Headers */ .ka-cm-close { position: absolute; top: 10px; right: 10px; } /* Verhindert Überlappung zwischen Titel-Input und Close-Button */ .ka-cm-header { padding-right: 56px; } } /* ───── Avatar-Modal (Profil) ───── */ .ka-avatar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; z-index: 300; overflow-y: auto; padding: 24px 12px; } .ka-avatar-popup { background: var(--bg-elev); color: var(--text); border-radius: 16px; border: 1px solid var(--border); width: 100%; max-width: 400px; padding: 16px; box-shadow: 0 8px 24px var(--shadow); margin: auto 0; flex-shrink: 0; position: relative; } .ka-avatar-popup .ka-panel-overlay-title { margin-bottom: 12px; } .ka-avatar-popup .ka-panel-overlay-title > span { font-size: 14px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .ka-avatar-section { padding: 12px 0; } .ka-avatar-section:first-child { padding-top: 0; } .ka-avatar-section:last-child { padding-bottom: 0; } .ka-avatar-section + .ka-avatar-section { border-top: 1px solid var(--border); } .ka-avatar-section h6 { margin: 0 0 10px; font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .ka-theme-picker { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .ka-theme-option { flex: 1; padding: 8px 4px; text-align: center; background: transparent; border: none; border-right: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-size: 13px; font-family: inherit; transition: background .12s, color .12s; } .ka-theme-option:last-child { border-right: none; } .ka-theme-option.active { background: var(--accent); color: #fff; border-right-color: var(--accent); } .ka-stats-grid { display: flex; flex-direction: column; gap: 6px; } .ka-stats-row { display: flex; align-items: center; justify-content: space-between; } .ka-stats-label { font-size: 13px; color: var(--text-dim); } .ka-stats-value { font-size: 13px; font-weight: 600; color: var(--text); } .ka-avatar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ka-avatar-field-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; } .ka-avatar-username { font-size: 14px; font-weight: 600; color: var(--text); } .ka-avatar-display-name { width: 100%; padding: 7px 10px; margin-bottom: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: inherit; font-size: 14px; box-sizing: border-box; } .ka-avatar-display-name:focus { outline: none; border-color: var(--accent); } .ka-avatar-preview-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 10px; } .ka-avatar-img-preview { width: 64px; height: 64px; border-radius: 50%; background: var(--border) center/cover no-repeat; flex-shrink: 0; border: 2px solid var(--border); } .ka-avatar-img-preview--clickable { cursor: pointer; } .ka-avatar-del-btn { flex-shrink: 0; } /* ───── Generisches Popup-Input ───── */ .ka-popup-input { width: 100%; padding: 7px 10px; margin-bottom: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: inherit; font-size: 14px; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .ka-popup-input:focus { outline: none; border-color: var(--accent); } /* ───── TOTP-Setup-Popup ───── */ .ka-totp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 16px; } .ka-totp-popup { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 20px 20px 16px; width: 100%; max-width: 340px; position: relative; box-shadow: 0 8px 32px rgba(0,0,0,.4); } .ka-totp-popup-close { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--text-dim); display: flex; align-items: center; justify-content: center; } .ka-totp-popup h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; padding-right: 28px; } .ka-totp-popup-hint { font-size: 12px; color: var(--text-dim); margin: 0 0 14px; } .ka-totp-qr { text-align: center; margin: 0 0 12px; } .ka-totp-qr-img { width: 160px; height: 160px; border-radius: 6px; display: block; margin: 0 auto; background: #fff; padding: 4px; } .ka-totp-secret-row { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 0 0 14px; flex-wrap: wrap; } .ka-totp-secret-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; } .ka-totp-secret-code { font-family: monospace; font-size: 13px; word-break: break-all; color: var(--text); } .ka-totp-confirm-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; } .ka-totp-confirm-row .ka-popup-input { margin-bottom: 0; flex: 1; min-width: 0; } .ka-totp-popup-error { color: var(--danger); font-size: 12px; margin: 4px 0 0; } /* ───── Eigene-Farbe-Picker (Pipette-Button) ───── */ .ka-color-custom { background: #758195 !important; position: relative; overflow: hidden; display: flex !important; align-items: center; justify-content: center; color: #fff; } .ka-color-custom.selected { border-color: var(--text); } /* ───── Hintergrundbild-Picker ───── */ .ka-bg-image-section { margin-top: 12px; } .ka-bg-image-section h4 { margin: 0 0 6px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; } .ka-bg-img-preview { width: 100%; height: 120px; border-radius: 6px; background: var(--bg) center/cover no-repeat; border: 1px solid var(--border); margin-bottom: 6px; position: relative; overflow: hidden; } .ka-bg-img-preview.has-image { border-color: var(--accent); } .ka-bg-preview { display: flex; align-items: center; justify-content: center; } .ka-bg-preview .ka-title { position: relative; z-index: 1; text-align: center; font-size: 15px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.45); padding: 4px 10px; border-radius: 4px; color: #fff; } /* ───── Muster-Toggle + Größen-Eingabe ───── */ .ka-bg-pattern-section { margin-top: 10px; } .ka-bg-pattern-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; } .ka-bg-pattern-size-row { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .ka-bg-pattern-size-label { font-size: 12px; color: var(--text-dim); } /* ───── Custom-Field-Toggle (in-list) ───── */ .ka-cf-toggle-label { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; cursor: pointer; } /* ───── Eingeklappte Liste ───── */ .ka-list.ka-list-collapsed { width: 44px; min-width: 44px; max-width: 44px; min-height: 120px; flex-direction: column; align-items: center; padding: 8px 0; cursor: default; overflow: visible; } .ka-list.ka-list-collapsed .ka-list-head { flex-direction: column; align-items: center; width: 100%; padding: 0; gap: 6px; flex: 1 0 auto; } .ka-list.ka-list-collapsed .ka-list-actions { width: 100%; display: flex; justify-content: center; } .ka-list.ka-list-collapsed .ka-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 600; flex-shrink: 0; max-height: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--text); padding: 4px 0; } /* ───── Template-Panel (Desktop: rechts fixiert) ───── */ .ka-template-panel { position: fixed; top: 60px; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 8px 8px 8px 0; z-index: 50; pointer-events: none; } .ka-template-panel .ka-list, .ka-template-panel .ka-list.ka-list-collapsed { pointer-events: all; } /* In der fixierten Seitenleiste (column-flex) nicht wachsen, nur schrumpfen */ .ka-template-panel .ka-list { flex: 0 1 auto; max-height: calc(100vh - var(--header-h) - 32px); } .ka-list.ka-template-list { border-top: 3px solid var(--accent); } /* ───── Favoriten-Stern auf Board-Kacheln ───── */ .ka-board-tile { position: relative; } .ka-board-favorite-star { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; color: #f5cd47; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .ka-board-favorite-star .ka-icon { width: 20px; height: 20px; fill: #f5cd47; stroke: none; } @media (max-width: 599px) { .ka-board-favorite-star { width: 26px; height: 26px; top: 4px; right: 4px; } .ka-board-favorite-star .ka-icon { width: 26px; height: 26px; } } /* ───── Listen-Verschieben-Button (aktiver Zustand) ───── */ .ka-icon-btn.ka-active { background: var(--accent); color: #fff; border-radius: 6px; } /* ───── Popup-Animationen ───── */ /* "to" nutzt transform: none statt scale(1) — mit animation-fill-mode: both bliebe sonst dauerhaft eine (identische) Transform-Matrix auf dem Popup stehen. Das erzeugt einen neuen Containing Block, wodurch native Formular-Popups (z.B. input[type=color]) auf Desktop falsch verankert werden und am oberen Bildschirmrand kleben. */ @keyframes ka-pop-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } } @keyframes ka-pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.88); } } @keyframes ka-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ka-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes ka-slide-up-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes ka-slide-down-out { from { transform: translateY(0); } to { transform: translateY(100%); } } /* Backdrop-Elemente: nur Fade */ .ka-modal-backdrop { animation: ka-fade-in 250ms ease; } .ka-modal-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-cm-backdrop { animation: ka-fade-in 250ms ease; } .ka-cm-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-panel-overlay { animation: ka-fade-in 250ms ease; } .ka-panel-overlay.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } /* Innere Modal-Boxen: Scale + Fade, 40ms Verzögerung damit Backdrop zuerst sichtbar wird */ .ka-modal { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-modal-backdrop.ka-anim-out .ka-modal { animation: ka-pop-out 220ms ease forwards; } .ka-card-modal { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-cm-backdrop.ka-anim-out .ka-card-modal { animation: ka-pop-out 220ms ease forwards; } @media (max-width: 599px) { .ka-cm-mobile-bar { animation: ka-slide-up-in 220ms ease both; } .ka-cm-backdrop.ka-anim-out .ka-cm-mobile-bar { animation: ka-slide-down-out 200ms ease forwards; } } .ka-panel-overlay-box { animation: ka-pop-in 260ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-panel-overlay.ka-anim-out .ka-panel-overlay-box { animation: ka-pop-out 220ms ease forwards; } /* Kleine Floating-Popups: Scale + Fade, Ursprung oben */ .ka-list-menu-popup { animation: ka-pop-in 180ms cubic-bezier(.34,1.56,.64,1); transform-origin: top right; } .ka-list-menu-popup.ka-anim-out { animation: ka-pop-out 180ms ease forwards; transform-origin: top right; } .ka-cl-item-menu { animation: ka-pop-in 160ms cubic-bezier(.34,1.56,.64,1); transform-origin: top right; } .ka-cl-item-menu.ka-anim-out { animation: ka-pop-out 140ms ease forwards; transform-origin: top right; } .ka-board-settings-backdrop { animation: ka-fade-in 250ms ease; } .ka-board-settings-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-board-settings-backdrop .ka-avatar-popup { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-board-settings-backdrop.ka-anim-out .ka-avatar-popup { animation: ka-pop-out 220ms ease forwards; } .ka-avatar-backdrop { animation: ka-fade-in 250ms ease; } .ka-avatar-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-avatar-popup { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-avatar-backdrop.ka-anim-out .ka-avatar-popup { animation: ka-pop-out 220ms ease forwards; } .ka-totp-backdrop { animation: ka-fade-in 250ms ease; } .ka-totp-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-totp-popup { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-totp-backdrop.ka-anim-out .ka-totp-popup { animation: ka-pop-out 220ms ease forwards; } .ka-cf-toggle-label input[type=checkbox] { cursor: pointer; } /* ───── Board-Filter ───── */ #filter-board-btn { position: relative; } #filter-board-btn.ka-filter-active::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); pointer-events: none; } .ka-filter-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; z-index: 1200; overflow-y: auto; padding: 24px 12px; } .ka-filter-popup { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; box-shadow: 0 8px 24px var(--shadow); width: 100%; max-width: 380px; flex-shrink: 0; margin: auto 0; } .ka-filter-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ka-filter-popup-title { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .ka-filter-popup-row { display: flex; gap: 6px; align-items: center; } .ka-filter-popup-input { flex: 1; width: 100%; box-sizing: border-box; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 15px; outline: none; min-width: 0; } .ka-filter-popup-input:focus { border-color: var(--accent); } .ka-filter-search-btn { flex-shrink: 0; } .ka-filter-search-wrap { position: relative; display: flex; align-items: center; } .ka-filter-search-clear { position: absolute; right: 10px; background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-dim); line-height: 0; border-radius: 4px; } .ka-filter-search-clear:hover { color: var(--text); } .ka-filter-search-clear .ka-icon { width: 14px; height: 14px; } .ka-filter-search-wrap .ka-filter-popup-input, .ka-filter-search-wrap .ka-archived-search-input { padding-right: 30px; } .ka-filter-popup-clear { margin-top: 10px; font-size: 13px; color: var(--accent); cursor: pointer; padding: 4px 0; text-align: center; } .ka-filter-backdrop { animation: ka-fade-in 250ms ease; } .ka-filter-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-filter-backdrop .ka-filter-popup { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-filter-backdrop.ka-anim-out .ka-filter-popup { animation: ka-pop-out 220ms ease forwards; } .ka-filter-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 10px 0 6px; } .ka-filter-label-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; } .ka-filter-label-chip { padding: 3px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: opacity .1s; user-select: none; -webkit-user-select: none; } .ka-filter-label-chip.ka-selected { border-color: rgba(255,255,255,.6); } .ka-filter-attach-row { display: flex; gap: 6px; margin-bottom: 0; } .ka-filter-attach-row .ka-filter-popup-input { font-size: 13px; padding: 6px 8px; } /* ───── CF-Filter ───── */ .ka-filter-cf-section { margin-bottom: 0; } .ka-filter-cf-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 5px; } .ka-filter-cf-row { display: flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 5px 6px; } .ka-filter-cf-row-label { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ka-filter-cf-add-form { margin-bottom: 4px; } .ka-filter-cf-form-row { display: flex; gap: 6px; margin-bottom: 5px; } .ka-filter-cf-form-row .ka-auto-select { flex: 1; min-width: 0; font-size: 13px; } .ka-filter-cf-form-btns { justify-content: flex-end; } .ka-filter-cf-value-wrap { margin-bottom: 5px; } .ka-filter-cf-value-wrap .ka-filter-cf-value-input { width: 100%; font-size: 13px; } .ka-filter-cf-value-wrap .ka-auto-select.ka-filter-cf-value-input { width: 100%; } /* ───── Optionale CF Popup ───── */ .ka-cf-optional-popup { padding: 0 4px 8px; } .ka-cf-optional-group-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 10px 0 4px; margin-top: 4px; } .ka-cf-optional-group-header:first-child { margin-top: 0; } .ka-cf-optional-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); } .ka-cf-optional-row:last-child { border-bottom: none; } .ka-cf-optional-key { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ───── Gespeicherte Filter ───── */ .ka-filter-saved-section { margin-top: 4px; } .ka-filter-saved-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } .ka-filter-saved-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 3px 4px 3px 9px; font-size: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; color: var(--text); } .ka-filter-saved-chip-del { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: transparent; border: none; cursor: pointer; color: var(--danger); padding: 0; flex-shrink: 0; } .ka-filter-saved-chip-del .ka-icon { width: 11px; height: 11px; } .ka-filter-save-row { margin-top: 4px; } .ka-filter-save-form { display: flex; gap: 4px; align-items: center; } .ka-filter-save-input { flex: 1; min-width: 0; } /* ───── Boardübergreifende Karten-Suche ───── */ .ka-gsearch-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; z-index: 1200; overflow-y: auto; padding: 24px 12px; } .ka-gsearch-popup { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; box-shadow: 0 8px 24px var(--shadow); width: 100%; max-width: 480px; flex-shrink: 0; margin: auto 0; } .ka-gsearch-results { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 55vh; overflow-y: auto; } .ka-gsearch-board-name { font-weight: 600; color: var(--text-dim); } .ka-gsearch-backdrop { animation: ka-fade-in 250ms ease; } .ka-gsearch-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-gsearch-backdrop .ka-gsearch-popup { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-gsearch-backdrop.ka-anim-out .ka-gsearch-popup{ animation: ka-pop-out 220ms ease forwards; } .ka-bsearch-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; z-index: 1200; overflow-y: auto; padding: 24px 12px; } .ka-bsearch-backdrop { animation: ka-fade-in 250ms ease; } .ka-bsearch-backdrop.ka-anim-out { animation: ka-fade-out 250ms ease forwards; } .ka-bsearch-backdrop .ka-gsearch-popup { animation: ka-pop-in 280ms cubic-bezier(.34,1.56,.64,1) 40ms both; } .ka-bsearch-backdrop.ka-anim-out .ka-gsearch-popup{ animation: ka-pop-out 220ms ease forwards; } /* ───── Hover-Effekte (nur echte Zeigegeräte — kein Sticky-Hover auf Touch) ───── */ @media (hover: hover) { .ka-login-card button[type=submit]:hover:not(:disabled), .ka-login-card #totp-submit:hover:not(:disabled), .ka-login-card #totp-back:hover:not(:disabled) { background: var(--accent-hover); } .ka-icon-btn:hover { background: var(--bg-card); } .ka-board-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); } .ka-board-tile.ka-add:hover { border-color: var(--accent); color: var(--accent); } .ka-list-menu-btn:hover { background: rgba(128,128,128,.2); color: var(--text); } .ka-card:hover { box-shadow: 0 4px 10px rgba(9,30,66,0.3); background: var(--card-bg-hover); } .ka-card:hover .ka-card-edit-btn { opacity: 1; } .ka-label:hover { filter: brightness(1.15); } .ka-card-edit-btn:hover { background: var(--bg-elev); color: var(--accent); opacity: 1 !important; } .ka-add-card-btn:hover { background: rgba(128,128,128,.15); color: var(--text); } .ka-add-list-btn:hover { background: rgba(255,255,255,.25); } html.theme-bright-active .ka-add-list-btn:hover { background: rgba(0,0,0,.18); } .ka-btn:hover { background: var(--bg-elev); } .ka-btn.ka-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .ka-btn.ka-danger:hover { background: var(--danger); color: #fff; } .ka-toast-action:hover { text-decoration: underline; } .ka-cm-close:hover { color: var(--text); background: var(--bg-card); } .ka-cm-mobile-icon-btn:hover { background: var(--accent-hover); } .ka-cm-mobile-quick-btn:hover { background: var(--border); } .ka-quick-actions-item:hover { background: var(--bg-card); } .ka-due-chip:hover { background: var(--bg-elev); } .ka-cm-desc-placeholder:hover { background: var(--border); } .ka-checklist-title:hover { background: var(--bg); } .ka-checklist-more:hover { background: var(--bg); color: var(--text); } .ka-cl-item:hover { background: var(--bg); } .ka-cl-more:hover { color: var(--accent); } .ka-cl-item-menu button:hover { background: var(--bg-card); } .ka-cl-item-menu button.danger:hover { background: var(--danger); color: #fff; } .ka-cl-user-option:hover { border-color: var(--accent); } .ka-cl-add-btn:hover { background: var(--bg); color: var(--text); } .ka-cm-action-btn:hover { background: var(--border); } .ka-cm-action-btn.danger:hover { background: var(--danger); color: #fff; } /* Custom-Farbe wird per Inline-Style gesetzt und überschreibt obige background:hover-Regel — eigener Effekt via filter, der von der Inline-Farbe unberührt bleibt */ .ka-cm-action-btn--custom-color:hover { filter: brightness(1.12); } .ka-label-color-btn:hover { transform: scale(1.1); } .ka-cover-color-btn:hover { transform: scale(1.08); } .ka-cover-remove-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); } .ka-cover-upload-btn:hover { background: var(--bg-card); } .ka-md-tb-btn:hover { background: var(--bg-elev); border-color: var(--accent); } .ka-disconnect-reconnect-btn:hover { background: rgba(255,255,255,.35); } .ka-template-card-item:hover { background: var(--bg-card); } .ka-template-card-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .ka-bg-swatch:hover { transform: scale(1.06); } .ka-bg-gradient-swatch:hover { transform: scale(1.04); } .ka-list-menu-popup button:not(.ka-list-menu-close):hover { background: var(--bg-card); } .ka-list-menu-popup button.danger:hover { background: var(--danger); color: #fff; } .ka-list-menu-close:hover { background: var(--bg-card); color: var(--text); } .ka-list-color-dot:hover { transform: scale(1.15); } .ka-cf-date-btn:hover { border-color: var(--accent); } .ka-cl-item:hover .ka-cl-drag-handle, .ka-checklist-header:hover .ka-checklist-drag-handle { opacity: 1; } .ka-cf-row:hover .ka-cf-drag-handle, .ka-cardint-row:hover .ka-cardint-drag-handle { opacity: 1; } .ka-panel-overlay-close:hover { background: var(--bg-card); color: var(--text); } .ka-archived-card-info-clickable:hover .ka-archived-card-title { color: var(--accent); } .ka-card--divider:hover { box-shadow: none; } .ka-card--divider:hover .ka-card-drag-handle { opacity: 1; } .ka-board-settings-btn:hover { background: rgba(255,255,255,.28); } html.theme-bright-active .ka-board-settings-btn:hover { background: rgba(0,0,0,.2); } .ka-board-settings-popup button:not(.ka-panel-overlay-close):not(.ka-board-settings-quick-btn):hover { background: var(--bg-card); } .ka-board-settings-quick-btn:hover { background: var(--bg-card); } .ka-label-assign-btn:hover { filter: brightness(1.1); } .ka-cm-desc-rendered:hover { background: var(--border); } .ka-desc-chevron-btn:hover { background: var(--border); color: var(--text); } .ka-desc-copy-btn:hover { background: var(--border); color: var(--text); } .ka-cm-accordion-toggle:hover { background: var(--bg); color: var(--text); } .ka-comment-more:hover { color: var(--text); background: var(--bg-card); } .ka-comment-menu-item:hover { background: var(--bg-card); } .ka-comment-menu-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .ka-activity-card-link:hover { opacity: .75; } .ka-attachment-del:hover, .ka-url-del:hover { color: var(--danger); } .ka-attachment-download:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .ka-url-link:hover { text-decoration: underline; } .ka-attachment-item:hover .ka-att-drag-handle, .ka-url-item:hover .ka-url-drag-handle { opacity: 1; } .ka-section-add-btn:hover { border-color: var(--accent); color: var(--accent); } .ka-cm-special-btn:hover { background: var(--border); } .ka-dp-nav:hover { background: var(--bg-card); } .ka-dp-cell:hover { background: var(--bg-card); } .ka-dp-cell.ka-dp-selected:hover { background: var(--accent-hover); } .ka-theme-option:hover { background: var(--bg-card); color: var(--text); } .ka-totp-popup-close:hover { color: var(--text); background: var(--bg-card); } .ka-list.ka-list-collapsed .ka-title:hover { color: var(--accent); } .ka-icon-btn.ka-active:hover { background: var(--accent-hover); } .ka-filter-popup-clear:hover { text-decoration: underline; } .ka-filter-saved-chip:hover { border-color: var(--accent); } .ka-filter-saved-chip-del:hover { background: var(--border); color: var(--text); } .ka-filter-label-chip:hover { filter: brightness(1.15); } /* Header-Icon-Buttons: im Bright-Theme sind --bg-elev und --bg-card identisch, daher eigener sichtbarer Hover-Hintergrund für den Header-Kontext */ html.theme-bright-active .ka-header .ka-icon-btn:hover { background: rgba(0,0,0,.08); } .ka-dep-add-btn:hover { background: var(--accent-hover); } .ka-cardint-star-btn:hover { background: var(--bg-elev); color: var(--text); } .ka-cardint-color-btn:hover { transform: scale(1.08); } .ka-cardint-reset-part:hover { background: rgba(0,0,0,.35); } .ka-avatar-img-preview--clickable:hover { opacity: .85; } .ka-cl-item-due:hover { background: var(--bg-elev); } /* Neue Hover-Stile für bisher unbehandelte interaktive Elemente */ .ka-cardint-row:hover { background: var(--bg-elev); } .ka-attachment-item:hover, .ka-url-item:hover { background: var(--bg-elev); } .ka-checklist-header:hover { background: var(--bg-card); border-radius: 4px; } .ka-bg-pattern-label:hover { opacity: .85; } .ka-cf-toggle-label:hover { opacity: .85; } .ka-markdown a:hover { opacity: .8; } .ka-cf-type-chip:hover { background: var(--bg-elev); } .ka-att-badge--clickable:hover { opacity: .85; cursor: pointer; } .ka-lightbox-close:hover { background: rgba(0,0,0,.75); } } /* ───── Custom-Field-Typ-Icons ───── */ .ka-cf-type-icons { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; } .ka-cf-type-chip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var(--bg-elev); color: var(--text-dim); flex-shrink: 0; } .ka-cf-type-chip .ka-icon { width: 12px; height: 12px; } /* ───── Attachment Lightbox ───── */ .ka-att-badge--clickable { cursor: pointer; } .ka-lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.88); z-index: 9000; display: flex; align-items: center; justify-content: center; } .ka-lightbox-container { max-width: calc(100vw - 40px); max-height: calc(100dvh - 80px); display: flex; align-items: center; justify-content: center; } .ka-lightbox-media { display: block; max-width: 100%; max-height: calc(100dvh - 80px); object-fit: contain; border-radius: 6px; } .ka-lightbox-close { position: fixed; top: 16px; right: 16px; background: rgba(0,0,0,.55); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9001; } .ka-lightbox-close .ka-icon { width: 20px; height: 20px; } /* ───── Mobile-Verbesserungen Kommentare & Fullscreen-Editor ───── */ @media (max-width: 768px) { .ka-comment-more { width: 40px; height: 40px; } .ka-comment-menu-item { padding: 11px 14px; font-size: 14px; } .ka-desc-mobile-header .ka-btn { height: 40px; padding: 0 16px; font-size: .95rem; } } /* ───── Abhängigkeiten-Popup ───── */ .ka-deps-content { display: flex; flex-direction: column; gap: 6px; } .ka-deps-section-title { margin: 8px 0 4px; font-size: .85rem; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; } .ka-deps-list { display: flex; flex-direction: column; gap: 4px; min-height: 28px; } .ka-deps-empty { color: var(--text-subtle); font-size: .9rem; margin: 0; padding: 6px 0; } .ka-deps-loading { color: var(--text-subtle); font-size: .9rem; margin: 0; } /* dep row in popup panel */ .ka-dep-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg-card); border-radius: 6px; border: 1px solid var(--border); } .ka-dep-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ka-dep-title-line { display: flex; align-items: center; gap: 4px; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ka-dep-arch-icon { flex-shrink: 0; opacity: .6; line-height: 1; } .ka-dep-arch-icon .ka-icon { width: 13px; height: 13px; } .ka-dep-meta { font-size: .78rem; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ka-deps-add-btn { margin-top: 4px; background: none; border: 1px dashed var(--border); color: var(--text-subtle); border-radius: 6px; padding: 6px 10px; font-size: .88rem; cursor: pointer; width: 100%; text-align: left; min-height: var(--tap); } .ka-deps-add-btn:hover { background: var(--bg-hover); color: var(--text); } .ka-deps-search-content { display: flex; flex-direction: column; gap: 8px; } .ka-deps-results { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; } /* dep search result row — 2-line with plus button */ .ka-dep-result-row { display: flex; align-items: stretch; gap: 6px; padding: 6px 8px; background: var(--bg-card); border-radius: 6px; border: 1px solid var(--border); } .ka-dep-result-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; } .ka-dep-add-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; padding: 0 10px; } .ka-dep-add-btn .ka-icon { width: 16px; height: 16px; } .ka-dep-add-btn:disabled { opacity: .5; cursor: default; } /* inline deps above description */ .ka-dep-inline-section { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; } .ka-dep-inline-section:empty { padding: 0; } .ka-dep-inline-head { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-top: 6px; } .ka-dep-inline-item { display: flex; align-items: center; gap: 6px; font-size: .88rem; } .ka-dep-inline-icon { flex-shrink: 0; line-height: 1; } .ka-dep-inline-icon .ka-icon { width: 14px; height: 14px; } .ka-dep-inline-icon--done .ka-icon { color: #4caf50; } .ka-dep-inline-icon--open .ka-icon { color: #f44336; } .ka-dep-inline-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); word-break: break-word; } /* ───── Mitglieder & Rechte-Popup ───── */ .ka-modal-members { max-height: 85vh; overflow-y: auto; } .ka-members-content { display: flex; flex-direction: column; } .ka-members-section-head { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin: 14px 0 6px; } .ka-members-section-head:first-child { margin-top: 0; } .ka-members-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .ka-member-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg-card); border-radius: 6px; border: 1px solid var(--border); } .ka-member-name { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; } .ka-member-display-name { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ka-member-handle { font-size: .75rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ka-member-add-row { display: flex; align-items: center; gap: 6px; padding: 4px 0 2px; flex-wrap: wrap; } .ka-member-add-row select { flex: 1 1 120px; min-width: 0; } .ka-perm-group-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .ka-perm-group-row { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; background: var(--bg-card); border-radius: 6px; border: 1px solid var(--border); } .ka-perm-group-row-head { display: flex; align-items: center; gap: 6px; } .ka-perm-group-row-actions { display: flex; gap: 2px; margin-left: auto; } .ka-perm-group-name { font-size: .92rem; font-weight: 500; } .ka-perm-group-admin { font-size: .72rem; padding: 1px 6px; background: var(--accent); color: #fff; border-radius: 4px; } .ka-perm-rights { display: flex; flex-wrap: wrap; gap: 4px; } .ka-perm-right-chip { font-size: .72rem; padding: 1px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text-subtle); } .ka-perm-right-none { font-size: .78rem; color: var(--text-dim); font-style: italic; } .ka-perm-group-create-row { display: flex; align-items: center; gap: 6px; padding-top: 2px; } .ka-perm-group-create-row input { flex: 1 1 0; min-width: 0; } .ka-perm-rights-editor { display: flex; flex-direction: column; gap: 1px; } .ka-perm-right-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .ka-perm-right-row label { font-size: .9rem; cursor: pointer; } .ka-form-label { font-size: .78rem; color: var(--text-dim); font-weight: 600; margin-bottom: 4px; } .ka-modal-group-editor { max-width: 380px; } /* ───── Archiv-Toggle in Suchpopups ───── */ .ka-filter-archive-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; margin-bottom: 4px; } .ka-filter-archive-label { font-size: .88rem; color: var(--text-dim); cursor: pointer; user-select: none; } /* ───── Abhängigkeiten-Entfernen-Button (Danger) ───── */ .ka-dep-remove-btn { color: var(--danger) !important; } /* ───── Gespeicherte Filter: größere Pills auf Mobile ───── */ @media (max-width: 599px) { .ka-filter-saved-chip { font-size: 14px; padding: 6px 6px 6px 12px; } .ka-filter-saved-chip-del { width: 24px; height: 24px; } .ka-filter-saved-chip-del .ka-icon { width: 14px; height: 14px; } } /* ───── Karten-Mitglieder: Avatar-Chips ───── */ .ka-member-avatar-chip { border-radius: 50%; flex-shrink: 0; overflow: hidden; background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-transform: uppercase; background-color: var(--accent); color: #fff; border: 2px solid var(--bg-card); user-select: none; } /* Listenansicht: Mitglieder-Reihe am Ende der Karte */ .ka-card-members { display: flex; align-items: center; gap: 2px; padding: 0 8px 8px; flex-wrap: wrap; } /* Modal-Metazeile: Mitglieder-Block */ .ka-cm-members-block { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; cursor: pointer; } .ka-cm-members-block:hover .ka-member-avatar-chip { border-color: var(--accent); } /* Mitglieder-Picker-Popup */ .ka-members-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; } .ka-member-picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border); } .ka-member-picker-name { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ka-member-picker-display { font-size: .9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ka-member-picker-handle { font-size: .78rem; color: var(--text-dim); } /* ───── Fullscreen-Modals auf Mobile ───── */ @media (max-width: 599px) { .ka-modal-backdrop--fullscreen { padding: 0; display: block; overflow: hidden; height: 100dvh; } .ka-modal--fullscreen { border-radius: 0; height: 100dvh; max-width: 100%; max-height: none; margin: 0; overflow: hidden; box-shadow: none; padding: 0; display: flex; flex-direction: column; } .ka-modal--fullscreen .ka-panel-overlay-title { flex-shrink: 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 12px 16px; margin-bottom: 0; } .ka-modal--fullscreen .ka-modal-body { flex: 1; overflow-y: auto; padding: 16px; } .ka-modal--fullscreen .ka-modal-actions { flex-shrink: 0; padding: 12px 16px; margin-top: 0; border-top: 1px solid var(--border); } }