Template:Deployment/styles.css: Difference between revisions
Template page
More languages
More actions
Content deleted Content added
Rewrite deployment metadata sidebar CSS: rename .ohc-sidebar → .ohc-deploy-sidebar to avoid collision with guide navigation sidebar; add clear:right, border-radius, max-width, overflow:hidden; fix br suppression in items (via update-page on MediaWiki MCP Server) |
Rebrand deployment styling to OHC teal, rounder cards (via update-page on MediaWiki MCP Server) |
||
| Line 1: | Line 1: | ||
/* Deployment page styles — |
/* Deployment page styles — theme-aware via Citizen vars. Brand teal #0f8b6c, ink #173d34. */ |
||
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(--color-surface-1, #ffffff); border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); border-radius: 14px; font-size: 0.85em; overflow: hidden; } |
|||
/* ── Deployment metadata sidebar ────────────────────────────────────────── */ |
|||
.ohc-deploy-sidebar__title { background: #173d34; color: #fff; font-family: 'Figtree', 'Switzer', sans-serif; text-align: center; font-weight: 700; padding: 0.55em 0.6em; font-size: 1.05em; } |
|||
.ohc-deploy-sidebar { |
|||
.ohc-deploy-sidebar__group { border-top: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); } |
|||
float: right; |
|||
.ohc-deploy-sidebar__group-title { background: var(--color-surface-2, #f8f9fa); color: var(--color-emphasized, #202122); padding: 0.35em 0.7em; font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; } |
|||
clear: right; |
|||
.ohc-deploy-sidebar__items { padding: 0.25em 0; } |
|||
width: 320px; |
|||
.ohc-deploy-sidebar__items p { margin: 0; } |
|||
max-width: 100%; |
|||
.ohc-deploy-sidebar__items br { display: none; } |
|||
margin: 0 0 1em 1em; |
|||
.ohc-deploy-sidebar__item { display: block; color: var(--color-base, #202122); padding: 0.2em 0.7em 0.2em 1.2em; line-height: 1.5; } |
|||
background: var(--color-surface-1, #ffffff); |
|||
border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); |
|||
border-radius: 10px; |
|||
font-size: 0.85em; |
|||
overflow: hidden; |
|||
} |
|||
.ohc-deploy-sidebar__title { |
|||
background: #059669; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
padding: 0.5em 0.6em; |
|||
font-size: 1.05em; |
|||
} |
|||
.ohc-deploy-sidebar__group { |
|||
border-top: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); |
|||
} |
|||
.ohc-deploy-sidebar__group-title { |
|||
background: var(--color-surface-2, #f8f9fa); |
|||
color: var(--color-emphasized, #202122); |
|||
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(--color-base, #202122); |
|||
padding: 0.2em 0.7em 0.2em 1.2em; |
|||
line-height: 1.5; |
|||
} |
|||
@media (max-width: 72em) { |
@media (max-width: 72em) { .ohc-deploy-sidebar { float: none; width: 100%; margin: 1em 0; } } |
||
.ohc-deploy-sidebar { |
|||
float: none; |
|||
width: 100%; |
|||
margin: 1em 0; |
|||
} |
|||
} |
|||
.deployment-infra { width: 100%; border-collapse: collapse; margin: 0.8em 0; } |
|||
/* ── 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; 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)); } |
|||
width: 100%; |
|||
.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)); } |
|||
border-collapse: collapse; |
|||
margin: 0.8em 0; |
|||
} |
|||
.deployment-infra th, |
.deployment-infra tr.deployment-row--fe th { background: rgba(15,139,108,0.12); color: #0b6b53; } |
||
.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(--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--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--db th { background: rgba(234,179,8,0.10); color: #854d0e; } |
||
| Line 97: | Line 23: | ||
@media (prefers-color-scheme: dark) { |
@media (prefers-color-scheme: dark) { |
||
.deployment-infra tr.deployment-row--fe th { background: rgba( |
.deployment-infra tr.deployment-row--fe th { background: rgba(15,139,108,0.22); color: #86efac; } |
||
.deployment-infra tr.deployment-row--be th { background: rgba(37,99,235,0.20); color: #93c5fd; } |
.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--db th { background: rgba(234,179,8,0.20); color: #fde047; } |
||
| Line 103: | Line 29: | ||
} |
} |
||
.deployment-plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 1em 0; } |
|||
/* ── Plugin grid ───────────────────────────────────────────────────────── */ |
|||
.deployment-plugin-grid { |
.deployment-plugin-grid::after { content: ""; clear: both; display: table; } |
||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|||
gap: 12px; |
|||
margin: 1em 0; |
|||
} |
|||
.deployment-plugin-card { border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); border-radius: 12px; padding: 14px; background: var(--color-surface-1, #ffffff); transition: box-shadow 0.15s; } |
|||
.deployment-plugin-grid::after { |
|||
.deployment-plugin-card:hover { box-shadow: 0 4px 14px rgba(15,139,108,0.14); } |
|||
content: ""; |
|||
clear: both; |
|||
display: table; |
|||
} |
|||
.deployment-plugin-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } |
|||
/* ── Plugin card ───────────────────────────────────────────────────────── */ |
|||
.deployment-plugin-card__header p, .deployment-plugin-card__description p, .deployment-plugin-card__footer p { margin: 0; } |
|||
.deployment-plugin-card { |
|||
.deployment-plugin-card__name { font-weight: 600; font-size: 1em; margin-right: auto; color: var(--color-progressive, #0f8b6c); text-decoration: none; } |
|||
border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); |
|||
.deployment-plugin-card__name:hover { text-decoration: underline; } |
|||
border-radius: 8px; |
|||
padding: 14px; |
|||
background: var(--color-surface-1, #ffffff); |
|||
} |
|||
.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:hover { |
|||
.deployment-plugin-card__badge--be { background: rgba(3,105,161,0.1); color: #0369a1; border: 1px solid rgba(3,105,161,0.2); } |
|||
box-shadow: 0 2px 8px rgba(0,0,0,0.08); |
|||
.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(15,139,108,0.1); color: #0f8b6c; border: 1px solid rgba(15,139,108,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__header { |
|||
.deployment-plugin-card__badge--stable { background: rgba(29,78,216,0.1); color: #1d4ed8; border: 1px solid rgba(29,78,216,0.2); } |
|||
display: flex; |
|||
.deployment-plugin-card__badge--experimental { background: rgba(194,65,12,0.1); color: #c2410c; border: 1px solid rgba(194,65,12,0.2); } |
|||
flex-wrap: wrap; |
|||
.deployment-plugin-card__badge--deprecated { background: rgba(185,28,28,0.1); color: #b91c1c; border: 1px solid rgba(185,28,28,0.2); } |
|||
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) { |
@media (prefers-color-scheme: dark) { |
||
.deployment-plugin-card__badge--be |
.deployment-plugin-card__badge--be { color: #7dd3fc; } |
||
.deployment-plugin-card__badge--fe |
.deployment-plugin-card__badge--fe { color: #f9a8d4; } |
||
.deployment-plugin-card__badge--both |
.deployment-plugin-card__badge--both { color: #6ee7b7; } |
||
.deployment-plugin-card__badge--active |
.deployment-plugin-card__badge--active { color: #86efac; } |
||
.deployment-plugin-card__badge--stable |
.deployment-plugin-card__badge--stable { color: #93c5fd; } |
||
.deployment-plugin-card__badge--experimental { color: #fdba74; } |
.deployment-plugin-card__badge--experimental { color: #fdba74; } |
||
.deployment-plugin-card__badge--deprecated |
.deployment-plugin-card__badge--deprecated { color: #fca5a5; } |
||
} |
} |
||
.deployment-plugin-card__description { |
.deployment-plugin-card__description { color: var(--color-subtle, #54595d); font-size: 0.88em; line-height: 1.5; margin-bottom: 8px; } |
||
color: var(--color-subtle, # |
.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: 5px; color: var(--color-base, #475569); } |
|||
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); |
|||
} |
|||
Revision as of 14:20, 11 August 2026
/* Deployment page styles — theme-aware via Citizen vars. Brand teal #0f8b6c, ink #173d34. */
.ohc-deploy-sidebar { float: right; clear: right; width: 320px; max-width: 100%; margin: 0 0 1em 1em; background: var(--color-surface-1, #ffffff); border: 1px solid var(--border-color-base, rgba(0,0,0,0.1)); border-radius: 14px; font-size: 0.85em; overflow: hidden; }
.ohc-deploy-sidebar__title { background: #173d34; color: #fff; font-family: 'Figtree', 'Switzer', 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(--border-color-base, rgba(0,0,0,0.1)); }
.ohc-deploy-sidebar__group-title { background: var(--color-surface-2, #f8f9fa); color: var(--color-emphasized, #202122); 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(--color-base, #202122); 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(--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)); }
.deployment-infra tr.deployment-row--fe th { background: rgba(15,139,108,0.12); color: #0b6b53; }
.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(15,139,108,0.22); color: #86efac; }
.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; }
}
.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(--border-color-base, rgba(0,0,0,0.1)); border-radius: 12px; padding: 14px; background: var(--color-surface-1, #ffffff); transition: box-shadow 0.15s; }
.deployment-plugin-card:hover { box-shadow: 0 4px 14px rgba(15,139,108,0.14); }
.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, #0f8b6c); 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: 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(15,139,108,0.1); color: #0f8b6c; border: 1px solid rgba(15,139,108,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: 5px; color: var(--color-base, #475569); }