38 lines
3.3 KiB
CSS
38 lines
3.3 KiB
CSS
/* Runde 2: Boss, Canvas-Minispiel, Barrierefreiheit */
|
|
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
|
.skip-link{position:absolute;left:8px;top:-40px;z-index:9999;background:var(--px-gold,#ffd166);color:#0b0e1c;padding:6px 10px;font-weight:bold}
|
|
.skip-link:focus{top:8px}
|
|
:focus-visible{outline:3px solid var(--px-gold,#ffd166)!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(0,0,0,.6)!important}
|
|
body.kbd-nav :focus{outline:3px solid var(--px-gold,#ffd166);outline-offset:2px}
|
|
.r2-boss pre.r2-code{background:#0b0e1c;color:#e6e8f5;padding:8px;border:2px solid var(--px-border2,#3a4480);overflow:auto;font-size:13px;line-height:1.4;white-space:pre}
|
|
.r2-hp{display:flex;align-items:center;gap:6px;margin:4px 0;font-size:12px}
|
|
.r2-hp span{min-width:72px}
|
|
.r2-hpbar{flex:1;height:10px;background:#0b0e1c;border:2px solid var(--px-border2,#3a4480)}
|
|
.r2-hpbar i{display:block;height:100%;background:#e94560}
|
|
.r2-hp.me .r2-hpbar i{background:#5ee6a8}
|
|
.r2-kind{display:inline-block;padding:1px 6px;background:var(--px-panel2,#232849);border:1px solid var(--px-border2,#3a4480);margin-right:4px}
|
|
.boss-answers kbd{display:inline-block;min-width:1.2em;padding:0 3px;border:1px solid currentColor;margin-right:4px;font-size:11px}
|
|
.r2-log{font-size:12px;opacity:.85;margin:6px 0 0;padding-left:16px}
|
|
.r2-bug canvas{width:100%;max-width:640px;image-rendering:pixelated;border:3px solid var(--px-border2,#3a4480);display:block;cursor:crosshair}
|
|
.r2-badges img{image-rendering:pixelated;margin-right:4px}
|
|
body[data-theme="light"] .r2-boss pre.r2-code{background:#f4f4f8;color:#111}
|
|
@media (prefers-reduced-motion: reduce){
|
|
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
|
|
.px-particles,.px-flash{display:none!important}
|
|
}
|
|
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important}
|
|
body.reduce-motion .px-particles,body.reduce-motion .px-flash{display:none!important}
|
|
|
|
/* ---------- Konto / Login ---------- */
|
|
.ck-acct { border: 3px solid currentColor; padding: 12px; margin: 12px 0; image-rendering: pixelated; }
|
|
.ck-acct details { margin-top: 10px; }
|
|
.ck-acct form, .ck-auth-dlg form { display: flex; flex-direction: column; gap: 6px; }
|
|
.ck-auth-dlg { max-width: 420px; width: calc(100% - 32px); border: 4px solid currentColor; box-shadow: 6px 6px 0 rgba(0,0,0,.6); padding: 16px; background: var(--panel, #1b1b2f); color: var(--text, #eee); }
|
|
.ck-auth-dlg::backdrop { background: rgba(0,0,0,.6); }
|
|
.ck-auth-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
|
|
.ck-auth-tabs [role=tab] { flex: 1; border: 3px solid currentColor; background: transparent; color: inherit; padding: 8px; font: inherit; cursor: pointer; }
|
|
.ck-auth-tabs [role=tab][aria-selected=true] { background: var(--accent, #7cf); color: #000; }
|
|
.ck-auth-dlg input, .ck-acct input { border: 3px solid currentColor; padding: 8px; font: inherit; background: rgba(0,0,0,.25); color: inherit; }
|
|
.ck-auth-err { color: #ff6b6b; min-height: 1.2em; margin: 4px 0; }
|
|
.ck-acct .danger, .ck-auth-dlg .danger { background: #c0392b; color: #fff; }
|
|
.ck-auth-dlg :focus-visible, .ck-acct :focus-visible { outline: 3px dashed var(--accent, #ff0); outline-offset: 2px; }
|