add everything
This commit is contained in:
Koolant
664
css/pages/listpacks.css
Normal file
664
css/pages/listpacks.css
Normal file
@@ -0,0 +1,664 @@
|
||||
@import url('https://fonts.bunny.net/css?family=geist:300,400,500,600,700,800|geist-mono:400,500,700&display=swap');
|
||||
|
||||
/* ── Base font for everything in the pack layout ── */
|
||||
.pack-layout,
|
||||
.pack-layout * {
|
||||
font-family: 'Geist', sans-serif;
|
||||
}
|
||||
|
||||
/* Mono for anything numeric or label-like */
|
||||
.pack-hero-pts,
|
||||
.pack-hero-count,
|
||||
.pack-hero-label,
|
||||
.pack-pick-count,
|
||||
.pack-level-rank,
|
||||
.pack-level-pts,
|
||||
.pack-picker-heading {
|
||||
font-family: 'Geist Mono', monospace;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
listpacks.css — Revamped Pack List
|
||||
============================================================ */
|
||||
|
||||
/* ── Page shell ── */
|
||||
.pack-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
HERO BANNER
|
||||
════════════════════════════════════════ */
|
||||
.pack-hero {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.pack-hero-collage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.pack-hero-strip {
|
||||
flex: 1;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
|
||||
margin-right: -3%;
|
||||
filter: brightness(0.45) saturate(0.7);
|
||||
transition: filter 0.4s ease;
|
||||
}
|
||||
|
||||
.pack-hero:hover .pack-hero-strip {
|
||||
filter: brightness(0.55) saturate(0.85);
|
||||
}
|
||||
|
||||
.pack-hero-tint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0,0,0,0.0) 0%,
|
||||
rgba(0,0,0,0.5) 50%,
|
||||
rgba(10,12,16,0.95) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pack-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--hero-colour, #ffffff);
|
||||
opacity: 0.7;
|
||||
z-index: 3;
|
||||
box-shadow: 0 0 24px 4px var(--hero-colour, #ffffff);
|
||||
transition: background 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
.pack-hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 1.25rem 2rem 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pack-hero-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.pack-hero-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
.pack-hero-name {
|
||||
font-size: clamp(1.4rem, 3vw, 2.2rem);
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 16px rgba(0,0,0,0.8);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.pack-hero-stats {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.pack-hero-pts {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--hero-colour, #fff);
|
||||
text-shadow: 0 0 20px var(--hero-colour, transparent);
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
.pack-hero-pts em {
|
||||
font-style: normal;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.45);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.pack-hero-count {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255,255,255,0.35);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
BODY
|
||||
════════════════════════════════════════ */
|
||||
.pack-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
/* height:0 is the key — with flex:1 it still grows to fill space,
|
||||
but setting height:0 defeats the browser's default min-height:auto
|
||||
on flex children, which is what was preventing overflow from working */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
LEFT — Pack picker
|
||||
════════════════════════════════════════ */
|
||||
.pack-picker {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
min-height: 0;
|
||||
padding: 1rem 0.75rem;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid rgba(255,255,255,0.07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
scrollbar-gutter: stable;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pack-picker-heading {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2em;
|
||||
color: rgba(255,255,255,0.25);
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 0.5rem 0.6rem;
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pack-pick-btn {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: #0d0f13;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 0.85rem;
|
||||
gap: 2px;
|
||||
text-align: left;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
.pack-pick-btn:hover {
|
||||
border-color: rgba(255,255,255,0.15);
|
||||
transform: translateX(2px);
|
||||
box-shadow: 0 3px 12px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.pack-pick-btn.active {
|
||||
border-color: var(--pack-colour, rgba(255,255,255,0.4));
|
||||
box-shadow:
|
||||
0 0 0 1px var(--pack-colour, rgba(255,255,255,0.2)),
|
||||
0 0 14px rgba(255,255,255,0.06),
|
||||
inset 0 0 20px rgba(255,255,255,0.03);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.pack-pick-collage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pack-pick-strip {
|
||||
flex: 1;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);
|
||||
margin-right: -8%;
|
||||
filter: brightness(0.25) saturate(0.5);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.pack-pick-btn:hover .pack-pick-strip {
|
||||
filter: brightness(0.35) saturate(0.65);
|
||||
}
|
||||
|
||||
.pack-pick-btn.active .pack-pick-strip {
|
||||
filter: brightness(0.3) saturate(0.7);
|
||||
}
|
||||
|
||||
.pack-pick-tint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.45);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.pack-pick-name {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,0.9);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.pack-pick-count {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255,255,255,0.35);
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.pack-pick-btn.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 15%;
|
||||
height: 70%;
|
||||
width: 3px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: var(--pack-colour, #fff);
|
||||
box-shadow: 0 0 8px var(--pack-colour, rgba(255,255,255,0.5));
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
RIGHT — Level cards
|
||||
════════════════════════════════════════ */
|
||||
.pack-levels {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
overflow-y: auto;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pack-level-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pack-level-card {
|
||||
position: relative;
|
||||
height: 82px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 10px;
|
||||
overflow: clip;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
transform 0.12s ease;
|
||||
}
|
||||
|
||||
.pack-level-card:hover {
|
||||
border-color: rgba(255,255,255,0.18);
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pack-level-card:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.pack-level-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(3px) brightness(0.22) saturate(0.6);
|
||||
transform: scale(1.06);
|
||||
transition: filter 0.25s ease;
|
||||
}
|
||||
|
||||
.pack-level-card:hover .pack-level-bg {
|
||||
filter: blur(2px) brightness(0.32) saturate(0.8);
|
||||
}
|
||||
|
||||
.pack-level-tint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0,0,0,0.15) 0%,
|
||||
rgba(0,0,0,0.05) 55%,
|
||||
rgba(0,0,0,0.4) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.pack-level-rank {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
width: 3.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
color: rgba(255,255,255,0.35);
|
||||
border-right: 1px solid rgba(255,255,255,0.07);
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pack-level-info {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 0.85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pack-level-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 8px rgba(0,0,0,0.7);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.pack-level-pts {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--pack-colour, rgba(255,255,255,0.45));
|
||||
text-shadow: 0 0 12px var(--pack-colour, transparent);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.pack-level-arrow {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 1.4rem;
|
||||
color: rgba(255,255,255,0.2);
|
||||
padding: 0 1rem 0 0.5rem;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.pack-level-card:hover .pack-level-arrow {
|
||||
color: rgba(255,255,255,0.65);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.pack-level-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: transparent;
|
||||
transition: background 0.15s ease;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pack-level-card:hover::after {
|
||||
background: rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
/* ── Card transitions ── */
|
||||
.pack-card-enter-active { transition: opacity 0.25s ease, transform 0.25s ease; }
|
||||
.pack-card-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
|
||||
.pack-card-enter-from { opacity: 0; transform: translateY(10px); }
|
||||
.pack-card-leave-to { opacity: 0; transform: translateY(-6px); }
|
||||
.pack-card-move { transition: transform 0.3s ease; }
|
||||
|
||||
/* ── Scrollbars ── */
|
||||
.pack-picker::-webkit-scrollbar,
|
||||
.pack-levels::-webkit-scrollbar { width: 5px; }
|
||||
.pack-picker::-webkit-scrollbar-track,
|
||||
.pack-levels::-webkit-scrollbar-track { background: transparent; }
|
||||
.pack-picker::-webkit-scrollbar-thumb,
|
||||
.pack-levels::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
|
||||
.pack-picker::-webkit-scrollbar-thumb:hover,
|
||||
.pack-levels::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
HERO PROGRESS BAR
|
||||
════════════════════════════════════════ */
|
||||
.pack-hero-progress-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: rgba(0,0,0,0.35);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 99px;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.pack-hero-progress-icon {
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pack-hero-progress-label {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255,255,255,0.45);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pack-hero-progress-track {
|
||||
margin-top: 0.6rem;
|
||||
width: min(340px, 90%);
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pack-hero-progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
min-width: 4px;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
SORT TOOLBAR
|
||||
════════════════════════════════════════ */
|
||||
.pack-sort-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.25rem 0.85rem;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pack-sort-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.28);
|
||||
font-family: 'Geist Mono', monospace;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pack-sort-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.2rem;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.pack-sort-tab {
|
||||
padding: 0.3rem 0.85rem;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(255,255,255,0.35);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
font-family: 'Geist', sans-serif;
|
||||
}
|
||||
|
||||
.pack-sort-tab:hover {
|
||||
color: rgba(255,255,255,0.65);
|
||||
}
|
||||
|
||||
.pack-sort-tab.active {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Player selector */
|
||||
.pack-player-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.pack-player-dropdown {
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 0.78rem;
|
||||
font-family: 'Geist', sans-serif;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.pack-player-dropdown:hover,
|
||||
.pack-player-dropdown:focus {
|
||||
border-color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.pack-player-dropdown option {
|
||||
background: #1a1d23;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════
|
||||
LEVEL CARD ADDITIONS
|
||||
════════════════════════════════════════ */
|
||||
|
||||
/* completed state */
|
||||
.pack-level-card.pack-level-done {
|
||||
border-color: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.pack-level-card.pack-level-done .pack-level-bg {
|
||||
filter: blur(3px) brightness(0.3) saturate(0.8);
|
||||
}
|
||||
|
||||
/* completion tick badge */
|
||||
.pack-level-tick {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
z-index: 3;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(75, 232, 138, 0.9);
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 10px rgba(75,232,138,0.5);
|
||||
}
|
||||
|
||||
/* bottom row inside level info */
|
||||
.pack-level-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* contribution bar track */
|
||||
.pack-contrib-track {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
min-width: 20px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.pack-contrib-fill {
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.pack-contrib-pct {
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 600;
|
||||
color: rgba(255,255,255,0.3);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 640px) {
|
||||
.pack-picker { width: 220px; }
|
||||
.pack-hero { height: 160px; }
|
||||
.pack-hero-name { font-size: 1.3rem; }
|
||||
.pack-level-card { height: 70px; }
|
||||
.pack-level-name { font-size: 0.9rem; }
|
||||
}
|
||||
Reference in New Issue
Block a user