Enlightenment CSS Reference

This page provides a reference for the Enlightenment-inspired UI components and their corresponding HTML structure and CSS classes.

Panel (Taskbar)

The main panel located at the bottom of the desktop.

<div class="panel">
    <div class="menu-button">Menu</div>
    <div class="tasks">
        <div class="task-item active">Window 1</div>
        <div class="task-item">Window 2</div>
    </div>
    <div class="system-tray">
        <span class="clock">19:30</span>
    </div>
</div>

Window

Standard draggable and resizable window with title bar and body area.

<div class="window active" style="top: 50px; left: 50px; width: 400px; height: 300px;">
    <div class="title-bar">
        <div class="title-bar-text">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">
        <p>Window content goes here.</p>
    </div>
</div>

Desktop Icons

Icons displayed on the desktop.

<div class="icon-grid">
    <div class="desktop-icon">
        <img src="https://via.placeholder.com/32" alt="Home">
        <span>Home</span>
    </div>
    <div class="desktop-icon">
        <img src="https://via.placeholder.com/32" alt="Terminal">
        <span>Terminal</span>
    </div>
</div>

File Manager Window (Example)

A specialized window mimicking a file manager.

<div class="window file-manager-window">
    <!-- ... title bar ... -->
    <div class="window-body" style="display: flex;">
        <div class="sidebar">
            <div class="sidebar-item active">Home</div>
            <div class="sidebar-item">Documents</div>
        </div>
        <div class="main-content">
            <div class="file-item">
                <img src="..." alt="Folder">
                <span>MyFolder</span>
            </div>
        </div>
    </div>
</div>

Settings Window (Example)

A window with tabbed navigation and various form elements.

<div class="window settings-window">
    <!-- ... title bar ... -->
    <div class="window-body" style="display: flex;">
        <div class="tabs-nav">
            <div class="tab-item active">General</div>
            <div class="tab-item">Display</div>
        </div>
        <div class="tab-content">
            <h3>General Settings</h3>
            <p><label><input type="checkbox" checked> Enable Feature X</label></p>
            <p>Volume: <input type="range" min="0" max="100" value="70"></p>
            <p>Theme:
                <label><input type="radio" name="theme" value="dark" checked> Dark</label>
            </p>
        </div>
    </div>
</div>

Dialog

Alert and confirmation dialogs.

<div class="dialog-overlay" id="alertDialogOverlay">
    <div class="dialog">
        <div class="dialog-header">
            <span class="dialog-title">Alert!</span>
            <button class="dialog-close-button">&times;</button>
        </div>
        <div class="dialog-content">
            <p>This is an example dialog.</p>
        </div>
        <div class="dialog-footer">
            <button class="dialog-button ok-button">OK</button>
        </div>
    </div>
</div>

Context Menu

Right-click menu for desktop or other elements.

<div class="context-menu" id="desktopContextMenu">
    <div class="menu-item">Open Terminal</div>
    <div class="menu-item">Create New <span class="arrow">&#9656;</span>
        <div class="sub-menu">
            <div class="menu-item">Folder</div>
            <div class="menu-item">Document</div>
        </div>
    </div>
    <div class="menu-separator"></div>
    <div class="menu-item">Settings</div>
</div>