1317 lines
28 KiB
CSS
1317 lines
28 KiB
CSS
/*#region Variables */
|
|
body
|
|
{
|
|
--color-fade-speed: 0.2s;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Tree */
|
|
|
|
/* Base tree */
|
|
|
|
.tree-container
|
|
{
|
|
position: relative;
|
|
height: 100%;
|
|
width: auto;
|
|
margin-top: 3em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tree-container .tree-header
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: -3em;
|
|
}
|
|
|
|
.tree-container .tree-header .sidebar-section-header
|
|
{
|
|
margin-block: 1em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tree-container:has(.tree-scroll-area:empty)
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
body .webpage-container .tree-container .tree-scroll-area
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
border-radius: 0;
|
|
position: absolute;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tree-container .tree-item
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 0;
|
|
padding-block: 1px;
|
|
overflow: hidden !important;
|
|
flex: none;
|
|
}
|
|
|
|
.tree-container .tree-item-children
|
|
{
|
|
padding: 0;
|
|
margin: 0;
|
|
border-left: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.tree-item-title > *
|
|
{
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
display: inline;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tree-container .tree-item-icon *
|
|
{
|
|
color: var(--text-muted);
|
|
font-family: emoji;
|
|
}
|
|
|
|
.tree-container .tree-item-icon :is(svg,img)
|
|
{
|
|
-webkit-mask-image-repeat: no-repeat;
|
|
-webkit-mask-image-position: center;
|
|
max-width: 1.3em;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Skip outer wrappers around icons */
|
|
.tree-container .tree-item-icon *:has(svg)
|
|
{
|
|
display: contents !important;
|
|
}
|
|
|
|
.tree-container .tree-item-icon
|
|
{
|
|
min-width: 1.6em;
|
|
max-width: 1.6em;
|
|
margin-left: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.tree-container .tree-item.mod-active > .tree-link > .tree-item-contents
|
|
{
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.tree-container .tree-link {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
border-radius: var(--radius-s);
|
|
color: var(--nav-item-color);
|
|
text-decoration-line: none;
|
|
|
|
width: -webkit-fill-available;
|
|
width: -moz-available;
|
|
width: fill-available;
|
|
|
|
margin-left: var(--tree-horizontal-spacing);
|
|
}
|
|
|
|
.tree-container .tree-link:active
|
|
{
|
|
color: var(--nav-item-color-active);
|
|
}
|
|
|
|
.tree-container .tree-item-contents
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
font-size: unset !important;
|
|
padding-left: calc(var(--tree-horizontal-spacing) * 2 + var(--collapse-arrow-size)) !important;
|
|
border-radius: var(--radius-s);
|
|
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
|
|
color: var(--nav-item-color);
|
|
transition: background-color .1s;
|
|
}
|
|
|
|
.tree-container .tree-item-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis !important;
|
|
text-wrap: nowrap !important;
|
|
white-space: nowrap !important;
|
|
position: relative !important;
|
|
border: none !important;
|
|
|
|
width: 100%;
|
|
width: -webkit-fill-available;
|
|
width: -moz-available;
|
|
width: fill-available;
|
|
|
|
background-color: transparent !important;
|
|
padding-top: calc(var(--tree-vertical-spacing)/ 2) !important;
|
|
padding-bottom: calc(var(--tree-vertical-spacing)/ 2) !important;
|
|
margin: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
top: 0 !important;
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
.tree-container .tree-item-title::after
|
|
{
|
|
right: 0;
|
|
position: absolute !important;
|
|
margin-right: 0.5em !important;
|
|
}
|
|
|
|
/* Find tree contents in folders with no other folders in them */
|
|
.tree-container .mod-tree-folder:not(:has(.mod-tree-folder)) .mod-tree-file > .tree-link > .tree-item-contents
|
|
{
|
|
padding-left: calc(var(--tree-horizontal-spacing) * 2) !important;
|
|
}
|
|
|
|
.tree-container .collapse-icon {
|
|
translate: calc(0px - var(--collapse-arrow-size) - var(--tree-horizontal-spacing) * 2) 0;
|
|
position: absolute;
|
|
height: 100%;
|
|
padding: var(--tree-horizontal-spacing);
|
|
}
|
|
|
|
.tree-container .tree-item.mod-tree-folder > .tree-link > .collapse-icon
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.collapse-icon:hover
|
|
{
|
|
color: var(--nav-item-color-hover);
|
|
}
|
|
|
|
.tree-container .clickable-icon
|
|
{
|
|
width: 3.2em;
|
|
height: 2.2em;
|
|
}
|
|
|
|
.tree-container .tree-item.is-collapsed > .tree-link > .tree-item-contents > .collapse-icon > svg
|
|
{
|
|
transition: transform 0.1s ease-in-out;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.tree-container .tree-item-contents:hover
|
|
{
|
|
color: var(--nav-item-color-hover);
|
|
}
|
|
|
|
.filtered-out
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
/* Indentation guide */
|
|
|
|
.tree-container > .tree-scroll-area > * .tree-item
|
|
{
|
|
margin-left: calc(var(--tree-horizontal-spacing) * 2 + var(--collapse-arrow-size)/2);
|
|
|
|
}
|
|
.tree-container > .tree-scroll-area > * .tree-item
|
|
{
|
|
border-left: var(--nav-indentation-guide-width) solid var(--nav-indentation-guide-color);
|
|
}
|
|
|
|
.tree-container .tree-scroll-area > * > * > .tree-item
|
|
{
|
|
margin-left: calc(var(--tree-horizontal-spacing) + var(--collapse-arrow-size)/2);
|
|
}
|
|
|
|
.tree-container:not(.mod-nav-indicator) .tree-scroll-area .tree-item
|
|
{
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.tree-container .tree-item.mod-active
|
|
{
|
|
border-color: var(--interactive-accent) !important;
|
|
box-shadow: 2px 0px 0px 0px var(--interactive-accent) inset;
|
|
transition: box-shadow 0.4s ease-in-out;
|
|
}
|
|
|
|
|
|
.tree-container .tree-item:hover:not(.mod-active):not(.mod-collapsible):not(:has(.tree-item:hover)):not(.mod-root > * > *) /* Hover */
|
|
{
|
|
border-left: var(--nav-indentation-guide-width) solid var(--nav-item-color-hover);
|
|
}
|
|
|
|
.tree-container .tree-link:hover, .tree-container .mod-active > .tree-link
|
|
{
|
|
background-color: var(--nav-item-background-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.webpage-container .tree-container .tree-item:not(.mod-collapsible) > .tree-item-children > .tree-item > .tree-link,
|
|
.webpage-container .tree-container > .tree-scroll-area > .tree-item > .tree-link
|
|
{
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Special */
|
|
|
|
.tree-container.outline-tree .tree-item[data-depth='1'] > .tree-link > .tree-item-contents
|
|
{
|
|
font-weight: 900;
|
|
font-size: 1.1em;
|
|
margin-left: 0;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.nav-folder.mod-root .nav-folder>.nav-folder-children
|
|
{
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.nav-file
|
|
{
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.nav-folder.mod-root .nav-folder > .nav-folder-children
|
|
{
|
|
border-radius: var(--radius-s) !important;;
|
|
}
|
|
|
|
.webpage-container .nav-file-tag
|
|
{
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.nav-file-title-content, .nav-folder-title-content
|
|
{
|
|
margin-bottom: unset !important;
|
|
display: unset !important;
|
|
border-radius: unset !important;
|
|
cursor: unset !important;
|
|
font-size: unset !important;
|
|
font-weight: unset !important;
|
|
line-height: unset !important;
|
|
padding: unset !important;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Headers */
|
|
|
|
#webpage-icon :is(svg, img)
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
#webpage-icon *:has(:is(svg, img))
|
|
{
|
|
display: contents !important;
|
|
}
|
|
|
|
#webpage-icon:has(:is(svg, img))
|
|
{
|
|
font-size: 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
#webpage-icon {
|
|
font-size: 40px;
|
|
margin-bottom: 8px;
|
|
font-family: emoji;
|
|
width: fit-content;
|
|
}
|
|
|
|
body.show-inline-title .page-title
|
|
{
|
|
font-weight: var(--inline-title-weight);
|
|
font-size: var(--inline-title-size);
|
|
font-style: var(--inline-title-style);
|
|
font-variant: var(--inline-title-variant);
|
|
font-family: var(--inline-title-font);
|
|
letter-spacing: -0.015em;
|
|
color: var(--inline-title-color);
|
|
}
|
|
|
|
.heading
|
|
{
|
|
position: relative;
|
|
}
|
|
|
|
.heading-wrapper.is-collapsed > .heading::after
|
|
{
|
|
content: "..." !important;
|
|
display: inline-block !important;
|
|
position: absolute !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
margin-left: 0.3em !important;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.heading-wrapper
|
|
{
|
|
transition: height ease-in-out, margin-bottom ease-in-out;
|
|
transition-duration: 0.2s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
/* high specificity in order to override other style */
|
|
html > body > .webpage-container > .document-container > .markdown-preview-view > .markdown-preview-sizer > div
|
|
{
|
|
margin-inline: 0 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.markdown-rendered .heading-wrapper:has(> .heading-children > div:last-child > :is(p,pre,table,ul,ol)) + .heading-wrapper > .heading:first-child
|
|
{
|
|
margin-top: var(--heading-spacing);
|
|
}
|
|
|
|
.heading-children
|
|
{
|
|
transition: height ease-in-out, margin-bottom ease-in-out;
|
|
transition-duration: 0.2s;
|
|
display: flow;
|
|
position: relative;
|
|
contain: inline-size;
|
|
}
|
|
|
|
.heading-children.is-collapsed
|
|
{
|
|
padding-top: 0em;
|
|
}
|
|
|
|
.heading-wrapper.is-collapsed > .heading-children, .heading-wrapper.is-animating > .heading-children
|
|
{
|
|
overflow: hidden; overflow: clip;
|
|
}
|
|
|
|
.heading-wrapper > .heading > .heading-after
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.heading-wrapper.is-collapsed > .heading > .heading-after
|
|
{
|
|
display: inline-block;
|
|
margin-left: 0.3em;
|
|
opacity: 0.4;
|
|
font-size: 1em;
|
|
cursor: auto;
|
|
user-select: none;
|
|
}
|
|
|
|
.heading-wrapper.is-hidden > *
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.heading-wrapper.is-hidden
|
|
{
|
|
visibility: hidden;
|
|
}
|
|
|
|
.collapse-icon:not(.list-collapse-indicator) svg.svg-icon {
|
|
color: var(--nav-collapse-icon-color);
|
|
width: var(--collapse-arrow-size);
|
|
height: var(--collapse-arrow-size);
|
|
transition: transform 100ms ease-in-out 0s;
|
|
stroke-width: 4px;
|
|
min-width: 10px;
|
|
min-height: 10px;
|
|
}
|
|
|
|
div.is-collapsed > * > .heading-collapse-indicator.collapse-icon > svg
|
|
{
|
|
transition: transform 0.1s ease-in-out;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.heading-wrapper .heading-collapse-indicator
|
|
{
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease-in-out;
|
|
position: absolute;
|
|
z-index: 1;
|
|
padding: 0 !important;
|
|
padding-left: 40px !important;
|
|
padding-right: 40px !important;
|
|
left: -40px !important;
|
|
}
|
|
|
|
.heading:hover > .heading-collapse-indicator,
|
|
.heading-wrapper .heading-collapse-indicator:hover
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
.heading-wrapper-span
|
|
{
|
|
position: absolute;
|
|
width: 200vw;
|
|
height: calc(100% + var(--p-spacing) * 2);
|
|
top: calc(0px - var(--p-spacing));
|
|
left: -100vw;
|
|
z-index: -1;
|
|
}
|
|
|
|
.markdown-embed .markdown-embed-content .markdown-preview-view .heading-wrapper-span
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Theme Toggle */
|
|
|
|
.theme-toggle-container {
|
|
--toggle-width: 3.5em;
|
|
--toggle-height: 1.75em;
|
|
--border-radius: calc(var(--toggle-height) / 2);
|
|
--handle-width: calc(var(--toggle-height) * 0.65);
|
|
--handle-radius: calc(var(--handle-width) / 2);
|
|
--handle-margin: calc((var(--toggle-height) / 2.0) - var(--handle-radius));
|
|
--handle-translation: calc(var(--toggle-width) - var(--handle-width) - (var(--handle-margin) * 2));
|
|
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-section-header, .clickable-icon
|
|
{
|
|
transition: color var(--color-fade-speed) ease-in-out;
|
|
}
|
|
|
|
/* animation to expand width, move handle, then contract width */
|
|
@keyframes toggle-slide-right
|
|
{
|
|
0%
|
|
{
|
|
width: var(--handle-width);
|
|
transform: translateX(0);
|
|
}
|
|
50%
|
|
{
|
|
width: calc(var(--toggle-width) * 0.5);
|
|
}
|
|
90%
|
|
{
|
|
width: var(--handle-width);
|
|
}
|
|
100%
|
|
{
|
|
transform: translateX(var(--handle-translation));
|
|
}
|
|
}
|
|
|
|
@keyframes toggle-slide-left
|
|
{
|
|
0%
|
|
{
|
|
width: var(--handle-width);
|
|
transform: translateX(calc(var(--handle-translation) - ((var(--toggle-width) * 0.33) - var(--handle-width))));
|
|
}
|
|
70%
|
|
{
|
|
width: calc(var(--toggle-width) * 0.5);
|
|
}
|
|
100%
|
|
{
|
|
width: var(--handle-width);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* just exapnd and contract */
|
|
@keyframes toggle-expand-right
|
|
{
|
|
0%
|
|
{
|
|
width: var(--handle-width);
|
|
}
|
|
100%
|
|
{
|
|
width: calc(var(--toggle-width) * 0.33);
|
|
}
|
|
}
|
|
|
|
@keyframes toggle-expand-left
|
|
{
|
|
0%
|
|
{
|
|
width: var(--handle-width);
|
|
transform: translateX(var(--handle-translation));
|
|
}
|
|
100%
|
|
{
|
|
width: calc(var(--toggle-width) * 0.33);
|
|
transform: translateX(calc(var(--handle-translation) - ((var(--toggle-width) * 0.33) - var(--handle-width))));
|
|
}
|
|
}
|
|
|
|
@keyframes toggle-contract
|
|
{
|
|
0%
|
|
{
|
|
width: calc(var(--toggle-width) * 0.33);
|
|
}
|
|
100%
|
|
{
|
|
width: var(--handle-width);
|
|
}
|
|
}
|
|
|
|
.theme-toggle-input {
|
|
display: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Fill in dark mode / default */
|
|
.toggle-background {
|
|
position: relative;
|
|
width: var(--toggle-width);
|
|
height: var(--toggle-height);
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--background-modifier-border);
|
|
|
|
transition: background-color var(--color-fade-speed);
|
|
z-index: 1000;
|
|
|
|
animation-duration: 0.2s;
|
|
}
|
|
|
|
/* Handle default */
|
|
.toggle-background::before
|
|
{
|
|
content: "";
|
|
position: absolute;
|
|
left: var(--handle-margin);
|
|
top: var(--handle-margin);
|
|
height: var(--handle-width);
|
|
width: var(--handle-width);
|
|
|
|
border-radius: var(--handle-radius);
|
|
background-color: var(--text-normal);
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
|
|
animation: toggle-slide-left ease-in-out normal both;
|
|
animation-duration: inherit;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* handle light*/
|
|
.theme-toggle-input:checked ~ .toggle-background::before
|
|
{
|
|
animation: toggle-slide-right ease-in-out normal both;
|
|
animation-duration: inherit;
|
|
}
|
|
|
|
.theme-toggle-input:active ~ .toggle-background::before
|
|
{
|
|
animation: toggle-expand-right ease-in-out normal both;
|
|
animation-duration: inherit;
|
|
}
|
|
|
|
.theme-toggle-input:active:checked ~ .toggle-background::before
|
|
{
|
|
animation: toggle-expand-left ease-in-out normal both;
|
|
animation-duration: inherit;
|
|
}
|
|
|
|
/* sun moon icon icon default */
|
|
.toggle-background::after
|
|
{
|
|
content: "";
|
|
position: absolute;
|
|
right: var(--handle-margin);
|
|
top: calc(var(--handle-margin));
|
|
height: var(--handle-width);
|
|
width: var(--handle-width);
|
|
transition: transform 0.3s;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>')
|
|
no-repeat center center;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* sun moon icon icon light */
|
|
.theme-toggle-input:checked ~ .toggle-background::after
|
|
{
|
|
transform: translateX(calc(var(--handle-translation) * -1)) scale(0.9);
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>')
|
|
no-repeat center center;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Graph View */
|
|
|
|
.graph-view-wrapper
|
|
{
|
|
--graph-view-max-height: 35vh;
|
|
}
|
|
|
|
#graph-canvas
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.graph-view-container.expanded
|
|
{
|
|
position: fixed;
|
|
width: 90%;
|
|
height: 90%;
|
|
max-height: unset;
|
|
right: 5%;
|
|
top: 5%;
|
|
background-color: var(--background-secondary);
|
|
z-index: 100;
|
|
}
|
|
|
|
body:is(.is-phone, .is-tablet) .graph-view-container.expanded
|
|
{
|
|
width: 95%;
|
|
height: 95%;
|
|
right: 2.5%;
|
|
top: 2.5%;
|
|
}
|
|
|
|
.graph-view-container
|
|
{
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
max-height: var(--graph-view-max-height);
|
|
display: flex;
|
|
transition: background-color var(--color-fade-speed) ease-in-out;
|
|
touch-action: none;
|
|
border: 1px solid var(--modal-border-color);
|
|
border-radius: var(--modal-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.graph-icon
|
|
{
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.graph-view-container .graph-icon>svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
background-color: var(--color-base-00);
|
|
outline-width: 6px;
|
|
outline-color: var(--color-base-00);
|
|
outline-offset: -1px;
|
|
outline-style: solid;
|
|
border-radius: 100px;
|
|
margin: 10px;
|
|
|
|
transition: outline-color, background-color;
|
|
transition-timing-function: ease-in-out;
|
|
transition-duration: var(--color-fade-speed);
|
|
}
|
|
|
|
.graph-view-placeholder
|
|
{
|
|
padding: 0;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
max-height: var(--graph-view-max-height);
|
|
position: relative;
|
|
flex: none;
|
|
}
|
|
|
|
.graph-view-placeholder:has(.expanded)
|
|
{
|
|
border-radius: var(--modal-radius);
|
|
border: 1px solid var(--modal-border-color);
|
|
}
|
|
|
|
.scale-down
|
|
{
|
|
transition: transform 0.2s ease-in-out;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.scale-up
|
|
{
|
|
transition: transform 0.2s ease-in-out;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.graph-expand
|
|
{
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
|
|
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Canvas */
|
|
|
|
body :is(.canvas-node-container, .canvas-wrapper)
|
|
{
|
|
cursor: unset !important;
|
|
}
|
|
|
|
.canvas
|
|
{
|
|
translate: 0 0;
|
|
scale: 1 1;
|
|
will-change: translate, scale;
|
|
}
|
|
|
|
.canvas-controls
|
|
{
|
|
display: none;
|
|
cursor: default !important;
|
|
}
|
|
|
|
.canvas-card-menu
|
|
{
|
|
display: none;
|
|
cursor: default !important;
|
|
}
|
|
|
|
.canvas-node-content-blocker
|
|
{
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Phone */
|
|
|
|
body.is-phone .sidebar
|
|
{
|
|
font-size: 1.15em;
|
|
--tree-vertical-spacing: 0.9em;
|
|
--sidebar-width: 85vw !important;
|
|
}
|
|
|
|
body.is-phone
|
|
{
|
|
--collapse-arrow-size: 13px;
|
|
--tree-vertical-spacing: 0.8em;
|
|
--tree-horizontal-spacing: 0.5em;
|
|
}
|
|
|
|
body.is-phone .heading-wrapper .heading-collapse-indicator
|
|
{
|
|
transition: transform 0.2s ease-in-out 0.2s;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Loading */
|
|
|
|
.loading-icon
|
|
{
|
|
--width: 80px;
|
|
--height: 80px;
|
|
|
|
display: inline-block;
|
|
position: fixed;
|
|
left: calc(50% - var(--width) / 2);
|
|
top: calc(50% - var(--height) / 2);
|
|
width: var(--width);
|
|
height: var(--height);
|
|
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-in-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading-icon.show
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
.loading-icon div {
|
|
position: absolute;
|
|
top: 33px;
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
background: var(--interactive-accent);
|
|
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
}
|
|
|
|
.loading-icon div:nth-child(1) {
|
|
left: 8px;
|
|
animation: lds-ellipsis1 0.6s infinite;
|
|
}
|
|
|
|
.loading-icon div:nth-child(2) {
|
|
left: 8px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
|
|
.loading-icon div:nth-child(3) {
|
|
left: 32px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
|
|
.loading-icon div:nth-child(4) {
|
|
left: 56px;
|
|
animation: lds-ellipsis3 0.6s infinite;
|
|
}
|
|
|
|
.loading-icon:not(.show) div
|
|
{
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes lds-ellipsis1 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes lds-ellipsis3 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
|
|
@keyframes lds-ellipsis2 {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(24px, 0);
|
|
}
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Media Queries */
|
|
|
|
@media print
|
|
{
|
|
body .webpage-container .document-container *
|
|
{
|
|
overflow: visible !important;
|
|
overflow-y: visible !important;
|
|
overflow-x: visible !important;
|
|
}
|
|
|
|
html body.publish :is(.sidebar, script, style, include)
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
:root, html body.publish > :is(.webpage-container, .document-container, .markdown-preview-view):not(script, style, include)
|
|
{
|
|
display: contents !important;
|
|
}
|
|
|
|
:root, html body.publish .document-container > .markdown-preview-view
|
|
{
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body
|
|
{
|
|
display: inline !important;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.document-container > .markdown-preview-view > .markdown-preview-sizer
|
|
{
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
padding: var(--file-margins) !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
html body.publish :is(.document-container, .markdown-preview-view)
|
|
{
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Search */
|
|
|
|
.tree-hint-label
|
|
{
|
|
font-size: var(--font-smallest);
|
|
color: var(--text-accent);
|
|
width: 100%;
|
|
width: -webkit-fill-available;
|
|
width: -moz-available;
|
|
width: fill-available;
|
|
white-space: pre-wrap;
|
|
text-decoration-line: none;
|
|
}
|
|
|
|
.tree-hint-label:hover
|
|
{
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.tree-hint-container
|
|
{
|
|
width: 100%;
|
|
padding-left: calc(var(--tree-horizontal-spacing) * 2 + var(--collapse-arrow-size));
|
|
padding-bottom: calc(var(--tree-vertical-spacing) / 2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* find hints inside folders with no other folders in them */
|
|
.tree-container .mod-tree-folder:not(:has(.mod-tree-folder)) .mod-tree-file > .tree-link > .tree-hint-container
|
|
{
|
|
padding-left: calc(var(--tree-horizontal-spacing) * 2);
|
|
}
|
|
|
|
.tree-item-contents:has(.tree-item-icon) + .tree-hint-container
|
|
{
|
|
margin-left: calc(1.6em + 2px);
|
|
}
|
|
|
|
a.tree-hint-label:hover
|
|
{
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.search-mark
|
|
{
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
scroll-margin: 2em !important;
|
|
}
|
|
|
|
.search-input-container:has(+ #search-results) > input[type="search"]
|
|
{
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
input[type=search] {
|
|
box-shadow: none!important;
|
|
height: 2.5em;
|
|
font-size: 1em;
|
|
transition: background, background-color, border;
|
|
transition-duration: var(--color-fade-speed);
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
|
|
.search-input-container
|
|
{
|
|
width: 100% !important;
|
|
}
|
|
|
|
.search-input-container::before
|
|
{
|
|
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");
|
|
mask-repeat: no-repeat;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Sidebar Resize */
|
|
|
|
.sidebar .sidebar-handle:hover ~ .sidebar-content, .sidebar.is-resizing .sidebar-content
|
|
{
|
|
box-shadow: 0 0 0 var(--divider-width-hover) var(--divider-color-hover);
|
|
}
|
|
|
|
.sidebar-handle {
|
|
width: min(max(calc(var(--sidebar-margin) / 2.0), 3px), 12px);
|
|
height: calc(100vh - 2 * var(--radius-l));
|
|
margin-top: var(--radius-l);
|
|
margin-bottom: var(--radius-l);
|
|
top: 0;
|
|
position: absolute;
|
|
cursor: ew-resize;
|
|
z-index: 1;
|
|
transition: background-color .2s ease-in-out;
|
|
}
|
|
|
|
.sidebar-left .sidebar-handle {
|
|
right: 0;
|
|
}
|
|
|
|
.sidebar-right .sidebar-handle {
|
|
left: 0;
|
|
}
|
|
|
|
|
|
|
|
/*#endregion */
|
|
|
|
/* Themes */
|
|
|
|
/*#region General */
|
|
|
|
.nav-folder-children .nav-folder-title-content::before
|
|
{
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.tree-item::before
|
|
{
|
|
margin-left: calc(var(--tree-horizontal-spacing) - 0.3em);
|
|
}
|
|
|
|
.tree-item-contents:has(.tree-item-icon) .tree-item-title::before,
|
|
.tree-item-contents:has(.tree-item-icon)::before,
|
|
.tree-item:has(.tree-item-contents > .tree-item-icon)::before
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region AnuPpuccin */
|
|
|
|
/* AnuPpuccin rainbow indent support */
|
|
.anp-simple-rainbow-color-toggle.anp-simple-rainbow-indentation-toggle .tree-container.file-tree .tree-item
|
|
{
|
|
border-color: rgba(var(--rainbow-folder-color), 0.5);
|
|
}
|
|
|
|
/* AnuPpuccin folder icon support */
|
|
.anp-collapse-folders .tree-container .tree-item .collapse-icon
|
|
{
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M6 14l1.45-2.9A2 2 0 0 1 9.24 10H22a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E%0A");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M6 14l1.45-2.9A2 2 0 0 1 9.24 10H22a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E%0A");
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
|
|
background-color: currentColor;
|
|
display: flex;
|
|
flex-basis: 100%;
|
|
height: 16px;
|
|
width: 17px;
|
|
}
|
|
|
|
.anp-collapse-folders .tree-container .tree-item.is-collapsed .collapse-icon
|
|
{
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z'/%3E%3Cpath d='M2 10h20' /%3E%3C/svg%3E%0A");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z'/%3E%3Cpath d='M2 10h20' /%3E%3C/svg%3E%0A");
|
|
}
|
|
|
|
.anp-file-icons .nav-file .nav-file-title::before
|
|
{
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E%0A");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E%0A");
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
background-color: currentColor;
|
|
content: "";
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: var(--size-4-4);
|
|
margin-left: calc(-1 * var(--size-4-5));
|
|
opacity: var(--icon-opacity);
|
|
position: absolute;
|
|
width: var(--size-4-4);
|
|
}
|
|
|
|
.anp-collapse-folders .tree-container .tree-item .collapse-icon:hover
|
|
{
|
|
color: currentColor;
|
|
}
|
|
|
|
.anp-collapse-folders .tree-container .tree-item .collapse-icon svg
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/* Plugins: */
|
|
|
|
/*#region Kanban */
|
|
|
|
.document-container .kanban-plugin
|
|
{
|
|
position: absolute;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.document-container .kanban-plugin
|
|
{
|
|
font-family: var(--font-text, var(--default-font));
|
|
font-size: .875rem;
|
|
line-height: var(--line-height-tight);
|
|
width: unset;
|
|
overflow-y: unset;
|
|
overflow-wrap: unset;
|
|
color: unset;
|
|
user-select: unset;
|
|
-webkit-user-select: unset;
|
|
}
|
|
|
|
.document-container .kanban-plugin__item-button-wrapper, .kanban-plugin__lane-grip, .kanban-plugin__lane-settings-button.clickable-icon, .kanban-plugin__item-postfix-button.clickable-icon
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Excalidraw */
|
|
|
|
.excalidraw-svg rect, .excalidraw-plugin rect
|
|
{
|
|
fill: transparent;
|
|
}
|
|
|
|
/** Preserve mask fill **/
|
|
.excalidraw-plugin mask rect[fill="#fff"],
|
|
.excalidraw-svg mask rect[fill="#fff"],
|
|
.excalidraw-plugin mask rect[fill="#ffffff"],
|
|
.excalidraw-svg mask rect[fill="#ffffff"]{
|
|
fill: #ffffff;
|
|
}
|
|
.excalidraw-plugin mask rect[fill="#000"],
|
|
.excalidraw-svg mask rect[fill="#000"],
|
|
.excalidraw-plugin mask rect[fill="#000000"],
|
|
.excalidraw-svg mask rect[fill="#000000"]{
|
|
fill: #000000;
|
|
}
|
|
|
|
body.theme-dark .excalidraw-svg svg.dark, body.theme-dark .excalidraw-plugin svg.dark,
|
|
body.theme-light .excalidraw-svg svg.light, body.theme-light .excalidraw-plugin svg.light
|
|
{
|
|
filter: invert(93%) hue-rotate(180deg);
|
|
}
|
|
|
|
|
|
.excalidraw-plugin > svg
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.excalidraw-plugin
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
padding: 10px;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Obsidian Columns Plugin */
|
|
.columnParent {
|
|
display: flex;
|
|
padding: 15px 20px;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.columnParent {
|
|
white-space: normal;
|
|
}
|
|
|
|
.columnChild {
|
|
flex-grow: 1;
|
|
flex-basis: 0px;
|
|
}
|
|
/*#endregion */
|
|
|
|
/*#region Banners */
|
|
|
|
.obsidian-banner .lock-button
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.markdown-preview-view:has(.obsidian-banner-wrapper)
|
|
{
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/*#endregion */
|
|
|
|
/*#region Mind Map */
|
|
|
|
.view-content:has(.mm-mindmap)
|
|
{
|
|
overflow-y: none;
|
|
}
|
|
|
|
.view-content .mm-mindmap
|
|
{
|
|
transform: scale(1);
|
|
translate: -4000px -4000px;
|
|
top: 70%;
|
|
left: 50%;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
width: 100vw;
|
|
}
|
|
|
|
/*#endregion */
|