MrMaho/MSCO-Dedicated-Server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Panel: German/English, redesigned sidebar, in-game admins page, Steam Web API key link, RAR/7z save upload (SharpCompress), responsive cards; upload errors return 400; tests

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
MrMaho
2026-09-27 19:40:46 +02:00
co-authored by Claude Opus 5.5
parent c74c48dfc8
commit 8df6cbcafc
12 changed files with 700 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Panel/app.css
+56 -16
View File
@@ -82,19 +82,51 @@ label input, label select { margin-top: 6px; text-transform: none; letter-spacin
.brand-sub { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
/* ---------------------------------------------------------------- Layout */
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.sidebar { background: var(--sidebar); padding: 20px 14px; display: flex; flex-direction: column; gap: 22px;
position: sticky; top: 0; height: 100vh; }
.sidebar .brand { padding: 0 8px; }
.layout { display: grid; grid-template-columns: 248px 1fr; min-height: 100%; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 16px;
background: linear-gradient(180deg, #121216 0%, #0d0d10 100%); border-right: 1px solid var(--border); overflow-y: auto; }
.sidebar .brand { padding: 2px 8px 0; }
.server-card { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px;
background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.sc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--pending); box-shadow: 0 0 0 4px rgba(242, 194, 48, .12); }
.sc-dot.ok { background: var(--online); box-shadow: 0 0 0 4px rgba(61, 214, 140, .14); }
.sc-dot.bad { background: var(--danger); box-shadow: 0 0 0 4px rgba(229, 72, 77, .14); }
.sc-text { min-width: 0; display: grid; }
.sc-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav { display: grid; gap: 2px; }
nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent;
border: 0; color: var(--muted); font: inherit; font-weight: 600; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
nav button:hover { background: #18181d; color: var(--text); }
nav button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
nav .ico { width: 18px; text-align: center; opacity: .9; }
.sidebar-foot { margin-top: auto; display: grid; gap: 8px; padding: 0 8px; }
.me { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; overflow: hidden; }
.me span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #5f5f6b; padding: 14px 12px 6px; }
.nav-group:first-child { padding-top: 2px; }
nav button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: 0;
color: #a4a4af; font: inherit; font-weight: 600; padding: 7px 10px; border-radius: 10px; cursor: pointer; transition: background .12s, color .12s; }
nav button:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
nav .ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; font-size: 13px;
background: rgba(255, 255, 255, .04); color: #c9c9d2; transition: background .12s, color .12s; }
nav button.active { background: linear-gradient(90deg, rgba(242, 107, 29, .16), rgba(242, 107, 29, .04)); color: #fff; }
nav button.active .ico { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(242, 107, 29, .35); }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot { margin-top: auto; display: grid; gap: 10px; }
.me-card { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.me-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; color: var(--text);
font: inherit; text-align: left; padding: 4px; border-radius: 8px; cursor: pointer; }
.me-main:hover, .me-main.active { background: rgba(255, 255, 255, .05); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
background: linear-gradient(135deg, #ffa24d, #e5561a); color: #fff; }
.me-text { min-width: 0; display: grid; }
.me-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text small { color: var(--muted); font-size: 11.5px; }
.icon-btn { width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
font-size: 15px; cursor: pointer; }
.icon-btn:hover { background: rgba(229, 72, 77, .14); color: #ff8a8d; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); justify-self: start; }
.lang-switch button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700;
padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.lang-switch button.on { background: var(--panel-2); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.auth-lang { position: fixed; top: 16px; right: 16px; }
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 18px 28px; border-bottom: 1px solid var(--border);
@@ -108,8 +140,14 @@ nav .ico { width: 18px; text-align: center; opacity: .9; }
.page { padding: 24px 28px 40px; display: grid; gap: 20px; align-content: start; }
/* ---------------------------------------------------------------- Karten */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cards.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; min-width: 0;
display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.card p { margin: 0; }
.card > .btn, .card > .row { margin-top: auto; }
.card .row { gap: 8px; }
.card .row > input, .card .row > input[type=file] { flex: 1 1 100%; min-width: 0; width: 100%; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 26px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
@@ -118,7 +156,9 @@ nav .ico { width: 18px; text-align: center; opacity: .9; }
.section-head h2 { margin-right: auto; }
.section-body { padding: 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > input { flex: 1; min-width: 180px; }
.row > input { flex: 1; min-width: min(180px, 100%); }
.small-text { font-size: 13px; padding-top: 0; }
.page { min-width: 0; }
.empty { color: var(--muted); padding: 26px 18px; text-align: center; }
/* ---------------------------------------------------------------- Tabellen */
@@ -183,7 +223,7 @@ input[type=file]::file-selector-button { background: var(--panel); color: var(--
/* ---------------------------------------------------------------- Handy */
@media (max-width: 820px) {
.layout { grid-template-columns: 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40; transform: translateX(-100%); transition: transform .18s; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 40; transform: translateX(-100%); transition: transform .18s; }
.sidebar.open { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .5); }
.menu { display: inline-block; }
.topbar { padding: 14px 16px; }