NFO.css

ASCII ART STYLE CSS LIBRARY

> SELECT THEME

Click a theme button to apply it to this page:

> THEME PREVIEW

Typography

Subheading

Regular text uses theme colors automatically when you apply a theme class to the page.

Muted text is slightly dimmer.

Dim text for less important content.

Buttons

Themed Card

Cards automatically adapt to the selected theme, including borders and header colors.

Glow Effects

Themed Glow

Strong Themed Glow

Lists

  • Arrow list item
  • Second item
  • Third item
  • Bullet list item
  • Second item
  • Third item
  • Dash list item
  • Second item
  • Third item

Form Elements

> USAGE

Apply a Theme to the Entire Page

Add a theme class to your body element:

<body class="nfo-page nfo-theme-matrix">

Available Themes

Theme Class Colors Box Style
nfo-theme-default Cyan/Magenta Single border (nfo-box-single)
nfo-theme-matrix Green terminal Double border (nfo-box-double)
nfo-theme-vapor Magenta/Cyan Dashed border (nfo-box-ascii)
nfo-theme-amber Orange/Yellow Single border (nfo-box-single)
nfo-theme-ice Blue/Cyan Single border (nfo-box-single)
nfo-theme-blood Red Block border (nfo-box-block-full)

Theme Individual Components

Use nfo-themed class on individual elements:

<button class="nfo-btn nfo-themed">Themed Button</button>
<div class="nfo-box nfo-box-single nfo-themed">...</div>
<div class="nfo-card nfo-themed">...</div>

Use Theme CSS Variables

Reference theme variables in your custom CSS:

.my-element {
  color: var(--nfo-theme-primary);
  background: var(--nfo-theme-bg-alt);
  border-color: var(--nfo-theme-border);
}

Customize Theme Box Styles

Each theme defines its own box style. To customize, add CSS rules for your theme:

/* Example: Use double border for a custom theme */
.nfo-page.nfo-theme-custom .nfo-box,
.nfo-page.nfo-theme-custom .nfo-card {
  border: 3px double var(--nfo-theme-border);
}

/* Example: Use block style (from nfo-box-block-full) */
.nfo-page.nfo-theme-custom .nfo-box,
.nfo-page.nfo-theme-custom .nfo-card {
  border: none;
  box-shadow:
    inset 4px 0 0 0 var(--nfo-theme-border),
    inset -4px 0 0 0 var(--nfo-theme-border),
    inset 0 4px 0 0 var(--nfo-theme-border),
    inset 0 -4px 0 0 var(--nfo-theme-border);
}

Available Theme Variables

Variable Purpose
--nfo-theme-primary Main accent color (headings, links, focus)
--nfo-theme-primary-dim Dimmed version of primary
--nfo-theme-secondary Secondary accent color
--nfo-theme-text Main text color
--nfo-theme-text-muted Muted text color
--nfo-theme-text-dim Dim text color
--nfo-theme-bg Page background
--nfo-theme-bg-alt Alternate/card background
--nfo-theme-border Border color
--nfo-theme-glow Glow effect color