logseq enhanced theme

logseq-enhanced-theme.css

.block-children {
  border-left-width: var(--ls-block-bullet-threading-width);
}

.block-content-wrapper {
  position: relative;
}

.bullet-container {
  height: 14px !important;
  width: 14px !important;
  transform: translateX(-1.5px);
}

/* Block bullet path should only show in a nested block */
/* .ls-block { */
/* Basic "curve" */
/* Fix for headings like h1, h2 etc */
/* Fix multi-line blocks with children */
/* } */
.ls-block .bullet {
  background-color: var(--ls-block-bullet-active-color);
}

.ls-block div.items-center {
  position: relative;
  height: 26px !important;
}

.ls-block:not(:focus-within) .bullet {
  background-color: var(--ls-block-bullet-color);
  transform: scale(1);
  box-shadow: none;
}

/* Lower end */
.ls-block .ls-block > div > div.items-center::before {
  pointer-events: none;
  content: '';
  left: calc(var(--ls-block-bullet-threading-width) * -1);
  /* left: 0 */
  right: 6px;
  left: -2px;
  /* /* top: -1px; */
  /* bottom: -1px; */
  top: calc(-50% + var(--ls-block-bullet-threading-width) * 0.5 - 1px);
  bottom: 50%;
  /* transform: translate(calc(var(--ls-block-bullet-threading-width) * -1), calc(-50% + var(--ls-block-bullet-threading-width) * 0.5)); */
  /* shift left 1px for border */
  position: absolute;
  border-left: var(--ls-block-bullet-threading-width) solid transparent;
  border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
  border-bottom-left-radius: 10px;
}

.ls-block .ls-block:focus-within > div > div.items-center::before {
  border-color: var(--ls-block-bullet-active-color);
}

/* Upper start */
.ls-block .block-children > .ls-block::before {
  pointer-events: none;
  content: '';
  top: -0.7rem;
  /* top: -1rem; */
  bottom: 0;
  border-left: var(--ls-block-bullet-threading-width) solid transparent;
  left: -1px;
  /* left: calc(var(--ls-block-bullet-threading-width) * -1); */
  /* transform: translate(calc(var(--ls-block-bullet-threading-width) * -1)); */
  position: absolute;
}

.ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before {
  border-color: var(--ls-block-bullet-active-color);
}

.ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
  border-color: transparent;
}

.ls-block > .items-baseline {
  align-items: initial;
}

/* Remove to prevent double lines */
/* .ls-block[haschild=true]>div>.block-content-wrapper::before {
	pointer-events: none;
	content: "";
	top: 12px;
	bottom: 0;
	left: -17px;
	position: absolute;
	border-left: var(--ls-block-bullet-threading-width) solid transparent;
} */

.ls-block[haschild='true'] > .heading > .block-content-wrapper::before {
  top: calc(50% + 2px);
}

.ls-block[haschild='true']:focus-within > div > .block-content-wrapper::before {
  border-color: var(--ls-block-bullet-active-color);
}

.doc-mode div.items-center::before,
.doc-mode div.items-center::after,
.doc-mode .ls-block::before,
.doc-mode .ls-block::after {
  display: none;
}

span .bullet,
span .bullet-container {
  /* Bullet above thread */
  z-index: 1;
}

/* === Variables === */
.white-theme,
html[data-theme='light'] {
  /* color palette: f4f1de/e07a5f/3d405b/81b29a/f2cc8f/+white+dark black */
  /* BACKGROUND */
  /* For sepia */
  /* --ls-primary-background-color: #fff5e9;
	--ls-secondary-background-color: #feeddb;
	--ls-tertiary-background-color: #fee5c6; */
  --ls-primary-background-color: white;
  --ls-secondary-background-color: rgb(248, 248, 248);
  --ls-tertiary-background-color: rgb(242, 242, 242);
  --ls-quaternary-background-color: #e07b5f20;
  /* PROPERTIES */
  --ls-block-properties-background-color: var(--ls-tertiary-background-color);
  --ls-page-properties-background-color: var(--ls-tertiary-background-color);
  /* SEARCH */
  --ls-search-background-color: #e4e4e4;
  /*#f4f1de;*/
  --ls-table-tr-even-background-color: #fff;
  /* ACCENTS */
  --ls-active-primary-color: var(--orange);
  --ls-active-secondary-color: #08c8ba;

  --ls-border-color: #ccc;
  --ls-guideline-color: var(--ls-border-color);
  --ls-menu-hover-color: #def5b2;
  --ls-primary-text-color: #4c4c4c;
  --ls-secondary-text-color: #161e2e;
  --ls-title-text-color: #0b8fe6;
  /* LINKS */
  --ls-link-text-color: var(--ls-active-primary-color);
  --ls-link-text-hover-color: #c65804;
  --ls-link-ref-text-color: var(--ls-link-text-color);
  --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
  /* TAGS */
  --ls-tag-text-color: #ff0006;
  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
  --ls-slide-background-color: #fff;
  /* BULLETS */
  --ls-block-bullet-border-color: #00b3ff;
  --ls-block-bullet-color: #3d405b;
  --ls-block-bullet-color-outer: #bababa;
  --ls-block-highlight-color: var(--selection);
  --ls-selection-background-color: #e4f2ff;
  /* CHECKBOXES */
  --ls-page-checkbox-color: var(--ls-active-primary-color);
  --ls-page-checkbox-border-color: #8c8c8c;
  /* QUOTES */
  --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-active-primary-color);
  /* CODE */
  --ls-page-inline-code-bg-color: #e07b5f20;
  /*#f4f1de;*/
  --ls-page-inline-code-color: var(--orange);
  /* SCROLLBARS */
  --ls-scrollbar-foreground-color: var(--gray-light);
  --ls-scrollbar-background-color: var(--ls-tertiary-background-color);
  --ls-scrollbar-thumb-hover-color: rgba(255, 59, 59, 0.2);

  --ls-head-text-color: var(--ls-link-text-color);
  --ls-icon-color: var(--orange);
  --ls-search-icon-color: var(--ls-icon-color);
  --ls-a-chosen-bg: #f4f5f7;
  --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
  --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: #d0e6fa;
  --color-level-5: #bbdaf6;
  --ls-block-ref-link-text-color: #865df4;
  /* ADMONITIONS */
  --admo-text-important: red;
  --admo-bg-important: black;
  --admo-text-important: #fa4320;
  --admo-bg-important: #171717;

  --tagpills-bg: #0db6ff;
  --tagpills-text: #fff;
  --tagpills-border: rgb(238, 238, 238);
  --tagpills-border-radius: 4px;
  /* LOGO */
  --logo-fill: #007bff;

  --marker-switch-bgcolor: #e07b5f4d;
  --marker-switch-color: #ee4325;
  --marker-switch-opa: 0.7;
  /* DATE PICKER */
  --datepicker-active-bgcolor: #650707;
  --datepicker-active-bordercolor: #fff;
  --datepicker-active-bordersize: 0px;
  --datepicker-active-color: white;
  /* --datepicker-available-hovercolor: #F56A02; */
  --datepicker-available-hoverbgcolor: #192731;

  --text-accent: #789eb0;
  --text-accent-light: #789eb038;
  --text-highlight-bg: #ffad4167;
  --text-highlight: #4c4c4c;
  --inverted-text: #fff;
  --highlight-light: #080808;
  --ls-block-ref-link-text-color: #74ced8;
  --current-line: #44475a;
  --comment: #777;
  /* TEXT EMPHASIS */
  --bold: #464646;
  --italic: #464646;
  /* COLORS */
  --white: #fff;
  --red: #f55;
  --orange: #e07a5f;
  --yellow: #eb9f3d;
  --yellow-light: #e9ad5f3b;
  --green: #8fd876;
  --purple: #519fea;
  /* --purple-hover: #bf93f988; */
  --cyan: #71c0e4;
  --cyan-hover: #8be9fd88;
  --gray: #a9a9a9;
  --gray-light: #d4d4d4;
  /* --pink-hover: #ff79c688; */
  --background: #282a36;
  --light-background: #343746;
  /* --lighter-background: #424450; */
  --dark-background: #21222c;
  --darker-background: #191a21;
  --foreground: var(--orange);

  --path: var(--orange);
  /* --selection: #f2cc8f; */
  --selection: rgba(240, 203, 193, 0.582);
  --selection-code: var(--selection);
  /* --code-current-line: #f2cc8f; */
  --code-current-line: rgba(240, 203, 193, 0.582);
  --text-code: var(--ls-primary-text-color);
  --item-highlight: #e07b5f75;
  --item-highlight-solid: rgb(240, 203, 193);
}

