Winds Of Valen Wiki

MediaWiki:Vector.css: Difference between revisions

Maintenance script (talk | contribs)

1,990 edits
OSRS style for Vector 2022
 
Winds of Valen OSRS theme
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/* ===================================
/* ============================================================
   WINDS OF VALEN - OSRS-Inspired Theme
   WINDS OF VALEN WIKI - Fantasy Theme for Vector 2022
  For Vector 2022 skin
   ============================================================ */
   =================================== */


/* Force light color scheme regardless of browser dark mode */
/* Force light color scheme - overrides OS/browser dark mode */
:root {
:root {
     color-scheme: light !important;
     color-scheme: light !important;
    --background-color-base: #c7b89e !important;
    --background-color-interactive: #dfd3bc !important;
    --background-color-interactive-subtle: #e8dcc4 !important;
    --color-surface-1: #e5d8c5 !important;
    --color-surface-2: #dfd3bc !important;
    --color-base: #332717 !important;
    --color-subtle: #5c4a30 !important;
    --color-inverted: #332717 !important;
    --color-progressive: #7a5c35 !important;
    --color-progressive--hover: #5c4220 !important;
    --border-color-base: #9e8c74 !important;
    --border-color-muted: #b0a08a !important;
}
}


/* ===== PAGE BACKGROUND WITH BANNER ===== */
/* ---- PAGE BACKGROUND & BANNER ---- */
html, body {
html {
     background-color: #c7b89e !important;
     background-color: #c9b99a !important; /* Sandy beige matches the banner fade */
}
}


