make DotButton content overflow & add depart styling

src/assets/scss/abstracts/_mixins.scss

@@ -12,12 +12,20 @@
   color: color-yiq($background);
   @include gradient-bg($background);
   border-color: $border;
-  @include box-shadow($btn-box-shadow);
+  // @include box-shadow($btn-box-shadow);
+  @if $background == $white {
+    box-shadow: 3px 5px 0 $dark;
+  }
 
   @include hover() {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
+
+    @if $background == $white {
+      background-color: $white;
+      border-color: $dark;
+    }
   }
 
   &:focus,
@@ -25,6 +33,10 @@
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
+    @if $background == $white {
+      background-color: $white;
+      border-color: $dark;
+    }
   }
 
   // Disabled comes first so active can properly restyle

src/components/globals/DotButton.vue

@@ -55,18 +55,44 @@ export default {
 
   &:not(.show),
   &.hide {
-    min-height: 1.1875rem;
+    height: 1.1875rem;
-    min-width: 1.1875rem;
+    width: 1.1875rem;
     padding: 0;
 
     &.dot-btn-depart {
-      min-height: 1.875rem;
+      height: 1.875rem;
-      min-width: 1.875rem;
+      width: 1.875rem;
     }
 
     span {
       display: none;
     }
   }
+
+  &.hide:hover {
+    span {
+      pointer-events: none;
+      position: absolute;
+      display: block;
+      transform: translate(calc(-100% + 1.1875rem), -50%);
+      border-radius: 50rem;
+      padding: 0 $input-btn-padding-x;
+      line-height: 1.5;
+    }
+
+    @each $color, $value in $theme-colors {
+      &.dot-btn-#{$color} {
+        span {
+          background-color: lighten($value, 15%);
+        }
+        &:active,
+        &.active {
+          span {
+            background-color: $value;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/components/nodes/NodeViewFooter.vue

@@ -13,7 +13,7 @@
       </div>
 
       <div v-if="mode === 'view' && node.siblings && node.siblings.length">
-        <b-button :id="'siblings-' + node.id">
+        <b-button :id="'siblings-' + node.id" variant="depart" class="mb-2">
           {{ $t('siblings') }}
         </b-button>
 
@@ -36,7 +36,7 @@
     </div>
 
     <div v-if="mode === 'card' && preview" class="mt-2">
-      <b-button @click="onOpenSelf()" variant="outline-dark" class="btn-read">
+      <b-button @click="onOpenSelf()" variant="depart" class="btn-read">
         {{ $t('text.read') }}
       </b-button>
     </div>

src/pages/library/LibraryTree.vue

@@ -193,6 +193,10 @@ foreignObject {
   transform: translate(-50%, -50%);
   pointer-events: none;
 
+  &-depart {
+    box-shadow: none;
+  }
+
   h6 {
     margin: 0;
   }

src/store/modules/library.js

@@ -231,7 +231,7 @@ export default {
         if (a.authors[0].last_name > b.authors[0].last_name) return 1
         return 0
       }).reduce((dict, text) => {
-        const firstChar = text.authors ? text.authors[0].last_name[0].toUpperCase() : 'Pas de noms'
+        const firstChar = text.authors ? text.authors[0].last_name[0].toUpperCase() : '~'
         if (!(firstChar in dict)) dict[firstChar] = []
         dict[firstChar].push(text)
         return dict