TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-11-01 15:00:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

more consistent

Browse Source
This commit is contained in:
tresabhi committed 2026-10-31 16:35:43 -05:00
1 parent e1d292c954
commit 4ae327b6fc
5 files changed
+54 -79
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/BaseStyles.astro
+1
View File
@@ -76,6 +76,7 @@ import "@fontsource-variable/roboto-flex";
--shadow-aggressive: var(--space-1) var(--space-1) var(--space-4) --shadow-aggressive: var(--space-1) var(--space-1) var(--space-4)
var(--black-a11); var(--black-a11);
--shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5); --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5);
--shadow-icon: 0 0 var(--space-1) var(--black-a11);
--shadow-none: 0 0 0 transparent; --shadow-none: 0 0 0 transparent;
&.light { &.light {
packages/website/src/components/Button/index.module.css
+4 -4
View File
@@ -2,7 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-2); gap: var(--space-3);
border-radius: var(--max-size); border-radius: var(--max-size);
padding: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4);
@@ -64,8 +64,8 @@
svg, svg,
img { img {
width: 1em; width: 1.25em;
height: 1em; height: 1.25em;
object-fit: contain; object-fit: contain;
} }
@@ -105,7 +105,7 @@
&[data-variant="surface"], &[data-variant="surface"],
&[data-variant="outline"] { &[data-variant="outline"] {
outline: var(--space-1) solid var(--accent-6); outline: var(--space-1) solid var(--accent-5);
&[data-high-contrast="true"] { &[data-high-contrast="true"] {
outline: var(--space-1) solid var(--accent-11); outline: var(--space-1) solid var(--accent-11);
packages/website/src/components/TankSearchFilters/index.module.css
+12
View File
@@ -11,3 +11,15 @@
background-position: 0% 50%; background-position: 0% 50%;
} }
} }
.plus {
color: var(--gray-11);
}
.icon {
filter: drop-shadow(var(--shadow-icon));
& + & {
margin-left: -0.5em;
}
}
packages/website/src/components/TankSearchFilters/index.tsx
+34 -73
View File
@@ -164,6 +164,7 @@ export function TankSearchFilters() {
<GunTypeFilter /> <GunTypeFilter />
<ShellFilter /> <ShellFilter />
<ConsumablesFilter /> <ConsumablesFilter />
<ProvisionsFilter /> <ProvisionsFilter />
<GameModeAbilitiesFilter /> <GameModeAbilitiesFilter />
@@ -195,22 +196,19 @@ function TiersFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex gap="1"> {tiers
{tiers.slice(0, MAX_ICONS).map((tier) => ( .slice(0, MAX_ICONS)
<Text size="minor" key={tier}> .map((tier) => romanize(tier))
{romanize(tier)} .join(" ")}
</Text>
))}
{tiers.length > MAX_ICONS && ( {tiers.length > MAX_ICONS && (
<Text size="minor"> <span className={styles.plus}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: tiers.length - MAX_ICONS, value: tiers.length - MAX_ICONS,
})} })}
</Text> </span>
)} )}
</Flex>
</Button> </Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
@@ -274,17 +272,12 @@ function NationsFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex> <Flex>
{nations.map((nation, index) => ( {nations.map((nation) => (
<img <img
className={styles.icon}
key={nation} key={nation}
style={{
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
marginLeft: index > 0 ? "-0.5em" : undefined,
width: "1.25em",
height: "1.25em",
}}
src={alias("api", `/flags/circle/${nation}.webp`)} src={alias("api", `/flags/circle/${nation}.webp`)}
/> />
))} ))}
@@ -362,21 +355,14 @@ function ClassFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex> <Flex>
{classes.map((tankClass, index) => { {classes.map((tankClass, index) => {
return ( return (
<ClassIcon <ClassIcon
key={tankClass} key={tankClass}
class={tankClass} class={tankClass}
style={{ className={styles.icon}
color: "var(--gray-12)",
opacity: 1,
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
marginLeft: index > 0 ? "-0.5em" : undefined,
width: "1.25em",
height: "1.25em",
}}
/> />
); );
})} })}
@@ -449,7 +435,7 @@ function GunTypeFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex> <Flex>
{gunTypes.map((gunType) => { {gunTypes.map((gunType) => {
return ( return (
@@ -528,7 +514,7 @@ function TypeFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex gap="1"> <Flex gap="1">
{types.map((tankType) => { {types.map((tankType) => {
return ( return (
@@ -537,11 +523,8 @@ function TypeFilter() {
color: `var(--${TANK_TYPE_COLORS[tankType]}-${ color: `var(--${TANK_TYPE_COLORS[tankType]}-${
tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11" tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
})`, })`,
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
opacity: 1,
width: "1.25em",
height: "1.25em",
}} }}
className={styles.icon}
key={tankType} key={tankType}
/> />
); );
@@ -634,7 +617,7 @@ function IndividualShellFilter({
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<IconButton listChild size="minor" variant="surface" color="gray"> <IconButton listChild variant="surface" color="gray">
{shells[index] === null && ( {shells[index] === null && (
<Text lowContrast className={styles["shell-icon"]}> <Text lowContrast className={styles["shell-icon"]}>
<MissingShellIcon width="1em" height="1em" /> <MissingShellIcon width="1em" height="1em" />
@@ -844,28 +827,22 @@ function ConsumablesFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex> <Flex>
{consumables.slice(0, MAX_ICONS).map((consumable, index) => ( {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
<img <img
key={consumable} key={consumable}
style={{ className={styles.icon}
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
marginLeft: index > 0 ? "-0.5em" : undefined,
width: "1.25em",
height: "1.25em",
objectFit: "contain",
}}
src={alias("api", `/icons/consumables/${consumable}.webp`)} src={alias("api", `/icons/consumables/${consumable}.webp`)}
/> />
))} ))}
{consumables.length > MAX_ICONS && ( {consumables.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <span className={styles.plus}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: consumables.length - MAX_ICONS, value: consumables.length - MAX_ICONS,
})} })}
</Text> </span>
)} )}
</Flex> </Flex>
</Button> </Button>
@@ -939,28 +916,22 @@ function ProvisionsFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex> <Flex>
{provisions.slice(0, MAX_ICONS).map((provision, index) => ( {provisions.slice(0, MAX_ICONS).map((provision, index) => (
<img <img
key={provision} key={provision}
style={{ className={styles.icon}
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
marginLeft: index > 0 ? "-0.5em" : undefined,
width: "1.25em",
height: "1.25em",
objectFit: "contain",
}}
src={alias("api", `/icons/provisions/${provision}.webp`)} src={alias("api", `/icons/provisions/${provision}.webp`)}
/> />
))} ))}
{provisions.length > MAX_ICONS && ( {provisions.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <span className={styles.plus}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: provisions.length - MAX_ICONS, value: provisions.length - MAX_ICONS,
})} })}
</Text> </span>
)} )}
</Flex> </Flex>
</Button> </Button>
@@ -1049,28 +1020,18 @@ function GameModeAbilitiesFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface"> <Button color="gray" variant="surface">
<Flex> <Flex>
{icons.slice(0, MAX_ICONS).map((icon, index) => ( {icons.slice(0, MAX_ICONS).map((icon, index) => (
<img <img key={icon} className={styles.icon} src={icon} />
key={icon}
style={{
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
marginLeft: index > 0 ? "-0.5em" : undefined,
width: "1.25em",
height: "1.25em",
objectFit: "contain",
}}
src={icon}
/>
))} ))}
{icons.length > MAX_ICONS && ( {icons.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <span className={styles.plus}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: icons.length - MAX_ICONS, value: icons.length - MAX_ICONS,
})} })}
</Text> </span>
)} )}
</Flex> </Flex>
</Button> </Button>
packages/website/src/components/Text/index.module.css
+3 -2
View File
@@ -1,6 +1,7 @@
.text { .text {
font-size: var(--font-size-regular); &[data-size="regular"] {
font-size: var(--font-size-regular);
}
&[data-size="minor"] { &[data-size="minor"] {
font-size: var(--font-size-minor); font-size: var(--font-size-minor);
} }