MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Line 1,113:
 
/* ======================================================= */
/* 3. AI ASSISTANT (AXA BRAIN) CUSTOMIZATION - CONSOLIDATED FIX */
/* ======================================================= */
 
/* 1. GLOBAL LAYER (All Devices) */
/* This ensuresEnsure it sits on top of your floating buttonseverything (z-index: 10022000). */
/* We ONLY force the layer order here, not the position. */
/* This ensures it sits on top of your floating buttons (z-index: 1002). */
.ext-aiassistant,
.ext-aiassistant-panel {
Line 1,124 ⟶ 1,123:
}
 
/* 2. MOBILEDESKTOP ONLY:ALIGNMENT FULL SCREEN MODEFIX */
/* OPTIONAL:Fixes Fixthe for"enter thebutton" alignment issue you mentionedhad earlier */
/* We only force 'fixed' position on mobile to lock it to the screen. */
.ext-aiassistant-footer {
align-items: flex-start !important;
 
/* 3. MOBILE ONLY: FULL SCREEN APP MODE (Sticky Header/Footer)*/
@media screen and (max-width: 768px) {
 
/* --- THE MAIN CONTAINER --- */
.ext-aiassistant-panel {
/* Force Fixed soPosition itrelative coversto the screen regardless of scroll */
position: fixed !important;
/* Override inline styles to force full width/height */
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
 
/* Pin to all 4 corners */
top: 0 !important;
left: 0 !important;
Line 1,143 ⟶ 1,141:
bottom: 0 !important;
 
/* ResetForce stylesSize (Use 100dvh for acorrect height on mobile flatwith app-likeaddress lookbars) */
width: 100%100vw !important;
height: 100%100dvh !important;
/* Override any inline styles to force full width/height */
max-width: none !important;
max-height: none !important;
margin: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Ensure the internal chat body expands to fill the space */
.ext-aiassistant-body {
height: auto !important;
flex-grow: 1 !important;
}
 
/* 2. FLEXBOX MAGICLAYOUT (This createsmakes the header sticky behavior) */
/* ======================================================= */
/* 4. AI ASSISTANT FOOTER ALIGNMENT */
/* ======================================================= */
 
.ext-aiassistant-footer {
/* Align items to the top (flex-start) instead of bottom (flex-end) */
align-items: flex-start !important;
}
 
/* ======================================================= */
/* MOBILE ONLY: FULL SCREEN APP MODE (Sticky Header/Footer)*/
/* ======================================================= */
@media screen and (max-width: 768px) {
.ext-aiassistant-panel {
/* 1. Force Full Screen Fixed Canvas */
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important; height: 100% !important;
max-width: none !important; max-height: none !important;
margin: 0 !important; border-radius: 0 !important;
z-index: 2000 !important;
 
/* 2. FLEXBOX MAGIC (This creates the sticky behavior) */
display: flex !important;
flex-direction: column !important; /* Stack: itemsHeader vertically-> Body -> Footer */
background: #fff !important; /* Ensure solid background */
}
 
/* --- A. HEADER: Fixed(STICKY TOP) Top--- */
.ext-aiassistant-header {
flex: 0 0 auto !important; /* DoDon't notshrink or grow. orStay shrinkfixed size. */
width: 100% !important;
z-index: 10 !important; /* Sit above the scrolling content */
positionbackground: relative#fff !important; /* ResetEnsure anysolid absolutebackground positioningso text doesn't overlap */
border-bottom: 1px solid #eaecf0 !important; /* Visual separator */
}
 
/* --- B. BODY: The(SCROLLING ScrollingMIDDLE) Middle--- */
.ext-aiassistant-body {
flex: 1 1 auto !important; /* Grow to fill allALL available empty space */
overflow-y: auto !important; /* ScrollThe ONLYscrolling insidehappens thisHERE, boxnot on the page */
height: auto !important; /* Reset fixed heightsheight */
min-height: 0 !important; /* Crucial fixFix for flexbox scrolling inside flex containersbug */
overscroll-behavior: contain; /* Prevents background page from scrolling */
}
 
/* --- C. FOOTER: Fixed(STICKY BOTTOM) Bottom--- */
.ext-aiassistant-footer {
flex: 0 0 auto !important; /* DoDon't not growshrink or shrinkgrow */
width: 100% !important;
positionbackground: relative#fff !important;
padding-bottom: env(safe-area-inset-bottom) !important; /* Respect iPhone Home Bar */
/* OPTIONAL: Fix for the alignment issue you mentioned earlier */
align-items: flex-start !important;
}
}