catpuccini macchiato ikarus-hl2rp.tk by clericek

/* ==UserStyle==
@name           docs.gethelix.co/manual/converting-from-clockwork/ - Nov 2023
@namespace      github.com/openstyles/stylus
@version        1.6.0
@description    A Catpuccino palette inspired theme with high contrast and clear content hierarchy
@author         Me
==/UserStyle== */
@-moz-document url-prefix("https://docs.gethelix.co") {
    body {
        background-color: #494d64;
        /* Surface1 */
        color: #363a4f;
        /* Darkened text for contrast */
        font-size: 17px;
        /* Increased font size */
        line-height: 1.7;
        /* Increased line height */
    }

    a {
        color: #c6a0f6;
        /* Mauve - Links */
        font-weight: bold;
        text-decoration: none;
    }


 /* Updated styles for links */
a {
    color: #c6a0f6; /* Mauve */
    text-decoration: none;
    transition: color 0.15s ease, text-shadow 0.3s ease;
    position: relative;

}

/* Futuristic hover effect with a more subdued glow */
a:hover, a:focus {
    color: #cad3f5; /* Lighter Mauve for better readability */
    text-shadow:
      0 0 8px #b7bdf8, /* Subdued Lavender glow */
      0 0 16px #a5adcb; /* Subdued glow with Subtext0 color */
}

/* Animated underline effect using the Sapphire color */
a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: #7dc4e4; /* Sapphire */
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.15s ease-in-out 0s;
}

a:hover::after, a:focus::after {
    visibility: visible;
    transform: scaleX(1);
}


    .sidebar {
        background-color: #676a81;
        /* Slightly lighter shade for sidebar */
        border-right: 1px solid #75788c;
    }

    .sidebar .category,
    .sidebar .category:hover {
        color: #b5b8c5;
        /* Adjusted header colors to be less dark */
        font-weight: bold;
        /* Bolder category headers */
        background-color: #6e738d;
        /* Active item highlight for hover */
    }

    .sidebar a {
        color: #a5adcb;
        transition: background-color 0.2s ease-in-out;
    }

    .sidebar a:hover,
    .sidebar a:focus,
    .sidebar .current {
        background-color: #8087a2;
        /* Hover and active effect */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 700;
        /* Bolder headers */
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    p,
    ul,
    ol,
    li,
    .important {
        margin-bottom: 1em;
        /* More space between paragraphs and list items */
    }

    .important {
        border-left: 4px solid #eed49f;
        /* Highlight for important content */
        background-color: #50535a;
        /* Adjusted for contrast */
        padding: 0.5em;
    }

    .search-bar {
        font-size: 16px;
        padding: 10px;
        width: calc(100% - 20px);
        /* Full-width with padding */
        border: 1px solid #939ab7;
        border-radius: 4px;
        background: url('data:image/svg+xml;base64,...') no-repeat 10px center, #8087a2;
        /* Magnifying glass icon */
        background-size: 16px 16px;
    }


    .search-bar:focus {
        box-shadow: 0 0 8px #b7bdf8;
    }

    ul,
    ol {
        padding-left: 10px;
    }

    li {
        margin-bottom: 0.5em;
    }

    button,
    .button,
    .link-button {
        background-color: #ee99a0;
        color: #f4dbd6;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    button:hover,
    .button:hover,
    .link-button:hover {
        background-color: #f5a97f;
    }

    .icon {
        color: #8aadf4;
        font-size: 1.2em;
    }

    @media (prefers-color-scheme: dark) {
        body {
            color-scheme: dark;
        }
    }
}