Jump to content

MediaWiki:Common.css: Difference between revisions

From Insurer Brain
Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 1,063: Line 1,063:
/* ======================================================= */
/* ======================================================= */
.read-pill {
.read-pill {
/* 1. Layout & Truncation */
display: inline-block; /* Keeps the box safe/whole */
display: inline-flex; /* Keeps it as a box, allows flex alignment inside */
vertical-align: baseline; /* Aligns perfectly with text reading line */
max-width: 100%; /* Prevents it from overflowing the screen */
white-space: nowrap; /* Prevents the "shatter" if it hits line end */
vertical-align: text-bottom;/* CRITICAL: Aligns bottom of pill with text descenders */
box-sizing: border-box;

/* 2. Text Handling */
white-space: nowrap; /* PROFESSIONAL STD: Never wrap a pill */
overflow: hidden; /* Cuts off extra text */
font-size: 0.85em;
/* 3. Visuals */
border-radius: 100px; /* Full capsule shape */
padding: 1px 0.5em; /* Use small vertical padding to prevent line-height issues */
border-radius: 4px;
padding: 2px 0.6em; /* Horizontal padding gives it breath */
margin: 0 0.15em; /* Tiny gap so it doesn't touch surrounding words */
position: relative; /* Micro-tuning */
/* 4. Typography Adjustments */
font-size: 0.85em; /* Pills are usually 85-90% of body text size */
top: -1px; /* Optical correction for the border/padding weight */
font-weight: 500; /* slightly bold improves readability on colored bg */
line-height: 1.2; /* Tighter line height prevents pill from expanding the paragraph */
}
}


Revision as of 12:57, 3 January 2026

/* CSS placed here will be applied to all skins. This version makes the log-in disappear*/

/* ======================================================= */
/* 1. STANDARD MEDIAWIKI STYLING (Fonts, Quotes, etc.)     */
/* ======================================================= */
cite, dfn { font-style: inherit; }
q { quotes: '"' '"' "'" "'"; }

blockquote {
    overflow: hidden;
    margin: 1em 0;
    padding: 0 40px;
}

small { font-size: 85%; }
.mw-body-content sub, .mw-body-content sup { font-size: 80%; }
.ns-talk .mw-body-content dd { margin-top: 0.4em; margin-bottom: 0.4em; }

/* Collapsible elements logic */
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > p,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > table,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > thead + tbody,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) tr:not( :first-child ),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) .mw-collapsible-content,
#editpage-specialchars {
    display: none;
}

.references { margin-bottom: 0.5em; }

/* Cite Link Styling */
span[ rel="mw:referencedBy" ] { counter-reset: mw-ref-linkback 0; }
span[ rel='mw:referencedBy' ] > a::before {
    content: counter( mw-ref-linkback, lower-alpha );
    font-size: 80%; font-weight: bold; font-style: italic;
}
a[ rel="mw:referencedBy" ]::before { font-weight: bold; content: "^"; }
span[ rel="mw:referencedBy" ]::before { content: "^ "; }

.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
    font-weight: normal; padding-right: 0.2em; padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle { float: left; }
.wikitable td ul, .wikitable td ol, .wikitable td dl { text-align: left; }

/* PDF Icons */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
    background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
    padding: 8px 18px 8px 0;
}

/* Warnings and Notices */
.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {
    clear: both; margin: 0.2em 0; border: 1px solid #bb7070;
    background-color: var(--background-color-error-subtle, #ffdbdb);
    padding: 0.25em 0.9em; box-sizing: border-box;
}
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
    border-color: #fc3; background-color: var(--background-color-warning-subtle, #fef6e7);
}

@media (min-width: 640px) {
    figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'], .thumbinner { min-width: 100px; }
}

#mw-subcategories, #mw-pages, #mw-category-media, #filehistory, #wikiPreview, #wikiDiff { clear: both; }

