various: markdown improvements
Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: I81fda8247814da19eed1e76dbe97bd5b6a6a6964
This commit is contained in:
parent
875bdf5ebc
commit
80a8b5c7ca
GPG key ID:
29D95B64378DB4BF
23 changed files with 3458 additions and 30 deletions
|
|
@ -3129,4 +3129,503 @@ ul li { padding: 3px 0; font-size: 12px; color: var(--text-1); }
|
|||
.theme-light .pdf-container {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
/* ── Backlinks Panel ── */
|
||||
.backlinks-panel,
|
||||
.outgoing-links-panel {
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.backlinks-header,
|
||||
.outgoing-links-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-3);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.backlinks-header:hover,
|
||||
.outgoing-links-header:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.backlinks-toggle,
|
||||
.outgoing-links-toggle {
|
||||
font-size: 10px;
|
||||
color: var(--text-2);
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.backlinks-title,
|
||||
.outgoing-links-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-0);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.backlinks-count,
|
||||
.outgoing-links-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.backlinks-reindex-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-2);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
||||
}
|
||||
|
||||
.backlinks-reindex-btn:hover:not(:disabled) {
|
||||
background: var(--bg-2);
|
||||
color: var(--text-0);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.backlinks-reindex-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.spinner-tiny {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1.5px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.backlinks-message {
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.backlinks-message.success {
|
||||
background: rgba(62, 201, 122, 0.08);
|
||||
border: 1px solid rgba(62, 201, 122, 0.2);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.backlinks-message.error {
|
||||
background: rgba(228, 88, 88, 0.06);
|
||||
border: 1px solid rgba(228, 88, 88, 0.2);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.outgoing-links-unresolved-badge {
|
||||
margin-left: 8px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
background: rgba(212, 160, 55, 0.12);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.outgoing-links-global-unresolved {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(212, 160, 55, 0.06);
|
||||
border: 1px solid rgba(212, 160, 55, 0.15);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.outgoing-links-global-unresolved .unresolved-icon {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.backlinks-content,
|
||||
.outgoing-links-content {
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.backlinks-loading,
|
||||
.outgoing-links-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
color: var(--text-2);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.backlinks-error,
|
||||
.outgoing-links-error {
|
||||
padding: 8px 12px;
|
||||
background: rgba(228, 88, 88, 0.06);
|
||||
border: 1px solid rgba(228, 88, 88, 0.2);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.backlinks-empty,
|
||||
.outgoing-links-empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: var(--text-2);
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.backlinks-list,
|
||||
.outgoing-links-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.backlink-item,
|
||||
.outgoing-link-item {
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-0);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, border-color 0.1s;
|
||||
}
|
||||
|
||||
.backlink-item:hover,
|
||||
.outgoing-link-item:hover {
|
||||
background: var(--bg-1);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.backlink-source,
|
||||
.outgoing-link-target {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.backlink-title,
|
||||
.outgoing-link-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-0);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.backlink-type-badge,
|
||||
.outgoing-link-type-badge {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.backlink-type-wikilink,
|
||||
.link-type-wikilink {
|
||||
background: rgba(124, 126, 245, 0.1);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
.backlink-type-embed,
|
||||
.link-type-embed {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
color: #9d8be0;
|
||||
}
|
||||
|
||||
.backlink-type-markdown_link,
|
||||
.link-type-markdown_link {
|
||||
background: rgba(59, 120, 200, 0.1);
|
||||
color: #6ca0d4;
|
||||
}
|
||||
|
||||
.backlink-context {
|
||||
font-size: 11px;
|
||||
color: var(--text-2);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.backlink-line {
|
||||
color: var(--text-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.unresolved-badge {
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
background: rgba(212, 160, 55, 0.1);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.outgoing-link-item.unresolved {
|
||||
opacity: 0.7;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.spinner-small {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
/* ── Graph View ── */
|
||||
.graph-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--bg-1);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.graph-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.graph-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-0);
|
||||
}
|
||||
|
||||
.graph-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
.graph-controls select {
|
||||
padding: 4px 20px 4px 8px;
|
||||
font-size: 11px;
|
||||
background: var(--bg-3);
|
||||
}
|
||||
|
||||
.graph-stats {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.graph-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: var(--bg-0);
|
||||
}
|
||||
|
||||
.graph-loading,
|
||||
.graph-error,
|
||||
.graph-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 48px;
|
||||
color: var(--text-2);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.graph-svg {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.graph-edges line {
|
||||
stroke: var(--border-strong);
|
||||
stroke-width: 1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.graph-edges line.edge-type-wikilink {
|
||||
stroke: var(--accent);
|
||||
}
|
||||
|
||||
.graph-edges line.edge-type-embed {
|
||||
stroke: #9d8be0;
|
||||
stroke-dasharray: 4 2;
|
||||
}
|
||||
|
||||
.graph-nodes .graph-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.graph-nodes .graph-node circle {
|
||||
fill: #4caf50;
|
||||
stroke: #388e3c;
|
||||
stroke-width: 2;
|
||||
transition: fill 0.15s, stroke 0.15s;
|
||||
}
|
||||
|
||||
.graph-nodes .graph-node:hover circle {
|
||||
fill: #66bb6a;
|
||||
}
|
||||
|
||||
.graph-nodes .graph-node.selected circle {
|
||||
fill: var(--accent);
|
||||
stroke: #5456d6;
|
||||
}
|
||||
|
||||
.graph-nodes .graph-node text {
|
||||
fill: var(--text-1);
|
||||
font-size: 11px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Node Details Panel ── */
|
||||
.node-details-panel {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 280px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.node-details-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.node-details-header h3 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-0);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.node-details-panel .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-2);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.node-details-panel .close-btn:hover {
|
||||
color: var(--text-0);
|
||||
}
|
||||
|
||||
.node-details-content {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.node-details-content .node-title {
|
||||
font-size: 12px;
|
||||
color: var(--text-1);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.node-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.node-stats .stat {
|
||||
font-size: 12px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.node-stats .stat strong {
|
||||
color: var(--text-0);
|
||||
}
|
||||
|
||||
/* ── Wikilink Styles (in markdown) ── */
|
||||
.wikilink {
|
||||
color: var(--accent-text);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed var(--accent);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
.wikilink:hover {
|
||||
color: var(--accent);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.wikilink-embed {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
border: 1px dashed rgba(139, 92, 246, 0.3);
|
||||
border-radius: var(--radius-sm);
|
||||
color: #9d8be0;
|
||||
font-size: 12px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ── Light theme adjustments for links and graph ── */
|
||||
.theme-light .graph-nodes .graph-node text {
|
||||
fill: var(--text-0);
|
||||
}
|
||||
|
||||
.theme-light .graph-edges line {
|
||||
stroke: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
"#;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue