lucidergs/dragon_fire
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat(search): ✨ add inline search field

Browse source
This commit is contained in:
David Bailey 2025-02-03 10:47:32 +01:00
parent de1f1446a3
commit 05996b2ebf
10 changed files with 231 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

106
www/static/styles/post_navbar.css
View file

@ -30,12 +30,112 @@
}
}
& > ._path {
& ._search_field {
position: relative;
width: 1.3em;
height: auto;
margin-right: 0.2em;
overflow-x: clip;
/*transition: width 0.5s ease;*/
& > input {
color: var(--text_1);
height: 1em;
width: 100%;
font-size: 1em;
background-color: transparent;
outline: none;
border: none;
padding-left: 1.3rem;
}
& .fa-icn {
position: absolute;
left: 0.1em;
top: 0.3em;
pointer-events: none;
}
&:focus-within, &:hover, &:has(:focus) {
width: min(20em, 60vw);
min-width: min(20em, 60vw);
& ._search_list {
display: block;
opacity: 1;
}
& input {
border-bottom: 0.15em solid var(--bg_2);
}
}
& ._search_list {
display: none;
opacity: 0;
background: var(--bg_2);
transition: opacity 0.3s ease 0.5s;
transition: visibility 0s none 1s;
width: 100%
max-height: 50vh;
overflow-y: scroll;
padding: 0.5em;
z-index: 6;
& li {
border-bottom: 1px solid var(--highlight_1);
&:hover {
background: var(--highlight_1a);
}
}
}
}
& ._path {
width: 100%;
height: 1.5rem;
padding-left: 0.5rem;
padding-right: 0.6rem;
background: var(--highlight_1);
font-size: 1.1rem;
display: flex;
flex-direction: row;
list-style-type: none;
white-space: nowrap;
& > a {
color: var(--text_1);
padding-right: 0.2rem;
}
}
& ._path_list {
width: 100%;
height: 100%;
margin-right: 1em;
font-style: italic;
padding-left: 0.5rem;
background: var(--highlight_1);
@ -49,7 +149,7 @@
overflow-y: hidden;
white-space: nowrap;
& a {
color: var(--text_1);
padding-right: 0.2rem;

2
www/static/styles/toc.css
View file

@ -15,7 +15,7 @@
box-shadow: -0.2em 0.2em 0.2em black;
--toc-fg: #cecece;
--toc-bg: #EE901544;
--toc-bg: var(--highlight_1a);
background-color: var(--bg_2);