howe-ren_smart-order-list/styles.css
2026-04-11 20:02:57 +08:00

150 lines
No EOL
5 KiB
CSS

/* =========================================
SMART ORDER LIST - LIVE PREVIEW (EDITING)
========================================= */
/* 1. Destroys false counters applied by Obsidian's native engine */
.smart-list-prefix::before,
.smart-list-prefix::after {
content: none !important;
display: none !important;
}
/* 2. Clean Grey-Prefix styling matching native Obsidian lists */
.smart-list-prefix {
color: var(--list-marker-color, var(--text-faint)) !important;
}
/* 3. Hologram Override for Consecution Exits (Live Preview) */
.smart-list-override,
.smart-list-override * {
color: transparent !important;
background: transparent !important;
position: relative;
}
.smart-list-override::after {
content: attr(data-expected) !important;
display: block !important;
color: var(--list-marker-color, var(--text-faint)) !important;
position: absolute;
left: 0;
top: 0;
white-space: pre;
pointer-events: none;
}
/* =========================================
SMART ORDER LIST - READING MODE
========================================= */
body {
--sol-gap: 0.5ch;
}
/* =========================================
1. STRIP NATIVE MARKERS
========================================= */
/* ROOT LISTS (Line 1): Keep native 3ch margin! */
.markdown-rendered li.smart-list-native-override-reading {
list-style-type: none !important;
position: relative !important;
margin-inline-start: 3ch !important;
}
/* NESTED LISTS (Line 2+): Crush the double-indent bug! */
.markdown-rendered li.smart-list-custom-reading {
list-style-type: none !important;
position: relative !important;
margin-inline-start: 0 !important;
}
/* =========================================
2. THE ORGANIC PADDING CASCADE (Smart Prefix Distance)
========================================= */
/* UNIFIED! Both Ordered (1.1) and Unordered (- 5) lists now use your dynamic distance math! */
.markdown-rendered li > ol.el-ol,
.markdown-rendered li > ul.el-ul {
/* The Perfect Distance: Parent's exact width + 2ch visual step! */
--sol-organic-step: calc(var(--sol-parent-prefix-len, 2ch) + 2ch);
padding-inline-start: var(--sol-organic-step) !important;
margin-bottom: 0 !important;
}
/* =========================================
3. BASE SPAN STYLES
========================================= */
.markdown-rendered .smart-list-override-reading,
.markdown-rendered .smart-list-prefix-span-reading,
.markdown-rendered .smart-list-bullet-reading {
display: inline-block !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
font-size: inherit !important;
font-variant-numeric: tabular-nums !important;
color: var(--list-marker-color, var(--text-faint)) !important;
white-space: nowrap !important;
box-sizing: border-box !important;
line-height: inherit !important;
}
/* =========================================
4. ROOT PREFIX (Line 1) -> Unified Line Math!
========================================= */
.markdown-rendered .smart-list-override-reading {
position: absolute !important;
/* THE UNIFIED MATH: Anchors Line 1 to the exact same vertical line variable
used by the rest of the lists. Perfect geometric parity! */
left: calc(var(--indentation-guide-reading-indent, -0.85em) - 0.5ch) !important;
text-align: left !important;
padding-right: var(--sol-gap) !important;
}
/* =========================================
5. NESTED PREFIXES (Lines 2, 3, 4)
========================================= */
.markdown-rendered .smart-list-prefix-span-reading {
/* Shares the exact same calculation as Line 1,
guaranteeing the vertical line slices perfectly through the center of every "1"! */
margin-inline-start: calc(var(--indentation-guide-reading-indent, -0.85em) - 0.5ch) !important;
text-align: left !important;
padding-right: var(--sol-gap) !important;
}
/* =========================================
6. NESTED BULLET DOT (Line 5)
========================================= */
.markdown-rendered .smart-list-bullet-reading {
/* Pulls left to the vertical line, then pulls 2.5px to center the 5px dot! */
margin-inline-start: calc(var(--indentation-guide-reading-indent, -0.85em) - 2.5px) !important;
text-align: left !important;
padding-right: var(--sol-gap) !important;
}
.markdown-rendered .smart-list-bullet-reading::after {
content: "" !important;
display: inline-block !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
background-color: var(--list-marker-color, var(--text-normal)) !important;
vertical-align: middle !important;
position: relative !important;
top: -1px !important;
margin-inline-start: 2px !important;
}
/* Kills Obsidian's native pseudo-element margins */
body .markdown-rendered ul > li > .list-bullet::after,
body .markdown-rendered ol > li > .list-bullet::after {
margin: 0 !important;
}