MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Tag: Manual revert
 
(42 intermediate revisions by the same user not shown)
Line 837:
 
/* =================================================================
8. AI ASSISTANT (AXA BRAIN)PANEL
================================================================= */
 
/* --- Layer orderZ-index: sits behind floating buttons (z-index 1002) --- */
.ext-aiassistant,
.ext-aiassistant-panel {
Line 846:
}
 
/* --- Panel: dark border, no shadowshell --- */
.ext-aiassistant-panel {
border: 1px solid #202122 !important;
Line 852:
}
 
/* --- Header & footer borders --- */
.ext-aiassistant-header { border-bottom: 1px solid #202122 !important; }
border-bottom: 1px solid #202122 !important;
.ext-aiassistant-footer {
bordermargin-topleft: 1px solid #2021220 !important;
alignmargin-itemsright: center0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
 
/* --- SendMessage button (circle)area --- */
.ext-aiassistant-send,body {
padding-left: 20px !important;
.ext-aiassistant-prompt-composer__send {
borderpadding-radiusright: 50%20px !important;
widthbox-sizing: 36pxborder-box !important;
height: 36px !important;
min-width: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-left: 4px !important;
}
 
.ext-aiassistant-send:not(:disabled)message {
backgroundmargin-colorleft: #2021220 !important;
bordermargin-colorright: #2021220 !important;
color: #ffffff !important;
}
 
.ext-aiassistant-send:disabledmessage + .ext-aiassistant-message {
backgroundmargin-colortop: #CCCCCC0 !important;
border-color: #CCCCCC !important;
}
 
/* --- User message bubble --- */
.ext-aiassistant-message-user {
margin-left: 100px !important;
margin-top: 1.6em0 !important;
margin-bottom: 1.6em0 !important;
}
 
.ext-aiassistant-message-user .ext-aiassistant-message__content {
background-color: #202122 !important;
color: white !important;
border-radius: 24px18px !important;
paddingborder: 12pxnone !important;
padding: 6px 12px !important;
}
 
.ext-aiassistant-message-user .ext-aiassistant-message__content p {
color: white !important;
margin: 0 !important;
}
 
/* --- Assistant typography (matches article style) --- */
/* Uniform gap between consecutive messages */
.ext-aiassistant-message + .ext-aiassistant-message {
margin-top: 2.5em !important;
}
 
/* --- Assistant message typography (matches article style) --- */
.ext-aiassistant-message-assistant {
font-family: sans-serif !important;
font-size: 1em !important;
color: #202122 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
max-width: 100% !important;
}
 
.ext-aiassistant-message-assistant p {
margin: 0 0 0.6em !important;
}
 
Line 926 ⟶ 918:
}
 
.ext-aiassistant-message-assistant p {
margin: 0 0 0.6em !important;
}
 
/* --- Assistant lists (clean editorial style) --- */
.ext-aiassistant-message-assistant ul,
.ext-aiassistant-message-assistant ol {
Line 936 ⟶ 923:
margin-left: 0 !important;
padding-top: 0 !important;
word-wrap: break-word !important;
}
 
Line 952 ⟶ 938:
margin-bottom: 0.2em !important;
white-space: normal !important;
word-wrap: break-word !important;
}
 
/* --- Assistant code blocks (force wrapping) --- */
.ext-aiassistant-message-assistant pre,
.ext-aiassistant-message-assistant code {
Line 965 ⟶ 949:
padding: 0 !important;
margin: 0 !important;
}
 
/* --- Action buttons (copy, source) --- */
.ext-aiassistant-message-assistant .ext-aiassistant-actions {
display: flex !important;
flex-direction: row-reverse !important;
}
 
.ext-aiassistant-message-user .ext-aiassistant-actions {
display: flex !important;
justify-content: flex-end !important;
}
 
Line 974 ⟶ 969:
}
 
/* --- "New Chat" button renameSources --- */
.ext-aiassistant-sources {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 12px !important;
}
 
/* --- "New Chat" label --- */
.ext-aiassistant-panel .cdx-button--weight-quiet:not(.cdx-button--icon-only) {
font-size: 0 !important;
Line 986 ⟶ 990:
}
 
/* --- Alignment fixes: vertical guttersFooter + centeringComposer --- */
 
/* 1. Shared horizontal padding so header buttons, messages, and composer
all share the same left/right edge. Adjust 12px if needed after
inspecting the actual header button inset in DevTools. */
.ext-aiassistant-header,
.ext-aiassistant-body,
.ext-aiassistant-footer {
paddingborder-lefttop: 12px1px solid #202122 !important;
padding-rightdisplay: 12pxflex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
box-sizing: border-box !important;
background-color: #f8f9fa !important;
}
 
/* 2. Messages flush to body padding (no extra inset) */
.ext-aiassistant-message {
margin-left: 0 !important;
margin-right: 0 !important;
}
 
/* 3. Composer fills full footer width */
.ext-aiassistant-prompt-composer {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
boxbackground-sizingcolor: border-box#fff !important;
padding: 10px 20px !important;
border: none !important;
border-radius: 0 !important;
}
 
.ext-aiassistant-prompt-composer__toolbar {
/* 4. Vertically center composer inside footer */
.ext-aiassistant-footer {
display: flex !important;
justifyalign-contentitems: center !important;
}
 
/* --- Composer focus --- */
/* 5. Vertically center title + icon with header buttons */
.ext-aiassistant-headerprompt-composer:focus-within {.ext-aiassistant-prompt-composer__input,
.ext-aiassistant-prompt-composer__input:focus {
border-color: #202122 !important;
outline: none !important;
box-shadow: none !important;
}
 
/* --- Send button --- */
.ext-aiassistant-prompt-composer__send {
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
min-width: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-left: 4px !important;
}
 
.ext-aiassistant-headerprompt-iconcomposer__send:not(:disabled) {
verticalbackground-aligncolor: middle#202122 !important;
border-color: #202122 !important;
color: #ffffff !important;
}
 
.ext-aiassistant-prompt-composer__send:disabled {
/* 6. Action buttons (copy etc.) always right-aligned */
background-color: #EAECF0 !important;
.ext-aiassistant-actions {
displayborder-color: flex#EAECF0 !important;
justify-content: flex-end !important;
}
 
.ext-aiassistant-prompt-composer__send:disabled .cdx-icon svg {
/* 7. Mode dropdown and send button vertically aligned */
fill: #72777d !important;
.ext-aiassistant-prompt-composer__toolbar {
display: flex !important;
align-items: center !important;
}
 
 
/* =================================================================
Line 1,078 ⟶ 1,090:
/* Push input above sticky buttons */
.ext-aiassistant-footer {
padding-bottom: calc(75px70px + env(safe-area-inset-bottom)) !important;
}
 
/* Add a line to separate with the sticky buttons */
.ext-aiassistant-prompt-composer {
border-bottom: 1px solid #202122 !important;
border-radius: 0 !important;
padding-bottom: 10px !important;
}