MediaWiki:Common.css: Difference between revisions

/* Hides the default MediaWiki login link in the top personal tools bar */
#pt-login {
    display: none !important;
}


/* ==========================================
   EARTHMC HOMEPAGE — STABLE PANEL ALIGNMENT
   ========================================== */

.emc-home {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: #1f2937;
  font-family: system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.emc-home *,
.emc-home *::before,
.emc-home *::after {
  box-sizing: border-box;
}

/* Two equal-height panels per row */

.emc-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 3fr);
  align-items: stretch;
  gap: 20px;
  width: 100%;
  margin: 14px 0;
}

/* Keep each panel aligned and allow content to wrap */

.emc-panel {
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 18px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(31, 41, 55, .06);
}

/* Preserve the original wider-right-column proportions */

.emc-welcome,
.emc-editing {
  grid-column: 1;
}

.emc-info,
.emc-categories {
  grid-column: 2;
}

/* The welcome panel retains its own gradient */

.emc-panel.emc-welcome {
  background: linear-gradient(
    160deg,
    #ffffff 0%,
    #eef3fb 55%,
    #d9e6f7 100%
  );
  border-color: #dbe4f2;
  text-align: center;
}

/* Prevent headings and content from expanding the grid */

.emc-panel img {
  max-width: 100%;
}

.emc-panel p {
  overflow-wrap: anywhere;
}

/* Cards remain evenly aligned */

.emc-card-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.emc-card {
  flex: 0 1 180px;
  min-width: 0;
  min-height: 150px;
  margin: 0;
}

/* Keep all server panels within the right-hand column */

.emc-server-panel {
  width: 100%;
  min-width: 0;
}

.emc-server-panel[hidden] {
  display: none !important;
}

/* Stack the two columns on narrow screens */

@media (max-width: 760px) {
  .emc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .emc-welcome,
  .emc-editing,
  .emc-info,
  .emc-categories {
    grid-column: 1;
  }

  .emc-panel {
    height: auto;
  }

  .emc-card {
    flex-basis: 160px;
  }
}

@media (max-width: 420px) {
  .emc-panel {
    padding: 14px 10px;
  }

  .emc-card {
    flex-basis: calc(50% - 6px);
  }
}