Changeset 0.17.3 (#78)

src/css/styles.css

@@ -1870,6 +1870,128 @@ select option { background: var(--bg-surface); color: var(--text); }
     display: flex; gap: 8px; margin-top: 12px;
 }
 
+/* ── Note Backlinks ──────────────────────── */
+
+.note-backlinks {
+    margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px;
+}
+.note-backlinks-header {
+    display: flex; align-items: center; gap: 8px;
+    font-size: 12px; color: var(--text-2); cursor: pointer;
+    padding: 4px 0; user-select: none;
+}
+.note-backlinks-header:hover { color: var(--text); }
+.note-backlinks-header .badge {
+    background: var(--accent); color: #fff; font-size: 10px;
+    padding: 1px 6px; border-radius: 10px;
+}
+.note-backlinks-list { margin-top: 6px; }
+.note-backlink-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 8px; border-radius: var(--radius); cursor: pointer;
+    font-size: 13px; transition: background var(--transition);
+}
+.note-backlink-item:hover { background: var(--bg-hover); }
+.note-backlink-title { color: var(--accent); font-weight: 500; }
+.note-backlink-folder { font-size: 11px; color: var(--text-3); }
+
+/* ── Wikilink Chips (Read Mode) ──────────── */
+
+.wikilink-chip {
+    display: inline-block; padding: 1px 6px; margin: 0 1px;
+    border-radius: 4px; cursor: pointer; font-size: 0.9em;
+    font-weight: 500; text-decoration: none; vertical-align: baseline;
+    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
+    color: var(--accent, #6366f1);
+    transition: background var(--transition);
+}
+.wikilink-chip:hover {
+    background: rgba(var(--accent-rgb, 99, 102, 241), 0.25);
+}
+.wikilink-transclusion {
+    border-left: 2px solid var(--accent, #6366f1);
+    font-style: italic;
+}
+
+/* ── Transclusion Embeds ─────────────────── */
+
+.transclusion-embed {
+    margin: 8px 0; border: 1px solid var(--border);
+    border-left: 3px solid var(--accent, #6366f1);
+    border-radius: var(--radius); overflow: hidden;
+    background: var(--bg-surface);
+}
+.transclusion-header {
+    padding: 6px 10px; background: var(--bg-2);
+    border-bottom: 1px solid var(--border); font-size: 12px;
+}
+.transclusion-content {
+    padding: 10px 12px; font-size: 13px; line-height: 1.5;
+}
+.transclusion-content .msg-text { margin: 0; }
+
+/* ── Graph View ──────────────────────────── */
+
+.notes-graph-view {
+    display: flex; flex-direction: column; height: 100%;
+}
+.notes-graph-toolbar {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 10px; border-bottom: 1px solid var(--border);
+    background: var(--bg-surface); flex-shrink: 0;
+}
+.notes-graph-stats {
+    flex: 1; text-align: center; font-size: 11px; color: var(--text-3);
+}
+#noteGraphCanvas {
+    flex: 1; width: 100%; min-height: 200px;
+    background: var(--bg);
+}
+
+/* ── Daily Note Navigation ───────────────── */
+
+.note-daily-nav {
+    display: flex; align-items: center; justify-content: center;
+    gap: 12px; padding: 6px 10px;
+    border-bottom: 1px solid var(--border); background: var(--bg-surface);
+}
+.note-daily-date {
+    font-size: 13px; font-weight: 500; color: var(--text);
+    min-width: 100px; text-align: center;
+}
+
+/* ── Save-to-Note Modal ──────────────────── */
+
+.save-to-note-modal {
+    max-width: 460px; width: 90%;
+}
+.save-to-note-modal h3 { margin: 0 0 12px; font-size: 16px; }
+.save-note-mode-toggle {
+    display: flex; gap: 16px; margin-bottom: 12px; font-size: 13px;
+}
+.save-note-mode-toggle label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
+.save-note-preview {
+    max-height: 120px; overflow-y: auto; padding: 8px;
+    border: 1px solid var(--border); border-radius: var(--radius);
+    background: var(--bg); font-size: 12px; line-height: 1.5;
+}
+.save-note-search-results {
+    max-height: 160px; overflow-y: auto; margin-top: 4px;
+    border: 1px solid var(--border); border-radius: var(--radius);
+    background: var(--bg-surface);
+}
+.save-note-search-results:empty { display: none; }
+.save-note-result {
+    padding: 6px 10px; cursor: pointer; font-size: 13px;
+    transition: background var(--transition);
+}
+.save-note-result:hover, .save-note-result.selected {
+    background: var(--bg-hover);
+}
+.save-note-result.selected {
+    border-left: 3px solid var(--accent); font-weight: 500;
+}
+
 /* ── Sidebar Search ──────────────────────── */
 
 .sidebar-search {