Custom catppuccin OLED config

Custom-ctp-old.css

/* Custom fonts */
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');

:root {
  --color-base-00: rgb(var(--ctp-crust));
  --color-base-10: rgb(var(--ctp-mantle));
  --color-base-20: rgb(var(--ctp-base));
  --color-base-30: rgb(var(--ctp-surface0));
  --color-base-40: rgb(var(--ctp-surface1));
  --color-base-50: rgb(var(--ctp-surface2));
  --color-base-60: rgb(var(--ctp-overlay0));
  --color-base-70: rgb(var(--ctp-overlay1));
  --color-base-80: rgb(var(--ctp-overlay2));
  --color-base-90: rgb(var(--ctp-subtext0));
  --color-base-100: rgb(var(--ctp-text));
}

:root {
  --ctp-primary-background-color: rgb(var(--ctp-base));
  --ctp-secondary-background-color: rgb(var(--ctp-mantle));
  --ctp-tertiary-background-color: rgb(var(--ctp-crust));
  --ctp-quaternary-background-color: rgb(var(--ctp-surface0));
  --ctp-color-level-1: var(--color-base-10);
  --ctp-color-level-2: var(--color-base-20);
  --ctp-color-level-3: var(--color-base-30);
  --ctp-color-level-4: var(--color-base-40);
  --ctp-color-level-5: var(--color-base-50);
  --ctp-color-level-6: var(--color-base-60);
  --ctp-active-primary-color: rgb(var(--ctp-accent));
  --ctp-active-secondary-color: rgb(var(--ctp-accent), 0.9);
  --ctp-table-tr-even-background-color: var(--ctp-secondary-background-color);
  --ctp-block-properties-background-color: var(--ctp-secondary-background-color);
  --ctp-page-properties-background-color: var(--ctp-secondary-background-color);
  --ctp-block-ref-link-text-color: rgb(var(--ctp-subtext0));
  --ctp-search-background-color: var(--ctp-primary-background-color);
  --ctp-border-color: rgb(var(--ctp-surface0));
  --ctp-secondary-border-color: rgb(var(--ctp-surface0));
  --ctp-tertiary-border-color: rgba(var(--ctp-surface0), 0.10);
  --ctp-guideline-color: rgb(var(--ctp-surface1));
  --ctp-menu-hover-color: var(--ctp-color-level-3);
  --ctp-primary-text-color: rgb(var(--ctp-text));
  --ctp-secondary-text-color: rgb(var(--ctp-subtext0));
  --ctp-title-text-color: rgb(var(--ctp-subtext1));
  --ctp-link-text-color: rgb(var(--ctp-accent, var(--ctp-teal)));
  --ctp-link-text-hover-color: rgb(var(--ctp-accent, var(--ctp-mauve)));
  --ctp-link-ref-text-color: rgb(var(--ctp-accent, var(--ctp-blue)));
  --ctp-link-ref-text-hover-color: rgb(var(--ctp-accent, var(--ctp-blue)));
  --ctp-tag-text-color: rgb(var(--ctp-accent, var(--ctp-maroon)));
  --ctp-tag-text-hover-color: rgb(var(--ctp-accent, var(--ctp-maroon)));
  --ctp-slide-background-color: var(--ctp-primary-background-color);
  --ctp-block-bullet-border-color: rgb(var(--ctp-accent, var(--ctp-sky)));
  --ctp-block-bullet-color: rgb(var(--ctp-accent, var(--ctp-sky)));
  --ctp-block-highlight-color: var(--color-base-30);
  --ctp-selection-background-color: rgba(var(--ctp-yellow, 0.9));
  --ctp-selection-text-color: rgb(var(--color-base-00));
  --ctp-page-checkbox-color: rgb(var(--ctp-accent, var(--ctp-blue)));
  --ctp-page-checkbox-border-color: var(--ctp-primary-background-color);
  --ctp-page-blockquote-color: var(--ctp-primary-text-color);
  --ctp-page-blockquote-bg-color: var(--ctp-secondary-background-color);
  --ctp-page-blockquote-border-color: var(--ctp-border-color);
  --ctp-page-inline-code-color: var(--ctp-primary-text-color);
  --ctp-page-inline-code-bg-color: var(--color-base-10);
  --ctp-scrollbar-foreground-color: rgba(var(--ctp-text), 0.2);
  --ctp-scrollbar-background-color: rgba(var(--ctp-text), 0.05);
  --ctp-scrollbar-thumb-hover-color: rgba(var(--ctp-text), 0.2);
  --ctp-head-text-color: var(--ctp-link-text-color);
  --ctp-cloze-text-color: rgb(var(--ctp-accent));
  --ctp-icon-color: var(--ctp-link-text-color);
  --ctp-search-icon-color: var(--ctp-link-text-color);
  --ctp-a-chosen-bg: var(--ctp-quaternary-background-color);
  --ctp-right-sidebar-code-bg-color: var(--color-base-30);
  --ctp-pie-bg-color: var(--ctp-primary-background-color);
  --ctp-pie-fg-color: var(--ctp-secondary-background-color);
  --ctp-highlight-color-gray: rgb(var(--ctp-overlay2));
  --ctp-highlight-color-red: rgb(var(--ctp-red));
  --ctp-highlight-color-yellow: rgb(var(--ctp-yellow));
  --ctp-highlight-color-green: rgb(var(--ctp-green));
  --ctp-highlight-color-blue: rgb(var(--ctp-blue));
  --ctp-highlight-color-purple: rgb(var(--ctp-mauve));
  --ctp-highlight-color-pink: rgb(var(--ctp-pink));
  --ctp-error-text-color: var(--color-red-100);
  --ctp-error-background-color: var(--color-red-900);
  --ctp-warning-text-color: var(--color-yellow-100);
  --ctp-warning-background-color: var(--color-yellow-900);
  --ctp-success-text-color: var(--color-green-100);
  --ctp-success-background-color: var(--color-green-900);
  --ctp-focus-ring-color: rgb(var(--ctp-overlay2));
  --ctp-header-button-background: rgb(var(--ctp-text));
  --ctp-error-color: var(--ctp-red);
  --ctp-warning-color: var(--ctp-peach);
  --ctp-success-color: var(--ctp-green);
  --ctp-info-color: var(--ctp-yellow);
  --ctp-switch-background: var(--color-base-50);
  --ctp-switch-handle-color: var(--ctp-accent, var(--ctp-blue));
  --ctp-button-background: var(--ctp-accent, var(--ctp-blue));
  --ctp-button-text: var(--color-base-10);
  --ctp-tooltip-background: var(--ctp-tertiary-background-color);
  --ctp-tooltip-text: rgb(var(--ctp-text));
  --ctp-search-input-placeholder: rgb(var(--ctp-text));
  --ctp-header-icon: rgb(var(--ctp-accent));
  --ctp-header-icon-background: var(--ctp-menu-hover-color);
  --ctp-text-highlight: rgb(var(--ctp-yellow));
  --ctp-bullet-thread-color: rgb(var(--ctp-accent, var(--ctp-teal)));
  --ctp-dropdown-border-color: var(--color-base-50);
  --ctp-text-bold: var(var(--ctp-primary-text-color));
  --ctp-text-heading: var(--ctp-accent, var(--ctp-lavender));
  --ctp-text-italics: var(--ctp-accent, var(--ctp-green));
  --ctp-text-underline: var(--ctp-primary-text-color);
  --ctp-text-strikethrough: var(--ctp-accent, var(--ctp-maroon));
  --ctp-blockquote-line: var(--ctp-accent);
  --ctp-active-setting: var(--ctp-accent, var(--ctp-blue));
}

