implemented sort-by,

implemented divider,
fixed class/id in css
This commit is contained in:
J-Klinke
2024-06-17 15:42:20 +02:00
parent 5a682e1800
commit b721973d05
3 changed files with 93 additions and 17 deletions

View File

@@ -87,7 +87,7 @@ header {
gap: .5em;
}
/* Buttons */
.upvote-btn, .downvote-btn, .search-btn, .filter-btn {
.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn {
background: var(--icon-url) no-repeat;
background-size: contain;
border: none;
@@ -108,19 +108,29 @@ header {
transform: rotate(180deg);
}
.search-btn {
#search-btn {
--icon-url: url(looking-glass.svg);
--icon-size: 1rem;
}
.filter-btn{
#filter-btn {
--icon-url: url(filter.svg);
--icon-size: 1rem;
}
:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) {
#sort-btn {
--icon-url: url(sort.svg);
--icon-size: 1rem;
}
.divider {
width: .05rem;
background-color: #222;
}
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
filter: brightness(1.5);
}
:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active {
:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
filter: brightness(1.75);
}