/* IdTify Work – Frontend-Arbeitsbereich */ /* Tokens gelten auch für Modal und Toast – die hängen am , nicht in .idwf. */ .idwf, .idwf-modal, .idwf-toast { --f-bg: #faf9fb; --f-card: #fff; --f-line: #ececf1; --f-line-soft: #f3f2f6; --f-text: #23232e; --f-muted: #7b7b8c; --f-accent: #6c4bd8; --f-accent-soft: #f0ecfb; --f-warn: #d6335c; --f-warn-soft: #ffe8ee; --f-soon: #c2711a; --f-soon-soft: #fff0dd; --f-ok: #1f9d6d; --f-radius: 12px; --f-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .idwf-modal *, .idwf-modal *::before, .idwf-modal *::after { box-sizing: border-box; } .idwf-noscroll { overflow: hidden; } .idwf { box-sizing: border-box; font-family: var(--f-font); color: var(--f-text); font-size: 14px; line-height: 1.5; } .idwf *, .idwf *::before, .idwf *::after { box-sizing: inherit; } .idwf__boot { color: var(--f-muted); padding: 24px; } /* ------------------------------------------------------- App-Rahmen */ .idwa { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 640px; background: var(--f-card); border: 1px solid var(--f-line); border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(24, 20, 40, .04); } /* Seitenleiste */ .idwa-side { display: flex; flex-direction: column; gap: 2px; background: #fff; border-right: 1px solid var(--f-line); padding: 14px 10px 10px; min-width: 0; } .idwa-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 14px; } .idwa-brand__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--f-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; } .idwa-brand__name { font-weight: 750; font-size: 16px; letter-spacing: -.01em; } .idwa-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; min-height: 0; } .idwa-nav__item { appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--f-text); display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 9px; border-radius: 8px; cursor: pointer; line-height: 1.35; } .idwa-nav__item:hover { background: var(--f-line-soft); } .idwa-nav__item.is-active { background: var(--f-accent-soft); color: var(--f-accent); font-weight: 600; } .idwa-nav__item--sub { font-size: 13px; color: var(--f-text); padding-left: 10px; } .idwa-nav__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-nav__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; } .idwa-nav__label { font-size: 11px; text-transform: none; color: var(--f-muted); font-weight: 650; padding: 16px 9px 5px; letter-spacing: .01em; } .idwa-nav__hint { font-size: 12px; color: var(--f-muted); padding: 2px 9px 6px; font-style: italic; } .idwa-nav__badge { margin-left: auto; background: var(--f-warn-soft); color: var(--f-warn); border-radius: 99px; padding: 0 7px; font-size: 11px; font-weight: 700; } .idwa-me { display: flex; align-items: center; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--f-line); margin-top: 8px; } .idwa-me__name { font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-iconlink { color: var(--f-muted); text-decoration: none; display: inline-flex; padding: 4px; border-radius: 6px; font-size: 14px; } .idwa-iconlink:hover { background: var(--f-line-soft); color: var(--f-accent); } .idwa-ico { width: 18px; height: 18px; flex: 0 0 auto; } .idwa-ico--sm { width: 15px; height: 15px; } .idwa-ico--pill { width: 12px; height: 12px; margin-right: 3px; } .idwa-ico--crumb { width: 16px; height: 16px; color: var(--f-muted); } .idwa-ico--folder { width: 17px; height: 17px; color: var(--f-muted); } .idwa-ico--tick { width: 14px; height: 14px; } /* Hauptbereich */ .idwa-main { display: flex; flex-direction: column; min-width: 0; background: var(--f-bg); } .idwa-top { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--f-line); background: #fff; } .idwa-burger { display: none; appearance: none; border: 1px solid var(--f-line); background: #fff; border-radius: 8px; padding: 5px; cursor: pointer; color: var(--f-text); } .idwa-crumb { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; min-width: 0; } .idwa-crumb__sep { color: var(--f-muted); font-weight: 400; } .idwa-crumb__cur { color: var(--f-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-top__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .idwa-chip { appearance: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--f-line); background: #fff; color: var(--f-text); font: inherit; font-size: 13px; border-radius: 99px; padding: 6px 13px; } .idwa-chip:hover { border-color: var(--f-accent); color: var(--f-accent); } .idwa-chip.is-on { background: var(--f-accent); border-color: var(--f-accent); color: #fff; } .idwa-chip__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-chip__time { font-variant-numeric: tabular-nums; } .idwa-content { padding: 18px; overflow-y: auto; flex: 1; } .idwa-scrim { display: none; } /* Widgets */ .idwa-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .idwa-wcol { display: grid; gap: 14px; align-content: start; min-width: 0; } .idwa-single { display: grid; gap: 14px; max-width: 900px; } .idwa-w { background: #fff; border: 1px solid var(--f-line); border-radius: var(--f-radius); overflow: hidden; } .idwa-w__head { display: flex; align-items: center; gap: 10px; padding: 13px 15px 9px; } .idwa-w__head h2 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; letter-spacing: -.01em; } .idwa-w__body { padding: 0 15px 13px; max-height: 560px; overflow-y: auto; } .idwa-w--notes { background: #fff8e9; border-color: #f3e5c6; } .idwa-wbtn { appearance: none; border: 1px solid var(--f-line); background: #fff; border-radius: 7px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--f-muted); } .idwa-wbtn:hover { color: var(--f-accent); border-color: var(--f-accent); } .idwa-group { font-size: 11.5px; font-weight: 700; color: var(--f-muted); padding: 12px 0 5px; } .idwa-group--row { display: flex; align-items: center; gap: 8px; } .idwa-group__sum { margin-left: auto; font-variant-numeric: tabular-nums; } .idwa-empty { color: var(--f-muted); font-style: italic; padding: 6px 0 10px; margin: 0; } .idwa-muted { color: var(--f-muted); font-size: 12.5px; } /* Aufgabenzeile */ .idwa-task { display: flex; align-items: center; gap: 9px; padding: 6px 0; min-width: 0; } .idwa-task:hover { background: var(--f-line-soft); border-radius: 8px; } .idwa-tick { appearance: none; width: 21px; height: 21px; flex: 0 0 auto; border: 1.6px solid #d7d6de; border-radius: 50%; background: #fff; color: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .idwa-tick:hover { border-color: var(--f-ok); color: var(--f-ok); background: #effaf5; } .idwa-task__title { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--f-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-task__title:hover { color: var(--f-accent); } .idwa-task__meta { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; } .idwa-task.is-late .idwa-task__title { color: var(--f-text); } .idwa-task.is-done { opacity: .5; } .idwa-task.is-done .idwa-task__title { text-decoration: line-through; } .idwa-pill { display: inline-flex; align-items: center; background: #f2f1f6; color: var(--f-muted); border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 650; white-space: nowrap; } .idwa-pill--date.is-today, .idwa-pill--date.is-over { background: var(--f-warn-soft); color: var(--f-warn); } .idwa-pill--date.is-soon { background: var(--f-soon-soft); color: var(--f-soon); } .idwa-pill.is-prio { background: #fff0dd; color: var(--f-soon); } .idwa-ava { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: .02em; object-fit: cover; } .idwa-ava--xs { width: 21px; height: 21px; font-size: 9px; } .idwa-ava--lg { width: 40px; height: 40px; font-size: 13px; } .idwa-rowplay { appearance: none; border: 1px solid transparent; background: none; border-radius: 6px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #b9b8c4; padding: 0; } .idwa-rowplay:hover { color: var(--f-accent); border-color: var(--f-line); background: #fff; } .idwa-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--f-muted); } /* Projektzeile im Widget */ .idwa-prow { appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--f-text); } .idwa-prow:hover { background: var(--f-line-soft); } .idwa-prow__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-prow__meta { color: var(--f-muted); font-size: 12px; } /* Zeit-Ring */ .idwa-ring__wrap { display: grid; justify-items: center; gap: 10px; padding: 6px 0 10px; } .idwa-ring__box { position: relative; width: 168px; height: 168px; } .idwa-ring { width: 100%; height: 100%; display: block; } .idwa-ring__fill { transition: stroke-dashoffset .6s linear; } .idwa-ring__center { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; } .idwa-ring__time { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .idwa-ring__date { font-size: 12px; color: var(--f-muted); } .idwa-ring__actions { display: flex; gap: 10px; } .idwa-rbtn { appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--f-line); background: #fff; cursor: pointer; color: var(--f-muted); display: inline-flex; align-items: center; justify-content: center; } .idwa-rbtn:hover { border-color: var(--f-accent); color: var(--f-accent); } .idwa-rbtn--play { background: var(--f-accent); border-color: var(--f-accent); color: #fff; } .idwa-rbtn--play:hover { background: #5b3cc4; color: #fff; } .idwa-rbtn--stop { background: var(--f-warn); border-color: var(--f-warn); color: #fff; } .idwa-rbtn--stop:hover { color: #fff; } /* Notizen */ .idwa-notes { width: 100%; border: 0; background: transparent; resize: vertical; font: inherit; font-size: 13.5px; color: var(--f-text); min-height: 80px; outline: none; padding: 2px 0; } .idwa-notes::placeholder { color: #c2ac7c; } /* Aktivitäten */ .idwa-actday { display: flex; align-items: center; gap: 10px; color: var(--f-muted); font-size: 11.5px; padding: 12px 0 6px; } .idwa-actday::before, .idwa-actday::after { content: ""; flex: 1; height: 1px; background: var(--f-line); } .idwa-act { display: flex; gap: 9px; padding: 5px 0; } .idwa-act__mark { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: #c9c8d2; } .idwa-act__mark--task_created { background: var(--f-ok); } .idwa-act__mark--task_status { background: var(--f-accent); } .idwa-act__mark--time_added { background: #3b82c4; } .idwa-act__mark--project_created { background: var(--f-soon); } .idwa-act__body { min-width: 0; display: grid; gap: 3px; } .idwa-act__chip { display: inline-block; background: #f2f1f6; color: var(--f-muted); border-radius: 6px; padding: 1px 7px; font-size: 11px; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-act__text { font-size: 12.5px; color: var(--f-text); } /* Toolbar / Kopf einer Ansicht */ .idwa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } .idwa-toolbar__label { font-size: 13.5px; font-weight: 600; } .idwa-phead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } .idwa-phead__dot { width: 12px; height: 12px; border-radius: 4px; } .idwa-phead__title { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.015em; } .idwa-phead__spacer { flex: 1; } .idwa-track { height: 6px; background: #eceaf2; border-radius: 99px; overflow: hidden; margin-bottom: 16px; } .idwa-track--sm { width: 90px; margin: 0; } .idwa-track__fill { height: 100%; background: var(--f-accent); border-radius: 99px; } .idwa-track__fill.is-over { background: var(--f-warn); } /* Board */ .idwa-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; } .idwa-col { background: #f4f3f7; border-radius: var(--f-radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .idwa-col__head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 4px; } .idwa-col__head h3 { margin: 0; font-size: 13px; font-weight: 700; } .idwa-col__dot { width: 8px; height: 8px; border-radius: 50%; background: #b9b8c4; } .idwa-col__dot--progress { background: #3b82c4; } .idwa-col__dot--review { background: var(--f-soon); } .idwa-col__dot--done { background: var(--f-ok); } .idwa-count { background: #fff; border-radius: 99px; padding: 1px 8px; font-size: 11px; color: var(--f-muted); } .idwa-col__list { display: flex; flex-direction: column; gap: 8px; min-height: 34px; border-radius: 9px; } .idwa-col__list.is-over { background: rgba(108, 75, 216, .09); outline: 2px dashed rgba(108, 75, 216, .35); outline-offset: 2px; } .idwa-col__add { appearance: none; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--f-muted); text-align: left; cursor: pointer; padding: 3px 2px; border-radius: 6px; } .idwa-col__add:hover { color: var(--f-accent); background: #fff; } .idwa-bcard { background: #fff; border: 1px solid var(--f-line); border-left: 3px solid transparent; border-radius: 10px; padding: 10px; display: grid; gap: 8px; box-shadow: 0 1px 2px rgba(24, 20, 40, .05); } .idwa-bcard.is-drag { opacity: .45; } .idwa-bcard.is-prio { border-left-color: #e5a13a; } .idwa-bcard.is-late { border-left-color: var(--f-warn); } .idwa-bcard__title { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; color: var(--f-text); } .idwa-bcard__title:hover { color: var(--f-accent); } .idwa-bcard__meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .idwa-move { border: 1px solid var(--f-line); border-radius: 7px; font-size: 11px; padding: 2px 4px; background: #fff; color: var(--f-muted); max-width: 120px; margin-left: auto; } /* Zeit- und Listenzeilen */ .idwa-entry { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--f-line-soft); cursor: pointer; } .idwa-entry:first-of-type { border-top: 0; } .idwa-entry:hover { background: var(--f-line-soft); } .idwa-entry__main { flex: 1; min-width: 0; display: grid; } .idwa-entry__main strong { font-size: 13.5px; font-weight: 600; } .idwa-entry__main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-entry__dur { font-variant-numeric: tabular-nums; font-size: 13.5px; } /* Projektkarten */ .idwa-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .idwa-pcard { background: #fff; border: 1px solid var(--f-line); border-radius: var(--f-radius); padding: 14px; display: grid; gap: 8px; align-content: start; } .idwa-pcard__head { display: flex; align-items: center; gap: 8px; } .idwa-pcard__title { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--f-text); flex: 1; text-align: left; } .idwa-pcard__title:hover { color: var(--f-accent); } .idwa-pcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .idwa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .idwa-kpi { background: #fff; border: 1px solid var(--f-line); border-radius: var(--f-radius); padding: 12px 14px; display: grid; gap: 2px; } .idwa-kpi__l { font-size: 11.5px; color: var(--f-muted); font-weight: 600; } .idwa-kpi__v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } /* ---------------------------------------------------- Buttons/Formulare */ .idwf-btn { appearance: none; border: 1px solid var(--f-line); background: #fff; color: var(--f-text); border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; } .idwf-btn:hover { background: #f5f4f8; color: var(--f-text); } .idwf-btn--primary { background: #6c4bd8; background: var(--f-accent, #6c4bd8); border-color: var(--f-accent, #6c4bd8); color: #fff; } .idwf-btn--primary:hover { background: #5b3cc4; color: #fff; } .idwf-btn--ghost { background: transparent; border-color: transparent; color: var(--f-muted); } .idwf-btn--danger { border-color: #f0bcc9; color: var(--f-warn); margin-left: auto; } .idwf-btn--sm { padding: 6px 11px; font-size: 12.5px; } .idwf-input { width: 100%; border: 1px solid var(--f-line); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--f-text); } .idwf-input:focus { outline: 2px solid var(--f-accent-soft); border-color: var(--f-accent); } .idwf-input--inline { width: auto; min-width: 150px; max-width: 220px; padding: 7px 10px; font-size: 13px; } .idwf-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; font-family: var(--f-font); } .idwf-modal[hidden] { display: none; } .idwf-modal__backdrop { position: absolute; inset: 0; background: rgba(24, 20, 40, .5); } .idwf-modal__box { position: relative; background: #fff; width: 100%; max-width: 540px; max-height: 92vh; overflow: auto; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(24, 20, 40, .3); color: var(--f-text); } .idwf-modal__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--f-line); position: sticky; top: 0; background: #fff; } .idwf-modal__head h2 { margin: 0; font-size: 17px; font-weight: 700; flex: 1; } .idwf-modal__x { appearance: none; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--f-muted); } .idwf-form { padding: 18px; display: grid; gap: 14px; } .idwf-field { display: grid; gap: 5px; } .idwf-field--inline { grid-template-columns: auto 1fr; align-items: center; gap: 10px; } .idwf-field--inline .idwf-field__label { order: 2; } .idwf-field__label { font-size: 12.5px; font-weight: 650; color: var(--f-muted); } .idwf-form__foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 2; margin: 2px -18px -18px; padding: 14px 18px; background: #fff; border-top: 1px solid var(--f-line); } /* Login */ .idwf--login { display: flex; justify-content: center; padding: 24px 0; } .idwf-loginbox { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--f-line); border-radius: var(--f-radius); padding: 26px; } .idwf-loginbox h2 { margin: 0 0 4px; font-size: 20px; font-weight: 750; } .idwf-loginbox__sub { color: var(--f-muted); font-size: 14px; margin: 0 0 16px; } .idwf-loginbox input[type="text"], .idwf-loginbox input[type="password"] { width: 100%; border: 1px solid var(--f-line); border-radius: 9px; padding: 10px 12px; font: inherit; } .idwf-loginbox .login-submit input, .idwf-loginbox input[type="submit"] { background: var(--f-accent); border: 0; color: #fff; border-radius: 9px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; } .idwf-loginbox p { margin: 0 0 12px; } .idwf-loginbox__foot { font-size: 13px; margin: 12px 0 0; } .idwf--notice { background: #fff; border: 1px solid var(--f-line); border-radius: var(--f-radius); padding: 20px; } /* Toast */ .idwf-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 100000; background: #23232e; color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13.5px; font-family: var(--f-font); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); transition: opacity .4s, transform .4s; max-width: 90vw; } .idwf-toast.is-error { background: var(--f-warn); } .idwf-toast.is-out { opacity: 0; } /* ------------------------------------------------------------ Mobil */ @media (max-width: 1100px) { .idwa-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .idwa-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .idwa { grid-template-columns: minmax(0, 1fr); border-radius: 12px; min-height: 520px; } .idwa-side { position: absolute; inset: 0 auto 0 0; width: 262px; z-index: 30; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(24, 20, 40, .18); } .idwa-side.is-open { transform: none; } .idwa-scrim { display: block; position: absolute; inset: 0; background: rgba(24, 20, 40, .35); z-index: 20; } .idwa-burger { display: inline-flex; } .idwa-widgets, .idwa-board { grid-template-columns: minmax(0, 1fr); } .idwa-content { padding: 14px; } .idwa-chip__label { display: none; } .idwa-move { display: inline-block; } } @media (min-width: 861px) { .idwa-move { display: none; } } /* Suche */ .idwa-search { appearance: none; display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; border: 1px solid var(--f-line); background: #fff; border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--f-muted); margin-bottom: 8px; } .idwa-search:hover { border-color: var(--f-accent); color: var(--f-accent); } .idwa-kbd { margin-left: auto; border: 1px solid var(--f-line); border-radius: 5px; padding: 0 6px; font-size: 11px; font-family: inherit; color: var(--f-muted); background: var(--f-line-soft); } .idwf-modal__box--search { max-width: 560px; } .idwa-searchbody { padding: 16px 18px 18px; display: grid; gap: 12px; } .idwa-results { display: grid; gap: 2px; max-height: 52vh; overflow-y: auto; } .idwa-result { appearance: none; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--f-text); } .idwa-result:hover { background: var(--f-line-soft); } .idwa-result__main { display: grid; min-width: 0; } .idwa-result__main strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-prow__meta.is-over { color: var(--f-warn); font-weight: 700; } @media (min-width: 640px) { .idwf-modal { align-items: center; } .idwf-modal__box { border-radius: 16px; box-shadow: 0 24px 60px rgba(24, 20, 40, .3); } } /* Vollbreite: [idtify_work full="1"] */ .idwf.idwa-full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; min-height: calc(100vh - 60px); } .idwf.idwa-full .idwa-content { max-height: none; } /* --------------------------------------------------------- Ansichten */ .idwa-views { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 0; align-items: start; } .idwa-vlist { display: flex; flex-direction: column; gap: 1px; padding-right: 14px; border-right: 1px solid var(--f-line); min-height: 400px; } .idwa-vnew { justify-content: center; margin-bottom: 10px; } .idwa-vitem { appearance: none; border: 0; background: none; font: inherit; font-size: 13px; color: var(--f-text); display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 9px; border-radius: 8px; cursor: pointer; } .idwa-vitem:hover { background: var(--f-line-soft); } .idwa-vitem.is-active { background: var(--f-accent-soft); color: var(--f-accent); font-weight: 600; } .idwa-vitem .idwa-ico { color: var(--f-muted); } .idwa-vitem.is-active .idwa-ico { color: var(--f-accent); } .idwa-vshared { margin-left: auto; color: #e0a91b; font-size: 12px; } .idwa-vmain { padding-left: 16px; min-width: 0; } .idwa-vbar { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--f-line); } .idwa-vbar .idwa-ico { color: var(--f-muted); } .idwa-vsearch { border: 0; background: none; font: inherit; font-size: 13.5px; padding: 6px 0; flex: 1; min-width: 60px; outline: none; color: var(--f-text); } .idwa-vbar__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .idwa-seg { display: inline-flex; border: 1px solid var(--f-line); border-radius: 8px; overflow: hidden; } .idwa-seg__b { appearance: none; border: 0; background: #fff; font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer; color: var(--f-muted); } .idwa-seg__b.is-on { background: var(--f-accent-soft); color: var(--f-accent); font-weight: 650; } .idwa-groupsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--f-muted); } .idwa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 11px 0; } .idwa-fchip { display: inline-flex; align-items: center; gap: 6px; background: var(--f-accent-soft); color: var(--f-accent); border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 12px; font-weight: 600; } .idwa-fchip__x { appearance: none; border: 0; background: rgba(108, 75, 216, .14); color: inherit; border-radius: 50%; width: 17px; height: 17px; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; } .idwa-fchip__x:hover { background: rgba(108, 75, 216, .3); } .idwa-fadd { appearance: none; border: 1px dashed var(--f-line); background: none; color: var(--f-muted); border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; } .idwa-fadd:hover { border-color: var(--f-accent); color: var(--f-accent); } .idwa-vsave { margin-left: auto; display: flex; gap: 6px; } .idwa-thead { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); font-size: 11px; font-weight: 700; color: var(--f-muted); } .idwa-thead__key { width: 74px; } .idwa-thead__right { font-weight: 600; } .idwa-ghead { appearance: none; border: 0; background: var(--f-line-soft); width: 100%; font: inherit; display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--f-text); border-bottom: 1px solid var(--f-line); } .idwa-ghead .idwa-count { margin-left: auto; } .idwa-chev { transition: transform .15s; color: var(--f-muted); } .idwa-ghead.is-closed .idwa-chev { transform: rotate(-90deg); } .idwa-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-bottom: 1px solid var(--f-line-soft); min-width: 0; } .idwa-row:hover { background: #faf9fd; } .idwa-row.is-done .idwa-row__name { text-decoration: line-through; color: var(--f-muted); } .idwa-row__key { width: 74px; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--f-muted); background: var(--f-line-soft); border-radius: 5px; padding: 2px 6px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-row__status { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; } .idwa-sicon { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid #d7d6de; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; } .idwa-sicon.is-progress { background: #f0d9a6; border-color: #e8c477; color: #7a5a12; } .idwa-sicon.is-review { background: #d9e6f7; border-color: #b6cdea; } .idwa-sicon.is-done { background: var(--f-ok); border-color: var(--f-ok); } .idwa-row__name { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; color: var(--f-text); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-row__name:hover { color: var(--f-accent); } .idwa-row__project { display: inline-flex; align-items: center; gap: 4px; color: var(--f-muted); font-size: 12px; min-width: 0; } .idwa-row__project span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .idwa-row__spacer { flex: 1; } .idwa-flag { color: var(--f-warn); display: inline-flex; } .idwa-pill--est { background: #fff; border: 1px solid var(--f-line); } .idwa-ava--empty { background: #eceaf2; color: #a8a6b4; } @media (max-width: 860px) { .idwa-views { grid-template-columns: minmax(0, 1fr); } .idwa-vlist { border-right: 0; border-bottom: 1px solid var(--f-line); padding: 0 0 10px; margin-bottom: 12px; min-height: 0; flex-direction: row; overflow-x: auto; } .idwa-vlist .idwa-nav__label { display: none; } .idwa-vitem { width: auto; white-space: nowrap; } .idwa-vmain { padding-left: 0; } .idwa-row__key, .idwa-row__project { display: none; } .idwa-row__name { max-width: none; } } /* Mehrfachauswahl */ .idwa-cb { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--f-accent); cursor: pointer; margin: 0; } .idwa-row.is-sel { background: var(--f-accent-soft); } .idwa-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; background: var(--f-accent-soft); border: 1px solid #ddd3f7; border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--f-accent); } .idwa-bulk[hidden] { display: none; } .idwa-bulk .idwf-btn--danger { margin-left: 0; } /* ------------------------------------------------------------ Planer */ .idwa-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; } .idwa-plan__month { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; } .idwa-plan__kw { font-size: 14px; font-weight: 600; color: var(--f-accent); } .idwa-plan__sum { display: flex; gap: 14px; flex-wrap: wrap; } .idwa-plan__nav { display: flex; gap: 6px; } .idwa-users { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--f-line); } .idwa-users__label { font-size: 11.5px; font-weight: 700; color: var(--f-muted); margin-right: 6px; } .idwa-uchip { appearance: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--f-line); background: #fff; border-radius: 99px; padding: 4px 12px 4px 5px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--f-text); } .idwa-uchip:hover { border-color: var(--f-accent); } .idwa-uchip.is-active { background: var(--f-accent-soft); border-color: #d7cbf7; color: var(--f-accent); } .idwa-ava--all { background: #8b8a99 !important; } .idwa-plan { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start; } .idwa-plan__side { background: #fff; border: 1px solid var(--f-line); border-radius: var(--f-radius); padding: 12px; } .idwa-plan__sidehead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .idwa-plan__sidehead h2 { margin: 0; font-size: 13.5px; font-weight: 700; } .idwa-pool { display: flex; flex-direction: column; gap: 7px; min-height: 120px; border-radius: 9px; padding: 2px; } .idwa-pool.is-over, .idwa-day__lane.is-over { background: rgba(108, 75, 216, .09); outline: 2px dashed rgba(108, 75, 216, .35); outline-offset: 2px; } .idwa-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; } .idwa-day { background: #fff; border: 1px solid var(--f-line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 200px; } .idwa-day.is-weekend { background: #faf9fb; } .idwa-day.is-today { border-color: var(--f-accent); box-shadow: 0 0 0 1px var(--f-accent-soft); } .idwa-day__head { display: flex; align-items: center; gap: 5px; padding-bottom: 6px; border-bottom: 1px solid var(--f-line-soft); flex-wrap: wrap; } .idwa-day__wd { font-size: 11.5px; color: var(--f-muted); font-weight: 650; } .idwa-day__num { font-size: 15px; font-weight: 750; } .idwa-day.is-today .idwa-day__num { color: var(--f-accent); } .idwa-day__lane { display: flex; flex-direction: column; gap: 7px; min-height: 60px; border-radius: 8px; } .idwa-day__sep { font-size: 10.5px; font-weight: 700; color: var(--f-muted); padding-top: 4px; border-top: 1px dashed var(--f-line); } .idwa-pill.is-over { background: var(--f-warn-soft); color: var(--f-warn); } .idwa-chipcard { position: relative; background: #fff; border: 1px solid var(--f-line); border-radius: 9px; padding: 8px 8px 8px 11px; display: grid; gap: 6px; cursor: grab; overflow: hidden; box-shadow: 0 1px 2px rgba(24, 20, 40, .05); } .idwa-chipcard.is-drag { opacity: .45; } .idwa-chipcard.is-prio { border-color: #f0d5a6; } .idwa-chipcard__bar { position: absolute; inset: 0 auto 0 0; width: 3px; } .idwa-chipcard__title { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; color: var(--f-text); line-height: 1.35; } .idwa-chipcard__title:hover { color: var(--f-accent); } .idwa-chipcard__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .idwa-chipcard__proj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .idwa-tblock { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--f-muted); padding: 3px 0; } .idwa-tblock__txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1200px) { .idwa-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 860px) { .idwa-plan { grid-template-columns: minmax(0, 1fr); } .idwa-week { grid-template-columns: minmax(0, 1fr); } .idwa-day { min-height: 0; } } /* Planer: Teamraster */ .idwa-tgrid { display: grid; gap: 6px; align-items: stretch; } .idwa-tgrid__corner { font-size: 11.5px; font-weight: 700; color: var(--f-muted); padding: 6px 4px; } .idwa-tgrid__day { display: flex; align-items: baseline; gap: 5px; padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--f-line); } .idwa-tgrid__day.is-weekend { background: #f8f7fa; } .idwa-tgrid__day.is-today { border-color: var(--f-accent); } .idwa-tgrid__day .idwa-pill { margin-left: auto; } .idwa-tgrid__user { display: flex; align-items: center; gap: 8px; padding: 10px 6px; min-width: 0; } .idwa-tgrid__uname { display: grid; min-width: 0; } .idwa-tgrid__uname strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-tcell { background: #fff; border: 1px solid var(--f-line); border-radius: 9px; padding: 6px; min-height: 74px; display: flex; flex-direction: column; gap: 6px; position: relative; } .idwa-tcell.is-weekend { background: #faf9fb; } .idwa-tcell.is-today { border-color: #d7cbf7; } .idwa-tcell.is-over { background: rgba(108, 75, 216, .09); outline: 2px dashed rgba(108, 75, 216, .35); } .idwa-tcell__sum { align-self: flex-end; font-size: 10.5px; font-weight: 700; color: var(--f-muted); } .idwa-tcell__sum.is-over { color: var(--f-warn); } /* Tageskopf einzeilig halten, Text sauber kürzen */ .idwa-day__head { flex-wrap: nowrap; } .idwa-day__head .idwa-pill { padding: 2px 6px; font-size: 10.5px; } .idwa-chipcard__meta { min-width: 0; } .idwa-chipcard__proj { flex: 1 1 40px; min-width: 0; } @media (max-width: 1200px) { .idwa-tgrid { grid-template-columns: 120px repeat(7, minmax(0, 1fr)) !important; } } @media (max-width: 860px) { .idwa-tgrid { grid-template-columns: 90px repeat(7, minmax(64px, 1fr)) !important; overflow-x: auto; } .idwa-tgrid__uname span { display: none; } } /* -------------------------------------------- Planer: Stundenraster */ .idwa-cal { background: #fff; border: 1px solid var(--f-line); border-radius: var(--f-radius); overflow: hidden; } .idwa-cal__row { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); } .idwa-cal__head { border-bottom: 1px solid var(--f-line); background: #fff; position: sticky; top: 0; z-index: 3; } .idwa-cal__axis { border-right: 1px solid var(--f-line); } .idwa-cal__axis--label { font-size: 10.5px; color: var(--f-muted); padding: 6px 6px 0; text-align: right; } .idwa-cal__axis--hours { display: flex; flex-direction: column; } .idwa-cal__hour { font-size: 10.5px; color: var(--f-muted); text-align: right; padding: 0 6px; transform: translateY(-6px); flex: 0 0 auto; } .idwa-cal__dayhead { display: flex; align-items: center; gap: 5px; padding: 8px 8px; border-left: 1px solid var(--f-line-soft); flex-wrap: nowrap; } .idwa-cal__dayhead.is-weekend, .idwa-cal__alldaycell.is-weekend, .idwa-cal__col.is-weekend { background: #faf9fb; } .idwa-cal__dayhead.is-today { background: var(--f-accent-soft); } .idwa-cal__dayhead.is-today .idwa-day__num { color: var(--f-accent); } .idwa-cal__dayhead .idwa-pill { padding: 2px 6px; font-size: 10px; } .idwa-cal__add { appearance: none; border: 1px solid var(--f-line); background: #fff; border-radius: 6px; width: 20px; height: 20px; line-height: 1; cursor: pointer; color: var(--f-muted); font-size: 13px; padding: 0; flex: 0 0 auto; } .idwa-cal__add:hover { color: var(--f-accent); border-color: var(--f-accent); } .idwa-cal__allday { border-bottom: 1px solid var(--f-line); min-height: 46px; } .idwa-cal__alldaycell { border-left: 1px solid var(--f-line-soft); padding: 5px; display: flex; flex-direction: column; gap: 5px; min-height: 46px; } .idwa-cal__alldaycell.is-over, .idwa-cal__col.is-over { background: rgba(108, 75, 216, .08); } .idwa-cal__alldaycell .idwa-chipcard { padding: 5px 6px 5px 9px; } .idwa-cal__alldaycell .idwa-chipcard__title { font-size: 11.5px; } .idwa-cal__alldaycell .idwa-chipcard__meta { gap: 4px; } .idwa-cal__alldaycell .idwa-rowplay, .idwa-cal__alldaycell .idwa-chipcard__proj { display: none; } .idwa-cal__body { position: relative; } .idwa-cal__col { position: relative; border-left: 1px solid var(--f-line-soft); background-image: repeating-linear-gradient(to bottom, var(--f-line-soft) 0 1px, transparent 1px 100%); background-repeat: repeat-y; } .idwa-cal__col.is-today { background-color: rgba(108, 75, 216, .035); } .idwa-cblock { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 3px 6px; overflow: hidden; display: grid; align-content: start; gap: 1px; font-size: 11px; z-index: 1; } .idwa-cblock--task { background: #efeafc; border: 1px solid #d9cdf6; border-left: 3px solid var(--f-accent); cursor: grab; color: #3c2b78; } .idwa-cblock--task.is-prio { background: #fdf1e0; border-color: #f0d9ab; } .idwa-cblock--task.is-drag { opacity: .45; } .idwa-cblock--time { left: 34%; background: #eef4fb; border: 1px dashed #c3d6ec; color: #2b4a6b; z-index: 0; } .idwa-cblock__t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwa-cblock__btn { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 650; text-align: left; cursor: pointer; color: inherit; } .idwa-cblock__btn:hover { text-decoration: underline; } .idwa-cblock__s { font-size: 10px; opacity: .8; } .idwa-now { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px solid #f08c1f; z-index: 2; } .idwa-now__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #f08c1f; } .idwa-now__label { position: absolute; left: 4px; top: -9px; background: #f08c1f; color: #fff; font-size: 9.5px; font-weight: 700; border-radius: 4px; padding: 1px 4px; } .idwa-pill--time { background: var(--f-accent-soft); color: var(--f-accent); } @media (max-width: 860px) { .idwa-cal__row { grid-template-columns: 44px repeat(7, minmax(72px, 1fr)); } .idwa-cal { overflow-x: auto; } } .idwa-calwrap { min-width: 0; } .idwa-pill--free { background: #f1f5f9; color: #64748b; border: 1px dashed #cbd5e1; } /* ------------------------------------------------- Aufgaben-Popup */ .idwt { max-width: 660px; } .idwt__head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--f-line); position: sticky; top: 0; background: #fff; z-index: 2; } .idwt__crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--f-muted); } .idwt__act { appearance: none; border: 1px solid transparent; background: none; border-radius: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--f-muted); } .idwt__act:hover { background: var(--f-line-soft); color: var(--f-accent); } .idwt__act.is-on { background: var(--f-accent-soft); color: var(--f-accent); border-color: #ddd3f7; } .idwt__act.is-prio { color: var(--f-warn); background: var(--f-warn-soft); } .idwt__body { padding: 16px 18px 4px; } .idwt__titlerow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .idwt__statusdot { appearance: none; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #d7d6de; background: #fff; cursor: pointer; padding: 0; } .idwt__statusdot.is-progress { border-color: #e8c477; background: #f7e3b8; } .idwt__statusdot.is-review { border-color: #b6cdea; background: #dbe8f8; } .idwt__statusdot.is-done { border-color: var(--f-ok); background: var(--f-ok); } .idwt__title { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 21px; font-weight: 750; letter-spacing: -.02em; color: var(--f-text); padding: 2px 0; outline: none; border-bottom: 1px solid transparent; } .idwt__title:focus { border-bottom-color: var(--f-accent); } .idwt__props { display: grid; gap: 2px; } .idwt__prop { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 0; } .idwt__label { font-size: 12.5px; color: var(--f-muted); font-weight: 600; } .idwt__val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .idwt__input { border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13.5px; color: var(--f-text); min-width: 120px; max-width: 100%; } .idwt__input:hover { background: var(--f-line-soft); } .idwt__input:focus { background: #fff; border-color: var(--f-accent); outline: 2px solid var(--f-accent-soft); } .idwt__until { display: inline-flex; align-items: center; gap: 6px; } .idwt__until.is-hidden { display: none; } .idwt__hint { font-size: 12px; color: var(--f-muted); } .idwt__note { margin: 6px 0 0; font-size: 12px; color: var(--f-accent); background: var(--f-accent-soft); border-radius: 8px; padding: 7px 10px; } .idwt__section { margin-top: 18px; border-top: 1px solid var(--f-line); padding-top: 12px; } .idwt__shead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .idwt__stitle { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--f-muted); } .idwt__shead .idwt__stitle { margin: 0; } .idwt__progress { flex: 1; max-width: 160px; height: 5px; background: #eceaf2; border-radius: 99px; overflow: hidden; } .idwt__progressfill { height: 100%; background: var(--f-ok); border-radius: 99px; } .idwt__desc { width: 100%; border: 1px solid var(--f-line); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 13.5px; color: var(--f-text); resize: vertical; min-height: 84px; background: #fff; } .idwt__desc:focus { outline: 2px solid var(--f-accent-soft); border-color: var(--f-accent); } .idwt__cl { display: flex; align-items: center; gap: 10px; padding: 3px 0; } .idwt__cl.is-done .idwt__cltext { text-decoration: line-through; color: var(--f-muted); } .idwt__clbox { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--f-accent); cursor: pointer; margin: 0; } .idwt__clbox--ghost { border: 1.6px dashed #d7d6de; border-radius: 4px; height: 17px; } .idwt__cltext { flex: 1; min-width: 0; border: 1px solid transparent; background: none; border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 13.5px; color: var(--f-text); } .idwt__cltext:hover { background: var(--f-line-soft); } .idwt__cltext:focus { background: #fff; border-color: var(--f-accent); outline: none; } .idwt__cladd::placeholder { color: var(--f-muted); } .idwt__cldel { appearance: none; border: 0; background: none; cursor: pointer; color: #c3c2cd; font-size: 13px; padding: 3px 5px; border-radius: 6px; flex: 0 0 auto; } .idwt__cldel:hover { color: var(--f-warn); background: var(--f-warn-soft); } .idwa-pill--cl { background: #eaf7f0; color: #17795a; } .idwa-pill--rep { background: var(--f-accent-soft); color: var(--f-accent); } @media (max-width: 620px) { .idwt__prop { grid-template-columns: minmax(0, 1fr); gap: 2px; } .idwt__input { min-width: 0; width: 100%; } } /* Bevorstehende Aufgaben */ .idwa-upcoming { appearance: none; width: 100%; text-align: left; cursor: pointer; margin-top: 10px; border: 1px dashed var(--f-line); background: none; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--f-muted); } .idwa-upcoming:hover { border-color: var(--f-accent); color: var(--f-accent); background: var(--f-accent-soft); } .idwa-pill--soon { background: #eef4fb; color: #2b6cb0; } /* Popup: Kacheln, Personen, Aktivität */ .idwt__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; } .idwt__tile { border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; border: 1px solid transparent; } .idwt__tile--due { background: #fdf0f4; border-color: #f6d8e2; color: #b02a55; } .idwt__tile--plan { background: #fff6e8; border-color: #f4e3c6; color: #a86a12; } .idwt__tile--done { background: #eefaf3; border-color: #cdeadb; color: #16794f; } .idwt__tlabel { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; opacity: .9; } .idwt__tvalue { font-size: 17px; font-weight: 750; letter-spacing: -.01em; } .idwt__tsub { font-size: 11px; opacity: .8; } .idwt__tbar { height: 4px; background: rgba(22, 121, 79, .18); border-radius: 99px; overflow: hidden; margin-top: 3px; } .idwt__tbarfill { height: 100%; background: #16794f; } .idwt__tbarfill.is-over { background: var(--f-warn); } .idwt__people { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; padding: 14px 0 4px; } .idwt__person { display: grid; justify-items: center; gap: 4px; position: relative; } .idwt__pname { font-size: 11.5px; color: var(--f-muted); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idwt__pname--muted { color: #b3b2be; } .idwt__premove { position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--f-line); background: #fff; color: var(--f-muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; display: none; } .idwt__person:hover .idwt__premove { display: block; } .idwt__premove:hover { color: var(--f-warn); border-color: #f0bcc9; } .idwt__padd { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--f-line); background: #fff; color: var(--f-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; } .idwt__padd:hover { border-color: var(--f-accent); color: var(--f-accent); } .idwt__pmenu { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 5; min-width: 190px; background: #fff; border: 1px solid var(--f-line); border-radius: 10px; padding: 5px; box-shadow: 0 12px 30px rgba(24, 20, 40, .18); display: grid; gap: 1px; max-height: 220px; overflow-y: auto; } .idwt__pmenu[hidden] { display: none; } .idwt__pitem { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 7px; cursor: pointer; text-align: left; color: var(--f-text); } .idwt__pitem:hover { background: var(--f-line-soft); } .idwt__msgrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .idwt__msg { flex: 1; border: 1px solid var(--f-line); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13.5px; color: var(--f-text); } .idwt__msg:focus { outline: 2px solid var(--f-accent-soft); border-color: var(--f-accent); } .idwt__send { width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--f-accent); color: #fff; cursor: pointer; font-size: 13px; flex: 0 0 auto; } .idwt__send:hover { background: #5b3cc4; } .idwt__feed { display: block; max-height: 280px; overflow-y: auto; } .idwt__entry { display: flex; align-items: flex-start; gap: 9px; padding: 5px 2px; } .idwt__entrybody { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; } .idwt__entrybody .idwa-act__text, .idwt__comment { font-size: 12.5px; flex: 1 1 auto; min-width: 0; line-height: 1.45; } .idwt__feed .idwa-actday { padding: 10px 0 6px; } .idwt__comment { background: var(--f-line-soft); border-radius: 8px; padding: 6px 9px; } .idwt__acttime { font-size: 10.5px; color: var(--f-muted); flex: 0 0 auto; } .idwa-act__mark--comment { background: var(--f-accent); } .idwa-act__mark--checklist_done, .idwa-act__mark--task_due { background: var(--f-ok); } .idwa-act__mark--task_assigned { background: #d94f70; } .idwa-stack { display: inline-flex; align-items: center; } .idwa-stack .idwa-ava + .idwa-ava { margin-left: -6px; box-shadow: 0 0 0 2px #fff; } .idwa-ava--more { background: #eceaf2; color: var(--f-muted); } @media (max-width: 620px) { .idwt__tiles { grid-template-columns: minmax(0, 1fr); } } .idwt__people--compact { padding: 2px 0; gap: 10px; } .idwt__people--compact .idwt__person { gap: 2px; } .idwa-pcard__foot .idwa-stack { margin-right: auto; }