SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: compact player sidebar layout for 5 buttons

Browse source 
- Add buttons as 6th grid row instead of extra element below grid
- Reduce stat pill padding and font size (4px→2px, 0.75rem→0.7rem)
- Reduce grid gap (6px→4px row, 12px→8px col) and item padding
- Unify all 5 button styles (Chat/Stats/Inventory/Char/Radar) with
  shared compact sizing, individual colors preserved
- flex-wrap on buttons container as safety for narrow sidebars

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-09 14:52:46 +02:00
parent ee775a7e71
commit 80cfbfdfca
1 changed files with 25 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

53
static/style.css
View file

@ -434,16 +434,17 @@ body {
#playerList li { #playerList li {
display: grid; display: grid;
grid-template-columns: 1fr auto auto auto auto auto; grid-template-columns: 1fr auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto; grid-template-rows: auto auto auto auto auto auto;
grid-template-areas: grid-template-areas:
"name name name name name name" "name name name name name name"
"vitals vitals vitals vitals vitals vitals" "vitals vitals vitals vitals vitals vitals"
"kills totalkills kph kph kph kph" "kills totalkills kph kph kph kph"
"rares kpr meta meta meta meta" "rares kpr meta meta meta meta"
"onlinetime deaths tapers tapers tapers tapers"; "onlinetime deaths tapers tapers tapers tapers"
gap: 6px 12px; "buttons buttons buttons buttons buttons buttons";
margin: 6px 0; gap: 4px 8px;
padding: 10px 15px; margin: 4px 0;
padding: 6px 10px;
background: var(--card); background: var(--card);
border-left: 4px solid transparent; border-left: 4px solid transparent;
transition: none; transition: none;
@ -469,10 +470,10 @@ body {
/* pill styling */ /* pill styling */
#playerList li .stat { #playerList li .stat {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
padding: 4px 8px; padding: 2px 6px;
border-radius: 12px; border-radius: 10px;
display: inline-block; display: inline-block;
font-size: 0.75rem; font-size: 0.7rem;
white-space: nowrap; white-space: nowrap;
color: var(--text); color: var(--text);
} }
@ -502,16 +503,20 @@ body {
color: #fff; color: #fff;
} }
/* ---------- chat window styling ------------------------------- */ /* ---------- player item buttons ------------------------------- */
.chat-btn, .stats-btn, .inventory-btn, .char-btn, .radar-btn {
padding: 1px 5px;
border: 1px solid #666;
border-radius: 3px;
font-size: 0.65rem;
cursor: pointer;
white-space: nowrap;
}
.chat-btn, .stats-btn, .inventory-btn { .chat-btn, .stats-btn, .inventory-btn {
margin-top: 4px;
padding: 2px 6px;
background: var(--accent); background: var(--accent);
color: #111; color: #111;
border: none; border-color: var(--accent);
border-radius: 3px;
font-size: 0.75rem;
cursor: pointer;
} }
/* Element pooling optimization containers */ /* Element pooling optimization containers */
@ -520,9 +525,10 @@ body {
} }
.buttons-container { .buttons-container {
grid-area: buttons;
display: flex; display: flex;
gap: 4px; gap: 3px;
margin-top: 4px; flex-wrap: wrap;
} }
.chat-window, .stats-window, .inventory-window, .character-window, .radar-window, .issues-window { .chat-window, .stats-window, .inventory-window, .character-window, .radar-window, .issues-window {
@ -2162,15 +2168,10 @@ table.ts-allegiance td:first-child {
.char-btn { .char-btn {
background: #000022; background: #000022;
color: #af7a30; color: #af7a30;
border: 1px solid #af7a30; border-color: #af7a30;
padding: 2px 6px;
border-radius: 3px;
cursor: pointer;
font-size: 11px;
} }
.char-btn:hover { .char-btn:hover {
background: rgba(0, 100, 0, 0.4); background: rgba(0, 100, 0, 0.4);
border-color: #af7a30;
} }
@ -2633,11 +2634,7 @@ table.ts-allegiance td:first-child {
.radar-btn { .radar-btn {
background: #553388; background: #553388;
color: #fff; color: #fff;
border: 1px solid #774499; border-color: #774499;
padding: 1px 6px;
cursor: pointer;
font-size: 0.7rem;
border-radius: 3px;
} }
.radar-btn:hover { .radar-btn:hover {