/* Hide Permission Groups */
.checkuser-show, .sysop-show, .abusefilter-show, .abusefilter-helper-show,
.patroller-show, .templateeditor-show, .extendedmover-show, .extendedconfirmed-show,
.autoconfirmed-show, .user-show { display: none; }

.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright { display: none !important; }

ul.permissions-errors { margin: 0; }
ul.permissions-errors > li { list-style: none; }
span.mwe-math-mathml-inline { font-size: 118%; }
.mwe-math-fallback-image-display, .mwe-math-mathml-display {
    margin-left: 1.6em !important; margin-top: 0.6em; margin-bottom: 0.6em;
}
.mwe-math-mathml-display math { display: inline; }

@media screen {
    body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
        background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
    }
    #siteSub { display: block; }
    .references { font-size: 90%; }
}

.flaggedrevs_draft_synced, .flaggedrevs_stable_synced, #t-upload,
.mw-special-Book #coll-downloadbox { display: none; }

/* Infoboxes */
.infobox {
    border: 1px solid #a2a9b1; color: black; padding: 0.2em;
    font-size: 88%; line-height: 1.5em; border-spacing: 3px;
}
@media screen { .infobox { background-color: #f8f9fa; } }
@media (max-width: 640px) { .infobox { width: 100%; } .infobox .nowrap { white-space: normal; } }
@media (min-width: 640px) {
    .infobox { margin: 0.5em 0 0.5em 1em; float: right; clear: right; width: 22em; }
}
.infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data,
.infobox-below, .infobox-subheader, .infobox-image, .infobox-navbar,
.infobox th, .infobox td { vertical-align: top; }
.infobox-label, .infobox-data, .infobox th, .infobox td { text-align: left; }
.infobox .infobox-above, .infobox .infobox-title, .infobox caption {
    font-size: 125%; font-weight: bold; text-align: center; padding: 0.2em;
}
.infobox .infobox-header, .infobox .infobox-subheader, .infobox .infobox-image,
.infobox .infobox-full-data, .infobox .infobox-below { text-align: center; }
.infobox .infobox-navbar { text-align: right; }

.wikitable.plainrowheaders th[scope=row], .wikitable.plainrowheaders th[scope=rowgroup] {
    font-weight: normal; text-align: left;
}
.nounderlines a, .IPA a:link, .IPA a:visited { text-decoration: none !important; }
.nowrap, .nowraplinks a { white-space: nowrap; }
.wrap, .wraplinks a { white-space: normal; }

span.texhtml {
    font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
    font-size: 118%; line-height: 1;
    font-variant-numeric: lining-nums tabular-nums; font-kerning: none;
}
span.texhtml span.texhtml { font-size: 100%; }
@media (min-width: 640px) { span.texhtml { white-space: nowrap; } }
@media (max-width: 640px) {
    .flagicon a > img, .flagicon noscript > img { max-width: none !important; }
}
@media screen { .nochecker .gallerybox .thumb img { background-image: none; } }

/* YouTube Embeds */
.mw-parser-output iframe[src*="youtube.com"],
.mw-parser-output iframe[src*="youtube-nocookie.com"] {
    width: 100% !important; max-width: 320px; height: auto !important;
    aspect-ratio: 16 / 9; display: block; margin: 0 auto;
}

/* ======================================================= */
/* RESTORED CAPSACH TOC (Fixed: No "X", Clear Title)       */
/* ======================================================= */

/* CapSach — Mobile TOC overlay (all skins) */
#cps-open-toc {
  position: fixed;
  display: none; 
}

/* Full-screen scrim (Click outside to close) */
#cps-toc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4); 
  display: none; 
  z-index: 1004; 
}
#cps-toc-overlay.is-open { display: block; }

/* --- THE DROPDOWN PANEL --- */
#cps-toc-panel {
  position: fixed; 
  
  /* POSITION: 60px from top (Below Buttons) */
  top: 60px !important; 
  
  /* FULL WIDTH */
  left: 0 !important; 
  right: 0 !important; 
  bottom: auto !important; 
  
  width: 100% !important;
  max-width: 100% !important;
  
  /* HEIGHT CONSTRAINT (Ad Safety) */
  /* CHANGED: Increased gap to 100px to avoid bottom ads/screen edge */
