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-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;

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-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;

66
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);
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;
}