Winds Of Valen Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

Maintenance script (talk | contribs)

1,990 edits
Refined OSRS Global Layout & Colors
OSRS precise color pallette and CSS Grid
Line 1: Line 1:
/* ============================================================
/* ============================================================
   WINDS OF VALEN WIKI — Global CSS Overrides
   OSRS EXACT REPLICA DESIGN SYSTEM
   ============================================================ */
   ============================================================ */


/* ---- Google Fonts ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@700&family=Inter:wght@400;600&display=swap');


:root {
/* --- 1. Global Page Background & Overrides --- */
    --header-bg-image: url('/images/header-bg-placeholder.jpg'); /* Placeholder tiled bg */
}
 
/* ============================================================
  GLOBAL BACKGROUND & BORDERS
  ============================================================ */
body, body.skin-vector-2022 {
body, body.skin-vector-2022 {
     background-color: #e1d5be !important;
     background-color: #e1d5be !important;
Line 20: Line 13:


#content, .mw-body {
#content, .mw-body {
     background-color: #f1e7d3 !important;
     background-color: #e1d5be !important; /* Force tan background everywhere */
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
Line 29: Line 22:
}
}


/* Hide appearance / text / width / color tools and right rail globally */
/* Hide appearance sidebar tools globally */
#vector-appearance,
#vector-appearance,
#vector-page-tools-pinned-container,
#vector-page-tools-pinned-container,
Line 36: Line 29:
}
}


/* ============================================================
/* Hide Main Page h1 heading via CSS */
  HEADER & TOP NAVIGATION
  ============================================================ */
.vector-header-container,
.mw-header {
    background-image: var(--header-bg-image);
    background-repeat: repeat-x;
    background-position: top left;
    background-color: #4a3c28; /* Fallback */
}
 
/* Precise Logo Positioning */
#p-logo, .mw-logo {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999;
}
#p-logo img, .mw-logo img, .mw-logo-icon {
    width: 140px !important;
    height: auto !important;
}
 
/* Navigation Top Bar */
.vector-page-toolbar {
    background-color: #4a3c28 !important;
    border-bottom: 1px solid #2a2214 !important;
}
.vector-page-tabs .mw-list-item a {
    color: #eedfad !important;
}
.vector-page-tabs .mw-list-item.selected a,
.vector-page-tabs .mw-list-item a:hover {
    color: #ffffff !important;
    border-bottom: 2px solid #eedfad !important;
}
 
/* ============================================================
  MAIN PAGE HIDE H1
  ============================================================ */
.page-Main_Page #firstHeading,
.page-Main_Page #firstHeading,
.page-Main_Page .mw-first-heading {
.page-Main_Page .mw-first-heading {
Line 86: Line 38:
}
}


/* ============================================================
/* --- 2. Main Page Layout Engine --- */
  WIKITABLES
.osrs-main-page-wrapper {
  ============================================================ */
     max-width: 100%;
table.wikitable {
     background: #fcf6e8;
    border: 1px solid #a19277;
     color: #4a3c28;
     color: #4a3c28;
    box-sizing: border-box;
    font-family: 'PT Serif', Georgia, serif;
}
}
table.wikitable > * > tr > th {
 
     background: #b3a07d;
.osrs-layout-grid {
     border: 1px solid #a19277;
     display: grid;
     color: #4a3c28;
     grid-template-columns: 1fr 300px;
}
     gap: 14px;
table.wikitable > * > tr > td {
     align-items: start;
    background: #fcf6e8;
     border: 1px solid #a19277;
}
}


/* ============================================================
@media screen and (max-width: 900px) {
  MAIN PAGE COMPONENTS
    .osrs-layout-grid {
  ============================================================ */
        grid-template-columns: 1fr;
.wov-main-page {
     }
    font-family: 'PT Serif', Georgia, serif;
    color: #4a3c28;
    max-width: 100%;
     box-sizing: border-box;
}
}


