From 6b71efbfd304c62c7fbae677d114047bcdcb6f45 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 21 Mar 2025 03:17:43 +0200 Subject: [PATCH] style(next): restyle the floating buttons --- src/public/stylesheets/theme-next-dark.css | 8 ++ src/public/stylesheets/theme-next-light.css | 8 ++ src/public/stylesheets/theme-next/base.css | 5 + src/public/stylesheets/theme-next/shell.css | 137 ++++++++++++++++++++ 4 files changed, 158 insertions(+) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index c7dc1846f..5d72cd411 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/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; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 7c4eff5be..cd973c98f 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/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); diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css index 7822e606b..888b83ca9 100644 --- a/src/public/stylesheets/theme-next/base.css +++ b/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; diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index f1fbd9d43..8251e2c22 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/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 */