mirror of
https://github.com/voi-tech/obsidian-primary-simplified.git
synced 2026-07-22 04:50:24 +00:00
eeb349ebc9
- Reformat theme.css from a single minified line to readable, multi-line CSS (verified equivalent via AST diff and computed-style comparison). - Fix a duplicated .theme-dark.theme-dark selector and document a known Style Settings naming inconsistency. - Add per-note helper classes matching Minimal's cssclasses contract (image grids, block widths, embeds, table variants, cards/list-cards), adapting Minimal's proven DOM handling (MIT-licensed, attributed) where needed for correctness, with original implementations elsewhere. - Extend table and block-width helpers to Live Preview, fix cssclasses root-selector targeting, and scope the "max" breakout to the workspace leaf via a container query instead of the viewport so it can't render behind a sidebar. - Bump version to 26.7.0 (CalVer) and document helper-class support in the README. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
9049 lines
317 KiB
CSS
9049 lines
317 KiB
CSS
/*───────────────────────────────────
|
|
|
|
✦ P R I M A R Y S I M P L I F I E D ✦
|
|
|
|
an independently maintained Obsidian theme fork
|
|
maintained by voitech
|
|
|
|
Based on Primary by Cecilia May:
|
|
https://github.com/primary-theme/obsidian
|
|
|
|
Primary Simplified is not affiliated with or
|
|
endorsed by the original author.
|
|
|
|
Modified and rebranded on 2026-06-22.
|
|
|
|
────────────────────────────────────
|
|
|
|
A combination of Bauhaus, Scandinavian
|
|
and yellowing magazine pages as palette
|
|
inspiration—Primary is a theme for people
|
|
looking for a certain nostalgic warmness.
|
|
|
|
It is toppled with functional pop
|
|
of red blue yellow colors.
|
|
The perfect mix of loud and reserved.
|
|
|
|
Playful, reminiscing, productive.
|
|
|
|
Obsidian October 2021 Best Theme 🏆
|
|
|
|
────────────────────────────────────
|
|
|
|
Original Primary by Cecilia May:
|
|
X: @ceciliamay_
|
|
GitHub: @ceciliamay
|
|
|
|
Original author's Ko-fi:
|
|
https://ko-fi.com/ceciliamay
|
|
|
|
Original Primary forum thread:
|
|
https://forum.obsidian.md/t/primary-theme/26687
|
|
|
|
────────────────────────────────────
|
|
|
|
CODE STRUCTURE
|
|
1. General (overrides, spacing, sizing, radius, shape, typography, animation)
|
|
2. Specific (usually colors, icons)
|
|
3. Mobile Styling
|
|
4. Light Theme
|
|
5. Dark Theme
|
|
|
|
────────────────────────────────────
|
|
|
|
This theme is using the
|
|
GNU GENERAL PUBLIC LICENSE v3.
|
|
|
|
Primary Simplified is a modified version of
|
|
Primary. The source, modification notices,
|
|
and license are available in this repository.
|
|
|
|
Original Primary repository:
|
|
https://github.com/primary-theme/obsidian
|
|
|
|
────────────────────────────────────*/
|
|
body:not(.is-phone, .is-mobile)
|
|
.mod-left-split
|
|
.workspace-tab-header-inner-icon
|
|
.svg-icon,
|
|
body:not(.is-phone, .is-mobile)
|
|
.mod-right-split
|
|
.workspace-tab-header-inner-icon
|
|
.svg-icon,
|
|
body:not(.is-phone, .is-mobile) .clickable-icon {
|
|
--icon-size: var(--icon-s);
|
|
}
|
|
body:not(.is-phone, .is-mobile)
|
|
.clickable-icon.side-dock-ribbon-action
|
|
.svg-icon {
|
|
--icon-size: var(--ribbon-icon);
|
|
}
|
|
body:is(.is-phone, .is-mobile) .clickable-icon svg {
|
|
--icon-size: var(--icon-m);
|
|
}
|
|
.is-mobile .clickable-icon:hover,
|
|
.clickable-icon:hover {
|
|
color: var(--icon-color-hover);
|
|
background: var(--icon-bg-hover);
|
|
cursor: var(--cursor);
|
|
}
|
|
.is-mobile .clickable-icon:active,
|
|
.clickable-icon:active {
|
|
color: var(--icon-color-active);
|
|
background: var(--icon-bg-pressed);
|
|
}
|
|
.is-mobile .clickable-icon.has-active-menu,
|
|
.clickable-icon.has-active-menu {
|
|
color: var(--icon-color-active);
|
|
background: var(--icon-bg-active-menu);
|
|
}
|
|
.is-mobile .clickable-icon.has-active-menu:hover,
|
|
.clickable-icon.has-active-menu:hover {
|
|
color: var(--icon-color-active);
|
|
}
|
|
.is-mobile .clickable-icon.is-active.is-active,
|
|
.clickable-icon.is-active.is-active {
|
|
background: var(--icon-bg-active);
|
|
}
|
|
.is-mobile .clickable-icon.is-active.is-active:hover,
|
|
.clickable-icon.is-active.is-active:hover {
|
|
color: var(--icon-color-active);
|
|
}
|
|
.is-mobile .clickable-icon[aria-disabled="true"],
|
|
.clickable-icon[aria-disabled="true"] {
|
|
color: var(--icon-color);
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
.is-mobile .clickable-icon.list-item-part,
|
|
.clickable-icon.list-item-part {
|
|
color: var(--icon-color);
|
|
background: var(--icon-bg);
|
|
}
|
|
.is-mobile .clickable-icon.list-item-part:hover,
|
|
.clickable-icon.list-item-part:hover {
|
|
color: var(--icon-color-hover);
|
|
background: var(--icon-bg-hover);
|
|
}
|
|
.cm-html-embed.cm-embed-block pre code {
|
|
font-family: var(
|
|
--font-monospace,
|
|
ui-monospace,
|
|
SFMono-Regular,
|
|
"SF Mono",
|
|
Consolas,
|
|
monospace
|
|
);
|
|
}
|
|
body,
|
|
.multi-select-input,
|
|
.suggestion-item.mod-complex .suggestion-hotkey,
|
|
.suggestion-item.mod-complex .suggestion-action,
|
|
audio::-webkit-media-controls-current-time-display,
|
|
audio::-webkit-media-controls-time-remaining-display,
|
|
.markdown-rendered button.copy-code-button,
|
|
.markdown-source-view.mod-cm6 .code-block-flair {
|
|
font-feature-settings: var(--interface-font-feature);
|
|
}
|
|
input,
|
|
textarea,
|
|
select,
|
|
button,
|
|
span.code-block-flair {
|
|
font-feature-settings: var(--interface-font-feature);
|
|
}
|
|
.markdown-source-view,
|
|
.markdown-source-view.mod-cm6 .cm-scroller,
|
|
.markdown-preview-view,
|
|
.community-modal-readme,
|
|
.sync-history-preview {
|
|
font-feature-settings: var(--text-font-feature);
|
|
}
|
|
div:not(.list-bullet::after),
|
|
.HyperMD-codeblock,
|
|
.cm-inline-code,
|
|
pre,
|
|
code {
|
|
font-feature-settings: var(--monospace-font-feature);
|
|
}
|
|
@keyframes slideUp {
|
|
0% {
|
|
transform: translateY(0%);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
transform: translateY(8%);
|
|
opacity: 0.2;
|
|
}
|
|
20% {
|
|
transform: translateY(5%);
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
transform: translateY(-2%);
|
|
opacity: 0.85;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes slideUpAlt {
|
|
0% {
|
|
margin-top: 3%;
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
margin-top: 1.5%;
|
|
opacity: 0.2;
|
|
}
|
|
40% {
|
|
margin-top: -0.16%;
|
|
opacity: 0.85;
|
|
}
|
|
100% {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes slideDown {
|
|
0% {
|
|
transform: translateY(-10%);
|
|
opacity: 0;
|
|
}
|
|
60% {
|
|
transform: translateY(2%);
|
|
opacity: 0.85;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body {
|
|
--anim-popup: 0.3s slideUp forwards;
|
|
--anim-popup-alt: 0.335s slideUpAlt forwards;
|
|
--anim-popdown: 0.4s slideDown forwards;
|
|
--background-anim: background var(--anim-duration-fast)
|
|
var(--anim-motion-smooth);
|
|
--cursor: pointer;
|
|
--interface-font-feature:
|
|
"calt" 1, "case" 0, "ccmp" 1, "ss03" 1, "cv01" 1, "cv05" 1, "cv06" 1,
|
|
"cv08" 0, "cv11" 1, "cv12" 0, "cv13" 0;
|
|
--text-font-feature:
|
|
"calt" 1, "case" 0, "ccmp" 1, "ss03" 1, "cv01" 1, "cv05" 1, "cv06" 1,
|
|
"cv08" 0, "cv11" 1, "cv12" 0, "cv13" 0;
|
|
--monospace-font-feature:
|
|
"calt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss05" 1, "ss19" 1, "zero" 1;
|
|
--font-ui-smallest: 11px;
|
|
--font-ui-smaller: 12px;
|
|
--font-ui-small: 13px;
|
|
--font-ui-medium: 15px;
|
|
--font-ui-large: 20px;
|
|
--font-smallest: 0.8em;
|
|
--font-smaller: 0.875em;
|
|
--font-small: 0.933em;
|
|
--font-nav-item-size: ;
|
|
--font-tree-item-size: ;
|
|
--font-blockquote-size: ;
|
|
--font-callout-title-size: ;
|
|
--font-callout-size: ;
|
|
--font-inlinecode-size: ;
|
|
--font-codeblock-size: ;
|
|
--font-codeblock-btn-size: ;
|
|
--font-footnotes-title-size: ;
|
|
--font-footnotes-flag-size: ;
|
|
--font-footnotes-size: ;
|
|
--font-blockid-size: ;
|
|
font-weight: var(--font-normal);
|
|
--font-thin: 150;
|
|
--font-extralight: 250;
|
|
--font-light: 350;
|
|
--font-normal: 450;
|
|
--font-medium: 550;
|
|
--font-semibold: 650;
|
|
--font-bold: 750;
|
|
--font-extrabold: 850;
|
|
--font-black: 900;
|
|
--bold-weight: var(--font-bold);
|
|
--bold-modifier: 200;
|
|
--bold-italic-weight: var(--font-bold);
|
|
--icon-xs: 13px;
|
|
--icon-s: 15px;
|
|
--icon-m: 16px;
|
|
--icon-l: 18px;
|
|
--icon-xl: 24px;
|
|
--icon-container-radius: 0px;
|
|
--clickable-icon-radius: calc(var(--radius-s) + 1px);
|
|
--ribbon-icon: var(--icon-s);
|
|
--sidebar-tab-icon: var(--icon-s);
|
|
--sidebar-nav-icon: var(--icon-s);
|
|
--editor-tab-icon: var(--icon-s);
|
|
--editor-header-icon: var(--icon-s);
|
|
--radius-xs: 2px;
|
|
--divider-width-hover: 4px;
|
|
--divider-radius: var(--radius-m);
|
|
--ribbon-border-width: 1px;
|
|
--ribbon-radius: var(--editor-border-radius);
|
|
--ribbon-radius: var(--editor-border-radius);
|
|
--ribbon-margin-bottom: var(--editor-pane-margin);
|
|
--ribbon-icon-spacing: var(--size-2-2);
|
|
--nav-item-white-space: nowrap;
|
|
--nav-item-radius: 6px;
|
|
--nav-item-padding: calc(var(--size-4-1) + 1px) var(--size-4-2)
|
|
calc(var(--size-4-1) + 1px) var(--size-4-6);
|
|
--nav-file-padding-active: calc(var(--size-4-1)) var(--size-4-2)
|
|
calc(var(--size-4-1) + var(--button-inset-shadow-size)) var(--size-4-6);
|
|
--status-bar-floating-opacity: 0.5;
|
|
--status-bar-floating-opacity-hover: 1;
|
|
--status-bar-floating-offset: var(--size-2-2);
|
|
--titlebar-text-weight: var(--font-normal);
|
|
--vault-profile-font-size: var(--font-ui-small);
|
|
--vault-profile-font-weight: var(--font-semibold);
|
|
--vault-name-border-width: 1px;
|
|
--popup-bg-blur: 3px;
|
|
--component-font-weight: var(--font-medium);
|
|
--button-padding: var(--size-4-2) var(--size-4-3)
|
|
calc(var(--size-4-2) + var(--button-inset-shadow-size)) var(--size-4-3);
|
|
--button-padding-active: calc(
|
|
var(--size-4-2) + var(--button-inset-shadow-size)
|
|
)
|
|
var(--size-4-3) var(--size-4-2) var(--size-4-3);
|
|
--button-inset-shadow-size: 2px;
|
|
--button-axis-offset: 2px;
|
|
--button-radius: var(--size-4-2);
|
|
--button-metadata-padding: var(--size-2-3) var(--size-4-2)
|
|
calc(var(--size-2-3) + var(--button-inset-shadow-size)) var(--size-2-3);
|
|
--button-metadata-padding-active: calc(
|
|
var(--size-2-2) + var(--button-inset-shadow-size)
|
|
)
|
|
var(--size-4-2) var(--size-2-3) var(--size-2-3);
|
|
--button-s-radius: calc(var(--button-radius) * 0.8);
|
|
--button-s-padding: var(--size-2-2) var(--size-4-2) var(--size-2-2)
|
|
var(--size-4-2);
|
|
--button-anim: var(--anim-duration-fast) var(--anim-motion-jumpy);
|
|
--close-button-radius: var(--radius-l);
|
|
--copy-code-button-radius: var(--radius-s);
|
|
--button-opacity-active: 0.5;
|
|
--dropdown-height: calc(
|
|
var(--font-ui-small) +
|
|
calc(var(--size-4-4) + var(--button-inset-shadow-size))
|
|
);
|
|
--menu-item-radius: calc(var(--radius-m) - 1px);
|
|
--modal-radius: var(--radius-xl);
|
|
--modal-close-button-size: 20px;
|
|
--settings-nav-item-padding: calc(var(--size-2-3) + 1px) var(--size-4-3)
|
|
calc(var(--size-2-3) + 1px) var(--size-4-3);
|
|
--settings-nav-item-padding-hover: calc(var(--size-2-3) + 1px) var(--size-4-3)
|
|
calc(var(--size-2-3) + 1px) var(--size-4-5);
|
|
--settings-nav-item-padding-active: var(--size-2-3) var(--size-4-3)
|
|
calc(var(--size-2-3) + var(--button-inset-shadow-size)) var(--size-4-5);
|
|
--settings-nav-item-radius: calc(var(--radius-m) - 1px);
|
|
--flair-count-padding: 2px 4px;
|
|
--flair-count-radius: calc(var(--radius-s) + 1px);
|
|
--pill-tag-weight: var(--component-font-weight);
|
|
--progress-width: 220px;
|
|
--progress-height: 8px;
|
|
--progress-border-width: 1px;
|
|
--progress-value-radius: var(--progress-height);
|
|
--slider-track-height: 5px;
|
|
--tab-font-size: var(--font-ui-small);
|
|
--tab-outline-width: 1px;
|
|
--tab-curve: 6px;
|
|
--tab-radius: var(--radius-s);
|
|
--tab-radius-active: 6px 6px 0 0;
|
|
--tab-width: 200px;
|
|
--tab-max-width: 320px;
|
|
--tab-stacked-pane-width: 700px;
|
|
--tab-stacked-header-width: var(--header-height);
|
|
--tab-stacked-font-size: var(--font-ui-small);
|
|
--input-height: 32px;
|
|
--input-radius: var(--button-radius);
|
|
--search-icon-size: 14px;
|
|
--search-clear-button-size: 12px;
|
|
--editor-bgpattern-size: 50px 50px;
|
|
--blockquote-border-thickness: 2px;
|
|
--callout-shadow-offset: 4px;
|
|
--callout-content-shadow-blur: 3px;
|
|
--callout-title-padding: var(--size-4-3) var(--size-4-4);
|
|
--callout-content-padding: var(--size-4-1) var(--size-4-4)
|
|
calc(var(--size-4-1) + var(--callout-shadow-offset)) var(--size-4-4);
|
|
--callout-radius: var(--radius-m);
|
|
--callout-blend-mode: unset;
|
|
--checklist-done-decoration: line-through;
|
|
--checkbox-radius: var(--radius-s);
|
|
--code-radius: var(--radius-m);
|
|
--inline-code-radius: var(--radius-s);
|
|
--embed-padding: var(--size-2-3) var(--embed-left-right-padding) 0px;
|
|
--embed-left-right-padding: var(--size-4-4);
|
|
--embed-border-radius: var(--radius-l);
|
|
--embed-border-top: var(--embed-border-top-width)
|
|
var(--embed-border-top-style) var(--embed-border-top-color);
|
|
--embed-border-top-width: 1px;
|
|
--embed-border-top-style: solid;
|
|
--embed-border-end: var(--embed-border-end-width)
|
|
var(--embed-border-end-style) var(--embed-border-end-color);
|
|
--embed-border-end-width: 1px;
|
|
--embed-border-end-style: solid;
|
|
--embed-border-bottom: var(--embed-border-bottom-width)
|
|
var(--embed-border-bottom-style) var(--embed-border-bottom-color);
|
|
--embed-border-bottom-width: 1px;
|
|
--embed-border-bottom-style: solid;
|
|
--embed-border-start: var(--embed-border-start-width)
|
|
var(--embed-border-start-style) var(--embed-border-start-color);
|
|
--embed-border-start-width: 1px;
|
|
--embed-border-start-style: solid;
|
|
--embed-title-border: var(--embed-title-border-width)
|
|
var(--embed-title-border-style) var(--embed-title-border-color);
|
|
--embed-title-border-width: 1px;
|
|
--embed-title-border-style: solid;
|
|
--embed-title-margin-bottom: var(--size-4-2);
|
|
--embed-title-font-size: var(--font-text-size);
|
|
--embed-title-font-weight: var(--font-medium);
|
|
--embed-title-letter-spacing: normal;
|
|
--embed-title-text-transform: none;
|
|
--embed-media-border-radius: var(--radius-m);
|
|
--underline-decoration-opacity: 22%;
|
|
--editor-border-width: 1px;
|
|
--file-header-border-width: 1px;
|
|
--file-line-width: 40rem;
|
|
--file-max-line-width: 88%;
|
|
--header-height: 46px;
|
|
--file-tab-gap: 0px;
|
|
--tab-status-radius: var(--radius-s);
|
|
--new-tab-btn-radius: 2em;
|
|
--editor-pane-margin: 10px;
|
|
--editor-border-radius: var(--radius-l);
|
|
--h1-weight: var(--font-semibold);
|
|
--h1-text-align: left;
|
|
--h1-letter-spacing: unset;
|
|
--h1-text-transform: normal;
|
|
--h1-border-width: 0px;
|
|
--h1-border-style: solid;
|
|
--h1-border-radius: 0px;
|
|
--h2-weight: var(--font-semibold);
|
|
--h2-text-align: left;
|
|
--h2-letter-spacing: unset;
|
|
--h2-text-transform: normal;
|
|
--h2-border-width: 0px;
|
|
--h2-border-style: solid;
|
|
--h2-border-radius: 0px;
|
|
--h3-weight: var(--font-semibold);
|
|
--h3-text-align: left;
|
|
--h3-letter-spacing: unset;
|
|
--h3-text-transform: normal;
|
|
--h3-border-width: 0px;
|
|
--h3-border-style: solid;
|
|
--h3-border-radius: 0px;
|
|
--h4-weight: var(--font-semibold);
|
|
--h4-text-align: left;
|
|
--h4-letter-spacing: unset;
|
|
--h4-text-transform: normal;
|
|
--h4-border-width: 0px;
|
|
--h4-border-style: solid;
|
|
--h4-border-radius: 0px;
|
|
--h5-weight: var(--font-semibold);
|
|
--h5-text-align: left;
|
|
--h5-letter-spacing: unset;
|
|
--h5-text-transform: normal;
|
|
--h5-border-width: 0px;
|
|
--h5-border-style: solid;
|
|
--h5-border-radius: 0px;
|
|
--h6-weight: var(--font-semibold);
|
|
--h6-text-align: left;
|
|
--h6-letter-spacing: unset;
|
|
--h6-text-transform: normal;
|
|
--h6-border-width: 0px;
|
|
--h6-border-style: solid;
|
|
--h6-border-radius: 0px;
|
|
--hr-thickness: 1px;
|
|
--link-unresolved-opacity: 1;
|
|
--link-underline-offset: 2px;
|
|
--link-decoration-thickness: 1.5px;
|
|
--link-decoration-opacity: 22%;
|
|
--link-opacity-active: 0.5;
|
|
--list-indent-editing: 0.6em;
|
|
--list-bullet-indent-reading: -1em;
|
|
--indentation-guide-reading-indent: -1em;
|
|
--metadata-border-width: 1px;
|
|
--metadata-divider-width: 0px;
|
|
--metadata-border-radius: var(--radius-m);
|
|
--metadata-property-radius: calc(var(--radius-m) - 1px);
|
|
--metadata-container-padding: var(--size-4-3) var(--size-4-3);
|
|
--tag-padding-x: 0.6em;
|
|
--tag-padding-y: 0.15em;
|
|
--tag-radius: 1em;
|
|
}
|
|
body.is-mobile {
|
|
--metadata-container-padding: var(--size-4-2) var(--size-4-2);
|
|
--clickable-icon-radius: var(--radius-m);
|
|
--button-radius: calc(var(--radius-l) - 2px);
|
|
--input-font-weight: var(--font-normal);
|
|
--mobile-folder-icon-size: 16px;
|
|
}
|
|
.theme-light {
|
|
color-scheme: light;
|
|
--color-l-gray-10: hsla(36, 38%, 98%, 1);
|
|
--color-l-gray-20: hsla(35, 36%, 96%, 1);
|
|
--color-l-gray-30: hsla(35, 37%, 92%, 1);
|
|
--color-l-gray-40: hsla(34, 34%, 90%, 1);
|
|
--color-l-gray-50: hsla(36, 35%, 88%, 1);
|
|
--color-l-gray-60: hsla(37, 38%, 83%, 1);
|
|
--color-l-gray-70: hsla(34, 37%, 70%, 1);
|
|
--color-l-gray-80: hsla(34, 29%, 60%, 1);
|
|
--color-l-gray-90: hsla(31, 23%, 50%, 1);
|
|
--color-l-gray-100: hsla(35, 28%, 40%, 1);
|
|
--color-l-gray-110: hsla(34, 30%, 37%, 1);
|
|
--color-l-gray-120: hsla(36, 32%, 30%, 1);
|
|
--color-l-gray-130: hsla(31, 45%, 24%, 1);
|
|
--color-l-gray-140: hsla(33, 54%, 17%, 1);
|
|
--color-l-alpha-gray: hsla(34, 37%, 70%, 0.15);
|
|
--color-l-red-10: hsla(4, 59%, 64%, 1);
|
|
--color-l-red-20: hsla(4, 72%, 55%, 1);
|
|
--color-l-red-30: hsla(4, 56%, 48%, 1);
|
|
--color-l-red-40: hsla(4, 72%, 35%, 1);
|
|
--color-l-alpha-red: hsla(350, 84%, 63%, 0.2);
|
|
--color-l-orange-10: hsla(26, 70%, 63%, 1);
|
|
--color-l-orange-20: hsla(21, 81%, 59%, 1);
|
|
--color-l-orange-30: hsla(18, 69%, 50%, 1);
|
|
--color-l-orange-40: hsla(18, 96%, 35%, 1);
|
|
--color-l-alpha-orange: hsla(27, 100%, 50%, 0.2);
|
|
--color-l-yellow-10: hsla(43, 71%, 67%, 1);
|
|
--color-l-yellow-20: hsla(43, 83%, 57%, 1);
|
|
--color-l-yellow-30: hsla(40, 79%, 47%, 1);
|
|
--color-l-yellow-40: hsla(40, 98%, 36%, 1);
|
|
--color-l-alpha-yellow: hsla(44, 100%, 50%, 0.2);
|
|
--color-l-green-10: hsla(148, 30%, 65%, 1);
|
|
--color-l-green-20: hsla(148, 48%, 47%, 1);
|
|
--color-l-green-30: hsla(149, 50%, 39%, 1);
|
|
--color-l-green-40: hsla(153, 65%, 29%, 1);
|
|
--color-l-alpha-green: hsla(74, 69%, 44%, 0.2);
|
|
--color-l-blue-10: hsla(197, 39%, 56%, 1);
|
|
--color-l-blue-20: hsla(202, 66%, 48%, 1);
|
|
--color-l-blue-30: hsla(200, 64%, 37%, 1);
|
|
--color-l-blue-40: hsla(205, 85%, 25%, 1);
|
|
--color-l-alpha-blue: hsla(186, 64%, 46%, 0.2);
|
|
--color-l-purple-10: hsla(280, 43%, 76%, 1);
|
|
--color-l-purple-20: hsla(277, 35%, 59%, 1);
|
|
--color-l-purple-30: hsla(275, 37%, 43%, 1);
|
|
--color-l-purple-40: hsla(265, 70%, 30%, 1);
|
|
--color-l-alpha-purple: hsla(236, 100%, 72%, 0.2);
|
|
--color-base-00: var(--color-l-gray-10);
|
|
--color-base-05: var(--color-l-gray-20);
|
|
--color-base-10: var(--color-l-gray-30);
|
|
--color-base-20: var(--color-l-gray-40);
|
|
--color-base-25: var(--color-l-gray-50);
|
|
--color-base-30: var(--color-l-gray-60);
|
|
--color-base-35: var(--color-l-gray-70);
|
|
--color-base-40: var(--color-l-gray-80);
|
|
--color-base-50: var(--color-l-gray-90);
|
|
--color-base-60: var(--color-l-gray-100);
|
|
--color-base-70: var(--color-l-gray-120);
|
|
--color-base-100: var(--color-l-gray-140);
|
|
--accent-h: 31;
|
|
--accent-s: 23%;
|
|
--accent-l: 50%;
|
|
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: hsl(
|
|
calc(var(--accent-h) - 1),
|
|
calc(var(--accent-s) * 1.01),
|
|
calc(var(--accent-l) * 1.075)
|
|
);
|
|
--color-accent-2: hsl(
|
|
calc(var(--accent-h) - 3),
|
|
calc(var(--accent-s) * 1.33),
|
|
calc(var(--accent-l) * 1.19)
|
|
);
|
|
--interactive-normal: var(--color-l-gray-30);
|
|
--interactive-hover: color-mix(
|
|
in hsl,
|
|
var(--color-l-gray-10) 50%,
|
|
var(--interactive-normal)
|
|
);
|
|
--interactive-accent-hsl: var(--color-accent-hsl);
|
|
--interactive-accent: var(--color-accent-1);
|
|
--interactive-accent-hover: var(--color-accent-2);
|
|
--non-alternating-color: var(--color-l-gray-70);
|
|
--non-alternating-color-hover-active: var(--color-l-gray-60);
|
|
--alternating-color-1: var(--color-l-yellow-30);
|
|
--alternating-color-1-hover-active: var(--color-l-yellow-40);
|
|
--alternating-color-2: var(--color-l-red-30);
|
|
--alternating-color-2-hover-active: var(--color-l-red-40);
|
|
--alternating-color-3: var(--color-l-blue-30);
|
|
--alternating-color-3-hover-active: var(--color-l-blue-40);
|
|
--color-gray-rgb: 182, 175, 166;
|
|
--color-gray: hsla(34, 9.9%, 68.2%, 1);
|
|
--color-red-rgb: 223, 90, 90;
|
|
--color-red: hsla(0, 58%, 53%, 1);
|
|
--color-orange-rgb: 231, 130, 63;
|
|
--color-orange: hsla(30, 66%, 52%, 1);
|
|
--color-yellow-rgb: 248, 197, 46;
|
|
--color-yellow: hsla(42, 89%, 46%, 1);
|
|
--color-green-rgb: 87, 185, 132;
|
|
--color-green: hsla(146, 37%, 49%, 1);
|
|
--color-cyan-rgb: 124, 180, 206;
|
|
--color-cyan: hsla(178, 39%, 49%, 1);
|
|
--color-blue-rgb: 99, 164, 198;
|
|
--color-blue: hsla(206, 57%, 44%, 1);
|
|
--color-purple-rgb: 135, 106, 193;
|
|
--color-purple: hsla(249, 39%, 60%, 1);
|
|
--color-pink-rgb: 217, 102, 122;
|
|
--color-pink: hsla(351, 44%, 61%, 1);
|
|
--shadow-s:
|
|
0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042),
|
|
0px 15px 30px rgba(0, 0, 0, 0.07);
|
|
--shadow-l:
|
|
0px 1.8px 7.3px rgba(0, 0, 0, 0.091), 0px 6.3px 24.7px rgba(0, 0, 0, 0.132),
|
|
0px 30px 90px rgba(0, 0, 0, 0.22);
|
|
--background-primary: var(--color-l-gray-20);
|
|
--background-primary-alt: var(--color-l-gray-30);
|
|
--background-secondary: var(--color-l-gray-40);
|
|
--background-secondary-alt: var(--color-l-gray-40);
|
|
--background-modifier-hover: rgba(255, 255, 255, 0.5);
|
|
--background-modifier-active-hover: var(--color-l-gray-60);
|
|
--background-modifier-border: var(--color-l-gray-60);
|
|
--background-modifier-border-hover: color-mix(
|
|
in hsl,
|
|
var(--color-l-gray-70) 60%,
|
|
var(--color-l-gray-60)
|
|
);
|
|
--background-modifier-border-focus: color-mix(
|
|
in hsl,
|
|
var(--color-l-gray-70) 60%,
|
|
var(--color-l-gray-60)
|
|
);
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
|
|
--background-modifier-cover: rgba(220, 220, 220, 0.4);
|
|
--background-modifier-warning: var(--color-l-orange-30);
|
|
--background-modifier-warning-hover: var(--color-l-orange-20);
|
|
--background-modifier-error-rgb: var(--color-red-rgb);
|
|
--background-modifier-error: var(--color-l-red-30);
|
|
--background-modifier-error-hover: var(--color-l-red-20);
|
|
--background-modifier-success-rgb: var(--color-green-rgb);
|
|
--background-modifier-success: var(--color-l-green-30);
|
|
--text-normal: var(--color-l-gray-130);
|
|
--text-muted: var(--color-l-gray-100);
|
|
--text-faint: var(--color-l-gray-100);
|
|
--text-on-accent: var(--color-l-gray-10);
|
|
--text-on-accent-inverted: var(--color-l-gray-140);
|
|
--text-error: var(--color-l-red-30);
|
|
--text-warning: var(--color-l-orange-30);
|
|
--text-success: var(--color-l-green-30);
|
|
--text-selection: var(--color-l-alpha-gray);
|
|
--text-highlight-bg-rgb: var(--color-yellow-rgb);
|
|
--text-highlight-bg: var(--color-l-alpha-yellow);
|
|
--text-accent: var(--color-accent);
|
|
--text-accent-hover: var(--color-accent-2);
|
|
--text-selection-theme-text-color: color-mix(
|
|
in srgb,
|
|
currentColor 70%,
|
|
black
|
|
);
|
|
--text-selection-theme-bg: color-mix(
|
|
in srgb,
|
|
var(--color-l-gray-70) 30%,
|
|
transparent
|
|
);
|
|
--icon-color: var(--color-l-gray-80);
|
|
--icon-opacity: 1;
|
|
--icon-bg: transparent;
|
|
--icon-color-hover: var(--color-l-gray-90);
|
|
--icon-opacity-hover: 1;
|
|
--icon-bg-hover: transparent;
|
|
--icon-color-focused: var(--color-l-gray-90);
|
|
--icon-bg-pressed: transparent;
|
|
--icon-color-active: var(--color-l-gray-100);
|
|
--icon-opacity-active: 1;
|
|
--icon-bg-active: var(--color-l-gray-60);
|
|
--icon-bg-active-menu: transparent;
|
|
--sync-icon-working: var(--color-l-orange-10);
|
|
--sync-icon-working-hover: var(--color-l-orange-20);
|
|
--sync-icon-working-active: var(--status-bar-item-clickable-color-active);
|
|
--sync-icon-success: var(--color-l-green-30);
|
|
--sync-icon-success-hover: var(--color-l-green-20);
|
|
--sync-icon-success-active: var(--status-bar-item-clickable-color-active);
|
|
--divider-color: var(--background-modifier-border);
|
|
--divider-color-hover: var(--background-modifier-border-hover);
|
|
--ribbon-slideout-background: var(--color-l-gray-30);
|
|
--ribbon-slideout-shadow:
|
|
8px 7px 21px -4px rgba(0, 0, 0, 0.12), 0px 5px 5px -5px rgba(0, 0, 0, 0.15);
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-thumb-bg: var(--background-modifier-border);
|
|
--scrollbar-active-thumb-bg: var(--background-modifier-border-hover);
|
|
--status-bar-floating-bg: var(--color-l-gray-30);
|
|
--status-bar-floating-shadow:
|
|
8px 7px 21px -4px rgba(0, 0, 0, 0.12), 0px 5px 5px -5px rgba(0, 0, 0, 0.15);
|
|
--status-bar-item-color: var(--color-l-gray-80);
|
|
--status-bar-item-color-hover: var(--color-l-gray-100);
|
|
--status-bar-item-bg-hover: transparent;
|
|
--status-bar-item-clickable-color-active: var(--color-l-gray-70);
|
|
--status-bar-item-clickable-bg-active: transparent;
|
|
--titlebar-background: var(--background-secondary);
|
|
--titlebar-background-focused: var(--background-secondary);
|
|
--titlebar-text-color: var(--color-l-gray-60);
|
|
--titlebar-text-color-focused: var(--color-l-gray-70);
|
|
--vault-profile-color: var(--vault-name-color);
|
|
--vault-name-color: var(--color-l-gray-100);
|
|
--vault-name-color-hover: var(--color-l-gray-120);
|
|
--vault-name-background: var(--color-l-gray-30);
|
|
--vault-name-border: var(--vault-name-border-width) solid
|
|
var(--background-modifier-border);
|
|
--disabled-component-opacity: 0.3;
|
|
--button-shadow: var(--input-shadow);
|
|
--button-shadow-hover: var(--input-shadow-hover);
|
|
--button-shadow-active: var(--input-shadow-active);
|
|
--button-shadow-focus:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.09),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.4),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.05),
|
|
0px 0px 0px 3px var(--color-l-alpha-gray);
|
|
--button-accent-shadow:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.09),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.15),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.22), 0px 2px 4px -1px rgba(0, 0, 0, 0.19);
|
|
--button-accent-shadow-hover:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.19),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.15),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), 0px 2px 6px -1px rgba(0, 0, 0, 0.24);
|
|
--button-accent-shadow-active: var(--input-shadow-active);
|
|
--button-accent-shadow-focus:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.28),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.15),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.24),
|
|
0px 0px 0px 3px var(--color-l-alpha-gray);
|
|
--empty-state-action-btn-bg: color-mix(
|
|
in srgb,
|
|
var(--background-primary-alt) 50%,
|
|
transparent
|
|
);
|
|
--copy-code-btn-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.09),
|
|
0px 2px 4px -2px rgba(0, 0, 0, 0.06);
|
|
--caret-color: var(--color-l-gray-80);
|
|
--swatch-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
|
|
--checkbox-marker-color: white;
|
|
--checkbox-color: var(--color-l-green-30);
|
|
--checkbox-color-hover: var(--color-l-green-20);
|
|
--checked-border-color: rgba(0, 0, 0, 0.15);
|
|
--checked-border-color-hover: rgba(0, 0, 0, 0.1);
|
|
--checkbox-border-color: var(--color-l-gray-60);
|
|
--checkbox-border-color-hover: var(--color-l-gray-70);
|
|
--checklist-bg: var(--color-l-gray-10);
|
|
--checklist-shadow-hover: 0px 0px 0px 3px rgba(0, 0, 0, 0.07);
|
|
--checklist-done-color: var(--color-l-gray-80);
|
|
--inprogress-chbx-color: hsla(34, 82%, 57%, 1);
|
|
--inprogress-chbx-color-hover: hsla(34, 82%, 64%, 1);
|
|
--inprogress-chbx-border-color: color-mix(
|
|
in srgb,
|
|
var(--inprogress-chbx-color) 65%,
|
|
var(--color-base-60)
|
|
);
|
|
--resched-chbx-color: hsla(178, 18%, 59%, 1);
|
|
--sched-chbx-color: hsla(32, 10%, 68%, 1);
|
|
--important-chbx-color: hsla(17, 83%, 52%, 1);
|
|
--cancelled-chbx-color: hsla(32, 10%, 68%, 1);
|
|
--cancelled-chbx-text-color: var(--text-faint);
|
|
--cancelled-chbx-text-decoration: line-through;
|
|
--question-chbx-color: hsla(281, 33%, 54%, 1);
|
|
--star-chbx-color: hsla(40, 93%, 51%, 1);
|
|
--note-chbx-color: hsla(8, 51%, 53%, 1);
|
|
--location-chbox-color: hsla(0, 56%, 48%, 1);
|
|
--info-chbx-color: hsla(178, 29%, 45%, 1);
|
|
--amount-chbx-color: hsla(152, 42%, 41%, 1);
|
|
--quote-chbx-color: hsla(206, 47%, 48%, 1);
|
|
--idea-chbx-color: hsla(30, 72%, 62%, 1);
|
|
--pro-chbx-color: hsla(149, 34%, 44%, 1);
|
|
--con-chbx-color: hsla(12, 62%, 45%, 1);
|
|
--bookmark-chbx-color: hsla(21, 81%, 59%, 1);
|
|
--fire-chbx-color: hsla(14, 80%, 53%, 1);
|
|
--win-chbx-color: hsla(45, 75%, 48%, 1);
|
|
--key-chbx-color: hsla(45, 50%, 45%, 1);
|
|
--up-chbx-color: hsla(146, 37%, 49%, 1);
|
|
--down-chbx-color: hsla(4, 56%, 48%, 1);
|
|
--law-chbx-color: hsla(34, 34%, 52%, 1);
|
|
--language-chbx-color: hsla(7, 59%, 64%, 1);
|
|
--clock-chbx-color: hsla(210, 39%, 49%, 1);
|
|
--telephone-chbx-color: hsla(148, 47%, 47%, 1);
|
|
--milestone-chbx-color: hsla(265, 40%, 58%, 1);
|
|
--deadline-chbx-color: hsla(8, 75%, 55%, 1);
|
|
--blocked-chbx-color: hsla(0, 70%, 50%, 1);
|
|
--delegated-chbx-color: hsla(210, 60%, 55%, 1);
|
|
--health-chbx-color: hsla(350, 65%, 58%, 1);
|
|
--shopping-chbx-color: hsla(140, 45%, 45%, 1);
|
|
--home-chbx-color: hsla(28, 45%, 45%, 1);
|
|
--recurring-chbx-color: hsla(185, 45%, 45%, 1);
|
|
--task-progress-track: var(--background-modifier-border);
|
|
--task-progress-track-border: var(--background-modifier-border-hover);
|
|
--task-progress-fill: var(--interactive-accent);
|
|
--speech-bubble-5: var(--callout-note);
|
|
--speech-bubble-6: var(--callout-tip);
|
|
--speech-bubble-7: var(--callout-success);
|
|
--speech-bubble-8: var(--callout-warning);
|
|
--speech-bubble-9: var(--callout-danger);
|
|
--speech-bubble-opacity: 20%;
|
|
--drag-ghost-background: var(--interactive-accent);
|
|
--drag-ghost-text-color: var(--text-on-accent);
|
|
--loading-line-bg-color: var(--background-secondary);
|
|
--loading-line-color: var(--color-l-blue-10);
|
|
--loading-line-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
|
--menu-item-icon-color: var(--color-l-gray-80);
|
|
--menu-item-bg-hover: rgba(255, 255, 255, 0.35);
|
|
--menu-item-icon-color-active: var(--color-l-gray-70);
|
|
--menu-item-color-active: var(--color-l-gray-70);
|
|
--menu-item-bg-active: var(--color-l-gray-50);
|
|
--modal-border-color: var(--background-modifier-border-hover);
|
|
--settings-nav-group-title-color: var(--color-l-gray-70);
|
|
--settings-nav-item-text-color: var(--color-l-gray-110);
|
|
--settings-nav-item-text-color-hover: var(--color-l-gray-130);
|
|
--settings-nav-item-bg-hover: transparent;
|
|
--settings-nav-item-text-color-active: var(--color-l-gray-80);
|
|
--settings-nav-item-active-color: var(--color-l-gray-10);
|
|
--community-item-flair-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
|
--community-item-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
|
|
--community-item-shadow-hover: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
|
|
--community-item-selected-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.23),
|
|
0px 1px 3px -2.6px rgba(0, 0, 0, 0.23),
|
|
0px 2px 6px -4.2px rgba(0, 0, 0, 0.19), 0px 4px 12px -6px rgba(0, 0, 0, 0.9);
|
|
--nav-item-color: var(--color-l-gray-110);
|
|
--nav-item-color-hover: var(--color-l-gray-110);
|
|
--nav-item-color-active: var(--color-l-gray-110);
|
|
--nav-item-color-selected: var(--color-l-gray-20);
|
|
--nav-item-color-highlighted: var(--text-accent-hover);
|
|
--nav-item-background-hover: rgba(255, 255, 255, 0.25);
|
|
--nav-item-background-active: rgba(255, 255, 255, 0.25);
|
|
--nav-item-background-selected: hsla(197, 82%, 27%, 0.5);
|
|
--nav-item-background-selected-hover: hsla(197, 82%, 27%, 0.4);
|
|
--nav-indentation-guide-color: var(--indentation-guide-color);
|
|
--nav-collapse-icon-color: var(--collapse-icon-color);
|
|
--nav-collapse-icon-color-collapsed: var(--text-faint);
|
|
--nav-heading-color: var(--color-l-gray-100);
|
|
--nav-heading-color-hover: var(--color-l-gray-100);
|
|
--nav-heading-color-collapsed: var(--color-l-gray-100);
|
|
--nav-heading-color-collapsed-hover: var(--color-l-gray-100);
|
|
--nav-item-shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06);
|
|
--nav-file-shadow-active:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.09),
|
|
inset 0px calc(-1 * var(--button-axis-offset)) 0px var(--button-axis-offset)
|
|
rgba(0, 0, 0, 0.07),
|
|
0px 2px 3px 0px rgba(0, 0, 0, 0.05);
|
|
--nav-file-tag-color: var(--color-l-gray-90);
|
|
--nav-file-tag-bg: transparent;
|
|
--collapse-icon-color: var(--color-l-gray-70);
|
|
--collapse-icon-color-collapsed: var(--color-l-gray-70);
|
|
--flair-count-color: var(--color-l-gray-80);
|
|
--flair-count-bg-color: var(--color-l-gray-40);
|
|
--indentation-guide-color: var(--background-modifier-border);
|
|
--indentation-guide-color-active: var(--background-modifier-border-focus);
|
|
--background-modifier-message: var(--color-l-gray-100);
|
|
--notice-color: var(--text-on-accent);
|
|
--notice-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12),
|
|
0px 2px 9px -2.1px rgba(0, 0, 0, 0.38),
|
|
0px 3px 17px -4.3px rgba(0, 0, 0, 0.12),
|
|
0px 7px 30px -5.5px rgba(0, 0, 0, 0.09);
|
|
--pill-color: var(--color-l-gray-120);
|
|
--pill-color-hover: var(--color-l-gray-140);
|
|
--pill-color-remove: var(--color-l-gray-70);
|
|
--pill-color-remove-hover: var(--color-l-gray-70);
|
|
--pill-background: rgba(255, 255, 255, 0.4);
|
|
--pill-background-hover: var(--pill-background);
|
|
--pill-border-color: color-mix(
|
|
in srgb,
|
|
var(--background-modifier-border) 50%,
|
|
transparent
|
|
);
|
|
--pill-border-color-hover: color-mix(
|
|
in srgb,
|
|
var(--background-modifier-border-hover) 50%,
|
|
transparent
|
|
);
|
|
--progress-background: var(--color-l-gray-40);
|
|
--progress-bar-outline: rgba(0, 0, 0, 0.1);
|
|
--progress-value-outline: rgba(0, 0, 0, 0.18);
|
|
--progress-color-1: var(--color-l-red-20);
|
|
--progress-color-2: var(--color-l-orange-20);
|
|
--progress-color-3: var(--color-l-yellow-20);
|
|
--progress-color-4: var(--color-l-green-30);
|
|
--progress-color-5: linear-gradient(
|
|
45deg,
|
|
var(--progress-gradient-1),
|
|
var(--progress-gradient-2),
|
|
var(--progress-gradient-3)
|
|
);
|
|
--progress-gradient-1: var(--color-l-red-10);
|
|
--progress-gradient-2: var(--color-l-yellow-10);
|
|
--progress-gradient-3: var(--color-l-blue-10);
|
|
--prompt-input-background: var(--background-primary);
|
|
--prompt-border-color: var(--background-modifier-border-focus);
|
|
--prompt-results-background: var(--background-primary);
|
|
--prompt-suggestion-color: var(--color-l-gray-90);
|
|
--prompt-suggestion-highlight-color: color-mix(
|
|
in srgb,
|
|
var(--prompt-suggestion-color) 70%,
|
|
black
|
|
);
|
|
--prompt-suggestion-color-selected: var(--color-l-gray-130);
|
|
--prompt-suggestion-highlight-color-selected: var(--color-l-gray-130);
|
|
--prompt-suggestion-background-selected: rgba(255, 255, 255, 0.35);
|
|
--prompt-suggestion-shadow-selected:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
|
|
0px 2px 6px 0px rgba(0, 0, 0, 0.03);
|
|
--prompt-instructions-background: color-mix(
|
|
in hsl,
|
|
var(--background-primary) 60%,
|
|
var(--background-secondary)
|
|
);
|
|
--prompt-separator-border: 1px solid var(--color-l-gray-40);
|
|
--prompt-border-color: var(--background-modifier-border-focus);
|
|
--search-icon-color: var(--color-l-gray-80);
|
|
--search-clear-button-color: var(--icon-color);
|
|
--search-clear-button-color-hover: var(--background-modifier-error-hover);
|
|
--slider-track-background: var(--color-l-gray-60);
|
|
--slider-track-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
|
|
0px 0px 0px 1px rgba(255, 255, 255, 0.08);
|
|
--slider-thumb-bg: var(--color-l-gray-10);
|
|
--slider-thumb-border-width: 0px;
|
|
--slider-thumb-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0pc 1px 0px 1px rgba(255, 255, 255, 1),
|
|
inset 0px -1px 0px 1px rgba(0, 0, 0, 0.09),
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.1);
|
|
--slider-thumb-shadow-hover:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0pc 1px 0px 1px rgba(255, 255, 255, 1),
|
|
inset 0px -1px 0px 1px rgba(0, 0, 0, 0.09),
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 6px rgba(0, 0, 0, 0.05);
|
|
--tab-background-active: var(--background-primary);
|
|
--tab-text-color: var(--text-faint);
|
|
--tab-text-color-active: var(--text-muted);
|
|
--tab-text-color-focused: var(--text-muted);
|
|
--tab-text-color-focused-active: var(--text-muted);
|
|
--tab-text-color-focused-highlighted: var(--text-accent);
|
|
--tab-text-color-focused-active-current: var(--text-normal);
|
|
--tab-container-background: var(--background-secondary);
|
|
--tab-divider-color: var(--background-modifier-border-hover);
|
|
--tab-outline-color: var(--color-l-gray-70);
|
|
--tab-bg: transparent;
|
|
--tab-active-bg: var(--background-primary);
|
|
--tab-active-shadow:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 1),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 1px
|
|
rgba(0, 0, 0, 0.09),
|
|
0px 1px 2px -0.1px rgba(0, 0, 0, 0.15);
|
|
--tab-outline-color: transparent;
|
|
--tab-stacked-shadow:
|
|
-2.9px 0 10.5px -6.2px rgba(0, 0, 0, 0.08),
|
|
-6.2px 0 3.6px -5.2px rgba(0, 0, 0, 0.04),
|
|
-9.4px 0 8.4px -4.1px rgba(0, 0, 0, 0.06);
|
|
--background-modifier-form-field: var(--color-l-gray-30);
|
|
--input-shadow:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.09),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.4),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.05);
|
|
--input-shadow-hover:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.09),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.4),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.15), 0px 2px 6px -1px rgba(0, 0, 0, 0.1);
|
|
--input-shadow-active:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15),
|
|
inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size))
|
|
rgba(0, 0, 0, 0.09),
|
|
inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2),
|
|
0px 0px 0px 1px rgba(255, 255, 255, 0.6);
|
|
--text-input-color: var(--color-l-gray-130);
|
|
--text-input-color-focused: var(--color-l-gray-130);
|
|
--text-input-bg-active: color-mix(
|
|
in hsl,
|
|
var(--background-modifier-form-field) 40%,
|
|
var(--color-l-gray-10)
|
|
);
|
|
--text-input-border-color: var(--color-l-gray-60);
|
|
--text-input-shadow-active:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 1),
|
|
inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04),
|
|
0px 1px 6px 0px rgba(0, 0, 0, 0.07);
|
|
--toggle-thumb-color: var(--color-l-gray-10);
|
|
--toggle-bg: color-mix(
|
|
in hsl,
|
|
var(--color-l-gray-60) 80%,
|
|
var(--color-l-gray-70)
|
|
);
|
|
--toggle-bg-enabled: var(--color-l-green-30);
|
|
--toggle-shadow:
|
|
inset 0 4px 10px rgba(0, 0, 0, 0.09),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06), inset 0 0 1px rgba(0, 0, 0, 0.28);
|
|
--toggle-shadow-hover:
|
|
inset 0 6px 20px rgba(0, 0, 0, 0.18),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06), inset 0 0 1px rgba(0, 0, 0, 0.32);
|
|
--toggle-shadow-focus:
|
|
inset 0 6px 20px rgba(0, 0, 0, 0.18),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06),
|
|
inset 0 0 1px rgba(0, 0, 0, 0.32), 0px 0px 0px 5px rgba(0, 0, 0, 0.05);
|
|
--toggle-thumb-shadow:
|
|
inset 0px 1px 0px 1px rgba(255, 255, 255, 1),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.2);
|
|
--tooltip-shadow:
|
|
inset 0px -1px 0px 0px rgba(0, 0, 0, 0.12),
|
|
0px 2px 4px -1.4px rgba(0, 0, 0, 0.3),
|
|
0px 3px 10px -1.7px rgba(0, 0, 0, 0.14);
|
|
--active-line-bg: var(--color-base-00);
|
|
--editor-bg-color: var(--background-primary);
|
|
--editor-bgpattern-color: var(--color-l-gray-60);
|
|
--blockquote-border-color: var(--background-modifier-border);
|
|
--blockquote-background-color: var(--color-l-gray-10);
|
|
--callout-color-opacity: 32.5%;
|
|
--callout-border-opacity: 0.2;
|
|
--callout-icon-fold-filter: brightness(0.8);
|
|
--callout-title-color: var(--text-normal);
|
|
--callout-content-background: color-mix(
|
|
in srgb,
|
|
var(--background-primary-alt) 50%,
|
|
var(--background-primary)
|
|
);
|
|
--callout-container-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
|
|
0px 1px 6px 0px rgba(0, 0, 0, 0.12);
|
|
--callout-title-shadow:
|
|
inset 0px -1px 0px 0px rgba(0, 0, 0, 0.05),
|
|
inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2);
|
|
--callout-content-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
|
|
inset 0px calc(-1 * var(--callout-shadow-offset))
|
|
var(--callout-content-shadow-blur) 0px rgba(100, 100, 100, 0.13);
|
|
--embed-background: var(--embed-bg-color-mix);
|
|
--embed-bg-color-mix: color-mix(
|
|
in srgb,
|
|
var(--background-primary-alt) 50%,
|
|
var(--editor-bg-color)
|
|
);
|
|
--embed-border-top-color: var(--background-modifier-border);
|
|
--embed-border-end-color: var(--background-modifier-border);
|
|
--embed-border-bottom-color: var(--background-modifier-border);
|
|
--embed-border-start-color: var(--background-modifier-border);
|
|
--embed-title-color: var(--color-l-gray-90);
|
|
--embed-title-border-color: var(--background-modifier-border);
|
|
--embed-block-shadow-hover: none;
|
|
--embed-edit-btn-bg: color-mix(
|
|
in srgb,
|
|
var(--color-l-gray-20) 70%,
|
|
transparent
|
|
);
|
|
--embed-edit-btn-bg-hover: color-mix(
|
|
in srgb,
|
|
var(--color-l-gray-20) 100%,
|
|
transparent
|
|
);
|
|
--embed-edit-btn-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px -2px 1px 1px rgba(0, 0, 0, 0.1);
|
|
--embed-edit-btn-shadow-hover:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px -2px 1px 1px rgba(0, 0, 0, 0.1),
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.1);
|
|
--bold-color: var(--color-l-red-30);
|
|
--italic-color: var(--color-l-blue-30);
|
|
--bold-italic-color: var(--color-l-gray-140);
|
|
--underline-color: var(--text-normal);
|
|
--underline-decoration-color: color-mix(
|
|
in srgb,
|
|
currentColor var(--underline-decoration-opacity),
|
|
transparent
|
|
);
|
|
--strikethrough-color: var(--color-l-gray-80);
|
|
--bold-italic-strikethrough-color: var(--color-l-gray-90);
|
|
--editor-border-color: var(--background-modifier-border);
|
|
--file-header-border: var(--file-header-border-width) solid
|
|
var(--file-header-border-color);
|
|
--file-header-border-color: var(--background-modifier-border);
|
|
--breadcrumb-color: var(--color-l-gray-90);
|
|
--breadcrumb-color-hover: var(--color-l-gray-90);
|
|
--breadcrumb-bg-hover: var(--color-l-gray-40);
|
|
--breadcrumb-separator-color: var(--background-modifier-border);
|
|
--file-header-title-color: var(--color-l-gray-120);
|
|
--nav-folder-1-color: var(--color-l-red-30);
|
|
--nav-folder-1-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-red) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-1-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-1-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-1-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-1-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-1-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-1-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-color: var(--color-l-orange-30);
|
|
--nav-folder-2-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-orange) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-2-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-2-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-2-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-color: var(--color-l-yellow-40);
|
|
--nav-folder-3-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-yellow) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-3-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-3-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-3-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-color: var(--color-l-green-40);
|
|
--nav-folder-4-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-green) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-4-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-4-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-4-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-color: var(--color-l-blue-30);
|
|
--nav-folder-5-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-blue) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-5-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-5-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-5-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-color: var(--color-l-purple-30);
|
|
--nav-folder-6-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-purple) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-6-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-6-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-6-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-color: var(--color-l-red-30);
|
|
--nav-folder-7-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-red) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-7-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-7-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-7-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-color: var(--color-l-orange-30);
|
|
--nav-folder-8-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-orange) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-8-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-8-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-8-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-color: var(--color-l-yellow-40);
|
|
--nav-folder-9-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-yellow) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-9-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-9-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-9-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-color: var(--color-l-green-40);
|
|
--nav-folder-10-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-green) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-10-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-10-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-10-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-color: var(--color-l-blue-30);
|
|
--nav-folder-11-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-blue) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-11-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-11-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-11-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-color: var(--color-l-purple-30);
|
|
--nav-folder-12-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-l-alpha-purple) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-12-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-12-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-12-color) 25%,
|
|
transparent
|
|
);
|
|
--gutter-color: color-mix(
|
|
in hsl,
|
|
var(--color-l-gray-60) 40%,
|
|
var(--color-l-gray-70)
|
|
);
|
|
--gutter-color-active: var(--color-l-gray-90);
|
|
--h1-color: var(--color-l-gray-140);
|
|
--h1-bg-color: transparent;
|
|
--h1-border-top-color: var(--background-modifier-border);
|
|
--h1-border-right-color: var(--background-modifier-border);
|
|
--h1-border-bottom-color: var(--background-modifier-border);
|
|
--h1-border-left-color: var(--background-modifier-border);
|
|
--h2-color: var(--color-l-gray-140);
|
|
--h2-bg-color: transparent;
|
|
--h2-border-top-color: var(--background-modifier-border);
|
|
--h2-border-right-color: var(--background-modifier-border);
|
|
--h2-border-bottom-color: var(--background-modifier-border);
|
|
--h2-border-left-color: var(--background-modifier-border);
|
|
--h3-color: var(--color-l-gray-140);
|
|
--h3-bg-color: transparent;
|
|
--h3-border-top-color: var(--background-modifier-border);
|
|
--h3-border-right-color: var(--background-modifier-border);
|
|
--h3-border-bottom-color: var(--background-modifier-border);
|
|
--h3-border-left-color: var(--background-modifier-border);
|
|
--h4-color: var(--color-l-gray-140);
|
|
--h4-bg-color: transparent;
|
|
--h4-border-top-color: var(--background-modifier-border);
|
|
--h4-border-right-color: var(--background-modifier-border);
|
|
--h4-border-bottom-color: var(--background-modifier-border);
|
|
--h4-border-left-color: var(--background-modifier-border);
|
|
--h5-color: var(--color-l-gray-140);
|
|
--h5-bg-color: transparent;
|
|
--h5-border-top-color: var(--background-modifier-border);
|
|
--h5-border-right-color: var(--background-modifier-border);
|
|
--h5-border-bottom-color: var(--background-modifier-border);
|
|
--h5-border-left-color: var(--background-modifier-border);
|
|
--h6-color: var(--color-l-gray-140);
|
|
--h6-bg-color: transparent;
|
|
--h6-border-top-color: var(--background-modifier-border);
|
|
--h6-border-right-color: var(--background-modifier-border);
|
|
--h6-border-bottom-color: var(--background-modifier-border);
|
|
--h6-border-left-color: var(--background-modifier-border);
|
|
--normal-highlight-color: var(--text-normal);
|
|
--normal-highlight-bg: var(--color-l-alpha-yellow);
|
|
--bold-highlight-color: var(--text-normal);
|
|
--bold-highlight-bg: var(--color-l-alpha-red);
|
|
--italic-highlight-color: var(--text-normal);
|
|
--italic-highlight-bg: var(--color-l-alpha-blue);
|
|
--strikethrough-highlight-color: var(--strikethrough-color);
|
|
--strikethrough-highlight-bg: var(--color-l-alpha-yellow);
|
|
--bold-italic-highlight-color: var(--bold-italic-color);
|
|
--bold-italic-highlight-bg: var(--color-l-alpha-green);
|
|
--inline-code-color: var(--color-l-red-10);
|
|
--inline-code-bg: var(--color-l-gray-10);
|
|
--inline-title-color: var(--color-l-gray-140);
|
|
--inline-query-bg: color-mix(
|
|
in srgb,
|
|
var(--background-secondary) 20%,
|
|
var(--editor-bg-color)
|
|
);
|
|
--inline-query-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.06);
|
|
--kbd-color: var(--color-l-red-10);
|
|
--kbd-background: var(--color-l-gray-40);
|
|
--kbd-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.03),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 0px
|
|
rgba(0, 0, 0, 0.06);
|
|
--list-marker-color: var(--color-l-gray-80);
|
|
--list-marker-color-hover: var(--color-l-gray-100);
|
|
--list-marker-color-collapsed: var(--color-l-gray-90);
|
|
--link-ahref-color: var(--color-l-red-30);
|
|
--link-ahref-decoration-color: color-mix(
|
|
in srgb,
|
|
currentColor var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-ahref-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-ahref-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-ahref-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-ahref-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-unresolved-color: var(--color-l-gray-100);
|
|
--link-unresolved-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--link-unresolved-color) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-unresolved-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-unresolved-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-unresolved-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-unresolved-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-color: hsl(40 90% 29%);
|
|
--link-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--link-color) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-external-color: var(--color-l-green-40);
|
|
--link-external-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--link-external-color) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-external-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-external-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-external-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-external-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--metadata-background: color-mix(
|
|
in srgb,
|
|
var(--editor-bg-color) 50%,
|
|
var(--background-primary-alt)
|
|
);
|
|
--metadata-tab-background: var(--background-secondary);
|
|
--metadata-properties-title-color-collapsed: var(--color-l-gray-70);
|
|
--metadata-properties-title-color-hover: var(--color-l-gray-80);
|
|
--metadata-properties-title-color: var(--color-l-gray-70);
|
|
--metadata-input-text-color: var(--color-l-gray-120);
|
|
--metadata-input-background: transparent;
|
|
--metadata-input-background-hover: transparent;
|
|
--metadata-input-background-active: rgba(255, 255, 255, 0.45);
|
|
--metadata-label-background-active: var(--metadata-input-background-active);
|
|
--metadata-input-shadow-hover: none;
|
|
--metadata-input-shadow-active:
|
|
inset 0px 0px 0px 1px var(--background-modifier-border),
|
|
0px 0px 0px 1px var(--background-modifier-border);
|
|
--metadata-key-input-color: var(--color-l-gray-100);
|
|
--metadata-key-input-color-active: var(--color-l-gray-120);
|
|
--metadata-divider-color: var(--background-modifier-border);
|
|
--metadata-divider-color-hover: transparent;
|
|
--metadata-divider-color-focus: transparent;
|
|
--yaml-base-color: var(--color-l-red-10);
|
|
--yaml-def-meta-color: var(--color-l-gray-70);
|
|
--yaml-atom-color: var(--color-l-blue-10);
|
|
--yaml-keyword-color: var(--color-l-yellow-30);
|
|
--yaml-number-color: var(--color-l-red-10);
|
|
--yaml-string-color: var(--color-l-yellow-30);
|
|
--table-background: var(--color-l-gray-10);
|
|
--table-header-background: var(--color-l-gray-30);
|
|
--table-header-background-hover: var(--table-header-background);
|
|
--table-column-alt-background: var(--color-l-gray-30);
|
|
--tag-color: var(--color-l-blue-30);
|
|
--tag-color-hover: var(--color-l-blue-20);
|
|
--tag-background: rgba(255, 255, 255, 0.5);
|
|
--tag-background-hover: rgba(255, 255, 255, 0.8);
|
|
--tag-border-width: 1px;
|
|
--tag-border-color: rgba(0, 0, 0, 0.15);
|
|
--tag-border-color-hover: rgba(0, 0, 0, 0.25);
|
|
--tag-shadow: inset 0px -0.1em 0px 0px rgba(0, 0, 0, 0.1);
|
|
--tag-shadow-hover:
|
|
inset 0px -0.1em 0px 0px rgba(0, 0, 0, 0.1),
|
|
0px 0px 0px 3px rgba(0, 0, 0, 0.03);
|
|
--tag-shadow-active: inset 0px -0.1em 0px 0px rgba(0, 0, 0, 0.1);
|
|
--pill-tag-color-1: var(--color-l-yellow-40);
|
|
--pill-tag-bg-1: var(--color-l-alpha-yellow);
|
|
--pill-tag-color-2: var(--color-l-red-40);
|
|
--pill-tag-bg-2: var(--color-l-alpha-red);
|
|
--pill-tag-color-3: var(--color-l-blue-40);
|
|
--pill-tag-bg-3: var(--color-l-alpha-blue);
|
|
--pill-tag-shadow-hover: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.theme-light.is-mobile {
|
|
--mobile-sidebar-background: var(--background-secondary);
|
|
--nav-item-color: var(--text-muted);
|
|
--mobile-sidebar-left-shadow:
|
|
5px 0px 14px -0.6px rgba(0, 0, 0, 0.09),
|
|
10px 0px 20px -4.9px rgba(0, 0, 0, 0.02);
|
|
--mobile-sidebar-right-shadow:
|
|
-5px 0px 14px -0.6px rgba(0, 0, 0, 0.09),
|
|
-10px 0px 20px -4.9px rgba(0, 0, 0, 0.02);
|
|
--mobile-sidebar-tablet-shadow:
|
|
0px 2px 6px -0.3px rgba(0, 0, 0, 0.1),
|
|
0px 5px 14px -0.6px rgba(0, 0, 0, 0.09),
|
|
0px 10px 20px -4.9px rgba(0, 0, 0, 0.02);
|
|
--mobile-toolbar-bg: color-mix(
|
|
in srgb,
|
|
var(--background-primary) 50%,
|
|
var(--background-primary-alt)
|
|
);
|
|
--navbar-shadow:
|
|
0px 4px 20px 0px rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
|
|
--pull-down-action-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.12),
|
|
0px 2px 9px -2.1px rgba(0, 0, 0, 0.38),
|
|
0px 3px 17px -4.3px rgba(0, 0, 0, 0.12),
|
|
0px 7px 30px -5.5px rgba(0, 0, 0, 0.09);
|
|
}
|
|
.theme-light {
|
|
--canvas-background: var(--editor-bg-color);
|
|
--canvas-color: var(--color-gray-rgb);
|
|
--canvas-color-1: var(--color-red-rgb);
|
|
--canvas-color-2: var(--color-orange-rgb);
|
|
--canvas-color-3: var(--color-yellow-rgb);
|
|
--canvas-color-4: var(--color-green-rgb);
|
|
--canvas-color-5: var(--color-blue-rgb);
|
|
--canvas-color-6: var(--color-purple-rgb);
|
|
--canvas-icon-color: var(--color-l-gray-80);
|
|
--canvas-icon-color-hover: var(--color-l-gray-120);
|
|
--canvas-icon-color-disabled: var(--color-l-gray-60);
|
|
--canvas-menu-bg: color-mix(
|
|
in hsl,
|
|
var(--color-l-gray-10) 50%,
|
|
var(--color-l-gray-20)
|
|
);
|
|
--canvas-menu-bg-hover: var(--color-l-gray-10);
|
|
--canvas-menu-border: 1px solid var(--background-modifier-border);
|
|
--canvas-menu-shadow:
|
|
0px 1px 2px 1px rgba(0, 0, 0, 0.02), 0px 1px 4px -2.1px rgba(0, 0, 0, 0.1),
|
|
0px 2px 8px -1.2px rgba(0, 0, 0, 0.03);
|
|
--graph-node: var(--color-l-blue-20);
|
|
--graph-node-unresolved: var(--color-l-yellow-20);
|
|
--graph-node-unresolved-opacity: 1;
|
|
--graph-node-tag: var(--color-l-red-20);
|
|
--graph-node-attachment: var(--color-l-green-10);
|
|
--graph-node-focused: var(--color-l-gray-130);
|
|
--graph-node-highlight-fill: var(--color-l-gray-90);
|
|
--graph-node-highlight-line: var(--color-l-gray-70);
|
|
--graph-text: var(--color-l-gray-80);
|
|
--graph-line: var(--background-modifier-border);
|
|
--graph-arrow: var(--color-l-gray-90);
|
|
--search-result-background: var(--background-primary-alt);
|
|
--search-result-background-hover: color-mix(
|
|
in srgb,
|
|
var(--color-l-gray-10) 50%,
|
|
var(--color-l-gray-20)
|
|
);
|
|
--search-result-dest-file-color: var(--color-l-gray-100);
|
|
--search-result-dest-file-bg: var(--color-l-gray-20);
|
|
--search-result-dest-file-icon-color: var(--color-l-gray-70);
|
|
--search-result-dest-file-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px -2px 0px 0px rgba(0, 0, 0, 0.05);
|
|
--search-result-dest-file-bg-hover: color-mix(
|
|
in srgb,
|
|
var(--color-l-gray-20) 50%,
|
|
var(--color-l-gray-10)
|
|
);
|
|
--search-result-dest-file-shadow-hover:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1),
|
|
inset 0px -2px 0px 0px rgba(0, 0, 0, 0.05),
|
|
0px 2px 3px 0px rgba(0, 0, 0, 0.09);
|
|
--style-settings-container-bg: color-mix(
|
|
in srgb,
|
|
var(--background-primary-alt) 50%,
|
|
transparent
|
|
);
|
|
--pcr-btn-shadow: inset 0px 0px 0px 1.5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.theme-dark {
|
|
color-scheme: dark;
|
|
--color-d-gray-10: hsla(32, 48%, 85%, 1);
|
|
--color-d-gray-20: hsla(34, 39%, 74%, 1);
|
|
--color-d-gray-30: hsla(34, 31%, 68%, 1);
|
|
--color-d-gray-40: hsla(35, 27%, 55%, 1);
|
|
--color-d-gray-50: hsla(34, 24%, 46%, 1);
|
|
--color-d-gray-60: hsla(33, 27%, 33%, 1);
|
|
--color-d-gray-70: hsla(31, 27%, 25%, 1);
|
|
--color-d-gray-80: hsla(28, 22%, 19%, 1);
|
|
--color-d-gray-90: hsla(33, 20%, 17%, 1);
|
|
--color-d-gray-100: hsla(30, 19%, 15%, 1);
|
|
--color-d-gray-110: hsla(30, 17%, 14%, 1);
|
|
--color-d-gray-120: hsla(29, 16%, 13%, 1);
|
|
--color-d-gray-130: hsla(24, 18%, 11%, 1);
|
|
--color-d-gray-140: hsla(32, 21%, 9%, 1);
|
|
--color-d-alpha-gray: hsla(34, 24%, 40%, 0.2);
|
|
--color-d-red-10: hsla(5, 94%, 73%, 1);
|
|
--color-d-red-20: hsla(4, 91%, 67%, 1);
|
|
--color-d-red-30: hsla(4, 88%, 61%, 1);
|
|
--color-d-red-40: hsla(2, 75%, 52%, 1);
|
|
--color-d-alpha-red: hsla(350, 84%, 63%, 0.2);
|
|
--color-d-orange-10: hsla(26, 85%, 58%, 1);
|
|
--color-d-orange-20: hsla(24, 84%, 50%, 1);
|
|
--color-d-orange-30: hsla(22, 82%, 47%, 1);
|
|
--color-d-orange-40: hsla(19, 81%, 41%, 1);
|
|
--color-d-alpha-orange: hsla(27, 100%, 50%, 0.2);
|
|
--color-d-yellow-10: hsla(43, 69%, 63%, 1);
|
|
--color-d-yellow-20: hsla(42, 79%, 51%, 1);
|
|
--color-d-yellow-30: hsla(40, 78%, 48%, 1);
|
|
--color-d-yellow-40: hsla(38, 76%, 42%, 1);
|
|
--color-d-alpha-yellow: hsla(44, 100%, 50%, 0.2);
|
|
--color-d-green-10: hsla(152, 51%, 54%, 1);
|
|
--color-d-green-20: hsla(154, 57%, 42%, 1);
|
|
--color-d-green-30: hsla(155, 78%, 29%, 1);
|
|
--color-d-green-40: hsla(154, 75%, 26%, 1);
|
|
--color-d-alpha-green: hsla(74, 69%, 44%, 0.2);
|
|
--color-d-blue-10: hsla(191, 54%, 62%, 1);
|
|
--color-d-blue-20: hsla(194, 59%, 56%, 1);
|
|
--color-d-blue-30: hsla(197, 48%, 49%, 1);
|
|
--color-d-blue-40: hsla(201, 45%, 40%, 1);
|
|
--color-d-alpha-blue: hsla(186, 64%, 46%, 0.2);
|
|
--color-d-purple-10: hsla(242, 52%, 69%, 1);
|
|
--color-d-purple-20: hsla(241, 45%, 57%, 1);
|
|
--color-d-purple-30: hsla(239, 45%, 51%, 1);
|
|
--color-d-purple-40: hsla(238, 47%, 48%, 1);
|
|
--color-d-alpha-purple: hsla(236, 100%, 72%, 0.2);
|
|
--color-base-00: var(--color-d-gray-140);
|
|
--color-base-05: var(--color-d-gray-120);
|
|
--color-base-10: var(--color-d-gray-100);
|
|
--color-base-20: var(--color-d-gray-90);
|
|
--color-base-25: var(--color-d-gray-80);
|
|
--color-base-30: var(--color-d-gray-70);
|
|
--color-base-35: var(--color-d-gray-60);
|
|
--color-base-40: var(--color-d-gray-50);
|
|
--color-base-50: var(--color-d-gray-40);
|
|
--color-base-60: var(--color-d-gray-30);
|
|
--color-base-70: var(--color-d-gray-20);
|
|
--color-base-100: var(--color-d-gray-10);
|
|
--accent-h: 31;
|
|
--accent-s: 27%;
|
|
--accent-l: 24%;
|
|
--color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
|
|
--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
|
|
--color-accent-1: hsl(
|
|
calc(var(--accent-h) - 3),
|
|
calc(var(--accent-s) * 1.02),
|
|
calc(var(--accent-l) * 1.15)
|
|
);
|
|
--color-accent-2: hsl(
|
|
calc(var(--accent-h) - 5),
|
|
calc(var(--accent-s) * 1.16),
|
|
calc(var(--accent-l) * 1.34)
|
|
);
|
|
--interactive-normal: var(--color-d-gray-120);
|
|
--interactive-hover: color-mix(
|
|
in hsl,
|
|
var(--color-d-gray-100) 50%,
|
|
var(--interactive-normal)
|
|
);
|
|
--interactive-accent-hsl: var(--color-accent-hsl);
|
|
--interactive-accent: var(--color-accent-1);
|
|
--interactive-accent-hover: var(--color-accent-2);
|
|
--color-gray-rgb: 166, 150, 142;
|
|
--color-gray: rgb(166, 150, 141);
|
|
--color-red-rgb: 228, 87, 78;
|
|
--color-red: rgb(192, 78, 78);
|
|
--color-orange-rgb: 238, 163, 89;
|
|
--color-orange: rgb(203, 128, 53);
|
|
--color-yellow-rgb: 249, 207, 81;
|
|
--color-yellow: rgb(225, 178, 67);
|
|
--color-green-rgb: 100, 194, 113;
|
|
--color-green: rgb(80, 196, 101);
|
|
--color-cyan-rgb: 91, 175, 183;
|
|
--color-cyan: rgb(70, 169, 180);
|
|
--color-blue-rgb: 99, 156, 192;
|
|
--color-blue: rgb(63, 137, 176);
|
|
--color-purple-rgb: 139, 113, 185;
|
|
--color-purple: rgb(113, 97, 194);
|
|
--color-pink-rgb: 224, 108, 138;
|
|
--color-pink: rgb(180, 100, 100);
|
|
--non-alternating-color: var(--color-d-gray-60);
|
|
--non-alternating-color-hover-active: var(--color-d-gray-70);
|
|
--alternating-color-1: var(--color-d-yellow-30);
|
|
--alternating-color-1-hover-active: var(--color-d-yellow-40);
|
|
--alternating-color-2: var(--color-d-red-30);
|
|
--alternating-color-2-hover-active: var(--color-d-red-40);
|
|
--alternating-color-3: var(--color-d-blue-30);
|
|
--alternating-color-3-hover-active: var(--color-d-blue-40);
|
|
--shadow-s:
|
|
0px 1px 2px rgba(0, 0, 0, 0.228), 0px 3.4px 6.7px rgba(0, 0, 0, 0.242),
|
|
0px 15px 30px rgba(0, 0, 0, 0.27);
|
|
--shadow-l:
|
|
0px 1.8px 7.3px rgba(0, 0, 0, 0.271), 0px 6.3px 24.7px rgba(0, 0, 0, 0.312),
|
|
0px 30px 90px rgba(0, 0, 0, 0.4);
|
|
--background-primary: var(--color-d-gray-100);
|
|
--background-primary-alt: var(--color-d-gray-110);
|
|
--background-secondary: var(--color-d-gray-120);
|
|
--background-secondary-alt: var(--color-d-gray-120);
|
|
--background-modifier-hover: rgba(0, 0, 0, 0.3);
|
|
--background-modifier-active-hover: var(--color-d-gray-70);
|
|
--background-modifier-border: var(--color-d-gray-80);
|
|
--background-modifier-border-hover: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-70) 40%,
|
|
var(--color-d-gray-80)
|
|
);
|
|
--background-modifier-border-focus: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-70) 40%,
|
|
var(--color-d-gray-80)
|
|
);
|
|
--hr-color: var(--background-modifier-border-hover);
|
|
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
|
|
--background-modifier-cover: rgba(10, 10, 10, 0.4);
|
|
--background-modifier-warning: var(--color-d-orange-40);
|
|
--background-modifier-warning-hover: var(--color-d-orange-30);
|
|
--background-modifier-error-rgb: var(--color-red-rgb);
|
|
--background-modifier-error: var(--color-d-red-40);
|
|
--background-modifier-error-hover: var(--color-d-red-30);
|
|
--background-modifier-success-rgb: var(--color-green-rgb);
|
|
--background-modifier-success: var(--color-d-green-30);
|
|
--text-normal: var(--color-d-gray-20);
|
|
--text-muted: var(--color-d-gray-40);
|
|
--text-faint: var(--color-d-gray-50);
|
|
--text-on-accent: var(--color-d-gray-10);
|
|
--text-on-accent-inverted: var(--color-d-gray-140);
|
|
--text-error: var(--color-d-red-30);
|
|
--text-warning: var(--color-d-orange-30);
|
|
--text-success: var(--color-d-green-30);
|
|
--text-selection: var(--color-d-alpha-gray);
|
|
--text-highlight-bg-rgb: var(--color-yellow-rgb);
|
|
--text-highlight-bg: var(--color-d-alpha-yellow);
|
|
--text-accent: var(--color-accent);
|
|
--text-accent-hover: var(--color-accent-2);
|
|
--text-selection-theme-text-color: color-mix(
|
|
in srgb,
|
|
currentColor 70%,
|
|
white
|
|
);
|
|
--text-selection-theme-bg: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-50) 30%,
|
|
transparent
|
|
);
|
|
--icon-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-60) 30%,
|
|
var(--color-d-gray-50)
|
|
);
|
|
--icon-opacity: 1;
|
|
--icon-bg: transparent;
|
|
--icon-color-hover: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-50) 70%,
|
|
var(--color-d-gray-40)
|
|
);
|
|
--icon-opacity-hover: 1;
|
|
--icon-bg-hover: transparent;
|
|
--icon-color-focused: var(--color-d-gray-50);
|
|
--icon-bg-pressed: transparent;
|
|
--icon-color-active: var(--color-d-gray-40);
|
|
--icon-opacity-active: 1;
|
|
--icon-bg-active: var(--color-d-gray-80);
|
|
--icon-bg-active-menu: transparent;
|
|
--sync-icon-working: var(--color-d-orange-40);
|
|
--sync-icon-working-hover: var(--color-d-orange-30);
|
|
--sync-icon-working-active: var(--status-bar-item-clickable-color-active);
|
|
--sync-icon-success: var(--color-d-green-40);
|
|
--sync-icon-success-hover: var(--color-d-green-30);
|
|
--sync-icon-success-active: var(--status-bar-item-clickable-color-active);
|
|
--search-icon-color: var(--icon-color);
|
|
--divider-color: var(--background-modifier-border);
|
|
--divider-color-hover: var(--background-modifier-border-hover);
|
|
--ribbon-slideout-background: var(--color-d-gray-110);
|
|
--ribbon-slideout-shadow:
|
|
8px 7px 21px -4px rgba(0, 0, 0, 0.35), 0px 5px 5px -5px rgba(0, 0, 0, 0.38);
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-thumb-bg: var(--background-modifier-border);
|
|
--scrollbar-active-thumb-bg: var(--background-modifier-border-hover);
|
|
--status-bar-floating-bg: var(--color-d-gray-110);
|
|
--status-bar-floating-shadow:
|
|
8px 7px 21px -4px rgba(0, 0, 0, 0.35), 0px 5px 5px -5px rgba(0, 0, 0, 0.38);
|
|
--status-bar-item-color: var(--color-d-gray-50);
|
|
--status-bar-item-color-hover: var(--color-d-gray-30);
|
|
--status-bar-item-bg-hover: transparent;
|
|
--status-bar-item-clickable-color-active: var(--color-d-gray-60);
|
|
--status-bar-item-clickable-bg-active: transparent;
|
|
--titlebar-background: var(--background-secondary);
|
|
--titlebar-background-focused: var(--background-secondary);
|
|
--titlebar-text-color: var(--color-d-gray-70);
|
|
--titlebar-text-color-focused: var(--color-d-gray-60);
|
|
--vault-profile-color: var(--vault-name-color);
|
|
--vault-name-color: var(--color-d-gray-40);
|
|
--vault-name-color-hover: var(--color-d-gray-30);
|
|
--vault-name-background: var(--color-d-gray-110);
|
|
--vault-name-border: 1px solid var(--background-modifier-border);
|
|
--disabled-component-opacity: 0.3;
|
|
--button-shadow: var(--input-shadow);
|
|
--button-shadow-hover: var(--input-shadow-hover);
|
|
--button-shadow-active: var(--input-shadow-active);
|
|
--button-shadow-focus:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.05),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.24),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.55),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), 0px 2px 6px -1px rgba(0, 0, 0, 0.25),
|
|
0px 0px 0px 3px var(--color-d-alpha-gray);
|
|
--button-accent-shadow:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.26),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.35),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.37),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), 0px 2px 4px -1px rgba(0, 0, 0, 0.14);
|
|
--button-accent-shadow-hover:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.34),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.26),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.35),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.37),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), 0px 2px 6px -1px rgba(0, 0, 0, 0.19);
|
|
--button-accent-shadow-active: var(--input-shadow-active);
|
|
--button-accent-shadow-focus:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.28),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.11),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.52),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.27),
|
|
0px 2px 6px -1px rgba(0, 0, 0, 0.24),
|
|
0px 0px 0px 3px var(--color-d-alpha-gray);
|
|
--empty-state-action-btn-bg: var(--background-primary-alt);
|
|
--copy-code-btn-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.39),
|
|
0px 2px 4px -2px rgba(0, 0, 0, 0.39);
|
|
--caret-color: var(--color-d-gray-50);
|
|
--swatch-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
|
|
--checkbox-marker-color: white;
|
|
--checkbox-color: var(--color-d-green-40);
|
|
--checkbox-color-hover: var(--color-d-green-30);
|
|
--checked-border-color: rgba(255, 255, 255, 0.15);
|
|
--checked-border-color-hover: rgba(255, 255, 255, 0.1);
|
|
--checkbox-border-color: var(--color-d-gray-70);
|
|
--checkbox-border-color-hover: var(--color-d-gray-60);
|
|
--checklist-bg: var(--color-d-gray-110);
|
|
--checklist-shadow-hover: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
|
|
--checklist-done-color: var(--color-d-gray-50);
|
|
--inprogress-chbx-color: hsla(31, 85%, 59%, 1);
|
|
--inprogress-chbx-color-hover: hsla(32, 95%, 65%, 1);
|
|
--inprogress-chbx-border-color: color-mix(
|
|
in srgb,
|
|
var(--inprogress-chbx-color) 15%,
|
|
var(--color-base-60)
|
|
);
|
|
--resched-chbx-color: hsla(178, 19%, 55%, 1);
|
|
--sched-chbx-color: hsla(32, 10%, 58%, 1);
|
|
--important-chbx-color: hsla(17, 83%, 47%);
|
|
--cancelled-chbx-color: hsla(32, 10%, 58%, 1);
|
|
--cancelled-chbx-text-color: var(--text-faint);
|
|
--cancelled-chbx-text-decoration: line-through;
|
|
--question-chbx-color: hsla(281, 37%, 54%, 1);
|
|
--star-chbx-color: hsla(40, 95%, 46%, 1);
|
|
--note-chbx-color: hsla(8, 51%, 53%, 1);
|
|
--location-chbox-color: hsla(0, 56%, 48%, 1);
|
|
--info-chbx-color: hsla(178, 31%, 41%, 1);
|
|
--amount-chbx-color: hsla(152, 46%, 38%, 1);
|
|
--quote-chbx-color: hsla(206, 47%, 48%, 1);
|
|
--idea-chbx-color: hsla(30, 72%, 62%, 1);
|
|
--pro-chbx-color: hsla(149, 36%, 47%, 1);
|
|
--con-chbx-color: hsla(12, 64%, 47%, 1);
|
|
--bookmark-chbx-color: hsla(21, 81%, 54%, 1);
|
|
--fire-chbx-color: hsla(14, 82%, 58%, 1);
|
|
--win-chbx-color: hsla(45, 78%, 53%, 1);
|
|
--key-chbx-color: hsla(45, 50%, 55%, 1);
|
|
--up-chbx-color: hsla(146, 38%, 51%, 1);
|
|
--down-chbx-color: hsla(4, 56%, 54%, 1);
|
|
--law-chbx-color: hsla(34, 34%, 52%, 1);
|
|
--language-chbx-color: hsla(7, 63%, 62%, 1);
|
|
--clock-chbx-color: hsla(210, 39%, 52%, 1);
|
|
--telephone-chbx-color: hsla(148, 48%, 42%, 1);
|
|
--milestone-chbx-color: hsla(265, 45%, 62%, 1);
|
|
--deadline-chbx-color: hsla(8, 80%, 58%, 1);
|
|
--blocked-chbx-color: hsla(0, 70%, 55%, 1);
|
|
--delegated-chbx-color: hsla(210, 65%, 60%, 1);
|
|
--health-chbx-color: hsla(350, 65%, 62%, 1);
|
|
--shopping-chbx-color: hsla(140, 50%, 50%, 1);
|
|
--home-chbx-color: hsla(28, 45%, 50%, 1);
|
|
--recurring-chbx-color: hsla(185, 45%, 50%, 1);
|
|
--task-progress-track: var(--background-modifier-border);
|
|
--task-progress-track-border: var(--background-modifier-border-hover);
|
|
--task-progress-fill: var(--interactive-accent);
|
|
--speech-bubble-5: var(--callout-note);
|
|
--speech-bubble-6: var(--callout-tip);
|
|
--speech-bubble-7: var(--callout-success);
|
|
--speech-bubble-8: var(--callout-warning);
|
|
--speech-bubble-9: var(--callout-danger);
|
|
--speech-bubble-opacity: 20%;
|
|
--drag-ghost-background: var(--interactive-accent);
|
|
--drag-ghost-text-color: var(--text-on-accent);
|
|
--loading-line-bg-color: var(--background-secondary);
|
|
--loading-line-color: var(--color-d-blue-10);
|
|
--loading-line-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
|
|
--menu-item-icon-color: var(--color-d-gray-50);
|
|
--menu-item-bg-hover: rgba(0, 0, 0, 0.25);
|
|
--menu-item-icon-color-active: var(--color-d-gray-60);
|
|
--menu-item-color-active: var(--color-d-gray-60);
|
|
--menu-item-bg-active: var(--color-d-gray-130);
|
|
--modal-background: var(--background-primary);
|
|
--modal-border-color: var(--background-modifier-border-hover);
|
|
--settings-nav-group-title-color: var(--color-d-gray-60);
|
|
--settings-nav-item-text-color: var(--color-d-gray-40);
|
|
--settings-nav-item-text-color-hover: var(--color-d-gray-20);
|
|
--settings-nav-item-bg-hover: transparent;
|
|
--settings-nav-item-text-color-active: var(--color-d-gray-70);
|
|
--settings-nav-item-bg-active: var(--color-d-gray-130);
|
|
--settings-nav-item-active-color: var(--color-d-gray-100);
|
|
--community-item-flair-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
|
--community-item-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.03);
|
|
--community-item-shadow-hover: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
|
|
--community-item-selected-shadow:
|
|
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.18),
|
|
0px 1px 3px -2.6px rgba(0, 0, 0, 0.33),
|
|
0px 2px 6px -4.2px rgba(0, 0, 0, 0.29), 0px 4px 12px -6px rgba(0, 0, 0, 0.9);
|
|
--nav-item-color: var(--color-d-gray-40);
|
|
--nav-item-color-hover: var(--color-d-gray-40);
|
|
--nav-item-color-active: var(--color-d-gray-40);
|
|
--nav-item-color-selected: var(--color-d-gray-20);
|
|
--nav-item-color-highlighted: var(--text-accent-hover);
|
|
--nav-item-background-hover: rgba(0, 0, 0, 0.125);
|
|
--nav-item-background-active: rgba(0, 0, 0, 0.125);
|
|
--nav-item-background-selected: hsla(197, 45%, 29%, 0.5);
|
|
--nav-item-background-selected-hover: hsla(197, 45%, 29%, 0.4);
|
|
--nav-indentation-guide-color: var(--indentation-guide-color);
|
|
--nav-collapse-icon-color: var(--collapse-icon-color);
|
|
--nav-collapse-icon-color-collapsed: var(--text-faint);
|
|
--nav-heading-color: var(--color-d-gray-50);
|
|
--nav-heading-color-hover: var(--color-d-gray-50);
|
|
--nav-heading-color-collapsed: var(--color-d-gray-50);
|
|
--nav-heading-color-collapsed-hover: var(--color-d-gray-50);
|
|
--nav-item-shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.23);
|
|
--nav-file-shadow-active:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.27),
|
|
inset 0px calc(-1 * var(--button-axis-offset)) 0px var(--button-axis-offset)
|
|
rgba(0, 0, 0, 0.24),
|
|
0px 2px 3px 0px rgba(0, 0, 0, 0.22);
|
|
--nav-file-tag-color: var(--color-d-gray-60);
|
|
--nav-file-tag-bg: transparent;
|
|
--collapse-icon-color: var(--color-d-gray-60);
|
|
--collapse-icon-color-collapsed: var(--color-d-gray-60);
|
|
--flair-count-color: var(--color-d-gray-60);
|
|
--flair-count-bg-color: var(--color-d-gray-120);
|
|
--indentation-guide-color: var(--background-modifier-border);
|
|
--indentation-guide-color-active: var(--background-modifier-border-focus);
|
|
--background-modifier-message: var(--color-d-gray-70);
|
|
--notice-color: var(--text-normal);
|
|
--notice-shadow:
|
|
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.09),
|
|
0px 2px 9px -2.1px rgba(0, 0, 0, 0.4),
|
|
0px 3px 17px -4.3px rgba(0, 0, 0, 0.3),
|
|
0px 7px 30px -5.5px rgba(0, 0, 0, 0.2);
|
|
--pill-color: var(--color-d-gray-30);
|
|
--pill-color-hover: var(--color-d-gray-20);
|
|
--pill-color-remove: var(--color-d-gray-60);
|
|
--pill-color-remove-hover: var(--color-d-gray-60);
|
|
--pill-background: rgba(0, 0, 0, 0.2);
|
|
--pill-background-hover: var(--pill-background);
|
|
--pill-border-color: color-mix(
|
|
in srgb,
|
|
var(--background-modifier-border) 50%,
|
|
transparent
|
|
);
|
|
--pill-border-color-hover: color-mix(
|
|
in srgb,
|
|
var(--background-modifier-border-hover) 50%,
|
|
transparent
|
|
);
|
|
--progress-background: var(--color-d-gray-120);
|
|
--progress-bar-outline: rgba(255, 255, 255, 0.1);
|
|
--progress-value-outline: rgba(255, 255, 255, 0.21);
|
|
--progress-color-1: var(--color-d-red-30);
|
|
--progress-color-2: var(--color-d-orange-30);
|
|
--progress-color-3: var(--color-d-yellow-30);
|
|
--progress-color-4: var(--color-d-green-40);
|
|
--progress-color-5: linear-gradient(
|
|
45deg,
|
|
var(--progress-gradient-1),
|
|
var(--progress-gradient-2),
|
|
var(--progress-gradient-3)
|
|
);
|
|
--progress-gradient-1: var(--color-d-red-30);
|
|
--progress-gradient-2: var(--color-d-yellow-20);
|
|
--progress-gradient-3: var(--color-d-blue-20);
|
|
--prompt-input-background: var(--background-primary);
|
|
--prompt-results-background: var(--background-primary);
|
|
--prompt-suggestion-color: var(--color-d-gray-40);
|
|
--prompt-suggestion-highlight-color: color-mix(
|
|
in srgb,
|
|
var(--prompt-suggestion-color) 70%,
|
|
white
|
|
);
|
|
--prompt-suggestion-color-selected: var(--color-d-gray-20);
|
|
--prompt-suggestion-highlight-color-selected: var(--color-d-gray-20);
|
|
--prompt-suggestion-background-selected: rgba(0, 0, 0, 0.1);
|
|
--prompt-suggestion-shadow-selected:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.14),
|
|
0px 2px 6px 0px rgba(0, 0, 0, 0.12);
|
|
--prompt-instructions-background: color-mix(
|
|
in hsl,
|
|
var(--editor-bg-color) 60%,
|
|
var(--background-secondary)
|
|
);
|
|
--prompt-separator-border: 1px solid var(--color-d-gray-90);
|
|
--prompt-border-color: var(--background-modifier-border-focus);
|
|
--search-icon-color: var(--color-d-gray-60);
|
|
--search-clear-button-color: var(--icon-color);
|
|
--search-clear-button-color-hover: var(--background-modifier-error-hover);
|
|
--search-icon-color: var(--icon-color);
|
|
--slider-track-background: var(--color-d-gray-120);
|
|
--slider-track-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2),
|
|
0px 0px 0px 1px rgba(255, 255, 255, 0.04);
|
|
--slider-thumb-bg: var(--color-d-gray-20);
|
|
--slider-thumb-border-width: 0px;
|
|
--slider-thumb-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.35),
|
|
inset 0pc 1px 0px 1px rgba(255, 255, 255, 0.3),
|
|
inset 0px -1px 0px 1px rgba(0, 0, 0, 0.29),
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.5);
|
|
--slider-thumb-shadow-hover:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.35),
|
|
inset 0pc 1px 0px 1px rgba(255, 255, 255, 0.3),
|
|
inset 0px -1px 0px 1px rgba(0, 0, 0, 0.29),
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.5),
|
|
0px 0px 0px 6px rgba(255, 255, 255, 0.08);
|
|
--tab-background-active: var(--background-primary);
|
|
--tab-text-color: var(--text-faint);
|
|
--tab-text-color-active: var(--text-muted);
|
|
--tab-text-color-focused: var(--text-muted);
|
|
--tab-text-color-focused-active: var(--text-muted);
|
|
--tab-text-color-focused-highlighted: var(--text-accent);
|
|
--tab-text-color-focused-active-current: var(--text-normal);
|
|
--tab-container-background: var(--background-secondary);
|
|
--tab-divider-color: var(--background-modifier-border-hover);
|
|
--tab-outline-color: var(--color-d-gray-70);
|
|
--tab-bg: transparent;
|
|
--tab-active-bg: var(--background-primary);
|
|
--tab-active-shadow:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 1px
|
|
rgba(0, 0, 0, 0.25),
|
|
0px 1px 2px -0.1px rgba(0, 0, 0, 0.47);
|
|
--tab-outline-color: transparent;
|
|
--tab-stacked-shadow:
|
|
-2.9px 0 10.5px -6.2px rgba(0, 0, 0, 0.31),
|
|
-6.2px 0 3.6px -5.2px rgba(0, 0, 0, 0.27),
|
|
-9.4px 0 8.4px -4.1px rgba(0, 0, 0, 0.2);
|
|
--background-modifier-form-field: var(--color-d-gray-130);
|
|
--input-shadow:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.02),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.2),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.55),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.25), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
--input-shadow-hover:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.06),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px
|
|
rgba(0, 0, 0, 0.2),
|
|
inset 0px -2px 4px 0px rgba(0, 0, 0, 0.25),
|
|
0px 4px 4px -5.6px rgba(0, 0, 0, 0.55),
|
|
0px 2px 4px -2.7px rgba(0, 0, 0, 0.3), 0px 2px 6px -1px rgba(0, 0, 0, 0.25);
|
|
--input-shadow-active:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.45),
|
|
inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size))
|
|
rgba(0, 0, 0, 0.15),
|
|
inset 0px 2px 8px 0px rgba(0, 0, 0, 0.57),
|
|
0px 0px 0px 1px rgba(255, 255, 255, 0.02);
|
|
--text-input-color: var(--color-d-gray-20);
|
|
--text-input-color-focused: var(--color-d-gray-20);
|
|
--text-input-bg-active: var(--color-d-gray-140);
|
|
--text-input-border-color: var(--color-d-gray-140);
|
|
--text-input-shadow-active:
|
|
inset 0px 1px 0px 0px rgba(255, 255, 255, 0.03),
|
|
inset 0px -1px 0px 0px rgba(0, 0, 0, 0.39),
|
|
0px 1px 6px 0px rgba(0, 0, 0, 0.37);
|
|
--toggle-thumb-color: var(--color-d-gray-10);
|
|
--toggle-bg: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-70) 50%,
|
|
var(--color-d-gray-60)
|
|
);
|
|
--toggle-bg-enabled: var(--color-d-green-40);
|
|
--toggle-shadow:
|
|
inset 0 4px 10px rgba(0, 0, 0, 0.19),
|
|
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.09),
|
|
inset 0 0 1px rgba(0, 0, 0, 0.4);
|
|
--toggle-shadow-hover:
|
|
inset 0 6px 20px rgba(0, 0, 0, 0.28),
|
|
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.09),
|
|
inset 0 0 1px rgba(0, 0, 0, 0.44);
|
|
--toggle-shadow-focus:
|
|
inset 0 6px 20px rgba(0, 0, 0, 0.28),
|
|
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.09),
|
|
inset 0 0 1px rgba(0, 0, 0, 0.44), 0px 0px 0px 5px rgba(255, 255, 255, 0.08);
|
|
--toggle-thumb-shadow:
|
|
inset 0px 1px 0px 1px rgba(255, 255, 255, 0.5),
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.35);
|
|
--tooltip-shadow:
|
|
inset 0px -1px 0px 0px rgba(0, 0, 0, 0.3),
|
|
0px 2px 4px -1.4px rgba(0, 0, 0, 0.3),
|
|
0px 3px 10px -1.7px rgba(0, 0, 0, 0.14);
|
|
--active-line-bg: var(--color-base-20);
|
|
--editor-bg-color: var(--background-primary);
|
|
--editor-bgpattern-color: var(--color-d-gray-70);
|
|
--blockquote-border-color: var(--background-modifier-border);
|
|
--blockquote-background-color: var(--color-d-gray-120);
|
|
--callout-color-opacity: 32.5%;
|
|
--callout-border-opacity: 0.1;
|
|
--callout-icon-fold-filter: brightness(1);
|
|
--callout-title-color: var(--text-normal);
|
|
--callout-content-background: color-mix(
|
|
in srgb,
|
|
var(--background-primary-alt) 50%,
|
|
var(--editor-bg-color)
|
|
);
|
|
--callout-container-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.18),
|
|
0px 2px 6px 0px rgba(0, 0, 0, 0.28);
|
|
--callout-title-shadow:
|
|
inset 0px -1px 1px 0px rgba(0, 0, 0, 0.25),
|
|
inset 0px 1px 1px 0px rgba(255, 255, 255, 0.1);
|
|
--callout-content-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.18),
|
|
inset 0px calc(-1 * var(--callout-shadow-offset) - 1px)
|
|
var(--callout-content-shadow-blur) 0px rgba(0, 0, 0, 0.3);
|
|
--embed-background: var(--embed-bg-color-mix);
|
|
--embed-bg-color-mix: color-mix(
|
|
in srgb,
|
|
var(--background-primary-alt) 50%,
|
|
var(--editor-bg-color)
|
|
);
|
|
--embed-border-top-color: var(--background-modifier-border);
|
|
--embed-border-end-color: var(--background-modifier-border);
|
|
--embed-border-bottom-color: var(--background-modifier-border);
|
|
--embed-border-start-color: var(--background-modifier-border);
|
|
--embed-title-color: var(--color-d-gray-50);
|
|
--embed-title-border-color: var(--background-modifier-border);
|
|
--embed-block-shadow-hover: none;
|
|
--embed-edit-btn-bg: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-130) 70%,
|
|
transparent
|
|
);
|
|
--embed-edit-btn-bg-hover: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-130) 100%,
|
|
transparent
|
|
);
|
|
--embed-edit-btn-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),
|
|
inset 0px -2px 1px 1px rgba(0, 0, 0, 0.5);
|
|
--embed-edit-btn-shadow-hover:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5),
|
|
inset 0px -2px 1px 1px rgba(0, 0, 0, 0.5),
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.5);
|
|
--bold-color: var(--color-d-red-30);
|
|
--italic-color: var(--color-d-blue-20);
|
|
--underline-color: var(--text-normal);
|
|
--underline-decoration-color: color-mix(
|
|
in srgb,
|
|
currentColor var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--strikethrough-color: var(--color-d-gray-50);
|
|
--bold-italic-color: var(--color-d-gray-10);
|
|
--bold-italic-strikethrough-color: var(--color-d-gray-40);
|
|
--editor-border-color: var(--background-modifier-border);
|
|
--file-header-border: var(--file-header-border-width) solid
|
|
var(--file-header-border-color);
|
|
--file-header-border-color: var(--background-modifier-border);
|
|
--breadcrumb-color: var(--color-d-gray-50);
|
|
--breadcrumb-color-hover: var(--color-d-gray-50);
|
|
--breadcrumb-bg-hover: var(--color-d-gray-80);
|
|
--breadcrumb-separator-color: var(--background-modifier-border);
|
|
--file-header-title-color: var(--color-d-gray-40);
|
|
--nav-folder-1-color: var(--color-d-red-30);
|
|
--nav-folder-1-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-red) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-1-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-1-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-1-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-1-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-1-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-1-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-color: var(--color-d-orange-20);
|
|
--nav-folder-2-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-orange) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-2-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-2-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-2-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-2-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-color: var(--color-d-yellow-20);
|
|
--nav-folder-3-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-yellow) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-3-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-3-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-3-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-3-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-color: var(--color-d-green-20);
|
|
--nav-folder-4-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-green) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-4-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-4-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-4-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-4-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-color: var(--color-d-blue-20);
|
|
--nav-folder-5-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-blue) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-5-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-5-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-5-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-5-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-color: var(--color-d-purple-10);
|
|
--nav-folder-6-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-purple) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-6-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-6-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-6-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-6-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-color: var(--color-d-red-30);
|
|
--nav-folder-7-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-red) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-7-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-7-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-7-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-7-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-color: var(--color-d-orange-20);
|
|
--nav-folder-8-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-orange) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-8-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-8-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-8-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-8-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-color: var(--color-d-yellow-20);
|
|
--nav-folder-9-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-yellow) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-9-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-9-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-9-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-9-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-color: var(--color-d-green-20);
|
|
--nav-folder-10-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-green) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-10-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-10-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-10-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-10-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-color: var(--color-d-blue-20);
|
|
--nav-folder-11-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-blue) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-11-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-11-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-11-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-11-color) 25%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-color: var(--color-d-purple-10);
|
|
--nav-folder-12-bg-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-alpha-purple) 60%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-bg-color-hover: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-12-bg-color) 70%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-collapse-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-12-color) 50%,
|
|
transparent
|
|
);
|
|
--nav-folder-12-indent-color: color-mix(
|
|
in srgb,
|
|
var(--nav-folder-12-color) 25%,
|
|
transparent
|
|
);
|
|
--gutter-color: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-60) 40%,
|
|
var(--color-d-gray-70)
|
|
);
|
|
--gutter-color-active: var(--color-d-gray-50);
|
|
--h1-color: var(--color-d-gray-10);
|
|
--h1-bg-color: transparent;
|
|
--h1-border-top-color: var(--background-modifier-border);
|
|
--h1-border-right-color: var(--background-modifier-border);
|
|
--h1-border-bottom-color: var(--background-modifier-border);
|
|
--h1-border-left-color: var(--background-modifier-border);
|
|
--h2-color: var(--color-d-gray-10);
|
|
--h2-bg-color: transparent;
|
|
--h2-border-top-color: var(--background-modifier-border);
|
|
--h2-border-right-color: var(--background-modifier-border);
|
|
--h2-border-bottom-color: var(--background-modifier-border);
|
|
--h2-border-left-color: var(--background-modifier-border);
|
|
--h3-color: var(--color-d-gray-10);
|
|
--h3-bg-color: transparent;
|
|
--h3-border-top-color: var(--background-modifier-border);
|
|
--h3-border-right-color: var(--background-modifier-border);
|
|
--h3-border-bottom-color: var(--background-modifier-border);
|
|
--h3-border-left-color: var(--background-modifier-border);
|
|
--h4-color: var(--color-d-gray-10);
|
|
--h4-bg-color: transparent;
|
|
--h4-border-top-color: var(--background-modifier-border);
|
|
--h4-border-right-color: var(--background-modifier-border);
|
|
--h4-border-bottom-color: var(--background-modifier-border);
|
|
--h4-border-left-color: var(--background-modifier-border);
|
|
--h5-color: var(--color-d-gray-10);
|
|
--h5-bg-color: transparent;
|
|
--h5-border-top-color: var(--background-modifier-border);
|
|
--h5-border-right-color: var(--background-modifier-border);
|
|
--h5-border-bottom-color: var(--background-modifier-border);
|
|
--h5-border-left-color: var(--background-modifier-border);
|
|
--h6-color: var(--color-d-gray-10);
|
|
--h6-bg-color: transparent;
|
|
--h6-border-top-color: var(--background-modifier-border);
|
|
--h6-border-right-color: var(--background-modifier-border);
|
|
--h6-border-bottom-color: var(--background-modifier-border);
|
|
--h6-border-left-color: var(--background-modifier-border);
|
|
--normal-highlight-color: var(--text-normal);
|
|
--normal-highlight-bg: var(--color-d-alpha-yellow);
|
|
--bold-highlight-color: var(--text-normal);
|
|
--bold-highlight-bg: var(--color-d-alpha-red);
|
|
--italic-highlight-color: var(--text-normal);
|
|
--italic-highlight-bg: var(--color-d-alpha-blue);
|
|
--bold-italic-highlight-color: var(--bold-italic-color);
|
|
--bold-italic-highlight-bg: var(--color-d-alpha-green);
|
|
--strikethrough-highlight-color: var(--strikethrough-color);
|
|
--strikethrough-highlight-bg: var(--color-d-alpha-yellow);
|
|
--inline-code-color: var(--color-d-red-20);
|
|
--inline-code-bg: var(--color-d-gray-130);
|
|
--inline-title-color: var(--color-d-gray-10);
|
|
--inline-query-bg: color-mix(
|
|
in srgb,
|
|
var(--background-secondary) 25%,
|
|
var(--background-primary)
|
|
);
|
|
--inline-query-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.26);
|
|
--kbd-color: var(--color-d-red-20);
|
|
--kbd-background: var(--color-d-gray-110);
|
|
--kbd-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.17),
|
|
inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 0px
|
|
rgba(0, 0, 0, 0.2);
|
|
--list-marker-color: var(--color-d-gray-50);
|
|
--list-marker-color-hover: var(--color-d-gray-30);
|
|
--list-marker-color-collapsed: var(--color-d-gray-40);
|
|
--link-ahref-color: var(--color-d-red-20);
|
|
--link-ahref-decoration-color: color-mix(
|
|
in srgb,
|
|
currentColor var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-ahref-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-ahref-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-ahref-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-ahref-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-unresolved-color: var(--color-d-gray-50);
|
|
--link-unresolved-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--link-unresolved-color) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-unresolved-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-unresolved-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-unresolved-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-unresolved-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-color: var(--color-d-yellow-20);
|
|
--link-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--link-color) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-external-color: var(--color-d-green-20);
|
|
--link-external-decoration-color: color-mix(
|
|
in srgb,
|
|
var(--link-external-color) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--link-external-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-external-color) 75%,
|
|
var(--text-normal)
|
|
);
|
|
--link-external-decoration-color-hover: color-mix(
|
|
in srgb,
|
|
var(--link-external-color-hover) var(--link-decoration-opacity),
|
|
transparent
|
|
);
|
|
--metadata-background: color-mix(
|
|
in srgb,
|
|
var(--editor-bg-color) 50%,
|
|
var(--background-primary-alt)
|
|
);
|
|
--metadata-tab-background: var(--background-secondary);
|
|
--metadata-properties-title-color-collapsed: var(--color-d-gray-60);
|
|
--metadata-properties-title-color-hover: var(--color-d-gray-50);
|
|
--metadata-properties-title-color: var(--color-d-gray-60);
|
|
--metadata-input-text-color: var(--color-d-gray-40);
|
|
--metadata-input-background: transparent;
|
|
--metadata-input-background-hover: transparent;
|
|
--metadata-input-background-active: rgba(0, 0, 0, 0.2);
|
|
--metadata-label-background-active: var(--metadata-input-background-active);
|
|
--metadata-input-shadow-hover: none;
|
|
--metadata-input-shadow-active:
|
|
inset 0px 0px 0px 1px var(--background-modifier-border),
|
|
0px 0px 0px 1px var(--background-modifier-border);
|
|
--metadata-key-input-color: var(--color-d-gray-50);
|
|
--metadata-key-input-color-active: var(--color-d-gray-30);
|
|
--metadata-divider-color: var(--background-modifier-border);
|
|
--metadata-divider-color-hover: transparent;
|
|
--metadata-divider-color-focus: transparent;
|
|
--pill-tag-color-1: var(--color-d-yellow-20);
|
|
--pill-tag-bg-1: var(--color-d-alpha-yellow);
|
|
--pill-tag-color-2: var(--color-d-red-20);
|
|
--pill-tag-bg-2: var(--color-d-alpha-red);
|
|
--pill-tag-color-3: var(--color-d-blue-20);
|
|
--pill-tag-bg-3: var(--color-d-alpha-blue);
|
|
--pill-tag-shadow-hover: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.05);
|
|
--yaml-base-color: var(--color-d-red-20);
|
|
--yaml-def-meta-color: var(--color-d-gray-50);
|
|
--yaml-atom-color: var(--color-d-blue-10);
|
|
--yaml-keyword-color: var(--color-d-yellow-30);
|
|
--yaml-number-color: var(--color-d-red-20);
|
|
--yaml-string-color: var(--color-d-yellow-30);
|
|
--table-background: var(--color-d-gray-120);
|
|
--table-header-background: var(--color-d-gray-130);
|
|
--table-header-background-hover: var(--table-header-background);
|
|
--table-column-alt-background: var(--color-d-gray-130);
|
|
--tag-color: var(--color-d-blue-30);
|
|
--tag-color-hover: var(--color-d-blue-20);
|
|
--tag-background: rgba(0, 0, 0, 0.3);
|
|
--tag-background-hover: rgba(0, 0, 0, 0.2);
|
|
--tag-border-width: 1px;
|
|
--tag-border-color: rgba(0, 0, 0, 0.25);
|
|
--tag-border-color-hover: rgba(0, 0, 0, 0.35);
|
|
--tag-shadow: inset 0px -0.1em 0px 0px rgba(0, 0, 0, 0.2);
|
|
--tag-shadow-hover:
|
|
inset 0px -0.1em 0px 0px rgba(0, 0, 0, 0.2),
|
|
0px 0px 0px 3px rgba(0, 0, 0, 0.15);
|
|
--tag-shadow-active: inset 0px -0.1em 0px 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.theme-dark.is-mobile {
|
|
--color-base-00: var(--color-d-gray-140);
|
|
--color-base-10: var(--color-d-gray-100);
|
|
--color-base-20: var(--color-d-gray-90);
|
|
--tag-background: rgba(0, 0, 0, 0.3);
|
|
--search-result-background: var(--background-primary-alt);
|
|
--background-modifier-form-field: var(--color-d-gray-130);
|
|
--background-modifier-cover: rgba(10, 10, 10, 0.4);
|
|
--background-modifier-hover: rgba(0, 0, 0, 0.3);
|
|
--settings-home-background: var(--background-primary);
|
|
--mobile-sidebar-background: var(--background-secondary);
|
|
--nav-item-color: var(--text-muted);
|
|
--mobile-sidebar-left-shadow:
|
|
5px 0px 14px -0.6px rgba(0, 0, 0, 0.29),
|
|
10px 0px 20px -4.9px rgba(0, 0, 0, 0.22);
|
|
--mobile-sidebar-right-shadow:
|
|
-5px 0px 14px -0.6px rgba(0, 0, 0, 0.29),
|
|
-10px 0px 20px -4.9px rgba(0, 0, 0, 0.22);
|
|
--mobile-sidebar-tablet-shadow:
|
|
0px 2px 6px -0.3px rgba(0, 0, 0, 0.2),
|
|
0px 5px 14px -0.6px rgba(0, 0, 0, 0.19),
|
|
0px 10px 20px -4.9px rgba(0, 0, 0, 0.12);
|
|
--mobile-toolbar-bg: color-mix(
|
|
in srgb,
|
|
var(--editor-bg-color) 50%,
|
|
var(--background-primary-alt)
|
|
);
|
|
--navbar-shadow:
|
|
0px 4px 20px 0px rgba(0, 0, 0, 0.4), 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
|
|
--pull-down-action-shadow:
|
|
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.09),
|
|
0px 2px 9px -2.1px rgba(0, 0, 0, 0.4),
|
|
0px 3px 17px -4.3px rgba(0, 0, 0, 0.3),
|
|
0px 7px 30px -5.5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.theme-dark.is-tablet {
|
|
--titlebar-background: var(--background-secondary);
|
|
--titlebar-background-focused: var(--background-secondary);
|
|
--interactive-normal: var(--color-d-gray-120);
|
|
--interactive-hover: color-mix(
|
|
in hsl,
|
|
var(--color-d-gray-100) 50%,
|
|
var(--interactive-normal)
|
|
);
|
|
--modal-background: var(--background-primary);
|
|
}
|
|
.theme-dark {
|
|
--canvas-background: var(--editor-bg-color);
|
|
--canvas-color: var(--color-gray-rgb);
|
|
--canvas-color-1: var(--color-red-rgb);
|
|
--canvas-color-2: var(--color-orange-rgb);
|
|
--canvas-color-3: var(--color-yellow-rgb);
|
|
--canvas-color-4: var(--color-green-rgb);
|
|
--canvas-color-5: var(--color-blue-rgb);
|
|
--canvas-color-6: var(--color-purple-rgb);
|
|
--canvas-icon-color: var(--color-d-gray-50);
|
|
--canvas-icon-color-hover: var(--color-d-gray-30);
|
|
--canvas-icon-color-disabled: var(--color-d-gray-70);
|
|
--canvas-menu-bg: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-90) 60%,
|
|
var(--color-d-gray-100)
|
|
);
|
|
--canvas-menu-bg-hover: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-90) 10%,
|
|
var(--color-d-gray-100)
|
|
);
|
|
--canvas-menu-border: 1px solid var(--background-modifier-border);
|
|
--canvas-menu-shadow:
|
|
0px 1px 2px 1px rgba(0, 0, 0, 0.14), 0px 1px 4px -2.1px rgba(0, 0, 0, 0.22),
|
|
0px 2px 8px -1.2px rgba(0, 0, 0, 0.15);
|
|
--graph-node: var(--color-d-blue-30);
|
|
--graph-node-unresolved: var(--color-d-yellow-20);
|
|
--graph-node-unresolved-opacity: 1;
|
|
--graph-node-tag: var(--color-d-red-30);
|
|
--graph-node-attachment: var(--color-d-green-30);
|
|
--graph-node-focused: var(--color-d-gray-20);
|
|
--graph-node-highlight-fill: var(--color-d-gray-30);
|
|
--graph-node-highlight-line: var(--color-d-gray-60);
|
|
--graph-text: var(--color-d-gray-50);
|
|
--graph-line: var(--background-modifier-border);
|
|
--graph-arrow: var(--color-d-gray-50);
|
|
--search-result-background: var(--background-primary-alt);
|
|
--search-result-background-hover: color-mix(
|
|
in srgb,
|
|
var(--color-d-gray-130) 50%,
|
|
var(--color-d-gray-140)
|
|
);
|
|
--search-result-dest-file-color: var(--color-d-gray-50);
|
|
--search-result-dest-file-bg: var(--color-d-gray-120);
|
|
--search-result-dest-file-icon-color: var(--color-d-gray-70);
|
|
--search-result-dest-file-shadow:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px -2px 0px 0px rgba(0, 0, 0, 0.25);
|
|
--search-result-dest-file-bg-hover: var(--color-d-gray-140);
|
|
--search-result-dest-file-shadow-hover:
|
|
inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),
|
|
inset 0px -2px 0px 0px rgba(0, 0, 0, 0.25),
|
|
0px 2px 3px 0px rgba(0, 0, 0, 0.29);
|
|
--style-settings-container-bg: color-mix(
|
|
in srgb,
|
|
var(--background-primary-alt) 50%,
|
|
transparent
|
|
);
|
|
--pcr-btn-shadow: inset 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2);
|
|
}
|
|
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
|
|
border-radius: var(--divider-radius);
|
|
}
|
|
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-horizontal:not(.mod-left-split, .mod-right-split)
|
|
> *
|
|
> .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
|
|
--divider-color: transparent;
|
|
}
|
|
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
|
|
--divider-vertical-height: calc(
|
|
100% - calc(var(--header-height) + var(--editor-pane-margin)) -
|
|
calc(var(--editor-border-radius) * 2)
|
|
);
|
|
bottom: calc(var(--editor-pane-margin) + var(--editor-border-radius));
|
|
}
|
|
.workspace-split.mod-horizontal:not(.mod-left-split, .mod-right-split)
|
|
> *
|
|
> .workspace-leaf-resize-handle {
|
|
width: calc(100% - var(--editor-border-radius) * 2);
|
|
left: var(--editor-border-radius);
|
|
right: var(--editor-border-radius);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace
|
|
.workspace-tabs
|
|
.workspace-tab-container:not(
|
|
.mod-left-split .workspace-tab-container,
|
|
.mod-right-split .workspace-tab-container
|
|
) {
|
|
margin-left: calc(var(--editor-pane-margin) / 3);
|
|
margin-right: calc(var(--editor-pane-margin) / 3);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:not(.is-left-sidedock-open.is-right-sidedock-open)
|
|
.mod-root.workspace-split.mod-vertical {
|
|
margin-left: calc(var(--editor-pane-margin) / 2);
|
|
margin-right: calc(var(--editor-pane-margin) / 2);
|
|
padding-bottom: var(--editor-pane-margin);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:is(.is-left-sidedock-open.is-right-sidedock-open)
|
|
.workspace-split.mod-left-split {
|
|
margin-right: calc(-1 * var(--editor-pane-margin) / 3);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:is(.is-left-sidedock-open.is-right-sidedock-open)
|
|
.mod-root.workspace-split.mod-vertical {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-bottom: var(--editor-pane-margin);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:is(.is-left-sidedock-open.is-right-sidedock-open)
|
|
.workspace-split.mod-right-split {
|
|
margin-left: calc(-1 * var(--editor-pane-margin) / 3);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:is(.is-left-sidedock-open):not(.is-right-sidedock-open)
|
|
.workspace-split.mod-left-split {
|
|
margin-right: calc(-1 * var(--editor-pane-margin) / 3);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:is(.is-left-sidedock-open):not(.is-right-sidedock-open)
|
|
.mod-root.workspace-split.mod-vertical {
|
|
margin-left: 0;
|
|
margin-right: calc(var(--editor-pane-margin) / 2);
|
|
padding-bottom: var(--editor-pane-margin);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:is(.is-right-sidedock-open):not(.is-left-sidedock-open)
|
|
.mod-root.workspace-split.mod-vertical {
|
|
margin-left: calc(var(--editor-pane-margin) / 2);
|
|
margin-right: 0;
|
|
padding-bottom: var(--editor-pane-margin);
|
|
}
|
|
body:not(.is-phone)
|
|
.workspace:is(.is-right-sidedock-open):not(.is-left-sidedock-open)
|
|
.workspace-split.mod-right-split {
|
|
margin-left: calc(-1 * var(--editor-pane-margin) / 3);
|
|
}
|
|
.mobile-navbar {
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
box-shadow: var(--navbar-shadow);
|
|
}
|
|
.mobile-toolbar {
|
|
width: calc(100% - 2 * var(--size-4-2));
|
|
background: var(--mobile-toolbar-bg);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-l);
|
|
margin: calc(-1 * var(--size-2-3)) var(--size-4-2) var(--size-4-2)
|
|
var(--size-4-2);
|
|
}
|
|
.workspace-ribbon .side-dock-actions .clickable-icon,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon {
|
|
color: var(--non-alternating-color);
|
|
background: var(--icon-bg);
|
|
padding: var(--ribbon-icon-spacing) var(--size-2-3);
|
|
}
|
|
.workspace-ribbon .side-dock-actions .clickable-icon:hover,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon:hover {
|
|
background: var(--icon-bg-hover);
|
|
cursor: var(--cursor);
|
|
}
|
|
.workspace-ribbon .side-dock-actions .clickable-icon.is-active,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon.is-active {
|
|
background: var(--icon-bg-active);
|
|
}
|
|
.workspace-ribbon
|
|
.side-dock-actions
|
|
.clickable-icon:nth-child(3n + 1).is-active,
|
|
.workspace-ribbon .side-dock-actions .clickable-icon:nth-child(3n + 1):hover,
|
|
.workspace-ribbon
|
|
.side-dock-settings
|
|
.clickable-icon:nth-child(3n + 1).is-active,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon:nth-child(3n + 1):hover {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.workspace-ribbon .side-dock-actions .clickable-icon:nth-child(3n + 1):active,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon:nth-child(3n + 1):active {
|
|
color: var(--alternating-color-1-hover-active);
|
|
}
|
|
.workspace-ribbon
|
|
.side-dock-actions
|
|
.clickable-icon:nth-child(3n + 2).is-active,
|
|
.workspace-ribbon .side-dock-actions .clickable-icon:nth-child(3n + 2):hover,
|
|
.workspace-ribbon
|
|
.side-dock-settings
|
|
.clickable-icon:nth-child(3n + 2).is-active,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon:nth-child(3n + 2):hover {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.workspace-ribbon .side-dock-actions .clickable-icon:nth-child(3n + 2):active,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon:nth-child(3n + 2):active {
|
|
color: var(--alternating-color-2-hover-active);
|
|
}
|
|
.workspace-ribbon
|
|
.side-dock-actions
|
|
.clickable-icon:nth-child(3n + 3).is-active,
|
|
.workspace-ribbon .side-dock-actions .clickable-icon:nth-child(3n + 3):hover,
|
|
.workspace-ribbon
|
|
.side-dock-settings
|
|
.clickable-icon:nth-child(3n + 3).is-active,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon:nth-child(3n + 3):hover {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.workspace-ribbon .side-dock-actions .clickable-icon:nth-child(3n + 3):active,
|
|
.workspace-ribbon .side-dock-settings .clickable-icon:nth-child(3n + 3):active {
|
|
color: var(--alternating-color-3-hover-active);
|
|
}
|
|
.workspace-ribbon.mod-left:before {
|
|
border-bottom: none;
|
|
}
|
|
.workspace-ribbon.mod-left {
|
|
border: var(--ribbon-border-width) solid var(--divider-color);
|
|
border-left: none;
|
|
border-radius: 0px var(--ribbon-radius) var(--ribbon-radius) 0px;
|
|
margin-bottom: var(--ribbon-margin-bottom);
|
|
}
|
|
body.ribbon-slideout:not(.is-mobile) .workspace-ribbon.mod-left:before {
|
|
visibility: hidden;
|
|
}
|
|
body.ribbon-slideout:not(.is-mobile) .workspace-ribbon.workspace-ribbon {
|
|
--ribbon-background: var(--ribbon-slideout-background);
|
|
--titlebar-background-focused: var(--ribbon-background);
|
|
--ribbon-background-collapsed: var(--ribbon-background);
|
|
position: absolute;
|
|
left: calc(-1 * var(--ribbon-width) / 4);
|
|
opacity: 0;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-moderate);
|
|
box-shadow: var(--ribbon-slideout-shadow);
|
|
}
|
|
body.ribbon-slideout:not(.is-mobile) .workspace-ribbon.workspace-ribbon:hover {
|
|
left: 0px;
|
|
opacity: 1;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-moderate);
|
|
}
|
|
body.ribbon-slideout:not(.is-mobile) .sidebar-toggle-button.mod-left {
|
|
background: var(--ribbon-background);
|
|
--tab-container-background: var(--ribbon-background);
|
|
}
|
|
body.ribbon-slideout:not(.is-mobile).is-hidden-frameless:not(.is-fullscreen)
|
|
.workspace-tabs.mod-top-left-space
|
|
.workspace-tab-header-container {
|
|
padding-left: calc(
|
|
var(--size-4-2) + var(--frame-left-space) + var(--ribbon-width)
|
|
);
|
|
}
|
|
body.ribbon-slideout:not(.is-mobile):not(.is-hidden-frameless.is-frameless)
|
|
.side-dock-actions {
|
|
margin-top: var(--header-height);
|
|
}
|
|
.nav-header {
|
|
padding: 0px var(--size-4-2) 0px var(--size-4-2);
|
|
}
|
|
.nav-buttons-container {
|
|
gap: var(--size-4-1);
|
|
justify-content: left;
|
|
padding-inline-start: var(--size-2-3);
|
|
margin-top: var(--size-4-1);
|
|
margin-bottom: var(--size-4-1);
|
|
}
|
|
.nav-action-button {
|
|
padding: var(--size-2-3) var(--size-2-3);
|
|
}
|
|
body:not(.is-mobile)
|
|
.workspace-split
|
|
.workspace-sidedock-vault-profile.workspace-sidedock-vault-profile {
|
|
width: unset;
|
|
background: var(--vault-name-background);
|
|
padding: var(--size-2-2) var(--size-2-2);
|
|
border: var(--vault-name-border);
|
|
border-radius: var(--radius-m);
|
|
margin: 0px var(--size-4-2) var(--editor-pane-margin);
|
|
color: var(--vault-name-color);
|
|
}
|
|
.status-bar-item {
|
|
color: var(--status-bar-item-color);
|
|
}
|
|
.status-bar-item:hover,
|
|
.status-bar-item.mod-clickable:hover {
|
|
color: var(--status-bar-item-color-hover);
|
|
background: var(--status-bar-item-bg-hover);
|
|
}
|
|
.status-bar-item.mod-clickable:active {
|
|
color: var(--status-bar-item-clickable-color-active);
|
|
background: var(--status-bar-item-clickable-bg-active);
|
|
}
|
|
.status-bar-item.plugin-sync:hover {
|
|
background: var(--status-bar-item-bg-hover);
|
|
}
|
|
.status-bar-item.plugin-sync .mod-success {
|
|
color: var(--sync-icon-success);
|
|
}
|
|
.status-bar-item.plugin-sync .mod-success:hover {
|
|
color: var(--sync-icon-success-hover);
|
|
}
|
|
.status-bar-item.plugin-sync .mod-success:active {
|
|
color: var(--sync-icon-success-active);
|
|
}
|
|
.status-bar-item.plugin-sync .mod-working {
|
|
color: var(--sync-icon-working);
|
|
}
|
|
.status-bar-item.plugin-sync .mod-working:hover {
|
|
color: var(--sync-icon-working-active);
|
|
}
|
|
.status-bar-item.plugin-sync .mod-working:active {
|
|
color: var(--sync-icon-working-active);
|
|
}
|
|
body.sb-style-full .status-bar {
|
|
--status-bar-position: relative;
|
|
--status-bar-border-width: 0 0 0 0;
|
|
margin-top: calc(var(--editor-pane-margin) * -1);
|
|
}
|
|
body.sb-style-slideupfull .status-bar {
|
|
--status-bar-position: relative;
|
|
--status-bar-border-width: 0 0 0 0;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-moderate);
|
|
margin-top: calc(-1 * var(--editor-pane-margin));
|
|
margin-bottom: calc(-1 * var(--editor-pane-margin) * 1.6);
|
|
}
|
|
body.sb-style-slideupfull .status-bar-item {
|
|
opacity: 0;
|
|
transition: opacity var(--anim-motion-smooth) var(--anim-duration-moderate);
|
|
}
|
|
body.sb-style-slideupfull .status-bar:hover {
|
|
margin-bottom: 0px;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-moderate);
|
|
}
|
|
body.sb-style-slideupfull .status-bar:hover .status-bar-item {
|
|
opacity: 1;
|
|
transition: opacity var(--anim-motion-smooth) var(--anim-duration-moderate);
|
|
}
|
|
body.sb-style-slideout .status-bar {
|
|
--status-bar-position: absolute;
|
|
--status-bar-background: var(--status-bar-floating-bg);
|
|
right: -40px;
|
|
bottom: var(--size-2-3);
|
|
--status-bar-border-width: 1px;
|
|
--status-bar-radius: var(--radius-m) 0 0 var(--radius-m);
|
|
box-shadow: var(--status-bar-floating-shadow);
|
|
opacity: 0;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-slow);
|
|
}
|
|
body.sb-style-slideout .status-bar:hover {
|
|
right: 0;
|
|
bottom: var(--size-2-3);
|
|
opacity: 1;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-slow);
|
|
}
|
|
body.sb-style-slideout.sb-sync-only .status-bar {
|
|
--status-bar-position: absolute;
|
|
--status-bar-background: var(--status-bar-floating-bg);
|
|
right: -12px;
|
|
bottom: var(--size-2-3);
|
|
--status-bar-border-width: 1px;
|
|
--status-bar-radius: var(--radius-m) 0 0 var(--radius-m);
|
|
box-shadow: var(--status-bar-floating-shadow);
|
|
opacity: 0;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-slow);
|
|
}
|
|
body.sb-style-slideout.sb-sync-only .status-bar:hover {
|
|
right: 0;
|
|
bottom: var(--size-2-3);
|
|
opacity: 1;
|
|
transition: var(--anim-motion-jumpy) var(--anim-duration-slow);
|
|
}
|
|
body.sb-style-floating .status-bar {
|
|
--status-bar-position: absolute;
|
|
--status-bar-background: var(--status-bar-floating-bg);
|
|
right: var(--status-bar-floating-offset);
|
|
bottom: var(--status-bar-floating-offset);
|
|
--status-bar-border-width: 1px;
|
|
--status-bar-radius: calc(var(--radius-m) - 2px);
|
|
opacity: var(--status-bar-floating-opacity);
|
|
transition: var(--anim-motion-smooth) var(--anim-duration-fast);
|
|
box-shadow: var(--status-bar-floating-shadow);
|
|
}
|
|
body.sb-style-floating .status-bar:hover {
|
|
opacity: var(--status-bar-floating-opacity-hover);
|
|
transition: var(--anim-motion-smooth) var(--anim-duration-fast);
|
|
}
|
|
body.sb-sync-only .status-bar-item:not(.plugin-sync) {
|
|
display: none;
|
|
}
|
|
body.sb-word-count-only .status-bar-item:not(.plugin-word-count) {
|
|
display: none;
|
|
}
|
|
.workspace,
|
|
.workspace-ribbon.mod-left.is-collapsed,
|
|
.mod-root.workspace-split,
|
|
.mod-root .workspace-tabs .workspace-leaf,
|
|
.workspace-tab-container,
|
|
.is-grabbing .workspace-tabs {
|
|
background: var(--titlebar-background);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon),
|
|
button:not(button.clickable-icon) {
|
|
font-weight: var(--component-font-weight);
|
|
padding: var(--button-padding);
|
|
border-radius: var(--button-radius);
|
|
transition: var(--button-anim);
|
|
transition: var(--background-anim);
|
|
cursor: var(--cursor);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon):active,
|
|
button:not(button.clickable-icon):active {
|
|
background: var(--interactive-normal);
|
|
padding: var(--button-padding-active);
|
|
box-shadow: var(--button-shadow-active);
|
|
transition: var(--button-anim);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon):focus-visible,
|
|
button:not(button.clickable-icon):focus-visible {
|
|
background: var(--interactive-normal-hover);
|
|
box-shadow: var(--button-shadow-focus);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-cta,
|
|
button:not(button.clickable-icon).mod-cta {
|
|
box-shadow: var(--button-accent-shadow);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-cta:hover,
|
|
button:not(button.clickable-icon).mod-cta:hover {
|
|
box-shadow: var(--button-accent-shadow-hover);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-cta:active,
|
|
button:not(button.clickable-icon).mod-cta:active {
|
|
background: var(--interactive-accent);
|
|
box-shadow: var(--button-accent-shadow-active);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-cta:focus-visible,
|
|
button:not(button.clickable-icon).mod-cta:focus-visible {
|
|
background: var(--interactive-accent-hover);
|
|
box-shadow: var(--button-shadow-focus);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-warning,
|
|
button:not(button.clickable-icon).mod-warning {
|
|
color: var(--text-on-accent);
|
|
background-color: var(--background-modifier-error);
|
|
box-shadow: var(--button-accent-shadow);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-warning:hover,
|
|
button:not(button.clickable-icon).mod-warning:hover {
|
|
background-color: var(--background-modifier-error-hover);
|
|
box-shadow: var(--button-accent-shadow-hover);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-warning:active,
|
|
button:not(button.clickable-icon).mod-warning:active {
|
|
background: var(--background-modifier-error);
|
|
box-shadow: var(--button-accent-shadow-active);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-warning:focus-visible,
|
|
button:not(button.clickable-icon).mod-warning:focus-visible {
|
|
background: var(--background-modifier-error-hover);
|
|
box-shadow: var(--button-accent-shadow-focus);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-destructive,
|
|
button:not(button.clickable-icon).mod-destructive {
|
|
color: var(--text-on-accent);
|
|
background: var(--background-modifier-warning);
|
|
box-shadow: var(--button-accent-shadow);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-destructive:hover,
|
|
button:not(button.clickable-icon).mod-destructive:hover {
|
|
background: var(--background-modifier-warning-hover);
|
|
box-shadow: var(--button-accent-shadow-hover);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-destructive:active,
|
|
button:not(button.clickable-icon).mod-destructive:active {
|
|
background: var(--background-modifier-warning);
|
|
box-shadow: var(--button-accent-shadow-active);
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-loading,
|
|
button:not(button.clickable-icon).mod-loading {
|
|
opacity: var(--disabled-component-opacity);
|
|
cursor: wait;
|
|
}
|
|
.is-mobile button:not(button.clickable-icon).mod-cancel,
|
|
button:not(button.clickable-icon).mod-cancel {
|
|
color: var(--text-normal);
|
|
}
|
|
button[disabled],
|
|
button[aria-disabled="true"],
|
|
button[disabled="true"] {
|
|
opacity: var(--disabled-component-opacity);
|
|
cursor: not-allowed;
|
|
}
|
|
.document-search-close-button,
|
|
.modal-close-button {
|
|
font-size: calc(var(--modal-close-button-size));
|
|
line-height: var(--modal-close-button-size);
|
|
color: var(--text-on-accent);
|
|
background: var(--background-modifier-error);
|
|
border-radius: var(--close-button-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: var(--cursor);
|
|
}
|
|
.document-search-close-button::before,
|
|
.modal-close-button::before {
|
|
font-weight: var(--font-extralight);
|
|
font-feature-settings: "case";
|
|
}
|
|
.document-search-close-button:hover,
|
|
.modal-close-button:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--background-modifier-error-hover);
|
|
}
|
|
.document-search-close-button:active,
|
|
.modal-close-button:active {
|
|
opacity: var(--button-opacity-active);
|
|
}
|
|
.document-search-close-button {
|
|
padding: 0.2rem 0.2rem;
|
|
}
|
|
.document-search-close-button:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--background-modifier-error-hover);
|
|
opacity: var(--button-opacity-active);
|
|
}
|
|
.modal-close-button {
|
|
width: var(--modal-close-button-size);
|
|
height: fit-content;
|
|
}
|
|
.metadata-container .metadata-add-button {
|
|
font-weight: var(--component-font-weight);
|
|
text-transform: capitalize;
|
|
color: var(--text-on-accent);
|
|
background: var(--interactive-accent);
|
|
padding: var(--button-metadata-padding);
|
|
border-radius: var(--button-s-radius);
|
|
margin-inline-start: var(--size-2-2);
|
|
box-shadow: var(--button-accent-shadow);
|
|
transition: var(--button-anim);
|
|
transition: var(--background-anim);
|
|
}
|
|
.metadata-container .metadata-add-button:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--interactive-accent-hover);
|
|
box-shadow: var(--button-accent-shadow-hover);
|
|
}
|
|
.metadata-container .metadata-add-button:hover .text-button-icon {
|
|
color: var(--text-on-accent);
|
|
}
|
|
.metadata-container .metadata-add-button:active {
|
|
padding: var(--button-metadata-padding-active);
|
|
box-shadow: var(--button-accent-shadow-active);
|
|
}
|
|
.metadata-container .metadata-add-button.text-icon-button:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--interactive-accent-hover);
|
|
padding: var(--button-metadata-padding-active);
|
|
box-shadow: var(--button-shadow-active);
|
|
transition: var(--button-anim);
|
|
}
|
|
.metadata-container
|
|
.metadata-add-button.text-icon-button:active
|
|
.text-button-icon {
|
|
color: var(--text-on-accent);
|
|
}
|
|
.markdown-source-view.mod-cm6
|
|
.cm-embed-block:not(.cm-table-widget):hover
|
|
.edit-block-button {
|
|
padding: var(--size-2-2) var(--size-2-2);
|
|
background: var(--embed-edit-btn-bg);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--embed-edit-btn-shadow);
|
|
}
|
|
.markdown-source-view.mod-cm6
|
|
.cm-embed-block:not(.cm-table-widget):hover
|
|
.edit-block-button:hover {
|
|
background: var(--embed-edit-btn-bg-hover);
|
|
box-shadow: var(--embed-edit-btn-shadow-hover);
|
|
}
|
|
.markdown-source-view.mod-cm6 .code-block-flair,
|
|
.markdown-rendered button.copy-code-button,
|
|
.markdown-embed-link,
|
|
.file-embed-link {
|
|
display: flex;
|
|
font-weight: var(--component-font-weight);
|
|
line-height: 1;
|
|
padding: var(--size-2-3) var(--size-2-3);
|
|
border-radius: var(--radius-m);
|
|
transition: var(--anim-duration-superfast) var(--anim-motion-smooth);
|
|
}
|
|
.markdown-source-view.mod-cm6 .code-block-flair:hover,
|
|
.markdown-rendered button.copy-code-button:hover,
|
|
.markdown-embed-link:hover,
|
|
.file-embed-link:hover {
|
|
box-shadow: var(--copy-code-btn-shadow);
|
|
}
|
|
@media (hover: hover) {
|
|
.markdown-embed-link:hover,
|
|
.file-embed-link:hover {
|
|
box-shadow: var(--copy-code-btn-shadow);
|
|
}
|
|
}
|
|
.mod-community-modal .modal-sidebar button.clickable-icon {
|
|
color: var(--icon-color);
|
|
padding: unset;
|
|
}
|
|
.mod-community-modal .modal-sidebar button.clickable-icon:hover {
|
|
color: var(--icon-color-hover);
|
|
background: var(--icon-bg-hover);
|
|
cursor: var(--cursor);
|
|
}
|
|
.mod-community-modal .modal-sidebar button.clickable-icon:active {
|
|
color: var(--icon-color-active);
|
|
background: var(--icon-bg-pressed);
|
|
}
|
|
.mod-community-modal .modal-sidebar button.clickable-icon.has-active-menu,
|
|
.mod-community-modal .modal-sidebar button.clickable-icon.has-active-menu {
|
|
color: var(--icon-color-active);
|
|
background: var(--icon-bg-active-menu);
|
|
}
|
|
.mod-community-modal .modal-sidebar button.clickable-icon.has-active-menu:hover,
|
|
.mod-community-modal
|
|
.modal-sidebar
|
|
button.clickable-icon.has-active-menu:hover {
|
|
color: var(--icon-color-active);
|
|
}
|
|
.search-result-file-match button.search-result-file-match-replace-button {
|
|
padding: var(--button-s-padding);
|
|
border-radius: var(--button-s-radius);
|
|
box-shadow: var(--button-shadow);
|
|
}
|
|
.search-result-file-match
|
|
button.search-result-file-match-replace-button:active {
|
|
padding: var(--button-s-padding);
|
|
}
|
|
input[type="checkbox"]:hover {
|
|
cursor: var(--cursor);
|
|
}
|
|
.theme-light input[type="checkbox"]:not(:checked),
|
|
.theme-dark input[type="checkbox"]:not(:checked) {
|
|
background: var(--checklist-bg);
|
|
}
|
|
.theme-light input[type="checkbox"]:hover,
|
|
.theme-dark input[type="checkbox"]:hover {
|
|
box-shadow: var(--checklist-shadow-hover);
|
|
}
|
|
@media (hover: hover) {
|
|
input[type="color"]::-webkit-color-swatch:hover,
|
|
input[type="color"]::-webkit-color-swatch:hover:focus {
|
|
box-shadow:
|
|
var(--swatch-shadow),
|
|
0px 0px 0px 3px var(--background-modifier-border-hover);
|
|
}
|
|
}
|
|
select,
|
|
.dropdown {
|
|
font-weight: var(--component-font-weight);
|
|
border-radius: var(--button-radius);
|
|
transition: var(--background-anim);
|
|
}
|
|
select:hover,
|
|
.dropdown:hover {
|
|
cursor: var(--cursor);
|
|
}
|
|
select:active,
|
|
.dropdown:active {
|
|
box-shadow: var(--button-shadow-active);
|
|
}
|
|
select:focus,
|
|
.dropdown:focus {
|
|
background-color: var(--interactive-hover);
|
|
box-shadow: var(--button-shadow-focus);
|
|
}
|
|
select[disabled],
|
|
select[aria-disabled="true"],
|
|
select[disabled="true"] .dropdown[disabled] {
|
|
opacity: var(--disabled-component-opacity);
|
|
cursor: not-allowed;
|
|
}
|
|
kbd,
|
|
span.prompt-instruction-command,
|
|
span.setting-hotkey {
|
|
color: var(--kbd-color);
|
|
background: var(--kbd-background);
|
|
padding: var(--size-2-1) var(--size-2-3) var(--size-2-1) var(--size-2-3);
|
|
box-shadow: var(--kbd-shadow);
|
|
}
|
|
.is-loading:before {
|
|
height: 4px;
|
|
background-color: var(--loading-line-color);
|
|
box-shadow: var(--loading-line-shadow);
|
|
}
|
|
.progress-bar {
|
|
background: var(--background-primary);
|
|
}
|
|
.progress-bar-message {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.2em;
|
|
}
|
|
.progress-bar-indicator {
|
|
width: 35%;
|
|
height: var(--size-4-3);
|
|
border-radius: var(--size-4-3);
|
|
}
|
|
.progress-bar-line {
|
|
height: var(--size-4-3);
|
|
background: var(--loading-line-bg-color);
|
|
box-shadow: var(--loading-line-shadow);
|
|
}
|
|
.progress-bar-subline {
|
|
height: var(--size-4-3);
|
|
background: var(--loading-line-color);
|
|
box-shadow: var(--loading-line-shadow);
|
|
animation: var(--anim-duration-moderate) var(--anim-motion-smooth) infinite;
|
|
}
|
|
.is-mobile .progress-bar-indicator {
|
|
width: 50%;
|
|
}
|
|
.menu {
|
|
animation: var(--anim-popup);
|
|
}
|
|
.menu-item {
|
|
border-radius: var(--menu-item-radius);
|
|
}
|
|
.menu-item.selected:not(.is-label):not(.is-disabled) {
|
|
background: var(--menu-item-bg-hover);
|
|
}
|
|
.menu-item.selected:not(.is-label):not(.is-disabled):active {
|
|
color: var(--menu-item-color-active);
|
|
background: var(--menu-item-bg-active);
|
|
}
|
|
.menu-item.selected:not(.is-label):not(.is-disabled):active .menu-item-icon {
|
|
color: var(--menu-item-icon-color-active);
|
|
}
|
|
.menu-item-icon {
|
|
color: var(--menu-item-icon-color);
|
|
}
|
|
.menu-item-icon.mod-checked > svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
.is-mobile .menu {
|
|
border: 1px solid var(--background-modifier-border-hover);
|
|
border-radius: var(--size-4-4);
|
|
}
|
|
.is-phone .menu {
|
|
border-bottom: none;
|
|
border-radius: var(--size-4-4) var(--size-4-4) 0 0;
|
|
}
|
|
.modal-container {
|
|
backdrop-filter: blur(var(--popup-bg-blur));
|
|
}
|
|
.modal {
|
|
animation: var(--anim-popup);
|
|
}
|
|
.modal .vertical-tab-header-group {
|
|
padding-top: 0;
|
|
}
|
|
.modal .vertical-tab-header-group-title {
|
|
font-size: var(--font-ui-smallest);
|
|
color: var(--settings-nav-group-title-color);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
.is-phone .modal .vertical-tab-header-group-title {
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
.is-phone .modal .vertical-tab-header-group-title:first-child {
|
|
margin-top: var(--size-4-4);
|
|
}
|
|
.modal .vertical-tab-nav-item {
|
|
text-transform: capitalize;
|
|
font-size: var(--font-ui-small);
|
|
color: var(--settings-nav-item-text-color);
|
|
padding: var(--settings-nav-item-padding);
|
|
border-radius: var(--settings-nav-item-radius);
|
|
margin-bottom: var(--size-2-1);
|
|
transition: box-shadow var(--button-anim);
|
|
transition: padding-left var(--anim-duration-fast) var(--anim-motion-swing);
|
|
}
|
|
.modal
|
|
.vertical-tab-nav-item:hover:not(.is-active):not(
|
|
body.is-phone .vertical-tab-nav-item
|
|
) {
|
|
color: var(--settings-nav-item-text-color-hover);
|
|
background: var(--settings-nav-item-bg-hover);
|
|
padding: var(--settings-nav-item-padding-hover);
|
|
}
|
|
.modal
|
|
.vertical-tab-nav-item:active:not(.is-active):not(
|
|
body.is-phone .vertical-tab-nav-item
|
|
) {
|
|
color: var(--settings-nav-item-text-color-active);
|
|
}
|
|
.modal
|
|
.vertical-tab-nav-item.is-active:not(body.is-phone .vertical-tab-nav-item) {
|
|
padding: var(--settings-nav-item-padding-active);
|
|
}
|
|
.modal
|
|
.vertical-tab-nav-item.is-active:nth-child(3n + 1):not(
|
|
body.is-phone .vertical-tab-nav-item
|
|
) {
|
|
color: var(--settings-nav-item-active-color);
|
|
background: var(--alternating-color-1);
|
|
box-shadow: var(--button-accent-shadow);
|
|
}
|
|
.modal
|
|
.vertical-tab-nav-item.is-active:nth-child(3n + 2):not(
|
|
body.is-phone .vertical-tab-nav-item
|
|
) {
|
|
color: var(--settings-nav-item-active-color);
|
|
background: var(--alternating-color-2);
|
|
box-shadow: var(--button-accent-shadow);
|
|
}
|
|
.modal
|
|
.vertical-tab-nav-item.is-active:nth-child(3n + 3):not(
|
|
body.is-phone .vertical-tab-nav-item
|
|
) {
|
|
color: var(--settings-nav-item-active-color);
|
|
background: var(--alternating-color-3);
|
|
box-shadow: var(--button-accent-shadow);
|
|
}
|
|
.is-mobile.theme-dark .vertical-tab-content {
|
|
background: var(--background-primary);
|
|
}
|
|
.is-mobile .modal {
|
|
border: 1px solid var(--background-modifier-border-hover);
|
|
border-radius: var(--radius-xl);
|
|
}
|
|
.is-phone .modal {
|
|
border-radius: var(--size-4-4) var(--size-4-4) 0 0;
|
|
}
|
|
.is-phone .modal-title {
|
|
text-transform: capitalize;
|
|
}
|
|
.is-phone .mod-confirmation .modal:not(.mod-lg) {
|
|
border: 1px solid var(--background-modifier-border-hover);
|
|
}
|
|
.community-item {
|
|
border: none;
|
|
box-shadow: var(--community-item-shadow);
|
|
transition: background var(--anim-duration-superfast)
|
|
var(--anim-motion-smooth);
|
|
transition: box-shadow var(--anim-duration-fast) var(--anim-motion-swing);
|
|
}
|
|
.community-item:hover {
|
|
box-shadow: var(--community-item-shadow-hover);
|
|
}
|
|
.community-item.is-selected,
|
|
.community-item.is-selected:hover {
|
|
box-shadow: var(--community-item-selected-shadow);
|
|
}
|
|
.community-item .flair,
|
|
.flair.mod-pop {
|
|
font-weight: var(--font-semibold);
|
|
color: var(--inline-code-color);
|
|
background: var(--inline-code-bg);
|
|
box-shadow: var(--community-item-flair-shadow);
|
|
}
|
|
.modal.modal .community-item.is-selected .flair,
|
|
.modal.modal .community-item.is-selected:hover .flair {
|
|
color: var(--inline-code-bg);
|
|
background: var(--inline-code-color);
|
|
box-shadow: var(--community-item-flair-shadow);
|
|
}
|
|
.tree-item-self {
|
|
border-radius: var(--nav-item-radius);
|
|
}
|
|
.tree-item-self.is-clickable.is-active:not(.nav-file-title) {
|
|
box-shadow: var(--nav-item-shadow-active);
|
|
}
|
|
.embedded-backlinks .backlink-pane .tree-item-flair,
|
|
.tree-item-flair {
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: var(--font-ui-smallest);
|
|
color: var(--flair-count-color);
|
|
background: var(--flair-count-bg-color);
|
|
padding: var(--flair-count-padding);
|
|
border-radius: var(--flair-count-radius);
|
|
}
|
|
body:not(.is-grabbing) .tree-item-self.is-clickable:hover .tree-item-flair {
|
|
color: var(--nav-item-color-hover);
|
|
background: var(--flair-count-bg-color);
|
|
}
|
|
.backlink-pane > .tree-item-self,
|
|
.embedded-backlinks .backlink-pane > .tree-item-self,
|
|
.outgoing-link-pane > .tree-item-self {
|
|
font-size: var(--font-ui-smallest);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
.embedded-backlinks .backlink-pane > .tree-item-self {
|
|
margin-top: 5px;
|
|
}
|
|
.nav-folder-children > .nav-folder .nav-folder-title.is-selected,
|
|
.nav-files-container > div > .nav-folder .nav-folder-title.is-selected,
|
|
.nav-files-container .tree-item-self.nav-file-title.is-selected,
|
|
.tree-item .tree-item-self.is-selected {
|
|
--icon-color: var(--nav-item-color-selected);
|
|
color: var(--nav-item-color-selected);
|
|
background: var(--nav-item-background-selected);
|
|
}
|
|
.nav-folder-children > .nav-folder .nav-folder-title.is-selected:hover,
|
|
.nav-files-container > div > .nav-folder .nav-folder-title.is-selected:hover,
|
|
.nav-files-container .tree-item-self.nav-file-title.is-selected:hover,
|
|
.tree-item .tree-item-self.is-selected:hover {
|
|
--icon-color: var(--nav-item-color-selected);
|
|
color: var(--nav-item-color-selected);
|
|
background: var(--nav-item-background-selected-hover);
|
|
}
|
|
.nav-folder-title.is-selected .nav-folder-collapse-indicator svg.svg-icon {
|
|
color: var(--nav-item-color-selected);
|
|
}
|
|
.notice-container {
|
|
overflow: visible;
|
|
}
|
|
.notice,
|
|
.is-phone .notice {
|
|
color: var(--notice-color);
|
|
border-radius: var(--radius-l);
|
|
box-shadow: var(--notice-shadow);
|
|
}
|
|
.markdown-rendered progress,
|
|
.markdown-source-view.is-live-preview progress,
|
|
.markdown-preview-view progress {
|
|
width: var(--progress-width);
|
|
height: var(--progress-height);
|
|
}
|
|
.markdown-rendered progress[value]::-webkit-progress-bar,
|
|
.markdown-source-view.is-live-preview progress[value]::-webkit-progress-bar,
|
|
.markdown-preview-view progress[value]::-webkit-progress-bar {
|
|
background-color: var(--progress-background);
|
|
box-shadow: inset 0px 0px 0px var(--progress-border-width)
|
|
var(--progress-bar-outline);
|
|
}
|
|
.markdown-rendered progress[value]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview progress[value]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value]::-webkit-progress-value {
|
|
border-top-right-radius: var(--progress-value-radius);
|
|
border-bottom-right-radius: var(--progress-value-radius);
|
|
box-shadow: inset 0px 0px 0px var(--progress-border-width)
|
|
var(--progress-value-outline);
|
|
}
|
|
.markdown-rendered progress[value^="1"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value^="2"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value^="3"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="1"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="2"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="3"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="1"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="2"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="3"]::-webkit-progress-value {
|
|
background-color: var(--progress-color-1);
|
|
}
|
|
.markdown-rendered progress[value^="4"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value^="5"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="4"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="5"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="4"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="5"]::-webkit-progress-value {
|
|
background-color: var(--progress-color-2);
|
|
}
|
|
.markdown-rendered progress[value^="6"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value^="7"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="6"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="7"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="6"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="7"]::-webkit-progress-value {
|
|
background-color: var(--progress-color-3);
|
|
}
|
|
.markdown-rendered progress[value^="8"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value^="9"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="8"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value^="9"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="8"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value^="9"]::-webkit-progress-value {
|
|
background-color: var(--progress-color-4);
|
|
}
|
|
.markdown-rendered progress[value="1"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="100"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="1"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="100"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="1"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="100"]::-webkit-progress-value {
|
|
background: var(--progress-color-5);
|
|
}
|
|
.markdown-rendered progress[value="0"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="2"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="3"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="4"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="5"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="6"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="7"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="8"]::-webkit-progress-value,
|
|
.markdown-rendered progress[value="9"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="0"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="2"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="3"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="4"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="5"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="6"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="7"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="8"]::-webkit-progress-value,
|
|
.markdown-source-view.is-live-preview
|
|
progress[value="9"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="0"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="2"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="3"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="4"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="5"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="6"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="7"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="8"]::-webkit-progress-value,
|
|
.markdown-preview-view progress[value="9"]::-webkit-progress-value {
|
|
background-color: var(--progress-color-1);
|
|
}
|
|
input.prompt-input {
|
|
background: var(--prompt-input-background);
|
|
padding: 28px var(--size-4-6);
|
|
}
|
|
input.prompt-input,
|
|
input.prompt-input:hover,
|
|
input.prompt-input:active,
|
|
input.prompt-input:focus,
|
|
input.prompt-input:focus-visible {
|
|
border-bottom: var(--prompt-separator-border);
|
|
}
|
|
.suggestion-container:not([data-popper-placement]),
|
|
.suggestion-popover,
|
|
.popover {
|
|
animation: var(--anim-popup);
|
|
}
|
|
.suggestion-container[data-popper-placement] {
|
|
animation: var(--anim-popup-alt) !important;
|
|
}
|
|
.suggestion-item:not(.mod-search-suggestion .suggestion-item) {
|
|
font-size: calc(var(--font-ui-medium) - 1px);
|
|
color: var(--prompt-suggestion-color);
|
|
border-radius: calc(var(--radius-m) - 1px);
|
|
transition: padding var(--anim-duration-fast) var(--anim-motion-swing);
|
|
}
|
|
.suggestion-item:not(.mod-search-suggestion .suggestion-item).is-selected {
|
|
color: var(--prompt-suggestion-color-selected);
|
|
background: var(--prompt-suggestion-background-selected);
|
|
box-shadow: var(--prompt-suggestion-shadow-selected);
|
|
}
|
|
.suggestion-item:not(.mod-search-suggestion .suggestion-item).mod-complex
|
|
.suggestion-highlight {
|
|
font-weight: var(--font-semibold);
|
|
color: var(--prompt-suggestion-highlight-color);
|
|
}
|
|
.suggestion-item:not(
|
|
.mod-search-suggestion .suggestion-item
|
|
).mod-complex.is-selected
|
|
.suggestion-highlight {
|
|
color: var(--prompt-suggestion-highlight-color-selected);
|
|
}
|
|
.suggestion-item:empty {
|
|
display: none;
|
|
}
|
|
.prompt-instructions {
|
|
background: var(--prompt-instructions-background);
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
}
|
|
.prompt-instructions,
|
|
.prompt-instructions:hover,
|
|
.prompt-instructions:active,
|
|
.prompt-instructions:focus,
|
|
.prompt-instructions:focus-visible {
|
|
border-top: var(--prompt-separator-border);
|
|
}
|
|
.prompt-instruction-command {
|
|
color: var(--inline-code-color);
|
|
background-color: var(--background-secondary);
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.prompt {
|
|
animation: var(--anim-popup);
|
|
}
|
|
.prompt-results {
|
|
background: var(--prompt-results-background);
|
|
}
|
|
.prompt .suggestion-item {
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
}
|
|
.prompt
|
|
.suggestion-item.is-selected:not(
|
|
body.is-phone .prompt .suggestion-item.is-selected
|
|
) {
|
|
padding: var(--size-4-2) var(--size-4-3) var(--size-4-2) var(--size-4-6);
|
|
}
|
|
.prompt .suggestion-aux .suggestion-flair > svg.lucide-pin {
|
|
transform: rotate(45deg);
|
|
}
|
|
.is-mobile .prompt {
|
|
border: 1px solid var(--background-modifier-border-focus);
|
|
}
|
|
.is-phone .suggestion-bg {
|
|
backdrop-filter: blur(var(--popup-bg-blur));
|
|
}
|
|
.is-phone .prompt {
|
|
border-bottom: none;
|
|
}
|
|
.theme-dark.is-mobile .prompt input.prompt-input {
|
|
background: var(--background-primary);
|
|
}
|
|
.pull-down-action {
|
|
border-radius: var(--radius-l);
|
|
box-shadow: var(--pull-down-action-shadow);
|
|
}
|
|
input[type="range"],
|
|
input[type="range"]:hover,
|
|
input[type="range"]:focus {
|
|
box-shadow: var(--slider-track-shadow);
|
|
}
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
background: var(--slider-thumb-bg);
|
|
box-shadow: var(--slider-thumb-shadow);
|
|
cursor: grab;
|
|
}
|
|
input[type="range"]::-webkit-slider-thumb:hover,
|
|
input[type="range"]::-webkit-slider-thumb:active,
|
|
input[type="range"]:focus::-webkit-slider-thumb,
|
|
input[type="range"]:focus-visible::-webkit-slider-thumb {
|
|
background: var(--slider-thumb-bg);
|
|
box-shadow: var(--slider-thumb-shadow-hover);
|
|
}
|
|
body {
|
|
--tab-header-container-padding: 0 var(--editor-border-radius) var(--size-4-1)
|
|
var(--editor-border-radius);
|
|
--tab-header-container-border-bottom: none;
|
|
--tab-header-container-transition: padding-bottom none;
|
|
--tab-header-container-inner-margin: default;
|
|
--tab-header-container-inner-padding: var(--button-axis-offset);
|
|
--tab-curves-display: none;
|
|
--tab-z-index: 1;
|
|
}
|
|
body:not(.is-phone)
|
|
.mod-root
|
|
.workspace-leaf:not(.workspace-tabs.mod-stacked .workspace-leaf) {
|
|
border-radius: var(--editor-border-radius);
|
|
}
|
|
body:not(.is-phone) .mod-root .workspace-leaf-content {
|
|
border: var(--editor-border-width) solid var(--editor-border-color);
|
|
border-radius: var(--editor-border-radius);
|
|
}
|
|
body:not(.is-phone) .mod-root .workspace-tab-header-container {
|
|
padding: var(--tab-header-container-padding);
|
|
border-bottom: var(--tab-header-container-border-bottom);
|
|
transition: var(--tab-header-container-transition);
|
|
}
|
|
body:not(.is-phone) .mod-root .workspace-tab-header-container-inner {
|
|
padding-bottom: var(--tab-header-container-inner-padding);
|
|
margin-bottom: var(--tab-header-container-inner-margin);
|
|
z-index: var(--tab-z-index);
|
|
}
|
|
.mod-left-split .workspace-tab-header,
|
|
.mod-right-split .workspace-tab-header {
|
|
border-radius: var(--radius-m);
|
|
}
|
|
.mod-left-split .workspace-tab-header-container-inner,
|
|
.mod-right-split .workspace-tab-header-container-inner {
|
|
padding-bottom: 6px;
|
|
}
|
|
.mod-left-split .workspace-tab-header.is-active,
|
|
.mod-right-split .workspace-tab-header.is-active {
|
|
background: var(--tab-active-bg);
|
|
box-shadow: var(--tab-active-shadow);
|
|
transition:
|
|
border,
|
|
box-shadow,
|
|
transform var(--button-anim);
|
|
}
|
|
.mod-left-split .workspace-tab-header.is-active:nth-child(3n + 1),
|
|
.mod-right-split .workspace-tab-header.is-active:nth-child(3n + 1) {
|
|
border: 1px solid var(--alternating-color-1);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-icon,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-title,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:hover,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-1);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:active,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-1-hover-active);
|
|
}
|
|
.mod-left-split .workspace-tab-header.is-active:nth-child(3n + 2),
|
|
.mod-right-split .workspace-tab-header.is-active:nth-child(3n + 2) {
|
|
border: 1px solid var(--alternating-color-2);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-icon,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-title,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:hover,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-2);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:active,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-2-hover-active);
|
|
}
|
|
.mod-left-split .workspace-tab-header.is-active:nth-child(3n + 3),
|
|
.mod-right-split .workspace-tab-header.is-active:nth-child(3n + 3) {
|
|
border: 1px solid var(--alternating-color-3);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-icon,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-title,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:hover,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-3);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-left-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:active,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-right-split
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-3-hover-active);
|
|
}
|
|
.mod-left-split .workspace-tab-header:not(.is-active),
|
|
.mod-right-split .workspace-tab-header:not(.is-active) {
|
|
color: var(--icon-color);
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
transition:
|
|
border,
|
|
border-color,
|
|
box-shadow,
|
|
transform var(--button-anim);
|
|
}
|
|
.mod-left-split .workspace-tab-header:not(.is-active):hover,
|
|
.mod-right-split .workspace-tab-header:not(.is-active):hover {
|
|
color: var(--icon-color-hover);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
background: var(--tab-bg);
|
|
transform: translateY(calc(-1 * var(--button-axis-offset)));
|
|
cursor: var(--cursor);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner,
|
|
.mod-right-split
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner {
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner-title,
|
|
.mod-right-split
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.mod-left-split .workspace-tab-header:not(.is-active):active,
|
|
.mod-right-split .workspace-tab-header:not(.is-active):active {
|
|
color: var(--icon-color-hover);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
background: var(--tab-bg);
|
|
transform: translateY(var(--button-axis-offset));
|
|
}
|
|
.mod-left-split
|
|
.workspace-tab-header:not(.is-active):active
|
|
.workspace-tab-header-inner-title,
|
|
.mod-right-split
|
|
.workspace-tab-header:not(.is-active):active
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
|
--tab-radius-active: var(--radius-m);
|
|
}
|
|
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
|
padding-bottom: 0px;
|
|
margin-inline-start: -2px;
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active::before,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active::after {
|
|
display: var(--tab-curves-display);
|
|
}
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
|
|
background: var(--tab-active-bg);
|
|
box-shadow: var(--tab-active-shadow);
|
|
transition:
|
|
border,
|
|
box-shadow,
|
|
transform var(--button-anim);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1) {
|
|
border: 1px solid var(--alternating-color-1);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-1);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-1-hover-active);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2) {
|
|
border: 1px solid var(--alternating-color-2);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-2);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-2-hover-active);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3) {
|
|
border: 1px solid var(--alternating-color-3);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-3);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-3-hover-active);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header:not(.is-active) {
|
|
color: var(--icon-color);
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
transition:
|
|
border,
|
|
border-color,
|
|
box-shadow,
|
|
transform var(--button-anim);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header:not(.is-active):hover {
|
|
color: var(--icon-color-hover);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
background: var(--tab-bg);
|
|
transform: translateY(calc(-1 * var(--button-axis-offset)));
|
|
cursor: var(--cursor);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner {
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header:not(.is-active):active {
|
|
color: var(--icon-color-hover);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
background: var(--tab-bg);
|
|
transform: translateY(var(--button-axis-offset));
|
|
}
|
|
.mod-root
|
|
.workspace-tabs:not(.mod-stacked)
|
|
.workspace-tab-header:not(.is-active):active
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-new-tab {
|
|
padding-bottom: 0;
|
|
}
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-tab-list {
|
|
padding-bottom: 0;
|
|
margin-inline-end: var(--size-4-3);
|
|
}
|
|
.mod-root .workspace-tabs.mod-stacked {
|
|
--tab-stacked-header-width: 40px;
|
|
}
|
|
.mod-root .workspace-tabs.mod-stacked .workspace-tab-container {
|
|
border-radius: var(--editor-border-radius);
|
|
border: var(--editor-border-width) solid var(--editor-border-color);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-container
|
|
.workspace-tab-header:first-child {
|
|
border-top-left-radius: var(--editor-border-radius);
|
|
border-bottom-left-radius: var(--editor-border-radius);
|
|
}
|
|
.mod-root .workspace-tabs.mod-stacked .workspace-leaf-content {
|
|
border: unset;
|
|
border-radius: unset;
|
|
margin-bottom: unset;
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header {
|
|
--tab-radius-active: var(--radius-m);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header.is-active {
|
|
background: var(--tab-active-bg);
|
|
transition:
|
|
border,
|
|
transform var(--button-anim);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header.is-active:nth-child(3n + 1) {
|
|
border-inline-start: 1px solid var(--alternating-color-1);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-1);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 1)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-1-hover-active);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header.is-active:nth-child(3n + 2) {
|
|
border-inline-start: 1px solid var(--alternating-color-3);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-3);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 2)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-3-hover-active);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header.is-active:nth-child(3n + 3) {
|
|
border-inline-start: 1px solid var(--alternating-color-2);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-icon {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-2);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header.is-active:nth-child(3n + 3)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--alternating-color-2-hover-active);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header:not(.is-active) {
|
|
color: var(--icon-color);
|
|
transition:
|
|
border,
|
|
border-color var(--anim-duration-fast) var(--anim-motion-swing);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header:not(.is-active):not(:first-child) {
|
|
border-inline-start: 1px solid var(--background-modifier-border);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header:not(.is-active):hover,
|
|
.workspace-tabs.mod-stacked .workspace-tab-header:not(.is-active):active {
|
|
color: var(--icon-color-hover);
|
|
cursor: var(--cursor);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header:not(.is-active):active
|
|
.workspace-tab-header-inner {
|
|
background: rgba(0, 0, 0, 0);
|
|
}
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner-title,
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-header:not(.is-active):active
|
|
.workspace-tab-header-inner-title {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header-new-tab {
|
|
padding-bottom: var(--size-2-2);
|
|
}
|
|
.workspace-tabs.mod-stacked .workspace-tab-header-tab-list {
|
|
padding-bottom: var(--size-2-2);
|
|
margin-inline-end: var(--size-4-3);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header
|
|
.workspace-tab-header-inner-close-button {
|
|
--icon-size: var(--icon-xs);
|
|
padding: 0;
|
|
border-radius: var(--close-button-radius);
|
|
margin-bottom: var(--button-axis-offset);
|
|
cursor: var(--cursor);
|
|
}
|
|
.is-mobile
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header
|
|
.workspace-tab-header-inner-close-button {
|
|
--icon-size: var(--icon-s);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header
|
|
.workspace-tab-header-status-icon {
|
|
--icon-size: var(--icon-xs);
|
|
padding: var(--size-2-1) 0;
|
|
margin-bottom: var(--button-axis-offset);
|
|
border-radius: var(--tab-status-radius);
|
|
cursor: var(--cursor);
|
|
}
|
|
.is-mobile
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header
|
|
.workspace-tab-header-status-icon {
|
|
--icon-size: var(--icon-s);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-inner-close-button,
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active):hover
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active)
|
|
.workspace-tab-header-inner-close-button,
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active)
|
|
.workspace-tab-header-status-icon {
|
|
color: var(--icon-color);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active)
|
|
.workspace-tab-header-inner-close-button:hover,
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active)
|
|
.workspace-tab-header-status-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--non-alternating-color);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active)
|
|
.workspace-tab-header-inner-close-button:active,
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header:not(.is-active)
|
|
.workspace-tab-header-status-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--non-alternating-color-hover-active);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header-new-tab
|
|
.clickable-icon {
|
|
color: var(--icon-color);
|
|
padding: 0px;
|
|
border-radius: var(--close-button-radius);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header-new-tab
|
|
.clickable-icon:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--non-alternating-color);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header-new-tab
|
|
.clickable-icon:active {
|
|
color: var(--text-on-accent);
|
|
background: var(--non-alternating-color-hover-active);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header-tab-list
|
|
.clickable-icon {
|
|
color: var(--icon-color);
|
|
padding: 0px;
|
|
border-radius: var(--radius-m);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header-tab-list
|
|
.clickable-icon:hover {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header-tab-list
|
|
.clickable-icon:active {
|
|
color: var(--icon-color-focused);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs
|
|
.workspace-tab-header-tab-list
|
|
.clickable-icon.has-active-menu {
|
|
color: var(--icon-color-active);
|
|
}
|
|
textarea,
|
|
input.metadata-input-text,
|
|
input[type="date"],
|
|
input[type="datetime-local"],
|
|
input[type="text"],
|
|
input[type="search"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="number"] {
|
|
color: var(--text-input-color);
|
|
}
|
|
textarea[disabled],
|
|
textarea[aria-disabled="true"],
|
|
textarea[disabled="true"],
|
|
input.metadata-input-text[disabled],
|
|
input.metadata-input-text[aria-disabled="true"],
|
|
input.metadata-input-text[disabled="true"],
|
|
input[type="date"][disabled],
|
|
input[type="date"][aria-disabled="true"],
|
|
input[type="date"][disabled="true"],
|
|
input[type="datetime-local"][disabled],
|
|
input[type="datetime-local"][aria-disabled="true"],
|
|
input[type="datetime-local"][disabled="true"],
|
|
input[type="text"][disabled],
|
|
input[type="text"][aria-disabled="true"],
|
|
input[type="text"][disabled="true"],
|
|
input[type="search"][disabled],
|
|
input[type="search"][aria-disabled="true"],
|
|
input[type="search"][disabled="true"],
|
|
input[type="email"][disabled],
|
|
input[type="email"][aria-disabled="true"],
|
|
input[type="email"][disabled="true"],
|
|
input[type="password"][disabled],
|
|
input[type="password"][aria-disabled="true"],
|
|
input[type="password"][disabled="true"],
|
|
input[type="number"][disabled],
|
|
input[type="number"][aria-disabled="true"],
|
|
input[type="number"][disabled="true"] {
|
|
opacity: var(--disabled-component-opacity);
|
|
cursor: not-allowed;
|
|
}
|
|
.is-mobile .modal textarea,
|
|
.is-mobile .modal input.metadata-input-text,
|
|
.is-mobile .modal input[type="date"],
|
|
.is-mobile .modal input[type="datetime-local"],
|
|
.is-mobile .modal input[type="text"],
|
|
.is-mobile .modal input[type="search"],
|
|
.is-mobile .modal input[type="email"],
|
|
.is-mobile .modal input[type="password"],
|
|
.is-mobile .modal input[type="number"] {
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
textarea:active,
|
|
input.metadata-input-text:active,
|
|
input[type="date"]:active,
|
|
input[type="datetime-local"]:active,
|
|
input[type="text"]:active:not(.prompt-input, .metadata-property-key-input),
|
|
input[type="search"]:active,
|
|
input[type="email"]:active,
|
|
input[type="password"]:active,
|
|
input[type="number"]:active,
|
|
textarea:focus,
|
|
input.metadata-input-text:focus,
|
|
input[type="date"]:focus,
|
|
input[type="datetime-local"]:focus,
|
|
input[type="text"]:focus:not(.prompt-input, .metadata-property-key-input),
|
|
input[type="search"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="number"]:focus,
|
|
textarea:focus-visible,
|
|
input.metadata-input-text:focus-visible,
|
|
input[type="date"]:focus-visible,
|
|
input[type="datetime-local"]:focus-visible,
|
|
input[type="text"]:focus-visible:not(
|
|
.prompt-input,
|
|
.metadata-property-key-input
|
|
),
|
|
input[type="search"]:focus-visible,
|
|
input[type="email"]:focus-visible,
|
|
input[type="password"]:focus-visible,
|
|
input[type="number"]:focus-visible {
|
|
color: var(--text-input-color-focused);
|
|
background: var(--text-input-bg-active);
|
|
border: 1px solid var(--text-input-border-color);
|
|
box-shadow: var(--text-input-shadow-active);
|
|
transition:
|
|
background,
|
|
box-shadow var(--anim-duration-superfast) var(--anim-motion-swing);
|
|
}
|
|
.nav-header .search-input-container {
|
|
margin: var(--size-4-2) 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.search-input-container input:not(.is-mobile .search-input-container input) {
|
|
padding-inline-start: 28px;
|
|
}
|
|
.search-input-clear-button {
|
|
cursor: var(--cursor);
|
|
}
|
|
.search-input-clear-button:hover {
|
|
color: var(--search-clear-button-color-hover);
|
|
}
|
|
.checkbox-container {
|
|
background: var(--toggle-bg);
|
|
box-shadow: var(--toggle-shadow);
|
|
}
|
|
.checkbox-container:hover {
|
|
box-shadow: var(--toggle-shadow-hover);
|
|
cursor: var(--cursor);
|
|
}
|
|
.checkbox-container:active::after {
|
|
width: calc(var(--toggle-thumb-width) + 4px);
|
|
}
|
|
.checkbox-container:focus,
|
|
.checkbox-container:focus-visible,
|
|
.checkbox-container:focus-within,
|
|
.checkbox-container.mod-small:focus-within {
|
|
outline: none;
|
|
box-shadow: var(--toggle-shadow-focus);
|
|
}
|
|
.checkbox-container.is-enabled {
|
|
background: var(--toggle-bg-enabled);
|
|
}
|
|
.checkbox-container:after {
|
|
box-shadow: var(--toggle-thumb-shadow);
|
|
}
|
|
.tooltip {
|
|
color: var(--notice-color);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--tooltip-shadow);
|
|
}
|
|
::selection {
|
|
color: var(--text-selection-theme-text-color);
|
|
background-color: var(--text-selection-theme-bg);
|
|
}
|
|
input[type="date"]::-webkit-datetime-edit-month-field:active,
|
|
input[type="datetime-local"]::-webkit-datetime-edit-month-field:active,
|
|
input[type="date"]::-webkit-datetime-edit-month-field:focus,
|
|
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
|
|
input[type="date"]::-webkit-datetime-edit-day-field:active,
|
|
input[type="datetime-local"]::-webkit-datetime-edit-day-field:active,
|
|
input[type="date"]::-webkit-datetime-edit-day-field:focus,
|
|
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
|
|
input[type="date"]::-webkit-datetime-edit-year-field:active,
|
|
input[type="datetime-local"]::-webkit-datetime-edit-year-field:active,
|
|
input[type="date"]::-webkit-datetime-edit-year-field:focus,
|
|
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus {
|
|
color: var(--text-selection-theme-text-color);
|
|
background-color: var(--text-selection-theme-bg);
|
|
}
|
|
.markdown-source-view.mod-cm6 ::selection {
|
|
color: var(--text-selection-theme-text-color);
|
|
background-color: var(--text-selection-theme-bg);
|
|
}
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-selection,
|
|
.markdown-source-view.mod-cm6 .cm-line .cm-inline-code .cm-selection {
|
|
color: var(--text-selection-theme-text-color);
|
|
background-color: var(--text-selection-theme-bg);
|
|
}
|
|
.markdown-source-view.mod-cm6 .cm-selectionBackground,
|
|
.markdown-source-view.mod-cm6
|
|
.cm-editor
|
|
> .cm-scroller
|
|
> .cm-selectionLayer
|
|
> .cm-selectionBackground {
|
|
color: var(--text-selection-theme-text-color);
|
|
background-color: var(--text-selection-theme-bg);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) input[type="checkbox"]:checked {
|
|
border-color: var(--checked-border-color);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) input[type="checkbox"]:checked:hover {
|
|
border-color: var(--checked-border-color-hover);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task=">"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="<"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="!"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="-"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="?"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="*"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="n"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="l"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="i"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="S"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task='"']:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="I"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="p"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="c"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="b"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="f"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="w"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="k"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="u"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="d"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="r"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="L"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="t"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="T"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="M"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="D"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="B"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="g"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="h"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="s"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="H"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="R"]:hover {
|
|
box-shadow: none;
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
.HyperMD-task-line
|
|
input:not(
|
|
[data-task="x"],
|
|
[data-task="X"],
|
|
[data-task="/"]
|
|
)[type="checkbox"]:checked {
|
|
cursor: default;
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task=">"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="<"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="!"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="-"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="?"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="*"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="n"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="l"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="i"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="S"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task='"']
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="I"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="p"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="c"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="b"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="f"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="w"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="k"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="u"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="d"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="r"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="L"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="t"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="T"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="M"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="D"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="B"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="g"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="h"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="s"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="H"]
|
|
input[type="checkbox"]:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="R"]
|
|
input[type="checkbox"]:checked:hover {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
box-shadow: none;
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task]:not([data-task="x"], [data-task="X"], [data-task="/"])
|
|
input[type="checkbox"]:checked:hover {
|
|
cursor: default;
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="/"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="/"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="/"]
|
|
> p
|
|
> input:checked {
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--inprogress-chbx-color) 50%,
|
|
var(--checklist-bg) 50%
|
|
);
|
|
background-repeat: no-repeat;
|
|
background-clip: padding-box;
|
|
border-color: var(--inprogress-chbx-border-color);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="/"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="/"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="/"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
-webkit-mask-image: none;
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="/"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="/"]
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="/"]
|
|
> p
|
|
> input:checked:hover {
|
|
background: linear-gradient(
|
|
to right,
|
|
var(--inprogress-chbx-color-hover) 50%,
|
|
var(--checklist-bg) 50%
|
|
);
|
|
border-color: var(--inprogress-chbx-border-color);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task=">"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task=">"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task=">"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task=">"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task=">"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task=">"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--resched-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-redo-2'%3E%3Cpath d='m15 14 5-5-5-5'/%3E%3Cpath d='M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="<"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="<"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="<"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="<"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="<"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="<"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--sched-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-calendar-clock'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M8 2v4'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="!"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="!"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="!"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="!"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="!"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="!"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--important-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 80%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="-"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="-"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="-"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="-"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="-"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="-"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--cancelled-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-x'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="?"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="?"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="?"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="?"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="?"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="?"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--question-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-help'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="*"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="*"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="*"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="*"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="*"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="*"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--star-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 70%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-star'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="n"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="n"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="n"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="n"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="n"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="n"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--note-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
transform: rotate(45deg);
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pin'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="l"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="l"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="l"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="l"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="l"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="l"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--location-chbox-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-map-pin'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="i"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="i"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="i"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="i"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="i"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="i"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--info-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-info'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="S"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="S"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="S"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="S"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="S"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="S"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--amount-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-dollar-sign'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task='"'],
|
|
body:not(.disable-alternative-checkboxes) li[data-task='"'] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task='"']
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task='"']:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task='"']
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task='"']
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--quote-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-quote'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="I"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="I"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="I"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="I"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="I"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="I"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--idea-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 110%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-lightbulb'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="p"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="p"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="p"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="p"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="p"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="p"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--pro-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-thumbs-up'%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3Cpath d='M7 10v12'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="c"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="c"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="c"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="c"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="c"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="c"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--con-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-thumbs-down'%3E%3Cpath d='M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z'/%3E%3Cpath d='M17 14V2'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="b"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="b"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="b"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="b"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="b"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="b"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--bookmark-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-bookmark'%3E%3Cpath d='M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="f"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="f"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="f"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="f"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="f"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="f"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--fire-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-flame'%3E%3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="w"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="w"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="w"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="w"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="w"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="w"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--win-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-trophy'%3E%3Cpath d='M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978'/%3E%3Cpath d='M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978'/%3E%3Cpath d='M18 9h1.5a1 1 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z'/%3E%3Cpath d='M6 9H4.5a1 1 0 0 1 0-5H6'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="k"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="k"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="k"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="k"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="k"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="k"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--key-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-key'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="u"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="u"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="u"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="u"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="u"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="u"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--up-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-trending-up'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="d"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="d"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="d"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="d"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="d"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="d"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--down-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-trending-down'%3E%3Cpath d='M16 17h6v-6'/%3E%3Cpath d='m22 17-8.5-8.5-5 5L2 7'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="r"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="r"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="r"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="r"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="r"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="r"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--law-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-scale'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='m19 8 3 8a5 5 0 0 1-6 0zV7'/%3E%3Cpath d='M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1'/%3E%3Cpath d='m5 8 3 8a5 5 0 0 1-6 0zV7'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="L"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="L"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="L"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="L"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="L"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="L"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--language-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 110%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-languages'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="t"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="t"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="t"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="t"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="t"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="t"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--clock-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-clock'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="T"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="T"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="T"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="T"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="T"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="T"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--telephone-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-phone'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="M"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="M"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="M"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="M"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="M"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="M"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--milestone-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-milestone'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M4 6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h13a2 2 0 0 0 1.524-.704l2.226-2.628a1 1 0 0 0 0-1.336l-2.226-2.628A2 2 0 0 0 17 6Z'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="D"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="D"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="D"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="D"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="D"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="D"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--deadline-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-hourglass'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="B"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="B"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="B"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="B"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="B"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="B"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--blocked-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-octagon-x'%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.414V8.586a2 2 0 0 1 .586-1.414l4.586-4.586A2 2 0 0 1 8.586 2h6.828a2 2 0 0 1 1.414.586l4.586 4.586A2 2 0 0 1 22 8.586v6.828a2 2 0 0 1-.586 1.414l-4.586 4.586a2 2 0 0 1-1.414.586H8.586a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="g"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="g"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="g"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="g"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="g"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="g"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--delegated-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-send'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="h"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="h"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="h"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="h"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="h"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="h"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--health-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-heart-pulse'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3Cpath d='M3.22 8.5h1.66a2 2 0 0 1 1.79 1.11l.85 1.7a2 2 0 0 0 3.69-.2l.49-1.47a1 1 0 0 1 1.74-.3l.91 1.16a2 2 0 0 0 1.57.76h2.05'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="s"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="s"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="s"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="s"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="s"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="s"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--shopping-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 90%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shopping-cart'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="H"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="H"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="H"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="H"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="H"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="H"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--home-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-house'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="R"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="R"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="R"]
|
|
> p
|
|
> input:checked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="R"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="R"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="R"]
|
|
> p
|
|
> input:checked:after {
|
|
background-color: var(--recurring-chbx-color);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-size: 100%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-repeat'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="0"],
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="1"],
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="2"],
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="3"],
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="4"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="0"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="1"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="2"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="3"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="4"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="0"] > p > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="1"] > p > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="2"] > p > input:checked,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="3"] > p > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="4"]
|
|
> p
|
|
> input:checked {
|
|
appearance: none;
|
|
background: var(--task-progress-track);
|
|
border: 1px solid var(--task-progress-track-border);
|
|
border-radius: 999px;
|
|
width: calc(var(--checkbox-size, 1em) * 2.4);
|
|
height: calc(var(--checkbox-size, 1em) * 0.5);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="0"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="1"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="2"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="3"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="4"]:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="0"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="1"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="2"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="3"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="4"]
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="0"]
|
|
> p
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="1"]
|
|
> p
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="2"]
|
|
> p
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="3"]
|
|
> p
|
|
> input:checked:after,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="4"]
|
|
> p
|
|
> input:checked:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background-color: var(--task-progress-fill);
|
|
-webkit-mask-image: none;
|
|
width: var(--task-progress, 0%);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="0"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="1"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="2"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="3"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="4"]:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="0"]
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="1"]
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="2"]
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="3"]
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="4"]
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="0"]
|
|
> p
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="1"]
|
|
> p
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="2"]
|
|
> p
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="3"]
|
|
> p
|
|
> input:checked:hover,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="4"]
|
|
> p
|
|
> input:checked:hover {
|
|
border-color: var(--task-progress-track-border);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="0"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="0"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="0"]
|
|
> p
|
|
> input:checked {
|
|
--task-progress: 0%;
|
|
--task-progress-fill: color-mix(
|
|
in srgb,
|
|
var(--interactive-accent) 55%,
|
|
white
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="1"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="1"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="1"]
|
|
> p
|
|
> input:checked {
|
|
--task-progress: 25%;
|
|
--task-progress-fill: color-mix(
|
|
in srgb,
|
|
var(--interactive-accent) 70%,
|
|
white
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="2"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="2"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="2"]
|
|
> p
|
|
> input:checked {
|
|
--task-progress: 50%;
|
|
--task-progress-fill: color-mix(
|
|
in srgb,
|
|
var(--interactive-accent) 85%,
|
|
white
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="3"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="3"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="3"]
|
|
> p
|
|
> input:checked {
|
|
--task-progress: 75%;
|
|
--task-progress-fill: color-mix(
|
|
in srgb,
|
|
var(--interactive-accent) 95%,
|
|
white
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
input[type="checkbox"]:checked[data-task="4"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="4"] > input:checked,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="4"]
|
|
> p
|
|
> input:checked {
|
|
--task-progress: 100%;
|
|
--task-progress-fill: var(--interactive-accent);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) li[data-task="5"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="6"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="7"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="8"],
|
|
body:not(.disable-alternative-checkboxes) li[data-task="9"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="5"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="6"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="7"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="8"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="9"] {
|
|
margin-inline-start: -15px;
|
|
padding: 0.15em 0.6em;
|
|
border-radius: 1em;
|
|
border: none;
|
|
max-width: fit-content;
|
|
font-weight: var(--pill-tag-weight);
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
}
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="5"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="6"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="7"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="8"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
li[data-task="9"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
.HyperMD-task-line[data-task="5"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
.HyperMD-task-line[data-task="6"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
.HyperMD-task-line[data-task="7"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
.HyperMD-task-line[data-task="8"]
|
|
.task-list-item-checkbox,
|
|
body:not(.disable-alternative-checkboxes)
|
|
.HyperMD-task-line[data-task="9"]
|
|
.task-list-item-checkbox {
|
|
display: none;
|
|
}
|
|
body:not(.disable-alternative-checkboxes) li[data-task="5"] p,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="6"] p,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="7"] p,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="8"] p,
|
|
body:not(.disable-alternative-checkboxes) li[data-task="9"] p,
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="5"] p,
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="6"] p,
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="7"] p,
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="8"] p,
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="9"] p {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
body:not(.disable-alternative-checkboxes) li[data-task="5"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="5"] {
|
|
color: var(--speech-bubble-5);
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--speech-bubble-5) var(--speech-bubble-opacity),
|
|
transparent
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) li[data-task="6"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="6"] {
|
|
color: var(--speech-bubble-6);
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--speech-bubble-6) var(--speech-bubble-opacity),
|
|
transparent
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) li[data-task="7"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="7"] {
|
|
color: var(--speech-bubble-7);
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--speech-bubble-7) var(--speech-bubble-opacity),
|
|
transparent
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) li[data-task="8"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="8"] {
|
|
color: var(--speech-bubble-8);
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--speech-bubble-8) var(--speech-bubble-opacity),
|
|
transparent
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) li[data-task="9"],
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="9"] {
|
|
color: var(--speech-bubble-9);
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--speech-bubble-9) var(--speech-bubble-opacity),
|
|
transparent
|
|
);
|
|
}
|
|
body:not(.disable-alternative-checkboxes) .HyperMD-task-line[data-task="-"],
|
|
body:not(.disable-alternative-checkboxes) li.task-list-item[data-task="-"] {
|
|
color: var(--cancelled-chbx-text-color);
|
|
text-decoration: var(--cancelled-chbx-text-decoration);
|
|
}
|
|
.markdown-source-view.mod-cm6 .cm-content > [contenteditable="false"] {
|
|
contain: unset !important;
|
|
}
|
|
.markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget):hover {
|
|
overflow: visible;
|
|
}
|
|
.callout {
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--callout-color) var(--callout-color-opacity),
|
|
var(--editor-bg-color)
|
|
);
|
|
padding: 0;
|
|
box-shadow: var(--callout-container-shadow);
|
|
}
|
|
.callout.is-collapsible.is-collapsed .callout-title {
|
|
border-radius: var(--callout-radius);
|
|
}
|
|
.callout-title {
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
box-shadow: var(--callout-title-shadow);
|
|
gap: var(--size-4-2);
|
|
}
|
|
.callout-title .callout-icon,
|
|
.callout-title .callout-fold {
|
|
filter: var(--callout-icon-fold-filter);
|
|
}
|
|
.callout-title .callout-icon svg,
|
|
.callout-title .callout-fold svg {
|
|
height: var(--font-text-size);
|
|
width: var(--font-text-size);
|
|
}
|
|
.callout-title-inner {
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.callout .callout-title {
|
|
margin-inline-end: auto;
|
|
}
|
|
.callout .callout-fold {
|
|
margin-inline-start: auto;
|
|
}
|
|
.callout-content {
|
|
box-shadow: var(--callout-content-shadow);
|
|
border-bottom-right-radius: var(--callout-radius);
|
|
border-bottom-left-radius: var(--callout-radius);
|
|
}
|
|
.callout .callout-content {
|
|
padding: var(--callout-content-padding);
|
|
}
|
|
body {
|
|
--callout-icon-general: shapes;
|
|
--callout-icon-note: notebook-pen;
|
|
--callout-icon-abstract: clipboard-list;
|
|
--callout-icon-summary: align-justify;
|
|
--callout-icon-tldr: book-open-text;
|
|
--callout-icon-info: badge-info;
|
|
--callout-icon-todo: list-todo;
|
|
--callout-icon-tip: clover;
|
|
--callout-icon-hint: lightbulb;
|
|
--callout-icon-important: square-asterisk;
|
|
--callout-icon-success: check-check;
|
|
--callout-icon-check: check-check;
|
|
--callout-icon-done: check-check;
|
|
--callout-icon-question: circle-help;
|
|
--callout-icon-help: life-buoy;
|
|
--callout-icon-faq: circle-help;
|
|
--callout-icon-warning: triangle-alert;
|
|
--callout-icon-caution: construction;
|
|
--callout-icon-attention: megaphone;
|
|
--callout-icon-fail: circle-slash;
|
|
--callout-icon-missing: search;
|
|
--callout-icon-danger: shield-alert;
|
|
--callout-icon-error: ban;
|
|
--callout-icon-bug: bug;
|
|
--callout-icon-example: scroll-text;
|
|
--callout-icon-quote: message-square-note;
|
|
--callout-icon-cite: book-marked;
|
|
--callout-general: rgb(182 196 182);
|
|
--callout-note: rgb(200 175 155);
|
|
--callout-summary: rgb(234 181 52);
|
|
--callout-abstract: rgb(34 152 225);
|
|
--callout-tldr: rgb(240 180 225);
|
|
--callout-info: rgb(71 162 187);
|
|
--callout-todo: rgb(58 173 252);
|
|
--callout-tip: rgb(70 206 185);
|
|
--callout-hint: rgb(70 206 185);
|
|
--callout-important: rgb(246 113 118);
|
|
--callout-success: rgb(87 200 83);
|
|
--callout-check: rgb(87 200 83);
|
|
--callout-done: rgb(87 200 83);
|
|
--callout-question: rgb(130 190 235);
|
|
--callout-help: rgb(250 128 96);
|
|
--callout-faq: rgb(130 190 235);
|
|
--callout-warning: rgb(255 161 32);
|
|
--callout-caution: rgb(255 161 32);
|
|
--callout-attention: rgb(255 161 32);
|
|
--callout-fail: rgb(226 72 86);
|
|
--callout-missing: rgb(226 72 86);
|
|
--callout-danger: rgb(226 72 86);
|
|
--callout-error: rgb(226 72 86);
|
|
--callout-bug: rgb(153 93 133);
|
|
--callout-example: rgb(216 141 130);
|
|
--callout-quote: rgb(173 214 171);
|
|
--callout-cite: rgb(237 217 162);
|
|
}
|
|
.callout {
|
|
--callout-icon: var(--callout-icon-general);
|
|
--callout-color: var(--callout-general);
|
|
}
|
|
.callout[data-callout="note"] {
|
|
--callout-icon: var(--callout-icon-note);
|
|
--callout-color: var(--callout-note);
|
|
}
|
|
.callout[data-callout="abstract"] {
|
|
--callout-icon: var(--callout-icon-abstract);
|
|
--callout-color: var(--callout-abstract);
|
|
}
|
|
.callout[data-callout="summary"] {
|
|
--callout-icon: var(--callout-icon-summary);
|
|
--callout-color: var(--callout-summary);
|
|
}
|
|
.callout[data-callout="tldr"],
|
|
.callout[data-callout="tl;dr"] {
|
|
--callout-icon: var(--callout-icon-tldr);
|
|
--callout-color: var(--callout-tldr);
|
|
}
|
|
.callout[data-callout="info"] {
|
|
--callout-icon: var(--callout-icon-info);
|
|
--callout-color: var(--callout-info);
|
|
}
|
|
.callout[data-callout="todo"] {
|
|
--callout-icon: var(--callout-icon-todo);
|
|
--callout-color: var(--callout-todo);
|
|
}
|
|
.callout[data-callout="tip"] {
|
|
--callout-icon: var(--callout-icon-tip);
|
|
--callout-color: var(--callout-tip);
|
|
}
|
|
.callout[data-callout="hint"] {
|
|
--callout-icon: var(--callout-icon-hint);
|
|
--callout-color: var(--callout-hint);
|
|
}
|
|
.callout[data-callout="important"] {
|
|
--callout-icon: var(--callout-icon-important);
|
|
--callout-color: var(--callout-important);
|
|
}
|
|
.callout[data-callout="success"] {
|
|
--callout-icon: var(--callout-icon-success);
|
|
--callout-color: var(--callout-success);
|
|
}
|
|
.callout[data-callout="check"] {
|
|
--callout-icon: var(--callout-icon-check);
|
|
--callout-color: var(--callout-check);
|
|
}
|
|
.callout[data-callout="done"] {
|
|
--callout-icon: var(--callout-icon-done);
|
|
--callout-color: var(--callout-done);
|
|
}
|
|
.callout[data-callout="question"] {
|
|
--callout-color: var(--callout-question);
|
|
}
|
|
.callout[data-callout="help"] {
|
|
--callout-icon: var(--callout-icon-help);
|
|
--callout-color: var(--callout-help);
|
|
}
|
|
.callout[data-callout="faq"] {
|
|
--callout-color: var(--callout-faq);
|
|
}
|
|
.callout[data-callout="warning"] {
|
|
--callout-color: var(--callout-warning);
|
|
}
|
|
.callout[data-callout="caution"] {
|
|
--callout-icon: var(--callout-icon-caution);
|
|
--callout-color: var(--callout-caution);
|
|
}
|
|
.callout[data-callout="attention"] {
|
|
--callout-icon: var(--callout-icon-attention);
|
|
--callout-color: var(--callout-attention);
|
|
}
|
|
.callout[data-callout="failure"],
|
|
.callout[data-callout="fail"] {
|
|
--callout-icon: var(--callout-icon-fail);
|
|
--callout-color: var(--callout-fail);
|
|
}
|
|
.callout[data-callout="missing"] {
|
|
--callout-icon: var(--callout-icon-missing);
|
|
--callout-color: var(--callout-missing);
|
|
}
|
|
.callout[data-callout="danger"] {
|
|
--callout-icon: var(--callout-icon-danger);
|
|
--callout-color: var(--callout-danger);
|
|
}
|
|
.callout[data-callout="error"] {
|
|
--callout-icon: var(--callout-icon-error);
|
|
--callout-color: var(--callout-error);
|
|
}
|
|
.callout[data-callout="bug"] {
|
|
--callout-icon: var(--callout-icon-bug);
|
|
--callout-color: var(--callout-bug);
|
|
}
|
|
.callout[data-callout="example"] {
|
|
--callout-icon: var(--callout-icon-example);
|
|
--callout-color: var(--callout-example);
|
|
}
|
|
.callout[data-callout="quote"] {
|
|
--callout-color: var(--callout-quote);
|
|
}
|
|
.callout[data-callout="cite"] {
|
|
--callout-icon: var(--callout-icon-cite);
|
|
--callout-color: var(--callout-cite);
|
|
}
|
|
.cm-html-embed.cm-embed-block pre code,
|
|
.cm-s-obsidian .cm-inline-code:not(.cm-formatting),
|
|
.cm-s-obsidian code:not(pre code),
|
|
.markdown-rendered code:not(pre code) {
|
|
color: var(--inline-code-color);
|
|
background: var(--inline-code-bg);
|
|
border-radius: var(--inline-code-radius);
|
|
}
|
|
.markdown-embed:not(.canvas-node-content) {
|
|
border-radius: var(--embed-border-radius);
|
|
}
|
|
.embed-title {
|
|
text-wrap: wrap;
|
|
font-size: var(--embed-title-font-size);
|
|
font-weight: var(--embed-title-font-weight);
|
|
letter-spacing: var(--embed-title-letter-spacing);
|
|
text-transform: var(--embed-title-text-transform);
|
|
color: var(--embed-title-color);
|
|
padding: 0 0 var(--size-2-2);
|
|
border-bottom: var(--embed-title-border);
|
|
margin-bottom: var(--embed-title-margin-bottom);
|
|
}
|
|
.embed-title:empty {
|
|
padding: 0;
|
|
border: none;
|
|
margin: 0;
|
|
}
|
|
img,
|
|
audio,
|
|
video {
|
|
border-radius: var(--embed-media-border-radius);
|
|
}
|
|
.popover.hover-popover .markdown-embed {
|
|
--embed-background: var(--background-primary);
|
|
}
|
|
.markdown-preview-view .math-block {
|
|
overflow: auto;
|
|
width: 100%;
|
|
}
|
|
body.embed-hide-title .embed-title {
|
|
display: none;
|
|
}
|
|
.view-header {
|
|
--header-height: 38px;
|
|
}
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 1):hover {
|
|
color: var(--alternating-color-1);
|
|
}
|
|
.view-header
|
|
.view-action.clickable-icon:nth-child(3n + 1).mod-filled:hover
|
|
svg {
|
|
fill: var(--alternating-color-1);
|
|
}
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 1):active,
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 1).has-active-menu {
|
|
color: var(--alternating-color-1-hover-active);
|
|
}
|
|
.view-header
|
|
.view-action.clickable-icon:nth-child(3n + 1).mod-filled:active
|
|
svg {
|
|
fill: var(--alternating-color-1-hover-active);
|
|
}
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 2):hover {
|
|
color: var(--alternating-color-2);
|
|
}
|
|
.view-header
|
|
.view-action.clickable-icon:nth-child(3n + 2).mod-filled:hover
|
|
svg {
|
|
fill: var(--alternating-color-2);
|
|
}
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 2):active,
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 2).has-active-menu {
|
|
color: var(--alternating-color-2-hover-active);
|
|
}
|
|
.view-header
|
|
.view-action.clickable-icon:nth-child(3n + 2).mod-filled:active
|
|
svg {
|
|
fill: var(--alternating-color-2-hover-active);
|
|
}
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 3):hover {
|
|
color: var(--alternating-color-3);
|
|
}
|
|
.view-header
|
|
.view-action.clickable-icon:nth-child(3n + 3).mod-filled:hover
|
|
svg {
|
|
fill: var(--alternating-color-3);
|
|
}
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 3):active,
|
|
.view-header .view-action.clickable-icon:nth-child(3n + 3).has-active-menu {
|
|
color: var(--alternating-color-3-hover-active);
|
|
}
|
|
.view-header
|
|
.view-action.clickable-icon:nth-child(3n + 3).mod-filled:hover
|
|
svg {
|
|
fill: var(--alternating-color-3-hover-active);
|
|
}
|
|
.workspace
|
|
.mod-root
|
|
.workspace-tabs.mod-stacked
|
|
.workspace-tab-container
|
|
.workspace-tab-header,
|
|
.is-focused .workspace-leaf.mod-active .view-header,
|
|
.view-header,
|
|
.workspace-split.mod-root .view-content {
|
|
background: var(--editor-bg-color);
|
|
}
|
|
.mod-fade:not(.mod-at-end):after {
|
|
--background-primary: var(--editor-bg-color);
|
|
}
|
|
.mod-root .workspace-tabs.mod-stacked .view-header {
|
|
border-bottom: none;
|
|
}
|
|
.mod-root
|
|
.workspace-tabs.mod-stacked
|
|
.view-header
|
|
.view-header-title-container {
|
|
opacity: 0;
|
|
transition: var(--anim-duration-fast) var(--anim-motion-delay);
|
|
}
|
|
.mod-root
|
|
.workspace-tabs.mod-stacked
|
|
.view-header
|
|
.view-header-title-container:hover {
|
|
opacity: 1;
|
|
transition: var(--anim-duration-fast) var(--anim-motion-delay);
|
|
}
|
|
.view-header-title-parent .view-header-breadcrumb {
|
|
color: var(--breadcrumb-color);
|
|
}
|
|
.view-header-title-parent .view-header-breadcrumb:hover {
|
|
color: var(--breadcrumb-color-hover);
|
|
background: var(--breadcrumb-bg-hover);
|
|
cursor: var(--cursor);
|
|
}
|
|
.view-header-title-parent .view-header-breadcrumb-separator {
|
|
color: var(--breadcrumb-separator-color);
|
|
}
|
|
.view-header-title.view-header-title.view-header-title.view-header-title {
|
|
color: var(--file-header-title-color);
|
|
}
|
|
.document-search {
|
|
align-items: center;
|
|
}
|
|
.workspace-leaf-content[data-type="empty"] .view-header {
|
|
border-color: rgba(0, 0, 0, 0);
|
|
}
|
|
.workspace-leaf-content[data-type="empty"] .view-header-nav-buttons,
|
|
.workspace-leaf-content[data-type="empty"] .view-header-title-container {
|
|
visibility: hidden;
|
|
}
|
|
.workspace-leaf-content {
|
|
container-type: inline-size;
|
|
}
|
|
.workspace-leaf-content .empty-state-title {
|
|
font-size: var(--font-ui-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-muted);
|
|
}
|
|
.workspace-leaf-content .empty-state-action {
|
|
color: var(--text-faint);
|
|
background: var(--empty-state-action-btn-bg);
|
|
font-size: var(--font-ui-small);
|
|
line-height: normal;
|
|
padding: var(--size-4-2) var(--size-4-4);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--new-tab-btn-radius);
|
|
margin: var(--size-4-3) var(--size-2-3);
|
|
transition: var(--anim-duration-superfast) var(--anim-motion-smooth);
|
|
}
|
|
.workspace-leaf-content .empty-state-action:hover {
|
|
color: var(--text-muted);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
.workspace-leaf-content .empty-state-action:active {
|
|
opacity: 0.5;
|
|
}
|
|
@container (width < 640px) {
|
|
.workspace-leaf-content .empty-state-container div:nth-child(2) {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-faint);
|
|
}
|
|
}
|
|
@container (width > 640px) {
|
|
.workspace-leaf-content .empty-state {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
.workspace-leaf-content .empty-state-container {
|
|
max-width: 100%;
|
|
}
|
|
.workspace-leaf-content .empty-state-action-list {
|
|
margin-top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.workspace-leaf-content .empty-state-action:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
.workspace-leaf-content .empty-state-action:active {
|
|
transform: translateY(2px);
|
|
}
|
|
}
|
|
.mod-root .empty-state-title {
|
|
display: none;
|
|
}
|
|
.empty-state-title body.is-mobile {
|
|
display: none;
|
|
}
|
|
body.is-mobile .empty-state-action {
|
|
color: var(--text-faint);
|
|
background: var(--empty-state-action-btn-bg);
|
|
padding: var(--size-4-3) var(--size-4-4);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--new-tab-btn-radius);
|
|
}
|
|
body.is-mobile .empty-state-action:hover {
|
|
transform: unset;
|
|
}
|
|
body.is-mobile .empty-state-action:active {
|
|
opacity: var(--button-opacity-active);
|
|
transform: unset;
|
|
}
|
|
h1,
|
|
.HyperMD-header-1.cm-line,
|
|
.markdown-rendered h1 {
|
|
text-align: var(--h1-text-align);
|
|
letter-spacing: var(--h1-letter-spacing);
|
|
text-transform: var(--h1-text-transform);
|
|
background: var(--h1-bg-color);
|
|
border-width: var(--h1-border-width);
|
|
border-style: var(--h1-border-style);
|
|
border-top-color: var(--h1-border-top-color);
|
|
border-right-color: var(--h1-border-right-color);
|
|
border-bottom-color: var(--h1-border-bottom-color);
|
|
border-left-color: var(--h1-border-left-color);
|
|
border-radius: var(--h1-border-radius);
|
|
}
|
|
h2,
|
|
.HyperMD-header-2.cm-line,
|
|
.markdown-rendered h2 {
|
|
text-align: var(--h2-text-align);
|
|
letter-spacing: var(--h2-letter-spacing);
|
|
text-transform: var(--h2-text-transform);
|
|
background: var(--h2-bg-color);
|
|
border-width: var(--h2-border-width);
|
|
border-style: var(--h2-border-style);
|
|
border-top-color: var(--h2-border-top-color);
|
|
border-right-color: var(--h2-border-right-color);
|
|
border-bottom-color: var(--h2-border-bottom-color);
|
|
border-left-color: var(--h2-border-left-color);
|
|
border-radius: var(--h2-border-radius);
|
|
}
|
|
h3,
|
|
.HyperMD-header-3.cm-line,
|
|
.markdown-rendered h3 {
|
|
text-align: var(--h3-text-align);
|
|
letter-spacing: var(--h3-letter-spacing);
|
|
text-transform: var(--h3-text-transform);
|
|
background: var(--h3-bg-color);
|
|
border-width: var(--h3-border-width);
|
|
border-style: var(--h3-border-style);
|
|
border-top-color: var(--h3-border-top-color);
|
|
border-right-color: var(--h3-border-right-color);
|
|
border-bottom-color: var(--h3-border-bottom-color);
|
|
border-left-color: var(--h3-border-left-color);
|
|
border-radius: var(--h3-border-radius);
|
|
}
|
|
h4,
|
|
.HyperMD-header-4.cm-line,
|
|
.markdown-rendered h4 {
|
|
text-align: var(--h4-text-align);
|
|
letter-spacing: var(--h4-letter-spacing);
|
|
text-transform: var(--h4-text-transform);
|
|
background: var(--h4-bg-color);
|
|
border-width: var(--h4-border-width);
|
|
border-style: var(--h4-border-style);
|
|
border-top-color: var(--h4-border-top-color);
|
|
border-right-color: var(--h4-border-right-color);
|
|
border-bottom-color: var(--h4-border-bottom-color);
|
|
border-left-color: var(--h4-border-left-color);
|
|
border-radius: var(--h4-border-radius);
|
|
}
|
|
h5,
|
|
.HyperMD-header-5.cm-line,
|
|
.markdown-rendered h5 {
|
|
text-align: var(--h5-text-align);
|
|
letter-spacing: var(--h5-letter-spacing);
|
|
text-transform: var(--h5-text-transform);
|
|
background: var(--h5-bg-color);
|
|
border-width: var(--h5-border-width);
|
|
border-style: var(--h5-border-style);
|
|
border-top-color: var(--h5-border-top-color);
|
|
border-right-color: var(--h5-border-right-color);
|
|
border-bottom-color: var(--h5-border-bottom-color);
|
|
border-left-color: var(--h5-border-left-color);
|
|
border-radius: var(--h5-border-radius);
|
|
}
|
|
h6,
|
|
.HyperMD-header-6.cm-line,
|
|
.markdown-rendered h6 {
|
|
text-align: var(--h6-text-align);
|
|
letter-spacing: var(--h6-letter-spacing);
|
|
text-transform: var(--h6-text-transform);
|
|
background: var(--h6-bg-color);
|
|
border-width: var(--h6-border-width);
|
|
border-style: var(--h6-border-style);
|
|
border-top-color: var(--h6-border-top-color);
|
|
border-right-color: var(--h6-border-right-color);
|
|
border-bottom-color: var(--h6-border-bottom-color);
|
|
border-left-color: var(--h6-border-left-color);
|
|
border-radius: var(--h6-border-radius);
|
|
}
|
|
.cm-s-obsidian span.cm-hmd-internal-link:hover,
|
|
.cm-s-obsidian span.cm-link:hover {
|
|
text-decoration-line: unset;
|
|
color: unset;
|
|
}
|
|
a {
|
|
color: var(--link-ahref-color);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-ahref-decoration-color);
|
|
}
|
|
a:hover {
|
|
color: var(--link-ahref-color-hover);
|
|
text-decoration-color: var(--link-ahref-decoration-color-hover);
|
|
}
|
|
a:active {
|
|
opacity: var(--link-opacity-active);
|
|
}
|
|
.markdown-rendered .internal-link,
|
|
.metadata-container .internal-link,
|
|
.internal-link {
|
|
color: var(--link-color);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-decoration-color);
|
|
}
|
|
.markdown-rendered .internal-link:hover,
|
|
.metadata-container .internal-link:hover,
|
|
.internal-link:hover {
|
|
color: var(--link-color-hover);
|
|
text-decoration-color: var(--link-decoration-color-hover);
|
|
}
|
|
.markdown-rendered .internal-link:active,
|
|
.metadata-container .internal-link:active,
|
|
.internal-link:active {
|
|
opacity: var(--link-opacity-active);
|
|
}
|
|
.markdown-rendered .internal-link.is-unresolved,
|
|
.metadata-container .internal-link.is-unresolved,
|
|
.internal-link.is-unresolved {
|
|
color: var(--link-unresolved-color);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-unresolved-decoration-color);
|
|
}
|
|
.markdown-rendered .internal-link.is-unresolved:hover,
|
|
.metadata-container .internal-link.is-unresolved:hover,
|
|
.internal-link.is-unresolved:hover {
|
|
color: var(--link-unresolved-color-hover);
|
|
text-decoration-color: var(--link-unresolved-decoration-color-hover);
|
|
}
|
|
.markdown-rendered .internal-link.is-unresolved:active,
|
|
.metadata-container .internal-link.is-unresolved:active,
|
|
.internal-link.is-unresolved:active {
|
|
opacity: var(--link-opacity-active);
|
|
}
|
|
.cm-hmd-internal-link .is-unresolved .cm-underline {
|
|
color: var(--link-unresolved-color);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-unresolved-decoration-color);
|
|
}
|
|
.cm-hmd-internal-link .is-unresolved .cm-underline:hover {
|
|
color: var(--link-unresolved-color-hover);
|
|
text-decoration-color: var(--link-unresolved-decoration-color-hover);
|
|
}
|
|
.cm-hmd-internal-link .is-unresolved .cm-underline:active {
|
|
text-underline-offset: var(--link-underline-offset);
|
|
opacity: var(--link-opacity-active);
|
|
}
|
|
.cm-hmd-internal-link .cm-underline {
|
|
color: var(--link-color);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-decoration-color);
|
|
}
|
|
.cm-hmd-internal-link .cm-underline:hover {
|
|
color: var(--link-color-hover);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-decoration-color-hover);
|
|
}
|
|
.cm-hmd-internal-link .cm-underline:active {
|
|
text-underline-offset: var(--link-underline-offset);
|
|
opacity: var(--link-opacity-active);
|
|
}
|
|
.external-link,
|
|
.cm-link .cm-underline,
|
|
.cm-url,
|
|
.cm-underline {
|
|
color: var(--link-external-color);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-external-decoration-color);
|
|
}
|
|
.external-link:hover,
|
|
.cm-link .cm-underline:hover,
|
|
.cm-url:hover,
|
|
.cm-underline:hover {
|
|
color: var(--link-external-color-hover);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--link-external-decoration-color-hover);
|
|
}
|
|
.external-link:active,
|
|
.cm-link .cm-underline:active,
|
|
.cm-url:active,
|
|
.cm-underline:active {
|
|
text-underline-offset: var(--link-underline-offset);
|
|
opacity: var(--link-opacity-active);
|
|
}
|
|
.external-link {
|
|
background-image:
|
|
linear-gradient(transparent, transparent),
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(136, 136, 136)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
|
|
background-size: calc(var(--font-text-size) + 0.2em), 1em;
|
|
background-position-x: right;
|
|
background-position-y: center;
|
|
}
|
|
.markdown-rendered .list-bullet {
|
|
margin-inline-start: var(--list-bullet-indent-reading);
|
|
}
|
|
body u {
|
|
color: var(--underline-color);
|
|
text-underline-offset: var(--link-underline-offset);
|
|
text-decoration-color: var(--underline-decoration-color);
|
|
}
|
|
body .cm-strikethrough,
|
|
body p del {
|
|
color: var(--strikethrough-color);
|
|
}
|
|
body .cm-s-obsidian span.cm-inline-code,
|
|
body code {
|
|
color: var(--inline-code-color);
|
|
background: var(--inline-code-bg);
|
|
}
|
|
body .cm-strong.cm-em,
|
|
body .cm-strong .cm-em,
|
|
body .cm-em .cm-strong,
|
|
body strong em,
|
|
body em strong {
|
|
color: var(--bold-italic-color);
|
|
font-weight: var(--bold-italic-weight);
|
|
}
|
|
body .cm-highlight,
|
|
body .markdown-rendered mark {
|
|
color: var(--normal-highlight-color);
|
|
background-color: var(--normal-highlight-bg);
|
|
}
|
|
body .cm-highlight.cm-strong,
|
|
body .markdown-rendered strong mark {
|
|
color: var(--bold-highlight-color);
|
|
background-color: var(--bold-highlight-bg);
|
|
}
|
|
body .cm-highlight.cm-em,
|
|
body .markdown-rendered em mark {
|
|
color: var(--italic-highlight-color);
|
|
background-color: var(--italic-highlight-bg);
|
|
}
|
|
body .cm-highlight.cm-em.cm-strong,
|
|
body .markdown-rendered em > mark > strong,
|
|
body .markdown-rendered strong > mark > em,
|
|
body .markdown-rendered strong > em > mark {
|
|
color: var(--bold-italic-highlight-color);
|
|
background-color: var(--bold-italic-highlight-bg);
|
|
}
|
|
body span.cm-quote.cm-strong {
|
|
color: var(--bold-color);
|
|
}
|
|
body span.cm-quote.cm-em {
|
|
color: var(--italic-color);
|
|
}
|
|
body span.cm-quote.cm-strikethrough {
|
|
color: var(--strikethrough-color);
|
|
}
|
|
body span.cm-quote.cm-inline-code {
|
|
color: var(--inline-code-color);
|
|
background: var(--inline-code-bg);
|
|
}
|
|
body span.cm-quote.cm-strong.cm-em {
|
|
color: var(--bold-italic-color);
|
|
}
|
|
body span.cm-quote.cm-strong.cm-em.cm-strikethrough {
|
|
color: var(--bold-italic-strikethrough-color);
|
|
}
|
|
@container (width > 48rem) {
|
|
.is-readable-line-width .cm-contentContainer .cm-gutters {
|
|
position: absolute;
|
|
margin-inline-start: 0.75rem;
|
|
}
|
|
}
|
|
.cm-gutterElement {
|
|
font-size: var(--font-ui-smallest);
|
|
color: var(--gutter-color);
|
|
}
|
|
.cm-gutterElement.cm-active {
|
|
color: var(--gutter-color-active);
|
|
}
|
|
.metadata-property:not([data-property-key="tags"]) {
|
|
--pill-border-width: 1px;
|
|
--pill-padding-x: 0.5em;
|
|
--pill-padding-y: 0.15em;
|
|
--pill-radius: 0.35em;
|
|
}
|
|
.metadata-property[data-property-key="tags"] {
|
|
--pill-padding-x: 0.6em;
|
|
--pill-padding-y: 0.15em;
|
|
--pill-radius: 1em;
|
|
}
|
|
body .metadata-property-icon svg {
|
|
--icon-size: calc(var(--icon-s) - 2px);
|
|
}
|
|
.metadata-container {
|
|
padding: var(--metadata-container-padding);
|
|
}
|
|
.metadata-properties-heading {
|
|
line-height: unset;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.metadata-properties-heading .metadata-properties-title {
|
|
color: var(--metadata-properties-title-color-collapsed);
|
|
font-weight: var(--font-semibold);
|
|
font-size: calc(var(--font-smallest) - 0.1em);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding-inline-start: var(--size-4-2);
|
|
transition: color var(--anim-duration-superfast) var(--anim-motion-smooth);
|
|
}
|
|
.metadata-properties-heading .collapse-indicator {
|
|
position: unset;
|
|
order: 2;
|
|
opacity: 1;
|
|
inset-inline-start: unset;
|
|
}
|
|
.metadata-properties-heading .collapse-indicator::before {
|
|
display: none;
|
|
}
|
|
.metadata-properties-heading:hover {
|
|
cursor: var(--cursor);
|
|
}
|
|
.metadata-properties-heading:hover .metadata-properties-title,
|
|
.metadata-properties-heading:hover .collapse-indicator.collapse-indicator svg {
|
|
color: var(--metadata-properties-title-color-hover);
|
|
}
|
|
.metadata-properties-heading:not(.is-collapsed) {
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
.metadata-properties-heading:not(.is-collapsed) .metadata-properties-title {
|
|
color: var(--metadata-properties-title-color);
|
|
}
|
|
.metadata-properties-heading:not(.is-collapsed):hover
|
|
.metadata-properties-title,
|
|
.metadata-properties-heading:not(.is-collapsed):hover .collapse-indicator svg {
|
|
color: var(--metadata-properties-title-color-hover);
|
|
}
|
|
.metadata-content {
|
|
font-size: var(--font-small);
|
|
}
|
|
.metadata-property-icon {
|
|
padding-inline-start: var(--size-2-3);
|
|
}
|
|
.metadata-property-value {
|
|
padding-inline-end: var(--size-2-3);
|
|
}
|
|
.metadata-property-key-input:is(
|
|
input[type="text"],
|
|
input[type="date"],
|
|
input[type="datetime-local"],
|
|
input[type="number"],
|
|
.multi-select-container
|
|
) {
|
|
color: var(--metadata-key-input-color);
|
|
}
|
|
.metadata-property-key-input:is(
|
|
input[type="text"],
|
|
input[type="date"],
|
|
input[type="datetime-local"],
|
|
input[type="number"],
|
|
.multi-select-container
|
|
):focus-within {
|
|
color: var(--metadata-key-input-color-active);
|
|
}
|
|
.multi-select-pill-remove-button {
|
|
color: var(--pill-color-remove);
|
|
margin-inline-end: calc(var(--pill-padding-x) / 2);
|
|
border-radius: 1em;
|
|
}
|
|
.multi-select-pill:hover .multi-select-pill-remove-button {
|
|
color: var(--pill-color-remove-hover);
|
|
}
|
|
.multi-select-pill:hover .multi-select-pill-remove-button:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--background-modifier-error-hover);
|
|
opacity: 1;
|
|
}
|
|
.multi-select-pill:hover .multi-select-pill-remove-button:active {
|
|
opacity: var(--button-opacity-active);
|
|
}
|
|
.metadata-property[data-property-key="tags"] .multi-select-pill {
|
|
--pill-weight: var(--pill-tag-weight);
|
|
--metadata-divider-width: 0px;
|
|
border: none;
|
|
}
|
|
.metadata-property[data-property-key="tags"] .multi-select-pill:hover {
|
|
box-shadow: var(--pill-tag-shadow-hover);
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 1) {
|
|
color: var(--pill-tag-color-1);
|
|
background: var(--pill-tag-bg-1);
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 1)
|
|
.multi-select-pill-remove-button {
|
|
color: var(--pill-tag-color-1);
|
|
opacity: 0.5;
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 1)
|
|
.multi-select-pill-remove-button:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--pill-tag-color-1);
|
|
opacity: 1;
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 1)
|
|
.multi-select-pill-remove-button:active {
|
|
opacity: var(--button-opacity-active);
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 2) {
|
|
color: var(--pill-tag-color-2);
|
|
background: var(--pill-tag-bg-2);
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 2)
|
|
.multi-select-pill-remove-button {
|
|
color: var(--pill-tag-color-2);
|
|
opacity: 0.5;
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 2)
|
|
.multi-select-pill-remove-button:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--pill-tag-color-2);
|
|
opacity: 1;
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 2)
|
|
.multi-select-pill-remove-button:active {
|
|
opacity: var(--button-opacity-active);
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 3) {
|
|
color: var(--pill-tag-color-3);
|
|
background: var(--pill-tag-bg-3);
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 3)
|
|
.multi-select-pill-remove-button {
|
|
color: var(--pill-tag-color-3);
|
|
opacity: 0.5;
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 3)
|
|
.multi-select-pill-remove-button:hover {
|
|
color: var(--text-on-accent);
|
|
background: var(--pill-tag-color-3);
|
|
opacity: 1;
|
|
}
|
|
.metadata-property[data-property-key="tags"]
|
|
.multi-select-pill:nth-child(3n + 3)
|
|
.multi-select-pill-remove-button:active {
|
|
opacity: var(--button-opacity-active);
|
|
}
|
|
@container (width < 250px) {
|
|
div.metadata-container .metadata-property .metadata-property-value {
|
|
padding-inline-start: calc(var(--icon-size) + var(--size-4-2) + 2px);
|
|
}
|
|
div.metadata-container .metadata-property:last-of-type {
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
div.metadata-container
|
|
.metadata-property:last-of-type
|
|
.metadata-property-value {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
.workspace-leaf-content[data-type="file-properties"] .view-content {
|
|
padding-top: var(--size-4-2);
|
|
}
|
|
.workspace-leaf-content[data-type="file-properties"] .metadata-container {
|
|
--metadata-border-width: 0px;
|
|
--metadata-background: var(--metadata-tab-background);
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
border-radius: 0;
|
|
}
|
|
.cm-hmd-frontmatter.cm-hmd-frontmatter {
|
|
color: var(--yaml-base-color);
|
|
}
|
|
.cm-hmd-frontmatter.cm-hmd-frontmatter.cm-def,
|
|
.cm-hmd-frontmatter.cm-hmd-frontmatter.cm-meta {
|
|
color: var(--yaml-def-meta-color);
|
|
}
|
|
.cm-hmd-frontmatter.cm-hmd-frontmatter.cm-atom {
|
|
color: var(--yaml-atom-color);
|
|
}
|
|
.cm-hmd-frontmatter.cm-hmd-frontmatter.cm-keyword {
|
|
color: var(--yaml-keyword-color);
|
|
}
|
|
.cm-hmd-frontmatter.cm-hmd-frontmatter.cm-number {
|
|
color: var(--yaml-number-color);
|
|
}
|
|
.cm-hmd-frontmatter.cm-hmd-frontmatter.cm-string {
|
|
color: var(--yaml-string-color);
|
|
}
|
|
body .markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper,
|
|
body
|
|
:is(.markdown-rendered, .markdown-source-view.mod-cm6.is-live-preview)
|
|
table {
|
|
width: 100%;
|
|
}
|
|
.cm-html-embed tbody tr > td:nth-child(2n + 2),
|
|
.markdown-rendered tbody tr > td:nth-child(2n + 2) {
|
|
background: unset;
|
|
}
|
|
.cm-hashtag,
|
|
a.tag {
|
|
font-weight: var(--pill-tag-weight);
|
|
box-shadow: var(--tag-shadow);
|
|
transition: var(--anim-duration-superfast) var(--anim-motion-smooth);
|
|
}
|
|
.cm-hashtag:hover,
|
|
a.tag:hover {
|
|
color: var(--tag-color-hover);
|
|
}
|
|
a.tag:hover {
|
|
box-shadow: var(--tag-shadow-hover);
|
|
}
|
|
a.tag:active {
|
|
box-shadow: var(--tag-shadow-active);
|
|
}
|
|
[data-type="bookmarks"] .tree-item .tree-item-self.mod-collapsible {
|
|
color: var(--nav-folder-color);
|
|
background: var(--nav-folder-bg-color);
|
|
}
|
|
[data-type="bookmarks"] .tree-item .tree-item-self.mod-collapsible:hover {
|
|
color: var(--nav-folder-color);
|
|
background: var(--nav-folder-bg-color-hover);
|
|
}
|
|
[data-type="bookmarks"] .mod-collapsible .tree-item-icon svg.svg-icon {
|
|
color: var(--nav-folder-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 2) {
|
|
--nav-folder-collapse-color: var(--nav-folder-1-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 3) {
|
|
--nav-folder-collapse-color: var(--nav-folder-2-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 4) {
|
|
--nav-folder-collapse-color: var(--nav-folder-3-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 5) {
|
|
--nav-folder-collapse-color: var(--nav-folder-4-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 6) {
|
|
--nav-folder-collapse-color: var(--nav-folder-5-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 7) {
|
|
--nav-folder-collapse-color: var(--nav-folder-6-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 8) {
|
|
--nav-folder-collapse-color: var(--nav-folder-7-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 9) {
|
|
--nav-folder-collapse-color: var(--nav-folder-8-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 10) {
|
|
--nav-folder-collapse-color: var(--nav-folder-9-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 11) {
|
|
--nav-folder-collapse-color: var(--nav-folder-10-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 12) {
|
|
--nav-folder-collapse-color: var(--nav-folder-11-collapse-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 13) {
|
|
--nav-folder-collapse-color: var(--nav-folder-12-collapse-color);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 2),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 2) {
|
|
--nav-folder-bg-color: var(--nav-folder-1-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-1-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 3),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 3) {
|
|
--nav-folder-bg-color: var(--nav-folder-2-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-2-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 4),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 4) {
|
|
--nav-folder-bg-color: var(--nav-folder-3-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-3-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 5),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 5) {
|
|
--nav-folder-bg-color: var(--nav-folder-4-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-4-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 6),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 6) {
|
|
--nav-folder-bg-color: var(--nav-folder-5-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-5-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 7),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 7) {
|
|
--nav-folder-bg-color: var(--nav-folder-6-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-6-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 8),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 8) {
|
|
--nav-folder-bg-color: var(--nav-folder-7-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-7-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 9),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 9) {
|
|
--nav-folder-bg-color: var(--nav-folder-8-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-8-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 10),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 10) {
|
|
--nav-folder-bg-color: var(--nav-folder-9-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-9-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 11),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 11) {
|
|
--nav-folder-bg-color: var(--nav-folder-10-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-10-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 12),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 12) {
|
|
--nav-folder-bg-color: var(--nav-folder-11-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-11-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
[data-type="bookmarks"]
|
|
.tree-item:nth-child(12n + 13),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 13) {
|
|
--nav-folder-bg-color: var(--nav-folder-12-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-12-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 2),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 2) {
|
|
--nav-folder-color: var(--nav-folder-1-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-1-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 3),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 3) {
|
|
--nav-folder-color: var(--nav-folder-2-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-2-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 4),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 4) {
|
|
--nav-folder-color: var(--nav-folder-3-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-3-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 5),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 5) {
|
|
--nav-folder-color: var(--nav-folder-4-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-4-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 6),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 6) {
|
|
--nav-folder-color: var(--nav-folder-5-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-5-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 7),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 7) {
|
|
--nav-folder-color: var(--nav-folder-6-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-6-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 8),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 8) {
|
|
--nav-folder-color: var(--nav-folder-7-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-7-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 9),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 9) {
|
|
--nav-folder-color: var(--nav-folder-8-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-8-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 10),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 10) {
|
|
--nav-folder-color: var(--nav-folder-9-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-9-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 11),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 11) {
|
|
--nav-folder-color: var(--nav-folder-10-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-10-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 12),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 12) {
|
|
--nav-folder-color: var(--nav-folder-11-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-11-bg-color-hover);
|
|
}
|
|
body.folder-color_text [data-type="bookmarks"] .tree-item:nth-child(12n + 13),
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 13) {
|
|
--nav-folder-color: var(--nav-folder-12-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-12-bg-color-hover);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 2) {
|
|
--nav-indentation-guide-color: var(--nav-folder-1-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 3) {
|
|
--nav-indentation-guide-color: var(--nav-folder-2-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 4) {
|
|
--nav-indentation-guide-color: var(--nav-folder-3-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 5) {
|
|
--nav-indentation-guide-color: var(--nav-folder-4-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 6) {
|
|
--nav-indentation-guide-color: var(--nav-folder-5-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 7) {
|
|
--nav-indentation-guide-color: var(--nav-folder-6-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 8) {
|
|
--nav-indentation-guide-color: var(--nav-folder-7-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 9) {
|
|
--nav-indentation-guide-color: var(--nav-folder-8-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 10) {
|
|
--nav-indentation-guide-color: var(--nav-folder-9-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 11) {
|
|
--nav-indentation-guide-color: var(--nav-folder-10-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 12) {
|
|
--nav-indentation-guide-color: var(--nav-folder-11-indent-color);
|
|
}
|
|
body.folder-color_full [data-type="bookmarks"] .tree-item:nth-child(12n + 13) {
|
|
--nav-indentation-guide-color: var(--nav-folder-12-indent-color);
|
|
}
|
|
body.folder-color_full
|
|
.workspace-leaf-content[data-type="bookmarks"]
|
|
.tree-item
|
|
.tree-item {
|
|
--nav-folder-color: inherit;
|
|
--nav-folder-bg-color: inherit;
|
|
--nav-folder-bg-color-hover: inherit;
|
|
--nav-folder-collapse-color: inherit;
|
|
--nav-indentation-guide-color: inherit;
|
|
}
|
|
body.alt-folder-icons
|
|
.is-mobile
|
|
[data-type="bookmarks"]
|
|
.tree-item-icon
|
|
svg.right-triangle {
|
|
width: var(--mobile-folder-icon-size);
|
|
height: var(--mobile-folder-icon-size);
|
|
}
|
|
body.alt-folder-icons
|
|
[data-type="bookmarks"]
|
|
.tree-item-icon
|
|
svg.right-triangle {
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
stroke-width: var(--icon-stroke);
|
|
background: currentColor;
|
|
}
|
|
body.alt-folder-icons
|
|
[data-type="bookmarks"]
|
|
.tree-item-icon.is-collapsed
|
|
svg.right-triangle {
|
|
transform: unset;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
|
|
}
|
|
body.alt-folder-icons
|
|
[data-type="bookmarks"]
|
|
.tree-item-icon:not(.is-collapsed)
|
|
svg.right-triangle {
|
|
transform: unset;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder-open'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
|
|
}
|
|
body {
|
|
--bases-view-padding: var(--size-4-4);
|
|
--bases-header-border-width: 0 0 1px 0;
|
|
--bases-embed-border-color: var(--background-modifier-border);
|
|
--bases-embed-border-radius: var(--radius-m);
|
|
--bases-embed-border-width: 1px;
|
|
--bases-embed-padding: var(--size-4-2);
|
|
--bases-table-container-border-radius: var(--radius-m);
|
|
--bases-table-container-border-width: 1px;
|
|
--bases-table-cell-radius-active: var(--radius-s);
|
|
--bases-table-cell-radius-focus: var(--radius-s);
|
|
--bases-cards-radius: var(--radius-m);
|
|
--bases-cards-border-width: 1px;
|
|
}
|
|
.canvas-menu {
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--canvas-menu-shadow);
|
|
}
|
|
.canvas-card-menu.canvas-card-menu {
|
|
background: var(--canvas-menu-bg);
|
|
border: var(--canvas-menu-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--canvas-menu-shadow);
|
|
}
|
|
.canvas-card-menu.canvas-card-menu .canvas-card-menu-button {
|
|
--icon-stroke: 2px;
|
|
color: var(--canvas-icon-color);
|
|
}
|
|
.canvas-card-menu.canvas-card-menu .canvas-card-menu-button:hover {
|
|
color: var(--canvas-icon-color-hover);
|
|
}
|
|
.canvas-card-menu.canvas-card-menu .canvas-card-menu-button:hover svg {
|
|
transform: translateY(-3px);
|
|
}
|
|
.canvas-card-menu.canvas-card-menu .canvas-card-menu-button svg {
|
|
fill: none;
|
|
}
|
|
.canvas-control-group {
|
|
background: var(--canvas-menu-bg);
|
|
border: var(--canvas-menu-border);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--canvas-menu-shadow);
|
|
}
|
|
.canvas-control-group .canvas-control-item {
|
|
color: var(--canvas-icon-color);
|
|
background: var(--canvas-menu-bg);
|
|
}
|
|
.canvas-control-group .canvas-control-item:hover {
|
|
color: var(--canvas-icon-color-hover);
|
|
background: var(--canvas-menu-bg-hover);
|
|
}
|
|
.canvas-control-group .canvas-control-item.is-disabled svg {
|
|
color: var(--canvas-icon-color-disabled);
|
|
}
|
|
.canvas-control-group .canvas-control-item.is-disabled:hover {
|
|
background: inherit;
|
|
}
|
|
.nav-folder.mod-root > .nav-folder-title[data-path="/"] {
|
|
justify-content: center;
|
|
background: var(--vault-name-background);
|
|
padding: var(--size-2-3) var(--size-4-2);
|
|
border: var(--vault-name-border);
|
|
border-radius: calc(var(--radius-s) + 1px);
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
.nav-folder.mod-root > .nav-folder-title[data-path="/"]:hover {
|
|
color: var(--vault-name-color);
|
|
background: var(--vault-name-background);
|
|
}
|
|
.nav-files-container {
|
|
padding-top: var(--size-2-1);
|
|
}
|
|
.nav-file-title {
|
|
transition:
|
|
padding,
|
|
transform var(--anim-duration-fast) var(--anim-motion-smooth);
|
|
}
|
|
.nav-file-title:active {
|
|
transform: translateY(2px);
|
|
}
|
|
.nav-file-title.is-active {
|
|
padding: var(--nav-file-padding-active);
|
|
box-shadow: var(--nav-file-shadow-active);
|
|
}
|
|
.nav-file-tag {
|
|
color: var(--nav-file-tag-color);
|
|
background: var(--nav-file-tag-bg);
|
|
margin-top: 1px;
|
|
}
|
|
.nav-file-title.is-active .nav-file-tag {
|
|
margin-top: 0px;
|
|
}
|
|
body {
|
|
--nav-folder-color: var(--nav-item-color);
|
|
--nav-folder-bg-color: transparent;
|
|
--nav-folder-bg-color-hover: var(--nav-item-background-hover);
|
|
--nav-folder-collapse-color: var(--nav-collapse-icon-color);
|
|
}
|
|
.nav-folder-children > .nav-folder .nav-folder-title,
|
|
.nav-files-container > div > .nav-folder .nav-folder-title {
|
|
color: var(--nav-folder-color);
|
|
background: var(--nav-folder-bg-color);
|
|
}
|
|
.nav-folder-children > .nav-folder .nav-folder-title:hover,
|
|
.nav-files-container > div > .nav-folder .nav-folder-title:hover {
|
|
color: var(--nav-folder-color);
|
|
background: var(--nav-folder-bg-color-hover);
|
|
}
|
|
.nav-folder .tree-item-icon svg.svg-icon {
|
|
color: var(--nav-folder-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 2) {
|
|
--nav-folder-collapse-color: var(--nav-folder-1-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 3) {
|
|
--nav-folder-collapse-color: var(--nav-folder-2-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 4) {
|
|
--nav-folder-collapse-color: var(--nav-folder-3-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 5) {
|
|
--nav-folder-collapse-color: var(--nav-folder-4-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 6) {
|
|
--nav-folder-collapse-color: var(--nav-folder-5-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 7) {
|
|
--nav-folder-collapse-color: var(--nav-folder-6-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 8) {
|
|
--nav-folder-collapse-color: var(--nav-folder-7-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 9) {
|
|
--nav-folder-collapse-color: var(--nav-folder-8-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 10) {
|
|
--nav-folder-collapse-color: var(--nav-folder-9-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 11) {
|
|
--nav-folder-collapse-color: var(--nav-folder-10-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 12) {
|
|
--nav-folder-collapse-color: var(--nav-folder-11-collapse-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 13) {
|
|
--nav-folder-collapse-color: var(--nav-folder-12-collapse-color);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 2) {
|
|
--nav-folder-bg-color: var(--nav-folder-1-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-1-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 3) {
|
|
--nav-folder-bg-color: var(--nav-folder-2-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-2-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 4) {
|
|
--nav-folder-bg-color: var(--nav-folder-3-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-3-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 5) {
|
|
--nav-folder-bg-color: var(--nav-folder-4-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-4-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 6) {
|
|
--nav-folder-bg-color: var(--nav-folder-5-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-5-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 7) {
|
|
--nav-folder-bg-color: var(--nav-folder-6-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-6-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 8) {
|
|
--nav-folder-bg-color: var(--nav-folder-7-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-7-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 9) {
|
|
--nav-folder-bg-color: var(--nav-folder-8-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-8-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 10) {
|
|
--nav-folder-bg-color: var(--nav-folder-9-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-9-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 11) {
|
|
--nav-folder-bg-color: var(--nav-folder-10-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-10-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 12) {
|
|
--nav-folder-bg-color: var(--nav-folder-11-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-11-bg-color-hover);
|
|
}
|
|
body.folder-color_background
|
|
.nav-folder-children
|
|
> .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_background
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 13) {
|
|
--nav-folder-bg-color: var(--nav-folder-12-bg-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-12-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 2) {
|
|
--nav-folder-color: var(--nav-folder-1-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-1-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 3) {
|
|
--nav-folder-color: var(--nav-folder-2-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-2-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 4) {
|
|
--nav-folder-color: var(--nav-folder-3-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-3-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 5) {
|
|
--nav-folder-color: var(--nav-folder-4-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-4-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 6) {
|
|
--nav-folder-color: var(--nav-folder-5-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-5-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 7) {
|
|
--nav-folder-color: var(--nav-folder-6-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-6-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 8) {
|
|
--nav-folder-color: var(--nav-folder-7-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-7-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 9) {
|
|
--nav-folder-color: var(--nav-folder-8-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-8-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 10) {
|
|
--nav-folder-color: var(--nav-folder-9-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-9-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 11) {
|
|
--nav-folder-color: var(--nav-folder-10-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-10-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 12) {
|
|
--nav-folder-color: var(--nav-folder-11-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-11-bg-color-hover);
|
|
}
|
|
body.folder-color_text .nav-folder-children > .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_text
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 13) {
|
|
--nav-folder-color: var(--nav-folder-12-color);
|
|
--nav-folder-bg-color-hover: var(--nav-folder-12-bg-color-hover);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 2),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 2) {
|
|
--nav-indentation-guide-color: var(--nav-folder-1-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 3),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 3) {
|
|
--nav-indentation-guide-color: var(--nav-folder-2-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 4),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 4) {
|
|
--nav-indentation-guide-color: var(--nav-folder-3-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 5),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 5) {
|
|
--nav-indentation-guide-color: var(--nav-folder-4-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 6),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 6) {
|
|
--nav-indentation-guide-color: var(--nav-folder-5-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 7),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 7) {
|
|
--nav-indentation-guide-color: var(--nav-folder-6-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 8),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 8) {
|
|
--nav-indentation-guide-color: var(--nav-folder-7-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 9),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 9) {
|
|
--nav-indentation-guide-color: var(--nav-folder-8-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 10),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 10) {
|
|
--nav-indentation-guide-color: var(--nav-folder-9-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 11),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 11) {
|
|
--nav-indentation-guide-color: var(--nav-folder-10-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 12),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 12) {
|
|
--nav-indentation-guide-color: var(--nav-folder-11-indent-color);
|
|
}
|
|
body.folder-color_full .nav-folder-children > .nav-folder:nth-child(12n + 13),
|
|
body.folder-color_full
|
|
.nav-files-container
|
|
> div
|
|
> .nav-folder:nth-child(12n + 13) {
|
|
--nav-indentation-guide-color: var(--nav-folder-12-indent-color);
|
|
}
|
|
body.folder-color_full .nav-files-container .nav-folder.nav-folder .nav-folder {
|
|
--nav-folder-color: inherit;
|
|
--nav-folder-bg-color: inherit;
|
|
--nav-folder-bg-color-hover: inherit;
|
|
--nav-folder-collapse-color: inherit;
|
|
--nav-indentation-guide-color: inherit;
|
|
}
|
|
body.alt-folder-icons.is-mobile .nav-folder .tree-item-icon svg.right-triangle,
|
|
body.alt-folder-icons.is-tablet .nav-folder .tree-item-icon svg.right-triangle {
|
|
width: var(--mobile-folder-icon-size);
|
|
height: var(--mobile-folder-icon-size);
|
|
}
|
|
body.alt-folder-icons .nav-folder .tree-item-icon svg.right-triangle {
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
stroke-width: var(--icon-stroke);
|
|
background: currentColor;
|
|
}
|
|
body.alt-folder-icons
|
|
.nav-folder
|
|
.tree-item-icon.is-collapsed
|
|
svg.right-triangle {
|
|
transform: unset;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
|
|
}
|
|
body.alt-folder-icons
|
|
.nav-folder
|
|
.tree-item-icon:not(.is-collapsed)
|
|
svg.right-triangle {
|
|
transform: unset;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder-open'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
|
|
}
|
|
.graph-view.color-fill-unresolved {
|
|
opacity: var(--graph-node-unresolved-opacity);
|
|
}
|
|
.graph-view.color-arrow {
|
|
color: var(--graph-arrow);
|
|
}
|
|
.graph-view.color-fill-highlight {
|
|
color: var(--graph-node-highlight-fill);
|
|
}
|
|
.graph-view.color-line-highlight {
|
|
color: var(--graph-node-highlight-line);
|
|
}
|
|
.mod-root .workspace-leaf .graph-controls.is-close {
|
|
background: var(--editor-bg-color);
|
|
}
|
|
.suggestion-highlight {
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.mod-search-suggestion .mod-group {
|
|
font-size: var(--font-ui-smallest);
|
|
color: var(--settings-nav-group-title-color);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
.mod-search-suggestion .search-suggest-item:not(.mod-group) {
|
|
border-radius: var(--menu-item-radius);
|
|
}
|
|
.mod-search-suggestion .search-suggest-item:not(.mod-group).is-selected {
|
|
background: var(--menu-item-bg-hover);
|
|
}
|
|
.mod-search-suggestion .search-suggest-item:not(.mod-group):active {
|
|
color: var(--menu-item-color-active);
|
|
background: var(--menu-item-bg-active);
|
|
}
|
|
.mod-search-suggestion
|
|
.search-suggest-item:not(.mod-group):active
|
|
.search-suggest-info-text {
|
|
color: var(--menu-item-color-active);
|
|
}
|
|
.search-suggest-item.mod-group:not(:first-child) {
|
|
margin-inline-start: -6px;
|
|
}
|
|
.more-options-icon {
|
|
color: var(--icon-color);
|
|
background: var(--icon-bg);
|
|
}
|
|
.clickable-icon:hover .more-options-icon,
|
|
.clickable-icon:hover .more-options-icon:hover {
|
|
color: var(--icon-color-hover);
|
|
background: var(--icon-bg-hover);
|
|
}
|
|
.clickable-icon.search-result-count.has-active-menu {
|
|
color: var(--icon-color-active);
|
|
background: var(--icon-bg-active);
|
|
}
|
|
.search-results-info select.dropdown {
|
|
color: var(--icon-color);
|
|
}
|
|
.search-results-info select.dropdown:hover {
|
|
color: var(--icon-color-hover);
|
|
}
|
|
.search-results-info select.dropdown:active,
|
|
.search-results-info select.dropdown:focus {
|
|
color: var(--icon-color-active);
|
|
box-shadow: none;
|
|
}
|
|
.search-result-file-matches {
|
|
border-radius: var(--radius-m);
|
|
}
|
|
.search-result-file-match {
|
|
transition: var(--anim-duration-fast) var(--anim-motion-smooth);
|
|
cursor: var(--cursor);
|
|
}
|
|
.search-result-file-match:hover {
|
|
background: var(--search-result-background-hover);
|
|
}
|
|
.search-empty-state {
|
|
text-align: center;
|
|
margin: var(--size-4-3) var(--size-4-3);
|
|
}
|
|
.search-result-file-match-destination-file,
|
|
.search-result-file-match:hover .search-result-file-match-destination-file {
|
|
color: var(--search-result-dest-file-color);
|
|
background: var(--search-result-dest-file-bg);
|
|
border-radius: calc(var(--radius-m) - 2px);
|
|
box-shadow: var(--search-result-dest-file-shadow);
|
|
transition:
|
|
background,
|
|
box-shadow var(--anim-duration-superfast) var(--anim-motion-smooth);
|
|
}
|
|
.search-result-file-match-destination-file
|
|
.search-result-file-match-destination-file-icon,
|
|
.search-result-file-match:hover
|
|
.search-result-file-match-destination-file
|
|
.search-result-file-match-destination-file-icon {
|
|
color: var(--search-result-dest-file-icon-color);
|
|
}
|
|
.search-result-file-match:hover
|
|
.search-result-file-match-destination-file:hover {
|
|
color: var(--search-result-dest-file-color);
|
|
background: var(--search-result-dest-file-bg-hover);
|
|
box-shadow: var(--search-result-dest-file-shadow-hover);
|
|
}
|
|
.internal-query {
|
|
border-top: none;
|
|
}
|
|
.internal-query .internal-query-header {
|
|
padding: var(--size-4-2) var(--size-2-2);
|
|
}
|
|
.internal-query .search-result-container {
|
|
background-color: var(--inline-query-bg);
|
|
box-shadow: var(--inline-query-shadow);
|
|
}
|
|
.workspace-leaf-content[data-type="style-settings"] .view-content > div {
|
|
width: min(100%, var(--file-line-width));
|
|
margin-inline: auto;
|
|
}
|
|
.style-settings-container {
|
|
animation: var(--anim-popdown);
|
|
}
|
|
.style-settings-heading:focus-visible,
|
|
.style-settings-container :where(button, input, select):focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
body.zero-popup-blur {
|
|
--popup-bg-blur: 0px;
|
|
}
|
|
body.editor-bgpattern-linegrid .workspace-split.mod-root .view-content {
|
|
background-size: var(--editor-bgpattern-size);
|
|
background-image:
|
|
linear-gradient(
|
|
to left,
|
|
color-mix(in srgb, var(--editor-bgpattern-color) 30%, transparent) 1px,
|
|
transparent 1px
|
|
),
|
|
linear-gradient(
|
|
to top,
|
|
color-mix(in srgb, var(--editor-bgpattern-color) 30%, transparent) 1px,
|
|
transparent 1px
|
|
);
|
|
}
|
|
body.editor-bgpattern-dotgrid .workspace-split.mod-root .view-content {
|
|
background-size: var(--editor-bgpattern-size);
|
|
background-image: radial-gradient(
|
|
circle,
|
|
var(--editor-bgpattern-color) 1px,
|
|
rgba(0, 0, 0, 0) 1px
|
|
);
|
|
}
|
|
body.active-line-highlight .cm-active {
|
|
background: var(--active-line-bg);
|
|
box-shadow:
|
|
-25vw 0 var(--active-line-bg),
|
|
25vw 0 var(--active-line-bg);
|
|
}
|
|
body.show-heading-title-lines .inline-title,
|
|
body.show-heading-title-lines .markdown-rendered h1,
|
|
body.show-heading-title-lines .HyperMD-header-1.cm-line {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding-bottom: var(--size-4-2);
|
|
}
|
|
body.no-decor-link {
|
|
--link-decoration: none;
|
|
--link-decoration-hover: none;
|
|
--link-external-decoration: none;
|
|
--link-external-decoration-hover: none;
|
|
--link-unresolved-decoration-style: none;
|
|
}
|
|
body.accent-palette_warm {
|
|
--interactive-accent: hsl(20, 75%, 45%);
|
|
--interactive-accent-hover: hsl(20, 75%, 40%);
|
|
--checkbox-color: hsl(20, 75%, 45%);
|
|
--checkbox-color-hover: hsl(20, 75%, 40%);
|
|
}
|
|
body.accent-palette_warm.theme-dark {
|
|
--interactive-accent: hsl(20, 80%, 58%);
|
|
--interactive-accent-hover: hsl(20, 80%, 63%);
|
|
--checkbox-color: hsl(20, 70%, 45%);
|
|
--checkbox-color-hover: hsl(20, 70%, 50%);
|
|
}
|
|
body.accent-palette_cool {
|
|
--interactive-accent: hsl(205, 65%, 42%);
|
|
--interactive-accent-hover: hsl(205, 65%, 37%);
|
|
--checkbox-color: hsl(205, 55%, 40%);
|
|
--checkbox-color-hover: hsl(205, 55%, 35%);
|
|
}
|
|
body.accent-palette_cool.theme-dark {
|
|
--interactive-accent: hsl(205, 70%, 60%);
|
|
--interactive-accent-hover: hsl(205, 70%, 65%);
|
|
--checkbox-color: hsl(205, 55%, 45%);
|
|
--checkbox-color-hover: hsl(205, 55%, 50%);
|
|
}
|
|
body.layout-density_compact {
|
|
--nav-item-height: 22px;
|
|
--nav-item-padding: var(--size-2-2) var(--size-4-2);
|
|
--line-height-normal: 1.4;
|
|
--line-height-tight: 1.2;
|
|
--file-margins: var(--size-4-4);
|
|
}
|
|
body.heading-style_bold {
|
|
--h1-size: 2.1em;
|
|
--h1-weight: 800;
|
|
--h2-size: 1.75em;
|
|
--h2-weight: 750;
|
|
--h3-size: 1.5em;
|
|
--h3-weight: 700;
|
|
--h4-size: 1.3em;
|
|
--h4-weight: 700;
|
|
--h5-size: 1.15em;
|
|
--h5-weight: 700;
|
|
--h6-size: 1em;
|
|
--h6-weight: 700;
|
|
}
|
|
body.heading-style_minimal {
|
|
--h1-size: 1.4em;
|
|
--h1-weight: 600;
|
|
--h2-size: 1.25em;
|
|
--h2-weight: 600;
|
|
--h3-size: 1.15em;
|
|
--h3-weight: 600;
|
|
--h4-size: 1.05em;
|
|
--h4-weight: 600;
|
|
--h5-size: 1em;
|
|
--h5-weight: 600;
|
|
--h6-size: 0.95em;
|
|
--h6-weight: 600;
|
|
}
|
|
body.colorful-headings.theme-light {
|
|
--h1-color: var(--color-l-red-30);
|
|
--h2-color: var(--color-l-orange-30);
|
|
--h3-color: var(--color-l-yellow-40);
|
|
--h4-color: var(--color-l-green-30);
|
|
--h5-color: var(--color-l-blue-30);
|
|
--h6-color: var(--color-l-purple-30);
|
|
}
|
|
body.colorful-headings.theme-dark {
|
|
--h1-color: var(--color-d-red-20);
|
|
--h2-color: var(--color-d-orange-20);
|
|
--h3-color: var(--color-d-yellow-20);
|
|
--h4-color: var(--color-d-green-20);
|
|
--h5-color: var(--color-d-blue-20);
|
|
--h6-color: var(--color-d-purple-20);
|
|
}
|
|
body.reduce-motion {
|
|
--anim-popup: none;
|
|
--anim-popup-alt: none;
|
|
--anim-popdown: none;
|
|
--background-anim: none;
|
|
--button-anim: none;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
body {
|
|
--anim-popup: none;
|
|
--anim-popup-alt: none;
|
|
--anim-popdown: none;
|
|
--background-anim: none;
|
|
--button-anim: none;
|
|
}
|
|
}
|
|
:where(
|
|
button,
|
|
input,
|
|
textarea,
|
|
select,
|
|
[tabindex]:not([tabindex="-1"])
|
|
):focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
@media (forced-colors: active) {
|
|
:focus-visible {
|
|
outline: 2px solid Highlight;
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
/*───────────────────────────────────
|
|
|
|
HELPER CLASSES (cssclasses)
|
|
|
|
Per-note utility classes applied via the `cssclasses` frontmatter property.
|
|
These follow the class-name contract documented at
|
|
https://minimal.guide/features/helper-classes so notes and snippets written
|
|
for Minimal keep working here.
|
|
|
|
The block-width, embed and table rules below are an original implementation
|
|
on this theme's own variables. The image grid, cards and list-cards rules
|
|
are adapted from Minimal (https://github.com/kepano/obsidian-minimal),
|
|
whose real DOM-handling (hiding native list-bullet/indentation-guide
|
|
elements, scoping grids to direct-child lists only) is needed to render
|
|
correctly - reduced to plain CSS and remapped onto this theme's variables.
|
|
|
|
The image grid, cards and list-cards rules are adapted from:
|
|
MIT License | Copyright (c) 2020-2024 Steph Ango (@kepano)
|
|
Permission is hereby granted, free of charge, to any person obtaining a
|
|
copy of this software and associated documentation files (the "Software"),
|
|
to deal in the Software without restriction, including without limitation
|
|
the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
and/or sell copies of the Software, subject to the above copyright notice
|
|
and this permission notice being included in all copies or substantial
|
|
portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT
|
|
WARRANTY OF ANY KIND. Full text: https://github.com/kepano/obsidian-minimal/blob/master/LICENSE
|
|
|
|
Not exposed through Style Settings: these are per-note choices, not
|
|
vault-wide toggles.
|
|
|
|
────────────────────────────────────*/
|
|
|
|
/* Image grids: consecutive images in one paragraph become grid columns;
|
|
a blank line between images starts a new row (= a new paragraph). */
|
|
.img-grid .image-embed.is-loaded {
|
|
line-height: 0;
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
.img-grid .markdown-preview-section > div:has(img) p:empty,
|
|
.img-grid .markdown-preview-section > div:has(img) img ~ br,
|
|
.img-grid .markdown-preview-section > div:has(img) .image-embed ~ br {
|
|
display: none;
|
|
}
|
|
.img-grid
|
|
.markdown-preview-section
|
|
:is(div, p):has(> :is(.image-embed, img) ~ :is(.image-embed, img)) {
|
|
display: grid;
|
|
margin-block: var(--size-4-2);
|
|
grid-column-gap: var(--size-4-2);
|
|
grid-row-gap: 0;
|
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
}
|
|
.img-grid
|
|
.markdown-preview-section
|
|
:is(div, p):has(> :is(.image-embed, img) ~ :is(.image-embed, img))
|
|
> img {
|
|
object-fit: cover;
|
|
align-self: stretch;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
.img-grid
|
|
.markdown-preview-section
|
|
:is(div, p):has(> :is(.image-embed, img) ~ :is(.image-embed, img))
|
|
> .image-embed
|
|
img {
|
|
object-fit: cover;
|
|
align-self: center;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
/* Block widths: whole-note (wide/max) and per-block (table/img/iframe).
|
|
Scoped to .markdown-preview-view (not .markdown-reading-view - cssclasses
|
|
land on the mode-root element, same as .cards/.list-cards above) and
|
|
extended to Live Preview (.is-live-preview) to match this theme's own
|
|
dual-mode table rule (see ":is(.markdown-rendered,
|
|
.markdown-source-view.mod-cm6.is-live-preview) table" earlier in this
|
|
file). Gated behind .is-readable-line-width so "wide" only widens relative
|
|
to an actual readable-width constraint instead of narrowing an
|
|
already-unconstrained note. */
|
|
.markdown-source-view.mod-cm6.is-readable-line-width.wide .cm-sizer,
|
|
.markdown-preview-view.is-readable-line-width.wide .markdown-preview-sizer {
|
|
max-width: var(--line-width-wide, calc(var(--file-line-width) * 1.5));
|
|
}
|
|
.markdown-source-view.mod-cm6.max .cm-sizer,
|
|
.markdown-preview-view.max .markdown-preview-sizer {
|
|
max-width: none;
|
|
}
|
|
:is(
|
|
.markdown-rendered.is-readable-line-width.table-wide,
|
|
.markdown-source-view.mod-cm6.is-live-preview.is-readable-line-width.table-wide
|
|
)
|
|
table,
|
|
:is(
|
|
.markdown-rendered.is-readable-line-width.img-wide,
|
|
.markdown-source-view.mod-cm6.is-live-preview.is-readable-line-width.img-wide
|
|
)
|
|
img,
|
|
:is(
|
|
.markdown-rendered.is-readable-line-width.iframe-wide,
|
|
.markdown-source-view.mod-cm6.is-live-preview.is-readable-line-width.iframe-wide
|
|
)
|
|
iframe {
|
|
width: var(--line-width-wide, calc(var(--file-line-width) * 1.5));
|
|
max-width: var(--line-width-wide, calc(var(--file-line-width) * 1.5));
|
|
margin-inline: calc(
|
|
(
|
|
var(--line-width-wide, calc(var(--file-line-width) * 1.5)) -
|
|
var(--file-line-width)
|
|
) /
|
|
-2
|
|
);
|
|
}
|
|
/* "max" breaks a single block out to the width of the pane (not the OS
|
|
window) using a container query scoped to the workspace leaf, so it can't
|
|
render on top of a sidebar in a split layout the way a 100vw-based
|
|
breakout would. Opt-in only: container-type is added to the leaf only
|
|
when a *-max class is actually present in it. */
|
|
.workspace-leaf-content:has(
|
|
.markdown-rendered.table-max,
|
|
.markdown-rendered.img-max,
|
|
.markdown-rendered.iframe-max,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-max,
|
|
.markdown-source-view.mod-cm6.is-live-preview.img-max,
|
|
.markdown-source-view.mod-cm6.is-live-preview.iframe-max
|
|
) {
|
|
container-type: inline-size;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-max,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-max
|
|
)
|
|
table,
|
|
:is(
|
|
.markdown-rendered.img-max,
|
|
.markdown-source-view.mod-cm6.is-live-preview.img-max
|
|
)
|
|
img,
|
|
:is(
|
|
.markdown-rendered.iframe-max,
|
|
.markdown-source-view.mod-cm6.is-live-preview.iframe-max
|
|
)
|
|
iframe {
|
|
width: 100cqw;
|
|
max-width: 100cqw;
|
|
margin-inline: calc(50% - 50cqw);
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-100,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-100
|
|
)
|
|
table,
|
|
:is(
|
|
.markdown-rendered.img-100,
|
|
.markdown-source-view.mod-cm6.is-live-preview.img-100
|
|
)
|
|
img,
|
|
:is(
|
|
.markdown-rendered.iframe-100,
|
|
.markdown-source-view.mod-cm6.is-live-preview.iframe-100
|
|
)
|
|
iframe {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Embeds: transclusions blend into the flow of text, no block chrome. */
|
|
:is(
|
|
.markdown-rendered,
|
|
.markdown-source-view.mod-cm6.is-live-preview
|
|
).embed-strict
|
|
.markdown-embed {
|
|
--embed-background: transparent;
|
|
--embed-padding: 0px;
|
|
--embed-border-top: none;
|
|
--embed-border-end: none;
|
|
--embed-border-bottom: none;
|
|
--embed-border-start: none;
|
|
--embed-border-radius: 0px;
|
|
--embed-block-shadow-hover: none;
|
|
}
|
|
:is(
|
|
.markdown-rendered,
|
|
.markdown-source-view.mod-cm6.is-live-preview
|
|
).embed-strict
|
|
.markdown-embed
|
|
.embed-title {
|
|
display: none;
|
|
}
|
|
|
|
/* Tables: row/column styling variants. Scoped to both Reading View
|
|
(.markdown-rendered) and Live Preview (.is-live-preview), matching this
|
|
theme's own base table rule so the helper classes aren't Reading-View-only. */
|
|
:is(
|
|
.markdown-rendered.table-nowrap,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-nowrap
|
|
)
|
|
table {
|
|
white-space: nowrap;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-wrap,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-wrap
|
|
)
|
|
table {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-center,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-center
|
|
)
|
|
table:not([style*="width"]) {
|
|
margin-inline: auto;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-tabular,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-tabular
|
|
)
|
|
table {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-small,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-small
|
|
)
|
|
table {
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-tiny,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-tiny
|
|
)
|
|
table {
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-lines,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-lines
|
|
)
|
|
table,
|
|
:is(
|
|
.markdown-rendered.table-lines,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-lines
|
|
)
|
|
th,
|
|
:is(
|
|
.markdown-rendered.table-lines,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-lines
|
|
)
|
|
td {
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
:is(
|
|
.markdown-rendered.row-lines,
|
|
.markdown-source-view.mod-cm6.is-live-preview.row-lines
|
|
)
|
|
tr {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
:is(
|
|
.markdown-rendered.col-lines,
|
|
.markdown-source-view.mod-cm6.is-live-preview.col-lines
|
|
)
|
|
th,
|
|
:is(
|
|
.markdown-rendered.col-lines,
|
|
.markdown-source-view.mod-cm6.is-live-preview.col-lines
|
|
)
|
|
td {
|
|
border-inline-end: 1px solid var(--background-modifier-border);
|
|
}
|
|
:is(
|
|
.markdown-rendered.row-alt,
|
|
.markdown-source-view.mod-cm6.is-live-preview.row-alt
|
|
)
|
|
tbody
|
|
tr:nth-child(even) {
|
|
background-color: var(--table-column-alt-background);
|
|
}
|
|
:is(
|
|
.markdown-rendered.col-alt,
|
|
.markdown-source-view.mod-cm6.is-live-preview.col-alt
|
|
)
|
|
th:nth-child(even),
|
|
:is(
|
|
.markdown-rendered.col-alt,
|
|
.markdown-source-view.mod-cm6.is-live-preview.col-alt
|
|
)
|
|
td:nth-child(even) {
|
|
background-color: var(--table-column-alt-background);
|
|
}
|
|
:is(
|
|
.markdown-rendered.row-highlight,
|
|
.markdown-source-view.mod-cm6.is-live-preview.row-highlight
|
|
)
|
|
tbody
|
|
tr:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-numbers,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-numbers
|
|
)
|
|
table {
|
|
counter-reset: primary-simplified-row-num;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-numbers,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-numbers
|
|
)
|
|
tbody
|
|
tr {
|
|
counter-increment: primary-simplified-row-num;
|
|
position: relative;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-numbers,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-numbers
|
|
)
|
|
tbody
|
|
tr
|
|
td:first-child::before {
|
|
content: counter(primary-simplified-row-num);
|
|
position: absolute;
|
|
inset-inline-start: var(--size-2-2);
|
|
color: var(--text-faint);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
:is(
|
|
.markdown-rendered.table-numbers,
|
|
.markdown-source-view.mod-cm6.is-live-preview.table-numbers
|
|
)
|
|
tbody
|
|
tr
|
|
td:first-child {
|
|
padding-inline-start: var(--size-4-4);
|
|
}
|
|
|
|
/* Shared card-grid tuning, overridden per variant below. */
|
|
body {
|
|
--cards-min-width: 180px;
|
|
--cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), 1fr));
|
|
--cards-aspect-ratio: auto;
|
|
--cards-image-fit: contain;
|
|
}
|
|
|
|
/* Cards: Dataview TABLE queries as a card grid.
|
|
Assumes Dataview's default table markup (table.dataview); verify visually
|
|
once the Dataview plugin is installed in a test vault. */
|
|
.cards table.dataview {
|
|
display: grid;
|
|
grid-template-columns: var(--cards-columns);
|
|
gap: var(--size-4-3);
|
|
border: none;
|
|
}
|
|
.cards table.dataview thead {
|
|
display: none;
|
|
}
|
|
.cards table.dataview tbody {
|
|
display: contents;
|
|
}
|
|
.cards table.dataview tr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--background-secondary);
|
|
border-radius: var(--radius-m);
|
|
box-shadow: var(--shadow-s);
|
|
padding: var(--size-4-3);
|
|
overflow: hidden;
|
|
}
|
|
.cards table.dataview td {
|
|
display: block;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
.cards-align-bottom table.dataview tr > td:last-child {
|
|
margin-block-start: auto;
|
|
}
|
|
.cards table.dataview tr img,
|
|
.cards table.dataview tr .image-embed img {
|
|
aspect-ratio: var(--cards-aspect-ratio);
|
|
object-fit: var(--cards-image-fit);
|
|
border-radius: var(--radius-s);
|
|
margin-inline: calc(var(--size-4-3) * -1);
|
|
margin-block-start: calc(var(--size-4-3) * -1);
|
|
width: calc(100% + var(--size-4-3) * 2);
|
|
max-width: none;
|
|
background-color: var(--background-secondary);
|
|
}
|
|
.cards-cover {
|
|
--cards-image-fit: cover;
|
|
}
|
|
.cards-16-9 {
|
|
--cards-aspect-ratio: 16 / 9;
|
|
}
|
|
.cards-1-1 {
|
|
--cards-aspect-ratio: 1 / 1;
|
|
}
|
|
.cards-2-1 {
|
|
--cards-aspect-ratio: 2 / 1;
|
|
}
|
|
.cards-2-3 {
|
|
--cards-aspect-ratio: 2 / 3;
|
|
}
|
|
.cards-cols-1 {
|
|
--cards-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
.cards-cols-2 {
|
|
--cards-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.cards-cols-3 {
|
|
--cards-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
.cards-cols-4 {
|
|
--cards-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
.cards-cols-5 {
|
|
--cards-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
.cards-cols-6 {
|
|
--cards-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
.cards-cols-7 {
|
|
--cards-columns: repeat(7, minmax(0, 1fr));
|
|
}
|
|
.cards-cols-8 {
|
|
--cards-columns: repeat(8, minmax(0, 1fr));
|
|
}
|
|
|
|
/* list-cards: bullet/numbered lists as a card grid. Scoped to the reading
|
|
view root so nested sub-lists (a list inside a card) are reset to plain,
|
|
indented text instead of becoming broken/overlapping nested grids, and so
|
|
the native bullet marker and indentation-guide line are hidden instead of
|
|
being left behind next to each card. */
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards .list-bullet,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards
|
|
.list-collapse-indicator,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards li > ul::before {
|
|
display: none;
|
|
}
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div > ul,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div > ol {
|
|
display: grid;
|
|
grid-template-columns: var(--cards-columns);
|
|
gap: var(--size-4-3);
|
|
padding: 0;
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards
|
|
div
|
|
> ul.contains-task-list,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards
|
|
div
|
|
> ol.contains-task-list {
|
|
padding-inline-start: calc(var(--size-4-3) * 1.5);
|
|
}
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div > ul > li,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div > ol > li {
|
|
background-color: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
padding: calc(var(--size-4-3) / 2);
|
|
margin-inline-start: 0;
|
|
overflow: hidden;
|
|
}
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div > ul > li:hover,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div > ol > li:hover {
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards
|
|
div
|
|
> ul
|
|
> li
|
|
> .image-embed,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards
|
|
div
|
|
> ol
|
|
> li
|
|
> .image-embed {
|
|
display: block;
|
|
padding: 0;
|
|
background-color: var(--background-secondary);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards
|
|
div
|
|
> ul
|
|
> li
|
|
> .image-embed
|
|
img,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards
|
|
div
|
|
> ol
|
|
> li
|
|
> .image-embed
|
|
img {
|
|
aspect-ratio: var(--cards-aspect-ratio);
|
|
object-fit: var(--cards-image-fit);
|
|
max-width: 100%;
|
|
}
|
|
/* Sub-lists inside a card: plain, muted, indented text - not a nested grid. */
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ul ul,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ul ol,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ol ul,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ol ol {
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-smallest);
|
|
margin: calc(var(--size-4-3) / -4) 0;
|
|
padding: calc(var(--size-4-3) / 2) 0;
|
|
}
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ul ul > li,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ul ol > li,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ol ul > li,
|
|
:is(.markdown-preview-view, .markdown-rendered).list-cards div ol ol > li {
|
|
display: block;
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
/* Known inconsistency: Style Settings variant class names mix hyphen and
|
|
underscore separators (e.g. accent-palette_warm vs ribbon-slideout, and
|
|
editor-bg-default vs editor-bgpattern-linegrid). These names are kept as-is
|
|
for backwards compatibility with vaults/snippets already referencing them;
|
|
new classes added going forward should prefer plain hyphens. */
|
|
|
|
/* @settings
|
|
|
|
name: Primary Simplified Theme Settings
|
|
id: primary-theme
|
|
settings:
|
|
- id: essentials
|
|
type: heading
|
|
level: 1
|
|
collapsed: false
|
|
title: Theme settings
|
|
- id: readme-overview
|
|
type: info-text
|
|
markdown: true
|
|
description: Primary Simplified keeps Primary's warm visual language while exposing only theme-specific toggles and presets. Use Obsidian Settings -> Appearance for fonts, accent color, and editor font size.
|
|
- id: essential-appearance
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
title: Appearance
|
|
- id: accent-palette
|
|
type: class-select
|
|
title: Accent palette
|
|
description: Switches the accent and checked-checkbox color to a curated palette, in light and dark mode.
|
|
allowEmpty: false
|
|
default: accent-palette-default
|
|
options:
|
|
- label: Default
|
|
value: accent-palette-default
|
|
- label: Warm
|
|
value: accent-palette_warm
|
|
- label: Cool
|
|
value: accent-palette_cool
|
|
- id: layout-density
|
|
type: class-select
|
|
title: Layout density
|
|
description: Switches between comfortable and compact spacing for file explorer rows and body text line height.
|
|
allowEmpty: false
|
|
default: layout-density-default
|
|
options:
|
|
- label: Comfortable
|
|
value: layout-density-default
|
|
- label: Compact
|
|
value: layout-density_compact
|
|
- id: heading-style
|
|
type: class-select
|
|
title: Heading style
|
|
description: Switches the font size and weight scale used for H1-H6, in one preset.
|
|
allowEmpty: false
|
|
default: heading-style-default
|
|
options:
|
|
- label: Default
|
|
value: heading-style-default
|
|
- label: Bold
|
|
value: heading-style_bold
|
|
- label: Minimal
|
|
value: heading-style_minimal
|
|
- id: colorful-headings
|
|
type: class-toggle
|
|
title: Colorful headings
|
|
description: Uses the theme palette to color H1-H6 headings in reading and editing mode.
|
|
- id: essential-motion
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
title: Motion and performance
|
|
- id: reduce-motion
|
|
type: class-toggle
|
|
title: Reduce theme motion
|
|
description: Disables decorative tab, popup, and background animations without changing Obsidian's functional transitions.
|
|
- id: zero-popup-blur
|
|
type: class-toggle
|
|
title: Remove popup background blur
|
|
description: Removes background blur from Settings, Command Palette, Quick Switcher, and other popups.
|
|
- id: essential-workspace
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
title: Workspace
|
|
- id: ribbon_styles
|
|
type: class-select
|
|
title: Ribbon style
|
|
allowEmpty: false
|
|
default: ribbon-default
|
|
options:
|
|
- label: Docked
|
|
value: ribbon-default
|
|
- label: Slide out on hover
|
|
value: ribbon-slideout
|
|
- id: interface_status-bar-style
|
|
type: class-select
|
|
title: Status bar style
|
|
allowEmpty: false
|
|
default: sb-default
|
|
options:
|
|
- label: On top
|
|
value: sb-default
|
|
- label: Visible full length
|
|
value: sb-style-full
|
|
- label: Slide up full length
|
|
value: sb-style-slideupfull
|
|
- label: Slide out
|
|
value: sb-style-slideout
|
|
- label: Floating
|
|
value: sb-style-floating
|
|
- id: interface_status-bar-item-display
|
|
type: class-select
|
|
title: Status bar item visibility
|
|
allowEmpty: false
|
|
default: sb-item-default
|
|
options:
|
|
- label: Show everything
|
|
value: sb-item-default
|
|
- label: Sync only
|
|
value: sb-sync-only
|
|
- label: Word count only
|
|
value: sb-word-count-only
|
|
- id: essential-editor-and-notes
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
title: Editor and notes
|
|
- id: interface_editor-bg
|
|
type: class-select
|
|
title: Editor background
|
|
allowEmpty: false
|
|
default: editor-bg-default
|
|
options:
|
|
- label: Plain color
|
|
value: editor-bg-default
|
|
- label: Line grid
|
|
value: editor-bgpattern-linegrid
|
|
- label: Dot grid
|
|
value: editor-bgpattern-dotgrid
|
|
- id: active-line-highlight
|
|
type: class-toggle
|
|
title: Highlight active line
|
|
description: Adds background color to the active editor line.
|
|
- id: show-heading-title-lines
|
|
type: class-toggle
|
|
title: Show lines under titles
|
|
description: Adds a subtle horizontal line under H1 headings and the inline note title.
|
|
- id: no-decor-link
|
|
type: class-toggle
|
|
title: Remove link underline
|
|
- id: disable-alternative-checkboxes
|
|
title: Disable alternative checkboxes
|
|
description: Turns off the theme's default checkbox icons if you use your own CSS snippet.
|
|
type: class-toggle
|
|
- id: embed-hide-title
|
|
type: class-toggle
|
|
title: Hide note embed title
|
|
description: Hide the note's title when embedding notes.
|
|
- id: essential-folders-and-bookmarks
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
title: Folders and bookmarks
|
|
- id: folder-color-preset
|
|
type: class-select
|
|
title: Folder color preset
|
|
description: Applies folder and bookmark color treatment as one preset instead of separate low-level toggles.
|
|
allowEmpty: false
|
|
default: folder-color-default
|
|
options:
|
|
- label: Off
|
|
value: folder-color-default
|
|
- label: Text
|
|
value: folder-color_text
|
|
- label: Background
|
|
value: folder-color_background
|
|
- label: Full color
|
|
value: folder-color_full
|
|
- id: alt-folder-icons
|
|
type: class-toggle
|
|
title: Use folder icons as collapse indicators
|
|
description: Use folders as collapse indicators instead of chevrons.
|
|
*/
|