Logseq - Gruvbox Gradient Theme w/transparency elements

gruvbox-gradient.css

@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');

/* GLOBAL SETTINGS */

:root {
    --ls-font-family: "Work Sans";
    --ls-main-content-max-width: 700px;
    --ls-main-content-max-width-wide: 900px;
}

/* Gradient Background */
.dark-theme #app-container, .white-theme #app-container {
    background-image: var(--bg-gradient);
}
.cp__sidebar-main-layout {
    background-color: transparent;
}

/* TRANSPARENCY ELEMENTS */
.color-level {
    background-color: var(--bg-color-1-faded)
}

.color-level .color-level {
    background-color:  var(--bg-color-1-faded);
}

.cp__right-sidebar-topbar {
    background-color: var(--bg-color-1-faded);
}

.cp__right-sidebar {
    background-color: var(--bg-color-1-faded);
}

#right-sidebar .block-properties {
    background-color: var(--bg-color-2-faded);
}

#right-sidebar .my-2.color-level .block-properties {
    background-color: var(--bg-color-2-faded);
}

.left-sidebar-inner {
    background-color: var(--bg-color-1-faded);
}

.cp__sidebar-left-layout:before {
    background-color: var(--bg-color-1-faded);
}

.left-sidebar-inner .new-page {
    background-color: var(--bg-color);
    width: 235px;
    padding: 1px;
    border-radius: 0px;
}
.left-sidebar-inner a.item:hover {
    background-color: transparent;
    color: var(--cd-active-color);
}

.block-properties {
    background-color: var(--bg-color-2-faded);
}

.page-reference:hover {
    background: var(--bg-color-1-faded);
}

a.button.active, a.button:hover {
    background: var(--bg-color-1-faded);
}

.ls-block img:hover {
    opacity: 1;
}
.ls-block img {
    opacity: 0.5;
}

/* NAVIGATOR BAR ICONS */
.cp__header-logo, .fade-link {
    color: var(--ls-link-text-color);
}

/* LEFT SIDEBAR */
.left-sidebar-inner a.item:hover {
    background: var(--bg-color-1-faded);
}
.left-sidebar-inner .nav-content-item>.header:hover {
    background: var(--bg-color-1-faded);
}
.left-sidebar-inner .nav-content-item>.header:hover * {
    color: var(--cd-active-color);
}
.left-sidebar-inner .nav-content-item>.bd ul a:hover {
    background: var(--bg-color-1-faded);
}
.left-sidebar-inner .nav-content-item>.bd ul a:hover {
    color: var(--cd-active-color);
}

.bg-indigo-600 {
    background-color: var(--cd-active-color);
}

/* Code Mirror Block */

.extensions__code-lang {
    top: 8px;
    padding: .10rem .30rem !important;
    color: var(--bg-color);
}

.extensions__code-lang {
    background-color: var(--cd-accent-color);
}

.extensions__code .code-editor {
    margin-top: 4px;
}

.CodeMirror pre.CodeMirror-line {
    box-shadow: none;
}

.dark-theme .CodeMirror-gutter,
.dark-theme .CodeMirror-lines,
.dark-theme .CodeMirror-scroll,
.dark-theme .CodeMirror-sizer {
    background-color: var(--bg-dark);
}
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
    background-color: var(--bg-color-1);
}

html[data-theme='light'] .CodeMirror-gutter,
.CodeMirror-lines,
.CodeMirror-scroll,
.CodeMirror-sizer {
    background-color: var(--color-level-1);
}

.cm-s-solarized.cm-s-dark {
    color: var(--ls-primary-text-color);
}

/* Code Mirror Colors */

.cm-s-solarized .cm-keyword {
    color: var(--cd-active-color);
}

.cm-s-solarized .cm-operator {
    color: var(--cd-active-color);
}

.cm-s-solarized .cm-property {
    color: var(--cd-alternate-color);
}

.cm-s-solarized .cm-builtin {
    color: var(--cd-alternate-color);
}

.cm-s-solarized .cm-number {
    color: var(--cd-accent-color);
}