.dark-theme,
html[data-theme='dark'] {
  --ls-primary-background-color: #0e2a35;
  --ls-secondary-background-color: #143542;
  --ls-tertiary-background-color: #08404f;
  --ls-quartery-background-color: rgb(38, 39, 41);
  --ls-block-properties-background-color: #111415c2;
  --ls-page-properties-background-color: #111415c2;
  --ls-search-background-color: #000000;
  --ls-border-color: #323232;
  --ls-menu-hover-color: #1c3444;
  --ls-primary-text-color: #cecece;
  --ls-secondary-text-color: #c7c7c7;
  --ls-title-text-color: #72d5fc;
  --ls-link-text-color: rgb(138, 187, 187);
  --ls-link-text-hover-color: var(--orange);
  --ls-link-ref-text-color: rgb(138, 187, 187);
  --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
  --ls-tag-text-color: var(--ls-link-text-color);
  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
  --ls-block-bullet-border-color: #57a3dad9;
  --ls-block-bullet-color: #8abbbb;
  --ls-block-bullet-color-outer: #0f4958;
  --ls-block-highlight-color: #202e3a;
  --ls-page-checkbox-color: #8abbbb;
  --ls-page-checkbox-border-color: #8abbbb;
  --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-secondary-text-color);
  --ls-page-inline-code-color: var(--orange);
  --ls-page-inline-code-bg-color: #1b191b;
  --ls-page-title-size: 28px;
  --ls-scrollbar-color: #000;
  --ls-scrollbar-thumb-hover-color: #1d5062;
  --ls-scrollbar-thumb-color: var(--ls-secondary-background-color);
  --ls-head-text-color: var(--ls-link-text-color);
  /* Uncomment these to override default variables and change color of header icons */
  /* --ls-icon-color: #F56A02; */
  /* --ls-search-icon-color: #F56A02; */
  --ls-a-chosen-bg: #172a36;
  --ls-right-sidebar-code-bg-color: #04303c;
  --ls-active-primary-color: #37638a;
  --ls-active-secondary-color: #5fa2df;
  --tagpills-bg: #202a35;
  --tagpills-text: #5e99c9;
  --tagpills-border: #254f63;
  --tagpills-border-radius: 4px;
  --accent-bgcolor: #16364a;
  --marker-switch-bgcolor: #39180deb;
  --marker-switch-color: #ee4325;
  --marker-switch-opa: 0.7;
  --datepicker-active-bgcolor: #650707;
  --datepicker-active-bordercolor: #fff;
  --datepicker-active-bordersize: 0px;
  --datepicker-active-color: white;
  /* --datepicker-available-hovercolor: #F56A02; */
  --datepicker-available-hoverbgcolor: #192731;
  --text-accent: #789eb0;
  --text-accent-light: #789eb038;
  --text-highlight-bg: var(--yellow);
  --text-highlight: #262626;
  --inverted-text: #262626;
  --highlight-light: #0b0a0bf0;
  --ls-block-ref-link-text-color: #74ced8;
  --admo-text-important: #fa4320;
  --admo-bg-important: #171717;
  --background: #282a36;
  --light-background: #343746;
  --lighter-background: #424450;
  --dark-background: #21222c;
  --darker-background: #191a21;
  --foreground: #fff;
  --current-line: #44475a;
  --comment: #777;
  --white: #fff;
  --red: #f55;
  --orange: #f56a02;
  --yellow: #e9ad5f;
  --yellow-light: #e9ad5f3b;
  --green: #8fd876;
  --purple: #519fea;
  /* --purple-hover: #bf93f988; */
  --cyan: #71c0e4;
  --cyan-hover: #8be9fd88;
  --gray-light: #d4d4d4;
  /* --pink-hover: #ff79c688; */
  --gray: #a9a9a9;
  --logo-fill: #f56a02;
  --path: #fff;
  --selection: #8be9fd88;
  --selection-code: var(--dark-background);
  --code-current-line: var(--dark-background);
  --text-code: var(--ls-primary-text-color);

  --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: #195d6c;
  --color-level-5: #266c7d;
  --color-level-6: #3a7e8e;
  --bold: #ebebeb;
  --italic: #ebebeb;
}

/* @media only screen and (min-width: 1024px) {
		.cp__sidebar-main-content {
			//max-width: 80% !important;
			--ls-main-content-max-width-wide: 80% !important;
		}
	} */

:root {
  /* --ls-main-content-max-width: 100vw; /* Always wide width */
  --ls-main-content-max-width: 800px !important;
  /* TODO: Implement once PR has been approved */
  /* --ls-main-content-max-width-wide: 80% !important; */
  --ls-block-bullet-threading-width: 2px;
  /* For threading extension */
  --ls-block-bullet-active-color: var(--ls-block-bullet-color);
  --ls-font-family: 'Basis Grotesque Pro';
}

::selection {
  background: var(--selection);
}

/* === Fonts === */
/* @import url('https://fonts.googleapis.com/css?family=Proxima+Nova'); */
/* @import url('https://fonts.googleapis.com/css?family=Montserrat'); */
/* @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); */
/* Raleway https://fonts.google.com/specimen/Raleway */

@font-face {
  font-family: 'Pacifico';
  src: url('https://db.onlinewebfonts.com/t/18f37957c6d3d59b4dfe138b7ed98832.eot');
  src: url('https://db.onlinewebfonts.com/t/18f37957c6d3d59b4dfe138b7ed98832.eot?#iefix') format('embedded-opentype'),
    url('https://db.onlinewebfonts.com/t/18f37957c6d3d59b4dfe138b7ed98832.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/18f37957c6d3d59b4dfe138b7ed98832.woff') format('woff'),
    url('https://db.onlinewebfonts.com/t/18f37957c6d3d59b4dfe138b7ed98832.ttf') format('truetype'),
    url('https://db.onlinewebfonts.com/t/18f37957c6d3d59b4dfe138b7ed98832.svg#Pacifico') format('svg');
}

