obsidian.css

@charset "UTF-8";
/*
* Tested with Obsidian v0.10.11 
*
* Author: Wiktoria Mielcarek (Braweria) 
* Name: Spectrum 
* Licence: MIT 
* GitHub Repo: https://github.com/Braweria/Spectrum 
* Version: 0.15.7

! CONTENT
*.............1. Variables
*.............2. Textarea
*................. Body
*................. Paragraph
*................. Preview
*.............3. Text Decorations
*................. Bold
*................. Emphasis
*................. Highlight
*................. Links
*................. Headings
*................. Text Cursor Indicator
*................. Tags
*................. Attachments
*.............4. Workspace
*................. Ribbon
*................. Handle Bars
*................. Nav
*................. Header Container
*................. Scrollbar
*................. Folders
*.............5. Tables
*.............6. Codeblocks
*................. Mermaid
*................. Codingblocks
*.............7. Embed Notes
*.............8. Vault Launch Progress Bar
*.............9. Footnotes
*............10. Listings
*................. List
*................. Task List
*............11. Graph
*............12. Query
*............13. Blockquotes
*............14. Kanban
*............15. Floating Images
*............16. Eisenhower Matrix

*............100. Other People's Plugins
*................. Daily Planner

*/
/*
*..........................1. Variables */
:root,
.theme-dark {
  --main-node: #ffbe00;
  --main-node-hover: #fe6a26;
  --tags: #f19eee;
  --external-link: #82d2e8;
  --external-link-hidden: rgba(131, 197, 235, 0.3);
  --main-background: #242424;
  --secondary-background: #1b1b1b;
  --secondary-background-low-opacity: #1b1b1b54;
  --attachments: #69bceb;
  --accent-1: #f5704c;
  --accent-2: #f5a14c;
  --accent-3: #ede482;
  --accent-4: #aade62;
  --accent-5: #62deac;
  --accent-6: #62b7de;
  /* Overriding Obsidian Variables */
  --default-font: 'JetBrains Mono', monospace;
  --font-monospace: var(--default-font);
  --text-normal: #c9c9c9;
  --background-primary: var(--main-background);
  --background-secondary: var(--secondary-background);
}

:root,
.theme-light {
  --main-background: #f5f5f5;
  --secondary-background: #e2e2e2;
  --secondary-background-low-opacity: #e2e2e254;
  --main-node: #dea500;
  --accent-3: #b7ad3a;
  --accent-4: #8ac536;
  --accent-5: #3cad7f;
  --external-link: #307a8e;
  --external-link-hidden: #307a8e99;
}

/*
*..........................2. Textarea */
.cm-s-obsidian,
body {
  line-height: 1.7rem;
}

.markdown-preview-view div p {
  margin-bottom: 1.5rem;
}

.markdown-source-view.is-readable-line-width .CodeMirror {
  max-width: 750px;
}

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
  max-width: 100%;
}

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div > *:not(iframe) {
  max-width: 750px;
  width: 100%;
}

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div > table,
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer > div > .mermaid {
  max-width: 100%;
}

/* 
*..........................3. Text Decorations */
.cm-s-obsidian .cm-strong,
strong {
  color: #57e28d;
  color: var(--accent-4);
  font-weight: 900;
}

.cm-em,
em {
  color: #f1eca5;
  color: var(--accent-3);
}

.cm-s-obsidian span.cm-formatting-highlight,
.cm-s-obsidian span.cm-highlight,
.markdown-preview-view mark {
  background: #e672cc;
  background: #f5a1e3;
  color: var(--background-primary);
  font-weight: 600;
}

.markdown-preview-view mark {
  padding: 0 0.5rem;
}

mark .cm-s-obsidian .cm-strong,
mark strong {
  color: var(--background-primary);
  color: #3d0731;
  font-weight: 900;
}

mark .cm-em,
mark em {
  color: #8a1370;
}

a {
  color: var(--main-node);
}

.cm-s-obsidian span.cm-hmd-internal-link.cm-overlay {
  color: var(--main-node);
  font-weight: 900;
}

.cm-s-obsidian span.cm-formatting-link {
  color: var(--main-node);
  font-weight: 500;
}

.cm-s-obsidian span.cm-url,
.cm-s-obsidian span.cm-formatting-link.cm-link {
  color: var(--external-link);
}

span.cm-formatting.cm-url + span.cm-url {
  color: var(--external-link-hidden);
}

.cm-s-obsidian span.cm-link,
.cm-s-obsidian span.cm-hmd-internal-link,
.cm-s-obsidian span.cm-formatting.cm-url,
.external-link {
  color: var(--external-link);
}

a:hover {
  color: var(--main-node-hover);
}

.cm-header-1,
h1 {
  color: var(--accent-1);
}

.cm-header-2,
h2 {
  color: var(--accent-2);
}

