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

Content deleted Content added
No edit summary
No edit summary
Line 1:
/* Template:Insert quote panel/styles.css */
 
/* --- 1. MAIN CONTAINER (Flexbox Setup) --- */
/* 1. The Container */
.insert-quote-panel {
clear: both;
Line 9:
display: flex;
flex-direction: row;
align-items: flex-start; /* Aligns image top with text top */
gap: 1em;
}
 
/* --- 2. FORMAT: WITH IMAGE (Clean, White, Close spacing) --- */
/* 2. The Content Box */
.insert-quote-contentpanel.has-image {
gap: 0.8em; /* Distance between photo and text */
flex: 1;
}
min-width: 0;
 
.insert-quote-panel.has-image .insert-quote-content a,{
background: #ffffff; /* White background */
border: none; /* No borders */
padding: 0.2em 0 0 0; /* Slight top pad to align text baseline with eyes */
color: #202122;
}
 
/* --- 3. FORMAT: NO IMAGE (Original Gray Box) --- */
/* This restores your original look exactly when no image is present */
.insert-quote-panel.no-image .insert-quote-content {
background: #F8F9FA;
border: 0 solid #9CA4AC;
padding: .5em .5em .5em 0.5em; /* Original padding */
border-radius: 0;
padding: .5em;
color: #202122;
}
 
/* 3--- 4. TheSHARED CONTENT ImageSETTINGS Wrapper--- */
.insert-quote-content {
gapflex: 1em1;
min-width: 0;
}
 
.insert-quote-content a,
.insert-quote-content a:visited { color: #202122; text-decoration: underline; }
 
/* --- ROUND5. IMAGE STYLING (Round + White Crop) --- */
.insert-quote-image {
flex: 0 0 auto;
Line 31 ⟶ 49:
}
 
/* --- ROUND IMAGE STYLING --- */
.insert-quote-image img {
/* Create the circle */
border-radius: 50%;
 
/* The "White Crop" border (reduced to 1px, no shadow) */
border: 1px solid #ffffff;
/* Ensure it is a perfect circle */
width: 50px;
height: 50px;
object-fit: cover;
}
 
/* Link colors */
.insert-quote-content a,
.insert-quote-content a:visited { color: #202122; text-decoration: underline; }