silverbullet/web/styles/editor.scss

158 lines
3.0 KiB
SCSS

.cm-editor {
font-size: 18px;
padding: 0 20px;
--max-width: 800px;
.cm-content {
margin: auto;
max-width: var(--max-width);
}
.sb-inline-img {
max-width: calc(var(--max-width) * 0.9);
}
&.cm-focused {
outline: none !important;
}
// Weird hack to readjust iOS's safari font-size when contenteditable is disabled
.ios-safari-readonly {
font-size: 60%;
}
// Indentation of follow-up lines
@mixin lineOverflow($baseIndent) {
text-indent: -1 * ($baseIndent + 2ch);
padding-left: $baseIndent + 2ch;
&.sb-line-task {
text-indent: -1 * ($baseIndent + 6ch);
padding-left: $baseIndent + 6ch;
.cm-list-bullet::after {
left: ($baseIndent + 6ch);
}
}
&.sb-line-blockquote {
text-indent: -1 * ($baseIndent + 4ch);
padding-left: $baseIndent + 4ch;
}
.cm-list-bullet::after {
left: ($baseIndent + 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-comment {
text-indent: -1 * 3ch;
padding-left: 3ch;
}
.cm-list-bullet {
position: relative;
visibility: hidden;
}
.cm-task-checked {
text-decoration: line-through !important;
}
.cm-list-bullet::after {
visibility: visible;
position: absolute;
// left: 2ch;
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-directive-start::before {
content: "#";
color: gray;
border: 1px solid gray;
border-radius: 5px;
font-size: 62%;
padding: 2px;
position: relative;
left: -20px;
}
// .sb-directive-end {
// border-top: 1px dotted #6c6c6c;
// }
.sb-directive-outside {
opacity: 0.4;
}
.sb-blockquote-outside > .sb-meta {
display: none;
}
.sb-blockquote-outside {
text-indent: -1ch;
border-left: 1px solid rgb(74, 74, 74);
min-height: 1em;
}
.sb-directive-end::before {
content: "/";
border-radius: 5px;
color: gray;
border: 1px solid gray;
font-size: 62%;
padding: 2px;
position: relative;
left: -20px;
}
}