.cm-header-3,
h3 {
  color: var(--accent-3);
}

.cm-header-4,
h4 {
  color: var(--accent-4);
}

.cm-header-5,
h5 {
  color: var(--accent-5);
}

.cm-header-6,
.markdown-preview-view h6 {
  color: var(--accent-6);
}

.CodeMirror-cursor,
.CodeMirror div.CodeMirror-secondarycursor {
  border-color: var(--main-node);
}

.cm-s-obsidian span.cm-hashtag,
.tag {
  color: var(--tags);
}

.nav-file-tag {
  background: none;
  border: 1px solid var(--attachments);
  color: var(--attachments);
  font-weight: 400;
}

/* 
*..........................4. Workspace */
.workspace-ribbon.mod-left.is-collapsed,
.workspace-ribbon.mod-right.is-collapsed {
  border: 0;
}

.workspace-ribbon-collapse-btn {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.workspace-ribbon {
  background: var(--background-secondary);
}

.workspace-ribbon.mod-left {
  display: flex;
}

.workspace-ribbon.mod-left .side-dock-actions {
  order: 1;
}

.workspace-ribbon.mod-left .workspace-ribbon-collapse-btn {
  order: 2;
}

.workspace-ribbon.mod-left .side-dock-settings {
  order: 3;
}

.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
  background: var(--background-secondary);
}

.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
  background: var(--main-background);
}

.workspace-split.mod-left-split > .workspace-leaf-resize-handle:hover,
.workspace-split.mod-right-split > .workspace-leaf-resize-handle:hover,
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle:hover {
  background: var(--main-node);
}

.nav-action-button.is-active,
.nav-action-button.is-active .widget-icon {
  background-color: var(--main-node);
  color: var(--background-secondary);
  fill: var(--background-secondary);
}

.nav-action-button.is-active:hover {
  color: var(--secondary-background);
  background: var(--main-node-hover);
}

.nav-action-button:hover,
.nav-action-button:hover .widget-icon {
  color: var(--main-node-hover);
  fill: var(--main-node-hover);
}

.workspace-split.mod-root
> .workspace-leaf:last-of-type
.workspace-leaf-content,
.workspace-split.mod-root
> .workspace-leaf:first-of-type
.workspace-leaf-content {
  border-radius: 0;
}

.workspace-split.mod-right-split .workspace-tabs .workspace-leaf {
  border-radius: 0;
}

.workspace-split.mod-root
> .workspace-leaf:first-of-type:last-of-type
.view-header,
.view-header {
  border-bottom: 0px;
}

.workspace-tab-header-container,
.workspace-tab-container-before.is-before-active,
.workspace-tab-container-after.is-after-active,
.workspace-tab-header.is-before-active,
.workspace-tab-header.is-after-active,
.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: var(--background-secondary);
}

.workspace-tab-header-container {
  padding-top: 10px;
  height: auto;
}

.workspace-tab-header.is-active
.workspace-tab-header-inner
.workspace-tab-header-inner-icon
svg
path {
  stroke: var(--main-node);
}

.workspace-split.mod-left-split .workspace-tabs .workspace-leaf {
  border-top-left-radius: 0;
}

.workspace-leaf.mod-active .view-header {
  border-bottom: 2px solid var(--main-node);
}

::-webkit-scrollbar {
  width: 2px;
  background-color: var(--main-background);
}

.nav-folder.is-collapsed .nav-folder-title .nav-folder-title-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav-folder.is-collapsed .nav-folder-title .nav-folder-title-content::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.43 12' height='13px'%3E%3Cpath style='fill:%23999999' d='M6.15,1a.67.67,0,0,1,.5.21L8.22,2.78a2.69,2.69,0,0,0,1.92.79h3.57a.72.72,0,0,1,.72.72v6a.71.71,0,0,1-.72.71h-12A.71.71,0,0,1,1,10.29V1.71A.71.71,0,0,1,1.71,1H6.15m0-1H1.71A1.72,1.72,0,0,0,0,1.71v8.58A1.72,1.72,0,0,0,1.71,12h12a1.72,1.72,0,0,0,1.72-1.71v-6a1.72,1.72,0,0,0-1.72-1.72H10.14a1.7,1.7,0,0,1-1.21-.5L7.36.5A1.72,1.72,0,0,0,6.15,0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 15px;
}

