MediaWiki:Common.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* 这里放置的CSS将应用于所有皮肤 */
/* =================================================================== */
/* Modern Infobox Styles (Added on YYYY-MM-DD)                         */
/* Description: A modern, clean, and responsive style for infoboxes.   */
/* =================================================================== */

/* --- 1. Main Container: The Card Itself --- */
.modern-infobox {
  float: right;
  width: 300px;
  margin: 0.5em 0 1em 1.5em; /* Spacing around the box */
  background-color: #f8f9fa; /* A very light grey, almost white */
  border: 1px solid #dee2e6; /* Soft border color */
  border-radius: 8px; /* Rounded corners for a softer look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for a "lifting" effect */
  border-collapse: separate; /* Important for making border-radius work on tables */
  border-spacing: 0;
  font-size: 90%;
  line-height: 1.6;
  overflow: hidden; /* Ensures all content stays within the rounded corners */
}

/* --- 2. Header: The Title Bar --- */
.modern-infobox .modern-infobox-header {
  background-color: #495057; /* A modern, dark grey */
  color: #ffffff;
  font-size: 1.25em; /* Makes the title slightly larger */
  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; /* A clean white background for the image */
}

.modern-infobox .modern-infobox-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px; /* Slightly rounded corners for the image */
  display: block;
}

/* --- 4. Image Caption --- */
.modern-infobox .modern-infobox-caption {
  margin-top: 0.75em;
  font-size: 0.95em;
  color: #6c757d; /* A muted grey for less important text */
  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; /* Clean separator line */
  vertical-align: top; /* Aligns content to the top if it wraps */
}

/* --- 6. Label Column (e.g., "Born", "Occupation") --- */
.modern-infobox .modern-infobox-label {
  width: 35%;
  font-weight: 600; /* Semi-bold for clarity */
  color: #495057; /* Dark grey for labels */
  white-space: nowrap; /* Prevents labels from wrapping to two lines */
}

/* --- 7. Data Column (The actual info) --- */
.modern-infobox .modern-infobox-data {
  width: 65%;
  color: #212529; /* Standard text color */
}

/* Style for links within the infobox */
.modern-infobox .modern-infobox-data a {
  color: #0056b3; /* A standard, readable link color */
}
.modern-infobox .modern-infobox-data a:visited {
  color: #4a1a7a;
}

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

/* --- 9. Responsive Design for Mobile Phones --- */
@media (max-width: 720px) {
  .modern-infobox {
    float: none; /* Disables floating on mobile */
    width: 100%; /* Makes the box full-width */
    margin: 1.5em 0; /* Adjusts margin for vertical flow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Reduces shadow on mobile */
  }
}