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

New theming tokens for comp analyzer

Browse Source
This commit is contained in:
Kalle 2026-01-22 21:30:42 +02:00
parent 974dc2f82e
commit 90d89e5c2f
6 changed files with 122 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
app/features/comp-analyzer/components/DamageComboBar.module.css
View File

@ -1,9 +1,9 @@
.container {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--rounded-sm);
background: var(--bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-field);
background: var(--color-bg);
}
.header {
@ -11,19 +11,19 @@
align-items: center;
justify-content: space-between;
padding: var(--s-2) var(--s-3);
background: var(--bg-lighter);
background: var(--color-bg-higher);
border: none;
border-radius: var(--rounded-sm);
border-radius: var(--radius-field);
cursor: pointer;
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
color: var(--text);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
color: var(--color-text);
width: 100%;
text-align: left;
}
.header:hover {
background: var(--bg-lightest);
background: var(--color-bg-high);
}
.headerTitle {
@ -31,9 +31,9 @@
}
.collapseIcon {
font-size: var(--fonts-lg);
font-weight: var(--bold);
color: var(--text-lighter);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-text-high);
width: 20px;
text-align: center;
}
@ -55,8 +55,8 @@
position: relative;
display: flex;
flex: 1;
background-color: var(--bg-lightest);
border-radius: var(--rounded-xs);
background-color: var(--color-bg-high);
border-radius: var(--radius-selector);
overflow: hidden;
}
@ -73,13 +73,13 @@
gap: var(--s-1);
height: 36px;
padding: 0 var(--s-2);
color: var(--black-text);
font-weight: var(--semi-bold);
color: var(--color-text-inverse);
font-weight: var(--weight-semi);
}
.damageTypeLabel {
font-size: var(--fonts-xxxs);
color: var(--text-lighter);
font-size: var(--font-2xs);
color: var(--color-text-high);
text-align: center;
white-space: nowrap;
overflow: hidden;
@ -87,7 +87,7 @@
padding: var(--s-0-5) var(--s-0-5);
background: none;
border: 1px solid transparent;
border-radius: var(--rounded-xs);
border-radius: var(--radius-selector);
cursor: pointer;
}
@ -96,13 +96,13 @@
}
.damageValue {
font-size: var(--fonts-sm);
font-weight: var(--bold);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
}
.hitMultiplier {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
opacity: 0.8;
margin-left: var(--s-0-5);
}
@ -158,36 +158,36 @@
}
.totalDamage {
font-size: var(--fonts-xl);
font-weight: var(--bold);
font-size: var(--font-xl);
font-weight: var(--weight-bold);
}
.hitCount {
font-size: var(--fonts-sm);
color: var(--text-lighter);
font-size: var(--font-sm);
color: var(--color-text-high);
}
.filterControlsRow {
display: flex;
gap: var(--s-2);
padding-block-end: var(--s-2);
border-block-end: 1px solid var(--border);
border-block-end: 1px solid var(--color-border);
margin-block-end: var(--s-1);
}
.filterControlButton {
padding: var(--s-1) var(--s-2);
background: var(--bg-lighter);
border: 1px solid var(--border);
border-radius: var(--rounded-sm);
font-size: var(--fonts-xs);
color: var(--text);
background: var(--color-bg-higher);
border: 1px solid var(--color-border);
border-radius: var(--radius-field);
font-size: var(--font-xs);
color: var(--color-text);
cursor: pointer;
transition: background-color 0.15s ease;
}
.filterControlButton:hover:not(:disabled) {
background: var(--bg-lightest);
background: var(--color-bg-high);
}
.filterControlButton:disabled {
@ -200,7 +200,7 @@
flex-wrap: wrap;
gap: var(--s-2);
padding-bottom: var(--s-2);
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--s-1);
}
@ -209,17 +209,17 @@
align-items: center;
gap: var(--s-1);
padding: var(--s-1) var(--s-2);
background: var(--bg-lighter);
border: 1px solid var(--border);
border-radius: var(--rounded-sm);
font-size: var(--fonts-xs);
color: var(--text-lighter);
background: var(--color-bg-higher);
border: 1px solid var(--color-border);
border-radius: var(--radius-field);
font-size: var(--font-xs);
color: var(--color-text-high);
cursor: pointer;
transition: background-color 0.15s ease;
}
.filteredItem:hover {
background: var(--bg-lightest);
background: var(--color-bg-high);
}
.slidersContainer {
@ -228,7 +228,7 @@
gap: var(--s-2) var(--s-2);
align-items: center;
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--s-1);
}
@ -283,8 +283,8 @@
}
.resSliderLabel {
font-size: var(--fonts-sm);
color: var(--text-lighter);
font-size: var(--font-sm);
color: var(--color-text-high);
white-space: nowrap;
}
@ -294,14 +294,14 @@
}
.resSliderValue {
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.inkTime {
font-size: var(--fonts-sm);
color: var(--theme-secondary);
font-weight: var(--semi-bold);
font-size: var(--font-sm);
color: var(--color-text-second);
font-weight: var(--weight-semi);
}
.inkTimeSegment {
@ -313,27 +313,27 @@
padding: 0 var(--s-2);
background: repeating-linear-gradient(
-45deg,
var(--bg-lighter) 0,
var(--bg-lighter) 4px,
var(--bg-lightest) 4px,
var(--bg-lightest) 8px
var(--color-bg-higher) 0,
var(--color-bg-higher) 4px,
var(--color-bg-high) 4px,
var(--color-bg-high) 8px
);
color: var(--text);
font-weight: var(--semi-bold);
color: var(--color-text);
font-weight: var(--weight-semi);
min-width: fit-content;
}
.inkTimeDamage {
font-size: var(--fonts-sm);
font-weight: var(--bold);
color: var(--text);
font-size: var(--font-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.inkTimeLabel {
font-size: var(--fonts-xxs);
color: var(--theme-secondary);
font-size: var(--font-2xs);
color: var(--color-text-second);
text-align: center;
white-space: nowrap;
padding: var(--s-0-5) var(--s-0-5);
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
}

36
app/features/comp-analyzer/components/RangeVisualization.module.css
View File

@ -1,9 +1,9 @@
.container {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--rounded-sm);
background: var(--bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-field);
background: var(--color-bg);
}
.header {
@ -11,19 +11,19 @@
align-items: center;
justify-content: space-between;
padding: var(--s-2) var(--s-3);
background: var(--bg-lighter);
background: var(--color-bg-higher);
border: none;
border-radius: var(--rounded-sm);
border-radius: var(--radius-field);
cursor: pointer;
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
color: var(--text);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
color: var(--color-text);
width: 100%;
text-align: left;
}
.header:hover {
background: var(--bg-lightest);
background: var(--color-bg-high);
}
.headerTitle {
@ -31,9 +31,9 @@
}
.collapseIcon {
font-size: var(--fonts-lg);
font-weight: var(--bold);
color: var(--text-lighter);
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-text-high);
width: 20px;
text-align: center;
}
@ -47,15 +47,15 @@
gap: var(--s-4);
margin-bottom: var(--s-3);
padding-bottom: var(--s-2);
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--color-border);
}
.legendItem {
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--fonts-xs);
color: var(--text-lighter);
font-size: var(--font-xs);
color: var(--color-text-high);
}
.legendLine {
@ -99,9 +99,9 @@
}
.weaponLegendRange {
font-size: var(--fonts-xs);
color: var(--text-lighter);
font-weight: var(--semi-bold);
font-size: var(--font-xs);
color: var(--color-text-high);
font-weight: var(--weight-semi);
}
.chart {

14
app/features/comp-analyzer/components/RangeVisualization.tsx
View File

@ -220,7 +220,7 @@ function TrajectoryChart({
y1={0}
x2={xScale(tick)}
y2={innerHeight}
stroke="var(--border)"
stroke="var(--color-border)"
strokeWidth={0.5}
/>
))}
@ -231,7 +231,7 @@ function TrajectoryChart({
y1={yScale(tick)}
x2={innerWidth}
y2={yScale(tick)}
stroke="var(--border)"
stroke="var(--color-border)"
strokeWidth={0.5}
/>
))}
@ -242,7 +242,7 @@ function TrajectoryChart({
y1={groundY}
x2={innerWidth}
y2={groundY}
stroke="var(--text-lighter)"
stroke="var(--color-text-high)"
strokeWidth={1}
/>
@ -308,7 +308,7 @@ function TrajectoryChart({
y={innerHeight + 15}
textAnchor="middle"
fontSize={10}
fill="var(--text-lighter)"
fill="var(--color-text-high)"
>
{tick}
</text>
@ -322,7 +322,7 @@ function TrajectoryChart({
y={yScale(tick) + 3}
textAnchor="end"
fontSize={10}
fill="var(--text-lighter)"
fill="var(--color-text-high)"
>
{tick}
</text>
@ -334,7 +334,7 @@ function TrajectoryChart({
y={innerHeight + 25}
textAnchor="middle"
fontSize={11}
fill="var(--text-lighter)"
fill="var(--color-text-high)"
>
z
</text>
@ -343,7 +343,7 @@ function TrajectoryChart({
y={innerHeight / 2}
textAnchor="middle"
fontSize={11}
fill="var(--text-lighter)"
fill="var(--color-text-high)"
transform={`rotate(-90, -25, ${innerHeight / 2})`}
>
y

34
app/features/comp-analyzer/components/SelectedWeapons.module.css
View File

@ -18,8 +18,8 @@
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--bg-lightest);
border: 2px solid var(--border);
background-color: var(--color-bg-high);
border: 2px solid var(--color-border);
border-radius: 50%;
flex-shrink: 0;
}
@ -32,8 +32,8 @@
justify-content: center;
width: 56px;
height: 56px;
background-color: var(--bg-lighter);
border: 2px dashed var(--border);
background-color: var(--color-bg-higher);
border: 2px dashed var(--color-border);
border-radius: 50%;
flex-shrink: 0;
opacity: 0.6;
@ -45,16 +45,16 @@
gap: var(--s-2);
padding: var(--s-2) var(--s-3);
padding-left: var(--s-5);
background-color: var(--bg-lightest);
border: 2px solid var(--border);
border-radius: var(--rounded-full);
background-color: var(--color-bg-high);
border: 2px solid var(--color-border);
border-radius: var(--radius-full);
flex: 1;
min-width: 0;
}
.weaponName {
flex: 1;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -65,9 +65,9 @@
align-items: center;
padding: var(--s-2) var(--s-3);
padding-left: var(--s-5);
background-color: var(--bg-lighter);
border: 2px dashed var(--border);
border-radius: var(--rounded-full);
background-color: var(--color-bg-higher);
border: 2px dashed var(--color-border);
border-radius: var(--radius-full);
flex: 1;
min-width: 0;
opacity: 0.6;
@ -75,9 +75,9 @@
.weaponNameEmpty {
flex: 1;
font-weight: var(--semi-bold);
font-weight: var(--weight-semi);
font-style: italic;
color: var(--text-lighter);
color: var(--color-text-high);
}
.removeButton {
@ -92,12 +92,12 @@
font-size: 18px;
font-weight: bold;
line-height: 1;
color: var(--text-lighter);
color: var(--color-text-high);
flex-shrink: 0;
}
.removeButton:hover {
color: var(--theme-error);
color: var(--color-error);
}
.subSpecialContainer {
@ -116,7 +116,7 @@
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--bg-lightest);
border: 2px solid var(--border);
background-color: var(--color-bg-high);
border: 2px solid var(--color-border);
border-radius: 50%;
}

18
app/features/comp-analyzer/components/WeaponCategories.module.css
View File

@ -14,17 +14,17 @@
}
.categoryLabel {
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
color: var(--text-lighter);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
color: var(--color-text-high);
}
.categoryPill {
display: flex;
align-items: center;
background-color: var(--bg-lightest);
border: 2px solid var(--border);
border-radius: var(--rounded-full);
background-color: var(--color-bg-high);
border: 2px solid var(--color-border);
border-radius: var(--radius-full);
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
@ -37,7 +37,7 @@
align-items: center;
gap: var(--s-1);
padding: var(--s-1) var(--s-4);
border-left: 1.5px solid var(--border);
border-left: 1.5px solid var(--color-border);
flex-shrink: 0;
}
@ -46,7 +46,7 @@
}
.categoryName {
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
white-space: nowrap;
}

20
app/features/comp-analyzer/components/WeaponGrid.module.css
View File

@ -11,8 +11,8 @@
background-color: transparent;
border: none;
cursor: pointer;
font-weight: var(--semi-bold);
color: var(--text);
font-weight: var(--weight-semi);
color: var(--color-text);
}
.collapseArrow {
@ -58,12 +58,12 @@
align-items: center;
gap: var(--s-2);
padding-bottom: var(--s-1);
border-bottom: 3px solid var(--border);
border-bottom: 3px solid var(--color-border);
}
.categoryName {
font-weight: var(--semi-bold);
font-size: var(--fonts-sm);
font-weight: var(--weight-semi);
font-size: var(--font-sm);
text-transform: capitalize;
}
@ -78,15 +78,15 @@
align-items: center;
justify-content: center;
padding: var(--s-1);
background-color: var(--bg-lighter);
background-color: var(--color-bg-higher);
border: 2px solid transparent;
border-radius: var(--rounded);
border-radius: var(--radius-box);
cursor: pointer;
transition: border-color 0.1s;
}
.weaponButton:hover {
border-color: var(--theme);
border-color: var(--color-text-accent);
}
.weaponButton:disabled {
@ -99,6 +99,6 @@
}
.weaponButtonSelected {
background-color: var(--bg-lightest);
border: 2px solid var(--border);
background-color: var(--color-bg-high);
border: 2px solid var(--color-border);
}