michaelschiemer/resources/css/admin/04-elements/_base.css

/**
 * Base Element Styles - Admin Interface
 *
 * Grundlegende Styles für HTML-Elemente im Admin-Bereich.
 */

@layer base {
    /**
     * Root Admin Layout
     */
    .admin-layout {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--content-text);
        background-color: var(--bg-primary);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /**
     * Typography
     */
    .admin-layout h1 {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-tight);
        margin-bottom: var(--spacing-lg);
    }

    .admin-layout h2 {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        margin-bottom: var(--spacing-md);
    }

    .admin-layout h3 {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        margin-bottom: var(--spacing-md);
    }

    .admin-layout h4 {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-normal);
        margin-bottom: var(--spacing-sm);
    }

    .admin-layout p {
        margin-bottom: var(--spacing-md);
        line-height: var(--line-height-relaxed);
    }

    .admin-layout small {
        font-size: var(--font-size-sm);
        color: oklch(from var(--content-text) calc(l * 0.7) c h);
    }

    .admin-layout code {
        font-family: var(--font-family-mono);
        font-size: 0.875em;
        background-color: var(--bg-tertiary);
        padding: 0.125rem 0.375rem;
        border-radius: var(--radius-sm);
    }

    .admin-layout pre {
        font-family: var(--font-family-mono);
        font-size: var(--font-size-sm);
        background-color: var(--bg-tertiary);
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        overflow-x: auto;
        margin-bottom: var(--spacing-md);
    }

    .admin-layout pre code {
        background: none;
        padding: 0;
    }

    /**
     * Lists
     */
    .admin-layout ul:not([role="list"]) {
        list-style: disc;
        padding-left: var(--spacing-lg);
    }

    .admin-layout ol:not([role="list"]) {
        list-style: decimal;
        padding-left: var(--spacing-lg);
    }

    /**
     * Tables
     */
    .admin-layout table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: var(--spacing-lg);
    }

    .admin-layout th {
        text-align: left;
        font-weight: var(--font-weight-semibold);
        padding: var(--spacing-sm) var(--spacing-md);
        background-color: var(--bg-secondary);
        border-bottom: 2px solid var(--border-medium);
    }

    .admin-layout td {
        padding: var(--spacing-sm) var(--spacing-md);
        border-bottom: 1px solid var(--border-light);
    }

    .admin-layout tr:hover {
        background-color: var(--hover-overlay);
    }

    /**
     * Forms
     */
    .admin-layout input[type="text"],
    .admin-layout input[type="email"],
    .admin-layout input[type="password"],
    .admin-layout input[type="search"],
    .admin-layout input[type="url"],
    .admin-layout input[type="tel"],
    .admin-layout input[type="number"],
    .admin-layout textarea,
    .admin-layout select {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        font-family: inherit;
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--content-text);
        background-color: var(--content-bg);
        border: 1px solid var(--border-medium);
        border-radius: var(--radius-md);
        transition: border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
    }

    .admin-layout input:focus,
    .admin-layout textarea:focus,
    .admin-layout select:focus {
        outline: none;
        border-color: var(--focus-ring);
        box-shadow: 0 0 0 3px oklch(from var(--focus-ring) l c h / 0.1);
    }

    .admin-layout textarea {
        min-height: 8rem;
        resize: vertical;
    }

    /**
     * HR
     */
    .admin-layout hr {
        border: none;
        border-top: 1px solid var(--border-light);
        margin: var(--spacing-xl) 0;
    }
}