1
0
silverbullet/web/styles/editor.scss
2022-12-16 11:39:46 +01:00

196 lines
3.6 KiB
SCSS

.cm-editor {
font-size: 18px;
--max-width: 800px;
height: 100%;
.cm-content {
margin-left: auto;
margin-right: auto;
max-width: var(--max-width);
padding: 5px 20px;
}
.cm-line {
padding: 0;
}
.sb-inline-img {
max-width: 100%;
}
&.cm-focused {
outline: none !important;
}
// Indentation of follow-up lines
@mixin lineOverflow($baseIndent, $bulletIndent: 0) {
text-indent: -1 * ($baseIndent + 2ch);
padding-left: $baseIndent + 2ch;
&.sb-line-task {
text-indent: -1 * ($baseIndent + 5ch);
padding-left: $baseIndent + 5ch;
.cm-list-bullet::after {
left: ($baseIndent + 5ch);
}
}
&.sb-line-blockquote {
text-indent: -1 * ($baseIndent + 4ch);
padding-left: $baseIndent + 4ch;
}
.cm-list-bullet::after {
left: ($baseIndent + $bulletIndent + 2ch);
}
}
.sb-line-ul {
&.sb-line-li-1 {
@include lineOverflow(0);
}
&.sb-line-li-1.sb-line-li-2 {
@include lineOverflow(2);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
@include lineOverflow(4);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
@include lineOverflow(6);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
@include lineOverflow(8);
}
}
.sb-line-ol {
&.sb-line-li-1 {
@include lineOverflow(1);
}
&.sb-line-li-1.sb-line-li-2 {
@include lineOverflow(2);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
@include lineOverflow(4);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
@include lineOverflow(6);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
@include lineOverflow(8);
}
}
.sb-line-blockquote {
&.sb-line-li-1 {
@include lineOverflow(-1, 2);
}
&.sb-line-li-1.sb-line-li-2 {
@include lineOverflow(1, 2);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
@include lineOverflow(4);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
@include lineOverflow(6);
}
&.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
@include lineOverflow(8);
}
}
.sb-line-comment {
text-indent: -1 * 3ch;
padding-left: 3ch;
}
.cm-list-bullet {
position: relative;
visibility: hidden;
}
.cm-task-checked {
text-decoration: line-through !important;
}
.sb-checkbox > input[type=checkbox] {
width: 3ch;
}
.cm-list-bullet::after {
visibility: visible;
position: absolute;
color: rgb(150, 150, 150);
content: "\2022"; /* U+2022 BULLET */
}
.sb-directive-start .sb-comment, .sb-directive-end .sb-comment {
position: relative;
left: -12px;
}
.sb-line-frontmatter-outside, .sb-line-code-outside {
display: none;
}
.sb-blockquote-outside {
text-indent: -1ch;
min-height: 1em;
}
.sb-line-table-outside {
display: none;
}
.sb-table-widget {
display: block;
font-weight: normal;
margin-bottom: -3rem;
table {
width: 100%;
border-spacing: 0;
}
thead tr {
background-color: #333;
color: #eee;
font-weight: bold;
}
th, td {
padding: 8px;
}
tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
}
.sb-line-blockquote {
border-left: 1px solid rgb(74, 74, 74);
}
.sb-line-blockquote.sb-line-ul.sb-line-li > .sb-quote.sb-meta:first-child {
margin-left: -1ch;
}
}
.cm-scroller {
// Give some breathing space at the bottom of the screen
padding-bottom: 20em;
}