Lists - (un)ordered
/* Reduce indentation in bullet lists */
ol {
padding-inline-start: 18px;
}
ul {
padding-inline-start: 18px;
list-style-type: disc;
}
/* Long bullet list: connect the same levels of bullets with vertical "lines" */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
content:'';
border-left: 1px solid rgba(0, 122, 255, 0.25);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
}
ul ul::before { left: -11px; top: 0; bottom: 0; /* change "left:" value for align of vert. line */
}
/* Edit mode unordered list dash rendered as dot for WYSIWYG */
/* I prefer "Turn -lists into bullets as you type as per Typora */
/* Unordered lists: turn into bullets as you type, as per Typora */
```css
span.cm-formatting-list-ul {
visibility: hidden !important;
}
span.cm-formatting-list-ul:after {
content: 'โข '; /* ITS theme; for Blue Topaz */
margin-left: -12px;
color: var(--accent); /* ITS theme; for Blue Topaz --text-normal */
visibility: visible !important;
}
Stylized lists
/*From Gabroel - Obsidian #css-themes channel*/
* {margin: 0; padding: 0; list-style: none;}
ul li:not(.task-list-item) {
margin-left: 15px;
position: relative;
padding-left: 5px;
list-style-position: inside;
border-left: 5px solid yellow;
box-shadow: 0 0 0 0.5px hotpink;
border-radius: 10px;
}
ol {
counter-reset: cupcake;
padding-left: 5px;
}
ol li {
counter-increment: cupcake;
margin-left: 15px;
position: relative;
padding-left: 5px;
list-style-position: inside;
border-left: 5px solid hotpink;
box-shadow: 0 0 0 0.5px hotpink;
border-radius: 10px;
}
ol li:before {
content: counters(cupcake, '.') ' ';
/* Whatever custom styles you want here */
color: hotpink;
font-weight: bold;
display: inline-block;
white-space: pre;
}
/*Collapse indicator*/
.markdown-preview-view .collapse-indicator {
margin-left: -46px;
padding: 0 18px;
}
/*heading collapse indicator*/
.markdown-preview-view .heading-collapse-indicator {
margin-left: -25px;
padding: 0 8px;
}
div.heading-collapse-indicator.collapse-indicator.collapse-icon:hover{
color: var(--text-accent);
}
.markdown-preview-section:not(.is-collapsed) svg.right-triangle{
color: var(--text-accent);
}
/*outline collapse indicator*/
div.collapsible-item-collapse.collapse-icon{
color: var(--text-accent);
}
Stylized lists - auto-adjust width & auto-counter
/*From Gabroel - Obsidian #css-themes channel*/
/*video demo https://discord.com/channels/686053708261228577/702656734631821413/784922140465692712 */
* {margin: 0; padding: 0; list-style: none;}
li > p:not(.task-list-item) {
display: inline;
margin-top: 0;
margin-bottom: 0;
}
ul li:not(.task-list-item) {
margin-left: 15px;
border-left: 5px solid gray;
box-shadow: 0 0 0 0.5px gray;
border-radius: 10px;
width: fit-content;
margin-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
position: relative;
list-style: none;
display: list-item;
height: fit-content;
}
ul li:not(.task-list-item)::before {
content: 'โข';
color: #8ec07c;
display: inline-block;
width: 1em;
position: relative;
margin-left: 0em;
font-weight: bold;
text-shadow: 0 0 0.5em #8ec07c;
}
ol {
counter-reset: cupcake;
padding-left: 5px;
}
ol li {
counter-increment: cupcake;
margin-left: 15px;
position: relative;
padding-left: 5px;
list-style-position: inside;
border-left: 5px solid gray;
box-shadow: 0 0 0 0.5px darkgray;
border-radius: 10px;
width: fit-content;
margin-bottom: 8px;
padding-right: 5px;
}
ol li::before {
content: counters(cupcake, '.') '. ';
/* Whatever custom styles you want here */
color: gray;
font-weight: bold;
display: inline-block;
white-space: pre;
}
/*Collapse indicator*/
.markdown-preview-view .collapse-indicator {
margin-left: -46px;
padding: 0 18px;
}
/*heading collapse indicator*/
.markdown-preview-view .heading-collapse-indicator {
margin-left: -25px;
padding: 0 8px;
}
div.heading-collapse-indicator.collapse-indicator.collapse-icon:hover{
color: var(--text-accent);
}
.markdown-preview-section:not(.is-collapsed) svg.right-triangle{
color: var(--text-accent);
}