.nav-folder .nav-folder-title .nav-folder-title-content::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.12 12' height='13px'%3E%3Cpath style='fill:%23999999' d='M16.11,4H16a1.76,1.76,0,0,0-1.75-1.43H10.51a1.8,1.8,0,0,1-1.25-.5L7.63.5A1.8,1.8,0,0,0,6.37,0H1.78A1.75,1.75,0,0,0,0,1.71v8.58A1.75,1.75,0,0,0,1.78,12H14.61a2,2,0,0,0,1.88-1.3l1.5-4A2,2,0,0,0,16.11,4ZM1,1.71A.75.75,0,0,1,1.78,1H6.37a.83.83,0,0,1,.57.22L8.56,2.79a2.83,2.83,0,0,0,1.95.78h3.71a.78.78,0,0,1,.71.43H4.39A2,2,0,0,0,2.51,5.3L1,9.3a.06.06,0,0,0,0,0ZM17.05,6.35,16,9.15l-.45,1.2a1,1,0,0,1-.94.65H2.89a1,1,0,0,1-.83-.43A1,1,0,0,1,2,9.65l1.5-4A1,1,0,0,1,4.39,5H16.11a1,1,0,0,1,.83.43A1,1,0,0,1,17.05,6.35Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 13px;
}

/*
*..........................5. Tables */
table {
  width: 100%;
}

table thead tr {
  background: #00000034;
}

table tbody tr:nth-child(even) {
  background: #00000034;
}

table tbody tr:hover {
  background: #afafaf10;
}

.theme-light table tbody tr:hover {
  background: white;
}

/*
*..........................6. Codeblocks */
.mermaid {
  display: flex;
  justify-content: center;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg,
.cm-s-obsidian div.HyperMD-codeblock-end-bg,
.cm-s-obsidian div.HyperMD-codeblock-bg,
.cm-s-obsidian span.cm-inline-code {
  background: var(--secondary-background);
  border-color: black;
}

.cm-s-obsidian pre.HyperMD-codeblock-begin {
  padding-top: 0.5rem;
}

.cm-s-obsidian div.HyperMD-codeblock-end-bg {
  border-bottom: 1px solid black;
}

.cm-s-obsidian pre.HyperMD-codeblock,
.cm-s-obsidian span.cm-inline-code {
  color: #928b78;
}

.markdown-preview-view code {
  color: #c1b594;
}

.theme-dark pre {
  position: relative;
}

.theme-dark pre[class*='language-'] {
  background: var(--secondary-background);
  border: 1px solid black;
}

.theme-dark pre[class*='language-']::after {
  content: attr(class);
  position: absolute;
  right: 1rem;
  bottom: 0.5rem;
}

.cm-s-obsidian .CodeMirror-code {
  padding-right: 0;
}

/*
*..........................7. Embed Notes */
.internal-embed.is-loaded:not(.image-embed) {
  border: 1px solid black;
  border-radius: 10px;
}

.internal-embed.is-loaded .markdown-embed {
  border: 0px solid black;
}

/*
*..........................8. Vault Launch Progress Bar */
.progress-bar-subline {
  position: absolute;
  background-color: var(--main-node);
  height: 8px;
}

.progress-bar-line {
  position: absolute;
  opacity: 0.4;
  background-color: #ffbf007c;
  width: 150%;
  height: 8px;
}

/*
*..........................9. Footnotes */
.footnote-backref {
  color: var(--main-node);
}

.footnote-backref:hover {
  color: var(--main-node-hover);
}

.footnotes li::marker {
  color: var(--main-node);
}

.footnote-ref {
  font-size: 0.7rem;
}

/*
*..........................10. Listings */
.cm-hmd-list-indent .cm-tab,
ul ul {
  position: relative;
}

.cm-hmd-list-indent .cm-tab::before,
ul ul::before {
  content: '';
  border-left: 1px solid var(--main-node);
  position: absolute;
  left: -15px;
  top: 0;
  bottom: 0;
}

ul li {
  margin-bottom: 10px;
}

ul li::marker {
  color: white;
}

.theme-light ul li::marker {
  color: black;
}

.markdown-preview-view ul > li.task-list-item.is-checked {
  text-decoration: none;
}

.markdown-preview-view .task-list-item-checkbox {
  -webkit-appearance: none;
  box-sizing: border-box;
  border: 1px solid var(--text-muted);
  border-radius: 2px;
  position: relative;
  width: 1.3em;
  height: 1.3em;
  margin: 0;
  outline: none;
  margin-right: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  vertical-align: baseline;
  margin-right: 1rem;
  filter: none;
}

.markdown-preview-view li .task-list-item-checkbox:checked::before {
  content: '✔';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150%;
  height: 160%;
  line-height: 0;
  font-size: 1.5rem;
  color: var(--main-node);
  display: flex;
  justify-content: center;
  align-items: center;
}

.markdown-preview-view li li .task-list-item-checkbox:checked::before {
  color: var(--accent-1);
}

.markdown-preview-view li li li .task-list-item-checkbox:checked::before {
  color: var(--accent-2);
}

.markdown-preview-view li li li li .task-list-item-checkbox:checked::before {
  color: var(--accent-3);
}

.markdown-preview-view li li li li li .task-list-item-checkbox:checked::before {
  color: var(--accent-4);
}

.markdown-preview-view li li li li li li .task-list-item-checkbox:checked::before {
  color: var(--accent-5);
}

.markdown-preview-view li li li li li li li .task-list-item-checkbox:checked::before {
  color: var(--accent-6);
}

/*
*..........................11. Graph */
.view-content iframe {
  background: var(--secondary-background);
}

.graph-view.color-fill {
  color: var(--main-node);
}

.theme-dark .graph-view.color-fill-unresolved {
  color: var(--main-node);
  opacity: 0.5;
}

* .theme-dark .graph-view.color-fill-tag {
  color: var(--tags);
}

.theme-dark .graph-view.color-fill-attachment {
  color: var(--attachments);
}

.graph-view.color-line {
  color: #676767;
}

.graph-view.color-line-highlight,
.graph-view.color-fill-highlight {
  color: #fe6a26;
}

/*
*..........................12. Query */
.search-result-file-matched-text {
  background: #d44521;
}

.tree-item-self .tree-item-inner .search-result-file-matched-text {
  background: none;
}

.internal-query .internal-query-header {
  background: #00000034;
}

.internal-query
.search-results-children
.tree-item.search-result:nth-child(odd) {
  background: #00000034;
}

/*
*..........................13. Blockquotes */
.markdown-preview-view blockquote {
  border-color: #8f60e6;
  border-width: 1px;
  border-radius: 5px;
}

/*
*..........................14. Kanban */
.kanban ul {
  display: flex;
  flex-direction: row;
  border: 2px solid var(--secondary-background);
  background-color: var(--secondary-background-low-opacity);
  padding: 1rem;
  border-radius: 1rem;
  flex-wrap: wrap;
}

.kanban ul li {
  flex: 1 1 20%;
  list-style: none;
}

.kanban ul ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0rem;
  margin-right: 2.5rem;
  margin-top: 1rem;
  border-radius: 0;
  border: 0;
  background: none;
}