max-height: calc(100vh - 150px) !important;  

  /* APPEARANCE */
  /* CHANGED: Removed rounded corners (was 12px) */
  border-radius: 0 !important;
  
  background: #ffffff !important; 
  color: #202122 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
  
  padding: 15px !important;
  box-sizing: border-box !important;
  
  /* SCROLLING */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  
  /* VISIBILITY */
  z-index: 1005 !important; 
  display: none; 
}

/* Logic to show panel */
.is-open #cps-toc-panel, 
#cps-toc-overlay.is-open + #cps-toc-panel,
#cps-toc-panel[style*="display: block"] {
    display: block !important;
}

/* --- 1. RESET THE CONTAINER (Fixes the "part above" issue) --- */
/* We remove all spacing/color from the wrapper so it disappears */
#cps-toc-header {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    min-height: 0 !important; /* Ensures it takes no space if empty */
}

/* --- 2. STYLE THE TITLE TEXT AS THE GREY BLOCK --- */
/* We target the h2 directly so the color sticks to the text */
#cps-toc-panel > h2, 
#cps-toc-title {
    /* THE BACKGROUND COLOR */
    background-color: #F8F9FA !important;
    
    /* FULL WIDTH TRICK */
    /* We pull the text element OUT of the padding to touch the edges */
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-top: -15px !important; /* Pulls it to the very top */
    
    /* HEIGHT & SPACING */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    
    /* Pushes the link list down so it doesn't overlap */
    margin-bottom: 15px !important; 
    
    /* BORDER SEPARATOR */
    border-bottom: 1px solid #eaecf0 !important;
    
    /* TEXT STYLING */
    display: block !important;
    width: auto !important; /* Let margins control width */
    text-align: center !important;
    color: #202122 !important;
    font-size: 18px !important;
    font-family: sans-serif !important;
    font-weight: bold !important; /* Tries to force bold */
}

/* HIDE THE CLOSE BUTTON ("X") */
#cps-toc-close {
  display: none !important;
}

/* --- LIST STYLING --- */
#cps-toc-list {
  list-style: none; margin: 0; padding: 0;
}
#cps-toc-list li { margin: 0; }
#cps-toc-list a {
  display: block; padding: 12px 10px; 
  border-bottom: 1px solid #f8f8f8;
  text-decoration: none; 
  color: #202122;
  font-size: 15px;
  line-height: 1.4;
}
#cps-toc-list a:active {
  background: #f0f0f0;
  color: #3366cc;
}

/* Indentation */
#cps-toc-list li[data-level="3"] { padding-left: 15px; }
#cps-toc-list li[data-level="4"] { padding-left: 30px; }
#cps-toc-list li[data-level="5"] { padding-left: 45px; }

/* --- REMOVED THE IPAD HIDING RULE HERE --- */
/* (The @media min-width 768px block was deleted to allow TOC on iPad) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* FIX: HIDE DUPLICATE "CONTENTS" TITLE IN MOBILE TOC */
#cps-toc-panel .toctitle,
#cps-toc-panel #mw-toc-heading,
#cps-toc-panel h2 {
    display: none !important;
}

/* ======================================================= */
/* 2. GLOBAL HIDE (READ-ONLY MODE)                         */
/* These elements are hidden for everyone by default.      */
/* They are UNHIDDEN in MediaWiki:Group-user.css           */
/* ======================================================= */

/* HIDE USER LINKS (Includes Sticky Header IDs for Vector 2022) */
#vector-user-links,
#p-personal,
#pt-login,
#pt-login-2,            /* Sticky Header Login */
#pt-createaccount,
#pt-createaccount-2,    /* Sticky Header Create Account */
#pt-userpage,
#pt-mytalk,
#pt-preferences,
#pt-watchlist,
#pt-mycontris,
#pt-logout {
    display: none !important;
}

