1175 lines
30 KiB
CSS
1175 lines
30 KiB
CSS
/* =========================================================
|
|
ZETTELKASTEN GARDEN style.css
|
|
========================================================= */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');
|
|
|
|
/* =========================================================
|
|
TOKENS
|
|
========================================================= */
|
|
|
|
:root {
|
|
--header-h: 48px;
|
|
--toolbar-h: 36px;
|
|
--rail-w: 52px;
|
|
--panel-w: 260px;
|
|
--content-max: 680px;
|
|
--content-pad: 2.5rem;
|
|
|
|
/* Dark palette — warm aged manuscript */
|
|
--bg: #18160f;
|
|
--page-bg: #111009;
|
|
--pane-bg: #1c1a12;
|
|
--surface: #221f15;
|
|
--surface-2: #2a2720;
|
|
|
|
--fg: #e4ddd0;
|
|
--fg-dim: #9e9284;
|
|
--fg-faint: #584e42;
|
|
--fg-ghost: #352e24;
|
|
|
|
--accent: #c8923c;
|
|
--accent-dim: color-mix(in oklab, var(--accent) 35%, transparent);
|
|
--accent-sub: color-mix(in oklab, var(--accent) 10%, transparent);
|
|
--accent-glow:color-mix(in oklab, var(--accent) 6%, transparent);
|
|
|
|
--heading: #ecdcbc;
|
|
--heading-2: #c8a060;
|
|
--heading-3: #a87848;
|
|
--link: #b89e6a;
|
|
--link-hover:#e4ddd0;
|
|
--tag-bg: #2a2418;
|
|
--tag-fg: var(--accent);
|
|
--border: #2a2518;
|
|
--border-2: #38321e;
|
|
--code-bg: #0f0e08;
|
|
|
|
--font-body: 'DM Sans', system-ui, sans-serif;
|
|
--font-mono: 'DM Mono', 'Fira Mono', monospace;
|
|
--font-serif: 'Lora', Georgia, serif;
|
|
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--dur-fast: 110ms;
|
|
--dur-mid: 200ms;
|
|
--dur-slow: 340ms;
|
|
|
|
--r1:.25rem; --r2:.5rem; --r3:.75rem;
|
|
--r4:1rem; --r5:1.5rem; --r6:2rem; --r8:3rem;
|
|
}
|
|
|
|
/* Light theme */
|
|
[data-theme="light"] {
|
|
--bg: #f7f3eb;
|
|
--page-bg: #efead8;
|
|
--pane-bg: #faf7f0;
|
|
--surface: #f2ece0;
|
|
--surface-2: #e8e1d0;
|
|
--fg: #2a2218;
|
|
--fg-dim: #6a5e4a;
|
|
--fg-faint: #b8ac98;
|
|
--fg-ghost: #ddd5c0;
|
|
--accent: #9a6820;
|
|
--border: #ddd4bc;
|
|
--border-2: #ccc0a0;
|
|
--code-bg: #eee8d8;
|
|
--tag-bg: #e8dfc8;
|
|
--link: #7a5a20;
|
|
--heading: #2a2218;
|
|
--heading-2: #6a4818;
|
|
--heading-3: #8a5c28;
|
|
}
|
|
|
|
/* =========================================================
|
|
RESET / BASE
|
|
========================================================= */
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body {
|
|
background: var(--page-bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
line-height: 1.75;
|
|
-webkit-font-smoothing: antialiased;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
transition: background var(--dur-slow), color var(--dur-slow);
|
|
}
|
|
|
|
body { display: flex; flex-direction: column; }
|
|
|
|
/* =========================================================
|
|
HEADER
|
|
========================================================= */
|
|
|
|
#preamble {
|
|
height: var(--header-h);
|
|
flex-shrink: 0;
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
z-index: 300;
|
|
}
|
|
|
|
.banner-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--r3);
|
|
padding: 0 var(--r4);
|
|
height: var(--header-h);
|
|
}
|
|
|
|
.banner-logo {
|
|
height: 26px; width: 26px;
|
|
border-radius: 50%; object-fit: cover;
|
|
opacity: 0.85; flex-shrink: 0;
|
|
transition: opacity var(--dur-fast);
|
|
}
|
|
.banner-logo:hover { opacity: 1; }
|
|
|
|
/* Breadcrumb trail */
|
|
#breadcrumb-trail {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-size: 0.8rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.crumb {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--fg-dim);
|
|
cursor: pointer;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
max-width: 160px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
transition: color var(--dur-fast), background var(--dur-fast);
|
|
flex-shrink: 1;
|
|
}
|
|
.crumb:hover { color: var(--fg); background: var(--accent-sub); }
|
|
.crumb.active {
|
|
color: var(--accent);
|
|
flex-shrink: 0;
|
|
max-width: none;
|
|
cursor: default;
|
|
}
|
|
.crumb-sep {
|
|
color: var(--fg-ghost);
|
|
font-size: 0.75rem;
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
/* Search */
|
|
.banner-search { position: relative; max-width: 18rem; }
|
|
|
|
#search-box {
|
|
width: 100%;
|
|
padding: 0.35rem 0.7rem;
|
|
font-size: 0.8rem;
|
|
font-family: var(--font-body);
|
|
background: var(--surface);
|
|
color: var(--fg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
outline: none;
|
|
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
|
|
}
|
|
#search-box:focus {
|
|
border-color: var(--accent-dim);
|
|
box-shadow: 0 0 0 3px var(--accent-sub);
|
|
}
|
|
#search-box::placeholder { color: var(--fg-faint); font-style: italic; }
|
|
|
|
#search-results {
|
|
position: absolute;
|
|
top: calc(100% + 6px); left: 0; right: 0;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border-2);
|
|
border-radius: 6px;
|
|
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
|
|
max-height: 20rem;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
}
|
|
#search-results > * {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.82rem;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background var(--dur-fast);
|
|
}
|
|
#search-results > *:last-child { border-bottom: none; }
|
|
#search-results > *:hover,
|
|
#search-results > *.active { background: var(--accent-sub); color: var(--fg); }
|
|
|
|
/* Actions */
|
|
.banner-actions { display: flex; align-items: center; gap: var(--r2); }
|
|
|
|
#theme-toggle {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
width: 28px; height: 28px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
color: var(--fg-dim);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--dur-fast);
|
|
}
|
|
#theme-toggle:hover {
|
|
color: var(--fg);
|
|
border-color: var(--border-2);
|
|
background: var(--surface);
|
|
}
|
|
|
|
#close-all { display: none !important; }
|
|
|
|
/* =========================================================
|
|
LAYOUT BODY
|
|
========================================================= */
|
|
|
|
#layout-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* =========================================================
|
|
LEFT RAIL
|
|
========================================================= */
|
|
|
|
#sidebar {
|
|
width: var(--rail-w);
|
|
flex-shrink: 0;
|
|
background: var(--bg);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--r3) 0;
|
|
gap: var(--r2);
|
|
overflow: hidden;
|
|
transition: width var(--dur-mid) var(--ease-out);
|
|
z-index: 100;
|
|
position: relative; /* needed for panel absolute positioning on mobile */
|
|
}
|
|
|
|
#sidebar.expanded {
|
|
width: var(--panel-w);
|
|
align-items: flex-start;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Rail icon buttons */
|
|
.rail-btn {
|
|
width: 36px; height: 36px;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--fg-faint);
|
|
font-size: 1.05rem;
|
|
flex-shrink: 0;
|
|
transition: color var(--dur-fast), background var(--dur-fast);
|
|
position: relative;
|
|
}
|
|
.rail-btn:hover { color: var(--fg); background: var(--accent-sub); }
|
|
.rail-btn.active { color: var(--accent); background: var(--accent-glow); }
|
|
|
|
/* Tooltip for rail buttons */
|
|
.rail-btn[title]:not(:disabled):hover::after {
|
|
content: attr(title);
|
|
position: absolute;
|
|
left: calc(100% + 8px);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: var(--surface-2);
|
|
color: var(--fg);
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.72rem;
|
|
font-family: var(--font-mono);
|
|
white-space: nowrap;
|
|
border: 1px solid var(--border-2);
|
|
pointer-events: none;
|
|
z-index: 500;
|
|
}
|
|
|
|
/* Expanded sidebar panel */
|
|
.sidebar-panel { display: none; width: 100%; flex-direction: column; }
|
|
#sidebar.expanded .sidebar-panel { display: flex; }
|
|
|
|
.sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 12px 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.sidebar-header-label {
|
|
font-size: 0.6rem;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--fg-faint);
|
|
}
|
|
.sidebar-close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--fg-faint);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 2px 4px;
|
|
line-height: 1;
|
|
transition: color var(--dur-fast);
|
|
border-radius: 3px;
|
|
}
|
|
.sidebar-close-btn:hover { color: var(--fg); background: var(--surface-2); }
|
|
|
|
#file-tree {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-bottom: 12px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-2) transparent;
|
|
}
|
|
#file-tree::-webkit-scrollbar { width: 3px; }
|
|
#file-tree::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
|
|
|
|
.tree-folder {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px 4px 12px;
|
|
font-size: 0.68rem;
|
|
cursor: pointer;
|
|
color: var(--fg-faint);
|
|
border-radius: 3px;
|
|
margin: 2px 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
user-select: none;
|
|
font-weight: 500;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
transition: background var(--dur-fast), color var(--dur-fast);
|
|
}
|
|
.tree-folder:hover { background: var(--accent-sub); color: var(--fg); }
|
|
|
|
.tree-file {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 10px 3px 12px;
|
|
font-size: 0.76rem;
|
|
cursor: pointer;
|
|
color: var(--fg-dim);
|
|
border-radius: 3px;
|
|
margin: 1px 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
user-select: none;
|
|
transition: background var(--dur-fast), color var(--dur-fast);
|
|
}
|
|
.tree-file:hover { background: var(--accent-sub); color: var(--fg); }
|
|
.tree-file.active {
|
|
background: color-mix(in oklab, var(--accent) 14%, transparent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.tree-icon { font-size: 9px; opacity: 0.5; flex-shrink: 0; width: 10px; }
|
|
.tree-folder-label { overflow: hidden; text-overflow: ellipsis; }
|
|
.tree-children { padding-left: 10px; }
|
|
|
|
/* =========================================================
|
|
MAIN AREA
|
|
========================================================= */
|
|
|
|
#main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
#tab-bar { display: none !important; }
|
|
|
|
/* =========================================================
|
|
NOTE TOOLBAR
|
|
========================================================= */
|
|
|
|
#note-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--r2);
|
|
padding: 4px var(--r4);
|
|
height: var(--toolbar-h);
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
font-size: 0.75rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.toolbar-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--fg-dim);
|
|
cursor: pointer;
|
|
font-size: 0.72rem;
|
|
font-family: var(--font-mono);
|
|
transition: all var(--dur-fast);
|
|
white-space: nowrap;
|
|
}
|
|
.toolbar-btn:hover:not(:disabled) {
|
|
border-color: var(--border-2);
|
|
color: var(--fg);
|
|
background: var(--surface);
|
|
}
|
|
.toolbar-btn.active {
|
|
border-color: var(--accent-dim);
|
|
color: var(--accent);
|
|
background: var(--accent-glow);
|
|
}
|
|
.toolbar-btn:disabled { cursor: default; }
|
|
|
|
.toolbar-sep {
|
|
width: 1px; height: 16px;
|
|
background: var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.toolbar-spacer { flex: 1; }
|
|
|
|
.note-graph-pos {
|
|
color: var(--fg-faint);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.03em;
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* =========================================================
|
|
MAIN INNER + CONTENT AREA
|
|
========================================================= */
|
|
|
|
#main-inner {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
#content-area {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background: var(--pane-bg);
|
|
position: relative;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border) transparent;
|
|
/* Subtle ruled lines */
|
|
background-image: repeating-linear-gradient(
|
|
180deg,
|
|
transparent, transparent 27px,
|
|
color-mix(in oklab, var(--fg) 2%, transparent) 27px,
|
|
color-mix(in oklab, var(--fg) 2%, transparent) 28px
|
|
);
|
|
background-attachment: local;
|
|
}
|
|
#content-area::-webkit-scrollbar { width: 5px; }
|
|
#content-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
|
|
/* Left margin rule */
|
|
#content-area::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 52px; width: 1px; height: 100%;
|
|
background: color-mix(in oklab, var(--accent) 8%, transparent);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Tab panes */
|
|
.tab-content { display: none; min-height: 100%; position: relative; z-index: 1; }
|
|
.tab-content.active { display: block; }
|
|
|
|
/* =========================================================
|
|
NOTE CONTENT
|
|
========================================================= */
|
|
|
|
#content, .tab-content-inner {
|
|
max-width: var(--content-max);
|
|
margin: 0 auto;
|
|
padding: var(--r6) var(--content-pad) calc(var(--r8) * 2.5);
|
|
}
|
|
|
|
/* =========================================================
|
|
TITLE SECTION
|
|
========================================================= */
|
|
|
|
.title-section {
|
|
position: relative;
|
|
margin-bottom: var(--r6);
|
|
padding: var(--r5) var(--r5) var(--r4);
|
|
background: color-mix(in oklab, var(--surface) 60%, transparent);
|
|
border: 1px solid var(--border);
|
|
border-left: 3px solid var(--accent-dim);
|
|
border-radius: 0 7px 7px 0;
|
|
}
|
|
|
|
.title-section .title {
|
|
margin: 0 0 var(--r3);
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
line-height: 1.25;
|
|
letter-spacing: -0.025em;
|
|
color: var(--heading);
|
|
}
|
|
|
|
.title-metadata {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--r4);
|
|
align-items: center;
|
|
}
|
|
|
|
.metadata-item {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 5px;
|
|
font-size: 0.7rem;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.metadata-label { color: var(--fg-faint); }
|
|
.metadata-value { color: var(--accent); }
|
|
|
|
.title-controls,
|
|
.pane-header,
|
|
.pane-close,
|
|
.pane-fullscreen,
|
|
.pane-edit { display: none !important; }
|
|
|
|
/* =========================================================
|
|
TYPOGRAPHY
|
|
========================================================= */
|
|
|
|
h1 {
|
|
font-size: 1.5rem; font-weight: 500;
|
|
letter-spacing: -0.02em; color: var(--heading);
|
|
margin: 0 0 var(--r5); line-height: 1.25;
|
|
}
|
|
h2 {
|
|
font-size: 1.1rem; font-weight: 500;
|
|
letter-spacing: -0.01em; color: var(--heading);
|
|
margin: var(--r8) 0 var(--r4);
|
|
padding-bottom: var(--r3);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
h3 {
|
|
font-size: 1rem; font-weight: 500;
|
|
color: var(--heading-2); margin: var(--r6) 0 var(--r3);
|
|
}
|
|
h4 {
|
|
font-size: 0.9rem; font-weight: 500;
|
|
color: var(--heading-3); margin: var(--r5) 0 var(--r2);
|
|
}
|
|
|
|
p { margin: 0 0 var(--r4); font-weight: 300; }
|
|
|
|
a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid color-mix(in oklab, var(--link) 35%, transparent);
|
|
transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
|
|
border-radius: 2px;
|
|
padding: 0 1px;
|
|
}
|
|
a:hover {
|
|
color: var(--link-hover);
|
|
border-bottom-color: var(--accent-dim);
|
|
background: var(--accent-glow);
|
|
}
|
|
|
|
/* Wikilink brackets — scoped to note content only, not panels/sidebar */
|
|
#content a[href$=".html"]::before {
|
|
content: '\5B\5B'; /* [[ */
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72em;
|
|
opacity: 0.4;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
#content a[href$=".html"]::after {
|
|
content: '\5D\5D'; /* ]] */
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72em;
|
|
opacity: 0.4;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
|
|
strong { font-weight: 500; color: var(--fg); }
|
|
em { font-style: italic; font-family: var(--font-serif); }
|
|
|
|
.tag {
|
|
background: var(--tag-bg) !important;
|
|
color: var(--accent) !important;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
padding: 0.15em 0.5em;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.04em;
|
|
border: 1px solid var(--border-2);
|
|
}
|
|
|
|
/* =========================================================
|
|
BACKLINK PANEL (right side)
|
|
========================================================= */
|
|
|
|
#backlink-panel {
|
|
width: 0;
|
|
flex-shrink: 0;
|
|
background: var(--bg);
|
|
border-left: 1px solid var(--border);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: width var(--dur-mid) var(--ease-out);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
#backlink-panel.open { width: 240px; }
|
|
|
|
.bp-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--r2);
|
|
padding: 10px 12px 8px;
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.bp-label {
|
|
font-size: 0.6rem;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--fg-faint);
|
|
flex: 1;
|
|
}
|
|
|
|
.bp-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
color: var(--accent);
|
|
background: var(--accent-glow);
|
|
border: 1px solid var(--accent-dim);
|
|
border-radius: 10px;
|
|
padding: 0 6px;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.bp-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--fg-faint);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 0 4px;
|
|
line-height: 1;
|
|
border-radius: 3px;
|
|
transition: color var(--dur-fast), background var(--dur-fast);
|
|
flex-shrink: 0;
|
|
}
|
|
.bp-close:hover { color: var(--fg); background: var(--surface-2); }
|
|
|
|
.bp-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--r3);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-2) transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--r3);
|
|
}
|
|
|
|
.bp-item {
|
|
padding: var(--r3);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
cursor: pointer;
|
|
transition: border-color var(--dur-fast), background var(--dur-fast);
|
|
}
|
|
.bp-item:hover { border-color: var(--accent-dim); background: var(--surface-2); }
|
|
|
|
.bp-item-title {
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--link);
|
|
margin-bottom: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.bp-item-title::before {
|
|
content: '';
|
|
width: 6px; height: 6px;
|
|
border: 1.5px solid var(--accent-dim);
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.bp-item-excerpt {
|
|
font-size: 0.72rem;
|
|
color: var(--fg-faint);
|
|
line-height: 1.45;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bp-empty {
|
|
padding: var(--r5) var(--r3);
|
|
text-align: center;
|
|
color: var(--fg-faint);
|
|
font-size: 0.78rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =========================================================
|
|
HOVER PREVIEW CARD
|
|
========================================================= */
|
|
|
|
#link-preview {
|
|
position: fixed;
|
|
z-index: 999;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border-2);
|
|
border-radius: 8px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
|
|
width: 300px;
|
|
max-height: 220px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
|
|
}
|
|
|
|
#link-preview.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.preview-inner { padding: var(--r3) var(--r4); }
|
|
|
|
.preview-title {
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: var(--heading);
|
|
margin-bottom: var(--r2);
|
|
padding-bottom: var(--r2);
|
|
border-bottom: 1px solid var(--border);
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.02em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.preview-title::before { content: '\5B\5B'; color: var(--fg-faint); font-size: 0.9em; }
|
|
.preview-title::after { content: '\5D\5D'; color: var(--fg-faint); font-size: 0.9em; }
|
|
|
|
.preview-body {
|
|
font-size: 0.76rem;
|
|
color: var(--fg-dim);
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 5;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-footer {
|
|
padding: var(--r2) var(--r4);
|
|
border-top: 1px solid var(--border);
|
|
font-size: 0.68rem;
|
|
font-family: var(--font-mono);
|
|
color: var(--fg-faint);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.preview-footer::before { content: '\21B5'; color: var(--accent); }
|
|
|
|
/* =========================================================
|
|
IMAGES
|
|
========================================================= */
|
|
|
|
#content .figure,
|
|
#content img:not(.fullwidth) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
display: block;
|
|
border: 1px solid var(--border);
|
|
margin: var(--r5) 0;
|
|
}
|
|
|
|
/* =========================================================
|
|
VIDEO / AUDIO
|
|
========================================================= */
|
|
|
|
#content video, .tab-content video {
|
|
max-width: 100%; width: 100%; height: auto;
|
|
display: block; border-radius: 6px;
|
|
background: #000; margin: var(--r5) 0;
|
|
}
|
|
|
|
.video-container {
|
|
position: relative; margin: var(--r5) 0;
|
|
border-radius: 6px; overflow: hidden;
|
|
background: #000; line-height: 0;
|
|
}
|
|
|
|
.audio-player {
|
|
margin: var(--r5) 0;
|
|
padding: var(--r4);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.audio-label {
|
|
font-size: 0.7rem; font-family: var(--font-mono);
|
|
color: var(--fg-faint); letter-spacing: 0.04em;
|
|
margin-bottom: var(--r3);
|
|
}
|
|
.audio-player audio {
|
|
width: 100%; display: block;
|
|
min-height: 40px; accent-color: var(--accent);
|
|
}
|
|
|
|
/* =========================================================
|
|
LISTS
|
|
========================================================= */
|
|
|
|
ul, ol { margin: var(--r3) 0 var(--r5) var(--r4); padding: 0; line-height: 1.7; }
|
|
ul { list-style: none; }
|
|
ul li { position: relative; padding-left: 1.4em; }
|
|
ul li::before {
|
|
content: "\203A";
|
|
position: absolute; left: 0; top: 0;
|
|
color: var(--accent); font-weight: 700; font-size: 0.85em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
ol { counter-reset: list-counter; list-style: none; }
|
|
ol li { counter-increment: list-counter; position: relative; padding-left: 2em; }
|
|
ol li::before {
|
|
content: counter(list-counter);
|
|
position: absolute; left: 0; top: 0.05em;
|
|
font-family: var(--font-mono); font-size: 0.78em;
|
|
color: var(--accent); font-weight: 500; letter-spacing: 0.04em; opacity: 0.7;
|
|
}
|
|
|
|
li { margin-bottom: 0.45rem; display: flow-root; }
|
|
li ul, li ol { margin-top: var(--r2); margin-bottom: var(--r2); }
|
|
li ul li::before { content: "\00B7"; font-weight: normal; color: var(--fg-faint); font-size: 1em; }
|
|
|
|
/* =========================================================
|
|
BLOCKQUOTE
|
|
========================================================= */
|
|
|
|
blockquote {
|
|
margin: var(--r5) 0;
|
|
padding: var(--r4) var(--r5);
|
|
border-left: 2px solid var(--accent);
|
|
background: var(--accent-glow);
|
|
border-radius: 0 6px 6px 0;
|
|
color: var(--fg-dim);
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
line-height: 1.75;
|
|
}
|
|
blockquote p { margin: 0; }
|
|
|
|
.epigraph { margin: var(--r6) auto; max-width: 82%; }
|
|
.epigraph blockquote {
|
|
margin: 0; padding: var(--r4) var(--r5);
|
|
border-left: 2px solid var(--accent-dim);
|
|
}
|
|
.epigraph blockquote footer {
|
|
margin-top: var(--r3); font-style: normal; font-size: 0.85em;
|
|
color: var(--fg-faint); text-align: right; font-family: var(--font-mono);
|
|
}
|
|
.epigraph blockquote cite { font-style: italic; color: var(--accent); }
|
|
|
|
/* =========================================================
|
|
CODE
|
|
========================================================= */
|
|
|
|
:not(pre) > code {
|
|
padding: 0.15em 0.45em;
|
|
font-family: var(--font-mono); font-size: 0.8em;
|
|
background: var(--code-bg); color: var(--heading-2);
|
|
border: 1px solid var(--border-2); border-radius: 4px;
|
|
}
|
|
pre { background: var(--code-bg); }
|
|
|
|
.org-src-container {
|
|
border: 1px solid var(--border); border-radius: 7px;
|
|
font-family: var(--font-mono); font-size: 0.82rem;
|
|
margin: var(--r5) auto; overflow: hidden; position: relative;
|
|
}
|
|
.org-src-container > pre { overflow: auto; margin: 0; padding: var(--r5) var(--r4); }
|
|
.org-src-container > pre:before {
|
|
display: block; position: sticky; top: 0;
|
|
background: color-mix(in oklab, var(--code-bg) 80%, var(--border) 20%);
|
|
color: var(--fg-faint); padding: 0.35rem var(--r4);
|
|
font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.org-src-container > pre.src-bash:before { content: "bash"; }
|
|
.org-src-container > pre.src-sh:before { content: "sh"; }
|
|
.org-src-container > pre.src-python:before { content: "python"; }
|
|
.org-src-container > pre.src-emacs-lisp:before { content: "emacs lisp"; }
|
|
.org-src-container > pre.src-js:before,
|
|
.org-src-container > pre.src-javascript:before { content: "javascript"; }
|
|
.org-src-container > pre.src-typescript:before { content: "typescript"; }
|
|
.org-src-container > pre.src-html:before { content: "html"; }
|
|
.org-src-container > pre.src-css:before { content: "css"; }
|
|
.org-src-container > pre.src-rust:before { content: "rust"; }
|
|
.org-src-container > pre.src-R:before { content: "R"; }
|
|
|
|
pre.src {
|
|
padding: var(--r5) var(--r4) var(--r4);
|
|
font-family: var(--font-mono); font-size: 0.875rem;
|
|
line-height: 1.55; overflow-x: auto; white-space: pre-wrap;
|
|
background: var(--code-bg);
|
|
}
|
|
|
|
.copy-btn {
|
|
position: absolute; top: 0.5rem; right: 0.5rem;
|
|
background: var(--surface); color: var(--fg-faint);
|
|
border: 1px solid var(--border-2); border-radius: 4px;
|
|
padding: 0.2em 0.6em; font-size: 0.68rem;
|
|
font-family: var(--font-mono); letter-spacing: 0.04em;
|
|
cursor: pointer; z-index: 10;
|
|
transition: all var(--dur-fast);
|
|
}
|
|
.copy-btn:hover {
|
|
color: var(--fg); border-color: var(--accent-dim);
|
|
background: var(--accent-glow);
|
|
}
|
|
|
|
/* =========================================================
|
|
TABLE OF CONTENTS
|
|
========================================================= */
|
|
|
|
#table-of-contents { margin-bottom: var(--r6); }
|
|
#text-table-of-contents ul { margin: var(--r2) 0; }
|
|
#text-table-of-contents a {
|
|
font-size: 0.82rem; color: var(--fg-dim);
|
|
border-bottom: none; transition: color var(--dur-fast);
|
|
}
|
|
#text-table-of-contents a:hover { color: var(--fg); border-bottom: none; }
|
|
#text-table-of-contents a.is-active,
|
|
#text-table-of-contents a[aria-current] { color: var(--accent); }
|
|
|
|
/* Prevent wikilink brackets on TOC links */
|
|
#text-table-of-contents a::before,
|
|
#text-table-of-contents a::after { content: none !important; }
|
|
|
|
/* =========================================================
|
|
BACKLINKS SECTION (inline at bottom of note)
|
|
========================================================= */
|
|
|
|
.backlinks-section {
|
|
margin-top: var(--r8); padding-top: var(--r5);
|
|
border-top: 1px solid var(--border);
|
|
opacity: 0.9;
|
|
}
|
|
.backlinks-section h2 {
|
|
font-size: 0.68rem; font-family: var(--font-mono);
|
|
letter-spacing: 0.1em; text-transform: uppercase;
|
|
color: var(--fg-faint); border-bottom: none; margin-top: 0; padding-bottom: 0;
|
|
}
|
|
.backlinks-list { margin-top: var(--r3); padding-left: 0; }
|
|
.backlinks-list li {
|
|
margin-bottom: var(--r2); font-size: 0.85rem;
|
|
list-style: none; padding-left: 0;
|
|
}
|
|
.backlinks-list li::before {
|
|
content: "\2190 "; font-size: 0.8em; opacity: 0.4;
|
|
margin-right: var(--r1); color: var(--accent);
|
|
}
|
|
.backlinks-list li a {
|
|
color: var(--link); border-bottom: 1px solid transparent;
|
|
font-weight: 400;
|
|
transition: color var(--dur-fast), border-color var(--dur-fast);
|
|
}
|
|
.backlinks-list li a:hover { color: var(--link-hover); border-bottom-color: var(--fg-faint); }
|
|
/* No wikilink brackets in backlinks section */
|
|
.backlinks-list li a::before,
|
|
.backlinks-list li a::after { content: none !important; }
|
|
|
|
/* =========================================================
|
|
SIDENOTES
|
|
========================================================= */
|
|
|
|
.sidenote {
|
|
font-size: 0.78rem; line-height: 1.5;
|
|
color: var(--fg-dim);
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* =========================================================
|
|
FOOTER
|
|
========================================================= */
|
|
|
|
#postamble, footer {
|
|
color: var(--fg-faint);
|
|
padding: var(--r2) var(--r5);
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg);
|
|
text-align: center;
|
|
font-size: 0.68rem;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.03em;
|
|
flex-shrink: 0;
|
|
}
|
|
#postamble a, footer a { color: var(--fg-faint); }
|
|
#postamble a:hover, footer a:hover { color: var(--fg); }
|
|
|
|
/* =========================================================
|
|
BIGGER-PICTURE GALLERY
|
|
========================================================= */
|
|
|
|
.bp-x { right: 72px; }
|
|
.bp-next, .bp-prev { right: 8px; }
|
|
.bp-prev { left: 8px; }
|
|
.bp-wrap { transition: opacity 0.18s ease; }
|
|
.bp-wrap.bp-fadeout { opacity: 0; }
|
|
.bp-controls { padding-top: env(safe-area-inset-top, 0); }
|
|
|
|
/* =========================================================
|
|
DOM SCAFFOLDING COMPAT
|
|
========================================================= */
|
|
|
|
#stack-root, .stack-track, .stack-pane { display: contents; }
|
|
|
|
/* =========================================================
|
|
MOBILE SIDEBAR BACKDROP
|
|
========================================================= */
|
|
|
|
#sidebar-backdrop {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 99;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
#sidebar-backdrop.visible { display: block; }
|
|
|
|
/* =========================================================
|
|
RESPONSIVE
|
|
========================================================= */
|
|
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--rail-w: 0px;
|
|
--content-pad: 1rem;
|
|
}
|
|
#sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: calc(var(--header-h) + var(--toolbar-h));
|
|
bottom: 0;
|
|
z-index: 200;
|
|
width: 0;
|
|
}
|
|
#sidebar.mobile-open,
|
|
#sidebar.expanded { width: var(--panel-w) !important; }
|
|
|
|
#backlink-panel.open { width: 200px; }
|
|
#breadcrumb-trail { display: none; }
|
|
|
|
#note-toolbar { flex-wrap: wrap; height: auto; }
|
|
}
|
|
|
|
/* =========================================================
|
|
UTILITIES
|
|
========================================================= */
|
|
|
|
.hidden { display: none !important; }
|
|
.recipe-meta td:first-child { font-weight: 600; white-space: nowrap; }
|
|
.recipe-meta { font-size: 0.9em; opacity: 0.85; }
|
|
|
|
/* Smooth fade in for note content */
|
|
@keyframes note-in {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.tab-content.active #content {
|
|
animation: note-in 200ms var(--ease-out) forwards;
|
|
}
|
|
|
|
/* Reading progress bar */
|
|
#reading-progress {
|
|
position: fixed;
|
|
top: var(--header-h);
|
|
left: 0;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
width: 0%;
|
|
transition: width 80ms linear;
|
|
z-index: 400;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Loading state */
|
|
.note-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 40vh;
|
|
color: var(--fg-faint);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.06em;
|
|
}
|