MediaWiki:Common.css: Difference between revisions
Content deleted Content added
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 1,144:
/* ======================================================= */
/* 3. ROBUST MOBILE AI
/* ======================================================= */
@media screen and (max-width: 768px) {
/* 1. MAIN PANEL (The Anchor) */
/* Force full screen flex container. This is the coordinate system. */
.ext-aiassistant-panel {
position: fixed !important;
inset: 0 !important; /* Top, Right, Bottom, Left = 0 */
width: 100% !important;
height: 100% !important;
background: #ffffff !important;
z-index: 99999 !important; /*
border-radius: 0 !important;
}
/* 2. HEADER (Invisible Wrapper) */
/* Collapse header to 0 height, but allow contents (the button) to be seen */
.ext-aiassistant-header {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
overflow: visible !important; /* CRITICAL: Let the button "escape" */
/* Force static so the button ignores this parent and anchors to the Panel */
position: static !important;
flex: 0 0 auto !important;
}
/* Ensure the
.ext-aiassistant-header-actions {
position: static !important;
display: block !important;
padding: 0 !important;
}
/* Hide Title and Settings Buttons */
.ext-aiassistant-title,
.ext-aiassistant-header-actions button:not(:last-child) {
display: none !important;
}
/* 3. CLOSE BUTTON (Teleported to Footer) */
.ext-aiassistant-header-actions button:last-child {
/* ABSOLUTE positioning relative to .ext-aiassistant-panel */
position: absolute !important;
left: 10px !important;
/* Pin to bottom, respecting iPhone Home Bar area */
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
/* Reset Top/Right from original styles */
top: auto !important;
right: auto !important;
/* Styling (Circle) */
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: #f0f0f0 !important;
border: 1px solid #ccc !important;
z-index: 10002 !important; /* Sit above the footer background */
/* Flex center the X icon */
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* Swap Icon for "X" */
.ext-aiassistant-header-actions button:last-child svg { display: none !important; }
.ext-aiassistant-header-actions button:last-child::after {
content: "✕"; /* Close Cross */
font-size: 16px;
color: #333;
font-weight: bold;
line-height: 1;
margin-top: -1px;
}
/* 4. CHAT BODY (Fill Remaining Space) */
.ext-aiassistant-body {
height: auto !important; /* Let Flexbox handle height */
overflow-y: auto !important;
padding-top: 15px !important; /* Breathing room at top */
}
/* 5. FOOTER (Natural Bottom) */
.ext-aiassistant-footer {
flex: 0 0 auto !important; /* Don't shrink */
background: #ffffff !important;
border-top: 1px solid #eee !important;
/* Padding handles spacing + iPhone Home Bar */
padding: 10px !important;
padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
display: flex !important;
align-items: flex-end !important;
position: relative !important;
z-index: 10001 !important;
}
/* 6. INPUT BOX (Indent for Close Button) */
.ext-aiassistant-input {
/* Push right to make space for the absolute Close button */
margin-left: 44px !important;
width: auto !important;
flex-grow: 1 !important;
}
Line 1,419 ⟶ 1,497:
white-space: normal !important;
word-wrap: break-word !important;
}
| |||