implemented sort-by,
implemented divider, fixed class/id in css
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user