MediaWiki:Common.css: Difference between revisions
Content deleted Content added
No edit summary Tag: Manual revert |
No edit summary Tag: Reverted |
||
Line 1,419:
white-space: normal !important;
word-wrap: break-word !important;
}
/* ======================================================= */
/* MOBILE AI ASSISTANT: SYMMETRICAL FOOTER LAYOUT */
/* ======================================================= */
@media screen and (max-width: 768px) {
/* 1. FLEX CONTAINER: Aligns [Close] [Input] [Send] in a row */
.ext-aiassistant-footer {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important; /* Even spacing between elements */
padding: 8px !important;
/* Ensure it sticks to bottom inside the fixed panel */
background-color: #fff; /* or your preferred footer bg */
}
/* 2. MIDDLE INPUT: Stretches to fill all available space */
.ext-aiassistant-input {
flex-grow: 1 !important;
width: auto !important; /* Override fixed widths */
margin: 0 !important; /* Remove messy margins */
min-width: 0 !important; /* Flexbox safety rule */
}
/* Fix the textarea inside to be full height/width of its container */
.ext-aiassistant-input textarea {
min-height: 36px !important;
height: 36px !important;
padding: 6px 10px !important;
}
/* 3. SYMMETRICAL BUTTONS (Close & Send) */
/* We target both the existing Send button and our new Close button */
.ext-aiassistant-send,
#ai-assistant-close-mobile {
/* Force robust fixed layout */
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
/* Circle Styling */
border-radius: 50% !important;
padding: 0 !important;
margin: 0 !important;
/* Centering the Icons */
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* Visuals */
box-shadow: none !important;
border: none !important;
}
/* 4. FORCE "CLOSE" BUTTON COLORS */
/* Matches the Send button style (White text on Background) */
#ai-assistant-close-mobile {
background-color: #36c !important; /* Default Blue - Change to #202122 to match your dark theme */
color: #ffffff !important;
cursor: pointer !important;
}
/* Ensure SVG Icon is White */
#ai-assistant-close-mobile svg,
#ai-assistant-close-mobile path {
fill: #ffffff !important;
}
}
| |||