/* The main banner image fading into the background */
body {
.vector-header {
     background-color: transparent !important;
     background-image: url('/images/valen_banner.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    position: relative;
}
}


/* Fade the header into the page background */
/* The banner image sits on the html element itself and fades down */
.vector-header::after {
html::before {
     content: "";
     content: "";
     position: absolute;
    display: block;
     bottom: 0;
     position: fixed;
     top: 0;
     left: 0;
     left: 0;
     width: 100%;
     width: 100%;
     height: 50px;
     height: 300px;
     background: linear-gradient(to bottom, transparent, #c7b89e);
     background-image: url('/images/valen_banner.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    z-index: 0;
     pointer-events: none;
     pointer-events: none;
}
}


/* ===== TOP NAVIGATION BAR ===== */
/* ---- MAKE HEADER TRANSPARENT so banner shows through ---- */
/* The outer wrapper of the whole header */
.mw-page-container {
#mw-header-container, .vector-header-container {
     background: transparent !important;
     background: transparent !important;
     border-bottom: 1px solid rgba(0,0,0,0.2) !important;
     position: relative;
     padding: 0 !important;
     z-index: 1;
}
}


/* Logo */
.vector-header,
.mw-logo, .mw-logo-icon {
.vector-header-container,
     background-color: transparent !important;
.vector-sticky-header,
.mw-header {
     background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
}


/* Tabs: Main Page, Discussion */
/* Slim dark overlay on JUST the tab row for readability */
.vector-page-toolbar {
.vector-page-toolbar {
     background: rgba(0, 0, 0, 0.25) !important;
     background: rgba(30, 20, 10, 0.55) !important;
     border-bottom: 1px solid rgba(255,255,255,0.15) !important;
     border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(2px);
}
}
.vector-page-toolbar .mw-portlet-namespace li a,
 
.vector-page-toolbar .mw-portlet-views li a,
/* Tab links: white text on dark overlay */
.vector-page-toolbar-container a {
.vector-page-toolbar a,
     color: #fff !important;
.mw-portlet-namespaces a,
.mw-portlet-views a,
.mw-portlet-cactions a {
     color: #f0ddb0 !important;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}
}
.vector-tab-noicon.selected a,
.mw-portlet-namespaces .selected a {
.mw-portlet-namespace li.selected a {
     color: #ffd700 !important;
     color: #ffd700 !important;
     border-bottom: 2px solid #ffd700 !important;
     border-bottom: 2px solid #ffd700 !important;
    font-weight: bold !important;
}
}


/* User links */
/* User links & top-right links */
.vector-user-links a, #pt-login a, #pt-createaccount a {
.vector-user-links a,
     color: #fff !important;
#pt-login a, #pt-createaccount a,
     text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
.mw-portlet-user-menu a {
     color: #f0ddb0 !important;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}
 
/* Logo */
.mw-logo-wordmark, .mw-logo-tagline {
    display: none; /* hide text, show only icon */
}
.mw-logo-icon {
    background-color: transparent !important;
}
}


/* Search bar */
/* Search box */
.vector-search-box input {
.vector-search-box-vue-wrapper input,
.vector-search-box input[type="search"],
#searchInput {
     background-color: rgba(255,255,255,0.85) !important;
     background-color: rgba(255,255,255,0.85) !important;
     border: 1px solid #9e8c74 !important;
     border: 1px solid rgba(0,0,0,0.35) !important;
     color: #332717 !important;
     color: #332717 !important;
    border-radius: 4px !important;
}
}


/* ===== SIDEBAR ===== */
/* ---- SIDEBAR ---- */
#mw-sidebar-container, .mw-table-of-contents-container {
.mw-portlet {
     background: transparent !important;
     background: transparent !important;
}
}
.sidebar-toc, .vector-toc {
.mw-portlet-nav-bar {
     background-color: rgba(229, 216, 197, 0.75) !important;
     background: transparent !important;
    border: 1px solid #9e8c74 !important;
    border-radius: 4px;
}
}
.mw-portlet-navigation .mw-portlet-header,
.mw-portlet .mw-portlet-header,
.mw-portlet-tb .mw-portlet-header,
.vector-menu-heading {
.vector-menu-heading {
     color: #332717 !important;
     color: #332717 !important;
     font-weight: bold !important;
     font-weight: bold !important;
    border-bottom: 1px solid #9e8c74 !important;
}
}
.sidebar-toc a, .vector-toc a, .mw-portlet-navigation a, .mw-portlet-tb a {
.mw-portlet ul li a {
     color: #5c4220 !important;
    color: #5c3a10 !important;
}
.mw-portlet ul li a:hover {
     color: #332717 !important;
    text-decoration: underline;
}
}


/* ===== MAIN CONTENT ===== */
/* ---- MAIN CONTENT BOX ---- */
.mw-content-container, .vector-column-content {
.mw-body {
     background: transparent !important;
    background-color: #e8dcc4 !important;
    border: 1px solid #9e8c74 !important;
    border-radius: 4px !important;
    color: #332717 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25) !important;
     margin-top: 0.5em !important;
}
}


/* Content box itself */
#mw-content-text,
#content, .mw-body {
.mw-content-ltr {
    background-color: #e5d8c5 !important;
    border: 1px solid #9e8c74 !important;
    border-radius: 6px;
     color: #332717 !important;
     color: #332717 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    margin-top: 1em !important;
}
}


/* Headings */
/* Headings */
h1, h2, h3, h4, h5, h6,
h1.firstHeading, .mw-page-title-main {
.mw-body h1, .mw-body h2, .mw-body h3 {
    color: #332717 !important;
    border-bottom: 2px solid #9e8c74 !important;
    font-family: 'Georgia', serif !important;
}
h2, h3, h4, h5, h6 {
     color: #332717 !important;
     color: #332717 !important;
     border-bottom-color: #9e8c74 !important;
     border-bottom-color: #b5a48a !important;
    font-family: 'Georgia', serif;
}
}


/* Links */
/* Links */
a, a:link, a:visited {
a, a:link {
     color: #7a3c00 !important;
     color: #7a3c00 !important;
}
a:visited {
    color: #5c2c00 !important;
}
}
a:hover {
a:hover {
     color: #5c2c00 !important;
     color: #3a1800 !important;
}
}


/* ===== HIDE MAIN PAGE TITLE ===== */
/* ---- HIDE MAIN PAGE TITLE ---- */
.page-Main_Page .mw-first-heading,
.page-Main_Page #firstHeading,
.page-Main_Page #firstHeading,
.page-Main_Page .mw-page-title-main {
.page-Main_Page .mw-page-title-main {
Line 146: Line 164:
}
}


/* ===== INFOBOX STYLING ===== */
/* ---- HIDE THE APPEARANCE PANEL (not needed, looks cluttered) ---- */
.infobox {
.vector-column-end, .mw-portlet-appearances {
     background-color: #dfd3bc !important;
    display: none !important;
}
 
/* ---- TABLES ---- */
table.wikitable {
     background-color: #e8dcc4 !important;
     border: 1px solid #9e8c74 !important;
     border: 1px solid #9e8c74 !important;
     color: #332717 !important;
     color: #332717 !important;
}
}
.infobox th {
table.wikitable > * > tr > th {
     background-color: #c7b89e !important;
    background-color: #c9b99a !important;
    color: #332717 !important;
}
table.wikitable > * > tr:nth-child(even) > td {
    background-color: #ddd0b8 !important;
}
 
/* ---- INFOBOX ---- */
.infobox {
     background-color: #ddd0b8 !important;
    border: 1px solid #9e8c74 !important;
     color: #332717 !important;
     color: #332717 !important;
}
}


/* ===== FOOTER ===== */
/* ---- FOOTER ---- */
.mw-footer, #footer {
.mw-footer, #footer {
     background-color: #b0a08a !important;
     background-color: #b5a48a !important;
     border-top: 1px solid #9e8c74 !important;
     border-top: 2px solid #9e8c74 !important;
     color: #5c4a30 !important;
     color: #5c4a30 !important;
}
}
Line 167: Line 200:
}
}


/* ===== TABLE DEFAULTS ===== */
/* ---- CATEGORY GRID ---- */
table.wikitable {
.osrs-grid-container {
     background-color: #e5d8c5 !important;
     display: flex;
     border: 1px solid #9e8c74 !important;
    flex-wrap: wrap;
     color: #332717 !important;
     gap: 12px;
     margin-top: 16px;
}
}
table.wikitable th {
.osrs-grid-item {
     background-color: #c7b89e !important;
    flex: 1 1 calc(25% - 12px);
     background: #fff;
    border: 2px solid #7d6b54;
    text-align: center;
    padding: 8px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
}
table.wikitable tr:nth-child(even) {
.osrs-grid-item-title {
     background-color: #dfd3bc !important;
    font-weight: bold;
    color: #332717;
     background-color: #e0d0b5;
    padding: 4px;
    border-top: 1px solid #7d6b54;
    margin-top: 4px;
}
}
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Vector.css"