X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1ee3e779e4b9b0a92f701a72f21a72c83cb1ce68..refs/pull/3433/head:/resources/sass/_forms.scss

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 64308b29e..73799f0a0 100644
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -1,12 +1,14 @@
 
 .input-base {
-  background-color: #FFF;
   border-radius: 3px;
   border: 1px solid #D4D4D4;
+  @include lightDark(background-color, #fff, #333);
+  @include lightDark(border-color, #d4d4d4, #111);
+  @include lightDark(color, #666, #AAA);
   display: inline-block;
-  font-size: $fs-s;
-  padding: $-xs*1.5;
-  color: #666;
+  font-size: $fs-m;
+  padding: $-xs*1.8;
+  height: 40px;
   width: 250px;
   max-width: 100%;
 
@@ -19,12 +21,19 @@
   &.disabled, &[disabled] {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
   }
+  &[readonly] {
+    background-color: #f8f8f8;
+  }
   &:focus {
     border-color: var(--color-primary);
     outline: 1px solid var(--color-primary);
   }
 }
 
+.input-fill-width {
+  width: 100% !important;
+}
+
 .fake-input {
   @extend .input-base;
   overflow: auto;
@@ -59,9 +68,17 @@
     display: flex;
     flex-direction: column;
     border: 1px solid #DDD;
+    @include lightDark(border-color, #ddd, #000);
     width: 50%;
     max-width: 50%;
   }
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 2;
+  }
 }
 
 @include smaller-than($m) {
@@ -71,6 +88,7 @@
   #markdown-editor .markdown-editor-wrap {
     width: 100%;
     max-width: 100%;
+    flex-grow: 1;
   }
   #markdown-editor .editor-toolbar {
     padding: 0;
@@ -83,31 +101,42 @@
     border-bottom: 1px solid #DDD;
     display: block;
   }
-  .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons {
+  .markdown-editor-wrap:not(.active) .editor-toolbar + div,
+  .markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
+  .markdown-editor-wrap:not(.active) .markdown-display {
     display: none;
   }
   #markdown-editor .markdown-editor-wrap:not(.active) {
     flex-grow: 0;
     flex: none;
+    min-height: 0;
   }
 }
 
 .markdown-display {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 
 .markdown-editor-display {
-  background-color: #FFFFFF;
+  background-color: #fff;
   body {
-    background-color: #FFFFFF;
-    padding-left: 16px;
-    padding-right: 16px;
+    display: block;
+    background-color: #fff;
+    padding-inline-start: 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;
@@ -115,21 +144,28 @@
   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;
+    }
+  }
 }
 
 
 label {
+  @include lightDark(color, #666, #ddd);
   display: block;
   line-height: 1.4em;
   font-size: 0.94em;
   font-weight: 400;
-  color: #666;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   &.inline {
@@ -141,12 +177,12 @@ label.radio, label.checkbox {
   font-weight: 400;
   user-select: none;
   input[type="radio"], input[type="checkbox"] {
-    margin-right: $-xs;
+    margin-inline-end: $-xs;
   }
 }
 
 label.inline.checkbox {
-  margin-right: $-m;
+  margin-inline-end: $-m;
 }
 
 label + p.small {
@@ -157,7 +193,7 @@ table.form-table {
   max-width: 100%;
   td {
     overflow: hidden;
-    padding: $-xxs/2 0;
+    padding: math.div($-xxs, 2) 0;
   }
 }
 
@@ -166,12 +202,27 @@ 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;
 }
 
 input[type=color] {
   height: 60px;
+  &.small {
+    height: 42px;
+    width: 60px;
+    padding: 2px;
+  }
 }
 
 .toggle-switch {
@@ -269,12 +320,12 @@ input[type=color] {
   border: 1px solid #DDD;
   border-radius: 4px;
   .collapse-title {
-    margin-left: -$-m;
-    margin-right: -$-m;
+    margin-inline-start: -$-m;
+    margin-inline-end: -$-m;
     padding: $-s $-m;
     display: block;
     width: calc(100% + 32px);
-    text-align: left;
+    text-align: start;
   }
   .collapse-title, .collapse-title label {
     cursor: pointer;
@@ -287,7 +338,7 @@ input[type=color] {
   .collapse-title label:before {
     display: inline-block;
     content: '▸';
-    margin-right: $-m;
+    margin-inline-end: $-m;
     transition: all ease-in-out 400ms;
     transform: rotate(0);
   }
@@ -300,20 +351,18 @@ input[type=color] {
   }
 }
 
-.inline-input-style {
+.title-input input[type="text"] {
   display: block;
   width: 100%;
   padding: $-s;
-}
-
-.title-input input[type="text"] {
-  @extend .inline-input-style;
   margin-top: 0;
   font-size: 2em;
+  height: auto;
 }
 
 .title-input.page-title {
   font-size: 0.8em;
+  @include lightDark(background-color, #fff, #333);
   .input {
     border: 0;
     margin-bottom: -1px;
@@ -322,6 +371,7 @@ input[type=color] {
     max-width: 840px;
     margin: 0 auto;
     border: none;
+    height: auto;
   }
 }
 
@@ -332,14 +382,17 @@ input[type=color] {
 }
 
 .description-input textarea {
-  @extend .inline-input-style;
+  display: block;
+  width: 100%;
+  padding: $-s;
   font-size: $fs-m;
   color: #666;
-  width: 100%;
+  height: auto;
 }
 
 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   max-width: 100%;
+  border-radius: 0;
 }
 
 .search-box {
@@ -348,18 +401,24 @@ 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;
     left: 8px;
     top: 9px;
+    @include rtl {
+      right: 8px;
+      left: auto;
+    }
   }
   input {
     display: block;
-    padding-left: $-l + 4px;
+    padding: $-xs * 1.5;
+    padding-inline-start: $-l + 4px;
     width: 300px;
     max-width: 100%;
+    height: auto;
   }
   &.flexible input {
     width: 100%;