MediaWiki:Common.css：修订间差异

2025年10月2日 (四) 13:41的版本

/* =================================================================== */
/* Modern Infobox Styles (Final Version with Anti-Stretch Fix)         */
/* =================================================================== */

/* --- 1. Main Container: The Card Itself --- */
.modern-infobox {
  /* Layout & Sizing */
  display: table !important; /* Force display type to prevent conflicts */
  float: right;
  width: 300px;
  margin: 0.5em 0 1em 1.5em;

  /* === CRITICAL FIXES FOR MOBILE STRETCHING === */
  height: auto !important; /* Force height to wrap content */
  min-height: 0 !important; /* Override any minimum height rules */
  align-self: start !important; /* MOST IMPORTANT: Prevents stretching in a flexbox container */
  
  /* Visual Styles */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 90%;
  line-height: 1.6;
  overflow: hidden;
}

/* --- 2. Header: The Title Bar --- */
.modern-infobox .modern-infobox-header {
  background-color: #495057;
  color: #ffffff;
  font-size: 1.25em;
  font-weight: 600;
  padding: 0.8em 1em;
  text-align: center;
}

/* --- 3. Image Area --- */
.modern-infobox .modern-infobox-image {
  padding: 1em;
  text-align: center;
  background-color: #ffffff;
}

.modern-infobox .modern-infobox-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

/* --- 4. Image Caption --- */
.modern-infobox .modern-infobox-caption {
  margin-top: 0.75em;
  font-size: 0.95em;
  color: #6c757d;
  line-height: 1.4;
}

/* --- 5. Data Rows: Labels and Information --- */
.modern-infobox .modern-infobox-label,
.modern-infobox .modern-infobox-data {
  padding: 0.7em 1em;
  border-top: 1px solid #dee2e6;
  vertical-align: top;
}

/* --- 6. Label Column --- */
.modern-infobox .modern-infobox-label {
  width: 35%;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
}

/* --- 7. Data Column --- */
.modern-infobox .modern-infobox-data {
  width: 65%;
  color: #212529;
}

/* --- 8. Links within the infobox --- */
.modern-infobox .modern-infobox-data a {
  color: #0056b3;
}
.modern-infobox .modern-infobox-data a:visited {
  color: #4a1a7a;
}

/* --- 9. Footer/Warning Message --- */
.modern-infobox .modern-infobox-footer {
  background-color: #fff3cd;
  color: #856404;
  text-align: center;
  padding: 0.7em;
  font-size: 0.9em;
  border-top: 1px solid #dee2e6;
}

/* --- 10. Responsive Design for Mobile --- */
@media (max-width: 720px) {
  .modern-infobox {
    float: none;
    width: 100%;
    margin: 1.5em 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
}