theme.css

/*
 * @ebuildy/docusaurus-plugin-gitlab — optional card theme.
 *
 * Minimal, light/dark-aware styling for the <Gitlab*> components. It uses
 * Infima (Docusaurus) CSS variables, so it tracks your site's active theme
 * automatically. Apply it by adding this file to your preset's
 * `theme.customCss`, or copy it into your own stylesheet and tweak freely.
 */

/* Project overview card */
.gitlab-card {
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 10px;
  padding: 0.5rem;
  margin: 1rem 0;
  background: var(--ifm-background-surface-color);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gitlab-card:hover {
  border-color: var(--ifm-color-primary);
}
.gitlab-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.gitlab-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
.gitlab-title {
  font-weight: 600;
}
.gitlab-title a {
  color: var(--ifm-color-primary);
}
.gitlab-muted {
  color: var(--ifm-color-emphasis-600);
}

.gitlab-description p {
  margin: 0;
}

.gitlab-stats {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  border-top: 1px solid lightgray;
  padding-top: 0.5rem;
  font-size: 0.8rem;
}

/* Badges: topics, tags, labels, release assets */
.gitlab-badge {
  display: inline-block;
  padding: 0 0.4rem;
  margin-right: 0.25rem;
  border-radius: 5px;
  background: var(--ifm-color-emphasis-100);
  color: var(--ifm-color-primary);
  font-size: 0.85em;
}

/* Scoped labels/topics ("scope::value") render as two joined segments:
   the scope keeps its color, the value gets a dark-gray treatment. */
.gitlab-label--scoped,
.gitlab-topic--scoped {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  /* framed in the scope color: set inline for labels, primary for topics */
  border: 1px solid;
}
.gitlab-topic--scoped {
  border-color: var(--ifm-color-primary);
}
.gitlab-label-scope,
.gitlab-label-value {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
}
/* Scoped topics carry no per-label color, so give the scope the badge default. */
.gitlab-topic--scoped .gitlab-label-scope {
  background: var(--ifm-color-emphasis-100);
  color: var(--ifm-color-primary);
}
.gitlab-label-value {
  background: #4c4c4c;
  color: #fff;
}
.gitlab-topic--scoped .gitlab-count-bubble {
  padding: 0 0.4rem;
}

/* Labels — cards layout: a responsive grid of project-style cards. */
.gitlab-label-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
/* Reuse .gitlab-card (border + shadow + hover) but reset link chrome and the
   card's default block margin so it sits flush in the grid. */
.gitlab-label-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  color: inherit;
  text-decoration: none;
}
.gitlab-label-card:hover {
  text-decoration: none;
}
.gitlab-label-card-desc {
  margin: 0;
  font-size: 0.85em;
  color: var(--ifm-color-emphasis-700);
}

