Toggle search
Toggle menu
2
17
5
293
Landrace.Wiki - The Landrace Cannabis Wiki
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
More actions
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* Panel */
/* ===== Container ===== */
.lw-cons-panel{background:#fff;border:1px solid #e5e7eb;border-left:4px solid #2d5016;
.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);}
  border-radius:14px;padding:20px;box-shadow:0 8px 18px rgba(0,0,0,.05);margin:2em 0;}
.lw-cons-title{font-weight:700;font-size:16px;letter-spacing:.02em;color:#1f2937;margin:4px 0 14px;}
.lw-cons-title{font-weight:800;color:#2d5016;text-transform:uppercase;letter-spacing:.05em;
  font-size:.9rem;margin-bottom:14px;}


/* KPIs */
/* ===== KPIs ===== */
.lw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px;}
.lw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.lw-kpi{background:linear-gradient(180deg,#fbfdff 0%,#f3f6fa 100%);border:1px solid #e5e7eb;
.lw-kpi{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;}
  border-radius:12px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.lw-kpi__num{font-weight:800;line-height:1;font-size:30px;color:#111827;margin-bottom:6px;}
.lw-kpi__num{font-size:2rem;font-weight:800;color:#111827;line-height:1.1;letter-spacing:.01em;}
.lw-kpi__label{font-size:13px;color:#6b7280;}
.lw-kpi__label{margin-top:6px;font-size:.85rem;color:#6b7280;}
.lw-kpi__label a{color:inherit;text-decoration:none;}


/* --- Status bar core (unchanged) --- */
/* responsive type fallback (no clamp) */
.lw-statusbar{
@media (max-width:420px){ .lw-kpi__num{font-size:22px;} }
  display:flex; align-items:stretch;
@media (min-width:421px) and (max-width:1024px){ .lw-kpi__num{font-size:28px;} }
  height:14px; padding:2px; border-radius:999px;
@media (min-width:1025px){ .lw-kpi__num{font-size:34px;} }
  background:#f3f4f6; border:1px solid #e5e7eb; overflow:hidden;
  white-space:nowrap; font-size:0; line-height:0; direction:ltr;
}
.lw-statusbar .lw-seg{
  display:block; height:100%; box-sizing:border-box;
  flex:0 0 auto;          /* don’t grow/shrink */
  min-width:4px;          /* smallest slice always visible */
}
.lw-statusbar .lw-seg + .lw-seg{ border-left:2px solid #fff; }


/* --- USE FLEX-BASIS FOR PERCENT WIDTHS --- */
/* ===== Status bar (single row) ===== */
.lw-w-178  { flex-basis:1.78%; }
.lw-statusbar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:#eef2f7;border:0;margin:8px 0 6px;}
.lw-w-468  { flex-basis:4.68%; }
.lw-seg{height:100%;}
.lw-w-958  { flex-basis:9.58%; }
.lw-s-stable{background:#2e7d32;}
.lw-w-1982 { flex-basis:19.82%; }
.lw-s-vulnerable{background:#f59e0b;}
.lw-w-2829 { flex-basis:28.29%; }
.lw-s-endangered{background:#ef6c00;}
/* nudge last by -0.01% to avoid rounding overflow */
.lw-s-critical{background:#dc2626;}
.lw-w-3585 { flex-basis:35.85%; }
.lw-s-extinct{background:#111827;}
.lw-s-unknown{background:#9ca3af;}


/* colors (unchanged) */
/* ===== Legend (flat) ===== */
.lw-s-stable{background:#2e7d32}
.lw-legend--flat{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:4px 0 12px;color:#4b5563;font-size:13px;}
.lw-s-vulnerable{background:#f59e0b}
.lw-legend__item{white-space:nowrap;}
.lw-s-endangered{background:#f97316}
.lw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.lw-s-critical{background:#dc2626}
.lw-dot.lw-s-stable{background:#2e7d32;}
.lw-s-extinct{background:#111827}
.lw-dot.lw-s-vulnerable{background:#f59e0b;}
.lw-s-unknown{background:#9ca3af}
.lw-dot.lw-s-endangered{background:#ef6c00;}
.lw-dot.lw-s-critical{background:#dc2626;}
.lw-dot.lw-s-extinct{background:#111827;}
.lw-dot.lw-s-unknown{background:#9ca3af;}


/* ===== Actions ===== */
.lw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.lw-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:10px;border:1px solid #d8e4d6;background:#f1f6f0;color:#234d1f;font-size:13px;font-weight:600;}
.lw-btn a,.lw-btn a:visited,.lw-btn a.new{color:inherit;text-decoration:none;}
.lw-btn--primary{background:#2d6a4f;border-color:#2d6a4f;color:#fff;}
.lw-btn--primary:hover{background:#2a6349;border-color:#2a6349;}
.lw-btn:hover{background:#e9f1e8;border-color:#cfe0cc;}


/* --- FLAT LEGEND (force row) --- */
/* ===== Responsive ===== */
.lw-statusbar{ margin-bottom:4px; }
 
/* works for the <div><span>…</span></div> version */
.lw-legend--flat{
  display:block;                /* don’t rely on flex */
  margin-top:6px;
  background:transparent;
  border:0; box-shadow:none;
  color:#6b7280; font-size:.82rem; line-height:1.25;
}
.lw-legend--flat .lw-legend__item{
  display:inline-flex;          /* inline so they sit in a row */
  align-items:center;
  gap:6px;
  margin-right:16px;            /* spacing between items */
  white-space:nowrap;
}
 
/* also flatten the older <ul class="lw-legendlist"><li>…</li></ul> form, if it’s still on the page */
.lw-legendlist{
  list-style:none; margin:6px 0 0; padding:0;
  display:block;                  /* not grid */
  background:transparent; border:0; box-shadow:none;
}
.lw-legendlist > li{
  display:inline-flex;            /* make each LI a chip inline */
  align-items:center; gap:6px;
  margin-right:16px;
}
 
/* dots (unchanged) */
.lw-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; }
.lw-dot.lw-s-stable{background:#2e7d32}
.lw-dot.lw-s-vulnerable{background:#f59e0b}
.lw-dot.lw-s-endangered{background:#f97316}
.lw-dot.lw-s-critical{background:#dc2626}
.lw-dot.lw-s-extinct{background:#111827}
.lw-dot.lw-s-unknown{background:#9ca3af}
 
 
/* Buttons */
.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:#fff;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:focus{outline:none;box-shadow:0 0 0 3px rgba(45,80,22,.25);} /* no :focus-visible */
 
/* Primary */
.lw-btn--primary{background:#2d5016;color:#fff;border-color:#2d5016;}
.lw-btn--primary:hover{background:#3d6b1f;border-color:#3d6b1f;}
 
/* kill redlink/visited styling inside buttons */
.lw-btn > a,
.lw-btn > a:visited,
.lw-btn > a:active,
.lw-btn > a.new{
  color:inherit !important;text-decoration:none !important;background:transparent !important;
  border:0 !important;padding:0 !important;
}
 
/* Responsive */
@media (max-width:720px){
@media (max-width:720px){
   .lw-kpis{grid-template-columns:1fr;}
   .lw-kpis{grid-template-columns:1fr;}
   .lw-kpi__num{font-size:1.75rem;}
   .lw-actions{gap:8px;}
}
}

Revision as of 14:09, 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 (flat) ===== */
.lw-legend--flat{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:4px 0 12px;color:#4b5563;font-size:13px;}
.lw-legend__item{white-space:nowrap;}
.lw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.lw-dot.lw-s-stable{background:#2e7d32;}
.lw-dot.lw-s-vulnerable{background:#f59e0b;}
.lw-dot.lw-s-endangered{background:#ef6c00;}
.lw-dot.lw-s-critical{background:#dc2626;}
.lw-dot.lw-s-extinct{background:#111827;}
.lw-dot.lw-s-unknown{background:#9ca3af;}

/* ===== Actions ===== */
.lw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.lw-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:10px;border:1px solid #d8e4d6;background:#f1f6f0;color:#234d1f;font-size:13px;font-weight:600;}
.lw-btn a,.lw-btn a:visited,.lw-btn a.new{color:inherit;text-decoration:none;}
.lw-btn--primary{background:#2d6a4f;border-color:#2d6a4f;color:#fff;}
.lw-btn--primary:hover{background:#2a6349;border-color:#2a6349;}
.lw-btn:hover{background:#e9f1e8;border-color:#cfe0cc;}

/* ===== Responsive ===== */
@media (max-width:720px){
  .lw-kpis{grid-template-columns:1fr;}
  .lw-actions{gap:8px;}
}
Retrieved from "https://landrace.wiki/index.php?title=Template:Home/ConservationPanel.css&oldid=158"