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: 1rem;
  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-stats {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* Badges: topics, tags, labels, release assets */
.gitlab-badge {
  display: inline-block;
  padding: 0 0.5rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  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);
}

/* 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;
}

/* 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);
}

/* 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;
}