logseq-theme.css

/* fonts
 * ===============================*/
@import url('https://fonts.loli.net/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont/style.css');

@font-face {
  font-family: "Only Emoji";
  src: local("Apple Color Emoji"), local("Android Emoji"), local("Segoe UI Emoji"), local("Segoe UI");
  unicode-range: U+200D, U+2049, U+20E3, U+2117, U+2120, U+2122, U+2139, U+2194-2199, U+21A9, U+21AA, U+229C, U+231A, U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FE, U+24C2, U+25A1, U+25AA-25AD, U+25B6, U+25C0, U+25D0, U+25D1, U+25E7-25EA, U+25ED, U+25EE, U+25FB-25FE, U+2600-2605, U+260E, U+2611, U+2614, U+2615, U+2618, U+261D, U+2620, U+2622, U+2623, U+2626, U+262A, U+262E, U+262F, U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F, U+2660, U+2663, U+2665, U+2666, U+2668, U+267B, U+267E, U+267F, U+2691-2697, U+2699, U+269B, U+269C, U+26A0, U+26A1, U+26A7, U+26AA, U+26AB, U+26B0, U+26B1, U+26BD, U+26BE, U+26C4, U+26C5, U+26C8, U+26CE, U+26CF, U+26D1, U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721, U+2728, U+2733, U+2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755, U+2757, U+2763, U+2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934, U+2935, U+2B05-2B07, U+2B0C, U+2B0D, U+2B1B, U+2B1C, U+2B1F-2B24, U+2B2E, U+2B2F, U+2B50, U+2B55, U+2B58, U+2B8F, U+2BBA-2BBC, U+2BC3, U+2BC4, U+2BEA, U+2BEB, U+3030, U+303D, U+3297, U+3299, U+E000-E009, U+E010, U+E011, U+E040-E04B, U+E050-E058, U+E080-E0B4, U+E0C0-E0CA, U+E0FF-E10D, U+E140-E144, U+E146-E149, U+E150-E157, U+E181-E188, U+E1C0-E1C4, U+E1C6-E1D7, U+E200-E20E, U+E240-E269, U+E280-E283, U+E2C0-E2C4, U+E2C6-E2DA, U+E300-E303, U+E305-E30F, U+E312-E316, U+E318-E322, U+E324-E329, U+E32B, U+E340-E348, U+E380, U+E381, U+F000, U+F8FF, U+FE0F, U+1F004, U+1F0CF, U+1F10D-1F10F, U+1F12F, U+1F16D-1F171, U+1F17E, U+1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A, U+1F22F, U+1F232-1F23A, U+1F250, U+1F251, U+1F300-1F321, U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B, U+1F39E-1F3F0, U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567, U+1F56F, U+1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D, U+1F590, U+1F595, U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2, U+1F5BC, U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8, U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2, U+1F6D5-1F6D7, U+1F6E0-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0, U+1F6F3-1F6FC, U+1F7E0-1F7EB, U+1F90C-1F93A, U+1F93C-1F945, U+1F947-1F978, U+1F97A-1F9CB, U+1F9CD-1F9FF, U+1FA70-1FA74, U+1FA78-1FA7A, U+1FA80-1FA86, U+1FA90-1FAA8, U+1FAB0-1FAB6, U+1FAC0-1FAC2, U+1FAD0-1FAD6, U+1FBC5-1FBC9, U+E0061-E0067, U+E006C, U+E006E, U+E0070-E0079, U+E007F;
}

/* variables 
 * ===============================*/
:root {
  --ls-font-family: 'Source Sans Pro', 'Only Emoji';
  --ls-left-sidebar-width: 13rem;
  --ls-page-title-size: 1.5rem;
  --ct-font-family: 'Only Emoji', 'Source Serif Pro', 'LXGW Bright', 'Source Sans Pro', 'LXGW WenKai', STHeiti, Arial, serif;
  --ct-secondary-color: var(--ls-secondary-text-color);
  
  --kbd-color-background: var(--ls-tertiary-background-color);
  --kbd-color-border:     var(--ls-secondary-border-color);
  --kbd-color-text:       var(--ls-primary-text-color);
  --custom-empty-block-variant-color: var(--ls-guideline-color);
  --ct-page-title-font-family: var(--ct-font-family);
  --ct-page-title-font-weight: 300; 
  --ct-code-font-family: 'MonoLisa', 'Fira Code', 'monospace';
  --ct-inline-code-font-style: inherit;
  --ct-inline-code-border-radius: 2px;
  --ct-inline-code-padding: 2px 5px;
  --ct-inline-code-color: var(--ls-secondary-text-color);
  --ct-warning-color: #ff7262;
  --ct-success-color: #0dcf82;
  --ct-highlight-color: #ffc600;
  --ct-marker-border-radius: 4px;
  --ct-marker-size: 16px;
}

