archsight 0.1.5 → 0.2.1

data/lib/archsight/web/public/css/layout.css

@@ -1,421 +0,0 @@
-/* Layout Styles - Sidebar, Navigation, Search, Errors */
-
-/* Sidebar */
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.sidebar-section {
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-}
-
-.sidebar-section:not(:last-child) {
-  border-bottom: 1px solid var(--muted-border-color);
-}
-
-.sidebar-heading {
-  margin-bottom: 8px;
-}
-
-.kind-filter ul,
-.instance-list ul {
-  padding: 0;
-  margin: 0;
-}
-
-.kind-filter li,
-.instance-list li {
-  padding: 0;
-  margin: 0;
-}
-
-.kind-filter a,
-.instance-list a {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2px;
-  font-size: 0.85em;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  text-decoration: none;
-}
-
-.kind-filter a[aria-current="page"],
-.instance-list a[aria-current="page"] {
-  background-color: var(--primary);
-  color: var(--primary-inverse);
-}
-
-.kind-count {
-  font-size: 0.85em;
-  padding: 2px 6px;
-  border-radius: 10px;
-  min-width: 24px;
-  text-align: center;
-  opacity: 0.7;
-}
-
-.kind-filter a[aria-current="page"] .kind-count {
-  opacity: 1;
-}
-
-/* Filter groups */
-.filter-group {
-  margin-bottom: 0.5rem;
-}
-
-.filter-group:last-child {
-  margin-bottom: 0;
-}
-
-.filter-label {
-  font-size: 0.75em;
-  font-weight: 600;
-  color: var(--muted-color);
-  text-transform: uppercase;
-  margin-bottom: 0.25rem;
-  padding: 0;
-}
-
-.filter-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.filter-chip {
-  display: inline-block;
-  font-size: 0.75em;
-  padding: 0.2rem 0.5rem;
-  background-color: var(--card-background-color);
-  border: 1px solid var(--muted-border-color);
-  border-radius: 12px;
-  text-decoration: none;
-  color: var(--color);
-  transition: all 0.2s ease;
-}
-
-.filter-chip:hover {
-  background-color: var(--primary);
-  color: var(--primary-inverse);
-  border-color: var(--primary);
-}
-
-/* Responsive layout */
-@media all and (min-width: 800px) {
-  main {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-  }
-
-  .sidebar {
-    width: clamp(250px, 20vw, 400px);
-    flex-shrink: 0;
-  }
-}
-
-/* Search query display */
-.search-query-display {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  align-items: center;
-  padding: 1rem 0;
-}
-
-.query-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-}
-
-.query-item .label {
-  font-weight: 600;
-  color: var(--muted-color);
-  text-transform: uppercase;
-  font-size: 0.85em;
-  letter-spacing: 0.5px;
-}
-
-.query-item code {
-  padding: 0.35rem 0.75rem;
-  background-color: var(--code-background-color);
-  border-radius: 6px;
-  font-size: 0.95em;
-  font-family: monospace;
-  color: var(--color);
-}
-
-.query-value {
-  word-break: break-word;
-}
-
-.kind-value {
-  text-transform: capitalize;
-}
-
-.result-count {
-  font-weight: 600;
-  color: var(--color);
-  font-size: 1em;
-}
-
-.query-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background-color: var(--card-background-color);
-  border: 1px solid var(--muted-border-color);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  margin-left: 0.25rem;
-}
-
-.query-toggle:hover {
-  background-color: var(--primary);
-  color: var(--primary-inverse);
-  border-color: var(--primary);
-  transform: rotate(180deg);
-}
-
-.query-toggle i {
-  font-size: 1.1em;
-}
-
-/* Search container and spinner */
-.search-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.search-container input.search {
-  min-width: 700px;
-}
-
-.search-spinner {
-  display: none;
-}
-
-.search-spinner.htmx-request {
-  display: inline-flex;
-  align-items: center;
-}
-
-.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Search help button */
-.search-help {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background-color: var(--card-background-color);
-  border: 1px solid var(--muted-border-color);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  color: var(--muted-color);
-}
-
-.search-help:hover {
-  background-color: var(--primary);
-  color: var(--primary-inverse);
-  border-color: var(--primary);
-}
-
-.search-help i {
-  font-size: 1.1em;
-}
-
-/* Search error styles */
-.search-error {
-  padding: 1rem;
-  background-color: #fee2e2;
-  border: 1px solid #fecaca;
-  border-radius: 8px;
-  margin-bottom: 1rem;
-}
-
-.search-error-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  color: #991b1b;
-  font-weight: 600;
-}
-
-.search-error-header i {
-  font-size: 1.2em;
-}
-
-.search-error-message {
-  font-family: monospace;
-  font-size: 0.95em;
-  color: #991b1b;
-  background-color: #fef2f2;
-  padding: 0.75rem;
-  border-radius: 4px;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.search-error-query {
-  margin-top: 0.5rem;
-  font-size: 0.85em;
-  color: #7f1d1d;
-}
-
-.search-error-query code {
-  background-color: #fef2f2;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .search-error {
-    background-color: #450a0a;
-    border-color: #7f1d1d;
-  }
-
-  .search-error-header {
-    color: #fca5a5;
-  }
-
-  .search-error-message {
-    color: #fecaca;
-    background-color: #7f1d1d;
-  }
-
-  .search-error-query {
-    color: #fca5a5;
-  }
-
-  .search-error-query code {
-    background-color: #7f1d1d;
-  }
-}
-
-/* Error page styles */
-.error-header {
-  margin-bottom: 1rem;
-}
-
-.error-header h3 {
-  color: #dc2626;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.error-message {
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
-}
-
-.error-location {
-  color: #6b7280;
-  font-family: monospace;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.error-line-badge {
-  background-color: #dc2626;
-  color: white;
-  padding: 0.125rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
-.reload-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.error-code-block {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.error-code-block pre {
-  margin: 0;
-  padding: 1rem;
-  background-color: #1e1e1e;
-  border-radius: 8px;
-  overflow-x: auto;
-}
-
-.error-code-block code {
-  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
-  font-size: 0.8rem;
-  line-height: 1.1;
-}
-
-.error-code-block .code-line,
-.error-code-block .error-line {
-  display: block;
-  white-space: pre;
-}
-
-.error-code-block .code-line {
-  color: #d4d4d4;
-}
-
-.error-code-block .error-line {
-  background-color: rgba(220, 38, 38, 0.3);
-  color: #fca5a5;
-  margin: 0 -1rem;
-  padding: 0 1rem;
-}
-
-.error-code-block .line-number {
-  color: #6b7280;
-  user-select: none;
-  margin-right: 1rem;
-  display: inline-block;
-  min-width: 3rem;
-  text-align: right;
-}
-
-.error-code-block .error-line .line-number {
-  color: #f87171;
-}
-
-@media (prefers-color-scheme: dark) {
-  .error-header h3 {
-    color: #f87171;
-  }
-
-  .error-location {
-    color: #9ca3af;
-  }
-}

data/lib/archsight/web/public/css/mermaid-layers.css

@@ -1,188 +0,0 @@
-/* Mermaid diagrams with svg-pan-zoom */
-.mermaid {
-  width: 100%;
-  height: 70vh;
-  min-height: 400px;
-  border: 1px solid var(--pico-muted-border-color, #ddd);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.mermaid svg {
-  display: block;
-}
-
-/* Shared SVG zoom controls (used by mermaid and graphviz) */
-.svg-zoom-controls {
-  position: absolute;
-  bottom: 12px;
-  right: 12px;
-  display: flex;
-  gap: 6px;
-  z-index: 10;
-}
-
-.svg-zoom-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  background: #fff;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.svg-zoom-btn:hover {
-  background: #f0f0f0;
-  border-color: #999;
-}
-
-.svg-zoom-btn:active {
-  background: #e0e0e0;
-}
-
-.svg-zoom-btn svg {
-  width: 20px;
-  height: 20px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .svg-zoom-btn {
-    background: #2a2a2a;
-    border-color: #555;
-    color: #eee;
-  }
-
-  .svg-zoom-btn:hover {
-    background: #3a3a3a;
-    border-color: #777;
-  }
-
-  .svg-zoom-btn:active {
-    background: #444;
-  }
-}
-
-/* Mermaid layer colors (ArchiMate-inspired) */
-/* These styles target nodes with :::layerName class syntax */
-
-/* Light mode (default) */
-:root {
-  /* Motivation - purple */
-  --layer-motivation-fill: #E1BEE7;
-  --layer-motivation-stroke: #7B1FA2;
-  --layer-motivation-text: #000;
-  /* Strategy - orange */
-  --layer-strategy-fill: #FFCC80;
-  --layer-strategy-stroke: #E65100;
-  --layer-strategy-text: #000;
-  /* Business - yellow */
-  --layer-business-fill: #FFF59D;
-  --layer-business-stroke: #F9A825;
-  --layer-business-text: #000;
-  /* Application - blue */
-  --layer-application-fill: #81D4FA;
-  --layer-application-stroke: #0277BD;
-  --layer-application-text: #000;
-  /* Technology - green */
-  --layer-technology-fill: #C5E1A5;
-  --layer-technology-stroke: #558B2F;
-  --layer-technology-text: #000;
-}
-
-/* Dark mode - darker fills with light text */
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* Motivation - deep purple */
-    --layer-motivation-fill: #6A1B9A;
-    --layer-motivation-stroke: #CE93D8;
-    --layer-motivation-text: #F3E5F5;
-    /* Strategy - deep orange */
-    --layer-strategy-fill: #BF360C;
-    --layer-strategy-stroke: #FFAB91;
-    --layer-strategy-text: #FBE9E7;
-    /* Business - amber/brown */
-    --layer-business-fill: #FF8F00;
-    --layer-business-stroke: #FFE082;
-    --layer-business-text: #000;
-    /* Application - deep blue */
-    --layer-application-fill: #0277BD;
-    --layer-application-stroke: #81D4FA;
-    --layer-application-text: #E1F5FE;
-    /* Technology - deep green */
-    --layer-technology-fill: #33691E;
-    --layer-technology-stroke: #AED581;
-    --layer-technology-text: #F1F8E9;
-  }
-}
-
-/* Motivation layer nodes */
-.mermaid .node.motivation > rect,
-.mermaid .node.motivation > polygon,
-.mermaid .node.motivation > circle {
-  fill: var(--layer-motivation-fill) !important;
-  stroke: var(--layer-motivation-stroke) !important;
-}
-.mermaid .node.motivation .label,
-.mermaid .node.motivation .label * {
-  fill: var(--layer-motivation-text) !important;
-  color: var(--layer-motivation-text) !important;
-}
-
-/* Strategy layer nodes */
-.mermaid .node.strategy > rect,
-.mermaid .node.strategy > polygon,
-.mermaid .node.strategy > circle {
-  fill: var(--layer-strategy-fill) !important;
-  stroke: var(--layer-strategy-stroke) !important;
-}
-.mermaid .node.strategy .label,
-.mermaid .node.strategy .label * {
-  fill: var(--layer-strategy-text) !important;
-  color: var(--layer-strategy-text) !important;
-}
-
-/* Business layer nodes */
-.mermaid .node.business > rect,
-.mermaid .node.business > polygon,
-.mermaid .node.business > circle {
-  fill: var(--layer-business-fill) !important;
-  stroke: var(--layer-business-stroke) !important;
-}
-.mermaid .node.business .label,
-.mermaid .node.business .label * {
-  fill: var(--layer-business-text) !important;
-  color: var(--layer-business-text) !important;
-}
-
-/* Application layer nodes */
-.mermaid .node.application > rect,
-.mermaid .node.application > polygon,
-.mermaid .node.application > circle {
-  fill: var(--layer-application-fill) !important;
-  stroke: var(--layer-application-stroke) !important;
-}
-.mermaid .node.application .label,
-.mermaid .node.application .label * {
-  fill: var(--layer-application-text) !important;
-  color: var(--layer-application-text) !important;
-}
-
-/* Technology layer nodes */
-.mermaid .node.technology > rect,
-.mermaid .node.technology > polygon,
-.mermaid .node.technology > circle {
-  fill: var(--layer-technology-fill) !important;
-  stroke: var(--layer-technology-stroke) !important;
-}
-.mermaid .node.technology .label,
-.mermaid .node.technology .label * {
-  fill: var(--layer-technology-text) !important;
-  color: var(--layer-technology-text) !important;
-}