mirror of
https://github.com/spekulucius/obsidian-brainhack.git
synced 2026-07-22 03:50:24 +00:00
2106 lines
73 KiB
CSS
2106 lines
73 KiB
CSS
/*===================================== INFORMATION =================================================
|
|
This theme uses content created by other creators.
|
|
Wherever such content is used, their author is attributed.
|
|
If you have any questions or concerns, please contact me on GitHub: https://github.com/Spekulucius */
|
|
|
|
/*========== STYLE SETTINGS ================*/
|
|
/* @settings
|
|
|
|
name: Theme Settings
|
|
id: Brainhack
|
|
description: "Thank you for using my theme. If you encounter issues or have suggestions, please open a ticket on my GitHub repo <3"
|
|
settings:
|
|
-
|
|
id: Info-Text
|
|
title: A word from the developer
|
|
description: "Thank you for 10k downloads! This is a milestone I never expected to reach. I started creating this theme just for myself, and it fills me with so much joy seeing that other people enjoy it! So: THANK YOU for using my theme! If you encounter issues or have suggestions, please open a ticket on my GitHub repo <3"
|
|
type: info-text
|
|
markdown: true
|
|
-
|
|
id: Text and Spacing
|
|
title: Text and Spacing
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: filelinewidth
|
|
title: Adjust File Line Width
|
|
description:
|
|
type: variable-number-slider
|
|
format: px
|
|
default: 1000
|
|
min: 450
|
|
max: 1600
|
|
step: 10
|
|
-
|
|
id: custom-font-weight
|
|
title: Adjust Font Weight
|
|
description:
|
|
type: variable-number-slider
|
|
default: 300
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: custom-letter-spacing
|
|
title: Adjust Letter Spacing
|
|
description:
|
|
type: variable-number-slider
|
|
format: px
|
|
default: 0.1
|
|
min: -.5
|
|
max: 1.5
|
|
step: .1
|
|
-
|
|
id: custom-line-height
|
|
title: Adjust Line Spacing
|
|
description:
|
|
type: variable-number-slider
|
|
format:
|
|
default: 2
|
|
min: 1.5
|
|
max: 2.5
|
|
step: .1
|
|
-
|
|
id: Bold Text Variants
|
|
title: Bold Text Variants
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: default
|
|
options:
|
|
-
|
|
label: brainhack default
|
|
value: default
|
|
-
|
|
label: just bold
|
|
value: btv1
|
|
-
|
|
label: colored bold
|
|
value: btv2
|
|
-
|
|
id: bold-weight
|
|
title: Bold Text Weight
|
|
description:
|
|
type: variable-number-slider
|
|
format:
|
|
default: 900
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: italic-weight
|
|
title: Italic Text Weight
|
|
description:
|
|
type: variable-number-slider
|
|
format:
|
|
default: 300
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: italic-text-color
|
|
title: Italic Text Color
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: Highlighted Text Variants
|
|
title: Highlighted Text Variants
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: default
|
|
options:
|
|
-
|
|
label: brainhack default
|
|
value: default
|
|
-
|
|
label: obsidian default
|
|
value: htv1
|
|
-
|
|
label: obsidian default + accent color
|
|
value: htv2
|
|
-
|
|
id: Headings
|
|
title: Headings
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: Heading variants
|
|
title: Heading variants
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: default
|
|
options:
|
|
-
|
|
label: default Headings
|
|
value: default
|
|
-
|
|
label: Variant 1
|
|
value: hv1
|
|
-
|
|
label: Variant 2
|
|
value: hv2
|
|
-
|
|
id: coloredheadings
|
|
title: Colored Headings
|
|
type: class-toggle
|
|
-
|
|
id: headingcolor1
|
|
title: Heading Color 1
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: headingcolor2
|
|
title: heading Color 2
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: headingcolor3
|
|
title: Heading Color 3
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: headingcolor4
|
|
title: Heading Color 4
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: headingcolor5
|
|
title: heading Color 5
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: headingcolor6
|
|
title: Heading Color 6
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: Blockquotes
|
|
title: Blockquotes
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: Blockquote variants
|
|
title: Blockquote variants
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: default
|
|
options:
|
|
-
|
|
label: default Blockquote
|
|
value: default
|
|
-
|
|
label: Variant 1
|
|
value: bv1
|
|
-
|
|
id: Callouts
|
|
title: Callouts
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: Callout variants
|
|
title: Callout variants
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: default
|
|
options:
|
|
-
|
|
label: default Callout
|
|
value: default
|
|
-
|
|
label: Variant 1
|
|
value: cv1
|
|
-
|
|
id: Canvas
|
|
title: Canvas
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: Node Colors
|
|
title: Node Colors
|
|
type: class-select
|
|
allowEmpty: false
|
|
default: default
|
|
options:
|
|
-
|
|
label: default Nodes
|
|
value: default
|
|
-
|
|
label: Colored Nodes
|
|
value: nc
|
|
-
|
|
id: Background
|
|
title: Background
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: bgt_s
|
|
title: Adjust Background Saturation
|
|
type: variable-number-slider
|
|
default: 1
|
|
min: 0
|
|
max: 100
|
|
step: 1
|
|
-
|
|
id: bgt_l
|
|
title: Adjust Background Brightness
|
|
type: variable-number-slider
|
|
default: 0
|
|
min: -10
|
|
max: 10
|
|
step: 1
|
|
-
|
|
id: Folder-settings
|
|
title: Folders
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: coloredfolders
|
|
title: Colored Folders
|
|
type: class-toggle
|
|
-
|
|
id: foldercolor1
|
|
title: Folder Color 1
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: foldercolor2
|
|
title: Folder Color 2
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: foldercolor3
|
|
title: Folder Color 3
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: foldercolor4
|
|
title: Folder Color 4
|
|
type: variable-color
|
|
opacity: false
|
|
format: hex
|
|
default: '#none'
|
|
-
|
|
id: Experimental Settings
|
|
title: Experimental Settings
|
|
type: heading
|
|
collapsed: true
|
|
level: 2
|
|
-
|
|
id: cbr
|
|
title: Custom Workspace Border Radius
|
|
type: variable-number-slider
|
|
default: 20
|
|
min: 0
|
|
max: 50
|
|
step: 1
|
|
format: px
|
|
-
|
|
id: status-bar-hover
|
|
title: Hide Status Bar
|
|
description: Only show the status bar when hovering over it
|
|
type: class-toggle
|
|
-
|
|
id: greyscale-toggle
|
|
title: Enable Greyscale Images
|
|
type: class-toggle
|
|
-
|
|
id: enhanced-folders
|
|
title: Enable Enhanced Folders
|
|
description: Opened folders get highlighted
|
|
type: class-toggle
|
|
-
|
|
id: hide-scrollbars
|
|
title: Hide scrollbars
|
|
type: class-toggle
|
|
-
|
|
id: smartlists
|
|
title: Smart Lists (WIP)
|
|
type: class-toggle
|
|
*/
|
|
|
|
/* ============================================================================
|
|
TABLE OF CONTENTS
|
|
1. Color system (custom properties)
|
|
2. Workspace layout
|
|
3. Left sidebar / ribbon / sidebar buttons
|
|
4. Tab bar (main editor area)
|
|
5. File navigator
|
|
6. Nav header
|
|
7. Right sidebar
|
|
8. Settings UI & modals
|
|
9. Callouts - typed color variants
|
|
10. Callouts & blockquotes - structure
|
|
11. Paragraph & list spacing
|
|
12. Headings
|
|
13. Highlighting, bold & search
|
|
14. Typography (Style Settings sliders)
|
|
15. Misc: tables, images, status bar, greyscale, canvas, colored folders
|
|
============================================================================ */
|
|
|
|
|
|
/* ============================================================================
|
|
1. COLOR SYSTEM
|
|
============================================================================ */
|
|
|
|
/* Scheme-independent variables */
|
|
body {
|
|
--file-line-width: var(--filelinewidth, 1000px);
|
|
|
|
/* Canvas dot grid follows the subtle background tint */
|
|
--canvas-dot-pattern: var(--background-3-1);
|
|
|
|
/* Accent at 10% opacity; used e.g. as background for bold text */
|
|
--colored-accent-4: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
|
|
|
|
/* Global medium corner radius (callouts, blockquotes) */
|
|
--radius-m: .7em;
|
|
|
|
/* Bold text renders 300 weight units above the body font weight */
|
|
--bold-modifier: 300;
|
|
|
|
/* Line height, driven by the "Adjust Line Spacing" slider */
|
|
--line-height-normal: var(--custom-line-height, 2);
|
|
}
|
|
|
|
/* Variables shared by both color schemes */
|
|
.theme-light,
|
|
.theme-dark {
|
|
/* Readable "inverse" of the accent: snaps to near-black for light
|
|
accents and near-white for dark accents (i1 = hard, i2 = soft) */
|
|
--colored-accent-i1: hsl(var(--accent-h), var(--accent-s), calc(calc(var(--accent-l) - 49%)*-100));
|
|
--colored-accent-i2: hsl(var(--accent-h), var(--accent-s), calc(calc(var(--accent-l) - 20%)*-100));
|
|
|
|
/* Accent color at decreasing opacities */
|
|
--colored-accent-1: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--colored-accent-2: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.5);
|
|
--colored-accent-3: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.3);
|
|
--colored-accent-5: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.05);
|
|
|
|
/* Dark, accent-tinted drop shadow */
|
|
--shadow-1: hsla(var(--accent-h), var(--accent-s), 5%, .5);
|
|
--custom-accent-bold: var(--colored-accent-1);
|
|
|
|
/* Map core Obsidian variables onto the theme palette */
|
|
--background-secondary: var(--background-2);
|
|
--canvas-background: var(--background-2);
|
|
--code-background: var(--background-3);
|
|
--color-base-00: var(--background-3);
|
|
--color-base-50: var(--colored-accent-1) !important;
|
|
--interactive-accent: var(--colored-accent-1);
|
|
--background-1-item: var(--nav-item-color);
|
|
|
|
/* Larger page-preview popovers */
|
|
--popover-width: 1050px;
|
|
--popover-height: 1250px;
|
|
}
|
|
|
|
.theme-light {
|
|
--border-callout: white;
|
|
--border-2: rgb(205, 205, 205);
|
|
--text-faint: rgb(161, 161, 161);
|
|
|
|
/* Editor background: hue follows the accent; saturation/lightness are
|
|
adjustable via the background sliders (--bgt_s / --bgt_l) */
|
|
--background-primary: hsl(var(--background-2_h), calc(calc(var(--accent-s) * 0) + calc(.5% * var(--bgt_s, 1))), calc(calc(var(--background-2_l) - 5%) + calc(calc(var(--bgt_l, 0) * 1%) + 2%)));
|
|
|
|
--background-1: hsl(var(--accent-h), calc(var(--accent-s) - 20%), 90%, 100%);
|
|
--background-1_2: rgb(234, 234, 234);
|
|
--background-1-h: #bdbdbd;
|
|
|
|
--background-2_h: var(--accent-h);
|
|
--background-2_s: 10%;
|
|
--background-2_l: 99%;
|
|
--background-2: rgb(255, 255, 255);
|
|
|
|
--background-3: #ffffff;
|
|
--background-3-1: #00000010;
|
|
--background-3-2: rgb(202, 202, 202);
|
|
--background-3-3: hsla(0, 0%, 73%, 0.112);
|
|
--background-4: #F5F5F5;
|
|
--background-4-1: #d3d3d3;
|
|
--background-4-2: #ffffff;
|
|
--background-5: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 90%);
|
|
--background-6: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
|
|
--background-7: rgb(221, 221, 221);
|
|
|
|
--highlight-1: rgba(0, 0, 0, 0.056);
|
|
--highlight-2: rgba(214, 214, 214, 0.308);
|
|
|
|
--shadow-2: rgba(0, 0, 0, 0.257);
|
|
--shadow-3: rgba(0, 0, 0, 0.08);
|
|
--shadow-4: hsla(var(--background-2_h), calc(calc(var(--accent-s) * .5) + calc(.1% * var(--bgt_s, 1))), calc(calc(var(--background-2_l) - 20%) + calc(var(--bgt_l, 0) * 1%)), .2);
|
|
|
|
--divider-color: rgba(200, 200, 200, 0.441);
|
|
|
|
--text-color-inverted: black;
|
|
--tc: rgb(67, 67, 67);
|
|
--tc-rgb: 67, 67, 67;
|
|
--italic-color: var(--italic-text-color, rgb(154, 154, 154));
|
|
|
|
/* Light scheme overrides the shared code background */
|
|
--code-background: var(--background-1_2);
|
|
|
|
--main-color: black;
|
|
--main-color-2: rgb(56, 56, 56);
|
|
--main-color-inverted: white;
|
|
--main-color-inverted-2: rgb(252, 252, 252);
|
|
--main-color-05: rgba(0, 0, 0, 0.116);
|
|
}
|
|
|
|
.theme-dark {
|
|
--border-callout: rgba(0, 0, 0, 0);
|
|
--border-2: rgb(69, 69, 69);
|
|
--text-faint: rgb(98, 98, 98);
|
|
|
|
--background-1: #171717;
|
|
--background-1-h: var(--colored-accent-1);
|
|
|
|
--background-2_h: var(--accent-h);
|
|
--background-2_s: 0%;
|
|
--background-2_l: 10%;
|
|
/* Workspace background: hue follows the accent; adjustable via sliders */
|
|
--background-2: hsl(var(--background-2_h), calc(calc(var(--accent-s) * .01) + calc(.1% * var(--bgt_s, 1))), calc(var(--background-2_l) + calc(calc(var(--bgt_l, 0) * 1%) + 2%)));
|
|
|
|
--background-3: #292929;
|
|
--background-3-1: rgb(43, 43, 43);
|
|
--background-3-2: rgba(70, 70, 70, 0.667);
|
|
--background-3-3: hsla(0, 0%, 26%, 0.326);
|
|
--background-4: #191919;
|
|
--background-4-1: #000000;
|
|
--background-4-2: #1b1b1b;
|
|
--background-5: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 30%);
|
|
--background-6: hsla(var(--accent-h), calc(var(--accent-s) * .1), var(--accent-l), 0.2);
|
|
--background-7: rgb(53, 53, 53);
|
|
|
|
--highlight-1: rgba(255, 255, 255, 0.075);
|
|
--highlight-2: rgba(255, 255, 255, 0.075);
|
|
|
|
--shadow-2: hsla(var(--accent-h), calc(var(--accent-s) * 0), calc(var(--accent-l) * .1), .4);
|
|
--shadow-3: rgba(0, 0, 0, 0.26);
|
|
--shadow-4: hsla(var(--background-2_h), calc(calc(var(--accent-s) * .5) + calc(.1% * var(--bgt_s, 1))), calc(calc(var(--background-2_l) - 20%) + calc(var(--bgt_l, 0) * 1%)), .5);
|
|
|
|
--divider-color: rgba(105, 105, 105, 0.441);
|
|
|
|
--text-color-inverted: rgb(223, 223, 223);
|
|
--tc: rgb(194, 194, 194);
|
|
--tc-rgb: 194, 194, 194;
|
|
--italic-color: var(--italic-text-color, rgb(97, 97, 97));
|
|
|
|
--main-color: white;
|
|
--main-color-2: rgb(224, 224, 224);
|
|
--main-color-inverted: black;
|
|
--main-color-inverted-2: rgb(44, 44, 44);
|
|
--main-color-05: rgba(255, 255, 255, 0.116);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
2. WORKSPACE LAYOUT & CHROME
|
|
============================================================================ */
|
|
|
|
/* Main workspace while a sidebar is open: shifts the workspace 10px off the
|
|
window edge so the rounded container floats. */
|
|
body:not(.is-mobile) .workspace:is(.is-left-sidedock-open, .is-right-sidedock-open) {
|
|
position: relative;
|
|
right: 10px !important;
|
|
width: calc(100% - 10px) !important;
|
|
margin-left: 10px;
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
flex: 1 0 0;
|
|
overflow: visible;
|
|
background: transparent;
|
|
transition: .5s !important;
|
|
}
|
|
|
|
/* Gap between an open sidebar and the editor area */
|
|
body > div.app-container > div.horizontal-main-container > .workspace:is(.is-left-sidedock-open, .is-right-sidedock-open) > div.workspace-split.mod-vertical.mod-root {
|
|
margin-left: .5em;
|
|
}
|
|
|
|
/* Without the ribbon, the workspace backdrop spans the full width */
|
|
body:not(.is-mobile):not(.show-ribbon) .workspace:before {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Gap between the editor area and the right sidebar */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space {
|
|
margin-left: .5em;
|
|
width: calc(100% - .5em);
|
|
}
|
|
|
|
/* --- Ribbon -------------------------------------------------------------- */
|
|
.workspace-ribbon.side-dock-ribbon.mod-left {
|
|
flex-basis: 44px;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Remove the default borders of tab bar and ribbon */
|
|
.workspace-tab-header-container,
|
|
.workspace-ribbon.side-dock-ribbon.mod-left {
|
|
border: none !important;
|
|
}
|
|
.workspace-tab-header-container {
|
|
background: transparent;
|
|
}
|
|
|
|
/* --- Workspace background ------------------------------------------------ */
|
|
/* Sidebar open: splits become transparent so the body background shows */
|
|
.titlebar-button-container.mod-right:not(.is-mobile),
|
|
.workspace:is(.is-left-sidedock-open, .is-right-sidedock-open) .workspace-split:not(.is-mobile) {
|
|
background: transparent !important;
|
|
transition: .5s;
|
|
}
|
|
|
|
/* Sidebar closed: splits use the regular workspace background */
|
|
.titlebar-button-container.mod-right:not(.is-mobile),
|
|
.workspace:not(.is-left-sidedock-open) .workspace-split:not(.is-mobile) {
|
|
background: var(--background-2);
|
|
transition: .5s;
|
|
}
|
|
|
|
/* Mobile: always use the solid sidebar background */
|
|
body.is-mobile .titlebar-button-container.mod-right,
|
|
body.is-mobile .workspace-split {
|
|
background: var(--background-4) !important;
|
|
}
|
|
|
|
/* Solid background for all content surfaces */
|
|
.view-header,
|
|
.empty-state,
|
|
.markdown-rendered,
|
|
.community-modal-details,
|
|
.cm-scroller {
|
|
background-color: var(--background-2) !important;
|
|
}
|
|
.workspace-tabs:not(.mod-top) {
|
|
background: var(--background-2);
|
|
}
|
|
|
|
/* --- Resize handles ------------------------------------------------------ */
|
|
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-left-split > .workspace-leaf-resize-handle {
|
|
bottom: 0px !important;
|
|
border: solid transparent;
|
|
}
|
|
|
|
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
|
|
height: calc(var(--divider-vertical-height) - var(--header-height)) !important;
|
|
bottom: 0px !important;
|
|
border-left-style: dashed;
|
|
}
|
|
|
|
/* --- Rounded workspace corners (radius via the "cbr" setting) ------------ */
|
|
/* Bottom corners of the main editor container */
|
|
body:not(.is-mobile) .workspace:is(.is-left-sidedock-open, .is-right-sidedock-open) .mod-root {
|
|
border-bottom-right-radius: var(--cbr, 20px) !important;
|
|
border-bottom-left-radius: var(--cbr, 20px) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Top-right corner of the right-most tab container */
|
|
body:not(.is-mobile) .workspace:is(.is-left-sidedock-open, .is-right-sidedock-open) .mod-vertical .workspace-tabs:last-of-type .workspace-tab-container,
|
|
div.workspace-split.mod-vertical.mod-root > div > div.workspace-tabs.mod-top:last-of-type > div.workspace-tab-container {
|
|
border-top-right-radius: var(--cbr, 20px) !important;
|
|
}
|
|
|
|
/* Top-left corner of the left-most tab container */
|
|
body:not(.is-mobile) .workspace:is(.is-left-sidedock-open, .is-right-sidedock-open) .workspace-tabs:first-of-type .workspace-tab-container {
|
|
border-top-left-radius: var(--cbr, 20px) !important;
|
|
}
|
|
|
|
/* Rounded file container in the right sidebar */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space > div.workspace-tab-container {
|
|
border-radius: var(--cbr, 20px) !important;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
3. LEFT SIDEBAR / RIBBON / SIDEBAR BUTTONS
|
|
============================================================================ */
|
|
|
|
/* Transparent tab header/container so the floating panel background shows */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-container > div:nth-child(1) {
|
|
background: transparent;
|
|
}
|
|
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-container {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Vault profile row at the bottom of the left sidebar */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-sidedock-vault-profile {
|
|
background: transparent !important;
|
|
border: transparent;
|
|
height: 40px;
|
|
width: calc(100% - 1em);
|
|
margin-left: .5em;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
/* Vault switcher as a rounded pill */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-sidedock-vault-profile > div.workspace-drawer-vault-switcher {
|
|
height: 32px;
|
|
border-radius: 1em;
|
|
transition: .5s;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 .35em var(--shadow-2) !important;
|
|
background: var(--main-color-inverted-2);
|
|
}
|
|
}
|
|
|
|
/* Spacing for the vault action buttons */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-sidedock-vault-profile > div.workspace-drawer-vault-actions > * {
|
|
padding: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* The left sidebar itself: floating rounded panel with outline and shadow */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split {
|
|
margin-top: .5em;
|
|
margin-left: .5em;
|
|
margin-bottom: .5em;
|
|
height: calc(100% - .5em);
|
|
border-radius: var(--cbr, 20px);
|
|
outline: .01em solid var(--border-2);
|
|
background: var(--background-4) !important;
|
|
box-shadow: inset 0 0 0 .065em var(--border-callout), 0 0 .5em 0em var(--background-3-2);
|
|
transition: .5s;
|
|
}
|
|
|
|
/* When the ribbon is visible, tuck the panel underneath it */
|
|
body:is(.show-ribbon) > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split {
|
|
padding-left: 44px;
|
|
margin-left: -36px;
|
|
}
|
|
|
|
/* Ribbon padding while the left sidebar is open */
|
|
body:not(.mod-macos) > div.app-container > div.horizontal-main-container > .workspace.is-left-sidedock-open > div.workspace-ribbon.side-dock-ribbon.mod-left {
|
|
padding-left: 16px;
|
|
padding-right: 0px;
|
|
margin-top: 3px !important;
|
|
}
|
|
|
|
body.mod-macos > div.app-container > div.horizontal-main-container > .workspace.is-left-sidedock-open > div.workspace-ribbon.side-dock-ribbon.mod-left {
|
|
padding-left: 16px;
|
|
padding-right: 0px;
|
|
margin-top: 30px !important;
|
|
}
|
|
|
|
/* Ribbon layout while the left sidebar is closed */
|
|
body:not(.mod-macos) > div.app-container > div.horizontal-main-container > .workspace:not(.workspace.is-left-sidedock-open) > div.workspace-ribbon.side-dock-ribbon.mod-left {
|
|
transition: .5s;
|
|
align-items: center;
|
|
margin-top: 0 !important;
|
|
padding-top: 2px;
|
|
padding-left: .5em;
|
|
}
|
|
|
|
body.mod-macos > div.app-container > div.horizontal-main-container > .workspace:not(.workspace.is-left-sidedock-open) > div.workspace-ribbon.side-dock-ribbon.mod-left {
|
|
transition: .5s;
|
|
align-items: center;
|
|
margin-top: 0 !important;
|
|
padding-top: 40px;
|
|
padding-left: .5em;
|
|
}
|
|
|
|
/* Sidebar toggle button in the ribbon. */
|
|
body > div.app-container > div.horizontal-main-container > .workspace.is-left-sidedock-open > div.workspace-ribbon.side-dock-ribbon.mod-left > div.sidebar-toggle-button.mod-left,
|
|
body > div.app-container > div.horizontal-main-container > .workspace:not(.workspace.is-left-sidedock-open) > div.workspace-ribbon.side-dock-ribbon.mod-left > div.sidebar-toggle-button.mod-left {
|
|
align-items: center;
|
|
padding: 0;
|
|
margin: 0 !important;
|
|
position: relative;
|
|
width: 28px;
|
|
transition: .5s;
|
|
}
|
|
|
|
/* Ribbon action icons: transparent, tinted on hover */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-ribbon.side-dock-ribbon.mod-left > div.side-dock-actions > *,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-ribbon.side-dock-ribbon.mod-left > div.sidebar-toggle-button.mod-left > div {
|
|
background: transparent;
|
|
transition: .5s;
|
|
|
|
&:hover {
|
|
color: var(--text-color-inverted);
|
|
transition: .5s;
|
|
}
|
|
}
|
|
|
|
/* Toggle button inside the left tab header: pill with hover elevation */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.sidebar-toggle-button.mod-left > div {
|
|
margin-top: 2px;
|
|
margin-right: 1px;
|
|
border-radius: .5em;
|
|
padding-top: .81em;
|
|
padding-bottom: .8em;
|
|
padding-left: .3em;
|
|
padding-right: .3em;
|
|
transition: .3s;
|
|
|
|
&:hover {
|
|
background: var(--background-2);
|
|
box-shadow: 0 0 .6em 0 var(--shadow-2);
|
|
transition: .3s;
|
|
}
|
|
}
|
|
|
|
/* Toggle buttons in the main tab bar (left/right) */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-header-container > div.sidebar-toggle-button.mod-left > div,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-header-container > div.sidebar-toggle-button.mod-right > div {
|
|
border-radius: .5em;
|
|
padding-top: .81em;
|
|
padding-bottom: .8em;
|
|
padding-left: .3em;
|
|
padding-right: .3em;
|
|
transition: .3s;
|
|
|
|
&:hover {
|
|
background: var(--background-2);
|
|
box-shadow: 0 0 .6em 0 var(--shadow-2);
|
|
transition: .3s;
|
|
}
|
|
}
|
|
|
|
/* Generic small icon buttons: subtle hover pill */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-header-container > div.workspace-tab-header-tab-list > span,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-header-container > div.workspace-tab-header-new-tab > span,
|
|
span.clickable-icon,
|
|
div.workspace-tab-header-inner-close-button {
|
|
padding: 2px;
|
|
border-radius: .4em;
|
|
|
|
&:hover {
|
|
background: var(--background-2);
|
|
box-shadow: 0 0 .6em 0 var(--shadow-2);
|
|
transition: .3s;
|
|
}
|
|
}
|
|
|
|
/* Right sidebar toggle button hover */
|
|
div.sidebar-toggle-button.mod-right > div {
|
|
border-radius: .4em;
|
|
|
|
&:hover {
|
|
background: var(--background-2);
|
|
box-shadow: 0 0 .6em 0 var(--shadow-2);
|
|
transition: .3s;
|
|
}
|
|
}
|
|
|
|
/* More buttons hover design */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-container > div > div > div.view-header > div.view-actions > button,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-container > div > div > div.view-header > div.view-header-left > div {
|
|
border-radius: .4em;
|
|
|
|
&:hover {
|
|
background: var(--background-2);
|
|
box-shadow: 0 0 .6em 0 var(--shadow-2);
|
|
transition: .3s;
|
|
}
|
|
}
|
|
|
|
body.mod-macos .sidebar-toggle-button.mod-right {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Right sidebar tab header: inner padding */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner {
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
/* Right sidebar header icons: pill hover */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner > *,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner > * > * {
|
|
border-radius: .4em;
|
|
background: transparent;
|
|
|
|
&:hover {
|
|
background: var(--background-2);
|
|
box-shadow: 0 0 .3em 0 var(--shadow-3);
|
|
transition: .3s;
|
|
}
|
|
}
|
|
|
|
/* The active right-sidebar tab keeps the pill highlight */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space.mod-active > div.workspace-tab-header-container > div.workspace-tab-header-container-inner > *:is(.is-active) {
|
|
background: var(--background-2);
|
|
box-shadow: 0 0 .3em 0 var(--shadow-3);
|
|
transition: .3s;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
4. TAB BAR (main editor area)
|
|
============================================================================ */
|
|
|
|
.mod-vertical .workspace-tab-header-container {
|
|
align-items: center;
|
|
padding-top: 5px;
|
|
padding-bottom: 3px;
|
|
height: 48px;
|
|
}
|
|
|
|
.mod-vertical .workspace-tab-header-container-inner {
|
|
margin-top: 3px !important;
|
|
}
|
|
|
|
.workspace .mod-root .workspace-tab-header {
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Tab title colors: active tab uses the strong text color */
|
|
.mod-vertical .workspace-tab-header.tappable.is-active .workspace-tab-header-inner-title {
|
|
color: var(--text-color-inverted) !important;
|
|
}
|
|
.mod-vertical .workspace-tab-header.tappable .workspace-tab-header-inner-title {
|
|
color: var(--tc) !important;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
/* Left padding for the tab strip */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root div.workspace-tab-header-container > div.workspace-tab-header-container-inner {
|
|
padding-left: 7px;
|
|
}
|
|
|
|
/* Active tab: raised pill. */
|
|
.mod-vertical .workspace-tabs .workspace-tab-header.tappable.is-active .workspace-tab-header-inner {
|
|
height: 32px;
|
|
border-radius: 1em !important;
|
|
position: relative;
|
|
outline: .01em solid var(--border-2);
|
|
background: rgba(0, 0, 0, 0.097);
|
|
box-shadow: inset 0 0 0 .02em var(--background-2), inset 0 0 2em 0 var(--background-4-2), 0 0 .3em 0em var(--background-3-2), inset 5px 10px 2em -1.5em white;
|
|
}
|
|
|
|
/* Close button color */
|
|
div.workspace-tab-header-inner-close-button {
|
|
color: var(--tc) !important;
|
|
}
|
|
|
|
/* Hovered tab: darker pill */
|
|
.mod-vertical .workspace-tabs .workspace-tab-header.tappable:hover .workspace-tab-header-inner {
|
|
border-radius: 1em !important;
|
|
background-color: var(--background-4-1) !important;
|
|
box-shadow: inset 0 0 2em 0 var(--background-4-2), 0 0 .3em 0em var(--background-3-2);
|
|
color: var(--colored-accent-i1) !important;
|
|
}
|
|
|
|
/* Active tab: solid base color and bolder title */
|
|
.mod-vertical .workspace-tab-header.tappable.is-active .workspace-tab-header-inner {
|
|
position: relative;
|
|
background-color: var(--main-color-inverted) !important;
|
|
font-weight: 600;
|
|
transition: background .5s;
|
|
}
|
|
|
|
.workspace-tab-header-inner-close-button {
|
|
color: var(--colored-accent-i1) !important;
|
|
border-radius: 5px;
|
|
transition: all .2s !important;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
/* Clip content to the rounded tab container */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-vertical.mod-root > div > div.workspace-tab-container {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* macOS sidebar toggle button fix */
|
|
.sidebar-toggle-button.mod-right {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Windows titlebar buttons (minimize/maximize/close) as rounded pills */
|
|
body > div.titlebar > div > div.titlebar-button-container.mod-right > div.titlebar-button.mod-minimize,
|
|
body > div.titlebar > div > div.titlebar-button-container.mod-right > div.titlebar-button.mod-maximize,
|
|
body > div.titlebar > div > div.titlebar-button-container.mod-right > div.titlebar-button.mod-close {
|
|
border-radius: 10px;
|
|
padding: 0px 9px 0px 9px;
|
|
margin: 0px 5px 0px 5px;
|
|
}
|
|
body > div.titlebar > div > div.titlebar-button-container.mod-right {
|
|
padding: 5px;
|
|
}
|
|
|
|
|
|
/* Mobile Tab Bar Fix */
|
|
body.is-mobile
|
|
.view-header {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
5. FILE NAVIGATOR
|
|
============================================================================ */
|
|
|
|
body > div.app-container > div.horizontal-main-container > div {
|
|
background: var(--background-2);
|
|
}
|
|
|
|
/* File rows: taller, rounded; active file uses the strong text color */
|
|
.tree-item.nav-file .tree-item-self.nav-file-title {
|
|
padding-top: .7em;
|
|
padding-bottom: .7em;
|
|
border-radius: .8em;
|
|
|
|
&.is-active {
|
|
color: var(--main-color);
|
|
}
|
|
}
|
|
|
|
/* Folder rows: same height/rounding as file rows */
|
|
.tree-item-self.nav-folder-title.is-clickable {
|
|
padding-top: .7em;
|
|
padding-bottom: .7em;
|
|
border-radius: .8em;
|
|
}
|
|
|
|
/* Underline the active file name */
|
|
.tree-item-self.nav-file-title.is-active .tree-item-inner {
|
|
border-bottom: inset 2px var(--main-color-2);
|
|
margin-bottom: -2px !important;
|
|
}
|
|
|
|
/* Opened folders are shown bold */
|
|
.tree-item.nav-folder .nav-folder-title:not(:has(.is-collapsed)) {
|
|
color: var(--main-color);
|
|
font-weight: 900;
|
|
|
|
&:hover {
|
|
color: var(--main-color);
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* "Enhanced Folders" toggle: highlight the deepest opened folder */
|
|
.enhanced-folders .tree-item.nav-folder:not(.is-collapsed):not(:has(.tree-item.nav-folder:not(.is-collapsed))) {
|
|
background: var(--background-3-1);
|
|
border-radius: .8em;
|
|
transition: .4s;
|
|
}
|
|
|
|
/* Solid panel background for the sidebar leaf and the third header icon */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner > div:nth-child(3) > div,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-container > div.workspace-leaf {
|
|
background: var(--background-4) !important;
|
|
}
|
|
|
|
/* Left tab strip as a pill that tints on hover */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner {
|
|
app-region: no-drag;
|
|
padding-top: .3em;
|
|
padding-left: .2em;
|
|
padding-right: .25em;
|
|
padding-bottom: .2em;
|
|
margin-top: .5em;
|
|
border-radius: 5em;
|
|
transition: .5s;
|
|
|
|
&:hover {
|
|
background: var(--background-4-1);
|
|
transition: .5s;
|
|
}
|
|
}
|
|
|
|
/* Individual sidebar tabs: transparent pills with hover tint */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner > .workspace-tab-header.tappable,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner > .workspace-tab-header.tappable > * {
|
|
margin-top: .01em;
|
|
margin-bottom: .01em;
|
|
background: transparent !important;
|
|
border-radius: 50em;
|
|
|
|
&:hover {
|
|
background: var(--background-4-2) !important;
|
|
}
|
|
}
|
|
|
|
/* While hovering the strip, keep the active sidebar tab highlighted */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner:hover > .workspace-tab-header.tappable.is-active,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner:hover > .workspace-tab-header.tappable.is-active > * {
|
|
background: var(--background-3) !important;
|
|
transition: .5s;
|
|
box-shadow: 0 0 5em 0em var(--shadow-1), 0 0 1em 0em var(--shadow-3);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
6. NAV HEADER (buttons above the file navigator)
|
|
Collapsed to small dots; expands to full buttons while hovering the header.
|
|
============================================================================ */
|
|
|
|
/* Collapsed state: buttons are shown as small pills/dots */
|
|
body:not(.is-mobile)
|
|
div.nav-header div.nav-buttons-container .clickable-icon {
|
|
width: 0px;
|
|
height: 3px;
|
|
padding: 3px;
|
|
flex-grow: 0;
|
|
background: var(--background-3-2);
|
|
color: transparent;
|
|
border-radius: 50px;
|
|
transition: .2s;
|
|
}
|
|
|
|
/* Expanded state: full-size buttons while the header is hovered */
|
|
body:not(.is-mobile)
|
|
div.nav-header:hover div.nav-buttons-container .clickable-icon {
|
|
height: 28px;
|
|
flex-grow: 1;
|
|
padding: .6em;
|
|
color: var(--nav-item-color);
|
|
background: transparent;
|
|
border-radius: .4em;
|
|
transition: .2s;
|
|
}
|
|
body:not(.is-mobile)
|
|
div.nav-header div.nav-buttons-container .clickable-icon:hover {
|
|
background: var(--background-3-2);
|
|
}
|
|
|
|
/* Container animates from a narrow strip ... */
|
|
body:not(.is-mobile)
|
|
div.nav-header div.nav-buttons-container {
|
|
width: 40px;
|
|
max-width: 100%;
|
|
justify-self: center !important;
|
|
transition: .2s;
|
|
}
|
|
|
|
/* ... to a wide, tinted bar on hover */
|
|
body:not(.is-mobile)
|
|
div.nav-header:hover div.nav-buttons-container {
|
|
padding: .2em;
|
|
width: 200px;
|
|
max-width: 100%;
|
|
justify-self: center !important;
|
|
border-radius: .5em !important;
|
|
background: var(--background-3-1) !important;
|
|
transition: .2s;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
7. RIGHT SIDEBAR
|
|
============================================================================ */
|
|
|
|
/* Leaf backgrounds in the right sidebar. */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space.mod-active > div.workspace-tab-container,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space > div.workspace-tab-container > div,
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space.mod-active > div.workspace-tab-container > div.workspace-leaf.mod-active {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Hide the divider line above the right sidebar */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > hr {
|
|
border: transparent;
|
|
}
|
|
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space > div.workspace-tab-header-container {
|
|
margin-top: .4em;
|
|
}
|
|
|
|
/* Hide the attachment folder "000_attachments_000" (if used) */
|
|
div[data-path$='000_attachments_000'],
|
|
div[data-path$='000_attachments_000'] + div.nav-folder-children {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
8. SETTINGS UI & MODALS
|
|
============================================================================ */
|
|
|
|
/* Toggle switches: accent-tinted when enabled */
|
|
.checkbox-container.is-enabled {
|
|
background-color: var(--colored-accent-2);
|
|
}
|
|
.checkbox-container.is-enabled::after {
|
|
transition: .2s;
|
|
}
|
|
|
|
/* Vertical alignment fix for sidebar tabs */
|
|
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-left-split > div.workspace-tabs.mod-top.mod-top-left-space > div.workspace-tab-header-container > div.workspace-tab-header-container-inner > div.workspace-tab-header.tappable {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
/* "Hide scrollbars" toggle */
|
|
body:not(.native-scrollbars).hide-scrollbars ::-webkit-scrollbar {
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
|
|
/* Tooltips as light, rounded chips */
|
|
.tooltip {
|
|
--background-modifier-message: var(--main-color-inverted);
|
|
background: var(--main-color-inverted);
|
|
color: var(--main-color);
|
|
padding: 10px;
|
|
border-radius: 2em;
|
|
filter: drop-shadow(0 0 16px var(--shadow-3));
|
|
}
|
|
|
|
/* Primary (CTA) buttons: solid pill in the main text color */
|
|
.setting-item-control .mod-cta {
|
|
--button-padding: 1.3em;
|
|
color: var(--main-color-inverted);
|
|
background: var(--main-color);
|
|
border-radius: 20em;
|
|
padding-top: var(--button-padding);
|
|
padding-bottom: var(--button-padding);
|
|
|
|
&:hover {
|
|
background: var(--main-color-2);
|
|
}
|
|
}
|
|
|
|
/* Dropdowns: rounded with a soft inset border */
|
|
.setting-item-control .dropdown {
|
|
height: 2.5em;
|
|
border-radius: 1em;
|
|
box-shadow: inset 0 0 0 .04em var(--background-3-1), 0 0 .35em var(--shadow-3) !important;
|
|
}
|
|
|
|
/* Secondary buttons: pill with a hover shadow */
|
|
.setting-item-control button {
|
|
height: 2.5em;
|
|
border-radius: 10em;
|
|
box-shadow: inset 0 0 0 .05em var(--background-3-1);
|
|
background: var(--main-color-inverted-2);
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 .05em var(--background-3-1), 0 0 .35em var(--shadow-3) !important;
|
|
}
|
|
}
|
|
|
|
/* Left column of the settings modal: floating rounded panel. */
|
|
body > div.modal-container.mod-dim > div.modal.mod-settings.mod-sidebar-layout > div.modal-content.vertical-tabs-container > div.vertical-tab-header {
|
|
border: none;
|
|
margin: .5em;
|
|
height: calc(100% - 1em) !important;
|
|
border-radius: var(--cbr, 20px);
|
|
outline: .01em solid var(--border-2);
|
|
background: var(--background-4) !important;
|
|
box-shadow: inset 0 0 0 .065em var(--border-callout), 0 0 .5em 0em var(--background-3-2);
|
|
transition: .5s;
|
|
}
|
|
|
|
/* Settings navigation entries */
|
|
.modal-content.vertical-tabs-container .vertical-tab-header .vertical-tab-header-group .vertical-tab-header-group-items .vertical-tab-nav-item {
|
|
padding-top: .5em;
|
|
padding-bottom: .5em;
|
|
border-radius: .8em;
|
|
}
|
|
|
|
.modal-content.vertical-tabs-container .vertical-tab-header .vertical-tab-header-group .vertical-tab-header-group-items .vertical-tab-nav-item.is-active {
|
|
background: var(--main-color-05);
|
|
color: var(--text-color-inverted);
|
|
transition: .5s;
|
|
}
|
|
|
|
.modal-content.vertical-tabs-container .vertical-tab-header .vertical-tab-header-group .vertical-tab-header-group-items > * {
|
|
transition: .15s !important;
|
|
}
|
|
|
|
/* Rounded settings modal */
|
|
body > div.modal-container.mod-dim > div.modal.mod-settings.mod-sidebar-layout {
|
|
border-radius: 2em !important;
|
|
}
|
|
|
|
/* Style Settings section headings: keep square corners */
|
|
body > div.modal-container.mod-dim > div.modal.mod-settings.mod-sidebar-layout > div.modal-content.vertical-tabs-container > div.vertical-tab-content-container div.setting-item.setting-item-heading.style-settings-heading {
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
9. CALLOUTS - TYPED COLOR VARIANTS
|
|
============================================================================ */
|
|
|
|
/* --- Per-type color channels (R, G, B) ----------------------------------- */
|
|
.callout[data-callout="note"] {
|
|
--callout-rgb: 68, 138, 255;
|
|
}
|
|
.callout[data-callout="abstract"],
|
|
.callout[data-callout="summary"],
|
|
.callout[data-callout="tldr"] {
|
|
--callout-rgb: 0, 176, 255;
|
|
}
|
|
.callout[data-callout="info"],
|
|
.callout[data-callout="todo"] {
|
|
--callout-rgb: 0, 184, 212;
|
|
}
|
|
.callout[data-callout="tip"],
|
|
.callout[data-callout="hint"],
|
|
.callout[data-callout="important"] {
|
|
--callout-rgb: 0, 191, 165;
|
|
}
|
|
.callout[data-callout="success"],
|
|
.callout[data-callout="check"],
|
|
.callout[data-callout="done"] {
|
|
--callout-rgb: 0, 200, 83;
|
|
}
|
|
.callout[data-callout="question"],
|
|
.callout[data-callout="help"],
|
|
.callout[data-callout="faq"] {
|
|
--callout-rgb: 255, 160, 0;
|
|
}
|
|
.callout[data-callout="warning"],
|
|
.callout[data-callout="caution"],
|
|
.callout[data-callout="attention"] {
|
|
--callout-rgb: 255, 145, 0;
|
|
}
|
|
.callout[data-callout="failure"],
|
|
.callout[data-callout="fail"],
|
|
.callout[data-callout="missing"],
|
|
.callout[data-callout="danger"],
|
|
.callout[data-callout="error"] {
|
|
--callout-rgb: 255, 82, 82;
|
|
}
|
|
.callout[data-callout="bug"] {
|
|
--callout-rgb: 245, 0, 87;
|
|
}
|
|
.callout[data-callout="example"] {
|
|
--callout-rgb: 124, 77, 255;
|
|
}
|
|
.callout[data-callout="quote"],
|
|
.callout[data-callout="cite"] {
|
|
--callout-rgb: 158, 158, 158;
|
|
}
|
|
|
|
/* --- Shared frame for all typed callouts ---------------------------------
|
|
Tinted background, colored outline, inner border, visible type icon. */
|
|
.callout:is(
|
|
[data-callout="note"],
|
|
[data-callout="abstract"], [data-callout="summary"], [data-callout="tldr"],
|
|
[data-callout="info"],
|
|
[data-callout="todo"],
|
|
[data-callout="tip"], [data-callout="hint"], [data-callout="important"],
|
|
[data-callout="success"], [data-callout="check"], [data-callout="done"],
|
|
[data-callout="question"], [data-callout="help"], [data-callout="faq"],
|
|
[data-callout="warning"], [data-callout="caution"], [data-callout="attention"],
|
|
[data-callout="failure"], [data-callout="fail"], [data-callout="missing"],
|
|
[data-callout="danger"], [data-callout="error"],
|
|
[data-callout="bug"],
|
|
[data-callout="example"],
|
|
[data-callout="quote"], [data-callout="cite"]
|
|
) {
|
|
outline: .1em solid rgba(var(--callout-rgb), .5) !important;
|
|
background: rgba(var(--callout-rgb), .1) !important;
|
|
box-shadow:
|
|
inset 0 0 0 .05em var(--border-callout),
|
|
inset 0 -100em 100em -90em color-mix(in srgb, color-mix(in srgb, rgb(var(--callout-rgb)), black 8%) 10.7%, transparent),
|
|
inset 0 10em 10em -9em color-mix(in srgb, color-mix(in srgb, rgb(var(--callout-rgb)), white 30%) 5.1%, transparent) !important;
|
|
|
|
& .callout-icon {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/* Nested blockquotes/callouts inside a typed callout repeat the outline
|
|
color - all types except tip/hint/important (see exception below). */
|
|
.callout:is(
|
|
[data-callout="note"],
|
|
[data-callout="abstract"], [data-callout="summary"], [data-callout="tldr"],
|
|
[data-callout="info"],
|
|
[data-callout="todo"],
|
|
[data-callout="success"], [data-callout="check"], [data-callout="done"],
|
|
[data-callout="question"], [data-callout="help"], [data-callout="faq"],
|
|
[data-callout="warning"], [data-callout="caution"], [data-callout="attention"],
|
|
[data-callout="failure"], [data-callout="fail"], [data-callout="missing"],
|
|
[data-callout="danger"], [data-callout="error"],
|
|
[data-callout="bug"],
|
|
[data-callout="example"],
|
|
[data-callout="quote"], [data-callout="cite"]
|
|
) {
|
|
& .callout-content blockquote,
|
|
& .callout-content .callout {
|
|
outline: .1em solid rgba(var(--callout-rgb), .5) !important;
|
|
}
|
|
}
|
|
|
|
/* Exception: tip/hint/important mark nested elements with a soft shadow
|
|
instead of an outline (preserved from the original). */
|
|
.callout:is([data-callout="tip"], [data-callout="hint"], [data-callout="important"]) {
|
|
& .callout-content blockquote,
|
|
& .callout-content .callout {
|
|
box-shadow: inset 0 0 0 .04em rgba(0, 191, 165, .5), 0 0 .35em var(--shadow-3);
|
|
}
|
|
}
|
|
|
|
/* Exception: "bug" uses a slightly different hue for the background than
|
|
for the outline (preserved from the original). */
|
|
.callout[data-callout="bug"] {
|
|
background: rgba(255, 6, 93, .1) !important;
|
|
}
|
|
|
|
/* Accent-colored custom callout (no icon rule, as in the original) */
|
|
.callout[data-callout="brainhack"] {
|
|
outline: .1em solid hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.5) !important;
|
|
background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1) !important;
|
|
box-shadow: inset 0 0 0 .05em var(--border-callout) !important;
|
|
|
|
& .callout-content blockquote,
|
|
& .callout-content .callout {
|
|
outline: .1em solid hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.5) !important;
|
|
}
|
|
}
|
|
|
|
/* Minimal callout "1": no icon, subtle title separator color
|
|
(consumed by the .callout-title rule in section 10). */
|
|
.callout[data-callout="1"] {
|
|
--callout-border-color: var(--background-3-1);
|
|
|
|
& .callout-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.callout-content blockquote {
|
|
border-color: rgb(var(--callout-rgb)) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
10. CALLOUTS & BLOCKQUOTES - STRUCTURE
|
|
Two variants each, switched via body classes from Style Settings:
|
|
default vs. .cv1 (callouts) and default vs. .bv1 (blockquotes).
|
|
============================================================================ */
|
|
|
|
/* Default callout: rounded card with inner border and soft inset shadow */
|
|
body:not(.cv1) .callout {
|
|
--callout-background: var(--background-3);
|
|
--callout-padding: .5em;
|
|
--callout-title-color: inherit;
|
|
--callout-title-padding: 4px 10px;
|
|
--callout-title-size: inherit;
|
|
--callout-content-radius: 0px;
|
|
--callout-blend-mode: normal;
|
|
outline: .09em solid var(--background-3-2);
|
|
color: inherit;
|
|
margin-bottom: .6em !important;
|
|
margin-top: .6em !important;
|
|
margin-right: .1em !important;
|
|
margin-left: .1em !important;
|
|
border-radius: var(--radius-m);
|
|
background: var(--callout-background);
|
|
box-shadow:
|
|
inset 0 0 0 .05em var(--border-callout), inset 0 0em 5em 0em var(--background-3),
|
|
inset 0 -100em 100em -90em color-mix(in srgb, color-mix(in srgb, rgb(var(--tc-rgb)), black 90%) 10%, transparent),
|
|
inset 0 10em 10em -9em color-mix(in srgb, color-mix(in srgb, rgb(var(--tc-rgb)), white 90%) 10%, transparent);
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
body:not(.cv1) .callout .callout {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
|
|
/* Variant 1 (.cv1): flat block with a thick left border */
|
|
body.cv1 .callout {
|
|
mix-blend-mode: normal !important;
|
|
--callout-padding: 0;
|
|
border-left: .3em solid rgba(var(--callout-rgb, var(--tc-rgb)), .5);
|
|
border-radius: .5em;
|
|
border-top-left-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
background: var(--background-3-3);
|
|
box-shadow: none !important;
|
|
margin-bottom: .6em !important;
|
|
margin-top: .6em !important;
|
|
margin-right: .1em !important;
|
|
margin-left: .1em !important;
|
|
}
|
|
|
|
/* Extra vertical space around top-level callouts in reading view
|
|
(excludes callouts nested in other callouts or lists) */
|
|
.markdown-preview-view .callout:not(.callout-content .callout, ul.has-list-bullet div.callout) {
|
|
margin-bottom: 2em;
|
|
margin-top: 1em !important;
|
|
}
|
|
li:not(:first-of-type):has(.callout) {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.callout-content {
|
|
padding: .8em;
|
|
padding-top: .5em;
|
|
}
|
|
|
|
/* Trim leading/trailing margins inside callouts and blockquotes */
|
|
.callout-content > *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
.callout-content > *:first-child:is(blockquote) {
|
|
margin-top: .2em !important;
|
|
}
|
|
.callout-content > *:last-child {
|
|
margin-bottom: 0em !important;
|
|
}
|
|
blockquote > *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
blockquote > *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* Disable Obsidian's hover shadow on embedded blocks */
|
|
.cm-embed-block:hover {
|
|
box-shadow: 0 0 rgba(255, 0, 0, 0) !important;
|
|
}
|
|
|
|
/* Callout embeds in the editor follow the active variant's corner style */
|
|
body:not(.cv1) .cm-embed-block.cm-callout {
|
|
border-radius: 10px;
|
|
bottom: 0 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
body.cv1 .cm-embed-block.cm-callout {
|
|
border-top-left-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
bottom: 0 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.callout-content,
|
|
.blockquote {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Callout title: larger, with a dashed separator to the content. */
|
|
.callout-title {
|
|
border-color: var(--callout-border-color) !important;
|
|
color: var(--text-color-inverted);
|
|
font-size: 1.3em;
|
|
border-bottom: dashed var(--text-faint) .1em !important;
|
|
margin-left: .6em;
|
|
margin-right: 10px;
|
|
padding-left: 0em;
|
|
padding-right: 0px;
|
|
padding-bottom: .15em;
|
|
padding-top: .3em;
|
|
}
|
|
|
|
/* No separator while a collapsible callout is collapsed */
|
|
.callout.is-collapsible.is-collapsed .callout-title {
|
|
border-bottom: transparent !important;
|
|
}
|
|
|
|
.callout-title-inner {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.callout-title:has(li) {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
/* --- Blockquotes: default variant ---------------------------------------- */
|
|
body:not(.bv1) .markdown-rendered blockquote,
|
|
body:not(.bv1) .blockquote {
|
|
border-radius: var(--radius-m);
|
|
background-color: var(--background-3-3);
|
|
border-left: none;
|
|
padding-left: .8em;
|
|
padding-right: .8em !important;
|
|
padding-top: .8em;
|
|
padding-bottom: .8em !important;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Same look for quote lines in live preview */
|
|
.markdown-source-view.mod-cm6.is-live-preview:not(.bv1) .HyperMD-quote {
|
|
border-radius: var(--radius-m);
|
|
background-color: var(--background-3);
|
|
border-left: none;
|
|
padding-right: .8em !important;
|
|
padding-top: .8em !important;
|
|
padding-bottom: .8em !important;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Soft outline drawn on the ::before layer behind the quote */
|
|
body:not(.bv1) .markdown-rendered blockquote:before,
|
|
body:not(.bv1) .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before {
|
|
z-index: -1;
|
|
width: 100%;
|
|
border-radius: var(--radius-m);
|
|
box-shadow: 0 0 0 .04em var(--background-3-1), 0 0 .35em var(--shadow-3);
|
|
}
|
|
|
|
/* --- Blockquotes: variant 1 (.bv1) - thick left border ------------------- */
|
|
body.bv1 .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote,
|
|
body.bv1 .markdown-rendered blockquote,
|
|
body.bv1 .blockquote {
|
|
border-left: .3em solid var(--tc);
|
|
border-radius: .5em;
|
|
border-top-left-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
background: var(--background-3-3);
|
|
box-shadow: none !important;
|
|
padding-left: .8em;
|
|
padding-right: .8em !important;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
/* Inset outline for default blockquotes */
|
|
body:not(.bv1) .el-blockquote,
|
|
body:not(.bv1) blockquote {
|
|
width: 100%;
|
|
border-radius: var(--radius-m);
|
|
box-shadow: inset 0 0 0 .04em var(--background-3-1);
|
|
}
|
|
|
|
/* List spacing inside callouts and blockquotes */
|
|
.callout-content ol {
|
|
margin-top: 0em;
|
|
margin-bottom: .5em;
|
|
}
|
|
blockquote > ol > :last-child {
|
|
padding-bottom: 0em !important;
|
|
margin-bottom: 0em !important;
|
|
}
|
|
blockquote > ol > :first-child {
|
|
padding-top: 0em !important;
|
|
margin-top: 0em !important;
|
|
}
|
|
|
|
/* Icons are hidden by default; typed callouts re-enable them (section 9) */
|
|
.callout-icon,
|
|
.callout-content .callout-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Hover ring for collapsible callouts in reading view */
|
|
.markdown-preview-view .callout.is-collapsible:hover {
|
|
box-shadow: 0 0 0px 2px rgba(115, 115, 115, 0.508);
|
|
}
|
|
|
|
.is-live-preview .HyperMD-quote:before {
|
|
border: 0px solid transparent !important;
|
|
}
|
|
|
|
/* Nested quotes/callouts get a slightly smaller radius. */
|
|
.callout-content blockquote,
|
|
.callout-content .callout {
|
|
border-radius: calc(var(--radius-m) - .3em);
|
|
}
|
|
blockquote > blockquote {
|
|
border-radius: calc(var(--radius-m) - .3em) !important;
|
|
}
|
|
|
|
/* Callout "2": lays its content out in even, responsive columns */
|
|
.callout[data-callout="2"] > .callout-title {
|
|
justify-content: center;
|
|
}
|
|
.callout[data-callout="2"] > .callout-content {
|
|
display: grid;
|
|
/* minmax sets the minimum column width; lower 15rem for skinnier columns */
|
|
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Callout "!": accent-colored ring */
|
|
.callout[data-callout="!"] {
|
|
box-shadow: inset 0 0 0em .1em var(--colored-accent-1) !important;
|
|
}
|
|
|
|
/* --- Live-preview fix: consecutive quote lines join seamlessly -----------
|
|
Adjacent .HyperMD-quote lines drop the radius (and padding) on the edge
|
|
where they touch, so multi-line quotes render as one block. */
|
|
.HyperMD-quote + .HyperMD-quote {
|
|
border-top-right-radius: 0px !important;
|
|
border-top-left-radius: 0px !important;
|
|
|
|
&:before {
|
|
border-top-right-radius: 0px !important;
|
|
border-top-left-radius: 0px !important;
|
|
}
|
|
}
|
|
.HyperMD-quote:has(+ .HyperMD-quote) {
|
|
border-bottom-right-radius: 0px !important;
|
|
border-bottom-left-radius: 0px !important;
|
|
|
|
&:before {
|
|
border-bottom-right-radius: 0px !important;
|
|
border-bottom-left-radius: 0px !important;
|
|
}
|
|
}
|
|
|
|
ul.has-list-bullet * blockquote {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-preview-view blockquote {
|
|
padding: .8em !important;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote + .HyperMD-quote {
|
|
padding-top: 0em !important;
|
|
}
|
|
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:has(+ .HyperMD-quote) {
|
|
padding-bottom: 0em !important;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
11. PARAGRAPH & LIST SPACING
|
|
============================================================================ */
|
|
|
|
.el-p + .el-p {
|
|
margin-top: 2em !important;
|
|
}
|
|
|
|
p:not(:first-child) {
|
|
margin-top: .5em;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
p + p {
|
|
margin-top: 1em !important;
|
|
}
|
|
|
|
/* A list directly after a paragraph sticks to it */
|
|
p + ul {
|
|
margin-top: 0px !important;
|
|
}
|
|
p:has(+ ul.has-list-bullet) {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/* "Smart Lists" toggle (WIP): more air between list items */
|
|
body.smartlists li:not(:first-of-type) {
|
|
margin-top: .8em;
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
/* Blockquote inside a list item */
|
|
li:has(blockquote) {
|
|
margin-top: .5em;
|
|
}
|
|
|
|
li > blockquote {
|
|
margin-bottom: 0em !important;
|
|
margin-top: 0em !important;
|
|
}
|
|
|
|
li > .callout {
|
|
margin-bottom: 0em !important;
|
|
margin-top: 0em !important;
|
|
}
|
|
|
|
.heading-collapse-indicator.collapse-indicator.collapse-icon:before {
|
|
margin-left: -5px;
|
|
}
|
|
.HyperMD-header.HyperMD-header.cm-line {
|
|
padding-bottom: .5em;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
12. HEADINGS
|
|
Three variants via body classes: default, .hv1 (badge style),
|
|
.hv2 (underline style). Each heading level can be recolored through the
|
|
Style Settings color pickers (--headingcolor1..6).
|
|
============================================================================ */
|
|
|
|
/* --- H1 ------------------------------------------------------------------ */
|
|
body:not(.hv1, .hv2) .cm-header.cm-header-1:not(.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1),
|
|
body:not(.hv1, .hv2) .markdown-rendered h1 {
|
|
--h1-radius: .4em;
|
|
color: var(--headingcolor1, --main-color-2);
|
|
display: inline-block;
|
|
margin: 0em !important;
|
|
border-radius: var(--h1-radius);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
}
|
|
|
|
body.hv1 .cm-header.cm-header-1:not(.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1),
|
|
body.hv1 .markdown-rendered h1 {
|
|
--h1-radius: .3em;
|
|
color: var(--main-color-2);
|
|
display: inline-block;
|
|
background: var(--headingcolor1, var(--background-7));
|
|
translate: -.05em;
|
|
padding: .1rem .3rem .08rem .3rem;
|
|
margin: 0em !important;
|
|
border-radius: var(--h1-radius);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
}
|
|
|
|
body.hv2 .cm-header.cm-header-1:not(.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1),
|
|
body.hv2 .markdown-rendered h1 {
|
|
color: var(--headingcolor1, --main-color-2);
|
|
border-bottom: .1em solid var(--tc);
|
|
}
|
|
|
|
/* Links inside headings keep the heading text color */
|
|
h1 > a,
|
|
h2 > a,
|
|
h3 > a,
|
|
h4 > a,
|
|
h5 > a,
|
|
h6 > a {
|
|
color: var(--text-color-inverted) !important;
|
|
}
|
|
|
|
/* --- H2 ------------------------------------------------------------------ */
|
|
body:not(.hv1, .hv2) .cm-header.cm-header-2:not(.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2),
|
|
body:not(.hv1, .hv2) .markdown-rendered h2 {
|
|
--mark-radius: .4em;
|
|
color: var(--headingcolor2, --main-color-2);
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
border-color: var(--colored-accent-4);
|
|
border-radius: var(--mark-radius);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
}
|
|
|
|
body.hv1 .cm-header.cm-header-2:not(.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2),
|
|
body.hv1 .markdown-rendered h2 {
|
|
--mark-radius: .4em;
|
|
color: var(--main-color-2);
|
|
display: inline-block;
|
|
translate: -.05em;
|
|
padding: .1rem .3rem .08rem .3rem;
|
|
margin: 0px;
|
|
border: .1em dashed;
|
|
font-weight: 600;
|
|
border-color: var(--colored-accent-4);
|
|
background-color: var(--headingcolor2, var(--colored-accent-5));
|
|
border-radius: var(--mark-radius);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
}
|
|
|
|
body.hv2 .cm-header.cm-header-2:not(.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2),
|
|
body.hv2 .markdown-rendered h2 {
|
|
color: var(--headingcolor2, --main-color-2);
|
|
border-bottom: .1em solid var(--tc);
|
|
}
|
|
|
|
/* --- H3 ------------------------------------------------------------------ */
|
|
body:not(.hv1, .hv2) .cm-header.cm-header-3:not(.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3),
|
|
body:not(.hv1, .hv2) .markdown-rendered h3 {
|
|
--mark-radius: .4em;
|
|
color: var(--headingcolor3, --main-color-2);
|
|
display: inline-block;
|
|
translate: -.05em;
|
|
padding: .1rem .3rem .08rem .3rem;
|
|
margin-bottom: 0px;
|
|
border-color: var(--colored-accent-4);
|
|
border-radius: var(--mark-radius);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
}
|
|
|
|
body.hv1 .cm-header.cm-header-3:not(.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3),
|
|
body.hv1 .markdown-rendered h3 {
|
|
--mark-radius: .4em;
|
|
display: inline-block;
|
|
translate: -.05em;
|
|
padding: .1rem .3rem .08rem .3rem;
|
|
margin-bottom: 0px;
|
|
border: .08em dashed;
|
|
border-color: var(--colored-accent-4);
|
|
background-color: var(--headingcolor3, var(--colored-accent-5));
|
|
border-radius: var(--mark-radius);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
}
|
|
|
|
body.hv2 .cm-header.cm-header-3:not(.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3),
|
|
body.hv2 .markdown-rendered h3 {
|
|
color: var(--headingcolor3, --main-color-2);
|
|
border-bottom: .1em solid var(--tc);
|
|
}
|
|
|
|
/* --- H4-H6: color only ---------------------------------------------------- */
|
|
.cm-header.cm-header-4:not(.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4),
|
|
.markdown-rendered h4 {
|
|
color: var(--headingcolor4, --main-color-2);
|
|
}
|
|
|
|
.cm-header.cm-header-5:not(.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5),
|
|
.markdown-rendered h5 {
|
|
color: var(--headingcolor5, --main-color-2);
|
|
}
|
|
|
|
.cm-header.cm-header-6:not(.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6),
|
|
.markdown-rendered h6 {
|
|
color: var(--headingcolor6, --main-color-2);
|
|
}
|
|
|
|
/* --- Dynamic heading spacing ----------------------------------------------
|
|
Adds top margin before headings (reading view), but removes it again when
|
|
a heading directly follows a heading of the same or a higher level, so
|
|
stacked headings stay compact. */
|
|
div.el-h1 {
|
|
margin-top: var(--dynamic-heading-spacing, 0em);
|
|
}
|
|
div.el-h2 {
|
|
margin-top: var(--dynamic-heading-spacing, 0em) !important;
|
|
}
|
|
div.el-h3 {
|
|
margin-top: var(--dynamic-heading-spacing, 0em) !important;
|
|
}
|
|
|
|
div.el-h1 + div.el-h1 {
|
|
margin-top: 0em !important;
|
|
}
|
|
div.el-h1 + div.el-h2, div.el-h2 + div.el-h2 {
|
|
margin-top: 0em !important;
|
|
}
|
|
div.el-h1 + div.el-h3, div.el-h2 + div.el-h3, div.el-h3 + div.el-h3 {
|
|
margin-top: 0em !important;
|
|
}
|
|
div.el-h1 + div.el-h4, div.el-h2 + div.el-h4, div.el-h3 + div.el-h4, div.el-h4 + div.el-h4 {
|
|
margin-top: 0em !important;
|
|
}
|
|
div.el-h1 + div.el-h5, div.el-h2 + div.el-h5, div.el-h3 + div.el-h5, div.el-h4 + div.el-h5, div.el-h5 + div.el-h5 {
|
|
margin-top: 0em !important;
|
|
}
|
|
div.el-h1 + div.el-h6, div.el-h2 + div.el-h6, div.el-h3 + div.el-h6, div.el-h4 + div.el-h6, div.el-h5 + div.el-h6, div.el-h6 + div.el-h6 {
|
|
margin-top: 0em !important;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
13. HIGHLIGHTING, BOLD & SEARCH
|
|
============================================================================ */
|
|
|
|
|
|
/* Change italic text weight universally */
|
|
.cm-em, em {
|
|
font-weight: var(--italic-weight); /* Adjust this value as needed */
|
|
}
|
|
|
|
|
|
|
|
/* ==Highlighted== text as a grey pill. */
|
|
body:not(.htv1, .htv2) span.cm-highlight,
|
|
body:not(.htv1, .htv2) .markdown-rendered mark {
|
|
--mark-radius: .3rem;
|
|
padding: 0rem .2rem 0rem .2rem;
|
|
margin: .1rem .1rem .1rem .1rem;
|
|
background: var(--background-7) !important;
|
|
border-radius: var(--mark-radius);
|
|
-webkit-box-decoration-break: clone; /* keep radius on wrapped lines */
|
|
box-decoration-break: clone;
|
|
font-weight: 600;
|
|
}
|
|
|
|
body.htv2 span.cm-highlight,
|
|
body.htv2 .markdown-rendered mark {
|
|
background: var(--colored-accent-3) !important;
|
|
}
|
|
|
|
/* **Bold** text as an accent-tinted pill */
|
|
body:not(.btv1, .btv2) span.cm-strong:not(.cm-highlight),
|
|
body:not(.btv1, .btv2) strong:not(:has(mark), mark strong) {
|
|
--mark-radius: .3rem;
|
|
padding: 0rem .2rem 0rem .2rem;
|
|
margin: -.2rem .1rem .1rem -.2rem;
|
|
background: var(--colored-accent-4) !important;
|
|
border-radius: var(--mark-radius);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
color: var(--colored-accent-1);
|
|
font-weight: var(--bold-weight, 900);
|
|
}
|
|
body.btv2 span.cm-strong:not(.cm-highlight),
|
|
body.btv2 strong:not(:has(mark), mark strong) {
|
|
color: var(--colored-accent-1) !important;
|
|
}
|
|
|
|
/* The `==` markers themselves: accent color, no pill */
|
|
.cm-formatting.cm-formatting-highlight.cm-highlight {
|
|
background: none;
|
|
color: var(--colored-accent-1);
|
|
}
|
|
|
|
/* --- Search result highlighting ------------------------------------------- */
|
|
.search-result-file-matched-text,
|
|
.is-flashing {
|
|
color: var(--colored-accent-i1);
|
|
border-radius: 3px;
|
|
padding: 0px 2px;
|
|
}
|
|
.search-result-file-matched-text {
|
|
background: var(--colored-accent-1);
|
|
}
|
|
.is-flashing {
|
|
background: var(--colored-accent-1) !important;
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
14. TYPOGRAPHY (Style Settings sliders)
|
|
Font weight, letter spacing and line height are user-adjustable;
|
|
--bold-modifier and --line-height-normal are defined on body (section 1).
|
|
============================================================================ */
|
|
|
|
.markdown-preview-view,
|
|
.view-content > .cm-s-obsidian,
|
|
.view-content > .markdown-source-view.mod-cm6.is-live-preview > .cm-scroller,
|
|
body {
|
|
font-weight: var(--custom-font-weight, 400);
|
|
color: var(--tc);
|
|
letter-spacing: var(--custom-letter-spacing, .1px);
|
|
}
|
|
|
|
/* Tables and table headers follow the same sliders
|
|
(merged from two rules with identical declarations) */
|
|
.cm-html-embed th,
|
|
.markdown-rendered th,
|
|
table {
|
|
font-weight: var(--custom-font-weight, 400);
|
|
letter-spacing: var(--custom-letter-spacing, .1px);
|
|
}
|
|
|
|
.view-content {
|
|
border: 0px;
|
|
letter-spacing: var(--custom-letter-spacing, .1px);
|
|
}
|
|
|
|
|
|
/* ============================================================================
|
|
15. MISC
|
|
============================================================================ */
|
|
|
|
/* Remove leftover decorations of the default theme */
|
|
.workspace-ribbon.side-dock-ribbon.mod-left::before,
|
|
.workspace-tab-header.tappable:before,
|
|
.workspace-tab-header.tappable:after,
|
|
.workspace-tab-header-inner:after,
|
|
.workspace-tab-header-container:before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* --- Embeds --------------------------------------------------------------- */
|
|
img {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* --- Rounded tables --------------------------------------------------------
|
|
Credit: "FireIsGood"
|
|
https://forum.obsidian.md/t/adding-rounded-corners-to-markdown-tables-with-snippets-a-clean-solution/60551 */
|
|
|
|
/* Fix the borders and add a radius variable */
|
|
:root table {
|
|
--table-border-radius: 8px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
/* Round the four outer corners */
|
|
th:first-child { border-top-left-radius: var(--table-border-radius); }
|
|
th:last-child { border-top-right-radius: var(--table-border-radius); }
|
|
tr:last-child td:first-child { border-bottom-left-radius: var(--table-border-radius); }
|
|
tr:last-child td:last-child { border-bottom-right-radius: var(--table-border-radius); }
|
|
|
|
/* Redo the cell borders (right/bottom only) after the collapse change */
|
|
:root :is(td, th) {
|
|
border-width: 0 var(--table-border-width) var(--table-border-width) 0;
|
|
border-color: var(--accent-color-light10) !important;
|
|
}
|
|
|
|
.cm-html-embed table,
|
|
.markdown-rendered table {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/* Virtual link styling (plugin) */
|
|
.virtual-link-default {
|
|
filter: brightness(1);
|
|
}
|
|
|
|
/* --- "Hide Status Bar" toggle: fade in only on hover ----------------------- */
|
|
body.status-bar-hover .status-bar {
|
|
opacity: 0;
|
|
transition: all .5s;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* --- Greyscale image toggle -------------------------------------------------
|
|
Dark mode inverts before desaturating and screens the result onto the
|
|
background; light mode multiplies, so images blend with either scheme. */
|
|
.greyscale-toggle.theme-dark img {
|
|
mix-blend-mode: screen !important;
|
|
filter: invert(1) grayscale(100%) !important;
|
|
}
|
|
|
|
.greyscale-toggle.theme-light img {
|
|
mix-blend-mode: multiply !important;
|
|
filter: grayscale(100%) !important;
|
|
}
|
|
|
|
/* --- Canvas: "Colored Nodes" option ---------------------------------------- */
|
|
body.nc .markdown-embed-content .node-insert-event {
|
|
background: var(--canvas-color) !important;
|
|
}
|
|
|
|
/* --- "Colored Folders" toggle -----------------------------------------------
|
|
Colors folder titles by nesting depth (levels 1-4), each adjustable via
|
|
a Style Settings color picker. */
|
|
|
|
/* Level 1 (root folders) */
|
|
body.coloredfolders .nav-files-container > div > .nav-folder > .nav-folder-title {
|
|
color: var(--foldercolor1, #ff0000);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Level 2 (subfolders) */
|
|
body.coloredfolders .nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-title {
|
|
color: var(--foldercolor2, #ff8c00);
|
|
}
|
|
|
|
/* Level 3 */
|
|
body.coloredfolders .nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-title {
|
|
color: var(--foldercolor3, #7abc00);
|
|
}
|
|
|
|
/* Level 4 */
|
|
body.coloredfolders .nav-files-container > div > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-children > .nav-folder > .nav-folder-title {
|
|
color: var(--foldercolor4, #00b75f);
|
|
}
|
|
|