.dark-theme, html[data-theme=dark] {
  /** define var under dark mode here */
  --ct-warning-color: #ff7262;
  --ct-success-color: #0dcf82;
  --ct-highlight-color: #d3a400;
  --ls-primary-background-color: #1c2428;
  --ls-secondary-background-color: #232c30;
  --ls-tertiary-background-color: #232c30;
  --ls-quaternary-background-color: #2b353b;
  --ls-table-tr-even-background-color: #223140;
  --ls-block-ref-link-text-color: #7b96a3;
  --ls-border-color: #191f24;
  --ls-secondary-border-color: #1c2228;
  --ls-scrollbar-foreground-color: #191f24;
  --color-level-4: #3c4c53;
  --color-level-5: #45575f;
  --color-level-6: #4d626a;
  
  /** custom **/
  --custom-code-block-background-color: #191f24;
  --custom-code-block-gutters-background-color: #1c2228;
}

/*
 * Typegraph
 * ===============================*/
.block-body blockquote {
  font-style: italic;
}
/** page title */
h1.title {
  line-height: 1.2;
  /* text-decoration: underline; */
  /* font-style: italic; */
  font-weight: normal;
  color: var(--ct-secondary-color);
  font-weight: 300;
  border-left: 6px solid var(--ls-tertiary-background-color);
  padding-left: 8px;
}

kbd {
  background-color: var(--kbd-color-background);
  color: var(--kbd-color-text);
  border-radius: 0.25rem;
  border: 1px solid var(--kbd-color-border);
  box-shadow: 0 2px 0 1px var(--kbd-color-border);
  cursor: default;
  font-size: 0.75em;
  line-height: 1;
  min-width: 0.75rem;
  display: inline;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  top: -1px;
}
kbd:hover {
  box-shadow: 0 1px 0 0.5px var(--kbd-color-border);
  top: 1px;
}
/** make empty block row visible. */
.block-content-inner > div:empty::before {
  display: block;
  content: '–';
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  color: var(--custom-empty-block-variant-color);
}
/** content blocks font */
.content {
  font-family: var(--ct-font-family);
}

/** todo marker */
.block-marker.DOING,
.block-marker.TODO {
  vertical-align: baseline;
  font-family: var(--ls-font-family);
}
.block-marker.TODO {
  font-size: 10px;
}
.block-marker.DOING {
  font-style: italic;
}

/** headings */
.ls-block :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
  font-family: var(--ct-page-title-font-family);
}

.ls-block :is(h1, h2, .h1, .h2) {
  font-weight: var(--ct-page-title-font-weight);
}

.ls-block :is(h3, h4, .h3, .h4) {
  margin: 0.3em 0 0;
}

.ls-block :is(h4, .h4) {
  opacity: 0.8;
}

.ls-block .block-ref :is(h1, h2, h3, h4, h5) {
  font-size: 1em;
}

.ls-block :is(h1, h2, h3, h4, h5)::after {
  margin-left: 0.5rem;
  font-family: var(--ct-code-font-family);
  font-size: 0.6rem;
  font-style: var(--ct-inline-code-font-style) !important;
  border-radius: var(--ct-inline-code-border-radius);
  padding: var(--ct-inline-code-padding) !important;
  background: var(--ls-tertiary-background-color);
  color: var(--ct-inline-code-color);
  vertical-align: middle;
  opacity: 0.3;
}

.ls-block :is(h1, h2, h3, h4, h5):hover::after {
  opacity: 1;
}

.ls-block h1::after {
  content: "h1";
}

.ls-block h2::after {
  content: "h2";
}

.ls-block h3::after {
  content: "h3";
}