:root {
  --ls-error-color: var(--ctp-error-color);
  --ls-warning-color: var(--ctp-warning-color);
  --ls-success-color: var(--ctp-success-color);
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: rgb(var(--ctp-primary-background-color));
  }
  html[data-theme=light] {
    background-color: transparent;
  }
}
.light-theme,
.dark-theme,
html[data-theme=light],
html[data-theme=dark] {
  --ls-primary-background-color: var(--ctp-primary-background-color);
  --ls-secondary-background-color: var(--ctp-secondary-background-color);
  --ls-tertiary-background-color: var(--ctp-tertiary-background-color);
  --ls-quaternary-background-color: var(--ctp-quaternary-background-color);
  --color-level-1: var(--ctp-color-level-1);
  --color-level-2: var(--ctp-color-level-2);
  --color-level-3: var(--ctp-color-level-3);
  --color-level-4: var(--ctp-color-level-4);
  --color-level-5: var(--ctp-color-level-5);
  --color-level-6: var(--ctp-color-level-6);
  --ls-active-primary-color: var(--ctp-active-primary-color);
  --ls-active-secondary-color: var(--ctp-active-secondary-color);
  --ls-table-tr-even-background-color: var(--ctp-table-tr-even-background-color);
  --ls-block-properties-background-color: var(--ctp-block-properties-background-color);
  --ls-page-properties-background-color: var(--ctp-page-properties-background-color);
  --ls-block-ref-link-text-color: var(--ctp-block-ref-link-text-color);
  --ls-search-background-color: var(--ctp-search-background-color);
  --ls-border-color: var(--ctp-border-color);
  --ls-secondary-border-color: var(--ctp-secondary-border-color);
  --ls-tertiary-border-color: var(--ctp-tertiary-border-color);
  --ls-guideline-color: var(--ctp-guideline-color);
  --ls-menu-hover-color: var(--ctp-menu-hover-color);
  --ls-primary-text-color: var(--ctp-primary-text-color);
  --ls-secondary-text-color: var(--ctp-secondary-text-color);
  --ls-title-text-color: var(--ctp-title-text-color);
  --ls-link-text-color: var(--ctp-link-text-color);
  --ls-link-text-hover-color: var(--ctp-link-text-hover-color);
  --ls-link-ref-text-color: var(--ctp-link-ref-text-color);
  --ls-link-ref-text-hover-color: var(--ctp-link-ref-text-hover-color);
  --ls-tag-text-color: var(--ctp-tag-text-color);
  --ls-tag-text-hover-color: var(--ctp-tag-text-hover-color);
  --ls-slide-background-color: var(--ctp-slide-background-color);
  --ls-block-bullet-border-color: var(--ctp-block-bullet-border-color);
  --ls-block-bullet-color: var(--ctp-block-bullet-color);
  --ls-block-highlight-color: var(--ctp-block-highlight-color);
  --ls-selection-background-color: var(--ctp-selection-background-color);
  --ls-selection-text-color: var(--ctp-selection-text-color);
  --ls-page-checkbox-color: var(--ctp-page-checkbox-color);
  --ls-page-checkbox-border-color: var(--ctp-page-checkbox-border-color);
  --ls-page-blockquote-color: var(--ctp-page-blockquote-color);
  --ls-page-blockquote-bg-color: var(--ctp-page-blockquote-bg-color);
  --ls-page-blockquote-border-color: var(--ctp-page-blockquote-border-color);
  --ls-page-inline-code-color: var(--ctp-page-inline-code-color);
  --ls-page-inline-code-bg-color: var(--ctp-page-inline-code-bg-color);
  --ls-scrollbar-foreground-color: var(--ctp-scrollbar-foreground-color);
  --ls-scrollbar-background-color: var(--ctp-scrollbar-background-color);
  --ls-scrollbar-thumb-hover-color: var(--ctp-scrollbar-thumb-hover-color);
  --ls-head-text-color: var(--ctp-head-text-color);
  --ls-cloze-text-color: var(--ctp-cloze-text-color);
  --ls-icon-color: var(--ctp-icon-color);
  --ls-search-icon-color: var(--ctp-search-icon-color);
  --ls-a-chosen-bg: var(--ctp-a-chosen-bg);
  --ls-right-sidebar-code-bg-color: var(--ctp-right-sidebar-code-bg-color);
  --ls-pie-bg-color: var(--ctp-pie-bg-color);
  --ls-pie-fg-color: var(--ctp-pie-fg-color);
  --ls-highlight-color-gray: var(--ctp-highlight-color-gray);
  --ls-highlight-color-red: var(--ctp-highlight-color-red);
  --ls-highlight-color-yellow: var(--ctp-highlight-color-yellow);
  --ls-highlight-color-green: var(--ctp-highlight-color-green);
  --ls-highlight-color-blue: var(--ctp-highlight-color-blue);
  --ls-highlight-color-purple: var(--ctp-highlight-color-purple);
  --ls-highlight-color-pink: var(--ctp-highlight-color-pink);
  --ls-error-text-color: var(--ctp-error-text-color);
  --ls-error-background-color: var(--ctp-error-background-color);
  --ls-warning-text-color: var(--ctp-warning-text-color);
  --ls-warning-background-color: var(--ctp-warning-background-color);
  --ls-success-text-color: var(--ctp-success-text-color);
  --ls-success-background-color: var(--ctp-success-background-color);
  --ls-focus-ring-color: var(--ctp-focus-ring-color);
  --ls-header-button-background: var(--ctp-header-button-background);
}