/* Welcome Box */
/* --- 3. Component Hierarchy --- */
.wov-welcome-box {
.osrs-component-box, .osrs-widget {
     background: #fcf6e8;
     background-color: #f1e7d3;
     border: 1px solid #a19277;
     border: 1px solid #b3a07d;
    text-align: center;
    padding: 22px 24px 18px;
     margin-bottom: 14px;
     margin-bottom: 14px;
    overflow: hidden;
}
}
.wov-welcome-title {
 
.osrs-section-title {
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'PT Serif', Georgia, serif;
     font-size: 1.55em;
     font-size: 1.05em;
     font-weight: bold;
     font-weight: bold;
     color: #4a3c28;
     color: #4a3c28;
     margin: 0 0 6px;
     padding: 8px 14px 7px;
     line-height: 1.2;
    border-bottom: 2px solid #b3a07d;
    background-color: #f1e7d3;
     letter-spacing: 0.01em;
}
}


/* Layout Grid */
/* --- 4. Welcome Box --- */
.wov-layout-grid {
.osrs-welcome-box {
    display: flex;
     background-color: #fcf6e8;
    gap: 14px;
     border: 1px solid #b3a07d;
    align-items: flex-start;
    text-align: center;
}
    padding: 25px;
.wov-main-col {
    flex: 1 1 0;
    min-width: 0;
}
.wov-side-col {
    width: 300px;
    flex-shrink: 0;
}
 
/* Parchment Box */
.wov-parchment-box {
     background: #fcf6e8; /* Inside content area block */
     border: 1px solid #a19277;
     margin-bottom: 14px;
     margin-bottom: 14px;
    overflow: hidden;
}
}
 
.osrs-welcome-title {
/* Section Header */
     font-size: 1.6em;
.wov-section-header {
    font-family: 'PT Serif', Georgia, serif;
     font-size: 0.97em;
     font-weight: bold;
     font-weight: bold;
     color: #4a3c28;
     color: #4a3c28;
     padding: 7px 14px 6px;
     margin-bottom: 8px;
    border-bottom: 1px solid #a19277;
     line-height: 1.2;
    background: #f1e7d3;
     letter-spacing: 0.015em;
}
}
.wov-section-header-dark {
.osrs-welcome-sub {
    font-family: 'PT Serif', Georgia, serif;
     font-size: 0.95em;
     font-size: 0.97em;
     color: #5c4e38;
    font-weight: bold;
     color: #ffffff;
    padding: 8px 14px 7px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background: #1e3a6e;
}
}


/* Updates Row */
/* --- 5. Latest Updates --- */
.wov-updates-row {
.osrs-updates-row {
     display: flex;
     display: grid;
     gap: 0;
     grid-template-columns: 1fr 1fr;
    background-color: #fcf6e8;
}
}
.wov-update-card {
.osrs-update-card {
    flex: 1;
     padding: 12px 14px;
     padding: 10px 14px 12px;
     border-right: 1px solid #b3a07d;
     border-right: 1px solid #a19277;
    background: #fcf6e8;
}
}
.wov-update-card:last-child {
.osrs-update-card:last-child { border-right: none; }
    border-right: none;
.osrs-update-tag {
}
.wov-update-tag {
     font-family: 'Inter', sans-serif;
     font-family: 'Inter', sans-serif;
     font-size: 0.71em;
     font-size: 0.7em;
     font-weight: 600;
     font-weight: 700;
     text-transform: uppercase;
     text-transform: uppercase;
     letter-spacing: 0.09em;
    color: #5c4e38;
    color: #7a6848;
     letter-spacing: 0.05em;
     margin-bottom: 5px;
     margin-bottom: 4px;
}
}
.wov-update-title {
.osrs-update-title {
     font-size: 0.93em;
     font-size: 0.95em;
     font-weight: bold;
     font-weight: bold;
    line-height: 1.35;
     margin-bottom: 6px;
     margin-bottom: 6px;
    line-height: 1.3;
}
}
.wov-update-title a {
.osrs-update-title a {
     color: #a61c1c !important;
     color: #a61c1c !important;
     text-decoration: none;
     text-decoration: none;
}
}
.wov-update-title a:hover {
.osrs-update-title a:hover {
     text-decoration: underline;
     text-decoration: underline;
    color: #7a1212 !important;
}
}
.wov-update-snippet {
.osrs-update-snippet {
     font-size: 0.84em;
     font-size: 0.85em;
     color: #4a3c28;
     color: #4a3c28;
    margin: 0;
     line-height: 1.5;
     line-height: 1.55;
}
}


