clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-04-30 00:46:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

WYSIWYG headers + CSS cleanup (#2393)

Browse Source 
* Run formatter on CSS file

* Add content-aware classes to editor textarea

* Update yarn.lock

* Handle styles when editing multiline blocks
This commit is contained in:
Devon Zuegel
2021-07-11 05:46:59 -04:00
committed by GitHub
parent 397bb9bba5
commit 92ae2e5928
4 changed files with 13921 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/main/frontend/components/block.css
View File

@@ -1,6 +1,3 @@
.blocks-container {
}
.block-content-wrapper {
width: 100%;
}
@@ -34,7 +31,7 @@
.asset-container {
display: inline-block;
position: relative;
margin-top: .5rem;
margin-top: 0.5rem;
.ctl {
position: absolute;
@@ -47,7 +44,7 @@
> a {
padding: 3px;
border-radius: 4px;
opacity: .4;
opacity: 0.4;
user-select: none;
background: var(--ls-primary-background-color);
@@ -55,7 +52,7 @@
svg {
color: var(--ls-primary-text-color);
opacity: .5;
opacity: 0.5;
font-weight: normal;
}
}
@@ -105,12 +102,14 @@
}
}
.block-body ul, .block-body ol, .block-body dl {
margin-bottom: 2em;
.block-body ul,
.block-body ol,
.block-body dl {
margin-bottom: 2em;
> li {
margin: 0;
}
> li {
margin: 0;
}
}
.block-body ol {
@@ -118,7 +117,8 @@
margin-left: 0;
> li {
&::marker, > p {
&::marker,
> p {
display: initial;
}
}
@@ -159,7 +159,7 @@
cursor: alias;
&:hover {
color: var(--ls-link-text-hover-color)
color: var(--ls-link-text-hover-color);
}
}
@@ -190,7 +190,7 @@
}
.page-properties {
background-color: var(--ls-page-properties-background-color);
background-color: var(--ls-page-properties-background-color);
}
.block-marker {
@@ -232,57 +232,76 @@
margin-left: auto;
}
.ls-block h1, .editor-inner .h1 {
font-size: 2em;
.ls-block h1,
.editor-inner .h1 {
font-size: 2em;
min-height: 1.5em;
}
.ls-block h2, .editor-inner .h2 {
font-size: 1.5em;
.ls-block h2,
.editor-inner .h2 {
font-size: 1.5em;
min-height: 1.5em;
}
.ls-block h3, .editor-inner .h3 {
font-size: 1.17em;
.ls-block h3,
.editor-inner .h3 {
font-size: 1.17em;
min-height: 1.17em;
}
.ls-block h4, .editor-inner .h4 {
font-size: 1.12em;
.ls-block h4,
.editor-inner .h4 {
font-size: 1.12em;
min-height: 1.12em;
}
.ls-block h5, .editor-inner .h5 {
.ls-block h5,
.editor-inner .h5 {
font-size: 0.83em;
min-height: 0.83em;
}
.ls-block h6, .editor-inner .h6 {
.ls-block h6,
.editor-inner .h6 {
font-size: 0.75em;
min-height: 0.75em;
}
.ls-block :is(h1,h2,h3,h4,h5,h6), .editor-inner .h1, .editor-inner .h2, .editor-inner .h3,
.editor-inner .h4, .editor-inner .h5, .editor-inner .h6 {
font-weight: 600
.ls-block :is(h1, h2, h3, h4, h5, h6),
.editor-inner :is(.h1, .h2, .h3, .h4, .h5, .h6) {
font-weight: 600;
}
.ls-block :is(h1, h2), .editor-inner .h1, .editor-inner .h2 {
border-bottom: 1px solid var(--ls-quaternary-background-color);
margin: 0.4em 0 0;
.ls-block :is(h1, h2),
.editor-inner :is(.h1, .h2) {
border-bottom: 1px solid var(--ls-quaternary-background-color);
margin: 0.4em 0 0;
}
.document-mode .ls-block h1, .document-mode .editor-inner .h1 {
margin: 0.67em 0;
.document-mode .ls-block h1,
.document-mode .editor-inner .h1 {
margin: 0.67em 0;
}
.document-mode .ls-block h2, .document-mode .editor-inner .h2 {
margin: 0.75em 0;
.document-mode .ls-block h2,
.document-mode .editor-inner .h2 {
margin: 0.75em 0;
}
.document-mode .ls-block h3, .document-mode .editor-inner .h3 {
margin: 0.83em 0;
.document-mode .ls-block h3,
.document-mode .editor-inner .h3 {
margin: 0.83em 0;
}
.document-mode .ls-block h4, .document-mode .editor-inner .h4 {
margin: 1.12em 0;
.document-mode .ls-block h4,
.document-mode .editor-inner .h4 {
margin: 1.12em 0;
}
.document-mode .ls-block h5, .document-mode .editor-inner .h5 {
margin: 1.5em 0;
.document-mode .ls-block h5,
.document-mode .editor-inner .h5 {
margin: 1.5em 0;
}
.document-mode .ls-block h6, .document-mode .editor-inner .h6 {
margin: 1.67em 0;
.document-mode .ls-block h6,
.document-mode .editor-inner .h6 {
margin: 1.67em 0;
}
.document-mode .ls-block {
@@ -350,7 +369,7 @@
width: 6px;
height: 6px;
background-color: var(--ls-block-bullet-color, #394b59);
transition: transform .2s;
transition: transform 0.2s;
}
&.bullet-closed {
@@ -406,5 +425,5 @@ a:hover > .bullet-container .bullet {
}
a.filter svg {
transform: scale(0.9);
transform: scale(0.9);
}