X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/067cb9c5b7b020da6dda398773cd7236fa3b51f2..refs/pull/3245/head:/resources/sass/_forms.scss

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 535bc54ea..665b1213b 100644
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -29,6 +29,10 @@
   }
 }
 
+.input-fill-width {
+  width: 100% !important;
+}
+
 .fake-input {
   @extend .input-base;
   overflow: auto;
@@ -63,6 +67,7 @@
     display: flex;
     flex-direction: column;
     border: 1px solid #DDD;
+    @include lightDark(border-color, #ddd, #000);
     width: 50%;
     max-width: 50%;
   }
@@ -112,17 +117,25 @@
 }
 
 .markdown-editor-display {
-  background-color: #FFFFFF;
+  background-color: #fff;
   body {
-    background-color: #FFFFFF;
+    display: block;
+    background-color: #fff;
     padding-inline-start: 16px;
-    pmargin-inline-end: 16px;
+    padding-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 +143,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;
+    }
+  }
 }
 
 
@@ -172,7 +192,7 @@ table.form-table {
   max-width: 100%;
   td {
     overflow: hidden;
-    padding: $-xxs/2 0;
+    padding: math.div($-xxs, 2) 0;
   }
 }
 
@@ -181,6 +201,16 @@ input[type="color"], input[type="password"], select, textarea {
   @extend .input-base;
 }
 
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23666666'><polygon points='0,0 100,0 50,50'/></svg>");
+  background-size: 12px;
+  background-position: calc(100% - 20px) 70%;
+  background-repeat: no-repeat;
+}
+
 input[type=date] {
   width: 190px;
 }
@@ -334,6 +364,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 +391,7 @@ input[type=color] {
 
 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   max-width: 100%;
+  border-radius: 0;
 }
 
 .search-box {
@@ -368,7 +400,7 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   button {
     background-color: transparent;
     border: none;
-    fill: #666;
+    @include lightDark(color, #666, #AAA);
     padding: 0;
     cursor: pointer;
     position: absolute;