/* HIDE TOOLS (Sidebar, Dropdowns, Tabs) */
#p-tb,                        /* Toolbox */
#vector-page-tools,           /* Vector 22 Sidebar */
#vector-page-tools-dropdown, /* Vector 22 Dropdown */
.vector-p-tb,
#ca-viewsource,
#ca-history,
#ca-talk {
    display: none !important;
}

/* HIDE CATEGORIES */
#catlinks,
.catlinks,
.mw-normal-catlinks {
    display: none !important;
}

/* ======================================================= */
/* FORCE HIDE MOBILE HISTORY BAR                           */
/* Placed in Common.css to ensure it loads on all devices  */
/* ======================================================= */

/* Target the container class from your HTML */
.last-modified-bar,
a.last-modified-bar {
    display: none !important;
    visibility: hidden !important;
}

/* Target the text wrapper explicitly */
.last-modified-bar__text,
.modified-enhancement {
    display: none !important;
}

/* Target the specific clock icon found inside that button */
.minerva-icon--modified-history {
    display: none !important;
}

/* ======================================================= */
/* HIDE MOBILE USER/LOGIN MENU (Wrapper Method)            */
/* ======================================================= */

/* Target the main container div */
.minerva-user-menu {
    display: none !important;
}

/* Backup: Target the toggle button specifically */
.toggle-list__toggle#minerva-user-menu-toggle {
    display: none !important;
}

/* Backup: Target the icon inside */
.minerva-icon--userAvatarOutline {
    display: none !important;
}

/* ======================================================= */
/* HIDE MOBILE SIDEBAR ITEMS                               */
/* ======================================================= */

/* 1. Hide "Recent Changes" */
#mw-mf-page-left a[href*="Special:RecentChanges"],
#mw-mf-page-left a[data-event-name="recentchanges"] {
    display: none !important;
}

/* 2. Hide "Special Pages" */
#mw-mf-page-left a[href*="Special:SpecialPages"] {
    display: none !important;
}

/* 3. Hide "Community Portal" */
/* Matches the URL: index.php?title=...Community_portal */
#mw-mf-page-left a[href*="Community_portal"] {
    display: none !important;
}

/* ======================================================= */
/* HIDE VECTOR 2022 PAGE TOOLBAR & PRE-CONTENT             */
/* (Restored for logged-in users in MediaWiki:Group-user.css) */
/* ======================================================= */

/* Hides the tabs (Read, Edit, History) and the "Tools" dropdown */
.vector-page-toolbar {
    display: none !important;
}

/* Hides the "From [Sitename]" text and page status indicators */
.vector-body-before-content {
    display: none !important;
}

/* ======================================================= */
/* HIDE LANGUAGE SELECTOR MENU (Global)                    */
/* ======================================================= */
#p-vector-user-menu-preferences {
    display: none !important;
}

/* Hides the top-left container (Main Menu / Hamburger Icon) */
.vector-main-menu-landmark {
    display: none !important;
}

/* ======================================================= */
/* 1. DESKTOP STICKY HEADER (Vector 2022 Skin)             */
/* ======================================================= */
/* This part works perfectly, as confirmed. */

