Insurer Brain

Template:Insert quote panel/styles.css: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 12:
}
 
/* --- 2. IMAGE STYLING --- */
/* =========================================▼
.insert-quote-image {▼
SCENARIO A: WITH PROFILE IMAGE▼
flex: 0 0 auto;▼
(Transparent, No border, Text tight to image)
line-height: 0;▼
========================================= */▼
margin-top: 0 !important;▼
.insert-quote-panel.has-image {▼
gap: 10px; /* Very close spacing (approx 0.6em) */
}
.insert-quote-image img {▼
 
border-radius: 50%;▼
.insert-quote-panel.has-image .insert-quote-content {▼
border: 1px solid #ffffff;▼
background: transparent !important; /* Force removal of gray box */▼
width: 50px;▼
border: none !important; /* Force removal of gray bar */▼
height: 50px;▼
padding: 0 !important; /* Remove padding to move left */▼
colorobject-fit: #202122cover;
}▼
 
/* FIX: "Text too low"
MediaWiki adds <p> tags with top-margins automatically.
This forces the first paragraph to jump up to the top line. */
.insert-quote-panel.has-image .insert-quote-content > p:first-child,▼
.insert-quote-panel.has-image .insert-quote-content > div:first-child,▼
.insert-quote-panel.has-image .insert-quote-content > *:first-child {▼
▲ margin-top: 0 !important;
padding-top: 0 !important;▼
}
 
/* --- 3. SCENARIO B: NO IMAGE (DEFAULTGray Box) --- */▼
/* =========================================
▲ SCENARIO B: NO IMAGE (DEFAULT)
(Gray background box)
========================================= */
.insert-quote-panel.no-image .insert-quote-content {
background: #F8F9FA;
border: 0 solid #9CA4AC; /* Or border-left: 4px... depending on your pref */
padding: .5em;
color: #202122;
}
 
▲/* --- 4. SCENARIO A: WITH PROFILE IMAGE (The Fix) --- */
/* =========================================
▲.insert-quote-panel.has-image {
SHARED STYLES
gap: 15px; /* Comfortable space between face and text */
========================================= */
.insert-quote-content {
flex: 1;
min-width: 0;
}
 
▲.insert-quote-panel.has-image .insert-quote-content {
/* Image Styling */
/* Ensure OUR wrapper is invisible */
▲.insert-quote-image {
background: transparent !important;
▲ flex: 0 0 auto;
border: none !important;
▲ line-height: 0;
margin-toppadding: 0 !important;
margin: 0 !important;
color: #202122;
}
 
▲/* =================================================================
▲.insert-quote-image img {
DEEP RESET: OVERRIDE THE NESTED {{Quote}} TEMPLATE
▲ border-radius: 50%;
This strips the gray bar/box from the {{Quote}} template itself
▲ border: 1px solid #ffffff;
▲ ================================================================= */
▲ width: 50px;
▲.insert-quote-panel.has-image .insert-quote-content > div:first-child.quotebox,
▲ height: 50px;
▲.insert-quote-panel.has-image .insert-quote-content > *:first-childblockquote {
object-fit: cover;
▲ background: transparent !important; /* Force removal ofRemove gray boxbackground */
▲ border: none !important; /* Force removal ofRemove gray barborders/bars */
▲ padding: 0 !important; /* Remove paddinginternal to move leftpadding */
margin: 0 !important; /* Remove external margins */
width: auto !important; /* Let it flow naturally */
float: none !important; /* Prevent floating issues */
▲}
 
/* Force the text inside the {{Quote}} to align top-left */
▲.insert-quote-panel.has-image .insert-quote-content > p:first-child,
▲.insert-quote-panel.has-image .insert-quote-content div {
margin-top: 0 !important;
▲ padding-top: 0 !important;
text-align: left !important;
}
Retrieved from "https://insurerbrain.mediawiki.site/wiki/Template:Insert_quote_panel/styles.css"