98 lines
6.2 KiB
CSS
98 lines
6.2 KiB
CSS
.dungeon-boss-intro, .pause-menu__bosses {
|
|
--boss-intro-ink: #f3ead1;
|
|
--boss-intro-muted: #b8b5a7;
|
|
--boss-intro-gold: #d5b875;
|
|
--boss-intro-line: rgba(214, 192, 132, .36);
|
|
}
|
|
.dungeon-boss-intro {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 86;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: clamp(12px, 3vw, 32px);
|
|
background: rgba(2, 7, 7, .82);
|
|
backdrop-filter: blur(9px);
|
|
color: var(--boss-intro-ink);
|
|
}
|
|
.dungeon-boss-intro__panel {
|
|
display: grid;
|
|
width: min(1080px, 100%);
|
|
max-height: min(94dvh, 820px);
|
|
min-height: 0;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 14px;
|
|
padding: clamp(16px, 2.5vw, 28px);
|
|
border: 1px solid var(--boss-intro-line);
|
|
border-radius: 13px;
|
|
background: linear-gradient(145deg, #202523, #101716 70%);
|
|
box-shadow: 0 24px 80px #000b, inset 0 0 45px rgba(142, 156, 110, .07);
|
|
}
|
|
.dungeon-boss-intro__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
|
|
.dungeon-boss-intro__header h2 { margin: 0 0 4px; color: var(--boss-intro-ink); font: clamp(22px, 3vw, 34px) Georgia, serif; }
|
|
.dungeon-boss-intro__header span { color: var(--boss-intro-muted); font-size: 12px; }
|
|
.dungeon-boss-intro__timer { display: grid; min-width: 100px; justify-items: center; padding: 6px 14px; border-left: 1px solid var(--boss-intro-line); }
|
|
.dungeon-boss-intro__timer span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
|
|
.dungeon-boss-intro__timer strong { color: var(--boss-intro-gold); font: 48px Georgia, serif; font-variant-numeric: tabular-nums; line-height: 1; }
|
|
.dungeon-boss-intro__grid { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 4px 4px 2px; }
|
|
.dungeon-boss-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
|
.dungeon-boss-cards__empty { margin: 0; padding: 20px; color: var(--boss-intro-muted); }
|
|
.dungeon-boss-card {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 1px solid color-mix(in srgb, var(--boss-card-accent) 50%, #373d39);
|
|
border-radius: 8px;
|
|
background: radial-gradient(ellipse at 50% 35%, #37413d, #161d1b 75%);
|
|
box-shadow: inset 0 0 0 3px #111a18, 0 7px 16px #0005;
|
|
color: var(--boss-intro-ink);
|
|
}
|
|
.dungeon-boss-card.is-owned { border-color: var(--boss-card-accent); }
|
|
.dungeon-boss-card > header { display: flex; justify-content: space-between; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #ffffff18; background: #07100dbb; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
|
|
.dungeon-boss-card > header strong { color: var(--boss-card-accent); font-size: 9px; }
|
|
.dungeon-boss-card__portrait { position: relative; height: 120px; overflow: hidden; background: radial-gradient(circle, color-mix(in srgb, var(--boss-card-accent) 15%, transparent), transparent 70%); }
|
|
.dungeon-boss-card__portrait .boss-card__portrait { width: 100%; height: 100%; }
|
|
.dungeon-boss-card__portrait canvas { display: block; width: 100%; height: 100%; }
|
|
.dungeon-boss-card__model-status, .dungeon-boss-card__portrait .boss-card__model-status { display: grid; width: 100%; height: 100%; place-items: center; padding: 10px; color: var(--boss-intro-muted); font-size: 10px; text-align: center; }
|
|
.dungeon-boss-card__body { flex: 1; padding: 9px 10px; }
|
|
.dungeon-boss-card__body h3 { margin: 0 0 4px; color: var(--boss-intro-ink); font: 16px Georgia, serif; line-height: 1.15; }
|
|
.dungeon-boss-card__body p { margin: 0; color: var(--boss-intro-muted); font-size: 10px; }
|
|
.dungeon-boss-card > footer { display: flex; gap: 5px; padding: 8px 10px; border-top: 1px solid #ffffff18; background: #07100dbb; }
|
|
.dungeon-boss-card > footer span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #56605a; border-radius: 3px; color: #8c968e; font-size: 10px; font-weight: 700; }
|
|
.dungeon-boss-card > footer span.is-owned { border-color: var(--rarity-color); background: color-mix(in srgb, var(--rarity-color) 20%, #101819); color: var(--rarity-color); }
|
|
.pause-menu__bosses { min-width: 0; margin-top: 12px; padding: 10px 0; border-block: 1px solid var(--boss-intro-line); }
|
|
.pause-menu__bosses-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--boss-intro-gold); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
|
|
.pause-menu__bosses-heading span { color: var(--boss-intro-muted); white-space: nowrap; }
|
|
.dungeon-boss-cards--compact { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 5px; scroll-snap-type: x proximity; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card { flex: 0 0 150px; scroll-snap-align: start; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card > header { padding: 5px 7px; font-size: 8px; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card > header strong { font-size: 8px; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card__portrait { height: 86px; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card__body { min-height: 48px; padding: 7px; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card__body h3 { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card > footer { padding: 5px 7px; }
|
|
.dungeon-boss-cards--compact .dungeon-boss-card > footer span { width: 16px; height: 16px; font-size: 8px; }
|
|
@media (max-width: 620px) {
|
|
.dungeon-boss-intro__panel { gap: 9px; padding: 13px; }
|
|
.dungeon-boss-intro__header h2 { font-size: 22px; }
|
|
.dungeon-boss-intro__timer { min-width: 66px; padding: 3px 5px; }
|
|
.dungeon-boss-intro__timer strong { font-size: 36px; }
|
|
.dungeon-boss-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
|
.dungeon-boss-card__portrait { height: 80px; }
|
|
.dungeon-boss-card__body h3 { font-size: 13px; }
|
|
.dungeon-boss-cards--compact { display: flex; }
|
|
}
|
|
@media (max-height: 620px) {
|
|
.dungeon-boss-intro__panel { gap: 9px; padding: 14px; }
|
|
.dungeon-boss-intro__header h2 { font-size: 24px; }
|
|
.dungeon-boss-intro__timer strong { font-size: 36px; }
|
|
.dungeon-boss-card__portrait { height: 72px; }
|
|
.dungeon-boss-card__body { padding: 7px 9px; }
|
|
.dungeon-boss-card__body h3 { font-size: 14px; }
|
|
.dungeon-boss-card > header, .dungeon-boss-card > footer { padding: 5px 9px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dungeon-boss-cards--compact { scroll-behavior: auto; }
|
|
}
|