Comments: Checked content/arhived comment styles in dark mode

[bookstack] / resources / sass / _components.scss

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 888b325275ea61890752f180c1c0ab370df1e799..9e96b39fbb4834ef75e8b19f787268093513ec46 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -569,6 +569,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   border-bottom: 0;
   padding: 0 vars.$xs;
 }
+.tab-container [role="tabpanel"].no-outline:focus {
+  outline: none;
+}
 
 .image-picker .none {
   display: none;
@@ -746,6 +749,52 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   height: calc(100% - vars.$m);
 }
 
+.comment-reference-indicator-wrap a {
+  float: left;
+  margin-top: vars.$xs;
+  font-size: 12px;
+  display: inline-block;
+  font-weight: bold;
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 2px 6px 2px 0;
+  margin-inline-end: vars.$xs;
+  color: var(--color-link);
+  span {
+    display: none;
+  }
+  &.outdated span {
+    display: inline;
+  }
+  &.outdated.missing {
+    color: var(--color-warning);
+    pointer-events: none;
+  }
+  svg {
+    width: 24px;
+    margin-inline-end: 0;
+  }
+  &:after {
+    background-color: currentColor;
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0.15;
+  }
+  &[href="#"] {
+    color: #444;
+    pointer-events: none;
+  }
+}
+
+.comment-branch .comment-box {
+  margin-bottom: vars.$m;
+}
+
 .comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
   display: none;
 }
@@ -760,7 +809,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   display: block;
 }
 
+.comment-container .empty-state {
+  display: none;
+}
+.comment-container:not(:has([component="page-comment"])) .empty-state {
+  display: block;
+}
+
 .comment-container-compact .comment-box {
+  margin-bottom: vars.$xs;
   .meta {
     font-size: 0.8rem;
   }
@@ -778,6 +835,29 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   width: vars.$m;
 }
 
+.comment-container-super-compact .comment-box {
+  .meta {
+    font-size: 12px;
+  }
+  .avatar {
+    width: 22px;
+    height: 22px;
+    margin-inline-end: 2px !important;
+  }
+  .content {
+    padding: vars.$xxs vars.$s;
+    line-height: 1.2;
+  }
+  .content p {
+    font-size: 12px;
+  }
+}
+
+.comment-container-super-compact .comment-thread-indicator {
+  width: (vars.$xs + 3px);
+  margin-inline-start: 3px;
+}
+
 #tag-manager .drag-card {
   max-width: 500px;
 }
@@ -1062,12 +1142,16 @@ $btt-size: 40px;
     cursor: pointer;
     @include mixins.lightDark(background-color, #f8f8f8, #333);
   }
+  &.items-center {
+    align-items: center;
+  }
   .handle {
     color: #AAA;
     cursor: grab;
   }
   button {
     opacity: .6;
+    line-height: 1;
   }
   .handle svg {
     margin: 0;
@@ -1108,12 +1192,36 @@ input.scroll-box-search, .scroll-box-header-item {
   border-radius: 0 0 3px 3px;
 }
 
-.scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
+.scroll-box.configured-option-list [data-action="add"] {
   display: none;
 }
-.scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"],
-.scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_up"],
-.scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_down"],
+.scroll-box.available-option-list [data-action="remove"],
+.scroll-box.available-option-list [data-action="move_up"],
+.scroll-box.available-option-list [data-action="move_down"],
 {
   display: none;
+}
+
+.scroll-box > li.empty-state {
+  display: none;
+}
+.scroll-box > li.empty-state:last-child {
+  display: list-item;
+}
+
+details.section-expander summary {
+  border-top: 1px solid #DDD;
+  @include mixins.lightDark(border-color, #DDD, #000);
+  font-weight: bold;
+  font-size: 12px;
+  color: #888;
+  cursor: pointer;
+  padding-block: vars.$xs;
+}
+details.section-expander:open summary {
+  margin-bottom: vars.$s;
+}
+details.section-expander {
+  border-bottom: 1px solid #DDD;
+  @include mixins.lightDark(border-color, #DDD, #000);
 }
\ No newline at end of file