MediaWiki:Vector.css: Difference between revisions

From Heavenly Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* ---------------------------------------------
:root {
  OSRS Wiki-Inspired Vector Layout Styling
    /* Core colors */
--------------------------------------------- */
    --body-background-color: #1c1c1c;
    --body-main: #2a2a2a;
    --body-light: rgba(28, 28, 28, 0.95);
    --body-mid: #262626;
    --body-dark: #1f1f1f;
   
    /* Text colors */
    --text-color: #fff;
    --background-text-color: rgba(255, 255, 255, 0.8);
    --background-link-color: #6ab0f4;
   
    /* UI elements */
    --vector-tab-background: var(--body-background-color);
    --vector-tab-background--hover: var(--body-mid);
    --search-box: rgba(0, 0, 0, 0.2);
    --thumb-bg: var(--body-main);
    --thumb-caption-bg: var(--body-dark);
    --toc-bg: var(--body-light);
    --toc-title-bg: var(--body-dark);
}
 
/* Base layout */
html {
    font-size: 100%;
    height: 100%;
}


/* 🧾 Article content box */
body {
.vector-body,
    margin: 0;
#mw-content-text,
    padding: 0;
#content {
     background: var(--body-background-image) var(--body-background-color) top left / 1500px 375px no-repeat;
     background-color: var(--content-background-color);
     color: var(--text-color);
     padding: 1em;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    border: 1px solid var(--body-border);
     border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
}
}


/* 📌 Logo shadow */
/* Content area */
#p-logo {
.vector-body {
     margin-top: -1.5em;
     font-size: 0.875rem;
     filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
    line-height: 1.6;
    padding: 1.25rem;
    background: var(--body-light);
     background-image: linear-gradient(to right, rgba(28, 28, 28, 0.7), var(--body-light) 50%);
}
}


/* 🗂️ Tabs (Main Page, Discussion) */
/* Headings */
.vector-menu-tabs-legacy {
.firstHeading {
     background: var(--content-background-color);
     font-size: 1.8rem;
     border-bottom: 1px solid var(--body-border);
    font-weight: normal;
     padding-left: 1em;
     color: var(--text-color);
     margin: 0.5em 0 1em;
}
}


.vector-menu-tabs-legacy ul {
/* Navigation */
     margin: 0;
.vector-menu-tabs {
     padding: 0;
     background: var(--vector-tab-background);
    list-style: none;
     border-bottom: 1px solid var(--body-dark);
    display: flex;
    align-items: center;
}
}


.vector-menu-tabs-legacy li {
.vector-menu-tabs li {
     background-color: var(--content-background-color);
     display: inline-block;
    border: 1px solid transparent;
    border-bottom: none;
     margin: 0;
     margin: 0;
     box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);
     padding: 0;
}
}


.vector-menu-tabs-legacy li a {
.vector-menu-tabs a {
     display: block;
     display: inline-block;
     padding: 1em 0.75em;
     padding: 0.5em 1em;
    font-weight: bold;
     color: var(--background-link-color);
     color: var(--background-link-color);
     text-decoration: none;
     text-decoration: none;
}
}


.vector-menu-tabs-legacy li.selected {
.vector-menu-tabs .selected {
     background-color: #fffaf0;
     background: var(--body-main);
    border: 1px solid var(--body-border);
    border-bottom: none;
    z-index: 1;
}
}


.vector-menu-tabs-legacy li.selected a {
/* Search box */
     color: #000;
.vector-search-box {
    background: var(--search-box);
    border-radius: 2px;
     padding: 0.5em;
}
}


/* 🧭 Sidebar section headings */
.vector-search-box input {
.vector-menu-portal .vector-menu-heading {
     background: transparent;
     font-weight: bold;
    border: none;
     color: var(--text-color);
     color: var(--text-color);
     background: none;
     width: 100%;
    padding: 0.5em 0.75em;
}
}


/* Sidebar links */
/* Links */
.vector-menu-portal .vector-menu-content li a {
a {
     color: var(--background-link-color);
     color: var(--background-link-color);
     text-decoration: none;
     text-decoration: none;
    display: block;
    padding: 0.35em 0.75em;
    transition: background 0.2s;
}
}


.vector-menu-portal .vector-menu-content li a:hover {
a:visited {
     background: rgba(255, 255, 255, 0.2);
     color: #4a80c4;
}
}


