ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-30 22:31:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improved patches page ui

Browse Source
This commit is contained in:
afn
2022-12-25 16:56:38 -05:00
parent c26c2a5783
commit 6f6f30e3bb
15 changed files with 314 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/lib/components/Search.svelte
View File

@@ -11,7 +11,7 @@
}
</script>
<div>
<div class="search-container">
<img src="../icons/search.svg" id="search" alt="Search" />
{#if searchTerm}
<img
@@ -37,50 +37,51 @@
/* umm dont ask */
position: absolute;
z-index: 1;
left: 23px;
top: 52px;
left: 16px;
top: 14px;
height: 24px;
}
#clear {
position: absolute;
right: 42px;
top: 52px;
right: 16px;
top: 14px;
z-index: 1;
height: 24px;
cursor: pointer;
}
.clear {
padding-right: 2.5rem;
.search-container {
position: relative;
}
input {
position: relative;
display: flex;
padding: 1rem 3rem;
padding: 1rem 3.25rem;
width: 100%;
color: var(--accent-color-two);
font-weight: 500;
font-size: 0.92rem;
border-radius: 100px;
border: none;
background-color: var(--grey-ten);
}
input::placeholder {
color: var(--grey-eight);
font-size: 0.9rem;
color: var(--grey-five);
font-size: 0.92rem;
font-weight: 500;
transition: all 0.2s var(--bezier-one);
}
@media (max-width: 768px) {
#search {
left: 26px;
top: 38px;
}
input:focus {
outline: none;
}
#clear {
right: 26px;
top: 38px;
}
input {
background-color: var(--grey-ten);
border: none;
border-radius: 100px;
}
input:focus::placeholder {
outline: none;
color: var(--accent-color)
}
</style>