.cm-s-solarized .cm-string {
    color: var(--cd-accent-color);
}

.cm-s-solarized .cm-comment {
    color: var(--cd-inactive-color);
}

.cm-s-solarized .cm-variable {
    color: var(--ls-primary-text-color);
}

.cm-s-solarized .cm-def,
.cm-s-solarized .cm-attribute {
    color: var(--cd-active-color);
}

/* Markdown Formatting */

mark {
    background-color: var(--cd-active-color);
    color: var(--bg-color);
}

.editor-inner .uniline-block:is(.h1, .h2),
.ls-block :is(h1, h2) {
    border-bottom: 0px solid !important;
}

.editor-inner .uniline-block:is(.h1,.h2), .ls-block :is(h1,h2) {
    margin: 0 0 0  !important;
}

.block-marker {
    color: var(--cd-active-color);
    opacity: 0.7;
    font-weight: 600;
}

.external-link:after {
    font-family: 'tabler-icons';
    margin-left: 3px;
    content: "\ea99";
    padding-left: 3px;
    font-size: 80%;
}

.external-link {
    color: var(--ls-link-text-color);
    border-bottom: 0px solid;
    text-decoration: underline;
    text-decoration-skip: none;
}

.external-link:hover {
    color: var(--ls-link-text-hover-color);
}

.block-ref {
    border-bottom: 0px solid var(--bg-color-6);
    color: var(--ls-primary-text-color);
    padding: 0px 0px;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--ls-primary-text-color);
    text-underline-offset: 1px;
    text-decoration-thickness: 1px;
}

.block-ref:hover {
    color: var(--cd-alternate-color);
    cursor: pointer;
    padding: 0px 0px;
}

.block-children {
    border-left: 0px solid var(--ls-guideline-color);
}

.block-children-left-border {
    background-color: var(--ls-guideline-color);
}

.block-children-left-border:hover {
    background-color: var(--cd-active-color) !important;
}

/* TYPOGRAPHY */

:not(pre)>code {
    font-family: "JetBrains Mono", "Fira Code";
    background-color: var(--ls-page-inline-code-bg-color);
    background-color: transparent;
    color: var(--cd-alternate-color);
    padding: 0px 1px !important;
    border-radius: 1px;
}

:not(pre)>code:before, :not(pre)>code:after {
    content: "`";
}

/*html[data-theme=light] .cp__right-sidebar .block-content {
    --ls-page-inline-code-bg-color: transparent !important;
}*/


/* Embedded page, main container reference window */

#main-content-container .references-blocks .block-properties {
    background-color: transparent;
}


/* References title and breadcrumbs */

.dark-theme .references .foldable-title .page-ref:hover,
.white-theme .references .foldable-title .page-ref:hover {
    color: var(--ls-link-ref-text-hover-color) !important;
}

/* === References Window Breadcrumbs === */

.mx-2.opacity-50 {
    font-size: 100%;
}

.block-parents a:not(.tag) {
    color: var(--ls-primary-text-color);
    font-size: 90%;
    filter: opacity(0.5);
}

.block-parents a:hover {
    color: var(--ls-primary-text-color) !important;
    filter: opacity(1);
}

.foldable-title .page-ref {
    color: var(--cd-active-color);
}

.color-level.rounded {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.my-2 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

li.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.form-checkbox {
    border: 1.5px solid var(--ls-page-checkbox-border-color);
    background-color: transparent;
    opacity: 0.7;
    border-radius: 50%;
    margin-left: 1px;
    position: relative;
    top: 0px;
}

.form-checkbox:checked {
    background-color: var(--cd-inactive-color);
    opacity: 0.4;
}

.done .tag {
    text-decoration: line-through;
}

/* PDF Viewer */

#pdf-layout-container[data-theme=light] .textLayer {
    background-color: #eceff4;
}

#pdf-layout-container[data-theme=dark] .textLayer {
    background-color: #2f3541;
}

#pdf-layout-container[data-theme=light] {
    background-color: #ced6e3;
}