.vector-header-container {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Pushes article content down so it isn't hidden behind the fixed header */
body.skin-vector-2022 {
    padding-top: 60px;
}
.mw-page-container {
    margin-top: 10px;
}

/* ======================================================= */
/* 2. TOP FLOATING SQUARES (44px | #F8F9FA Tone)           */
/* ======================================================= */

/* --- A. HEADER RESET (Invisible Container) --- */
.header-container.header-chrome {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 60px !important; 
    z-index: 1000 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
}

/* Push content down */
body.skin-minerva { padding-top: 60px !important; }
.mw-body { margin-top: 10px !important; }

/* Hide default elements */
.header-container .navigation-drawer { display: none !important; }

/* --- B. COMMON SQUARE STYLE (0.03 Transparency for #F8F9FA) --- */
.branding-box, 
#searchIcon, 
#cps-open-toc,
body.mw-mf-search-mode .minerva-header .search-box input {
    /* 3% Black = ~#F8F9FA on white */
    background-color: rgba(0, 0, 0, 0.2) !important; 
    
    /* Force Full Opacity & Strip Defaults */
    opacity: 1 !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    
    /* CHANGED: 50% makes it a perfect circle */
    border-radius: 50% !important;
    pointer-events: auto !important;
    
    /* STANDARD 44px SIZING */
    box-sizing: border-box !important;
    width: 44px !important; 
    height: 44px !important;
    padding: 0 !important; 
    margin: 0 !important;
}

/* --- C. BUTTON 1: SEARCH TRIGGER (TOP LEFT) --- */
#searchIcon {
    position: fixed !important;
    
    /* ALIGNMENT: 8px Top */
    top: 8px !important;       
    left: 10px !important;
    right: auto !important;
    
    /* FORCE SIZE RESET */
    min-width: 0 !important; 
    min-height: 0 !important;
    max-width: 44px !important;
    max-height: 44px !important;
    
    z-index: 1003 !important;
    display: flex !important; align-items: center; justify-content: center;
}

/* Search Icon */
#searchIcon .minerva-icon {
    font-size: 24px !important;
    color: #fff !important;
    fill: #fff !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1); 
    margin: 0 !important;
}

/* --- D. BUTTON 2: TOC (RIGHT - 100px SPACE) --- */
#cps-open-toc {
    display: flex !important;
    position: fixed !important;
    top: 8px !important;
    
    /* Position: 100px from right edge */
    right: 100px !important; 
    left: auto !important; bottom: auto !important;
    
    z-index: 1002 !important;
    color: #fff !important;
    align-items: center; justify-content: center;
}

/* TOC Icon */
#cps-open-toc .icon {
    font-size: 30px !important;
    /* font-weight: 900 !important;  Matches thickness */
    
    /* FIX: Force line-height to be tight to the icon */
    line-height: 1 !important; 
    
    /* FIX: Pushes the icon UP by adding invisible space below it */
    margin-bottom: 3px !important; 
}

/* FIX: Ensure no text label appears in button */
#cps-open-toc .label { display: none !important; }

/* --- E. BUTTON 3: HOME (LEFT OF TOC) --- */
.branding-box {
    position: fixed !important;
    top: 8px !important;
    
    /* Position: 100px (Space) + 44px (TOC) + 10px (Gap) */
    right: 154px !important;
    left: auto !important;
    
    /* FIX: Force Square Shape on iPad/PC */
    /* This overrides the skin's "Tablet Mode" resizing */
    min-width: 0 !important;
    max-width: 44px !important;
    width: 44px !important;
    
    z-index: 1002 !important;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
}

/* 1. The Home Icon (Bold & White) */
.branding-box::after {
    content: "⌂"; 
    font-size: 30px !important; 
    color: #fff !important; 
    
    /* CHANGED: Reduced from 1px to 0.5px for a cleaner look */
    -webkit-text-stroke: 0.5px #fff !important; 
    
    margin-top: -6px !important; 
    display: block !important;
    line-height: 1 !important;
}

/* 2. The Link Overlay */
.branding-box a {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important; 
    z-index: 2 !important;
}
.branding-box a * { display: none !important; }
.branding-box a::before { display: none !important; }

/* --- F. THE SEARCH INPUT --- */

/* 1. Hide initially */
body:not(.mw-mf-search-mode) .minerva-header .search-box {
    display: none !important;
}

