TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-31 22:49:52 +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)
var(--black-a11);
--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;
&.light {
packages/website/src/components/Button/index.module.css
+4 -4
View File
@@ -2,7 +2,7 @@
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
gap: var(--space-3);
border-radius: var(--max-size);
padding: var(--space-3) var(--space-4);
@@ -64,8 +64,8 @@
svg,
img {
width: 1em;
height: 1em;
width: 1.25em;
height: 1.25em;
object-fit: contain;
}
@@ -105,7 +105,7 @@
&[data-variant="surface"],
&[data-variant="outline"] {
outline: var(--space-1) solid var(--accent-6);
outline: var(--space-1) solid var(--accent-5);
&[data-high-contrast="true"] {
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%;
}
}
.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 />
<ShellFilter />
<ConsumablesFilter />
<ProvisionsFilter />
<GameModeAbilitiesFilter />
@@ -195,22 +196,19 @@ function TiersFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Flex gap="1">
{tiers.slice(0, MAX_ICONS).map((tier) => (
<Text size="minor" key={tier}>
{romanize(tier)}
</Text>
))}
<Button color="gray" variant="surface">
{tiers
.slice(0, MAX_ICONS)
.map((tier) => romanize(tier))
.join(" ")}
{tiers.length > MAX_ICONS && (
<Text size="minor">
{literals(strings.common.units.plus, {
value: tiers.length - MAX_ICONS,
})}
</Text>
)}
</Flex>
{tiers.length > MAX_ICONS && (
<span className={styles.plus}>
{literals(strings.common.units.plus, {
value: tiers.length - MAX_ICONS,
})}
</span>
)}
</Button>
</DropdownMenu.Trigger>
@@ -274,17 +272,12 @@ function NationsFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Button color="gray" variant="surface">
<Flex>
{nations.map((nation, index) => (
{nations.map((nation) => (
<img
className={styles.icon}
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`)}
/>
))}
@@ -362,21 +355,14 @@ function ClassFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Button color="gray" variant="surface">
<Flex>
{classes.map((tankClass, index) => {
return (
<ClassIcon
key={tankClass}
class={tankClass}
style={{
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",
}}
className={styles.icon}
/>
);
})}
@@ -449,7 +435,7 @@ function GunTypeFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Button color="gray" variant="surface">
<Flex>
{gunTypes.map((gunType) => {
return (
@@ -528,7 +514,7 @@ function TypeFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Button color="gray" variant="surface">
<Flex gap="1">
{types.map((tankType) => {
return (
@@ -537,11 +523,8 @@ function TypeFilter() {
color: `var(--${TANK_TYPE_COLORS[tankType]}-${
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}
/>
);
@@ -634,7 +617,7 @@ function IndividualShellFilter({
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<IconButton listChild size="minor" variant="surface" color="gray">
<IconButton listChild variant="surface" color="gray">
{shells[index] === null && (
<Text lowContrast className={styles["shell-icon"]}>
<MissingShellIcon width="1em" height="1em" />
@@ -844,28 +827,22 @@ function ConsumablesFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Button color="gray" variant="surface">
<Flex>
{consumables.slice(0, MAX_ICONS).map((consumable, index) => (
<img
key={consumable}
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",
}}
className={styles.icon}
src={alias("api", `/icons/consumables/${consumable}.webp`)}
/>
))}
{consumables.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}>
<span className={styles.plus}>
{literals(strings.common.units.plus, {
value: consumables.length - MAX_ICONS,
})}
</Text>
</span>
)}
</Flex>
</Button>
@@ -939,28 +916,22 @@ function ProvisionsFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Button color="gray" variant="surface">
<Flex>
{provisions.slice(0, MAX_ICONS).map((provision, index) => (
<img
key={provision}
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",
}}
className={styles.icon}
src={alias("api", `/icons/provisions/${provision}.webp`)}
/>
))}
{provisions.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}>
<span className={styles.plus}>
{literals(strings.common.units.plus, {
value: provisions.length - MAX_ICONS,
})}
</Text>
</span>
)}
</Flex>
</Button>
@@ -1049,28 +1020,18 @@ function GameModeAbilitiesFilter() {
return (
<DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger asChild>
<Button size="minor" color="gray" variant="surface">
<Button color="gray" variant="surface">
<Flex>
{icons.slice(0, MAX_ICONS).map((icon, index) => (
<img
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}
/>
<img key={icon} className={styles.icon} src={icon} />
))}
{icons.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}>
<span className={styles.plus}>
{literals(strings.common.units.plus, {
value: icons.length - MAX_ICONS,
})}
</Text>
</span>
)}
</Flex>
</Button>
packages/website/src/components/Text/index.module.css
+3 -2
View File
@@ -1,6 +1,7 @@
.text {
font-size: var(--font-size-regular);
&[data-size="regular"] {
font-size: var(--font-size-regular);
}
&[data-size="minor"] {
font-size: var(--font-size-minor);
}