/* Users — user profile cards, standalone or in a responsive grid. */
.gitlab-user-cards {
  display: grid;
  /* Fallback; the component's inline style (cardMinWidth/cardColumns) overrides. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.gitlab-user-cards .gitlab-user-card {
  margin: 0;
}
/* Identity (avatar + name + bio) on the left, emoji-prefixed info lines on the
   right. On narrow cards (≤ 300px) the info block wraps below the identity. */
.gitlab-user-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  /* Make the card a query container so the info block tracks the card's own
     width (grid column, sidebar, …), not the viewport's. */
  container-type: inline-size;
}
.gitlab-user-card-header {
  flex: none;
}
.gitlab-user-info {
  margin-left: auto;
  min-width: 0;
}
@container (max-width: 300px) {
  .gitlab-user-info {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.gitlab-user-info > p:first-child {
  margin-top: 0;
}
.gitlab-user-emoji {
  margin-right: 0.25rem;
}
.gitlab-user-card .gitlab-avatar {
  width: 48px;
  height: 48px;
}
.gitlab-user-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gitlab-user-name {
  line-height: 1.2;
}
.gitlab-user-username {
  font-size: 0.85em;
}
.gitlab-user-role {
  align-self: flex-start;
  margin-top: 0.2rem;
  text-transform: capitalize;
}
.gitlab-user-org,
.gitlab-user-location,
.gitlab-user-bio,
.gitlab-user-counts,
.gitlab-user-since {
  margin: 0.35rem 0 0;
  font-size: 0.85em;
}
.gitlab-user-org,
.gitlab-user-location,
.gitlab-user-counts,
.gitlab-user-since {
  color: var(--ifm-color-emphasis-700);
}

.gitlab-description {
  margin-bottom: 0.1rem;
}

/* Issues list */
.gitlab-issues {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.gitlab-issue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.gitlab-issue:last-child {
  border-bottom: 0;
}
.gitlab-issue-title {
  font-weight: 500;
}
.gitlab-issue-state {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: capitalize;
  color: #fff;
  background: var(--ifm-color-emphasis-500);
}
.gitlab-issue-state[data-state="opened"] {
  background: var(--ifm-color-success);
}
.gitlab-issue-state[data-state="closed"] {
  background: var(--ifm-color-danger);
}

/* Releases: a vertical timeline of release cards */
.gitlab-releases {
  position: relative;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* the timeline rail */
.gitlab-releases::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(to bottom, var(--ifm-color-primary), var(--ifm-color-emphasis-300));
}
.gitlab-release {
  position: relative;
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  background: var(--ifm-background-surface-color);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gitlab-release:hover {
  border-color: var(--ifm-color-primary);
  transform: translateX(2px);
}
/* the node sitting on the rail */
.gitlab-release::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -28px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ifm-color-primary);
  border: 2px solid var(--ifm-background-surface-color);
  box-shadow: 0 0 0 2px var(--ifm-color-primary);
}
/* the connector from the rail to the card */
.gitlab-release::after {
  content: "";
  position: absolute;
  top: 24px;
  left: -14px;
  width: 14px;
  height: 2px;
  background: var(--ifm-color-emphasis-300);
}
/* make the latest release pop */
.gitlab-release:first-child::before {
  box-shadow: 0 0 0 2px var(--ifm-color-primary), 0 0 9px 1px var(--ifm-color-primary);
}
.gitlab-release-notes {
  margin-top: 0.5rem;
  color: var(--ifm-color-emphasis-800);
}
.gitlab-release-notes > :first-child {
  margin-top: 0;
}
.gitlab-release-notes > :last-child {
  margin-bottom: 0;
}
.gitlab-release-notes img {
  max-width: 100%;
}
.gitlab-release-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

/* Project path (group/name), shown just below the description */
.gitlab-path {
  margin-top: 0.15rem;
  color: var(--ifm-color-success);
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.85em;
}

/* Embedded sections inside the project card (releases / commits / issues) */
.gitlab-section {
  margin-top: 0.85rem;
}
.gitlab-section-title {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.gitlab-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gitlab-section-item {
  padding: 0.2rem 0;
  font-size: 0.9em;
  line-height: 1.45;
}
.gitlab-section-name {
  font-weight: 500;
}
.gitlab-commit-sha {
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.85em;
  color: var(--ifm-color-primary);
}
/* Release / commit / issue rows pin their "x ago" date to the right edge. */
.gitlab-section-releases .gitlab-section-item,
.gitlab-section-commits .gitlab-section-item,
.gitlab-section-issues .gitlab-section-item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.gitlab-section-date {
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.85em;
}

/* Cards layout: each item becomes a bordered chip-card instead of a plain line */
.gitlab-section-list[data-layout="cards"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}
.gitlab-section-list[data-layout="cards"] .gitlab-section-item {
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  background: var(--ifm-background-surface-color);
}

/* README / markdown file embed */
.gitlab-readme img {
  max-width: 100%;
}

/* Error fallback */
.gitlab-fallback {
  border-left: 4px solid var(--ifm-color-warning);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--ifm-color-warning-contrast-background);
}

/* Code file embed */
.gitlab-code {
  margin: 1rem 0;
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 8px;
  overflow: hidden;
}
.gitlab-code-title {
  padding: 0.4rem 1rem;
  font-family: var(--ifm-font-family-monospace);
  font-size: 0.85em;
  color: var(--ifm-color-emphasis-700);
  background: var(--ifm-color-emphasis-100);
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.gitlab-code-pre {
  margin: 0;
  padding: 1rem;
  overflow: auto;
  font-size: var(--ifm-code-font-size, 90%);
}

/* Slightly stronger shadows so cards stay legible in dark mode */
[data-theme='dark'] .gitlab-card,
[data-theme='dark'] .gitlab-release {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 10px rgb(0 0 0 / 0.25);
}
[data-theme='dark'] .gitlab-section-list[data-layout="cards"] .gitlab-section-item {
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 10px rgb(0 0 0 / 0.25);
}

/* Generated [[_TOC_]] table of contents */
.gitlab-md-toc ul {
  margin: 0;
  padding-left: 1.25rem;
}
.gitlab-md-toc > ul {
  padding-left: 0;
  list-style: none;
}

/* Project grid — a responsive grid of project cards linking to generated pages. */
.gitlab-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.gitlab-project-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  margin: 0;
  border: 1px solid var(--ifm-color-emphasis-200);
  border-radius: 10px;
  background: var(--ifm-background-surface-color);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.04);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gitlab-project-card:hover {
  border-color: var(--ifm-color-primary);
  text-decoration: none;
}
.gitlab-project-card__name {
  font-weight: 600;
  color: var(--ifm-color-primary);
}
.gitlab-project-card__desc {
  font-size: 0.85em;
  color: var(--ifm-color-emphasis-700);
}
.gitlab-project-card__stars {
  font-size: 0.8em;
  color: var(--ifm-color-emphasis-600);
}
.gitlab-project-card__stars::before {
  content: "★ ";
  color: var(--ifm-color-warning);
}

/* Roadmap (Gantt / timeline) */
.gitlab-roadmap { font-size: 0.85rem; }
/* layoutFit: the gantt root is the scroll container, capped at the page width;
   the inner box carries the content min-width. "page" clips overflow (ticks are
   thinned to fit); "content" scrolls sideways to the inner min-width.
   NB: page fit uses `clip`, not `hidden` — `overflow-x: hidden` would coerce
   `overflow-y` to `auto`, making the gantt a scroll container and breaking the
   sticky scale header below; `clip` leaves `overflow-y: visible`. */
.gitlab-roadmap-gantt { max-width: 100%; }
.gitlab-roadmap-fit-page { overflow-x: clip; }
.gitlab-roadmap-fit-content { overflow-x: auto; }
/* The ticks bar sticks to the top (below the Docusaurus navbar) as rows scroll.
   Sticks against the page in page fit; in content fit the scroll container
   scopes it (no page-scroll stickiness there). */
.gitlab-roadmap-scale {
  position: sticky; top: var(--ifm-navbar-height, 0); z-index: 2;
  height: 1.4rem; margin-left: calc(12rem + 0.5rem);
  background: var(--ifm-background-color);
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
}
/* Extend the sticky header's background left over the row-label gutter so
   scrolling rows don't peek above it. */
.gitlab-roadmap-scale::before {
  content: ""; position: absolute; top: 0; bottom: -1px;
  left: calc(-12rem - 0.5rem); width: calc(12rem + 0.5rem);
  background: var(--ifm-background-color);
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
}
.gitlab-roadmap-tick {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  color: var(--ifm-color-emphasis-600);
}
/* Year boundaries: bolder label + a vertical rule dropping to the scale baseline. */
.gitlab-roadmap-tick-major { font-weight: 600; color: var(--ifm-color-emphasis-800); }
.gitlab-roadmap-tick-major::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 0.45rem; background: var(--ifm-color-emphasis-500);
  transform: translateX(-50%);
}
.gitlab-roadmap-group-title { font-weight: 600; margin: 0.6rem 0 0.3rem; }
/* Timeline date grouping: year uses the group title above; quarter is a smaller,
   indented sub-heading. */
.gitlab-roadmap-subgroup { margin-left: 0.5rem; }
.gitlab-roadmap-subgroup-title {
  font-weight: 600; font-size: 0.8rem; color: var(--ifm-color-emphasis-700);
  margin: 0.4rem 0 0.2rem;
}
.gitlab-roadmap-row { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem; align-items: center; margin: 0.25rem 0; }
.gitlab-roadmap-label-col { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gitlab-roadmap-track { position: relative; height: 1.25rem; background: var(--ifm-color-emphasis-100); border-radius: 4px; }
.gitlab-roadmap-bar { position: absolute; top: 2px; height: calc(100% - 4px); border-radius: 4px; overflow: hidden; opacity: 0.85; }
.gitlab-roadmap-progress { height: 100%; background: rgba(0, 0, 0, 0.35); }
.gitlab-roadmap-label {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.3rem;
  border-radius: 3px; font-size: 0.7rem;
}
.gitlab-roadmap-spine { border-left: 2px solid var(--ifm-color-emphasis-300); margin-left: 0.5rem; padding-left: 1rem; }
.gitlab-roadmap-node { position: relative; margin: 0.75rem 0; }
.gitlab-roadmap-dot { position: absolute; left: -1.4rem; top: 0.25rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.gitlab-roadmap-card { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.gitlab-roadmap-dates { color: var(--ifm-color-emphasis-600); font-size: 0.75rem; }
.gitlab-roadmap-meter-track { width: 100%; max-width: 12rem; height: 0.4rem; background: var(--ifm-color-emphasis-200); border-radius: 3px; }
.gitlab-roadmap-meter { height: 100%; border-radius: 3px; }