div.input-wrap > input::placeholder {
  color: var(--ctp-search-input-placeholder);
}

.recent-search a > div > div {
  border-color: rgb(var(--ctp-text));
}

a.ui__toggle .wrapper:focus {
  --tw-shadow: 0 0 0 3px rgba(var(--ctp-switch-handle-color), 0.5) ;
}
a.ui__toggle > span {
  background-color: var(--ctp-switch-background);
}
a.ui__toggle > span > span.switcher {
  background-color: rgb(var(--ctp-switch-handle-color));
}

button.ui__button {
  color: var(--ctp-button-text);
  background-color: rgb(var(--ctp-button-background));
}
button.ui__button[intent=logseq]:hover:not(.active) {
  color: var(--ctp-button-text);
  background-color: rgb(var(--ctp-button-background));
}
button.ui__button:hover {
  background-color: rgb(var(--ctp-button-background));
}

.tippy-tooltip {
  background: var(--ctp-tooltip-background);
  color: var(--ctp-tooltip-text);
}

.tippy-popper .arrow-regular {
  display: none;
  /* Hide the arrow */
}

.dark .ui__button[intent=logseq]:hover {
  color: var(--ls-link-text-color);
}

svg.warning {
  fill: rgb(var(--ctp-warning-color));
}

svg.important {
  fill: rgb(var(--ctp-error-color));
}