#pdf-layout-container[data-theme=dark] {
    background-color: #22272f;
}

.textLayer .highlight.selected,
.textLayer ::selection {
    background-color: var(--cd-active-color);
}

:root {
    --ph-highlight-color-blue: var(--cd-accent-color);
    --ph-highlight-color-green: var(--cd-green-1);
    --ph-highlight-color-red: var(--cd-active-color);
    --ph-highlight-color-purple: var(--cd-pink-1);
    --ph-highlight-color-yellow: var(--cd-alternate-color);
    --ph-highlight-scroll-into-color: rgba(255, 75, 93, 0.67);
}

.hls-popup-box {
    background-color: var(--color-level-3);
}

::-webkit-scrollbar {
    width: 5px !important;
}

.editor-inner textarea {
    caret-color: var(--cd-active-color);
}

.cm-s-solarized.cm-s-dark,
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber, .cm-s-solarized.cm-s-light {
    text-shadow: none !important;
}

::selection {
    color: var(--bg-color);
}

.block-parents mark {
    text-decoration-color: var(--cd-inactive-color);
}

.page-property-key {
    color: var(--ls-primary-text-color);
}


.open-block-ref-link {
    background-color: var(--bg-color-1-faded);
    color: var(--cd-alternate-color);
    font-weight: 700;
}

.flex.flex-1.flex-row.w-full.mt-6 {
    margin-top: 0.5rem;
}

.block-properties {
    padding: 0px 8px;
    margin: 0px;
}
.white-theme .references-blocks :is(.CodeMirror-gutter,.CodeMirror-lines,.CodeMirror-scroll,.CodeMirror-sizer) {
    background-color: var(--bg-color-2);
}

.ls-block {
    font-weight: 400;
}
.ls-block b {
    font-weight: 600;
}
.page-reference .bracket {
    color: var(--ls-primary-text-color);
}

/* TAG MARKUPS */

a.tag {
    color: var(--ls-tag-text-color);
    background: transparent;
    background-size: 100%;
    font-size: 100%;
    padding: 0px;
    font-weight: 600;
}

a.tag[data-ref$="note"], a.tag[data-ref="project"], a.tag[data-ref="area"], a.tag[data-ref="resource"] {
    color: var(--cd-alternate-color);
    background: var(--cd-alternate-faded-color);
    border: 0px solid;
    font-size: 80%;
    line-height: 1em;
    padding: 2px 3px;
    font-weight: 700;
    border-radius: 2px;
}

a.tag[data-ref$="fixnote"], a.tag[data-ref$="sparknote"], a.tag[data-ref$="worknote"], a.tag[data-ref$="incnote"] {
    color: var(--cd-active-color);
    background: var(--ls-guideline-color);
    border: 0px solid;
    font-size: 80%;
    line-height: 1em;
    padding: 2px 3px;
    font-weight: 700;
    border-radius: 2px;
}

a.tag[data-ref$="note"]:after {
    content: "\efec";
    font-family: 'tabler-icons';
    margin-left: 3px;
    font-weight: 100;
    position: relative;
    top: 1px;
    padding-right: 3px;
}
a.tag[data-ref="sparknote"]:after {
    content: "\ea51";
    font-family: 'tabler-icons';
    margin-left: 3px;
    font-weight: 100;
    position: relative;
    top: 1px;
    padding-right: 3px;
}
a.tag[data-ref$="fixnote"]:after {
    content: "\ec2c";
    font-family: 'tabler-icons';
    margin-left: 3px;
    font-weight: 100;
    position: relative;
    top: 1px;
    padding-right: 3px;
}
a.tag[data-ref$="worknote"]:after {
    content: "\ea89";
    font-family: 'tabler-icons';
    margin-left: 3px;
    font-weight: 100;
    position: relative;
    top: 1px;
    padding-right: 3px;
}
a.tag[data-ref$="incnote"]:after {
    content: "\ea48";
    font-family: 'tabler-icons';
    margin-left: 3px;
    font-weight: 100;
    position: relative;
    top: 1px;
    padding-right: 3px;
}
a.tag[data-ref$="area"]:after, a.tag[data-ref$="project"]:after, a.tag[data-ref$="incident"]:after, a.tag[data-ref$="resource"]:after {
    content: "\f01a";
    font-family: 'tabler-icons';
    margin-left: 3px;
    font-weight: 100;
    position: relative;
    top: 1px;
    padding-right: 3px;
}

