mirror of
https://github.com/logseq/logseq.git
synced 2026-05-03 10:26:35 +00:00
feat: merge a new light theme
This commit is contained in:
charlie
@@ -4,30 +4,39 @@
|
||||
--ls-page-text-size: 1em;
|
||||
--ls-page-title-size: 36px;
|
||||
--ls-font-family: 'Inter';
|
||||
--ls-main-content-max-width: 680px;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme,
|
||||
html[data-theme=dark] {
|
||||
--ls-primary-background-color: #002b36;
|
||||
--ls-secondary-background-color: #073642;
|
||||
--ls-tertiary-background-color: #0f4552;
|
||||
--ls-quaternary-background-color: #01313d;
|
||||
--ls-secondary-background-color: #023643;
|
||||
--ls-tertiary-background-color: #08404f;
|
||||
--ls-quaternary-background-color: #094b5a;
|
||||
--ls-active-primary-color: #8ec2c2;
|
||||
--ls-active-secondary-color: #d0e8e8;
|
||||
--ls-block-properties-background-color: #02222a;
|
||||
--ls-search-background-color: var(--ls-primary-background-color);
|
||||
--ls-border-color: #0e5263;
|
||||
--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: #d0e8e8;
|
||||
--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);
|
||||
@@ -35,13 +44,13 @@ html[data-theme=dark] {
|
||||
--ls-slide-background-color: var(--ls-primary-background-color);
|
||||
--ls-block-bullet-border-color: #0f4958;
|
||||
--ls-block-bullet-color: #608e91;
|
||||
--ls-block-highlight-color: #074758;
|
||||
--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: #2f4f4f;
|
||||
--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: #001f27;
|
||||
@@ -52,39 +61,48 @@ html[data-theme=dark] {
|
||||
--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: #d8e1e8;
|
||||
--ls-secondary-background-color: #dee9f2;
|
||||
--ls-tertiary-background-color: #f0f8ff;
|
||||
--ls-quaternary-background-color: #f7f7f7;
|
||||
--ls-quaternary-background-color: #e1f0fe;
|
||||
--ls-active-primary-color: #045591;
|
||||
--ls-active-secondary-color: #003761;
|
||||
--ls-block-properties-background-color: var(--ls-tertiary-background-color);
|
||||
--ls-search-background-color: var(--ls-primary-background-color);
|
||||
--ls-border-color: #ccc;
|
||||
--ls-menu-hover-color: var(--ls-secondary-background-color);
|
||||
--ls-guideline-color: var(--ls-border-color);
|
||||
--ls-menu-hover-color: var(--ls-a-chosen-bg);
|
||||
--ls-primary-text-color: #24292e;
|
||||
--ls-secondary-text-color: #161e2e;
|
||||
--ls-title-text-color: #222;
|
||||
--ls-link-text-color: #045591;
|
||||
--ls-link-text-hover-color: #000;
|
||||
--ls-link-text-color: var(--ls-active-primary-color);
|
||||
--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: #002b36;
|
||||
--ls-block-bullet-border-color: #ced9e0;
|
||||
--ls-block-bullet-border-color: var(--ls-border-color);
|
||||
--ls-block-bullet-color: #394b59;
|
||||
--ls-block-highlight-color: #7cccff;
|
||||
--ls-selection-background-color: #b1d7ff;
|
||||
--ls-page-checkbox-color: none;
|
||||
--ls-page-checkbox-border-color: #808080;
|
||||
--ls-block-highlight-color: #c0e6fd;
|
||||
--ls-selection-background-color: #e4f2ff;
|
||||
--ls-page-checkbox-color: var(--ls-active-primary-color);
|
||||
--ls-page-checkbox-border-color: #8c8c8c;
|
||||
--ls-page-blockquote-color: var(--ls-primary-text-color);
|
||||
--ls-page-blockquote-bg-color: #f8f8f8;
|
||||
--ls-page-blockquote-border-color: #ccc;
|
||||
--ls-page-blockquote-bg-color: transparent;
|
||||
--ls-page-blockquote-border-color: var(--ls-active-primary-color);
|
||||
--ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
|
||||
--ls-page-inline-code-color: var(--ls-primary-text-color);
|
||||
--ls-page-inline-code-bg-color: #eee;
|
||||
--ls-scrollbar-foreground-color: var(--ls-primary-text-color);
|
||||
--ls-scrollbar-background-color: var(--ls-primary-background-color);
|
||||
--ls-scrollbar-thumb-hover-color: var(--ls-secondary-text-color);
|
||||
@@ -93,6 +111,11 @@ html[data-theme=light] {
|
||||
--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;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -125,15 +148,8 @@ body {
|
||||
border-color: var(--ls-border-color);
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
color: var(--ls-page-checkbox-color, #137cbd);
|
||||
background-color: var(--ls-page-checkbox-color, transparent);
|
||||
border: 1px solid;
|
||||
border-color: var(--ls-page-checkbox-border-color, #808080);
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
.form-input:focus {
|
||||
box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
|
||||
}
|
||||
|
||||
.ls-center {
|
||||
@@ -151,7 +167,7 @@ textarea {
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(39, 41, 43, 0.15);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--ls-border-radius-low);
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
@@ -258,8 +274,7 @@ pre {
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #045591;
|
||||
color: var(--ls-link-text-color);
|
||||
color: var(--ls-link-text-color, #045591);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -306,10 +321,8 @@ a.block-control:hover {
|
||||
|
||||
h1.title {
|
||||
margin-bottom: 1.5rem;
|
||||
color: #222;
|
||||
color: var(--ls-title-text-color);
|
||||
font-size: 36px;
|
||||
font-size: var(--ls-page-title-size);
|
||||
color: var(--ls-title-text-color, #222);
|
||||
font-size: var(--ls-page-title-size, 36px);
|
||||
}
|
||||
|
||||
.page-references h2 {
|
||||
@@ -317,17 +330,30 @@ h1.title {
|
||||
}
|
||||
|
||||
a.page-ref {
|
||||
color: var(--ls-link-ref-text-color)
|
||||
color: var(--ls-link-text-color);
|
||||
}
|
||||
|
||||
a.page-ref:hover {
|
||||
color: var(--ls-link-ref-text-hover-color)
|
||||
color: var(--ls-link-text-hover-color);
|
||||
}
|
||||
|
||||
.block-ref {
|
||||
color: var(--ls-link-text-color);
|
||||
}
|
||||
|
||||
.external-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-ref:hover {
|
||||
color: var(--ls-link-text-hover-color)
|
||||
}
|
||||
|
||||
.block-highlight,
|
||||
.content .selected {
|
||||
background-color: #7cccff;
|
||||
transition: background-color 0.15s;
|
||||
background-color: var(--ls-block-highlight-color);
|
||||
padding: -1px;
|
||||
}
|
||||
|
||||
span.timestamp {
|
||||
@@ -366,8 +392,18 @@ svg {
|
||||
overflow-y: scroll
|
||||
}
|
||||
|
||||
.canceled {
|
||||
.loader {
|
||||
-webkit-animation: lds-dual-ring 2s infinite linear;
|
||||
}
|
||||
|
||||
.canceled,
|
||||
.done {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.done > input {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Drawing */
|
||||
@@ -401,6 +437,11 @@ a.star-page:hover {
|
||||
}
|
||||
|
||||
/* block dropdown top, auto-complete, sync dropdown */
|
||||
.bg-base-2 {
|
||||
background-color: #f0f8ff;
|
||||
background-color: var(--ls-secondary-background-color);
|
||||
}
|
||||
|
||||
.bg-base-3 {
|
||||
background-color: #fff;
|
||||
background-color: var(--ls-primary-background-color);
|
||||
@@ -431,22 +472,6 @@ a.star-page:hover {
|
||||
color: var(--ls-secondary-text-color);
|
||||
}
|
||||
|
||||
.bg-base-2 {
|
||||
background-color: #f0f8ff;
|
||||
background-color: var(--ls-secondary-background-color);
|
||||
}
|
||||
|
||||
a.menu-link:hover,
|
||||
button.pull:hover,
|
||||
button.menu:focus {
|
||||
background-color: var(--ls-menu-hover-color, #137cbd);
|
||||
}
|
||||
|
||||
a.menu-link {
|
||||
background-color: var(--ls-primary-background-color, #fff);
|
||||
color: var(--ls-link-text-color);
|
||||
}
|
||||
|
||||
.white-theme #head a {
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
@@ -469,6 +494,32 @@ button.menu {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* TODO Check this */
|
||||
.form-checkbox {
|
||||
color: var(--ls-page-checkbox-color, #137cbd);
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border: 2px solid;
|
||||
border-color: var(--ls-page-checkbox-border-color);
|
||||
appearance: none
|
||||
}
|
||||
|
||||
.form-checkbox:checked {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.white-theme .form-checkbox:focus {
|
||||
border-color: var(--ls-page-checkbox-border-color);
|
||||
}
|
||||
|
||||
.form-checkbox:not(:checked):focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-checkbox:checked:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input {
|
||||
color: var(--ls-primary-text-color);
|
||||
background: transparent;
|
||||
@@ -520,8 +571,8 @@ input {
|
||||
padding: 0.1em 0.4em;
|
||||
word-spacing: -0.15em;
|
||||
background-color: #eee;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-border-radius: var(--ls-border-radius-low);
|
||||
border-radius: var(--ls-border-radius-low);
|
||||
line-height: 1.45;
|
||||
text-rendering: optimizeSpeed
|
||||
}
|
||||
@@ -561,12 +612,25 @@ a.button:hover,
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.white-theme a.menu-link {
|
||||
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:hover {
|
||||
color: var(--ls-link-text-hover-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.chosen {
|
||||
@@ -626,7 +690,7 @@ dt {
|
||||
blockquote {
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
padding: 10px 20px;
|
||||
padding: 8px 20px;
|
||||
border-left: 4px solid;
|
||||
border-left-color: #d3d3d3;
|
||||
border-left-color: var(--ls-page-blockquote-border-color);
|
||||
@@ -635,6 +699,7 @@ blockquote {
|
||||
margin: 1rem 0;
|
||||
color: #24292e;
|
||||
color: var(--ls-page-blockquote-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.svg-shadow {
|
||||
@@ -652,12 +717,8 @@ svg.note {
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
.white-theme svg.tip {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.dark-theme svg.tip {
|
||||
color: #b0c8af;
|
||||
svg.tip {
|
||||
color: var(--ls-active-primary-color);
|
||||
}
|
||||
|
||||
.admonition-icon {
|
||||
@@ -737,9 +798,8 @@ svg.note {
|
||||
}
|
||||
|
||||
.block-children {
|
||||
border-left: 1px solid;
|
||||
border-left-color: #ddd;
|
||||
border-left-color: var(--ls-border-color);
|
||||
border-left: 2px solid;
|
||||
border-left-color: var(--ls-guideline-color, #ddd);
|
||||
}
|
||||
|
||||
.dnd-separator {
|
||||
@@ -755,29 +815,6 @@ iframe {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* copied from https://github.com/drdogbot7/tailwindcss-responsive-embed */
|
||||
.embed-responsive {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.embed-responsive-item,
|
||||
iframe,
|
||||
embed,
|
||||
object,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.aspect-ratio-square {
|
||||
padding-top: 100%;
|
||||
}
|
||||
@@ -870,7 +907,7 @@ a.warning,
|
||||
span.warning {
|
||||
background: #f56565;
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--ls-border-radius-low);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -1008,6 +1045,10 @@ a.tooltip-priority::after {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
max-width: calc(var(--ls-main-content-max-width) - 30px);
|
||||
}
|
||||
|
||||
#intro .content :not(img),
|
||||
.foldable-title {
|
||||
max-width: 665px;
|
||||
|
||||
Reference in New Issue
Block a user