svg.note {
  fill: rgb(var(--ctp-info-color));
}

div.nav-content-item:not(.is-expand) .header {
  background-color: var(--ls-tertiary-background-color);
}
div.nav-content-item:not(.is-expand) .header a {
  color: var(--ctp-link-text-hover-color);
}

.left-sidebar-inner a.item.active,
.left-sidebar-inner a.item:active {
  color: var(--ctp-link-text-hover-color);
}

.left-sidebar-inner a.item:hover {
  background: var(--ctp-color-level-3);
}
.left-sidebar-inner a.item:hover span {
  color: var(--ctp-blue);
}

.cp__sidebar-left-layout .header:hover a {
  color: var(--ctp-link-text-hover-color);
}

.ui__modal-panel {
  border: 1px solid;
  border-color: var(--ctp-dropdown-border-color);
}

.dropdown-wrapper {
  border: 1px solid;
  border-color: var(--ctp-dropdown-border-color);
}

.block-children-left-border:hover {
  width: 2px;
  background-color: var(--ctp-bullet-thread-color);
}

mark {
  background: var(--ctp-text-highlight);
}

.form-input:focus {
  box-shadow: 0 0 0 2px rgba(var(--ctp-accent, var(--ctp-sapphire)), 0.5);
  border-color: rgba(var(--ctp-accent, var(--ctp-sapphire)), 0.5);
}

.bullet-container.bullet-closed {
  background-color: rgb(var(--ctp-accent, var(--ctp-blue)), 0.15);
}
.bullet-container.bullet-closed:hover {
  background-color: rgb(var(--ctp-accent, var(--ctp-blue)), 0.65);
}

.bullet-container:hover {
  background-color: rgb(var(--ctp-accent, var(--ctp-blue)), 0.15);
}

button.button.icon:hover {
  color: rgb(var(--ctp-accent, var(--ctp-pink)));
  background-color: var(--ctp-header-icon-background);
}
button.button.icon:hover > i {
  color: var(--ctp-header-icon);
}

.cp__sidebar-left-layout a {
  color: inherit;
}

.left-sidebar-inner .nav-content-item .header {
  background-color: var(--ls-tertiary-background-color);
}

html[data-theme=dark] .cp__header a,
html[data-theme=dark] .cp__header button,
html[data-theme=dark] .cp__right-sidebar-topbar button {
  opacity: 1;
}

::selection {
  color: var(--ctp-color-level-1);
}

