mirrors/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-04-04 13:37:40 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make search bar design responsive on small screens

Browse source
This commit is contained in:
syeopite 2024-07-06 14:16:25 -07:00
parent 4019df3f7d
commit da56401898
No known key found for this signature in database
GPG key ID: A73C186DA3955A1A
1 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

35
static/style.css
View file

@ -711,6 +711,41 @@ button.submit:hover > svg { stroke: var(--accent); }
box-shadow: none;
}
/* When screen size is smaller than 480px we switch to a design better suited for mobile devices */
@media screen and (max-width: 480px) {
#search_sort {
align-items: unset;
}
#search {
flex: 1;
min-width: unset;
border-right: 0;
border-bottom: 2px var(--background) solid;
}
#search:focus {
outline: 0;
}
#search_sort > .search_widget_divider_box {
flex-wrap: wrap;
}
.search_widget_divider_box > * {
width: 100%;
}
.search_widget_divider_box > select:last-child {
border-right: 0;
}
#sort_submit {
height: unset;
border-left: 2px var(--background) solid;
}
}
#sort_options, #listing_options, main > * > footer > a {
border-radius: 5px;
align-items: center;