/* 2. Position Wrapper */
body.mw-mf-search-mode .minerva-header .search-box {
    display: block !important;
    position: fixed !important;
    top: 8px !important;
    height: 44px !important;
    z-index: 1001 !important;
    
    left: 10px !important;    
    right: 10px !important;   
    
    width: auto !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* 3. Style Input Pill */
body.mw-mf-search-mode .minerva-header .search-box input {
    width: 100% !important;
    height: 44px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    
    /* Background matches buttons */
    background-color: rgba(0, 0, 0, 0.03) !important;
    
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 16px !important;
    
    /* PADDING: 44px (Button) + 11px (Gap) */
    padding-left: 55px !important; 
    padding-right: 55px !important;
    
    margin: 0 !important;
}

/* 4. Hide Inner Icon */
.minerva-header .search-box .search-box-icon-overlay {
    display: none !important;
}

/* 5. Placeholder */
body.mw-mf-search-mode .minerva-header .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* 6. Cancel "X" Button */
.search-box .search-box-cancel { 
    display: block !important; 
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    color: #fff !important;
    z-index: 1004 !important;
}

/* ======================================================= */
/* HIDE PAGE ACTIONS MENU (Language, Watch, Edit, etc.)    */
/* ======================================================= */
#p-views,
.page-actions-menu__list {
    display: none !important;
}

/* ======================================================= */
/* HIDE STANDARD "FIXED" TOC (Force Sticky Button Only)    */
/* ======================================================= */
/* This removes the default TOC box inside the article text */
.toc,
#toc,
.mw-parser-output #toc,
.client-js .mw-content-ltr .toc {
    display: none !important;
}

/* ======================================================= */
/* FORCE STICKY TOC ON IPAD / TABLET                       */
/* ======================================================= */
@media screen and (min-width: 768px) {
    #cps-open-toc {
        /* Force Display */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* Ensure it sits on top of the iPad header */
        z-index: 9999 !important;
        
        /* Ensure positioning is correct */
        position: fixed !important;
        top: 8px !important;
        right: 100px !important;
        
        /* CHANGE THIS LINE FROM 0.1 TO 0.2 */
        background-color: rgba(0, 0, 0, 0.2) !important;
        
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important; /* Kept the circle change from previous step */
    }
}

/* Constrain main content width for better readability */
#content {
    max-width: 900px; /* Optimal reading width */
    margin: 0 auto;   /* Center it */
    line-height: 1.6; /* More breathing room between lines */
}

/* ======================================================= */
/* SMART HIDE: ONLY HIDE BUTTON ON DESKTOP SKIN            */
/* ======================================================= */

/* This rule only triggers if the screen is wide AND the user is on the Desktop Skin */
@media screen and (min-width: 1000px) {
    body.skin-vector-2022 #cps-open-toc {
        display: none !important;
    }
}