/* 🔍 Search bar appearance */
a:hover {
.vector-search-box-vue input.cdx-text-input__input {
    text-decoration: underline;
     background-color: #fff;
}
     border: 1px solid var(--body-border);
 
     color: var(--text-color);
/* Tables */
     padding: 7px;
.wikitable {
     height: 2.5rem;
    background: var(--body-main);
    border-collapse: collapse;
    margin: 1em 0;
}
 
.wikitable th {
    background: var(--body-dark);
    padding: 0.5em;
    text-align: left;
}
 
.wikitable td {
     padding: 0.5em;
     border: 1px solid var(--body-dark);
}
 
/* Images and thumbnails */
.thumb {
    background: var(--thumb-bg);
     border: 1px solid var(--body-dark);
     padding: 0.5em;
     margin: 1em 0;
}
}


/* 🛠 Hide unneeded view tab */
.thumbcaption {
#ca-view {
    background: var(--thumb-caption-bg);
     display: none !important;
    padding: 0.5em;
     font-size: 0.9em;
}
}


/* Edit links cleanup */
/* Table of contents */
.mw-editsection {
.toc {
     font-size: 0.85em;
     background: var(--toc-bg);
     color: #666;
    border: 1px solid var(--body-dark);
    padding: 1em;
     margin: 1em 0;
}
}


.client-js .mw-editsection-bracket {
.toc .toctitle {
     display: none;
    background: var(--toc-title-bg);
    padding: 0.5em;
     text-align: center;
}
}

Revision as of 22:14, 1 May 2025

:root {
    /* Core colors */
    --body-background-color: #1c1c1c;
    --body-main: #2a2a2a;
    --body-light: rgba(28, 28, 28, 0.95);
    --body-mid: #262626;
    --body-dark: #1f1f1f;
    
    /* Text colors */
    --text-color: #fff;
    --background-text-color: rgba(255, 255, 255, 0.8);
    --background-link-color: #6ab0f4;
    
    /* UI elements */
    --vector-tab-background: var(--body-background-color);
    --vector-tab-background--hover: var(--body-mid);
    --search-box: rgba(0, 0, 0, 0.2);
    --thumb-bg: var(--body-main);
    --thumb-caption-bg: var(--body-dark);
    --toc-bg: var(--body-light);
    --toc-title-bg: var(--body-dark);
}

/* Base layout */
html {
    font-size: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: var(--body-background-image) var(--body-background-color) top left / 1500px 375px no-repeat;
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Content area */
.vector-body {
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1.25rem;
    background: var(--body-light);
    background-image: linear-gradient(to right, rgba(28, 28, 28, 0.7), var(--body-light) 50%);
}

/* Headings */
.firstHeading {
    font-size: 1.8rem;
    font-weight: normal;
    color: var(--text-color);
    margin: 0.5em 0 1em;
}

/* Navigation */
.vector-menu-tabs {
    background: var(--vector-tab-background);
    border-bottom: 1px solid var(--body-dark);
}

.vector-menu-tabs li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.vector-menu-tabs a {
    display: inline-block;
    padding: 0.5em 1em;
    color: var(--background-link-color);
    text-decoration: none;
}

.vector-menu-tabs .selected {
    background: var(--body-main);
}

/* Search box */
.vector-search-box {
    background: var(--search-box);
    border-radius: 2px;
    padding: 0.5em;
}

.vector-search-box input {
    background: transparent;
    border: none;
    color: var(--text-color);
    width: 100%;
}

/* Links */
a {
    color: var(--background-link-color);
    text-decoration: none;
}

a:visited {
    color: #4a80c4;
}

a:hover {
    text-decoration: underline;
}

/* Tables */
.wikitable {
    background: var(--body-main);
    border-collapse: collapse;
    margin: 1em 0;
}

.wikitable th {
    background: var(--body-dark);
    padding: 0.5em;
    text-align: left;
}

.wikitable td {
    padding: 0.5em;
    border: 1px solid var(--body-dark);
}

/* Images and thumbnails */
.thumb {
    background: var(--thumb-bg);
    border: 1px solid var(--body-dark);
    padding: 0.5em;
    margin: 1em 0;
}

.thumbcaption {
    background: var(--thumb-caption-bg);
    padding: 0.5em;
    font-size: 0.9em;
}

/* Table of contents */
.toc {
    background: var(--toc-bg);
    border: 1px solid var(--body-dark);
    padding: 1em;
    margin: 1em 0;
}

.toc .toctitle {
    background: var(--toc-title-bg);
    padding: 0.5em;
    text-align: center;
}