/* XP-Board – Design aus Figma. Alles liegt unter .xpb, damit nichts mit dem WordPress-Theme kollidiert. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; } html { background: #0e1029; } body.xpb-body { margin: 0; padding: 0; background: #0e1029; color: #fff; font-family: "Nunito", system-ui, sans-serif; } .xpb { --pink: #e0249a; --pink-dim: #6b1a4f; --field: #d9d9d9; --card: rgba(20, 20, 20, 0.95); --danger: #e01b1b; min-height: 100vh; min-height: 100dvh; background-color: #000; background-size: cover; background-position: center; background-attachment: fixed; color: #fff; font-family: "Nunito", system-ui, sans-serif; font-size: 16px; line-height: 1.3; text-align: left; } .xpb *, .xpb *::before, .xpb *::after { box-sizing: border-box; } /* :where() hält die Grundeinstellungen schwach, damit die Klassen unten sie überschreiben können */ .xpb :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; color: inherit; font-family: inherit; letter-spacing: 0; text-transform: none; } .xpb :where(h1, h2, h3) { font-weight: 400; line-height: 1.1; } .xpb :where(ul, ol) { list-style: none; } .xpb :where(a) { color: inherit; text-decoration: none; } .xpb :where(button, input, select, textarea) { font: inherit; letter-spacing: 0; } .xpb :where(small) { font-size: 0.85em; } .xpb-bg-swirl { background-image: url(img/bg-swirl.webp); } .xpb-bg-mountains { background-image: url(img/bg-mountains.webp); } .xpb-bg-lattice { background-image: url(img/bg-lattice.webp); } .xpb-bg-waves { background-image: url(img/bg-waves.webp); } .xpb-bg-sea { background-image: url(img/bg-sea.webp); } .xpb-bg-galaxy { background-image: url(img/bg-galaxy.webp); } .xpb-bg-black { background-image: none; background-color: #000; } .xpb-wrap { max-width: 72rem; margin: 0 auto; padding: 12px 16px 40px; display: flex; flex-direction: column; gap: 16px; } /* ---------- Kopf: Katze, Sprechblase, Zurück ---------- */ .xpb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 96px; } .xpb-mascot { display: flex; align-items: flex-start; gap: 4px; } .xpb-avatar { width: 96px; height: auto; } .xpb-bubble { position: relative; margin-top: 12px; max-width: 11.5rem; padding: 8px 16px; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.4)); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); font-size: 1.15rem; line-height: 1.15; } .xpb-bubble::before { content: ""; position: absolute; left: -14px; bottom: 8px; border-style: solid; border-width: 8px 14px 8px 0; border-color: transparent rgba(255, 255, 255, 0.9) transparent transparent; } .xpb-back { flex: none; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border: 4px solid var(--pink-dim); border-radius: 16px; background: #3a3a3a; transition: border-color 0.15s; } .xpb-back:hover { border-color: var(--pink); } .xpb-back svg { width: 40px; height: 40px; } /* ---------- Bausteine ---------- */ .xpb-tile { background: var(--card); border-radius: 24px; } .xpb-glass { border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 24px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(2px); } .xpb-pad { padding: 16px 20px; } .xpb-muted { color: rgba(255, 255, 255, 0.65); } .xpb-points { font-size: 6rem; font-weight: 400; line-height: 1; text-align: center; color: #fff; -webkit-text-stroke: 5px var(--pink); paint-order: stroke fill; } .xpb-field, .xpb-input, .xpb-select, .xpb-fieldbox .xpb-input { width: 100%; border: 2px solid var(--pink); border-radius: 999px; background: var(--field); color: #000; padding: 6px 20px; outline: none; } .xpb-field { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; } .xpb-field svg { width: 28px; height: 28px; flex: none; fill: #000; } .xpb-field span { flex: none; } .xpb-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: #000; font-size: 1.15rem; outline: none; padding: 4px 0; } .xpb-input, .xpb-select { font-size: 1.2rem; } .xpb-field:focus-within, .xpb-input:focus, .xpb-select:focus { box-shadow: 0 0 0 4px rgba(224, 36, 154, 0.4); } .xpb-select { cursor: pointer; } .xpb-btn, .xpb-btn-dark, .xpb-btn-danger { display: inline-block; cursor: pointer; border-radius: 999px; text-align: center; transition: filter 0.15s, border-color 0.15s, transform 0.1s; } .xpb-btn { border: 2px solid var(--pink); background: var(--field); color: #000; padding: 4px 24px; font-size: 1.5rem; } .xpb-btn:hover { filter: brightness(0.95); } .xpb-btn-active { background: var(--pink); color: #fff; } .xpb-btn-big { border-width: 4px; font-size: 2.5rem; padding: 4px 48px; } .xpb-btn-dark { border: 4px solid var(--pink-dim); background: #4a4a4a; color: #fff; padding: 4px 32px; font-size: 1.6rem; } .xpb-btn-dark:hover { border-color: var(--pink); } .xpb-btn-danger { border: 4px solid #8b1220; background: rgba(0, 0, 0, 0.4); color: #fff; padding: 8px 32px; font-size: 1.5rem; line-height: 1.15; } .xpb-btn-danger:hover { border-color: var(--danger); } .xpb-btn-danger small { display: block; font-size: 0.55em; } .xpb-btn:active, .xpb-btn-dark:active, .xpb-btn-danger:active { transform: scale(0.98); } .xpb button:disabled { opacity: 0.5; cursor: not-allowed; } .xpb-small { font-size: 1rem; padding: 2px 16px; border-width: 3px; } .xpb-block { display: block; width: 100%; font-size: 1.8rem; background: rgba(0, 0, 0, 0.4); } .xpb-formmsg { min-height: 1.3em; text-align: center; color: #ffb3b3; } .xpb-formmsg.xpb-ok { color: #a8f0b4; } .xpb-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: 1.15rem; } .xpb-toggle input { appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 2px; background: var(--field); cursor: pointer; flex: none; } .xpb-toggle input:checked { background: var(--pink); } /* ---------- Meldung (Toast) ---------- */ .xpb-toast { position: fixed; z-index: 9999; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(90vw, 24rem); padding: 8px 16px; border: 4px solid #22b33a; border-radius: 8px; background: #fff; color: #000; font-family: "Nunito", system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .xpb-toast.xpb-err { border-color: var(--danger, #e01b1b); } /* ---------- Login ---------- */ .xpb-login { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px; } .xpb-login h1 { font-size: 3.2rem; } .xpb-login .xpb-btn-big { margin-top: 8px; width: 100%; max-width: 20rem; } .xpb-prefs { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } /* ---------- Dashboard ---------- */ .xpb-dash { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "points" "nav" "notes" "settings"; } .xpb-dash-points { grid-area: points; padding: 20px; } .xpb-dash-points h2 { font-size: 1.9rem; } .xpb-dash-nav { grid-area: nav; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .xpb-dash-notes { grid-area: notes; padding: 20px; min-height: 14rem; } .xpb-dash-notes h2 { font-size: 1.9rem; margin-bottom: 12px; } .xpb-dash-settings { grid-area: settings; font-size: 2.6rem; background: rgba(0, 0, 0, 0.4); padding-top: 8px; padding-bottom: 8px; } .xpb-navlink { background: var(--card); border: 2px solid transparent; border-radius: 24px; padding: 4px 24px; font-size: 2.8rem; line-height: 1.2; transition: border-color 0.15s; } .xpb-navlink:hover { border-color: var(--pink); } .xpb-only-desktop { display: none !important; } .xpb-list { display: flex; flex-direction: column; gap: 8px; max-height: 20rem; overflow-y: auto; } .xpb-list li { padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); } .xpb-list li:has(.xpb-x) { display: flex; align-items: flex-start; gap: 8px; } .xpb-list li > span { flex: 1; min-width: 0; } .xpb-x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .xpb-x:hover { background: var(--pink); } .xpb-list small { display: block; color: rgba(255, 255, 255, 0.6); } /* ---------- Shop ---------- */ .xpb-shop-points { padding: 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 64px; } .xpb-shop-points h2 { font-size: 2.4rem; } .xpb-shop-points .xpb-points { font-size: 5rem; } .xpb-products { display: grid; gap: 20px; grid-template-columns: 1fr; } .xpb-products li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 16px 16px; } .xpb-products h3 { font-size: 1.9rem; } .xpb-products p { font-size: 1.1rem; } .xpb-products .xpb-price { color: var(--pink); } .xpb-products .xpb-btn-dark { margin-top: auto; font-size: 1.8rem; } /* ---------- Inventory ---------- */ .xpb-slots { display: grid; gap: 20px; grid-template-columns: 1fr; padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(2px); } .xpb-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 9rem; padding: 12px; text-align: center; border: 4px solid rgba(107, 26, 79, 0.7); border-radius: 24px; background: rgba(255, 255, 255, 0.05); } .xpb-slot strong { font-size: 1.8rem; font-weight: 400; } .xpb-slot small { color: rgba(255, 255, 255, 0.6); } .xpb-slot-full { border-color: var(--pink-dim); } /* ---------- Leaderboard ---------- */ .xpb-lb-top { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .xpb-lb-top section { padding: 12px; text-align: center; border-radius: 16px; } .xpb-lb-top h2 { font-size: 1.5rem; } .xpb-lb-top .xpb-points { font-size: 3.6rem; -webkit-text-stroke-width: 3px; } .xpb-ranking { display: flex; flex-direction: column; gap: 12px; } .xpb-ranking li { display: flex; align-items: center; gap: 16px; padding: 4px 16px 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px); font-size: 1.8rem; } .xpb-ranking .xpb-rank { width: 4rem; flex: none; } .xpb-ranking .xpb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xpb-ranking .xpb-xp { font-size: 1.4rem; } .xpb-ranking .xpb-me { background: rgba(224, 36, 154, 0.4); box-shadow: 0 0 0 2px var(--pink); } /* ---------- Settings ---------- */ .xpb-settings-title { text-align: center; padding: 16px 0; border-radius: 24px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px); font-size: 3.6rem; } .xpb-settings { display: grid; gap: 24px; grid-template-columns: 1fr; } .xpb-col-info, .xpb-col-account { display: flex; flex-direction: column; gap: 16px; } .xpb-pill { text-align: center; padding: 2px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px); font-size: 1.9rem; } .xpb-infobox { padding: 12px; border: 4px solid #166534; border-radius: 24px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); font-size: 1.1rem; line-height: 1.35; } .xpb-pwform { display: flex; flex-direction: column; gap: 16px; } .xpb-fieldbox { padding: 8px; border-radius: 24px; background: rgba(255, 255, 255, 0.1); } .xpb-fieldbox small { display: block; padding: 2px 12px 0; } /* ---------- XP-Board (Lehrer) ---------- */ .xpb-board { display: flex; flex-direction: column; gap: 20px; } .xpb-board-top { display: grid; gap: 20px; padding: 16px; } .xpb-modes { display: flex; justify-content: space-between; gap: 16px; } .xpb-howmuch { text-align: center; font-size: 1.6rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 999px; } .xpb-board-amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 16px; } .xpb-amount { max-width: 13rem; text-align: center; } .xpb-message { display: flex; flex-direction: column; min-height: 10rem; padding: 16px; font-size: 1.25rem; } .xpb-message textarea { flex: 1; margin-top: 8px; resize: none; border: 0; outline: none; background: transparent; color: #fff; font-size: 1.1rem; } .xpb-message textarea:disabled { opacity: 0.4; } .xpb-confirm { align-self: center; } .xpb-purchases { padding: 16px; margin-top: 8px; } .xpb-purchases h2 { font-size: 2rem; margin-bottom: 12px; } .xpb-purchase { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; } .xpb-purchase span { flex: 1; min-width: 0; } .xpb-purchase em { color: var(--pink); font-style: normal; } .xpb-purchase small { display: inline; } .xpb-staffnav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } /* ---------- Tablet & PC ---------- */ @media (min-width: 640px) { .xpb-products { grid-template-columns: repeat(2, 1fr); } .xpb-slots { grid-template-columns: repeat(2, 1fr); padding: 40px; } .xpb-avatar { width: 112px; } .xpb-bubble { font-size: 1.3rem; } .xpb-login h1 { font-size: 4.5rem; } .xpb-login .xpb-btn-big { font-size: 3rem; } .xpb-lb-top { max-width: 50%; } } @media (min-width: 768px) { .xpb-dash { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "nav points" "nav notes"; gap: 24px; } .xpb-dash-nav { justify-content: space-between; } .xpb-navlink { font-size: 3.6rem; border-color: var(--pink-dim); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(2px); } .xpb-dash-points, .xpb-dash-notes { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(2px); min-height: 15rem; } .xpb-dash-notes { min-height: 18rem; } .xpb-dash-points h2, .xpb-dash-notes h2 { font-size: 2.4rem; } .xpb-dash-points .xpb-points { font-size: 9rem; } .xpb-only-desktop { display: block !important; } .xpb-only-mobile { display: none !important; } .xpb-settings { grid-template-columns: 1fr 1fr; gap: 64px; } .xpb-col-account { order: 2; } .xpb-board-top { grid-template-columns: 1fr auto; align-items: center; } .xpb-board-top .xpb-howmuch, .xpb-board-top .xpb-board-amount { grid-column: 1 / -1; } .xpb-settings-title { font-size: 4.5rem; } } @media (min-width: 1024px) { .xpb-products { grid-template-columns: repeat(3, 1fr); } .xpb-slots { grid-template-columns: repeat(3, 1fr); column-gap: 64px; } .xpb-shop-points { max-width: 55%; justify-content: flex-start; } } @media (min-width: 768px) { .xpb-shop-points .xpb-points { font-size: 6rem; } } /* Käufe-Auswahl im XP-Board */ .xpb-purchases .xpb-select { margin-bottom: 12px; } .xpb-purchases [hidden] { display: none !important; } /* Hinweistexte im Käufe-Bereich: dunkler Untergrund, damit die Schrift auf jedem Hintergrund gut lesbar ist */ .xpb-purchases { background: rgba(0, 0, 0, 0.4); } .xpb-filter-hint { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 1.05rem; } /* ---------- Eigene Hintergründe ---------- */ .xpb-custom { background-size: cover; background-position: center; } .xpb-bgbox summary { cursor: pointer; list-style: none; } .xpb-bgbox summary::-webkit-details-marker { display: none; } .xpb-bgbox summary::after { content: " ▾"; } .xpb-bgbox[open] summary::after { content: " ▴"; } .xpb-bgnote { padding: 8px 4px; } .xpb-bglist { display: flex; flex-direction: column; gap: 10px; } .xpb-bglist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px; border-radius: 16px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); } .xpb-bgthumb { flex: none; width: 64px; height: 40px; border-radius: 8px; background: rgba(255, 255, 255, 0.15) center / cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.3); } .xpb-bgname { flex: 1; min-width: 6rem; font-size: 1.25rem; } .xpb-bglist .xpb-small { margin: 0; } /* ========================================================================== CODE-DESIGN: alles schwarz, weiße Konturen, die beim Drüberfahren leuchten, Monospace-Schrift und vor jedem Objekt der passende HTML-Tag. ========================================================================== */ .xpb-sel { display: block; width: 100%; } .xpb-amountbox { flex: 0 1 13rem; } .xpb-sel .xpb-select, .xpb-amountbox .xpb-input { width: 100%; } .xpb-code { --code-bg: #000; --code-surface: #0a0a0a; --code-line: #fff; --code-text: #e6e6e6; --code-dim: #808080; --code-pink: #e0249a; --code-purple: #bd93f9; --code-comment: #6272a4; --code-ok: #50fa7b; --code-err: #ff5555; --glow: 0 0 3px #fff, 0 0 10px rgba(255, 255, 255, 0.75), 0 0 26px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.14); background: #000 !important; background-image: none !important; color: var(--code-text); font-family: "JetBrains Mono", "JetBrainsMono Nerd Font", "JetBrainsMono NF", "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: 15px; } .xpb-code, .xpb-code * { text-shadow: none; } .xpb-code :where(button, input, select, textarea) { font-family: inherit; } .xpb-code h1, .xpb-code h2, .xpb-code h3 { font-weight: 700; letter-spacing: -0.02em; } .xpb-code .xpb-wrap { padding-top: 28px; gap: 28px; } body.xpb-body:has(.xpb-code) { background: #000; } html:has(.xpb-code) { background: #000; } /* Alle Kästen: schwarz mit weißer Kontur */ .xpb-code .xpb-tile, .xpb-code .xpb-glass, .xpb-code .xpb-slots, .xpb-code .xpb-infobox, .xpb-code .xpb-bglist li, .xpb-code .xpb-settings-title, .xpb-code .xpb-fieldbox, .xpb-code .xpb-pill, .xpb-code .xpb-ranking li, .xpb-code .xpb-list li, .xpb-code .xpb-slot, .xpb-code .xpb-navlink, .xpb-code .xpb-back, .xpb-code .xpb-dash-points, .xpb-code .xpb-dash-notes { background: var(--code-surface); border: 1px solid var(--code-line); border-radius: 6px; backdrop-filter: none; box-shadow: none; transition: box-shadow 0.35s ease, border-color 0.35s ease, color 0.35s ease; } .xpb-code .xpb-ranking li { border-radius: 4px; } .xpb-code .xpb-ranking .xpb-me { border-color: var(--code-pink); box-shadow: 0 0 10px rgba(224, 36, 154, 0.55); background: #14000c; } .xpb-code .xpb-infobox { border-color: var(--code-ok); } /* Knöpfe und Felder */ .xpb-code .xpb-btn, .xpb-code .xpb-btn-dark, .xpb-code .xpb-btn-danger { background: #000; color: var(--code-text); border: 1px solid var(--code-line); border-radius: 6px; font-weight: 500; transition: box-shadow 0.15s, color 0.15s, border-color 0.15s; } .xpb-code .xpb-btn-big { font-size: 1.8rem; border-width: 1px; } .xpb-code .xpb-btn-active { background: #1c0012; border-color: var(--code-pink); color: #fff; } .xpb-code .xpb-btn-danger { border-color: var(--code-err); color: var(--code-err); } .xpb-code .xpb-field, .xpb-code .xpb-input, .xpb-code .xpb-select { background: #000; color: var(--code-text); border: 1px solid var(--code-line); border-radius: 6px; transition: box-shadow 0.15s, border-color 0.15s; } .xpb-code .xpb-field input { color: var(--code-text); } .xpb-code .xpb-field svg { fill: var(--code-text); } .xpb-code .xpb-field svg[stroke] { fill: none; stroke: var(--code-text); } .xpb-code .xpb-field svg circle[fill] { fill: var(--code-text); } .xpb-code .xpb-input::placeholder { color: var(--code-comment); } .xpb-code .xpb-select option { background: #000; color: #fff; } .xpb-code .xpb-toggle input { border-radius: 3px; background: #000; border: 1px solid var(--code-line); } .xpb-code .xpb-toggle input:checked { background: var(--code-pink); border-color: var(--code-pink); } .xpb-code .xpb-message textarea { color: var(--code-text); } .xpb-code .xpb-howmuch { border-color: var(--code-line); border-radius: 6px; border-width: 1px; } .xpb-code .xpb-x { background: #000; border: 1px solid var(--code-dim); color: var(--code-text); border-radius: 4px; } .xpb-code .xpb-x:hover { background: #000; border-color: var(--code-pink); } .xpb-code .xpb-bgthumb { border-radius: 4px; } .xpb-code .xpb-filter-hint { background: #000; border: 1px solid var(--code-dim); color: var(--code-comment); border-radius: 4px; } /* Leuchten beim Drüberfahren */ .xpb-code .xpb-tile:hover, .xpb-code .xpb-glass:hover, .xpb-code .xpb-slot:hover, .xpb-code .xpb-ranking li:hover, .xpb-code .xpb-list li:hover, .xpb-code .xpb-navlink:hover, .xpb-code .xpb-back:hover, .xpb-code .xpb-btn:hover, .xpb-code .xpb-btn-dark:hover, .xpb-code .xpb-btn-danger:hover, .xpb-code .xpb-field:hover, .xpb-code .xpb-field:focus-within, .xpb-code .xpb-input:hover, .xpb-code .xpb-input:focus, .xpb-code .xpb-select:hover, .xpb-code .xpb-select:focus, .xpb-code .xpb-infobox:hover, .xpb-code .xpb-pill:hover, .xpb-code .xpb-bglist li:hover { box-shadow: var(--glow); border-color: #fff; filter: none; } .xpb-code .xpb-btn-danger:hover { box-shadow: 0 0 3px #fff, 0 0 10px rgba(255, 255, 255, 0.75), 0 0 26px rgba(255, 85, 85, 0.45); } .xpb-code .xpb-btn:active, .xpb-code .xpb-btn-dark:active { transform: none; } /* Zahlen: Punkte wie ein Wert im Code */ .xpb-code .xpb-points { color: var(--code-purple); -webkit-text-stroke: 0; font-weight: 700; } .xpb-code .xpb-points::before { content: "points = "; font-size: 0.28em; color: var(--code-dim); font-weight: 400; vertical-align: middle; } .xpb-code .xpb-points::after { content: ";"; font-size: 0.4em; color: var(--code-dim); font-weight: 400; } .xpb-code .xpb-lb-top .xpb-points::before { content: none; } .xpb-code .xpb-price, .xpb-code .xpb-purchase em { color: var(--code-purple); } .xpb-code .xpb-muted, .xpb-code .xpb-list small, .xpb-code .xpb-slot small { color: var(--code-comment); } .xpb-code .xpb-formmsg { color: var(--code-err); } .xpb-code .xpb-formmsg.xpb-ok { color: var(--code-ok); } .xpb-code .xpb-toast { background: #000; color: var(--code-ok); border: 1px solid var(--code-ok); border-radius: 6px; font-family: inherit; } .xpb-code .xpb-toast.xpb-err { color: var(--code-err); border-color: var(--code-err); } .xpb-code .xpb-toast::before { content: "console.log: "; color: var(--code-dim); } /* Sprechblase wird ein Kommentar */ .xpb-code .xpb-bubble { background: none; border: 0; box-shadow: none; color: var(--code-comment); padding: 8px 4px; font-size: 1rem; } .xpb-code .xpb-bubble::before { content: "// "; position: static; border: 0; display: inline; color: var(--code-comment); } .xpb-code .xpb-avatar { filter: grayscale(1) contrast(1.1); } /* Dashboard-Menü: Links mit Pfeil */ .xpb-code .xpb-navlink { font-size: 1.9rem; padding: 6px 18px; } .xpb-code .xpb-navlink::before { content: "> "; color: var(--code-pink); } /* Tags (