:root { --ls-tag-text-opacity: 0.8; --ls-tag-text-hover-opacity: 1; --ls-page-text-size: 1em; --ls-page-title-size: 36px; --ls-font-family: 'Inter'; --ls-main-content-max-width: 810px; --ls-main-content-max-width-wide: 100%; --ls-scrollbar-width: 6px; --ls-border-radius-low: 4px; --ls-border-radius-medium: 8px; --ls-left-sidebar-width: 240px; --ls-left-sidebar-nav-btn-size: 38px; } @media (prefers-color-scheme: dark) { html { background-color: #002b36; } html[data-theme='light'] { background-color: transparent; } } @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } } .dark-theme, html[data-theme='dark'] { --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-search-background-color: linear-gradient( to right, #021c23 0, #021b21 200px, #002b36 100% ); --ls-border-color: #0e5263; --ls-secondary-border-color: #126277; --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: rgb(138, 187, 187); --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-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-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: rgba(255, 255, 255, 0.2); --ls-head-text-color: var(--ls-link-text-color); --ls-cloze-text-color: #8fbc8f; --ls-icon-color: var(--ls-link-text-color); --ls-search-icon-color: var(--ls-link-text-color); --ls-a-chosen-bg: var(--ls-secondary-background-color); --ls-right-sidebar-code-bg-color: #04303c; --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; } .white-theme, html[data-theme='light'] { --ls-primary-background-color: #ffffff; --ls-secondary-background-color: #f7f7f7; --ls-tertiary-background-color: #f1eee8; --ls-quaternary-background-color: #e8e5de; --ls-table-tr-even-background-color: #f7f7f7; --ls-active-primary-color: rgb(4, 85, 145); --ls-active-secondary-color: #003761; --ls-block-properties-background-color: #f7f7f7; --ls-page-properties-background-color: #f7f7f7; --ls-block-ref-link-text-color: #d8e1e8; --ls-search-background-color: var(--ls-primary-background-color); --ls-border-color: #ccc; --ls-secondary-border-color: #e2e2e2; --ls-guideline-color: rgba(46, 27, 5, 0.08); --ls-menu-hover-color: var(--ls-a-chosen-bg); --ls-primary-text-color: #433f38; --ls-secondary-text-color: #161e2e; --ls-title-text-color: var(--ls-primary-text-color); --ls-link-text-color: #106ba3; --ls-link-text-hover-color: #1a537c; --ls-link-ref-text-color: #106ba3; --ls-link-ref-text-hover-color: #1a537c; --ls-tag-text-color: var(--ls-link-ref-text-color); --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color); --ls-slide-background-color: #fff; --ls-block-bullet-border-color: #dedede; --ls-block-bullet-color: rgba(67, 63, 56, 0.25); --ls-block-highlight-color: #c0e6fd; --ls-selection-background-color: #e4f2ff; --ls-page-checkbox-color: #9dbbd8; --ls-page-checkbox-border-color: var(--ls-page-checkbox-color); --ls-page-blockquote-color: var(--ls-primary-text-color); --ls-page-blockquote-bg-color: #fbfaf8; --ls-page-blockquote-border-color: #799bbc; --ls-page-inline-code-bg-color: #f7f7f7; --ls-page-inline-code-color: var(--ls-primary-text-color); --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1); --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05); --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2); --ls-head-text-color: var(--ls-link-text-color); --ls-cloze-text-color: #0000cd; --ls-icon-color: #908e8b; --ls-search-icon-color: var(--ls-icon-color); --ls-a-chosen-bg: #f7f7f7; --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; } /* region Reset top elements */ html { font-family: var(--ls-font-family), 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; /* FIXME: rewrite revealjs.css ? */ height: unset !important; overflow: auto !important; } body { color: #24292e; line-height: 1.5; background-color: transparent; min-height: 100%; word-break: break-word; /* compatible for overflow-wrap: anywhere */ } a svg { color: var(--ls-icon-color); } svg { pointer-events: none; } textarea { overflow: hidden; padding: 8px; border: 1px solid rgba(39, 41, 43, 0.15); border-radius: var(--ls-border-radius-low); font-size: 1em; line-height: 1.5; width: 100%; resize: none; outline: none; font-weight: inherit; letter-spacing: inherit; text-size-adjust: 100%; background: var(--ls-primary-background-color); } .dark-theme textarea { background: var(--ls-tertiary-background-color); } ul { list-style: circle; margin-left: 1.2em; } ol { list-style: decimal; margin-left: 1.2em; } p { line-height: 1.5; margin: 0.5rem 0; color: var(--ls-primary-text-color); } li { margin: 0.25rem 0; } li:first-child { margin-top: 0; } pre { background: var(--ls-secondary-background-color, #f6f8fa); margin: 1rem 0; line-height: 1.45em; overflow: auto; } a { cursor: pointer; color: var(--ls-link-text-color, #045591); text-decoration: none; } a:hover { color: var(--ls-link-text-hover-color, #000); } code { font-size: 85%; } pre.code { background: #282a36; background: var(--ls-secondary-background-color); color: var(--ls-primary-text-color, #f8f8f2); } :not(pre) > code { } dl { margin: 1rem 0; } dt { margin-bottom: 0.25rem; font-weight: bold; } blockquote { display: block; text-indent: 0; padding: 8px 20px; border-left: 4px solid; border-left-color: var(--ls-page-blockquote-border-color, #d3d3d3); background-color: var(--ls-page-blockquote-bg-color, #f7f7f7); margin: 1rem 0; color: var(--ls-page-blockquote-color, #24292e); font-size: 1rem; } input { color: var(--ls-primary-text-color); background: transparent; } summary { outline: none; } iframe { width: 100%; margin: 1rem 0; } img, video { margin-left: auto; margin-right: auto; } ::selection { background: var(--ls-selection-background-color); color: var(--ls-primary-text-color); } ::-moz-selection { background: var(--ls-selection-background-color); color: var(--ls-primary-text-color); } :not(pre) > code { font-style: normal !important; letter-spacing: 0; padding: 0.1em 0.4em; word-spacing: -0.15em; -webkit-border-radius: var(--ls-border-radius-low); border-radius: var(--ls-border-radius-low); color: var(--ls-page-inline-code-color); background-color: var(--ls-page-inline-code-bg-color, #eee); line-height: 1.45; text-rendering: optimizeSpeed; } /* endregion */ /** region Common utilities **/ .w10 { max-width: 10%; } .w20 { max-width: 20%; } .w30 { max-width: 30%; } .w40 { max-width: 40%; } .w50 { max-width: 50%; } .w60 { max-width: 60%; } .w70 { max-width: 70%; } .w80 { max-width: 80%; } .w90 { max-width: 90%; } .w100 { max-width: 100%; } .bg-black { background-color: rgba(0, 0, 0); } .bg-white { background-color: rgba(255, 255, 255); } .bg-gray-50 { background-color: rgba(249, 250, 251); } .bg-gray-100 { background-color: rgba(243, 244, 246); } .bg-gray-200 { background-color: rgba(229, 231, 235); } .bg-gray-300 { background-color: rgba(209, 213, 219); } .bg-gray-400 { background-color: rgba(156, 163, 175); } .bg-gray-500 { background-color: rgba(107, 114, 128); } .bg-gray-600 { background-color: rgba(75, 85, 99); } .bg-gray-700 { background-color: rgba(55, 65, 81); } .bg-gray-800 { background-color: rgba(31, 41, 55); } .bg-gray-900 { background-color: rgba(17, 24, 39); } .bg-red-50 { background-color: rgba(254, 242, 242); } .bg-red-100 { background-color: rgba(254, 226, 226); } .bg-red-200 { background-color: rgba(254, 202, 202); } .bg-red-300 { background-color: rgba(252, 165, 165); } .bg-red-400 { background-color: rgba(248, 113, 113); } .bg-red-500 { background-color: rgba(239, 68, 68); } .bg-red-600 { background-color: rgba(220, 38, 38); } .bg-red-700 { background-color: rgba(185, 28, 28); } .bg-red-800 { background-color: rgba(153, 27, 27); } .bg-red-900 { background-color: rgba(127, 29, 29); } .bg-yellow-50 { background-color: rgba(255, 251, 235); } .bg-yellow-100 { background-color: rgba(254, 243, 199); } .bg-yellow-200 { background-color: rgba(253, 230, 138); } .bg-yellow-300 { background-color: rgba(252, 211, 77); } .bg-yellow-400 { background-color: rgba(251, 191, 36); } .bg-yellow-500 { background-color: rgba(245, 158, 11); } .bg-yellow-600 { background-color: rgba(217, 119, 6); } .bg-yellow-700 { background-color: rgba(180, 83, 9); } .bg-yellow-800 { background-color: rgba(146, 64, 14); } .bg-yellow-900 { background-color: rgba(120, 53, 15); } .bg-green-50 { background-color: rgba(236, 253, 245); } .bg-green-100 { background-color: rgba(209, 250, 229); } .bg-green-200 { background-color: rgba(167, 243, 208); } .bg-green-300 { background-color: rgba(110, 231, 183); } .bg-green-400 { background-color: rgba(52, 211, 153); } .bg-green-500 { background-color: rgba(16, 185, 129); } .bg-green-600 { background-color: rgba(5, 150, 105); } .bg-green-700 { background-color: rgba(4, 120, 87); } .bg-green-800 { background-color: rgba(6, 95, 70); } .bg-green-900 { background-color: rgba(6, 78, 59); } .bg-blue-50 { background-color: rgba(239, 246, 255); } .bg-blue-100 { background-color: rgba(219, 234, 254); } .bg-blue-200 { background-color: rgba(191, 219, 254); } .bg-blue-300 { background-color: rgba(147, 197, 253); } .bg-blue-400 { background-color: rgba(96, 165, 250); } .bg-blue-500 { background-color: rgba(59, 130, 246); } .bg-blue-600 { background-color: rgba(37, 99, 235); } .bg-blue-700 { background-color: rgba(29, 78, 216); } .bg-blue-800 { background-color: rgba(30, 64, 175); } .bg-blue-900 { background-color: rgba(30, 58, 138); } .bg-indigo-50 { background-color: rgba(238, 242, 255); } .bg-indigo-100 { background-color: rgba(224, 231, 255); } .bg-indigo-200 { background-color: rgba(199, 210, 254); } .bg-indigo-300 { background-color: rgba(165, 180, 252); } .bg-indigo-400 { background-color: rgba(129, 140, 248); } .bg-indigo-500 { background-color: rgba(99, 102, 241); } .bg-indigo-600 { background-color: rgba(79, 70, 229); } .bg-indigo-700 { background-color: rgba(67, 56, 202); } .bg-indigo-800 { background-color: rgba(55, 48, 163); } .bg-indigo-900 { background-color: rgba(49, 46, 129); } .bg-purple-50 { background-color: rgba(245, 243, 255); } .bg-purple-100 { background-color: rgba(237, 233, 254); } .bg-purple-200 { background-color: rgba(221, 214, 254); } .bg-purple-300 { background-color: rgba(196, 181, 253); } .bg-purple-400 { background-color: rgba(167, 139, 250); } .bg-purple-500 { background-color: rgba(139, 92, 246); } .bg-purple-600 { background-color: rgba(124, 58, 237); } .bg-purple-700 { background-color: rgba(109, 40, 217); } .bg-purple-800 { background-color: rgba(91, 33, 182); } .bg-purple-900 { background-color: rgba(76, 29, 149); } .bg-pink-100 { background-color: #fff5f7; } .bg-pink-200 { background-color: #fed7e2; } .bg-pink-300 { background-color: #fbb6ce; } .bg-pink-400 { background-color: #f687b3; } .bg-pink-500 { background-color: #ed64a6; } .bg-pink-600 { background-color: #d53f8c; } .bg-pink-700 { background-color: #b83280; } .bg-pink-800 { background-color: #97266d; } .bg-pink-900 { background-color: #702459; } /** endregion **/ /** region App utilities **/ .page { margin-top: 24px; } .ls-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } li p:first-child, .block-body p:first-child { margin-top: 0; } li p:last-child, .block-body p:last-child, .block-body ul:last-child, .block-body ol:last-child, .block-body dl:last-child { margin-bottom: 0; } .bg-base-2 { background-color: var(--ls-secondary-background-color, #f0f8ff); } .bg-base-3 { background-color: var(--ls-primary-background-color, #fff); } .pre-white-space { white-space: pre; } .pre-wrap-white-space { white-space: pre-wrap; } .pre-line-white-space { white-space: pre-line; } .cursor-pointer, .cursor { cursor: pointer; } .external-link { text-decoration: none; border-bottom: 1px solid; } .noscroll { position: fixed; overflow-y: scroll; } .canceled, .done { text-decoration: line-through; opacity: 0.6; } .opacity-30 { opacity: 0.3; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .done > input { opacity: 1; } .page-drop-options { width: 18em; } .fixed-width { max-width: calc(var(--ls-main-content-max-width) - 30px); } .center, .foldable-title { margin: 0 auto; } .translate-x-5 { --transform-translate-x: 1.25rem; } .done, .canceled { opacity: 0.7; } .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.5)); } .tip-shadow { -webkit-filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, 0.8)); filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, 0.8)); } .admonition-icon { border-right: 1px solid; border-right-color: var(--ls-border-color, #ccc); } .dnd-separator { border-bottom: 3px solid #ccc; } .aspect-ratio-square { padding-top: 100%; } .aspect-ratio-16\/9 { padding-top: 56.25%; } .aspect-ratio-4\/3 { padding-top: 75%; } .aspect-ratio-21\/9 { padding-top: 42.86%; } .admonitionblock { margin: 2rem 0; } .abstract { margin: 2rem 0; width: 80%; font-style: italic; } .abstract p:last-of-type::before { content: ' '; white-space: pre; } .dropdown-overflow-auto { max-height: 400px; overflow-y: auto; } .heading-bg { border-radius: 50%; width: 12px; height: 12px; } /** endregion **/ /* region FIXME: override elements (?) */ h1.title { margin-bottom: 1.5rem; color: var(--ls-title-text-color, #222); font-size: var(--ls-page-title-size, 36px); font-weight: 600; } .title .page-icon { margin-right: 12px; } .left-sidebar-inner .recent .page-icon, .left-sidebar-inner .favorites .page-icon { margin-right: 8px; width: 1.1em; text-align: center; display: inline-block; color: #aaa; } .favorites li.favorite-item, .recent li.recent-item { margin: 0.1rem 0; } .left-sidebar-inner > .wrap { height: 100%; } .left-sidebar-inner .flex-column-spacer { flex: 1 1 0%; } .block-highlight, .content .selected { transition: background-color 0.15s; background-color: var(--ls-block-highlight-color); padding: -1px; } span.timestamp { margin: 0 0.25rem; } span.priority { color: #6b7280; } .form-checkbox:not(:checked):focus { box-shadow: none; } .form-checkbox:checked:focus { box-shadow: none; } a.nav-item:hover, a.star-page:hover { background-color: #00242d; } button.menu { border-right: 1px solid; border-right-color: var(--ls-secondary-background-color, #f0f8ff); color: var(--ls-link-text-color, #24292e); } .menu-link:hover, button.pull:hover, button.menu:focus { background-color: var(--ls-menu-hover-color, #f4f5f7); } .menu-link { background-color: var(--ls-primary-background-color, #fff); color: var(--ls-primary-text-color); } .menu-link:first-of-type { border-top-left-radius: var(--ls-border-radius-low); border-top-right-radius: var(--ls-border-radius-low); } .menu-link:last-of-type { border-bottom-left-radius: var(--ls-border-radius-low); border-bottom-right-radius: var(--ls-border-radius-low); } a.login { color: var(--ls-link-text-color, #444); } a.login:hover { color: var(--ls-link-text-hover-color, #000); } a.tooltip-priority { display: contents; position: absolute; left: 0; } a.tooltip-priority::after { content: attr(priority); margin-right: 10px; } a.chosen { background: var(--ls-a-chosen-bg); } a.warning, span.warning, div.warning:not(.admonitionblock), p.warning { background: #f56565; padding: 0.1em 0.4em; border-radius: var(--ls-border-radius-low); color: #fff; } .warning-text { color: #f56565; } a.error, span.error { background: red; padding: 0.1em 0.4em; border-radius: var(--ls-border-radius-low); color: #fff; } img.small { display: inline; width: 20px; height: 20px; margin-top: 0; margin-bottom: 0; } a.tag { font-size: 13px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; color: var(--ls-tag-text-color, #045591); opacity: var(--ls-tag-text-opacity, 0.8); } a.tag:hover { opacity: var(--ls-tag-text-hover-opacity, 1); color: var(--ls-tag-text-hover-color, #045591); } svg.note { color: var(--ls-primary-text-color, #19407c); } svg.tip { color: var(--ls-active-primary-color); } /* endregion */ /* region FIXME: CodeMirror override (?) */ .CodeMirror pre.CodeMirror-line, .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { font-size: 14px; } /* endregion */ hr { margin: 2rem 0; border-color: var(--ls-border-color, #ccc); } .resize { resize: both; overflow: hidden; max-width: -webkit-fill-available; } /* ideas from https://github.com/PiotrSss/logseq-bujo-theme/blob/main/main.css */ /*************************************************************** ***************************** TOP ****************************** ***************************************************************/ .cp__header-logo, .fade-link { opacity: 0.6; transition: 0.3s; color: var(--ls-primary-text-color); } a.fade-link:hover { opacity: 1; } /* import (arrows) icon */ #head .refresh svg { height: 20px; } .svg-small svg { transform: scale(0.6); display: inline; } /* < > buttons */ a.navigation { border-radius: 3px; transition: 0.3s; } /* text mark/highlight */ mark { background: #fef3ac; color: #262626; padding: 2px 4px; border-radius: 3px; } /* page reference */ .page-reference { border-radius: 3px; padding: 2px 0px; transition: 0.3s; } .page-reference .bracket { opacity: 0.3; } /* block references */ .block-ref { display: inline; } .block-ref .block-ref { padding: 6px 5px; border: none; } /* inline code */ :not(pre) > code { border-radius: 3px; font-size: 0.9em; font-family: MonoLisa, 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW', monospace; padding: 3px 5px !important; } a { transition: 0.3s; } a.tooltip-priority { transition: none; } .page-reference:hover { background: var(--ls-secondary-background-color); } .references-blocks .page-reference:hover { background: var(--ls-tertiary-background-color); } #head .fade-link { font-weight: 600; font-size: 13px; } /* excalidraw */ .Island > div > div > div { width: 44px; } .excalidraw hr { margin: 0; } .text-link { color: var(--ls-primary-text-color); } .katex * { border-color: var(--ls-primary-text-color); } #help-latex .katex-html { text-align: right; } a.page-op svg { transform: scale(0.9); } .search-more { background: var(--ls-a-chosen-bg); } .keyboard-shortcut > code { margin: 2px; background-color: var(--ls-quaternary-background-color); padding: 2px 4px !important; border-radius: 6px; color: var(--ls-secondary-text-color); } html[data-theme='light'] .keyboard-shortcut > code { box-shadow: inset 0 -1px 0 #433f3855, 0 0 1px 1px #433f3822; } html[data-theme='dark'] .keyboard-shortcut > code { box-shadow: inset 0 -1px 0 var(--ls-primary-background-color), 0 0 1px 1px rgba(255, 255, 255,.2); } .ui__modal-panel { border-radius: 8px; } .overflow-y-scroll { overflow-y: scroll; }