archsight 0.1.0

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

@@ -0,0 +1,201 @@
+/* Base/Shared Styles */
+
+.content {
+  zoom: 70%;
+}
+
+/* Reduce vertical spacing on articles to minimize scrolling */
+.content article {
+  margin-bottom: 1rem;
+}
+
+.content article > header {
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.content article > header h2 {
+  margin-bottom: 0;
+}
+
+.content svg a {
+  text-decoration: none;
+}
+
+details.dropdown>summary+ul {
+  width: auto;
+}
+
+.content .documentation tbody ul {
+  margin-bottom: 0;
+}
+
+/* Reduce table cell padding in documentation tables */
+.content .documentation td,
+.content .documentation th {
+  padding: 0.5rem 0.75rem;
+}
+
+article>header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+article>header h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Kind help button (small, in header) */
+.kind-help {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--card-background-color);
+  border: 1px solid var(--muted-border-color);
+  transition: all 0.2s ease;
+  color: var(--muted-color);
+  font-size: 0.9em;
+}
+
+.kind-help:hover {
+  background-color: var(--primary);
+  color: var(--primary-inverse);
+  border-color: var(--primary);
+}
+
+/* Badge styles */
+.badge {
+  font-size: 0.75em;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge-warning {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.badge-info {
+  background-color: #dbeafe;
+  color: #1e40af;
+}
+
+.badge-danger {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.badge-secondary {
+  background-color: #f3f4f6;
+  color: #6b7280;
+}
+
+/* Dark mode badge adjustments */
+@media (prefers-color-scheme: dark) {
+  .badge-warning {
+    background-color: #78350f;
+    color: #fef3c7;
+  }
+
+  .badge-info {
+    background-color: #1e3a5f;
+    color: #93c5fd;
+  }
+
+  .badge-danger {
+    background-color: #7f1d1d;
+    color: #fecaca;
+  }
+
+  .badge-secondary {
+    background-color: #374151;
+    color: #d1d5db;
+  }
+}
+
+/* Generated resource badge - prominent display in header */
+.generated-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  font-size: 0.75em;
+  padding: 6px 12px;
+  background-color: var(--code-background-color);
+  color: var(--muted-color);
+  border-radius: 6px;
+  border: 1px solid var(--muted-border-color);
+}
+
+.generated-badge .generated-script {
+  font-weight: 500;
+}
+
+.generated-badge .generated-time {
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+
+/* Mermaid diagrams - base styles overridden by mermaid-layers.css */
+
+/* Wiki-style broken links */
+.broken-link {
+  color: #dc2626;
+  text-decoration: underline wavy;
+  cursor: help;
+}
+
+/* ===== Layer-based Icon Colors ===== */
+
+/* Strategy Layer - Orange */
+.icon-strategy {
+  color: #D4824A;
+}
+
+/* Business Layer - Yellow */
+.icon-business {
+  color: #D4B83C;
+}
+
+/* Application Layer - Blue */
+.icon-application {
+  color: #4A9ECD;
+}
+
+/* Technology Layer - Green */
+.icon-technology {
+  color: #7AB316;
+}
+
+/* Motivation Layer - Purple */
+.icon-motivation {
+  color: #AB47BC;
+}
+
+/* Other - Gray */
+.icon-other {
+  color: #999999;
+}
+
+/* Responsive content */
+@media all and (min-width: 800px) {
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    zoom: 100%;
+    min-width: 0;
+  }
+}
+
+main .canvas a {
+  text-decoration: none;
+}

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

@@ -0,0 +1,106 @@
+/* ===== Global Styles ===== */
+
+/* Hide table borders in all nodes */
+.node polygon[fill="none"] {
+    stroke: none !important;
+}
+
+/* Default text color for all nodes */
+.node text {
+    fill: #000000 !important;
+}
+
+
+/* ===== Layer Colors (Light Mode) ===== */
+
+/* Strategy Layer - Orange */
+.layer-strategy path[fill="lightgrey"] {
+    stroke: #F4A261 !important;
+    fill: #F4A261 !important;
+}
+
+/* Business Layer - Yellow */
+.layer-business path[fill="lightgrey"] {
+    stroke: #F9DC5C !important;
+    fill: #F9DC5C !important;
+}
+
+/* Application Layer - Blue */
+.layer-application path[fill="lightgrey"] {
+    stroke: #6CBEED !important;
+    fill: #6CBEED !important;
+}
+
+/* Technology Layer - Green */
+.layer-technology path[fill="lightgrey"] {
+    stroke: #8AC926 !important;
+    fill: #8AC926 !important;
+}
+
+/* Motivation Layer - Purple */
+.layer-motivation path[fill="lightgrey"] {
+    stroke: #CE93D8 !important;
+    fill: #CE93D8 !important;
+}
+
+/* Other - Gray */
+.layer-other path[fill="lightgrey"] {
+    stroke: #cccccc !important;
+    fill: #cccccc !important;
+}
+
+
+/* ===== Dark Mode ===== */
+
+@media (prefers-color-scheme: dark) {
+
+    /* Override black strokes and fills for visibility */
+    [stroke="black"] {
+        stroke: white !important;
+    }
+
+    [fill="black"] {
+        fill: white !important;
+    }
+
+    /* White text for all nodes in dark mode */
+    .node text {
+        fill: #FFFFFF !important;
+    }
+
+    /* Strategy Layer - Orange */
+    .layer-strategy path[fill="lightgrey"] {
+        stroke: #D4824A !important;
+        fill: #C17A3A !important;
+    }
+
+    /* Business Layer - Yellow */
+    .layer-business path[fill="lightgrey"] {
+        stroke: #D9BC3C !important;
+        fill: #C9AC2C !important;
+    }
+
+    /* Application Layer - Blue */
+    .layer-application path[fill="lightgrey"] {
+        stroke: #4A9ECD !important;
+        fill: #2A7EAD !important;
+    }
+
+    /* Technology Layer - Green */
+    .layer-technology path[fill="lightgrey"] {
+        stroke: #7AB316 !important;
+        fill: #6A9916 !important;
+    }
+
+    /* Motivation Layer */
+    .layer-motivation path[fill="lightgrey"] {
+        stroke: #AB47BC !important;
+        fill: #8E24AA !important;
+    }
+
+    /* Other */
+    .layer-other path[fill="lightgrey"] {
+        stroke: #999999 !important;
+        fill: #666666 !important;
+    }
+}

data/lib/archsight/web/public/css/highlight.min.css

@@ -0,0 +1,10 @@
+/* Highlight.js - GitHub theme with dark mode support */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
+
+/* Light theme (default) */
+.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
+}