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

style(next): restyle the floating buttons

Browse Source
This commit is contained in:
Adorian Doran 2025-03-21 03:17:43 +02:00
parent 7202afab8e
commit 6b71efbfd3
4 changed files with 158 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

5
src/public/stylesheets/theme-next/base.css
View File

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

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

@ -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
*/