gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-02 12:44:25 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

UI improvements (#7046)

Browse Source
This commit is contained in:
Adorian Doran 2025-09-21 03:30:49 +03:00 committed by GitHub
commit 89417f15dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 74 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/stylesheets/style.css
View File

@ -363,7 +363,7 @@ button kbd {
.tabulator-popup-container {
color: var(--menu-text-color) !important;
font-size: inherit;
background-color: var(--menu-background-color) !important;
background: var(--menu-background-color) !important;
user-select: none;
-webkit-user-select: none;
--bs-dropdown-zindex: 999;
@ -475,9 +475,9 @@ body #context-menu-container .dropdown-item > span {
.dropdown-item.active,
.dropdown-item:focus {
color: var(--active-item-text-color) !important;
background-color: var(--active-item-background-color) !important;
border-color: var(--active-item-border-color) !important;
color: var(--active-item-text-color);
background-color: var(--active-item-background-color);
border-color: var(--active-item-border-color);
outline: none;
}

2
apps/client/src/stylesheets/theme-next-dark.css
View File

@ -152,7 +152,7 @@
--launcher-pane-horiz-border-color: rgb(22, 22, 22);
--launcher-pane-horiz-background-color: #282828;
--launcher-pane-horiz-text-color: #909090;
--launcher-pane-horiz-text-color: #b8b8b8;
--launcher-pane-horiz-button-hover-color: #ffffff;
--launcher-pane-horiz-button-hover-background: #ffffff1c;
--launcher-pane-horiz-button-hover-shadow: unset;

14
apps/client/src/stylesheets/theme-next/base.css
View File

@ -102,10 +102,6 @@ body.backdrop-effects-disabled {
font-size: 0.9rem !important;
}
.dropdown-menu {
--scrollbar-background-color: var(--menu-background-color);
}
body.mobile .dropdown-menu {
backdrop-filter: var(--dropdown-backdrop-filter);
border-radius: var(--dropdown-border-radius);
@ -160,6 +156,16 @@ body.mobile .dropdown-submenu .dropdown-toggle {
cursor: default !important;
}
:root .dropdown-item:focus-visible {
outline: 2px solid var(--input-focus-outline-color) !important;
background-color: transparent;
color: unset;
}
:root .dropdown-item:active {
background: unset;
}
body.mobile .dropdown-submenu {
padding: 0 !important;
}

4
apps/client/src/stylesheets/theme-next/forms.css
View File

@ -197,8 +197,8 @@ input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
:root input.ck.ck-input-text:focus,
:root input.ck.ck-input-number:focus,
:root input.ck.ck-input-text:not([readonly="true"]):focus,
:root input.ck.ck-input-number:not([readonly="true"]):focus,
textarea.form-control:focus,
textarea:focus,
:root textarea.ck.ck-textarea:focus,

4
apps/client/src/stylesheets/theme-next/pages.css
View File

@ -109,6 +109,10 @@
* NOTE MAP
*/
.note-detail-note-map .fixnodes-type-switcher .tn-tool-button {
padding: unset;
}
.note-detail-note-map .fixnodes-type-switcher .tn-tool-button.toggled {
color: var(--tab-close-button-hover-background);
}

21
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -577,15 +577,21 @@ div.quick-search .search-button.show {
transition: background-color 100ms ease-out !important;
}
/*
* Quick search results
*/
div.quick-search .dropdown-menu {
--quick-search-item-delimiter-color: transparent;
--menu-item-icon-vert-offset: -.065em;
}
/*
* TO FIX: The quick search results dropdown has a backdrop issue with the tree panel
* when background effects are enabled in Electron.
* As a temporary workaround, the backdrop and transparency are disabled for the
* vertical layout.
*/
body.layout-vertical.background-effects div.quick-search .dropdown-menu {
--menu-background-color: var(--menu-background-color-no-backdrop) !important;
}
/* Item */
.quick-search .dropdown-menu *.dropdown-item {
padding: 8px 12px !important;
@ -881,7 +887,10 @@ body.mobile .fancytree-node > span {
}
.tab-row-container .toggle-button {
margin: 6px 10px !important;
--icon-button-size: 30px;
--icon-button-icon-ratio: .6;
margin: 3px 6px auto 8px !important;
}
.tab-row-container {
@ -911,7 +920,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .toggle-bu
bottom: 0;
left: -10px;
right: -10px;
top: 29px;
top: 32px;
height: 1px;
border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
}

8
apps/client/src/widgets/FloatingButtons.css
View File

@ -6,8 +6,8 @@
.floating-buttons-children,
.show-floating-buttons {
position: absolute;
top: 10px;
right: 10px;
top: var(--floating-buttons-vert-offset, 10px);
right: var(--floating-buttons-horiz-offset, 10px);
display: flex;
flex-direction: row;
z-index: 100;
@ -28,8 +28,8 @@
transform: rotate(180deg);
}
.type-canvas .floating-buttons-children {
top: 70px;
.type-canvas {
--floating-buttons-vert-offset: 70px;
}
.type-canvas .floating-buttons-children > * {

49
apps/client/src/widgets/buttons/global_menu.css
View File

@ -8,31 +8,50 @@
min-width: 20em;
}
.global-menu-button {
button.global-menu-button {
position: relative;
width: 100% !important;
height: 100% !important;
position: relative;
border: none;
padding: 6px;
border: 0;
}
.global-menu-button svg > g {
transform-origin: center;
transition: transform 300ms ease-in-out;
}
.global-menu-button:active svg > g,
.global-menu-button.show svg > g{
transform: scale(0.85) rotate(-10deg);
}
.global-menu-button svg path {
fill: var(--launcher-pane-text-color);
}
.global-menu-button:hover { border: 0; }
.global-menu-button:hover svg path {
transition: 200ms ease-in-out fill;
.global-menu-button:hover {
border: none;
}
.global-menu-button:hover svg path.st0 { fill:#95C980; }
.global-menu-button:hover svg path.st1 { fill:#72B755; }
.global-menu-button:hover svg path.st2 { fill:#4FA52B; }
.global-menu-button:hover svg path.st3 { fill:#EE8C89; }
.global-menu-button:hover svg path.st4 { fill:#E96562; }
.global-menu-button:hover svg path.st5 { fill:#E33F3B; }
.global-menu-button:hover svg path.st6 { fill:#EFB075; }
.global-menu-button:hover svg path.st7 { fill:#E99547; }
.global-menu-button:hover svg path.st8 { fill:#E47B19; }
.global-menu-button:hover svg path,
.global-menu-button.show svg path {
transition: 300ms linear fill;
}
.global-menu-button svg path {
transition: fill 1000ms ease-out;
}
.global-menu-button:is(:hover, .show) svg path.st0 { fill:#95C980; transition-delay: 0ms; }
.global-menu-button:is(:hover, .show) svg path.st1 { fill:#72B755; transition-delay: 50ms; }
.global-menu-button:is(:hover, .show) svg path.st2 { fill:#4FA52B; transition-delay: 100ms; }
.global-menu-button:is(:hover, .show) svg path.st3 { fill:#EE8C89; transition-delay: 200ms; }
.global-menu-button:is(:hover, .show) svg path.st4 { fill:#E96562; transition-delay: 250ms; }
.global-menu-button:is(:hover, .show) svg path.st5 { fill:#E33F3B; transition-delay: 300ms; }
.global-menu-button:is(:hover, .show) svg path.st6 { fill:#EFB075; transition-delay: 400ms; }
.global-menu-button:is(:hover, .show) svg path.st7 { fill:#E99547; transition-delay: 450ms; }
.global-menu-button:is(:hover, .show) svg path.st8 { fill:#E47B19; transition-delay: 500ms; }
.global-menu-button-update-available {
position: absolute;