obsidian-theme/def-peter_obsidian-aera-theme
1
0
Fork 0
mirror of https://github.com/def-peter/obsidian-aera-theme.git synced 2026-07-22 05:00:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
def-peter_obsidian-aera-theme/theme.css

418 lines
12 KiB
CSS
Raw Blame History

/* Aera - A quiet interface for clear thinking. */
.theme-light {
--color-base-00: #f8fafc;
--color-base-05: #f5f7fa;
--color-base-10: #f1f4f8;
--color-base-20: #e9eef5;
--color-base-25: #dde3eb;
--color-base-30: #cdd5df;
--color-base-35: #bec8d4;
--color-base-40: #a9b4c2;
--color-base-50: #8793a3;
--color-base-60: #647184;
--color-base-70: #475467;
--color-base-100: #202936;
--background-primary: var(--color-base-00);
--background-secondary: var(--color-base-10);
--text-normal: var(--color-base-100);
--text-muted: var(--color-base-60);
--text-faint: var(--color-base-50);
--text-highlight-bg: rgba(245, 198, 50, 0.22);
--accent-h: 215;
--accent-s: 100%;
--accent-l: 54.3%;
--interactive-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--text-accent: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%));
--text-accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 14%));
--aera-inline-code-background: #d9dee5;
--aera-inline-code-color: #566273;
--aera-callout-background-opacity: 0.08;
--aera-callout-title-semantic-weight: 52%;
--aera-callout-body-semantic-weight: 50%;
--aera-quote-background: #f1f3f6;
--aera-quote-fold: #d9dee5;
}
.theme-dark {
--color-base-00: #17191c;
--color-base-05: #1b1e22;
--color-base-10: #20242a;
--color-base-20: #282d34;
--color-base-25: #30363e;
--color-base-30: #39414b;
--color-base-35: #46505c;
--color-base-40: #596575;
--color-base-50: #748092;
--color-base-60: #9aa5b4;
--color-base-70: #c1c7d0;
--color-base-100: #e7ebf0;
--background-primary: var(--color-base-00);
--background-secondary: var(--color-base-10);
--text-normal: var(--color-base-100);
--text-muted: var(--color-base-60);
--text-faint: var(--color-base-50);
--text-highlight-bg: rgba(245, 198, 50, 0.26);
--accent-h: 213;
--accent-s: 100%;
--accent-l: 62.5%;
--interactive-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--text-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--text-accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
--aera-inline-code-background: #2a2f36;
--aera-inline-code-color: #b8c0cc;
--aera-callout-background-opacity: 0.12;
--aera-callout-title-semantic-weight: 84%;
--aera-callout-body-semantic-weight: 72%;
--aera-quote-background: #22262c;
--aera-quote-fold: #3a414a;
}
body {
--font-text-theme: "Avenir Next", Avenir, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
"Noto Sans CJK SC", sans-serif;
--font-monospace-theme: ui-monospace, SFMono-Regular, Consolas,
"Liberation Mono", monospace;
--line-height-normal: 1.8;
--p-spacing: var(--size-4-3);
--heading-spacing: var(--size-4-8);
--bold-modifier: 200;
}
body {
--callout-padding: var(--size-4-3) var(--size-4-4);
--callout-title-padding: 0;
--callout-content-padding: var(--size-4-2) 0 0;
--metadata-gap: var(--size-2-3);
--metadata-property-padding: var(--size-2-3) var(--size-4-2);
--embed-padding: 0 0 0 var(--size-4-4);
--tag-padding-x: var(--size-2-3);
--tag-padding-y: var(--size-2-1);
}
body {
--inline-title-color: var(--text-normal);
--inline-title-font: var(--font-text);
--inline-title-line-height: 1.25;
--inline-title-size: 2em;
--inline-title-weight: 650;
--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);
--h1-line-height: 1.28;
--h2-line-height: 1.35;
--h3-line-height: 1.4;
--h4-line-height: 1.45;
--h5-line-height: 1.5;
--h6-line-height: 1.5;
--h1-size: 1.85em;
--h2-size: 1.42em;
--h3-size: 1.16em;
--h4-size: 1.05em;
--h5-size: 1em;
--h6-size: 0.9em;
--h1-weight: 650;
--h2-weight: 650;
--h3-weight: 600;
--h4-weight: 600;
--h5-weight: 600;
--h6-weight: 600;
}
body {
--bold-color: var(--text-normal);
--italic-color: var(--text-normal);
--link-color: var(--text-accent);
--link-color-hover: var(--text-accent-hover);
--link-decoration: none;
--link-decoration-hover: underline;
--link-decoration-thickness: 1px;
--link-weight: 500;
--link-unresolved-color: var(--text-muted);
--link-unresolved-opacity: 1;
--link-unresolved-decoration-style: dotted;
--link-unresolved-decoration-color: var(--text-faint);
--link-external-color: var(--text-accent);
--link-external-color-hover: var(--text-accent-hover);
--link-external-decoration: none;
--link-external-decoration-hover: underline;
}
body {
--list-indent: 2em;
--list-indent-editing: 0.75em;
--list-spacing: var(--size-2-1);
--list-marker-color: var(--text-muted);
--list-marker-color-hover: var(--text-accent);
--list-marker-color-collapsed: var(--text-accent);
--list-bullet-border: 1px solid var(--text-muted);
--list-bullet-radius: 50%;
--list-bullet-size: 5px;
--checkbox-radius: 4px;
--checkbox-size: 16px;
--checkbox-marker-color: var(--text-on-accent);
--checkbox-color: var(--interactive-accent);
--checkbox-color-hover: var(--interactive-accent-hover);
--checkbox-border-color: var(--text-faint);
--checkbox-border-color-hover: var(--text-muted);
--checklist-done-decoration: line-through;
--checklist-done-color: var(--text-faint);
}
body {
--blockquote-background-color: var(--aera-quote-background);
--blockquote-border-thickness: 0px;
--blockquote-border-color: transparent;
--blockquote-font-style: normal;
--blockquote-style: normal;
--blockquote-color: var(--text-muted);
--hr-color: var(--background-modifier-border);
--hr-thickness: 1px;
}
.markdown-rendered blockquote {
position: relative;
margin-inline: 0;
padding: var(--size-4-4) var(--size-4-5);
background: var(--aera-quote-background);
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
color: var(--blockquote-color);
}
.markdown-rendered blockquote:not(blockquote blockquote)::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: -1px;
width: 16px;
height: 16px;
pointer-events: none;
background: var(--background-primary);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.markdown-rendered blockquote:not(blockquote blockquote)::after {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: -1px;
width: 16px;
height: 16px;
pointer-events: none;
background: var(--aera-quote-fold);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote) {
position: relative;
padding-block-start: var(--size-4-3);
border-radius: 6px 6px 0 0;
}
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: -1px;
width: 16px;
height: 16px;
pointer-events: none;
background: var(--background-primary);
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)::after {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline-start: -1px;
width: 16px;
height: 16px;
pointer-events: none;
background: var(--aera-quote-fold);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.markdown-source-view.mod-cm6:not(.is-live-preview) .HyperMD-quote {
background: var(--aera-quote-background);
color: var(--blockquote-color);
}
body {
--code-background: var(--aera-inline-code-background);
--code-normal: var(--aera-inline-code-color);
--code-white-space: pre;
--code-size: .88em;
}
:where(.markdown-rendered pre:not(.frontmatter)) {
--code-background: #272822;
--code-normal: #f8f8f2;
--code-comment: #929388;
--code-function: #a6e22e;
--code-important: #fd971f;
--code-keyword: #ff4b8b;
--code-operator: #f8f8f2;
--code-punctuation: #f8f8f2;
--code-property: #66d9ef;
--code-string: #e6db74;
--code-tag: #ff4b8b;
--code-value: #ae81ff;
--code-border-width: 1px;
--code-border-color: #3e3d32;
--code-radius: 6px;
background-color: #272822;
color: #f8f8f2;
}
:where(.markdown-rendered pre:not(.frontmatter)) code[class*=language-] {
white-space: pre;
}
:where(.markdown-source-view.mod-cm6 .HyperMD-codeblock) {
--code-background: #272822;
--code-normal: #f8f8f2;
--code-comment: #929388;
--code-function: #a6e22e;
--code-important: #fd971f;
--code-keyword: #ff4b8b;
--code-operator: #f8f8f2;
--code-punctuation: #f8f8f2;
--code-property: #66d9ef;
--code-string: #e6db74;
--code-tag: #ff4b8b;
--code-value: #ae81ff;
--code-border-width: 1px;
--code-border-color: #3e3d32;
--code-radius: 6px;
background-color: #272822;
color: #f8f8f2;
}
.markdown-source-view.mod-cm6 :where(.HyperMD-codeblock) {
white-space: pre;
word-break: normal;
overflow-wrap: normal;
width: max-content;
min-width: 100%;
}
body {
--callout-border-width: 0px;
--callout-border-opacity: 0;
--callout-radius: 7px;
--callout-blend-mode: normal;
--callout-title-size: var(--font-small);
--callout-title-weight: 600;
--callout-content-background: transparent;
}
.callout {
position: relative;
overflow: hidden;
background-color: rgba(var(--callout-color), var(--aera-callout-background-opacity));
color: color-mix(in srgb, rgb(var(--callout-color)) var(--aera-callout-body-semantic-weight), var(--text-normal));
border: 0;
}
.callout-title {
padding-inline-end: var(--size-4-12);
color: color-mix(in srgb, rgb(var(--callout-color)) var(--aera-callout-title-semantic-weight), var(--text-normal));
}
.callout-content {
padding-inline-end: var(--size-4-12);
}
.callout-icon {
position: absolute;
inset-inline-end: var(--size-4-2);
inset-block-end: calc(var(--size-4-2) * -1);
opacity: 0.09;
pointer-events: none;
}
.callout-icon svg {
width: 48px;
height: 48px;
}
.callout-fold {
position: relative;
z-index: 2;
}
.callout.is-collapsed .callout-icon {
display: none;
}
body {
--table-background: transparent;
--table-border-width: 1px;
--table-border-color: var(--background-modifier-border);
--table-cell-vertical-alignment: top;
--table-white-space: normal;
--table-header-background: var(--background-secondary);
--table-header-background-hover: var(--background-modifier-hover);
--table-header-border-width: 1px;
--table-header-border-color: var(--background-modifier-border);
--table-header-size: var(--font-small);
--table-header-weight: 600;
--table-header-color: var(--text-muted);
--table-line-height: 1.5;
--table-text-size: var(--font-small);
--table-text-color: var(--text-normal);
--table-row-background-hover: var(--background-modifier-hover);
--table-selection-border-color: var(--interactive-accent);
--table-selection-border-width: 1px;
--table-selection-border-radius: 4px;
}
body {
--metadata-background: transparent;
--metadata-border-color: transparent;
--metadata-border-radius: 0;
--metadata-border-width: 0px;
--metadata-divider-color: var(--background-modifier-border);
--metadata-divider-color-hover: var(--background-modifier-border-hover);
--metadata-divider-color-focus: var(--interactive-accent);
--metadata-divider-width: 1px;
--metadata-property-radius: 4px;
--metadata-property-radius-hover: 4px;
--metadata-property-radius-focus: 4px;
--metadata-label-font-size: var(--font-smallest);
--metadata-label-font-weight: 500;
--metadata-label-text-color: var(--text-faint);
--metadata-input-font-size: var(--font-small);
--metadata-input-text-color: var(--text-normal);
--metadata-input-background: transparent;
}
body {
--embed-background: transparent;
--embed-border-start: 2px solid var(--background-modifier-border);
--embed-border-end: 0;
--embed-border-top: 0;
--embed-border-bottom: 0;
--embed-font-style: normal;
--footnote-size: var(--font-smallest);
}
body {
--tag-size: var(--font-smallest);
--tag-color: var(--text-accent);
--tag-color-hover: var(--text-accent-hover);
--tag-decoration: none;
--tag-decoration-hover: none;
--tag-background: var(--background-secondary);
--tag-background-hover: var(--background-modifier-hover);
--tag-border-color: var(--background-modifier-border);
--tag-border-color-hover: var(--background-modifier-border-hover);
--tag-border-width: 1px;
--tag-radius: 4px;
--tag-weight: 500;
}
Reference in a new issue View git blame Copy permalink