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 7:
box-sizing: border-box;
margin: 0 0 2em 0;
 
/* Flexbox settings */
display: flex;
flex-direction: row;
align-items: flex-start; /* Aligns top of circle with top of box */
▼
gap: 1em;
/* THIS ensures the image and the gray box align at the top edge */
align-items: flex-start;
gap: 1em; /* Space between the photo and the gray box */
}
 
/* 2. The Content Box: The gray rectangle */
.insert-quote-content {
flex: 1;
flex: 1; /* Expands to fill available width */
min-width: 0; /* Prevents flex overflow issues */
 
/* Visual styles */
background: #F8F9FA;
border: 0 solid #9CA4AC;
border-radius: 0;
padding: .5em; ▼
/* Internal padding for the text */
▲ padding: .5em;
 
/* Text color */
color: #202122;
}
Line 37 ⟶ 26:
/* 3. The Image Wrapper */
.insert-quote-image {
flex: 0 0 auto; /* Keeps image explicit size */
line-height: 0;
margin-top: 0;
margin-top: 0; /* Safety: ensures image isn't pushed down by default styles */
}
 
/* --- NEW: MAKE IMAGE ROUND WITH WHITE CROP --- */
.insert-quote-image img {
/* 1. Create the circle */
border-radius: 50%;
 
/* 2. The "White Crop" border */
border: 3px solid #ffffff;
▲
/* Optional: Add a slight shadow to make the white border pop against white backgrounds */
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 
/* 3. Ensure it is a perfect circle, even if the source photo is rectangular */
width: 50px; /* Must match the size in the Template */
height: 50px; /* Must match the width */
object-fit: cover; /* Crops the image center; prevents squishing */
}
 
/* Link colors applied to the content box */
.insert-quote-content a,
.insert-quote-content a:visited { color: #202122; text-decoration: underline; }
Retrieved from "https://insurerbrain.mediawiki.site/wiki/Template:Insert_quote_panel/styles.css"