MediaWiki:Common.css: Difference between revisions

Revision as of 09:39, 13 September 2025

/* CSS placed here will be applied to all skins */

body {
    background-color: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url(/public_html/public/assets/images/egr.png);
    color: white;
    background-position: fixed;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a, #footer a {
 color: #ff9507 !important;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover, #footer a:hover {
color: #ffb527 !important;
}

#mw-panel .vector-menu-heading {
color: white;
}

.mw-footer li {
color: white;
}


.cn-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  color: #141414;
  font-size: 16px;
  line-height: 1.5;
}
.cn-light { background: #fff; }
.cn-muted { color: #666; }
.cn-border { border: 1px solid #e3e3e3; }
.cn-soft { background: #fafafa; }
.cn-h1 {
  text-align: center;
  padding: 1rem 0 0.25rem 0;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
}
.cn-strap {
  text-align: center;
  color: #555;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  margin-bottom: 0.75rem;
  display: block;
}
.cn-rule { border-bottom: 2px solid #d9d9d9; margin-bottom: 1rem; }

/* ====== Blocks ====== */
.cn-banner {
  display: grid;
  place-items: center;
  min-height: 140px;
  margin-bottom: 1rem;
  color: #9a9a9a;
}
.cn-card {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  padding: 1rem;
}
.cn-card.soft { background: #fff; }
.cn-note {
  border-left: 4px solid #99b3e6;
  padding-left: 0.75rem;
  margin-top: 0.5rem;
  color: #666;
}

/* ====== Section headings ====== */
.cn-h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  margin: 1.5rem 0 0.75rem 0;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #d9d9d9;
}

/* ====== Responsive grids ====== */
.cn-grid {
  display: grid;
  gap: 1rem;
}

/* Portal grid: 4 → 2 → 1 columns */
.cn-portals {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .cn-portals { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cn-portals { grid-template-columns: 1fr; }
}

/* Featured cards: 3 → 1 */
.cn-featured {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) {
  .cn-featured { grid-template-columns: 1fr; }
}

/* ====== Portal cards ====== */
.cn-portal {
  text-align: center;
  padding: 1rem;
  border-radius: 12px;
  transition: box-shadow .15s ease, transform .12s ease;
}
.cn-portal:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.cn-portal-title {
  font-weight: 700;
  font-size: 1.1rem;
}
.cn-portal-desc {
  color: #555;
  margin-top: 0.4rem;
  font-size: 0.95rem;
}

/* ====== Map box ====== */
.cn-map {
  display: grid;
  place-items: center;
  height: 220px;
  color: #9a9a9a;
  background: #fafafa;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
}

/* ====== Footer ====== */
.cn-footer {
  margin-top: 1.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e3e3e3;
  text-align: center;
  color: #555;
  font-size: 0.95rem;
}
.cn-footer a { color: #0b63c3; text-decoration: none; }
.cn-footer a:hover { text-decoration: underline; }

/* ====== Utility (keeps images responsive if you add them) ====== */
.cn-img { max-width: 100%; height: auto; border-radius: 8px; }

.cn-portal-hero {
aspect-ratio: 16:9;
}