MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
| (39 intermediate revisions by the same user not shown) | |||
| Line 41: | Line 41: | ||
{ | { | ||
font-family: "Gotham-Bold","Gotham-Book" , Montserrat, sans-serif; | font-family: "Gotham-Bold","Gotham-Book" , Montserrat, sans-serif; | ||
font-size: 14px; | /*font-size: 14px; */ | ||
/*font-weight: bold;*/ | /*font-weight: bold;*/ | ||
color: #008080; | /*color: #008080;*/ | ||
background:#ffffff; | background:#ffffff; | ||
//background:#cef2e0; | //background:#cef2e0; | ||
| Line 57: | Line 57: | ||
body { | body { | ||
max-width:1366px; | |||
} | } | ||
/* max-width of text on page | |||
body {max-width:1366px;} | |||
html {max-width:1366px;} | |||
.mw-body-content {max-width:1366px;} | |||
*/ | |||
| Line 76: | Line 80: | ||
/* responsive table of contents with introduction https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431 */ | /* responsive table of contents with introduction https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431 */ | ||
.tocdiv { | .tocdiv { | ||
max-width: 1366px; | |||
display: grid; | display: grid; | ||
grid-gap: 15px; | grid-gap: 15px; | ||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | ||
grid-template-columns: repeat(auto-fit, minmax(300px, | grid-template-columns: repeat(auto-fit, minmax(300px, 4fr)); | ||
grid-template-rows: repeat(2, 300px); | grid-template-rows: repeat(2, 300px); | ||
grid-template-rows: repeat(auto-fit, minmax(300px, 1fr)); | grid-template-rows: repeat(auto-fit, minmax(300px, 1fr)); | ||
/* responsive iframe for youtube videos */ | |||
@media screen and (max-width: 750px) { | |||
iframe { | |||
max-width: 100% !important; | |||
width: auto !important; | |||
height: auto !important; | |||
} | |||
} | |||
/* Power Characters */ | |||
@font-face { | |||
font-family: 'power_symbols'; | |||
src: url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.ttf') format('ttf'), | |||
url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff2') format('woff2'), | |||
url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff') format('woff'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
.power{ | |||
font-family: 'power_symbols'; | |||
font-style: normal; | |||
} | |||
/* standard link colors */ | |||
.mw-body-content a:link { color: #0000FF; } /* normal unvisited links */ | |||
.mw-body-content a:link:visited { color: #0B0080; } /* visited links */ | |||
.mw-body-content a:link:active { color: #FF0000; } /* active links */ | |||
.mw-body-content a:link.new { color: #FF0000; } /* new links */ | |||
.mw-body-content a:link.extiw { color: #3366BB; } /* interwiki links */ | |||
.mw-body-content a:link.external { color: #3366BB; } /* external links */ | |||
.mw-body-content a:link.stub { color: #772233; } /* hovered links */ | |||
.mw-body-content a:link {color: #FF0000} | |||
.mw-body-content a:visited {color: #00FF00} | |||
.mw-body-content a:hover {color: #FF00FF} | |||
.mw-body-content a:active {color: #0000FF} | |||
// no right click | |||
img { | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-khtml-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
} | |||
// l1 comparison table | |||
/* === L1 comparison table scroll container === */ | |||
.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; | |||
width: max-content; | |||
min-width: 1400px; | |||
max-width: none !important; /* ← THIS is the blocker you were hitting */ | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
} | |||
/* === Sticky header row === */ | |||
.mw-parser-output .l1-compare-wrap table.l1-compare th { | |||
position: sticky; | |||
top: 0; | |||
background: #f8f9fa; | |||
color: #202122; | |||
z-index: 10; | |||
} | |||
/* === Sticky first column === */ | |||
.mw-parser-output .l1-compare-wrap table.l1-compare th: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 { | |||
position: relative; | |||
display: inline-block; | |||
cursor: help; | |||
} | |||
.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 { | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
pointer-events: auto !important; | |||
} | |||
body { outline: 5px solid red !important; } | |||
Latest revision as of 09:05, 27 February 2026
/** CSS placed here will be applied to all skins */
@font-face {
font-family:"Gotham-Black";
src:url("/styles/Gotham-Black.otf")
}
@font-face {
font-family:"Gotham-BlackItalic";
src:url("/styles/Gotham-BlackItalic.otf")
}
@font-face {
font-family:"Gotham-Bold";
src:url("/styles/Gotham-Bold.otf")
}
@font-face {
font-family:"Gotham-BoldItalic";
src:url("/styles/Gotham-BoldItalic.otf")
}
@font-face {
font-family:"Gotham-Book";
src:url("/styles/Gotham-Book.otf")
}
@font-face {
font-family:"Gotham-BookItalic";
src:url("/styles/Gotham-BookItalic.otf")
}
h1, h2, h3, h4, h5, h6 { font-family:Gotham-Book;
/* text-transform: uppercase; */
}
body {font-family:Gotham-Book;Montserrat}
.mw-body h1,.mw-body h2,.mw-body h3, .mw-body h4,.mw-body h5 {font-family:Gotham-Book,Montserrat}
.mw-headline
{
font-family: "Gotham-Bold","Gotham-Book" , Montserrat, sans-serif;
/*font-size: 14px; */
/*font-weight: bold;*/
/*color: #008080;*/
background:#ffffff;
//background:#cef2e0;
// background-color: #CCFFCC;
// border-radius: 5px;
//border: 1px outset #008080;
padding: 2px;
width: 300px;
}
.structuredData {display:none}
td {vertical-align:top}
body {
max-width:1366px;
}
/* max-width of text on page
body {max-width:1366px;}
html {max-width:1366px;}
.mw-body-content {max-width:1366px;}
*/
/* ****************** NO TITLE ON MAINPAGE *************** */
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 { display: none; }
/* responsive image sizing */
img {
max-width: 100%;
height: auto;
}
/* responsive table of contents with introduction https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431 */
.tocdiv {
max-width: 1366px;
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(300px, 4fr));
grid-template-rows: repeat(2, 300px);
grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
/* responsive iframe for youtube videos */
@media screen and (max-width: 750px) {
iframe {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
}
/* Power Characters */
@font-face {
font-family: 'power_symbols';
src: url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.ttf') format('ttf'),
url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff2') format('woff2'),
url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.power{
font-family: 'power_symbols';
font-style: normal;
}
/* standard link colors */
.mw-body-content a:link { color: #0000FF; } /* normal unvisited links */
.mw-body-content a:link:visited { color: #0B0080; } /* visited links */
.mw-body-content a:link:active { color: #FF0000; } /* active links */
.mw-body-content a:link.new { color: #FF0000; } /* new links */
.mw-body-content a:link.extiw { color: #3366BB; } /* interwiki links */
.mw-body-content a:link.external { color: #3366BB; } /* external links */
.mw-body-content a:link.stub { color: #772233; } /* hovered links */
.mw-body-content a:link {color: #FF0000}
.mw-body-content a:visited {color: #00FF00}
.mw-body-content a:hover {color: #FF00FF}
.mw-body-content a:active {color: #0000FF}
// no right click
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
// l1 comparison table
/* === L1 comparison table scroll container === */
.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;
width: max-content;
min-width: 1400px;
max-width: none !important; /* ← THIS is the blocker you were hitting */
border-collapse: separate;
border-spacing: 0;
}
/* === Sticky header row === */
.mw-parser-output .l1-compare-wrap table.l1-compare th {
position: sticky;
top: 0;
background: #f8f9fa;
color: #202122;
z-index: 10;
}
/* === Sticky first column === */
.mw-parser-output .l1-compare-wrap table.l1-compare th: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 {
position: relative;
display: inline-block;
cursor: help;
}
.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 {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
body { outline: 5px solid red !important; }