127 lines
6.6 KiB
CSS
127 lines
6.6 KiB
CSS
/* Code-Kumpel UI extras: mobile, widget, a11y, onboarding, iso room */
|
|
|
|
/* ---- Light theme (#65) applied via themes.css; ensure body class hooks ---- */
|
|
body.a11y-contrast{
|
|
--px-text:#fff; --px-ink:#000; --px-bg:#000; --px-panel:#111; --px-panel2:#222;
|
|
--px-border:#fff; --px-green:#0f0; --px-gold:#ff0; --px-blue:#0af; --px-danger:#f44;
|
|
filter:none;
|
|
}
|
|
body.a11y-contrast *{border-color:#fff !important}
|
|
body.a11y-big{font-size:18px}
|
|
body.a11y-big input,body.a11y-big textarea,body.a11y-big button,body.a11y-big select{font-size:1.05em;padding:10px 14px}
|
|
body.a11y-big nav button{font-size:15px}
|
|
|
|
/* ---- Mobile (#64) ---- */
|
|
@media(max-width:850px){
|
|
main{grid-template-columns:1fr;padding:10px;gap:10px}
|
|
#buddy{order:0}
|
|
#panel{order:1}
|
|
#avatar{width:180px;height:180px}
|
|
nav{gap:6px}
|
|
nav button{font-size:12px;padding:6px 8px}
|
|
nav button::before{width:16px;height:16px}
|
|
header{padding:10px 12px}
|
|
#levelbox{flex-wrap:wrap}
|
|
.bar{width:120px}
|
|
#bubble{max-height:160px;font-size:14px}
|
|
.ach-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
|
|
}
|
|
@media(max-width:480px){
|
|
h1{font-size:20px}
|
|
main{padding:6px}
|
|
section{padding:12px;margin:4px}
|
|
nav button{flex:1 1 42%;justify-content:center}
|
|
form#chatform{flex-direction:column}
|
|
form#chatform button{width:100%}
|
|
}
|
|
|
|
/* ---- Widget mode (#75) ---- */
|
|
body.widget-mode header h1{font-size:16px}
|
|
body.widget-mode #panel,
|
|
body.widget-mode #levelbox #xptxt{display:none !important}
|
|
body.widget-mode main{grid-template-columns:1fr;max-width:360px;padding:8px}
|
|
body.widget-mode #avatar{width:140px;height:140px}
|
|
body.widget-mode #stage{min-height:160px}
|
|
body.widget-mode #bubble{min-height:40px;max-height:100px;font-size:13px}
|
|
body.widget-mode #name-row #stagename{display:none}
|
|
|
|
/* ---- Isometric room sketch (#56) ---- */
|
|
body.room-iso #stage{
|
|
background:
|
|
linear-gradient(152deg, transparent 49.5%, rgba(0,0,0,.25) 50%, transparent 50.5%),
|
|
linear-gradient(28deg, transparent 49.5%, rgba(255,255,255,.06) 50%, transparent 50.5%),
|
|
linear-gradient(180deg, color-mix(in srgb, var(--px-panel2) 80%, #000) 0%, var(--px-panel) 55%, color-mix(in srgb, var(--px-ink) 40%, var(--px-panel)) 100%),
|
|
url(assets/bg/space.svg) center/48px 48px repeat;
|
|
perspective:400px;
|
|
}
|
|
body.room-iso #stage::before{
|
|
background:
|
|
/* floor tiles suggestion */
|
|
repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.04) 14px 15px),
|
|
repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.03) 14px 15px),
|
|
radial-gradient(1px 1px at 20% 30%, #fff 98%, transparent);
|
|
opacity:.4;
|
|
transform:skewX(-18deg) scaleY(.55); transform-origin:bottom center; top:45%;
|
|
}
|
|
body.room-iso #avatar{transform:translateY(8px)}
|
|
|
|
/* ---- Overlays (#62) ---- */
|
|
.ck-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:20000;display:flex;align-items:center;justify-content:center;padding:16px}
|
|
.ck-overlay.hidden{display:none}
|
|
.ck-modal{background:var(--px-panel,#171b33);color:var(--px-text,#e6e8f5);max-width:440px;width:100%;padding:20px;box-shadow:0 0 0 3px var(--px-ink,#0b0e1c),0 0 0 6px var(--px-gold,#ffd166),8px 8px 0 6px var(--px-ink,#0b0e1c);font-family:'Pixelify Sans',monospace}
|
|
.ck-modal h2{margin:0 0 10px;color:var(--px-accent,#8ef0c4)}
|
|
.ck-modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
|
|
.ck-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
|
|
.ck-dots i{width:8px;height:8px;background:var(--px-panel2,#232849);display:block;box-shadow:0 0 0 2px var(--px-ink,#0b0e1c)}
|
|
.ck-dots i.on{background:var(--px-green,#5ee6a8)}
|
|
|
|
/* ---- Offline banner (#20) ---- */
|
|
.ck-offline{position:fixed;left:12px;bottom:12px;z-index:9000;background:var(--px-danger,#c62848);color:#fff;padding:8px 12px;font-family:'Pixelify Sans',monospace;font-size:13px;box-shadow:0 0 0 3px var(--px-ink,#0b0e1c)}
|
|
.ck-offline.hidden{display:none}
|
|
|
|
/* ---- Memory groups / trust / filters ---- */
|
|
.mem-group{margin:10px 0;padding:6px 8px;background:var(--px-panel2,#232849);box-shadow:0 0 0 2px var(--px-ink,#0b0e1c)}
|
|
.mem-group summary{cursor:pointer;font-family:'Pixelify Sans',monospace;margin-bottom:6px}
|
|
.tag.trust-sicher{background:#1b5e3a;color:#5ee6a8}
|
|
.tag.trust-unsicher{background:#5e1b2a;color:#ff8fa3}
|
|
.tag.due{background:#5e4a1b;color:#ffd166}
|
|
.mem-filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;align-items:center}
|
|
.mem-filters select,.mem-filters input{width:auto;min-width:100px;flex:1}
|
|
.warn-line{color:#ff8fa3;font-size:13px;margin:4px 0}
|
|
.warn-line.info{color:var(--px-muted,#9aa3d6)}
|
|
.insight-block{margin:12px 0;padding:10px;background:var(--px-panel2,#232849);box-shadow:0 0 0 2px var(--px-ink,#0b0e1c)}
|
|
.learn-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
|
|
#due-count{color:var(--px-gold,#ffd166);font-size:13px;margin-left:8px}
|
|
|
|
/* ---- Sparkline ---- */
|
|
.spark-wrap{margin:10px 0}
|
|
.spark{display:block;background:var(--px-bg,#0f1222);box-shadow:0 0 0 2px var(--px-ink,#0b0e1c);image-rendering:pixelated}
|
|
.spark-legend{font-size:11px;margin-top:4px}
|
|
|
|
/* ---- Chat history ---- */
|
|
#chat-hist{max-height:180px;overflow:auto;margin-top:10px;font-size:13px}
|
|
.chat-hist-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
|
|
.chat-line{padding:4px 0;border-bottom:1px solid var(--px-panel2,#232849)}
|
|
.chat-line.user b{color:var(--px-blue,#3d5afe)}
|
|
.chat-line.buddy b{color:var(--px-green,#5ee6a8)}
|
|
|
|
/* ---- DnD ---- */
|
|
.drop-zone.drag-over{outline:3px dashed var(--px-green,#5ee6a8);outline-offset:4px}
|
|
.drop-hint{margin:4px 0 8px}
|
|
|
|
/* ---- Settings extras ---- */
|
|
#tab-settings .hint code{font-size:12px;word-break:break-all}
|
|
|
|
/* ---- Block E/F privacy / community / debug ---- */
|
|
.privacy-dash, .debug-panel, .community-panel, .plugins-panel { margin: 10px 0 16px; }
|
|
.privacy-stats { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; }
|
|
.privacy-stats li { background: rgba(0,0,0,.2); padding: 6px 8px; box-shadow: 2px 0 0 #2a2f4a, -2px 0 0 #2a2f4a, 0 2px 0 #2a2f4a, 0 -2px 0 #2a2f4a; }
|
|
.priv-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
|
|
.priv-table th, .priv-table td { text-align: left; padding: 4px 6px; border-bottom: 2px solid #2a2f4a; }
|
|
.priv-table tr.you { background: rgba(94,230,168,.12); }
|
|
.debug-pre { font-size: 11px; white-space: pre-wrap; background: #0a0c18; padding: 8px; max-height: 160px; overflow: auto; }
|
|
.debug-errs { font-size: 11px; padding-left: 16px; }
|
|
.backup-list { list-style: none; padding: 0; }
|
|
.backup-list li { margin: 4px 0; }
|
|
#ef-sites { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 12px; max-height: 180px; overflow: auto; }
|
|
#ef-sections h2 { margin-top: 18px; }
|