MediaWiki:Common.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Tag: Manual revert
 
(33 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:disabled,message + .ext-aiassistant-message {
margin-top: 0 !important;
.ext-aiassistant-prompt-composer__send:disabled {
background-color: #f8f9fa !important;
border-color: #f8f9fa !important;
color: #ffffff !important;
}
 
.ext-aiassistant-prompt-composer__send:disabled .cdx-icon svg {
fill: #ffffff !important;
}
 
/* --- User message bubble --- */
.ext-aiassistant-message-user {
margin-left: 100px !important;
margin-top: 1.0em0 !important;
margin-bottom: 1.0em0 !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 932 ⟶ 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 942 ⟶ 923:
margin-left: 0 !important;
padding-top: 0 !important;
word-wrap: break-word !important;
}
 
Line 958 ⟶ 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 971 ⟶ 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 980 ⟶ 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 992 ⟶ 990:
}
 
/* --- AlignmentFooter fixes:+ composer centering, button orderComposer --- */
 
/* 1. Shared horizontal padding for body and footer only */
.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 */
.ext-aiassistant-message {
margin-left: 0 !important;
margin-right: 0 !important;
}
 
/* 3. Composer fills full footer width */
.ext-aiassistant-prompt-composer {
margin: 0 !important;
width: 100% !important;
boxbackground-sizingcolor: border-box#fff !important;
padding: 10px 20px !important;
}
border: none !important;
 
border-radius: 0 !important;
/* 4. Vertically center composer inside footer */
.ext-aiassistant-footer {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
 
/* 5. Swap assistant action buttons: copy moves right,
source moves left — aligns copy with user's copy btn */
.ext-aiassistant-message-assistant .ext-aiassistant-actions {
display: flex !important;
flex-direction: row-reverse !important;
}
 
/* 6. Keep user action buttons right-aligned */
.ext-aiassistant-message-user .ext-aiassistant-actions {
display: flex !important;
justify-content: flex-end !important;
}
 
/* 7. Toolbar items vertically aligned */
.ext-aiassistant-prompt-composer__toolbar {
display: flex !important;
Line 1,042 ⟶ 1,015:
}
 
/* 8.--- Composer border: single dark gray line on focus, no double ring--- */
.ext-aiassistant-prompt-composer:focus-within,
.ext-aiassistant-prompt-composer:focus-within .ext-aiassistant-prompt-composer__input,
.ext-aiassistant-prompt-composer__input:focus {
Line 1,051 ⟶ 1,023:
}
 
/* 9.--- Send button: dark gray instead of blue when active--- */
.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-prompt-composer__send:not(:disabled) {
background-color: #202122 !important;
Line 1,058 ⟶ 1,042:
}
 
.ext-aiassistant-prompt-composer__send:disabled {
/* 10. Source box: transparent background, no border */
background-color: #EAECF0 !important;
.ext-aiassistant-sources {
backgroundborder-color: transparent#EAECF0 !important;
}
border: none !important;
box-shadow: none !important;
padding: 0px !important;
 
.ext-aiassistant-prompt-composer__send:disabled .cdx-icon svg {
fill: #72777d !important;
}
 
 
/* =================================================================
Line 1,105 ⟶ 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;
}