MediaWiki:Common.css: Difference between revisions
mNo edit summary Tags: Manual revert Reverted |
m auto hide sidebar < 768 pix |
||
| (22 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /** CSS placed here will be applied to all skins */ | ||
/* ---------- | /* ------------------------- | ||
Fonts | |||
------------------------- */ | |||
@font-face { | @font-face { | ||
font-family: "Gotham-Black"; | |||
src: url("/styles/Gotham-Black.otf") format("opentype"); | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: "Gotham-BlackItalic"; | |||
src: url("/styles/Gotham-BlackItalic.otf") format("opentype"); | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: "Gotham-Bold"; | |||
src: url("/styles/Gotham-Bold.otf") format("opentype"); | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: "Gotham-BoldItalic"; | |||
src: url("/styles/Gotham-BoldItalic.otf") format("opentype"); | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: "Gotham-Book"; | |||
src: url("/styles/Gotham-Book.otf") format("opentype"); | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: "Gotham-BookItalic"; | |||
src: url("/styles/Gotham-BookItalic.otf") format("opentype"); | |||
} | } | ||
/* | /* Base typography */ | ||
body { | body { | ||
font-family: "Gotham-Book", Montserrat, sans-serif; | |||
max-width: 1366px; | |||
} | } | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
font-family: "Gotham-Book", Montserrat, sans-serif; | |||
/* text-transform: uppercase; */ | |||
} | } | ||
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5 { | |||
.mw-body h1, | |||
.mw-body h2, | |||
.mw-body h3, | |||
.mw-body h4, | |||
.mw-body h5 { | |||
font-family: "Gotham-Book", Montserrat, sans-serif; | |||
} | } | ||
/* | /* Headline box */ | ||
.mw-headline { | .mw-headline { | ||
font-family: "Gotham-Bold", "Gotham-Book", Montserrat, sans-serif; | |||
background: #ffffff; | |||
/* previous alternatives: | |||
background: #cef2e0; | |||
background-color: #CCFFCC; | |||
border-radius: 5px; | |||
border: 1px outset #008080; | |||
*/ | |||
padding: 2px; | |||
width: 300px; | |||
} | } | ||
/* | /* Hide structured data block if present */ | ||
.structuredData { display: none; | .structuredData { | ||
display: none; | |||
} | |||
/* | /* Table cell vertical alignment */ | ||
td { | |||
vertical-align: top; | |||
} | } | ||
/* ---- | /* ****************** NO TITLE ON MAINPAGE *************** */ | ||
/* Adjust page name(s) to match your actual main page slug(s) */ | |||
/* | |||
.page-Bose_Portable_PA_Knowledge.action-view h1.firstHeading, | |||
.page-Bose_Portable_PA_Knowledge.action-submit h1.firstHeading { | |||
display: none; | |||
} | |||
*/ | |||
/* Responsive images */ | |||
img { | img { | ||
max-width: 100%; | |||
height: auto; | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-khtml-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
} | } | ||
/* | /* DivToc: responsive table of contents with introduction */ | ||
.tocdiv { | .tocdiv { | ||
max-width: 1366px; | |||
display: grid; | |||
grid-gap: 15px; | |||
column-gap: 30px; | |||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |||
grid-template-rows: auto; | |||
} | |||
/* Mobile fix for DivToc layout */ | |||
@media screen and (max-width: 700px) { | |||
.tocdiv { | |||
display: block !important; | |||
} | |||
.tocdiv > div { | |||
width: 100% !important; | |||
margin: 0 !important; | |||
} | |||
} | } | ||
/* | /* Responsive iframe for YouTube videos */ | ||
@media screen and (max-width: 750px) { | @media screen and (max-width: 750px) { | ||
iframe { | |||
max-width: 100% !important; | |||
width: auto !important; | |||
height: auto !important; | |||
} | |||
} | } | ||
/* | /* Power Characters */ | ||
@font-face { | @font-face { | ||
font-family: 'power_symbols'; | |||
src: url('/fonts/unicode/Unicode_IEC_symbol.woff2') format('woff2'), | |||
url('/fonts/unicode/Unicode_IEC_symbol.woff') format('woff'), | |||
url('/fonts/unicode/Unicode_IEC_symbol.ttf') format('truetype'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
.power { | |||
font-family: 'power_symbols'; | |||
font-style: normal; | |||
} | } | ||
/* ---------- Link colors (LVHA order) ---------- */ | /* ---------- Link colors (LVHA order) ---------- */ | ||
.mw-body-content a:link { | .mw-body-content a:link { color: #0645AD; } | ||
.mw-body-content a:visited { color: #551A8B; } | |||
} | .mw-body-content a:hover { color: #0B0080; text-decoration: underline; } | ||
.mw-body-content a:visited { | .mw-body-content a:active { color: #C00000; } | ||
} | |||
.mw-body-content a:hover { | |||
} | |||
.mw-body-content a:active { | |||
} | |||
/* Special link types */ | /* Special link types */ | ||
.mw-body-content a.new { | .mw-body-content a.new { color: #CC0000; } | ||
} | |||
.mw-body-content a.external, | .mw-body-content a.external, | ||
.mw-body-content a.extiw { | .mw-body-content a.extiw { color: #3366BB; } | ||
.mw-body-content a.stub { color: #772233; } | |||
} | |||
.mw-body-content a.stub { | |||
} | |||
/* | /* === L1 comparison table scroll container === */ | ||
.mw-parser-output .l1-compare-wrap { | .mw-parser-output .l1-compare-wrap { | ||
display: block; | |||
overflow-x: auto; | |||
overflow-y: visible; | |||
width: 100%; | |||
max-width: 100%; | |||
-webkit-overflow-scrolling: touch; | |||
background: #ffffff; | |||
} | } | ||
/* | /* === CRITICAL OVERRIDE: defeat Vector/Minerva table width clamp === */ | ||
.mw-parser-output .l1-compare-wrap table.l1-compare { | |||
white-space: nowrap; | white-space: nowrap; | ||
width: max-content; | width: max-content; | ||
min-width: 1400px; | min-width: 1400px; | ||
max-width: none !important; | max-width: none !important; /* ensure table can overflow horizontally */ | ||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0; | border-spacing: 0; | ||
} | } | ||
/* Sticky header row | /* === Sticky header row === */ | ||
.mw-parser-output .l1-compare-wrap table.l1-compare th { | .mw-parser-output .l1-compare-wrap table.l1-compare th { | ||
position: sticky; | |||
top: 0; | |||
background: #f8f9fa; | |||
color: #202122; | |||
z-index: 10; | |||
} | } | ||
/* Sticky first column */ | /* === Sticky first column === */ | ||
.mw-parser-output .l1-compare-wrap table.l1-compare th:first-child, | .mw-parser-output .l1-compare-wrap table.l1-compare th:first-child, | ||
.mw-parser-output .l1-compare-wrap table.l1-compare td:first-child { | .mw-parser-output .l1-compare-wrap table.l1-compare td:first-child { | ||
position: sticky; | |||
left: 0; | |||
background: #ffffff; | |||
z-index: 9; | |||
border-right: 1px solid #a2a9b1; | |||
} | } | ||
/* | /* === Image display on hover over text === */ | ||
.hover-image-wrapper { | .hover-image-wrapper { | ||
position: relative; | |||
display: inline-block; | |||
cursor: help; | |||
} | } | ||
.hover-image-popup { | .hover-image-popup { | ||
position: absolute; | |||
top: 1.2em; | |||
left: 0; | |||
z-index: 9999; | |||
background: #fff; | |||
padding: 4px; | |||
border: 1px solid #ccc; | |||
visibility: hidden !important; | |||
opacity: 0 !important; | |||
pointer-events: none !important; | |||
transition: opacity 0.15s ease-in-out; | |||
} | } | ||
.hover-image-wrapper:hover .hover-image-popup { | .hover-image-wrapper:hover .hover-image-popup { | ||
visibility: visible !important; | |||
opacity: 1 !important; | |||
pointer-events: auto !important; | |||
} | } | ||
/* ---------- | /* Hide page action tabs for users who are NOT logged in | ||
Uses body:not(.mw-user) because this site does not use mw-anonuser/logged-in */ | |||
body:not(.mw-user) #p-views, | |||
body:not(.mw-user) #p-views > ul, | |||
body:not(.mw-user) #p-views > ul > li, | |||
body:not(.mw-user) #left-navigation, | |||
body:not(.mw-user) #right-navigation, | |||
body:not(.mw-user) .vector-page-tools, | |||
body:not(.mw-user) .vector-page-tools .vector-menu-content, | |||
body:not(.mw-user) .vector-page-tools .vector-menu-content > li, | |||
body:not(.mw-user) .vector-menu-tabs, | |||
body:not(.mw-user) .vector-menu-tabs ul, | |||
body:not(.mw-user) .vector-menu-tabs li, | |||
body:not(.mw-user) .minerva-page-actions, | |||
body:not(.mw-user) .minerva-page-actions li, | |||
body:not(.mw-user) .page-actions-menu, | |||
body:not(.mw-user) .page-actions-menu li { | |||
display: none !important; | display: none !important; | ||
} | |||
/* Ensure TOC is visible unless explicitly hidden elsewhere */ | |||
#toc, .toc { | |||
display: block !important; | |||
} | |||
@media (max-width: 768px) { | |||
.vector-sidebar, .mw-sidebar { | |||
transform: translateX(-100%); | |||
transition: transform .25s ease; | |||
position: fixed; | |||
left: 0; | |||
top: 0; | |||
height: 100%; | |||
z-index: 9999; | |||
background: var(--bg-color, #fff); | |||
box-shadow: 0 0 12px rgba(0,0,0,.2); | |||
} | |||
.vector-sidebar.open { | |||
transform: translateX(0); | |||
} | } | ||
/* Add space for a toggle button */ | |||
.vector-main-content { padding-left: 0 !important; } | |||
padding- | .sidebar-toggle { | ||
position: fixed; | |||
left: 8px; | |||
top: 8px; | |||
z-index: 10001; | |||
background: #fff; | |||
border-radius: 4px; | |||
padding: 6px; | |||
box-shadow: 0 1px 4px rgba(0,0,0,.2); | |||
} | } | ||
} | } | ||