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 4:
.insert-quote-panel {
clear: both;
width: 100%; /* Ensures the main wrapper takes full page width */
box-sizing: border-box;
margin: 0 0 2em 0;
display: flex;
flex-direction: row;
align-items: flex-start;
}
 
Line 26:
}
 
/* --- 3. SCENARIO:CONTENT NO IMAGEWRAPPER (Gray BoxShared) --- */
.insert-quote-content {
flex: 1; /* Grow to fill remaining space */
min-width: 0; /* CSS fix for flex containers */
width: 100%; /* Ensures content tries to be full width */
}
 
/* --- 4. SCENARIO: NO IMAGE (Gray Box) --- */
.insert-quote-panel.no-image .insert-quote-content {
background: #F8F9FA;
Line 34 ⟶ 41:
}
 
/* --- 45. SCENARIO: WITH IMAGE (TheClean, FixTransparent) --- */
.insert-quote-panel.has-image {
gap: 15px; /* Comfortable space between face and text */
}
 
.insert-quote-panel.has-image .insert-quote-content {
/* Ensure OUR wrapper is invisible */
background: transparent !important;
border: none !important;
Line 49 ⟶ 55:
 
/* =================================================================
DEEP RESET: OVERRIDE& THEFIXES NESTEDFOR {{Quote}} TEMPLATE
This strips the gray bar/box from the {{Quote}} template itself
================================================================= */
 
/* 1. Force the text inside theinner {{Quote}} box to alignbe Full top-leftWidth */▼
.insert-quote-content .quotebox,
.insert-quote-content blockquote {
width: auto100% !important; /* LetFixes the it"limited flowwidth" naturallyissue */▼
textmax-alignwidth: left100% !important;▼
float: none !important; /* Prevents it from sticking to one side */
box-sizing: border-box;
}
 
/* 2. Remove gray styling specifically for the "Has Image" version */
.insert-quote-panel.has-image .insert-quote-content .quotebox,
.insert-quote-panel.has-image .insert-quote-content blockquote {
background: transparent !important; /* Remove gray background */
border: none !important; /* Remove gray borders/bars */
padding: 0 !important; /* Remove internal padding */
margin: 0 !important; /* Remove external margins */
▲ width: auto !important; /* Let it flow naturally */
float: none !important; /* Prevent floating issues */
}
 
/* 3. Text Alignment & Positioning for "Has Image" */
▲/* Force the text inside the {{Quote}} to align top-left */
.insert-quote-panel.has-image .insert-quote-content p,
.insert-quote-panel.has-image .insert-quote-content div {
text-align: left !important;
}
 
/* 4. Fix Top Margin (Text too low) */
.insert-quote-panel.has-image .insert-quote-content > .quotebox > *:first-child,
.insert-quote-panel.has-image .insert-quote-content > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
▲ text-align: left !important;
 
/* 5. RESTORE AUTHOR SPACING (The fix for your second point) */
/* We target the <small> or <cite> tag usually found in {{Quote}} */
.insert-quote-panel.has-image .insert-quote-content small,
.insert-quote-panel.has-image .insert-quote-content cite,
.insert-quote-panel.has-image .insert-quote-content .cite {
display: block;
margin-top: 1em !important; /* Adds space between text and author */
font-style: normal; /* Optional: standardizes author text */
}
Retrieved from "https://insurerbrain.mediawiki.site/wiki/Template:Insert_quote_panel/styles.css"