User:One01/common.css: Difference between revisions

Revision as of 05:39, 7 October 2026

/*
Personal CSS for testing
*/

/* ---------------------------------------------------------
   1. COLOUR PALETTE
   --------------------------------------------------------- */

:root {
    --scifi-bg: #070b12;
    --scifi-bg-2: #0a101a;
    --scifi-panel: #0d1622;
    --scifi-panel-2: #111d2b;

    --scifi-border: #26384b;
    --scifi-border-light: #334a60;

    --scifi-text: #d6dee8;
    --scifi-text-muted: #8798aa;

    --scifi-blue: #55aaff;
    --scifi-blue-bright: #79bdff;

    --scifi-orange: #ff9d32;
    --scifi-orange-dark: #a85f1c;
    --scifi-yellow: #ffd166;

    --scifi-danger: #e85d5d;
}


/* ---------------------------------------------------------
   2. PAGE BACKGROUND
   --------------------------------------------------------- */

html,
body {
    background-color: var(--scifi-bg);
    color: var(--scifi-text);
}

/* Very subtle technical/grid texture */
body {
    background-image:
        radial-gradient(
            rgba(80, 130, 180, 0.055) 1px,
            transparent 1px
        );
    background-size: 40px 40px;
}


/* ---------------------------------------------------------
   3. MAIN PAGE
   --------------------------------------------------------- */

.mw-body {
    background:
        linear-gradient(
            145deg,
            rgba(17, 29, 43, 0.96),
            rgba(8, 14, 23, 0.98)
        );

    border: 1px solid var(--scifi-border);
    border-radius: 5px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35);

    padding: 1.5rem;
}


/* ---------------------------------------------------------
   4. PAGE TITLE
   --------------------------------------------------------- */

.firstHeading {
    color: #edf2f7;

    border-bottom:
        2px solid var(--scifi-orange-dark);

    padding-bottom: 0.35em;

    text-shadow:
        0 0 18px rgba(255, 157, 50, 0.08);
}


/* ---------------------------------------------------------
   5. HEADINGS
   --------------------------------------------------------- */

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
    color: #e3eaf2;
}

.mw-body h2 {
    border-bottom: 1px solid var(--scifi-border);

    padding-bottom: 0.25em;

    background:
        linear-gradient(
            90deg,
            rgba(255, 157, 50, 0.10),
            transparent 65%
        );

    padding-left: 0.45em;
}

.mw-body h3 {
    color: #dce6ef;
}


/* ---------------------------------------------------------
   6. LINKS
   --------------------------------------------------------- */

.mw-body a {
    color: var(--scifi-blue);
    text-decoration: none;
}

.mw-body a:visited {
    color: #a99cff;
}

.mw-body a:hover {
    color: var(--scifi-yellow);

    text-decoration: none;

    text-shadow:
        0 0 8px rgba(255, 190, 70, 0.35);
}


/* ---------------------------------------------------------
   7. HEADER
   --------------------------------------------------------- */

.vector-header-container {
    background:
        linear-gradient(
            90deg,
            #070b12,
            #101c2a 50%,
            #070b12
        );

    border-bottom: 1px solid var(--scifi-border);
}

/* Orange technical accent underneath header */
.vector-header-container::after {
    content: "";

    display: block;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--scifi-orange-dark),
            var(--scifi-orange),
            var(--scifi-orange-dark),
            transparent
        );
}


/* ---------------------------------------------------------
   8. VECTOR SIDEBAR / NAVIGATION
   --------------------------------------------------------- */

.vector-menu-portal {
    color: var(--scifi-text-muted);
}

.vector-menu-portal h3 {
    color: var(--scifi-orange);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    font-size: 0.75rem;
}

.vector-menu-portal a {
    color: #aab8c8;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.vector-menu-portal a:hover {
    color: var(--scifi-yellow);

    background:
        rgba(255, 157, 50, 0.08);
}


/* ---------------------------------------------------------
   9. VECTOR TABS
   --------------------------------------------------------- */

.vector-menu-tabs {
    border-color: var(--scifi-border);
}

.vector-menu-tabs li {
    background: transparent;
}

.vector-menu-tabs li a {
    color: var(--scifi-text-muted);
}

.vector-menu-tabs li.selected a,
.vector-menu-tabs li a:hover {
    color: var(--scifi-yellow);
}


/* ---------------------------------------------------------
   10. SEARCH BAR
   --------------------------------------------------------- */

.vector-search-box {
    color: var(--scifi-text);
}

.vector-search-box input {
    background: #080e17;

    color: var(--scifi-text);

    border: 1px solid var(--scifi-border);

    border-radius: 3px;
}

.vector-search-box input:focus {
    border-color: var(--scifi-orange);

    box-shadow:
        0 0 0 1px var(--scifi-orange),
        0 0 12px rgba(255, 157, 50, 0.15);
}

.vector-search-box input::placeholder {
    color: #68798b;
}


/* ---------------------------------------------------------
   11. BUTTONS
   --------------------------------------------------------- */

