/* core.css - global design system: tokens, reset, shared components */
/* === Icons =================================================================
* @section icons
* inline svg sprite + base .icon class. Sprite is injected once at the
* top of by base.html via {{iconSprite}}; every reference is a
* . Size scales from the
* inherited font-size (1em default) or via --icon-size on a parent.
* ========================================================================== */
.icon {
display: inline-block;
width: var(--icon-size, 1em);
height: var(--icon-size, 1em);
fill: currentColor;
flex-shrink: 0;
vertical-align: -0.15em;
}
/* === Design Tokens =========================================================
* @section tokens
* all css custom properties: palette, semantic aliases, spacing, radii,
* typography scale, layout constants, and module-specific variables.
* --primary is defined here; referenced by drag-over indicator and note focus.
* ========================================================================== */
:root {
color-scheme: light dark;
/* Palette (invariant) */
--black: #090909;
--white: #f5f5f5;
/* Gray scale — lightest to darkest */
--gray-100: #e0e0e0;
--gray-200: #c0c0c0;
--gray-300: #a0a0a0;
--gray-400: #6e6e6e;
--gray-500: #4a4a4a;
--gray-600: #383838;
--gray-700: #2a2a2a;
--gray-800: #1c1c1c;
--gray-900: #121212;
/* Semantic — light theme defaults */
--bg: #ffffff;
--bg-surface: #f7f7f8;
--bg-raised: #ededee;
--bg-input: #ffffff;
--bg-hover: #ececed;
--text: #111111;
--text-secondary: #3f3f3f;
--text-muted: #606060;
--text-disabled: #a0a0a0;
--border: #d8d8d8;
--border-strong: #b8b8b8;
--border-subtle: #ebebeb;
--btn-primary-bg: #111111;
--btn-primary-fg: #ffffff;
--btn-primary-hover: #2a2a2a;
--selection-bg: #cfe4ff;
--selection-fg: #000000;
--scrollbar-thumb: #c0c0c0;
--scrollbar-thumb-hover: #8a8a8a;
/* Functional (invariant) */
--danger: #e5484d;
--success: #45a557;
--warning: #f0a000;
--info: #52a9ff;
--primary: #6c8aff;
/* Spacing scale */
--sp-1: 0.25rem;
/* 4px */
--sp-2: 0.5rem;
/* 8px */
--sp-3: 0.75rem;
/* 12px */
--sp-4: 1rem;
/* 16px */
--sp-5: 1.25rem;
/* 20px */
--sp-6: 1.5rem;
/* 24px */
--sp-8: 2rem;
/* 32px */
/* Radii */
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 8px;
/* Typography */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "SF Mono", "Fira Code", "Cascadia Code", "Menlo", monospace;
--text-xs: 0.6875rem;
/* 11px */
--text-sm: 0.8125rem;
/* 13px */
--text-base: 0.875rem;
/* 14px */
--text-lg: 1rem;
/* 16px */
--text-xl: 1.25rem;
/* 20px */
/* Layout */
--sidebar-w: 220px;
--topbar-h: 48px;
/* Icon size scale — opt-in via --icon-size on a parent or class. */
--icon-size-sm: 14px;
--icon-size-md: 18px;
--icon-size-lg: 24px;
--icon-size-xl: 40px;
/* Project Management */
--pm-column-w: 300px;
--pm-column-gap: var(--sp-3);
--priority-low: #6b7280;
--priority-medium: #3b82f6;
--priority-high: #f59e0b;
--priority-urgent: #ef4444;
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: var(--black);
--bg-surface: var(--gray-900);
--bg-raised: var(--gray-800);
--bg-input: var(--gray-900);
--bg-hover: var(--gray-800);
--text: var(--white);
--text-secondary: var(--gray-300);
--text-muted: var(--gray-400);
--text-disabled: var(--gray-500);
--border: var(--gray-700);
--border-strong: var(--gray-600);
--border-subtle: var(--gray-800);
--btn-primary-bg: var(--white);
--btn-primary-fg: var(--black);
--btn-primary-hover: var(--gray-100);
--selection-bg: var(--gray-600);
--selection-fg: var(--white);
--scrollbar-thumb: var(--gray-700);
--scrollbar-thumb-hover: var(--gray-500);
}
/* === Reset =================================================================
* @section reset
* box-sizing, margin/padding zero, html font smoothing, body defaults,
* link, list, table, form element, and focus-visible normalization.
* ========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* author display rules must never override the hidden attribute */
[hidden] {
display: none !important;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-gutter: stable;
}
body {
font-family: var(--font);
font-size: var(--text-base);
line-height: 1.5;
color: var(--text);
background: var(--bg);
min-height: 100vh;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: var(--text);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul,
ol {
list-style: none;
}
table {
border-collapse: collapse;
width: 100%;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
background: none;
border: none;
}
button {
cursor: pointer;
}
fieldset {
border: none;
}
:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
::placeholder {
color: var(--text-muted);
}
/* === Scrollbars ============================================================
* @section scrollbars
* thin scrollbars for Firefox (scrollbar-width) and WebKit/Blink.
* ::selection also lives here as it shares the "chrome" concern.
* ========================================================================== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) transparent;
}
/* WebKit / Blink */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border: 2px solid var(--bg);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
background: transparent;
}
::selection {
background: var(--selection-bg);
color: var(--selection-fg);
}
/* === Typography ============================================================
* @section typography
* heading sizes, small, inline code styles.
* ========================================================================== */
h1 {
font-size: var(--text-xl);
font-weight: 600;
line-height: 1.3;
}
h2 {
font-size: var(--text-lg);
font-weight: 600;
line-height: 1.3;
}
h3 {
font-size: var(--text-base);
font-weight: 600;
line-height: 1.4;
}
small {
font-size: var(--text-xs);
}
code {
font-family: var(--font-mono);
font-size: var(--text-sm);
background: var(--bg-raised);
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
}
/* === Buttons ===============================================================
* @section buttons
* base .btn class, variant modifiers (primary, danger, ghost, outline),
* size modifiers (sm, block), and icon sizing inside buttons.
* ========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-1);
padding: 6px 12px;
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.4;
border-radius: var(--radius);
white-space: nowrap;
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.btn:hover {
text-decoration: none;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.4;
pointer-events: none;
}
.btn .icon {
--icon-size: 16px;
}
/* Variants */
.btn-primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
}
.btn-primary:hover {
background: var(--btn-primary-hover);
}
.btn-danger {
background: var(--danger);
color: var(--white);
}
.btn-danger:hover {
opacity: 0.85;
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover {
background: var(--bg-hover);
color: var(--text);
}
.btn-outline {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.btn-outline:hover {
background: var(--bg-hover);
color: var(--text);
border-color: var(--border-strong);
}
/* Sizes */
.btn-sm {
padding: 3px 8px;
font-size: var(--text-xs);
}
.btn-block {
width: 100%;
}
/* === Form Controls =========================================================
* @section form-controls
* form-group, label, input/select/textarea, disabled states, hint text,
* and form action row.
* ========================================================================== */
.form-group {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.form-label {
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 6px 10px;
font-size: var(--text-sm);
color: var(--text);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.1s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--gray-400);
}
.form-input:disabled,
.form-select:disabled {
color: var(--text-disabled);
border-color: var(--border-subtle);
cursor: not-allowed;
}
.form-hint {
font-size: var(--text-xs);
color: var(--text-muted);
}
.form-actions {
display: flex;
gap: var(--sp-2);
justify-content: flex-end;
}
/* === Checkbox / Radio ======================================================
* @section checkbox-radio
* .check-label wrapper, native input sizing/accent, disabled state,
* and .check-group vertical stack.
* ========================================================================== */
.check-label {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: var(--text-sm);
cursor: pointer;
line-height: 1.4;
}
.check-label input[type="checkbox"],
.check-label input[type="radio"] {
width: 14px;
height: 14px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--text);
cursor: pointer;
}
.check-label input:disabled {
cursor: not-allowed;
}
.check-label input:disabled+span {
color: var(--text-disabled);
}
.check-group {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
/* === Tables ================================================================
* @section tables
* .table-wrap overflow container, th/td spacing, thead style,
* tbody row hover, last-row border removal, and utility cell classes.
* ========================================================================== */
.table-wrap {
overflow-x: auto;
}
table th,
table td {
padding: var(--sp-2) var(--sp-3);
text-align: left;
vertical-align: middle;
}
table thead th {
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border);
}
table tbody td {
font-size: var(--text-sm);
border-bottom: 1px solid var(--border-subtle);
}
table tbody tr:hover {
background: var(--bg-hover);
}
table tbody tr:last-child td {
border-bottom: none;
}
.cell-actions {
display: flex;
gap: var(--sp-1);
justify-content: flex-end;
}
.cell-truncate {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* === Filter bar and pager ==================================================
* @section filter-pager
* .filter-bar is the GET search row above a table; .pager is the
* previous/next row below it. shared by admin, pm and links pages.
* ========================================================================== */
.filter-bar {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: var(--sp-4);
}
.filter-bar .form-input {
max-width: 240px;
}
.pager {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
margin-top: var(--sp-4);
}
.pager-status {
font-size: var(--text-xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
.filter-bar {
flex-direction: column;
}
.filter-bar .form-input {
max-width: none;
}
}
/* === Badge =================================================================
* @section badge
* base .badge, color variant modifiers, and .badge-sm size modifier.
* .badge-sm is used in notes/index.html for compact inline labels.
* ========================================================================== */
.badge {
display: inline-block;
padding: 1px 6px;
font-size: var(--text-xs);
font-weight: 500;
border-radius: var(--radius-sm);
background: var(--bg-raised);
color: var(--text-secondary);
border: 1px solid var(--border);
}
/* Badge color variants */
.badge-gray {
background: rgba(107, 114, 128, 0.15);
color: #9ca3af;
border-color: transparent;
}
.badge-blue {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
border-color: transparent;
}
.badge-amber {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
border-color: transparent;
}
.badge-green {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
border-color: transparent;
}
.badge-red {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
border-color: transparent;
}
/* size modifier — compact inline use */
.badge-sm {
font-size: var(--text-xs);
padding: 0.1em 0.45em;
}
/* === Avatar ================================================================
* @section avatar
* .avatar base (28px), size modifiers sm/lg, and .avatar-initials fallback.
* ========================================================================== */
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.avatar-sm {
width: 22px;
height: 22px;
}
.avatar-lg {
width: 36px;
height: 36px;
}
.avatar-initials {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-raised);
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: 600;
}
/* === Empty State ===========================================================
* @section empty-state
* centered column layout for zero-data screens with icon and message.
* ========================================================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-8) var(--sp-4);
color: var(--text-muted);
text-align: center;
}
.empty-state .icon {
--icon-size: var(--icon-size-xl);
opacity: 0.4;
}
.empty-state p {
font-size: var(--text-sm);
max-width: 280px;
}
/* === Status Dot ============================================================
* @section status-dot
* inline status indicator with a colored ::before pseudo-element dot.
* ========================================================================== */
.status {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--text-sm);
font-weight: 500;
}
.status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.status-active::before {
background: var(--success);
}
.status-inactive::before {
background: var(--danger);
}
/* === Toast / Alert =========================================================
* @section toast
* fixed bottom-left toast stack, toast variants (success/error/warning/info),
* close button, leave animation, and @keyframes toast-in.
* ========================================================================== */
.toast-container {
position: fixed;
bottom: var(--sp-5);
left: var(--sp-5);
z-index: 1000;
display: flex;
flex-direction: column;
gap: var(--sp-2);
max-width: min(440px, calc(100vw - var(--sp-8)));
pointer-events: none;
}
.toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
font-size: var(--text-sm);
line-height: 1.5;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-raised);
color: var(--text);
animation: toast-in 0.2s ease-out;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-message {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
user-select: text;
}
.toast.toast-leaving {
opacity: 0;
transform: translateX(-16px);
}
.toast-success {
border-left: 3px solid var(--success);
}
.toast-error {
border-left: 3px solid var(--danger);
}
.toast-warning {
border-left: 3px solid var(--warning);
}
.toast-info {
border-left: 3px solid var(--info);
}
.toast-success>span:first-child {
color: var(--success);
}
.toast-error>span:first-child {
color: var(--danger);
}
.toast-warning>span:first-child {
color: var(--warning);
}
.toast-info>span:first-child {
color: var(--info);
}
.toast-close {
display: inline-flex;
color: var(--text-muted);
opacity: 0.8;
flex-shrink: 0;
}
.toast-close:hover {
opacity: 1;
color: var(--text);
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateX(-16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* === Dialog ================================================================
* @section dialog
* native