Weapon params page (#3170)

2026-09-29 06:43:17 -05:00 · 2026-06-17 14:37:44 +03:00
parent 0460488dc3
commit abed7fa8bb
96 changed files with 38471 additions and 369 deletions
--- a/app/features/params/components/WeaponPatchHistory.module.css
+++ b/app/features/params/components/WeaponPatchHistory.module.css
@@ -0,0 +1,176 @@
+.kitHistory {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-3);
+	width: 100%;
+	align-self: stretch;
+}
+
+.controls {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--s-2) var(--s-4);
+}
+
+.kitChip {
+	display: flex;
+	align-items: center;
+	gap: var(--s-1);
+}
+
+.container {
+	display: flex;
+	gap: var(--s-3);
+	width: 100%;
+	overflow-x: auto;
+	padding-bottom: var(--s-2);
+	align-self: stretch;
+}
+
+.divider {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
+
+	&:not(:first-child) {
+		margin-block: var(--s-3);
+	}
+}
+
+.dividerLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--s-1);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+	flex: 0 0 auto;
+	width: 15rem;
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--s-1);
+	padding: var(--s-3) var(--s-2);
+	border: 2px solid var(--color-border-high);
+	border-radius: var(--radius-box);
+	background-color: var(--color-bg-high);
+}
+
+.version {
+	font-size: var(--font-xl);
+	font-weight: var(--weight-extra);
+	line-height: 1;
+}
+
+.date {
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+}
+
+.changes {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1-5);
+}
+
+.change {
+	min-height: 2rem;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--s-1) var(--s-2);
+	padding: var(--s-1) var(--s-2);
+	border: 1px solid var(--color-border);
+	background-color: var(--color-bg-high);
+	border-radius: var(--radius-box);
+	font-size: var(--font-2xs);
+
+	&.wide,
+	&.incoming {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	&.buff {
+		border-color: var(--color-success);
+		background-color: var(--color-success-low);
+	}
+
+	&.nerf {
+		border-color: var(--color-error);
+		background-color: var(--color-error-low);
+	}
+}
+
+.changeName {
+	display: flex;
+	flex: 1;
+	min-width: 0;
+	align-items: center;
+	gap: var(--s-1);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	.change.wide & {
+		white-space: normal;
+	}
+}
+
+.changeIcon {
+	flex-shrink: 0;
+}
+
+.changeValues {
+	display: flex;
+	align-items: center;
+	gap: var(--s-1);
+	flex-shrink: 0;
+	font-weight: var(--weight-semi);
+	font-variant-numeric: tabular-nums;
+
+	.change.wide & {
+		flex-wrap: wrap;
+	}
+}
+
+.attackers {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--s-1) var(--s-2);
+	min-width: 0;
+}
+
+.attackerIcons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--s-1);
+}
+
+.attackerSuffix {
+	font-weight: var(--weight-semi);
+}
+
+.arrow {
+	color: var(--color-text-high);
+}
+
+.empty {
+	color: var(--color-text-high);
+	font-size: var(--font-sm);
+	padding: var(--s-4);
+}