Updated attachments to work with new dropzone

[bookstack] / resources / sass / _components.scss

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index e889e1515b4c5a9b386a473a9a6646753e47f5a0..e28ec283602a8636bc9a2c80d87d45aeaeeb1698 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -145,6 +145,7 @@
   box-shadow: none;
   color: #FFF;
   padding: $-xs $-m;
+  cursor: pointer;
 }
 
 .popup-header button:not(.popup-header-close) {
@@ -227,6 +228,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   animation: dzAnimIn 240ms ease-in-out;
 }
 
+.dropzone-landing-area {
+  background-color: var(--color-primary-light);
+  padding: $-m $-l;
+  width: 100%;
+  border: 1px dashed var(--color-primary);
+  color: var(--color-primary);
+  border-radius: 4px;
+}
+
 @keyframes dzAnimIn {
   0% {
     opacity: 0;
@@ -292,6 +302,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 .dropzone-file-item-image-wrap {
   width: 80px;
   position: relative;
+  background-color: var(--color-primary-light);
   img {
     object-fit: cover;
     width: 100%;
@@ -317,12 +328,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 .dropzone-file-item-label,
 .dropzone-file-item-status {
   align-items: center;
-  font-size: .9rem;
+  font-size: .8rem;
   font-weight: 700;
 }
 .dropzone-file-item-status[data-status] {
   display: flex;
-  font-size: .8rem;
+  font-size: .6rem;
   font-weight: 500;
   line-height: 1.2;
 }
@@ -384,13 +395,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 .image-manager .load-more {
   display: block;
   text-align: center;
-  @include lightDark(background-color, #EEE, #444);
   padding: $-s $-m;
-  color: #AAA;
   clear: both;
-  font-size: 20px;
-  cursor: pointer;
-  font-style: italic;
+  .loading-container {
+    margin: 0;
+  }
 }
 
 .image-manager .loading-container {
@@ -407,7 +416,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     min-height: auto;
     padding: $-m;
   }
-  img {
+  .image-manager-viewer img {
     max-width: 100%;
     max-height: 180px;
     display: block;
@@ -442,6 +451,17 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
+.image-manager [role="tablist"] button[role="tab"] {
+  border-right: 1px solid #DDD;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.image-manager-header {
+  z-index: 4;
+}
+
 .tab-container [role="tablist"] {
   display: flex;
   align-items: end;