Bose Portable PA Knowledge

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
ST (talk | contribs)
Bureaucrats, Interface administrators, Administrators
20,075 edits
mNo edit summary
Tag: Reverted
m Undo revision 25825 by ST (talk)
Tag: Undo
Line 1: Line 1:
/* MediaWiki:Common.js
/** CSS placed here will be applied to all skins */
  Lightweight fallback mobile menu
 
  Activates only when Minerva/native mobile menu is not present
@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;}
*/
*/


mw.hook('wikipage.content').add(function () {
  // Only run on narrow screens
  if (window.innerWidth > 800) return;


  // If native Minerva menu exists, do nothing
/* ****************** NO TITLE ON MAINPAGE *************** */
   if (document.querySelector('.minerva-menu-button, .minerva-hamburger, .mw-mobile-menu')) return;
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));


  // Avoid injecting twice
  if (document.querySelector('.fallback-mobile-hamburger')) return;


  // Create hamburger button
/*  responsive iframe for youtube videos */
  var btn = document.createElement('button');
@media screen and (max-width: 750px) {
  btn.className = 'fallback-mobile-hamburger';
    iframe {
  btn.type = 'button';
        max-width: 100% !important;
  btn.setAttribute('aria-label', 'Open menu');
        width: auto !important;
  btn.setAttribute('aria-expanded', 'false');
        height: auto !important;
  btn.innerHTML = '☰';
    }
}


  // Insert into header area (best-effort)
/* Power Characters */
  var header = document.querySelector('.minerva-header') || document.querySelector('#mw-head') || document.body;
@font-face {
  try {
    font-family: 'power_symbols';
    header.insertBefore(btn, header.firstChild);
    src: url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.ttf') format('ttf'),
  } catch (e) {
        url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff2') format('woff2'),
    document.body.appendChild(btn);
        url('https://toonz.ca/fonts/unicode/Unicode_IEC_symbol.woff') format('woff');
  }
    font-weight: normal;
    font-style: normal;
}


  // Create overlay and panel
.power{
  var overlay = document.createElement('div');
   font-family: 'power_symbols';
   overlay.className = 'fallback-mobile-overlay';
   font-style: normal;
  overlay.setAttribute('role', 'dialog');
}
   overlay.setAttribute('aria-modal', 'true');
  overlay.style.display = 'none';


  var panel = document.createElement('nav');
/* standard link colors */
  panel.className = 'fallback-mobile-panel';
.mw-body-content a:link { color: #0000FF; } /* normal unvisited links */
  panel.setAttribute('aria-label', 'Mobile menu');
.mw-body-content a:link:visited { color: #0B0080; } /* visited links */
  panel.setAttribute('role', 'menu');
.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 */


  overlay.appendChild(panel);
.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}


  // Close control
// no right click
   var close = document.createElement('div');
img {
   close.className = 'fallback-mobile-close';
  -webkit-touch-callout: none;
   close.innerHTML = '<a href="#" aria-label="Close menu">✕</a>';
   -webkit-user-select: none;
   panel.appendChild(close);
   -khtml-user-select: none;
   -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;
}


  // Menu links — mirror typical Mobile-menu entries
// l1 comparison table
  var links = [
    { href: mw.util.getUrl('Main_Page'), label: 'Home' },
    { href: mw.util.getUrl('Special:Search'), label: 'Search' },
    { href: mw.util.getUrl('Recentchanges'), label: 'Recent changes' },
    { href: mw.util.getUrl('Special:Random'), label: 'Random page' },
    { href: mw.util.getUrl('Special:AllPages'), label: 'All pages' },
    { href: mw.util.getUrl('Special:Categories'), label: 'Categories' },
    { href: mw.util.getUrl('Special:Upload'), label: 'Upload file' }
  ];


  links.forEach(function (lnk) {
/* === L1 comparison table scroll container === */
    var a = document.createElement('a');
.mw-parser-output .l1-compare-wrap {
    a.href = lnk.href;
  display: block;
    a.textContent = lnk.label;
  overflow-x: auto;
    a.setAttribute('role', 'menuitem');
  overflow-y: visible;
    a.tabIndex = 0;
  width: 100%;
    panel.appendChild(a);
  max-width: 100%;
   });
  -webkit-overflow-scrolling: touch;
   background: #ffffff;
}


  document.body.appendChild(overlay);
/* === 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;
}


  // Focus management helpers
/* === Sticky header row === */
   function trapFocus(container) {
.mw-parser-output .l1-compare-wrap table.l1-compare th {
    var focusable = container.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])');
   position: sticky;
    if (!focusable.length) return null;
  top: 0;
    var first = focusable[0];
  background: #f8f9fa;
    var last = focusable[focusable.length - 1];
  color: #202122;
  z-index: 10;
}


    function handleTab(e) {
/* === Sticky first column === */
      if (e.key !== 'Tab') return;
.mw-parser-output .l1-compare-wrap table.l1-compare th:first-child,
      if (e.shiftKey && document.activeElement === first) {
.mw-parser-output .l1-compare-wrap table.l1-compare td:first-child {
        e.preventDefault();
  position: sticky;
        last.focus();
  left: 0;
      } else if (!e.shiftKey && document.activeElement === last) {
  background: #ffffff;
        e.preventDefault();
  z-index: 9;
        first.focus();
  border-right: 1px solid #a2a9b1;
      }
}
    }
    document.addEventListener('keydown', handleTab);
    return function remove() { document.removeEventListener('keydown', handleTab); };
  }


  var removeTrap = null;
/* === Image display on hover over text === */


  function openMenu() {
.hover-image-wrapper {
    overlay.style.display = 'flex';
  position: relative;
    document.body.style.overflow = 'hidden';
  display: inline-block;
    btn.setAttribute('aria-expanded', 'true');
  cursor: help;
    // focus first link
}
    var firstLink = panel.querySelector('a');
    if (firstLink) firstLink.focus();
    removeTrap = trapFocus(panel);
  }


  function closeMenu() {
.hover-image-popup {
    overlay.style.display = 'none';
  position: absolute;
    document.body.style.overflow = '';
  top: 1.2em;
    btn.setAttribute('aria-expanded', 'false');
  left: 0;
    if (removeTrap) { removeTrap(); removeTrap = null; }
  z-index: 9999;
    btn.focus();
  }


   // Event listeners
   background: #fff;
   btn.addEventListener('click', function (e) {
   padding: 4px;
    e.preventDefault();
   border: 1px solid #ccc;
    openMenu();
   });


   overlay.addEventListener('click', function (e) {
   visibility: hidden !important;
    if (e.target === overlay) closeMenu();
  opacity: 0 !important;
   });
   pointer-events: none !important;


   close.addEventListener('click', function (e) {
   transition: opacity 0.15s ease-in-out;
    e.preventDefault();
}
    closeMenu();
  });


  // Close on Escape
.hover-image-wrapper:hover .hover-image-popup {
  document.addEventListener('keydown', function (e) {
  visibility: visible !important;
    if (e.key === 'Escape' && overlay.style.display === 'flex') {
  opacity: 1 !important;
      closeMenu();
   pointer-events: auto !important;
    }
}
   });


  // If viewport is resized to desktop, remove fallback elements
body { outline: 5px solid red !important; }
  window.addEventListener('resize', function () {
    if (window.innerWidth > 800) {
      if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
      if (btn.parentNode) btn.parentNode.removeChild(btn);
      document.body.style.overflow = '';
    }
  });
});
Retrieved from "https://boseperformer.com/MediaWiki:Common.css"