/* Categories Grid */
/* --- 6. Categories Grid --- */
.wov-categories-grid {
.osrs-categories-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-columns: repeat(4, 1fr);
     gap: 8px;
     gap: 8px;
     padding: 10px;
     padding: 10px;
     background: #f1e7d3;
     background-color: #f1e7d3;
}
}
.wov-cat-card {
.osrs-cat-card {
     border: 1px solid #a19277;
     border: 1px solid #b3a07d;
    overflow: hidden;
     background-color: #ffffff;
     background: #ffffff;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
}
}
.wov-cat-img-box {
.osrs-cat-img-box {
     background: #ffffff;
     height: 110px;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
    height: 90px;
     padding: 0;
     padding: 0;
     border-bottom: 1px solid #a19277;
     background-color: #ffffff;
}
}
.wov-cat-img-box img {
.osrs-cat-img-box img {
     max-width: 100%;
     max-width: 100%;
     max-height: 100%;
     max-height: 100%;
     object-fit: contain;
     object-fit: contain;
    display: block;
}
}
.wov-cat-label {
.osrs-cat-label {
     background: #fcf6e8;
     background-color: #fcf6e8;
     padding: 6px;
    border-top: 1px solid #b3a07d;
     padding: 8px 6px;
     text-align: center;
     text-align: center;
     font-size: 0.84em;
     font-size: 0.9em;
}
}
.wov-cat-label a {
.osrs-cat-label a {
     color: #611313 !important;
     color: #611313 !important;
    font-weight: bold;
     text-decoration: none !important;
     text-decoration: none !important;
     font-weight: bold;
     display: block;
}
.wov-cat-label a:hover {
    text-decoration: underline !important;
}
}
.osrs-cat-label a:hover { text-decoration: underline !important; }


