/* Approved centered task concept. */ #taskDetails.task-concept, #taskDetails.task-concept[aria-hidden="false"] { width: min(1080px, calc(100vw - 64px)) !important; max-width: 1080px !important; height: fit-content !important; max-height: calc(100dvh - 64px) !important; inset: 32px 0 !important; border: 1px solid #dddde6 !important; border-radius: 22px !important; background: #fff !important; color: #262635 !important; box-shadow: 0 20px 80px #24203624 !important; display: block !important; overflow: auto !important; } #detailsBackdrop { backdrop-filter: blur(3px); background: #30304825 !important; } #taskDetails.task-concept[aria-hidden="true"] { display: none !important; } #taskDetails.task-concept .task-properties:not([open]) { display: none !important; } #taskDetails.task-concept .ghost-icon img { display: block; width: 18px; height: 18px; opacity: .55; } .task-actions-menu { position: fixed; inset: auto; margin: 0; width: 216px; padding: 6px; border: 1px solid #e5dfed; border-radius: 10px; background: #fff; box-shadow: 0 10px 36px #35254826; } .task-actions-menu:not(:popover-open) { display: none !important; } .task-actions-menu:popover-open { display: grid; gap: 2px; } #taskDetails.task-concept .task-actions-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 6px; background: #fff; color: #62556f; text-align: left; font: 13px var(--app-font); } #taskDetails.task-concept .task-actions-menu button:hover { background: #f5f0fb; } #taskDetails.task-concept .task-actions-menu button img { opacity: .55; } #taskDetails.task-concept .task-actions-menu #deleteTask { background: transparent !important; color: #b15a70 !important; margin: 0 !important; } #taskDetails.task-concept .task-actions-menu #deleteTask:hover { background: #fff0f4 !important; } #taskDetails.task-concept .tag-option span { text-transform: none !important; font-weight: 500 !important; } #taskDetails.task-concept #subtaskList { gap: 0 !important; } #taskDetails.task-concept .quick-subtask { margin-bottom: 8px !important; } #taskDetails.task-concept .comment-actions { gap: 8px !important; } #taskDetails.task-concept .comment-actions button { min-height: 28px !important; } #taskDetails.task-concept .task-due-remaining[data-state="overdue"] { color: #b8576d !important; } #taskDetails.task-concept .task-due-remaining[data-state="active"] { color: #54816d !important; } #taskDetails.task-concept .concept-head { display: grid !important; grid-template-columns: minmax(0, 1fr) 32px 32px 32px !important; min-height: 64px !important; padding: 14px 28px !important; margin: 0 !important; gap: 12px !important; border-bottom: 1px solid #eae8f0 !important; position: sticky !important; top: 0; z-index: 10; background: #fffffff5 !important; } .concept-breadcrumb { display: flex; align-items: center; gap: 12px; color: #858196; font-size: 13px; min-width: 0; } .concept-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #taskDetails.task-concept .concept-breadcrumb { display: flex !important; flex-direction: row !important; gap: 12px !important; align-items: center !important; } #taskDetails.task-concept .ghost-icon { color: #817b91 !important; font-size: 22px !important; } .concept-body { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: stretch; } .concept-work { min-width: 0; padding: 26px 36px 24px; } .concept-meta { min-width: 0; background: linear-gradient(130deg, #faf9fc, #f8f7fb); border-left: 1px solid #eae8f0; padding: 28px 28px 24px; } #taskDetails.task-concept #taskForm { margin: 0 !important; padding: 0 !important; } #taskDetails.task-concept .task-main-fields { display: flex !important; flex-direction: column; gap: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .concept-kicker { margin: 0 0 10px; color: #795bd9; font-size: 11px; letter-spacing: 1px; font-weight: 550; } #taskDetails.task-concept .task-title-field { margin: 0 !important; padding: 0 !important; } #taskDetails.task-concept .task-title-field { max-width: 490px !important; width: 100% !important; } #taskDetails.task-concept .task-title-field textarea, #taskDetails.task-concept .task-title-field textarea:focus, #taskDetails.task-concept .task-title-field textarea:focus-visible { font-size: 29px !important; line-height: 1.25 !important; font-weight: 650 !important; color: #292836 !important; min-height: 38px !important; padding: 0 !important; letter-spacing: -.5px !important; } .concept-status { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 14px 0 24px; } #taskDetails.task-concept .task-section-chip { position: relative !important; border: 1px solid #cbbdf5 !important; border-radius: 7px !important; padding: 5px 10px 5px 25px !important; background: #f0eafa !important; color: #6e48d2 !important; min-height: 34px !important; } #taskDetails.task-concept .task-section-chip::before { content: "" !important; position: absolute; left: 10px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #7651d7; } #taskDetails.task-concept .task-section-chip::before { background: #7651d7 !important; } #taskDetails.task-concept .task-section-chip > span { display: none !important; } #taskDetails.task-concept .task-section-chip select { width: auto !important; max-width: 260px !important; min-height: 22px !important; border: 0 !important; padding: 0 !important; background: transparent !important; appearance: auto !important; font-size: 13px !important; color: #704bc9 !important; } #taskDetails.task-concept .autosave-status { color: #928a9c !important; font-size: 11px !important; font-weight: 400 !important; background: none !important; margin: 0 !important; padding: 0 !important; } #taskDetails.task-concept .autosave-status.error { color: #b54460 !important; } #taskDetails.task-concept .task-description-field { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; gap: 8px !important; background: transparent !important; border-radius: 0 !important; } #taskDetails.task-concept .task-description-field > span { color: #34303e !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; } #taskDetails.task-concept .task-main-fields > label.task-description-field.field textarea, #taskDetails.task-concept .task-main-fields > label.task-description-field.field textarea:focus, #taskDetails.task-concept .task-main-fields > label.task-description-field.field textarea:focus-visible { border: 1px solid transparent !important; background: transparent !important; padding: 4px 0 !important; min-height: 48px !important; color: #514c5e !important; font-size: 14px !important; line-height: 1.55 !important; border-radius: 5px !important; } #taskDetails.task-concept .task-description-field:focus-within textarea { border-color: #d4c6f0 !important; background: #fdfbff !important; } #taskDetails.task-concept .task-work-panel { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #taskDetails.task-concept .task-work-panel > summary { font-size: 13px !important; font-weight: 600 !important; color: #34303e !important; justify-content: flex-start !important; gap: 14px !important; margin: 0 0 10px !important; min-height: 26px !important; } #taskDetails.task-concept #taskChecklistCount { color: #94899e; font-size: 12px; font-weight: 400; } #taskDetails.task-concept #taskChecklistPanel > summary::after { margin-left: auto; } #taskDetails.task-concept #subtaskProgress { display: block !important; height: 4px !important; min-height: 4px !important; padding: 0 !important; margin: 0 0 12px !important; background: #eee9f7 !important; border-radius: 4px !important; overflow: hidden; } #taskDetails.task-concept #subtaskProgress .subtask-progress-ring, #taskDetails.task-concept #subtaskProgress .subtask-progress-copy { display: none !important; } #taskDetails.task-concept #subtaskProgress > div { display: block !important; } #taskDetails.task-concept #subtaskProgress i { display: block !important; height: 4px !important; margin: 0 !important; background: #eee9f7 !important; } #taskDetails.task-concept #subtaskProgress i span { background: #855add !important; } #taskDetails.task-concept .subtask { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) 24px !important; gap: 10px !important; min-height: 34px !important; padding: 4px 2px !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid #efedf3 !important; } #taskDetails.task-concept .subtask .complete-circle { width: 16px !important; height: 16px !important; min-width: 16px !important; border-radius: 3px !important; border-color: #b5adbf !important; } #taskDetails.task-concept .subtask .complete-circle:checked { background: #8153db !important; border-color: #8153db !important; } #taskDetails.task-concept .subtask input.complete-circle { min-height: 16px !important; max-height: 16px !important; max-width: 16px !important; padding: 0 !important; margin: 0 !important; } #taskDetails.task-concept .subtask input.complete-circle::after { width: 4px !important; height: 7px !important; } #taskDetails.task-concept .subtask-name-input { min-height: 24px !important; font-size: 13px !important; font-weight: 400 !important; color: #494152 !important; } #taskDetails.task-concept .subtask.done .subtask-name-input { color: #a29aa9 !important; } #taskDetails.task-concept .subtask button { display: grid !important; place-items: center; font-size: 0 !important; width: 24px !important; min-width: 24px !important; min-height: 24px !important; height: 24px !important; color: #a499b3 !important; overflow: hidden !important; } #taskDetails.task-concept .subtask button::before { content: "×" !important; font-size: 16px !important; } #taskDetails.task-concept .quick-subtask { display: flex !important; min-height: 34px !important; padding: 4px 0 !important; border: 0 !important; background: transparent !important; margin: 4px 0 16px !important; } #taskDetails.task-concept .quick-subtask input { color: #8054cd !important; font-size: 13px !important; min-height: 28px !important; } #taskDetails.task-concept .quick-subtask input::placeholder { color: #8564c6 !important; } .concept-tabs { display: flex; gap: 24px; border-bottom: 1px solid #eae5f0; margin: 14px 0 12px; } #taskDetails.task-concept .concept-tabs button { display: flex; gap: 9px; align-items: center; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #898093; font-size: 13px; font-weight: 450; padding: 10px 0; } #taskDetails.task-concept .concept-tabs button[aria-selected="true"] { color: #7b4ed5; border-bottom-color: #8157d8; font-weight: 550; } .concept-tabs span { font-size: 12px; } #taskDetails.task-concept :is(#taskCommentsPanel, #taskAttachmentsPanel) > summary { display: none !important; } #taskDetails.task-concept :is(#taskCommentsPanel, #taskAttachmentsPanel, #commentForm)[hidden] { display: none !important; } #taskDetails.task-concept #commentsList { gap: 8px; } #taskDetails.task-concept .comment { padding: 12px !important; background: #f8f6fb !important; border: 0 !important; border-radius: 10px !important; margin-bottom: 8px; } #taskDetails.task-concept .comment p { font-size: 13px !important; line-height: 1.5 !important; } #taskDetails.task-concept .comment-author { display: flex; align-items: center; gap: 8px; min-width: 0; } #taskDetails.task-concept .comment-author .avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 11px !important; } #taskDetails.task-concept .comment-author strong { font-size: 12px; font-weight: 550; color: #50445e; } #taskDetails.task-concept .comment-author small { font-size: 11px !important; font-weight: 400 !important; color: #998ba8 !important; } #taskDetails.task-concept .comment p { padding-left: 36px; margin-top: 5px; } #taskDetails.task-concept .task-quick-comment { margin: 14px 0 0 !important; border: 1px solid #e3ddec !important; border-radius: 9px !important; min-height: 46px !important; padding: 7px 10px !important; background: #fff !important; grid-template-columns: minmax(0, 1fr) 32px !important; } #taskDetails.task-concept .task-quick-comment::before { content: none !important; } #taskDetails.task-concept .task-quick-comment textarea { min-height: 28px !important; font-size: 13px !important; } #taskDetails.task-concept .task-quick-comment button { background: #8051d5 !important; border-radius: 7px !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; } #taskDetails.task-concept .task-quick-comment button::before { transform: rotate(-35deg); } #taskDetails.task-concept .task-quick-comment { grid-template-columns: minmax(0, 1fr) 28px 32px !important; } #taskDetails.task-concept #taskCommentAttach { background: transparent !important; width: 28px !important; min-width: 28px !important; padding: 4px !important; } #taskDetails.task-concept #taskCommentAttach::before, #taskDetails.task-concept #taskCommentAttach::after { content: none !important; } #taskDetails.task-concept #taskCommentAttach img { opacity: .45; } #taskDetails.task-concept .task-quick-comment button[type="submit"]::before { content: "" !important; width: 14px !important; height: 14px !important; border: 0 !important; background: white !important; clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 56%, 65% 50%, 20% 44%); transform: none !important; mask: none !important; } #taskDetails.task-concept .task-quick-comment button[type="submit"]::after { content: none !important; } #taskDetails.task-concept .concept-meta > .complete-toggle { display: flex !important; justify-content: center; align-items: center; width: 100% !important; min-height: 44px !important; height: 44px !important; padding: 0 16px !important; color: white !important; background: linear-gradient(120deg,#8556dd,#7650cd) !important; border: 1px solid #7951cf !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 550 !important; margin-bottom: 18px; gap: 10px; } #taskDetails.task-concept .concept-meta > .complete-toggle::before { content: "✓" !important; position: static !important; border: 0 !important; color: white; background: none !important; width: 16px; height: auto; } #taskDetails.task-concept .concept-meta > .complete-toggle::before { transform: none !important; border-radius: 0 !important; margin: 0 !important; font-size: 18px !important; } #taskDetails.task-concept .concept-meta > .complete-toggle::after { content: none !important; } #taskDetails.task-concept .concept-meta > .complete-toggle.done { background: #518d75 !important; border-color: #518d75 !important; } #taskDetails.task-concept .concept-meta > :not(.complete-toggle) { border-top: 1px solid #e9e5ef !important; padding: 17px 0 !important; margin: 0 !important; } #taskDetails.task-concept .concept-meta .field { min-width: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; gap: 8px !important; } #taskDetails.task-concept .concept-meta > .task-priority-chip { display: flex !important; flex-direction: column !important; padding: 17px 0 !important; border-top: 1px solid #e9e5ef !important; } #taskDetails.task-concept .concept-meta :is(.field > span, .concept-project > small) { display: block !important; font-size: 11px !important; font-weight: 400 !important; text-transform: none !important; color: #898095 !important; } #taskDetails.task-concept .concept-meta select { width: 100% !important; min-height: 28px !important; background: transparent !important; border: 0 !important; border-radius: 5px !important; color: #42384e !important; padding: 2px 0 !important; font-size: 13px !important; font-weight: 450 !important; appearance: auto !important; } #taskDetails.task-concept .concept-meta select:hover { background: #eee8f6 !important; } .concept-assignee { position: relative; } #taskDetails.task-concept #taskAssignee { padding-left: 36px !important; } #taskAssigneeAvatar { position: absolute; top: 43px; left: 0; pointer-events: none; } #taskDetails.task-concept #taskAssigneeAvatar .avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 11px !important; } .concept-empty-person { display: grid; place-items: center; width: 28px; height: 28px; background: #eae4f6; border-radius: 50%; color: #9a87b7; } #taskDetails.task-concept .task-deadline-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 3px !important; } #taskDetails.task-concept .task-due-field { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; } #taskDetails.task-concept .task-due-field input { width: 100% !important; border: 0 !important; padding: 3px 0 !important; color: #443a52 !important; background: transparent !important; min-height: 26px !important; } #taskDetails.task-concept .task-due-remaining { align-self: flex-start; min-height: 20px !important; padding: 0 !important; background: transparent !important; color: #be8238 !important; font-size: 11px !important; } #taskDetails.task-concept .task-due-remaining::before { content: none !important; } #taskDetails.task-concept .task-priority-chip::before { content: none !important; } #taskDetails.task-concept[data-priority="high"] #taskPriority { color: #a67731 !important; } #taskDetails.task-concept[data-priority="urgent"] #taskPriority { color: #b44b66 !important; } .concept-project strong { display: block; font-size: 13px; font-weight: 450; margin-top: 10px; color: #514064; overflow-wrap: anywhere; } #taskDetails.task-concept .concept-people { position: relative; } #taskDetails.task-concept .task-collaborators-field { display: block !important; min-height: 20px !important; } #taskDetails.task-concept #toggleCollaboratorPicker { position: absolute; top: 12px; right: 0; border: 0 !important; background: transparent !important; padding: 4px !important; color: #947abd !important; font-size: 11px !important; } #taskDetails.task-concept .task-header-summary { margin-top: 9px !important; padding: 0 !important; min-height: 30px !important; } #taskDetails.task-concept .task-people-summary { display: flex; gap: 0; } #taskDetails.task-concept .task-header-summary .avatar { display: grid !important; place-items: center; width: 30px !important; min-width: 30px !important; height: 30px !important; border: 2px solid #faf9fc !important; border-radius: 50% !important; background: var(--avatar) !important; font-size: 11px !important; margin-left: -4px; } #taskDetails.task-concept #collaboratorPicker:not(.is-expanded) { display: none !important; } #taskDetails.task-concept #collaboratorPicker.is-expanded { margin-top: 10px; } #taskDetails.task-concept .tag-field .field-head { display: flex !important; gap: 8px; align-items: center; margin-bottom: 8px; } #taskDetails.task-concept .concept-meta > .tag-field { display: block !important; padding: 17px 0 !important; border-top: 1px solid #e9e5ef !important; } #taskDetails.task-concept .tag-field .tag-picker { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } #taskDetails.task-concept .tag-field .field-head > span { margin-right: auto; font-size: 11px; color: #898095; } #taskDetails.task-concept .tag-field button { font-size: 10px !important; color: #947abd !important; padding: 3px !important; border: 0 !important; background: none !important; } #taskDetails.task-concept .tag-option { font-size: 11px !important; border-radius: 5px !important; } #taskDetails.task-concept .task-properties > summary { font-size: 12px !important; color: #7d718e !important; min-height: 26px !important; } #taskDetails.task-concept #taskCustomFields { grid-template-columns: 1fr !important; } #taskDetails.task-concept .task-dependencies { margin-top: 14px; } #taskDetails.task-concept .task-dependency-row { grid-template-columns: minmax(0, 1fr) auto 24px; } #taskDetails.task-concept .task-dependency-state { font-size: 10px; } #taskDetails.task-concept .task-danger-zone { margin-bottom: 0 !important; } @media (max-width: 760px) { #taskDetails.task-concept, #taskDetails.task-concept[aria-hidden="false"] { width: calc(100vw - 24px) !important; max-width: none !important; inset: 12px 0 !important; max-height: calc(100dvh - 24px) !important; } .concept-body { grid-template-columns: minmax(0, 1fr) 250px; } .concept-work { padding: 22px; } .concept-meta { padding: 22px 18px; } #taskDetails.task-concept .task-title-field textarea, #taskDetails.task-concept .task-title-field textarea:focus, #taskDetails.task-concept .task-title-field textarea:focus-visible { font-size: 24px !important; } } @media (max-width: 600px) { #taskDetails.task-concept, #taskDetails.task-concept[aria-hidden="false"] { width: 100vw !important; height: 100dvh !important; inset: 0 !important; max-height: 100dvh !important; border-radius: 0 !important; } #taskDetails.task-concept .concept-head { padding: 12px 16px !important; gap: 6px !important; } .concept-breadcrumb { font-size: 11px; gap: 8px; } .concept-body { display: flex; flex-direction: column; } .concept-work { padding: 22px 20px; } .concept-meta { border-left: 0; border-top: 1px solid #eae5ef; padding: 20px; } #taskDetails.task-concept .concept-meta > .complete-toggle { min-height: 44px !important; } #taskDetails.task-concept .concept-meta select, #taskDetails.task-concept .task-due-field input { min-height: 36px !important; } .concept-status { gap: 10px; margin-bottom: 20px; } #taskAssigneeAvatar { top: 46px; } } /* "+ Новый тег" inside the open tag list */ #taskDetails .tag-picker .picker-create { justify-self: start; min-height: 30px; padding: 4px 10px; border: 1px dashed #cfc6de; border-radius: 6px; background: transparent; color: #7954d6; font: 500 13px var(--app-font); cursor: pointer; } #taskDetails .tag-picker .picker-create:hover { border-color: #a282ee; background: #faf8fe; } html[data-theme="dark"] #taskDetails .tag-picker .picker-create { border-color: #463e57; color: #a88bf5; } /* @mention suggestions under the comment field */ #taskDetails .comment-form { position: relative; } #taskDetails .mention-picker { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; gap: 2px; max-height: 280px; padding: 6px; overflow-y: auto; border: 1px solid #e3d9f7; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px #2b20481f; } #taskDetails .mention-picker[hidden] { display: none; } #taskDetails .mention-picker p { margin: 2px 6px 4px; color: #898397; font-size: 12px; } #taskDetails .mention-picker button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: #24202c; font: 14px var(--app-font); text-align: left; cursor: pointer; } #taskDetails .mention-picker button.active, #taskDetails .mention-picker button:hover { background: #f3efff; } #taskDetails .mention-picker .avatar { width: 26px; height: 26px; font-size: 11px; } #taskDetails .mention { padding: 0 3px; border-radius: 4px; background: #eee8ff; color: #6a45cc; font-weight: 500; } html[data-theme="dark"] #taskDetails .mention-picker { border-color: #3d3358; background: #231f2d; } html[data-theme="dark"] #taskDetails .mention-picker button { color: #ece9f3; } html[data-theme="dark"] #taskDetails .mention-picker button.active, html[data-theme="dark"] #taskDetails .mention-picker button:hover { background: #2f2748; } html[data-theme="dark"] #taskDetails .mention { background: #2f2748; color: #a88bf5; } /* The comment form styles its own buttons (send, attach); reset them for suggestion rows. */ #taskDetails .comment-form .mention-picker button { position: static !important; display: flex !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 38px !important; padding: 6px 8px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; color: #24202c !important; font-size: 14px !important; text-indent: 0 !important; overflow: visible !important; } #taskDetails .comment-form .mention-picker button::before, #taskDetails .comment-form .mention-picker button::after { content: none !important; display: none !important; } #taskDetails .comment-form .mention-picker button span:not(.avatar) { display: inline !important; } #taskDetails .comment-form .mention-picker button:is(.active, :hover) { background: #f3efff !important; } html[data-theme="dark"] #taskDetails .comment-form .mention-picker button { color: #ece9f3 !important; } html[data-theme="dark"] #taskDetails .comment-form .mention-picker button:is(.active, :hover) { background: #2f2748 !important; } /* Quick due dates under «Срок» while the task has none */ #taskDetails .task-due-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } #taskDetails .task-due-quick[hidden] { display: none; } #taskDetails .task-due-quick button { min-height: 28px !important; padding: 0 10px !important; border: 1px solid #e3dcef !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; color: #5b5270 !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer; } #taskDetails .task-due-quick button:hover { border-color: #a282ee !important; color: #6a45cc !important; background: #f7f3fe !important; } html[data-theme="dark"] #taskDetails .task-due-quick button { border-color: var(--d-border-strong) !important; background: transparent !important; color: var(--d-text-2) !important; }