/* Background classes. Apply on AND on .ww-player-frame so :fullscreen on the embed shows the same texture. SVG inline / CSS gradients as data URIs to avoid network round-trips. Todas las texturas se escriben con `.bg-set` (la pone `applyBackground` cuando el fondo NO es «ninguno»): así el lienzo ELEGIDO gana al que pinte el tema, sin depender de qué hoja cargue después. Ver core/backgrounds.js. */ body.bg-none { /* default; nothing */ } /* LA TINTA DEL LIENZO, EN UNA SOLA REGLA (§3 · plan de temas y fondos). Antes cada fondo oscuro traía su propio `color: #f5f5dc` y hasta su propio `.card { … }`: un FONDO estilando COMPONENTES, que es terreno del tema. La tinta ahora la DECLARA el manifest (`BACKGROUNDS[x].ink`), `applyBackground` la pone en `--ww-bg-ink` y esta regla la aplica. Un fondo nuevo no escribe CSS de legibilidad: declara su tinta (o pide placa) y CI le mide el contraste contra su `colorBase`. Lleva `.bg-set` por el mismo motivo que las texturas: un tema puede fijar el color del lienzo (`.ww-player-frame.skin-tv-show { color: var(--ww-fg) }`) y su hoja carga después. Con el empate ganaba el tema y el texto salía en la tinta del PLATÓ sobre el papel del profe: 1,0:1, invisible. La tinta del lienzo manda sobre la paleta base del tema — es la regla de cercanía al píxel (veredicto > placa > tinta del lienzo > paleta). */ body.bg-set.bg-inked, .ww-player-frame.bg-set.bg-inked { color: var(--ww-bg-ink); } /* …pero la tinta del lienzo NO entra en lo que tiene relleno propio. Al retirar los `body.bg-X .card{…}` (un fondo estilando componentes) las tarjetas quedaron dependiendo de que Bootstrap 5.3 fije el `color` de `.card`. Aquí el CDN está bloqueado y no se puede comprobar, así que se declara explícito: la tarjeta es del TEMA, pase lo que pase con la hoja de terceros. */ body.bg-set.bg-inked .card, .ww-player-frame.bg-set.bg-inked .card { color: var(--ww-card-fg, var(--ww-fg, #1f2937)); } /* Pizarra escolar verde. */ body.bg-set.bg-greenboard, .ww-player-frame.bg-set.bg-greenboard { background: #1f5135; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 4px 4px, 7px 7px; background-position: 0 0, 2px 3px; } body.bg-set.bg-grid, .ww-player-frame.bg-set.bg-grid { background: linear-gradient(to right, rgba(99,102,241,.15) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(to bottom, rgba(99,102,241,.15) 1px, transparent 1px) 0 0/24px 24px, #fafafa; } body.bg-set.bg-corkboard, .ww-player-frame.bg-set.bg-corkboard { background: #c8985a; background-image: radial-gradient(rgba(80,50,20,.25) 1.5px, transparent 1.5px), radial-gradient(rgba(120,80,40,.18) 1px, transparent 1px); background-size: 5px 5px, 8px 8px; background-position: 0 0, 3px 4px; } /* Classroom — warm soft wall, light enough for any skin. */ body.bg-set.bg-classroom, .ww-player-frame.bg-set.bg-classroom { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,255,255,.5), transparent 60%), linear-gradient(180deg, #fbf3df 0%, #efe2c4 100%); background-image: radial-gradient(rgba(180,150,90,.10) 1px, transparent 1px); background-size: 7px 7px; } /* Arena — game-show / sports stage. Deep blue with team spotlights; pairs with the Colegios skin's floating panels (which show through over it). */ body.bg-set.bg-arena, .ww-player-frame.bg-set.bg-arena { background: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(120,140,255,.28), transparent 60%), radial-gradient(circle at 14% 92%, rgba(37,99,235,.22), transparent 46%), radial-gradient(circle at 86% 92%, rgba(220,38,38,.18), transparent 46%), repeating-linear-gradient(135deg, transparent 0 30px, rgba(255,255,255,.016) 30px 31px), linear-gradient(180deg, #0c1530 0%, #070a16 100%); } /* Custom — teacher-uploaded photo, painted from the --ww-bg-image inline var. */ body.bg-set.bg-custom, .ww-player-frame.bg-set.bg-custom { background-image: var(--ww-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; } /* La textura acompaña al scroll, no a la página (una sola regla: eran diez idénticas, una por fondo). Va DESPUÉS de las texturas porque sus atajos `background:` reinician `background-attachment` a `scroll`, y con `:not()` para igualar su especificidad — si no, no llegaría a aplicarse. */ body.bg-set:not(.bg-none) { background-attachment: fixed; } /* Preview tiles (editor picker) — same backgrounds but contained. El alto por defecto (antes en línea, dentro de backgroundPreviewHtml): aquí se puede sobrescribir por contexto, que es lo que hace la página de jugar. */ .ww-bg-preview { height: 60px; } .ww-bg-preview.bg-greenboard { background: #1f5135; } .ww-bg-preview.bg-grid { background: linear-gradient(to right, rgba(99,102,241,.3) 1px, transparent 1px) 0 0/8px 8px, linear-gradient(to bottom, rgba(99,102,241,.3) 1px, transparent 1px) 0 0/8px 8px, #fafafa; } .ww-bg-preview.bg-corkboard { background: #c8985a; } .ww-bg-preview.bg-classroom { background: linear-gradient(180deg, #fbf3df, #efe2c4); } .ww-bg-preview.bg-arena { background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(120,140,255,.5), transparent 60%), linear-gradient(180deg, #0c1530, #070a16); } .ww-bg-preview.bg-none { background: repeating-linear-gradient(45deg, #f3f4f6 0 6px, #e5e7eb 6px 12px); }