|
|
| (2 intermediate revisions by the same user not shown) |
| Line 2: |
Line 2: |
| Personal CSS for testing | | 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;
| |
| }
| |
