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

style(next): restyle toasts

Browse Source
This commit is contained in:
Adorian Doran 2025-03-12 12:55:55 +02:00
parent b730ca0033
commit 9c78415a1f
2 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,3 +102,51 @@ div.tn-tool-dialog {
background: var(--hover-item-background-color); background: var(--hover-item-background-color);
color: var(--hover-item-text-color); color: var(--hover-item-text-color);
} }
/*
* Toasts
*/
:root {
--toast-background: #00000099;
--toast-text-color: white;
--toast-close-button-background: #ffffff33;
}
#toast-container {
/* The vertical gap between toasts */
gap: 10px;
}
#toast-container .toast {
--bs-toast-padding-x: 12px;
--bs-border-radius: 8px;
--bs-toast-bg: var(--toast-background);
--bs-toast-color: var(--toast-text-color);
--modal-control-button-background: var(--toast-close-button-background);
--modal-control-button-color: var(--bs-toast-color);
display: flex;
flex-direction: row-reverse;
backdrop-filter: blur(6px);
}
#toast-container .toast .toast-header {
padding: 0 !important;
background: transparent !important;
border-bottom: none;
}
#toast-container .toast .toast-header strong {
/* The title of the toast is no longer displayed */
display: none;
}
#toast-container .toast .toast-header .btn-close {
margin: 0 var(--bs-toast-padding-x) 0 12px;
}
#toast-container .toast .toast-body {
flex-grow: 1;
}

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

@ -2087,10 +2087,11 @@ div.promoted-attribute-cell .multiplicity:has(span) {
color: var(--modal-title-color); color: var(--modal-title-color);
} }
/* Modal control buttons (close and help) */ /* Modal and toast control buttons (close and help) */
.modal .modal-header .btn-close, .modal .modal-header .btn-close,
.modal .modal-header .help-button { .modal .modal-header .help-button,
#toast-container .toast .toast-header .btn-close {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -2109,11 +2110,13 @@ div.promoted-attribute-cell .multiplicity:has(span) {
cursor: default; cursor: default;
} }
.modal .modal-header .btn-close { .modal .modal-header .btn-close,
#toast-container .toast .toast-header .btn-close {
--modal-control-button-hover-background: var(--modal-close-button-hover-background); --modal-control-button-hover-background: var(--modal-close-button-hover-background);
} }
.modal .modal-header .btn-close::after { .modal .modal-header .btn-close::after,
#toast-container .toast .toast-header .btn-close::after {
content: "\ec8d"; content: "\ec8d";
font-family: boxicons; font-family: boxicons;
} }
@ -2126,23 +2129,27 @@ div.promoted-attribute-cell .multiplicity:has(span) {
} }
.modal .modal-header .btn-close:hover, .modal .modal-header .btn-close:hover,
.modal .modal-header .help-button:hover { .modal .modal-header .help-button:hover,
#toast-container .toast .toast-header .btn-close:hover {
background: var(--modal-control-button-hover-background); background: var(--modal-control-button-hover-background);
color: var(--modal-control-button-hover-color); color: var(--modal-control-button-hover-color);
} }
.modal .modal-header .btn-close:active, .modal .modal-header .btn-close:active,
.modal .modal-header .help-button:active { .modal .modal-header .help-button:active,
#toast-container .toast .toast-header .btn-close:active {
transform: scale(.85); transform: scale(.85);
} }
.modal .modal-header .btn-close:focus, .modal .modal-header .btn-close:focus,
.modal .modal-header .help-button:focus { .modal .modal-header .help-button:focus,
#toast-container .toast .toast-header .btn-close:focus {
box-shadow: none !important; box-shadow: none !important;
} }
.modal .modal-header .btn-close:focus-visible, .modal .modal-header .btn-close:focus-visible,
.modal .modal-header .help-button:focus-visible { .modal .modal-header .help-button:focus-visible,
#toast-container .toast .toast-header .btn-close:focus-visible {
outline: 2px solid var(--input-focus-outline-color); outline: 2px solid var(--input-focus-outline-color);
outline-offset: 2px; outline-offset: 2px;
} }