MediaWiki:Common.css: Difference between revisions
m cleaned - regenerated version Tag: Reverted |
m cleaned + fallback menu Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* ========================================================= | /* ========================================================= | ||
MediaWiki:Common.css — cleaned | MediaWiki:Common.css — cleaned site-wide styles | ||
Fallback mobile menu styles are appended at the end | |||
========================================================= */ | ========================================================= */ | ||
| Line 32: | Line 32: | ||
/* ---------- Base typography ---------- */ | /* ---------- Base typography ---------- */ | ||
body { | body { | ||
font-family: Gotham-Book, Montserrat, sans-serif; | font-family: "Gotham-Book", Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | ||
max-width: 1366px; | max-width: 1366px; | ||
color: #202122; | |||
background: #ffffff; | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
font-family: Gotham-Book, Montserrat, sans-serif; | font-family: "Gotham-Bold", "Gotham-Book", Montserrat, sans-serif; | ||
color: inherit; | |||
. | margin: 0 0 0.5rem 0; | ||
line-height: 1.2; | |||
} | } | ||
| Line 46: | Line 52: | ||
font-family: "Gotham-Bold", "Gotham-Book", Montserrat, sans-serif; | font-family: "Gotham-Bold", "Gotham-Book", Montserrat, sans-serif; | ||
background: #ffffff; | background: #ffffff; | ||
padding: | padding: 4px; | ||
width: | width: auto; | ||
display: inline-block; | |||
} | } | ||
| Line 54: | Line 61: | ||
td { vertical-align: top; } | td { vertical-align: top; } | ||
/* ---------- Hide specific page title | /* ---------- Hide specific page title ---------- */ | ||
body.page-The_Bose_Professional_Portable_PA_Encyclopedia_FAQ_Wiki.action-view h1.firstHeading, | body.page-The_Bose_Professional_Portable_PA_Encyclopedia_FAQ_Wiki.action-view h1.firstHeading, | ||
body.page-The_Bose_Professional_Portable_PA_Encyclopedia_FAQ_Wiki.action-submit h1.firstHeading { | body.page-The_Bose_Professional_Portable_PA_Encyclopedia_FAQ_Wiki.action-submit h1.firstHeading { | ||
| Line 76: | Line 83: | ||
max-width: 1366px; | max-width: 1366px; | ||
display: grid; | display: grid; | ||
gap: 15px; | |||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | ||
grid-auto-rows: minmax(100px, auto); | grid-auto-rows: minmax(100px, auto); | ||
| Line 85: | Line 92: | ||
iframe { | iframe { | ||
max-width: 100% !important; | max-width: 100% !important; | ||
width: | width: 100% !important; | ||
height: auto !important; | height: auto !important; | ||
} | } | ||
| Line 93: | Line 100: | ||
@font-face { | @font-face { | ||
font-family: 'power_symbols'; | font-family: 'power_symbols'; | ||
src: url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol. | src: url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff2') format('woff2'), | ||
url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol. | url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff') format('woff'), | ||
url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol. | url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.ttf') format('truetype'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
| Line 102: | Line 109: | ||
/* ---------- 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 container ---------- */ | /* ---------- L1 comparison table container ---------- */ | ||
| Line 132: | Line 124: | ||
display: block; | display: block; | ||
overflow-x: auto; | overflow-x: auto; | ||
width: 100%; | width: 100%; | ||
background: #ffffff; | |||
-webkit-overflow-scrolling: touch; | -webkit-overflow-scrolling: touch; | ||
} | } | ||
| Line 145: | Line 135: | ||
width: max-content; | width: max-content; | ||
min-width: 1400px; | min-width: 1400px; | ||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0; | border-spacing: 0; | ||
| Line 171: | Line 160: | ||
/* ---------- Hover image popup ---------- */ | /* ---------- Hover image popup ---------- */ | ||
.hover-image-wrapper { | .hover-image-wrapper { position: relative; display: inline-block; cursor: help; } | ||
} | |||
.hover-image-popup { | .hover-image-popup { | ||
position: absolute; | position: absolute; | ||
| Line 184: | Line 169: | ||
padding: 4px; | padding: 4px; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
visibility: hidden | visibility: hidden; | ||
opacity: 0 | opacity: 0; | ||
pointer-events: none | pointer-events: none; | ||
transition: opacity 0.15s ease-in-out; | transition: opacity 0.15s ease-in-out; | ||
} | } | ||
.hover-image-wrapper:hover .hover-image-popup { | .hover-image-wrapper:hover .hover-image-popup { | ||
visibility: visible | visibility: visible; | ||
opacity: 1 | opacity: 1; | ||
pointer-events: auto | pointer-events: auto; | ||
} | } | ||
/* ---------- Mobile: hide desktop sidebar and adjust content spacing ---------- */ | /* ---------- Mobile: hide desktop sidebar and adjust content spacing ---------- */ | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
#mw-panel, .mw-sidebar, .vectorSidebar { | #mw-panel, .mw-sidebar, .vectorSidebar { display: none !important; } | ||
display: none | #content, #mw-content-text { margin-left: 0 !important; padding-left: 1rem !important; } | ||
} | |||
/* ---------- Small accessibility and touch improvements ---------- */ | |||
a, button { | |||
-webkit-tap-highlight-color: rgba(0,0,0,0.06); | |||
touch-action: manipulation; | |||
} | |||
/* ---------- Minor visual polish ---------- */ | |||
blockquote { | |||
border-left: 4px solid #e1e4e8; | |||
padding-left: 1rem; | |||
color: #333; | |||
} | |||
code, pre { | |||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace; | |||
background: #f6f8fa; | |||
padding: 0.15rem 0.3rem; | |||
border-radius: 3px; | |||
} | |||
/* ========================================================= | |||
Fallback mobile menu styles (appended) | |||
Activates only when the JS fallback injects the menu | |||
========================================================= */ | |||
@media (max-width: 800px) { | |||
.fallback-mobile-hamburger { | |||
position: fixed; | |||
left: 0.5rem; | |||
top: 0.5rem; | |||
z-index: 9999; | |||
width: 44px; | |||
height: 44px; | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: rgba(0,0,0,0.6); | |||
color: #fff; | |||
border-radius: 6px; | |||
border: none; | |||
font-size: 22px; | |||
text-decoration: none; | |||
cursor: pointer; | |||
} | |||
.fallback-mobile-overlay { | |||
position: fixed; | |||
inset: 0; | |||
background: rgba(0,0,0,0.45); | |||
z-index: 9998; | |||
display: none; | |||
align-items: flex-start; | |||
justify-content: flex-start; | |||
padding-top: 56px; | |||
} | } | ||
# | |||
.fallback-mobile-panel { | |||
background: #fff; | |||
width: 84%; | |||
max-width: 320px; | |||
height: 100%; | |||
box-shadow: 0 2px 12px rgba(0,0,0,0.25); | |||
padding: 0.5rem 0; | |||
overflow-y: auto; | |||
-webkit-overflow-scrolling: touch; | |||
} | |||
.fallback-mobile-panel a { | |||
display: block; | |||
padding: 0.75rem 1rem; | |||
color: #0645AD; | |||
text-decoration: none; | |||
border-bottom: 1px solid #eee; | |||
} | |||
.fallback-mobile-panel a:focus, | |||
.fallback-mobile-panel a:hover { | |||
background: #f6f8fb; | |||
outline: none; | |||
} | |||
.fallback-mobile-close { | |||
display: block; | |||
padding: 0.5rem; | |||
text-align: right; | |||
font-size: 18px; | |||
color: #333; | |||
} | } | ||
} | } | ||