/* 1. Remove gap below the Site Notice (even if empty) */
#siteNotice {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Remove gap above the Main Content container */
#content.mw-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Remove gap above the Page Heading ("Home") */
/* This is often the hidden cause of the white line */
.pre-content,
.page-heading, 
.firstHeading {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ======================================================= */
/* 1. MAKE HEADER TRANSPARENT                              */
/* ======================================================= */
.header-container.header-chrome,
.minerva-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ======================================================= */
/* 2. RESET PAGE & CONTAINER TOP MARGINS                   */
/* This removes the "White Gap" at the very top            */
/* ======================================================= */
body.skin-minerva {
    padding-top: 0 !important;
}

/* Force the main content wrapper to start at pixel 0 */
#content, 
.mw-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove potential gap from the Site Notice container */
.banner-container,
#siteNotice {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ======================================================= */
/* 3. PUSH TITLE DOWN INTERNALLY                           */
/* This pushes the text "Home" down so it's not hidden,    */
/* but keeps the background white/transparent at the top.  */
/* ======================================================= */
.pre-content.heading-holder {
    /* 70px (Header height) + 40px (Visual Space) */
    padding-top: 70px !important;
    
    /* Ensure it behaves as a block to accept padding */
    display: block !important;
}

/* Best approach: Hides the text wrapper entirely to remove spacing */
.mw-logo-container {
    display: none !important;
}

/* Target the specific text element directly */
.mw-logo-wordmark {
    display: none !important;
    visibility: hidden !important; /* Backup if display fails */
    width: 0 !important;
}

/* ======================================================= */
/* ADD TAGLINE TO HEADER (DESKTOP)                         */
/* ======================================================= */

/* 1. Prevent underline on the parent link when hovering */
.mw-logo:hover,
.mw-logo:active,
.mw-logo:focus {
    text-decoration: none !important;
}

/* 2. Inject the tagline text */
.mw-logo::after {
    /* \A is the CSS escape character for a Newline */
    content: "The free \A business library";
    
    /* Typography - MATCHING FOOTER EXACTLY */
    /* Removed font-family line so it inherits the correct system font */
    font-size: 0.875em;      
    font-weight: 700;         
    line-height: 1.4;         
    
    /* Visuals */
    color: #202122 !important; 
    text-decoration: none !important; 
    cursor: pointer; 
    
    /* Positioning */
    display: block;
    white-space: pre; 
    margin-left: 3px; 
    text-align: left;
    
    /* MOVES TEXT DOWN */
    position: relative;
    top: 3px; 
}

/* Hide styling on Mobile/Tablet so it doesn't clash */
@media screen and (max-width: 900px) {
    .mw-logo::after {
        display: none !important;
    }
}

/* ======================================================= */
/* CUSTOM MOBILE FOOTER (Logo Image + Tagline)             */
/* ======================================================= */

/* 1. Reset the container */
.minerva-footer-logo {
    font-size: 0 !important;       /* Hide default text */
    color: transparent !important; /* Make sure it's invisible */
    display: block !important;     /* Stack vertically */
    text-align: left !important;   /* Align left */
    margin-bottom: 20px !important;
}

/* 2. INSERT THE LOGO (via ::before) */
.minerva-footer-logo::before {
    content: "" !important;
    display: block !important;

    /* DIRECT LINK TO YOUR LOGO */
    background-image: url('https://pro-wiki.s3.eu-central-1.amazonaws.com/2776118/Logo.png'); 

    /* DIMENSIONS */
    width: 160px;   
    height: 50px;   

    background-repeat: no-repeat !important;
    background-size: contain !important; 
    background-position: left center !important;
    
    margin-bottom: 6px !important; 
}

/* 3. INSERT THE TAGLINE (via ::after) */
.minerva-footer-logo::after {
    /* \A is the Newline character. Use "pre" or "pre-wrap" to render it. */
    content: "The free business library" !important;
    
    /* Typography - MATCHING FOOTER LINKS */
    /* Removed font-family to use system font (Roboto/San Francisco) */
    font-size: 0.875rem !important;    /* Increased to 14px to match footer links */
    font-weight: 700 !important;   
    line-height: 1.4 !important;   
    
    /* Visuals - KEEPING YOUR DARK COLOR */
    color: #202122 !important;     
    
    /* Layout */
    display: block !important;
    white-space: pre-wrap !important; 
}

/* ======================================================= */
/* FORCE SHOW HIDDEN MOBILE FOOTER LINKS                   */
/* Minerva hides About/Disclaimers by default.             */
/* This forces them to appear in the list.                 */
/* ======================================================= */
body.skin-minerva #footer-places-about,
body.skin-minerva #footer-places-disclaimers {
    display: inline-block !important;
}