/* Note: Order is important */
@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('https://db.onlinewebfonts.com/t/3ddd0e3d1a076e112b27d8d9b7e20200.eot');
  src: url('https://db.onlinewebfonts.com/t/3ddd0e3d1a076e112b27d8d9b7e20200.eot?#iefix') format('embedded-opentype'),
    url('https://db.onlinewebfonts.com/t/3ddd0e3d1a076e112b27d8d9b7e20200.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/3ddd0e3d1a076e112b27d8d9b7e20200.woff') format('woff'),
    url('https://db.onlinewebfonts.com/t/3ddd0e3d1a076e112b27d8d9b7e20200.ttf') format('truetype'),
    url('https://db.onlinewebfonts.com/t/3ddd0e3d1a076e112b27d8d9b7e20200.svg#Basis Grotesque Pro') format('svg');
}

@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('https://db.onlinewebfonts.com/t/98a34676ba814c4848424f733521ea58.eot');
  src: url('https://db.onlinewebfonts.com/t/98a34676ba814c4848424f733521ea58.eot?#iefix') format('embedded-opentype'),
    url('https://db.onlinewebfonts.com/t/98a34676ba814c4848424f733521ea58.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/98a34676ba814c4848424f733521ea58.woff') format('woff'),
    url('https://db.onlinewebfonts.com/t/98a34676ba814c4848424f733521ea58.ttf') format('truetype'),
    url('https://db.onlinewebfonts.com/t/98a34676ba814c4848424f733521ea58.svg#Basis Grotesque Pro') format('svg');
  font-weight: bold;
}

@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('https://db.onlinewebfonts.com/t/d4b94d05a5205e34fbe37e855b9270c4.eot');
  src: url('https://db.onlinewebfonts.com/t/d4b94d05a5205e34fbe37e855b9270c4.eot?#iefix') format('embedded-opentype'),
    url('https://db.onlinewebfonts.com/t/d4b94d05a5205e34fbe37e855b9270c4.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/d4b94d05a5205e34fbe37e855b9270c4.woff') format('woff'),
    url('https://db.onlinewebfonts.com/t/d4b94d05a5205e34fbe37e855b9270c4.ttf') format('truetype'),
    url('https://db.onlinewebfonts.com/t/d4b94d05a5205e34fbe37e855b9270c4.svg#Basis Grotesque Pro') format('svg');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Basis Grotesque Pro';
  src: ('https://db.onlinewebfonts.com/t/8ce60fb425a6d82095ccc5ec72e15f7a.eot');
  src: url('https://db.onlinewebfonts.com/t/8ce60fb425a6d82095ccc5ec72e15f7a.eot?#iefix') format('embedded-opentype'),
    url('https://db.onlinewebfonts.com/t/8ce60fb425a6d82095ccc5ec72e15f7a.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/8ce60fb425a6d82095ccc5ec72e15f7a.woff') format('woff'),
    url('https://db.onlinewebfonts.com/t/8ce60fb425a6d82095ccc5ec72e15f7a.ttf') format('truetype'),
    url('https://db.onlinewebfonts.com/t/8ce60fb425a6d82095ccc5ec72e15f7a.svg#Basis Grotesque Pro') format('svg');
  font-style: italic;
}

html {
  /* font-family: Montserrat, Barlow, Inter, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important; */
  font-family: var(--ls-font-family), sans-serif !important;
}

/* ====================
	USER INTERFACE
   ====================*/
/* === Header menu === */
a.menu-link {
  background-color: var(--ls-secondary-background-color);
  /* color: var(--ls-link-text-hover-color) */
}

a.menu-link:hover {
  /* color: var(--ls-link-text-hover-color); */
  background-color: var(--ls-primary-background-color);
  opacity: 1;
}

.white-theme a.menu-link {
  background-color: var(--ls-secondary-background-color);
}

.white-theme a.menu-link:hover {
  /* background-color: #f2cc8f; */
  background-color: var(--item-highlight-solid);
}

.cp__header {
  height: 2.4rem;
  background-color: var(--ls-primary-background-color);
}

/* Graph icon in header */
/* .cp__header-logo svg {
	fill: var(--logo-fill);
} */

.cp__header-logo,
.cp__right-menu-button {
  opacity: 0.7 !important;
}

.cp__header-logo .svg-shadow {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
}

a svg {
  color: var(--ls-icon-color);
}

.cp__header a:hover {
  background: var(--ls-secondary-background-color);
  border-radius: 3px;
}

/* === Search === */
.search-ac {
  min-width: 450px;
}

/* #search_field {
	background-color: var(--ls-search-background-color);
	color: var(--ls-secondary-text-color);
	height: 30px;
	padding: 0px 50px;
	margin: 10px -5px;
	width: 500px;
} */

#search-field,
#search-field:focus {
  background-color: var(--ls-secondary-background-color);
}

/* Search icon */
#search-wrapper div svg {
  color: inherit !important;
}

/* == Search deco == */
/*    #search.flex-1 > .flex {
    width: 700px;
    background-color: #000;
    display: block;
        height: 70px;
        margin-top:-20px;
        left:0%;
         position: relative;
        padding-left:10px;
    }
    #search.flex-1 > .flex::before {
        content:"";
        position: relative;
         display: inline;
        left: 690px;
    border-bottom: 43px solid #0000;
       border-right: 20px solid #0000;
          border-top: 40px solid #000;
          border-left: 60px solid #000;
    }
    */

/* === Sidebar === */
/* Floating sidebar - nice as it does not shift content, but also cannot display two pages next to each other via shift-click */
/*.cp__right-sidebar {
	position: fixed;
	top: 3rem;
	right: 0;
	width: 0;
	opacity: .9;
	height: 102vh;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 9;
	transition: width .3s, opacity .2s;
	border-radius: var(--ls-border-radius-low) 0 0 0;
	box-sizing: border-box;
	background-color: var(--ls-secondary-background-color, #d8e1e8);
	padding-bottom: 48px;
}*/

/* Sidebar on the left side */
/* #app-container {
    flex-direction: row-reverse;
} */

/* Sidebar button on the left side */
/* .cp__header a:last-child {
    order: -1;
} */

/* === Scrollbars === */
html:not(.is-mac) ::-webkit-scrollbar {
  background-color: black;
}

html:not(.is-mac) ::-webkit-scrollbar-thumb {
  background-color: #354b4e;
  -webkit-border-radius: 0px !important;
}

html:not(.is-mac) ::-webkit-scrollbar-thumb:hover {
  background-color: #27353a;
}

html:not(.is-mac) ::-webkit-scrollbar {
  width: 14px;
  height: 12px;
  -webkit-border-radius: 0px;
}

/* === Context menu for /commands === */
.ui__ac-group-name {
  color: var(--ls-link-text-color) !important;
}

/* === Buttons, Toggles and Dropdown lists === */
.ui__button:hover,
span[role='checkbox']:hover,
.form-select:hover {
  opacity: 0.8;
}

