MediaWiki:Common.css: Difference between revisions
Fix reader mode always visible |
Fix CSS encoding/BOM issue |
||
| (23 intermediate revisions by the same user not shown) | |||
| Line 49: | Line 49: | ||
} | } | ||
/* --- 5. | /* --- 5. Hide Foreground Logo (Use Background Instead) --- */ | ||
#p-logo a { | #p-logo a { | ||
height: 140px !important; | |||
height: 140px !important; | |||
} | } | ||
| 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: | gap: 20px; | ||
align-items: start; | align-items: start; | ||
} | } | ||
| Line 111: | Line 115: | ||
.mainpage-header { | .mainpage-header { | ||
display: flex; | display: flex; | ||
gap: | gap: 20px; | ||
margin-bottom: | margin-bottom: 20px; | ||
} | } | ||
.header-intro { | .header-intro { | ||
flex: 1; | flex: 1; | ||
background- | background: url('/resources/assets/welcomeimage.jpg') center center no-repeat !important; | ||
border: | background-size: cover !important; | ||
padding: | 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. | font-size: 1.8em; | ||
font-weight: bold; | font-weight: bold; | ||
color: # | color: #ffd700; | ||
margin-bottom: | 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: | font-size: 1.05em; | ||
color: # | 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); | |||
} | } | ||
| Line 137: | Line 166: | ||
width: 300px; | width: 300px; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
background- | background: linear-gradient(to bottom, #fcf6e8, #f1e7d3) !important; | ||
border: 1px solid | border-radius: 8px; | ||
box-shadow: 0 4px 10px rgba(61, 43, 31, 0.15); | |||
border: 1px solid rgba(179, 160, 125, 0.4); | |||
padding: 20px 25px; | padding: 20px 25px; | ||
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: | margin-bottom: 8px; | ||
font-size: 0. | font-size: 0.95em; | ||
border-bottom: 1px dashed | border-bottom: 1px dashed rgba(179, 160, 125, 0.6); | ||
padding-bottom: | padding-bottom: 8px; | ||
} | } | ||
.header-stats li:last-child { | .header-stats li:last-child { | ||
| Line 161: | Line 192: | ||
} | } | ||
.header-stats b { | .header-stats b { | ||
color: # | 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' | font-family: 'Kingthings Petrock', 'PT Serif', serif; | ||
font-size: 1. | font-size: 1.6em; | ||
font-weight: | font-weight: normal; | ||
color: # | color: #3b240b; | ||
padding: | text-align: center; | ||
border-bottom: | padding: 0 0 10px 0; | ||
background- | margin: 30px 0 20px 0; | ||
margin: 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: | gap: 16px; | ||
margin-bottom: | margin-bottom: 20px; | ||
} | } | ||
.updates-row { | .updates-row { | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
background | background: none; | ||
border: | border: none; | ||
} | } | ||
.categories-grid { | .categories-grid { | ||
grid-template-columns: repeat(4, 1fr); | grid-template-columns: repeat(4, 1fr); | ||
background | background: none; | ||
border: none; | |||
padding: 0; | |||
} | } | ||
. | .update-card { | ||
background: linear-gradient(145deg, #ffffff, #fcf6e8); | |||
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); | ||
box-shadow: 0 8px 16px rgba(61, 43, 31, 0.15); | |||
} | } | ||
.update-header { | .update-header { | ||
font-family: 'Inter', sans-serif; | font-family: 'Inter', sans-serif; | ||
font-size: 0. | font-size: 0.75em; | ||
font-weight: 700; | font-weight: 700; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
color: # | color: #8c7657; | ||
letter-spacing: 0.05em; | letter-spacing: 0.05em; | ||
margin-bottom: | margin-bottom: 8px; | ||
} | } | ||
.update-title { | .update-title { | ||
font-size: | font-size: 1.1em; | ||
font-weight: bold; | font-weight: bold; | ||
margin-bottom: | 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- | .update-card p { | ||
font-size: 0.9em; | |||
color: #4a3c28; | |||
line-height: 1.5; | |||
margin: 0; | |||
} | |||
. | .category-card { | ||
border: 1px solid | background: #ffffff; | ||
border-radius: 8px; | |||
overflow: hidden; | |||
box-shadow: 0 4px 10px rgba(61, 43, 31, 0.1); | |||
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 10px 20px rgba(61, 43, 31, 0.15), 0 0 15px rgba(255, 215, 0, 0.15); | |||
border-color: #b3a07d; | |||
} | } | ||
.tile-top.tile-image { | .tile-top.tile-image { | ||
background- | background: radial-gradient(circle, #ffffff 0%, #f1e7d3 100%) !important; | ||
height: | height: 120px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
padding: | padding: 15px; | ||
border-bottom: 1px solid | border-bottom: 1px solid rgba(179, 160, 125, 0.3); | ||
} | } | ||
.tile-top.tile-image img { | .tile-top.tile-image img { | ||
max-width: | max-width: 80px; | ||
max-height: | max-height: 80px; | ||
object-fit: contain; | object-fit: contain; | ||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); | |||
transition: transform 0.2s ease; | |||
} | |||
.category-card:hover .tile-top.tile-image img { | |||
transform: scale(1.05); | |||
} | } | ||
.tile-bottom.link-button { | .tile-bottom.link-button { | ||
background | background: #fcf6e8 !important; | ||
padding: | padding: 12px 10px; | ||
text-align: center; | text-align: center; | ||
font-size: | font-size: 1em; | ||
flex-grow: 1; | flex-grow: 1; | ||
} | } | ||
.tile-bottom.link-button a { | .tile-bottom.link-button a { | ||
color: # | 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; | |||
} | } | ||
.popular-grid { | .popular-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(3, 1fr); | grid-template-columns: repeat(3, 1fr); | ||
gap: | gap: 12px; | ||
margin-bottom: 20px; | |||
background: none; | |||
border: | border: none; | ||
padding: 0; | |||
} | } | ||
.link-button.dark-button a { | .link-button.dark-button a { | ||
display: | display: flex; | ||
background- | align-items: center; | ||
color: # | 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: | font-weight: 600; | ||
font-size: 0. | font-size: 0.9em; | ||
text-align: center; | text-align: center; | ||
padding: | padding: 14px 10px; | ||
border-radius: 6px; | |||
text-decoration: none !important; | text-decoration: none !important; | ||
border: 1px solid # | 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; | |||
} | } | ||
.skills-grid { | .skills-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(3, 1fr); | grid-template-columns: repeat(3, 1fr); | ||
gap: 12px; | |||
margin-bottom: 20px; | |||
background: none; | |||
border: none; | |||
padding: 0; | |||
} | } | ||
.skill-item { | .skill-item { | ||
padding: | background: #ffffff; | ||
font-size: 0. | border-radius: 6px; | ||
padding: 10px 14px; | |||
border | 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: | gap: 12px; | ||
transition: all 0.2s ease; | |||
} | |||
.skill-item img { | |||
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15)); | |||
} | } | ||
.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; | |||
} | } | ||
.discord-widget, .widget-box { | .discord-widget, .widget-box { | ||
background- | background: linear-gradient(to bottom, #fcf6e8, #f1e7d3); | ||
border: 1px solid | border-radius: 8px; | ||
margin-bottom: | 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- | background: linear-gradient(135deg, #3b5580, #263854) !important; | ||
border: 1px solid # | 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: ' | font-family: 'Inter', sans-serif; | ||
font-size: 1. | 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; | ||
margin-bottom: 4px; | |||
} | |||
.discord-join-text { | |||
font-size: 0.9em; | |||
color: #cbd5e1; | |||
} | } | ||
.discord- | .discord-bottom { | ||
background: rgba(0,0,0,0.2); | |||
padding: 12px 20px; | |||
font-size: 0.8em; | |||
text-transform: uppercase; | |||
color: # | letter-spacing: 0.1em; | ||
color: #94a3b8; | |||
text-align: center; | text-align: center; | ||
border-top: 1px solid rgba(255,255,255,0.1); | |||
} | |||
.discord-widget:hover .discord-arrow { | |||
transform: translateX(4px); | |||
} | } | ||
.widget-title { | .widget-title { | ||
font-family: 'PT Serif' | font-family: 'Kingthings Petrock', 'PT Serif', serif; | ||
font-size: 1. | font-size: 1.3em; | ||
font-weight: | font-weight: normal; | ||
color: # | color: #3b240b; | ||
border-bottom: 1px solid | border-bottom: 1px solid rgba(179, 160, 125, 0.4); | ||
padding: | padding: 14px 20px; | ||
background: rgba(255,255,255,0.4); | |||
} | } | ||
.widget-body { | .widget-body { | ||
padding: | padding: 16px 20px; | ||
font-size: 0. | font-size: 0.9em; | ||
line-height: 1.6; | line-height: 1.6; | ||
background: none; | |||
} | } | ||
.widget-body p { margin: 0 0 | .widget-body p { margin: 0 0 12px 0; color: #4a3c28; } | ||
.plainlist ul { | .plainlist ul { | ||
list-style: none; | list-style: none; | ||
| Line 365: | Line 483: | ||
} | } | ||
.plainlist li { | .plainlist li { | ||
margin-bottom: | margin-bottom: 8px; | ||
padding-left: 14px; | |||
position: relative; | |||
} | } | ||
.plainlist li::before { | .plainlist li::before { | ||
content: " | content: ""; | ||
position: absolute; | |||
left: 0; | |||
top: 8px; | |||
width: 6px; | |||
height: 6px; | |||
background: #b3a07d; | |||
border-radius: 50%; | |||
} | } | ||
.plainlist a { | .plainlist a { | ||
| Line 377: | Line 501: | ||
font-weight: bold; | font-weight: bold; | ||
text-decoration: none; | text-decoration: none; | ||
transition: color 0.2s ease; | |||
} | } | ||
.plainlist a:hover | .plainlist a:hover { | ||
color: #a61c1c !important; | |||
text-decoration: underline; | |||
} | } | ||
| Line 403: | Line 524: | ||
/* Base inactive tab style */ | /* Base inactive tab style */ | ||
.vector-menu-tabs .vector-menu-content-list > li { | .vector-menu-tabs .vector-menu-content-list > li { | ||
background-color: | background-color: transparent !important; | ||
border | border: none !important; | ||
margin-right: 0 !important; | |||
margin-right: | |||
display: inline-block; | display: inline-block; | ||
padding: 0 !important; | padding: 0 !important; | ||
| Line 414: | Line 533: | ||
/* Active tab style */ | /* Active tab style */ | ||
.vector-menu-tabs .vector-menu-content-list > li.selected { | .vector-menu-tabs .vector-menu-content-list > li.selected { | ||
background-color: # | background-color: #ffffff !important; | ||
border | border: none !important; | ||
position: relative; | position: relative; | ||
z-index: 2; | z-index: 2; | ||
margin-bottom: | margin-bottom: 0; | ||
} | } | ||
/* Tab link text */ | /* Tab link text */ | ||
.vector-menu-tabs .vector-menu-content-list > li > a { | .vector-menu-tabs .vector-menu-content-list > li > a { | ||
color: # | color: #794900 !important; | ||
padding: 10px | padding: 10px 14px !important; | ||
font-family: 'PT Serif', | font-family: 'Museo Sans', 'PT Serif', sans-serif; | ||
font-weight: | font-weight: normal; | ||
font-size: 0. | 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; | |||
} | } | ||
/* Active tab text */ | /* Active tab text */ | ||
.vector-menu-tabs .vector-menu-content-list > li.selected > a { | .vector-menu-tabs .vector-menu-content-list > li.selected > a { | ||
color: # | color: #3b240b !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 491: | Line 623: | ||
} | } | ||
/* | /* Hide the Read tab to match OSRS */ | ||
#ca-view { | |||
display: none !important; | |||
} | } | ||
| Line 619: | Line 748: | ||
width: 100% !important; | width: 100% !important; | ||
height: 160px !important; | height: 160px !important; | ||
background-image: none !important; | |||
background- | |||
background-color: transparent !important; | background-color: transparent !important; | ||
z-index: 0 !important; | z-index: 0 !important; | ||
| Line 683: | Line 811: | ||
} | } | ||
/* Personal tools: Create account / Log in | /* Personal tools: Create account / Log in ??? top right corner */ | ||
#p-personal { | #p-personal { | ||
position: absolute !important; | position: absolute !important; | ||
| Line 692: | Line 820: | ||
} | } | ||
#p-personal ul { | #p-personal ul { | ||
background: | background: rgba(241, 231, 211, 0.95) !important; | ||
border: | border: 1px solid #b3a07d !important; | ||
padding: 2px 0 | padding: 6px 12px !important; | ||
border-radius: 4px; | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.5); | |||
} | } | ||
| Line 706: | Line 836: | ||
} | } | ||
/* 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; | |||
} | } | ||
| Line 833: | Line 967: | ||
.discord-widget-modern:hover { background-color: #4752C4; cursor: pointer; } | .discord-widget-modern:hover { background-color: #4752C4; cursor: pointer; } | ||
.discord-widget-modern:hover .discord-bottom { background-color: #3b45a5; } | .discord-widget-modern:hover .discord-bottom { background-color: #3b45a5; } | ||
/* | |||
/* Hide Powered by MediaWiki */ | |||
#footer-poweredbyico { display: none !important; } | |||
display: block !important; | |||
/* OSRS Style Wikitables and Infoboxes */ | |||
top: | table.infobox, table.wikitable { | ||
background-color: #dfd0b6; | |||
border: 1px solid #7d6b54; | |||
background: rgba(0,0,0,0.6) !important; | border-collapse: collapse; | ||
color: # | color: #2b2b2b; | ||
} | |||
table.infobox th, table.wikitable th { | |||
background-color: #cbb493; | |||
border: 1px solid #7d6b54; | |||
padding: 6px; | |||
text-align: center; | |||
} | |||
table.infobox td, table.wikitable td { | |||
border: 1px solid #7d6b54; | |||
padding: 6px; | |||
} | |||
table.infobox caption { | |||
background-color: #cbb493; | |||
border: 1px solid #7d6b54; | |||
border-bottom: none; | |||
padding: 4px; | |||
font-weight: bold; | |||
} | |||
/* Section Headers */ | |||
#content h2 { | |||
border-bottom: 2px solid #7d6b54; | |||
font-family: 'PT Serif', Georgia, serif; | |||
color: #4a3c28; | |||
margin-top: 1.5em; | |||
padding-bottom: 2px; | |||
} | |||
#content h3 { | |||
font-family: 'PT Serif', Georgia, serif; | |||
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; | border-radius: 4px !important; | ||
overflow: hidden !important; | |||
font-size: 0. | } | ||
.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%; | |||
} | } | ||