Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-24 04:22:10 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Global search styling

Browse Source
This commit is contained in:
hfcRed 2026-03-07 18:02:06 +01:00
parent 5c3284f41c
commit c9b482cbe2
3 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/layout/GlobalSearch.module.css
View File

@ -49,8 +49,9 @@
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 15vh;
backdrop-filter: blur(10px);
padding: var(--layout-main-padding);
padding-top: 15vh;
}
.overlay[data-entering] {
@ -109,6 +110,10 @@
& input::placeholder {
color: var(--color-text-high);
}
&:focus-within {
outline: none;
}
}
.inputIcon {
@ -132,7 +137,7 @@
}
.listBoxItem[data-focused] {
background-color: var(--color-bg-higher);
background-color: var(--color-bg-high);
}
.listBoxItem[data-selected] {
@ -140,7 +145,7 @@
}
.searchTypeContainer {
padding: calc(var(--s-2) + 1px) var(--s-4) var(--s-2);
padding: var(--s-4);
border-bottom: 1px solid var(--color-border);
}
@ -181,7 +186,7 @@
}
.searchTypeRadioHovered {
background-color: var(--color-bg-higher);
background-color: var(--color-bg-high);
}
.searchTypeRadioFocusVisible {

4
app/components/layout/GlobalSearch.tsx
View File

@ -134,7 +134,7 @@ export function GlobalSearch() {
<span className={styles.searchPlaceholder}>{t("common:search")}</span>
<kbd className={styles.searchKbd}>{isMac ? "Cmd+K" : "Ctrl+K"}</kbd>
</button>
<ModalOverlay className={styles.overlay}>
<ModalOverlay className={styles.overlay} isDismissable>
<Modal className={styles.modal}>
<Dialog className={styles.dialog} aria-label={t("common:search")}>
<GlobalSearchContent
@ -319,7 +319,7 @@ function GlobalSearchContent({
) : (
<ListBox
ref={listBoxRef}
className={styles.listBox}
className={clsx(styles.listBox, "scrollbar")}
aria-label={t("common:search")}
selectionMode="single"
onAction={handleSelect}

3
app/components/layout/WeaponSearch.tsx
View File

@ -1,3 +1,4 @@
import { clsx } from "clsx";
import type { TFunction } from "i18next";
import {
Calculator,
@ -215,7 +216,7 @@ export function WeaponResultsList({
return (
<ListBox
ref={listBoxRef}
className={styles.listBox}
className={clsx(styles.listBox, "scrollbar")}
aria-label={t("common:search")}
selectionMode="single"
onAction={onSelect}