.white-theme .ui__button {
  background-color: var(--orange);
}

.dark-theme .ui__button {
  background-color: var(--cyan-hover);
}

/* Note: aria-checked is always false, so we select by color of default theme */
.white-theme span[role='checkbox'].bg-indigo-600 {
  background-color: var(--orange);
}

.dark-theme span[role='checkbox'].bg-indigo-600 {
  background-color: var(--cyan-hover);
}

/* === Command launcher === */
/* Remove inner background */
.cp__command-palette-main .chosen {
  background: transparent;
}

/* Improve type readability */
.cp__command-palette-results code.opacity-20 {
  opacity: 0.6;
}

/* ====================
	FEATURES
   ====================*/

/* === Admonition blocks - tip, warning, info etc. === */
.admonitionblock {
  margin: 0.5em 0 0.5em 0;
  padding: 1rem 1rem;
  background-color: var(--ls-tertiary-background-color);
  border-radius: 3px;
}

.admonition-icon svg {
  /* Remove unnecessary shadow */
  filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 0px) !important;
}

.important .text-lg {
  font-size: 1rem;
  line-height: 1.75rem;
  /* color: var(--admo-text-important); */
}

.important .text-lg .is-paragraph:first-line {
  /* font-size: 1rem; */
  line-height: 1.75rem;
  font-weight: bold;
  /* color: var(--admo-text-important); */
  /* Cannot style just single line */
  /* color: var(--text-inverted); */
  /* border-radius: 3px;
	padding: 3px;
	display: block; */
}

content .admonitionblock {
  padding: 16px 16px 16px 12px;
  background-color: var(--ls-callout-background-color);
  margin: unset;
}

.content .admonitionblock .text-lg {
  font-size: 0.9em;
  margin-left: 0;
  line-height: 1.35rem;
}

.content .admonitionblock .admonition-icon {
  padding-right: 0.65em;
  border: unset;
}

.content .admonitionblock .admonition-icon svg.svg-shadow {
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
}

.content .admonitionblock .admonition-icon svg.h-8.w-8 {
  width: 1.7em;
  height: 1.7em;
}

.content .admonitionblock .admonition-icon svg.important {
  color: #c75252;
}

.content .admonitionblock .admonition-icon svg.caution {
  color: #e08d5c;
}

.content .admonitionblock .admonition-icon svg.warning {
  fill: var(--orange);
}

.content .admonitionblock .admonition-icon svg.tip {
  color: #edc987;
}

.content .admonitionblock .admonition-icon svg.note {
  color: var(--ls-secondary-text-color);
  fill: var(--gray);
}

/* Style banners (warning, note, tip etc.) - exclude quote and second line of normal paragraphs. However, if line is too long, then second line will not be formatted... */

/* .block-content :not(span):not(.block-body):not(blockquote)>.is-paragraph::first-line {
	font-size: 12px;
	text-transform: uppercase;
} */

/* === Footnotes === */
.footdef {
  font-size: 0.8em !important;
}

/* === Notifications === */
.ui__notifications-content div {
  color: var(--ls-primary-text-color);
}

/* ====================
	TEXT EDITING
   ====================*/

/* Fix: Keep underlined text on same line  */
.raw_html + .is-paragraph {
  display: inline;
}

.raw_html {
  display: inline;
}

/* === Unordered lists === */
ul {
  list-style-type: square;
  margin-top: 10px;
}

.block-body ul {
  margin-bottom: 1em;
}

/* ul li::marker {
	font-size: 10px;
} */

/* === Ordered lists ===  */
/* ol {
	list-style: none;
	counter-reset: item;
} */

.block-body ol {
  margin-bottom: 1em;
}

ol li {
  /* counter-increment: item; */
  margin-bottom: 5px;
}

ol li:before {
  /* color: white; */
  /* display: inline-block; */
  /* font-weight: semibold; */
  /* color: var(--ls-page-checkbox-color); */
  margin-right: 10px;
  /* content: counter(item); */
  /* background: lightblue; */
  /* border-radius: 100%; */
  width: 1.2em;
  text-align: center;
  color: var(--ls-primary-background-color) !important;
  background-color: var(--ls-page-checkbox-color);
  font-size: 0.7em;
  border-radius: 3px;
  float: left;
  /* Prevent line wrap */
  /* position: absolute; */
  margin-top: 0.3em;
}

ol li p {
  /* float:right; */
  width: 90%;
  /* Reduce width by custom li identifier so line does not wrap */
}

/* === Bold and Italic text === */
/* Emphasize bold text more */
.dark-theme .inline b {
  color: #ebebeb;
}

.white-theme .inline b {
  color: #464646;
}

/* Emphasize italic text more */
.dark-theme .inline i {
  color: rgb(235, 235, 235);
}

.white-theme .inline i {
  color: rgb(70, 70, 70);
}

/* === Blocks children tree line realignment === */
.block-children {
  border-left: 1px solid;
  border-left-color: var(--ls-guideline-color, #ddd);
  margin-left: 1.05rem !important;
}

/* === Miscellaneous === */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 35%), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

a.chosen {
  background: var(--ls-a-chosen-bg);
  font-weight: bold;
}

.bg-base-3 {
  background-color: var(--ls-secondary-background-color);
}

/* === Colored text blocks (via mark, right-click) === */
.inline .with-bg-color {
  border-radius: 3px;
}

/* === Highlighted text (via ===) === */
mark {
  background: var(--text-highlight-bg) !important;
  color: var(--text-highlight) !important;
  padding: 0 4px;
  border-radius: 3px;
  /* font-weight: bold; */
}

mark a {
  color: #004256 !important;
  /* color: var(--ls-tertiary-background-color) !important; */
}

mark code {
  color: #3d405b !important;
  /* color: var(--ls-tertiary-background-color) !important; */
}

.white-theme mark code {
  color: #3d405b !important;
  /* color: var(--ls-tertiary-background-color) !important; */
  /* f4f1de/e07a5f/3d405b/81b29a/f2cc8f/+white+dark black */
  /* background-color: #e07a5f !important; */
}

mark a:hover {
  background: var(--yellow-light);
  color: #fff !important;
  /* color: var(--ls-tertiary-background-color) !important; */
}

#ui__ac mark {
  /* background: var(--highlight-light); */
  background: var(--text-highlight);
  /* color: var(--frontend); */
  padding: 0 0px;
  border-radius: 3px;
  font-weight: bold;
  text-decoration: underline;
}

/* === Bullets === */
.bullet-container .bullet,
a:hover > .bullet-container {
  border-radius: 50%;
  /* Nested bullets look distorted if changing size */
  /* width: 5px;
	height: 5px; */
  background-color: var(--ls-block-bullet-color-outer);
}

.bullet-container.bullet-closed {
  /* background-color: #f2f2ef00; */
  border: 2px solid var(--ls-block-bullet-color);
}

/* === Task Management === */
/* Checkboxes */
.form-checkbox {
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  background-color: var(--ls-primary-background-color) !important;
  border: 1px solid var(--ls-page-checkbox-border-color) !important;
  border-radius: 20%;
}

