Winds Of Valen Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

Maintenance script (talk | contribs)

1,990 edits
Perfecting Classic Layout layout and dark mode override
Perfecting layout
Line 1: Line 1:
/* Override MediaWiki Dark Mode variables to force OSRS Beige */
/* Ensure body is beige */
:root, html {
body, html {
    --color-surface: #e5d8c5 !important;
     background-color: #c7b89e !important; /* Slightly darker beige for the far background */
    --color-base: #332717 !important;
    --background-color-base: #e5d8c5 !important;
    --background-color-interactive: transparent !important;
    --color-text: #332717 !important;
     background-color: #e5d8c5 !important;
}
 
/* Center the entire Wiki on large screens like OSRS does */
body {
    background-color: #e5d8c5 !important;
    color: #332717 !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Nice shadow on the edges */
}
}


/*  
/*  
   The banner image that spans the entire top of the centered body
   The banner image spanning the top
*/
*/
#mw-page-base {
#mw-page-base {
Line 29: Line 14:
     width: 100%;
     width: 100%;
     height: 400px !important;
     height: 400px !important;
     background-image: linear-gradient(to bottom, rgba(229,216,197,0) 60%, #e5d8c5 100%), url('/images/valen_banner.png') !important;
     background-image: linear-gradient(to bottom, rgba(199,184,158,0) 60%, #c7b89e 100%), url('/images/valen_banner.png') !important;
     background-position: center top !important;
     background-position: center top !important;
     background-repeat: no-repeat !important;
     background-repeat: no-repeat !important;
Line 36: Line 21:
}
}


/* Sidebar styling - Must be transparent to show the banner behind it! */
/* Base header spacer - keeps things from flying to the top */
#mw-head-base {
    height: 5em !important;
    background: transparent !important;
}
 
/* Transparent Sidebar */
#mw-panel {
#mw-panel {
     background-color: transparent !important;
     background: transparent !important;
    padding-top: 1em !important;
     z-index: 2;
     z-index: 2 !important;
    position: absolute !important;
}
}
#p-logo {
#p-logo {
    margin-bottom: 20px;
     background: transparent !important;
     background: transparent !important;
}
}
#p-logo a, .mw-wiki-logo {
.mw-wiki-logo {
     background-image: url('/images/windsofvalenlogo.ico') !important;
     background-image: url('/images/windsofvalenlogo.ico') !important;
     background-size: contain !important;
     background-size: contain !important;
    background-position: center !important;
     background-color: transparent !important;
     background-color: transparent !important;
}
}
 
.portal {
.portal, .portal .body, .vector-menu-portal, .vector-menu-portal .vector-menu-content {
     background: transparent !important;
     background: transparent !important;
}
}
.vector-menu-portal .vector-menu-heading {
.vector-menu-portal .vector-menu-heading {
     color: #332717 !important;
     color: #332717 !important;
Line 65: Line 50:
.vector-menu-portal .vector-menu-content li a {
.vector-menu-portal .vector-menu-content li a {
     color: #4a3a25 !important;
     color: #4a3a25 !important;
}
.vector-menu-portal .vector-menu-content li a:hover {
    text-decoration: underline;
}
}


/* Transparent top navigation tabs */
/* Transparent Tabs */
#mw-head-base {
    background: transparent !important;
    height: 0 !important;
}
#mw-head {
#mw-head {
     background: transparent !important;
     background: transparent !important;
     z-index: 5 !important;
     z-index: 5 !important;
}
}
#left-navigation, #right-navigation, #p-personal {
#p-namespaces li, #p-views li, #p-variants li, .vector-menu-tabs li, #left-navigation, #right-navigation, #p-personal {
    background: transparent !important;
}
 
/* Force every single tab background to be transparent */
#p-namespaces li, #p-views li, #p-variants li, .vector-menu-tabs li, .vector-menu-tabs li span, .vector-menu-tabs li a {
     background: transparent !important;
     background: transparent !important;
     background-image: none !important;
     background-image: none !important;
Line 94: Line 67:
}
}
#p-namespaces li.selected a, #p-views li.selected a {
#p-namespaces li.selected a, #p-views li.selected a {
     color: #ffd700 !important; /* Golden text for selected tab */
     color: #ffd700 !important;
}
}
 
#p-search form, #simpleSearch {
/* Search bar styling */
#p-search form, #simpleSearch, #searchInput {
     background: rgba(255, 255, 255, 0.8) !important;
     background: rgba(255, 255, 255, 0.8) !important;
     border: 1px solid #7d6b54 !important;
     border: 1px solid #7d6b54 !important;
    color: #332717 !important;
}
}


/* Content Area */
/* Content Area - Fixed width to prevent infinite stretching, shifted down to overlap banner */
#content {
#content {
     background-color: transparent !important;
     background-color: #e5d8c5 !important; /* OSRS Beige */
     background-image: none !important;
     color: #332717 !important;
     border: none !important;
     border: 2px solid #7d6b54 !important;
    border-radius: 5px;
     position: relative;
     position: relative;
     z-index: 1;
     z-index: 1;
     margin-top: 20px;  
     margin-top: 150px !important; /* Push down to overlap banner beautifully */
    margin-left: 12em !important; /* Make room for sidebar */
    max-width: 1000px !important; /* Prevent full width stretching */
    padding: 2em;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
}


/* Inside #content, the actual article body is .mw-body. We make it semi-transparent beige */
/* Links and Headers */
.mw-body {
h1, h2, h3, h4 {
    background-color: rgba(229, 216, 197, 0.9) !important;
    border: 1px solid #d1c1a6 !important;
    border-radius: 5px;
    margin-top: 10px;
    padding: 1.25em 1.5em 1.5em 1.5em;
     color: #332717 !important;
     color: #332717 !important;
    border-bottom: 1px solid #7d6b54 !important;
}
}
 
a {
/* Headings */
     color: #633f00; /* Darker brown links */
h1, h2, h3, h4, h5, h6 {
     color: #332717 !important;
    border-bottom-color: #d1c1a6 !important;
}
}


/* Hide the main page title header */
/* Hide Main Page Header */
.page-Main_Page #firstHeading {
.page-Main_Page #firstHeading {
     display: none !important;
     display: none !important;
}
/* Grid Layout for Main Page */
.osrs-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}
.osrs-grid-item {
    flex: 1 1 calc(20% - 15px);
    background-color: #fff;
    border: 2px solid #7d6b54;
    text-align: center;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    min-width: 100px;
}
.osrs-grid-item img {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}
.osrs-grid-item-title {
    font-weight: bold;
    color: #332717;
    background-color: #e8dcc4;
    padding: 5px;
    border-top: 1px solid #7d6b54;
}
/* Popular Pages Buttons */
.osrs-popular-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.osrs-button {
    flex: 1 1 calc(33% - 10px);
    background-color: #4a3a25;
    color: white !important;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    text-decoration: none;
    border: 2px solid #332717;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
}
.osrs-button:hover {
    background-color: #5c482e;
    text-decoration: none;
}
}
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Common.css"