Template:Deployment/styles.css: Difference between revisions
Template page
More languages
More actions
Content deleted Content added
Rewrite deployment CSS to use Citizen theme variables — fully theme-aware for light, dark, and pureblack modes (via update-page on MediaWiki MCP Server) |
Style expanded deployment dossier and plugin metadata (via update-page on MediaWiki MCP Server) |
||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* CARE deployment dossier. Colours use the careui token layer in MediaWiki:Common.css. */ |
|||
/* Deployment page styles — fully theme-aware via Citizen CSS variables. |
|||
No hardcoded hex for surfaces, text, or borders. Brand = #059669. |
|||
border-radius and gap use fixed px (templatestyles sanitizer limitation). */ |
|||
.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; } |
|||
/* ── Sidebar ───────────────────────────────────────────────────────────── */ |
|||
.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-sidebar { |
|||
.ohc-deploy-sidebar__group { border-top: 1px solid var(--ohc-border); } |
|||
background: var(--color-surface-1, #ffffff); |
|||
.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; } |
|||
border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); |
|||
.ohc-deploy-sidebar__items { padding: 0.25em 0; } |
|||
} |
|||
.ohc-deploy-sidebar__items p { margin: 0; } |
|||
.ohc-sidebar__title { |
|||
.ohc-deploy-sidebar__items br { display: none; } |
|||
background: #059669; |
|||
.ohc-deploy-sidebar__item { display: block; color: var(--ohc-foreground); padding: 0.2em 0.7em 0.2em 1.2em; line-height: 1.5; } |
|||
color: #fff; |
|||
.ohc-deploy-sidebar__title a, .ohc-deploy-sidebar__title a:visited, .ohc-deploy-sidebar__title a.external { color: var(--ohc-primary-foreground); } |
|||
} |
|||
.ohc-sidebar__group-title { |
|||
background: var(--color-surface-2, #f8f9fa); |
|||
color: var(--color-emphasized, #202122); |
|||
} |
|||
.ohc-sidebar__item { |
|||
color: var(--color-base, #202122); |
|||
} |
|||
.ohc-sidebar__items p { |
|||
margin: 0; |
|||
} |
|||
.deployment-infra { width: 100%; border-collapse: collapse; margin: 0.8em 0 1.5em; } |
|||
/* ── Infrastructure table ──────────────────────────────────────────────── */ |
|||
.deployment-infra th, .deployment-infra td { text-align: left; vertical-align: top; padding: 0.6em 0.8em; line-height: 1.6; } |
|||
.deployment-infra { |
|||
.deployment-infra th { font-weight: 700; width: 11em; background: var(--ohc-muted-background); color: var(--ohc-foreground); border-bottom: 1px solid var(--ohc-border); } |
|||
width: 100%; |
|||
.deployment-infra td { background: var(--ohc-card); color: var(--ohc-foreground); border-bottom: 1px solid var(--ohc-soft-border); } |
|||
border-collapse: collapse; |
|||
.deployment-infra tr.deployment-row--fe th { background: var(--ohc-status-accent-bg); color: var(--ohc-status-accent); } |
|||
margin: 0.8em 0; |
|||
.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 1.5em; } |
|||
.deployment-infra th, |
|||
.deployment-plugin-grid::after { content: ""; clear: both; display: table; } |
|||
.deployment-infra td { |
|||
.deployment-plugin-card { border: 1px solid var(--ohc-border); border-radius: 10px; padding: 14px; background: var(--ohc-card); transition: box-shadow 0.15s; } |
|||
text-align: left; |
|||
.deployment-plugin-card:hover { box-shadow: 0 4px 14px var(--ohc-shadow-color); } |
|||
vertical-align: top; |
|||
.deployment-plugin-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } |
|||
padding: 0.6em 0.8em; |
|||
.deployment-plugin-card__header p, .deployment-plugin-card__description p, .deployment-plugin-card__details p, .deployment-plugin-card__footer p { margin: 0; } |
|||
line-height: 1.6; |
|||
.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__details { color: var(--ohc-foreground); font-size: 0.82em; line-height: 1.55; padding-top: 8px; margin-bottom: 8px; border-top: 1px solid var(--ohc-soft-border); overflow-wrap: anywhere; } |
|||
.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); } |
|||
@media (max-width: 72em) { .ohc-deploy-sidebar { float: none; width: 100%; margin: 1em 0; } } |
|||
.deployment-infra th { |
|||
@media (max-width: 40em) { .deployment-infra, .deployment-infra tbody, .deployment-infra tr, .deployment-infra th, .deployment-infra td { display: block; width: auto; } .deployment-infra th { border-bottom: 0; } .deployment-plugin-grid { grid-template-columns: 1fr; } } |
|||
font-weight: 700; |
|||
white-space: nowrap; |
|||
width: 10em; |
|||
background: var(--color-surface-2, #f8f9fa); |
|||
color: var(--color-emphasized, #202122); |
|||
border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); |
|||
} |
|||
.deployment-infra td { |
|||
background: var(--color-surface-1, #ffffff); |
|||
color: var(--color-base, #202122); |
|||
border-bottom: 1px solid var(--border-color-subtle, rgba(0,0,0,0.05)); |
|||
} |
|||
/* Row colour variants — semantic tints on the header cell */ |
|||
.deployment-infra tr.deployment-row--fe th { background: rgba(5,150,105,0.10); color: #166534; } |
|||
.deployment-infra tr.deployment-row--be th { background: rgba(37,99,235,0.10); color: #1e40af; } |
|||
.deployment-infra tr.deployment-row--db th { background: rgba(234,179,8,0.10); color: #854d0e; } |
|||
.deployment-infra tr.deployment-row--sto th { background: rgba(168,85,247,0.10); color: #7e22ce; } |
|||
@media (prefers-color-scheme: dark) { |
|||
.deployment-infra tr.deployment-row--fe th { background: rgba(5,150,105,0.20); color: #6ee7b7; } |
|||
.deployment-infra tr.deployment-row--be th { background: rgba(37,99,235,0.20); color: #93c5fd; } |
|||
.deployment-infra tr.deployment-row--db th { background: rgba(234,179,8,0.20); color: #fde047; } |
|||
.deployment-infra tr.deployment-row--sto th { background: rgba(168,85,247,0.20); color: #c4b5fd; } |
|||
} |
|||
/* ── Plugin grid ───────────────────────────────────────────────────────── */ |
|||
.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; |
|||
} |
|||
/* ── Plugin card ───────────────────────────────────────────────────────── */ |
|||
.deployment-plugin-card { |
|||
border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); |
|||
border-radius: 8px; |
|||
padding: 14px; |
|||
background: var(--color-surface-1, #ffffff); |
|||
} |
|||
.deployment-plugin-card:hover { |
|||
box-shadow: 0 2px 8px rgba(0,0,0,0.08); |
|||
} |
|||
.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(--color-progressive, #0369a1); |
|||
text-decoration: none; |
|||
} |
|||
.deployment-plugin-card__name:hover { |
|||
text-decoration: underline; |
|||
} |
|||
/* Type badges — semantic colours */ |
|||
.deployment-plugin-card__badge { |
|||
display: inline-block; |
|||
padding: 1px 7px; |
|||
border-radius: 4px; |
|||
font-size: 0.75em; |
|||
font-weight: 500; |
|||
line-height: 1.6; |
|||
white-space: nowrap; |
|||
} |
|||
.deployment-plugin-card__badge--be { |
|||
background: rgba(3,105,161,0.1); |
|||
color: #0369a1; |
|||
border: 1px solid rgba(3,105,161,0.2); |
|||
} |
|||
.deployment-plugin-card__badge--fe { |
|||
background: rgba(190,24,93,0.1); |
|||
color: #be185d; |
|||
border: 1px solid rgba(190,24,93,0.2); |
|||
} |
|||
.deployment-plugin-card__badge--both { |
|||
background: rgba(4,120,87,0.1); |
|||
color: #047857; |
|||
border: 1px solid rgba(4,120,87,0.2); |
|||
} |
|||
.deployment-plugin-card__badge--active { |
|||
background: rgba(22,163,74,0.1); |
|||
color: #15803d; |
|||
border: 1px solid rgba(22,163,74,0.2); |
|||
} |
|||
.deployment-plugin-card__badge--stable { |
|||
background: rgba(29,78,216,0.1); |
|||
color: #1d4ed8; |
|||
border: 1px solid rgba(29,78,216,0.2); |
|||
} |
|||
.deployment-plugin-card__badge--experimental { |
|||
background: rgba(194,65,12,0.1); |
|||
color: #c2410c; |
|||
border: 1px solid rgba(194,65,12,0.2); |
|||
} |
|||
.deployment-plugin-card__badge--deprecated { |
|||
background: rgba(185,28,28,0.1); |
|||
color: #b91c1c; |
|||
border: 1px solid rgba(185,28,28,0.2); |
|||
} |
|||
@media (prefers-color-scheme: dark) { |
|||
.deployment-plugin-card__badge--be { color: #7dd3fc; } |
|||
.deployment-plugin-card__badge--fe { color: #f9a8d4; } |
|||
.deployment-plugin-card__badge--both { color: #6ee7b7; } |
|||
.deployment-plugin-card__badge--active { color: #86efac; } |
|||
.deployment-plugin-card__badge--stable { color: #93c5fd; } |
|||
.deployment-plugin-card__badge--experimental { color: #fdba74; } |
|||
.deployment-plugin-card__badge--deprecated { color: #fca5a5; } |
|||
} |
|||
.deployment-plugin-card__description { |
|||
color: var(--color-subtle, #54595d); |
|||
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(--color-subtle, #64748b); |
|||
align-items: center; |
|||
} |
|||
.deployment-plugin-card__tag { |
|||
background: var(--color-surface-2, #f1f5f9); |
|||
padding: 1px 6px; |
|||
border-radius: 3px; |
|||
color: var(--color-base, #475569); |
|||
} |
|||
/* ── Catalog grid (umbrella page) ──────────────────────────────────────── */ |
|||
.deployment-catalog-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); |
|||
gap: 12px; |
|||
margin: 1em 0; |
|||
} |
|||
.deployment-catalog-card { |
|||
border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); |
|||
border-radius: 8px; |
|||
padding: 16px; |
|||
background: var(--color-surface-1, #ffffff); |
|||
border-top: 3px solid #059669; |
|||
} |
|||
.deployment-catalog-card:hover { |
|||
box-shadow: 0 2px 8px rgba(0,0,0,0.08); |
|||
} |
|||
.deployment-catalog-card__header { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
gap: 6px; |
|||
margin-bottom: 6px; |
|||
} |
|||
.deployment-catalog-card__header p { margin: 0; } |
|||
.deployment-catalog-card__name { |
|||
font-weight: 600; |
|||
font-size: 1em; |
|||
margin-right: auto; |
|||
color: var(--color-progressive, #0369a1); |
|||
text-decoration: none; |
|||
} |
|||
.deployment-catalog-card__badge { |
|||
display: inline-block; |
|||
padding: 1px 7px; |
|||
border-radius: 4px; |
|||
font-size: 0.72em; |
|||
font-weight: 500; |
|||
line-height: 1.6; |
|||
white-space: nowrap; |
|||
text-transform: capitalize; |
|||
} |
|||
.deployment-catalog-card__badge--production { background: rgba(22,163,74,0.1); color: #15803d; border: 1px solid rgba(22,163,74,0.2); } |
|||
.deployment-catalog-card__badge--staging { background: rgba(133,77,14,0.1); color: #854d0e; border: 1px solid rgba(133,77,14,0.2); } |
|||
.deployment-catalog-card__badge--development { background: rgba(29,78,216,0.1); color: #1d4ed8; border: 1px solid rgba(29,78,216,0.2); } |
|||
.deployment-catalog-card__badge--preview { background: rgba(147,51,234,0.1); color: #9333ea; border: 1px solid rgba(147,51,234,0.2); } |
|||
.deployment-catalog-card__badge--demo { background: rgba(194,65,12,0.1); color: #c2410c; border: 1px solid rgba(194,65,12,0.2); } |
|||
.deployment-catalog-card__badge--active { background: rgba(22,163,74,0.1); color: #15803d; border: 1px solid rgba(22,163,74,0.2); } |
|||
.deployment-catalog-card__badge--inactive { background: rgba(185,28,28,0.1); color: #b91c1c; border: 1px solid rgba(185,28,28,0.2); } |
|||
.deployment-catalog-card__badge--archived { background: var(--color-surface-2, #f1f5f9); color: var(--color-subtle, #64748b); border: 1px solid var(--border-color-base); } |
|||
.deployment-catalog-card__description { |
|||
color: var(--color-subtle, #475569); |
|||
font-size: 0.88em; |
|||
line-height: 1.5; |
|||
margin-bottom: 8px; |
|||
} |
|||
.deployment-catalog-card__footer { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
font-size: 0.8em; |
|||
color: var(--color-subtle, #64748b); |
|||
align-items: center; |
|||
} |
|||
.deployment-catalog-card__tag { |
|||
background: var(--color-surface-2, #f1f5f9); |
|||
padding: 1px 6px; |
|||
border-radius: 3px; |
|||
color: var(--color-base, #475569); |
|||
} |
|||
.deployment-catalog-card__deployed { |
|||
margin-left: auto; |
|||
font-style: italic; |
|||
color: var(--color-subtle, #94a3b8); |
|||
font-size: 0.9em; |
|||
} |
|||
Latest revision as of 22:29, 25 August 2026
/* CARE deployment dossier. Colours use the careui token layer in MediaWiki:Common.css. */
.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; }
.ohc-deploy-sidebar__title a, .ohc-deploy-sidebar__title a:visited, .ohc-deploy-sidebar__title a.external { color: var(--ohc-primary-foreground); }
.deployment-infra { width: 100%; border-collapse: collapse; margin: 0.8em 0 1.5em; }
.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; width: 11em; 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 1.5em; }
.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__details 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__details { color: var(--ohc-foreground); font-size: 0.82em; line-height: 1.55; padding-top: 8px; margin-bottom: 8px; border-top: 1px solid var(--ohc-soft-border); overflow-wrap: anywhere; }
.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); }
@media (max-width: 72em) { .ohc-deploy-sidebar { float: none; width: 100%; margin: 1em 0; } }
@media (max-width: 40em) { .deployment-infra, .deployment-infra tbody, .deployment-infra tr, .deployment-infra th, .deployment-infra td { display: block; width: auto; } .deployment-infra th { border-bottom: 0; } .deployment-plugin-grid { grid-template-columns: 1fr; } }