Toggle search
Toggle menu
17
24
14
1.7K
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
Tag: Reverted
Line 1: Line 1:
/* ===== Container ===== */
/* Conservation Panel - Mobile-Optimized TemplateStyles */


.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;}
/* Panel shell */


.lw-kpi{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;}
.mw-parser-output .lw-cons-panel {


.lw-kpi__num{font-weight:800;line-height:1;font-size:30px;color:#111827;margin-bottom:6px;}
  background:#fff; border:1px solid #e6ebea; border-radius:14px;


.lw-kpi__label{font-size:13px;color:#6b7280;}
  padding:18px 18px 16px; margin:24px 0; box-shadow:0 1px 2px rgba(0,0,0,.03);


.lw-kpi__label a{color:inherit;text-decoration:none;}
  color:#26421a;


}


/* responsive type fallback (no clamp) */
.mw-parser-output .lw-cons-title{


@media (max-width:420px){ .lw-kpi__num{font-size:22px;} }
  font-family:Georgia,"Times New Roman",serif; font-size:1.6rem; line-height:1.2; margin:4px 2px 14px;


@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%;}
/* KPIs - responsive 3-column to 1-column */


.lw-s-stable{background:#2e7d32;}
.mw-parser-output .lw-kpis{


.lw-s-vulnerable{background:#f59e0b;}
  display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 10px;


.lw-s-endangered{background:#ef6c00;}
}


.lw-s-critical{background:#dc2626;}
.mw-parser-output .lw-kpi{


.lw-s-extinct{background:#111827;}
  flex:1 1 180px; background:#f8fbf7; border:1px solid #e6ebea;  


.lw-s-unknown{background:#9ca3af;}
  border-radius:10px; padding:12px 14px; min-width:0;


/* LEGEND */
}


.lw-legend {
.mw-parser-output .lw-kpi__num{


   display: flex; flex-wrap: wrap; gap: .5rem .75rem;
   font-size:1.6rem; font-weight:700; line-height:1;


  margin: .75rem 0 1rem;
}


  padding: 0; list-style: none;
.mw-parser-output .lw-kpi__label{


   font-size: .875rem; line-height: 1.25rem;
   font-size:.9rem; color:#44613a; margin-top:6px;
 
  word-wrap:break-word; hyphens:auto;


}
}


.lw-legend__item {


  display: inline-flex; align-items: center; gap: .4rem;


  padding: .25rem .6rem;


  border-radius: 999px;


  background: #f8fafc; /* subtle chip bg */
/* Status bar - maintains proportions, readable labels */
 
.mw-parser-output .lw-statusbar{
 
  display:flex; height:28px; border-radius:999px; overflow:hidden;


   color: #334155;
   border:1px solid #e6ebea; background:#f4f7f4; margin:8px 0;


}
}


.lw-legend .dot {
.mw-parser-output .lw-statusbar .seg{


   width: .6em; height: .6em; border-radius: 50%;
   display:flex; align-items:center; justify-content:center;


   display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
   font-size:.85rem; font-weight:600; color:#17320f;  
 
  border-right:1px solid rgba(0,0,0,.06); min-width:24px;


}
}


.lw-legend .lbl { font-weight: 500; }
.mw-parser-output .lw-statusbar .seg:last-child{border-right:none}
 
.mw-parser-output .seg--stable{background:#e9f7ee}
 
.mw-parser-output .seg--vulnerable{background:#fff6df}
 
.mw-parser-output .seg--endangered{background:#ffeade}
 
.mw-parser-output .seg--critical{background:#ffe3e3}
 
 
 
 
 
/* Legend - responsive wrapping with better touch targets */


.lw-legend .count {
.mw-parser-output .lw-legend{


   margin-left: .15rem; opacity: .8;
   display:flex; flex-wrap:wrap; gap:14px 18px; list-style:none;  


   font-feature-settings: "tnum" 1; /* tabular nums */
   padding:10px 4px 4px; margin:0;


}
}


/* Status colors – tune to your palette if needed */
.mw-parser-output .lw-legend li{


.dot--stable { background:#2e7d32; }
  display:flex; align-items:center; gap:8px; font-size:.92rem;  


.dot--vuln   { background:#e69500; }
   color:#35522b; min-height:28px; /* Better touch target */


.dot--end    { background:#ef6c00; }
}


.dot--crit  { background:#d32f2f; }
.mw-parser-output .dot{


.dot--ext    { background:#6b7280; }
  width:10px; height:10px; border-radius:50%; display:inline-block;  


.dot--unk    { background:#94a3b8; }
  border:1px solid rgba(0,0,0,.1); flex-shrink:0;


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


.lw-cons-panel .lw-actions {
.mw-parser-output .dot--stable{background:#2ecc71}


  display: flex;
.mw-parser-output .dot--vulnerable{background:#f1c40f}


  flex-wrap: wrap;
.mw-parser-output .dot--endangered{background:#f39c12}


  gap: .5rem .5rem;
.mw-parser-output .dot--critical{background:#e74c3c}


  margin: .6rem 0 0;


}


/* Pill buttons aligned with site palette */


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


   display: inline-flex;
/* Mobile breakpoints */
 
@media (max-width: 480px) {
 
   .mw-parser-output .lw-cons-panel {
 
    padding:16px 14px; margin:16px 0; border-radius:12px;
 
  }
 
 


   align-items: center;
   .mw-parser-output .lw-cons-title{


  justify-content: center;
    font-size:1.4rem; margin:2px 0 12px;


   padding: .55rem .95rem;
   }


   border-radius: 999px;
    


   font-weight: 600;
   /* Stack KPIs on very small screens */


   font-size: .875rem;
   .mw-parser-output .lw-kpis{


  line-height: 1.25rem;
    gap:8px; margin:2px 0 12px;


   text-decoration: none;
   }


   border: 1px solid transparent;
   .mw-parser-output .lw-kpi{


  box-shadow: 0 1px 0 rgba(0,0,0,.04);
    flex:1 1 100%; padding:10px 12px;


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


}
  .mw-parser-output .lw-kpi__num{font-size:1.4rem}


/* Focus ring (TemplateStyles-safe) */
  .mw-parser-output .lw-kpi__label{font-size:.85rem; margin-top:4px}


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


   outline: 2px solid #a7d1b0; /* soft green ring */
   /* Adjust status bar for small screens */


   outline-offset: 2px;
   .mw-parser-output .lw-statusbar{


}
    height:24px; margin:6px 0;


/* Primary: deep green from your theme */
  }


.lw-cons-panel .lw-actions .btn--primary {
  .mw-parser-output .lw-statusbar .seg{


  background: #2d5016;
    font-size:.8rem; min-width:20px;


   color: #fff;
   }


}
 


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


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


/* Ghost: white with hairline border */
    gap:10px 14px; padding:8px 2px 2px;


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


   background: #ffffff;
   .mw-parser-output .lw-legend li{


  border-color: #e5e7eb;
    font-size:.88rem; gap:6px;


   color: #1f2937;
   }


}
}


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


  border-color: #cfd6de;


  background: #f8fafc;


}


/* Muted: subtle gray */
@media (max-width: 360px) {
 
  .mw-parser-output .lw-cons-panel {
 
    padding:14px 12px; margin:12px 0;


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


   background: #f3f4f6;
    


   color: #374151;
   /* Force single column for KPIs */


   border-color: #e5e7eb;
   .mw-parser-output .lw-kpi{


}
    flex-basis:100%; margin-bottom:0;


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


 


/* Remove MediaWiki redlink styling *inside* this block only */
  /* Hide numbers in status bar if too cramped, keep colors visible */


.lw-cons-panel .lw-actions a.new { color: inherit; border-color: #e5e7eb; }
  .mw-parser-output .lw-statusbar .seg{


    font-size:0; /* Hide text but keep color bars */


/* Mobile touch targets */
  }


@media (max-width: 768px) {
 


   .lw-cons-panel .lw-actions .btn { padding: .6rem .8rem; }
   /* Compact legend */


}
  .mw-parser-output .lw-legend{


    gap:8px 12px;


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


@media (max-width:720px){
  .mw-parser-output .lw-legend li{


  .lw-kpis{grid-template-columns:1fr;}
    font-size:.82rem;


   .lw-actions{gap:8px;}
   }


}
}

Revision as of 17:36, 19 November 2025

/* Conservation Panel - Mobile-Optimized TemplateStyles */





/* Panel shell */

.mw-parser-output .lw-cons-panel {

  background:#fff; border:1px solid #e6ebea; border-radius:14px;

  padding:18px 18px 16px; margin:24px 0; box-shadow:0 1px 2px rgba(0,0,0,.03);

  color:#26421a;

}

.mw-parser-output .lw-cons-title{

  font-family:Georgia,"Times New Roman",serif; font-size:1.6rem; line-height:1.2; margin:4px 2px 14px;

}





/* KPIs - responsive 3-column to 1-column */

.mw-parser-output .lw-kpis{

  display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 10px;

}

.mw-parser-output .lw-kpi{

  flex:1 1 180px; background:#f8fbf7; border:1px solid #e6ebea; 

  border-radius:10px; padding:12px 14px; min-width:0;

}

.mw-parser-output .lw-kpi__num{

  font-size:1.6rem; font-weight:700; line-height:1;

}

.mw-parser-output .lw-kpi__label{

  font-size:.9rem; color:#44613a; margin-top:6px; 

  word-wrap:break-word; hyphens:auto;

}





/* Status bar - maintains proportions, readable labels */

.mw-parser-output .lw-statusbar{

  display:flex; height:28px; border-radius:999px; overflow:hidden; 

  border:1px solid #e6ebea; background:#f4f7f4; margin:8px 0;

}

.mw-parser-output .lw-statusbar .seg{

  display:flex; align-items:center; justify-content:center;

  font-size:.85rem; font-weight:600; color:#17320f; 

  border-right:1px solid rgba(0,0,0,.06); min-width:24px;

}

.mw-parser-output .lw-statusbar .seg:last-child{border-right:none}

.mw-parser-output .seg--stable{background:#e9f7ee}

.mw-parser-output .seg--vulnerable{background:#fff6df}

.mw-parser-output .seg--endangered{background:#ffeade}

.mw-parser-output .seg--critical{background:#ffe3e3}





/* Legend - responsive wrapping with better touch targets */

.mw-parser-output .lw-legend{

  display:flex; flex-wrap:wrap; gap:14px 18px; list-style:none; 

  padding:10px 4px 4px; margin:0;

}

.mw-parser-output .lw-legend li{

  display:flex; align-items:center; gap:8px; font-size:.92rem; 

  color:#35522b; min-height:28px; /* Better touch target */

}

.mw-parser-output .dot{

  width:10px; height:10px; border-radius:50%; display:inline-block; 

  border:1px solid rgba(0,0,0,.1); flex-shrink:0;

}

.mw-parser-output .dot--stable{background:#2ecc71}

.mw-parser-output .dot--vulnerable{background:#f1c40f}

.mw-parser-output .dot--endangered{background:#f39c12}

.mw-parser-output .dot--critical{background:#e74c3c}





/* Mobile breakpoints */

@media (max-width: 480px) {

  .mw-parser-output .lw-cons-panel {

    padding:16px 14px; margin:16px 0; border-radius:12px;

  }

  

  .mw-parser-output .lw-cons-title{

    font-size:1.4rem; margin:2px 0 12px;

  }

  

  /* Stack KPIs on very small screens */

  .mw-parser-output .lw-kpis{

    gap:8px; margin:2px 0 12px;

  }

  .mw-parser-output .lw-kpi{

    flex:1 1 100%; padding:10px 12px;

  }

  .mw-parser-output .lw-kpi__num{font-size:1.4rem}

  .mw-parser-output .lw-kpi__label{font-size:.85rem; margin-top:4px}

  

  /* Adjust status bar for small screens */

  .mw-parser-output .lw-statusbar{

    height:24px; margin:6px 0;

  }

  .mw-parser-output .lw-statusbar .seg{

    font-size:.8rem; min-width:20px;

  }

  

  /* Legend adjustments */

  .mw-parser-output .lw-legend{

    gap:10px 14px; padding:8px 2px 2px;

  }

  .mw-parser-output .lw-legend li{

    font-size:.88rem; gap:6px;

  }

}





@media (max-width: 360px) {

  .mw-parser-output .lw-cons-panel {

    padding:14px 12px; margin:12px 0;

  }

  

  /* Force single column for KPIs */

  .mw-parser-output .lw-kpi{

    flex-basis:100%; margin-bottom:0;

  }

  

  /* Hide numbers in status bar if too cramped, keep colors visible */

  .mw-parser-output .lw-statusbar .seg{

    font-size:0; /* Hide text but keep color bars */

  }

  

  /* Compact legend */

  .mw-parser-output .lw-legend{

    gap:8px 12px;

  }

  .mw-parser-output .lw-legend li{

    font-size:.82rem;

  }

}
Retrieved from "https://landrace.wiki/index.php?title=Template:Home/ConservationPanel.css&oldid=1439"