# 404-solution/trunk/includes/css/suggestions-loading.css

404 Solution, version trunk. 126 lines.

- Page: https://pluginprobe.com/plugins/404-solution/trunk/code/includes/css/suggestions-loading.css
- Raw: https://pluginprobe.com/plugins/404-solution/trunk/raw/includes/css/suggestions-loading.css
- Modified: 2026-08-21T22:57:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/404-solution/trunk/code/includes/css/suggestions-loading.css#L10-L20`.

```css
/**
 * Front-end styles for the 404 suggestions block: the loading skeleton shown
 * while suggestions are being computed, and the admin-only note rendered
 * below the finished list.
 *
 * Kept as one stylesheet, under its original filename, because both live
 * inside the same block and the async path already loads it before the AJAX
 * response arrives -- an AJAX response cannot enqueue anything, so the admin
 * note has to be styled by a sheet that is already on the page.
 *
 * This stylesheet is enqueued by the [abj404] shortcode on the user-facing
 * (front-end) site. The plugin's admin theme variables (--abj404-*) defined
 * in adminThemes.css are admin-only and are NOT available here, so the
 * skeleton/text colors below must remain literal. The values are designed to
 * read neutrally on any host theme (light + dark via prefers-color-scheme).
 */

/* Container for loading state */
.abj404-loading {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual skeleton item */
.abj404-skeleton {
    /* allow-hardcoded-color: frontend shortcode CSS; admin theme vars are not loaded on the user site, and skeleton shimmer must read on any host theme. */
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: abj404-shimmer 1.5s infinite;
    height: 20px;
    margin: 10px 0;
    border-radius: 4px;
    list-style: none;
}

/* Vary widths for more natural look */
.abj404-skeleton:nth-child(1) { width: 85%; }
.abj404-skeleton:nth-child(2) { width: 70%; }
.abj404-skeleton:nth-child(3) { width: 90%; }
.abj404-skeleton:nth-child(4) { width: 75%; }
.abj404-skeleton:nth-child(5) { width: 80%; }
.abj404-skeleton:nth-child(n+6) { width: 78%; }

/* Shimmer animation */
@keyframes abj404-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Loading text message */
.abj404-loading-text {
    /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; mid-gray reads on light host themes. */
    color: #666;
    font-style: italic;
    margin: 5px 0 10px;
    font-size: 0.95em;
}

/* No suggestions fallback message */
.abj404-no-suggestions {
    /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; mid-gray reads on light host themes. */
    color: #666;
    font-style: italic;
    list-style: none;
    padding: 10px 0;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .abj404-skeleton {
        /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; dark-mode shimmer tuned for dark host themes. */
        background: linear-gradient(90deg, #2a2a2a 25%, #333333 50%, #2a2a2a 75%);
        background-size: 200% 100%;
    }

    .abj404-loading-text {
        /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; light gray reads on dark host themes. */
        color: #aaa;
    }

    .abj404-no-suggestions {
        /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; light gray reads on dark host themes. */
        color: #aaa;
    }
}

/* ---------------------------------------------------------------------------
 * Admin-only note below the suggestion list. Deliberately quiet: no box, no
 * colour fill, no icon. A hairline rule on the left and small grey text, so
 * it reads as an aside on someone else's theme rather than as plugin chrome.
 * ------------------------------------------------------------------------ */
.abj404-admin-note {
    font-size: 13px;
    line-height: 1.5;
    /* allow-hardcoded-color: frontend shortcode CSS; admin theme vars are not loaded on the user site, and this grey has to read on any host theme. */
    color: #646970;
    margin: 10px 0 0;
    padding-left: 10px;
    /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; matches the WordPress admin hairline grey. */
    border-left: 3px solid #dcdcde;
}

.abj404-admin-note a {
    /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; WordPress admin link blue, readable on light host themes. */
    color: #2271b1;
}

@media (prefers-color-scheme: dark) {
    .abj404-admin-note {
        /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; light grey reads on dark host themes. */
        color: #a7aaad;
        /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; dark-mode hairline. */
        border-left-color: #4f5255;
    }

    .abj404-admin-note a {
        /* allow-hardcoded-color: frontend shortcode CSS, theme vars unavailable; WordPress admin light-blue link for dark backgrounds. */
        color: #72aee6;
    }
}

```