Files
blitzkit/packages/website-ue/src/components/TankopediaLoadout/index.module.css
T

119 lines
2.1 KiB
CSS

.section {
display: flex;
flex-direction: column;
gap: var(--space-4);
.header {
display: flex;
align-items: center;
gap: var(--space-4);
.upgrade-buttons {
display: flex;
}
}
.equipment {
display: flex;
flex-direction: column;
gap: var(--space-3);
.row {
display: flex;
gap: var(--space-3);
.slots {
display: flex;
flex-direction: column;
gap: var(--space-2);
align-items: center;
.options {
display: flex;
.slot {
aspect-ratio: 1 / 1;
padding: var(--space-3);
font-size: var(--space-5);
&[data-selected="true"] {
z-index: 1;
}
}
}
}
}
}
.lines {
display: flex;
flex-direction: column;
gap: var(--space-3);
.line {
display: flex;
gap: var(--space-3);
.chunks-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-3);
.line-wrap {
display: flex;
align-items: center;
gap: var(--space-3);
.wrap-marker {
padding-bottom: var(--font-size-minor);
svg {
width: 1em;
height: 1em;
}
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
.stage {
position: relative;
padding: var(--space-3);
font-size: 2em;
.icon {
width: 1em;
height: 1em;
transform: translate(var(--space-1), var(--space-1));
}
.tier {
position: absolute;
left: var(--space-2);
top: var(--space-2);
}
.price {
position: absolute;
left: 50%;
bottom: var(--space-2);
transform: translateX(-50%);
}
}
}
}
}
}
}
}