pipboy.css

CSS framework that styles HTML forms with a retro Pip-Boy style terminal appearance. 🤖 Live demo

Installation

CDN (jsDelivr)

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/gh/OLEOJAKE/pipboy.css@v1.0.0/dist/pipboy.min.css"
/>

Local

Download pipboy.css or pipboy.min.css from dist/ and link it:

<link rel="stylesheet" href="path/to/pipboy.css" />

Customization

Override CSS variables to customize the appearance:

:root {
	--pb-bg: #020703;              /* Main background color */
	--pb-bg-alt: #000000;          /* Alternative background (inputs, buttons) */
	--pb-fg: #37ff14;              /* Primary foreground/text color */
	--pb-fg-soft: #72ff8b;         /* Soft foreground color (links) */
	--pb-fg-dim: #1a5a0f;          /* Dim foreground color (placeholders) */
	--pb-border: #37ff14;          /* Primary border color */
	--pb-border-dim: #1a5a0f;      /* Dim border color */
	--pb-font: "Courier New", Courier, "Lucida Console", monospace;
	--pb-font-size: 14px;
	--pb-line-height: 1.5;
	--pb-glow: rgba(55, 255, 20, 0.3);  /* Glow effect color */
}

Utilities

.pipboy-blink class

Applies a blinking effect with green background to any element:

<h1 class="pipboy-blink">BLINKING TITLE</h1>

.pipboy-pulse class

Applies a soft pulse effect:

<p class="pipboy-pulse">Pulsing text</p>

Supported Elements

• Text inputs (text, email, password, number, etc.)
• Textareas
• Selects
• Checkboxes and Radios
• Buttons
• Range sliders
• Separators (hr)
• Tables
• Fieldsets and Legends
• Lists
• Headings and paragraphs