Winds Of Valen Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit

Life (talk | contribs)

3 user groups
2,267 edits
Remove tab borders to match OSRS
made stats box smaller
 
(43 intermediate revisions by 2 users not shown)
Line 49: Line 49:
}
}


/* --- 5. Fix Logo Clipping --- */
/* --- 5. Hide Foreground Logo (Use Background Instead) --- */
#p-logo a {
#p-logo a {
    background-size: contain !important;
     height: 140px !important;
    background-position: center center !important;
     height: 140px !important; /* Optional: shrink if it overlaps */
}
}


Line 60: Line 58:
.page-Main_Page .mw-first-heading {
.page-Main_Page .mw-first-heading {
     display: none !important;
     display: none !important;
}
/* Give all page titles some breathing room from the top border */
.firstHeading {
    padding-top: 15px !important;
}
}
.page-Main_Page .mw-body-content {
.page-Main_Page .mw-body-content {
Line 88: Line 91:
   OSRS NATIVE DOM ARCHITECTURE (Main Page Layout Engine)
   OSRS NATIVE DOM ARCHITECTURE (Main Page Layout Engine)
   ========================================================================== */
   ========================================================================== */


.mainpage-container {
.mainpage-container {
Line 99: Line 103:
     display: grid;
     display: grid;
     grid-template-columns: 1fr 300px;
     grid-template-columns: 1fr 300px;
     gap: 14px;
     gap: 20px;
     align-items: start;
     align-items: start;
}
}
Line 111: Line 115:
.mainpage-header {
.mainpage-header {
     display: flex;
     display: flex;
     gap: 14px;
     gap: 20px;
     margin-bottom: 14px;
     margin-bottom: 20px;
}
}
.header-intro {
.header-intro {
     flex: 1;
     flex: 1;
     background-color: #fcf6e8 !important;
     background: url('/resources/assets/welcomeimage.jpg') center center no-repeat !important;
     border: 1px solid #b3a07d;
    background-size: cover !important;
     padding: 25px;
     border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
     padding: 30px;
     text-align: center;
     text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.header-intro::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(20, 15, 10, 0.8) 0%, rgba(40, 25, 15, 0.6) 100%);
    z-index: -1;
}
}
.header-title {
.header-title {
     font-size: 1.6em;
     font-size: 1.8em;
     font-weight: bold;
     font-weight: bold;
     color: #4a3c28;
     color: #ffd700;
     margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 15px rgba(255, 215, 0, 0.3);
     margin-bottom: 12px;
     line-height: 1.2;
     line-height: 1.2;
}
}
.header-intro p {
.header-intro p {
     font-size: 0.95em;
     font-size: 1.05em;
     color: #5c4e38;
     color: #f1e7d3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
     margin: 0;
     margin: 0;
}
.header-intro p a {
    color: #7dd3fc !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.header-intro p a:hover {
    color: #bae6fd !important;
    text-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
}
}


.header-stats {
.header-stats {
     width: 300px;
     width: 190px;
     flex-shrink: 0;
     flex-shrink: 0;
     background-color: #f1e7d3 !important;
     background: linear-gradient(to bottom, #fcf6e8, #f1e7d3) !important;
     border: 1px solid #b3a07d;
    border-radius: 8px;
     padding: 20px 25px;
    box-shadow: 0 4px 10px rgba(61, 43, 31, 0.15);
     border: 1px solid rgba(179, 160, 125, 0.4);
     padding: 12px 16px;
     box-sizing: border-box;
     box-sizing: border-box;
}
}
Line 150: Line 181:
     display: flex;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
     margin-bottom: 6px;
     margin-bottom: 5px;
     font-size: 0.9em;
     font-size: 0.8em;
     border-bottom: 1px dashed #d1c4ac;
     border-bottom: 1px dashed rgba(179, 160, 125, 0.6);
     padding-bottom: 6px;
     padding-bottom: 5px;
}
}
.header-stats li:last-child {
.header-stats li:last-child {
Line 161: Line 192:
}
}
.header-stats b {
.header-stats b {
     color: #4a3c28;
     color: #611313;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
}


Line 170: Line 202:


.section-title {
.section-title {
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'Kingthings Petrock', 'PT Serif', serif;
     font-size: 1.15em;
     font-size: 1.6em;
     font-weight: bold;
     font-weight: normal;
     color: #4a3c28;
     color: #3b240b;
     padding: 8px 14px 7px;
    text-align: center;
     border-bottom: 2px solid #b3a07d;
     padding: 0 0 10px 0;
     background-color: #f1e7d3;
    margin: 30px 0 20px 0;
     margin: 0 0 14px 0;
    position: relative;
    background: none;
     border-bottom: none;
}
.section-title::after {
    content: "";
    display: block;
    width: 150px;
    height: 3px;
     background: linear-gradient(90deg, transparent, #b3a07d, transparent);
     margin: 8px auto 0 auto;
}
}


.tile-row {
.tile-row {
     display: grid;
     display: grid;
     gap: 8px;
     gap: 16px;
     margin-bottom: 14px;
     margin-bottom: 20px;
}
}
.updates-row {
.updates-row {
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
     background-color: #fcf6e8;
     background: none;
     border: 1px solid #b3a07d;
     border: none;
    gap: 0;
}
}
.categories-grid {
.categories-grid {
     grid-template-columns: repeat(4, 1fr);
     grid-template-columns: repeat(3, 1fr);
     background-color: #f1e7d3;
     background: none;
     padding: 10px;
     border: none;
     border: 1px solid #b3a07d;
     padding: 0;
}
}


.tile-halves {
.update-card {
     display: flex;
     background: linear-gradient(145deg, #ffffff, #fcf6e8);
     flex-direction: column;
    border-radius: 8px;
     padding: 20px;
    box-shadow: 0 4px 12px rgba(61, 43, 31, 0.1);
    border: 1px solid rgba(179, 160, 125, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}
 
.update-card:hover {
.update-card {
     transform: translateY(-3px);
     padding: 12px 14px;
     box-shadow: 0 8px 16px rgba(61, 43, 31, 0.15);
     border-right: 1px solid #b3a07d;
}
}
.update-card:last-child { border-right: none; }
.update-header {
.update-header {
     font-family: 'Inter', sans-serif;
     font-family: 'Inter', sans-serif;
     font-size: 0.7em;
     font-size: 0.75em;
     font-weight: 700;
     font-weight: 700;
     text-transform: uppercase;
     text-transform: uppercase;
     color: #5c4e38;
     color: #8c7657;
     letter-spacing: 0.05em;
     letter-spacing: 0.05em;
     margin-bottom: 4px;
     margin-bottom: 8px;
}
}
.update-title {
.update-title {
     font-size: 0.95em;
     font-size: 1.1em;
     font-weight: bold;
     font-weight: bold;
     margin-bottom: 6px;
     margin-bottom: 10px;
     line-height: 1.3;
     line-height: 1.3;
}
}
.update-title a {
.update-title a {
    color: #791a1a !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.update-title a:hover {
     color: #a61c1c !important;
     color: #a61c1c !important;
     text-decoration: none;
     text-decoration: none;
}
}
.update-title a:hover { text-decoration: underline; }
.update-card p {
    font-size: 0.9em;
    color: #4a3c28;
    line-height: 1.5;
    margin: 0;
}


.categories-grid .tile-halves {
.category-card {
     border: 1px solid #b3a07d;
    background: #ffffff;
     background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(20, 12, 4, 0.25);
     border: 1px solid rgba(179, 160, 125, 0.3);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px rgba(20, 12, 4, 0.35), 0 0 15px rgba(255, 215, 0, 0.15);
     border-color: #b3a07d;
}
}
.tile-top.tile-image {
.tile-top.tile-image {
     background-color: #ffffff !important;
     background: radial-gradient(circle, #ffffff 0%, #f1e7d3 100%) !important;
     height: 110px;
     height: 220px;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     padding: 10px;
     padding: 15px;
     border-bottom: 1px solid #b3a07d;
     border-bottom: 1px solid rgba(179, 160, 125, 0.3);
}
}
.tile-top.tile-image img {
.tile-top.tile-image img {
     max-width: 100%;
     max-width: 175px;
     max-height: 100%;
     max-height: 175px;
     object-fit: contain;
     object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(20, 12, 4, 0.5));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.category-card:hover .tile-top.tile-image img {
    transform: scale(1.05);
    filter: drop-shadow(0 18px 20px rgba(20, 12, 4, 0.6));
}
}
.tile-bottom.link-button {
.tile-bottom.link-button {
     background-color: #fcf6e8 !important;
     background: #fcf6e8 !important;
     padding: 8px 6px;
     padding: 12px 10px;
     text-align: center;
     text-align: center;
     font-size: 0.9em;
     font-size: 1em;
     flex-grow: 1;
     flex-grow: 1;
}
}
.tile-bottom.link-button a {
.tile-bottom.link-button a {
     color: #611313 !important;
     color: #4a3c28 !important;
     font-weight: bold;
     font-weight: bold;
     text-decoration: none !important;
     text-decoration: none !important;
     display: block;
     display: block;
    transition: color 0.2s ease;
}
.category-card:hover .tile-bottom.link-button a {
    color: #791a1a !important;
}
}
.tile-bottom.link-button a:hover { text-decoration: underline !important; }


.popular-grid {
.popular-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     gap: 12px;
     background-color: #f1e7d3;
     margin-bottom: 20px;
     padding: 10px;
     background: none;
     border: 1px solid #b3a07d;
     border: none;
     margin-bottom: 14px;
     padding: 0;
}
}
.link-button.dark-button a {
.link-button.dark-button a {
     display: block;
     display: flex;
     background-color: #5c4e38 !important;
    align-items: center;
     color: #ffffff !important;
    justify-content: center;
     background: linear-gradient(to bottom, #4a3c28, #3b240b) !important;
     color: #f1e7d3 !important;
     font-family: 'Inter', sans-serif;
     font-family: 'Inter', sans-serif;
     font-weight: bold;
     font-weight: 600;
     font-size: 0.85em;
     font-size: 0.9em;
     text-align: center;
     text-align: center;
     padding: 12px 6px;
     padding: 14px 10px;
    border-radius: 6px;
     text-decoration: none !important;
     text-decoration: none !important;
     border: 1px solid #3d3324;
     border: 1px solid #231607;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1);
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.link-button.dark-button a:hover {
    background: linear-gradient(to bottom, #5c4e38, #4a3c28) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4), 0 0 10px rgba(255, 215, 0, 0.2), inset 0 1px 1px rgba(255,255,255,0.2);
    color: #ffffff !important;
}
}
.link-button.dark-button a:hover { background-color: #6e5e44 !important; }


.skills-grid {
.skills-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     background-color: #fcf6e8;
     gap: 12px;
     border: 1px solid #b3a07d;
    margin-bottom: 20px;
     padding: 8px 10px;
     background: none;
     margin-bottom: 14px;
     border: none;
     padding: 0;
}
}
.skill-item {
.skill-item {
     padding: 8px 10px;
    background: #ffffff;
     font-size: 0.85em;
    border-radius: 6px;
     border-bottom: 1px solid #b3a07d;
     padding: 10px 14px;
     border-right: 1px solid #b3a07d;
     font-size: 0.95em;
     box-shadow: 0 2px 6px rgba(61, 43, 31, 0.08);
     border: 1px solid rgba(179, 160, 125, 0.4);
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 8px;
     gap: 12px;
    transition: all 0.2s ease;
}
.skill-item img {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
}
.skill-item:nth-child(3n) { border-right: none; }
.skill-item a {
.skill-item a {
     color: #4a3c28 !important;
     color: #4a3c28 !important;
     font-weight: bold;
     font-weight: bold;
     text-decoration: none;
     text-decoration: none;
    flex-grow: 1;
}
.skill-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(61, 43, 31, 0.15);
    border-color: #b3a07d;
}
.skill-item:hover a {
    color: #791a1a !important;
}
}
.skill-item a:hover { color: #611313 !important; text-decoration: underline; }


.discord-widget, .widget-box {
.discord-widget, .widget-box {
     background-color: #f1e7d3;
     background: linear-gradient(to bottom, #fcf6e8, #f1e7d3);
     border: 1px solid #b3a07d;
    border-radius: 8px;
     margin-bottom: 14px;
    box-shadow: 0 4px 10px rgba(61, 43, 31, 0.15);
     border: 1px solid rgba(179, 160, 125, 0.4);
     margin-bottom: 20px;
    overflow: hidden;
}
}


.discord-widget {
.discord-widget {
     background-color: #3b5580 !important;
     background: linear-gradient(135deg, #3b5580, #263854) !important;
     border: 1px solid #263854 !important;
     border: 1px solid #1c2a3d !important;
     color: #ffffff;
     color: #ffffff;
    box-shadow: 0 6px 15px rgba(28, 42, 61, 0.4);
}
.discord-top {
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
}
}
.discord-title {
.discord-title {
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'Inter', sans-serif;
     font-size: 1.15em;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: #94a3b8;
    margin-bottom: 10px;
    border: none;
    padding: 0;
}
.discord-server-name {
     font-size: 1.2em;
     font-weight: bold;
     font-weight: bold;
     border-bottom: 1px solid #526e9c;
     margin-bottom: 4px;
     padding: 10px 14px;
}
.discord-join-text {
    font-size: 0.9em;
     color: #cbd5e1;
}
}
.discord-body { padding: 12px 14px; }
.discord-bottom {  
.discord-body p { margin: 0 0 12px 0; font-size: 0.85em; line-height: 1.5; color: #e2e8f0; }
    background: rgba(0,0,0,0.2);
.discord-btn a {
    padding: 12px 20px;
    display: block;
    font-size: 0.8em;
     background-color: #21324d !important;
    text-transform: uppercase;
     color: #ffffff !important;
     letter-spacing: 0.1em;
     color: #94a3b8;
     text-align: center;
     text-align: center;
     padding: 10px;
     border-top: 1px solid rgba(255,255,255,0.1);
    font-family: 'Inter', sans-serif;
}
    font-weight: bold;
.discord-widget:hover .discord-arrow {
    text-decoration: none !important;
     transform: translateX(4px);
     border: 1px solid #141f30;
    border-radius: 2px;
}
}
.discord-btn a:hover { background-color: #17253a !important; }


.widget-title {
.widget-title {
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'Kingthings Petrock', 'PT Serif', serif;
     font-size: 1.15em;
     font-size: 1.3em;
     font-weight: bold;
     font-weight: normal;
     color: #4a3c28;
     color: #3b240b;
     border-bottom: 1px solid #b3a07d;
     border-bottom: 1px solid rgba(179, 160, 125, 0.4);
     padding: 10px 14px;
     padding: 14px 20px;
    background: rgba(255,255,255,0.4);
}
}
.widget-body {
.widget-body {
     padding: 12px 14px;
     padding: 16px 20px;
     font-size: 0.85em;
     font-size: 0.9em;
    background-color: #fcf6e8;
     line-height: 1.6;
     line-height: 1.6;
    background: none;
}
}
.widget-body p { margin: 0 0 8px 0; }
.widget-body p { margin: 0 0 12px 0; color: #4a3c28; }
.plainlist ul {
.plainlist ul {
     list-style: none;
     list-style: none;
Line 365: Line 484:
}
}
.plainlist li {
.plainlist li {
     margin-bottom: 4px;
     margin-bottom: 8px;
    padding-left: 14px;
    position: relative;
}
}
.plainlist li::before {
.plainlist li::before {
     content: "•";
     content: "";
     color: #611313;
     position: absolute;
     margin-right: 6px;
    left: 0;
     font-weight: bold;
    top: 8px;
    width: 6px;
     height: 6px;
     background: #b3a07d;
    border-radius: 50%;
}
}
.plainlist a {
.plainlist a {
Line 377: Line 502:
     font-weight: bold;
     font-weight: bold;
     text-decoration: none;
     text-decoration: none;
    transition: color 0.2s ease;
}
}
.plainlist a:hover { text-decoration: underline; }
.plainlist a:hover {  
 
     color: #a61c1c !important;
@media screen and (max-width: 900px) {
     text-decoration: underline;  
     .updates-row, .categories-grid, .popular-grid, .skills-grid {
        grid-template-columns: 1fr;
     }
    .update-card { border-right: none; border-bottom: 1px solid #b3a07d; }
}
}


Line 422: Line 544:
.vector-menu-tabs .vector-menu-content-list > li > a {
.vector-menu-tabs .vector-menu-content-list > li > a {
     color: #794900 !important;
     color: #794900 !important;
     padding: 12px 18px !important;
     padding: 10px 14px !important;
     font-family: 'Museo Sans', 'PT Serif', sans-serif;
     font-family: 'Museo Sans', 'PT Serif', sans-serif;
     font-weight: normal;
     font-weight: normal;
     font-size: 0.95em;
     font-size: 0.95em;
     background: transparent !important;
     background: transparent !important;
    height: 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}
}


Line 432: Line 558:
.vector-menu-tabs .vector-menu-content-list > li.selected > a {
.vector-menu-tabs .vector-menu-content-list > li.selected > a {
     color: #3b240b !important;
     color: #3b240b !important;
     padding-bottom: 12px !important;  
}
 
/* --- Right Navigation (Read, Edit, History) Overrides --- */
/* In OSRS, the right tabs are just text links, not white boxes */
#p-views .vector-menu-content-list > li.selected {
    background-color: transparent !important;
     margin-bottom: 0 !important;
    z-index: 2 !important;
}
#p-views .vector-menu-content-list > li.selected > a {
    color: #794900 !important;
}
}


Line 488: Line 624:
}
}


/* Re-apply the specific tab backgrounds we WANT */
/* Hide the Read tab to match OSRS */
.vector-menu-tabs .vector-menu-content-list > li {
#ca-view {
    background-color: #cfc08d !important; /* Inactive tab */
     display: none !important;
}
.vector-menu-tabs .vector-menu-content-list > li.selected {
     background-color: #f1e7d3 !important; /* Active tab */
}
}


Line 616: Line 749:
     width: 100% !important;
     width: 100% !important;
     height: 160px !important;
     height: 160px !important;
     background: url('/resources/assets/mystical_header.png') center top no-repeat !important;
     background-image: none !important;
    background-size: cover !important; background-position: center 40% !important;
     background-color: transparent !important;
     background-color: transparent !important;
     z-index: 0 !important;
     z-index: 0 !important;
Line 680: Line 812:
     }
     }


     /* Personal tools: Create account / Log in — top right corner */
     /* Personal tools: Create account / Log in ??? top right corner */
     #p-personal {
     #p-personal {
         position: absolute !important;
         position: absolute !important;
Line 705: Line 837:
     }
     }


     /* Active tab latches onto content box top border */
     /* Active tab latches onto content box top border (only left tabs) */
     .vector-menu-tabs .vector-menu-content-list > li.selected {
     #left-navigation .vector-menu-tabs .vector-menu-content-list > li.selected {
         margin-bottom: -3px !important;
         margin-bottom: -3px !important;
         z-index: 3 !important;
         z-index: 3 !important;
         position: relative !important;
         position: relative !important;
    }
   
    #right-navigation .vector-menu-tabs .vector-menu-content-list > li.selected {
        margin-bottom: 0 !important;
     }
     }


     /* Sidebar: starts at top:0 so logo naturally overlaps the banner */
     /* Sidebar: fixed to the viewport so it stays visible while the page
      content scrolls, instead of scrolling away with it. */
     #mw-panel {
     #mw-panel {
         position: absolute !important;
         position: fixed !important;
         top: 0 !important;
         top: 0 !important;
         left: 0 !important;
         left: 0 !important;
         width: 165px !important;
         width: 165px !important;
        height: 100vh !important;
        overflow-y: auto !important;
         padding-top: 0 !important;
         padding-top: 0 !important;
         z-index: 10 !important;
         z-index: 10 !important;
Line 755: Line 894:
     }
     }
     #content {
     #content {
         margin-top: 20px !important;
         margin-top: 70px !important;
         margin-left: 10px !important;
         margin-left: 10px !important;
         margin-right: 10px !important;
         margin-right: 10px !important;
Line 767: Line 906:
         display: none !important;
         display: none !important;
     }
     }
    /* The stock "Not logged in / Talk / Contributions / Log in" toolbar has
      nowhere sensible to sit once the header collapses on mobile, so hide
      it rather than let it float over the page. */
    #p-personal {
        display: none !important;
    }
    /* Sidebar becomes a slide-in drawer, opened via #mobile-nav-toggle
      (added by Common.js). Off-screen by default. */
     #mw-panel {
     #mw-panel {
         position: static !important;
         position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 240px !important;
        max-width: 80vw !important;
        height: 100vh !important;
        overflow-y: auto !important;
        background: #f1e7d3 !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4) !important;
        z-index: 500 !important;
        padding: 60px 15px 20px 15px !important;
        box-sizing: border-box !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    #mw-panel.mobile-nav-open {
        transform: translateX(0);
     }
     }
     #p-logo {
     #p-logo {
