mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-04 17:04:32 +08:00
Rolled dark mode out to the editors
- Updated editor, and other area, styles to look okay in dark mode. - Used tinyMCE theme generator to create dark mode theme. - Updated tinymce to latest 4x version.
This commit is contained in:
@ -63,6 +63,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
@ -112,17 +113,24 @@
|
||||
}
|
||||
|
||||
.markdown-editor-display {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
padding-inline-start: 16px;
|
||||
pmargin-inline-end: 16px;
|
||||
margin-inline-end: 16px;
|
||||
}
|
||||
[drawio-diagram]:hover {
|
||||
outline: 2px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
html.markdown-editor-display.dark-mode {
|
||||
background-color: #222;
|
||||
body {
|
||||
background-color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
width: 100%;
|
||||
padding: $-xs $-m;
|
||||
@ -130,12 +138,19 @@
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid #DDD;
|
||||
background-color: #EEE;
|
||||
@include lightDark(background-color, #eee, #111);
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
flex: none;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
@include whenDark {
|
||||
button {
|
||||
color: #AAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -334,6 +349,7 @@ input[type=color] {
|
||||
|
||||
.title-input.page-title {
|
||||
font-size: 0.8em;
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
.input {
|
||||
border: 0;
|
||||
margin-bottom: -1px;
|
||||
@ -360,6 +376,7 @@ input[type=color] {
|
||||
|
||||
div[editor-type="markdown"] .title-input.page-title input[type="text"] {
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
|
Reference in New Issue
Block a user