mirror of
https://github.com/logseq/logseq.git
synced 2026-04-26 23:25:05 +00:00
refactor: add theme container & lift the dark/light class scope to root & restore scrollbar style.
This commit is contained in:
charlie
@@ -4,7 +4,7 @@
|
||||
--ls-page-text-size: 1em;
|
||||
--ls-page-title-size: 36px;
|
||||
--ls-font-family: 'Inter';
|
||||
--ls-main-content-max-with: 680px;
|
||||
--ls-main-content-max-width: 680px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -13,92 +13,84 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
--ls-primary-background-color: #002b36;
|
||||
--ls-secondary-background-color: #073642;
|
||||
--ls-tertiary-background-color: #0f4552;
|
||||
--ls-quaternary-background-color: #01313d;
|
||||
|
||||
--ls-block-properties-background-color: #02222a;
|
||||
--ls-search-background-color: var(--ls-primary-background-color);
|
||||
--ls-border-color: #0e5263;
|
||||
--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-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-block-bullet-border-color: #0f4958;
|
||||
--ls-block-bullet-color: #608e91;
|
||||
--ls-block-highlight-color: #074758;
|
||||
--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-inline-code-color: var(--ls-primary-text-color);
|
||||
--ls-page-inline-code-bg-color: #01222a;
|
||||
|
||||
--ls-scrollbar-foreground-color: #001F27;
|
||||
--ls-scrollbar-background-color: var(--ls-primary-background-color);
|
||||
--ls-scrollbar-thumb-hover-color: #b4b4b466;
|
||||
|
||||
--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;
|
||||
.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-block-properties-background-color: #02222a;
|
||||
--ls-search-background-color: var(--ls-primary-background-color);
|
||||
--ls-border-color: #0e5263;
|
||||
--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-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-block-bullet-border-color: #0f4958;
|
||||
--ls-block-bullet-color: #608e91;
|
||||
--ls-block-highlight-color: #074758;
|
||||
--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-inline-code-color: var(--ls-primary-text-color);
|
||||
--ls-page-inline-code-bg-color: #01222a;
|
||||
--ls-scrollbar-foreground-color: #001f27;
|
||||
--ls-scrollbar-background-color: var(--ls-primary-background-color);
|
||||
--ls-scrollbar-thumb-hover-color: #b4b4b466;
|
||||
--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;
|
||||
}
|
||||
|
||||
.white-theme {
|
||||
--ls-primary-background-color: white;
|
||||
--ls-secondary-background-color: #D8E1E8;
|
||||
--ls-tertiary-background-color: #f0f8ff;
|
||||
--ls-quaternary-background-color: #f7f7f7;
|
||||
|
||||
--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-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-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-block-bullet-border-color: #ced9e0;
|
||||
--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-page-blockquote-color: var(--ls-primary-text-color);
|
||||
--ls-page-blockquote-bg-color: #f8f8f8;
|
||||
--ls-page-blockquote-border-color: #ccc;
|
||||
--ls-page-inline-code-color: var(--ls-primary-text-color);
|
||||
--ls-page-inline-code-bg-color: #eeeeee;
|
||||
|
||||
--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);
|
||||
|
||||
--ls-head-text-color: var(--ls-link-text-color);
|
||||
--ls-icon-color: #6b7280;
|
||||
--ls-search-icon-color: var(--ls-icon-color);
|
||||
--ls-a-chosen-bg: #f4f5f7;
|
||||
--ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
|
||||
.white-theme,
|
||||
html[data-theme=light] {
|
||||
--ls-primary-background-color: white;
|
||||
--ls-secondary-background-color: #d8e1e8;
|
||||
--ls-tertiary-background-color: #f0f8ff;
|
||||
--ls-quaternary-background-color: #f7f7f7;
|
||||
--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-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-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-block-bullet-border-color: #ced9e0;
|
||||
--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-page-blockquote-color: var(--ls-primary-text-color);
|
||||
--ls-page-blockquote-bg-color: #f8f8f8;
|
||||
--ls-page-blockquote-border-color: #ccc;
|
||||
--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);
|
||||
--ls-head-text-color: var(--ls-link-text-color);
|
||||
--ls-icon-color: #6b7280;
|
||||
--ls-search-icon-color: var(--ls-icon-color);
|
||||
--ls-a-chosen-bg: #f4f5f7;
|
||||
--ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -119,7 +111,10 @@ a svg {
|
||||
color: var(--ls-icon-color);
|
||||
}
|
||||
|
||||
html, body, #root, #draw {
|
||||
html,
|
||||
body,
|
||||
#root,
|
||||
#draw {
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
@@ -131,9 +126,14 @@ body {
|
||||
}
|
||||
|
||||
.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
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.ls-center {
|
||||
@@ -148,17 +148,18 @@ body {
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(39,41,43,.15);
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(39, 41, 43, 0.15);
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -171,7 +172,8 @@ ol {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
.content p, .content div {
|
||||
.content p,
|
||||
.content div {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@@ -203,11 +205,13 @@ p {
|
||||
color: var(--ls-primary-text-color)
|
||||
}
|
||||
|
||||
li p:first-child, .block-body p:first-child {
|
||||
li p:first-child,
|
||||
.block-body p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li p:last-child, .block-body p:last-child {
|
||||
li p:last-child,
|
||||
.block-body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -232,21 +236,19 @@ li {
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #F6F8FA;
|
||||
background: var(--ls-secondary-background-color);
|
||||
background: var(--ls-secondary-background-color, #f6f8fa);
|
||||
margin: 1rem 0;
|
||||
line-height: 1.45em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
#journals textarea {
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
textarea {
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.cursor-pointer, .cursor {
|
||||
.cursor-pointer,
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -275,20 +277,27 @@ a:hover {
|
||||
}
|
||||
|
||||
/* .content a[href^="http"]:after { */
|
||||
|
||||
/* content: '⤴'; */
|
||||
|
||||
/* } */
|
||||
|
||||
/* .content a:visited { */
|
||||
|
||||
/* color: #921b51; */
|
||||
|
||||
/* border-bottom: 1px solid #921b51; */
|
||||
|
||||
/* } */
|
||||
|
||||
.content a.initial-color, .content a.initial-color:hover {
|
||||
.content a.initial-color,
|
||||
.content a.initial-color:hover {
|
||||
color: initial;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.block-control, a.block-control:hover {
|
||||
a.block-control,
|
||||
a.block-control:hover {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
@@ -329,7 +338,8 @@ a.page-ref:hover {
|
||||
color: var(--ls-link-ref-text-hover-color)
|
||||
}
|
||||
|
||||
.block-highlight, .content .selected {
|
||||
.block-highlight,
|
||||
.content .selected {
|
||||
background-color: #7cccff;
|
||||
background-color: var(--ls-block-highlight-color);
|
||||
}
|
||||
@@ -370,22 +380,20 @@ svg {
|
||||
overflow-y: scroll
|
||||
}
|
||||
|
||||
|
||||
.lds-dual-ring {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lds-dual-ring:after {
|
||||
.lds-dual-ring::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 3px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
border: 2px solid;
|
||||
border-color: #24292E transparent;
|
||||
border-color: var(--ls-primary-text-color) transparent;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: var(--ls-primary-text-color, #24292e);
|
||||
animation: lds-dual-ring 1.2s linear infinite;
|
||||
}
|
||||
|
||||
@@ -393,6 +401,7 @@ svg {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
@@ -422,7 +431,8 @@ svg {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
a.nav-item:hover, a.star-page:hover {
|
||||
a.nav-item:hover,
|
||||
a.star-page:hover {
|
||||
background-color: #00242d;
|
||||
}
|
||||
|
||||
@@ -433,20 +443,20 @@ a.nav-item:hover, a.star-page:hover {
|
||||
|
||||
/* block dropdown top, auto-complete, sync dropdown */
|
||||
.bg-base-3 {
|
||||
background-color: #FFF;
|
||||
background-color: #fff;
|
||||
background-color: var(--ls-primary-background-color);
|
||||
}
|
||||
|
||||
/* primary bg */
|
||||
#app-container {
|
||||
background-color: #FFF;
|
||||
background-color: #fff;
|
||||
background-color: var(--ls-primary-background-color);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#head {
|
||||
background-color: #FFF;
|
||||
background-color: #fff;
|
||||
background-color: var(--ls-primary-background-color);
|
||||
|
||||
position: fixed;
|
||||
@@ -456,7 +466,7 @@ a.nav-item:hover, a.star-page:hover {
|
||||
}
|
||||
|
||||
#search_field {
|
||||
background-color: #FFF;
|
||||
background-color: #fff;
|
||||
background-color: var(--ls-search-background-color);
|
||||
color: #161e2e;
|
||||
color: var(--ls-secondary-text-color);
|
||||
@@ -467,18 +477,19 @@ a.nav-item:hover, a.star-page:hover {
|
||||
background-color: var(--ls-secondary-background-color);
|
||||
}
|
||||
|
||||
a.menu-link:hover, button.pull:hover, button.menu:focus {
|
||||
background-color: #f4f5f7;
|
||||
background-color: var(--ls-menu-hover-color);
|
||||
a.menu-link:hover,
|
||||
button.pull:hover,
|
||||
button.menu:focus {
|
||||
background-color: var(--ls-menu-hover-color, #137cbd);
|
||||
}
|
||||
|
||||
a.menu-link {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--ls-primary-background-color);
|
||||
background-color: var(--ls-primary-background-color, #fff);
|
||||
color: var(--ls-link-text-color);
|
||||
}
|
||||
|
||||
.white-theme #head a {
|
||||
color: var(--ls-primary-text-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
button.menu {
|
||||
@@ -499,16 +510,6 @@ button.menu {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
color: #137cbd;
|
||||
color: var(--ls-page-checkbox-color);
|
||||
background-color: transparent;
|
||||
background-color: var(--ls-page-checkbox-color);
|
||||
border: 1px solid;
|
||||
border-color: #808080;
|
||||
border-color: var(--ls-page-checkbox-border-color)
|
||||
}
|
||||
|
||||
input {
|
||||
color: var(--ls-primary-text-color);
|
||||
background: transparent;
|
||||
@@ -520,7 +521,9 @@ input {
|
||||
}
|
||||
|
||||
/* .form-input { */
|
||||
|
||||
/* background-color: #FDF6E3; */
|
||||
|
||||
/* } */
|
||||
|
||||
.form-select {
|
||||
@@ -534,7 +537,8 @@ input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#global-graph, #page-graph {
|
||||
#global-graph,
|
||||
#page-graph {
|
||||
min-height: 100% !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -544,18 +548,18 @@ input {
|
||||
}
|
||||
|
||||
.opacity-70 {
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.opacity-80 {
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
*:not(pre) > code {
|
||||
font-style: normal !important;
|
||||
letter-spacing: 0;
|
||||
padding: .1em .4em;
|
||||
word-spacing: -.15em;
|
||||
padding: 0.1em 0.4em;
|
||||
word-spacing: -0.15em;
|
||||
background-color: #eee;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
@@ -572,6 +576,7 @@ hr {
|
||||
#search-wrapper svg {
|
||||
color: #9fa6b2;
|
||||
color: var(--ls-search-icon-color);
|
||||
|
||||
/* margin-left: 6px; */
|
||||
}
|
||||
|
||||
@@ -580,23 +585,21 @@ hr {
|
||||
color: var(--ls-link-text-hover-color);
|
||||
}
|
||||
|
||||
.file textarea, .file pre {
|
||||
.file textarea,
|
||||
.file pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* ever used? */
|
||||
a.button:hover, .content a.button {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
a.menu-link {
|
||||
color: var(--ls-link-text-color);
|
||||
a.button:hover,
|
||||
.content a.button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.white-theme a.menu-link {
|
||||
@@ -611,7 +614,8 @@ a.chosen {
|
||||
background: var(--ls-a-chosen-bg);
|
||||
}
|
||||
|
||||
.done, .canceled {
|
||||
.done,
|
||||
.canceled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -624,20 +628,29 @@ code {
|
||||
}
|
||||
|
||||
pre.code {
|
||||
background: #282A36;
|
||||
background: #282a36;
|
||||
background: var(--ls-secondary-background-color);
|
||||
color: #f8f8f2;
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
.CodeMirror pre.CodeMirror-line,
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
color: var(--ls-page-inline-code-color);
|
||||
background: #eeeeee;
|
||||
background: #eee;
|
||||
background: var(--ls-page-inline-code-bg-color);
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #FEF3AC;
|
||||
background: #fef3ac;
|
||||
color: #262626;
|
||||
padding: 0 1px;
|
||||
}
|
||||
@@ -651,14 +664,9 @@ dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:root {
|
||||
//scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color) !important;
|
||||
//scrollbar-width: thin !important;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
text-indent: 0em;
|
||||
text-indent: 0;
|
||||
padding: 10px 20px;
|
||||
border-left: 4px solid;
|
||||
border-left-color: #d3d3d3;
|
||||
@@ -670,30 +678,14 @@ blockquote {
|
||||
color: var(--ls-page-blockquote-color);
|
||||
}
|
||||
|
||||
//.dark-theme ::-webkit-scrollbar, .dark-theme ::-webkit-scrollbar-track-piece {
|
||||
// background-color: var(--ls-scrollbar-background-color);
|
||||
// border: 4px solid;
|
||||
// border-color: var(--ls-scrollbar-background-color);
|
||||
//}
|
||||
//
|
||||
//.dark-theme ::-webkit-scrollbar-thumb {
|
||||
// background-color: var(--ls-scrollbar-foreground-color);
|
||||
// background-clip: padding-box;
|
||||
// min-height: 28px;
|
||||
//}
|
||||
//
|
||||
//.dark-theme ::-webkit-scrollbar-thumb:hover {
|
||||
// background-color: var(--ls-scrollbar-thumb-hover-color);
|
||||
//}
|
||||
|
||||
.svg-shadow {
|
||||
-webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .7));
|
||||
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
|
||||
-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, .8));
|
||||
filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, .8));
|
||||
-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));
|
||||
}
|
||||
|
||||
svg.note {
|
||||
@@ -720,6 +712,7 @@ svg.note {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -729,6 +722,7 @@ svg.note {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -738,6 +732,7 @@ svg.note {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -745,11 +740,11 @@ svg.note {
|
||||
|
||||
.fade-in {
|
||||
opacity: 0; /* make things invisible upon start */
|
||||
-webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
|
||||
-moz-animation: fadeIn ease-in 1;
|
||||
-webkit-animation: fadein ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
|
||||
-moz-animation: fadein ease-in 1;
|
||||
animation: fadeIn ease-in 1;
|
||||
|
||||
-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
|
||||
-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1) */
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
@@ -822,7 +817,6 @@ iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.aspect-ratio-square {
|
||||
@@ -854,15 +848,11 @@ iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: currentColor;
|
||||
transition: transform .8s cubic-bezier(.26, .86, .44, .985);
|
||||
transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transform-origin: 0 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
span.bullet-container {
|
||||
display: flex;
|
||||
height: 13px;
|
||||
@@ -912,14 +902,15 @@ li:first-child {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.abstract p:last-of-type:before {
|
||||
.abstract p:last-of-type::before {
|
||||
content: " ";
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
a.warning, span.warning {
|
||||
background: #F56565;
|
||||
padding: .1em .4em;
|
||||
a.warning,
|
||||
span.warning {
|
||||
background: #f56565;
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -966,14 +957,14 @@ button.context-menu-option {
|
||||
}
|
||||
|
||||
.notification-area {
|
||||
background-color: #FFF;
|
||||
background-color: #fff;
|
||||
background-color: var(--ls-tertiary-background-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
.content img {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
a.login {
|
||||
@@ -1025,16 +1016,12 @@ a.tooltip-priority::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
pre {
|
||||
line-height: 1.45em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#intro p {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
#intro h1, #intro h2 {
|
||||
#intro h1,
|
||||
#intro h2 {
|
||||
margin: 2.5em 0 0.5em;
|
||||
}
|
||||
|
||||
@@ -1044,6 +1031,7 @@ pre {
|
||||
|
||||
#intro img {
|
||||
margin: 5em 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#intro h3 {
|
||||
@@ -1056,22 +1044,13 @@ pre {
|
||||
margin: 1em 0 0.5em;
|
||||
}
|
||||
|
||||
|
||||
/* .page .content *, #intro .content *, .page .title { */
|
||||
/* margin-left: auto; */
|
||||
/* margin-right: auto; */
|
||||
/* } */
|
||||
|
||||
/* .page .blocks-container .ls-block { */
|
||||
/* align-self: center; */
|
||||
/* } */
|
||||
|
||||
#intro .content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#intro .content :not(img), .foldable-title {
|
||||
#intro .content :not(img),
|
||||
.foldable-title {
|
||||
max-width: 665px;
|
||||
}
|
||||
|
||||
@@ -1079,21 +1058,22 @@ pre {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.center, .foldable-title {
|
||||
.center,
|
||||
.foldable-title {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img, video {
|
||||
img,
|
||||
video {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#intro .intro-docs, img, video, .intro .ls-block {
|
||||
max-width: 653px;
|
||||
}
|
||||
|
||||
#intro img {
|
||||
max-width: 100%;
|
||||
#intro .intro-docs,
|
||||
img,
|
||||
video,
|
||||
.intro .ls-block {
|
||||
max-width: var(--ls-main-content-max-width, 100%)
|
||||
}
|
||||
|
||||
.w10 {
|
||||
@@ -1141,7 +1121,7 @@ summary {
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
background-color: var(--ls-primary-background-color);
|
||||
min-width: 12rem;
|
||||
}
|
||||
@@ -1242,12 +1222,13 @@ a.tag:hover {
|
||||
background-color: #702459;
|
||||
}
|
||||
|
||||
.block-body blockquote:first-child, .block-body pre:first-child {
|
||||
.block-body blockquote:first-child,
|
||||
.block-body pre:first-child {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.extensions__code>.CodeMirror {
|
||||
.extensions__code > .CodeMirror {
|
||||
height: auto;
|
||||
margin: 6px 0 0 0;
|
||||
font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
|
||||
@@ -1318,28 +1299,30 @@ a.tag:hover {
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
|
||||
transition: top .3s;
|
||||
transition: top 0.3s;
|
||||
}
|
||||
|
||||
#mobile-editor-toolbar > button {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* endregion */
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user