Line 780: Line 943:
     .vector-menu-tabs .vector-menu-content-list > li {
     .vector-menu-tabs .vector-menu-content-list > li {
         margin-bottom: 2px !important;
         margin-bottom: 2px !important;
    }
    #mobile-nav-toggle {
        display: block !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 600;
        background: #3d2b1f;
        color: #f1e7d3;
        border: 2px solid #b3a07d;
        border-radius: 4px;
        padding: 8px 14px;
        font-size: 1.1em;
        font-family: 'Inter', sans-serif;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
    #mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 400;
    }
    #mobile-nav-backdrop.mobile-nav-open {
        display: block;
     }
     }
}
/* Hamburger toggle/backdrop only exist for the mobile drawer; keep them
  fully inert on desktop widths. */
#mobile-nav-toggle, #mobile-nav-backdrop {
    display: none;
}
}


Line 863: Line 1,060:
#content h2 {
#content h2 {
     border-bottom: 2px solid #7d6b54;
     border-bottom: 2px solid #7d6b54;
     font-family: " PT Serif\, Georgia, serif;
     font-family: 'PT Serif', Georgia, serif;
color: #4a3c28;
    color: #4a3c28;
margin-top: 1.5em;
    margin-top: 1.5em;
padding-bottom: 2px;
    padding-bottom: 2px;
}
}
#content h3 {
#content h3 {
font-family: \PT Serif\, Georgia, serif;
    font-family: 'PT Serif', Georgia, serif;
