Upload via GUI (146 Dateien)
This commit is contained in:
+160
-3
@@ -32,7 +32,7 @@ body{display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:mi
|
||||
:root[data-theme="dark"] .field select,
|
||||
:root[data-theme="dark"] .field textarea,
|
||||
:root[data-theme="dark"] .mods-search input,
|
||||
:root[data-theme="dark"] .path-row input,
|
||||
:root[data-theme="dark"] .path-row input,:root[data-theme="dark"] .path-row select,:root[data-theme="dark"] select.s-wert,:root[data-theme="dark"] input.s-wert,:root[data-theme="dark"] .s-paar input,:root[data-theme="dark"] .s-einheit input,
|
||||
:root[data-theme="dark"] .login-usercode{background:#1e1e1e;color:var(--text);border-color:var(--border)}
|
||||
:root[data-theme="dark"] .modal-card{background:#2d2d30;border-color:#161618}
|
||||
:root[data-theme="dark"] .modal-head{background:#333337}
|
||||
@@ -133,8 +133,26 @@ body.is-popout>.titelleiste{display:none}
|
||||
.ui-animiert .list.einblenden .group-header{animation:karte-rein .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 28ms)}
|
||||
@keyframes karte-rein{from{opacity:0;transform:translateY(12px) scale(.94)}}
|
||||
/* Block-Symbol hebt sich beim Darüberfahren und dreht sich ein Stück */
|
||||
/* … und kippt dabei leicht zur Maus (--kx/--ky setzt kippeZurMaus) */
|
||||
.ui-animiert .card-icon,.ui-animiert .card-icon-img{transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s}
|
||||
.ui-animiert .card:hover .card-icon,.ui-animiert .card:hover .card-icon-img{transform:translateY(-4px) rotate(-7deg) scale(1.06);filter:drop-shadow(0 6px 6px rgba(0,0,0,.28))}
|
||||
.ui-animiert .card:hover .card-icon,.ui-animiert .card:hover .card-icon-img{
|
||||
transform:perspective(220px) translateY(-4px) rotateX(calc(var(--ky,0) * -26deg)) rotateY(calc(var(--kx,0) * 30deg)) rotate(-4deg) scale(1.07);
|
||||
filter:drop-shadow(0 6px 6px rgba(0,0,0,.28))}
|
||||
/* Zahnrad dreht sich beim Darüberfahren */
|
||||
.ui-animiert #btn-settings svg{transition:transform .6s cubic-bezier(.3,.7,.3,1)}
|
||||
.ui-animiert #btn-settings:hover svg{transform:rotate(120deg)}
|
||||
/* Karte einer laufenden Instanz: pulsierender Rand */
|
||||
.card.laeuft::after{content:'';position:absolute;inset:-1px;border:2px solid var(--accent);border-radius:inherit;pointer-events:none;opacity:.85}
|
||||
.ui-animiert .card.laeuft::after{animation:laeuft-puls 1.9s ease-in-out infinite}
|
||||
@keyframes laeuft-puls{0%,100%{opacity:.3;box-shadow:0 0 0 0 transparent}50%{opacity:1;box-shadow:0 0 12px 0 var(--accent)}}
|
||||
/* weggefallene Karte schrumpft an ihrer alten Stelle weg */
|
||||
.flip-geist{position:fixed!important;margin:0!important;pointer-events:none;z-index:50}
|
||||
/* Abbau-Risse auf dem Block (nur im Minecraft-Design sichtbar) */
|
||||
.card-riss{display:none;position:absolute;left:50%;top:14px;width:44px;height:44px;margin-left:-22px;background-size:100% 100%;image-rendering:pixelated;pointer-events:none;z-index:1}
|
||||
/* Lichtpunkte im Instanzbereich (nur AeroMC/Nachtlila mit bewegter Oberfläche) */
|
||||
.lichtpunkte{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
|
||||
.lichtpunkte i{position:absolute;left:var(--x);top:var(--y);width:var(--g);height:var(--g);border-radius:50%;opacity:0;will-change:transform,opacity;animation:lichtpunkt var(--d) ease-in-out var(--v) infinite}
|
||||
@keyframes lichtpunkt{0%{opacity:0;transform:translate(0,0)}25%{opacity:var(--o)}75%{opacity:var(--o)}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
|
||||
/* Designwechsel weich überblenden */
|
||||
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:ease}
|
||||
.side{background:var(--win);border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden;padding:10px 8px}
|
||||
@@ -150,6 +168,12 @@ body.is-popout>.titelleiste{display:none}
|
||||
.sbtn:disabled{opacity:.5;cursor:default}
|
||||
.sbtn:disabled:hover{background:none;border-color:transparent}
|
||||
.sbtn.play{font-weight:600}
|
||||
/* Starten-Knopf füllt sich während Download/Vorbereitung */
|
||||
.sbtn.play{position:relative;overflow:hidden;isolation:isolate}
|
||||
.sbtn.play .play-text{position:relative;z-index:1}
|
||||
.sbtn.play::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);opacity:.35;z-index:0;transition:width .35s ease}
|
||||
.sbtn.play.laedt::before{width:var(--fortschritt,0%)}
|
||||
.sbtn.play.laedt .play-text{font-weight:600;font-size:11.5px}
|
||||
.sbtn.del:hover{color:var(--danger)}
|
||||
|
||||
/* ---------- Instanzliste / Gruppen / Kacheln ---------- */
|
||||
@@ -364,6 +388,27 @@ body.is-popout>header.toolbar,body.is-popout>main.workspace,body.is-popout>foote
|
||||
.skin-bild canvas{max-width:100%;max-height:100%;cursor:grab}
|
||||
.skin-bild canvas:active{cursor:grabbing}
|
||||
.popout-host .skin-bild{height:240px}
|
||||
.skin-armform-hinweis{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 10px;border:1px solid #c9a227;border-radius:6px;background:rgba(201,162,39,.12);font-size:12px;line-height:1.45}
|
||||
.skin-armform-hinweis span{flex:1}
|
||||
.skin-armform-hinweis.hidden{display:none}
|
||||
/* Garderobe im Skin-Fenster */
|
||||
.skin-garderobe{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
|
||||
.garderobe-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
|
||||
.garderobe-knoepfe{display:flex;gap:6px}
|
||||
.garderobe-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-bottom:6px}
|
||||
.garderobe-leer{grid-column:1/-1;padding:14px;text-align:center;color:var(--dim);font-size:12px;border:1px dashed var(--border);border-radius:6px}
|
||||
.gard-karte{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 6px;border:1px solid var(--border);border-radius:6px;background:rgba(127,127,127,.06)}
|
||||
.gard-bild{width:64px;height:96px;object-fit:contain;image-rendering:auto}
|
||||
.gard-bild.umhang{width:96px;height:48px;image-rendering:pixelated;object-fit:contain}
|
||||
.gard-name{width:100%;font-size:11.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.gard-merk{font-size:10px;color:var(--dim)}
|
||||
.gard-aktionen{display:flex;gap:4px;width:100%}
|
||||
.gard-aktionen .btn{flex:1;padding:3px 0;font-size:11px}
|
||||
.gard-mini{position:absolute;top:3px;border:none;background:none;color:var(--dim);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:3px}
|
||||
.gard-mini:hover{background:rgba(127,127,127,.2);color:var(--text)}
|
||||
.gard-mini.links{left:3px}
|
||||
.gard-mini.rechts{right:3px}
|
||||
|
||||
.skin-umhang{margin-top:12px;padding-top:10px;border-top:1px solid var(--border2)}
|
||||
.skin-umhang .field-row{margin-top:6px}
|
||||
.skin-umhang .field{margin-bottom:6px}
|
||||
@@ -536,8 +581,35 @@ img.account-av{object-fit:cover;image-rendering:auto}
|
||||
.friends-section-title{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 6px}
|
||||
.friend-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:3px}
|
||||
.friend-row:hover{background:var(--sel,rgba(0,0,0,.04))}
|
||||
.friend-row.gezeigt{box-shadow:inset 3px 0 0 var(--accent)}
|
||||
/* Bühne mit der 3D-Figur des Freundes */
|
||||
.freund-buehne{position:relative;height:190px;margin:10px 0 6px;border:1px solid var(--border);border-radius:8px;overflow:hidden;
|
||||
background:radial-gradient(ellipse at 50% 85%,rgba(127,127,127,.18),transparent 60%)}
|
||||
.freund-buehne.hidden{display:none}
|
||||
.freund-buehne canvas{display:block;width:100%;height:100%}
|
||||
.freund-buehne-text{position:absolute;left:10px;bottom:8px;display:flex;flex-direction:column;gap:1px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
|
||||
.freund-buehne-text b{font-size:13px}
|
||||
.freund-buehne-text span{font-size:11px;color:var(--dim)}
|
||||
/* Popout: Liste links, Figur rechts daneben (füllt die Höhe); schmal -> untereinander */
|
||||
#modal-friends.popout-host .modal-body{display:flex;flex-direction:column}
|
||||
#modal-friends.popout-host .freunde-raster{flex:1 1 auto;min-height:0}
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)){display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,42%);gap:14px}
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)) .freunde-spalte{min-height:0;overflow:auto;padding-right:2px}
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)) .freund-buehne{height:auto;margin:0}
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)) .freund-buehne-text{left:14px;bottom:12px}
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)) .freund-buehne-text b{font-size:15px}
|
||||
@media (max-width:620px){
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)){display:flex;flex-direction:column-reverse;justify-content:flex-end}
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)) .freund-buehne{flex:none;height:190px;margin:10px 0 6px}
|
||||
#modal-friends.popout-host .freunde-raster:has(>.freund-buehne:not(.hidden)) .freunde-spalte{overflow:visible}
|
||||
}
|
||||
.friend-dot{width:9px;height:9px;border-radius:50%;background:#8a8a8a;flex:0 0 auto}
|
||||
.friend-dot.online{background:#3bb54a}
|
||||
/* Freund kommt online: Kopf hüpft, Punkt pulsiert einmal */
|
||||
.ui-animiert .friend-row.kommt-online .friend-avatar{animation:kopf-huepfen .75s cubic-bezier(.3,.7,.4,1) 2}
|
||||
@keyframes kopf-huepfen{0%,100%{transform:none}30%{transform:translateY(-7px) scale(1.08)}55%{transform:translateY(0) scale(1.05,.94)}75%{transform:translateY(-2px)}}
|
||||
.ui-animiert .friend-row.kommt-online .friend-dot{animation:punkt-puls 1.1s ease-out 2}
|
||||
@keyframes punkt-puls{0%{box-shadow:0 0 0 0 rgba(59,181,74,.85)}100%{box-shadow:0 0 0 10px rgba(59,181,74,0)}}
|
||||
.friend-avatar{width:28px;height:28px;border-radius:4px;flex:0 0 auto;background:#1e1e1e;object-fit:contain}
|
||||
.friend-info{flex:1;min-width:0}
|
||||
.friend-name{font-size:13px}
|
||||
@@ -576,6 +648,45 @@ img.account-av{object-fit:cover;image-rendering:auto}
|
||||
.settings-hero h4{margin:0 0 6px;font-size:20px;font-weight:700}
|
||||
.settings-hero p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
|
||||
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
|
||||
/* Optionen: eine Spalte, jede Einstellung eine Zeile (Text links, Bedienelement rechts) */
|
||||
#modal-settings .settings-grid{grid-template-columns:minmax(0,1fr);max-width:760px}
|
||||
#modal-settings .settings-card-wide{grid-column:auto}
|
||||
#modal-settings .settings-card{padding:14px 18px 6px}
|
||||
#modal-settings .settings-card h5{margin:0 0 4px}
|
||||
.s-zeile{display:flex;align-items:center;gap:18px;padding:11px 0;border-top:1px solid var(--border)}
|
||||
.settings-card h5+.s-zeile,.s-vorab+.s-zeile{border-top:none}
|
||||
.s-zeile.s-voll{flex-direction:column;align-items:stretch;gap:8px}
|
||||
.s-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
|
||||
.s-text b{font-size:13px;font-weight:600}
|
||||
.s-text small{font-size:12px;color:var(--dim);line-height:1.45}
|
||||
.s-wert{flex:0 0 auto;width:230px}
|
||||
.s-wert.s-breit{width:min(320px,48%)}
|
||||
.s-wert.s-zahl{width:110px}
|
||||
select.s-wert,input.s-wert{padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:13px}
|
||||
.s-paar,.s-einheit,.s-regler{display:flex;align-items:center;gap:8px}
|
||||
.s-paar input,.s-einheit input{width:0;flex:1 1 0;min-width:0;padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:13px}
|
||||
.s-paar span,.s-einheit span,.s-regler>span{color:var(--dim);font-size:12px;white-space:nowrap}
|
||||
.s-regler input{flex:1;min-width:0}
|
||||
.s-regler>span{min-width:42px;text-align:right}
|
||||
.s-vorab{display:block;margin:2px 0 6px;color:var(--dim)}
|
||||
.s-warnung{color:#d9822b}
|
||||
#s-backup-status,#s-restore-status{display:block;margin:-4px 0 10px}
|
||||
.s-felder{padding:0 0 6px}
|
||||
.s-zeile .field-row .field{margin-bottom:0}
|
||||
.s-zeile .path-row select{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font-family:inherit;font-size:13px}
|
||||
.s-zeile>.btn{flex:none;white-space:nowrap}
|
||||
.settings-card .backup-progress{margin:0 0 12px}
|
||||
/* Schalter (statt Häkchen) */
|
||||
.schalter{position:relative;flex:none;width:40px;height:22px;cursor:pointer}
|
||||
.schalter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
|
||||
.schalter i{position:absolute;inset:0;border-radius:11px;background:rgba(127,127,127,.38);transition:background .18s}
|
||||
.schalter i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .18s}
|
||||
.schalter input:checked+i{background:var(--accent)}
|
||||
.schalter input:checked+i::after{transform:translateX(18px)}
|
||||
.schalter input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
|
||||
.schalter input:disabled{cursor:default}
|
||||
.schalter input:disabled+i{opacity:.45}
|
||||
@media (max-width:640px){.s-zeile{flex-wrap:wrap}.s-wert,.s-wert.s-breit{width:100%}}
|
||||
.settings-grid-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
|
||||
.settings-card{background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:12px;padding:16px 16px 12px;box-shadow:0 1px 0 rgba(255,255,255,.5)}
|
||||
.settings-card h5{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--text)}
|
||||
@@ -651,7 +762,27 @@ img.account-av{object-fit:cover;image-rendering:auto}
|
||||
.upd-arrow{color:var(--dim)}
|
||||
.upd-newv{font-weight:700;color:var(--accent)}
|
||||
.upd-channel{margin:-6px 0 12px;text-align:center}
|
||||
.upd-notes{max-height:180px;overflow:auto;background:var(--input,#fff);border:1px solid var(--border);border-radius:3px;padding:10px 12px;font-size:12px;white-space:pre-wrap;margin-bottom:12px}
|
||||
.upd-notes{max-height:180px;overflow:auto;background:var(--input,#fff);border:1px solid var(--border);border-radius:3px;padding:10px 14px;font-size:12.5px;line-height:1.5;margin-bottom:12px;overflow-wrap:anywhere}
|
||||
/* Markdown in den Update-Hinweisen */
|
||||
.upd-notes>:first-child{margin-top:0}
|
||||
.upd-notes>:last-child{margin-bottom:0}
|
||||
.upd-notes h4{margin:14px 0 6px;font-size:15px;font-weight:700}
|
||||
.upd-notes h5{margin:12px 0 4px;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
|
||||
.upd-notes h6{margin:10px 0 4px;font-size:12.5px;font-weight:700}
|
||||
.upd-notes p{margin:6px 0}
|
||||
.upd-notes ul,.upd-notes ol{margin:4px 0 8px;padding-left:20px}
|
||||
.upd-notes ul ul,.upd-notes ol ul,.upd-notes ul ol{margin:3px 0 2px}
|
||||
.upd-notes li{margin:3px 0}
|
||||
.upd-notes li::marker{color:var(--accent)}
|
||||
.upd-notes code{padding:1px 5px;border-radius:4px;background:rgba(127,127,127,.18);font-family:Consolas,"Cascadia Mono",monospace;font-size:11.5px}
|
||||
.upd-notes pre{margin:8px 0;padding:8px 10px;border-radius:6px;background:rgba(127,127,127,.14);overflow:auto}
|
||||
.upd-notes pre code{padding:0;background:none}
|
||||
.upd-notes blockquote{margin:8px 0;padding:2px 0 2px 10px;border-left:3px solid var(--accent);color:var(--dim)}
|
||||
.upd-notes hr{border:none;border-top:1px solid var(--border);margin:12px 0}
|
||||
.upd-notes a{color:var(--link,var(--accent));text-decoration:underline;cursor:pointer}
|
||||
/* als eigenes Fenster: Hinweise füllen den freien Platz */
|
||||
#modal-update.popout-host .modal-body{display:flex;flex-direction:column}
|
||||
#modal-update.popout-host .upd-notes{flex:1 1 auto;max-height:none;min-height:120px}
|
||||
.upd-progress{margin:10px 0}
|
||||
.upd-bar{height:8px;background:var(--border2);border-radius:4px;overflow:hidden}
|
||||
.upd-bar-fill{height:100%;width:0;background:var(--accent);transition:width .2s}
|
||||
@@ -682,6 +813,32 @@ img.account-av{object-fit:cover;image-rendering:auto}
|
||||
.ctx-strong{font-weight:600}
|
||||
.ctx-danger:hover{background:var(--danger);color:#fff}
|
||||
.ctx-sep{height:1px;background:var(--border);margin:4px 6px}
|
||||
/* Erfolg-Meldung wie im Spiel („Erfolg erzielt!“) */
|
||||
.erfolg-meldungen{position:fixed;top:92px;right:14px;z-index:300;display:flex;flex-direction:column;gap:8px}
|
||||
/* Grundform (Klassisch): Karte in den Farben des Designs */
|
||||
.erfolg{position:relative;display:flex;align-items:center;gap:10px;min-width:250px;max-width:320px;padding:9px 14px 9px 9px;cursor:pointer;
|
||||
background:var(--win);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:6px;
|
||||
box-shadow:0 10px 26px rgba(0,0,0,.35);color:var(--text)}
|
||||
.erfolg-symbol{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:5px;background:rgba(127,127,127,.15)}
|
||||
.erfolg-symbol svg,.erfolg-symbol img{width:28px;height:28px}
|
||||
.erfolg-kopf{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
|
||||
.erfolg-name{font-size:13px;font-weight:600;line-height:1.3}
|
||||
/* Funken (alle Designs außer Minecraft) und XP-Kugeln (Minecraft) */
|
||||
.erfolg .funke{position:absolute;z-index:2;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 5px 2px var(--accent),0 0 12px 3px var(--accent);pointer-events:none}
|
||||
.erfolg .xp-kugel{position:absolute;width:8px;height:8px;margin-top:-4px;border-radius:50%;pointer-events:none;
|
||||
background:radial-gradient(circle at 35% 35%,#fbff9c 0 25%,#b8f531 45%,#4f9a12 80%);box-shadow:0 0 6px 1px rgba(182,255,58,.75)}
|
||||
.ui-animiert .erfolg{animation:erfolg-rein .45s cubic-bezier(.2,.8,.2,1) both}
|
||||
.ui-animiert .erfolg.weg{animation:erfolg-raus .35s ease-in both}
|
||||
@keyframes erfolg-rein{from{transform:translateX(120%);opacity:0}}
|
||||
@keyframes erfolg-raus{to{transform:translateX(120%);opacity:0}}
|
||||
/* Übersicht in der Statistik */
|
||||
.erfolge-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin-bottom:12px}
|
||||
.erfolg-karte{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid var(--border);border-radius:6px}
|
||||
.erfolg-karte .erfolg-symbol{width:32px;height:32px}
|
||||
.erfolg-karte b{display:block;font-size:12px}
|
||||
.erfolg-karte small{display:block;font-size:11px;color:var(--dim);line-height:1.3}
|
||||
.erfolg-karte.offen{opacity:.45;filter:grayscale(1)}
|
||||
|
||||
/* Konto-Menü oben rechts (wie in MultiMC) */
|
||||
.acct-pfeil{font-size:9px;opacity:.7;margin-left:-2px}
|
||||
.konto-menu{min-width:220px}
|
||||
|
||||
Reference in New Issue
Block a user