/* PAGE REFERENCE MARKUPS */

.page-ref[data-ref^="z_"] {
    font-weight: 700;
    color: var(--cd-alternate-color);
}
.page-ref[data-ref$="(moc)"] {
    font-weight: 700;
    color: var(--cd-alternate-color);
}
.page-ref[data-ref="literature notes"] {
    color: var(--cd-accent-color);
    font-weight: 700;
}
.page-ref[data-ref="permanent notes"] {
    color: var(--cd-alternate-color);
    font-weight: 700;
}

.page-ref[data-ref^="z_"]:before, h1.title[data-ref^="z_"]:before {
    content: "\ed51";
    font-family: 'tabler-icons';
    margin-right: 3px;
    position: relative;
    top: 1px;
    font-weight: 100;
  }
  .page-ref[data-ref$="(moc)"]:before, h1.title[data-ref$="(moc)"]:before {
    content: "\ed50";
    font-family: 'tabler-icons';
    margin-right: 3px;
    position: relative;
    top: 1px;
    font-weight: 100;
  }
  .page-ref[data-ref="literature notes"]:before, h1.title[data-ref="literature notes"]:before {
    content: "\ed4f";
    font-family: 'tabler-icons';
    margin-right: 3px;
    position: relative;
    top: 1px;
    font-weight: 100;
  }
  .page-ref[data-ref="permanent notes"]:before, h1.title[data-ref="permanent notes"]:before {
    content: "\eb96";
    font-family: 'tabler-icons';
    margin-right: 3px;
    position: relative;
    top: 1px;
    font-weight: 100;
  }
  
  span[data-page-ref^="Z:"]:after {
    content: "\ed51";
    font-family: 'tabler-icons';
    margin-left: 3px;
    margin-right: 12px;
    position: relative;
    top: 0px;
    font-weight: 100;
  }

  span[data-page-ref$="(moc)"]:after {
    content: "\ed50";
    font-family: 'tabler-icons';
    margin-left: 3px;
    margin-right: 12px;
    position: relative;
    top: 0px;
    font-weight: 100;
  }
  
  span[data-page-ref^="LN-"]:after {
    content: "\ed4f";
    font-family: 'tabler-icons';
    margin-left: 3px;
    margin-right: 12px;
    position: relative;
    top: 0px;
    font-weight: 100;
  }
  span[data-page-ref="Literature Notes"]:after {
    content: "\ed4f";
    font-family: 'tabler-icons';
    margin-left: 3px;
    margin-right: 12px;
    position: relative;
    top: 0px;
    font-weight: 100;
  }
  span[data-page-ref="Permanent Notes"]:after {
    content: "\ed4f";
    font-family: 'tabler-icons';
    margin-left: 3px;
    margin-right: 12px;
    position: relative;
    top: 0px;
    font-weight: 100;
  }
  
  span[data-page-ref^="Z:"], span[data-page-ref$="(moc)"], span[data-page-ref$="(MOC)"] span[data-page-ref="ISS"], span[data-page-ref^="OBS "], span[data-page-ref="Literature Notes"], span[data-page-ref="Permanent Notes"] {
    display: inline-flex;
  }