color: #4a3c28;
    color: #4a3c28;
}
 
/* --- TOC Styling --- */
#toc, .toc, .mw-parser-output #toc, .mw-parser-output .toc {
    background-color: #e2d1b4 !important;
    border: 1px solid #998363 !important;
    padding: 2px !important;
    display: inline-block;
    color: #2b2b2b;
    border-radius: 0;
    margin-bottom: 15px;
}
#toc .toctitle, .toc .toctitle, #toc h2, .toc h2 {
    background-color: #c7b08d !important;
    border-bottom: none !important;
    text-align: center;
    font-family: 'PT Serif', serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 6px 15px !important;
    color: #4a3c28 !important;
}
#toc ul, .toc ul {
    list-style-type: none !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    background-color: #e2d1b4 !important;
}
#toc ul ul, .toc ul ul {
    padding-left: 1.5em !important;
    border-left: 1px dotted #a08c6c;
    margin-left: 5px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}
#toc li, .toc li {
    margin-bottom: 4px !important;
    font-size: 0.95em;
    line-height: 1.4;
}
#toc a, .toc a {
    color: #5a3c21 !important;
    text-decoration: none !important;
}
#toc a:hover, .toc a:hover {
    text-decoration: underline !important;
}
 
/* --- Popups (PagePreviews) Styling --- */
.mwe-popups {
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6) !important;
}
.mwe-popups .mwe-popups-container {
    background-color: #e2d1b4 !important;
    border: 1px solid #7d6b54 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.mwe-popups .mwe-popups-extract {
    color: #2b2b2b !important;
    font-family: 'Museo Sans', sans-serif !important;
    padding: 15px !important;
    font-size: 0.95em !important;
}
.mwe-popups.mwe-popups-is-tall .mwe-popups-extract {
    padding-top: 10px !important;
}
.mwe-popups .mwe-popups-settings-icon {
    opacity: 0.7 !important;
}
.mwe-popups .mwe-popups-settings-icon:hover {
    opacity: 1 !important;
}
.mwe-popups .mwe-popups-extract::after {
    background-image: linear-gradient(to right, rgba(226, 209, 180, 0), #e2d1b4 50%) !important;
}
.mwe-popups .mwe-popups-extract[dir='ltr']::after {
    background-image: linear-gradient(to right, rgba(226, 209, 180, 0), #e2d1b4 50%) !important;
}
svg.mwe-popups-settings-icon path {
    fill: #2b2b2b !important;
}
 
/* Discord Widget Clickable Overlay */
.discord-widget {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.discord-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 42, 61, 0.6);
}
.discord-widget .external {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
}
.discord-click-target {
    display: block;
    width: 100%;
    height: 100%;
}
/* Fantasy UI Infobox */
.infobox-fantasy {
    width: 320px;
    float: right;
    clear: right;
    margin-left: 1em;
    margin-bottom: 1em;
    padding: 30px 25px 25px 25px;
    background-image: url('/images/1/13/T_FantasyWarrior_Box_Parchment01.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #332717;
    font-size: 90%;
    font-family: 'Museo Sans', sans-serif;
    box-sizing: border-box;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
 
.infobox-fantasy-header {
    background-image: url('/images/2/24/T_FantasyWarrior_Bar_Horizontal03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    text-align: center;
    font-family: 'Kingthings Petrock', serif;
    font-size: 150%;
    padding: 12px 10px;
    margin-bottom: 15px;
    margin-top: -10px;
    text-shadow: 1px 1px 2px #000;
}
 
.infobox-fantasy table {
    width: 100%;
    border-collapse: collapse;
}
 
.infobox-fantasy th, .infobox-fantasy td {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(125, 107, 84, 0.4);
}
 
.infobox-fantasy tr:last-child th, .infobox-fantasy tr:last-child td {
    border-bottom: none;
}
 
.infobox-fantasy th {
    text-align: left;
    font-weight: bold;
    width: 60%;
}
 
.infobox-fantasy td {
    text-align: right;
}
 
.stat-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    width: 22px;
    height: 22px;
}
.quest-details-fantasy {
    background-image: url('/images/f/f2/T_HUD_FantasyWarrior_Box_Large_Parchment01.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 30px;
    margin-bottom: 20px;
    font-family: 'Museo Sans', sans-serif;
    color: #332717;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
 
.quest-details-fantasy-header {
    background-image: url('/images/2/24/T_FantasyWarrior_Bar_Horizontal03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    text-align: center;
    font-family: 'Kingthings Petrock', serif;
    font-size: 150%;
    padding: 12px 10px;
    margin-top: -10px;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px #000;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
 
 
/* Fix Watch Tab Text Overlap */
#ca-watch a, #ca-unwatch a {
    width: 30px !important;
    padding: 0 !important;
    justify-content: center !important;
}
#ca-watch a span, #ca-unwatch a span {
    display: none !important;
}
 
/* Fix Personal Tools Position and Overlap */
#p-personal {
    position: absolute !important;
    top: -50px !important;
    right: 10px !important;
    z-index: 200 !important;
    margin: 0 !important;
}
@media screen and (max-width: 1000px) {
    #p-personal {
        top: -15px !important;
        right: 0 !important;
        transform: scale(0.85);
        transform-origin: top right;
    }
}
 
/* ==========================================================================
  MOBILE / NARROW WINDOW FIXES
  Fixed-column grids on the main page (and any other page) don't shrink
  below their content's natural width, which forces the whole page to
  scroll horizontally on phones and narrow windows. Collapse them to fewer
  columns instead of letting them overflow, and give grid/flex children an
  explicit min-width so they're actually allowed to shrink.
  ========================================================================== */
/* Force normal document-level scrolling. Something (base skin CSS, not
  wiki-editable) was letting <body> become its own independent scroll
  container while <html> stayed pinned to the viewport height - which
  made position:absolute elements like the tab bar (whose containing
  block is the html-level initial containing block) behave as if fixed,
  overlapping content instead of scrolling away with it normally. */
html, body {
    height: auto !important;
    overflow-y: visible !important;
}
html {
    overflow-x: hidden;
}
 
.mainpage-container, .mainpage-layout, .mainpage-header, .mainpage-left, .mainpage-right,
.tile-row, .updates-row, .categories-grid, .popular-grid, .skills-grid,
.update-card, .category-card, .skill-item, .header-intro, .header-stats {
    min-width: 0;
}
 
/* Any image, table, or file thumbnail (including the Interactive Map's
  <imagemap>) should shrink to fit rather than force a scrollbar. Explicit
  width/height attributes are kept by the browser for the image's own
  scaling math (and for <imagemap> AREA coordinate scaling), so this is
  safe even for the world map. */
img, .thumb, .thumbinner, .image {
    max-width: 100% !important;
    height: auto !important;
}
 
@media screen and (max-width: 700px) {
    .categories-grid, .popular-grid, .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .updates-row {
        grid-template-columns: 1fr !important;
    }
}
 
@media screen and (max-width: 460px) {
    .categories-grid, .popular-grid, .skills-grid {
        grid-template-columns: 1fr !important;
    }
    /* The leaderboard widgets have a hardcoded inline min-width:300px that
      stops them shrinking on the narrowest phones; override it. */
    .leaderboards-row {
        flex-direction: column !important;
    }
    .widget-box {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
 
/* Item/monster infobox portrait is a fixed 250px; on very narrow screens
  that can be wider than the infobox itself is allowed to shrink to. */
@media screen and (max-width: 460px) {
    .infobox {
        width: 100% !important;
        max-width: 320px;
    }
}
 
/* Forced refresh 2 */
 
/* ==========================================================================
  MINERVA MOBILE MENU - injected navigation sections
  Styled to fit Minerva's own native look (plain, light gray), not the
  OSRS/parchment desktop theme, since this only ever renders on Minerva.
  ========================================================================== */
.wov-minerva-nav-heading {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #72777d;
    padding: 14px 16px 6px 16px;
    border-top: 1px solid #eaecf0;
}
#wov-minerva-extra-nav .toggle-list__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wov-minerva-extra-nav .toggle-list-item__anchor {
    display: block;
    padding: 10px 16px;
    color: #202122;
    text-decoration: none;
    font-size: 0.95em;
}
#wov-minerva-extra-nav .toggle-list-item__anchor:active {
    background: #eaecf0;
}
 
/* Keep just the hamburger button pinned while scrolling; everything else
  in the header (site name, search) scrolls away normally. */
#mw-mf-main-menu-button {
    position: fixed !important;
    top: 8px;
    left: 8px;
    margin: 0 !important;
    z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #a2a9b1;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Hide it while the drawer is open so it doesn't sit on top of "Home";
  tapping outside the drawer still closes it via Minerva's own overlay. */
#main-menu-input:checked ~ #mw-mf-main-menu-button {
    display: none !important;
}
/* The button leaving normal flow collapses its old slot to 0 width, so the
  site name/search would otherwise slide left underneath it; push them
  right to clear it. */
.minerva-header {
    padding-left: 52px;
    box-sizing: border-box;
}
 
/* List Category:Skills members in a single vertical column instead of the
  default multi-column layout. */
.page-Category_Skills .mw-category-columns {
    column-count: 1 !important;
    column-width: auto !important;
}
.page-Category_Skills .mw-category-group ul {
    display: block !important;
}
.page-Category_Skills .mw-category-group li {
    display: block !important;
}
 
/* Drop the Score column from the Top Contributors table. */
.contributionscores-wrapper th:nth-child(2),
.contributionscores-wrapper td:nth-child(2) {
    display: none;
}
 
/* Hide the whole Tools toolbox from the sidebar (What links here, Related
  changes, Printable version, Permanent link, Page information, Cargo
  data) - none of it is meant for regular readers. */
#p-tb {
    display: none !important;
}
#footer-places-about {
    display: none !important;
}
}
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Common.css"