.form-checkbox:checked {
  background-color: var(--ls-page-checkbox-border-color) !important;
}

/* Default; also applies to NOW */
.marker-switch,
.block-marker.waiting {
  font-size: 70%;
  vertical-align: middle;
  margin: 0px 6px 0px 2px;
  border-radius: 3px;
  font-weight: bold;
  width: 1rem;
  height: 1rem;
  opacity: 0.8;
  border: 1px solid;
  background-color: var(--marker-switch-bgcolor);
  color: var(--marker-switch-color);
}

/* TODO */
[title='Change from TODO to DOING'] {
  background-color: var(--marker-switch-bgcolor);
  color: var(--marker-switch-color);
  opacity: 0.8;
  visibility: visible;
  /* display: inline-block; */
  /* margin: 0 5px 0 20px; */
  padding: 3px;
}

/* DOING */
[title='Change from DOING to TODO'] {
  background-color: var(--yellow-light) !important;
  color: var(--yellow) !important;
  opacity: 0.8;
  visibility: visible;
  /* display: inline-block; */
  /* margin: 0 5px 0 20px; */
  padding: 3px;
}

/* .doing:after {
	content: "🚧";
	display: inline-block;
	padding: 0 0px;
	margin: 0 0px;
	position: absolute;
	left: 20px;
} */

/* LATER */
[title='Change from LATER to NOW'] {
  background-color: var(--text-accent-light);
  color: var(--comment);
  opacity: 0.8;
  visibility: visible;
  /* display: inline-block; */
  /* margin: 0 5px 0 20px; */
  padding: 3px;
}

/* WAITING */
.block-marker.waiting {
  background-color: var(--yellow-light) !important;
  color: var(--text-accent) !important;
  opacity: 0.8;
  visibility: visible;
  /* display: inline-block; */
  /* margin: 0 5px 0 20px; */
  padding: 3px;
}

/* CANCELED */
.canceled::before {
  content: 'CANCELED';
  font-size: 70%;
  vertical-align: middle;
  margin: 0px 6px 0px 2px;
  border-radius: 3px;
  font-weight: bold;
  width: 1rem;
  height: 1rem;
  opacity: 0.8;
  border: 1px solid;
  padding: 3px;
  background-color: var(--text-accent-light);
  color: var(--text-accent);
}

/* .todo:after {
	content: "🔥";
	padding: 0 0px;
	margin: 0px;
	position: absolute;
	left: 20px;
	top: 0px;
} */

/* DONE */
.done {
  text-decoration: none;
  opacity: 0.7;
}

/* ==== Task priorities (from https://github.com/dracula/logseq/blob/master/custom.css) ==== */
.priority {
  /* color: var(--ls-tag-text-color); */
  opacity: 1 !important;
  /* Hide text */
  font-size: 0px;
}

.priority:hover,
a.tooltip-priority:hover,
.priority:hover::before {
  opacity: 0.8;
}

a.priority[href='#/page/A']:before {
  content: 'A';
  background: var(--red);
}

a.priority[href='#/page/B']:before {
  content: 'B';
  background: var(--yellow);
}

a.priority[href='#/page/C']:before {
  content: 'C';
  background: var(--green);
}

a.priority:before {
  font-size: 0.9rem;
  font-weight: bold;
  padding: 1px 4px 0px 3px;
  margin: 0px 2px 0px 0px;
  border-radius: var(--ls-border-radius-low);
  color: var(--ls-primary-background-color);
}

/* === iFrame embeds (and Youtube, Twitter etc.) === */
iframe {
  width: 100%;
}

/* === Tables === */
tr:nth-child(2n),
tr:nth-child(2n + 1) {
  background: var(--ls-primary-background-color);
  border-bottom: 1px solid var(--ls-border-color);
}

tr:nth-child(2n) {
  background: var(--ls-tertiary-background-color);
  border-bottom: 1px solid var(--ls-border-color);
}

th {
  color: var(--orange);
  background-color: var(--ls-secondary-background-color);
  border-bottom: 1px solid var(--ls-border-color);
}

/* Allow tables to take more width */
.table-wrapper {
  max-width: 80% !important;
  margin: auto;
}

@media only screen and (max-width: 1600px) {
  .table-wrapper {
    max-width: 100% !important;
  }
}

/* Optimize tables for narrow width */
.table-wrapper table td {
  width: auto;
  min-width: 5em;
  font-size: 0.8em;
}

.table-wrapper table th {
  white-space: nowrap;
}

/* === Query results block === */
.custom-query {
  background-color: var(--ls-secondary-background-color);
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
  margin: 0 0px 0 -10px;
  border-radius: 3px;
}

/* Remove unnecessary indent for query blocks */
.custom-query .content div > div {
  padding-left: 0;
}

.custom-query .initial .text-sm,
.custom-query .custom-query-title .text-sm {
  font-size: 0.8em;
}

/* 	.custom-query .p-1::before {
        content: "";
		color: var(--ls-page-inline-code-color);
		font-size: 85%;
        font-family: MesloLGS NF,Monaco,Consolas,Liberation Mono,Courier New,monospace;
          } */

.custom-query .opacity-70 {
  opacity: 1;
}

.custom-query .p-1 {
  font-size: 0.65em;
  font-family: JetBrainsMono NF, Meslo LG L for Powerline, Menlo, 'Fira Code', Monaco, Consolas, 'COURIER NEW',
    monospace;
  margin-left: -10px;
  background: none;
}

/* === Journal Queries === */
#today-queries .custom-query {
  background-color: var(--ls-tertiary-background-color);
}

#today-queries .custom-query .opacity-70::before {
  content: '';
}

/* === Journals === */
#journals .journal:first-child {
  border-top: none;
  padding: 0;
  min-height: 200px;
}

#journals .journal.page {
  min-height: 100px;
  margin: 0px;
  border: 0px solid var(--ls-block-bullet-border-color);
  padding: 0px;
}

.journal-item.content .title .title {
  /* border-bottom: 1px solid var(--ls-title-text-color); */
  width: calc(var(--ls-main-content-max-width) - 160px);
  /* font-size: 38px; */
  /* font-family: Barlow; */
  font-weight: bold;
  color: var(--ls-primary-text-color);
}

.journal-item.content .journal-title {
  margin-top: 2em;
  margin-bottom: 1em;
}

#journals .title h1:before {
  content: '📅 ';
  font-size: 24px;
  vertical-align: top;
  padding-right: 1em;
}

#journals .journal-item {
  border-top: 0px solid;
  border-top-color: var(--ls-border-color, #738694);
  padding: 0;
  margin: 0;
  background: none;
  min-height: 12em;
}

#journals .journal-item:first-child {
  border-top: 0px solid;
  border-top-color: var(--ls-border-color, #738694);
  padding: 0;
  margin: 0;
  background: none;
  min-height: 24em;
}

