SerenityOS CSS - Usage Reference

This document provides a guide on how to use the serenity.css file to achieve a classic SerenityOS-like look and feel for your web projects.

Global Styles

The body element automatically gets a teal background and a classic font stack. All standard text elements will inherit the default text color. The 3D effect of borders has been enhanced with new color variables: --border-darkest, --border-dark, --border-light, and --border-lightest.

Window Component

To create a window, use a container div with the class .window. Inside, you'll need a .title-bar and a .window-content.

Add the .active class to the .window for an active title bar style, or .inactive for a faded title bar.

Structure:

<div class="window active">
    <div class="title-bar">
        <div class="title-bar-text">My Window Title</div>
        <div class="title-bar-controls">
            <button aria-label="Minimize"></button>
            <button aria-label="Maximize"></button>
            <button aria-label="Close"></button>
        </div>
    </div>
    <div class="window-body">
        <!-- Your content goes here -->
        <p>Hello, Serenity!</p>
    </div>
</div>

Title Bar Controls:

The buttons within .title-bar-controls are simple empty <button> elements with aria-label attributes. Their styling, including the use of pseudo-elements for the icons, provides the classic look.

Button Component

Apply the .btn class to any <button> element to give it the classic 3D-beveled look. Focus styles now include a dotted outline.

Usage:

<button>Click Me</button>
<button class="default">OK</button>

Form Elements

Input fields, text areas, and select elements can be styled using the .form-control class. Wrap labels and controls in .form-group for consistent spacing. Focus styles now include a dotted outline.

Usage:

<div class="form-group">
    <label for="myInput">Text Input:</label>
    <input type="text" id="myInput" placeholder="Type here...">
</div>

<div class="form-group">
    <label for="myTextarea">Text Area:</label>
    <textarea id="myTextarea" rows="4">Default text.</textarea>
</div>

<div class="form-group">
    <label for="mySelect">Select Option:</label>
    <select id="mySelect">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>

Well Component

Use the .well class for an inset, sunken panel effect, often used to group content or display static information.

Usage:

<div class="well">
    <p>This content is inside a sunken well.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>

Utility Classes

• .text-center: Centers text horizontally.
• .mt-1: Adds a small top margin (10px).

You can combine these classes with the main components to further customize their appearance.

Enjoy the retro vibes!