From 058983e98db36553f62628c07a1e922e95929b1f Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 21 Mar 2025 20:21:44 +0200 Subject: [PATCH] style(next)/floating buttons: tweak --- src/public/stylesheets/theme-next-dark.css | 9 ++- src/public/stylesheets/theme-next-light.css | 15 +++-- src/public/stylesheets/theme-next/shell.css | 68 ++++++++++++++------- 3 files changed, 64 insertions(+), 28 deletions(-) diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 5d72cd411..87353887b 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -179,8 +179,13 @@ --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; + --floating-button-show-button-background: var(--left-pane-item-action-button-background); + --floating-button-show-button-color: var(--left-pane-item-action-button-color); + --floating-button-show-button-shadow: none; + --floating-button-show-button-hover-background: var(--left-pane-item-action-button-hover-background); + --floating-button-show-button-hover-shadow: 0 2px 4px #0000007b; + --floating-button-hide-button-background: #00000029; + --floating-button-hide-button-color: #ffffff63; --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 ea1018bf4..4060daf87 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -167,13 +167,18 @@ --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-shadow-color: #00000042; + --floating-button-background-color: #eaeaeacc; + --floating-button-color: #454545; --floating-button-hover-background: #00000017; --floating-button-hover-color: black; - --floating-button-hide-button-background: gray; - --floating-button-separator-color: #c0c0c0d1; + --floating-button-show-button-background: var(--left-pane-item-action-button-background); + --floating-button-show-button-color: var(--left-pane-item-action-button-color); + --floating-button-show-button-shadow: none; + --floating-button-show-button-hover-background: var(--left-pane-item-action-button-hover-background); + --floating-button-show-button-hover-shadow: 0 2px 4px #00000068; + --floating-button-hide-button-background: #0000000d; + --floating-button-hide-button-color: gray; --new-tab-button-background: #d8d8d8; --new-tab-button-color: #3a3a3a; diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index b87bba69b..151501250 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -1310,7 +1310,7 @@ div.promoted-attribute-cell .multiplicity:has(span) { 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; + border-radius: 6px; transition: transform 250ms ease-out, opacity 250ms ease-out; } @@ -1347,7 +1347,20 @@ div.floating-buttons-children .floating-button:hover { color: var(--floating-button-hover-color); } - /* Show / hide buttons */ +div.floating-buttons-children > button:active, +div.floating-buttons-children .floating-button:active { + font-size: calc(var(--floating-button-icon-size) * 0.85); +} + + /* "Show / hide floating buttons" buttons */ + + @keyframes floating-buttons-show-hide-button-animation { + from { + transform: rotate(180deg); + } to { + transform: rotate(0); + } +} div.floating-buttons-children .close-floating-buttons-button, div.floating-buttons .show-floating-buttons-button { @@ -1359,41 +1372,56 @@ div.floating-buttons .show-floating-buttons-button { font-size: calc(var(--floating-button-show-hide-button-size) * .8); } +div.floating-buttons-children .close-floating-buttons-button:active, +div.floating-buttons .show-floating-buttons-button:active { + font-size: calc(var(--floating-button-show-hide-button-size) * .65); + background: transparent!important; +} + +div.floating-buttons-children .close-floating-buttons-button::before, +div.floating-buttons .show-floating-buttons-button::before { + display: block; +} + +/* "Show buttons" button */ + 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); + box-shadow: var(--floating-button-show-button-shadow); + background: var(--floating-button-show-button-background); + color: var(--floating-button-show-button-color); backdrop-filter: blur(10px); +} + +div.floating-buttons .show-floating-buttons-button::before { animation: floating-buttons-show-hide-button-animation 400ms ease-out; } - -@keyframes floating-buttons-show-hide-button-animation { - from { - transform: rotate(180deg); - } to { - transform: rotate(0); - } + +div.floating-buttons .show-floating-buttons-button:hover, +div.floating-buttons .show-floating-buttons-button:active { + box-shadow: var(--floating-button-show-button-hover-shadow); + background: var(--floating-button-show-button-hover-background) !important; + color: var(--floating-button-show-button-color) !important; } -div.floating-buttons-children:not(.temporarily-hidden) .close-floating-buttons-button { +/* "Hide buttons" button */ + +div.floating-buttons-children:not(.temporarily-hidden) .close-floating-buttons-button::before { animation: floating-buttons-show-hide-button-animation 400ms ease-out; } 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); + margin-left: 0 !important; + background: var(--floating-button-hide-button-background); + color: var(--floating-button-hide-button-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; + color: var(--floating-button-hover-color); } /* Backlink count */ @@ -1402,8 +1430,6 @@ div.floating-buttons-children .close-floating-buttons { 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; }