add everything

This commit is contained in:
Koolant
2026-04-17 12:29:41 -04:00
commit 4c1cfe6847
437 changed files with 11939 additions and 0 deletions

674
css/pages/list.css Normal file
View File

@@ -0,0 +1,674 @@
/* ============================================================
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;
}