MediaWiki:Common.css: Difference between revisions

Revision as of 17:09, 16 August 2025

/* Vector 2022: tighten the space between title/toolbar and subtitle */
@media (min-width: 720px) {
  /* Kill extra padding/border on the titlebar block */
  .skin-vector-2022 .vector-page-titlebar,
  .skin-vector-2022 .vector-page-toolbar-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  /* Ensure our subtitle actually sits right under the title */
  .skin-vector-2022 .mw-page-title-main {
    margin-bottom: 0 !important;
  }
  .skin-vector-2022 #siteSub {
    display: block !important;
    margin: .25rem 0 .85rem !important; /* adjust to taste */
    font-size: 0.9em;
    color: #54595d;
  }

  /* If you used the grid/flex layout earlier, keep the toolbar right-aligned */
  .skin-vector-2022 .vector-page-titlebar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title toolbar" "subtitle toolbar"; align-items: end; column-gap: .75rem; row-gap: .15rem; }
  .skin-vector-2022 .mw-page-title-main { grid-area: title; }
  .skin-vector-2022 #siteSub { grid-area: subtitle; }
  .skin-vector-2022 .vector-page-toolbar { grid-area: toolbar; justify-self: end; }
}

/* Optional: remove top margin on the first paragraph to close any remaining gap */
.mw-parser-output > p:first-of-type { margin-top: 0; }


/* Put title + shortdesc on the left, toolbar on the right (Vector 2022) */
@media (min-width: 720px) {
  /* Turn the titlebar into a 2x2 grid */
  .skin-vector-2022 .vector-page-titlebar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title toolbar"
      "subtitle toolbar";
    align-items: end;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
  }

  /* Title occupies the top-left */
  .skin-vector-2022 .mw-page-title-main {
    grid-area: title;
    margin-bottom: 0; /* avoid extra gap above subtitle */
  }

  /* Short description sits directly under the title */
  .skin-vector-2022 #siteSub {
    grid-area: subtitle;
    display: block !important;
    font-size: 0.9em;
    color: #54595d;
    margin: 0 0 0.8rem 0;
  }

  /* Toolbar hugs the right, spanning both rows */
  .skin-vector-2022 .vector-page-toolbar {
    grid-area: toolbar;
    justify-self: end;
  }
}