/* References Markup */
a.page-ref[data-ref^="apr "], a.page-ref[data-ref^="mar "], a.page-ref[data-ref^="feb "], a.page-ref[data-ref^="jan "], a.page-ref[data-ref^="may "], a.page-ref[data-ref^="jun "], a.page-ref[data-ref^="jul "], a.page-ref[data-ref^="aug "], a.page-ref[data-ref^="sep "], a.page-ref[data-ref^="oct "], a.page-ref[data-ref^="nov "], a.page-ref[data-ref^="dec "] {
    color: var(--cd-accent-color);
    font-weight: 700;
}
a.page-ref[data-ref^="apr "]:before, a.page-ref[data-ref^="mar "]:before, a.page-ref[data-ref^="feb "]:before, a.page-ref[data-ref^="jan "]:before, a.page-ref[data-ref^="may "]:before, a.page-ref[data-ref^="jun "]:before, a.page-ref[data-ref^="jul "]:before, a.page-ref[data-ref^="aug "]:before, a.page-ref[data-ref^="sep "]:before, a.page-ref[data-ref^="oct "]:before, a.page-ref[data-ref^="nov "]:before, a.page-ref[data-ref^="dec "]:before {
    content: "\ea53";
    font-family: 'tabler-icons';
    margin-right: 5px;
    font-weight: 100;
    position: relative;
    top: 1px;
}
.color-level.rounded {
    border: 0px solid var(--ls-guideline-color);
}

/* Page References */
.page-ref {
    color: var(--ls-link-ref-text-color);
    text-decoration: none;
    text-decoration-thickness: 1.5px;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    text-decoration-color: var(--ls-page-checkbox-color);
}

/* TITLE MARKUPS */
h1.title[data-ref^="apr "], h1.title[data-ref^="mar "], h1.title[data-ref^="feb "], h1.title[data-ref^="jan "], h1.title[data-ref^="may "], h1.title[data-ref^="jun "], h1.title[data-ref^="jul "], h1.title[data-ref^="aug "], h1.title[data-ref^="sep "], h1.title[data-ref^="oct "], h1.title[data-ref^="nov "], h1.title[data-ref^="dec "] {
    color: var(--cd-accent-color);
    font-weight: 700;
}
h1.title[data-ref^="apr "]:before, h1.title[data-ref^="mar "]:before, h1.title[data-ref^="feb "]:before, h1.title[data-ref^="jan "]:before, h1.title[data-ref^="may "]:before, h1.title[data-ref^="jun "]:before, h1.title[data-ref^="jul "]:before, h1.title[data-ref^="aug "]:before, h1.title[data-ref^="sep "]:before, h1.title[data-ref^="oct "]:before, h1.title[data-ref^="nov "]:before, h1.title[data-ref^="dec "]:before {
    content: "\ea53";
    font-family: 'tabler-icons';
    margin-right: 5px;
    font-weight: 100;
    position: relative;
    top: 1px;
}

/* JOURNAL PAGES */
.journal-item h1.title {
    color: var(--cd-accent-color);
}
.journal-item h1.title:before {
    content: "\ea53";
    font-family: 'tabler-icons';
    margin-left: 3px;
    font-weight: 100;
}

/* FIXES */
.whitespace-nowrap {
    white-space: normal;
}

