Template:Home/ConservationPanel.css: Difference between revisions

Latest revision as of 08:30, 24 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; }

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