bak
This commit is contained in:
th committed
1 parent
03f57cbaee
commit
a9603aa0e8
11 files changed
+1010
-93
No files matched your search
+115
-17
@@ -30,9 +30,10 @@ body::after {
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
/* Line clamp */
|
||||
.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.line-clamp-2, .line-clamp-3, .line-clamp-5 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.line-clamp-2 { -webkit-line-clamp: 2; }
|
||||
.line-clamp-3 { -webkit-line-clamp: 3; }
|
||||
.line-clamp-5 { -webkit-line-clamp: 5; }
|
||||
|
||||
/* Cards */
|
||||
.card-bar { image-rendering: pixelated; height: 3px; }
|
||||
@@ -44,13 +45,19 @@ body::after {
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-has-cover h3,
|
||||
.card-has-cover p,
|
||||
.card-has-cover .font-pixel,
|
||||
.card-has-cover i {
|
||||
text-shadow: 0 0 8px var(--t-bg), 0 0 16px var(--t-bg), 0 1px 3px var(--t-bg);
|
||||
}
|
||||
.card-group.card-has-cover {
|
||||
overflow: visible;
|
||||
}
|
||||
.card-cover-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(15, 23, 42, 0.22) 0%, rgba(15, 23, 42, 0.7) 62%, rgba(15, 23, 42, 0.86) 100%);
|
||||
background: var(--t-cover-gradient, linear-gradient(180deg, rgba(15, 23, 42, 0.22) 0%, rgba(15, 23, 42, 0.7) 62%, rgba(15, 23, 42, 0.86) 100%));
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -128,6 +135,18 @@ body::after {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.card-glow:hover { box-shadow: 0 0 16px -3px var(--glow-color, rgba(56, 189, 248, 0.15)); }
|
||||
.card-selected { outline: 2px solid var(--t-accent) !important; outline-offset: -2px; }
|
||||
.card-select-check {
|
||||
position: absolute; top: 6px; left: 6px; width: 18px; height: 18px;
|
||||
border-radius: 50%; background: var(--t-accent); z-index: 6;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-select-check::after {
|
||||
content: ''; width: 5px; height: 9px;
|
||||
border: solid var(--t-bg); border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg); margin-top: -2px;
|
||||
}
|
||||
.card-dragging { opacity: 0.15; transform: scale(0.95); }
|
||||
|
||||
/* Drop indicators — thick glowing bar */
|
||||
@@ -215,11 +234,26 @@ body::after {
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Split panes */
|
||||
.split-pick {
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--t-text);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.split-pick:hover, .split-pick.active { background: var(--t-raised); }
|
||||
.split-pick .sp-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||||
|
||||
/* Zen mode */
|
||||
html.detail-zen-open,
|
||||
body.detail-zen-open { overflow: hidden; }
|
||||
#detail.zen > div { inset: 0 !important; border: none !important; border-radius: 0; overflow-y: auto; }
|
||||
#detail.zen #detail-sidebar { display: none !important; }
|
||||
#detail.zen #detail-sidebar,
|
||||
#detail.zen #split-right { display: none !important; }
|
||||
#detail.zen .card-bar { display: none; }
|
||||
#detail.zen #detail-scroll {
|
||||
max-width: 680px;
|
||||
@@ -232,14 +266,18 @@ body.detail-zen-open { overflow: hidden; }
|
||||
#detail.zen #detail-scroll #detail-meta { display: none; }
|
||||
#detail.zen #detail-backlinks { display: none; }
|
||||
#detail.zen #detail-controls {
|
||||
position: fixed !important;
|
||||
top: 1rem !important;
|
||||
right: 1rem !important;
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
z-index: 120;
|
||||
border: none;
|
||||
background: transparent;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem;
|
||||
opacity: 0.15;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
#detail.zen #detail-controls:hover { opacity: 1; }
|
||||
#detail.zen #split-right-btn { display: none; }
|
||||
|
||||
/* Detail close morph */
|
||||
.detail-close-frame {
|
||||
@@ -359,6 +397,8 @@ body.detail-image-fs-open { overflow: hidden; }
|
||||
/* Editor */
|
||||
#editor-body { tab-size: 4; resize: none; }
|
||||
#editor-body:focus { outline: none; }
|
||||
#editor-gutter div { padding-right: 2px; box-sizing: border-box; }
|
||||
.gutter-active { color: var(--t-accent) !important; font-weight: 700; background: var(--t-raised); }
|
||||
|
||||
/* Search */
|
||||
#search { backdrop-filter: blur(4px); }
|
||||
@@ -400,21 +440,79 @@ body.detail-image-fs-open { overflow: hidden; }
|
||||
#link-ac .ac-item .ac-bucket { font-size: 9px; color: var(--t-dim); margin-left: 6px; }
|
||||
|
||||
/* Prose (markdown) */
|
||||
.prose { line-height: 1.7; }
|
||||
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--t-bright); font-family: var(--t-font-pixel, 'Silkscreen', cursive); margin: 1.25em 0 0.5em; }
|
||||
.prose h1 { font-size: 1.4em; }
|
||||
.prose h2 { font-size: 1.15em; }
|
||||
.prose h3 { font-size: 1em; }
|
||||
.prose p { margin: 0.6em 0; }
|
||||
.prose a { color: var(--t-accent); text-decoration: underline; }
|
||||
.prose { line-height: 1.75; }
|
||||
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--t-bright); font-family: var(--t-font-pixel, 'Silkscreen', cursive); margin: 1.5em 0 0.6em; font-weight: 700; }
|
||||
.prose h1 { font-size: 1.8em; padding-bottom: 0.3em; border-bottom: 1px solid var(--t-border); }
|
||||
.prose h2 { font-size: 1.4em; }
|
||||
.prose h3 { font-size: 1.15em; }
|
||||
.prose h4 { font-size: 1em; color: var(--t-muted); }
|
||||
.prose p { margin: 0.75em 0; min-height: 1.2em; }
|
||||
.prose a { color: var(--t-accent); text-decoration: underline; text-underline-offset: 2px; }
|
||||
.prose strong { color: var(--t-bright); font-weight: 700; }
|
||||
.prose em { font-style: italic; }
|
||||
.prose code { background: var(--t-bg); border: 1px solid var(--t-border); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.88em; }
|
||||
.prose pre { background: var(--t-bg); border: 1px solid var(--t-border); padding: 0.8em 1em; overflow-x: auto; margin: 0.8em 0; border-radius: 3px; }
|
||||
.prose pre { background: var(--t-bg); border: 1px solid var(--t-border); padding: 0.8em 1em; overflow-x: auto; margin: 0.8em 0; border-radius: 3px; position: relative; }
|
||||
.prose pre code { background: none; border: none; padding: 0; font-size: 0.85em; }
|
||||
.prose ul, .prose ol { padding-left: 1.5em; margin: 0.6em 0; }
|
||||
.prose li { margin: 0.25em 0; }
|
||||
.prose li::marker { color: var(--t-dim); }
|
||||
.prose pre .code-copy {
|
||||
position: absolute; top: 4px; right: 4px;
|
||||
background: var(--t-surface); border: 1px solid var(--t-border);
|
||||
color: var(--t-dim); cursor: pointer;
|
||||
width: 26px; height: 26px; border-radius: 3px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
opacity: 0; transition: opacity 0.15s, color 0.15s;
|
||||
font-size: 13px; padding: 0;
|
||||
}
|
||||
.prose pre:hover .code-copy { opacity: 1; }
|
||||
.prose pre .code-copy:hover { color: var(--t-accent); border-color: var(--t-accent); }
|
||||
.prose pre .code-copy.copied { color: var(--t-accent); opacity: 1; }
|
||||
|
||||
/* Lists — proper bullets */
|
||||
.prose ul { list-style: disc; padding-left: 1.6em; margin: 0.75em 0; }
|
||||
.prose ul ul { list-style: circle; }
|
||||
.prose ul ul ul { list-style: square; }
|
||||
.prose ol { list-style: decimal; padding-left: 1.6em; margin: 0.75em 0; }
|
||||
.prose li { margin: 0.35em 0; padding-left: 0.3em; }
|
||||
.prose li::marker { color: var(--t-accent); }
|
||||
.prose li > ul, .prose li > ol { margin: 0.2em 0; }
|
||||
|
||||
/* Tree mode for lists — works on .prose.tree (global) or .tree-list (per-list) */
|
||||
.prose.tree ul, .prose .tree-list, .prose .tree-list ul { list-style: none; padding-left: 0; }
|
||||
.prose.tree ul ul, .prose .tree-list ul { padding-left: 1.4em; }
|
||||
.prose.tree li, .prose .tree-list li {
|
||||
position: relative;
|
||||
padding-left: 1.5em;
|
||||
margin: 0.15em 0;
|
||||
}
|
||||
.prose.tree li::before, .prose .tree-list li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0.25em;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--t-dim);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.prose.tree li::after, .prose .tree-list li::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0.25em;
|
||||
top: 0.7em;
|
||||
width: 1em;
|
||||
height: 2px;
|
||||
background: var(--t-dim);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.prose.tree li:last-child::before, .prose .tree-list li:last-child::before {
|
||||
bottom: calc(100% - 0.7em);
|
||||
}
|
||||
.prose.tree li::marker, .prose .tree-list li::marker { color: transparent; font-size: 0; }
|
||||
|
||||
/* Explicit bullet-list keeps bullets even when global tree is on */
|
||||
.prose.tree .bullet-list, .prose.tree .bullet-list ul { list-style: disc; padding-left: 1.6em; }
|
||||
.prose.tree .bullet-list li { padding-left: 0.3em; }
|
||||
.prose.tree .bullet-list li::before, .prose.tree .bullet-list li::after { display: none; }
|
||||
.prose.tree .bullet-list li::marker { color: var(--t-accent); font-size: inherit; }
|
||||
.prose blockquote { border-left: 3px solid var(--t-accent); padding-left: 1em; margin: 0.8em 0; color: var(--t-muted); }
|
||||
.prose hr { border: none; border-top: 1px solid var(--t-border); margin: 1.2em 0; }
|
||||
/* Todo checkboxes */
|
||||
|
||||
Reference in new issue
Block a user