/* Popular Pages */
/* --- 7. Popular Pages (Buttons) --- */
.wov-popular-inner {
.osrs-popular-inner {
     padding: 10px;
     padding: 10px;
     background: #f1e7d3;
     background-color: #f1e7d3;
}
}
.wov-popular-grid {
.osrs-popular-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     gap: 8px;
}
}
.wov-popular-btn {
.osrs-btn-wrapper a {
     display: block;
     display: block;
     background: #5c4e38;
     background-color: #5c4e38;
    border: 1px solid #4a3c28;
     color: #ffffff !important;
     color: #ffffff !important;
     font-family: 'Inter', sans-serif;
     font-family: 'Inter', sans-serif;
    font-weight: bold;
     font-size: 0.85em;
     font-size: 0.85em;
    font-weight: bold;
     text-align: center;
     text-align: center;
     padding: 12px 10px;
     padding: 12px 6px;
     text-decoration: none !important;
     text-decoration: none !important;
     line-height: 1.3;
    border: 1px solid #4a3c28;
}
     line-height: 1.2;
.wov-popular-btn:hover {
    background: #4a3c28;
}
}
.osrs-btn-wrapper a:hover { background-color: #4a3c28; }


/* Skills Grid */
/* --- 8. Skill Training --- */
.wov-skills-inner {
.osrs-skills-inner {
     padding: 8px 10px 10px;
     padding: 8px 10px 10px;
}
}
.wov-skills-grid {
.osrs-skills-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     background: #fcf6e8;
     background-color: #fcf6e8;
     border: 1px solid #a19277;
     border: 1px solid #b3a07d;
}
}
.wov-skill-item {
.osrs-skill-item {
     padding: 6px 10px;
     padding: 8px 10px;
     font-size: 0.85em;
     font-size: 0.85em;
     border-bottom: 1px solid #a19277;
     border-bottom: 1px solid #b3a07d;
     border-right: 1px solid #a19277;
     border-right: 1px solid #b3a07d;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 6px;
     gap: 8px;
}
}
.wov-skill-item:nth-child(3n) {
.osrs-skill-item:nth-child(3n) { border-right: none; }
    border-right: none;
.osrs-skill-item a {
}
.wov-skill-item img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
}
.wov-skill-item a {
     color: #4a3c28 !important;
     color: #4a3c28 !important;
    font-weight: bold;
     text-decoration: none;
     text-decoration: none;
    font-weight: bold;
}
.wov-skill-item a:hover {
    color: #a61c1c !important;
    text-decoration: underline;
}
}
.osrs-skill-item a:hover { color: #611313 !important; text-decoration: underline; }


/* Sidebar Widgets */
/* --- 9. Sidebar Widgets --- */
.wov-widget {
.osrs-widget-body {
    background: #fcf6e8;
     padding: 12px 14px;
    border: 1px solid #a19277;
    margin-bottom: 14px;
}
.wov-widget-body {
     padding: 10px 14px;
     font-size: 0.85em;
     font-size: 0.85em;
     color: #4a3c28;
     background-color: #fcf6e8;
     line-height: 1.6;
     line-height: 1.6;
}
}
.wov-widget-body dl {
 
     display: grid;
/* Stats */
     grid-template-columns: auto 1fr;
.osrs-stat-row {
     gap: 4px 8px;
     display: flex;
    margin: 0;
     justify-content: space-between;
     margin-bottom: 4px;
}
}
.wov-widget-body dt {
.osrs-stat-row b { color: #4a3c28; }
    font-weight: bold;
 
}
/* Help */
.wov-widget-body dd {
.osrs-help ul {
     margin: 0;
     margin: 6px 0 0;
     text-align: right;
     padding-left: 20px;
}
}
.osrs-help a { color: #611313 !important; text-decoration: none; font-weight: bold; }
.osrs-help a:hover { text-decoration: underline; }


/* Discord Community Box */
/* Discord Box */
.wov-discord-widget {
.osrs-discord-widget {
     background: #1e3a6e;
     background-color: #3b5580;
     border: 1px solid #14284f;
     border: 1px solid #2a3c5a;
     margin-bottom: 14px;
     margin-bottom: 14px;
}
}
.wov-discord-body {
.osrs-discord-title {
     padding: 12px 14px;
    font-family: 'PT Serif', Georgia, serif;
    font-size: 0.95em;
    font-weight: bold;
    color: #ffffff;
     padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
}
.wov-discord-desc {
.osrs-discord-body { padding: 12px 14px; }
.osrs-discord-desc {
     font-size: 0.85em;
     font-size: 0.85em;
     color: #e2e8f0;
     color: #e2e8f0;
    margin-bottom: 12px;
     line-height: 1.5;
     line-height: 1.5;
    margin: 0 0 12px;
}
}
 
.osrs-discord-btn-wrapper a {
/* Simple solid HTML button for Discord */
.wov-discord-btn-link {
     display: block;
     display: block;
     background: #5865F2;
     background-color: #5865F2;
     color: #ffffff !important;
     color: #ffffff !important;
    text-align: center;
     font-family: 'Inter', sans-serif;
     font-family: 'Inter', sans-serif;
     font-weight: bold;
     font-weight: bold;
     font-size: 0.9em;
     font-size: 0.9em;
    text-align: center;
     padding: 10px;
     padding: 10px;
     border-radius: 4px;
     border-radius: 4px;
Line 384: Line 289:
     border: 1px solid #4752c4;
     border: 1px solid #4752c4;
}
}
.wov-discord-btn-link:hover {
.osrs-discord-btn-wrapper a:hover { background-color: #4752c4; }
    background: #4752c4;
}
 
/* Help Improve */
.wov-help-list {
    margin: 6px 0 0;
    padding-left: 16px;
}
.wov-help-list a {
    color: #a61c1c !important;
    text-decoration: none;
}
.wov-help-list a:hover {
    text-decoration: underline;
}


@media screen and (max-width: 800px) {
/* Responsive adjustments */
     .wov-layout-grid { flex-direction: column; }
@media screen and (max-width: 900px) {
     .wov-side-col { width: 100%; }
     .osrs-updates-row,
    .wov-categories-grid, .wov-popular-grid, .wov-skills-grid {
     .osrs-categories-grid,
         grid-template-columns: repeat(2, 1fr);
    .osrs-popular-grid,
    .osrs-skills-grid {
         grid-template-columns: 1fr;
     }
     }
    .osrs-update-card { border-right: none; border-bottom: 1px solid #b3a07d; }
}
}
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Common.css"