Template:Deployment/styles.css: Difference between revisions
Template page
More languages
More actions
Content deleted Content added
Create deployment page styles (via create-page on MediaWiki MCP Server) |
Style expanded deployment dossier and plugin metadata (via update-page on MediaWiki MCP Server) |
||
| (7 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 — sidebar, infra table, plugin cards. |
|||
Complements OHC/styles.css; same theme-aware approach. */ |
|||
.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; } |
|||
/* Deployment plugin grid ------------------------------------------------- */ |
|||
.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; } |
|||
.deployment-plugin-grid { |
|||
.ohc-deploy-sidebar__group { border-top: 1px solid var(--ohc-border); } |
|||
display: grid; |
|||
.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; } |
|||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|||
.ohc-deploy-sidebar__items { padding: 0.25em 0; } |
|||
gap: 12px; |
|||
.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-plugin-grid::after { |
|||
.deployment-infra th, .deployment-infra td { text-align: left; vertical-align: top; padding: 0.6em 0.8em; line-height: 1.6; } |
|||
content: ""; |
|||
.deployment-infra th { font-weight: 700; width: 11em; background: var(--ohc-muted-background); color: var(--ohc-foreground); border-bottom: 1px solid var(--ohc-border); } |
|||
clear: both; |
|||
.deployment-infra td { background: var(--ohc-card); color: var(--ohc-foreground); border-bottom: 1px solid var(--ohc-soft-border); } |
|||
display: table; |
|||
.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-card { |
|||
.deployment-plugin-grid::after { content: ""; clear: both; display: table; } |
|||
border: 1px solid #d0d5dd; |
|||
.deployment-plugin-card { border: 1px solid var(--ohc-border); border-radius: 10px; padding: 14px; background: var(--ohc-card); transition: box-shadow 0.15s; } |
|||
border-radius: 8px; |
|||
.deployment-plugin-card:hover { box-shadow: 0 4px 14px var(--ohc-shadow-color); } |
|||
padding: 14px; |
|||
.deployment-plugin-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } |
|||
background: #fff; |
|||
.deployment-plugin-card__header p, .deployment-plugin-card__description p, .deployment-plugin-card__details p, .deployment-plugin-card__footer p { margin: 0; } |
|||
transition: box-shadow 0.15s; |
|||
.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-plugin-card:hover { |
|||
@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; } } |
|||
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__name { |
|||
font-weight: 600; |
|||
font-size: 1em; |
|||
margin-right: auto; |
|||
color: #0369a1; |
|||
text-decoration: none; |
|||
} |
|||
.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: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; } |
|||
.deployment-plugin-card__badge--fe { background: #fce7f3; color: #be185d; border: 1px solid #fbcfe8; } |
|||
.deployment-plugin-card__badge--both { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; } |
|||
.deployment-plugin-card__badge--active { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; } |
|||
.deployment-plugin-card__badge--stable { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; } |
|||
.deployment-plugin-card__badge--experimental { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; } |
|||
.deployment-plugin-card__badge--deprecated { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } |
|||
.deployment-plugin-card__description { |
|||
color: #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: #64748b; |
|||
align-items: center; |
|||
} |
|||
.deployment-plugin-card__tag { |
|||
background: #f1f5f9; |
|||
padding: 1px 6px; |
|||
border-radius: 3px; |
|||
color: #475569; |
|||
} |
|||
/* Infrastructure table --------------------------------------------------- */ |
|||
.deployment-infra th { |
|||
text-align: left; |
|||
vertical-align: top; |
|||
padding: 0.6em 0.8em; |
|||
font-weight: 700; |
|||
white-space: nowrap; |
|||
width: 10em; |
|||
} |
|||
.deployment-infra td { |
|||
text-align: left; |
|||
vertical-align: top; |
|||
padding: 0.6em 0.8em; |
|||
line-height: 1.6; |
|||
} |
|||
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; } }