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

style(next): apply the new style on the quick search box for the horizontal layout also

Browse Source
This commit is contained in:
Adorian Doran 2024-12-01 18:48:01 +02:00
parent ff06582eb6
commit 22db58d410
1 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -426,13 +426,11 @@
--hover-item-background-color: transparent; --hover-item-background-color: transparent;
} }
/* /*
* Left pane * Search Box
*/ */
/* Search Box */ div.quick-search {
#left-pane .quick-search {
--padding-top: 8px; --padding-top: 8px;
--padding-left: 8px; --padding-left: 8px;
--padding-right: 8px; --padding-right: 8px;
@ -446,7 +444,7 @@
padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left); padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
} }
#left-pane .quick-search::before { div.quick-search::before {
/* The background rectangle of the search box */ /* The background rectangle of the search box */
position: absolute; position: absolute;
content: ""; content: "";
@ -461,34 +459,34 @@
transition: background-color 200ms ease-in; transition: background-color 200ms ease-in;
} }
#left-pane .quick-search:hover:before { div.quick-search:hover:before {
/* Hovered search box background rectangle */ /* Hovered search box background rectangle */
background: var(--quick-search-hover-background); background: var(--quick-search-hover-background);
transition: background-color 75ms ease-out; transition: background-color 75ms ease-out;
} }
#left-pane .quick-search:focus-within:before { div.quick-search:focus-within:before {
/* Focused search box background rectangle */ /* Focused search box background rectangle */
border-color: var(--quick-search-focus-border); border-color: var(--quick-search-focus-border);
background: var(--quick-search-focus-background); background: var(--quick-search-focus-background);
transition: background-color 100ms ease-out; transition: background-color 100ms ease-out;
} }
#left-pane .quick-search input { div.quick-search input {
padding-left: 15px; padding-left: 15px !important;
box-shadow: unset; box-shadow: unset !important;
background: transparent; background: transparent !important;
} }
#left-pane .quick-search input::placeholder { div.quick-search input::placeholder {
color: var(--quick-search-color); color: var(--quick-search-color);
} }
#left-pane .quick-search:focus-within input { div.quick-search:focus-within input {
color: var(--quick-search-focus-color) !important; color: var(--quick-search-focus-color) !important;
} }
#left-pane .quick-search .search-button { div.quick-search .search-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -501,27 +499,30 @@
transition: background-color 200ms ease-in !important; transition: background-color 200ms ease-in !important;
} }
#left-pane .quick-search .search-button:active { div.quick-search .search-button:active {
transform: scale(.85); transform: scale(.85);
} }
#left-pane .quick-search:focus-within:has(input:not(:placeholder-shown)) .search-button { div.quick-search:focus-within:has(input:not(:placeholder-shown)) .search-button {
/* Matches when the input has a value and the focus is inside the search box */ /* Matches when the input has a value and the focus is inside the search box */
background: var(--left-pane-item-action-button-background) !important; background: var(--left-pane-item-action-button-background) !important;
color: var(--left-pane-item-action-button-color) !important; color: var(--left-pane-item-action-button-color) !important;
transition: background-color 500ms ease-out !important; transition: background-color 500ms ease-out !important;
} }
html body #left-pane .quick-search:focus-within .search-button:hover, html body .quick-search:focus-within .search-button:hover,
#left-pane .quick-search .search-button.show { div.quick-search .search-button.show {
/* Hover state */ /* Hover state */
background: var(--left-pane-item-action-button-hover-background) !important; background: var(--left-pane-item-action-button-hover-background) !important;
color: var(--left-pane-item-action-button-color) !important; color: var(--left-pane-item-action-button-color) !important;
transition: background-color 100ms ease-out !important; transition: background-color 100ms ease-out !important;
} }
/* Tree */ /*
* Left pane
*/
/* Tree */
#left-pane .tree-actions { #left-pane .tree-actions {
/* TODO: relocate instead of hiding */ /* TODO: relocate instead of hiding */