674 lines
16 KiB
CSS
674 lines
16 KiB
CSS
/* ============================================================
|
|
list.css — Revamped Pointercrate Layout
|
|
Keeps existing structure, adds polish + interactivity
|
|
============================================================ */
|
|
|
|
/* ── Containers ── */
|
|
.page-list .list-container,
|
|
.page-list .level-container,
|
|
.page-list .meta-container {
|
|
padding-block: 2rem;
|
|
}
|
|
|
|
.page-list .list-container {
|
|
padding-inline: 1rem;
|
|
overflow-y: auto;
|
|
box-shadow: inset 0 -24px 20px -20px rgba(0,0,0,0.4);
|
|
/* needed so position:sticky works inside an overflow:auto container */
|
|
position: relative;
|
|
/* remove top padding — the sticky bar provides it */
|
|
padding-top: 0;
|
|
}
|
|
|
|
.page-list .meta-container {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
/* ── Show-unverified label ── */
|
|
.page-list .sul-label {
|
|
position: relative;
|
|
padding-left: 1rem;
|
|
font-size: medium;
|
|
}
|
|
|
|
.page-list .sul-info-label {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ── List table ── */
|
|
.page-list .list {
|
|
table-layout: auto;
|
|
border-collapse: separate;
|
|
border-spacing: 0 2px;
|
|
}
|
|
|
|
.page-list .list .rank {
|
|
text-align: end;
|
|
padding-right: 0.75rem;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-list .list .level {
|
|
width: 100%;
|
|
}
|
|
|
|
.page-list .list .rank-image .rank-trophy {
|
|
height: 20px;
|
|
/* small drop shadow on trophies */
|
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.page-list .list tr:hover .rank-trophy {
|
|
transform: scale(1.15) rotate(-4deg);
|
|
}
|
|
|
|
/* ── Section separator ── */
|
|
.page-list .list-separator {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255,0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.page-list .list-separator::before,
|
|
.page-list .list-separator::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 28%;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, rgba(255,255,255,0.1));
|
|
}
|
|
|
|
.page-list .list-separator::before {
|
|
left: 4%;
|
|
}
|
|
|
|
.page-list .list-separator::after {
|
|
right: 4%;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* ── Level buttons ── */
|
|
.page-list .list .level button {
|
|
/* base: dark bg + level thumbnail blended in */
|
|
background-color: #00000094;
|
|
background-blend-mode: multiply;
|
|
background-position: center;
|
|
background-size: cover;
|
|
color: var(--color-on-background);
|
|
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 0.75rem;
|
|
padding: 0.85rem 1.1rem;
|
|
text-align: start;
|
|
word-break: normal;
|
|
overflow-wrap: anywhere;
|
|
cursor: pointer;
|
|
margin-left: 0.5rem;
|
|
width: 90%;
|
|
margin-bottom: 0.4rem;
|
|
|
|
/* smooth everything */
|
|
transition:
|
|
filter 0.18s ease,
|
|
border-color 0.18s ease,
|
|
box-shadow 0.18s ease,
|
|
background-color 0.18s ease,
|
|
transform 0.12s ease;
|
|
|
|
/* subtle inner highlight at top edge */
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.07),
|
|
0 2px 6px rgba(0,0,0,0.3);
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* shimmer pseudo-element that sweeps across on hover */
|
|
.page-list .list .level button::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
105deg,
|
|
transparent 35%,
|
|
rgba(255,255,255,0.06) 50%,
|
|
transparent 65%
|
|
);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.4s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-list .list .level button:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
/* error state */
|
|
.page-list .list .level.error button {
|
|
color: var(--color-error);
|
|
cursor: not-allowed;
|
|
text-decoration: line-through;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* hover state */
|
|
.page-list .list .level button:hover {
|
|
filter: brightness(1.4);
|
|
border-color: rgba(211, 176, 60, 0.5);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.1),
|
|
0 4px 16px rgba(0,0,0,0.4),
|
|
0 0 0 1px rgba(211,176,60,0.25);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* active (selected) state */
|
|
.page-list .list .level.active button {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
filter: brightness(1.5);
|
|
border-color: rgba(255, 213, 74, 0.8);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.2),
|
|
0 0 0 2px rgba(255,213,74,0.35),
|
|
0 0 18px rgba(255,213,74,0.25),
|
|
0 4px 20px rgba(0,0,0,0.5);
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
/* rank number next to active level glows */
|
|
.page-list .list .level.active ~ td .rank p,
|
|
.page-list .list tr:has(.level.active) .rank p {
|
|
color: #ffd54a;
|
|
text-shadow: 0 0 8px rgba(255,213,74,0.6);
|
|
}
|
|
|
|
/* ── Search highlight ── */
|
|
.search-highlight {
|
|
background: #ffd54a;
|
|
color: #000;
|
|
padding: 0 3px;
|
|
border-radius: 3px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Level detail panel ── */
|
|
.page-list .level-container .level {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
padding-right: 2rem;
|
|
max-width: 48rem;
|
|
}
|
|
|
|
/* Level title */
|
|
.page-list .level-container .level h1 {
|
|
font-size: 1.75rem;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
/* subtle gradient shimmer on the title */
|
|
background: linear-gradient(135deg, #ffffff 60%, rgba(255,213,74,0.7) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
/* GD level description quote */
|
|
.page-list .level-container .level > p:first-of-type {
|
|
font-size: 0.875rem;
|
|
color: rgba(255,255,255,0.45);
|
|
font-style: italic;
|
|
line-height: 1.6;
|
|
padding: 0.75rem 1rem;
|
|
border-left: 2px solid rgba(255,213,74,0.4);
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 0 6px 6px 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Rate colours */
|
|
.page-list .level-container .level .good {
|
|
background: linear-gradient(to right, #424242, #727272);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.page-list .level-container .level .great {
|
|
background: linear-gradient(to right, #363636, #5e5e5e);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 2px #ffffff99;
|
|
}
|
|
|
|
.page-list .level-container .level .peak {
|
|
background: linear-gradient(to right, #5f5f5f, #9e9e9e);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 5px #ffffffbb;
|
|
}
|
|
|
|
/* Authors grid */
|
|
.page-list .level-container .level .level-authors {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
grid-auto-rows: max-content;
|
|
gap: 0.5rem 1rem;
|
|
}
|
|
|
|
.page-list .level-container .level .level-authors > *:nth-child(odd) {
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255,0.35);
|
|
padding-top: 2px;
|
|
}
|
|
|
|
/* Packs */
|
|
.page-list .level-container .level .packs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4em;
|
|
}
|
|
|
|
.page-list .level-container .level .packs .tag {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
background-size: 100% 100% !important;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.page-list .level-container .level .packs .tag:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* Tabs (Verification / Showcase) */
|
|
.page-list .level-container .level .tabs {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
padding: 0.25rem;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 8px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.page-list .level-container .level .tab {
|
|
padding: 0.4rem 1.1rem;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: rgba(255,255,255,0.4);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.page-list .level-container .level .tab.selected {
|
|
background: rgba(255,255,255,0.12);
|
|
color: #fff;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.page-list .level-container .level .tab:not(.selected):hover {
|
|
color: rgba(255,255,255,0.7);
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
/* Video embed */
|
|
.page-list .level-container .level .video {
|
|
aspect-ratio: 16/9;
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* Stats row */
|
|
.page-list .level-container .level .stats {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
text-align: center;
|
|
gap: 0;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-list .level-container .level .stats li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
flex: 1;
|
|
padding: 1rem 0.5rem;
|
|
border-right: 1px solid rgba(255,255,255,0.06);
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.page-list .level-container .level .stats li:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.page-list .level-container .level .stats li:hover {
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.page-list .level-container .level .stats .type-title-sm {
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255,0.35);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-list .level-container .level .stats p {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Meta container (records + editors) ── */
|
|
.page-list .meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.page-list .meta .errors {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.page-list .meta .errors .error {
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--color-error);
|
|
color: var(--color-on-error);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Records heading */
|
|
.page-list .meta h2 {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255,0.3);
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Records qualify text */
|
|
.page-list .meta > p {
|
|
font-size: 0.8rem;
|
|
color: rgba(255,255,255,0.45);
|
|
margin: -0.75rem 0 0;
|
|
}
|
|
|
|
/* Records table */
|
|
.page-list .meta-container .meta .records {
|
|
table-layout: auto;
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 2px;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .record {
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
transition: background 0.12s ease;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .record:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .record:hover {
|
|
background: rgba(255,255,255,0.04);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records tr td:not(:last-child) .tag {
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .percent,
|
|
.page-list .meta-container .meta .records .user,
|
|
.page-list .meta-container .meta .records .hz {
|
|
padding: 0.65rem 0.5rem 0.65rem 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* percent + hz: shrink to content, never wrap */
|
|
.page-list .meta-container .meta .records .percent,
|
|
.page-list .meta-container .meta .records .hz {
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* icon column: fixed small width */
|
|
.page-list .meta-container .meta .records .userIcon {
|
|
width: 2.5rem;
|
|
padding-right: 0.75rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* username gets all remaining space */
|
|
.page-list .meta-container .meta .records .user {
|
|
width: 100%;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .userIcon .ico {
|
|
height: 1.75rem;
|
|
width: 1.75rem;
|
|
border-radius: 4px;
|
|
image-rendering: pixelated;
|
|
/* small ring around icon */
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .record:hover .ico {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .percent,
|
|
.page-list .meta-container .meta .records .hz {
|
|
text-align: end;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 0.85rem;
|
|
color: rgba(255,255,255,0.5);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
padding-right: 0.75rem;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .mobile {
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
/* 100% records stand out */
|
|
.page-list .meta-container .meta .records .record:has(.percent p) .percent p {
|
|
color: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .percent p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Record username links */
|
|
.page-list .meta-container .og a:hover,
|
|
.page-list .meta-container .meta .records a:hover {
|
|
text-decoration: underline;
|
|
color: #ffd54a;
|
|
}
|
|
|
|
.page-list .meta-container .meta .records .user a {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: rgba(255,255,255,0.85);
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
/* Editors list */
|
|
.page-list .meta .editors {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.page-list .meta .editors li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: 6px;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.page-list .meta .editors li:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.page-list .meta .editors li img {
|
|
height: 1.15rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.page-list .meta .editors li a:hover {
|
|
text-decoration: underline;
|
|
color: #ffd54a;
|
|
}
|
|
|
|
.page-list .meta .promote {
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* ── Tag pill ── */
|
|
.tag {
|
|
font-family: "Lexend Deca", sans-serif;
|
|
display: block;
|
|
border-radius: 14px;
|
|
padding: 5px 10px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
|
|
/* ── Sticky search + filter bar ── */
|
|
.page-list .list-toolbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
/* frosted glass effect so list content scrolls under it */
|
|
background: rgba(10, 12, 16, 0.82);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
padding: 0.85rem 0;
|
|
margin-bottom: 0.5rem;
|
|
/* negative margin to cancel container padding so it goes edge-to-edge */
|
|
margin-inline: -1rem;
|
|
padding-inline: 1rem;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* shadow that appears below the bar when scrolled */
|
|
.page-list .list-toolbar::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 12px;
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.18), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Enjoyment bar ── */
|
|
/* wraps the enjoyment stat li to add the bar beneath the number */
|
|
.page-list .level-container .level .stats .enjoyment-stat {
|
|
position: relative;
|
|
}
|
|
|
|
.page-list .level-container .level .stats .enjoyment-bar-track {
|
|
width: 80%;
|
|
height: 3px;
|
|
background: rgba(255,255,255,0.08);
|
|
border-radius: 99px;
|
|
overflow: hidden;
|
|
margin-top: -0.1rem;
|
|
}
|
|
|
|
.page-list .level-container .level .stats .enjoyment-bar-fill {
|
|
height: 100%;
|
|
border-radius: 99px;
|
|
/* colour transitions red→yellow→green using the --enjoyment CSS var */
|
|
background: hsl(calc(var(--enjoyment, 0) * 1.2deg), 80%, 52%);
|
|
box-shadow: 0 0 6px hsl(calc(var(--enjoyment, 0) * 1.2deg), 80%, 52%);
|
|
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
|
|
background 0.6s ease,
|
|
box-shadow 0.6s ease;
|
|
}
|
|
|
|
/* ── Shitty mode overrides (preserved) ── */
|
|
.shitty .page-list .list .level button {
|
|
background-color: transparent;
|
|
padding: 1rem 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.shitty .page-list .list .level button::before {
|
|
display: none;
|
|
}
|
|
|
|
.shitty .page-list .list .level button:hover {
|
|
background-color: #eee;
|
|
color: orange !important;
|
|
transform: none;
|
|
filter: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.shitty .page-list .list .level.active button {
|
|
background-color: transparent;
|
|
color: orange;
|
|
box-shadow: none;
|
|
transform: none;
|
|
filter: none;
|
|
} |