diff options
| author |  f0x52 <f0x@cthu.lu> | 2022-11-16 17:05:49 +0100 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2022-11-16 17:05:49 +0100 |
| commit | aa5c4e065c61bf30d7bd97579f6bfeecc71238bd (patch) | |
| tree | df6cb8f07b8d99c3924813c2d75799d33f6b9d77 /web/source/settings/style.css | |
| parent | [chore] reversion: use specific columns for updating user again (#1059) (diff) | |
| download | gotosocial-aa5c4e065c61bf30d7bd97579f6bfeecc71238bd.tar.xz | |
[frogend] Emoji categories (#1051)
* emoji category combobox
* emoji categorizing
* dropdown entry separation
* emoji filtering/sorting
* add some explaining comments
* remove unneeded default-value code
* remove wrongly created package.json
* configurable ComboBox label+placeHolder
Diffstat (limited to 'web/source/settings/style.css')
| -rw-r--r-- | web/source/settings/style.css | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 93e52f680..3af52337a 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -502,4 +502,62 @@ span.form-info { .instance-list .filter { flex-direction: column; } +} + +.combobox-wrapper { + display: flex; + flex-direction: column; + + input[aria-expanded="true"] { + border-bottom: none; + } +} + +.combobox { + height: 2.5rem; + font-size: 1rem; + line-height: 1.5rem; +} + +.popover { + position: relative; + z-index: 50; + display: flex; + max-height: min(var(--popover-available-height,300px),300px); + flex-direction: column; + overflow: auto; + overscroll-behavior: contain; + border: 0.15rem solid $orange2; + background: $bg-accent; +} + +.combobox-item { + display: flex; + cursor: pointer; + scroll-margin: 0.5rem; + align-items: center; + gap: 0.5rem; + padding: 0.5rem; + line-height: 1.5rem; + border-bottom: 0.15rem solid $gray3; + + &:last-child { + border: none; + } + + img { + height: 1.5rem; + width: 1.5rem; + object-fit: contain; + } +} + +.combobox-item:hover { + background: $button-hover-bg; + color: $button-fg; +} + +.combobox-item[data-active-item] { + background: $button-hover-bg; + color: hsl(204 20% 100%); }
\ No newline at end of file |