make DotButton content overflow & add depart styling

src/components/globals/DotButton.vue

@@ -55,18 +55,44 @@ export default {
 
   &:not(.show),
   &.hide {
-    min-height: 1.1875rem;
-    min-width: 1.1875rem;
+    height: 1.1875rem;
+    width: 1.1875rem;
     padding: 0;
 
     &.dot-btn-depart {
-      min-height: 1.875rem;
-      min-width: 1.875rem;
+      height: 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>