style(next): restyle the floating buttons

src/public/stylesheets/theme-next-dark.css

@@ -174,6 +174,14 @@
     --promoted-attribute-card-background-color: var(--card-background-color);
     --promoted-attribute-card-shadow-color: #000000b3;
 
+    --floating-button-shadow-color: #00000080;
+    --floating-button-background-color: #494949d2;
+    --floating-button-color: var(--button-text-color);
+    --floating-button-hover-background: #ffffff20;
+    --floating-button-hover-color: white;
+    --floating-button-hide-button-background: gray;
+    --floating-button-separator-color: #00000080;
+
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 

src/public/stylesheets/theme-next-light.css

@@ -167,6 +167,14 @@
     --promoted-attribute-card-background-color: var(--card-background-color);
     --promoted-attribute-card-shadow-color: #00000033;
 
+    --floating-button-shadow-color: #0000001f;
+    --floating-button-background-color: #e4e4e4cc;
+    --floating-button-color: var(--button-text-color);
+    --floating-button-hover-background: #00000017;
+    --floating-button-hover-color: black;
+    --floating-button-hide-button-background: gray;
+    --floating-button-separator-color: #ffffffd1;
+
     --new-tab-button-background: #d8d8d8;
     --new-tab-button-color: #3a3a3a;
     --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

src/public/stylesheets/theme-next/base.css

@@ -53,6 +53,11 @@
 
     --center-pane-border-radius: 10px;
 
+    --floating-button-height: 34px;
+    --floating-button-width: 40px;
+    --floating-button-icon-size: 20px;
+    --floating-button-show-hide-button-size: 26px;
+
     --menu-padding-size: 8px;
     --menu-item-icon-vert-offset: -2px;
 

src/public/stylesheets/theme-next/shell.css

@@ -1298,6 +1298,143 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
 }
 
+/*
+ * Floating buttons
+ */
+
+ /* Floating buttons container */
+.floating-buttons-children {
+    opacity: 1;
+    overflow: hidden;
+    transform-origin: right;
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    background: var(--floating-button-background-color);
+    backdrop-filter: blur(10px) saturate(6);
+    border-radius: 8px;
+    transition: transform 250ms ease-out,
+                opacity 250ms ease-out;
+}
+
+ /* Floating buttons container (collapsed) */
+.floating-buttons-children.temporarily-hidden {
+    display: flex !important;
+    opacity: 0;
+    transform: scaleX(0);
+    pointer-events: none;
+}
+
+/* Floating buttons */
+
+.floating-buttons-children > * {
+    margin: 0 !important;
+}
+
+div.floating-buttons-children > button,
+div.floating-buttons-children .floating-button {
+    width: var(--floating-button-width);
+    height: var(--floating-button-height);
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    font-size: var(--floating-button-icon-size);
+    align-items: center;
+    color: var(--floating-button-color);
+}
+
+div.floating-buttons-children > button:hover,
+div.floating-buttons-children .floating-button:hover {
+    background: var(--floating-button-hover-background);
+    color: var(--floating-button-hover-color);
+}
+
+ /* Show / hide buttons */
+
+div.floating-buttons-children .close-floating-buttons-button,
+div.floating-buttons .show-floating-buttons-button {
+    margin-top: calc((var(--floating-button-height) - var(--floating-button-show-hide-button-size)) / 2);
+    width: var(--floating-button-show-hide-button-size);
+    height: var(--floating-button-show-hide-button-size);
+    padding: 0;
+    border: 0;
+    font-size: calc(var(--floating-button-show-hide-button-size) * .75);
+}
+
+div.floating-buttons .show-floating-buttons-button {
+    box-shadow: 0 2px 4px var(--left-pane-background-color);
+    background: var(--left-pane-item-action-button-background);
+    color: var(--left-pane-item-action-button-color);
+    backdrop-filter: blur(10px);
+}
+
+div.floating-buttons-children .close-floating-buttons-button::before,
+div.floating-buttons .show-floating-buttons-button::before {
+    content: "\eab4";
+}
+
+div.floating-buttons-children .close-floating-buttons-button {
+    color: var(--floating-button-hide-button-background);
+    border-radius: 0;
+}
+
+div.floating-buttons-children .close-floating-buttons {
+    border-left: 2px solid var(--floating-button-separator-color);
+}
+
+div.floating-buttons-children .close-floating-buttons:has(.close-floating-buttons-button:hover) {
+    background: var(--floating-button-hover-background);
+}
+
+div.floating-buttons-children .close-floating-buttons {
+    margin-left: 0 !important;
+}
+
+/* Backlink count */
+
+.floating-buttons .backlinks-ticker {
+    height: 100%;
+    padding: 0 10px;
+    border-radius: 0;
+    border-left: 2px solid var(--floating-button-separator-color);
+    border-right: 2px solid var(--floating-button-separator-color);
+    background: transparent;
+    user-select: none;
+}
+
+.floating-buttons .backlinks-ticker:has(.backlinks-count:hover) {
+    background: var(--floating-button-hover-background);
+}
+
+/* Copy image reference */
+
+.floating-buttons .copy-image-reference-button .hidden-image-copy {
+    /* Take out of the the hidden image from flexbox to prevent the layout being affected */
+    position: absolute;
+}
+
+/* Code buttons */
+
+.floating-buttons .code-buttons-widget {
+    gap: 0;
+}
+
+/* The highlight animation */
+
+@keyframes floating-button-highlight {
+    from {
+        opacity: .25;
+    } to {
+        opacity: 1;
+    }
+}
+
+.floating-buttons .bx-tada {
+    animation: floating-button-highlight 300ms linear alternate-reverse infinite;
+}
+
+.floating-buttons .bx-tada::before {
+    font-size: var(--floating-button-icon-size);
+}
+
 /*
  * Find and replace bar
  */