Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-18 01:01:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next)/floating buttons: tweak

Browse Source
This commit is contained in:
Adorian Doran 2025-03-21 20:21:44 +02:00
parent 6d82905ad4
commit 058983e98d
3 changed files with 64 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/public/stylesheets/theme-next-dark.css
View File

@ -179,8 +179,13 @@
--floating-button-color: var(--button-text-color); --floating-button-color: var(--button-text-color);
--floating-button-hover-background: #ffffff20; --floating-button-hover-background: #ffffff20;
--floating-button-hover-color: white; --floating-button-hover-color: white;
--floating-button-hide-button-background: gray; --floating-button-show-button-background: var(--left-pane-item-action-button-background);
--floating-button-separator-color: #00000080; --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-background: #ffffff26;
--right-pane-item-hover-color: white; --right-pane-item-hover-color: white;

15
src/public/stylesheets/theme-next-light.css
View File

@ -167,13 +167,18 @@
--promoted-attribute-card-background-color: var(--card-background-color); --promoted-attribute-card-background-color: var(--card-background-color);
--promoted-attribute-card-shadow-color: #00000033; --promoted-attribute-card-shadow-color: #00000033;
--floating-button-shadow-color: #0000001f; --floating-button-shadow-color: #00000042;
--floating-button-background-color: #e4e4e4cc; --floating-button-background-color: #eaeaeacc;
--floating-button-color: var(--button-text-color); --floating-button-color: #454545;
--floating-button-hover-background: #00000017; --floating-button-hover-background: #00000017;
--floating-button-hover-color: black; --floating-button-hover-color: black;
--floating-button-hide-button-background: gray; --floating-button-show-button-background: var(--left-pane-item-action-button-background);
--floating-button-separator-color: #c0c0c0d1; --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-background: #d8d8d8;
--new-tab-button-color: #3a3a3a; --new-tab-button-color: #3a3a3a;

68
src/public/stylesheets/theme-next/shell.css
View File

@ -1310,7 +1310,7 @@ div.promoted-attribute-cell .multiplicity:has(span) {
box-shadow: 1px 1px 1px var(--floating-button-shadow-color); box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
background: var(--floating-button-background-color); background: var(--floating-button-background-color);
backdrop-filter: blur(10px) saturate(6); backdrop-filter: blur(10px) saturate(6);
border-radius: 8px; border-radius: 6px;
transition: transform 250ms ease-out, transition: transform 250ms ease-out,
opacity 250ms ease-out; opacity 250ms ease-out;
} }
@ -1347,7 +1347,20 @@ div.floating-buttons-children .floating-button:hover {
color: var(--floating-button-hover-color); 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-children .close-floating-buttons-button,
div.floating-buttons .show-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); 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 { div.floating-buttons .show-floating-buttons-button {
box-shadow: 0 2px 4px var(--left-pane-background-color); box-shadow: var(--floating-button-show-button-shadow);
background: var(--left-pane-item-action-button-background); background: var(--floating-button-show-button-background);
color: var(--left-pane-item-action-button-color); color: var(--floating-button-show-button-color);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
div.floating-buttons .show-floating-buttons-button::before {
animation: floating-buttons-show-hide-button-animation 400ms ease-out; animation: floating-buttons-show-hide-button-animation 400ms ease-out;
} }
@keyframes floating-buttons-show-hide-button-animation { div.floating-buttons .show-floating-buttons-button:hover,
from { div.floating-buttons .show-floating-buttons-button:active {
transform: rotate(180deg); box-shadow: var(--floating-button-show-button-hover-shadow);
} to { background: var(--floating-button-show-button-hover-background) !important;
transform: rotate(0); 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; animation: floating-buttons-show-hide-button-animation 400ms ease-out;
} }
div.floating-buttons-children .close-floating-buttons-button { div.floating-buttons-children .close-floating-buttons-button {
color: var(--floating-button-hide-button-background);
border-radius: 0; border-radius: 0;
} }
div.floating-buttons-children .close-floating-buttons { 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) { div.floating-buttons-children .close-floating-buttons:has(.close-floating-buttons-button:hover) {
background: var(--floating-button-hover-background); background: var(--floating-button-hover-background);
} color: var(--floating-button-hover-color);
div.floating-buttons-children .close-floating-buttons {
margin-left: 0 !important;
} }
/* Backlink count */ /* Backlink count */
@ -1402,8 +1430,6 @@ div.floating-buttons-children .close-floating-buttons {
height: 100%; height: 100%;
padding: 0 10px; padding: 0 10px;
border-radius: 0; border-radius: 0;
border-left: 2px solid var(--floating-button-separator-color);
border-right: 2px solid var(--floating-button-separator-color);
background: transparent; background: transparent;
user-select: none; user-select: none;
} }