Skip to content

Instantly share code, notes, and snippets.

@elkadre
Last active June 20, 2024 09:42
Show Gist options
  • Save elkadre/50290cdcda5d49226d10c44b95f16123 to your computer and use it in GitHub Desktop.
Save elkadre/50290cdcda5d49226d10c44b95f16123 to your computer and use it in GitHub Desktop.
/*
Minimal Publish / MIT License
Copyright (c) 2020-2023 Stephan Ango (@kepano)
*/
/* Edits made for personal use by @elkadre */
/* Adjust the following variables or find more at the link below */
/* https://docs.obsidian.md/Reference/CSS+variables/CSS+variables */
body {
/* Font sizes */
--font-text-size: 16px;
--font-small: 13px;
--font-smaller: 11px;
--font-smallest: 10px;
--font-inputs: 13px;
/* Font weights */
--normal-weight: 400;
--bold-weight: 600;
--link-weight: inherit;
/* Headings */
--page-title-weight: 500;
--page-title-line-height: 1.1;
--h1: 1.25em;
--h2: 1.1em;
--h3: 1.05em;
--h4: 1em;
--h5: 0.85em;
--h6: 0.85em;
--h1-weight: 600;
--h2-weight: 600;
--h3-weight: 600;
--h4-weight: 500;
--h5-weight: 500;
--h6-weight: 400;
--h1-variant: small-caps;
--h2-variant: small-caps;
--h3-variant: small-caps;
--h4-variant: small-caps;
--h5-variant: small-caps;
--h6-variant: small-caps;
--h1-style: normal;
--h2-style: normal;
--h3-style: normal;
--h4-style: normal;
--h5-style: normal;
--h6-style: normal;
/* Cards */
--cards-min-width: 180px;
--cards-max-width: 1fr;
--cards-mobile-width: 180px;
--cards-image-height: 400px;
--cards-padding: 1.2em;
--cards-image-fit: contain;
--cards-background: transparent;
--cards-border-width: 1px;
--cards-aspect-ratio: auto;
--cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));
/* Images */
--image-radius: 8px;
--image-grid-fit: cover;
--image-grid-background: transparent;
--img-grid-gap: 0.5rem;
/* Line widths */
--icon-muted: 0.5;
--border-width: 1px;
--folding-offset: 16px;
--nested-padding: 30px;
/* Quotes and transclusions */
--list-padding: 2em;
/* List padding */
--list-spacing: 0.075em;
/* Space between list items */
}
/* MOBILE */
@media (max-width: 400pt) {
body {
--cards-min-width: var(--cards-mobile-width);
--img-grid-gap: 0.25rem;
}
}
/* COLOURS */
/* Default color scheme with Rosé Pine Colour Scheme accents - DISABLED
You can enable accents by taking this out of a comment and setting the next section as a comment.
.theme-light, .theme-dark {
--red: #d04255;
--yellow: #e5b567;
--green: #a8c373;
--orange: #e57e43;
--cyan: #73bbb2;
--blue: #6c99bb;
--purple: #9e86c8;
--pink: #b05279;
--text-accent-rgb-yellow: 234, 157, 52;
--text-accent-rgb-pink: 215, 130, 126;
--text-accent-rgb-blue: 40, 105, 131;
--text-accent-rgb-gray: 166, 166, 166;
--true-accent-rgb-yellow: 234, 157, 52;
--true-accent-rgb-pink: 215, 130, 126;
--true-accent-rgb-blue: 40, 105, 131;
}
*/
/* BLACK AND WHITE color scheme with minor Rosé Pine accents
To disable black and white mode, put this section in a comment and take the previous section out of the comment. */
.theme-light, .theme-dark {
--red: var(--tx3);
--yellow: var(--tx3);
--green: var(--tx3);
--orange: var(--tx3);
--cyan: var(--tx3);
--blue: var(--tx3);
--purple: var(--tx3);
--pink: var(--tx3);
--text-accent-rgb-yellow: 166, 166, 166;
--text-accent-rgb-pink: 166, 166, 166;
--text-accent-rgb-blue: 166, 166, 166;
--text-accent-rgb-gray: 166, 166, 166;
--true-accent-rgb-yellow: 234, 157, 52;
--true-accent-rgb-pink: 215, 130, 126;
--true-accent-rgb-blue: 40, 105, 131;
--true-accent-rgb-gray: 166, 166, 166;
}
/* Other variables - the ax1, ax2 and ax3 refer to text accents */
.theme-light {
--bg1: #FFF;
--bg2: #F5F5F5;
--bg3: #E5E5E5;
--ui1: #E6E6E6;
--ui2: #D6D6D6;
--ui3: #C2C2C2;
--tx1: #0F0F0F;
--tx2: #828282;
--tx3: #B5B5B5;
--ax1: #999999;
--ax2: #777777;
--ax3: #aaaaaa;
--hl1: hsla(201, 50%, 40%, 30%);
}
.theme-dark {
--bg1: #262626;
--bg2: #212121;
--bg3: hsla(0, 0, 55%, 0.12);
--ui1: #333333;
--ui2: #3B3B3B;
--ui3: #595959;
--tx1: #D1D1D1;
--tx2: #999999;
--tx3: #595959;
--ax1: #889EAA;
--ax2: #ACBBC3;
--ax3: #67808E;
--hl1: hsla(201, 70%, 40%, 30%);
}
.theme-light {
--mono100: black;
--mono0:white
}
.theme-dark {
--mono100: white;
--mono0:black
}
.theme-dark, .theme-light {
--h1-color: var(--text-normal);
--h2-color: var(--text-normal);
--h3-color: var(--text-normal);
--h4-color: var(--text-normal);
--h5-color: var(--text-normal);
--h6-color:var(--text-muted)
}
.published-container {
--outline-heading-color-active: var(--tx1);
--sidebar-left-background:var(--bg2)
}
.theme-dark, .theme-light {
--background-primary: var(--bg1);
--background-primary-alt: var(--bg2);
--background-secondary: var(--bg2);
--background-secondary-alt: var(--bg1);
--background-tertiary: var(--bg3);
--background-table-rows: var(--bg2);
--background-modifier-form-field: var(--bg1);
--background-modifier-form-field-highlighted: var(--bg1);
--background-modifier-accent: var(--ax3);
--background-modifier-border: var(--ui1);
--background-modifier-border-hover: var(--ui2);
--background-modifier-border-focus: var(--ui3);
--background-modifier-success: var(--color-green);
--background-divider: var(--ui1);
--interactive-hover: var(--ui1);
--interactive-accent: var(--ax3);
--interactive-accent-hover: var(--ax3);
--quote-opening-modifier: var(--ui2);
--modal-border: var(--ui2);
--icon-color: var(--tx2);
--icon-color-hover: var(--tx2);
--icon-color-active: var(--tx1);
--icon-hex: var(--mono0);
--text-normal: var(--tx1);
--text-bold: var(--tx1);
--text-italic: var(--tx1);
--text-muted: var(--tx2);
--text-faint: var(--tx3);
--text-accent: var(--ax1);
--text-accent-hover: var(--ax2);
--text-on-accent: white;
--text-selection: var(--hl1);
--text-code: var(--tx4);
--text-error: var(--color-red);
--text-blockquote: var(--tx2);
--title-color: var(--tx1);
--title-color-inactive:var(--tx2);
--text-color-header: var(--tx1)
}
.theme-light {
--interactive-normal: var(--bg1);
--interactive-accent-rgb: 220, 220, 220;
--text-highlight-bg: rgba(255, 225, 0, 0.5);
--text-highlight-bg-active: rgba(0, 0, 0, 0.1);
--background-modifier-error: rgba(255, 0, 0, 0.14);
--background-modifier-error-hover: rgba(255, 0, 0, 0.08);
--shadow-color: rgba(0, 0, 0, 0.1);
--btn-shadow-color:rgba(0, 0, 0, 0.05)
}
.theme-dark {
--interactive-normal: var(--bg3);
--interactive-accent-rgb: 66, 66, 66;
--text-highlight-bg: rgba(255, 177, 80, 0.3);
--text-highlight-bg-active: rgba(255, 255, 255, 0.1);
--background-modifier-error: rgba(255, 20, 20, 0.12);
--background-modifier-error-hover: rgba(255, 20, 20, 0.18);
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
--shadow-color: rgba(0, 0, 0, 0.3);
--btn-shadow-color:rgba(0, 0, 0, 0.2)
}
.alt-title .page-header, .hide-title .page-header {
display:none
}
.hide-title.markdown-preview-view div:nth-child(4) h1 {
margin-top: .25em;
font-variant: var(--page-title-variant);
letter-spacing: -.015em;
line-height: var(--page-title-line-height);
font-size: var(--page-title-size);
color: var(--page-title-color);
font-weight: var(--page-title-weight);
font-style: var(--page-title-style);
font-family: var(--page-title-font);
border:none
}
/* TABLES AND IMAGES */
.table-col-1-150.markdown-preview-view td:first-child {
width:150px
}
.table-col-1-200.markdown-preview-view td:first-child {
width:200px
}
.table-100 table, .table-cards table, .table-full table {
width:100%
}
.table-small table {
--table-text-size:85%
}
.table-tiny table {
--table-text-size:75%
}
.row-hover {
--table-edge-cell-padding-first:10px
}
.row-alt {
--table-row-alt-background: var(--background-table-rows);
--table-edge-cell-padding-first:10px
}
.col-alt .markdown-rendered:not(.cards) {
--table-column-alt-background:var(--background-table-rows)
}
.table-tabular table {
font-variant-numeric:tabular-nums
}
.table-lines {
--table-border-width: var(--border-width);
--table-header-border-width: var(--border-width);
--table-column-first-border-width: var(--border-width);
--table-column-last-border-width: var(--border-width);
--table-row-last-border-width: var(--border-width);
--table-edge-cell-padding:10px
}
.table-nowrap {
--table-white-space:nowrap
}
.table-nowrap .table-wrap, .trim-cols {
--table-white-space:normal
}
.table-numbers table {
counter-reset:section
}
.table-numbers table > thead > tr > th:first-child::before {
content: " ";
padding-right: .5em;
display: inline-block;
min-width:2em
}
.table-numbers table > tbody > tr > td:first-child::before {
counter-increment: section;
content: counter(section) " ";
text-align: center;
padding-right: .5em;
display: inline-block;
min-width: 2em;
color: var(--text-faint);
font-variant-numeric:tabular-nums
}
.row-lines-off .table-view-table > tbody > tr > td, .row-lines-off table tbody > tr:last-child > td, .row-lines-off table tbody > tr > td {
border-bottom:none
}
.row-lines .table-view-table > tbody > tr > td, .row-lines table tbody > tr > td {
border-bottom:var(--table-border-width) solid var(--table-border-color)
}
.row-lines table tbody > tr:last-child > td {
border-bottom:none
}
.col-lines .table-view-table thead > tr > th:not(:last-child), .col-lines .table-view-table > tbody > tr > td:not(:last-child), .col-lines table tbody > tr > td:not(:last-child) {
border-right:var(--table-border-width) solid var(--background-modifier-border)
}
.row-hover {
--table-row-background-hover:hsla(var(--accent-h), 50%, 80%, 20%)
}
.theme-dark .row-hover, .theme-dark.row-hover {
--table-row-background-hover: hsla(var(--accent-h), 30%, 40%, 20%)
}
img[src$="#outline"], span[src$="#outline"] img {
border: 1px solid var(--ui1)
}
img[src$="#interface"], span[src$="#interface"] img {
border: 1px solid var(--ui1);
box-shadow: 0 .5px .9px rgba(0, 0, 0, .021), 0 1.3px 2.5px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .039), 0 10px 20px rgba(0, 0, 0, .06);
margin-top: 10px;
margin-bottom: 15px;
border-radius: var(--radius-m)
}
.theme-dark img[src$="#invert"], .theme-dark span[src$="#invert"] img {
filter: invert(1) hue-rotate(180deg);
mix-blend-mode: screen
}
.theme-light img[src$="#invertW"], .theme-light span[src$="#invertW"] img {
filter: invert(1) hue-rotate(180deg)
}
img[src$="#circle"], span[src$="#circle"] img {
border-radius: 50%;
aspect-ratio:1/1
}
body {
--image-grid-fit: cover;
--image-grid-background: transparent;
--img-grid-gap:0.5rem
}
@media (max-width: 400pt) {
body {
--img-grid-gap:0.25rem
}
}
.img-grid-ratio {
--image-grid-fit:contain
}
.img-grid .image-embed.is-loaded {
line-height:0
}
.img-grid .image-embed.is-loaded img {
background-color:var(--image-grid-background)
}
.img-grid .image-embed.is-loaded img:active {
background-color:transparent
}
.img-grid .markdown-preview-section > div:has(.image-embed) > p {
display: grid;
margin-block-start: var(--img-grid-gap);
margin-block-end: var(--img-grid-gap);
grid-column-gap: var(--img-grid-gap);
grid-row-gap: 0;
grid-template-columns:repeat(auto-fit, minmax(0, 1fr))
}
.img-grid .markdown-preview-section > div:has(.image-embed) > p > br {
display:none
}
.img-grid .markdown-preview-section > div:has(.image-embed) > p > img {
object-fit: var(--image-grid-fit);
align-self:stretch
}
.img-grid .markdown-preview-section > div:has(.image-embed) > p > .internal-embed img {
object-fit: var(--image-grid-fit);
height: 100%;
align-self:center
}
/* || LINKS AND BASIC FORMATTING */
a {
text-decoration: none !important;
opacity: 1;
}
a:hover {
text-decoration: underline !important;
opacity: 0.8;
color: var(--text-color-external)
}
.tag:not(.token) {
border-color: rgb(var(--true-accent-rgb-gray));
background-color: rgba(var(--true-accent-rgb-gray),0.2);
font-size: var(--font-smaller);
color:rgb(var(--true-accent-rgb-gray));
}
strong, b {
font-weight: bold;
}
i, cite, em, var, address, dfn {
text-style: italic;
}
.table-cards table {
--table-width: 100%;
--table-edge-cell-padding-first: calc(var(--cards-padding) /2);
--table-edge-cell-padding-last: calc(var(--cards-padding) /2);
--table-cell-padding: calc(var(--cards-padding) /3) calc(var(--cards-padding) /2);
line-height:1.3
}
.table-cards table tbody {
clear: both;
padding: .5rem 0;
display: grid;
grid-template-columns: var(--cards-columns);
grid-column-gap: 0.75rem;
grid-row-gap:0.75rem
}
.table-cards table > tbody > tr {
background-color: var(--cards-background);
border: var(--cards-border-width) solid var(--background-modifier-border);
display: flex;
flex-direction: column;
margin: 0;
padding: 0 0 calc(var(--cards-padding) /3) 0;
border-radius: 6px;
overflow: hidden;
transition: box-shadow .15s linear;
max-width:var(--cards-max-width)
}
.table-cards table > tbody > tr:hover {
border: var(--cards-border-width) solid var(--background-modifier-border-hover);
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .05), 0 1px 3px 1px rgba(0, 0, 0, .025);
transition:box-shadow .15s linear
}
.table-cards table tbody > tr > td:first-child {
font-weight: var(--bold-weight);
border:none
}
.table-cards table tbody > tr > td:first-child a {
display:block
}
.table-cards table tbody > tr > td:last-child {
border:none
}
.table-cards table tbody > tr > td:not(:first-child) {
font-size: calc(var(--table-text-size) * .9);
color:var(--text-muted)
}
.table-cards table tbody > tr > td > * {
padding:calc(var(--cards-padding)/3) 0
}
.table-cards table tbody > tr > td:not(:last-child):not(:first-child) {
padding: 4px 0;
border-bottom: 1px solid var(--background-modifier-border);
width: calc(100% - var(--cards-padding));
margin:0 calc(var(--cards-padding)/2)
}
.table-cards table tbody > tr > td a {
text-decoration:none
}
.table-cards table tbody > tr > td > button {
width: 100%;
margin:calc(var(--cards-padding)/2) 0
}
.table-cards table tbody > tr > td:last-child > button {
margin-bottom:calc(var(--cards-padding)/6)
}
.table-cards table tbody > tr > td > ul {
width: 100%;
padding: .25em 0 !important;
margin:0 auto !important
}
.table-cards table tbody > tr > td:has(img) {
padding: 0 !important;
background-color: var(--background-secondary);
display: block;
margin: 0;
width:100%
}
.table-cards table tbody > tr > td img {
aspect-ratio: var(--cards-aspect-ratio);
width: 100%;
object-fit: var(--cards-image-fit);
max-height: var(--cards-image-height);
background-color: var(--background-secondary);
vertical-align:bottom
}
.table-cards table thead {
display:none
}
.list-cards.markdown-preview-view .list-bullet, .list-cards.markdown-preview-view .list-collapse-indicator, .list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide li > ul::before {
display:none
}
.list-cards.markdown-preview-view div > ul {
display: grid;
gap: .75rem;
grid-template-columns: var(--cards-columns);
padding: 0;
line-height:var(--line-height-tight)
}
.list-cards.markdown-preview-view div > ul > li {
background-color: var(--cards-background);
padding: calc(var(--cards-padding) /2);
border-radius: var(--radius-s);
border: var(--cards-border-width) solid var(--background-modifier-border);
overflow:hidden
}
.list-cards.markdown-preview-view div > ul .image-embed {
padding: 0;
display: block;
background-color: var(--background-secondary);
border-radius:var(--image-radius)
}
.list-cards.markdown-preview-view div > ul .image-embed img {
aspect-ratio: var(--cards-aspect-ratio);
object-fit: var(--cards-image-fit);
max-height: var(--cards-image-height);
background-color: var(--background-secondary);
vertical-align:bottom
}
.list-cards.markdown-preview-view div > ul > li > a {
--link-decoration: none;
--link-external-decoration: none;
font-weight:var(--bold-weight)
}
.list-cards.markdown-preview-view div ul > li:hover {
border-color:var(--background-modifier-border-hover)
}
.list-cards.markdown-preview-view div ul ul {
display: block;
width: 100%;
color: var(--text-muted);
font-size: var(--font-smallest);
margin: calc(var(--cards-padding) /-4) 0;
padding:calc(var(--cards-padding)/2) 0
}
.list-cards.markdown-preview-view div ul ul ul {
padding-bottom:calc(var(--cards-padding)/4)
}
.list-cards.markdown-preview-view div ul ul > li {
display:block
}
.list-cards.table-cards-16-9, .table-cards.table-cards-16-9 {
--cards-aspect-ratio:16/9
}
.list-cards.table-cards-1-1, .table-cards.table-cards-1-1 {
--cards-aspect-ratio:1/1
}
.list-cards.table-cards-2-1, .table-cards.table-cards-2-1 {
--cards-aspect-ratio:2/1
}
.list-cards.table-cards-2-3, .table-cards.table-cards-2-3 {
--cards-aspect-ratio:2/3
}
.list-cards.table-cards-cols-1, .table-cards.table-cards-cols-1 {
--cards-columns:repeat(1, minmax(0, 1fr))
}
.list-cards.table-cards-cols-2, .table-cards.table-cards-cols-2 {
--cards-columns:repeat(2, minmax(0, 1fr))
}
.list-cards.table-cards-cover, .table-cards.table-cards-cover {
--cards-image-fit:cover
}
.list-cards.table-cards-align-bottom table tbody > tr > td:last-child, .table-cards.table-cards-align-bottom table tbody > tr > td:last-child {
margin-top:auto
}
@media (max-width: 400pt) {
.table-cards table tbody > tr > td:not(:first-child) {
font-size:80%
}
}
@media (min-width: 400pt) {
.table-cards-cols-3 {
--cards-columns:repeat(3, minmax(0, 1fr))
}
.table-cards-cols-4 {
--cards-columns:repeat(4, minmax(0, 1fr))
}
.table-cards-cols-5 {
--cards-columns:repeat(5, minmax(0, 1fr))
}
.table-cards-cols-6 {
--cards-columns:repeat(6, minmax(0, 1fr))
}
.table-cards-cols-7 {
--cards-columns:repeat(7, minmax(0, 1fr))
}
.table-cards-cols-8 {
--cards-columns:repeat(8, minmax(0, 1fr))
}
}
.markdown-preview-view code {
color: var(--tx4);
font-size:.85em
}
.theme-light :not(pre) > code[class * =language-], .theme-light pre[class * =language-] {
background-color:var(--bg2)
}
iframe, img {
border-radius:var(--image-radius)
}
input[type=email], input[type=number], input[type=password], input[type=search], input[type=text] {
border-color:var(--ui1)
}
input[type=email]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, input[type=text]:hover {
border-color:var(--ui2)
}
input[type=email]:active, input[type=email]:focus, input[type=number]:active, input[type=number]:focus, input[type=password]:active, input[type=password]:focus, input[type=search]:active, input[type=search]:focus, input[type=text]:active, input[type=text]:focus {
border-color: var(--ui2);
box-shadow:0 0 0 2px var(--ui2)
}
ol > li::marker, ul > li::marker {
color:var(--tx3)
}
body {
--table-header-border-width: 0;
--table-column-first-border-width: 0;
--table-column-last-border-width: 0;
--table-row-last-border-width: 0;
--table-edge-cell-padding-first: 0;
--table-edge-cell-padding-last: 10px;
--table-cell-padding: 4px 10px;
--table-header-size:var(--table-text-size)
}
.markdown-preview-view table {
border: var(--border-width) solid var(--border-color);
border-collapse: collapse;
margin-block-start:1em
}
.markdown-preview-view td, .markdown-preview-view th {
padding:var(--table-cell-padding)
}
.markdown-preview-view td:first-child, .markdown-preview-view th:first-child {
padding-left:var(--table-edge-cell-padding-first)
}
.markdown-preview-view td:last-child, .markdown-preview-view th:last-child {
padding-right:var(--table-edge-cell-padding-last)
}
.tooltip {
display: none
}
/* HEADERS */
.page-header {
color: var(--text-color-header);
font-family: var(--font-monospace);
font-size: var(--font-small);
font-weight: 400;
border-bottom: 1px solid var(--text-color-header);
top:0;
text-align: center;
position: -webkit-sticky !important;
position: sticky !important;
line-height: 1.5em;
padding:1.5em 0px;
text-transform:uppercase;
}
h1 {
font-size: var(--h1) !important;
color: var(--text-color-header) !important;
border-bottom:none !important;
font-variant: var(--h1-variant) !important;
padding:10px 0px !important;
}
h2 {
font-size: var(--h2) !important;
color: var(--text-color-header) !important;
border-bottom:none !important;
font-variant: var(--h2-variant) !important;
padding:5px 0px !important;
}
h3 {
font-size: var(--h3) !important;
color: var(--text-color-header) !important;
border-bottom:none !important;
font-variant: var(--h3-variant) !important;;
}
h4 {
font-size: var(--h4) !important;
color: var(--text-color-header) !important;
border-bottom:none !important;
font-variant: var(--h4-variant) !important;;
}
h5 {
font-size: var(--h5) !important;
color: var(--text-color-header) !important;
border-bottom:none !important;
font-variant: var(--h5-variant) !important;;
}
h6 {
font-size: var(--h6) !important;
color: var(--text-color-header) !important;
border-bottom:none !important;
font-variant: var(--h6-variant) !important;;
}
.markdown-preview-view hr {
border: none;
border-top: 2px solid;
border-color: var(--background-modifier-border);
}
/* HEADING LINE
h1:after {
position:absolute;
content:'';
display: block;
left:0;
right:0;
top:50%;
background-color:var(--background-modifier-border);
height:2px;
min-height:1px;
z-index:-2;
}
h1:before {
position: absolute;
display:block;
top:0;
left:0;
bottom:0;
content: 'attr(data-content)';
background-color:var(--bg1);
color:var(--bg1);
z-index:-1;
padding-right:1em;
}
h1 {
position:relative;
}
*/
/* HEADING PREFIXES
h1::before
{
content: 'H1 ';
font-size: var(--font-smallest);
color: var(--text-header-prefix);
font-family: var(--font-monospace);
font-weight:400;
}
h2::before
{
content: 'H2 ';
font-size: var(--font-smallest);
color: var(--text-header-prefix);
font-family: var(--font-monospace);
font-weight:400;
}
h3::before
{
content: 'H3 ';
font-size: var(--font-smallest);
color: var(--text-header-prefix);
font-family: var(--font-monospace);
font-weight:400;
}
h4::before
{
content: 'H4 ';
font-size: var(--font-smallest);
color: var(--text-header-prefix);
font-family: var(--font-monospace);
font-weight:400;
}
h5::before
{
content: 'H5 ';
font-size: var(--font-smallest);
color: var(--text-header-prefix);
font-family: var(--font-monospace);
font-weight:400;
}
h6::before
{
content: 'H6 ';
font-size: var(--font-smallest);
color: var(--text-header-prefix);
font-family: var(--font-monospace);
font-weight:400;
}
*/
/* CALLOUTS */
.callout {
/* background-color: rgb(var(--callout-color), 0.05); */
/* border-radius: 10px; */
/* border-left: 0px solid rgb(var(--callout-color)); */
}
.callout-title {
padding: 0px;
display: flex;
gap: 10px;
/* background-color: transparent; */
font-weight: normal !important;
}
.callout-title-inner {
font-weight: normal;
color: var(--callout-title-color);
font-size: var(--font-small);
font-family: var(--font-monospace);
text-transform: uppercase;
letter-spacing: -0.015em;
margin-top: 3px;
}
.callout-content {
overflow-x: auto;
padding: 0px 5px;
font-size: small;
}
.callout[data-callout="info"], .callout[data-callout="note"], .callout[data-callout="tldr"], .callout[data-callout="abstract"], .callout[data-callout="quote"], .callout[data-callout="cite"] {
--callout-color: var(--text-accent-rgb-gray);
}
.callout[data-callout="hint"], .callout[data-callout="tip"], .callout[data-callout="summary"] {
--callout-color: var(--text-accent-rgb-yellow);
}
.callout[data-callout="important"], .callout[data-callout="caution"], .callout[data-callout="attention"], .callout[data-callout="warning"], .callout[data-callout="danger"], .callout[data-callout="error"] {
--callout-color: var(--text-accent-rgb-pink);
}
.callout[data-callout="person"] {
--callout-color: var(--text-accent-rgb-pink);
--callout-icon: user;
}
.callout[data-callout="document"] {
--callout-color: var(--text-accent-rgb-blue);
--callout-icon: bookmark;
}
.callout[data-callout="summary"] {
--callout-color: var(--text-accent-rgb-yellow);
--callout-icon: coffee;
}
.callout[data-callout="see-also"] {
--callout-color: var(--text-accent-rgb-gray);
--callout-icon: compass;
}
.callout[data-callout="last-updated"] {
--callout-color: var(--text-accent-rgb-gray);
--callout-icon: calendar;
border-left: none;
color: var(--text-faint);
text-align:right;
text-transform: uppercase;
}
.callout[data-callout="home"] {
--callout-color: var(--text-accent-rgb-gray) ;
--callout-icon: home;
border-left: none;
border-radius: 0px;
border-top: 1px solid var(--scrollbar-thumb-bg);
padding-top:5px;
color: var(--text-faint);
text-transform: uppercase;
background-color:transparent;
width:100%
}
.callout[data-callout=home] .callout-title-inner {
color: var(--text-faint) !important;
text-transform: uppercase;
font-size: var(--font-smaller);
background-color:transparent;
margin-top:auto;
text-align:right !important;
}
.callout[data-callout=home] .callout-icon { margin-bottom:auto; font-size: var(--font-small); }
.callout[data-callout="rtl"] {
--callout-color: var(--text-accent-rgb-gray);
text-align: right;
font-size: 24px;
font-family: Amiri Quran;
padding-bottom: .4em;
margin-block-end: 0.6em;
}
.callout[data-callout="rtl"] .callout-title {
text-align:right;
font-size: 0.85em;
font-family: var(--font-quran);
}
.callout[data-callout="rtl"] .callout-title-inner {
text-align:right;
font-size: 1em;
font-family: var(--font-quran);
}
.callout[data-callout="rtl"] .callout-icon {
display:none !important;
}
.callout[data-callout="rtltitle"] {
--callout-color: var(--text-accent-rgb-gray);
background-color: transparent;
text-align:right;
font-size: 42px;
line-height:0px;
font-family: var(--font-quran);
padding-bottom: .4em;
margin-block-end: 0.6em;
}
.callout[data-callout="rtltitle"] .callout-icon {
display:none !important;
}
.callout[data-callout="rtltitle"] .callout-title {
text-align:right;
font-size: 1em;
font-family: var(--font-quran);
}
.callout[data-callout="rtltitle"] .callout-title-inner {
text-align:right;
font-size: 1em;
font-family: var(--font-quran);
}
/* SIDEBARS AND BACKLINKS */
.site-body-left-column, .site-body-left-column:before {
border-right: none !important;
}
.published-container .markdown-preview-view {
user-select: text;
line-height: 1.8;
border-radius: 10px;
margin-top: 20px;
text-align: justify;
}
.published-container .backlinks {
margin-bottom: 25px;
font-family: var(--font-monospace);
font-size: var(--font-smaller)
}
.backlink-items-container {
font-size: var(--font-smaller)
}
.published-container .backlinks .published-section-header {
color: var(--text-color-header) !important
}
.published-section-header {
color: var(--text-accent);
font-family: var(--font-monospace);
font-size: var(--font-smaller);
font-weight: 400;
}
.graph-view-container {
border: none;
box-shadow: none;
background-color: transparent;
}
.outline-view-outer .collapsible-item-self.mod-active {
background-color: transparent;
}
.outline-view-outer .tree-item-self:hover {
background: transparent;
text-transform: uppercase
}
.outline-view-outer .tree-item-self.mod-active {
background: transparent;
text-transform: uppercase
}
.outline-view-outer .tree-item-self.mod-active:before {
content: "•⠀";
color: var(--text-accent-hover);
}
.tree-item-self {
font-size: var(--font-small) !important;
color: var(--text-faint) !important;
line-height: 1.3em
}
.tree-item-self:hover {
color: var(--interactive-accent) !important;
}
.site-body-left-column, .site-body-right-column {
color: var(--text-faint) !important;
width: 250px;
flex: 0 0 250px;
}
.site-body-left-column-site-logo {
max-width: calc(100% - 40px);
align-self: center;
border-radius: 8px;
display:none;
}
.site-body-left-column-site-logo {
max-width: calc(30%);
align-self: center;
border-radius: 8px;
}
.site-body-left-column-site-name {
font-size: var(--font-smallest);
font-weight: normal;
z-index: 1;
cursor: pointer;
line-height: 32px;
padding: 0px 20px;
text-align: center;
font-family: var(--font-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.site-body-left-column-site-theme-toggle {
margin: 0 auto
}
/* PUBLISH PROPERTIES FORMATTING BY @elkadre */
.propertyitemtable {
display: block;
justify-content: end;
gap: 3px;
font-family: var(--font-monospace);
font-size: var(--font-smaller);
}
.propertyitem {
font-size: var(--font-smallest);
font-weight: normal;
z-index: 1;
cursor: default;
padding: 5px 20px;
text-align: justify;
font-family: var(--font-monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--background-modifier-border);
}
.propertyitemtags {
margin:10px; font-size: var(--font-smaller);
}
/* NOTE CSS CLASSES BY @elkadre */
.documentnote .tag:not(.token) {
border-color: rgb(var(--true-accent-rgb-blue));
background-color: rgba(var(--true-accent-rgb-blue),0.2);
font-size: var(--font-smaller);
color:rgb(var(--true-accent-rgb-blue))
}
.documentnote .callout-title-inner, .documentnote .callout-icon .svg-icon {
color:rgb(var(--true-accent-rgb-blue))
}
.peoplenote .tag:not(.token) {
border-color: rgb(var(--true-accent-rgb-pink));
background-color: rgba(var(--true-accent-rgb-pink),0.2);
font-size: var(--font-smaller);
color:rgb(var(--true-accent-rgb-pink))
}
.peoplenote .callout-title-inner, .peoplenote .callout-icon .svg-icon {
color:rgb(var(--true-accent-rgb-pink))
}
.conceptnote .tag:not(.token) {
border-color: rgb(var(--true-accent-rgb-yellow));
background-color: rgba(var(--true-accent-rgb-yellow),0.2);
font-size: var(--font-smaller);
color:rgb(var(--true-accent-rgb-yellow))
}
.conceptnote .callout-title-inner, .conceptnote .callout-icon .svg-icon {
color:rgb(var(--true-accent-rgb-yellow))
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment