Template:Home/ConservationPanel.css: Difference between revisions

Revision as of 14:18, 23 August 2025

/* ===== Container ===== */
.lw-cons-panel{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:20px;box-shadow:0 1px 2px rgba(16, 24, 40, 0.04);}
.lw-cons-title{font-weight:700;font-size:16px;letter-spacing:.02em;color:#1f2937;margin:4px 0 14px;}

/* ===== KPIs ===== */
.lw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.lw-kpi{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;}
.lw-kpi__num{font-weight:800;line-height:1;font-size:30px;color:#111827;margin-bottom:6px;}
.lw-kpi__label{font-size:13px;color:#6b7280;}
.lw-kpi__label a{color:inherit;text-decoration:none;}

/* responsive type fallback (no clamp) */
@media (max-width:420px){ .lw-kpi__num{font-size:22px;} }
@media (min-width:421px) and (max-width:1024px){ .lw-kpi__num{font-size:28px;} }
@media (min-width:1025px){ .lw-kpi__num{font-size:34px;} }

/* ===== Status bar (single row) ===== */
.lw-statusbar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:#eef2f7;border:0;margin:8px 0 6px;}
.lw-seg{height:100%;}
.lw-s-stable{background:#2e7d32;}
.lw-s-vulnerable{background:#f59e0b;}
.lw-s-endangered{background:#ef6c00;}
.lw-s-critical{background:#dc2626;}
.lw-s-extinct{background:#111827;}
.lw-s-unknown{background:#9ca3af;}

/* LEGEND */
.lw-legend {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  margin: .75rem 0 1rem;
  padding: 0; list-style: none;
  font-size: .875rem; line-height: 1.25rem;
}
.lw-legend__item {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #f8fafc; /* subtle chip bg */
  color: #334155;
}
.lw-legend .dot {
  width: .6em; height: .6em; border-radius: 50%;
  display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.lw-legend .lbl { font-weight: 500; }
.lw-legend .count {
  margin-left: .15rem; opacity: .8;
  font-feature-settings: "tnum" 1; /* tabular nums */
}

/* Status colors – tune to your palette if needed */
.dot--stable { background:#2e7d32; }
.dot--vuln   { background:#e69500; }
.dot--end    { background:#ef6c00; }
.dot--crit   { background:#d32f2f; }
.dot--ext    { background:#6b7280; }
.dot--unk    { background:#94a3b8; }

/* ACTION BUTTONS */
.lw-actions {
  display: flex; flex-wrap: wrap; gap: .5rem .5rem;
  margin: .5rem 0 0;
}
.lw-actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .9rem; border-radius: 999px;
  font-weight: 600; font-size: .875rem; line-height: 1.25rem;
  text-decoration: none; border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.lw-actions .btn:focus { outline: 2px solid #94d3a2; outline-offset: 2px; }

/* Variants */
.lw-actions .btn--primary { background:#2f7d57; color:#fff; }
.lw-actions .btn--primary:hover { filter: brightness(1.05); }

.lw-actions .btn--ghost {
  background:#fff; border-color:#e5e7eb; color:#1f2937;
}
.lw-actions .btn--ghost:hover { border-color:#cdd5df; background:#f8fafc; }

.lw-actions .btn--muted {
  background:#f3f4f6; color:#374151; border-color:#e5e7eb;
}
.lw-actions .btn--muted:hover { background:#eceef1; }

/* Kill MediaWiki redlink look **within** this actions block */
.lw-actions a.new { color: inherit; border-color:#e5e7eb; }

/* Mobile niceties */
@media (max-width: 720px) {
  .lw-legend__item, .lw-actions .btn { padding: .45rem .7rem; }
}


/* ===== Responsive ===== */
@media (max-width:720px){
  .lw-kpis{grid-template-columns:1fr;}
  .lw-actions{gap:8px;}
}