/* === Page breaks === */
hr {
  /* margin: 2rem 0; */
  margin: 0rem 0;
  border-color: var(--ls-foreground, #ccc);
}

/* === Headings === */
h1,
h2,
h3 {
  background-color: var(--ls-secondary-background-color);
  padding-left: 0.5em;
  border-radius: 3px;
  border: none !important;
  /* border-bottom-width: 5px;
	border-color: var(--ls-secondary-background-color); */
}

h1 {
  color: var(--ls-link-text-color);
}

h2 {
  text-decoration: none;
}

h3 {
  margin: 0;
}

h4 {
  margin: 0 0 4px 0 !important;
}

h1,
h2,
h3 {
  width: 95%;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--ls-link-text-color);
}

h1.title {
  margin-bottom: 1rem;
  color: var(--ls-link-text-color);
  /* color: var(--ls-title-text-color); */
  font-size: var(--ls-page-title-size);
  /* padding: 0px; */
  line-height: 3rem;
  text-align: left;
  /* font-family: 'Pacifico'; */
}

/* Inspired by https://github.com/pengx17/logseq-dev-theme */
.ls-block h1::after {
  content: 'h1';
  background-color: var(--ls-secondary-background-color);
  border-radius: 3px;
  padding: 4px;
  width: 2em;
  text-align: center;
  font-size: 14px;
  color: var(--ls-primary-text-color);
  font-weight: normal;
  vertical-align: middle;
  float: right;
  display: table-cell;
  /* margin: auto;
	position: relative;
	right: 0; */
  /* Push to right */
  position: absolute;
  right: 8px;
  top: 18px;
}

.ls-block h2::after {
  content: 'h2';
  background-color: var(--ls-secondary-background-color);
  border-radius: 3px;
  padding: 4px;
  width: 2em;
  text-align: center;
  font-size: 14px;
  color: var(--ls-primary-text-color);
  font-weight: normal;
  vertical-align: middle;
  float: right;
  display: table-cell;
  /* Push to right */
  position: absolute;
  right: 8px;
  top: 18px;
}

.ls-block h3::after {
  content: 'h3';
  background-color: var(--ls-secondary-background-color);
  border-radius: 3px;
  padding: 4px;
  width: 2em;
  text-align: center;
  font-size: 14px;
  color: var(--ls-primary-text-color);
  font-weight: normal;
  vertical-align: middle;
  float: right;
  display: table-cell;
  /* Push to right */
  position: absolute;
  right: 8px;
  top: 18px;
}

.ls-block h4::after {
  content: 'h4';
  background-color: var(--ls-secondary-background-color);
  border-radius: 3px;
  padding: 4px;
  width: 2em;
  text-align: center;
  font-size: 14px;
  color: var(--ls-primary-text-color);
  font-weight: normal;
  vertical-align: middle;
  float: right;
  display: table-cell;
  /* Push to right */
  position: absolute;
  right: 8px;
  top: 0px;
}

.ls-block h5::after {
  content: 'h5';
  background-color: var(--ls-secondary-background-color);
  border-radius: 3px;
  padding: 4px;
  width: 2em;
  text-align: center;
  font-size: 14px;
  color: var(--ls-primary-text-color);
  font-weight: normal;
  vertical-align: middle;
  float: right;
  display: table-cell;
  /* Push to right */
  position: absolute;
  right: 8px;
  top: 0px;
}

.ls-block h2 {
  font-size: 1.6em !important;
  margin: 0.5em 0 0em 0;
  /* font-family: Barlow; */
  font-weight: bold;
}

.ls-block h3 {
  font-size: 1.17em;
  margin: 0.8em 0 0.25rem 0;
}

/* === Tooltips === */
.tippy-wrapper > h2,
.tippy-wrapper > .page-reference,
.tippy-wrapper > .my-2 {
  background: var(--ls-page-properties-background-color);
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 0em;
  top: -1em;
  z-index: 2;
  padding: 2px 1em 2px 1em;
  white-space: nowrap;
  font-weight: bold;
  border: 2px solid var(--ls-tertiary-background-color);
  border-radius: 3px;
  width: auto;
}

.tippy-wrapper .content {
  margin-top: 1em;
}

/* === Folding titles: bigger arrow === */
a.block-control {
  margin: -0.4rem 10px 0px 0;
  /* Avoid introduced with 0.4.4 */
  /* padding: 0 24px 0 15px; */
  margin-left: -30px !important;
}

a.block-control > .w-4 {
  width: 1.3rem;
}

a.block-control > .h-4 {
  height: 1.3rem;
}

.initial .blocks-container.flex-1 {
  margin-left: 3px !important;
}

/* === Images === */
.dark-theme .ls-block img {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 100%), 0 10px 10px -5px rgb(0 0 0 / 100%);
}

/* === Datepicker for scheduled/deadline === */
.dark-theme .datepicker td.active,
.dark-theme .datepicker td.active:hover,
.light-theme .datepicker td.active,
.light-theme .datepicker td.active:hover {
  background-color: var(--datepicker-active-bgcolor);
  border: var(--datepicker-active-bordersize) solid;
  border-color: var(--datepicker-active-bordercolor);
  color: var(--datepicker-active-color);
}

.dark-theme .datepicker td.available:hover,
.dark-theme .datepicker th.available:hover,
.light-theme .datepicker td.available:hover,
.light-theme .datepicker th.available:hover {
  background: var(--datepicker-available-hoverbgcolor);
  color: var(--datepicker-available-hovercolor);
}

/* Timestamps for scheduled/deadline */
.timestamp {
  font-family: consolas, monospace;
  color: var(--text-accent);
}

/* === Tags === */
a.tag {
  opacity: 1;
  color: var(--ls-primary-text-color);
  background-color: var(--tagpills-border);
  /* background-color: var(--tagpills-bg); */
  /* border: 1px solid var(--tagpills-border); */
  font-size: 13px;
  padding: 0px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: var(--tagpills-border-radius);
  /* text-transform: uppercase; */
}

/* a.tag::first-letter {
	font-size: 10px;
} */

a.tag:hover {
  color: white !important;
  /* background-color: var(--accent-bgcolor); */
  opacity: 0.8;
  cursor: e-resize !important;
}

a.tag[data-ref*='important'] {
  background-color: var(--red);
}

a.tag[data-ref*='inprogress'] {
  color: #adf752;
}

a.tag[data-ref*='done'] {
  color: #31cfbb;
}

a.tag[data-ref*='book']:after {
  content: '📚';
}

a.tag[data-ref*='movie']:after {
  content: '🎞';
}

a.tag[data-ref*='soft']:after {
  content: '💾';
}

a.tag[data-ref*='tools']:after {
  content: '🛠';
}

a.tag[data-ref*='hardware']:after {
  content: '💻';
}

a.tag[data-ref*='TV']:after {
  content: '📺';
}

a.tag[data-ref*='3d']:after {
  content: '💠';
}

a.tag[data-ref*='2d']:after {
  content: '🎨';
}

a.tag[data-ref*='science']:after {
  content: '🧪';
}

a.tag[data-ref*='boardgame']:after {
  content: '🎲';
}

a.tag[data-ref='games']:after {
  content: '🕹';
}

a.tag[data-ref*='audio']:after {
  content: '🎧';
}

a.tag[data-ref*='travel']:after {
  content: '✈';
}

a.tag[data-ref*='to-buy']:after {
  content: '🛒';
}

a.tag[data-ref*='health']:after {
  content: '💊';
}

