@pi-unipi/kanboard 2.20.4 → 3.0.0-alpha.0

package/ui/static/style.css

@@ -1,729 +0,0 @@
-/* @pi-unipi/kanboard — Styles
- * Premium dark editorial. Warm near-black, serif headings,
- * geometric body, teal accent, amber highlight.
- */
-
-/* ===== RESET ===== */
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ===== VISUALLY HIDDEN ===== */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ===== COLOR TOKENS ===== */
-:root {
-  /* Brand */
-  --hue-brand: 175;
-  --hue-warn: 45;
-
-  /* Surfaces — warm-tinted neutrals toward brand hue */
-  --bg-root: oklch(0.13 0.008 70);
-  --bg-elevated: oklch(0.155 0.01 70);
-  --bg-hover: oklch(0.185 0.012 70);
-  --bg-subtle: oklch(0.21 0.015 70);
-
-  /* Borders */
-  --border-faint: oklch(0.22 0.015 70);
-  --border-soft: oklch(0.28 0.018 70);
-  --border-medium: oklch(0.35 0.02 70);
-
-  /* Text — WCAG AA contrast on dark bg */
-  --text-primary: oklch(0.90 0.005 80);
-  --text-secondary: oklch(0.72 0.01 80);
-  --text-tertiary: oklch(0.70 0.012 80);
-  --text-dim: oklch(0.60 0.01 80);
-
-  /* Accents */
-  --accent-primary: oklch(0.72 0.12 175);
-  --accent-primary-faint: oklch(0.72 0.12 175 / 0.08);
-  --accent-secondary: oklch(0.72 0.14 55);
-  --accent-secondary-faint: oklch(0.72 0.14 55 / 0.08);
-
-  /* Semantic */
-  --green: oklch(0.70 0.16 150);
-  --green-faint: oklch(0.70 0.16 150 / 0.10);
-  --yellow: oklch(0.72 0.14 80);
-  --yellow-faint: oklch(0.72 0.14 80 / 0.10);
-  --red: oklch(0.65 0.18 25);
-  --red-faint: oklch(0.65 0.18 25 / 0.10);
-  --warning-border: oklch(0.72 0.14 80 / 0.15);
-
-  /* Radii */
-  --radius-sm: 3px;
-  --radius-md: 6px;
-  --radius-lg: 10px;
-
-  /* Transitions */
-  --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-medium: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* ===== SPACING SCALE (semantic) ===== */
-:root {
-  --space-micro: 2px;
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 12px;
-  --space-lg: 16px;
-  --space-xl: 24px;
-  --space-2xl: 32px;
-  --space-3xl: 48px;
-  --space-4xl: 64px;
-  --space-5xl: 96px;
-}
-
-/* ===== TYPOGRAPHY ===== */
-:root {
-  --font-display: "Bodoni Moda", "Times New Roman", Georgia, serif;
-  --font-body: "Onest", system-ui, -apple-system, sans-serif;
-  --font-mono: "JetBrains Mono", "SF Mono", "Liberation Mono", monospace;
-}
-
-body {
-  font-family: var(--font-body);
-  font-weight: 400;
-  font-size: 15px;
-  background: var(--bg-root);
-  color: var(--text-primary);
-  line-height: 1.6;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  letter-spacing: -0.01em;
-}
-
-/* Display type — fluid clamp for page titles */
-.page-title {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: clamp(1.5rem, 3vw, 2.5rem);
-  line-height: 1.15;
-  letter-spacing: -0.025em;
-  color: var(--text-primary);
-  font-style: italic;
-}
-
-.page-subtitle {
-  font-family: var(--font-body);
-  font-weight: 400;
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-  line-height: 1.4;
-  margin-top: var(--space-sm);
-  letter-spacing: 0.01em;
-}
-
-.section-title {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: 1.125rem;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-  color: var(--text-primary);
-}
-
-.card-title {
-  font-family: var(--font-body);
-  font-weight: 600;
-  font-size: 0.95rem;
-  line-height: 1.35;
-  color: var(--text-primary);
-  letter-spacing: -0.005em;
-}
-
-/* ===== NAVIGATION ===== */
-.navbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-md) var(--space-xl);
-  background: transparent;
-  border-bottom: 1px solid var(--border-faint);
-}
-
-.nav-brand {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.nav-icon {
-  font-size: 1.25rem;
-  opacity: 0.7;
-}
-
-.nav-title {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: 1.1rem;
-  font-style: italic;
-  letter-spacing: -0.02em;
-  color: var(--text-primary);
-}
-
-.nav-links {
-  display: flex;
-  gap: var(--space-xs);
-}
-
-.nav-link {
-  font-family: var(--font-body);
-  font-weight: 500;
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  text-decoration: none;
-  padding: var(--space-sm) var(--space-lg);
-  border-radius: var(--radius-md);
-  transition: color var(--transition-fast), background var(--transition-fast);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.nav-link:hover {
-  color: var(--text-secondary);
-  background: var(--bg-hover);
-}
-
-.nav-link.active {
-  color: var(--accent-primary);
-  background: var(--accent-primary-faint);
-}
-
-/* ===== CONTAINER ===== */
-.container {
-  flex: 1;
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: var(--space-2xl) var(--space-xl);
-  width: 100%;
-}
-
-/* ===== FOOTER ===== */
-.footer {
-  text-align: center;
-  padding: var(--space-xl);
-  color: var(--text-dim);
-  font-size: 0.7rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  border-top: 1px solid var(--border-faint);
-}
-
-/* ===== PAGE HEADER ===== */
-.page-header {
-  margin-bottom: var(--space-3xl);
-  padding-bottom: var(--space-xl);
-  border-bottom: 1px solid var(--border-faint);
-}
-
-.page-header .progress-bar {
-  margin-top: var(--space-lg);
-  max-width: 360px;
-}
-
-.page-header-stat {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--text-dim);
-  letter-spacing: 0.05em;
-  margin-top: var(--space-sm);
-}
-
-/* ===== CARDS ===== */
-.card {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-faint);
-  border-radius: var(--radius-lg);
-  padding: var(--space-lg) var(--space-xl);
-  transition: border-color var(--transition-medium);
-  cursor: pointer;
-  will-change: border-color;
-}
-
-.card:hover {
-  border-color: var(--border-soft);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-md);
-  gap: var(--space-md);
-  border: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  width: 100%;
-  cursor: pointer;
-  padding: 0;
-}
-
-.card-header:focus-visible {
-  outline: 2px solid var(--accent-primary);
-  outline-offset: 2px;
-  border-radius: var(--radius-md);
-}
-
-.card-header-inner {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  min-width: 0;
-}
-
-.card-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.card-footer {
-  margin-top: var(--space-md);
-  padding-top: var(--space-md);
-  border-top: 1px solid var(--border-faint);
-}
-
-.card .checklist {
-  margin-top: var(--space-md);
-}
-
-/* ===== PROGRESS BAR ===== */
-.progress-bar {
-  --progress: 0%;
-  height: 3px;
-  background: var(--border-faint);
-  border-radius: 2px;
-  overflow: hidden;
-  position: relative;
-}
-
-.progress-fill {
-  height: 100%;
-  transform-origin: left;
-  transform: scaleX(clamp(0, calc(var(--progress) / 100%), 1));
-  background: var(--green);
-  border-radius: 2px;
-  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-  position: relative;
-}
-
-.progress-fill::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 8px;
-  background: linear-gradient(to right, transparent, var(--green));
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.card:hover .progress-fill::after {
-  opacity: 0.5;
-}
-
-.progress-text {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--text-dim);
-  letter-spacing: 0.03em;
-}
-
-.section-header .progress-bar {
-  width: 80px;
-  flex-shrink: 0;
-}
-
-/* ===== CHECKLIST ===== */
-.checklist {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-}
-
-.checklist-item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-radius: var(--radius-md);
-  transition: background var(--transition-fast);
-}
-
-.checklist-item:hover {
-  background: var(--bg-hover);
-}
-
-.checklist-status {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.7rem;
-  margin-top: 0.125rem;
-  border-radius: var(--radius-sm);
-}
-
-.checklist-status.done {
-  color: var(--green);
-  background: var(--green-faint);
-}
-
-.checklist-status.in-progress {
-  color: var(--yellow);
-  background: var(--yellow-faint);
-}
-
-.checklist-status.todo {
-  color: var(--text-dim);
-  background: var(--bg-subtle);
-}
-
-.checklist-status.reviewed {
-  color: var(--accent-secondary);
-  background: var(--accent-secondary-faint);
-}
-
-.checklist-text {
-  flex: 1;
-  font-size: 0.88rem;
-  line-height: 1.5;
-  color: var(--text-secondary);
-  max-width: 68ch;
-}
-
-.checklist-text.done {
-  text-decoration: line-through;
-  color: var(--text-dim);
-  text-decoration-color: var(--text-dim);
-  text-decoration-thickness: 1px;
-}
-
-/* ===== STATUS BADGE ===== */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xs);
-  padding: var(--space-micro) var(--space-sm);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono);
-  font-size: 0.68rem;
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.badge-done {
-  background: var(--green-faint);
-  color: var(--green);
-}
-
-.badge-in-progress {
-  background: var(--yellow-faint);
-  color: var(--yellow);
-}
-
-.badge-todo {
-  background: var(--bg-subtle);
-  color: var(--text-dim);
-}
-
-.badge-reviewed {
-  background: var(--accent-secondary-faint);
-  color: var(--accent-secondary);
-}
-
-/* ===== COPY BUTTON ===== */
-.copy-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xs);
-  padding: var(--space-sm) var(--space-md);
-  background: transparent;
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-md);
-  color: var(--text-tertiary);
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  letter-spacing: 0.02em;
-  min-height: 44px;
-  min-width: 44px;
-}
-
-.copy-btn:hover {
-  color: var(--text-primary);
-  border-color: var(--accent-primary);
-  background: var(--accent-primary-faint);
-}
-
-.copy-btn.copied {
-  color: var(--green);
-  border-color: var(--green);
-  background: var(--green-faint);
-}
-
-.copy-btn.copied span {
-  font-size: 0.65rem;
-}
-
-/* ===== COLLAPSIBLE SECTIONS ===== */
-.section {
-  margin-bottom: var(--space-2xl);
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-lg) var(--space-xl);
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-faint);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  user-select: none;
-  transition: background var(--transition-fast), border-color var(--transition-fast);
-  position: relative;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  width: 100%;
-}
-
-.section-header:focus-visible {
-  outline: 2px solid var(--accent-primary);
-  outline-offset: 2px;
-}
-
-.section-header::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: var(--space-lg);
-  bottom: var(--space-lg);
-  width: 1px;
-  background: var(--border-soft);
-}
-
-.section-header:hover {
-  background: var(--bg-hover);
-  border-color: var(--border-soft);
-}
-
-.section-toggle {
-  font-size: 0.6rem;
-  color: var(--text-dim);
-  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  margin-left: var(--space-xs);
-  flex-shrink: 0;
-}
-
-.section-header[aria-expanded="true"] .section-toggle {
-  transform: rotate(90deg);
-}
-
-.section-title-wrap {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex: 1;
-  min-width: 0;
-}
-
-.section-count {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  color: var(--text-dim);
-  letter-spacing: 0.03em;
-  flex-shrink: 0;
-}
-
-.section-content {
-  padding: var(--space-lg) var(--space-xl) var(--space-xl);
-  border: 1px solid var(--border-faint);
-  border-top: none;
-  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-  margin-top: -1px;
-  will-change: transform, opacity;
-}
-
-/* ===== FILTER CONTROLS ===== */
-.filters {
-  display: flex;
-  gap: var(--space-md);
-  margin-bottom: var(--space-2xl);
-  padding-bottom: var(--space-xl);
-  border-bottom: 1px solid var(--border-faint);
-  flex-wrap: wrap;
-}
-
-.filter-btn {
-  padding: var(--space-sm) var(--space-lg);
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: var(--text-tertiary);
-  font-family: var(--font-body);
-  font-size: 0.8rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  letter-spacing: 0.02em;
-}
-
-.filter-btn:hover {
-  color: var(--text-secondary);
-}
-
-.filter-btn.active {
-  color: var(--accent-primary);
-  border-bottom-color: var(--accent-primary);
-}
-
-/* ===== GRID LAYOUTS ===== */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: var(--space-lg);
-}
-
-/* ===== EMPTY STATE ===== */
-.empty-state {
-  text-align: center;
-  padding: var(--space-4xl) var(--space-xl);
-  color: var(--text-dim);
-}
-
-.empty-state-icon {
-  font-size: 2.5rem;
-  margin-bottom: var(--space-lg);
-  opacity: 0.4;
-}
-
-.empty-state-text {
-  font-size: 0.9rem;
-  font-weight: 400;
-  letter-spacing: 0.01em;
-}
-
-/* ===== WARNING LIST ===== */
-.warnings {
-  margin-top: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  background: var(--yellow-faint);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--warning-border);
-}
-
-.warning-item {
-  font-family: var(--font-mono);
-  font-size: 0.72rem;
-  color: var(--yellow);
-  line-height: 1.6;
-}
-
-.warning-item::before {
-  content: "⚠ ";
-  opacity: 0.8;
-}
-
-/* ===== SECTION METRIC ===== */
-.section-stat {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-/* ===== DOC TYPE ICON ===== */
-.doc-type-icon {
-  font-size: 1rem;
-  flex-shrink: 0;
-  opacity: 0.85;
-}
-
-/* ===== RESPONSIVE ===== */
-@media (max-width: 640px) {
-  .navbar {
-    flex-direction: column;
-    gap: var(--space-sm);
-    padding: var(--space-md) var(--space-lg);
-  }
-
-  .container {
-    padding: var(--space-xl) var(--space-lg);
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-    gap: var(--space-md);
-  }
-
-  .section-header {
-    flex-wrap: wrap;
-    gap: var(--space-sm);
-  }
-
-  .section-stat {
-    width: 100%;
-  }
-
-  .filters {
-    gap: var(--space-xs);
-  }
-
-  .filter-btn {
-    padding-left: var(--space-sm);
-    padding-right: var(--space-sm);
-    font-size: 0.75rem;
-  }
-
-  .page-header {
-    margin-bottom: var(--space-2xl);
-  }
-}
-
-/* ===== REDUCED MOTION ===== */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-
-  .progress-fill {
-    transition: none;
-  }
-}