MediaWiki:Common.css: Difference between revisions

From Bose Portable PA Encyclopedia
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
 
(3 intermediate revisions by the same user not shown)
Line 178: Line 178:
   border-right: 1px solid #a2a9b1;
   border-right: 1px solid #a2a9b1;
}
}
/* === Top-left corner cell (above both sticky layers) === */
.mw-parser-output .l1-compare-wrap table.l1-compare th:first-child {
  z-index: 11;
  background: #f8f9fa;
}


/* === Image display on hover over text === */
/* === Image display on hover over text === */
Line 190: Line 183:
.hover-image-wrapper {
.hover-image-wrapper {
   position: relative;
   position: relative;
  display: inline-block;
   cursor: help;
   cursor: help;
}
}


.hover-image-popup {
.hover-image-popup {
  display: none;
   position: absolute;
   position: absolute;
   top: 1.2em;
   top: 1.2em;
   left: 0;
   left: 0;
   z-index: 9999;
   z-index: 9999;
   background: #fff;
   background: #fff;
   padding: 4px;
   padding: 4px;
   border: 1px solid #ccc;
   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 {
   display: block;
   visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
}


.hover-image-popup {
body { outline: 5px solid red !important; }
  display: none !important;
}
.hover-image-wrapper:hover .hover-image-popup {
  display: block !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; }