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 1:
/* Template:Insert quote panel/styles.css */
 
/* --- 1. MAIN CONTAINER (Flexbox Setup) --- */
.insert-quote-panel {
clear: both;
Line 9:
display: flex;
flex-direction: row;
align-items: flex-start; /* Aligns image top with text top */
}
 
/* =========================================
/* --- 2. FORMAT: WITH IMAGE (Simple, Tight Layout) --- */
SCENARIO A: WITH PROFILE IMAGE
(Transparent, No border, Text tight to image)
========================================= */
.insert-quote-panel.has-image {
gap: 0.5em10px; /* BringsVery textclose closerspacing to(approx the image on the left0.6em) */
}
 
.insert-quote-panel.has-image .insert-quote-content {
background: transparent !important; /* SimpleForce removal of gray backgroundbox */
border: none !important; /* REMOVESForce theremoval verticalof gray bar */
padding: 0 !important; /* RemovesRemove padding so text alignsto strictlymove top-left */
color: #202122;
}
 
/* FIX: "Text too low"
/* CRITICAL: Removes default paragraph margin so text starts at the very top */
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. FORMAT: NO IMAGE (Original Gray 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 .5em .5em 0.5em;
color: #202122;
}
 
/* =========================================
/* --- 4. SHARED CONTENT SETTINGS --- */
SHARED STYLES
========================================= */
.insert-quote-content {
flex: 1;
Line 43 ⟶ 56:
}
 
/* Image Styling */
.insert-quote-content a,
.insert-quote-content a:visited { color: #202122; text-decoration: underline; }
 
/* --- 5. IMAGE STYLING (Round + White Crop) --- */
.insert-quote-image {
flex: 0 0 auto;
Retrieved from "https://insurerbrain.mediawiki.site/wiki/Template:Insert_quote_panel/styles.css"