Template:Deployment/styles.css: Difference between revisions

/* Deployment page styles — sidebar, infra table, plugin cards.
   Complements OHC/styles.css; same theme-aware approach. */

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

.deployment-plugin-card {
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    transition: box-shadow 0.15s;
}

.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 {
    margin: 0;
}

.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__description p {
    margin: 0;
}

.deployment-plugin-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8em;
    color: #64748b;
    align-items: center;
}

.deployment-plugin-card__footer p {
    margin: 0;
}

.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;
}

/* Deployment sidebar (template-generated) -------------------------------- */
/* Suppress <p> margin inside sidebar items — MediaWiki wraps bare lines */
.ohc-sidebar .ohc-sidebar__items p {
    margin: 0;
}

/* Deployment page content after template --------------------------------- */
/* Kill excessive <br> paragraphs from invisible DeploymentPlugin calls */
.deployment-plugin-grid + p:empty,
.deployment-plugin-grid + p + p:empty {
    display: none;
}