Template:Insert quote panel/styles.css: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
display: flex; |
display: flex; |
||
flex-direction: row; |
flex-direction: row; |
||
align-items: flex-start; |
align-items: flex-start; |
||
gap: 1em; |
gap: 1em; |
||
} |
} |
||
| Line 31: | Line 31: | ||
} |
} |
||
/* --- |
/* --- ROUND IMAGE STYLING --- */ |
||
.insert-quote-image img { |
.insert-quote-image img { |
||
/* |
/* Create the circle */ |
||
border-radius: 50%; |
border-radius: 50%; |
||
/* |
/* The "White Crop" border (reduced to 1px, no shadow) */ |
||
border: |
border: 1px solid #ffffff; |
||
| ⚫ | |||
/* Optional: Add a slight shadow to make the white border pop against white backgrounds */ |
|||
width: 50px; |
|||
box-shadow: 0 1px 3px rgba(0,0,0,0.2); |
|||
height: 50px; |
|||
object-fit: cover; |
|||
| ⚫ | |||
width: 50px; /* Must match the size in the Template */ |
|||
height: 50px; /* Must match the width */ |
|||
object-fit: cover; /* Crops the image center; prevents squishing */ |
|||
} |
} |
||
Revision as of 21:21, 16 December 2025
/* Template:Insert quote panel/styles.css */
/* 1. The Container */
.insert-quote-panel {
clear: both;
width: 100%;
box-sizing: border-box;
margin: 0 0 2em 0;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1em;
}
/* 2. The Content Box */
.insert-quote-content {
flex: 1;
min-width: 0;
background: #F8F9FA;
border: 0 solid #9CA4AC;
border-radius: 0;
padding: .5em;
color: #202122;
}
/* 3. The Image Wrapper */
.insert-quote-image {
flex: 0 0 auto;
line-height: 0;
margin-top: 0;
}
/* --- 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; }