a.tag[data-ref*='photo']:after {
  content: '📷';
}

a.tag[data-ref*='food']:after {
  content: '🥗';
}

a.tag[data-ref*='cloth']:after {
  content: '👕';
}

/* === Code === */
:not(pre) > code,
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  border-radius: 3px;
  font-size: 0.8rem;
  font-family: 'IBM Plex Mono', 'Fira Code', Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace !important;
  /* font-family: JetBrainsMono NF, Meslo, MonoLisa, "Fira Code", Monaco, Menlo, Consolas, "COURIER NEW", monospace; */
  padding: 3px 5px !important;
}

.CodeMirror {
  font-family: Fira Code, Consolas, monospace;
  font-size: 12px;
  color: var(--text-code);
  border-radius: 3px;
}

.CodeMirror-scroll {
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  margin-bottom: -40px;
  margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: 0;
  position: relative;
}

.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber,
.CodeMirror-scroll,
.CodeMirror-sizer {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  /* background-color: black; */
  background-color: var(--ls-secondary-background-color);
}

.CodeMirror-gutters {
  border-right: 1px solid #4e4e4e;
  /* background-color: #141313; */
  background-color: var(--ls-secondary-background-color);
  white-space: nowrap;
}

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #919191;
  white-space: nowrap;
}

.extensions__code > .CodeMirror {
  z-index: 0;
  height: auto;
  padding: 15px 0 0 0;
  font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
  /* max-width: 86vw; */
  background-color: transparent;
  border-radius: 3px;
}

.extensions__code-lang {
  background: var(--light-background);
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

#right-sidebar pre.CodeMirror-line {
  background-color: var(--ls-secondary-background-color);
}

.extensions__code-lang {
  position: absolute;
  top: -6px;
  right: 0;
  padding: 4px 0.5rem;
  margin: 0px 0;
  font-size: 0.7rem;
  color: var(--orange);
  z-index: 1;
  background-color: var(--ls-secondary-background-color);
  text-transform: uppercase;
}

.extensions__code {
  position: relative;
  z-index: 0;
  /* max-width: calc(var(--ls-main-content-max-width) - 50px); */
  /* TEMP */
  overflow: auto;
}

.cm-s-default .CodeMirror-gutters {
  color: var(--background);
}

.cm-s-default .CodeMirror-cursor {
  border-left: solid thin var(--white);
}

.cm-s-default .CodeMirror-linenumber {
  color: var(--comment);
}

.cm-s-default .CodeMirror-line {
  box-shadow: none;
}

.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection,
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
  background: #fff;
}

.CodeMirror-selected {
  /* background: rgba(255, 255, 255, 0.1); */
  background: var(--selection-code) !important;
}

.cm-s-default span.cm-comment {
  color: var(--comment);
}

.cm-s-default span.cm-string,
.cm-s-default span.cm-string-2 {
  color: var(--yellow);
}

.cm-s-default span.cm-number {
  color: var(--purle);
}

.cm-s-default span.cm-variable {
  color: var(--green);
}

.cm-s-default span.cm-variable-2 {
  color: var(--white);
}

.cm-s-default span.cm-def {
  color: var(--green);
}

.cm-s-default span.cm-operator {
  color: var(--gray-light);
}

.cm-s-default span.cm-keyword {
  color: var(--gray-light);
}

.cm-s-default span.cm-atom {
  color: var(--purple);
}

.cm-s-default span.cm-meta {
  color: var(--white);
}

.cm-s-default span.cm-tag {
  color: var(--gray-light);
}

.cm-s-default span.cm-attribute {
  color: var(--green);
}

.cm-s-default span.cm-qualifier {
  color: var(--green);
}

.cm-s-default span.cm-property {
  color: var(--cyan);
}

.cm-s-default span.cm-builtin {
  color: var(--green);
}

.cm-s-default span.cm-variable-3,
.cm-s-default span.cm-type {
  color: var(--orange);
}

.cm-s-default .CodeMirror-activeline-background,
.cm-s-default .CodeMirror-activeline,
.extensions__code .CodeMirror-activeline-background {
  background: var(--code-current-line) !important;
}

.cm-s-default .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: var(--white) !important;
}

.CodeMirror-gutter-filler,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-vscrollbar {
  position: absolute;
  z-index: 6;
  display: none;
  outline: 0;
  cursor: auto;
}

/* === Page references === */
.page-reference.nested .page-ref {
  font-family: Cairo;
}

.page-reference .text-gray-500 {
  opacity: 0.6;
}

.white-theme .page-reference .text-gray-500 {
  opacity: 0.4;
  color: #ccc;
}

.white-theme .page-reference .bracket {
  color: var(--ls-primary-text-color) !important;
}

div .open-block-ref-link {
  background-color: var(--ls-tertiary-background-color) !important;
  opacity: 1;
}

/* === Block properties === */
.blocks-properties {
  opacity: 1;
  background-color: var(--ls-block-properties-background-color);
}

.blocks-properties .my-1 b {
  font-weight: bold;
  color: var(--text-accent);
}

/* === Block references == */
.block-ref {
  color: var(--ls-link-ref-text-color);
  /* padding-bottom: 0px; */
  padding: 0;
  border-bottom: -0px solid;
  border-bottom-color: var(--ls-link-ref-text-color);
  cursor: alias;
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.1em;
}

.block-ref .block-content {
  cursor: alias !important;
}

.cp__right-sidebar-inner .block-ref {
  color: var(--ls-link-ref-text-color);
  text-decoration: none;
}

.block-ref:after {
  display: inline-block;
  content: '^';
  /* width: 21px; */
  /* height: 16px; */
  color: #fff;
  /* background: transparent 50% 200%/54% url('https://svgshare.com/i/SWJ.svg') no-repeat; */
  /* filter: invert(3%) sepia(100%) saturate(1920%) hue-rotate(0deg) brightness(1419%) contrast(249%); */
}

/* === Icon to distinguish external links === */
a.external-link {
  border-bottom: 0px;
}

a.external-link:after {
  display: inline-block;
  content: '*';
  /* width: 21px; */
  /* height: 16px; */
  color: var(--foreground);
  /* background: transparent 50% 200%/54% url('https://svgshare.com/i/SWJ.svg') no-repeat; */
  /* filter: invert(3%) sepia(100%) saturate(1920%) hue-rotate(0deg) brightness(1419%) contrast(249%); */
}

/* === Highlight bullets of current path (by cannnibalox v20210220, from https://github.com/cannibalox/logseq-dark-hpx logseq-highlight-current-path.css) === */
.ls-block .bullet {
  background-color: var(--foreground);
}

/* focus-within so bullet stays highlighted if cursor in block hierarchy */
.ls-block:not(:hover):not(:focus-within) .bullet {
  background-color: var(--ls-block-bullet-color);
}

/* === Colorful indentation levels (by cannibalox, from https://github.com/cannibalox/logseq-dark-hpx logseq-colorful-indents.css) === */
.block-children {
  border-left: 1px solid transparent;
}

.block-children [level='3'] {
  border-left: 1px solid;
  border-left-color: #ff00005c;
}

.block-children [level='4'] {
  border-left: 1px solid;
  border-left-color: #ec87225e;
}

