Improved shelf book management interface

[bookstack] / resources / sass / styles.scss

diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index ee99d76682c7edf1b8601bc037d0d5f033f2bfc4..65eee866d7d8f9b9dcd9fa7d42392e15a9af10e1 100644 (file)
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -241,28 +241,54 @@ $btt-size: 40px;
 .scroll-box {
   max-height: 250px;
   overflow-y: scroll;
-  border: 1px solid #DDD;
+  border: 1px solid;
+  @include lightDark(border-color, #DDD, #000);
   border-radius: 3px;
+  min-height: 20px;
+  @include lightDark(background-color, #EEE, #000);
   .scroll-box-item {
     padding: $-xs $-m;
-    border-bottom: 1px solid #DDD;
-    border-top: 1px solid #DDD;
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    @include lightDark(border-color, #DDD, #000);
     margin-top: -1px;
+    @include lightDark(background-color, #FFF, #222);
+    display: flex;
+    gap: $-xs;
     &:last-child {
       border-bottom: 0;
     }
+    &:hover {
+      cursor: pointer;
+      @include lightDark(background-color, #f8f8f8, #333);
+    }
+    .handle {
+      color: #AAA;
+      cursor: grab;
+    }
   }
 }
 
-.scroll-box[data-instruction]:before {
-  content: attr(data-instruction);
+input.scroll-box-search, .scroll-box-header-item {
+  font-size: 0.8rem;
   padding: $-xs $-m;
-  border-bottom: 1px solid #DDD;
-  display: block;
-  font-size: 0.75rem;
+  border: 1px solid;
+  @include lightDark(border-color, #DDD, #000);
+  @include lightDark(background-color, #FFF, #222);
+  margin-bottom: -1px;
+  border-radius: 3px 3px 0 0;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  line-height: 1.4;
   color: #666;
 }
 
+.scroll-box-search + .scroll-box,
+.scroll-box-header-item + .scroll-box {
+  border-radius: 0 0 3px 3px;
+}
+
 .fullscreen {
   border:0;
   position:fixed;