Fix a bunch of bugs.
This commit is contained in:
Greyson Parrelli
+110
-36
@@ -468,6 +468,28 @@ h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* A chip that's actually a button (e.g. peek at the opponent's deck). */
|
||||
.chip-btn {
|
||||
font-family: var(--font-body);
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: inherit;
|
||||
border-radius: 999px;
|
||||
padding: 1px 8px;
|
||||
transition: background 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
.chip-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.chip-btn.is-active {
|
||||
background: var(--gold);
|
||||
color: var(--cocoa);
|
||||
border-color: var(--gold);
|
||||
}
|
||||
|
||||
.conn-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@@ -961,10 +983,26 @@ h3 {
|
||||
.card-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* The power badge now floats over the top-left corner, so tier + suit sit
|
||||
together at the top-right. */
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.72rem;
|
||||
z-index: 1;
|
||||
min-height: 14px;
|
||||
}
|
||||
|
||||
/* Combat stats (power badge + battle damage marker) pinned to the top-left
|
||||
corner. Absolute so they don't push the name and ability text down. */
|
||||
.card-combat {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-tier {
|
||||
@@ -1017,6 +1055,11 @@ h3 {
|
||||
flex: 0 0 auto;
|
||||
z-index: 1;
|
||||
color: var(--cocoa);
|
||||
/* Always center the name — including when a long name wraps to two lines, so
|
||||
the second line stays centered instead of drifting off to one side. */
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.card-lg .card-name {
|
||||
@@ -1060,14 +1103,6 @@ h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Suit markers as glossy enamel dots. */
|
||||
.suit-dot {
|
||||
display: inline-block;
|
||||
@@ -1094,36 +1129,43 @@ h3 {
|
||||
background: radial-gradient(circle at 35% 28%, #ffdd6b, #e6ac1f);
|
||||
}
|
||||
|
||||
/* The power badge is a stamped honey coin with a raised rim. */
|
||||
/* The power badge is a fiery starburst — like a little explosion — carrying the
|
||||
pet's attack. The spikes are cut with clip-path, so the drop shadow lives on
|
||||
`filter` (a box-shadow would be clipped away with the corners). */
|
||||
.card-power {
|
||||
font-family: var(--font-display);
|
||||
background: radial-gradient(circle at 35% 28%, #ffcf6b, var(--coral-dark));
|
||||
background: radial-gradient(circle at 38% 30%, #ffcf6b 4%, var(--coral) 42%, var(--coral-dark));
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 2px rgba(120, 45, 5, 0.55);
|
||||
border-radius: 50%;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
text-shadow: 0 1px 2px rgba(120, 45, 5, 0.7);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 0.98rem;
|
||||
/* The rim is drawn with an inset ring rather than a real border: a
|
||||
border-radius:50% element with a semi-transparent border renders a
|
||||
visible seam at its 6 o'clock point in Chromium (scale-invariant). */
|
||||
box-shadow:
|
||||
inset 0 0 0 2px rgba(120, 45, 5, 0.35),
|
||||
inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
|
||||
inset 0 -2px 3px rgba(120, 45, 5, 0.4),
|
||||
0 2px 3px rgba(0, 0, 0, 0.3);
|
||||
font-size: 0.9rem;
|
||||
clip-path: polygon(
|
||||
50% 0%, 61% 18%, 82% 12%, 78% 34%, 100% 43%, 83% 58%,
|
||||
93% 79%, 70% 76%, 62% 98%, 50% 82%, 38% 98%, 30% 76%,
|
||||
7% 79%, 17% 58%, 0% 43%, 22% 34%, 18% 12%, 39% 18%
|
||||
);
|
||||
filter: drop-shadow(0 2px 2px rgba(20, 12, 4, 0.5));
|
||||
}
|
||||
|
||||
.card-power.is-buffed {
|
||||
background: radial-gradient(circle at 35% 28%, #9ff0af, #1f9e55);
|
||||
text-shadow: 0 1px 2px rgba(15, 60, 30, 0.55);
|
||||
box-shadow:
|
||||
inset 0 0 0 2px rgba(15, 80, 40, 0.4),
|
||||
inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
|
||||
inset 0 -2px 3px rgba(15, 80, 40, 0.4),
|
||||
0 0 8px rgba(80, 220, 120, 0.5);
|
||||
background: radial-gradient(circle at 38% 30%, #c9ffd4 4%, #4fd07f 42%, #1f9e55);
|
||||
text-shadow: 0 1px 2px rgba(15, 60, 30, 0.7);
|
||||
filter: drop-shadow(0 0 5px rgba(80, 220, 120, 0.75));
|
||||
}
|
||||
|
||||
.card-lg .card-power {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.card-sm .card-power {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.card-damage {
|
||||
@@ -1263,6 +1305,15 @@ h3 {
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
|
||||
animation: coin-pop 0.25s ease;
|
||||
transition: filter 200ms ease, opacity 200ms ease, transform 200ms ease;
|
||||
}
|
||||
|
||||
/* A spent coin stays in place but greys out and fades. */
|
||||
.coin-disc.is-spent {
|
||||
filter: grayscale(1) brightness(0.7);
|
||||
opacity: 0.4;
|
||||
transform: scale(0.88);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes coin-pop {
|
||||
@@ -1285,10 +1336,23 @@ h3 {
|
||||
place-items: center;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* Light text on a golden rounded-rect plate, so the flourish reads as a solid
|
||||
badge rather than bare text floating over the board. */
|
||||
.turn-banner-pill {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.5rem, 9vw, 6rem);
|
||||
color: var(--gold);
|
||||
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
|
||||
font-size: clamp(2rem, 7vw, 4.5rem);
|
||||
color: #fff8e6;
|
||||
background: linear-gradient(180deg, var(--gold), var(--gold-deep));
|
||||
padding: 0.28em 0.8em;
|
||||
border-radius: 22px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.55);
|
||||
text-shadow: 0 2px 5px rgba(120, 78, 8, 0.55);
|
||||
box-shadow:
|
||||
inset 0 2px 0 rgba(255, 255, 255, 0.55),
|
||||
inset 0 -6px 14px rgba(150, 100, 20, 0.35),
|
||||
0 14px 34px rgba(0, 0, 0, 0.5);
|
||||
animation: turn-flash 1.4s ease forwards;
|
||||
}
|
||||
|
||||
@@ -1978,7 +2042,9 @@ h3 {
|
||||
|
||||
.battle-unit .card {
|
||||
width: 96px;
|
||||
height: 132px;
|
||||
/* Taller than a shop card so the full ability text fits without shrinking to
|
||||
an unreadable size during the battle. */
|
||||
height: 162px;
|
||||
}
|
||||
|
||||
/* Battle cards are short, so give the ability text more of the card by
|
||||
@@ -2389,7 +2455,7 @@ h3 {
|
||||
}
|
||||
.battle-unit .card {
|
||||
width: 78px;
|
||||
height: 110px;
|
||||
height: 134px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2540,3 +2606,11 @@ h3 {
|
||||
gap: 6px;
|
||||
max-width: min(60vw, 560px);
|
||||
}
|
||||
|
||||
/* Backdrop behind the toolbar deck-peek: any click outside dismisses it. Sits
|
||||
below the popover (z 60) but above the board. */
|
||||
.deck-peek-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 55;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user