github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-31 04:55:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Rolled dark mode out to the editors

Browse Source 
- 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:
Dan Brown
2020-04-11 15:48:08 +01:00
parent 067cb9c5b7
commit b0b28e7b5e
50 changed files with 5286 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/sass/_components.scss
View File

@ -6,6 +6,7 @@
margin: $-xl;
padding: $-m $-l;
background-color: #FFF;
@include lightDark(background-color, #fff, #444);
border-radius: 4px;
border-inline-start: 6px solid currentColor;
box-shadow: $bs-large;
@ -33,12 +34,15 @@
margin-top: -8px;
svg {
height: 1.0rem;
color: #444;
@include lightDark(color, #444, #888);
}
}
span {
vertical-align: middle;
line-height: 1.3;
@include whenDark {
color: #BBB;
}
}
&.pos {
color: $positive;
@ -78,7 +82,7 @@
}
[overlay] {
background-color: rgba(0, 0, 0, 0.333);
@include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
position: fixed;
z-index: 95536;
width: 100%;
@ -99,7 +103,7 @@
}
.popup-body {
background-color: #FFF;
@include lightDark(background-color, #fff, #333);
max-height: 90%;
max-width: 1200px;
width: 90%;
@ -175,7 +179,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.dropzone-container {
position: relative;
background-color: #EEE;
@include lightDark(background-color, #eee, #222);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
@ -188,7 +192,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
cursor: pointer;
width: (100%/6);
height: auto;
border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
overflow: hidden;
@ -230,7 +234,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
#image-manager .load-more {
display: block;
text-align: center;
background-color: #EEE;
@include lightDark(background-color, #EEE, #444);
padding: $-s $-m;
color: #AAA;
clear: both;
@ -244,6 +248,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
overflow-y: auto;
overflow-x: hidden;
border-inline-start: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
.inner {
padding: $-m;
}
@ -265,6 +270,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
.dropzone-container {
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
}
}
@ -577,10 +583,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.tab-container .nav-tabs {
text-align: start;
border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #444);
margin-bottom: $-m;
.tab-item {
padding: $-s;
color: #666;
@include lightDark(color, #666, #999);
&.selected {
border-bottom-width: 3px;
}
@ -592,8 +599,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
a, .tab-item {
padding: $-m;
display: inline-block;
color: #666;
fill: #666;
@include lightDark(color, #666, #999);
cursor: pointer;
&.selected {
border-bottom: 2px solid var(--color-primary);
@ -628,9 +634,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
.comment-box {
border: 1px solid #DDD;
border-radius: 4px;
background-color: #FFF;
border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000);
@include lightDark(background-color, #FFF, #222);
.content {
font-size: 0.666em;
p, ul, ol {