Template:Insert quote panel/styles.css

/* Template:Insert quote panel/styles.css */

/* --- 1. MAIN 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; 
}

/* =========================================
   SCENARIO A: WITH PROFILE IMAGE
   (Transparent, No border, Text tight to image)
   ========================================= */
.insert-quote-panel.has-image {
  gap: 10px; /* Very close spacing (approx 0.6em) */
}

.insert-quote-panel.has-image .insert-quote-content {
  background: transparent !important; /* Force removal of gray box */
  border: none !important;            /* Force removal of gray bar */
  padding: 0 !important;              /* Remove padding to move left */
  color: #202122;
}

/* FIX: "Text too low" 
   MediaWiki adds <p> tags with top-margins automatically. 
   This forces the first paragraph to jump up to the top line. */
.insert-quote-panel.has-image .insert-quote-content > p:first-child,
.insert-quote-panel.has-image .insert-quote-content > div:first-child,
.insert-quote-panel.has-image .insert-quote-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================
   SCENARIO B: NO IMAGE (DEFAULT)
   (Gray background box)
   ========================================= */
.insert-quote-panel.no-image .insert-quote-content {
  background: #F8F9FA;
  border: 0 solid #9CA4AC; /* Or border-left: 4px... depending on your pref */
  padding: .5em;
  color: #202122;
}

/* =========================================
   SHARED STYLES
   ========================================= */
.insert-quote-content {
  flex: 1;
  min-width: 0;
}

/* Image Styling */
.insert-quote-image {
  flex: 0 0 auto;
  line-height: 0;
  margin-top: 0;
}

.insert-quote-image img {
  border-radius: 50%;
  border: 1px solid #ffffff;
  width: 50px;
  height: 50px;
  object-fit: cover;
}