MediaWiki:Common.css:修订间差异

来自迷你世界维基
 
清空全部内容
标签清空
 
(未显示同一用户的5个中间版本)
第1行: 第1行:
/* 这里放置的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 */
  }
}

2025年10月2日 (四) 13:52的最新版本