/* Force paragraphs inside the navigation menu to inherit the parent font size */
.navigation-menu .infobox-data p {
    font-size: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ======================================================= */
/* GLOBAL BRANDING: DARK LINES & CLEANUP                   */
/* ======================================================= */

/* 1. TEXT COLORS (Headings & Titles) */
h1, h2, h3, h4, h5, h6,
.firstHeading,
.mw-page-title-main,
.page-heading,
.section-heading,
.vector-sticky-header-context-bar-primary,
.mw-headline,
.vector-pinnable-header-label { 
    color: #202122 !important;
}

/* 2. BORDERS FOR ALL HEADINGS (Desktop & Mobile) */
/* This puts the 1px dark line under the Title and Headings */
h2, 
.section-heading {     /* Mobile Section Headers */
    border-bottom: 1px solid #202122 !important;
    margin-bottom: 0.5em; 
}

.mw-first-heading {
    border-bottom: 2px solid #202122 !important;
    margin-bottom: 0.5em; 
}

/* 2.1 REMOVE VECTOR 2022 DEFAULT TITLE LINE */
/* You asked to remove the color/transparency of the ::after element */
.vector-page-titlebar::after {
    background-color: transparent !important;
    display: none !important;
    height: 0 !important;
}

/* 2.2 MOBILE CLEANUP (Minerva Skin) */
/* This removes the Language/Edit buttons to create a cleaner look. */
.page-actions-menu {
    display: none !important;
}

/* 4. CONTENTS SIDEBAR (Desktop) */
h2.vector-pinnable-header-label {
    border-bottom: none !important;
}

/* 6. FOOTER LINES (Global) */
#footer, 
.mw-footer,
.minerva-footer,
.printfooter {
    border-top: 1px solid #202122 !important;
}

/* 7. CLEAN UP MOBILE FOOTER GAPS */
.minerva-footer .footer-content,
.minerva-footer .branding-box,
.minerva-footer-logo,
#footer-info,
#footer-places {
    border: none !important;
}

/* 8. MOBILE ICONS */
.skin-minerva .section-heading .mw-ui-icon-wikimedia-expand-small {
    filter: grayscale(1) brightness(0.2);
}

/* 9. SUBTLE UI TWEAKS */
.mw-editsection, .mw-editsection a {
    color: #202122 !important;
    opacity: 0.7;
}

/* ======================================================= */
/* FORCE LEGACY BLUE (#0645ad) - LINKS & TOGGLES           */
/* ======================================================= */

/* 1. Force Link Color (Visited, Unvisited & Toggles) */
/* Overrides standard links and the collapsible "Show/Hide" text */
a,
a:visited,
.mw-parser-output a,
.mw-parser-output a:visited,
.mw-body-content a.external,
.mw-body-content a.external:visited,
.mw-collapsible-toggle-default .mw-collapsible-text {
    color: #0645ad !important;
}

/* 2. Protect Red Links (New pages) */
/* Keeps missing pages red (#d73333) even if visited */
a.new,
a.new:visited {
    color: #d73333 !important;
}

/* 3. Protect UI Buttons */
/* Ensures text inside buttons (like 'Save changes') stays white */
a.mw-ui-button,
a.mw-ui-button:visited {
    color: #fff !important;
}

/* ======================================================= */
/* MAIN PAGE MENU                                          */
/* ======================================================= */

.main-page-menu {
    /* Adjusted from 2.2 to 1.8 for better visual grouping */
    line-height: 1.8; 
    margin-bottom: 0em;
    font-size: 0.85em;
}

/* ======================================================= */
/* TEMPLATE:READ                                           */
/* ======================================================= */

/* ======================================================= */
/* UI PILLS / CHIPS (Professional "Badge" Style)           */
/* ======================================================= */
.read-pill {
    display: inline-block;     /* Keeps the box safe/whole */
    vertical-align: baseline;  /* Aligns perfectly with text reading line */
    white-space: nowrap;       /* Prevents the "shatter" if it hits line end */
    
    font-size: 0.85em;         
    padding: 1px 0.5em;        /* Use small vertical padding to prevent line-height issues */
    border-radius: 4px;        
    
    position: relative;        /* Micro-tuning */
    top: -1px;                 /* Optical correction for the border/padding weight */
}

/* Inner span handles the ellipsis specifically */
.read-pill > span {
    display: block;             /* Necessary for ellipsis to trigger */
    overflow: hidden;
    text-overflow: ellipsis;    /* Adds the "..." */
    white-space: nowrap;
}

/* Force links inside to look clean */
.read-pill a {
    color: inherit !important;  /* Takes the pill's text color */
    text-decoration: none !important;
}
Retrieved from "https://www.insurerbrain.com/w/index.php?title=MediaWiki:Common.css&oldid=4781"