.ls-block h4::after {
  content: "h4";
}

.ls-block h5::after {
  content: "h5";
}

/*== priority styles */
a[priority],
a.priority {
  font-size: 0px;
  /* Hide text */
}

a[priority=A]::before,
a.priority[href="#/page/A" i]:before {
  content: "A";
  background: var(--ct-warning-color);
  color: #000;
}

a[priority=B]::before,
a.priority[href="#/page/B" i]:before {
  content: "B";
  background: var(--ct-highlight-color);
  color: #000;
}

a[priority=C]::before,
a.priority[href="#/page/C" i]:before {
  content: "C";
  background: var(--ct-success-color);
  color: #fff;
}

a.priority[href="#/page/A" i],
[href="#/page/B" i],
[href="#/page/C" i] {
  display: inline-flex;
  opacity: 1 !important;
}

a[priority]::before,
a.priority::before {
  transform: translateY(-1px);
  border: 1px solid #eee;
  border-radius: var(--ct-marker-border-radius);
  font-size: 12px;
  font-weight: 600;
  height: calc(var(--ct-marker-size) + 4px);
  width: calc(var(--ct-marker-size) + 4px);
  line-height: 1.5;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ct-code-font-family);
}

a.tooltip-priority:first-of-type::before {
  margin-left: 0.3em;
  margin-top: 0.5em;
}

/*= end headings */

/* code block 
 *=================================*/
.CodeMirror {
    font-family: Monaco, Menlo,Consolas,COURIER NEW,monospace
}
.cm-s-solarized.cm-s-dark {
  background-color: var(--custom-code-block-background-color);
}
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: var(--custom-code-block-gutters-background-color);
}

/* App apperance
 *=================================*/
.cp__menubar-repos #repo-name {
  font-style: italic;
  text-decoration: underline;
}
.cp__menubar .nav-header {
  gap: 0;
}

logseq_source.css

