Template:Home/ConservationPanel.css: Difference between revisions

Latest revision as of 17:36, 19 November 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; }

/* ===== Conservation panel: Actions ===== */

.lw-cons-panel .lw-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem .5rem;

  margin: .6rem 0 0;

}

/* Pill buttons aligned with site palette */

.lw-cons-panel .lw-actions .btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: .55rem .95rem;

  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);

  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;

}

/* Focus ring (TemplateStyles-safe) */

.lw-cons-panel .lw-actions .btn:focus {

  outline: 2px solid #a7d1b0; /* soft green ring */

  outline-offset: 2px;

}

/* Primary: deep green from your theme */

.lw-cons-panel .lw-actions .btn--primary {

  background: #2d5016;

  color: #fff;

}

.lw-cons-panel .lw-actions .btn--primary:hover { background: #3d6b1f; }

.lw-cons-panel .lw-actions .btn--primary:active { transform: translateY(1px); }

/* Ghost: white with hairline border */

.lw-cons-panel .lw-actions .btn--ghost {

  background: #ffffff;

  border-color: #e5e7eb;

  color: #1f2937;

}

.lw-cons-panel .lw-actions .btn--ghost:hover {

  border-color: #cfd6de;

  background: #f8fafc;

}

/* Muted: subtle gray */

.lw-cons-panel .lw-actions .btn--muted {

  background: #f3f4f6;

  color: #374151;

  border-color: #e5e7eb;

}

.lw-cons-panel .lw-actions .btn--muted:hover { background: #eceff2; }


/* Remove MediaWiki redlink styling *inside* this block only */

.lw-cons-panel .lw-actions a.new { color: inherit; border-color: #e5e7eb; }


/* Mobile touch targets */

@media (max-width: 768px) {

  .lw-cons-panel .lw-actions .btn { padding: .6rem .8rem; }

}


/* ===== Responsive ===== */

@media (max-width:720px){

  .lw-kpis{grid-template-columns:1fr;}

  .lw-actions{gap:8px;}

}