.dark-theme,
html[data-theme='dark'] {
    --bg-gradient: linear-gradient(to right top, #1c1c1c, #3e3039, #694544, #856444, #848d51);
    --bg-dark-faded: hsl(0deg 0% 8% / 41%);
    --bg-color-faded: hsl(0deg 0% 11% / 41%);
    --bg-color-1-faded: hsl(0deg 0% 14% / 41%);
    --bg-color-2-faded: hsl(0deg 0% 17% / 41%);
    --bg-color-3-faded: hsl(0deg 0% 20% / 41%);
    --bg-color-4-faded: hsl(0deg 0% 23% / 41%);
    --bg-color-5-faded: hsl(0deg 0% 26% / 41%);
    --bg-color-6-faded: hsl(0deg 0% 29% / 41%);
    --bg-dark: hsl(0, 0%, 8%);
    --bg-color: hsl(0, 0%, 11%);
    --bg-color-1: hsl(0, 0%, 14%);
    --bg-color-2: hsl(0, 0%, 17%);
    --bg-color-3: hsl(0, 0%, 20%);
    --bg-color-4: hsl(0, 0%, 23%);
    --bg-color-5: hsl(0, 0%, 26%);
    --bg-color-6: hsl(0, 0%, 29%);
    --cd-inactive-color: hsl(0, 0%, 40%);
    --cd-active-color: #ea6962;
    --cd-accent-color: #e78c50;
    --cd-alternate-color: #a9b665;
    --cd-alternate-faded-color: #a9b66538;
    --ls-primary-background-color: var(--bg-color);
    --ls-secondary-background-color: var(--bg-color-1);
    --ls-tertiary-background-color: var(--bg-color-2);
    --ls-quaternary-background-color: var(--bg-color-3);
    --ls-table-tr-even-background-color: var(--color-level-3);
    --ls-active-primary-color: var(--cd-active-color);
    --ls-active-secondary-color: var(--cd-alternate-color);
    --ls-block-properties-background-color: var(--color-level-1);
    --ls-page-properties-background-color: var(--color-level-1);
    --ls-block-ref-link-text-color: var(--cd-active-color);
    --ls-search-background-color: var(--color-level-4);
    --ls-mark-bg-color: var(--cd-accent-color);
    --ls-mark-color: var(--cd-active-color);
    --ls-border-color: var(--cd-accent-color);
    --ls-secondary-border-color: var(--cd-alternate-color);
    --ls-guideline-color: #ea696236;
    --ls-menu-hover-color: var(--ls-secondary-background-color);
    --ls-primary-text-color: #d3bd97;
    --ls-secondary-text-color: #a89985;
    --ls-title-text-color: var(--ls-primary-text-color);
    --ls-link-text-color: var(--cd-alternate-color);
    --ls-link-text-hover-color: var(--cd-alternate-color);
    --ls-link-ref-text-color: var(--cd-active-color);
    --ls-link-ref-text-hover-color: var(--cd-alternate-color);
    --ls-tag-text-color: var(--cd-active-color);
    --ls-tag-text-hover-color: var(--cd-alternate-color);
    --ls-slide-background-color: var(--ls-primary-background-color);
    --ls-block-bullet-border-color: #ea696236;
    --ls-block-bullet-color: var(--cd-active-color);
    --ls-block-highlight-color: var(--color-level-3);
    --ls-selection-background-color: var(--cd-active-color);
    --ls-page-checkbox-color: #ea696249;
    --ls-page-checkbox-border-color: var(--cd-active-color);
    --ls-page-blockquote-color: var(--ls-primary-text-color);
    --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
    --ls-page-blockquote-border-color: var(--ls-border-color);
    --ls-page-inline-code-color: var(--cd-alternate-color);
    --ls-page-inline-code-bg-color: var(--color-level-2);
    --ls-scrollbar-foreground-color: var(--cd-inactive-color);
    --ls-scrollbar-background-color: var(--color-level-2);
    --ls-scrollbar-thumb-hover-color: var(--cd-inactive-color);
    --ls-head-text-color: var(--ls-link-text-color);
    --ls-cloze-text-color: var(--cd-active-color);
    --ls-icon-color: var(--cd-active-color);
    --ls-search-icon-color: var(--ls-link-text-color);
    --ls-a-chosen-bg: var(--ls-secondary-background-color);
    --ls-right-sidebar-code-bg-color: var(--bg-color-3);
    --color-level-1: var(--ls-secondary-background-color);
    --color-level-2: var(--ls-tertiary-background-color);
    --color-level-3: var(--ls-quaternary-background-color);
    --color-level-4: var(--bg-color-4);
    --color-level-5: var(--bg-color-5);
    --color-level-6: var(--bg-color-5);
}

.white-theme,
html[data-theme='light'] {
    --bg-gradient: linear-gradient(to right top, #fbf0c9, #c1d5ae, #88b89e, #529995, #24798b);
    --bg-color-faded: hsl(46deg 33% 11% / 10%);
    --bg-color-1-faded: hsl(46deg 33% 14% / 10%);
    --bg-color-2-faded: hsl(46deg 33% 17% / 10%);
    --bg-color-3-faded: hsl(46deg 33% 20% / 10%);
    --bg-color-4-faded: hsl(46deg 33% 23% / 10%);
    --bg-color-5-faded: hsl(46deg 33% 26% / 10%);
    --bg-color-6-faded: hsl(46deg 33% 29% / 10%);
    --bg-color: #e4ddc9;
    --bg-color-1: hsl(46, 33%, 81%);
    --bg-color-2: hsl(46, 33%, 78%);
    --bg-color-3: hsl(46, 33%, 75%);
    --bg-color-4: hsl(46, 33%, 72%);
    --bg-color-5: hsl(46, 33%, 69%);
    --bg-color-6: hsl(46, 33%, 66%);
    --cd-inactive-color: hsl(46, 33%, 55%);
    --cd-active-color: #6d8ea6;
    --cd-accent-color: #2a8a8f;
    --cd-alternate-color: #fe8019;
    --cd-alternate-faded-color: #55866f3f;
    --ls-primary-background-color: var(--bg-color);
    --ls-secondary-background-color: var(--bg-color-1);
    --ls-tertiary-background-color: var(--bg-color-2);
    --ls-quaternary-background-color: var(--bg-color-3);
    --ls-table-tr-even-background-color: var(--color-level-3);
    --ls-active-primary-color: var(--cd-active-color);
    --ls-active-secondary-color: var(--cd-alternate-color);
    --ls-block-properties-background-color: var(--color-level-1);
    --ls-page-properties-background-color: var(--color-level-1);
    --ls-block-ref-link-text-color: var(--cd-active-color);
    --ls-search-background-color: var(--color-level-3);
    --ls-mark-bg-color: var(--cd-accent-color);
    --ls-mark-color: var(--cd-active-color);
    --ls-border-color: var(--cd-accent-color);
    --ls-secondary-border-color: var(--cd-alternate-color);
    --ls-guideline-color: #6d8ea640;
    --ls-menu-hover-color: var(--ls-secondary-background-color);
    --ls-primary-text-color: #3f3930;
    --ls-secondary-text-color: #6a6e66;
    --ls-title-text-color: var(--ls-primary-text-color);
    --ls-link-text-color: var(--cd-accent-color);
    --ls-link-text-hover-color: var(--cd-alternate-color);
    --ls-link-ref-text-color: var(--cd-active-color);
    --ls-link-ref-text-hover-color: var(--cd-alternate-color);
    --ls-tag-text-color: var(--cd-active-color);
    --ls-tag-text-hover-color: var(--cd-alternate-color);
    --ls-slide-background-color: var(--ls-primary-background-color);
    --ls-block-bullet-border-color: #6d8ea640;
    --ls-block-bullet-color: var(--cd-active-color);
    --ls-block-highlight-color: var(--color-level-3);
    --ls-selection-background-color: var(--cd-active-color);
    --ls-page-checkbox-color: #c14a4a5b;
    --ls-page-checkbox-border-color: var(--cd-active-color);
    --ls-page-blockquote-color: var(--ls-primary-text-color);
    --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
    --ls-page-blockquote-border-color: var(--ls-border-color);
    --ls-page-inline-code-color: var(--cd-alternate-color);
    --ls-page-inline-code-bg-color: var(--color-level-2);
    --ls-scrollbar-foreground-color: var(--ls-guideline-color);
    --ls-scrollbar-background-color: var(--color-level-2);
    --ls-scrollbar-thumb-hover-color: var(--cd-inactive-color);
    --ls-head-text-color: var(--ls-link-text-color);
    --ls-cloze-text-color: var(--cd-active-color);
    --ls-icon-color: var(--cd-active-color);
    --ls-search-icon-color: var(--ls-link-text-color);
    --ls-a-chosen-bg: var(--ls-secondary-background-color);
    --ls-right-sidebar-code-bg-color: var(--bg-color-3);
    --color-level-1: var(--ls-secondary-background-color);
    --color-level-2: var(--ls-tertiary-background-color);
    --color-level-3: var(--ls-quaternary-background-color);
    --color-level-4: var(--bg-color-4);
    --color-level-5: var(--bg-color-5);
    --color-level-6: var(--bg-color-5);
}