collabmd 0.1.21 → 0.1.23

package/src/client/styles/features/preview-markdown.css

@@ -0,0 +1,201 @@
+/* ===== PREVIEW / MARKDOWN ===== */
+
+.preview-content h1 {
+  margin: var(--space-8) 0 var(--space-4);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-divider);
+  font-size: var(--text-xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.preview-content h1:first-child {
+  margin-top: 0;
+}
+
+.preview-content h2 {
+  margin: var(--space-6) 0 var(--space-3);
+  font-size: var(--text-lg);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.preview-content h3 {
+  margin: var(--space-5) 0 var(--space-2);
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+
+.preview-content h4,
+.preview-content h5,
+.preview-content h6 {
+  margin: var(--space-4) 0 var(--space-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.preview-content p {
+  max-width: 72ch;
+  margin-bottom: var(--space-4);
+}
+
+.preview-content p:has(> .excalidraw-embed-placeholder:only-child),
+.preview-content p:has(> .video-embed-placeholder:only-child),
+.preview-content p:has(> .plantuml-shell:only-child) {
+  max-width: none;
+  margin-bottom: 0;
+}
+
+.preview-content a {
+  color: var(--color-primary);
+  text-decoration: none;
+  border-bottom: 1px solid oklch(from var(--color-primary) l c h / 0.3);
+  transition: border-color var(--transition-interactive);
+}
+
+.preview-content a:hover {
+  border-bottom-color: var(--color-primary);
+}
+
+.preview-content strong {
+  font-weight: 600;
+}
+
+.preview-content em {
+  font-style: italic;
+}
+
+.preview-content del {
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+
+.preview-content ul,
+.preview-content ol {
+  margin-bottom: var(--space-4);
+  padding-left: var(--space-6);
+}
+
+.preview-content li {
+  margin-bottom: var(--space-1);
+}
+
+.preview-content li > ul,
+.preview-content li > ol {
+  margin-top: var(--space-1);
+  margin-bottom: 0;
+}
+
+.preview-content .task-list-item {
+  list-style: none;
+  margin-left: calc(var(--space-6) * -1);
+  padding-left: var(--space-1);
+}
+
+.preview-content .task-list-item input[type='checkbox'] {
+  margin-right: var(--space-2);
+  accent-color: var(--color-primary);
+  vertical-align: middle;
+}
+
+.preview-content blockquote {
+  margin: var(--space-4) 0;
+  padding: var(--space-3) var(--space-5);
+  border-left: 3px solid var(--color-primary);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+}
+
+.preview-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.preview-content code {
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-primary);
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+}
+
+.preview-content pre {
+  max-width: 100%;
+  margin: var(--space-4) 0;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  -webkit-overflow-scrolling: touch;
+}
+
+.preview-content pre code {
+  display: block;
+  width: fit-content;
+  min-width: 100%;
+  padding: var(--space-4);
+  background: none;
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+  line-height: 1.6;
+  white-space: pre;
+  word-wrap: normal;
+  overflow-wrap: normal;
+}
+
+.preview-content .table-wrapper {
+  margin: var(--space-4) 0;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  -webkit-overflow-scrolling: touch;
+}
+
+.preview-content table {
+  width: 100%;
+  min-width: 100%;
+  border-collapse: collapse;
+  white-space: nowrap;
+}
+
+.preview-content th,
+.preview-content td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  text-align: left;
+  font-size: var(--text-sm);
+}
+
+.preview-content th {
+  background: var(--color-surface-offset);
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.preview-content tr:last-child td {
+  border-bottom: none;
+}
+
+.preview-content tr:hover td {
+  background: var(--color-surface-offset);
+}
+
+.preview-content hr {
+  height: 1px;
+  margin: var(--space-8) 0;
+  border: none;
+  background: var(--color-divider);
+}
+
+.preview-content img {
+  max-width: 100%;
+  height: auto;
+  margin: var(--space-4) 0;
+  border-radius: var(--radius-md);
+  cursor: zoom-in;
+}

package/src/client/styles/features/preview-sidebars.css

@@ -0,0 +1,2 @@
+@import './backlinks.css';
+@import './outline.css';

package/src/client/styles/features/quick-switcher.css

@@ -0,0 +1,167 @@
+/* ===== QUICK SWITCHER (Cmd+K) ===== */
+
+.qs-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  padding-top: min(20vh, 160px);
+  background: var(--surface-scrim);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 120ms ease, visibility 120ms ease, display 120ms ease allow-discrete;
+}
+
+.qs-overlay.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+@starting-style {
+  .qs-overlay.visible {
+    opacity: 0;
+  }
+}
+
+.qs-modal {
+  width: min(560px, calc(100vw - 32px));
+  max-height: min(440px, 60vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-8px) scale(0.98);
+  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.qs-overlay.visible .qs-modal {
+  transform: translateY(0) scale(1);
+}
+
+@starting-style {
+  .qs-overlay.visible .qs-modal {
+    transform: translateY(-8px) scale(0.98);
+  }
+}
+
+.qs-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.qs-search-icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.qs-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-family: var(--font-body);
+  line-height: 1.5;
+}
+
+.qs-input::placeholder {
+  color: var(--color-text-faint);
+}
+
+.qs-kbd {
+  flex-shrink: 0;
+  padding: 3px 6px;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  color: var(--color-text-muted);
+  font-family: var(--font-body);
+  font-size: var(--text-meta);
+  line-height: 1;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.qs-results {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--space-1) 0;
+}
+
+.qs-result-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-4);
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-family: var(--font-body);
+  text-align: left;
+  cursor: pointer;
+  transition: background 60ms ease;
+}
+
+.qs-result-item:hover,
+.qs-result-item.selected {
+  background: var(--color-surface-offset);
+}
+
+.qs-result-item.selected {
+  background: var(--color-primary-highlight);
+}
+
+[data-theme="dark"] .qs-result-item.selected {
+  background: oklch(from var(--color-primary) l c h / 0.18);
+}
+
+.qs-result-icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.qs-result-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qs-result-name mark {
+  padding: 0 1px;
+  border-radius: var(--radius-2xs);
+  background: oklch(from var(--color-primary) l c h / 0.2);
+  color: var(--color-primary);
+}
+
+.qs-result-path {
+  flex-shrink: 0;
+  max-width: 200px;
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-xs);
+}
+
+.qs-hint {
+  padding: var(--space-4);
+  color: var(--color-text-muted);
+  text-align: center;
+  font-size: var(--text-xs);
+}
+
+.qs-hint.hidden {
+  display: none;
+}