Skip to content

Instantly share code, notes, and snippets.

@eteplus
Created November 3, 2021 01:59
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
logseq enhanced theme
.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%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment