wf-components/src/styles/global.css

This is the official component library for the Wireshark website, made by the Wireshark Foundation. It's currently a work in progress and will be updated regularly.

@font-face {
    font-family: 'UbuntuSansMono';
    src: url('/fonts/UbuntuSansMono-Regular.ttf') format('ttf'),
         url('/fonts/UbuntuSansMono-Medium.ttf') format('ttf'),
         url('/fonts/UbuntuSansMono-Bold.ttf') format('ttf'),
         url('/fonts/UbuntuSansMono-SemiBold.ttf') format('ttf');
    font-style: normal;
    font-display: swap;
}
@import "tailwindcss";

@theme {
    --font-sans: 'UbuntuSansMono', monospace;
    --font-serif: 'magistral', sans-serif;
    --font-mono: 'UbuntuSansMono', monospace;

    --font-magistral: 'magistral', sans-serif;
    --font-ubuntu-sans: 'UbuntuSansMono', monospace;

    --color-action: var(--theme-color-action);
    --color-action-inverted: var(--theme-color-action-inverted);
    --color-action-hover: var(--theme-color-action-hover);
    --color-action-disabled: var(--theme-color-action-disabled);
    --color-action-disabled-text: var(--theme-color-action-disabled-text);
    --color-text: var(--theme-color-text);
    --color-text-brighter: var(--theme-color-text-brighter);
    --color-text-headline: var(--theme-color-text-headline);
    --color-error: var(--theme-color-error);
    --color-text-inverted: var(--theme-color-text-inverted);
    --color-border: var(--theme-color-border);
    --color-border-card: var(--theme-color-border-card);
    --color-background: var(--theme-color-background);
    --color-background-inverted: var(--theme-color-background-inverted);
    --color-background-cards: var(--theme-color-background-cards);

    /* Default values (can be overridden per element) */
    --dash-length: 8px;
    --gap-length: 8px;
    --border-thickness: 0.5px;
    --border-color: var(--color-border-card); /* Default color */

    /* Calculated value for convenience */
    --pattern-length: calc(var(--dash-length) + var(--gap-length));
}

@layer base {
    [data-theme="light"] {
        --theme-color-action:#0052FF;
        --theme-color-action-inverted:#A7C6EB;
        --theme-color-action-hover:#0038A8;
        --theme-color-action-disabled:#D1D8E0;
        --theme-color-action-disabled-text:#A3ADB9;
        --theme-color-text:#254676;
        --theme-color-text-brighter:#688ECF;
        --theme-color-text-headline:#395DAA;
        --theme-color-error:#F70404;
        --theme-color-text-inverted:#FFFFFF;
        --theme-color-border:#A3ADB9;
        --theme-color-border-card:#395DAA;
        --theme-color-background:#F5F5F5;
        --theme-color-background-inverted:#162F5E;
        --theme-color-background-cards:#F5F5F5;
    }

    [data-theme="dark"] {
        --theme-color-action: #338AFF;
        --theme-color-action-inverted: #338AFF;
        --theme-color-action-hover: #0052FF;
        --theme-color-action-disabled: #A3ADB9;
        --theme-color-action-disabled-text: #D1D8E0;
        --theme-color-text: #FFFFFF;
        --theme-color-text-brighter: #D1D8E0;
        --theme-color-text-headline: #80B8FF;
        --theme-color-error: #F70404;
        --theme-color-text-inverted: #FFFFFF;
        --theme-color-border: #A3ADB9;
        --theme-color-border-card: #A7C6EB;
        --theme-color-background: #020A15;
        --theme-color-background-inverted: #162F5E;
        --theme-color-background-cards: #395DAA;
    }

    * {
        font-family: var(--font-ubuntu-sans);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-magistral);
        line-height: 125%;
        color: var(--color-text-headline)
    }

    p {
        font-family: var(--font-ubuntu-sans);
        font-size: var(--text-base); /* 1rem / 16px */
        line-height: 125%;
        color: var(--color-text)
    }

    ul, ol {
        color: var(--color-text);
    }

    h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
        font-family: var(--font-magistral);
        line-height: 125%;
        color: var(--color-action-hover)
    }

    a {
        font-family: var(--font-ubuntu-sans);
        font-size: var(--text-base); /* 1rem / 16px */
        line-height: 125%;
        color: var(--color-action);
    }

    a:hover {
        color: var(--color-action-hover);
    }

    .dashed-border {
        /* 1. Padding: This creates the space where the background "border" will show */
        padding: var(--border-thickness);
    
        /* 2. Background Layers */
        background-image:
            /* Bottom border */
            repeating-linear-gradient(
                to right,
                var(--border-color) 0,
                var(--border-color) var(--dash-length),
                transparent var(--dash-length),
                transparent var(--pattern-length)
            );
    
        /* 3. Background Size: Define the size of each gradient layer */
        /* Order matches background-image */
        background-size: var(--pattern-length) var(--border-thickness); /* Bottom: pattern width, border height */
    }
}