.inline.with-bg-color {
  color: var(--ctp-primary-background-color);
}
.inline.with-bg-color b, .inline.with-bg-color .page-ref {
  color: var(--ctp-primary-background-color);
}
.inline.with-bg-color .page-reference:hover {
  color: var(--ctp-primary-text-color);
}
.inline.with-bg-color .page-reference:hover b, .inline.with-bg-color .page-reference:hover .page-ref, .inline.with-bg-color .page-reference:hover span {
  color: var(--ctp-primary-text-color);
}

.menu-links-wrapper,
.menu-link {
  background-color: var(--ctp-secondary-background-color);
}

.menu-link,
.menu-link:hover {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 5px;
}

.cp__settings-inner > aside ul > li > a > strong {
  color: rgb(var(--ctp-primary-text-color));
}

.cp__settings-inner > aside ul > li.active .ui__icon, .cp__settings-inner > aside ul > li.active strong {
  color: rgb(var(--ctp-active-setting));
}

.cp__all_pages_table td > span {
  color: rgb(var(--ctp-primary-text-color));
}

.editor-inner .multiline-block:is(.h1, .h2, .h3, .h4, .h5, .h6):first-line,
.editor-inner .uniline-block:is(.h1, .h2, .h3, .h4, .h5, .h6),
.ls-block :is(h1, h2, h3, h4, h5, h6) {
  color: rgb(var(--ctp-text-heading));
}

b, strong {
  color: rgb(var(--ctp-text-bold));
}

i {
  color: rgb(var(--ctp-text-italics));
}

del {
  color: rgb(var(--ctp-text-strikethrough));
}

blockquote {
  border-left: 2px solid;
  border-left-color: rgb(var(--ctp-blockquote-line));
}

a[title=Yellow].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-yellow) !important;
}

a[title=Red].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-red) !important;
}

a[title=Pink].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-pink) !important;
}

a[title=Green].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-green) !important;
}

a[title=Blue].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-blue) !important;
}

a[title=Purple].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-purple) !important;
}

a[title=Gray].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-gray) !important;
}

#ui__ac-inner {
  background: var(--ctp-secondary-background-color);
}

.ui__ac-group-name {
  background: var(--ctp-tertiary-background-color);
}

div.cm-s-solarized.CodeMirror {
  --bg0: rgb(var(--ctp-base));
  --bg1: rgb(var(--ctp-overlay1));
  --bg4: rgb(var(--ctp-overlay0));
  --fg: rgb(var(--ctp-text));
  --fg3: rgb(var(--ctp-subtext0));
  --gray: rgb(var(--ctp-subtext1));
  --blue: rgb(var(--ctp-blue));
  --yellow: rgb(var(--ctp-yellow));
  --aqua: rgb(var(--ctp-blue));
  --orange: rgb(var(--ctp-peach));
  --primary-bg: rgb(var(--ctp-base));
  --current-line: rgb(var(--ctp-surface0));
  --selection: rgb(var(--ctp-surface2));
  --atom: rgb(var(--ctp-lavender));
  --cursor: rgb(var(--ctp-overlay1));
  --keyword: rgb(var(--ctp-red));
  --operator: rgb(var(--ctp-sky));
  --number: rgb(var(--ctp-peach));
  --definition: rgb(var(--ctp-blue));
  --string: rgb(var(--ctp-green));
}

