831 lines
22 KiB
CSS
831 lines
22 KiB
CSS
/***** TABLE OF CONTENTS *****/
|
|
/* 1. Font
|
|
/* 2. Colours
|
|
/* 2.1. Hue options (change these numbers for an entirely new look!)
|
|
/* 2.2. Dark theme
|
|
/* 2.3. Light theme
|
|
/* 2.4. Common (calculated)
|
|
/* 3. General UI
|
|
/* 3.1. Title Bar
|
|
/* 4. Markdown (editor / preview)
|
|
/* 4.1. Headings
|
|
/* 4.1.1. Fix font weights
|
|
/* 4.2. Links
|
|
/* 4.2.1. Nifty arrow before internal links (also applies to embeds)
|
|
/* 4.3. Embeds
|
|
/* 4.4. Tables
|
|
/* 4.5. Popovers
|
|
/* 4.6. Task Lists
|
|
/* 4.7. Blockquotes
|
|
/* 4.8. Code
|
|
/* 4.9. Bulleted lists
|
|
/* 4.10. Misc Fixes
|
|
/* 5. Graph view colours
|
|
/* 6. Notion Colour Blocks
|
|
/* 7. In-document header (scrolls with the document) [remove for compatibility with Andy's mode]
|
|
/* 7.1. Adjustments for non-in-document headers (graphs, etc)\
|
|
/* 7.2. Active pane border
|
|
/* 7.3. Misc fixes
|
|
/* 8. Tags
|
|
/* 8.1. Tag custom colours
|
|
/***** *****/
|
|
|
|
/* 1. Font */
|
|
body {
|
|
/* font stacks taken directly from Notion */
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
|
--font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
-webkit-font-smoothing: auto;
|
|
}
|
|
|
|
/* 2. Colours */
|
|
/* 2.1. Hue options ( change these numbers for an entirely new look!) */
|
|
body.theme-light,
|
|
body.theme-dark {
|
|
/* change these numbers for an entirely new look */
|
|
--hue: 203;
|
|
--sat: 8%;
|
|
--interactive-accent-rgb: 46, 170, 220;
|
|
--code: #EB5757;
|
|
|
|
--opacity-translucency: 0.7;
|
|
}
|
|
|
|
/* 2.2. Dark theme */
|
|
.theme-dark {
|
|
--L0: 0%;
|
|
--L1: 20%;
|
|
--L2: 23%;
|
|
--L3: 26%;
|
|
|
|
--text-rgb: 255, 255, 255;
|
|
|
|
--text-highlight-bg: rgb(89, 86, 59);
|
|
--text-selection: hsla(211, 100%, 50%, 0.2);
|
|
--interactive-normal: #2a2a2a;
|
|
--interactive-hover: #303030;
|
|
|
|
--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);
|
|
}
|
|
|
|
/* 2.3. Light theme */
|
|
.theme-light {
|
|
--L0: 0%;
|
|
--L1: 100%;
|
|
--L2: 96%;
|
|
--L3: 90%;
|
|
|
|
--text-rgb: 55, 53, 47;
|
|
|
|
--text-highlight-bg: rgb(251, 243, 219);
|
|
--text-selection: rgba(0, 122, 255, 0.15);
|
|
--interactive-normal: #f2f3f5;
|
|
--interactive-hover: #e9e9e9;
|
|
|
|
--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);
|
|
}
|
|
|
|
/* 2.4. Common (calculated) */
|
|
body.theme-light,
|
|
body.theme-dark {
|
|
--background-primary: hsl(var(--hue), var(--sat), var(--L1));
|
|
--background-primary-alt: hsl(var(--hue), var(--sat), var(--L3));
|
|
--background-secondary: hsl(var(--hue), var(--sat), var(--L2));
|
|
--background-secondary-alt: hsl(var(--hue), var(--sat), var(--L3));
|
|
--background-accent: hsl(var(--hue), var(--sat), var(--L0));
|
|
--background-modifier-border: rgba(var(--text-rgb), 0.14);
|
|
--text-accent: rgba(var(--text-rgb), 0.45);
|
|
--text-accent-hover: rgba(var(--text-rgb), 0.45);
|
|
--text-normal: rgba(var(--text-rgb), 0.9);
|
|
--text-muted: rgba(var(--text-rgb), 0.45);
|
|
--text-faint: rgba(var(--text-rgb), 0.25);
|
|
--text-on-accent: rgba(var(--text-rgb), 0.9);
|
|
--interactive-accent: rgb(var(--interactive-accent-rgb));
|
|
--interactive-accent-hover: rgba(var(--interactive-accent-rgb), 0.8);
|
|
}
|
|
|
|
body.theme-light {
|
|
--background-primary-alt: hsl(var(--hue), var(--sat), var(--L2));
|
|
}
|
|
|
|
/* 3. General UI */
|
|
.view-header-title {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 3.1. Title bar */
|
|
.titlebar {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
.titlebar-inner {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* 4. Markdown (editor / preview)
|
|
/* 4.1. Headings */
|
|
.markdown-preview-view h1 {
|
|
font-size: 30px;
|
|
margin-top: 32px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.markdown-preview-view h2 {
|
|
font-size: 24px;
|
|
margin-top: 23px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.markdown-preview-view h3,
|
|
.markdown-preview-view h4,
|
|
.markdown-preview-view h5,
|
|
.markdown-preview-view h6 {
|
|
font-size: 20px;
|
|
margin-top: 16px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.cm-s-obsidian .cm-header-1 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.cm-s-obsidian .cm-header-2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.cm-s-obsidian .cm-header-3,
|
|
.cm-s-obsidian .cm-header-4,
|
|
.cm-s-obsidian .cm-header-5,
|
|
.cm-s-obsidian .cm-header-6 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.cm-s-obsidian .cm-header-6 {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* 4.1.1. Fix font weights */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
strong,
|
|
.cm-s-obsidian .cm-header {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 4.2. Links */
|
|
.external-link {
|
|
background-image: none;
|
|
/* no external link indicator */
|
|
padding: 0;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.markdown-preview-view .internal-link,
|
|
.popover.hover-popover .markdown-embed .internal-link {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-preview-view .internal-link.is-unresolved {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-link.cm-hmd-barelink {
|
|
/* Not actually a link */
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* 4.2.1. Nifty arrow before internal links (also applies to embeds) */
|
|
.internal-link::before,
|
|
.markdown-embed-link::before {
|
|
content: " ";
|
|
background-color: var(--text-normal);
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpolygon points='5.4 26 24 7.4 24 20 26 20 26 4 10 4 10 6 22.6 6 4 24.6'%3E%3C/polygon%3E%3C/svg%3E");
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 2px;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.markdown-preview-view .internal-link.is-unresolved::before {
|
|
background-color: var(--text-muted);
|
|
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.977 14.963c.407 0 .747-.324.747-.723V8.72h5.362c.399 0 .74-.34.74-.747a.746.746 0 00-.74-.738H8.724V1.706c0-.398-.34-.722-.747-.722a.732.732 0 00-.739.722v5.529h-5.37a.746.746 0 00-.74.738c0 .407.341.747.74.747h5.37v5.52c0 .399.332.723.739.723z"></path></svg>');
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
/* 4.3. embeds (mimics embedded tables from Notion) */
|
|
.markdown-embed-title,
|
|
.markdown-embed-content h1:first-child,
|
|
.markdown-embed-content h2:first-child,
|
|
.markdown-embed-content h3:first-child,
|
|
.markdown-embed-content h4:first-child,
|
|
.markdown-embed-content h5:first-child,
|
|
.markdown-embed-content h6:first-child {
|
|
font-size: 1.25em;
|
|
line-height: 1.5;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-embed-title {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.markdown-preview-view .markdown-embed {
|
|
border: none;
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
border-radius: 0;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.markdown-embed .markdown-preview-view {
|
|
padding-left: 8px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.markdown-embed-link {
|
|
color: var(--text-normal);
|
|
right: unset;
|
|
left: 0;
|
|
top: 3px;
|
|
height: 30px;
|
|
width: calc(100% - 20px);
|
|
margin-left: 4px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.markdown-embed-link::before {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.markdown-embed-link svg {
|
|
display: none;
|
|
/* hide the svg link icon, gets replaced with a nifty arrow */
|
|
}
|
|
|
|
/* 4.4. Tables */
|
|
/* fix for long markdown editor text (tables) getting cut off */
|
|
.CodeMirror-scroll {
|
|
margin-right: -10px;
|
|
}
|
|
|
|
/* table headers and first column styling */
|
|
.markdown-preview-view th:first-child,
|
|
.markdown-preview-view td:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.markdown-preview-view th:last-child,
|
|
.markdown-preview-view td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.markdown-preview-view th {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.markdown-preview-view td:first-child {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-preview-view hr {
|
|
height: 1px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 4.5. Popovers */
|
|
.popover.hover-popover .markdown-embed-link {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 4.6. Task lists */
|
|
.markdown-preview-view .task-list-item-checkbox {
|
|
-webkit-appearance: none;
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--text-normal);
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
margin-right: 4px;
|
|
margin-bottom: 2px;
|
|
transition: background-color 200ms ease-out 0s;
|
|
cursor: pointer;
|
|
filter: none;
|
|
}
|
|
|
|
.markdown-preview-view .task-list-item-checkbox:checked {
|
|
border: none;
|
|
background-color: var(--interactive-accent);
|
|
}
|
|
|
|
.markdown-preview-view .task-list-item-checkbox:hover {
|
|
background-color: var(--background-primary-alt);
|
|
}
|
|
|
|
/* the SVG check mark */
|
|
.markdown-preview-view .task-list-item-checkbox:checked::before {
|
|
content: ' ';
|
|
position: absolute;
|
|
background-color: white;
|
|
left: 2px;
|
|
top: 2px;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolygon points='5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039'%3E%3C/polygon%3E%3C/svg%3E");
|
|
}
|
|
|
|
.markdown-preview-view ul>li.task-list-item.is-checked {
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* 4.7. Blockquotes */
|
|
.markdown-preview-view blockquote,
|
|
.cm-s-obsidian pre.HyperMD-quote-1 {
|
|
border: none;
|
|
border-left: 3px solid currentcolor;
|
|
}
|
|
|
|
/* for some reason messing with the padding and size like this caused weirdness
|
|
with the editor mode cursor position. So just preview for now */
|
|
.markdown-preview-view blockquote {
|
|
padding: 0 0.9em;
|
|
font-size: 1.2em;
|
|
margin: 3px 2px;
|
|
}
|
|
|
|
/* 4.8. Code */
|
|
.markdown-preview-view code,
|
|
.cm-s-obsidian span.cm-inline-code,
|
|
.cm-s-obsidian pre.HyperMD-codeblock {
|
|
color: var(--code);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
.markdown-preview-view pre>code {
|
|
padding: 24px 6px 24px 10px;
|
|
color: var(--text-normal);
|
|
display: block;
|
|
overflow: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* 4.9. Bulleted lists */
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-inline-start: 24px;
|
|
}
|
|
|
|
ul>li,
|
|
ol>li {
|
|
padding: 3px 2px;
|
|
min-height: calc(1.5em + 6px);
|
|
margin-top: 2px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
/* 4.10. Misc fixes */
|
|
.cm-s-obsidian span.cm-quote {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* escape character */
|
|
.cm-s-obsidian span.cm-hmd-escape-backslash {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* highlight */
|
|
.markdown-preview-view mark {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* 5. Graph view colours */
|
|
.graph-view.color-fill,
|
|
.graph-view.color-arrow {
|
|
color: hsl(var(--hue), var(--sat), 50%);
|
|
}
|
|
|
|
.graph-view.color-fill-unresolved {
|
|
color: hsl(var(--hue), var(--sat), 50%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.graph-view.color-line {
|
|
color: hsl(var(--hue), var(--sat), 50%);
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.graph-view.color-text {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.graph-view.color-fill-highlight {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.graph-view.color-line-highlight {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.theme-light .graph-view.color-fill-attachment,
|
|
.theme-dark .graph-view.color-fill-attachment {
|
|
color: var(--background-blue);
|
|
}
|
|
|
|
.theme-dark .graph-view.color-fill-tag,
|
|
.theme-light .graph-view.color-fill-tag {
|
|
color: var(--text-yellow);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 7. In-document header (scrolls with the document) [remove for compatibility with Andy's mode] */
|
|
/* !!! Remove from here down if you want to use with Andy Matuschak mode V2 !!! */
|
|
.markdown-preview-view,
|
|
.markdown-source-view {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* fix to padding top so that the editor and preview line up */
|
|
.markdown-source-view.is-readable-line-width .CodeMirror {
|
|
padding: 0;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.markdown-preview-view,
|
|
.CodeMirror-lines {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.markdown-preview-view {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
/* This is where the magic happens */
|
|
.workspace-leaf-content[data-type=markdown] .view-header,
|
|
.workspace-leaf.mod-active .workspace-leaf-content[data-type=markdown] .view-header {
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 0;
|
|
border: none;
|
|
background-color: transparent;
|
|
height: auto;
|
|
padding-top: 108px;
|
|
}
|
|
|
|
.workspace-split.mod-root .workspace-leaf {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.workspace>.workspace-split>.workspace-leaf:first-of-type:last-of-type .workspace-leaf-content[data-type=markdown] .view-header {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.workspace-leaf {
|
|
position: relative;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] {
|
|
overflow: auto;
|
|
position: unset;
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] .view-header-title-container {
|
|
width: 100%;
|
|
margin-top: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] .view-header-title-container:after {
|
|
content: none;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] .view-header-title {
|
|
font-size: 40px;
|
|
line-height: 1.2em;
|
|
padding: 3px 2px;
|
|
height: auto;
|
|
margin: 0;
|
|
color: var(--text-normal);
|
|
white-space: normal;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] .view-actions {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background-color: transparent;
|
|
z-index: 1;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] .view-header-icon {
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] .view-content {
|
|
height: auto;
|
|
}
|
|
|
|
.workspace-leaf-content[data-type=markdown] .markdown-source-view {
|
|
z-index: 0;
|
|
}
|
|
|
|
.view-action {
|
|
color: var(--text-normal);
|
|
margin: 0;
|
|
padding: 0 8px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
border-radius: 3px;
|
|
transition: background-color 20ms ease-in 0s;
|
|
}
|
|
|
|
.view-action>svg {
|
|
max-width: 14px;
|
|
max-height: 14px;
|
|
}
|
|
|
|
.view-action:hover,
|
|
.view-action.is-active {
|
|
color: var(--text-normal);
|
|
background-color: var(--background-primary-alt);
|
|
}
|
|
|
|
.workspace-split.mod-vertical>.workspace-leaf:not(:last-child) {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* 7.1. Adjustments for non-in-document headers (graphs, etc) */
|
|
.workspace-leaf-content:not([data-type=markdown]) .view-header,
|
|
.workspace-leaf.mod-active .workspace-leaf-content:not([data-type=markdown]) .view-header {
|
|
border: none;
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.workspace-leaf-content:not([data-type=markdown]) .view-header-title-container:after,
|
|
.workspace-leaf.mod-active .workspace-leaf-content:not([data-type=markdown]) .view-header-title-container:after {
|
|
background: linear-gradient(to right, transparent, var(--background-primary));
|
|
}
|
|
|
|
/* 7.2. Active pane border */
|
|
/* Notion doesn't have multiple panes. And with the header modifications above,
|
|
how do you tell which pane is active? I'm just putting a border around the
|
|
active pane for now (unless there's only one pane) */
|
|
.workspace-leaf.mod-active {
|
|
border: 1px solid var(--interactive-accent);
|
|
}
|
|
|
|
.workspace-leaf:not(.mod-active),
|
|
.workspace>.workspace-split>.workspace-leaf:first-of-type:last-of-type {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
/* 7.3 Misc fixes */
|
|
/* Fix for the search pane scrolling off the page */
|
|
.markdown-source-view,
|
|
.workspace-split.mod-root .view-content {
|
|
position: unset;
|
|
}
|
|
|
|
/* 8. Tags */
|
|
a.tag,
|
|
.cm-s-obsidian span.cm-hashtag,
|
|
.tag-pane-tag-text {
|
|
color: var(--text-normal);
|
|
text-decoration: none;
|
|
background-color: var(--background-yellow);
|
|
padding: 3px 6px;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
border: none;
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-hashtag-begin {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right: none;
|
|
padding-right: 0;
|
|
font-size: 15px; /* why? I dunno. Just needs it to balance out */
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-hashtag-end {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-left: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* 8.1. Tag custom colours */
|
|
/* As of Obsidian 0.9.0 there are custom classes for tags.
|
|
* this theme provides varibles of the form --background-<color> and --text-<color> for the following colours:
|
|
* gray, brown, orange, yellow, green, blue, purple, pink, red
|
|
* If you want your own colours for your own specific tags you can copy and utilize this: */
|
|
.cm-s-obsidian span.cm-hashtag.cm-tag-important,
|
|
.tag[href="#important"] {
|
|
background-color: var(--background-red);
|
|
} |