Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Home/ConservationPanel.css: Difference between revisions

Template page
No edit summary
No edit summary
Line 1: Line 1:
/* Landrace.wiki — Conservation Panel (TemplateStyles-safe) */
/* Landrace.wiki — Conservation Overview (TemplateStyles-safe) */


.lw-cons-panel{
.lw-cons-panel{
   background:#ffffff;
   background:#ffffff;border:1px solid #e5e7eb;border-left:4px solid #2d5016;
  border:1px solid #e5e7eb;
   border-radius:14px;padding:20px;box-shadow:0 8px 18px rgba(0,0,0,.05);margin:2em 0;
  border-left:4px solid #2d5016;
   border-radius:12px;
  padding:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
  margin:2em 0;
}
}
.lw-cons-title{
.lw-cons-title{
   font-weight:700;color:#2d5016;text-transform:uppercase;
   font-weight:800;color:#2d5016;text-transform:uppercase;letter-spacing:.05em;
  letter-spacing:.04em;font-size:.9rem;margin-bottom:.5rem;
  font-size:.9rem;margin-bottom:12px;
}
}


/* Top metrics */
/* KPIs */
.lw-cons-metrics{
.lw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
.lw-kpi{
   gap:12px;margin:8px 0 6px;
  background:linear-gradient(180deg,#f7fafc 0%,#eef2f7 100%);
   border:1px solid #e4e7eb;border-radius:12px;padding:18px 16px;text-align:center
}
}
.lw-metric{
.lw-kpi__num{font-size:2rem;font-weight:800;color:#111827;line-height:1.1;letter-spacing:.01em}
   background:#f8f9fa;border:1px solid #e5e7eb;border-radius:10px;
.lw-kpi__label{margin-top:6px;font-size:.85rem;color:#6b7280}
  padding:14px 12px;text-align:center;
 
/* Status bar */
.lw-statusbar{
   display:flex;gap:2px;height:14px;background:#f3f4f6;border:1px solid #e5e7eb;
  border-radius:10px;padding:2px;margin:6px 0 10px;overflow:hidden
}
}
.lw-metric .num{display:block;font-size:1.75rem;font-weight:800;color:#1f2937;line-height:1.1;}
.lw-seg{height:100%;border-radius:8px}
.lw-metric .label{display:block;margin-top:4px;font-size:.85rem;color:#6b7280}
.lw-s-stable{background:#2e7d32}
.lw-s-vulnerable{background:#f59e0b}
.lw-s-endangered{background:#f97316}
.lw-s-critical{background:#dc2626}
.lw-s-extinct{background:#111827}
.lw-s-unknown{background:#9ca3af}


/* Status breakdown (renamed to avoid collisions) */
/* Legend */
.lw-breakdown{
.lw-legend{
   display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  list-style:none;margin:10px 0 0;padding:0;
  gap:4px 16px;margin-top:10px;
   display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 16px
}
}
.lw-row{
.lw-legend li{display:flex;align-items:center;gap:8px;color:#111827;font-size:.95rem}
  display:flex;align-items:center;min-height:32px;font-size:.95rem;color:#1f2937;
.lw-legend .dot{width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
  background:transparent;border:0;padding:0;border-radius:0; /* kill any upstream pill styles */
.lw-legend b{font-weight:700;margin-left:6px}
}
.lw-legend .lw-s-stable{color:#2e7d32}
.lw-row .lw-dot{width:10px;height:10px;border-radius:50%;background:currentColor;
.lw-legend .lw-s-vulnerable{color:#f59e0b}
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);margin-right:8px;}
.lw-legend .lw-s-endangered{color:#f97316}
.lw-row .lw-label{font-weight:600;background:none;padding:0;margin:0;border:0;}
.lw-legend .lw-s-critical{color:#dc2626}
.lw-row .lw-line{flex:1;border-bottom:1px dashed #e5e7eb;margin:0 8px;height:0;}
.lw-legend .lw-s-extinct{color:#111827}
.lw-row .lw-count{font-variant-numeric:tabular-nums;background:none;padding:0;margin:0;border:0;}
.lw-legend .lw-s-unknown{color:#9ca3af}


.lw-stable{color:#2e7d32}
/* Actions */
.lw-vulnerable{color:#f59e0b}
.lw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lw-endangered{color:#f97316}
.lw-critical{color:#dc2626}
.lw-extinct{color:#111827}
.lw-unknown{color:#9ca3af}
 
/* Actions — style the inner anchors so redlinks don't scream */
.lw-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lw-btn{
.lw-btn{
   display:inline-flex;align-items:center;gap:6px;
   display:inline-flex;align-items:center;padding:9px 14px;border-radius:10px;
  padding:8px 12px;border-radius:8px;
   border:1px solid #e5e7eb;background:#ffffff;color:#2d5016;font-weight:700;
   border:1px solid #e5e7eb;background:#ffffff;
  text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s
  color:#2d5016;font-weight:600;transition:background .15s,border-color .15s,transform .15s;
}
}
.lw-btn:hover{background:#f8f9fa;border-color:#d1d5db;transform:translateY(-1px)}
.lw-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.06);background:#f8fafb;border-color:#d1d5db}
.lw-btn--primary{background:#2d5016;color:#ffffff;border-color:#2d5016}
.lw-btn--primary{background:#2d5016;color:#ffffff;border-color:#2d5016}
.lw-btn--primary:hover{background:#3d6b1f;border-color:#3d6b1f}
.lw-btn--primary:hover{background:#3d6b1f;border-color:#3d6b1f}


/* Make the link inside look like the button; neutralize redlink styles */
/* make wiki links look like buttons (kill redlink/pill defaults) */
.lw-btn > a,
.lw-btn > a,
.lw-btn > a:visited,
.lw-btn > a:visited,
.lw-btn > a.new{
.lw-btn > a.new{color:inherit !important;text-decoration:none !important;background:transparent !important;border:0 !important;padding:0 !important}
  color:inherit !important;
 
  text-decoration:none !important;
/* Mobile */
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
@media (max-width:768px){
@media (max-width:768px){
   .lw-cons-metrics{grid-template-columns:1fr;gap:10px}
   .lw-kpis{grid-template-columns:1fr}
   .lw-breakdown{grid-template-columns:1fr}
   .lw-legend{grid-template-columns:1fr 1fr}
}
}

Revision as of 13:08, 23 August 2025

/* Landrace.wiki — Conservation Overview (TemplateStyles-safe) */

.lw-cons-panel{
  background:#ffffff;border:1px solid #e5e7eb;border-left:4px solid #2d5016;
  border-radius:14px;padding:20px;box-shadow:0 8px 18px rgba(0,0,0,.05);margin:2em 0;
}
.lw-cons-title{
  font-weight:800;color:#2d5016;text-transform:uppercase;letter-spacing:.05em;
  font-size:.9rem;margin-bottom:12px;
}

/* KPIs */
.lw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.lw-kpi{
  background:linear-gradient(180deg,#f7fafc 0%,#eef2f7 100%);
  border:1px solid #e4e7eb;border-radius:12px;padding:18px 16px;text-align:center
}
.lw-kpi__num{font-size:2rem;font-weight:800;color:#111827;line-height:1.1;letter-spacing:.01em}
.lw-kpi__label{margin-top:6px;font-size:.85rem;color:#6b7280}

/* Status bar */
.lw-statusbar{
  display:flex;gap:2px;height:14px;background:#f3f4f6;border:1px solid #e5e7eb;
  border-radius:10px;padding:2px;margin:6px 0 10px;overflow:hidden
}
.lw-seg{height:100%;border-radius:8px}
.lw-s-stable{background:#2e7d32}
.lw-s-vulnerable{background:#f59e0b}
.lw-s-endangered{background:#f97316}
.lw-s-critical{background:#dc2626}
.lw-s-extinct{background:#111827}
.lw-s-unknown{background:#9ca3af}

/* Legend */
.lw-legend{
  list-style:none;margin:10px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 16px
}
.lw-legend li{display:flex;align-items:center;gap:8px;color:#111827;font-size:.95rem}
.lw-legend .dot{width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.lw-legend b{font-weight:700;margin-left:6px}
.lw-legend .lw-s-stable{color:#2e7d32}
.lw-legend .lw-s-vulnerable{color:#f59e0b}
.lw-legend .lw-s-endangered{color:#f97316}
.lw-legend .lw-s-critical{color:#dc2626}
.lw-legend .lw-s-extinct{color:#111827}
.lw-legend .lw-s-unknown{color:#9ca3af}

/* Actions */
.lw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lw-btn{
  display:inline-flex;align-items:center;padding:9px 14px;border-radius:10px;
  border:1px solid #e5e7eb;background:#ffffff;color:#2d5016;font-weight:700;
  text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s
}
.lw-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.06);background:#f8fafb;border-color:#d1d5db}
.lw-btn--primary{background:#2d5016;color:#ffffff;border-color:#2d5016}
.lw-btn--primary:hover{background:#3d6b1f;border-color:#3d6b1f}

/* make wiki links look like buttons (kill redlink/pill defaults) */
.lw-btn > a,
.lw-btn > a:visited,
.lw-btn > a.new{color:inherit !important;text-decoration:none !important;background:transparent !important;border:0 !important;padding:0 !important}

/* Mobile */
@media (max-width:768px){
  .lw-kpis{grid-template-columns:1fr}
  .lw-legend{grid-template-columns:1fr 1fr}
}