MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Filter bar */
.people-filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: 1rem;
}
.people-filter-bar input[type="search"] {
  flex: 1 1 260px; padding: .5rem .6rem; border: 1px solid #aaa; border-radius: .5rem;
}
.people-filter-bar select, .people-filter-bar button {
  padding: .5rem .6rem; border: 1px solid #aaa; border-radius: .5rem; background: #f8f8f8;
}
.people-filter-count { color: #666; margin-left: .5rem; }

/* Grid of cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75em;
}

/* Person card: align with mp-box look & feel */
.person-card {
  border: 1px solid #aaa;
  background-color: #f9f9f9; /* consistent neutral like #mp-topbanner */
  padding: 0.5em;
  margin: 0.25em 0;
  border-radius: 4px;
}

/* Name styled like mp-h2, but as a semantic h2 */
.person-name { margin: 0.5em 0; }
.person-name h2 {
  border: 1px solid #aaa;
  background-color: #eee; /* similar to #mp-bottom .mp-h2 */
  font-size: 120%;
  font-weight: bold;
  font-family: inherit;
  margin: 0;
  padding: 0.2em 0.4em;
}

/* Photo fills width, framed like other mp elements */
.person-photo img {
  width: 100%;
  height: auto;
  border: 1px solid #aaa;
}

/* Bio */
.person-bio {
  margin: 0.5em 0; font-size: 95%; line-height: 1.4; color: #202122;
}

/* Buttons */
.person-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

.btn {
  display: inline-block; padding: 0.35em 0.8em; border-radius: 4px;
  border: 1px solid #aaa; background-color: #f7f7f7; text-decoration: none;
  font-size: 90%; color: #202122;
}
.btn:hover { background-color: #eee; }

.btn-primary {
  border-color: #a3bfb1;     /* mp-left .mp-h2 border tone */
  background-color: #cef2e0; /* mp-left .mp-h2 background */
  color: #000;
}
.btn-primary:hover { background-color: #a3d2b1; }

/* Optional: dark themes can rely on your existing mp-* dark rules */