logseq/resources/css/common.css

823 lines
16 KiB
CSS

: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: 700px;
--ls-border-radius-low: 4px;
--ls-border-radius-medium: 8px;
}
@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: #02222a;
--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-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: white;
--ls-secondary-background-color: #f7f6f4;
--ls-tertiary-background-color: #f1eee8;
--ls-quaternary-background-color: #e8e5de;
--ls-table-tr-even-background-color: #f4f5f7;
--ls-active-primary-color: rgb(4, 85, 145);
--ls-active-secondary-color: #003761;
--ls-block-properties-background-color: #f7f6f4;
--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: #f7f6f4;
--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-icon-color: #c1bdb7;
--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;
}
/* 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%;
}
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%;
}
/* TODO: add all tailwind supported bg colors */
.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;
}
.loader {
-webkit-animation: spin 2s infinite linear;
}
.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 transparent;
}
.dnd-separator-cur {
border-bottom: 3px solid #999;
}
.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%;
}
.footdef {
margin: 1rem 0;
}
.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;
}
.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);
}
a.menu-link:hover,
button.pull:hover,
button.menu:focus {
background-color: var(--ls-menu-hover-color, #f4f5f7);
}
a.menu-link {
background-color: var(--ls-primary-background-color, #fff);
color: var(--ls-primary-text-color);
}
a.menu-link:first-of-type {
border-top-left-radius: var(--ls-border-radius-low);
border-top-right-radius: var(--ls-border-radius-low);
}
a.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 {
background: #f56565;
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;
}
/* ideas from https://github.com/PiotrSss/logseq-bujo-theme/blob/main/main.css */
/***************************************************************
***************************** TOP ******************************
***************************************************************/
.cp__header-logo,
.fade-link {
opacity: 0.3;
transition: 0.3s;
}
a.fade-link:hover {
opacity: 1;
}
/* import (arrows) icon */
#head .refresh svg {
height: 20px;
}
/* < > 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 {
padding: 2px 5px;
}
.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);
}
a.page-op {
svg {
transform: scale(0.9);
}
}
.search-more {
background: var(--ls-a-chosen-bg);
}