mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 02:37:05 +02:00
nest styles
This commit is contained in:
tresabhi committed
1 parent
df53f687f7
commit
a649995cdc
2 files changed
+216
-216
No files matched your search
@@ -6,219 +6,219 @@
|
||||
touch-action: none;
|
||||
border-radius: inherit;
|
||||
background-color: var(--gray-2);
|
||||
|
||||
.armor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, var(--gray-a4));
|
||||
|
||||
.texture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.125;
|
||||
background-image: url("/media/toys/armor-hash.png");
|
||||
}
|
||||
}
|
||||
|
||||
.zones {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 33%;
|
||||
width: 67%;
|
||||
height: 100%;
|
||||
background: conic-gradient(
|
||||
at 0 50%,
|
||||
var(--ruby-a2),
|
||||
var(--ruby-a1) calc(90deg - var(--ricochet-angle)),
|
||||
var(--jade-a2) calc(90deg - var(--ricochet-angle)),
|
||||
var(--jade-a4) calc(90deg - var(--normalization-angle)),
|
||||
var(--cyan-a5) calc(90deg - var(--normalization-angle)),
|
||||
var(--cyan-a3) calc(90deg + var(--normalization-angle)),
|
||||
var(--jade-a2) calc(90deg + var(--normalization-angle)),
|
||||
var(--jade-a4) calc(90deg + var(--ricochet-angle)),
|
||||
var(--ruby-a1) calc(90deg + var(--ricochet-angle)),
|
||||
var(--ruby-a2) 180deg
|
||||
);
|
||||
}
|
||||
|
||||
.shell-path,
|
||||
.effective-path {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 33%;
|
||||
transform: translateX(-50%) rotate(var(--rotation-angle));
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.shell-path {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
||||
.extension {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 100%;
|
||||
width: var(--space-0);
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--gray-a8);
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: var(--space-2);
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(var(--gray-a11), var(--gray-a4));
|
||||
}
|
||||
|
||||
.shell {
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
left: 0;
|
||||
width: var(--space-5);
|
||||
height: var(--space-5);
|
||||
object-fit: contain;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
filter: drop-shadow(0 0 var(--space-4) black);
|
||||
}
|
||||
}
|
||||
|
||||
.effective-path {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -100%;
|
||||
width: var(--space-2);
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(var(--gray-a4), var(--gray-a11));
|
||||
}
|
||||
}
|
||||
|
||||
.corner-stat {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
color: var(--gray-11);
|
||||
font-size: var(--font-size-minor);
|
||||
|
||||
.value {
|
||||
color: var(--gray-12);
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&[data-position="top-left"] {
|
||||
top: var(--space-3);
|
||||
left: var(--space-3);
|
||||
}
|
||||
|
||||
&[data-position="top-right"] {
|
||||
top: var(--space-3);
|
||||
right: var(--space-3);
|
||||
}
|
||||
|
||||
&[data-position="bottom-left"] {
|
||||
bottom: var(--space-3);
|
||||
left: var(--space-3);
|
||||
}
|
||||
|
||||
&[data-position="bottom-right"] {
|
||||
right: var(--space-3);
|
||||
bottom: var(--space-3);
|
||||
}
|
||||
}
|
||||
|
||||
.explosive-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-3);
|
||||
color: var(--gray-11);
|
||||
text-align: center;
|
||||
background: radial-gradient(var(--black-a7), var(--black-a11));
|
||||
}
|
||||
}
|
||||
|
||||
.armor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, var(--gray-a4));
|
||||
}
|
||||
|
||||
.armor-texture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.125;
|
||||
background-image: url("/media/toys/armor-hash.png");
|
||||
}
|
||||
|
||||
.zones {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 33%;
|
||||
width: 67%;
|
||||
height: 100%;
|
||||
background: conic-gradient(
|
||||
at 0 50%,
|
||||
var(--ruby-a2),
|
||||
var(--ruby-a1) calc(90deg - var(--ricochet-angle)),
|
||||
var(--jade-a2) calc(90deg - var(--ricochet-angle)),
|
||||
var(--jade-a4) calc(90deg - var(--normalization-angle)),
|
||||
var(--cyan-a5) calc(90deg - var(--normalization-angle)),
|
||||
var(--cyan-a3) calc(90deg + var(--normalization-angle)),
|
||||
var(--jade-a2) calc(90deg + var(--normalization-angle)),
|
||||
var(--jade-a4) calc(90deg + var(--ricochet-angle)),
|
||||
var(--ruby-a1) calc(90deg + var(--ricochet-angle)),
|
||||
var(--ruby-a2) 180deg
|
||||
);
|
||||
}
|
||||
|
||||
.shell-path,
|
||||
.effective-path {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 33%;
|
||||
transform: translateX(-50%) rotate(var(--rotation-angle));
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.shell-path {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shell-path-extension {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 100%;
|
||||
width: var(--space-0);
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--gray-a8);
|
||||
}
|
||||
|
||||
.shell-path-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: var(--space-2);
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(var(--gray-a11), var(--gray-a4));
|
||||
}
|
||||
|
||||
.shell {
|
||||
position: absolute;
|
||||
top: 6rem;
|
||||
left: 0;
|
||||
width: var(--space-5);
|
||||
height: var(--space-5);
|
||||
object-fit: contain;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
filter: drop-shadow(0 0 var(--space-4) black);
|
||||
}
|
||||
|
||||
.effective-path {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.effective-path-line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -100%;
|
||||
width: var(--space-2);
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(var(--gray-a4), var(--gray-a11));
|
||||
}
|
||||
|
||||
.corner-stat {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
color: var(--gray-11);
|
||||
font-size: var(--font-size-minor);
|
||||
}
|
||||
|
||||
.corner-stat-value {
|
||||
color: var(--gray-12);
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.corner-stat[data-position="top-left"] {
|
||||
top: var(--space-3);
|
||||
left: var(--space-3);
|
||||
}
|
||||
|
||||
.corner-stat[data-position="top-right"] {
|
||||
top: var(--space-3);
|
||||
right: var(--space-3);
|
||||
}
|
||||
|
||||
.corner-stat[data-position="bottom-left"] {
|
||||
bottom: var(--space-3);
|
||||
left: var(--space-3);
|
||||
}
|
||||
|
||||
.corner-stat[data-position="bottom-right"] {
|
||||
right: var(--space-3);
|
||||
bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.explosive-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-3);
|
||||
color: var(--gray-11);
|
||||
text-align: center;
|
||||
background: radial-gradient(var(--black-a7), var(--black-a11));
|
||||
}
|
||||
|
||||
.traverse-visualizer {
|
||||
.traverse {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.traverse-hull {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
transform: translate(-50%, -50%);
|
||||
.hull {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&[data-turretless="true"] {
|
||||
width: 22rem;
|
||||
height: 22rem;
|
||||
&[data-turretless="true"] {
|
||||
width: 22rem;
|
||||
height: 22rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
|
||||
}
|
||||
|
||||
.turret {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 27rem;
|
||||
height: 27rem;
|
||||
object-fit: contain;
|
||||
transform: translate(-50%, -50%);
|
||||
filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
|
||||
}
|
||||
}
|
||||
|
||||
.toggles {
|
||||
position: absolute;
|
||||
top: var(--space-4);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--space-5);
|
||||
width: 100%;
|
||||
padding: 0 var(--space-5);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.terrain {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.effective {
|
||||
position: absolute;
|
||||
bottom: calc(var(--space-2) + 3rem);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--gray-11);
|
||||
font-size: var(--font-size-minor);
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.traverse-hull-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
|
||||
}
|
||||
|
||||
.traverse-turret {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 27rem;
|
||||
height: 27rem;
|
||||
object-fit: contain;
|
||||
transform: translate(-50%, -50%);
|
||||
filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
|
||||
}
|
||||
|
||||
.traverse-toggles {
|
||||
position: absolute;
|
||||
top: var(--space-4);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--space-5);
|
||||
width: 100%;
|
||||
padding: 0 var(--space-5);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.traverse-terrain {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.traverse-effective {
|
||||
position: absolute;
|
||||
bottom: calc(var(--space-2) + 3rem);
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--gray-11);
|
||||
font-size: var(--font-size-minor);
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@@ -57,7 +57,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
|
||||
onPointerMove={updateAngle}
|
||||
>
|
||||
<div className={styles.armor}>
|
||||
<div className={styles["armor-texture"]} />
|
||||
<div className={styles.texture} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -78,8 +78,8 @@ export function RicochetToy({ characteristics }: ToyProps) {
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<div className={styles["shell-path-extension"]} />
|
||||
<div className={styles["shell-path-line"]} />
|
||||
<div className={styles.extension} />
|
||||
<div className={styles.line} />
|
||||
<img
|
||||
className={styles.shell}
|
||||
src={alias("api", `/icons/shells/${shell.icon}.webp`)}
|
||||
@@ -94,7 +94,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<div className={styles["effective-path-line"]} />
|
||||
<div className={styles.line} />
|
||||
</div>
|
||||
|
||||
<CornerStat
|
||||
@@ -166,7 +166,7 @@ function CornerStat({ label, value, position }: CornerStatProps) {
|
||||
return (
|
||||
<div className={styles["corner-stat"]} data-position={position}>
|
||||
<span>{label}</span>
|
||||
<Code className={styles["corner-stat-value"]} size="minor">
|
||||
<Code className={styles.value} size="minor">
|
||||
{value}
|
||||
</Code>
|
||||
</div>
|
||||
@@ -246,15 +246,15 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className={styles["traverse-visualizer"]}>
|
||||
<div className={styles.traverse}>
|
||||
<div
|
||||
ref={hull}
|
||||
className={styles["traverse-hull"]}
|
||||
className={styles.hull}
|
||||
data-turretless={isTurretless}
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
className={styles["traverse-hull-image"]}
|
||||
className={styles.image}
|
||||
src={`/media/toys/hull${isTurretless ? "-only" : ""}.png`}
|
||||
/>
|
||||
|
||||
@@ -262,13 +262,13 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
|
||||
<img
|
||||
draggable="false"
|
||||
ref={turret}
|
||||
className={styles["traverse-turret"]}
|
||||
className={styles.turret}
|
||||
src="/media/toys/turret.png"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles["traverse-toggles"]}>
|
||||
<div className={styles.toggles}>
|
||||
{!isTurretless && (
|
||||
<>
|
||||
<Checkbox checked={rotateHull} onCheckedChange={setRotateHull}>
|
||||
@@ -281,7 +281,7 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles["traverse-terrain"]}>
|
||||
<div className={styles.terrain}>
|
||||
<SegmentedControl
|
||||
options={terrainOptions}
|
||||
value={terrain}
|
||||
@@ -293,7 +293,7 @@ export function TraverseToy({ characteristics }: TraverseToyProps) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles["traverse-effective"]}>
|
||||
<div className={styles.effective}>
|
||||
<span>{strings.tanks.toys.traverse.effective}</span>
|
||||
<Code size="minor">
|
||||
{literals(strings.units.deg_s, {
|
||||
|
||||
Reference in new issue
Block a user