/* * shaderTrain stylesheet — reveal.js theme overrides + exercise UI. * Layered on top of reveal.js/theme/black.css (imported before this in script.js). * ported from test_presentJS/res/thuy.css (gainsboro/navy branding) */ /* * Font faces and the vi/en language tokens live in src/fonts.css, loaded before * this file on every page (lectures/k12/teacher need the fonts without the deck * theme). Only --r-main-font-size and the non-font tokens are set here. */ :root { --r-background-color: gainsboro; --r-main-font-size: 36px; --r-main-color: navy; --r-block-margin: 20px; --r-heading-margin: 0 0 20px 0; --r-heading-color: navy; --r-heading-line-height: 1.2; --r-heading-letter-spacing: normal; --r-heading-text-shadow: none; --r-heading-font-weight: bold; --r-heading1-text-shadow: none; --r-heading1-size: 2.2em; --r-heading2-size: 1.6em; --r-heading3-size: 1.2em; --r-heading4-size: 1em; --r-code-font: monospace; --r-link-color: blue; --r-link-color-dark: rgb(20, 155, 249); --r-link-color-hover: rgb(94, 187, 251); --r-selection-background-color: rgba(66, 175, 250, 0.75); --r-selection-color: #fff; } html { /* fallback so the page isn't briefly white before reveal-viewport paints */ background-color: var(--r-background-color); } .reveal-viewport { background-color: var(--r-background-color); } .reveal { font-family: var(--r-main-font); color: var(--r-main-color); position: relative; z-index: 1; } /* * bgShader.js (src/bgShader.js): toggled on body when the current slide opts in via * in content.md. #bgShaderCanvas sits at z-index:0, * behind .reveal -- only visible once the flat background color is removed here. */ body.bg-shader-on.reveal-viewport, body.bg-shader-on .reveal-viewport { background-color: transparent; } /* * Elements matched by a slide's data-bg-shader-text selector: bgShader.js overlays a * canvas (class bg-shader-mask-canvas, z-index:2) clipped to this element's own glyph * shapes with the shader's pixels. Layout/selection/screen-reader text is untouched -- * only the paint is hidden. * * ".reveal h1"-style theme rules (element+class, specificity 0,1,1) outrank a bare * ".bg-shader-masked" (0,1,0) regardless of source order, so this needs ".reveal" in * front of it to actually win. */ .reveal .bg-shader-masked { color: transparent; } /* * The generic "canvas" rule below adds a navy border/padding/radius meant for demo * canvases embedded in slide content -- bgShader.js's own canvases are full-bleed * background/overlay layers, not slide content, so opt back out of it here. */ #bgShaderCanvas, .bg-shader-mask-canvas { border: none; padding: 0; border-radius: 0; box-sizing: content-box; } /* Not a hardcoded family: h1 follows the same language switch as everything else, so an English slide's heading comes out in Futura ExtraBold as it always did. */ .reveal h1 { font-family: var(--k12-h1-font); } /* * Reveal's slide canvas is a fixed 1920x1080px box (scaled via CSS transform, * not viewport units), so percentage image sizes (width:50%) resolve against * that 1920px width and can blow past the 1080px height for tall/portrait * images. Clamp with a fixed px max-height as a fallback; content.md should * still prefer explicit px width/height per image. */ .reveal .slides section img, .reveal .slides section video { max-height: 1024px; width: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } textarea { font-family: consolas; font-style: normal; background-color: transparent; font-size: 16px; outline: none; } /* The orange/rounded button styling that used to live here was a leftover from the shader course and, loading after 98.css, overrode its silver bevelled chrome on every button in the deck. Buttons now take the Win98 look from 98.css; only sizing is adjusted (see win98_overrides.css), because the deck is a 1920x1080 canvas scaled to fit and 98.css's 11px would be unreadable. */ img { border-radius: 20px; padding: 10px; box-sizing: border-box; } canvas { border-radius: 20px; padding: 10px; border: 2px solid navy; box-sizing: border-box; } math { font-size: 32px; } #btn_load { background-color: cyan; } #btn_save { background-color: cyan; } .utils { bottom: 22px; right: 22px; position: fixed; } .ex-media { display: flex; justify-content: center; align-items: center; gap: 20px; } .ex-media img, .ex-media canvas { width: 400px; height: 400px; } .ex-question { width:50%; text-align: left; line-height: 1.4; } /* * Interactive exercise embedded in a lecture slide (see lectureExercise.js). The * widgets are the same ones the standalone k12 page runs, so they draw their own * canvas -- this only lays out the three regions and gives the controls a size * that's legible at slide scale (the deck is a 1920x1080 canvas, so 16px UI text * ends up tiny once it's scaled to fit a window). */ .k12-exercise { display: flex; flex-direction: column; align-items: center; gap: 16px; } .k12-ex-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 28px; } .k12-ex-controls input[type=number] { width: 120px; font-size: 28px; padding: 6px; } .k12-ex-controls input[type=range] { width: 220px; } /* * Dialogue slide (see lectureDialogue.js): a character speaking, dressed as a * 98.css window with the speaker's name in the title bar. Sized for slide space * -- the deck is a 1920x1080 canvas scaled to fit, so 98.css's own 11px chrome * would be unreadable here. */ .k12-dialogue-window { max-width: 1400px; margin: 0 auto; text-align: left; } .k12-dialogue-window .title-bar-text { font-size: 26px; } .k12-dialogue-window .title-bar { padding: 8px 6px 8px 10px; } .k12-dialogue-body { display: flex; align-items: flex-start; gap: 24px; margin: 16px; } .k12-dialogue-portrait { width: 160px; height: auto; flex-shrink: 0; border-radius: 0; padding: 0; image-rendering: pixelated; } .k12-dialogue-line { flex: 1; font-size: 34px; line-height: 1.45; color: #222; } .k12-practice-hint { margin-top: 40px; font-size: 30px; color: #7a5c00; background: #fff7e0; border: 1px solid #e5cf8a; border-radius: 10px; padding: 16px 26px; display: inline-block; } .k12-ex-feedback { font-size: 30px; font-weight: 600; min-height: 40px; } /* * Worked-solution block gated by lectureSolution.js. Only the CONTENT is hidden -- * the lock note stays visible so the learner knows what to do to open it, rather * than the slide just appearing empty. */ .k12-solution-locked > *:not(.k12-solution-note) { display: none; } /* An UNLOCKED block empties this note but keeps the element (lectureSolution.js sets textContent = "" rather than removing it, so a later re-lock can refill it). Empty, it was still a bordered, padded, centre-aligned box sitting above left-aligned solution text -- which reads exactly as a layout bug and is why a teacher sees one and a learner does not. */ .k12-solution-note:empty { display: none; } .k12-solution-note { font-size: 28px; color: #7a5c00; background: #fff7e0; border: 1px solid #e5cf8a; border-radius: 8px; padding: 14px 18px; margin: 0 auto; max-width: 1200px; } /* * Landing page menu (index.html / home.js). Sized for slide space -- the deck is a * 1920x1080 canvas scaled to fit, so ordinary UI sizes come out tiny. */ #homeMenu { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 60px; } /* The look is the theme's one button rule (theme_anhungxadieu.css), which takes the entry as well as the