491 lines
12 KiB
CSS
491 lines
12 KiB
CSS
/***** Table of Contents ****/
|
|
/* 1. Colours
|
|
/* 2. General UI
|
|
/* 2.1. Title bar
|
|
/* 3. Editor and preview
|
|
/* 3.1. Headers
|
|
/* 3.2. Formatting operators
|
|
/* 3.3. External links
|
|
/* 3.4. Internal links
|
|
/* 3.5. blockquotes, embeds, tables
|
|
/* 3.6. Code
|
|
/* 3.7. Strikethrough
|
|
/* 3.8. Escape chars
|
|
/* 3.9. Bullets and numbering
|
|
/* 3.9.1. Bullet lists
|
|
/* 3.9.2. Numbered lists
|
|
/* 3.9.3. Task lists
|
|
/* 4. Graph view
|
|
/* 5. Misc Fixes
|
|
/* 5.1. Fixes for highlight
|
|
/* 5.2. fixes for buttons
|
|
/* 6. BONUS! CRT Scanlines and flicker
|
|
/* 6.1. Pentile effect (chunky pixels)
|
|
/* 6.2. Screen flicker
|
|
/* 6.3. Text blur effect
|
|
|
|
/* 1. Colours! Overriding both themes */
|
|
.theme-dark,
|
|
.theme-light {
|
|
--accent-1: #FF00FF;
|
|
--accent-2: #00FFFF;
|
|
--accent-3: #00FF00;
|
|
--accent-4: #FFFF00;
|
|
--accent-5: #FF0000;
|
|
--accent-6: #0000FF;
|
|
|
|
--accent-1-muted: #ff79c6;
|
|
--accent-2-muted: #8be9fd;
|
|
--accent-3-muted: #50fa7b;
|
|
--accent-4-muted: #ffb86c;
|
|
--accent-5-muted: #ff5555;
|
|
--accent-6-muted: #bd93f9;
|
|
|
|
--background-primary: #2b213a;
|
|
--background-primary-alt: #171520;
|
|
--background-secondary: #1a1836;
|
|
--background-secondary-alt: #242043;
|
|
|
|
--text-accent: #FF1690;
|
|
--text-accent-hover: #7a6ae6;
|
|
|
|
--text-normal: var(--accent-1);
|
|
--text-muted: var(--accent-1-muted);
|
|
--text-faint: var(--accent-6-muted);
|
|
|
|
--interactive-normal: var(--accent-2);
|
|
--interactive-hover: var(--accent-2-muted);
|
|
--interactive-accent: var(--accent-2);
|
|
--interactive-accent-hover: var(--accent-2-muted);
|
|
|
|
--background-accent: #000;
|
|
--background-modifier-border: var(--accent-2);
|
|
|
|
--text-highlight-bg: #ffd319;
|
|
|
|
|
|
/* obsidian dark defaults (overriding for light) */
|
|
--text-selection: rgba(0, 122, 255, 0.2);
|
|
--text-on-accent: rgba(0, 0, 0, 0.8);
|
|
--interactive-accent-rgb: 72, 54, 153;
|
|
--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
|
|
--scrollbar-bg: rgba(255, 255, 255, 0.05);
|
|
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* 2. General UI */
|
|
.side-dock-ribbon-tab,
|
|
.side-dock-ribbon-action {
|
|
color: var(--accent-6-muted);
|
|
}
|
|
|
|
.workspace-leaf.mod-active .workspace-leaf-header-title {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
/* 2.1. Title bar */
|
|
.titlebar {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.titlebar-inner {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.titlebar-inner {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.titlebar-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.titlebar-button:hover {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.titlebar-button.mod-close:hover {
|
|
background-color: var(--accent-5);
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
/* 3. Editor and preview */
|
|
.cm-s-obsidian,
|
|
.markdown-preview-view {
|
|
--text-normal: rgba(255, 220, 255, 0.8);
|
|
--text-faint: rgba(255, 220, 255, 0.25);
|
|
--text-accent: var(--accent-2);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.CodeMirror-guttermarker-subtle {
|
|
color: var(--accent-1);
|
|
}
|
|
|
|
/* 3.1. Headers */
|
|
.cm-s-obsidian .cm-header,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: 600;
|
|
overflow: visible;
|
|
}
|
|
|
|
.cm-s-obsidian .cm-formatting-header {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.cm-header-1:not(.cm-formatting),
|
|
h1 {
|
|
text-shadow: 0 0 0.5em var(--accent-1);
|
|
}
|
|
|
|
.cm-header-2:not(.cm-formatting),
|
|
h2 {
|
|
text-shadow: 0 0 0.5em var(--accent-2);
|
|
}
|
|
|
|
.cm-header-3:not(.cm-formatting),
|
|
h3 {
|
|
text-shadow: 0 0 0.5em var(--accent-3);
|
|
}
|
|
|
|
.cm-header-4:not(.cm-formatting),
|
|
h4 {
|
|
text-shadow: 0 0 0.5em var(--accent-4);
|
|
}
|
|
|
|
.cm-header-5:not(.cm-formatting),
|
|
h5 {
|
|
text-shadow: 0 0 0.5em var(--accent-5);
|
|
}
|
|
|
|
.cm-header-6:not(.cm-formatting),
|
|
h6 {
|
|
text-shadow: 0 0 0.5em var(--accent-6);
|
|
}
|
|
|
|
/* 3.2. Formatting operators */
|
|
.cm-s-obsidian .cm-formatting,
|
|
.cm-s-obsidian span.cm-formatting-link,
|
|
.cm-s-obsidian span.cm-formatting-link-string.cm-url,
|
|
.cm-s-obsidian span.cm-inline-code.cm-formatting-code,
|
|
.cm-s-obsidian span.cm-formatting-code,
|
|
.cm-s-obsidian span.cm-formatting-quote,
|
|
.cm-s-obsidian span.cm-hr,
|
|
.cm-s-obsidian pre.HyperMD-table-row span.cm-hmd-table-sep,
|
|
.cm-s-obsidian pre.HyperMD-table-row-1>span {
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
/* 3.3. External links */
|
|
.cm-s-obsidian .cm-formatting-link+.cm-formatting-link-string+.cm-url,
|
|
.cm-s-obsidian .cm-string.cm-url,
|
|
.cm-s-obsidian span.cm-link:not(.cm-formatting),
|
|
.cm-s-obsidian span.cm-url,
|
|
a {
|
|
color: var(--accent-1-muted);
|
|
}
|
|
|
|
/* 3.4. Internal links */
|
|
.cm-s-obsidian span.cm-hashtag,
|
|
.cm-s-obsidian span.cm-hmd-internal-link,
|
|
a.internal-link,
|
|
a.tag {
|
|
color: var(--accent-1);
|
|
}
|
|
|
|
/* 3.5. blockquotes, embeds, tables */
|
|
.markdown-preview-view blockquote,
|
|
.markdown-preview-view .markdown-embed,
|
|
.markdown-preview-view .file-embed,
|
|
.markdown-preview-view th,
|
|
.markdown-preview-view td {
|
|
box-shadow: 0 0 0.25em var(--accent-2),
|
|
inset 0 0 0.25em var(--accent-2);
|
|
}
|
|
|
|
.markdown-preview-view hr {
|
|
box-shadow: 0 0 0.5em var(--accent-2);
|
|
}
|
|
|
|
/* 3.6. Code */
|
|
.cm-s-obsidian span.cm-inline-code,
|
|
code {
|
|
color: var(--accent-1);
|
|
}
|
|
|
|
.markdown-preview-view code {
|
|
color: var(--accent-1)
|
|
}
|
|
|
|
.cm-s-obsidian pre.HyperMD-codeblock {
|
|
color: var(--accent-6-muted);
|
|
}
|
|
|
|
pre code {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* 3.7. Strikethrough */
|
|
.cm-strikethrough,
|
|
s {
|
|
text-decoration-color: var(--accent-1);
|
|
}
|
|
|
|
/* 3.8. Escape chars */
|
|
.cm-s-obsidian span.cm-hmd-escape-backslash {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-hmd-escape-char {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* 3.9. Bullets and numbering */
|
|
.cm-s-obsidian span.cm-formatting-list,
|
|
.cm-s-obsidian span.cm-formatting-task {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-formatting-list {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 3.9.1. Bullet lists */
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
li>p {
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ul li:not(.task-list-item)::before {
|
|
content: "•";
|
|
/* 🤔 need to think of some better bullet chars */
|
|
color: var(--accent-2);
|
|
display: inline-block;
|
|
width: 1em;
|
|
margin-left: -1em;
|
|
padding: 0;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 0.5em var(--accent-2);
|
|
}
|
|
|
|
ul ul li:not(.task-list-item)::before {
|
|
content: "◦"
|
|
}
|
|
|
|
ul ul ul li:not(.task-list-item)::before {
|
|
content: "▪"
|
|
}
|
|
|
|
/* 3.9.2. Numbered lists */
|
|
ol {
|
|
list-style: none;
|
|
counter-reset: li
|
|
}
|
|
|
|
ol>li {
|
|
counter-increment: li;
|
|
}
|
|
|
|
ol>li:not(.task-list-item)::before,
|
|
ul ol>li:not(.task-list-item)::before,
|
|
ul ul ol>li:not(.task-list-item)::before,
|
|
ul ul ul ol>li:not(.task-list-item)::before {
|
|
content: counter(li) ".";
|
|
color: var(--accent-2);
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
margin-left: -2.5em;
|
|
margin-right: 0.5em;
|
|
width: 2em;
|
|
text-align: right;
|
|
word-wrap: none;
|
|
overflow: visible;
|
|
word-break: keep-all;
|
|
text-shadow: 0 0 0.5em var(--accent-2);
|
|
}
|
|
|
|
/* 3.9.3. Task lists! (I'm proud of this, but could use improvement) */
|
|
.markdown-preview-view .task-list-item-checkbox {
|
|
-webkit-appearance: none;
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--accent-2);
|
|
position: relative;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
margin: 0;
|
|
margin-right: 0.5em;
|
|
box-shadow: 0 0 0.5em var(--accent-2);
|
|
}
|
|
|
|
.markdown-preview-view .task-list-item-checkbox:checked::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
color: var(--accent-2);
|
|
font-size: 1em;
|
|
line-height: 1.25em;
|
|
width: 1.2em;
|
|
text-align: center;
|
|
text-shadow: 0 0 0.5em var(--accent-2);
|
|
}
|
|
|
|
/* 4. Graph view */
|
|
.graph-view.color-fill {
|
|
/* default */
|
|
}
|
|
|
|
.graph-view.color-fill-unresolved {
|
|
color: var(--accent-1);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.graph-view.color-line {
|
|
/* color: var(--accent-2);
|
|
opacity: 0.5; */
|
|
color: #2B8B98;
|
|
}
|
|
|
|
.graph-view.color-arrow {
|
|
color: var(--accent-2);
|
|
opacity: 1;
|
|
}
|
|
|
|
.graph-view.color-text {
|
|
color: rgba(255, 220, 255);
|
|
}
|
|
|
|
.graph-view.color-fill-highlight {
|
|
/* default */
|
|
}
|
|
|
|
.graph-view.color-line-highlight {
|
|
/* default */
|
|
}
|
|
|
|
.theme-light .graph-view.color-fill-attachment,
|
|
.theme-dark .graph-view.color-fill-attachment {
|
|
color: var(--accent-6);
|
|
}
|
|
|
|
.theme-dark .graph-view.color-fill-tag,
|
|
.theme-light .graph-view.color-fill-tag {
|
|
color: var(--accent-4);
|
|
}
|
|
|
|
/* 5. Misc Fixes */
|
|
/* 5.1. Fixes for highlight */
|
|
.cm-s-obsidian span.cm-formatting-highlight,
|
|
.cm-s-obsidian span.cm-highlight,
|
|
.markdown-preview-view mark,
|
|
.search-result-file-matched-text {
|
|
color: var(--background-secondary);
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-formatting-highlight {
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
/* 5.2. fixes for buttons */
|
|
button.mod-warning {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* 6. BONUS! CRT Scanlines and flicker!
|
|
* It's not for everyone though, so it's disabled by default.
|
|
* simply remove the `/*` below a subsection to enable it **/
|
|
|
|
/* 6.1. Pentile effect (chunky pixels) */
|
|
/* DELETE THIS LINE TO ENABLE
|
|
.app-container::before {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
|
z-index: 2;
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 6.2. Screen flicker */
|
|
/* DELETE THIS LINE TO ENABLE
|
|
.app-container::after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(18, 16, 16, 0.1);
|
|
opacity: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
animation: flicker 0.15s infinite;
|
|
}
|
|
@keyframes flicker {
|
|
0% {opacity: 0.27861;}
|
|
5% {opacity: 0.34769;}
|
|
10% {opacity: 0.23604;}
|
|
15% {opacity: 0.90626;}
|
|
20% {opacity: 0.18128;}
|
|
25% {opacity: 0.83891;}
|
|
30% {opacity: 0.65583;}
|
|
35% {opacity: 0.67807;}
|
|
40% {opacity: 0.26559;}
|
|
45% {opacity: 0.84693;}
|
|
50% {opacity: 0.96019;}
|
|
55% {opacity: 0.08594;}
|
|
60% {opacity: 0.20313;}
|
|
65% {opacity: 0.71988;}
|
|
70% {opacity: 0.53455;}
|
|
75% {opacity: 0.37288;}
|
|
80% {opacity: 0.71428;}
|
|
85% {opacity: 0.70419;}
|
|
90% {opacity: 0.7003;}
|
|
95% {opacity: 0.36108;}
|
|
100% {opacity: 0.24387;}
|
|
}
|
|
|
|
/* 6.3. Text blur effect */
|
|
/* DELETE THIS LINE TO ENABLE
|
|
.app-container {
|
|
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
|
animation: textShadow 1.6s infinite;
|
|
}
|
|
@keyframes textShadow {
|
|
0% {text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
5% {text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
10% {text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
15% {text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
20% {text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
25% {text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
30% {text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
35% {text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
40% {text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
45% {text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
50% {text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
55% {text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
60% {text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
65% {text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
70% {text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
75% {text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
80% {text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
85% {text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
90% {text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
95% {text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
100% {text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;}
|
|
}
|
|
/**/ |