herryyun/ark-stronghold-protocol
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve lobby screen header design

Browse Source
This commit is contained in:
Yuri Restia committed 2026-10-10 04:18:40 +07:00
1 parent 1db8e51023
commit 4bff948290
8 files changed
+49 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/components.css
+15
View File
@@ -1030,6 +1030,12 @@
.topbar__center { display: flex; flex-direction: column; align-items: center; gap: .03rem; text-align: center; }
.topbar__title { display: flex; align-items: center; gap: .18rem; font-size: calc(.3 * var(--t)); font-weight: 700; letter-spacing: .1em; line-height: 1.2; }
.topbar__sep { width: 1px; height: .28rem; background: var(--line-2); }
/* the lobby's ⚙ / 📖 / install squares: a size up from `sm` and spaced apart; on touch screens at least 40 px each with
a 10 px gap, so their 44 px hit areas (css/devices.css) never overlap and a tap lands on the intended one */
.topbar__tools { display: flex; align-items: center; gap: .14rem; }
.topbar__tools .btn--square.btn--sm { --sq: .46rem; height: var(--sq); min-width: var(--sq); }
.sp-coarse .topbar__tools { gap: max(.16rem, 10px); }
.sp-coarse .topbar__tools .btn--square.btn--sm { --sq: max(.56rem, 40px); }
.topbar__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
.section-label { display: flex; align-items: baseline; gap: .12rem; margin: 0 0 .14rem; font-size: calc(.2 * var(--t)); font-weight: 700; letter-spacing: .08em; }
@@ -1038,6 +1044,15 @@
.me-chip { display: flex; align-items: center; gap: .12rem; padding: .06rem .18rem .06rem .06rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
.me-chip__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.me-chip__name { font-weight: 700; font-size: calc(.18 * var(--t)); max-width: 2.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the lobby's chip doubles as the 统计数据 entry */
.me-chip--btn {
font: inherit; color: inherit; text-align: left; cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.me-chip--btn:hover { border-color: var(--mint-700); background: rgba(34, 42, 38, .6); }
.me-chip--btn:active { transform: translateY(1px); }
.me-chip__stats { flex: none; width: .2rem; height: .2rem; margin-left: .04rem; color: var(--mint-500); opacity: .7; }
.me-chip--btn:hover .me-chip__stats { opacity: 1; }
.crash { align-items: center; justify-content: center; }
.crash__box {