.block-children [level='5'] {
  border-left: 1px solid;
  border-left-color: #ffff0052;
}

.block-children [level='6'] {
  border-left: 1px solid;
  border-left-color: #65d95b7a;
}

.block-children [level='7'] {
  border-left: 1px solid;
  border-left-color: #2ca0df5e;
}

.block-children [level='8'] {
  border-left: 1px solid;
  border-left-color: #9f8af061;
}

.block-children [level='9'] {
  border-left: 1px solid;
  border-left-color: #f15bf74f;
}

.ls-block {
  margin: -2px 0px -2px -1px !important;
  padding: 4px 1px !important;
}

/* === Highlight indentation line on hover === */
.block-children:hover {
  /* border-left-color: #6e2222; */
  border-left: 1px solid !important;
  /* border-left: none; */
  border-right: none;
}

.ls-block > .block-children:hover {
  /* border-left-color: #6e2222; */
  border-left: 1px solid;
  /* border-left: none; */
}

/* .ls-block:hover {
	border: none;
} */

/* === Dotted background === */
/* .cp__right-sidebar .sidebar-item {
	background: transparent;
}
.cp__right-sidebar,
.cp__sidebar-main-layout {
	background-color: transparent;
}
#app-container::before {
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACHSURBVHgB7ddRCgIhFIbRa8wK3EH731OtQLdQCIUPDUP2IDidA4Lov4EvAoC11Frv7dhHXAIAAGAOLdZpMQAAYBYt1mkxAABgFi3WaTEAAOBHpZTUzt7ftvf47pKc8zW+sPo+pXR7XT/2W9A8AgAA/t5RW43uT9liR201uj9ri422lRYDWNETCUrqfCW92rQAAAAASUVORK5CYII=) repeat;
}
html[data-theme="dark"] #app-container::before {
	opacity: 0.1;
} */

/* Highlight currently selected block */

.editor-wrapper {
  border: 1px solid var(--ls-tertiary-background-color);
}

/* === Outlining current block path (by pengx, from https://github.com/pengx17/logseq-dev-theme/commit/e59450dab4f2d3a582a80a26fcd513ffe5e816c1) === */
/* .ls-block>div>div.items-center {
		height: 26px !important;
		position: relative;
	}
	div.items-center::before,
	div.items-center::after,
	.ls-block::before,
	.ls-block::after,
	.block-content-wrapper::before {
		pointer-events: none;
	}
	.ls-block>div>div.items-center::before {
		content: "";
		height: 100%;
		left: -2px;
		right: 6px;
		top: calc(-50% + 1px);
		position: absolute;
		border-left: 2px solid transparent;
		border-bottom: 2px solid transparent;
		border-bottom-left-radius: 10px;
	}
	.blocks-container>.ls-block>div>div.items-center::before,
	.blocks-container>.ls-block:focus-within>div>div.items-center::after,
	.blocks-container>.block-children:focus-within>.ls-block::before,
	.blocks-container>#lazy-blocks>.ls-block>div>div.items-center::before,
	.blocks-container>#lazy-blocks>.ls-block:focus-within>div>div.items-center::after,
	.blocks-container>#lazy-blocks>.block-children:focus-within>.ls-block::before {
		display: none;
	}
	.ls-block:focus-within>div>div.items-center::before {
		border-color: var(--path);
	}
	.ls-block>div>div.items-center::after {
		content: "";
		height: calc(100% - 10px);
		top: -50%;
		left: -2px;
		position: absolute;
		border-left: 2px solid transparent;
	}
	.ls-block:focus-within>div>div.items-center::after {
		border-color: var(--path);
	}
	.block-children>.ls-block::before {
		content: "";
		top: -10px;
		bottom: 0;
		border-left: 2px solid transparent;
		left: -2px;
		position: absolute;
	}
	.block-children:focus-within>.ls-block:not(:focus-within)::before {
		border-color: var(--path);
	}
	.block-children:focus-within>.ls-block:focus-within~.ls-block::before {
		border-color: transparent;
	}
	.ls-block>div>.block-content-wrapper {
		position: relative;
	}
	.ls-block>div>.block-content-wrapper::before {
		content: "";
		top: 1em;
		bottom: 0;
		left: -17px;
		position: absolute;
		border-left: 2px solid transparent;
	}
	.ls-block[haschild=true]:focus-within>div>.block-content-wrapper::before {
		border-color: var(--path);
	}
	.doc-mode div.items-center::before,
	.doc-mode div.items-center::after,
	.doc-mode .ls-block::before,
	.doc-mode .ls-block::after {
		display: none;
	} */

/* === Progress bars (by pengx17, from https://github.com/pengx17/logseq-dev-theme) === */
progress {
  border: 0px solid transparent;
  border-radius: 6px;
  vertical-align: middle;
  height: 0.8em;
  width: 100px;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--comment);
}

progress::-webkit-progress-value {
  background: var(--green);
}

/* === Kanban view for child blocks (by cannibalox v20210220) === */
/* use: inline tag #kanban, #kanban-small or #kanban-wXXX    */

/* try:  #kanban-w200,#kanban-w300, #kanban-w400             */
div[data-refs-self*='kanban'] > .block-children {
  display: inline-flex;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 10px;
}

div[data-refs-self*='kanban'] > .block-children > div {
  display: inline-block;
  width: 400px;
  padding-right: 3px;
}

/* #kanbansmall : smaller font with hover zoom */
div[data-refs-self*='kanban-small'] > .block-children .block-content {
  font-size: 11px;
  font-weight: normal;
}

div[data-refs-self*='kanban-small'] > .block-children .block-content:hover {
  font-size: 14px !important;
  min-width: 100px;
  margin: 0 10px;
}

/* #kanban-w[100-300] : force width of the columns */
div[data-refs-self*='kanban-w100'] > .block-children .block-content {
  width: 100px;
}

div[data-refs-self*='kanban-w200'] > .block-children .block-content {
  width: 200px;
}

div[data-refs-self*='kanban-w300'] > .block-children .block-content {
  width: 300px;
}

div[data-refs-self*='kanban-w300'] > .block-children {
  border: 1px solid var(--ls-block-bullet-border-color);
  padding: 10px 0;
}

div[data-refs-self*='kanban-w400'] > .block-children .block-content {
  width: 380px;
}

div[data-refs-self*='kanban-w300'] > .block-children {
  border: 1px solid var(--ls-block-bullet-border-color);
  padding: 10px 0;
}

div[data-refs-self*='kanban-w400'] > .block-children .block-content {
  width: 380px;
}

/* === Tooltip Delay === */
/* hide the container bg */
/* .tippy-tooltip {
	background-color: transparent;
	transition-duration: 1s !important;
}*/

/* add delay*/
/*.tippy-wrapper {
	transition-delay: 100ms !important
}
.tippy-popper [x-arrow] {
	transition-delay: 0ms !important
}*/

/* fast dissolve on leave */
/*.tippy-popper .leave {
	transition-duration: 0ms !important;
	transition-delay: 0ms;
} */

/* === PDF Annotations === */
.extensions__pdf-toolbar {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0, #fff 40%);
}