Insurer Brain

MediaWiki:Common.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 453:
 
/* ======================================================= */
/* 2. BOTTOM FLOATING SQUARES (Centered Cluster) 4 Buttons: ToC Centered) */
/* ======================================================= */
 
Line 475:
.header-container .navigation-drawer { display: none !important; }
 
/* --- B. COMMONSHARED SQUARESTYLES STYLE(Applies to all 4 buttons + Input) --- */
.branding-box,
#searchIcon,
#cps-open-toc,
#custom-email-btn, /* The Email Button */
body.mw-mf-search-mode .minerva-header .search-box input {
/* Design: Dark Semi-Transparent Circle */
background-color: rgba(0, 0, 0, 0.2) !important;
opacity: 1 !important;
backgroundborder-imageradius: none50% !important;
-webkit-appearance: none !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
border-radius: 50% !important;
pointer-events: auto !important;
/* Dimensions: 44px x 44px */
box-sizing: border-box !important;
width: 44px !important;
Line 496 ⟶ 497:
padding: 0 !important;
margin: 0 !important;
}
/* Fixed Positioning at Bottom */
 
/* --- C. BUTTON 1: SEARCH TRIGGER (LEFT) --- */
#searchIcon {
position: fixed !important;
/* VERTICAL: Bottom */
top: auto !important;
bottom: 25px !important;
/* HORIZONTAL:Center OffsetAlignment Leftsetup from(Offsets Centerdefined below) */
left: 50% !important;
right: auto !important;
/* -22px(half home) -30px(gap) -44px(width) = -96px */
margin-left: -96px !important;
/* Flexbox to center the icons inside */
min-width: 0 !important; max-width: 44px !important;
z-indexdisplay: 1003flex !important;
display: flex !important; align-items: center; justify-content: center;
justify-content: center;
z-index: 1002 !important;
}
 
/* --- C. POSITIONS (Order: Search, Home, ToC, Email) --- */
 
/* 1. SEARCH (Far Left) */
/* Offset: -150px */
#searchIcon {
margin-left: -150px !important;
z-index: 1003 !important;
}
#searchIcon .minerva-icon {
font-size: 24px !important;
Line 524 ⟶ 530:
}
 
/* --- D2. BUTTONHOME 2:(Left TOCof (RIGHTCenter) --- */
/* Offset: -86px */
.branding-box {
margin-left: -86px !important;
}
/* Home Icon (⌂) */
.branding-box::after {
content: "⌂";
font-size: 30px !important;
color: #fff !important;
-webkit-text-stroke: 0.5px #fff !important;
margin-top: -6px !important;
line-height: 1 !important;
}
.branding-box a { opacity: 0 !important; position: absolute; inset: 0; }
 
/* 3. TOC (CENTER ANCHOR) */
/* Offset: -22px (Centered) */
#cps-open-toc {
displaymargin-left: flex-22px !important;
position: fixed !important;
 
/* VERTICAL: Bottom */
top: auto !important;
bottom: 25px !important;
/* HORIZONTAL: Offset Right from Center */
left: 50% !important;
right: auto !important;
/* +22px(half home) +30px(gap) = +52px */
margin-left: 52px !important;
z-index: 1002 !important;
color: #fff !important;
align-items: center; justify-content: center;
}
 
#cps-open-toc .icon {
font-size: 30px !important;
line-height: 1 !important;
margin-bottom: 3px !important;
color: #fff !important;
}
#cps-open-toc .label { display: none !important; }
 
/* --- E4. BUTTONEMAIL 3:(Right HOMEof (CENTERCenter) --- */
/* Offset: +42px */
.branding-box {
#custom-email-btn {
position: fixed !important;
margin-left: 42px !important;
 
/* VERTICAL: Bottom */
top: auto !important;
bottom: 25px !important;
/* HORIZONTAL: Dead Center */
left: 50% !important;
right: auto !important;
/* Half of 44px width to center it */
margin-left: -22px !important;
min-width: 0 !important; max-width: 44px !important;
width: 44px !important;
z-index: 1002 !important;
display: flex !important; align-items: center; justify-content: center;
}
/* Email Icon (Envelope ✉) */
 
#custom-email-btn::after {
/* Home Icon */
content: "\2709"; /* Unicode for Envelope */
.branding-box::after {
contentfont-size: "⌂";26px !important;
font-sizecolor: 30px#fff !important;
colormargin-top: #fff-2px !important;
-webkit-text-stroke: 0.5px #fff !important;
margin-top: -6px !important;
display: block !important;
line-height: 1 !important;
}
 
/* --- D. THE SEARCH INPUT (When Search is Clicked) --- */
/* 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 */
Line 608 ⟶ 588:
z-index: 1001 !important;
left: 10px !important;
right: 10px !important;
width: auto !important;
Line 618 ⟶ 598:
 
/* 3. Style Input Pill */
/* (Note: The input background/shape is handled in Shared Styles above) */
body.mw-mf-search-mode .minerva-header .search-box input {
width: 100% !important;
heightfont-size: 44px16px !important;
border-radius: 8px !important;
box-sizing: border-box !important;
/* Background matches buttons */
background-color: rgba(0, 0, 0, 0.03) !important;
/* Text Color */
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 16px !important;
/* PADDING: 44px (Button) + 11px (Gap) */
Line 635 ⟶ 611:
padding-right: 55px !important;
/* Reset position for the input box specifically */
position: static !important;
margin: 0 !important;
}
Line 683 ⟶ 661:
 
/* ======================================================= */
/* FORCE STICKY TOC ON IPAD / TABLET (Keep in ClusterCentered) */
/* ======================================================= */
@media screen and (min-width: 768px) {
Line 699 ⟶ 677:
left: 50% !important;
right: auto !important;
margin-left: 52px !important; /* Offset Right */
/* Centered Offset */
margin-left: -22px !important;
background-color: rgba(0, 0, 0, 0.2) !important;
Retrieved from "https://www.insurerbrain.com/wiki/MediaWiki:Common.css"