.cm-s-solarized.cm-s-dark.CodeMirror,
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: var(--primary-bg);
  color: var(--fg3);
}
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background: var(--primary-bg);
  border-right: 0px;
}
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
  color: var(--bg4);
}
.cm-s-solarized.cm-s-dark .CodeMirror-cursor {
  border-left: 1px solid var(--fg);
}
.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor {
  background-color: var(--cursor) !important;
}
.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor {
  background-color: var(--cursor) !important;
}
.cm-s-solarized.cm-s-dark div.CodeMirror-selected {
  background: var(--selection);
}
.cm-s-solarized.cm-s-dark span.cm-meta {
  color: var(--blue);
}
.cm-s-solarized.cm-s-dark span.cm-comment {
  color: var(--gray);
}
.cm-s-solarized.cm-s-dark span.cm-number {
  color: var(--number);
}
.cm-s-solarized.cm-s-dark span.cm-atom {
  color: var(--atom);
}
.cm-s-solarized.cm-s-dark span.cm-keyword {
  color: var(--keyword);
}
.cm-s-solarized.cm-s-dark span.cm-variable {
  color: var(--fg);
}
.cm-s-solarized.cm-s-dark span.cm-variable-2 {
  color: var(--fg);
}
.cm-s-solarized.cm-s-dark span.cm-variable-3,
.cm-s-solarized.cm-s-dark .cm-s-gruvbox-dark span.cm-type {
  color: var(--yellow);
}
.cm-s-solarized.cm-s-dark span.cm-operator {
  color: var(--operator);
}
.cm-s-solarized.cm-s-dark span.cm-callee {
  color: var(--fg);
}
.cm-s-solarized.cm-s-dark span.cm-def {
  color: var(--definition);
}
.cm-s-solarized.cm-s-dark span.cm-property {
  color: var(--fg);
}
.cm-s-solarized.cm-s-dark span.cm-string {
  color: var(--string);
}
.cm-s-solarized.cm-s-dark span.cm-string-2 {
  color: var(--aqua);
}
.cm-s-solarized.cm-s-dark span.cm-qualifier {
  color: var(--aqua);
}
.cm-s-solarized.cm-s-dark span.cm-attribute {
  color: var(--aqua);
}
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
  background: var(--current-line);
}
.cm-s-solarized.cm-s-dark .CodeMirror-matchingbracket {
  background: var(--gray);
  color: var(--bg0) !important;
}
.cm-s-solarized.cm-s-dark span.cm-builtin {
  color: var(--orange);
}
.cm-s-solarized.cm-s-dark span.cm-tag {
  color: var(--orange);
}

.cm-s-solarized.cm-s-dark {
  text-shadow: unset;
}

.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
  text-shadow: unset;
}

.cm-s-solarized.cm-s-dark.CodeMirror, .cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: var(--ctp-secondary-background-color);
}

.embed.embed-page .cm-s-solarized.cm-s-dark.CodeMirror, .embed.embed-page .cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: var(--ctp-tertiary-background-color);
}

:root {
  --ctp-cm-theme: "ctp-oled";
}

:root,
.theme-dark,
.theme-dark.ctp-oled {
  --ctp-rosewater: 245, 224, 220;
  --ctp-flamingo: 242, 205, 205;
  --ctp-pink: 245, 194, 231;
  --ctp-mauve: 203, 166, 247;
  --ctp-red: 243, 139, 168;
  --ctp-maroon: 235, 160, 172;
  --ctp-peach: 250, 179, 135;
  --ctp-yellow: 249, 226, 175;
  --ctp-green: 166, 227, 161;
  --ctp-teal: 148, 226, 213;
  --ctp-sky: 137, 220, 235;
  --ctp-sapphire: 116, 199, 236;
  --ctp-blue: 135, 176, 249;
  --ctp-lavender: 180, 190, 254;
  --ctp-text: 198, 208, 245;
  --ctp-subtext1: 179, 188, 223;
  --ctp-subtext0: 161, 168, 201;
  --ctp-overlay2: 142, 149, 179;
  --ctp-overlay1: 123, 129, 157;
  --ctp-overlay0: 105, 109, 134;
  --ctp-surface2: 86, 89, 112;
  --ctp-surface1: 67, 70, 90;
  --ctp-surface0: 49, 50, 68;
  --ctp-base: 02, 02, 02;
  --ctp-mantle: 01, 01, 01;
  --ctp-crust: 00, 00, 00;
}

.form-checkbox:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(2, 2, 2)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
}

/* Custom CSS rules */

/* Headings */
.editor-inner .uniline-block:is(.h1, .h2, .h3, .h4, .h5, .h6),
.editor-inner :is(.h1, .h2, .h3, .h4, .h5, .h6),
.ls-block :is(h1, h2, h3, h4, h5, h6),
h1.title {
  font-family: 'Playfair Display', serif !important;
}

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like, :not(pre) > code {
  font-family: "Fira Code"
}

.external-link::after {
  content: "↗";
}

/* No more pointers! */
* {
  cursor: default!important;
}

.tag[data-ref="gofetch"] {
  background-color: var(--blue) !important;
  color: white !important;
}