.mw-ui-button,
button,
input[type="submit"] {
    background:
        linear-gradient(
            180deg,
            #18283a,
            #101b29
        );

    color: var(--scifi-text);

    border: 1px solid var(--scifi-border-light);

    border-radius: 3px;
}

.mw-ui-button:hover,
button:hover,
input[type="submit"]:hover {
    color: var(--scifi-yellow);

    border-color: var(--scifi-orange-dark);

    background:
        linear-gradient(
            180deg,
            #213449,
            #142334
        );
}


/* ---------------------------------------------------------
   12. TABLE OF CONTENTS
   --------------------------------------------------------- */

#toc,
.toc {
    background:
        linear-gradient(
            145deg,
            #0d1724,
            #0a111b
        );

    border: 1px solid var(--scifi-border);

    border-left:
        3px solid var(--scifi-orange-dark);

    border-radius: 3px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.25);
}

#toc .toctitle,
.toc .toctitle {
    color: var(--scifi-yellow);

    letter-spacing: 0.04em;
}

#toc a,
.toc a {
    color: var(--scifi-blue);
}

#toc a:hover,
.toc a:hover {
    color: var(--scifi-yellow);
}


/* ---------------------------------------------------------
   13. WIKITABLES
   --------------------------------------------------------- */

.wikitable {
    background: #0b1420;

    color: var(--scifi-text);

    border: 1px solid var(--scifi-border);

    border-collapse: collapse;
}

.wikitable th {
    background:
        linear-gradient(
            90deg,
            #18293a,
            #101c2a
        );

    color: var(--scifi-yellow);

    border: 1px solid var(--scifi-border);

    font-weight: bold;
}

.wikitable td {
    border: 1px solid var(--scifi-border);
}

.wikitable tr:nth-child(even) {
    background:
        rgba(255, 255, 255, 0.015);
}

.wikitable tr:hover {
    background:
        rgba(255, 157, 50, 0.045);
}


/* ---------------------------------------------------------
   14. INFOBOXES
   --------------------------------------------------------- */

.infobox {
    background:
        linear-gradient(
            145deg,
            #0d1724,
            #09111b
        );

    color: var(--scifi-text);

    border: 1px solid var(--scifi-border);

    border-top:
        3px solid var(--scifi-orange-dark);

    border-radius: 4px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.35);
}

.infobox th {
    background:
        linear-gradient(
            90deg,
            #18293a,
            #101c2a
        );

    color: var(--scifi-yellow);

    border-bottom:
        1px solid var(--scifi-orange-dark);
}

.infobox td,
.infobox th {
    border-color: var(--scifi-border);
}


/* ---------------------------------------------------------
   15. CODE / PRE
   --------------------------------------------------------- */

pre,
.mw-code,
.mw-highlight {
    background: #050a10;

    color: #bcd3e8;

    border: 1px solid var(--scifi-border);

    border-left:
        3px solid var(--scifi-orange-dark);

    border-radius: 3px;
}

code {
    color: #ffbd63;

    background:
        rgba(255, 157, 50, 0.06);

    border-radius: 2px;
}


/* ---------------------------------------------------------
   16. BLOCKQUOTES
   --------------------------------------------------------- */

blockquote {
    background:
        rgba(30, 50, 70, 0.35);

    border-left:
        3px solid var(--scifi-orange-dark);

    color: #aebdcb;

    padding: 0.7em 1em;
}


/* ---------------------------------------------------------
   17. HORIZONTAL RULES
   --------------------------------------------------------- */

hr {
    border: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #33475d 20%,
            var(--scifi-orange-dark) 50%,
            #33475d 80%,
            transparent
        );
}


/* ---------------------------------------------------------
   18. CATEGORIES
   --------------------------------------------------------- */

.catlinks {
    background:
        #0b131e;

    border-top:
        1px solid var(--scifi-border);

    color: var(--scifi-text-muted);
}

.catlinks a {
    color: var(--scifi-blue);
}


/* ---------------------------------------------------------
   19. FOOTER
   --------------------------------------------------------- */

.mw-footer {
    color: var(--scifi-text-muted);

    border-top:
        1px solid var(--scifi-border);
}

.mw-footer a {
    color: #8fbff0;
}


/* ---------------------------------------------------------
   20. SPECIAL / SYSTEM PAGES
   --------------------------------------------------------- */

.mw-body .mw-warning {
    background:
        rgba(255, 157, 50, 0.08);

    border: 1px solid var(--scifi-orange-dark);

    color: #ffdca8;
}

.mw-body .errorbox {
    background:
        rgba(180, 50, 50, 0.10);

    border: 1px solid #743636;

    color: #ffb0b0;
}


/* ---------------------------------------------------------
   21. SUBTLE SCIFI ACCENT
   --------------------------------------------------------- */

/*
   Small orange indicator on the left side of major
   article sections.
*/

.mw-body h2::before {
    content: "◆";

    color: var(--scifi-orange);

    font-size: 0.45em;

    margin-right: 0.65em;

    vertical-align: middle;

    opacity: 0.8;
}


/* ---------------------------------------------------------
   22. SELECTION
   --------------------------------------------------------- */

::selection {
    background: rgba(255, 157, 50, 0.30);

    color: #ffffff;
}