html { height: 100%; width: 100%; margin: 0; } :root { --color-purple-500: #47329A; --color-cyan-500: #89C7D2; --color-cyan-dark: #3E94A3; --color-gray-light: #a5a5a5; --color-gray-light-15: #A5A5A526; --color-gray-light-32: #a5a5a552; --color-gray-200: #e3e3e3; --color-gray-300: #d0d0d0; --color-gray-400: #bcbcbc; --color-gray-500: #777777; --color-gray-700: #4a4a4a; --color-green-500: #279112; --color-green-500-15: #27911226; --color-danger-100: #fae0df; --color-danger-200: #f5c6cb; --color-danger-500: #E02C29; --color-danger-500-15: #E02C2926; --color-primary: var(--color-purple-500); --color-secondary: var(--color-cyan-500); --icon-color: var(--color-primary); --icon-thickness: 0; --color-card-background: var(--color-gray-light-15); --color-text-dark: black; --color-text-light: white; --button-background: white; --button-color: var(--color-text-dark); --button-border-color: var(--color-gray-light); --button-background-hover: white; --button-color-hover: var(--color-primary); --button-border-color-hover: var(--color-primary); --button-border-content: ""; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; color: var(--color-text-dark); } .show-indicator.htmx-request, .htmx-request .show-indicator { position: relative; } .show-indicator.htmx-request:after, .htmx-request .show-indicator:after { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; background: #ededed url(/static/img/loading.svg) repeat-x; background-position-y: 50%; background-size: 45px 60px; border-radius: 8px; } .icon { fill: var(--icon-color); stroke: var(--icon-color); stroke-width: var(--icon-thickness); } a, .link { background: none; padding: 0; border: none; text-decoration: #4545ff underline; color: #4545ff; cursor: pointer; display: inline; word-break: break-word; } a:hover, .link:hover { text-decoration: var(--color-primary) underline; color: var(--color-primary); } body * { box-sizing: border-box; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } hr { width: 100%; border: none; height: 1px; background: var(--color-gray-light); } summary > h3, summary > h2 { display: inline; } .buttons-row { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; margin: 10px 0; } :where(button, .button) { padding: 6px 10px; cursor: pointer; background: var(--button-background); border: 1px solid var(--button-border-color); color: var(--button-color); --icon-color: var(--button-color); border-radius: 4px; transition: .2s ease-out; position: relative; z-index: 0; } :where(button, .button):is(:hover,:focus-visible) { background: var(--button-background-hover); color: var(--button-color-hover); --icon-color: var(--button-color-hover); border-color: var(--button-border-color-hover); outline: none; } :where(button, .button):before { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border: inherit; border-width: 2px; border-radius: inherit; opacity: 0; transition: .2s ease-out; } :where(button, .button):is(:hover,:focus-visible):before { opacity: 1; } :where(button, .button).--confirm { --button-border-color: transparent; --button-background: var(--color-green-500); --button-color: var(--color-text-light); } :where(button, .button).--primary { --button-border-color: transparent; --button-background: var(--color-primary); --button-color: var(--color-text-light); font-weight: 500; } :where(button, .button).--danger { --button-border-color: var(--color-danger-500); --button-border-color-hover: var(--button-border-color); --button-background: var(--color-danger-100); --button-background-hover: var(--color-danger-500); --button-color-hover: white; --button-color: var(--color-danger-500); font-weight: 500; } .plural { display: none; } .show-plural > .plural { display: initial; } .flex-grow { flex-grow: 1; } header { margin: 0 auto; max-width: 1880px; white-space: nowrap; } .header-content { display: grid; grid-template-columns: 170px 1fr 170px; padding: 10px 20px; align-items: center; grid-gap: 10px; } .header-row { display: flex; flex-direction: row; align-items: center; gap: 10px; } .header-row:last-child { justify-content: flex-end; } .user-avatar { border-radius: 50%; background: var(--color-primary); color: white; width: 40px; height: 40px; min-width: 40px; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; font-weight: 600; position: relative; } .tab-selector { display: flex; flex-direction: row; align-items: center; margin: 0; padding: 0; } .tab-selector > li { display: block; } .tab-selector > li::marker { appearance: none; } .tab-selector a { padding: 8px 10px; text-decoration: none; color: inherit; } .tab-selector a.active { color: var(--color-primary); text-underline-offset: 8px; position: relative; } .tab-selector a.active:before { content: ""; position: absolute; bottom: 0; height: 2px; background: var(--color-primary); width: 100%; left: 0; } .tasks-container { padding: 20px; display: flex; flex-direction: row; align-items: flex-start; justify-content: center; grid-gap: 20px; flex-wrap: wrap; } .tasks-column h2 { margin-top: 0; } .tasks-column { display: flex; flex-direction: column; padding: 15px; border-radius: 8px; background: var(--color-card-background); max-width: 600px; flex-basis: 300px; flex-shrink: 1; flex-grow: 1; } :where(.tasks-column hr) { margin: 20px 0; } .tasks-list { display: flex; flex-direction: column; gap: 20px; } summary + .tasks-list { margin-top: 10px; } .tasks-column_header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; border-bottom: 1px solid var(--color-gray-light); } @media (max-width: 1000px) { .tasks-container { padding-left: 10px; padding-right: 10px; } } .task { display: flex; flex-direction: row; align-items: stretch; border-radius: 8px; box-shadow: 1px 1px 4px #00000026; } .task-checkbox-container { padding: 20px 10px; background: var(--color-secondary); border-radius: 8px 0 0 8px; display: flex; position: relative; } .task-checkbox-container:has(input:checked), .task-checkbox-container.--upcoming { background: var(--color-gray-light); } .task-checkmark { position: absolute; left: 14px; top: 24px; --icon-color: var(--color-cyan-dark); --icon-thickness: 60px; transition: .2s ease-out; opacity: 0; pointer-events: none; } .task-checkbox:is(:checked, :hover) + .task-checkmark { opacity: 1; } .task-checkbox:checked:hover + .task-checkmark { --icon-color: var(--color-gray-light); } .task-checkbox:not(:checked):hover { background: white; transform: scale(1.1); } .task-checkbox:checked:hover { transform: scale(0.9); } .task-checkbox:checked:hover + .task-checkmark { transform: scale(0.9); } .task-checkbox { appearance: none; height: 40px; width: 40px; border: none; border-radius: 4px; cursor: pointer; background: #ffffff8a; position: relative; transition: .2s ease-out; } .task-lock { width: 40px; height: 40px; cursor: not-allowed; --icon-color: #ffffff52; } .task-content { flex-grow: 1; padding: 15px 15px 15px 10px; border-radius: 0 8px 8px 0; background: white; display: flex; flex-direction: column; gap: 5px; position: relative; cursor: pointer; } .task-info { display: flex; flex-direction: row-reverse; align-items: center; gap: 5px; color: var(--color-gray-500) } .task-title { font-weight: normal; margin: 0; font-size: 1.2em; } .task-list-name { color: var(--color-cyan-dark); } .task-description { font-size: .85em; color: #5d5d5d; } .task-description--list { color: #4a4a4a; } .task-description-separator { margin: 3px 0; } .task-members { position: absolute; top: 0; right: 0; transform: translateY(-50%); display: flex; flex-direction: row; gap: 5px; align-items: center; } .task-members > .user-avatar { width: 26px; height: 26px; min-width: 26px; font-size: 1rem; } .task-id { position: absolute; bottom: 2px; right: 2px; font-size: .7em; color: gray; } .task-repetition { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--color-gray-light); border-radius: 4px; padding: 8px; } .task-repetition input[name="interval"] { width: 60px; } .interval-group { display: flex; flex-direction: row; gap: 10px; align-items: center; } .update-logs > ul { margin-top: 0; } .task-days-late { position: absolute; z-index: 2; top: -13px; left: -50px; padding: 4px 8px; border-radius: 4px; font-size: .9em; background: var(--color-danger-100); color: var(--color-danger-500); border: 1px solid var(--color-danger-500); } .reference-date-explanation { border-left: 4px solid var(--color-gray-light-32); padding-left: 10px; margin: 5px 0 5px 8px; font-size: .8em; font-style: italic; max-width: 450px; } .search-tasks-form { padding: 0 20px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; } .search-tasks-form > input { width: 100%; max-width: 300px; flex: 1; min-width: 0; } .list-filter { position: relative; flex-shrink: 0; } .list-filter_toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--color-gray-light); background: white; cursor: pointer; font: inherit; color: inherit; } .list-filter_toggle:hover, .list-filter_toggle:focus-visible { border-color: var(--color-primary); outline: none; } .list-filter_popup { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; max-height: 320px; background: white; border: 1px solid var(--color-gray-light); border-radius: 10px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); padding: 12px; display: flex; flex-direction: column; gap: 12px; z-index: 40; } .list-filter_popup[hidden] { display: none; } .list-filter_header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .list-filter_header h3 { margin: 0; font-size: 1rem; } .list-filter_close { background: none; border: none; padding: 4px; border-radius: 6px; cursor: pointer; } .list-filter_close:hover, .list-filter_close:focus-visible { background: var(--color-gray-light-32); outline: none; } .list-filter_body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 180px; padding-right: 4px; } .list-filter_option { display: flex; align-items: center; gap: 10px; cursor: pointer; } .list-filter_option input { width: 16px; height: 16px; } .list-filter_footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .list-filter-hidden-inputs { display: none; } @media (max-width: 700px) { .header-content { grid-template-columns: 1fr 1fr; } .search-tasks-form { position: absolute; top: 60px; left: 0; right: 0; padding: 0 10px; display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; } .search-tasks-form > input { max-width: unset; } .list-filter_popup { right: 0; } header { height: 90px; } nav { flex-grow: 1; } .header-content { padding: 10px; } } .week-days-mask { display: none; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; padding-bottom: 30px; } .week-days-mask.visible { display: grid; } .week-days-mask > label { display: flex; flex-direction: column; align-items: center; padding: 8px 0; border: 1px solid var(--color-gray-light); cursor: pointer; position: relative; } .week-days-mask > label + label { border-left: none; } .week-days-mask > label:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-light); } .week-days-mask > label:first-child { border-radius: 4px 0 0 4px; } .week-days-mask > label:last-child { border-radius: 0 4px 4px 0; } .week-days-mask input { position: absolute; top: calc(100% + 10px); appearance: none; padding: 0; width: 22px; height: 22px; cursor: pointer; border: 1px solid var(--color-gray-light); border-radius: 50%; } .week-days-mask input:checked { border-color: var(--color-primary); } .week-days-mask input:after { content: ""; width: 12px; height: 12px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } .week-days-mask input:checked:after { --icon-src: url("/static/img/icons/check.svg"); background-color: var(--color-primary); mask: var(--icon-src) no-repeat center; -webkit-mask: var(--icon-src) no-repeat center; } .week-days-mask input:before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); height: 10px; width: 1px; background: var(--color-gray-light); } .week-days-mask input:checked:before { background: var(--color-primary); } .interval-unit { display: none; } .interval-unit.visible { display: inline; } .monthly-sub-mode { display: none; flex-direction: row; align-items: center; gap: 20px; } .monthly-sub-mode-tip { display: none; } .monthly-sub-mode.visible { display: flex; } .monthly-sub-mode.visible + .monthly-sub-mode-tip { display: block; } .monthly-sub-mode-tip > span { display: none; } .monthly-sub-mode:has([value="dayOfMonth"]:checked) + .monthly-sub-mode-tip > [data-value="dayOfMonth"] { display: block; } .monthly-sub-mode:has([value="dayOfWeek"]:checked) + .monthly-sub-mode-tip > [data-value="dayOfWeek"] { display: block; } .list { display: flex; flex-direction: column; border-radius: 8px; background: white; box-shadow: 1px 1px 4px #00000026; padding: 10px; gap: 10px; } .list-description { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; } .list-description_header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .list-description_header h5 { margin: 0; font-size: 0.95em; font-weight: 600; } .list-description_content { font-size: 0.85em; color: #4a4a4a; word-break: break-word; } .list-description_edit textarea { width: 100%; min-height: 110px; resize: vertical; } .list-header { width: 100%; margin: 0; } .list-header > button { --button-background: none; --button-border-color: transparent; width: 100%; text-align: left; font-weight: inherit; font-size: inherit; padding: 8px 6px; } .list-header > form { display: flex; flex-direction: row; align-items: center; gap: 5px; } .new-list-container { display: flex; flex-direction: row; align-items: center; position: relative; white-space: nowrap; } .new-list-container :is(button, label, input) { height: 35px; display: flex; align-items: center; } .new-list-container > :is(form, label) { transition: transform .2s ease-out; position: absolute; transform-origin: right center; right: 0; top: 0; height: 35px; } .new-list-container > form { transform: scaleX(0); display: flex; flex-direction: row; align-items: center; gap: 5px; } .new-list-container > form > input { height: 35px; } .new-list-container > label { transform: scaleX(1); } .new-list-container:has(form:focus-within) > label { transform: scaleX(0); } .new-list-container > form:focus-within { transform: scaleX(1); } .list-members { display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap; align-items: center; padding: 0 6px; } .list-member-add { display: flex; flex-direction: row; align-items: center; position: relative; flex-grow: 1; } .list-member-add_label { border-radius: 50%; width: 40px; height: 40px; background: none; padding: 0; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; transition: .2s ease-out; } .list-member-add_inputs { transform: scaleX(0); transition: .2s ease-out; transform-origin: left center; display: flex; flex-direction: row; gap: 5px; align-items: center; width: min(100%, 320px); } .list-member-add_inputs > input { width: min(100%, 250px); } .list-member-add:focus-within > .list-member-add_label { transform: scale(0); } .list-member-add:focus-within > .list-member-add_inputs { transform: scaleX(1); } .list-member-delete { border-radius: 50%; padding: 2px; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; transform: translate(15%, -45%); } .feedback:not(.error, .success, .warning, .tip) { display: none; } .feedback.error { display: block; padding: 8px; color: var(--color-danger-500); --icon-color: var(--color-danger-500); font-weight: 600; background: var(--color-danger-500-15); border-radius: 4px; } .feedback.success { display: block; padding: 8px; color: var(--color-green-500); --icon-color: var(--color-green-500); font-weight: 600; background: var(--color-green-500-15); border-radius: 4px; } .feedback.neutral { display: block; padding: 8px; color: var(--color-text-dark); --icon-color: var(--color-gray-500); font-weight: 500; background: #ffffff; border-radius: 4px; border: 1px solid var(--color-gray-light-32); --flash-accent-color: transparent; } .feedback.tip { display: block; padding: 8px; color: var(--color-gray-500); --icon-color: var(--color-gray-500); background: var(--color-gray-light-15); border-radius: 4px; font-style: italic; } .feedback:has(.icon) { display: flex; flex-direction: row; align-items: center; gap: 5px; } .feedback .icon-check { --icon-thickness: 60px; } form > .feedback:is(.tip, .error, .warning, .error) { margin-top: 10px; } #flashMessageContainer > .feedback.error { border-radius: 8px 8px 0 0; border: 1px solid var(--color-danger-200); border-bottom: none; --flash-accent-color: var(--color-danger-200); } #flashMessageContainer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: min(100vw, 800px); } .flash-message { display: flex; flex-direction: row; align-items: center; } .flash-message, #flashMessageContainer > .feedback { padding: 20px; max-width: 100%; gap: 20px; box-shadow: 0 0 6px 0 #b1b1b1; animation: ease-out flash-message-in .75s, ease-out flash-message-shadow .75s; } .flash-message.neutral { border: 1px solid var(--color-gray-light-32); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); animation: none; } .flash-message.disappear, #flashMessageContainer .feedback.disappear { transform: translateY(100%); animation: ease-out flash-message-out 0.3s; } @keyframes flash-message-in { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @keyframes flash-message-shadow { 0% { box-shadow: 0 0 0 0 var(--flash-accent-color); opacity: 1; } 50% { box-shadow: 0 0 max(100vh, 100vw) max(100vh, 100vw) var(--flash-accent-color); opacity: .5; } 100% { box-shadow: 0 0 0 0 var(--flash-accent-color); opacity: 1; } } @keyframes flash-message-out { 0% { transform: translateY(0%); } 100% { transform: translateY(100%); } } #modalContainer { position: fixed; z-index: 500; top: 0; left: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; overflow: hidden auto; } #modalContainer:has(.modal) { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000000C1; padding: 50px 10px; } .modal { padding: 20px; border-radius: 16px; background: white; min-width: min(100%, 400px); position: relative; } .modal > .modal { position: absolute; top: calc(100% + 10px); } form > label, .label-group > label { display: flex; flex-direction: column; gap: 2px; } form > :is(label, .label-group) + :is(label, .label-group) { margin-top: 15px; } label:has(input[type="checkbox"], input[type="radio"]):not(.week-days-mask > label) { display: flex; flex-direction: row; align-items: center; gap: 5px; } form > h2 { margin-top: 0; } textarea { resize: vertical; } input:not([type="checkbox"]), textarea { padding: 8px; border: 1px solid var(--color-gray-light); border-radius: 4px; } select { padding: 5px; border: 1px solid var(--color-gray-light); border-radius: 4px; } input[type="checkbox"]:not(.task-checkbox), input[type="radio"] { width: 18px; height: 18px; } input[type="color"] { height: 35px; padding: 2px; width: 100%; } .form-card { margin: 30px auto 0 auto; max-width: 600px; padding: 20px; border-radius: 10px; border: 1px solid var(--button-border-color); } .form-card > h1 { margin-top: 0; } .mt-0 { margin-top: 0 !important; } .impersonation-banner { background: var(--color-cyan-500); color: var(--color-text-light); padding: 8px 16px; } .impersonation-banner_content { display: flex; gap: 6px; justify-content: center; align-items: center; font-size: 13px; } .impersonation-banner_target { font-weight: 600; } .impersonation-banner_note { font-style: italic; } .super-admin-page { max-width: 1100px; margin: 32px auto 48px auto; padding: 0 20px; } .super-admin-page_header > h1 { margin: 0 0 6px 0; font-size: 28px; } .super-admin-page_header > p { margin: 0 0 24px 0; color: var(--color-gray-500); } .super-admin-page_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .super-admin-card { border-radius: 12px; border: 1px solid var(--color-gray-200); padding: 16px 20px; background: white; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); } .super-admin-card_label { display: block; font-size: 13px; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.05em; } .super-admin-card_value { display: block; font-size: 32px; font-weight: 600; color: var(--color-primary); margin-top: 6px; } .super-admin-block { margin-top: 40px; } .super-admin-block_header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; } .super-admin-block_header h2 { margin: 0; } .super-admin-block_header p { margin: 0; color: var(--color-gray-500); } .super-admin-table_wrapper { border: 1px solid var(--color-gray-200); border-radius: 10px; overflow-x: auto; background: white; } .super-admin-table { width: 100%; border-collapse: collapse; min-width: 720px; } .super-admin-table thead th { background: var(--color-gray-light-15); font-weight: 600; } .super-admin-table th, .super-admin-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-gray-200); } .super-admin-table tbody tr:hover { background: var(--color-gray-light-15); } .super-admin-table_actions { text-align: right; white-space: nowrap; } .super-admin-table_empty { text-align: center; color: var(--color-gray-500); padding: 24px 16px; } .super-admin-impersonate { border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; } .super-admin-impersonate:hover { background: var(--color-primary); color: var(--color-text-light); } .super-admin-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--color-primary); color: var(--color-text-light); } .super-admin-pill.--muted { background: var(--color-gray-light-15); color: var(--color-gray-700); border: 1px solid var(--color-gray-300); } .super-admin-settings-link { margin: 8px 0 16px 0; } .super-admin-settings-link a { text-decoration: none; font-weight: 600; }