Helpful CSS Snippets past Obsidian v16.0

[hydescarf]

Note that this is Mado 11 repository, not Mado Miniflow, but the following snippets can be applied to both. Feel free to adjust them to your liking.

As I won't be updating the source code directly anymore, this issue post will serve as a place for hints on certain CSS fixes for myself. It will or will not be updated in the future, and I don't accept requests anymore.

As of v16.0 update of the Obsidian App, there's a new CSS change (unknown if it's new change or fix) applied to Bullet List. Here are the snippets to edit them back to default, and an extra for the Vault change.

v1.7

/* fix collapse-icon on explorer not hidden */
body:is(:not(.css-settings-manager),.toggle-explorer-collapse) .nav-folder-title .collapse-icon{
    display:none;
}

/* fix spacing for collapse icon on task-list */
.markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-list-line .cm-fold-indicator .collapse-indicator{
    padding-inline-end:15px;
}

/* fix bolding when hovering on folder */
body:not(.is-grabbing) .nav-folder-title:hover{
    font-weight:500!important;
}

v1.6

Edit: Oh geez, there's more breaking changes than I thought on v1.6 :/ Very wished that devs push these styling design update to another Major release instead. Might as well retiring the themes if these continue in the future.

/* Obsidian v16 style changes fix */

/* Bullet line padding adjustment */
.markdown-preview-sizer>div>:is(ul, ol){
    padding-inline:7px;
}

/* Vault hidden by default, and show up when hovered at the very bottom part of the sidebar */
.workspace-sidedock-vault-profile{
    margin-bottom:-40px!important;
    opacity:0;
    transition:margin 0.2s, opacity 0.1s;
}
.workspace-sidedock-vault-profile:hover{
    margin-bottom:0!important;
    opacity:1;
}

/* Fix indentation guide line & spaces on explorer */
.nav-folder > .nav-folder-children{
    padding-block:7px;
    padding-left:13px;
    margin-left:20px;
}
body:is(:not(.css-settings-manager),.toggle-explorer-indent) .nav-folder > .nav-folder-children{
    border-inline-start:none;
    padding-left:33px;
    margin-left:0;
}

/* remove background-color that prevents the background wave to show up*/
.workspace,
.workspace-tabs .workspace-leaf,
.workspace-ribbon,
.workspace-split,
.workspace-split .view-content,
body.is-hidden-frameless:not(.is-fullscreen):is(.is-focused,) .titlebar-button-container:is(.mod-right,.mod-left),
.workspace-tab-header-container{ /* remove background as parent will be the one to have it instead */
    background-color:initial;
    background:none;
}

Fixes to mado-panel-link & mado-panel-list, and extra cssclass mado-panel-github

/* force break word for links */
.markdown-preview-sizer>div ul li a:not(.tag), div.callout ul li a:not(.tag){
    word-break:break-all;
}
/* remove left margin for mado-panel-list */
[class*="mado-panel-list"] .markdown-preview-sizer>div ul li, div.callout[data-callout*="mado-panel-list"] ul li{
    margin-inline-start:0;
}
/* github flavoured mado-panel-list */
[class*="mado-panel-github"] .markdown-preview-sizer>div ul{
    gap:0;
}
[class*="mado-panel-github"] .markdown-preview-sizer>div ul li:not(:first-child):not(:last-child){
    border-radius:0;
    border-top:none;
}
[class*="mado-panel-github"] .markdown-preview-sizer>div ul li:first-child:not(:last-child){
    border-radius:var(--panel-radius) var(--panel-radius) 0 0;
    border-top:var(--border);
}
[class*="mado-panel-github"] .markdown-preview-sizer>div ul li:last-child:not(:first-child){
    border-radius:0 0 var(--panel-radius) var(--panel-radius);
    border-top:none;
}
[class*="mado-panel-github"] .markdown-preview-sizer>div ul li:hover{
    transform:none;
}
/* fix some panel-link margin issue */
[class*="mado-panel-list"] .markdown-preview-sizer>div ul li:has(>p){
    display: inline-block;
    vertical-align: super;
    height: calc(100% + 16px);
    width: calc(100% + 23px);
    padding-block: 8px;
    margin-block: -8px;
    text-align: left;
}
[class*="mado-panel-list"][class*="mado-panel-link"] .markdown-preview-sizer>div ul li a:not(.tag), div.callout[data-callout*="mado-panel-list"][data-callout*="-link"] ul li a:not(.tag) {
    height: calc(100% + 16px);
    width: calc(100% + 46px);
    padding-block: 8px;
    margin-block: -8px;
    display: inline-block;
    text-align: left;
}

