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

Restyle the quick search box

Browse Source
This commit is contained in:
Adorian Doran 2024-11-29 03:01:27 +02:00
parent 6ad09280d0
commit e6aa8a5299
1 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/public/stylesheets/theme-next.css
View File

@ -101,6 +101,12 @@
--modal-background-color: white; --modal-background-color: white;
--modal-backdrop-color: black; --modal-backdrop-color: black;
--quick-search-background: #00000012;
--quick-search-color: #06060682;
--quick-search-focus-border: #00000029;
--quick-search-focus-background: #ffffff80;
--quick-search-focus-color: #000;
--left-pane-collapsed-border-color: #0000000d; --left-pane-collapsed-border-color: #0000000d;
--left-pane-background-color: #f2f2f2; --left-pane-background-color: #f2f2f2;
--left-pane-text-color: #383838; --left-pane-text-color: #383838;
@ -210,6 +216,12 @@
--modal-background-color: #333; --modal-background-color: #333;
--modal-backdrop-color: #444; --modal-backdrop-color: #444;
--quick-search-background: #dcdcdc;
--quick-search-color: gray;
--quick-search-focus-border: gray;
--quick-search-focus-background: #dcdcdc;
--quick-search-focus-color: black;
--left-pane-collapsed-border-color: #0000000d; --left-pane-collapsed-border-color: #0000000d;
--left-pane-background-color: #1f1f1f; --left-pane-background-color: #1f1f1f;
@ -347,10 +359,95 @@
box-shadow 100ms ease-in; box-shadow 100ms ease-in;
} }
/* /*
* Left pane * Left pane
*/ */
/* Search Box */
#left-pane .quick-search {
--padding-top: 8px;
--padding-left: 8px;
--padding-right: 8px;
--padding-bottom: 8px;
position: relative;
flex-direction: row-reverse;
align-items: center;
height: unset;
contain: unset;
padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}
#left-pane .quick-search::before {
/* The background rectangle of the search box */
position: absolute;
content: "";
top: var(--padding-top);
left: var(--padding-left);
bottom: var(--padding-bottom);
right: var(--padding-right);
z-index: 0;
border: 2px solid transparent;
border-radius: 6px;
background: var(--quick-search-background);
transition: background-color 200ms ease-in;
}
#left-pane .quick-search:focus-within:before {
/* Focused search box background rectangle */
border-color: var(--quick-search-focus-border);
background: var(--quick-search-focus-background);
transition: background-color 100ms ease-out;
}
#left-pane .quick-search input {
padding-left: 15px;
box-shadow: unset;
background: transparent;
}
#left-pane .quick-search input::placeholder {
color: var(--quick-search-color);
}
#left-pane .quick-search:focus-within input {
color: var(--quick-search-focus-color) !important;
}
#left-pane .quick-search .search-button {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
margin-right: 8px;
border-radius: 50%;
padding: 0;
transition: background-color 200ms ease-in !important;
}
#left-pane .quick-search .search-button:active {
transform: scale(.85);
}
#left-pane .quick-search:has(input:not(:placeholder-shown)) .search-button {
/* Matches when the input has a value */
background: var(--left-pane-item-action-button-background) !important;
transition: background-color 500ms ease-out !important;
}
#left-pane .quick-search:focus-within .search-button:hover,
#left-pane .quick-search .search-button.show {
background: var(--left-pane-item-action-button-background) !important;
transition: background-color 100ms ease-out !important;
}
/* Tree */
#left-pane .tree-actions { #left-pane .tree-actions {
/* TODO: relocate instead of hiding */ /* TODO: relocate instead of hiding */
display: none; display: none;