first draft
This commit is contained in:
@@ -1,34 +1,209 @@
|
||||
/* @settings
|
||||
|
||||
name: Chiaroscuro Flow
|
||||
id: chiaroscuro-flow
|
||||
settings:
|
||||
-
|
||||
id: body-font
|
||||
title: Body Font
|
||||
type: variable-text
|
||||
default: Manrope
|
||||
|
||||
-
|
||||
id: header-font
|
||||
title: Header Font
|
||||
type: variable-text
|
||||
default: 'Nunito Sans Bold'
|
||||
|
||||
-
|
||||
id: background-primary-light
|
||||
title: Light Mode Primary Background
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#FFFFFF'
|
||||
|
||||
-
|
||||
id: background-secondary-light
|
||||
title: Light Mode Secondary Background
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#F0F0F0'
|
||||
|
||||
-
|
||||
id: background-primary-dark
|
||||
title: Dark Mode Primary Background
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#1E1E1E'
|
||||
|
||||
-
|
||||
id: background-secondary-dark
|
||||
title: Dark Mode Secondary Background
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#2D2D2D'
|
||||
|
||||
-
|
||||
id: text-normal-light
|
||||
title: Light Mode Text Color
|
||||
type: variable-color
|
||||
format: rgb
|
||||
default: '#333333'
|
||||
|
||||
-
|
||||
id: text-normal-dark
|
||||
title: Dark Mode Text Color
|
||||
type: variable-color
|
||||
format: rgb
|
||||
default: '#DDDDDD'
|
||||
|
||||
-
|
||||
id: code-background
|
||||
title: Code Block Background (Light Mode)
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#F0F0F0'
|
||||
|
||||
-
|
||||
id: code-background-dark
|
||||
title: Dark Mode Code Block Background
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#2D2D2D'
|
||||
|
||||
-
|
||||
id: math-background
|
||||
title: Math Block Background (Light Mode)
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#F0F0F0'
|
||||
|
||||
-
|
||||
id: graph-background
|
||||
title: Graph View Background
|
||||
type: variable-color
|
||||
opacity: true
|
||||
format: rgb
|
||||
default: '#FFFFFF'
|
||||
|
||||
-
|
||||
id: graph-dot-size
|
||||
title: Graph View Dot Size
|
||||
type: variable-number-slider
|
||||
default: 1
|
||||
min: 0.5
|
||||
max: 3
|
||||
step: 0.1
|
||||
|
||||
-
|
||||
id: graph-dot-spacing
|
||||
title: Graph View Dot Spacing
|
||||
type: variable-number-slider
|
||||
default: 20
|
||||
min: 10
|
||||
max: 50
|
||||
step: 1
|
||||
|
||||
*/
|
||||
|
||||
body {
|
||||
--radius-s: 0px;
|
||||
--radius-m: 0px;
|
||||
--radius-l: 0px;
|
||||
--input-radius: 0px;
|
||||
--tab-radius-active: 0px;
|
||||
--checkbox-radius: 0px;
|
||||
--toggle-radius: 0px;
|
||||
--toggle-thumb-radius: 0px;
|
||||
--slider-thumb-radius: 0px;
|
||||
--font-text: var(--body-font, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-header: var(--header-font, 'Nunito Sans Bold'), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.workspace-tab-header.is-active::before, .workspace-tab-header.is-active::after {
|
||||
display: none;
|
||||
.theme-light {
|
||||
--background-primary: var(--background-primary-light, rgb(255, 255, 255));
|
||||
--background-secondary: var(--background-secondary-light, rgb(240, 240, 240));
|
||||
--text-normal: var(--text-normal-light, rgb(51, 51, 51));
|
||||
--code-background: var(--code-background, rgb(169, 152, 152));
|
||||
--math-background: var(--math-background, rgb(169, 152, 152));
|
||||
}
|
||||
|
||||
svg * {
|
||||
stroke-linecap: square;
|
||||
stroke-linejoin: miter;
|
||||
rx: 0;
|
||||
ry: 0;
|
||||
.theme-dark {
|
||||
--background-primary: var(--background-primary-dark, rgb(30, 30, 30));
|
||||
--background-secondary: var(--background-secondary-dark, rgb(45, 45, 45));
|
||||
--text-normal: var(--text-normal-dark, rgb(221, 221, 221));
|
||||
--code-background: var(--code-background-dark, rgb(45, 45, 45));
|
||||
--math-background: var(--code-background-dark, rgb(45, 45, 45));
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: var(--size-2-1);
|
||||
/* Mesh gradient backgrounds */
|
||||
.theme-light .workspace-leaf-content[data-type="markdown"],
|
||||
.theme-light .markdown-preview-view,
|
||||
.theme-light .view-content {
|
||||
background: none;
|
||||
background-image:
|
||||
radial-gradient(at 40% 20%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 0%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 50%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 50%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 100%, rgba(var(--background-secondary-light, 240 240 240) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 0%, rgba(var(--background-primary-light, 255 255 255) / 0.8) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: var(--size-4-1) var(--size-4-2);
|
||||
.theme-dark .workspace-leaf-content[data-type="markdown"],
|
||||
.theme-dark .markdown-preview-view,
|
||||
.theme-dark .view-content {
|
||||
background: none;
|
||||
background-image:
|
||||
radial-gradient(at 40% 20%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 0%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 50%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 50%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 100%, rgba(var(--background-secondary-dark, 45 45 45) / 0.8) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 0%, rgba(var(--background-primary-dark, 30 30 30) / 0.8) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
margin: var(--size-2-1) calc(var(--size-2-1) * -1);
|
||||
/* Ensure content is visible over the gradient */
|
||||
.markdown-preview-view,
|
||||
.markdown-source-view {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.cm-s-obsidian pre.HyperMD-codeblock,
|
||||
.markdown-preview-view pre,
|
||||
.math-block {
|
||||
background-color: var(--code-background);
|
||||
}
|
||||
|
||||
.graph-view.color-fill {
|
||||
background-color: var(--background-primary);
|
||||
background-image:
|
||||
radial-gradient(var(--text-muted) var(--graph-dot-size, 1px), transparent var(--graph-dot-size, 1px)),
|
||||
radial-gradient(var(--text-muted) var(--graph-dot-size, 1px), transparent var(--graph-dot-size, 1px));
|
||||
background-size: var(--graph-dot-spacing, 20px) var(--graph-dot-spacing, 20px);
|
||||
background-position: 0 0, calc(var(--graph-dot-spacing, 20px) / 2) calc(var(--graph-dot-spacing, 20px) / 2);
|
||||
}
|
||||
|
||||
/* Ensure proper text color in both modes */
|
||||
.theme-light .markdown-preview-view,
|
||||
.theme-light .cm-s-obsidian {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.theme-dark .markdown-preview-view,
|
||||
.theme-dark .cm-s-obsidian {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.graph-view {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
/* Apply fonts */
|
||||
body, .cm-s-obsidian {
|
||||
font-family: var(--font-text);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user