292 lines
18 KiB
CSS
292 lines
18 KiB
CSS
/* Code-Kumpel Pixel-UI: ueberschreibt style.css fuer einheitlichen Pixel-Look */
|
|
:root{--px-ink:#0b0e1c;--px-panel:#171b33;--px-panel2:#232849;--px-blue:#3d5afe;--px-green:#5ee6a8;--px-gold:#ffd166}
|
|
body{background:#0f1222 repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.015) 3px 4px)}
|
|
h1,h2,h3,nav button,button,.filebtn,#lvl,#xptxt,#stagename,#mood{font-family:'Pixelify Sans','VT323',ui-monospace,monospace;letter-spacing:.5px}
|
|
h1{font-size:26px;text-shadow:3px 3px 0 var(--px-ink)}h1::before{content:"";display:inline-block;width:28px;height:28px;margin-right:10px;vertical-align:-5px;background:url(favicon-pixel.svg) center/contain no-repeat;image-rendering:pixelated}
|
|
img,#avatar,.px-ico,.px-star{image-rendering:pixelated}
|
|
section,.mem,.prop,#bubble,.skill{border-radius:0;box-shadow:0 0 0 3px var(--px-ink),0 0 0 6px #2a3260,6px 6px 0 6px var(--px-ink)}
|
|
section{margin:6px}#bubble{border-radius:0;position:relative;box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px #3a4480}
|
|
.bar{border-radius:0;height:14px;box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px #3a4480}
|
|
#xpbar{background:repeating-linear-gradient(90deg,var(--px-green) 0 6px,#2fb57a 6px 8px)}
|
|
input,textarea,select{border-radius:0;border:3px solid #333a6b}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--px-green)}
|
|
button,.filebtn{border-radius:0;padding:8px 14px;box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.25),0 0 0 3px var(--px-ink);transition:none}
|
|
button:active{transform:translate(2px,2px);box-shadow:inset 3px 3px 0 rgba(0,0,0,.35),0 0 0 3px var(--px-ink)}
|
|
nav{gap:10px}nav button{display:inline-flex;align-items:center;gap:6px}
|
|
nav button::before{content:"";width:20px;height:20px;background:center/contain no-repeat;image-rendering:pixelated}
|
|
nav button[data-tab=teach]::before{background-image:url(assets/ui/teach.svg)}
|
|
nav button[data-tab=observe]::before{background-image:url(assets/ui/observe.svg)}
|
|
nav button[data-tab=practice]::before{background-image:url(assets/ui/practice.svg)}
|
|
nav button[data-tab=skills]::before{background-image:url(assets/ui/skills.svg)}
|
|
nav button[data-tab=memory]::before{background-image:url(assets/ui/memory.svg)}
|
|
nav button[data-tab=settings]::before{background-image:url(assets/ui/settings.svg)}
|
|
#chatform button{display:inline-flex;align-items:center;gap:4px}#chatform button::after{content:"";width:16px;height:16px;background:url(assets/ui/send.svg) center/contain no-repeat}
|
|
.tag{border-radius:0;box-shadow:0 0 0 2px var(--px-ink)}
|
|
.px-ico{display:inline-block;width:22px;height:22px;vertical-align:-5px;margin-right:6px;background:center/contain no-repeat}
|
|
.px-star{display:inline-block;width:16px;height:16px;margin-left:2px;background:url(assets/ui/star_off.svg) center/contain no-repeat}.px-star.on{background-image:url(assets/ui/star_on.svg)}
|
|
.skill{margin:10px 4px;align-items:center}
|
|
.br-frontend{background-image:url(assets/ui/br_frontend.svg)}.br-backend{background-image:url(assets/ui/br_backend.svg)}.br-ki{background-image:url(assets/ui/br_ki.svg)}.br-mobile{background-image:url(assets/ui/br_mobile.svg)}.br-tools{background-image:url(assets/ui/br_tools.svg)}
|
|
|
|
/* ---- Pixel-Hintergrund (Weltall) hinter dem Buddy ---- */
|
|
#stage{
|
|
position:relative;
|
|
overflow:hidden;
|
|
background:
|
|
radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--px-aura) 18%, transparent) 0%, transparent 55%),
|
|
url(assets/bg/space.svg) center/64px 64px repeat;
|
|
image-rendering:pixelated;
|
|
min-height:240px;
|
|
border-radius:0;
|
|
}
|
|
#stage::before{
|
|
content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
|
|
background:
|
|
radial-gradient(1px 1px at 12% 22%, #fff 98%, transparent),
|
|
radial-gradient(1px 1px at 78% 18%, #9aa3d6 98%, transparent),
|
|
radial-gradient(2px 2px at 62% 58%, #fff 98%, transparent),
|
|
radial-gradient(1px 1px at 28% 72%, #6fa8ff 98%, transparent),
|
|
radial-gradient(1px 1px at 88% 80%, #ffd166 98%, transparent),
|
|
radial-gradient(1px 1px at 45% 35%, #fff 98%, transparent);
|
|
animation:px-twinkle 2.4s steps(4) infinite;
|
|
image-rendering:pixelated;
|
|
}
|
|
#stage::after{
|
|
content:"";position:absolute;inset:0;pointer-events:none;
|
|
background:linear-gradient(180deg,transparent 60%, color-mix(in srgb, var(--px-panel) 70%, transparent) 100%);
|
|
}
|
|
#avatar{position:relative;z-index:2}
|
|
|
|
@keyframes px-twinkle{
|
|
0%,100%{opacity:.35}
|
|
25%{opacity:.7}
|
|
50%{opacity:.45}
|
|
75%{opacity:.85}
|
|
}
|
|
|
|
/* ---- Idle: Schweben (4 Frames) + Atmen ---- */
|
|
#avatar .body{
|
|
animation:
|
|
px-bob 1.6s steps(4) infinite,
|
|
px-breathe 2.4s steps(4) infinite;
|
|
transform-origin: center 78%;
|
|
}
|
|
@keyframes px-bob{
|
|
0%{transform:translateY(0)}
|
|
25%{transform:translateY(-3px)}
|
|
50%{transform:translateY(-6px)}
|
|
75%{transform:translateY(-3px)}
|
|
100%{transform:translateY(0)}
|
|
}
|
|
@keyframes px-breathe{
|
|
0%,100%{transform:scaleY(1)}
|
|
50%{transform:scaleY(1.03)}
|
|
}
|
|
/* Combine bob+breathe on same element via wrapper trick: apply breathe on inner svg */
|
|
#avatar .body > svg{
|
|
animation:px-breathe 2.4s steps(4) infinite;
|
|
transform-origin:center 78%;
|
|
transform-box:fill-box;
|
|
}
|
|
#avatar .body{animation:px-bob 1.6s steps(4) infinite}
|
|
|
|
/* ---- Blinzeln: Augen kurz zu (scaleY auf Visor-Bereich via filter) ---- */
|
|
#avatar.blink .body > svg{filter:brightness(.92);animation:none}
|
|
#avatar.blink .body{animation:none}
|
|
/* Soft overlay lids: two black bars over eye band */
|
|
#avatar.blink::after{
|
|
content:"";position:absolute;left:28%;right:28%;top:38%;height:8%;
|
|
background:#0b0e1c;z-index:3;image-rendering:pixelated;
|
|
box-shadow:0 0 0 1px #0b0e1c;
|
|
}
|
|
|
|
/* ---- Click-Hüpfer ---- */
|
|
#avatar.hop .body{
|
|
animation:px-hop .4s steps(4) 1 !important;
|
|
}
|
|
@keyframes px-hop{
|
|
0%{transform:translateY(0) scaleY(1)}
|
|
25%{transform:translateY(-18px) scaleY(1.05)}
|
|
50%{transform:translateY(-8px) scaleY(.95)}
|
|
75%{transform:translateY(-14px) scaleY(1.02)}
|
|
100%{transform:translateY(0) scaleY(1)}
|
|
}
|
|
|
|
/* ---- Stufenwechsel: Blitz + Partikel ---- */
|
|
#avatar.evolve .body{
|
|
animation:px-evolve 1.5s steps(6) 1 !important;
|
|
}
|
|
@keyframes px-evolve{
|
|
0%{transform:translateY(0) scale(1);filter:brightness(1)}
|
|
16%{transform:translateY(-10px) scale(1.08);filter:brightness(1.8)}
|
|
33%{transform:translateY(-4px) scale(1.12);filter:brightness(2.2)}
|
|
50%{transform:translateY(-14px) scale(1.05);filter:brightness(1.6)}
|
|
66%{transform:translateY(-2px) scale(1.1);filter:brightness(1.9)}
|
|
100%{transform:translateY(0) scale(1);filter:brightness(1)}
|
|
}
|
|
.px-flash{
|
|
position:absolute;inset:0;z-index:4;pointer-events:none;
|
|
background:radial-gradient(circle at 50% 45%, #fff 0%, transparent 55%);
|
|
opacity:0;
|
|
}
|
|
.px-flash.go{animation:px-flash 1.2s steps(5) 1}
|
|
@keyframes px-flash{
|
|
0%{opacity:0}20%{opacity:.95}40%{opacity:.55}60%{opacity:.8}100%{opacity:0}
|
|
}
|
|
.px-particles{
|
|
position:absolute;left:50%;top:45%;width:0;height:0;z-index:5;pointer-events:none;
|
|
}
|
|
.px-particles i{
|
|
position:absolute;left:0;top:0;display:block;
|
|
background:var(--c,#fff);
|
|
image-rendering:pixelated;
|
|
box-shadow:1px 0 0 rgba(0,0,0,.4);
|
|
animation:px-part 1.4s steps(6) forwards;
|
|
}
|
|
@keyframes px-part{
|
|
0%{transform:translate(0,0) scale(1);opacity:1}
|
|
50%{opacity:1}
|
|
100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
|
|
}
|
|
|
|
/* Theme-aware aura tint on stage */
|
|
#stage{--stage-aura:var(--px-aura)}
|
|
|
|
/* ---- Quests tab icon ---- */
|
|
nav button[data-tab=quests]::before{background-image:url(assets/ui/quests.svg)}
|
|
|
|
/* ---- Streak flame in header ---- */
|
|
#streakslot{display:inline-flex;align-items:center}
|
|
#streakbox{display:inline-flex;align-items:center;gap:4px;margin-right:8px;font-family:'Pixelify Sans',monospace;color:var(--px-gold,#ffd166);font-size:14px}
|
|
.px-flame{display:inline-block;width:16px;height:16px;background:url(assets/ui/flame.svg) center/contain no-repeat;image-rendering:pixelated;animation:px-flame 0.8s steps(2) infinite}
|
|
@keyframes px-flame{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
|
|
|
|
/* ---- Quest cards ---- */
|
|
.quest-card{background:var(--px-panel2,#232849);padding:10px 12px;margin:8px 0;border-radius:0;box-shadow:0 0 0 3px var(--px-ink,#0b0e1c),0 0 0 5px var(--px-border,#2a3260)}
|
|
.quest-card.done{opacity:.85;outline:2px solid var(--px-green,#5ee6a8)}
|
|
.quest-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
|
|
.quest-xp{color:var(--px-gold,#ffd166);font-size:12px;font-family:'Pixelify Sans',monospace}
|
|
.quest-bar{height:10px;background:var(--px-bg,#0f1222);box-shadow:0 0 0 2px var(--px-ink,#0b0e1c);margin-bottom:4px}
|
|
.quest-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--px-green,#5ee6a8) 0 4px,color-mix(in srgb,var(--px-green,#5ee6a8) 70%,#000) 4px 6px);width:0}
|
|
|
|
/* ---- Achievement vitrine ---- */
|
|
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:8px}
|
|
.ach-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;text-align:center;background:var(--px-panel2,#232849);box-shadow:0 0 0 3px var(--px-ink,#0b0e1c),0 0 0 5px var(--px-border,#2a3260);font-size:12px;font-family:'Pixelify Sans',monospace}
|
|
.ach-card.locked{opacity:.35;filter:grayscale(1)}
|
|
.ach-card.on{box-shadow:0 0 0 3px var(--px-ink,#0b0e1c),0 0 0 5px var(--px-gold,#ffd166)}
|
|
.ach-ico{image-rendering:pixelated;width:32px;height:32px}
|
|
|
|
/* ---- Toasts ---- */
|
|
#ck-toasts{position:fixed;right:16px;bottom:16px;z-index:10000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
|
|
.ck-toast{background:var(--px-panel,#171b33);color:var(--px-text,#e6e8f5);padding:10px 14px;min-width:200px;max-width:280px;box-shadow:0 0 0 3px var(--px-ink,#0b0e1c),0 0 0 6px var(--px-gold,#ffd166),6px 6px 0 6px var(--px-ink,#0b0e1c);font-family:'Pixelify Sans',monospace;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
|
|
.ck-toast.show{opacity:1;transform:translateY(0)}
|
|
.ck-toast b{display:block;color:var(--px-gold,#ffd166);margin-bottom:2px}
|
|
.ck-toast span{font-size:12px;color:var(--px-muted,#9aa3d6)}
|
|
|
|
/* ---- Sound settings ---- */
|
|
.row-inline{display:flex;align-items:center;gap:8px;margin:8px 0}
|
|
.row-inline input[type=checkbox]{width:auto;accent-color:var(--px-green,#5ee6a8)}
|
|
input[type=range]{width:100%;height:8px;background:var(--px-panel2,#232849);border:3px solid var(--px-ink,#0b0e1c);border-radius:0;appearance:none;-webkit-appearance:none}
|
|
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--px-green,#5ee6a8);border:2px solid var(--px-ink,#0b0e1c);cursor:pointer}
|
|
|
|
/* ---- Shop / Play tab icons ---- */
|
|
nav button[data-tab=shop]::before{background-image:url(assets/ui/shop.svg)}
|
|
nav button[data-tab=play]::before{background-image:url(assets/ui/play.svg)}
|
|
|
|
/* ---- Bits & Energy in header ---- */
|
|
#bitsbox,#energybox{display:inline-flex;align-items:center;gap:4px;margin-right:8px;font-family:'Pixelify Sans',monospace;font-size:14px}
|
|
#bitsbox{color:var(--px-gold,#ffd166)}
|
|
#energybox{color:var(--px-green,#5ee6a8)}
|
|
.px-bits,.px-energy{display:inline-block;width:14px;height:14px;image-rendering:pixelated;background:center/contain no-repeat}
|
|
.px-bits{background-image:url(assets/ui/bits.svg)}
|
|
.px-energy{background-image:url(assets/ui/energy.svg)}
|
|
|
|
/* ---- Dance ---- */
|
|
#avatar.dance .body{animation:px-dance 1.2s steps(6) 1 !important}
|
|
@keyframes px-dance{
|
|
0%{transform:translate(0,0) rotate(0)}
|
|
16%{transform:translate(-8px,-6px) rotate(-8deg)}
|
|
33%{transform:translate(8px,-10px) rotate(8deg)}
|
|
50%{transform:translate(-6px,-4px) rotate(-6deg)}
|
|
66%{transform:translate(6px,-12px) rotate(6deg)}
|
|
100%{transform:translate(0,0) rotate(0)}
|
|
}
|
|
|
|
/* ---- Sleep Zzz ---- */
|
|
#stage.sleeping #avatar .body{animation:px-sleep-bob 2.8s steps(4) infinite !important;filter:brightness(.75)}
|
|
@keyframes px-sleep-bob{0%,100%{transform:translateY(4px)}50%{transform:translateY(8px)}}
|
|
.px-zzz{position:absolute;right:18%;top:18%;z-index:6;font-family:'Pixelify Sans',monospace;color:#9aa3d6;font-size:18px;text-shadow:2px 2px 0 #0b0e1c;animation:px-zzz 1.6s steps(4) infinite;pointer-events:none}
|
|
@keyframes px-zzz{0%{opacity:.4;transform:translate(0,0)}50%{opacity:1;transform:translate(6px,-10px)}100%{opacity:.3;transform:translate(10px,-18px)}}
|
|
|
|
/* ---- Giggle bubble on click ---- */
|
|
.px-giggle{position:absolute;left:58%;top:22%;z-index:7;font-family:'Pixelify Sans',monospace;font-size:14px;color:var(--px-gold,#ffd166);background:var(--px-panel2,#232849);padding:4px 8px;box-shadow:0 0 0 2px var(--px-ink),0 0 0 4px var(--px-border2,#3a4480);animation:px-giggle .9s steps(4) forwards;pointer-events:none}
|
|
@keyframes px-giggle{0%{opacity:0;transform:translateY(6px) scale(.8)}30%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-16px)}}
|
|
|
|
/* ---- Typewriter bubble ---- */
|
|
#bubble.typing::after{content:"▌";animation:px-caret .6s steps(1) infinite;margin-left:2px;color:var(--px-green)}
|
|
@keyframes px-caret{0%,100%{opacity:1}50%{opacity:0}}
|
|
|
|
/* ---- Pixel cursor ---- */
|
|
body.px-cursor,body.px-cursor *{cursor:url(assets/ui/cursor.svg) 0 0, auto}
|
|
body.px-cursor a,body.px-cursor button,body.px-cursor .filebtn,body.px-cursor select,body.px-cursor [data-tab],body.px-cursor #stage{cursor:url(assets/ui/cursor-click.svg) 0 0, pointer}
|
|
|
|
/* ---- Boot loader ---- */
|
|
#px-boot{position:fixed;inset:0;z-index:20000;background:#0b0e1c;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
|
|
#px-boot.out{opacity:0;pointer-events:none}
|
|
.px-boot-inner{text-align:center;font-family:'Pixelify Sans',monospace;color:#e6e8f5}
|
|
.px-boot-logo{width:64px;height:64px;margin:0 auto 16px;background:url(favicon-pixel.svg) center/contain no-repeat;image-rendering:pixelated;animation:px-boot-spin 0.8s steps(4) infinite}
|
|
@keyframes px-boot-spin{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
|
|
.px-boot-bar{width:160px;height:12px;margin:0 auto 12px;background:#171b33;box-shadow:0 0 0 3px #0b0e1c,0 0 0 5px #3a4480}
|
|
.px-boot-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#5ee6a8 0 6px,#2fb57a 6px 8px);animation:px-boot-bar .85s steps(8) forwards}
|
|
@keyframes px-boot-bar{to{width:100%}}
|
|
|
|
/* ---- Room backgrounds ---- */
|
|
#stage[data-room],body[data-room=space] #stage{background:
|
|
radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--px-aura) 18%, transparent) 0%, transparent 55%),
|
|
url(assets/bg/space.svg) center/64px 64px repeat}
|
|
body[data-room=werkstatt] #stage{background:
|
|
linear-gradient(180deg,#2a1f14 0%,#1a140e 100%),
|
|
repeating-linear-gradient(90deg,transparent 0 15px,rgba(255,200,100,.06) 15px 16px)}
|
|
body[data-room=bibliothek] #stage{background:
|
|
linear-gradient(180deg,#1a1530 0%,#0f0c1c 100%),
|
|
repeating-linear-gradient(0deg,transparent 0 12px,rgba(180,140,80,.12) 12px 14px)}
|
|
body[data-room=labor] #stage{background:
|
|
radial-gradient(circle at 30% 40%, rgba(94,230,168,.15), transparent 40%),
|
|
linear-gradient(180deg,#0a1a1a 0%,#061010 100%)}
|
|
|
|
/* ---- Furniture ---- */
|
|
.room-furniture{position:absolute;inset:0;z-index:1;pointer-events:none}
|
|
.furn{position:absolute;width:28px;height:28px;image-rendering:pixelated;background:center/contain no-repeat;bottom:8%;opacity:.95}
|
|
.furn-desk{left:6%;background-image:url(assets/ui/furn_desk.svg)}
|
|
.furn-plant{right:8%;background-image:url(assets/ui/furn_plant.svg)}
|
|
.furn-monitor{left:22%;bottom:18%;background-image:url(assets/ui/furn_monitor.svg)}
|
|
.furn-lamp{right:22%;bottom:20%;background-image:url(assets/ui/furn_lamp.svg)}
|
|
|
|
/* ---- Shop ---- */
|
|
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:8px 0 16px}
|
|
.shop-card{display:flex;flex-direction:column;gap:4px;padding:10px;background:var(--px-panel2);box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px var(--px-border);font-size:12px;font-family:'Pixelify Sans',monospace}
|
|
.shop-card.owned{outline:2px solid var(--px-green)}
|
|
.shop-card .acts{margin-top:auto}
|
|
.shop-ico{width:32px;height:32px;display:block;image-rendering:pixelated;background:center/contain no-repeat;background-image:url(assets/ui/shop.svg)}
|
|
.bits-bal{color:var(--px-gold)}
|
|
|
|
/* ---- Play / Boss / Bugs ---- */
|
|
.energy-row{display:flex;align-items:center;gap:8px;margin:8px 0}
|
|
.energy-bar{flex:1;height:12px;background:var(--px-bg);box-shadow:0 0 0 2px var(--px-ink)}
|
|
.energy-bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--px-green) 0 4px,color-mix(in srgb,var(--px-green) 70%,#000) 4px 6px)}
|
|
.season-card,.boss-card{background:var(--px-panel2);padding:10px 12px;margin:8px 0;box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px var(--px-border)}
|
|
.boss-hp{color:#ff8fa3;letter-spacing:2px;margin:4px 0}
|
|
.boss-answers{display:flex;flex-direction:column;gap:6px;margin-top:8px}
|
|
.path-grid{display:grid;grid-template-columns:1fr;gap:8px}
|
|
.path-btn{text-align:left;border-left:4px solid var(--pc,#5ee6a8)!important}
|
|
.path-btn .meta{display:block;font-size:11px}
|
|
.buggame{margin-top:8px}
|
|
.buggame-hud{display:flex;justify-content:space-between;font-family:'Pixelify Sans',monospace;margin-bottom:6px}
|
|
.buggame-field{position:relative;height:180px;background:#0b0e1c;box-shadow:0 0 0 3px var(--px-ink),0 0 0 5px var(--px-border);overflow:hidden}
|
|
.bug-sprite{position:absolute;width:36px;height:36px;font-size:22px;padding:0;line-height:36px;background:var(--px-panel2);border:none;box-shadow:0 0 0 2px var(--px-ink);animation:px-bug-wiggle .4s steps(2) infinite}
|
|
@keyframes px-bug-wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
|
|
|
|
/* ---- Skill buffs ---- */
|
|
.buff-list{margin:8px 0}
|
|
.buff-chip{display:inline-block;margin:3px 4px 3px 0;padding:4px 8px;background:var(--px-panel2);box-shadow:0 0 0 2px var(--px-ink);font-size:11px;font-family:'Pixelify Sans',monospace;color:var(--px-accent)}
|
|
|
|
/* ---- Night tint ---- */
|
|
body.is-night #stage::after{background:linear-gradient(180deg,rgba(20,30,80,.25) 0%, color-mix(in srgb, var(--px-panel) 80%, #102040) 100%)}
|