Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 21:00:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add search clear functionality and improve search input styling

Browse Source
This commit is contained in:
shuaiplus
2026-03-28 01:58:47 +08:00
parent 783fcbbe4b
commit bd8e26d2ab
4 changed files with 91 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/styles.css
+59 -9
View File
@@ -1021,12 +1021,15 @@ input[type='file'].input::file-selector-button:hover {
.search-input {
width: 100%;
height: 40px;
border: 1px solid var(--line);
border-radius: 12px;
padding: 0 12px;
height: 48px;
border: 1px solid rgba(74, 103, 150, 0.42);
border-radius: 14px;
padding: 10px 14px;
font-size: 16px;
outline: none;
color: var(--text);
background: var(--panel);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition:
border-color var(--dur-fast) var(--ease-smooth),
box-shadow var(--dur-fast) var(--ease-out-soft),
@@ -1034,13 +1037,52 @@ input[type='file'].input::file-selector-button:hover {
transform var(--dur-fast) var(--ease-out-soft);
}
.search-input-wrap {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.search-input:focus {
border-color: rgba(43, 102, 217, 0.28);
background: #fbfdff;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 8px 18px rgba(37, 99, 235, 0.06);
border-color: rgba(43, 102, 217, 0.6);
background-color: #fbfdff;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11), 0 10px 20px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
transform: translateY(-1px);
}
.search-input-wrap .search-input {
padding-right: 42px;
}
.search-clear-btn {
position: absolute;
top: 50%;
right: 9px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
background: rgba(148, 163, 184, 0.18);
color: var(--muted);
cursor: pointer;
transform: translateY(-50%);
transition: background-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.search-clear-btn:hover {
background: rgba(59, 130, 246, 0.18);
color: var(--brand);
transform: translateY(-50%) scale(1.04);
}
.search-clear-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.tree-btn {
width: 100%;
min-width: 0;
@@ -1151,10 +1193,13 @@ input[type='file'].input::file-selector-button:hover {
margin-bottom: 8px;
}
.list-head .search-input {
.list-head .search-input-wrap {
flex: 1 1 auto;
min-width: 0;
height: 36px;
}
.list-head .search-input {
height: 42px;
}
.list-head .btn {
@@ -3733,6 +3778,11 @@ input[type='file'].input::file-selector-button:hover {
white-space: nowrap;
}
.list-head .search-input-wrap {
width: 100%;
min-width: 0;
}
.list-head .search-input {
width: 100%;
min-width: 0;