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. The Container: Flexbox Layout */
.insert-quote-panel {
clear: both;
Line 5 ⟶ 7:
box-sizing: border-box;
margin: 0 0 2em 0;
padding: .5em .5em .5em 0;▼
border: 0 solid #9CA4AC;▼
border-radius: 0;▼
background: #F8F9FA;▼
 
/* Flexbox setup for image + text layoutsettings */
display: flex;
flex-direction: row;
align-items: flex-start; /* Aligns image to top of text. Use 'center' if you prefer vertical centering */
gap: 1em; /* SpaceTHIS betweenensures the image and textthe gray box align at the top edge */
align-items: flex-start;
 
/* lock text color so dark mode doesn’t flip it */
gap: 1em; /* Space between the photo and the gray box */
color: #202122;▼
}
 
/* 2. The wrapperContent aroundBox: theThe textgray contentrectangle */
.insert-quote-content {
flex: 1; /* TakesExpands upto allfill remainingavailable width */
min-width: 0; /* CSSPrevents trick to prevent textflex overflow issues in flex containers */
 
/* Visual styles */
▲ background: #F8F9FA;
▲ border: 0 solid #9CA4AC;
▲ border-radius: 0;
/* Internal padding for the text */
▲ padding: .5em; .5em .5em 0;
 
/* Text color */
▲ color: #202122;
}
 
/* 3. The wrapper around the image (ifImage present)Wrapper */
.insert-quote-image {
flex: 0 0 auto; /* PreventsKeeps image fromexplicit shrinking or growingsize */
line-height: 0; /* Prevents extra spacing below image */
margin-top: 0; /* Safety: ensures image isn't pushed down by default styles */
}
 
/* Optional:Link keepcolors linkapplied colorsto the constantcontent toobox */
.insert-quote-panelcontent a,
.insert-quote-panelcontent a:visited { color: #202122; text-decoration: underline; }
Retrieved from "https://insurerbrain.mediawiki.site/wiki/Template:Insert_quote_panel/styles.css"