/* Shibuya's `.math-wrapper { overflow-x: auto }` adds a horizontal scrollbar whenever the rendered MathJax content slightly exceeds the container width -- which it does on every numbered equation, because our `tagSide: right` config pushes the equation tag past the right edge by a few pixels. Drop the auto-scrollbar; wide equations on mobile will fall back to MathJax 3's own responsive shrinking. */ .yue .math-wrapper { overflow-x: visible; } /* Color in-prose links so they're distinguishable from body text in bullet lists. Shibuya's default sets the link color to var(--yue-c-link-1) which resolves to var(--sy-c-text) -- the same color as the surrounding body text. The only visual cue is a 1px bottom border in the accent color, which gets visually swallowed when line-spacing and a bullet glyph compete for the eye. Coloring the link text to match the existing accent underline makes the link visible at a glance; hover strengthens it via the existing rule (border-bottom-width: 2px + var(--yue-c-link-2)). */ .yue a { color: var(--sy-c-link); } .yue a:hover { color: var(--sy-c-link-hover); } /* Always show the breadcrumb trail. Shibuya hides `.sy-breadcrumbs` at >=1280px (the bar doubles as the mobile menu host on narrow viewports), so by default desktop readers get no breadcrumbs. Re-show it on wide screens for orientation in the deeply-nested syntax catalog. The two menu buttons inside the bar stay hidden by their own md:hidden / xl:hidden utility classes, so only the trail renders. */ @media (min-width: 1280px) { .sy-breadcrumbs { display: block; } } /* ------------------------------------------------------------------ */ /* Scheduler / dispatcher animations (doc/js/components/scheduler-demos.js) Theme-aware palette: the SVG inherits `color` for text/strokes, and the work-box / outline tones switch with shibuya's color mode. Device fill colors are set inline by the script (mid-tone HSL, legible in both themes). */ :root { --sd-work: #c9ccd1; /* neutral chunk body (light) */ --sd-outline: #b3b8c0; /* dashed batch outline (light) */ --sd-text: #20242b; /* labels + control glyphs (light) */ } /* shibuya records the chosen mode on . Explicit dark uses the dark palette; auto / unset defers to the OS via the media query below. */ [data-color-mode="dark"] { --sd-work: #4a4f57; --sd-outline: #5a606a; --sd-text: #d7dae0; } @media (prefers-color-scheme: dark) { :root:not([data-color-mode="light"]):not([data-color-mode="dark"]) { --sd-work: #4a4f57; --sd-outline: #5a606a; --sd-text: #d7dae0; } } .scheduler-demo .sd-figure { margin: 1rem 0; } .scheduler-demo svg { width: 100%; height: auto; color: var(--sd-text); display: block; } .scheduler-demo .sd-controls { display: flex; gap: 0.4rem; margin-top: 0.4rem; } .scheduler-demo .sd-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--sd-outline); border-radius: 6px; background: transparent; color: var(--sd-text); cursor: pointer; line-height: 0; } .scheduler-demo .sd-btn:hover { background: var(--sy-c-bg-secondary, rgba(127, 127, 127, 0.12)); border-color: var(--sy-c-link); color: var(--sy-c-link); } .scheduler-demo .sd-btn:focus-visible { outline: 2px solid var(--sy-c-link); outline-offset: 2px; }