MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1,166:
 
/* ======================================================= */
/* 2. MOBILE ONLY: TRUE"NUCLEAR" APP-LIKEFULL LAYOUTSCREEN (FixedFIX Header/Footer(iOS) */
/* ======================================================= */
 
@media screen and (max-width: 768px) {
/* A. LOCKFORCE THE MAIN PANELWRAPPER TO THEBE A FIXED VIEWPORTOVERLAY */
/* This targets the outermost container to ensure it sits on top of the page */
.ext-aiassistant,
.ext-aiassistant-panel {
/* 1. FixDetach positionfrom topage screenflow completely */
position: fixed !important;
/* 2. Lock to all 4 corners of the screen */
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
 
/* 23. UseForce Dynamic Viewport HeightDimensions (Fixes iOS URLignores barparent resizingcontainer issuessize) */
height: 100dvh !important;
width: 100vw !important;
height: 100dvh !important; /* 'dvh' handles the moving URL bar on iOS */
max-width: none !important;
max-height: none !important;
 
/* 34. Reset borders/marginsPositioning for(Fixes full"Shifted screenLeft" issues) */
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
heightpadding: 100dvh0 !important;
transform: none !important; /* Prevents centering transforms from interfering */
/* 5. Ensure it is the top-most layer */
borderz-index: none999999 !important;
background-color: #ffffff !important;
}
 
/* 4B. FLEXBOXSETUP MAGIC:THE ThisFLEXBOX isLAYOUT what keeps Header Top /(Inside Footerthe BottomPanel) */
.ext-aiassistant-panel {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
 
/* 5. Prevent the "Rubberwhole Band"modal effectfrom on the wholescrolling page(rubber-banding) */
overscroll-behavior: none !important;
}
 
/* BC. THE HEADER (StaysLocks atto Top) */
.ext-aiassistant-header {
/* Don't shrink/grow, Don't shrink,. Fixed height based on content. */
flex: 0 0 auto !important;
/* iOS NotchSafe Support:Area Adds(The padding so content isn't under the notchNotch) */
padding-top: env(safe-area-inset-top, 20px) !important;
/* Visuals */
background: #fff !important; /* Ensure content doesn't show behind */
z-indexwidth: 10100% !important;
border-radiusbottom: 01px solid #eee !important;
}
 
/* CD. THE BODY (The OnlyScrolling Part That Scrolls) */
.ext-aiassistant-body {
/* GrowTake to fillup all available space between Header and Footer */
flex: 1 1 auto !important;
/* Enable internalAllow scrolling ONLY here */
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important; /* Smooth scroll */
/* SmoothReset Momentum Scrolling for iOSheight */
-webkit-overflow-scrollingheight: touchauto !important;
width: 100% !important;
/* Force height to auto so Flexbox controls it */
height: auto !important;
min-height: 0 !important;
}
 
/* DE. THE FOOTER (StaysLocks atto Bottom) */
.ext-aiassistant-footer {
/* Don't grow, Don't shrink/grow */
flex: 0 0 auto !important;
/* iOS Safe Area (Home Indicator Support: Adds padding soswipe bar doesn't overlap input) */
/* We add extra padding so the text input isn't covered by the black bar */
padding-bottom: calc(10px15px + env(safe-area-inset-bottom, 20px)) !important;
/* Visuals */
background: #fff !important;
z-indexwidth: 10100% !important;
minborder-heighttop: 01px solid #eee !important;
}
}