Template:Deployment/styles.css: Difference between revisions

/* OHC Network Wiki -- component styles, careui design system.
   Colour comes exclusively from the --ohc-* token layer in
   MediaWiki:Common.css; do not introduce literals here. Note the
   TemplateStyles sanitizer rejects var() in border-radius, font-family,
   padding and border-color, so those stay literal.
   Reference: [[OHC Network Wiki:Design/careui]] */

.ohc-deploy-sidebar { float: right; clear: right; width: 320px; max-width: 100%; margin: 0 0 1em 1em; background: var(--ohc-card); border: 1px solid var(--ohc-border); border-radius: 14px; font-size: 0.85em; overflow: hidden; }
.ohc-deploy-sidebar__title { background: var(--ohc-primary); color: var(--ohc-primary-foreground); font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center; font-weight: 700; padding: 0.55em 0.6em; font-size: 1.05em; }
.ohc-deploy-sidebar__group { border-top: 1px solid var(--ohc-border); }
.ohc-deploy-sidebar__group-title { background: var(--ohc-muted-background); color: var(--ohc-foreground); padding: 0.35em 0.7em; font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; }
.ohc-deploy-sidebar__items { padding: 0.25em 0; }
.ohc-deploy-sidebar__items p { margin: 0; }
.ohc-deploy-sidebar__items br { display: none; }
.ohc-deploy-sidebar__item { display: block; color: var(--ohc-foreground); padding: 0.2em 0.7em 0.2em 1.2em; line-height: 1.5; }

@media (max-width: 72em) { .ohc-deploy-sidebar { float: none; width: 100%; margin: 1em 0; } }

.deployment-infra { width: 100%; border-collapse: collapse; margin: 0.8em 0; }
.deployment-infra th, .deployment-infra td { text-align: left; vertical-align: top; padding: 0.6em 0.8em; line-height: 1.6; }
.deployment-infra th { font-weight: 700; white-space: nowrap; width: 10em; background: var(--ohc-muted-background); color: var(--ohc-foreground); border-bottom: 1px solid var(--ohc-border); }
.deployment-infra td { background: var(--ohc-card); color: var(--ohc-foreground); border-bottom: 1px solid var(--ohc-soft-border); }

.deployment-infra tr.deployment-row--fe th { background: var(--ohc-status-accent-bg); color: var(--ohc-status-accent); }
.deployment-infra tr.deployment-row--be th { background: var(--ohc-status-info-bg); color: var(--ohc-status-info); }
.deployment-infra tr.deployment-row--db th { background: var(--ohc-status-warning-bg); color: var(--ohc-status-warning); }
.deployment-infra tr.deployment-row--sto th { background: var(--ohc-status-accent-bg); color: var(--ohc-status-accent); }
.deployment-plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 1em 0; }
.deployment-plugin-grid::after { content: ""; clear: both; display: table; }

.deployment-plugin-card { border: 1px solid var(--ohc-border); border-radius: 10px; padding: 14px; background: var(--ohc-card); transition: box-shadow 0.15s; }
.deployment-plugin-card:hover { box-shadow: 0 4px 14px var(--ohc-shadow-color); }

.deployment-plugin-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.deployment-plugin-card__header p, .deployment-plugin-card__description p, .deployment-plugin-card__footer p { margin: 0; }
.deployment-plugin-card__name { font-weight: 600; font-size: 1em; margin-right: auto; color: var(--ohc-primary); text-decoration: none; }
.deployment-plugin-card__name:hover { text-decoration: underline; }

.deployment-plugin-card__badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 0.75em; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.deployment-plugin-card__badge--be { background: var(--ohc-status-info-bg); color: var(--ohc-status-info); border: 1px solid var(--ohc-status-info-border); }
.deployment-plugin-card__badge--fe { background: var(--ohc-status-accent-bg); color: var(--ohc-status-accent); border: 1px solid var(--ohc-status-accent-border); }
.deployment-plugin-card__badge--both { background: var(--ohc-status-neutral-bg); color: var(--ohc-status-neutral); border: 1px solid var(--ohc-status-neutral-border); }
.deployment-plugin-card__badge--active { background: var(--ohc-status-success-bg); color: var(--ohc-status-success); border: 1px solid var(--ohc-status-success-border); }
.deployment-plugin-card__badge--stable { background: var(--ohc-status-info-bg); color: var(--ohc-status-info); border: 1px solid var(--ohc-status-info-border); }
.deployment-plugin-card__badge--experimental { background: var(--ohc-status-warning-bg); color: var(--ohc-status-warning); border: 1px solid var(--ohc-status-warning-border); }
.deployment-plugin-card__badge--deprecated { background: var(--ohc-status-danger-bg); color: var(--ohc-status-danger); border: 1px solid var(--ohc-status-danger-border); }

.deployment-plugin-card__description { color: var(--ohc-soft-foreground); font-size: 0.88em; line-height: 1.5; margin-bottom: 8px; }
.deployment-plugin-card__footer { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8em; color: var(--ohc-soft-foreground); align-items: center; }
.deployment-plugin-card__tag { background: var(--ohc-muted-background); padding: 1px 6px; border-radius: 6px; color: var(--ohc-soft-foreground); }