/* SPDX-License-Identifier: Apache-2.0 */ /* Taskmill's look (design/mocks), on top of Pico CSS. */ /* Colors (issue #14). Every --tm-* color is set for both themes, and the web tests check their contrast against WCAG AA. Pico's own variables are mapped onto them below. Light: the default, and data-theme="light". Dark: the system setting when has no data-theme, and data-theme="dark". The selectors match Pico's, so these win over Pico's theme colors. */ :root { --pico-font-family: Inter, system-ui, sans-serif; } :root:not([data-theme="dark"]) { color-scheme: light; --tm-bg: #F8FAFC; --tm-card: #FFFFFF; --tm-text: #1F2937; --tm-muted: #374151; --tm-line: #E5E7EB; --tm-ok-fg: #166534; --tm-ok-bg: #DCFCE7; --tm-warn-fg: #92400E; --tm-warn-bg: #FEF3C7; --tm-off-fg: #374151; --tm-off-bg: #F3F4F6; --tm-avatar-bg: #E0F2FE; --tm-avatar-fg: #075985; --tm-heading: #111827; --tm-link: #0369A1; --tm-button-bg: #0369A1; --tm-button-fg: #FFFFFF; --tm-secondary: #374151; --tm-secondary-bg: #374151; --tm-secondary-fg: #FFFFFF; --tm-input-bg: #FFFFFF; --tm-input-border: #6B7280; --tm-placeholder: #6B7280; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --tm-bg: #0F172A; --tm-card: #1E293B; --tm-text: #E5E7EB; --tm-muted: #CBD5E1; --tm-line: #334155; --tm-ok-fg: #86EFAC; --tm-ok-bg: #14532D; --tm-warn-fg: #FCD34D; --tm-warn-bg: #451A03; --tm-off-fg: #E5E7EB; --tm-off-bg: #374151; --tm-avatar-bg: #0C4A6E; --tm-avatar-fg: #E0F2FE; --tm-heading: #F9FAFB; --tm-link: #7DD3FC; --tm-button-bg: #0369A1; --tm-button-fg: #FFFFFF; --tm-secondary: #CBD5E1; --tm-secondary-bg: #CBD5E1; --tm-secondary-fg: #0F172A; --tm-input-bg: #0F172A; --tm-input-border: #94A3B8; --tm-placeholder: #94A3B8; } } :root[data-theme="dark"] { color-scheme: dark; --tm-bg: #0F172A; --tm-card: #1E293B; --tm-text: #E5E7EB; --tm-muted: #CBD5E1; --tm-line: #334155; --tm-ok-fg: #86EFAC; --tm-ok-bg: #14532D; --tm-warn-fg: #FCD34D; --tm-warn-bg: #451A03; --tm-off-fg: #E5E7EB; --tm-off-bg: #374151; --tm-avatar-bg: #0C4A6E; --tm-avatar-fg: #E0F2FE; --tm-heading: #F9FAFB; --tm-link: #7DD3FC; --tm-button-bg: #0369A1; --tm-button-fg: #FFFFFF; --tm-secondary: #CBD5E1; --tm-secondary-bg: #CBD5E1; --tm-secondary-fg: #0F172A; --tm-input-bg: #0F172A; --tm-input-border: #94A3B8; --tm-placeholder: #94A3B8; } /* Pico's colors, from the theme colors above, in every theme. The selectors are as specific as Pico's theme selectors and come later. */ :root:not([data-theme="dark"]), :root[data-theme="dark"] { --pico-background-color: var(--tm-bg); --pico-color: var(--tm-text); --pico-h1-color: var(--tm-heading); --pico-h2-color: var(--tm-heading); --pico-h3-color: var(--tm-heading); --pico-muted-color: var(--tm-muted); --pico-primary: var(--tm-link); --pico-primary-background: var(--tm-button-bg); --pico-primary-border: var(--tm-button-bg); --pico-primary-inverse: var(--tm-button-fg); --pico-secondary: var(--tm-secondary); --pico-secondary-border: var(--tm-secondary); --pico-secondary-background: var(--tm-secondary-bg); --pico-secondary-inverse: var(--tm-secondary-fg); --pico-form-element-background-color: var(--tm-input-bg); --pico-form-element-color: var(--tm-text); --pico-form-element-border-color: var(--tm-input-border); --pico-form-element-placeholder-color: var(--tm-placeholder); } body { background: var(--tm-bg); color: var(--tm-text); } .tm-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--tm-card); border-bottom: 1px solid var(--tm-line); } .tm-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--tm-text); text-decoration: none; } /* Page width (operator, 2026-11-06: "the body text is very narrow"). Text pages are 960px wide, which still keeps lines readable; the admin page, whose users table has six columns, takes up to 1400px. */ .tm-main { max-width: 960px; margin: 0 auto; padding: 32px 24px; } .tm-footer { max-width: 960px; margin: 0 auto; padding: 0 24px 32px; font-size: 14px; } .tm-wide .tm-main, .tm-wide .tm-footer { max-width: 1400px; } .tm-lead { color: var(--tm-muted); } .tm-card { background: var(--tm-card); border: 1px solid var(--tm-line); border-radius: 12px; margin-bottom: 24px; } .tm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--tm-line); } .tm-row:last-child { border-bottom: 0; } .tm-row small { display: block; color: var(--tm-muted); } .tm-chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .tm-ok { color: var(--tm-ok-fg); background: var(--tm-ok-bg); } .tm-warn { color: var(--tm-warn-fg); background: var(--tm-warn-bg); } .tm-off { color: var(--tm-off-fg); background: var(--tm-off-bg); } .tm-note { font-size: 14px; color: var(--tm-muted); } .tm-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--tm-avatar-bg); color: var(--tm-avatar-fg); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; overflow: hidden; } .tm-avatar img { width: 100%; height: 100%; object-fit: cover; } .tm-menu { position: relative; margin: 0; } .tm-menu summary { list-style: none; cursor: pointer; } .tm-menu summary::-webkit-details-marker { display: none; } .tm-menu-body { position: absolute; right: 0; top: 44px; z-index: 10; min-width: 240px; padding: 12px; background: var(--tm-card); border: 1px solid var(--tm-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16); } .tm-menu-body form { margin: 0; } .tm-error { border-left: 4px solid var(--tm-warn-fg); background: var(--tm-warn-bg); padding: 12px 16px; border-radius: 8px; } .tm-message { border-left: 4px solid var(--tm-ok-fg); background: var(--tm-ok-bg); padding: 12px 16px; border-radius: 8px; } table.tm-users td, table.tm-users th { font-size: 14px; } .tm-link-input { min-width: 16em; font-size: 13px; margin-bottom: 4px; } /* The help page (issue #44): the table of contents is a plain numbered list (Pico lays out lists in