/*
--------------------------- --------------------------- ---------------------------
--------------------------- --------------------------- ---------------------------
Mado Miniflow - Obsidian Theme by hydescarf
https://github.com/hydescarf/Obsidian-Theme-Mado-Miniflow
--------------------------- --------------------------- ---------------------------
--------------------------- --------------------------- ---------------------------
*/
body{
/* --accent-h: 210; */
/* --accent-s: 93%; */
/* --accent-l: 62%; */
--accent-h: 254;
--accent-s: 80%;
--accent-l: 68%;
--titlebar-background:var(--background-secondary);
--titlebar-background-focused:var(--background-secondary);
--background-modifier-hover:var(--color-base-hover);
--bold-weight:var(--font-bold);
--italic-color:var(--text-muted);
--code-normal:var(--text-muted);
--blockquote-color:var(--color-muted);
--background-primary:var(--color-base-00);
--background-secondary:var(--color-base-20);
--checklist-done-color:var(--color-base-50);
--icon-m:20px;
--icon-l:20px;
--divider-width:4px;
--callout-padding:17px 17px;
--callout-content-padding:0 12px 0 27px;
--embed-padding:13px 23px;
--list-indent:37px;
--header-height:43px;
--tab-stacked-header-width:53px;
/* custom */
--border:1px solid var(--tab-outline-color);
--button-radius:4px;
--panel-radius:8px;
--window-radius:23px;
--button-padding-icon:7px;
--button-padding-long:7px 15px;
--background-fourth:var(--color-base-00-0);
--background-fifth:var(--color-base-20-0);
--panel-shadow:0 1px 3px var(--color-base-shadow);
--panel-shadow-hover:0 3px 5px var(--color-base-shadow-hover);
--window-shadow:0 0 9px var(--color-base-shadow-hover);
--window-shadow-left:-4px 0 5px var(--color-base-shadow-hover);
--window-shadow-right:4px 0 5px var(--color-base-shadow-hover);
--sidebar-size-left:270px;
--sidebar-size-right:270px;
--color-strikethrough:var(--text-faint);
--italic-color:var(--color-italic);
--inline-code-color:var(--color-red);
}
body.is-translucent{
--background-primary:var(--color-base-00-trans);
--background-secondary:var(--color-base-20-trans);
--background-fourth:var(--color-base-00-0-trans);
}
body.toggle-tab-height{
--header-height:35px;
}
.theme-light,
.is-mobile.theme-light,
.is-tablet.theme-light{
--color-base-00:hsla(204, 45%, 97%, 1);
--color-base-10:hsla(210, 37%, 93%, 1);
--color-base-05:hsla(207, 17%, 90%, 1);
--color-base-20:hsla(210, 45%, 95%, 1);
--color-base-00-trans:hsla(204, 45%, 97%, 0.5); /*for transparency background*/
--color-base-20-trans:hsla(210, 45%, 95%, 0.5);
--color-base-00-0:hsla(180, 33%, 99%, 1); /* very white */
--color-base-20-0:hsla(207, 10%, 90%, 0.1); /* hovered version for above */
--color-base-shadow:hsla(212, 17%, 80%, 0.2); /* shadow */
--color-base-00-0-trans:hsla(180, 33%, 99%, 0.5);
--color-base-shadow-hover:hsla(212, 17%, 80%, 0.3); /* shadow hover*/
--color-base-hover:var(--color-base-shadow-hover); /* hover*/
--color-base-35:hsla(210, 15%, 73%, 1);
--color-base-50:hsla(217, 15%, 73%, 1);
--color-base-70:hsla(218, 19%, 39%, 1);
--color-base-100:hsla(0, 0%, 13%, 1); /* text-normal color */
--color-accent-1: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) - 0%), calc(var(--accent-l) + 10%));
--color-accent-2: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) - 0%), calc(var(--accent-l) - 5%));
--color-red:hsla(365, 85%, 55%, 1);
--color-muted:var(--color-base-70);
--color-italic:hsla(215, 43%, 63%, 1);
--color-highlight:var(--text-normal); /* for highlight text color */
}
.theme-dark,
.is-mobile.theme-dark,
.is-tablet.theme-dark{
--color-base-00:hsla(215, 17%, 19%, 1);
--color-base-10:hsla(214, 24%, 15%, 1);
--color-base-05:hsla(207, 17%, 10%, 0.5);
--color-base-20:hsla(214, 24%, 15%, 1);
--color-base-00-trans:hsla(215, 17%, 19%, 0.5); /*for transparency background*/
--color-base-20-trans:hsla(214, 24%, 15%, 0.5);
--color-base-00-0:hsla(212, 17%, 22%, 0.9); /* very white */
--color-base-20-0:hsla(207, 10%, 10%, 0.1); /* hovered version for above */
--color-base-00-0-trans:hsla(212, 17%, 22%, 0.5);
--color-base-shadow:hsla(207, 10%, 10%, 0.1); /* shadow */
--color-base-shadow-hover:hsla(212, 17%, 0%, 0.3); /* shadow hover*/
--color-base-hover:var(--color-base-05); /* hover*/
--color-base-30:hsla(215, 22%, 13%, 1);
--color-base-35:hsla(210, 15%, 33%, 1);
--color-base-50:hsla(217, 18%, 50%, 0.7);
--color-base-70:hsl(218, 17%, 58%); /* text-muted */
--color-base-100:hsla(0, 0%, 73%, 1); /* text-normal color */
--color-accent: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) + 13%), calc(var(--accent-l) + 3%));
--color-accent-1: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) - 13%), calc(var(--accent-l) - 3%));
--color-accent-2: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) + 7%), calc(var(--accent-l) + 2%));
--color-red:hsla(365, 90%, 65%, 1);
--color-muted:hsl(218, 17%, 62%);
--color-italic:hsla(215, 33%, 60%, 1);
--color-highlight:hsla(45, 63%, 63%, 1); /* for highlight text color */
--text-highlight-bg:hsla(45, 53%, 53%, 1); /* for highlight text underline color */
}
.theme-dark:is(.THT-background,.THT-underline-light){
--color-highlight:hsla(45, 53%, 13%, 1);
}
.theme-light:is(.THT-underline,.THT-underline-light){
--color-highlight:var(--color-yellow);
--text-highlight-bg:hsla(45, 53%, 73%, 1);
}
body.theme-daisy-blue{
--accent-h: 210;
--accent-s: 93%;
--accent-l: 62%;
}
body.theme-red-sky{
--accent-h: 0;
--accent-s: 88%;
--accent-l: 57%;
}
body.theme-red-sky.theme-dark{
--accent-h: 0;
--accent-s: 73%;
--accent-l: 57%;
}
body.theme-violette{
--accent-h: 254;
--accent-s: 80%;
--accent-l: 68%;
}
body.theme-violette.theme-dark{
--accent-h: 255;
--accent-s: 73%;
--accent-l: 68%;
}
body.theme-greenery{
--accent-h: 125;
--accent-s: 83%;
--accent-l: 43%;
}
body.theme-greenery.theme-dark{
--accent-h: 125;
--accent-s: 81%;
--accent-l: 38%;
}
body.theme-yellowish{
--accent-h: 43;
--accent-s: 76%;
--accent-l: 50%;
}
body.theme-yellowish.theme-dark{
--accent-h: 47;
--accent-s: 85%;
--accent-l: 50%;
}
body.theme-orange-jist{
--accent-h: 23;
--accent-s: 100%;
--accent-l: 61%;
}
body.theme-deep-blue{
--accent-h: 229;
--accent-s: 83%;
--accent-l: 53%;
}
body.theme-deep-blue.theme-dark{
--accent-h: 229;
--accent-s: 78%;
--accent-l: 63%;
}
body.theme-tea-teal{
--accent-h: 195;
--accent-s: 63%;
--accent-l: 52%;
}
body.theme-magenta-pink{
--accent-h: 302;
--accent-s: 70%;
--accent-l: 60%;
}
body.theme-grayscale{
--accent-h: 234;
--accent-s: 15%;
--accent-l: 45%;
}
body.theme-grayscale.theme-dark{
--accent-h: 224;
--accent-s: 12%;
--accent-l: 63%;
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Mado Layout Basic Styling
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
body, body.is-translucent{
background-color:var(--background-secondary);
}
/* Background Wave design */
body:not(.toggle-wave-background):before{
content:"";
position:absolute;
width:100%;
height:100%;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size:300% 300px;
-webkit-mask-position:88.5% -73px;
-webkit-mask-repeat:no-repeat;
background-color:var(--color-accent-2);
transform:rotateZ(180deg);
opacity:0.5;
}
/* remove padding-top when fullscreen in obsidian-ver titlebar */
body.is-frameless:not(.is-hidden-frameless).is-fullscreen{
padding-top:0;
}
/* hidden scrollbar */
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar) ::-webkit-scrollbar-thumb{
visibility:hidden;
}
body ::-webkit-scrollbar-thumb:hover{
visibility:initial;
}
/* Switching overflow:auto to overlay */
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container,
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) :is(.callout-content,.markdown-rendered pre,.markdown-source-view.mod-cm6 .math-block > mjx-container){
overflow-x:overlay;
}
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) :is(.cm-scroller,.workspace-leaf-content .view-content,.backlink-pane, .outgoing-link-pane,.item-list,.search-result-container.mod-global-search,.open-vault-options,.recent-vaults-list,.markdown-preview-view,.community-modal-info,.prompt-results,.suggestion,.vertical-tab-content,.pdf-scroll-container,.nav-files-container){
overflow-y:overlay;
}
/* Switching overflow:scroll to overlay */
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) .CodeMirror-hscrollbar{
overflow-x:overlay;
}
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) .CodeMirror-vscrollbar{
overflow-y:overlay;
}
/* remove backgrounds for wave design background */
.workspace,
.workspace-tabs .workspace-leaf,
.workspace-ribbon,
.workspace-split.mod-root,
.workspace-tab-header-container,
.workspace-split.mod-root .view-content{ /* remove background as parent will be the one to have it instead */
background:none;
}
/* remove background to adapt translucent mode */
.is-translucent:not(.is-fullscreen) .titlebar,
.is-translucent.is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container.mod-right{
background:none;
}
/* remove distinguishing-borders on sidebars and headers */
.workspace-ribbon,
.workspace-tab-header-container{
border:none;
}
/* hide handle visibility when not hovered */
.workspace-leaf-resize-handle{
border-color:transparent;
}
/* Toggle visibility on Sidebar Tab Icons */
/* and on Left Sidebar (File Explorer) */
/* and on Toggle Sidebar (3 rows) */
/* and on Ribbon Icons */
/* and on Main Note Tabs */
/* and on Note Title Header Bar */
/* and on Titlebar (Window Frame) */
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons) .workspace-split.mod-horizontal:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container-inner,
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-explorer-buttons) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container,
body:not(.is-mobile):not(.css-settings-manager) .sidebar-toggle-button:is(.mod-left, .mod-right),
body:not(.is-mobile).toggle-sidebar-toggle-left .sidebar-toggle-button.mod-left,
body:not(.is-mobile).toggle-sidebar-toggle-right .sidebar-toggle-button.mod-right,
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-side-ribbons) :is(.side-dock-actions, .side-dock-settings),
body:not(.is-mobile).toggle-tab-section .workspace-split.mod-vertical.mod-root :is(.workspace-tabs:not(.mod-stacked) .workspace-tab-header, .workspace-tab-header-new-tab, .workspace-tab-header-tab-list),
body.toggle-note-header .workspace-split.mod-vertical.mod-root .view-header,
body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-titlebar-buttons) .titlebar{
opacity:0;
transition:opacity 0.15s;
}
body .workspace-split.mod-horizontal:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container:hover .workspace-tab-header-container-inner,
body .workspace-leaf-content[data-type="file-explorer"] .nav-header:hover .nav-buttons-container,
body .workspace-ribbon.side-dock-ribbon.mod-left:hover :is(.sidebar-toggle-button.mod-left, .side-dock-actions,.side-dock-settings),
body .workspace-split.mod-vertical.mod-root .workspace-tab-header-container:hover:hover:hover:hover div,
body .sidebar-toggle-button:is(.mod-left, .mod-right):hover:hover,
body .titlebar:hover:hover,
body .workspace-split.mod-vertical.mod-root .view-header:hover,
body.is-grabbing.is-grabbing .app-container:not(.no-transition) .workspace-split .workspace-tabs .workspace-tab-header-container .workspace-tab-header-container-inner,
body.is-grabbing.is-grabbing.is-grabbing.is-grabbing.is-grabbing .app-container:not(.no-transition) .workspace-split .workspace-tabs .workspace-tab-header-container{
opacity:1;
}
/* remove border-bottom below left-sidebar-toggle button */
.workspace-ribbon.mod-left:before{
border:none;
}
/* Make spacing to match collapsed left-ribbon-dock */
body:not(.is-mobile) .workspace:not(.is-right-sidedock-open) .workspace-split.mod-vertical.mod-root{
padding-right:var(--ribbon-width);
}
/* Make spacing for left side to match the right spacing during pop-out window mode */
body:not(.is-mobile).is-popout-window .workspace-split.mod-vertical.mod-root{
padding-left:var(--ribbon-width);
}
.is-mobilebody, .is-mobile .app-container,
.is-mobile .horizontal-main-container,
.workspace-ribbon.mod-left.is-collapsed{
background:none;
}
/* Fixed width for left and right sidebar */
:is(.mod-left-split, .mod-right-split) .workspace-leaf-content{
display:flex;
flex-direction:column;
align-self:end;
}
.mod-right-split .workspace-leaf-content{
align-self:start;
}
body:is(:not(.css-settings-manager),.toggle-sidebar-fixed-left) .mod-left-split .workspace-leaf-content{
max-width:var(--sidebar-size-left);
}
body:is(:not(.css-settings-manager),.toggle-sidebar-fixed-right) .mod-right-split .workspace-leaf-content{
max-width:var(--sidebar-size-right);
}
body:is(:not(.css-settings-manager),.toggle-sidebar-right-top) .workspace-split.mod-horizontal.mod-right-split .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-container,
body.toggle-sidebar-left-top .workspace-split.mod-horizontal.mod-left-split .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-container{
margin-top:37px;
}
.workspace-split.mod-horizontal.mod-left-split{
padding-right:23px;
}
.workspace-split.mod-horizontal.mod-right-split{
padding-left:23px;
}
/* Hide Vault Title */
body:is(:not(.css-settings-manager),.toggle-vault-title) .nav-folder-title[data-path="/"]{
display:none;
}
.nav-folder-title[data-path="/"]{
margin-bottom:23px;
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Main Note Pane Desgin
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
.workspace-tab-header-container{
padding:0;
}
/* Extend margin beneath it */
.workspace-split.mod-vertical.mod-root .workspace-tab-header-container{
margin:0 0 11px 0;
}
body.toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tab-header-container{
margin:0 0 5px 0;
}
/* Remove top-margin and increase gap in between tabs */
.workspace-split.mod-vertical.mod-root .workspace-tab-header-container-inner{
margin:0 -5px;
gap:0;
padding-top:0;
}
/* Remove tab siblings border-radius design */
.workspace-split.mod-vertical.mod-root .workspace-tab-header:before,
.workspace-split.mod-vertical.mod-root .workspace-tab-header:after,
.workspace .mod-root .workspace-tab-header-inner::after{ /* Remove border-right on tabs that are not active */
display:none;
}
body.is-translucent .workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-stacked) .workspace-leaf{
background:var(--background-primary)!important;
}
/* Tab design */
.workspace-split.mod-vertical.mod-root .workspace-tab-header{
padding:0;
box-shadow:none;
margin-top:0;
background:none;
padding:5px 3px;
}
.workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner{
padding:29px 11px 20px;
border-radius:6px;
border:1px solid transparent;
box-shadow:none;
margin-top:-13px;
/* background:var(--background-secondary); */
}
.workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active .workspace-tab-header-inner{
background:var(--background-primary);
border:var(--border);
box-shadow:var(--panel-shadow);
}
.workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner{
background:var(--background-modifier-hover);
}
/* Remove small space on the tab header, as its 100% is based on parent's width+padding-right when right sidebar is collapsed */
body:not(.is-mobile):not(.is-fullscreen) .workspace:not(.is-right-sidedock-open) .mod-top-right-space .workspace-tab-header-container{
padding-right:calc(var(--frame-right-space) - var(--ribbon-width));
}
body:not(.is-mobile):not(.is-fullscreen) .workspace:not(.is-right-sidedock-open) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after{
width:calc(var(--frame-right-space) - var(--ribbon-width));
}
body:not(.is-mobile).is-fullscreen .workspace:not(.is-right-sidedock-open) .mod-top-right-space .workspace-tab-header-container{
margin-right:calc(1px - var(--ribbon-width) + 4px);
}
/* remove margin-top of tab headers that block the possibilities to implement pseudo-clickable area */
.mod-left-split .workspace-tab-header-container-inner,
.mod-right-split .workspace-tab-header-container-inner{
margin-top:0;
padding:0;
gap:0;
}
/* Prevent sticking-to-top design during obsidian window frame mode */
/* 2nd rows are for independent tabs that are not stick to the top */
/* 3rd row pseudo-clickable area during different tab design */
body.is-frameless:not(.is-hidden-frameless):not(.is-fullscreen) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-container,
.workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-container,
body.toggle-tab-design .workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container{
height:auto;
margin-bottom:5px;
}
body.is-frameless:not(.is-hidden-frameless):not(.is-fullscreen) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header,
.workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header,
body.toggle-tab-design .workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header{
padding-block:5px;
}
body.is-frameless:not(.is-hidden-frameless):not(.is-fullscreen) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-inner,
.workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-inner,
body.toggle-tab-design .workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-inner{
padding:4px 11px;
margin-top:2px;
}
/* when header tabs are switched to compact size */
body.is-frameless:not(.is-hidden-frameless):not(.is-fullscreen).toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-inner,
body.toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-inner,
body.toggle-tab-design.toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-inner{
padding:1px 11px;
}
body.is-frameless:not(.is-hidden-frameless):not(.is-fullscreen).toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-inner,
body.toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-inner,
body.toggle-tab-design.toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-inner{
padding:1px 11px;
}
body.toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tab-header-inner{
padding:23px 11px 17px;
}
body.toggle-tab-height .workspace-split svg.svg-icon{
--icon-size:var(--icon-s);
}
body.toggle-tab-height .workspace-split.mod-vertical.mod-root .workspace-tab-header svg.svg-icon{
--icon-size:var(--icon-xs);
}
body.toggle-tab-height .workspace-split.workspace-horizontal:is(.mod-left-split,.mod-right-split) .sidebar-toggle-button,
body.toggle-tab-height .workspace-ribbon .sidebar-toggle-button{
height:var(--header-height);
--icon-size:var(--icon-s);
}
/* match vertical align for alternative tab design and compact mode */
body.is-frameless:not(.is-hidden-frameless):not(.is-fullscreen) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-container :is(.workspace-tab-header-new-tab, .workspace-tab-header-tab-list, .sidebar-toggle-button) .clickable-icon,
body.toggle-tab-design .workspace-split.mod-vertical.mod-root .workspace-tab-header-container :is(.workspace-tab-header-new-tab, .workspace-tab-header-tab-list, .sidebar-toggle-button) .clickable-icon,
body:not(.toggle-tab-design) .workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-top) .workspace-tab-header-container :is(.workspace-tab-header-new-tab, .workspace-tab-header-tab-list, .sidebar-toggle-button) .clickable-icon{
margin-top:4px;
}
body.toggle-tab-design:not(.toggle-tag-height) .workspace-split.mod-vertical.mod-root .workspace-tab-header-container :is(.workspace-tab-header-new-tab, .workspace-tab-header-tab-list, .sidebar-toggle-button) .clickable-icon:before{
height:calc(var(--ribbon-width) + 6px);
margin-top:-6px;
}
/* Main Note Headers spacing */
.workspace-split.mod-vertical.mod-root .view-header{
margin-block:7px;
background:none;
}
/* remove title fading element */
.view-header-title-container:not(.mod-at-end):after{
display:none;
}
/* increase Main Note Headers icon size */
.workspace-split.mod-vertical.mod-root .view-header svg{
--icon-size:var(--icon-l);
}
/* increase Main Note Headers breadcrumb button size */
.view-header-title-parent .view-header-breadcrumb{
padding:3px 7px;
}
/* Stacked Mode styling */
body .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container>.workspace-tab-header-new-tab{
order:1;
margin-right:var(--size-4-1);
}
body .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container>.workspace-tab-header-tab-list{
order:2;
}
body .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container>.sidebar-toggle-button.mod-right{
order:3;
}
/* overflow for visible shadow, though not working nicely */
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container{
/* overflow: visible; */
}
.workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header{
margin:0;
padding-top:7px;
border-top-left-radius:var(--window-radius);
/* border-bottom-left-radius:var(--window-radius); */
box-shadow:none;
border-top:1px solid var(--color-accent-1);
border-left:1px solid var(--color-accent-1);
border-right:none;
border-bottom:none;
/* box-shadow:var(--window-shadow-left); */
}
body.toggle-note-radius .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header{
border-bottom-left-radius:var(--window-radius);
}
.workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header+.workspace-leaf{
border-top-left-radius:0;
/* border-bottom-right-radius:var(--window-radius); */
border-top:var(--border);
border-image:linear-gradient(90deg, var(--color-accent-1) 0, var(--tab-outline-color) 60%, transparent 90%) 1;
/* box-shadow:var(--window-shadow-right); */
box-shadow:none;
border-bottom-left-radius:0;
}
/* Disable transparency on main note during translucent mode due to unreadable issue */
body.is-translucent .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked :is(.workspace-leaf, .workspace-tab-header){
transition:background 0.2s;
background:var(--background-primary)!important;
}
body.is-translucent .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked :is(.workspace-tab-header.is-active+.workspace-leaf, .workspace-tab-header.is-active){
background:var(--color-base-00)!important;
}
/* Border radius on Pane design, however, not adjusted for multiple panes */
body:not(.is-mobile) .workspace-split.mod-vertical.mod-root .workspace-leaf{
border-radius:var(--window-radius);
border-bottom-right-radius:0;
border-bottom-left-radius:0;
box-shadow:var(--window-shadow);
}
body:not(.is-mobile).toggle-note-radius .workspace-split.mod-vertical.mod-root{
padding-bottom:23px;
}
body:not(.is-mobile).toggle-note-radius .workspace-split.mod-vertical.mod-root .workspace-leaf{
border-radius:var(--window-radius);
}
/* Overflow to allow shadow flowing out */
body:not(.is-mobile) .workspace-tabs,
body:not(.is-mobile) .workspace-tabs .workspace-tab-container{
overflow:visible;
}
/* Minimum padding to push down cut-off scrollbars when show-tab-title-bar is disabled */
body:not(.show-view-header) .workspace-split.mod-vertical.mod-root .workspace-leaf{
padding-top:23px;
background-color:var(--background-primary);
}
body.is-mobile .workspace-split.mod-vertical.mod-root .workspace-leaf{
padding-top:0;
}
/* Adjust mobile header position */
body.is-phone .view-header, .show-view-header .view-header{
align-items:center;
}
.is-mobile .view-actions{
margin-right:-3px;
}
/* Gap inbetween panes */
.workspace-split.mod-vertical.mod-root,
.workspace-split.mod-vertical.mod-root .workspace-split:not(.mod-horizontal){
gap:23px;
}
/* Main Note padding space, only in middle pane, not sidebars*/
.workspace-split.mod-vertical.mod-root .markdown-preview-view{
padding-inline:53px;
}
.workspace-split.mod-vertical.mod-root .markdown-source-view .cm-content{
padding-inline:13px;
}
/* Context menu styling */
.menu{
padding:0;
}
.menu-item{
padding:var(--button-padding-long);
}
body.is-translucent .menu{
background:var(--color-base-00);
}
/* Hide status bar */
body:is(:not(.css-settings-manager),.toggle-status-bar) .status-bar{
bottom:-50px;
}
/* Show Sync Button Only */
body.toggle-sync-button.toggle-status-bar .status-bar-item.plugin-sync{
bottom:54px;
right:5px;
position:absolute;
padding:var(--button-padding-icon);
}
body.toggle-sync-button.toggle-status-bar .status-bar-item.plugin-sync:hover{
filter:brightness(0.8);
}
body.toggle-sync-button.toggle-status-bar .status-bar-item .svg-icon{
--icon-size:var(--icon-l);
}
/* Adjust button spacing on search result items */
.search-result-hover-button{
padding-block:0;
}
.search-result-hover-button.mod-top {
top:0;
}
.search-result-hover-button.mod-bottom {
bottom:0;
}
/* Setting Modal */
.vertical-tab-header{
padding-inline:0;
}
.vertical-tab-header-group-title{
color:var(--color-accent-2);
}
.vertical-tab-header-group{
padding-inline:var(--size-4-3);
}
.vertical-tab-header-group:not(:last-child){
border-bottom:var(--border);
margin-bottom:23px;
}
body.is-translucent .modal{
background:var(--color-base-00);
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Animation
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
.modal{
border-radius:var(--window-radius);
animation:0.2s popup forwards;
}
@keyframes popup{
0% { transform:scale(70%); opacity:0; }
15% { transform:scale(80%); opacity:0.1; }
35% { transform:scale(102%); }
45% { opacity:0.3; }
65% { opacity:0.7; }
100% { transform:scale(100%); opacity:1; }
}
body:is(:not(.css-settings-manager), .toggle-note-animation) .workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-stacked) .view-content{
animation:0.2s slide-up forwards;
}
@keyframes slide-up{
0% { transform:translateY(0%); opacity:0; }
15% { transform:translateY(5px); opacity:0; }
25% { transform:translateY(10px); }
45% { opacity:0.5; }
65% { opacity:0.7; }
100% { transform:translateY(0%); opacity:1; }
}
:is(.nav-folder, .nav-file) :is(.nav-folder-title, .nav-file-title).is-active svg{
animation:0.3s bounceback;
}
@keyframes bounceback{
0% { transform:translateY(0%); }
60% { transform:translateY(10%); }
100% { transform:translateY(0%); }
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Icon Button Style
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
/* tab close button */
.workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button{
padding:var(--button-padding-icon);
right:unset;
margin-right:-4px;
}
/* remove margin during stacked mode */
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-header-inner-close-button{
margin-right:0;
}
/* easier hover adaption color */
:is(.workspace-tab-header-status-icon, .workspace-tab-header-inner-close-button, .clickable-icon):hover{
background-color:var(--background-modifier-hover);
filter:brightness(0.8);
}
:is(*, .workspace-tab-header-tab-list, .workspace-tab-header-new-tab) .clickable-icon, /*all clickable icon button */
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon, /* icon in stacked tab mode*/
.workspace-tab-header-inner-icon{ /* Sidebar header icons, though the original padding overrides a bit */
padding:var(--button-padding-icon);
}
/* Adjust icon size during stacked */
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon{
--icon-size:var(--icon-s);
}
/* Setting close button */
body:not(.native-scrollbars) .modal-close-button{
right:7px;
top:7px;
height:32px;
width:34px;
}
.modal-close-button:before{
position:absolute;
top:5px;
left:9px;
}
/* undo original style to adapt consistency on header position */
.sidebar-toggle-button{
height:unset;
justify-content:unset;
padding:unset;
--icon-size:unset;
--icon-stroke:unset;
align-items:center;
padding-block:4.5px;
}
.workspace-tab-header-new-tab,
.workspace-tab-header-tab-list{
padding-block:4.5px;
}
/* background space to be hovered/clicked, a.k.a. "fake" empty space / pseudo-clickable area */
/* maintains the position of hovered whitespace design while still being able to click a little outside of the proposed size. */
:is(.workspace-tab-header-status-icon, .clickable-icon):before{
position:absolute;
content:"";
height:var(--ribbon-width);
width:var(--ribbon-width);
}
/* extend setting clickable area to the bottom */
.side-dock-settings .clickable-icon.side-dock-ribbon-action:last-child:before{
height:calc(var(--ribbon-width) + 8px);
margin-bottom:-5px;
}
/* remove side padding and add pseudo space on header-parent, then remove parent's is-active background and re-enable child's background */
.workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header-inner{
padding:0;
}
.workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header{
padding:5px 3px;
}
.workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header:first-child{
padding-left:5px;
}
.workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header:last-child,
.workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .sidebar-toggle-button.mod-right{
padding-right:5px;
}
.workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header.is-active{
background:transparent;
}
.workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header.is-active .workspace-tab-header-inner{
background-color:var(--background-modifier-hover);
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Long Button Style
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
:is(.nav-folder, .nav-file) :is(.nav-folder-title, .nav-file-title),
.vertical-tab-nav-item,
.tree-item-self,
button{
padding:var(--button-padding-long);
transition:0.05s ease-in;
transition-property:background, color;
position:relative;
}
/* Left-border style on long button, just for file-explorer */
.nav-file-title:before{
content:"";
position:absolute;
left:0;
top:50%;
width:3px;
height:0;
border-radius:var(--button-radius);
background:var(--color-accent);
transform:translateY(0%);
transition:0.25s cubic-bezier(1,0.33,0.76,1.22);
transition-property:height, transform;
}
.nav-file-title.is-active::before{
height:70%;
transform:translateY(-50%);
}
/* Folder styling, just for file-explorer */
.nav-folder-title{
color:var(--color-accent-2);
font-size:0.95em;
font-weight:500;
}
body:is(:not(.css-settings-manager),.toggle-explorer-collapse) .nav-folder-title .nav-folder-collapse-indicator.collapse-icon{
display:none;
}
body:not(.is-grabbing) .nav-folder-title:hover{
color:var(--color-accent-2);
font-weight:500;
}
/* Additional padding inside folder, also remove border-left as indentation-guide */
.nav-folder.mod-root .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.mod-root .nav-folder > .nav-folder-children{
border-left:none;
padding-left:33px;
margin-left:0;
}
:is(.nav-folder-title, .nav-file-title):hover{
filter:brightness(0.9);
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Markdown Stying
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
a, .external-link{
text-decoration:none;
}
a, .external-link:hover{
text-decoration:underline;
}
.cm-hashtag{
vertical-align:unset;
}
code{
--code-normal:var(--blockquote-color);
margin-inline:3px;
}
/* Inline code */
.markdown-rendered :not(pre)>code,
.cm-s-obsidian span.cm-inline-code{
color:var(--inline-code-color);
}
/* inline code background */
.cm-hmd-indented-code,
.cm-s-obsidian span.cm-inline-code.cm-hmd-indented-code{
background:var(--code-background);
}
.markdown-rendered pre{
overflow-x: auto;
}
:is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text){
color:var(--color-highlight);
}
body.theme-dark:not(.css-settings-manager) :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text),
body.THT-underline :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text),
body.THT-underline-dark.theme-dark :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text),
body.THT-underline-light.theme-light :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text){
border-bottom:2px solid var(--text-highlight-bg);
color:var(--color-highlight);
background:none;
}
sup,sub{
font-size:0.85em;
}
.footnote-ref{
vertical-align:super;
}
img{
max-width:100%;
border-radius:var(--panel-radius);
}
/* Markdown Headings */
body:is(:not(.css-settings-manager),.toggle-h1-margin-top) :is(h1, .markdown-rendered h1){
margin-top:73px;
}
:is(h1,h2,h3,h4,h5,h6), .markdown-rendered :is(h1,h2,h3,h4,h5,h6){
margin-top:33px;
}
.markdown-embed .markdown-preview-pusher+div>h1,
.markdown-preview-section div.is-collapsed+div>h1{
margin-top:33px;
}
/* Markdown Checkbox */
/* Give some space on top of parent div */
.markdown-source-view.mod-cm6 .HyperMD-task-line{
padding-top:3px;
}
/* Adjust checkbox position and styling */
.markdown-source-view.mod-cm6 .task-list-item-checkbox{
padding:11px;
top:-2px;
left:-6px;
}
.markdown-preview-view .task-list-item-checkbox{
padding:11px;
top:5px;
}
input[type=checkbox]:checked:after{
-webkit-mask-size:73%;
-webkit-mask-position:73% 60%;
width:100%;
height:100%;
}
.contains-task-list.has-list-bullet li{
margin-block:1px;
}
/* Adjust line position to fit below checkbox */
.markdown-rendered.show-indentation-guide li.task-list-item > :is(ul,ol)::before{
left:-10px;
}
/* Collapse indicator position adjustment */
.markdown-source-view.mod-cm6 .HyperMD-task-line .cm-fold-indicator .collapse-indicator{
padding-right:15px;
}
.markdown-rendered .task-list-item .list-collapse-indicator{
margin-top:5px;
margin-left:-47px;
}
/* Markdown Listings */
ul,ol{
padding:7px 0 13px;
}
/* Only append indent if it's from a list */
.cm-hmd-list-indent .cm-indent{
padding-inline:0px 11px;
}
/* Build spaces at the end of each listing to distinguish from each other (source) */
.HyperMD-list-line-1+.HyperMD-list-line:not(.HyperMD-list-line-1):not(.HyperMD-list-line-2),
.HyperMD-list-line-2+.HyperMD-list-line:not(.HyperMD-list-line-2):not(.HyperMD-list-line-3),
.HyperMD-list-line-3+.HyperMD-list-line:not(.HyperMD-list-line-3):not(.HyperMD-list-line-4),
.HyperMD-list-line-4+.HyperMD-list-line:not(.HyperMD-list-line-4):not(.HyperMD-list-line-5),
.HyperMD-list-line-5+.HyperMD-list-line:not(.HyperMD-list-line-5):not(.HyperMD-list-line-6),
.HyperMD-list-line-6+.HyperMD-list-line:not(.HyperMD-list-line-6):not(.HyperMD-list-line-7){
padding-top:11px!important;
}
/* Adjust line position to fit below bullet point (preview) */
.markdown-rendered.show-indentation-guide li > :is(ul, ol):before{
left:-12px;
}
/* Collapse indicator position adjustment */
.markdown-source-view.mod-cm6 .cm-line:not(.cm-active):not(.HyperMD-header):not(.HyperMD-task-line) .cm-fold-indicator .collapse-indicator{
padding-right:23px;
}
ol > li::marker,
ul > li::marker,
.cm-s-obsidian .cm-formatting-list{
margin-right:3px;
}
/* indent size adjustment */
.cm-hmd-list-indent .cm-indent{
padding-inline:0;
}
.markdown-preview-sizer>div>:is(ul, ol){
padding-inline:33px 7px;
}
/* reduce padding of ul/ol inside callout/blockquote */
.callout-content>:is(ul,ol){
padding-block:0;
}
blockquote>:is(ul,ol){
padding-block:7px;
}
/* Markdown Table */
/* Adds margin for easier identification */
table{
margin:11px 7px;
}
/* Adds color to the header */
thead {
border-top:2px solid var(--color-accent);
}
/* Adds padding spaces to the border */
.markdown-rendered :is(td, th){
padding:4px 13px;
}
/* Markdown Strikethrough */
/* adjust color for strikethrough + on embed */
ul > li.task-list-item.is-checked{
text-decoration-color:var(--color-strikethrough);
}
del, .cm-strikethrough,
ul > li.task-list-item.is-checked *,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:not([data-task=" "]) span {
color:var(--color-strikethrough);
}
/* Markdown Embed */
/* adjust embed padding, visual border */
.markdown-embed{
border:var(--border);
border-radius:var(--button-radius);
padding:var(--embed-padding);
}
/* revert "p" margin-top back from 0 */
.markdown-embed-content p:first-child{
margin-top:1em;
}
/* Markdown Quote */
.markdown-preview-view blockquote{
margin:13px 0px;
padding:17px 27px 17px 37px;
border-radius:var(--button-radius);
background:var(--background-secondary);
border:var(--border);
color:var(--blockquote-color);
position:relative;
}
.markdown-preview-view blockquote:before{
content:"";
position:absolute;
left:5px;
top:7px;
width:3px;
height:calc(100% - 14px);
background:var(--color-accent-1);
border-radius:var(--button-radius);
}
.markdown-source-view.mod-cm6 .HyperMD-quote.cm-line{
padding-right:17px;
padding-block:3px;
}
.markdown-source-view.mod-cm6 .HyperMD-quote.cm-line+.HyperMD-quote.cm-line{
padding-top:0;
}
/* Markdown Callout */
.callout:not(.is-collapsed){
padding-bottom:11px;
}
.callout-title{
gap:var(--size-4-3);
}
.callout-content{
position:relative;
}
.callout-content:before{
content:"";
position:absolute;
left:8px;
top:7px;
width:3px;
height:calc(100% - 14px);
background:rgba(var(--callout-color),0.3);
border-radius:var(--button-radius);
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Mado Theme Special Classes
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
/* Mado Heading */
.mado-heading .markdown-preview-section>div>*{
position:relative;
padding:13px 53px;
margin:0;
border:var(--border);
border-radius:var(--button-radius);
transition:background 0.1s;
}
.mado-heading :is(h1,h2,h3,h4,h5,h6){
background:var(--background-fourth);
}
.mado-heading :is(h1,h2,h3,h4,h5,h6):hover{
background:var(--background-fifth);
}
.mado-heading{
--h1-size: 1.6em;
--h2-size: 1.5em;
--h3-size: 1.37em;
--h4-size: 1.25em;
--h5-size: 1.12em;
--h6-size: 1.12em;
}
.mado-heading .markdown-preview-section h1{
padding-block:19px;
margin-top:73px;
}
.mado-heading .markdown-preview-section h2{
padding-block:17px;
}
.mado-heading .markdown-preview-section h3{
padding-block:15px;
}
.mado-heading .markdown-preview-section h4{
padding-block:13px;
}
/* left border to indicate collapsible action */
.mado-heading :is(h1,h2,h3,h4,h5,h6):before{
content:"";
position:absolute;
left:5px;
top:5px;
height:calc(100% - 10px);
border-radius:var(--button-radius);
border-left:3px solid var(--color-accent-1);
}
.mado-heading h1:before{
left:0;
top:0;
height:100%;
border-radius:4px 0 0 4px;
border-left:3px solid var(--color-accent-2);
}
.mado-heading h3:before{
top:7px;
height:calc(100% - 14px);
}
.mado-heading h4:before{
top:9px;
height:calc(100% - 18px);
}
.mado-heading h5:before{
top:11px;
height:calc(100% - 22px);
}
.mado-heading h6:before{
top:13px;
height:calc(100% - 26px);
}
/* expand clickable collapsible size to match parent size */
.mado-heading .heading-collapse-indicator{
margin-left:0;
width:100%;
height:100%;
padding:9px 33px;
top:0;
left:0;
position:absolute;
opacity:1;
}
.mado-heading .heading-collapse-indicator svg{
right:27px;
width:14px;
height:14px;
position:absolute;
}
.mado-heading .markdown-preview-section>div>p{
padding-block:23px;
background:var(--background-fourth);
}
.mado-heading .markdown-preview-section>div>:is(ul, ol){
padding-block:23px;
background:var(--background-fourth);
}
.mado-heading .markdown-preview-section>div>hr{
display:none;
}
.mado-heading .markdown-preview-section>div>blockquote{
padding-block:23px;
}
.mado-heading .markdown-preview-section>div>blockquote:before,
.mado-heading .markdown-preview-section>div>.callout .callout-content:before{
background:none;
}
.mado-heading .markdown-preview-section>div>.callout:not(.is-collapsed){
padding-bottom:7px;
}
.mado-heading .markdown-preview-section>div>.callout .callout-title{
margin-inline:-37px;
}
.mado-heading .markdown-preview-section>div>.callout .callout-content{
margin-inline:-37px;
padding-inline:33px;
}
.mado-heading .markdown-preview-section>div>blockquote>:is(ul,ol){
padding:0;
}
.mado-heading .markdown-preview-section>div>table{
width:calc(100% + 0px);
border-radius:var(--button-radius);
border-collapse:separate;
padding:0;
background:var(--background-secondary);
}
.mado-heading .markdown-preview-section>div>table :is(th, td){
padding:9px 11px;
text-align:center;
width:83px;
}
.mado-heading .markdown-preview-section>div>table th{
background-color:var(--background-secondary);
font-weight:600;
font-size:1em;
}
.mado-heading .markdown-preview-section>div>table td{
background:var(--background-fourth);
border:none;
}
.mado-heading .markdown-preview-section>div>table thead>tr>*:first-child{
border-radius:4px 0 0 0;
}
.mado-heading .markdown-preview-section>div>table thead>tr>*:last-child{
border-radius:0 4px 0 0;
}
.mado-heading .markdown-preview-section>div>table tbody>tr:last-child>*:first-child{
border-radius:0 0 0 4px;
}
.mado-heading .markdown-preview-section>div>table tbody>tr:last-child>*:last-child{
border-radius:0 0 4px 0;
}
/* Mado Table */
[class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table{
width:calc(100% - 0px);
margin-inline:auto;
border-radius:var(--button-radius);
border-collapse:separate;
border:var(--border);
padding:2px;
background:var(--background-secondary);
}
[class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table :is(th, td){
padding:11px 11px;
text-align:center;
min-width:83px;
}
[class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table th{
background-color:var(--background-secondary);
font-weight:600;
font-size:1em;
}
[class*="mado-table"]:not(.mado-table-normal).markdown-rendered .markdown-preview-section table td,
[class*="mado-table"]:not(.mado-table-normal).mado-table-topless .markdown-preview-section table th{
background:var(--background-fourth);
border:none;
font-weight:400;
}
[class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table thead>tr>*:first-child{
border-radius:4px 0 0 0;
}
[class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table thead>tr>*:last-child{
border-radius:0 4px 0 0;
}
[class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table tbody>tr:last-child>*:first-child{
border-radius:0 0 0 4px;
}
[class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table tbody>tr:last-child>*:last-child{
border-radius:0 0 4px 0;
}
/* Mado Table Options */
[class*="mado-table"]:not(.mado-table-normal).mado-table-left .markdown-preview-section table tr :is(th:first-child, td:first-child),
[class*="mado-table"]:not(.mado-table-normal).mado-table-right .markdown-preview-section table tr :is(th:last-child, td:last-child),
[class*="mado-table"]:not(.mado-table-normal).mado-table-top.markdown-rendered .markdown-preview-section table tr th,
[class*="mado-table"]:not(.mado-table-normal).mado-table-bottom .markdown-preview-section table tr:last-child td{
background-color:var(--background-secondary);
font-weight:600;
font-size:1em;
border:var(--border);
}
.mado-table-normal.mado-table-left .markdown-preview-section table tr :is(th:first-child, td:first-child),
.mado-table-normal.mado-table-right .markdown-preview-section table tr :is(th:last-child, td:last-child),
.mado-table-normal.mado-table-top.markdown-rendered .markdown-preview-section table tr th,
.mado-table-normal.mado-table-bottom .markdown-preview-section table tr:last-child td{
background-color:var(--background-secondary);
font-weight:600;
font-size:1em;
}
.mado-table-normal.mado-table-left .markdown-preview-section table tr :is(th:first-child, td:first-child){
border-right:1px solid var(--color-accent-1);
}
.mado-table-normal.mado-table-right .markdown-preview-section table tr :is(th:last-child, td:last-child){
border-left:1.5px solid var(--color-accent-1);
}
.mado-table-normal.mado-table-bottom .markdown-preview-section table tr:last-child td{
border-top:2px solid var(--color-accent-1);
}
/* Mado Table Stripe/Border styling, also adapting colors for headers */
[class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered .markdown-preview-section table tr:nth-child(2n) td:not(:first-child):not(:last-child),
[class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered:not(.mado-table-left) .markdown-preview-section table tr:nth-child(2n) td:first-child,
[class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered.mado-table-left .markdown-preview-section table tr:nth-child(2n+1) td:first-child,
[class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered:not(.mado-table-right) .markdown-preview-section table tr:nth-child(2n) td:last-child,
[class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered.mado-table-right .markdown-preview-section table tr:nth-child(2n+1) td:last-child,
.mado-table-normal.mado-table-stripe.markdown-rendered .markdown-preview-section table tr:nth-child(2n+1) :is(td:first-child, td:last-child),
[class*="mado-table"]:not(.mado-table-normal).mado-table-border.markdown-rendered .markdown-preview-section table :is(tr th:nth-child(2n+2), tr td:nth-child(2n+1)),
[class*="mado-table"]:not(.mado-table-normal).mado-table-border.markdown-rendered.mado-table-bottom .markdown-preview-section table tr:last-child td:nth-child(2n){
background-color:var(--background-primary);
}
.mado-table-normal.mado-table-stripe.markdown-rendered .markdown-preview-section table tr:nth-child(2n) td,
.mado-table-normal.mado-table-border.markdown-rendered .markdown-preview-section table :is(tr th:nth-child(2n+1), tr td:nth-child(2n+1)),
.mado-table-border.markdown-rendered.mado-table-bottom .markdown-preview-section table tr:last-child td:nth-child(2n+1),
[class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered.mado-table-bottom .markdown-preview-section table tr:last-child :is(td:first-child, td:last-child){
background-color:var(--background-secondary);
}
/* Mado Table Auto-Expand */
/* Remove master-parent width limit */
.mado-table-auto.is-readable-line-width>div.markdown-preview-sizer.markdown-preview-section,
.mado-table-auto.markdown-source-view.mod-cm6.is-readable-line-width :is(.cm-sizer, .cm-content){
max-width:100%;
}
/* attach width limit to all other normal divs except table */
.mado-table-auto.is-readable-line-width>div.markdown-preview-sizer.markdown-preview-section>div>*,
.mado-table-auto.markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content div:not(.cm-table-widget){
max-width:var(--file-line-width);
margin-inline:auto!important;
}
.mado-table-auto.is-readable-line-width>div.markdown-preview-sizer.markdown-preview-section>div>table,
.mado-table-auto.markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content table{
max-width:100%;
width:auto;
margin-inline:auto!important;
}
/* Mado Explorer */
/* Hide Inline Title */
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .inline-title{
display:none;
}
/* Reset font size */
.workspace-split:is(.mod-right-split, .mod-left-split) :is(.markdown-preview-view, .markdown-source-view).mado-explorer{
font-size:var(--font-text-size);
}
/* Adjust margin and padding from the note pane & the elements */
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer.markdown-preview-section{
margin:0!important;
padding:0!important;
}
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer{
padding:0px var(--size-4-3) var(--size-4-6) var(--size-4-3)!important;
}
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer p,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer ul,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer li{
margin:0;
padding:0;
}
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer ul{
padding-block:7px!important;
padding-left:13px!important;
margin-left:20px!important;
}
body.css-settings-manager:not(.toggle-explorer-indent) .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer ul{
border-left:var(--nav-indentation-guide-width) solid var(--nav-indentation-guide-color);
}
/* Explorer Button design */
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer a,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer li,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1{
padding:var(--button-padding-long);
transition:0.05s ease-in;
transition-property:background, color;
text-decoration:none;
margin:0;
position:relative;
color:var(--nav-item-color);
font-size:var(--nav-item-size);
font-weight:var(--nav-item-weight);
line-height:var(--line-height-tight);
border-radius:var(--button-radius);
cursor:var(--cursor);
margin-bottom:var(--size-2-1);
overflow:hidden;
white-space:var(--nav-item-white-space);
text-overflow:ellipsis;
width:calc(100% - 0px);
display:inline-block;
vertical-align:middle;
}
/* expand collapse icon to full size of parent to be clickable */
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1 .heading-collapse-indicator.collapse-indicator.collapse-icon{
position:absolute;
width:100%;
height:100%;
margin:0;
padding:0;
top:0;
left:0;
opacity:1;
}
body.css-settings-manager:not(.toggle-explorer-collapse) .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1{
padding-left:33px;
}
body.css-settings-manager:not(.toggle-explorer-collapse) .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .collapse-indicator svg{
position:absolute;
left:15px;
top:11px;
}
/* hide frontmatter, collapse icon, heading without value and linebreak */
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .frontmatter,
body:is(:not(.css-settings-manager),.toggle-explorer-collapse) .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .collapse-indicator svg,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .list-bullet,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer h1[data-heading=""],
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer p br{
display:none;
}
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer a:hover,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer li:hover,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1:hover{
background-color:var(--nav-item-background-hover);
color:var(--nav-item-color-hover);
font-weight:var(--nav-item-weight-hover);
}
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer li>a:hover{
background:none;
}
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1,
.workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1:hover{
color:var(--color-accent-2);
font-size:0.95em;
font-weight:500;
}
/* Mado Daily */
.mado-daily table td{
font-size:2rem;
position:relative;
}
.mado-daily table td:not(:empty):not(:nth-child(3)):not(:nth-child(7)){
background:var(--background-primary);
}
.mado-daily table thead{
display:none;
}
/* show checkmark when previous days are filled(no longer empty), */
/* using "~" instead of "+" decrease the complexity, though it also decrease credibility(?) as checkmark will appear if the previous day is filled */
.mado-daily table td:first-child:not(:empty)~td:not(:empty)+td:nth-child(3),
.mado-daily table td:first-child:not(:empty)~td:not(:empty)+td:nth-child(7){
background:var(--background-secondary);
position:relative;
overflow:hidden;
z-index:10;
}
.mado-daily table td:nth-child(3):before,
.mado-daily table td:nth-child(7):before{
position:absolute;
left:50%;
top:50%;
content:"";
width:100%;
height:100%;
transform:translate(-50%, -50%);
z-index:-1;
opacity:0.3;
background-color:MediumSeaGreen;
-webkit-mask-size:83%;
-webkit-mask-position:53%;
-webkit-mask-repeat:no-repeat;
-webkit-mask-image:url('data:image/svg+xml; utf8, ');
}
/* Mado Timeline */
.mado-timeline .markdown-preview-sizer>div{
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
.mado-timeline .markdown-preview-sizer>div>ul{
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin-bottom:0;
padding-bottom:13px;
}
.mado-timeline .markdown-preview-sizer>div>:is(blockquote,.callout, pre, table){
margin-top:23px;
}
.mado-timeline .markdown-preview-sizer>div>hr{
width:70%;
margin-top:53px;
}
.mado-timeline .markdown-preview-sizer>div>:is(pre,table){
text-align:left;
}
.mado-timeline .markdown-preview-sizer>div>.callout .callout-title{
justify-content:center;
}
.mado-timeline .markdown-preview-sizer>div>.callout .callout-title .callout-fold{
padding-right:0;
}
.mado-timeline .markdown-preview-sizer>div>.callout .callout-content{
padding:7px 0;
}
.mado-timeline .markdown-preview-sizer>div>.callout .callout-content:before{
display:none;
}
.mado-timeline .markdown-preview-sizer>div>h1{
font-size:2rem;
margin-block:133px 11px;
}
.mado-timeline .markdown-preview-sizer>div>h2{
font-size:1.7rem;
margin-block:33px -13px;
position:relative;
padding-top:13px;
}
.mado-timeline .markdown-preview-sizer>div>h2:before{
content:"";
width:2px;
height:45px;
border-radius:100%;
background:var(--text-faint);
opacity:0.7;
position:absolute;
top:-38px;
left:47%;
}
.mado-timeline .markdown-preview-sizer>div.is-collapsed>h2{
margin-bottom:13px;
}
/* Mado Panel */
/* Mado Panel Flexible(default) & Mado Panel Callout */
div.callout[data-callout*="mado-panel"]{
background-color:initial;
mix-blend-mode:normal;
padding:0;
}
div.callout[data-callout*="mado-panel"] .callout-content{
padding:0;
overflow-x:initial;
}
/* hide original callout design */
div.callout[data-callout*="mado-panel"] :is(.callout-title, .list-bullet),
div.callout[data-callout*="mado-panel"] .callout-content:before{
display:none;
}
[class*="mado-panel"] .markdown-preview-sizer>div ul,
div.callout[data-callout*="mado-panel"] ul{
display:flex;
flex-wrap:wrap;
width:100%;
gap:13px;
transition:height 0.2s, opacity 0.2s;
padding-inline:23px;
padding-block:7px;
}
[class*="mado-panel"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel"] ul li{
display:flex;
align-items:center;
justify-content:center;
padding-block:13px;
padding-inline:23px;
background:var(--background-fourth);
border:var(--border);
border-radius:var(--panel-radius);
box-shadow:var(--panel-shadow);
transition:0.1s background, 0.1s box-shadow, transform 0.1s;
text-align:center;
width:auto;
/* min-width:calc(100% / 4 - 10px); */
flex:auto;
height:70px;
overflow:hidden;
}
[class*="mado-panel"] .markdown-preview-sizer>div ul li .list-bullet{
display:none;
}
[class*="mado-panel"] .markdown-preview-sizer>div ul li:hover,
div.callout[data-callout*="mado-panel"] ul li:hover{
background:var(--background-fifth);
transform:translateY(-3px);
box-shadow:var(--panel-shadow-hover);
}
[class*="mado-panel"] .markdown-preview-sizer>div ul a:not(:hover),
div.callout[data-callout*="mado-panel"] ul a:not(:hover){
text-decoration:none;
}
/* adapt "a" link to whole panel so to be clickable */
[class*="mado-panel-link"] .markdown-preview-sizer>div ul a:not(.tag),
div.callout[data-callout*="mado-panel"][data-callout*="-link"] ul a:not(.tag){
display:flex;
align-items:center;
justify-content:center;
height:calc(100% + 26px);
width:calc(100% + 46px);
padding-block:13px;
padding-inline:23px;
margin-block:-13px;
margin-inline:-23px;
}
[class*="mado-panel"] .markdown-preview-sizer>div li.task-list-item,
div.callout[data-callout*="mado-panel"] ul li.task-list-item{
position:relative;
}
[class*="mado-panel"] .markdown-preview-sizer>div li.task-list-item>input,
div.callout[data-callout*="mado-panel"] ul li.task-list-item>input{
padding:11px;
position:absolute;
right:0;
top:0;
left:unset;
margin:7px;
border:var(--border);
border-radius:var(--button-radius);
}
[class*="mado-panel"] .markdown-preview-sizer>div li.task-list-item.is-checked,
div.callout[data-callout*="mado-panel"] ul li.task-list-item.is-checked{
background:var(--background-secondary);
}
[class*="mado-panel"] .contains-task-list.has-list-bullet li,
div.callout[data-callout*="mado-panel"] .contains-task-list.has-list-bullet li{
margin-block:0;
}
/* Mado Panel List & Mado Panel Callout List*/
[class*="mado-panel-list"] .markdown-preview-sizer>div ul,
div.callout[data-callout*="mado-panel-list"] ul{
gap:7px;
}
[class*="mado-panel-list"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-list"] ul li{
display:inline-block;
padding-block:8px;
height:unset;
text-align:left;
width:100%;
overflow:visible;
}
[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;
}
[class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item,
div.callout[data-callout*="mado-panel-list"] li.task-list-item{
padding-inline:43px 23px;
}
[class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item>input,
div.callout[data-callout*="mado-panel-list"] li.task-list-item>input{
padding:12px;
left:0;
}
[class*="mado-panel-list"] .markdown-preview-sizer>div li:hover>.list-collapse-indicator,
div.callout[data-callout*="mado-panel-list"] li:hover>.list-collapse-indicator{
opacity:1;
}
/* the very first list */
[class*="mado-panel-list"] .markdown-preview-sizer>div>ul>li>.list-collapse-indicator,
div.callout[data-callout*="mado-panel-list"] .callout-content>ul>li>.list-collapse-indicator{
margin-left:-57px;
}
/* all normal list */
[class*="mado-panel-list"] .markdown-preview-sizer>div li>.list-collapse-indicator,
div.callout[data-callout*="mado-panel-list"] li>.list-collapse-indicator{
margin-left:-49px;
}
/* all task lisk */
[class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item>.list-collapse-indicator,
div.callout[data-callout*="mado-panel-list"] li.task-list-item>.list-collapse-indicator{
margin-left:-77px;
margin-top:0;
}
/* normal list inside a task list */
[class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item li:not(.task-list-item)>.list-collapse-indicator,
div.callout[data-callout*="mado-panel-list"] li.task-list-item li:not(.task-list-item)>.list-collapse-indicator{
margin-left:-57px;
}
/* task list inside a normal list */
[class*="mado-panel-list"] .markdown-preview-sizer>div li:not(.task-list-item)>ul>li.task-list-item>.list-collapse-indicator,
div.callout[data-callout*="mado-panel-list"] li:not(.task-list-item)>ul>li.task-list-item>.list-collapse-indicator{
margin-left:-69px;
}
[class*="mado-panel-list"] .markdown-preview-sizer>div li :is(ul,ol),
div.callout[data-callout*="mado-panel-list"] li :is(ul,ol){
padding-inline:0;
}
[class*="mado-panel-list"] .markdown-preview-sizer>div li.is-collapsed>:is(ul,ol),
[class*="mado-panel-list"] .markdown-preview-sizer>div li :is(ul,ol):before,
div.callout[data-callout*="mado-panel-list"] li.is-collapsed>:is(ul,ol),
div.callout[data-callout*="mado-panel-list"] li :is(ul,ol):before{
display:none;
}
/* Mado Panel Sizing */
/* small = short & short */
/* medium = taller & longer */
/* large = tallest & longest */
/* short = short & longer */
/* long = short & longest */
[class*="mado-panel-small"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-small"]>.callout-content>ul>li{
width:calc(100% / 4 - 10px);
max-width:200px;
height:70px;
}
[class*="mado-panel-medium"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-medium"]>.callout-content>ul>li{
width:calc(100% / 3 - 9px);
max-width:250px;
height:110px;
}
[class*="mado-panel-large"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-large"]>.callout-content>ul>li{
width:calc(100% / 2 - 7px);
max-width:300px;
height:130px;
}
[class*="mado-panel-short"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-short"]>.callout-content>ul>li{
width:calc(100% / 3 - 9px);
max-width:250px;
}
[class*="mado-panel-long"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-long"]>.callout-content>ul>li{
width:calc(100% / 2 - 7px);
max-width:300px;
}
[class*="mado-panel-auto"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel"][data-callout*="-auto"]>.callout-content>ul>li{
max-width:unset;
}
[class*="mado-panel-auto"][class*="mado-panel-small"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-small"][data-callout*="-auto"]>.callout-content>ul>li{
min-width:calc(100% / 4 - 10px);
}
[class*="mado-panel-auto"][class*="mado-panel-medium"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-medium"][data-callout*="-auto"]>.callout-content>ul>li{
min-width:calc(100% / 3 - 9px);
}
[class*="mado-panel-auto"][class*="mado-panel-large"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-large"][data-callout*="-auto"]>.callout-content>ul>li{
min-width:calc(100% / 2 - 7px);
}
[class*="mado-panel-auto"][class*="mado-panel-short"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-short"][data-callout*="-auto"]>.callout-content>ul>li{
min-width:calc(100% / 3 - 9px);
}
[class*="mado-panel-auto"][class*="mado-panel-long"] .markdown-preview-sizer>div ul li,
div.callout[data-callout*="mado-panel-long"][data-callout*="-auto"]>.callout-content>ul>li{
min-width:calc(100% / 2 - 7px);
}
/* Mado Panel Callout Task Feature */
div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li{
width:calc(100% / 2 - 7px);
height:130px;
display:none;
}
div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li:nth-child(1),
div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li:nth-child(2){
display:flex;
}
/* When two main tasks above are completed, show the rest of the tasks */
div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li.is-checked:nth-child(1)+li.is-checked:nth-child(2)~li{
width:calc(100% / 4 - 10px);
height:70px;
display:flex;
}
/*
--------------------------- ---------------------------
--------------------------- ---------------------------
Plugin Supports
--------------------------- ---------------------------
--------------------------- ---------------------------
*/
/* Banner Plugin */
img.banner-image{
border-radius:0;
}
/* Kanban Plugin */
.kanban-plugin{
background:var(--background-primary);
}
.kanban-plugin .markdown-preview-view{
padding-inline:3px;
}
/* icon and button styling */
.kanban-plugin__item :is(button.kanban-plugin__item-prefix-button, button.kanban-plugin__item-postfix-button),
.kanban-plugin__lane button.kanban-plugin__lane-settings-button{
-webkit-app-region: no-drag;
display: flex;
align-items: center;
justify-content: center;
padding: var(--button-padding-icon);
cursor: var(--cursor);
border-radius: var(--clickable-icon-radius);
color: var(--icon-color);
opacity: var(--icon-opacity);
transition: opacity 0.15s ease-in-out;
height: auto;
box-shadow:none;
}
.kanban-plugin__item :is(button.kanban-plugin__item-prefix-button, button.kanban-plugin__item-postfix-button):hover,
.kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover{
opacity: var(--icon-opacity-hover);
color: var(--icon-color-hover);
background-color: var(--background-modifier-hover);
}
div.kanban-plugin__lane-title-count{
padding: var(--button-padding-icon);
width:33px;
height:27px;
text-align:center;
}
.kanban-plugin__item-metadata-wrapper:not(:empty){
background:var(--background-primary);
}
/* checkbox completed styling */
.kanban-plugin__item.is-complete :is(.markdown-preview-view>div *, .kanban-plugin__item-metadata-wrapper:not(:empty) *){
text-decoration:line-through;
text-decoration-color:var(--color-strikethrough);
color:var(--color-strikethrough);
}
.kanban-plugin__item.is-complete img{
opacity:0.3;
}
/* Style Setting Styling */
.style-settings-container{
border:var(--border);
border-radius:var(--panel-radius);
padding:17px 27px;
}
/* Remove border-bottom, replace it with border-top */
.setting-item.setting-item-heading.style-settings-heading{
border-bottom:none;
border-top:1px solid var(--background-modifier-border);
}
/* Remove margin-bottom when collapsed*/
.setting-item.setting-item-heading.style-settings-heading:not(.is-collapsed){
margin-bottom:0;
}
/* Remove border-top if header is first-child, and header if previous header is collapsed */
.setting-item.setting-item-heading.style-settings-heading:not(.is-collapsed)+.style-settings-container+.setting-item.setting-item-heading.style-settings-heading,
.setting-item.setting-item-heading.style-settings-heading:first-child{
border-top:none;
}
.style-settings-container{
padding-block:13px;
}
.style-settings-heading{
padding-block:13px 0;
}
.style-settings-container{
margin-block:13px;
box-shadow:var(--panel-shadow);
}
.style-settings-heading .setting-item:last-child{
padding-bottom:0;
}
.style-settings-heading .setting-item+.setting-item-heading{
margin-top:0;
}
.style-settings-collapse-indicator{
color:var(--text-normal);
}
.style-settings-heading+.style-settings-container+.style-settings-heading{
margin-top:13px;
}
/* remove weird margin top */
.themed-color-wrapper>div,
.themed-color-wrapper>div+div{
margin-top:0;
padding:0 0 0 7px;
border:var(--border);
background:var(--color-base-00); /* For some reason it's not working originally */
}
.themed-color-wrapper{
display:flex;
align-items:center;
flex-direction:row;
gap:7px;
}
/* Button here has no .clickable-icon, so applying the originals into it */
.pickr-reset button{
-webkit-app-region: no-drag;
display: flex;
align-items: center;
justify-content: center;
padding: var(--button-padding-icon);
cursor: var(--cursor);
border-radius: var(--clickable-icon-radius);
color: var(--icon-color);
opacity: var(--icon-opacity);
transition: opacity 0.15s ease-in-out;
height: auto;
box-shadow:none;
background:none;
}
.pickr-reset button:hover{
opacity: var(--icon-opacity-hover);
color: var(--icon-color-hover);
background-color: var(--background-modifier-hover);
}
/* For some reason it's not working originally, so manually change the hover color */
.themed-color-wrapper>div.theme-light .pickr-reset button:hover{
background-color:var(--color-base-shadow-hover);
}
.themed-color-wrapper>div.theme-dark .pickr-reset button:hover{
background-color:var(--color-base-05);
}
/* turn into One row instead of multi rows */
.view-content .style-settings-container .setting-item:not(.setting-item-heading){
flex-direction:row;
align-items:center;
}
.view-content .style-settings-container .setting-item:not(.setting-item-heading) .setting-item-control{
padding-top:0;
}
/* Custom intro section styling */
.setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]{
cursor:default;
}
.setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]:not(.is-collapsed){
padding-bottom:13px;
}
.setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]:not(.is-collapsed)+.style-settings-container+.style-settings-heading{
margin-top:0;
}
.setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]+.style-settings-container{
padding:0;
border-bottom:0;
margin-block:0;
}
.setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"] :is(.style-settings-collapse-indicator, .setting-item-control){
display:none
}
.setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"] .setting-item-description{
user-select:text;
cursor:text;
font-size:14px;
}
/* @settings
name: Mado Miniflow
id: mado-miniflow
settings:
-
id: intro-section
title: Introduction
description: "The setting here covers only the very basic to avoid complexity fatigue. That being said, feel free to suggest anything by submitting a Github issue on: https://github.com/hydescarf/Obsidian-Theme-Mado-Miniflow"
type: heading
collapsed: true
level: 3
-
id: theme-section
title: Theme Section
type: heading
collapsed: true
level: 3
-
id: theme-color
title: Theme Color
type: class-select
allowEmpty: false
default: theme-violette
options:
-
label: Daisy Blue
value: theme-daisy-blue
-
label: Red Sky
value: theme-red-sky
-
label: Violette
value: theme-violette
-
label: Greenery
value: theme-greenery
-
label: Yellowish
value: theme-yellowish
-
label: Orange Jist
value: theme-orange-jist
-
label: Deep Blue
value: theme-deep-blue
-
label: Tea Teal
value: theme-tea-teal
-
label: Magenta Pink
value: theme-magenta-pink
-
label: Grayscale
value: theme-grayscale
-
id: accent
title: Accent Color
type: variable-themed-color
opacity: false
format: hsl-split
default-light: '#'
default-dark: '#'
-
id: toggle-wave-background
title: Hide Background Wave Design
type: class-toggle
default: false
-
id: toggle-tab-design
title: Enable Alternative Tab Design
type: class-toggle
default: false
-
id: toggle-note-radius
title: Enable All-Rounded Corner Note Pane
type: class-toggle
default: false
-
id: toggle-note-animation
title: Enable sliding animation on main pane
description: Animation is noticable when you switch to a new tab
type: class-toggle
default: true
-
id: layout-section
title: Layout Section
type: heading
collapsed: true
level: 3
-
id: toggle-tab-height
title: Enable Compact Tab Header
type: class-toggle
default: false
-
id: toggle-scrollbar-overlay
title: Enable Overlay Scrollbar
type: class-toggle
description: Overlay will provide you wider field of contents, but in return, scrollbar will have to overlap onto it.
default: true
-
id: hiding-section
title: Hiding Elements
type: heading
description: Hide/Unhide the surrounding elements. Most can be hovered to reveal them.
level: 4
collapsed: true
-
id: toggle-titlebar-buttons
title: Hide Window Titlebar Buttons
type: class-toggle
default: true
-
id: toggle-side-ribbons
title: Hide Sidedock Ribbons
type: class-toggle
default: true
-
id: toggle-sidebar-toggle-left
title: Hide Sidebar Toggle Button (Left)
type: class-toggle
default: true
-
id: toggle-sidebar-toggle-right
title: Hide Sidebar Toggle Button (Right)
type: class-toggle
default: true
-
id: toggle-sidebar-buttons
title: Hide Sidebar Tab Buttons
type: class-toggle
default: true
-
id: toggle-explorer-buttons
title: Hide File Explorer Buttons
type: class-toggle
default: true
-
id: toggle-vault-title
title: Hide File Explorer Vault Title (Unhoverable)
type: class-toggle
default: true
-
id: toggle-explorer-indent
title: Hide File Explorer Indentation Guide (Unhoverable)
type: class-toggle
default: true
-
id: toggle-explorer-collapse
title: Hide File Explorer Collapse Indicator (Unhoverable)
type: class-toggle
default: true
-
id: toggle-tab-section
title: Hide Note Tab Section
type: class-toggle
default: false
-
id: toggle-note-header
title: Hide Note Title Bar
type: class-toggle
default: false
-
id: toggle-status-bar
title: Hide Status Bar (Unhoverable)
type: class-toggle
default: true
-
id: toggle-sync-button
title: Show Sync Button Independently
type: class-toggle
description: Available when Status Bar is hidden.
default: false
-
id: toggle-scrollbar
title: Hide Scrollbar
type: class-toggle
default: true
-
id: sidebar-section
title: Sidebar Section
type: heading
description: With a fixed width, the contents of sidebar will pull towards to the middle whenever you resize. This gives you a better focus at the center of a bigger screen.
collapsed: true
level: 4
-
id: toggle-sidebar-fixed-left
title: Fixed Width (Left)
type: class-toggle
default: true
-
id: toggle-sidebar-fixed-right
title: Fixed Width (Right)
type: class-toggle
default: true
-
id: sidebar-size-left
title: Width size if fixed (Left)
type: variable-number-slider
default: 270
format: px
min: 200
max: 1000
step: 10
-
id: sidebar-size-right
title: Width size if fixed (Right)
type: variable-number-slider
default: 270
format: px
min: 200
max: 1000
step: 10
-
id: toggle-sidebar-left-top
title: Additional space on top of left sidebar
type: class-toggle
default: false
-
id: toggle-sidebar-right-top
title: Additional space on top of right sidebar
type: class-toggle
default: true
-
id: markdown-section
title: Markdown Section
type: heading
collapsed: true
level: 3
-
id: file-line-width
title: Readable Line Length
type: variable-number-slider
default: 700
format: px
min: 400
max: 1200
step: 10
-
id: text-normal
title: Text Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: text-muted
title: Muted Text Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: text-faint
title: Faint Text Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: typography-section
title: Typography Section
type: heading
collapsed: true
level: 4
-
id: bold-color
title: Bold Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: bold-weight
title: Bold Weight
type: variable-number-slider
default: 700
min: 100
max: 1000
step: 100
-
id: italic-color
title: Italic Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: toggle-highlight-type
title: Highlight Type
type: class-select
allowEmpty: false
default: THT-underline-dark
options:
-
label: Background-filled
value: THT-background
-
label: Underlined
value: THT-underline
-
label: Underlined (Light-mode only)
value: THT-underline-light
-
label: Underlined (Dark-mode only)
value: THT-underline-dark
-
id: color-highlight
title: Highlight Color (Text)
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: text-highlight-bg
title: Highlight Color (Background/Underline)
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: color-strikethrough
title: Strikethrough Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: inline-code-color
title: Inline Code Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: list-marker-color
title: Listing Bullet/Marker Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: heading-section
title: Heading Section
description: "Not applicable to cssclass: mado-heading."
type: heading
collapsed: true
level: 4
-
-
id: toggle-h1-margin-top
title: Enable H1 Spacious Separator
description: When an H1 is uncollapsed, it will create a big wide space below to distinguish from the next H1. Downside, however, is the first H1 will always have the wide space above it.
type: class-toggle
default: true
-
id: h1-size
title: H1 Size
type: variable-number
format: em
default: 2
-
id: h2-size
title: H2 Size
type: variable-number
format: em
default: 1.6
-
id: h3-size
title: H3 Size
type: variable-number
format: em
default: 1.37
-
id: h4-size
title: H4 Size
type: variable-number
format: em
default: 1.25
-
id: h5-size
title: H5 Size
type: variable-number
format: em
default: 1.12
-
id: h6-size
title: H6 Size
type: variable-number
format: em
default: 1.12
-
id: h1-color
title: H1 Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: h2-color
title: H2 Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: h3-color
title: H3 Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: h4-color
title: H4 Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: h5-color
title: H5 Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: h6-color
title: H6 Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
-
id: h6-color
title: H6 Color
type: variable-themed-color
format: hsl
default-light: '#'
default-dark: '#'
*/