1
0
silverbullet/webapp/styles/editor.scss
2022-04-10 11:04:07 +02:00

206 lines
3.3 KiB
SCSS

@import "constants.scss";
//div.rhs-open #editor .cm-editor .cm-content {
// max-width: 550px;
//}
.cm-editor {
font-size: var(--ident);
//overflow-y: hidden;
padding: 0 20px;
.cm-content {
font-family: var(--editor-font);
margin: auto;
max-width: $max-editor-width;
}
&.cm-focused {
outline: none !important;
}
.cm-selectionBackground {
background-color: #d7e1f6 !important;
}
.line-h1,
.line-h2,
.line-h3 {
background-color: rgba(0, 15, 52, 0.6);
color: #fff;
font-weight: bold;
padding: 2px 2px;
.meta {
color: orange;
}
}
.line-h1 {
font-size: 1.5em;
}
.line-h2 {
font-size: 1.2em;
}
.line-h3 {
font-size: 1.1em;
}
/* Color list item this way */
.line-li .meta {
color: rgb(0, 123, 19);
}
/* Then undo other meta */
.line-li .meta ~ .meta {
color: #650007;
}
.line-code {
background-color: #efefef;
margin-left: 30px;
}
.line-fenced-code {
background-color: #efefef;
}
.meta {
color: #650007;
}
.line-blockquote {
background-color: rgba(220, 220, 220, 0.5);
color: #676767;
text-indent: -2ch;
padding-left: 2ch;
}
.emphasis {
font-style: italic;
}
.strong {
font-weight: 900;
}
.link:not(.meta, .url) {
color: #0330cb;
text-decoration: underline;
}
.link.url {
color: #7e7d7d;
}
.url:not(.link) {
color: #0330cb;
text-decoration: underline;
}
.wiki-link-page {
color: #0330cb;
background-color: rgba(77,141,255,0.07);
border-radius: 5px;
padding: 0 5px;
//text-decoration: underline;
}
.wiki-link {
color: #a8abbd;
//background-color: rgba(77,141,255,0.07);
}
.mention {
color: #0330cb;
}
.tag {
color: #8d8d8d;
}
.code {
background-color: #efefef;
}
// Indentation of follow-up lines
@mixin lineOverflow($baseIndent) {
text-indent: -1 * ($baseIndent + 2ch);
padding-left: $baseIndent + 2ch;
&.line-task {
text-indent: -1 * ($baseIndent + 6ch);
padding-left: $baseIndent + 6ch;
}
&.line-blockquote {
text-indent: -1 * ($baseIndent + 4ch);
padding-left: $baseIndent + 4ch;
}
}
.line-ul {
&.line-li-1 {
@include lineOverflow(0);
}
&.line-li-1.line-li-2 {
@include lineOverflow(2);
}
&.line-li-1.line-li-2.line-li-3 {
@include lineOverflow(4);
}
&.line-li-1.line-li-2.line-li-3.line-li-4 {
@include lineOverflow(6);
}
&.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
@include lineOverflow(8);
}
}
.line-ol {
&.line-li-1 {
@include lineOverflow(1);
}
&.line-li-1.line-li-2 {
@include lineOverflow(2);
}
&.line-li-1.line-li-2.line-li-3 {
@include lineOverflow(4);
}
&.line-li-1.line-li-2.line-li-3.line-li-4 {
@include lineOverflow(6);
}
&.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
@include lineOverflow(8);
}
}
.line-comment {
text-indent: -1 * 3ch;
padding-left: 3ch;
}
.task-marker {
background-color: #ddd;
}
.line-comment {
background-color: rgba(255, 255, 0, 0.5);
}
.comment {
color: gray;
background-color: rgba(210, 210, 210, 0.3);
border-radius: 5px;
padding: 0 2px;
}
}