Skip to main content

light-mode-adjustments.css

This is a short stylesheet that defines light-mode-specific visual patterns (popup title bars, checkerboard scrollbars) and includes a small @media rule for.poem and.editorial.

Pathcss/light-mode-adjustments.css
LanguageCSS
Lines14

Read this when Use this page when tracing styling, layout, typography, color, or mode-specific CSS around light-mode-adjustments.

Overview​

This is a short stylesheet that defines light-mode-specific visual patterns (popup title bars, checkerboard scrollbars) and includes a small @media rule for .poem and .editorial. It complements dark-mode-adjustments.css, ensuring that light mode has the correct texture references.

The file mostly sets CSS custom properties pointing to image assets (GIFs with 2x pixel density for crisp rendering), plus a small mobile-only (max-width: 649px) text-shadow: 0 0 0 currentColor tweak for .poem and .editorial. These patterns add subtle visual texture to otherwise flat UI elements, enhancing depth perception without adding visual noise.

Key Variables​

:root Custom Properties​

  • --GW-popups-popup-title-bar-pattern:

    • var(--GW-image-pattern-dotted-e6e6e6-on-fff-2x-gif)
    • Dotted pattern for popup window title bars (unfocused state)
    • Light dots on white background

  • --GW-popups-popup-title-bar-pattern-focused:

    • var(--GW-image-pattern-dotted-fff-on-e6e6e6-2x-gif)
    • Inverted pattern for focused popup windows
    • White dots on light gray background

  • --GW-checkerboard-scrollbar-background-image:

    • var(--GW-image-checkerboard-777-fff-2x-gif)
    • Checkerboard pattern for scrollbar tracks
    • Gray and white checkerboard (unfocused state)

  • --GW-checkerboard-scrollbar-hover-background-image:

    • var(--GW-image-checkerboard-000-fff-2x-gif)
    • Darker checkerboard on hover
    • Black and white checkerboard

Referenced Image Variables​

The --GW-image-* variables referenced here are defined in inlined-images-initial-GENERATED.css (built by build/build_inlined_images.php from img/pattern/*) as data URIs. The -2x suffix indicates these are 2x pixel density images for retina/HiDPI displays.

Loading​

At commit time, build/build_mode_css.php (run by build/pre-commit.hook.php) concatenates colors.css + this file into light-mode-GENERATED.css, which is inlined into the <head> of every page as <style id="inlined-styles-colors"> via the SSI include include/inlined-head.html.

When dark mode is active, these variables are overridden by the dark-mode-GENERATED.css style block (colors-dark-GENERATED.css + dark-mode-adjustments.css), which swaps in dark-appropriate pattern URLs.

See Also
  • dark-mode-adjustments - Provides dark mode equivalents of these patterns
  • colors - Defines the color variables that work alongside these patterns
  • default - Uses these pattern variables for title bars and scrollbars
  • build-mode-css - Combines this with colors.css for final output
  • dark-mode-js - Toggles between light and dark modes