Other

Here's some addition snippets I was using that doesn't fit the theme naturally.

/* Alternative H1 title design (underlined)*/
.markdown-reading-view .markdown-rendered h1:after{
    display:block;
    content:"";
    width:100%;
    margin-top:10px;
    border-bottom:2px solid var(--color-base-50);
}
/* above but with color-accent as underline color */
.markdown-reading-view .markdown-rendered h1:after {
    margin-top: 5px;
    width:calc(100% + 20px);
    margin-left:-10px;
    border-bottom: 2px solid var(--color-accent);
}

/* Alternative H6 title design */
.markdown-reading-view .markdown-rendered h6{
    background:var(--color-base-shadow);
    padding:4px 23px;
    border-radius:var(--button-radius);
    border-bottom:1px solid var(--color-base-40);
}

/* H1 margin-top forcefully */
body:is(:not(.css-settings-manager),.toggle-h1-margin-top) :is(h1, .markdown-rendered h1) {
    margin-top: 73px!important;
}
ul, ol{
    padding:4px 0 7px;
}

Fixes for mado-timeline

/* mado-timeline fixed */
.mado-timeline .markdown-preview-sizer>div>h1{
    color:var(--color-accent);
    font-size:36px;
    margin-top: 100px!important;
}
.mado-timeline .markdown-preview-sizer>div>h2{
    margin-block:33px var(--p-spacing);
}
.mado-timeline .markdown-preview-sizer>div:has(>h2)+div>*:not(h2){
    margin-top:-13px;
}
.mado-timeline .markdown-preview-sizer>div>h2:before {
    height: 40px;
    top: -35px;
    left: 50%;
    opacity:0.5;
}

Color reverting back to original: (Not sure why it was different, probably because of miscalculation when implementing custom bg-color)

.theme-light,
.is-mobile.theme-light,
.is-tablet.theme-light{
    --color-base-10:hsla(calc(var(--bgcolor-h) + 6), calc(var(--bgcolor-s) - 6%), calc(var(--bgcolor-l) - 4%), 1);
    --color-base-05:hsla(calc(var(--bgcolor-h) + 3), calc(var(--bgcolor-s) - 28%), calc(var(--bgcolor-l) - 7%), 1);
    --color-base-20:hsla(calc(var(--bgcolor-h) + 9), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 2%), 1);

    --color-base-20-trans:hsla(calc(var(--bgcolor-h) + 6), calc(var(--bgcolor-s) - 8%), calc(var(--bgcolor-l) - 2%), 0.5);
    --color-base-00-0:hsla(calc(var(--bgcolor-h) - 27), calc(var(--bgcolor-s) - 12%), calc(var(--bgcolor-l) + 2%), 1); /* very white */
    --color-base-20-0:hsla(calc(var(--bgcolor-h) + 3), calc(var(--bgcolor-s) - 27%), calc(var(--bgcolor-l) - 7%), 0.1); /* hovered version for above */
    --color-base-00-0-trans:hsla(calc(var(--bgcolor-h) - 20), calc(var(--bgcolor-s) - 12%), calc(var(--bgcolor-l) + 2%), 0.5);
}

[Haqbani]

Dear hydescarf,

I hope this finds you well. I wanted to extend my gratitude for the Mado theme—it has significantly enhanced my experience using Obsidian. The attention to detail and the design are truly appreciated.

I've encountered an issue where the calendar view disappears after applying the Mado theme. I understand you're not updating the theme directly anymore, but I was wondering if you might have any suggestions or snippets that could help resolve this visibility issue with the calendar plugin.

Thank you more for your time and for the excellent work on the Mado theme.

[hydescarf]

@Haqbani Can you share the name (or the link) of the plugin? I tried out with the first one in the community store but I don't see any issue on my side.

[jcesguerram]

@Haqbani Can you share the name (or the link) of the plugin? I tried out with the first one in the community store but I don't see any issue on my side.

Hi hydescarf. I also want to express my appreciation for the theme. I've tried many and I alway come back to this one. It's too bad that you won't update anymore, but I understand that these things are usually side projecrts for people. i was wondering if you could give me any pointers as to why this plugin doesn't work well with Mado: https://github.com/andrewmcgivery/obsidian-ribbon-divider When I try it, the dividing line extends beyond the ribbon all the way to the right. Thanks a lot!

[hydescarf]

@jcesguerram Mostly because the icons around the edges are fine-tuned to be easier to trigger in my themes, so the default one didn't work well here. Try this snippet below. If it didn't work, try with position:relative!important

.side-dock-actions .side-dock-ribbon-action.ribbon-divider:before {
    position: relative;
}