Hello, I have a css snippet below that styles my unordered lists, but I want these styles to show up in both the built in pdf export in obsidian, as well as in the image export using the plugin by zhouhua.
I tried wrapping the entire code with ‘@media print{ }’ like some posts have suggested, but it does not seem to work for me. How do I go about this?
/* Replace the top-level default list bullet with "double-right-chevrons" symbol */
.el-ul > ul > li > .list-bullet::after,
.callout-content > ul > li > .list-bullet::after,
.HyperMD-list-line-1 .list-bullet::after {
content: '»';
width: unset;
height: unset;
background-color: unset;
box-shadow: none; /* Moved from a redundant selector */
color: var(--bullet-new-color);
font-size:1.6em;
padding-bottom: 5px;
padding-right: 4px;
}
/* Style for list marker inside callout content */
.callout-content > ul > li::marker {
content: '» ';
}
/* Ensure proper styling when hovering and collapsed */
.HyperMD-list-line-1:has(.collapse-indicator:hover) .cm-list-1 > .list-bullet::after {
background-color: unset;
box-shadow: none;
color: var(--text-normal);
}
.el-ul > ul > li:has(> .is-collapsed) > .list-bullet::after {
color: var(--list-marker-color-collapsed);
}
.HyperMD-list-line-1 > .cm-fold-indicator.is-collapsed ~ .cm-formatting-list .list-bullet::after {
color: var(--list-marker-color-collapsed);
background-color: unset;
box-shadow: none;
}
/* LEVEL 2 */
.markdown-reading-view ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after {
/* Dash */
height: 1px;
width: 13px;
border-radius: 0%;
background-color: var(--bullet-new-color);
}
/* LEVEL 3 */
.markdown-reading-view ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet:after {
/* Hollow Square */
height: 6px;
width: 6px;
background-color: Transparent;
border-color: var(--bullet-new-color);
border-style: solid;
border-radius: 0%;
border-width: 1px;
}
/* LEVEL 4 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet:after {
/* Solid Square */
height: 7px;
width: 7px;
border-radius: 0%;
background-color: var(--bullet-new-color);
}
/* LEVEL 5 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-5 .list-bullet:after {
/* Bullet */
height: 5px;
width: 5px;
border-radius: 50%;
background-color: var(--bullet-new-color);
}
/* LEVEL 6 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-6 .list-bullet:after {
/* Hollow Bullet */
height: 4px;
width: 4px;
background-color: Transparent;
border-color: var(--bullet-new-color);
border-style: solid;
border-radius: 50%;
border-width: 1px;
}
/* LEVEL 7 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-7 .list-bullet:after {
/* Small Bullet */
height: 2px;
width: 2px;
border-radius: 50%;
background-color: var(--bullet-new-color);
}
/* bullet color */
:root { --bullet-new-color: rgb(89,89,223);}