:root {
  --ls-primary-background-color: #002b36;
  --ls-secondary-background-color: #023643;
  --ls-tertiary-background-color: #08404f;
  --ls-quaternary-background-color: #094b5a;
  --ls-table-tr-even-background-color: #03333f;
  --ls-active-primary-color: #8ec2c2;
  --ls-active-secondary-color: #d0e8e8;
  --ls-block-properties-background-color: #06323e;
  --ls-page-properties-background-color: #02171d;
  --ls-block-ref-link-text-color: #1a6376;
  --ls-border-color: #0e5263;
  --ls-secondary-border-color: #126277;
  --ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
  --ls-guideline-color: #0b4a5a;
  --ls-menu-hover-color: var(--ls-secondary-background-color);
  --ls-primary-text-color: #a4b5b6;
  --ls-secondary-text-color: #dfdfdf;
  --ls-title-text-color: #93a1a1;
  --ls-link-text-color: #8abbbb;
  --ls-link-text-hover-color: var(--ls-active-secondary-color);
  --ls-link-ref-text-color: var(--ls-link-text-color);
  --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-slide-background-color: var(--ls-primary-background-color);
  --ls-block-bullet-border-color: #0f4958;
  --ls-block-bullet-color: #608e91;
  --ls-block-highlight-color: #0a3d4b;
  --ls-selection-background-color: #338fff;
  --ls-selection-text-color: #fff;
  --ls-page-checkbox-color: #6093a0;
  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
  --ls-page-blockquote-color: var(--ls-primary-text-color);
  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
  --ls-page-blockquote-border-color: var(--ls-border-color);
  --ls-page-mark-color: #262626;
  --ls-page-mark-bg-color: #fef3ac;
  --ls-page-inline-code-color: var(--ls-primary-text-color);
  --ls-page-inline-code-bg-color: #01222a;
  --ls-scrollbar-foreground-color: #11505f;
  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
  --ls-scrollbar-thumb-hover-color: hsla(0, 0%, 100%, 0.2);
  --ls-cloze-text-color: #8fbc8f;
  --ls-icon-color: var(--ls-link-text-color);
  --ls-search-icon-color: var(--ls-primary-text-color);
  --ls-search-icon-hover-color: var(--ls-secondary-text-color);
  --ls-a-chosen-bg: var(--ls-quaternary-background-color);
  --ls-pie-bg-color: #01303b;
  --ls-pie-fg-color: #0b5869;
  --ls-highlight-color-gray: var(--color-gray-900);
  --ls-highlight-color-red: var(--color-red-900);
  --ls-highlight-color-yellow: var(--color-yellow-900);
  --ls-highlight-color-green: var(--color-green-900);
  --ls-highlight-color-blue: var(--color-blue-900);
  --ls-highlight-color-purple: var(--color-purple-900);
  --ls-highlight-color-pink: var(--color-pink-900);
  --ls-error-text-color: var(--color-red-400);
  --ls-error-background-color: var(--color-red-900);
  --ls-warning-text-color: var(--color-yellow-400);
  --ls-warning-background-color: var(--color-yellow-900);
  --ls-success-text-color: var(--color-green-100);
  --ls-success-background-color: var(--color-green-900);
  --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
  --ls-header-button-background: #dee4ea;
  --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;
  --ls-tertiary-background-color: #08404f;
  --ls-quaternary-background-color: #094b5a;
  --ls-table-tr-even-background-color: #03333f;
  --ls-active-primary-color: #8ec2c2;
  --ls-active-secondary-color: #d0e8e8;
  --ls-block-properties-background-color: #06323e;
  --ls-page-properties-background-color: #02171d;
  --ls-block-ref-link-text-color: #1a6376;
  --ls-border-color: #0e5263;
  --ls-secondary-border-color: #126277;
  --ls-tertiary-border-color: rgba(0, 2, 0, 0.1);
  --ls-guideline-color: #0b4a5a;
  --ls-menu-hover-color: var(--ls-secondary-background-color);
  --ls-primary-text-color: #a4b5b6;
  --ls-secondary-text-color: #dfdfdf;
  --ls-title-text-color: #93a1a1;
  --ls-link-text-color: #8abbbb;
  --ls-link-text-hover-color: var(--ls-active-secondary-color);
  --ls-link-ref-text-color: var(--ls-link-text-color);
  --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-slide-background-color: var(--ls-primary-background-color);
  --ls-block-bullet-border-color: #0f4958;
  --ls-block-bullet-color: #608e91;
  --ls-block-highlight-color: #0a3d4b;
  --ls-selection-background-color: #338fff;
  --ls-selection-text-color: #fff;
  --ls-page-checkbox-color: #6093a0;
  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
  --ls-page-blockquote-color: var(--ls-primary-text-color);
  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
  --ls-page-blockquote-border-color: var(--ls-border-color);
  --ls-page-mark-color: #262626;
  --ls-page-mark-bg-color: #fef3ac;
  --ls-page-inline-code-color: var(--ls-primary-text-color);
  --ls-page-inline-code-bg-color: #01222a;
  --ls-scrollbar-foreground-color: #11505f;
  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.1);
  --ls-scrollbar-thumb-hover-color: hsla(0, 0%, 100%, 0.2);
  --ls-cloze-text-color: #8fbc8f;
  --ls-icon-color: var(--ls-link-text-color);
  --ls-search-icon-color: var(--ls-primary-text-color);
  --ls-search-icon-hover-color: var(--ls-secondary-text-color);
  --ls-a-chosen-bg: var(--ls-quaternary-background-color);
  --ls-pie-bg-color: #01303b;
  --ls-pie-fg-color: #0b5869;
  --ls-highlight-color-gray: var(--color-gray-900);
  --ls-highlight-color-red: var(--color-red-900);
  --ls-highlight-color-yellow: var(--color-yellow-900);
  --ls-highlight-color-green: var(--color-green-900);
  --ls-highlight-color-blue: var(--color-blue-900);
  --ls-highlight-color-purple: var(--color-purple-900);
  --ls-highlight-color-pink: var(--color-pink-900);
  --ls-error-text-color: var(--color-red-400);
  --ls-error-background-color: var(--color-red-900);
  --ls-warning-text-color: var(--color-yellow-400);
  --ls-warning-background-color: var(--color-yellow-900);
  --ls-success-text-color: var(--color-green-100);
  --ls-success-background-color: var(--color-green-900);
  --ls-focus-ring-color: rgba(18, 98, 119, 0.5);
  --ls-header-button-background: #dee4ea;
  --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;
}