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/FeaturedAccessionCard/styles.css: Difference between revisions

Template page
No edit summary
No edit summary
Line 1: Line 1:
.fa-card{display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff}
/* Template:Home/FeaturedAccessionCard/styles.css  ← CSS ONLY */
.fa-media {
.fa-grid {
    position: relative;
  display: grid;
    width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    height: 200px; /* Fixed height instead of percentage */
  gap: 1rem;
    background: #f5f5f5;
}
}
.fa-img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block}
.fa-img--placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font:600 14px/1.2 system-ui;color:#9ca3af}
.fa-body{padding:12px 14px 14px}


.fa-card{box-shadow:0 2px 6px rgba(0,0,0,0.06);transition:transform .15s ease,box-shadow .15s ease}
.fa-card {
.fa-card:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,0.12)}
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}


.fa-kicker{font:600 11px/1.2 system-ui;color:#555}
.fa-media {
.fa-dot{opacity:.35}
  position: relative;
  width: 100%;
  height: 200px;        /* adjust as you like */
  overflow: hidden;
  background: #f5f5f5;
}


/* Style the actual <img> regardless of class/where MW puts it */
.fa-media img {       
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* prevent skin “notice” styling from wrapping these lines */
/* Placeholder */
.fa-kicker,.fa-sub,.fa-cta{background:none;border:0;padding:0;margin:0 0 8px}
.fa-img--placeholder {
.fa-kicker{font:600 12px/1.2 system-ui;color:#374151;display:flex;align-items:center;gap:6px}
  display: flex;
.fa-status{font-weight:700}
  align-items: center;
.fa-dot{opacity:.5}
  justify-content: center;
.fa-title{font:700 18px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;margin:0 0 4px}
  height: 100%;
.fa-sub{font:500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#6b7280}
  color: #6c757d;
.fa-hook{font:400 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#111827;margin:0 0 10px;max-height:4.2em;overflow:hidden}
  font-size: .95rem;
.fa-cta a{text-decoration:none;border-bottom:1px solid #d1d5db}
}
.fa-missing{color:#9ca3af}

Revision as of 01:06, 24 August 2025

/* Template:Home/FeaturedAccessionCard/styles.css  ← CSS ONLY */
.fa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.fa-card {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.fa-media {
  position: relative;
  width: 100%;
  height: 200px;        /* adjust as you like */
  overflow: hidden;
  background: #f5f5f5;
}

/* Style the actual <img> regardless of class/where MW puts it */
.fa-media img {         
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder */
.fa-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6c757d;
  font-size: .95rem;
}