Created
November 3, 2021 01:59
-
-
Save eteplus/0c1e11f9d178a7e9a49c7121045300cc to your computer and use it in GitHub Desktop.
logseq enhanced theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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