.kanban ul ul li {
  width: 100%;
  display: block;
  background: var(--secondary-background);
  margin-bottom: 5px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}

.kanban ul ul li:nth-child(even) {
  background: var(--main-background);
}

.kanban ul ul li:hover {
  background: #afafaf10;
}

.kanban ul ul li .task-list-item-checkbox {
  margin-left: 1.5rem;
}

.kanban ul ul ul {
  margin-right: 0;
}

.kanban ul ul::before {
  border-left: 0;
}

.markdown-preview-view.is-readable-line-width.kanban
.markdown-preview-sizer
> div
> ul {
  max-width: 100%;
}

.theme-light .kanban ul {
  background-color: #dadada2b;
}

.theme-light .kanban ul li ul li:hover {
  background: white;
}

/*
*..........................15. Floating Images */
img[alt~='float-right'],
div[alt~='float-right'] {
  float: right;
  margin-left: 1rem;
  margin-top: 1rem;
}

img[alt~='float-left'],
div[alt~='float-left'] {
  float: left;
  margin-right: 1rem;
  margin-top: 1rem;
}

/*
*..........................16. Eisenhower Matrix */
.markdown-preview-view.matrix table tr {
  display: flex;
}

.markdown-preview-view.matrix table tr th,
.markdown-preview-view.matrix table tr td {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.markdown-preview-view.matrix table tr th > *,
.markdown-preview-view.matrix table tr td > * {
  width: 100%;
  height: 100%;
  background-color: var(--main-background);
}

.markdown-preview-view.matrix table tr td {
  background-color: var(--main-background);
}

.markdown-preview-view.matrix table tr:nth-child(1) td:nth-child(1) > * {
  border-color: var(--accent-1);
}

.markdown-preview-view.matrix table tr:nth-child(1) td:nth-child(1):hover {
  background-color: var(--accent-1);
}

.markdown-preview-view.matrix table tr:nth-child(1) td:nth-child(2) > * {
  border-color: var(--accent-2);
}

.markdown-preview-view.matrix table tr:nth-child(1) td:nth-child(2):hover {
  background-color: var(--accent-2);
}

.markdown-preview-view.matrix table tr:nth-child(2) td:nth-child(1) > * {
  border-color: var(--accent-4);
}

.markdown-preview-view.matrix table tr:nth-child(2) td:nth-child(1):hover {
  background-color: var(--accent-4);
}

.markdown-preview-view.matrix table tr:nth-child(2) td:nth-child(2) > * {
  border-color: var(--accent-5);
}

.markdown-preview-view.matrix table tr:nth-child(2) td:nth-child(2):hover {
  background-color: var(--accent-5);
}

/*
*..........................100. Other People's Plugins */
/** Day Planner */
/*** Progress Bar */
.day-planner .day-planner-progress-bar {
  background: var(--secondary-background);
  background: #cfcfcf;
}