PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2025-03-17 00:50:03 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add new styles for the suggestions popup to CSS

Browse source
This commit is contained in:
MareStare 2025-03-04 04:39:20 +00:00
parent b9440e79cf
commit b119660a54
1 changed files with 77 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
assets/css/views/tags.css
View file

@ -24,27 +24,97 @@
}
/* Autocomplete */
.autocomplete__list {
.autocomplete {
cursor: pointer;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
user-select: none;
white-space: nowrap;
z-index: 999;
font-family: var(--font-family-monospace);
background: var(--background-color);
/* Borders */
border-style: solid;
border-width: 1px;
border-top-width: 0;
border-color: var(--meta-border-color);
/* Poor man's hack to make sure autocomplete doesn't grow beyond the viewport */
max-width: 70vw;
}
.autocomplete__separator {
margin: 0;
}
.autocomplete__item {
background: var(--base-color);
color: var(--link-light-color);
padding: 5px;
}
.autocomplete__item--selected {
background: var(--link-light-color);
color: var(--base-color);
.autocomplete__item__content {
/* Squash overly long suggestions */
text-overflow: ellipsis;
overflow: hidden;
}
.autocomplete__item__tag {
color: var(--foreground-color);
display: flex;
justify-content: space-between;
white-space: pre;
}
.autocomplete__item__history {
color: var(--block-header-link-text-color);
}
.autocomplete__item__history__icon {
/*
Makes the history icon aligned in width with the autocomplete__item__tag's icon.
Yes, it's a dirty hack, don't look at me like that >_<, but turns out font-awesome
icons aren't actually all of the same size!
*/
font-size: 11.38px;
}
.autocomplete__item__history__match {
font-weight: bold;
/* Use a lighter color to highlight the matched part of the query */
color: lch(from var(--block-header-link-text-color) calc(l + 20) c h);
}
.autocomplete__item__tag__match {
font-weight: bold;
}
.autocomplete__item__tag__match:not(.autocomplete__item--selected) {
/* Use a lighter color to highlight the matched part of the query */
color: lch(from var(--foreground-color) calc(l + 20) c h);
}
.autocomplete__item__tag__count {
color: var(--foreground-half-color);
/*
Reduce the space size between groups of 3 digits in big numbers like "1 000 000".
This way the number is more compact and easier to read.
*/
word-spacing: -3px;
}
.autocomplete__item:hover:not(.autocomplete__item--selected) {
background: lch(from var(--background-color) calc(l + 10) c h);
}
.autocomplete__item--selected,
.autocomplete__item--selected .autocomplete__item__history__match,
.autocomplete__item--selected .autocomplete__item__tag__match {
background: var(--foreground-color);
color: var(--background-color);
}
/* Tags */