You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
6.3 KiB
203 lines
6.3 KiB
/* Dark theme */
|
|
.theme-dark {
|
|
--text-gray: rgba(255, 255, 255, 0.6);
|
|
--text-brown: rgb(147, 114, 100);
|
|
--text-orange: rgb(255, 163, 68);
|
|
--text-yellow: rgb(255, 220, 73);
|
|
--text-green: rgb(77, 171, 154);
|
|
--text-blue: rgb(82, 156, 202);
|
|
--text-purple: rgb(154, 109, 215);
|
|
--text-pink: rgb(226, 85, 161);
|
|
--text-red: rgb(255, 115, 105);
|
|
|
|
--background-gray: rgb(69, 75, 78);
|
|
--background-brown: rgb(67, 64, 64);
|
|
--background-orange: rgb(89, 74, 58);
|
|
--background-yellow: rgb(89, 86, 59);
|
|
--background-green: rgb(53, 76, 75);
|
|
--background-blue: rgb(54, 73, 84);
|
|
--background-purple: rgb(68, 63, 87);
|
|
--background-pink: rgb(83, 59, 76);
|
|
--background-red: rgb(89, 65, 65);
|
|
}
|
|
|
|
/* Light theme */
|
|
.theme-light {
|
|
--text-gray: rgba(55, 53, 47, 0.6);
|
|
--text-brown: rgb(100, 71, 58);
|
|
--text-orange: rgb(217, 115, 13);
|
|
--text-yellow: rgb(223, 171, 1);
|
|
--text-green: rgb(15, 123, 108);
|
|
--text-blue: rgb(11, 110, 153);
|
|
--text-purple: rgb(105, 64, 165);
|
|
--text-pink: rgb(173, 26, 114);
|
|
--text-red: rgb(224, 62, 62);
|
|
|
|
--background-gray: rgb(235, 236, 237);
|
|
--background-brown: rgb(233, 229, 227);
|
|
--background-orange: rgb(250, 235, 221);
|
|
--background-yellow: rgb(251, 243, 219);
|
|
--background-green: rgb(221, 237, 234);
|
|
--background-blue: rgb(221, 235, 241);
|
|
--background-purple: rgb(234, 228, 242);
|
|
--background-pink: rgb(244, 223, 235);
|
|
--background-red: rgb(251, 228, 228);
|
|
}
|
|
|
|
/* 6. Notion Colour Blocks */
|
|
/* Original idea from: https://gist.github.com/mklepaczewski/54e451f09994b9d450de81c8baaf8aa4 */
|
|
/* but also with simpler classes so you can use `<span class='colour'>` as well */
|
|
|
|
.app-container .markdown-preview-view pre[class*="language-note-"] {
|
|
padding: 3px 2px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre[class*="language-note-"] code[class*="language-note-"] {
|
|
color: var(--text-normal);
|
|
white-space: pre-wrap;
|
|
font-family: var(--default-font);
|
|
font-size: 1rem;
|
|
padding: 0;
|
|
background:none;
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-notice,
|
|
.app-container .markdown-preview-view pre.language-note-gray-background,
|
|
.app-container .markdown-preview-view pre.language-note-gray-bg,
|
|
.gray-background,
|
|
.gray-bg {
|
|
background-color: var(--background-gray);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-brown-background,
|
|
.app-container .markdown-preview-view pre.language-note-brown-bg,
|
|
.brown-background,
|
|
.brown-bg {
|
|
background-color: var(--background-brown);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-orange-background,
|
|
.app-container .markdown-preview-view pre.language-note-orange-bg,
|
|
.orange-background,
|
|
.orange-bg {
|
|
background-color: var(--background-orange);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-warn,
|
|
.app-container .markdown-preview-view pre.language-note-yellow-background,
|
|
.app-container .markdown-preview-view pre.language-note-yellow-bg,
|
|
.yellow-background,
|
|
.yellow-bg {
|
|
background-color: var(--background-yellow)
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-success,
|
|
.app-container .markdown-preview-view pre.language-note-green-background,
|
|
.app-container .markdown-preview-view pre.language-note-green-bg,
|
|
.green-background,
|
|
.green-bg {
|
|
background-color: var(--background-green);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-info,
|
|
.app-container .markdown-preview-view pre.language-note-blue-background,
|
|
.app-container .markdown-preview-view pre.language-note-blue-bg,
|
|
.blue-background,
|
|
.blue-bg {
|
|
background-color: var(--background-blue);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-purple-background,
|
|
.app-container .markdown-preview-view pre.language-note-purple-bg,
|
|
.purple-background,
|
|
.purple-bg {
|
|
background-color: var(--background-purple);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-pink-background,
|
|
.app-container .markdown-preview-view pre.language-note-pink-bg,
|
|
.pink-background,
|
|
.pink-bg {
|
|
background-color: var(--background-pink);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-danger,
|
|
.app-container .markdown-preview-view pre.language-note-red-background,
|
|
.app-container .markdown-preview-view pre.language-note-red-bg,
|
|
.red-background,
|
|
.red-bg {
|
|
background-color: var(--background-red);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-gray,
|
|
.app-container .markdown-preview-view pre.language-note-brown,
|
|
.app-container .markdown-preview-view pre.language-note-orange,
|
|
.app-container .markdown-preview-view pre.language-note-yellow,
|
|
.app-container .markdown-preview-view pre.language-note-green,
|
|
.app-container .markdown-preview-view pre.language-note-blue,
|
|
.app-container .markdown-preview-view pre.language-note-purple,
|
|
.app-container .markdown-preview-view pre.language-note-pink,
|
|
.app-container .markdown-preview-view pre.language-note-red {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-gray code.language-note-gray,
|
|
.gray {
|
|
color: var(--text-gray);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-brown code.language-note-brown,
|
|
.brown {
|
|
color: var(--text-brown);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-orange code.language-note-orange,
|
|
.orange {
|
|
color: var(--text-orange);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-yellow code.language-note-yellow,
|
|
.yellow {
|
|
color: var(--text-yellow)
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-green code.language-note-green,
|
|
.green {
|
|
color: var(--text-green);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-blue code.language-note-blue,
|
|
.blue {
|
|
color: var(--text-blue);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-purple code.language-note-purple,
|
|
.purple {
|
|
color: var(--text-purple);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-pink code.language-note-pink,
|
|
.pink {
|
|
color: var(--text-pink);
|
|
}
|
|
|
|
.app-container .markdown-preview-view pre.language-note-red code.language-note-red,
|
|
.red {
|
|
color: var(--text-red);
|
|
}
|
|
|
|
body {
|
|
--callout-border-width: 0 0 0 4px;
|
|
--callout-border-opacity: 1;
|
|
--callout-radius: 0;
|
|
--callout-padding: 0;
|
|
--callout-title-padding: var(--size-4-4) var(--size-4-4);
|
|
--callout-content-padding: var(--size-4-2) var(--size-4-4);
|
|
}
|
|
.callout-title-inner {
|
|
color: var(--text-normal);
|
|
}
|
|
.callout-content {
|
|
background-color: var(--background-primary-alt);
|
|
} |