sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 06:30:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add tag filter and dropdown styles: implement tag filtering UI with improved dropdown design and hover effects.

Browse Source
This commit is contained in:
sHa
2025-05-01 14:35:00 +03:00
parent 9d031dc874
commit 003b45d5b4
1 changed files with 97 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
public/global.css
View File

@@ -581,38 +581,105 @@ footer {
} }
} }
.dropdown-menu {
position: absolute; .tag-filter {
top: 110%;
right: 0;
min-width: 160px;
background: var(--color-card, #fff);
color: var(--color-text, #222);
border: 1px solid var(--color-border, #ddd);
border-radius: 8px;
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
z-index: 9999;
padding: 0.3em 0;
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
gap: 0.1em; gap: 0.3rem;
pointer-events: auto; align-items: center;
margin-left: 1rem;
position: relative;
} }
.dropdown-item {
background: none; .tag-filter .selected-tag {
color: inherit;
border: none;
text-align: left;
padding: 0.6em 1em;
font-size: 0.98em;
cursor: pointer;
transition: background 0.2s, color 0.2s;
border-radius: 4px;
pointer-events: auto;
}
.dropdown-item:focus,
.dropdown-item:hover {
background: var(--color-accent, #4f8cff); background: var(--color-accent, #4f8cff);
color: #fff; color: #fff;
outline: none; border: none;
border-radius: 12px;
padding: 0.2em 0.8em 0.2em 0.8em;
font-size: 0.85em;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3em;
opacity: 1;
transition: background 0.2s, color 0.2s;
}
.tag-filter .selected-tag .close {
margin-left: 0.4em;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.tag-filter .selected-tag .close:hover {
opacity: 1;
}
.tag-dropdown {
position: relative;
display: inline-block;
}
.tag-dropdown .dropdown-toggle {
background: var(--color-card);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 0.2em 0.8em;
font-size: 0.85em;
font-weight: 500;
cursor: pointer;
margin-left: 0.2em;
transition: background 0.2s, color 0.2s;
}
.tag-dropdown .dropdown-list {
position: absolute;
left: 0;
top: 110%;
min-width: 120px;
background: var(--color-card);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
z-index: 10;
padding: 0.4em 0.2em;
display: flex;
flex-direction: column;
gap: 0.2em;
}
.tag-dropdown .dropdown-tag {
background: var(--color-accent, #4f8cff);
color: #fff;
border: none;
border-radius: 12px;
padding: 0.2em 0.8em;
font-size: 0.85em;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
opacity: 0.85;
margin: 0.1em 0;
text-align: left;
transition: background 0.2s, color 0.2s;
}
.tag-dropdown .dropdown-tag:hover {
opacity: 1;
background: var(--color-accent, #4f8cff);
}
.tag-dropdown .no-tags {
color: #888;
font-size: 0.85em;
padding: 0.3em 0.8em;
text-align: center;
} }