Add player leaderboard and homepage preview
This commit is contained in:
272
app/rounded-theme.css
Normal file
272
app/rounded-theme.css
Normal file
@@ -0,0 +1,272 @@
|
||||
/* Soft charcoal panels around the original pixel artwork and Minecraft maps. */
|
||||
:root {
|
||||
--bg: #080b10;
|
||||
--panel: #1a222c;
|
||||
--panel2: #222c37;
|
||||
--line: #35404c;
|
||||
--green: #8dce66;
|
||||
--muted: #a1acb8;
|
||||
--text: #eef1f4;
|
||||
--board-stone: #1a222c;
|
||||
--board-edge: #35404c;
|
||||
--radius-panel: 16px;
|
||||
--radius-control: 9px;
|
||||
}
|
||||
body {
|
||||
background-image: radial-gradient(
|
||||
ellipse at 80% 12%,
|
||||
#25303d55,
|
||||
transparent 55%
|
||||
);
|
||||
}
|
||||
.site-header {
|
||||
background: #0c1017;
|
||||
border-bottom: 1px solid #2c3540;
|
||||
box-shadow: none;
|
||||
}
|
||||
.hero {
|
||||
grid-template-columns: 1.35fr 1fr;
|
||||
padding-top: 52px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: clamp(48px, 4.4vw, 64px);
|
||||
line-height: 1.05;
|
||||
}
|
||||
.hero h1 span {
|
||||
color: var(--green);
|
||||
}
|
||||
.button {
|
||||
border-radius: var(--radius-control);
|
||||
background: #293542;
|
||||
border: 1px solid #526071;
|
||||
box-shadow:
|
||||
inset 0 1px #ffffff14,
|
||||
0 3px 8px #04070b55;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.button.primary {
|
||||
background: linear-gradient(#9ada72, #77b852);
|
||||
border: 1px solid #a6df80;
|
||||
color: #14200e;
|
||||
box-shadow:
|
||||
inset 0 1px #ddffc080,
|
||||
0 3px 8px #04070b55;
|
||||
}
|
||||
.button.primary:hover {
|
||||
background: linear-gradient(#ace783, #88c962);
|
||||
}
|
||||
.button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
/* .header-account deliberately retains its existing square, beveled styling. */
|
||||
.compass-art {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #536170;
|
||||
background: #202b36;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
box-shadow:
|
||||
inset 0 1px #ffffff15,
|
||||
0 5px 14px #04070b66;
|
||||
}
|
||||
.floating-tag {
|
||||
border-radius: var(--radius-control);
|
||||
background: #171f29;
|
||||
border-color: #35404c;
|
||||
box-shadow: 0 4px 12px #04070b55;
|
||||
}
|
||||
.world-stats {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: calc(100% - 56px);
|
||||
max-width: 1104px;
|
||||
margin: -9px auto 0;
|
||||
padding: 23px 24px;
|
||||
border: 1px solid #35404c;
|
||||
border-radius: var(--radius-panel);
|
||||
background: #1a222c;
|
||||
box-shadow: 0 8px 24px #03060a55;
|
||||
}
|
||||
.world-stats > div {
|
||||
border-color: #35404c;
|
||||
}
|
||||
.world-stats .stat-cube.gold-cube {
|
||||
background: #cba950;
|
||||
border-color: #edca74;
|
||||
}
|
||||
.world-stats .stat-cube.cyan-cube {
|
||||
background: #60b8bb;
|
||||
border-color: #94dcde;
|
||||
}
|
||||
.world-stats .stat-cube.red-cube {
|
||||
background: #c16067;
|
||||
border-color: #e98a91;
|
||||
}
|
||||
.map-card,
|
||||
.home-page .map-card {
|
||||
border: 1px solid #35404c;
|
||||
border-radius: var(--radius-panel);
|
||||
background: #1a222c;
|
||||
box-shadow: 0 4px 16px #03060a40;
|
||||
overflow: hidden;
|
||||
}
|
||||
.map-card:hover {
|
||||
border-color: #6c8b59;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.card-body,
|
||||
.home-page .card-body {
|
||||
background: #1a222c;
|
||||
}
|
||||
.card-type,
|
||||
.card-number,
|
||||
.badge {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaderboard-preview-board,
|
||||
.rankings-board,
|
||||
.home-panel,
|
||||
.tool-card,
|
||||
.start-panel,
|
||||
.auth-card,
|
||||
.settings-card,
|
||||
.editor-panel,
|
||||
.report-dialog,
|
||||
.result-summary,
|
||||
.round-result,
|
||||
.empty-state,
|
||||
.first-map-panel {
|
||||
border-radius: var(--radius-panel);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
box-shadow: 0 5px 18px #03060a40;
|
||||
}
|
||||
.leaderboard-preview-board,
|
||||
.rankings-board {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaderboard-table thead {
|
||||
background: #131b24;
|
||||
}
|
||||
.home-panels {
|
||||
gap: 24px;
|
||||
}
|
||||
.home-panel,
|
||||
.home-panel + .home-panel {
|
||||
padding: 28px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.mode-row {
|
||||
border-radius: var(--radius-control);
|
||||
background: #202b36;
|
||||
border-color: #3b4856;
|
||||
box-shadow: none;
|
||||
}
|
||||
.mode-row:hover {
|
||||
background: #293642;
|
||||
border-color: #6c8b59;
|
||||
}
|
||||
.contribute-banner {
|
||||
border-radius: var(--radius-panel);
|
||||
background: #19251f;
|
||||
border: 1px solid #435942;
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaderboard-filters a,
|
||||
.leaderboard-pagination a,
|
||||
.difficulty-options button,
|
||||
.filter-tabs button,
|
||||
.icon-button,
|
||||
.auth-tabs a {
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
.field input,
|
||||
.field textarea,
|
||||
.field select,
|
||||
.search-field,
|
||||
.leaderboard-search,
|
||||
.preview-toolbar select {
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
.draft-row,
|
||||
.token-box,
|
||||
.preview-tile,
|
||||
.leaderboard-rules article {
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
.player-avatar {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Native vector cursors track directly, with normal text/drag cursors retained. */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
body {
|
||||
cursor:
|
||||
url("/cursors/orbit.svg") 14 14,
|
||||
auto;
|
||||
}
|
||||
a,
|
||||
button,
|
||||
select,
|
||||
summary,
|
||||
label[for],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
input[type="file"],
|
||||
[role="button"] {
|
||||
cursor:
|
||||
url("/cursors/orbit-link.svg") 18 18,
|
||||
pointer;
|
||||
}
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
|
||||
textarea,
|
||||
[contenteditable="true"] {
|
||||
cursor: text;
|
||||
}
|
||||
button:disabled,
|
||||
[aria-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.hero {
|
||||
grid-template-columns: 1.15fr 1fr;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 54px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 22px 32px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: clamp(43px, 10.8vw, 58px);
|
||||
}
|
||||
.world-stats {
|
||||
width: calc(100% - 40px);
|
||||
padding: 22px 18px;
|
||||
gap: 24px 12px;
|
||||
}
|
||||
.world-stats strong {
|
||||
font-size: 28px;
|
||||
}
|
||||
.home-panel,
|
||||
.home-panel + .home-panel {
|
||||
padding: 23px 20px;
|
||||
}
|
||||
.home-panels {
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
a,
|
||||
button {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user