archsight 0.1.5 → 0.2.1

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

@@ -1,863 +0,0 @@
-/* Editor Styles - Layout only, form styling from Pico CSS */
-
-/* Editor container */
-.editor-container {
-  width: 100%;
-}
-
-.editor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--muted-border-color);
-}
-
-.editor-header h2 {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 0;
-}
-
-/* Editor form layout */
-.editor-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Article header with back button */
-.editor-form article:first-child > header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.editor-form article:first-child > header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-/* Back button in article header - matches .btn-header style */
-.btn-back {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.75rem;
-  font-size: 0.9rem;
-  color: var(--muted-color);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--border-radius);
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.btn-back:hover {
-  color: var(--primary);
-  border-color: var(--primary);
-}
-
-/* Two-column grid for annotations */
-.annotations-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-/* Field groups - remove Pico's default margin */
-.field-group {
-  margin-bottom: 0;
-}
-
-.field-group label {
-  margin-bottom: 0.25rem;
-}
-
-.field-group label .required {
-  color: var(--del-color);
-  margin-left: 0.15rem;
-}
-
-.field-group input,
-.field-group select,
-.field-group textarea {
-  margin-bottom: 0;
-}
-
-.field-description {
-  font-size: 0.8rem;
-  color: var(--muted-color);
-  margin-top: 0.25rem;
-}
-
-.field-error {
-  color: var(--del-color);
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
-}
-
-/* Full-width fields span both columns */
-.field-full-width {
-  grid-column: 1 / -1;
-}
-
-/* Markdown textarea - monospace font */
-.markdown-field textarea {
-  font-family: var(--font-family-monospace);
-  min-height: 200px;
-  resize: vertical;
-}
-
-/* Code field - monospace font, larger height */
-.code-field textarea {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 0.9em;
-  line-height: 1.5;
-  min-height: 600px;
-  resize: vertical;
-  tab-size: 2;
-  white-space: pre;
-  overflow-wrap: normal;
-  overflow-x: auto;
-}
-
-.future-hint {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  color: var(--muted-color);
-  font-size: 0.8rem;
-  margin-top: 0.5rem;
-}
-
-/* Relations editor */
-.relations-editor {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-#relations-list {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--background-color);
-  border: 1px solid var(--muted-border-color);
-  border-radius: 4px;
-}
-
-#relations-list:empty {
-  display: none;
-}
-
-/* Individual relation item - compact display */
-.relation-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.35rem 0.5rem;
-  font-size: 0.9rem;
-  border-bottom: 1px solid var(--muted-border-color);
-}
-
-.relation-item:last-child {
-  border-bottom: none;
-}
-
-.relation-text {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.relation-text strong {
-  font-weight: 600;
-}
-
-.relation-text em {
-  font-style: normal;
-  color: var(--muted-color);
-}
-
-/* Compact remove button */
-.btn-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: none;
-  border-radius: 3px;
-  color: var(--muted-color);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.btn-remove:hover {
-  background-color: var(--del-color);
-  color: white;
-}
-
-.btn-remove i {
-  font-size: 0.85rem;
-}
-
-/* Add relation row - inline form */
-.add-relation-row {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.add-relation-row select {
-  margin: 0;
-  flex: 1;
-}
-
-.add-relation-row select:first-child {
-  flex: 1.2;
-}
-
-.btn-add {
-  margin: 0;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.no-relations {
-  color: var(--muted-color);
-  font-style: italic;
-  margin: 0;
-}
-
-/* Form actions */
-.form-actions {
-  display: flex;
-  gap: 0.75rem;
-  padding-top: 1.25rem;
-  border-top: 1px solid var(--muted-border-color);
-}
-
-.form-actions button,
-.form-actions [role="button"] {
-  width: auto;
-  margin: 0;
-}
-
-/* ==================== */
-/* YAML Output Section  */
-/* ==================== */
-
-.yaml-output > header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.yaml-output > header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-.yaml-success {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0 0 1rem 0;
-  color: var(--ins-color);
-  font-weight: 500;
-}
-
-#yaml-content {
-  margin: 0 calc(var(--block-spacing-horizontal) * -1);
-  padding: var(--block-spacing-horizontal);
-  background-color: var(--code-background-color);
-  border-radius: 0;
-  overflow-x: auto;
-}
-
-#yaml-content code {
-  font-size: 0.9em;
-  white-space: pre;
-  line-height: 1.5;
-  padding: 0;
-}
-
-.yaml-output > footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.yaml-file-info,
-.yaml-instructions {
-  display: flex;
-  gap: 0.5rem;
-  margin: 0;
-  font-size: 0.9em;
-  color: var(--muted-color);
-  flex: 1;
-  min-width: 0;
-  line-height: 1.5;
-}
-
-.yaml-file-info {
-  align-items: center;
-}
-
-.yaml-instructions {
-  align-items: flex-start;
-}
-
-.yaml-file-info > span,
-.yaml-instructions > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.yaml-file-info > i,
-.yaml-instructions > i {
-  flex-shrink: 0;
-}
-
-.yaml-actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-
-.yaml-actions button,
-.yaml-actions [role="button"] {
-  width: auto;
-  margin: 0;
-}
-
-/* Conflict error banner */
-.conflict-error {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  background-color: var(--pico-mark-background-color);
-  color: var(--pico-del-color);
-  border-radius: var(--pico-border-radius);
-}
-
-.conflict-error i {
-  flex-shrink: 0;
-}
-
-/* Header action buttons - ghost style */
-.btn-header {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.75rem;
-  font-size: 0.9rem;
-  color: var(--muted-color);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--border-radius);
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.btn-header:hover {
-  color: var(--primary);
-  border-color: var(--primary);
-}
-
-/* Header actions container */
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* ==================== */
-/* Markdown Editor Dialog */
-/* ==================== */
-
-/* Markdown Editor Overlay */
-#markdown-editor-overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-}
-
-#markdown-editor-overlay.hidden {
-  display: none;
-}
-
-.markdown-editor-backdrop {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.markdown-editor-panel {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  bottom: 20px;
-  left: 20px;
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
-  background-color: var(--card-background-color, #fff);
-  overflow: hidden;
-}
-
-
-/* Lexical toolbar */
-.lexical-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem 1rem;
-  background-color: var(--card-background-color, #fff);
-  flex-wrap: wrap;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  z-index: 1;
-}
-
-.toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
-  padding: 0 0.5rem;
-  margin: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--border-radius);
-  color: var(--color);
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.toolbar-btn:hover {
-  background-color: var(--muted-border-color);
-  border-color: var(--muted-border-color);
-}
-
-.toolbar-btn:active {
-  background-color: var(--primary);
-  border-color: var(--primary);
-  color: var(--primary-inverse);
-}
-
-.toolbar-btn i {
-  font-size: 1.1rem;
-}
-
-.toolbar-divider {
-  width: 1px;
-  height: 1.5rem;
-  margin: 0 0.5rem;
-  background-color: var(--muted-border-color);
-}
-
-.toolbar-spacer {
-  flex: 1;
-}
-
-.toolbar-action {
-  padding: 0.4rem 0.75rem;
-  margin: 0;
-  font-size: 0.85rem;
-}
-
-
-/* Lexical editor container */
-.lexical-editor-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  position: relative;
-}
-
-#lexical-editor-root {
-  flex: 1;
-  min-height: 0;
-  padding: 1rem 1.5rem;
-  font-family: var(--font-family);
-  line-height: 1.6;
-  overflow-y: auto;
-  position: relative;
-}
-
-#lexical-editor-root:focus {
-  outline: none;
-}
-
-/* Lexical editor content styles */
-#lexical-editor-root p {
-  margin: 0 0 0.75rem 0;
-}
-
-#lexical-editor-root p:last-child {
-  margin-bottom: 0;
-}
-
-#lexical-editor-root h1,
-#lexical-editor-root h2,
-#lexical-editor-root h3,
-#lexical-editor-root h4 {
-  margin: 1rem 0 0.5rem 0;
-  font-weight: 600;
-}
-
-#lexical-editor-root h1:first-child,
-#lexical-editor-root h2:first-child,
-#lexical-editor-root h3:first-child {
-  margin-top: 0;
-}
-
-#lexical-editor-root ul,
-#lexical-editor-root ol {
-  margin: 0.5rem 0;
-  padding-left: 1.5rem;
-}
-
-#lexical-editor-root li {
-  margin: 0.25rem 0;
-}
-
-#lexical-editor-root blockquote {
-  margin: 0.75rem 0;
-  padding: 0.5rem 1rem;
-  border-left: 3px solid var(--pico-muted-border-color, #e4e4e7);
-  color: var(--pico-muted-color, #71717a);
-  font-style: italic;
-}
-
-#lexical-editor-root code {
-  padding: 0.15rem 0.35rem;
-  background-color: var(--code-background-color, #f4f4f5);
-  border: 1px solid var(--pico-muted-border-color, #e4e4e7);
-  border-radius: 3px;
-  font-family: var(--pico-font-family-monospace, monospace);
-  font-size: 0.9em;
-}
-
-#lexical-editor-root pre {
-  margin: 0.75rem 0;
-  padding: 1rem;
-  background-color: var(--code-background-color);
-  border-radius: var(--border-radius);
-  overflow-x: auto;
-  position: relative;
-}
-
-#lexical-editor-root pre code {
-  padding: 0;
-  background: none;
-}
-
-/* Code block with border */
-#lexical-editor-root .lexical-code {
-  position: relative;
-  display: block;
-  width: 100%;
-  margin: 0.75rem 0;
-  padding: 1rem;
-  background-color: var(--code-background-color, #f4f4f5);
-  border: 1px solid var(--pico-muted-border-color, #e4e4e7);
-  border-radius: var(--pico-border-radius, 0.375rem);
-  font-family: var(--pico-font-family-monospace, monospace);
-  font-size: 0.9em;
-  line-height: 1.5;
-  overflow-x: auto;
-  white-space: pre;
-  tab-size: 2;
-  box-sizing: border-box;
-}
-
-/* Toolbar language selector for code blocks */
-.toolbar-select {
-  height: 2rem;
-  width: auto;
-  min-width: 130px;
-  max-width: 180px;
-  padding: 0 0.75rem;
-  margin: 0;
-  font-size: 0.85rem;
-  border: 1px solid var(--pico-muted-border-color, #e4e4e7);
-  border-radius: var(--pico-border-radius, 0.375rem);
-  background-color: transparent;
-  color: var(--pico-color, inherit);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.toolbar-select:hover {
-  border-color: var(--pico-primary, #1e88e5);
-}
-
-.toolbar-select:focus {
-  outline: none;
-  border-color: var(--pico-primary, #1e88e5);
-}
-
-.toolbar-select.hidden {
-  display: none;
-}
-
-/* Link styles */
-#lexical-editor-root .lexical-link {
-  color: var(--pico-primary, #1e88e5);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-#lexical-editor-root .lexical-link:hover {
-  text-decoration: none;
-}
-
-/* Code highlight token colors - GitHub Light Theme (matches highlight.min.css) */
-#lexical-editor-root .lexical-code .tokenComment { color: #6a737d; }
-#lexical-editor-root .lexical-code .tokenPunctuation { color: #24292e; }
-#lexical-editor-root .lexical-code .tokenProperty { color: #005cc5; }
-#lexical-editor-root .lexical-code .tokenSelector { color: #032f62; }
-#lexical-editor-root .lexical-code .tokenOperator { color: #005cc5; }
-#lexical-editor-root .lexical-code .tokenAttr { color: #d73a49; }
-#lexical-editor-root .lexical-code .tokenVariable { color: #e36209; }
-#lexical-editor-root .lexical-code .tokenFunction { color: #6f42c1; }
-
-#lexical-editor-root a {
-  color: var(--primary);
-  text-decoration: underline;
-}
-
-#lexical-editor-root strong,
-#lexical-editor-root .lexical-bold {
-  font-weight: 700;
-}
-
-#lexical-editor-root em,
-#lexical-editor-root .lexical-italic {
-  font-style: italic;
-}
-
-#lexical-editor-root u,
-#lexical-editor-root .lexical-underline {
-  text-decoration: underline;
-}
-
-#lexical-editor-root s,
-#lexical-editor-root .lexical-strikethrough {
-  text-decoration: line-through;
-}
-
-/* Label row with edit button */
-.label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-}
-
-.label-row label {
-  margin-bottom: 0;
-}
-
-.btn-edit-markdown {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.85rem;
-  color: var(--muted-color);
-  background: transparent;
-  border: 1px solid var(--muted-border-color);
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.btn-edit-markdown:hover {
-  color: var(--primary);
-  border-color: var(--primary);
-  background-color: transparent;
-}
-
-.btn-edit-markdown i {
-  font-size: 0.9rem;
-}
-
-/* ==================== */
-/* Dark Mode Support    */
-/* ==================== */
-
-@media (prefers-color-scheme: dark) {
-  /* Editor panel dark mode */
-  .markdown-editor-panel {
-    background-color: var(--card-background-color, #1e1e1e);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-  }
-
-  .markdown-editor-backdrop {
-    background-color: rgba(0, 0, 0, 0.7);
-  }
-
-  /* Toolbar dark mode */
-  .lexical-toolbar {
-    background-color: var(--card-background-color, #1e1e1e);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  }
-
-  .toolbar-btn {
-    color: var(--color, #c9d1d9);
-  }
-
-  .toolbar-btn:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  .toolbar-btn:active {
-    background-color: var(--primary);
-    border-color: var(--primary);
-  }
-
-  .toolbar-divider {
-    background-color: rgba(255, 255, 255, 0.15);
-  }
-
-  .toolbar-select {
-    background-color: transparent;
-    border-color: rgba(255, 255, 255, 0.2);
-    color: var(--color, #c9d1d9);
-  }
-
-  .toolbar-select:hover,
-  .toolbar-select:focus {
-    border-color: var(--primary, #58a6ff);
-  }
-
-  /* Editor root dark mode */
-  #lexical-editor-root {
-    color: var(--color, #c9d1d9);
-    background-color: var(--card-background-color, #1e1e1e);
-  }
-
-  /* Blockquote dark mode */
-  #lexical-editor-root blockquote {
-    border-left-color: rgba(255, 255, 255, 0.2);
-    color: #8b949e;
-  }
-
-  /* Inline code dark mode */
-  #lexical-editor-root code {
-    background-color: rgba(110, 118, 129, 0.4);
-    border-color: rgba(255, 255, 255, 0.1);
-    color: #c9d1d9;
-  }
-
-  /* Code block dark mode */
-  #lexical-editor-root .lexical-code {
-    background-color: #0d1117;
-    border-color: rgba(255, 255, 255, 0.1);
-    color: #c9d1d9;
-  }
-
-  /* Code highlight token colors - GitHub Dark Theme (matches highlight.min.css) */
-  #lexical-editor-root .lexical-code .tokenComment { color: #8b949e; }
-  #lexical-editor-root .lexical-code .tokenPunctuation { color: #c9d1d9; }
-  #lexical-editor-root .lexical-code .tokenProperty { color: #79c0ff; }
-  #lexical-editor-root .lexical-code .tokenSelector { color: #a5d6ff; }
-  #lexical-editor-root .lexical-code .tokenOperator { color: #79c0ff; }
-  #lexical-editor-root .lexical-code .tokenAttr { color: #ff7b72; }
-  #lexical-editor-root .lexical-code .tokenVariable { color: #ffa657; }
-  #lexical-editor-root .lexical-code .tokenFunction { color: #d2a8ff; }
-
-  /* Link dark mode */
-  #lexical-editor-root .lexical-link,
-  #lexical-editor-root a {
-    color: #58a6ff;
-  }
-
-  /* Edit button dark mode */
-  .btn-edit-markdown {
-    color: #8b949e;
-    border-color: rgba(255, 255, 255, 0.15);
-  }
-
-  .btn-edit-markdown:hover {
-    color: #58a6ff;
-    border-color: #58a6ff;
-  }
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .editor-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .annotations-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .add-relation-row {
-    flex-direction: column;
-  }
-
-  .add-relation-row select,
-  .add-relation-row button {
-    width: 100%;
-  }
-
-  .form-actions {
-    flex-direction: column;
-  }
-
-  .form-actions button,
-  .form-actions [role="button"] {
-    width: 100%;
-  }
-
-  .yaml-output > footer {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .yaml-actions {
-    flex-direction: column;
-  }
-
-  .yaml-actions button,
-  .yaml-actions [role="button"] {
-    width: 100%;
-  }
-}