966 lines
25 KiB
CSS
966 lines
25 KiB
CSS
/* ======= # Obsidian CSS Dark Graphite Pie ==============*/
|
||
|
||
/* Structure of theme
|
||
|
||
## Credits
|
||
|
||
## Fonts & Colors
|
||
|
||
## Inside a note
|
||
### Headers
|
||
#### Edit mode
|
||
#### Reading mode
|
||
#### Live Preview
|
||
### Plain text
|
||
#### Edit mode
|
||
#### Reading mode
|
||
#### Live Preview
|
||
### Tags
|
||
#### Edit mode
|
||
#### Reading mode
|
||
#### Live Preview
|
||
### Lists
|
||
#### Edit mode
|
||
#### Reading mode
|
||
#### Live Preview
|
||
### Quotes
|
||
#### Edit mode
|
||
#### Reading mode
|
||
#### Live Preview
|
||
### Blocks of code
|
||
#### Edit mode
|
||
#### Reading mode
|
||
#### Live Preview
|
||
### Scroll
|
||
#### Edit mode
|
||
#### Reading mode
|
||
#### Live Preview
|
||
## Local graph
|
||
## Global graph
|
||
## The area around the note
|
||
### App Ribbon
|
||
### File Explorer
|
||
### Search
|
||
### Outline
|
||
### Tag Pane
|
||
### Quick Switcher
|
||
### Command Palette
|
||
### Other panes
|
||
### Note name
|
||
## System menu
|
||
|
||
*/
|
||
|
||
/* ======= ## CREDITS ==============*/
|
||
|
||
/* Theme for wonderful [Obsidian](https://obsidian.md/) app. I would be glad if someone will like and use it.
|
||
|
||
I’m not sure if I have the right to give this theme any unique name, since I don’t know CSS and glued this theme out of the three themes I like most:
|
||
|
||
- Obsidian dark rmx by _ph: https://github.com/cannibalox/Obsdn-dark-rmx/releases (used as a starter kit)
|
||
- Obsidian Red Graphite by Seanwcom: https://github.com/seanwcom/Red-Graphite-for-Obsidian (left panel styling and colors)
|
||
- Cybertron by Nick Milo: https://github.com/nickmilo/Cybertron (colors for graph in dark theme)
|
||
- Typora Pie by kevinzhao2233: https://github.com/kevinzhao2233/typora-theme-pie (look of quotes)
|
||
|
||
Initially, I wanted to adapt the Pie theme, which I often used in Typora, but in the end the themes listed above were so good that I could not choose any one.
|
||
|
||
Since version 0.9.2 I am already making independent changes without following the changes in the listed themes. I will indicate changings in the changelog: https://github.com/ryjjin/Obsidian-Dark-Graphite-Pie-theme */
|
||
|
||
|
||
/* ======= ## Fonts & Colors ==============*/
|
||
|
||
body {
|
||
font-size: 1rem;
|
||
color: var(--text-normal-original);
|
||
font-family: Source Code Pro, Fira Code, monospace;
|
||
--font-monospace: Source Code Pro, Fira Code, monospace;
|
||
--default-font: Source Code Pro, Fira Code, monospace;
|
||
}
|
||
.CodeMirror pre.CodeMirror-line {
|
||
font-size: 1rem;
|
||
font-family: Source Code Pro, Fira Code, monospace;
|
||
color: var(--text-normal-original);
|
||
}
|
||
|
||
.theme-dark {
|
||
--background-primary: #212121;
|
||
--background-modifier-border: #303030;
|
||
--background-primary-alt: #171717;
|
||
--background-secondary: #212121;
|
||
--background-secondary-alt: #000000;
|
||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.85);
|
||
--background-nav-alt: rgb(58, 62, 63);
|
||
--background-nav-file-tag: rgb(116, 190, 247);
|
||
--background-nav-selected: #3e93d8;
|
||
--background-nav: rgb(41, 44, 46);
|
||
--text-accent: #3e93d8;
|
||
--text-accent-hover: #2b60af;
|
||
--text-normal: #dcddde;
|
||
--text-normal-original: #dcddde;
|
||
--text-muted: #999;
|
||
--text-faint: #666;
|
||
--text-error: #ff3333;
|
||
--text-error-hover: #990000;
|
||
--text-matched: #0cf32b;
|
||
--text-on-accent: #dcddde;
|
||
--text-selection: rgba(6, 66, 113, 0.99);
|
||
--text-highlight-bg: rgba(26, 73, 100, 0.66);
|
||
--text-nav-selected: rgb(255, 255, 255);
|
||
--text-nav: rgb(190, 190, 190);
|
||
--interactive-normal: #2a2a2a;
|
||
--interactive-hover: #303030;
|
||
--interactive-accent: rgb(32, 171, 233);
|
||
--interactive-accent-rgb: 32, 171, 233;
|
||
--interactive-accent-hover: #1da3d6;
|
||
--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
|
||
--scrollbar-bg: rgba(255, 255, 255, 0);
|
||
--scrollbar-thumb-bg: rgba(81, 144, 175, 0.36);
|
||
--accent-strong: #3e93d8;
|
||
--accent-mild: #3e93d8;
|
||
--bw: #ffffff;
|
||
--graph-circle:#fcf601;
|
||
--graph-line: #26798c;
|
||
--graph-bg: rgb(22, 22, 22);
|
||
--graph-text:#cccccc;
|
||
--graphtag: #5dbcd2;
|
||
--graph-attach: #d669bc;
|
||
--graph-unresolved: #9e8aff;
|
||
}
|
||
|
||
.theme-light {
|
||
--background-primary: #ffffff;
|
||
--background-primary-alt: #f0f2f5;
|
||
--background-secondary: rgb(57, 63, 63);
|
||
--background-secondary-alt: rgb(203, 77, 73);
|
||
--background-accent: #fff;
|
||
--background-modifier-border: #ddd;
|
||
--background-modifier-form-field: #fff;
|
||
--background-modifier-form-field-highlighted: #fff;
|
||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
|
||
--background-modifier-success: #a4e7c3;
|
||
--background-modifier-error: #e68787;
|
||
--background-modifier-error-rgb: rgb(230, 135, 135);
|
||
--background-modifier-error-hover: #ff9494;
|
||
--background-modifier-cover: rgba(0, 0, 0, 0.8);
|
||
--background-nav-alt: rgb(58, 62, 63);
|
||
--background-nav-file-tag: rgb(203, 77, 73);
|
||
--background-nav-selected: rgb(203, 77, 73);
|
||
--background-nav: rgb(41, 44, 46);
|
||
--text-accent: rgb(203, 77, 73);
|
||
--text-accent-hover: rgb(203, 77, 73);
|
||
--text-normal: rgb(203, 77, 73);
|
||
--text-normal-original: #2e3338;
|
||
--text-muted: rgb(143, 147, 143);
|
||
--text-faint: #999999;
|
||
--text-error: #ce2222;
|
||
--text-error-hover: #cb2c22;
|
||
--text-highlight-bg: rgba(240, 255, 82, 0.76);
|
||
--text-selection: rgba(134, 202, 255, 0.99);
|
||
--text-on-accent: #f2f2f2;
|
||
--text-matched: #000000;
|
||
--text-nav-selected: rgb(255, 255, 255);
|
||
--text-nav: rgb(190, 190, 190);
|
||
--interactive-normal: #f2f3f5;
|
||
--interactive-hover: #e9e9e9;
|
||
--interactive-accent: rgb(34, 182, 226);
|
||
--interactive-accent-rgb: 34, 182, 226;
|
||
--interactive-accent-hover: #1da3d6;
|
||
--scrollbar-active-thumb-bg: rgb(97, 170, 221);
|
||
--scrollbar-bg: rgba(0, 0, 0, 0);
|
||
--scrollbar-thumb-bg: rgb(0, 0, 0);
|
||
--accent-strong: #ff3333;
|
||
--accent-mild: #e0a330;
|
||
--bw: #000000;
|
||
--graph-circle:#ec0c0c;
|
||
--graph-line: #cccccc;
|
||
--graph-bg: rgb(255, 255, 255);
|
||
--graph-text:#969696;
|
||
--graphtag: #b9ec41;
|
||
--graph-attach: #83D4F4;
|
||
--graph-unresolved: rgb(143, 147, 143);
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ======= ## Inside a note ==============*/
|
||
|
||
/* ======= ### Headers ==============*/
|
||
|
||
/* ------- #### Edit mode --------------*/
|
||
|
||
/* Changing size/color of the header hashtags ## */
|
||
.cm-formatting-header {
|
||
color: var(--text-faint);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.cm-header.cm-header-1 {
|
||
font-size: 2rem;
|
||
line-height: 40px;
|
||
}
|
||
|
||
div.HyperMD-header.HyperMD-header-1.cm-line {
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--text-accent);
|
||
}
|
||
|
||
.cm-header.cm-header-2 {
|
||
font-size: 1.6rem;
|
||
line-height: 36px;
|
||
}
|
||
|
||
div.HyperMD-header.HyperMD-header-2.cm-line {
|
||
padding-top: 14px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 1px solid var(--text-faint);
|
||
}
|
||
|
||
/* ------- #### Reading mode --------------*/
|
||
|
||
.markdown-preview-view h1 {
|
||
font-size: 2rem;
|
||
line-height: 40px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--text-accent);
|
||
}
|
||
|
||
.markdown-preview-view h2 {
|
||
font-size: 1.6rem;
|
||
line-height: 36px;
|
||
padding-top: 14px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 1px solid var(--text-faint);
|
||
}
|
||
|
||
.markdown-preview-view hr {
|
||
height: 1px;
|
||
border: none;
|
||
background-color: var(--text-accent);
|
||
}
|
||
|
||
|
||
/* ------- #### Live Preview --------------*/
|
||
|
||
|
||
|
||
/* ======= ### Plain text ==============*/
|
||
|
||
|
||
|
||
/* ------- #### Edit mode --------------*/
|
||
|
||
|
||
|
||
/* ------- #### Reading mode --------------*/
|
||
|
||
.markdown-preview-view {
|
||
color: var(--text-normal-original);
|
||
}
|
||
|
||
/* ------- #### Live Preview --------------*/
|
||
|
||
|
||
|
||
/* ======= ### Tags ==============*/
|
||
|
||
|
||
|
||
/* ------- #### Edit mode --------------*/
|
||
|
||
|
||
|
||
/* ------- #### Reading mode --------------*/
|
||
|
||
.tag {
|
||
background-color: var(--text-accent);
|
||
border: none;
|
||
color: white !important;
|
||
font-size: 0.7rem;
|
||
line-height: 1.6em;
|
||
padding: 0px 7px 1px 7px;
|
||
text-align: center;
|
||
text-decoration: none !important;
|
||
display: inline-block;
|
||
margin: 0px 4px;
|
||
cursor: pointer;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.tag:hover {
|
||
color: white;
|
||
background-color: var(--text-accent-hover);
|
||
}
|
||
|
||
.tag[href^="#obsidian"] {
|
||
background-color: #4d3ca6;
|
||
}
|
||
|
||
.tag[href^="#important"] {
|
||
background-color: red;
|
||
}
|
||
|
||
.tag[href^="#стартовал_проект"] {
|
||
background-color: green;
|
||
}
|
||
|
||
.tag[href^="#высокий_шанс"] {
|
||
background-color: green;
|
||
}
|
||
|
||
.tag[href^="#complete"] {
|
||
background-color: green;
|
||
}
|
||
|
||
.tag[href^="#ожидание"] {
|
||
background-color: orange;
|
||
}
|
||
.tag[href^="#идет_конкурс"] {
|
||
background-color: orange;
|
||
}
|
||
|
||
.tag[href^="#средний_шанс"] {
|
||
background-color: orange;
|
||
}
|
||
|
||
.tag[href^="#inprogress"] {
|
||
background-color: orange;
|
||
}
|
||
|
||
.tag[href^="#daily_notes"] {
|
||
background-color: #4d3ca6;
|
||
}
|
||
|
||
.tag[href^="#tasklist"] {
|
||
background-color: #4d3ca6;
|
||
}
|
||
|
||
.tag[href^="#TIER1"] {
|
||
background-color: red;
|
||
}
|
||
|
||
.tag[href^="#TIER2"] {
|
||
background-color: orange;
|
||
}
|
||
|
||
.tag[href^="#TIER3"] {
|
||
background-color: green;
|
||
}
|
||
|
||
.tag[href^="#DISQUALIFIED"] {
|
||
background-color: gray;
|
||
}
|
||
|
||
/* ------- #### Live Preview --------------*/
|
||
|
||
|
||
|
||
/* ======= ### Lists ==============*/
|
||
|
||
|
||
/* ------- #### Edit mode --------------*/
|
||
|
||
/* Coloring the list bullets/numbers */
|
||
.cm-s-obsidian span.cm-formatting-list {
|
||
color: var(--text-accent);
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
font-family: var(--font-monospace);
|
||
}
|
||
|
||
|
||
|
||
/* ------- #### Reading mode --------------*/
|
||
|
||
/* trace indentation lines by death_au */
|
||
|
||
.cm-hmd-list-indent .cm-tab,
|
||
ul ul {
|
||
position: relative;
|
||
}
|
||
|
||
.cm-hmd-list-indent .cm-tab::before,
|
||
ul ul::before {
|
||
content: "";
|
||
border-left: 2px solid var(--background-modifier-border); /*rgba(20,122,255,0.3);*/
|
||
position: absolute;
|
||
}
|
||
|
||
.cm-hmd-list-indent .cm-tab::before {
|
||
left: 0;
|
||
top: -5px;
|
||
bottom: -4px;
|
||
}
|
||
|
||
ul ul::before {
|
||
left: -15px;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
/*TASKLIST in Preview mode: change the color of the "checked" mark via hue-rotate filter;
|
||
*the block has been added, since apparently in the current version of the application, by default such a filter with a different value is enabled for this block, and if the block is not added, the colors indicated in the blocks below are displayed incorrectly
|
||
|
||
the base color used for the checklist looks like #3E93D8, is equivalent to HSL(207, 66%, 55%)
|
||
- therefore, for a dark theme, we just need to cancel the current hue-rotate filter value, by input own value
|
||
- for light theme we need to convert color HSL(207, 66%, 55%) to to HSL(2, 56%, 54%) (equal to RGB(207, 77, 73))
|
||
|
||
This version works fine on Mac and Linux, but don't work on Win
|
||
-----------------------------------------------------------------------------------
|
||
*/
|
||
|
||
.theme-dark .markdown-preview-view .task-list-item-checkbox {
|
||
filter: hue-rotate(360deg) brightness(120%) contrast(120%);
|
||
}
|
||
|
||
.theme-light .markdown-preview-view .task-list-item-checkbox {
|
||
content: '';
|
||
filter: hue-rotate(130deg) saturate(80%) brightness(90%) contrast(110%);
|
||
}
|
||
|
||
/*TASKLIST in Preview mode: how to make it not-line-through*/
|
||
|
||
.markdown-preview-view ul > li.task-list-item.is-checked {
|
||
text-decoration: none;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
/* ------- #### Live Preview --------------*/
|
||
|
||
input.task-list-item-checkbox {
|
||
filter: hue-rotate(130deg) saturate(80%) brightness(90%) contrast(110%);
|
||
}
|
||
|
||
|
||
/* ======= ### Quotes ==============*/
|
||
|
||
|
||
|
||
/* ------- #### Edit mode --------------*/
|
||
|
||
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
|
||
position: relative;
|
||
border: none;
|
||
border-left: 2px solid var(--text-accent);
|
||
background-color: var(--background-primary-alt);
|
||
color: #8c8c8c;
|
||
font-style: normal;
|
||
text-indent: 0;;
|
||
}
|
||
|
||
/* ------- #### Reading mode --------------*/
|
||
|
||
/* Add quotation character before quote */
|
||
/*--- 引用块 ---*/
|
||
|
||
blockquote {
|
||
position: relative;
|
||
border: none;
|
||
border-left: 2px solid var(--text-accent);
|
||
color: #8c8c8c;
|
||
font-style: normal;
|
||
padding: 1em 1em 1em;
|
||
margin: 1em 1em 1em;
|
||
line-height: 1.6;
|
||
text-indent: 0;
|
||
}
|
||
|
||
blockquote blockquote {
|
||
padding-right: 0;
|
||
}
|
||
|
||
blockquote a {
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
blockquote:before {
|
||
content: '“';
|
||
position: relative;
|
||
left: 0px;
|
||
top: 0;
|
||
color: var(--text-accent);
|
||
font-size: 2rem;
|
||
font-family: Source Code Pro, monospace;
|
||
line-height: 1em;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* ------- #### Live Preview --------------*/
|
||
|
||
|
||
|
||
/* ======= ### Blocks of code ==============*/
|
||
|
||
/* ------- #### Edit mode --------------*/
|
||
|
||
/* color of inline code */
|
||
.cm-s-obsidian span.cm-inline-code {
|
||
color: var(--text-accent);
|
||
text-align: left;
|
||
}
|
||
|
||
/* ------- #### Reading mode --------------*/
|
||
|
||
/* color and border of inline code (between the ticks) */
|
||
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code),
|
||
.markdown-preview-section code {
|
||
background-color: var(--background-inline-code);
|
||
border: 0px solid var(--border-inline-code);
|
||
padding: 4px 4px;
|
||
font-weight: 600;
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
/* ------- #### Live Preview --------------*/
|
||
|
||
/*========= remove rounded corners =======*/
|
||
|
||
.workspace-tab-header.is-active {
|
||
border-radius: 0px;
|
||
}
|
||
|
||
.workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
|
||
.workspace-tab-header.is-before-active .workspace-tab-header-inner {
|
||
border-radius: 0px;
|
||
}
|
||
|
||
.workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
|
||
.workspace-tab-header.is-after-active .workspace-tab-header-inner {
|
||
border-bottom-left-radius: 0px;
|
||
}
|
||
.workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content,
|
||
.workspace-split.mod-left-split .workspace-tabs .workspace-leaf {
|
||
border-top-left-radius: 0px;
|
||
}
|
||
|
||
.workspace-split.mod-right-split .workspace-tabs .workspace-leaf {
|
||
border-top-right-radius: 0px;
|
||
}
|
||
|
||
/*======= flat status bar ====*/
|
||
|
||
.status-bar {
|
||
background-color: var(--background-nav);
|
||
border-top: 0px solid var(--background-modifier-border);
|
||
color: var(--text-accent);
|
||
}
|
||
|
||
/* ======= ### Scroll ==============*/
|
||
|
||
|
||
|
||
/* ------- #### Edit mode --------------*/
|
||
|
||
|
||
|
||
/* ------- #### Reading mode --------------*/
|
||
|
||
|
||
|
||
/* ------- #### Live Preview --------------*/
|
||
|
||
|
||
|
||
/* ======= ## Local graph ==============*/
|
||
|
||
|
||
|
||
/* ======= ## Global graph ==============*/
|
||
|
||
.graph-view.color-fill {
|
||
color: var(--graph-circle);
|
||
}
|
||
|
||
.graph-view.color-circle {
|
||
color: var(--graph-circle);
|
||
}
|
||
|
||
.graph-view.color-line {
|
||
color: var(--graph-line);
|
||
}
|
||
|
||
.graph-view.color-text {
|
||
color: var(--graph-text);
|
||
}
|
||
|
||
.graph-view.color-fill-highlight {
|
||
color: var(--interactive-accent);
|
||
}
|
||
|
||
.graph-view.color-line-highlight {
|
||
color: rgb(var(--interactive-accent-rgb));
|
||
}
|
||
|
||
.graph-view.color-fill-tag {
|
||
color: var(--graphtag) !important;
|
||
}
|
||
.graph-view.color-fill-attachment {
|
||
color: var(--graph-attach) !important;
|
||
}
|
||
.graph-view.color-fill-unresolved {
|
||
color: var(--graph-unresolved);
|
||
opacity: 1;
|
||
}
|
||
.graph-view.color-arrow {
|
||
color: var(--graph-line);
|
||
opacity: 1;
|
||
}
|
||
.graph-controls {
|
||
position: absolute;
|
||
left: 6px;
|
||
top: 6px;
|
||
padding: 2px 10px 8px 0px;
|
||
background-color: var(--background-primary-alt);
|
||
min-width: 100px;
|
||
max-width: 240px;
|
||
border: 1px solid var(--background-modifier-border);
|
||
border-radius: 0px;
|
||
max-height: calc(100% - 16px);
|
||
overflow: auto;
|
||
}
|
||
.graph-controls-button.mod-close svg,
|
||
.graph-controls-button.mod-reset svg {
|
||
width:12px;
|
||
height:12px;
|
||
}
|
||
.graph-controls-button.mod-open svg {
|
||
width:14px;
|
||
height:14px;
|
||
}
|
||
.graph-controls.is-close {
|
||
min-width: inherit;
|
||
background-color: transparent;
|
||
border: 1px solid transparent;
|
||
padding: 6px 8px 2px 8px;
|
||
}
|
||
.graph-controls.is-close svg {
|
||
color:var(--text-muted);
|
||
}
|
||
.collapsible-item-children {
|
||
margin-left: 8px;
|
||
}
|
||
.graph-controls input[type='text'],
|
||
.graph-controls input[type='range'] {
|
||
width: 100%;
|
||
font-size: 0.65rem;
|
||
}
|
||
.graph-controls .setting-item {
|
||
padding: 7px 0;
|
||
}
|
||
.graph-controls .setting-item.mod-slider .setting-item-control,
|
||
.graph-controls .setting-item.mod-search-setting .setting-item-control {
|
||
padding-top: 0px;
|
||
}
|
||
.graph-controls .setting-item.mod-toggle .setting-item-control {
|
||
padding-top: 0;
|
||
margin-top: 0px;
|
||
}
|
||
.graph-controls .setting-item-name {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
display: inline-block;
|
||
}
|
||
.setting-item-description {
|
||
color: var(--text-muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
.setting-item {
|
||
border-top: none;
|
||
color: var(--text-muted);
|
||
}
|
||
.graph-controls .collapsible-item-children {
|
||
margin-top: 0px;
|
||
}
|
||
.graph-control-section-header {
|
||
font-weight: 600;
|
||
font-size: 0.75rem;
|
||
color: var(--text-normal);
|
||
}
|
||
.graph-control-section:not(:last-child) .collapsible-item-children {
|
||
margin-top: 0px;
|
||
margin-bottom: 2px;
|
||
border-bottom: none;
|
||
}
|
||
.graph-controls .setting-item {
|
||
padding: 0px 0 0px 0;
|
||
}
|
||
.graph-controls input[type='range'] {
|
||
-webkit-appearance: none;
|
||
background-color: var(--background-modifier-border);
|
||
border-radius: 2px;
|
||
height: 2px;
|
||
}
|
||
.graph-controls input[type='range']::-webkit-slider-thumb {
|
||
width: 13px;
|
||
height: 9px;
|
||
border-radius: 20%;
|
||
border-left: 4px solid var(--text-accent2);
|
||
cursor: pointer;
|
||
top: -2px;
|
||
}
|
||
.graph-controls .checkbox-container {
|
||
cursor: pointer;
|
||
background-color: var(--text-faint);
|
||
border-radius: 3px;
|
||
display: inline-block;
|
||
height: 12px;
|
||
position: relative;
|
||
top: 6px;
|
||
user-select: none;
|
||
width: 26px;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
|
||
transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
|
||
}
|
||
.graph-controls .checkbox-container.is-enabled {
|
||
background-color: var(--interactive-accent);
|
||
}
|
||
.graph-controls .checkbox-container:after {
|
||
pointer-events: none;
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
background-color: var(--text-on-accent);
|
||
width: 12px;
|
||
height: 10px;
|
||
margin: 1px 2px 1px 3px;
|
||
border-radius: 2px;
|
||
transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out, -webkit-transform 0.15s ease-in-out;
|
||
left: -4px;
|
||
transform: translate3d(3px, 0, 0);
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.graph-controls .checkbox-container.is-enabled:after {
|
||
transform: translate3d(14px, 0, 0);
|
||
}
|
||
.view-content > iframe {
|
||
background-color: var(--graph-bg);
|
||
}
|
||
/*==== codemirror line numbers gutter edit mode ====*/
|
||
|
||
.cm-s-obsidian .CodeMirror-linenumber {
|
||
color: var(--text-accent);
|
||
opacity: 0.3;
|
||
font-size: 0.875rem;
|
||
font-family: Source Code Pro, monospace;
|
||
}
|
||
|
||
.CodeMirror-gutter-elt {
|
||
position: absolute;
|
||
cursor: default;
|
||
z-index: 4;
|
||
}
|
||
|
||
.CodeMirror-linenumber {
|
||
padding: 0 3px 0 0px;
|
||
min-width: 20px;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
|
||
/* ======= ## The area around the note ==============*/
|
||
|
||
/* ======= ### App Ribbon ==============*/
|
||
|
||
.workspace-ribbon {
|
||
background-color: var(--background-nav-alt);
|
||
}
|
||
|
||
.workspace-ribbon.side-dock-ribbon.mod-left {
|
||
background-color: var(--background-nav);
|
||
}
|
||
|
||
.workspace-tab-header-container {
|
||
background-color: var(--background-nav);
|
||
}
|
||
|
||
.workspace-tab-container-before.is-before-active .workspace-tab-header-inner, .workspace-tab-container-after.is-after-active .workspace-tab-header-inner, .workspace-tab-header.is-before-active .workspace-tab-header-inner, .workspace-tab-header.is-after-active .workspace-tab-header-inner {
|
||
background-color: var(--background-nav);
|
||
}
|
||
|
||
/* ======= ### File Explorer ==============*/
|
||
|
||
/* The name of the vault */
|
||
.nav-folder.mod-root > .nav-file-title, .nav-folder.mod-root > .nav-folder-title {
|
||
display: none;
|
||
}
|
||
|
||
.nav-file-tag {
|
||
background-color: var(--background-nav);
|
||
}
|
||
|
||
.nav-file-title-content, .nav-folder-title-content {
|
||
color: var(--text-nav);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.nav-file-title.is-active, .nav-folder-title.is-active {
|
||
background-color: var(--background-secondary-alt);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
.nav-file-title-content:hover, .nav-folder-title.hover {
|
||
background-color: var(--background-secondary-alt);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
body.is-grabbing {
|
||
background-color: var(--background-secondary-alt);
|
||
color: var(--text-on-accent);
|
||
font-size: 0.875em;
|
||
}
|
||
|
||
/* ======= ### Search ==============*/
|
||
|
||
.workspace-leaf-content[data-type='search'] .search-result-file-matches {
|
||
color: var(--text-nav);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.tree-item-flair {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
.nav-action-button.is-active {
|
||
background-color: var(--background-nav);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
.search-input-container input {
|
||
font-size: 0.8rem;
|
||
color: var(--text-normal-original);
|
||
}
|
||
|
||
/* ======= ### Outline ==============*/
|
||
|
||
.tree-item-inner {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
/* ======= ### Tag Pane ==============*/
|
||
|
||
|
||
|
||
/* ======= ### Quick Switcher ==============*/
|
||
|
||
.suggestion-item {
|
||
color:var(--text-faint);
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.nav-file-title.is-being-dragged,
|
||
.nav-file-title.is-active,
|
||
div.collapsible-item-self.tag-pane-tag.pane-list-item.is-clickable:hover,
|
||
div.tag-pane-tag.pane-clickable-item.pane-list-item:hover,
|
||
div.collapsible-item-self.is-clickable:hover,
|
||
div.tree-item-self.tag-pane-tag.is-clickable:hover,
|
||
div.tree-item-self.is-clickable:hover,
|
||
.suggestion-item.is-selected,
|
||
div.suggestion-note.is-selected,
|
||
body:not(.is-grabbing) .nav-file-title.is-active:hover {
|
||
background-color:var(--background-nav-selected);
|
||
color:var(--text-nav-selected);
|
||
}
|
||
|
||
/* ======= ### Command Palette ==============*/
|
||
|
||
|
||
|
||
/* ======= ### Other panes ==============*/
|
||
|
||
|
||
|
||
/* ======= ### Note name ==============*/
|
||
|
||
.workspace-leaf.mod-active .view-header-title {
|
||
color: var(--text-normal-original);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Font adjustments for pane headers */
|
||
.view-header-title {
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.workspace-leaf.mod-active .view-header {
|
||
background-color: var(--background-primary-alt);
|
||
border-bottom: 2px solid var(--interactive-accent);
|
||
}
|
||
|
||
/* ======= ## System menu ==============*/
|
||
|
||
.vertical-tab-header {
|
||
background-color: var(--background-nav);
|
||
}
|
||
|
||
.horizontal-tab-nav-item, .vertical-tab-nav-item {
|
||
background-color: var(--background-nav);
|
||
color: var(--text-muted);
|
||
padding: 10px 6px 10px 24px;
|
||
cursor: default;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.setting-item-name, .modal-title {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.modal {
|
||
background-color: var(--background-secondary);
|
||
border: 1px solid var(--background-modifier-box-shadow);
|
||
}
|
||
|
||
.community-plugin-search, .community-plugin-search-results {
|
||
background-color: var(--background-secondary);
|
||
}
|
||
|
||
.modal button:not(.mod-cta):not(.mod-warning), .modal.mod-settings button:not(.mod-cta):not(.mod-warning), .setting-hotkey.mod-empty {
|
||
background-color: var(--background-modifier-box-shadow);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.setting-hotkey {
|
||
background-color: var(--graph-attach);
|
||
color: var(--text-normal-original);
|
||
}
|
||
|
||
.community-plugin-item {
|
||
background-color: var(--background-secondary);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.community-plugin-name {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.community-plugin-info, .community-plugin-readme {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.vertical-tab-content {
|
||
background-color: var(--background-secondary);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.setting-item-control select {
|
||
color: var(--text-normal-original);
|
||
}
|
||
|
||
.community-theme {
|
||
background-color: var(--background-primary-alt);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ======= ## Common Plugins ==============*/
|
||
|
||
.kanban-plugin__lane-header-wrapper {
|
||
background-color: var(--background-primary-alt);
|
||
background: var(--background-primary-alt);
|
||
line-height: 1.6em;
|
||
}
|
||
|
||
|