Template:ICCard/styles.css: Difference between revisions

From ICE List Wiki
Jump to navigation Jump to search
← Older edit
No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Base card */
/* ICE List card system — matte flat */
.ic-card {
.ic-card { background:#fff; border:1px solid #e6e4df; border-radius:6px; overflow:hidden; margin:0 0 12px 0; }
  border: 1px solid #a7d7f9;
.ic-card__head { padding:11px 16px; font-size:15px; font-weight:500; line-height:1.3; }
  background: #f8fcff;
.ic-card__body { padding:14px 16px; font-size:13.5px; line-height:1.6; color:#1c1b19; }
  margin: 0 0 14px 0;
.ic-card__body > :first-child { margin-top:0; }
  box-sizing: border-box;
.ic-card__body > :last-child { margin-bottom:0; }
}
.ic-card__body p { margin:0 0 8px; }
.ic-card__body a { color:#2f5c8f; text-decoration:none; }


/* Header */
/* Tones */
.ic-card__head {
.ic-card--blue  .ic-card__head { background:#d8e4f2; color:#2c3e57; }
  padding: 8px 10px;
.ic-card--gray  .ic-card__head { background:#ebe9e3; color:#39382f; }
  border-bottom: 1px solid #a7d7f9;
.ic-card--news  .ic-card__head { background:#e2eaf3; color:#2c3e57; }
  display: flex;
.ic-card--green .ic-card__head { background:#dcedde; color:#33502b; }
  justify-content: space-between;
.ic-card--red   .ic-card__head { background:#f1d6d3; color:#6f3328; }
   align-items: baseline;
  gap: 12px;
}


/* Title + more link */
/* Note */
.ic-card__title {
.ic-card-note { margin-top:10px; padding-top:10px; border-top:1px solid #efede8; font-size:12.5px; line-height:1.55; color:#6e6c66; }
  font-weight: 700;
}


.ic-card__more {
/* Lists */
  font-size: 0.9em;
.ic-card-list ul { list-style:none; margin:0; padding:0; }
  white-space: nowrap;
.ic-card-list li { padding:8px 0; border-bottom:1px solid #efede8; }
}
.ic-card-list li:first-child { padding-top:0; }
.ic-card-list li:last-child { border-bottom:0; padding-bottom:0; }
.ic-card-list p { margin:0 0 8px; }


/* Hide “more” when empty */
/* Buttons */
.ic-card__more:empty {
.ic-card-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  display: none;
.ic-card-button-primary a { display:inline-block; background:#3a3a36; color:#fff; padding:8px 14px; border-radius:5px; text-decoration:none; }
}
.ic-card-button-secondary a { display:inline-block; background:#fff; color:#333; border:1px solid #d9d7d1; padding:7px 14px; border-radius:5px; text-decoration:none; }
.ic-card--red .ic-card-button-primary a { background:#7a3a2c; }
.ic-card--green .ic-card-button-primary a { background:#3d5230; }


/* Body */
/* Feature blocks (agent / incident) */
.ic-card__body {
.ic-feature { display:flex; gap:0.8em; align-items:flex-start; }
  padding: 10px 12px;
.ic-feature__media { flex:0 0 auto; max-width:140px; }
}
.ic-feature__body { flex:1; }
 
.ic-feature__meta { font-size:90%; color:#6e6c66; }
/* =========================
  TONE VARIANTS
  ========================= */
 
/* Default / neutral blue (Wikipedia-style) */
.ic-card--blue {
  border-color: #a7d7f9;
  background: #f8fcff;
}
.ic-card--blue .ic-card__head {
  background: #cedff2;
  border-bottom-color: #a7d7f9;
}
 
/* News / current events (slightly stronger blue) */
.ic-card--news {
  border-color: #a2c8ee;
  background: #f6faff;
}
.ic-card--news .ic-card__head {
  background: #dbe9f6;
  border-bottom-color: #a2c8ee;
}
 
/* Informational / neutral gray */
.ic-card--gray {
  border-color: #d9d9d9;
  background: #fafafa;
}
.ic-card--gray .ic-card__head {
  background: #eeeeee;
  border-bottom-color: #d9d9d9;
}
 
/* Featured / positive */
.ic-card--green {
  border-color: #b7d7c2;
  background: #f4fbf6;
}
.ic-card--green .ic-card__head {
  background: #d8f0e0;
  border-bottom-color: #b7d7c2;
}
 
/* Warning / safety / legal */
.ic-card--red {
  border-color: #e0a1a1;
  background: #fff6f6;
}
.ic-card--red .ic-card__head {
  background: #f3cccc;
  border-bottom-color: #e0a1a1;
}
 
.ic-card-list ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
 
.ic-card-list li {
  margin: 0.3em 0;
}
 
/* Featured blocks (agent / incident) */
.ic-feature {
  display: flex;
  gap: 0.8em;
  align-items: flex-start;
}
 
.ic-feature__media {
  flex: 0 0 auto;
  max-width: 140px;
}
 
.ic-feature__body {
  flex: 1;
}
 
.ic-feature__meta {
  font-size: 90%;
}
 
.ic-feature__body p {
  margin-top: 0.4em;
  margin-bottom: 0;
}

Latest revision as of 00:57, 30 May 2026

/* ICE List card system — matte flat */
.ic-card { background:#fff; border:1px solid #e6e4df; border-radius:6px; overflow:hidden; margin:0 0 12px 0; }
.ic-card__head { padding:11px 16px; font-size:15px; font-weight:500; line-height:1.3; }
.ic-card__body { padding:14px 16px; font-size:13.5px; line-height:1.6; color:#1c1b19; }
.ic-card__body > :first-child { margin-top:0; }
.ic-card__body > :last-child { margin-bottom:0; }
.ic-card__body p { margin:0 0 8px; }
.ic-card__body a { color:#2f5c8f; text-decoration:none; }

/* Tones */
.ic-card--blue  .ic-card__head { background:#d8e4f2; color:#2c3e57; }
.ic-card--gray  .ic-card__head { background:#ebe9e3; color:#39382f; }
.ic-card--news  .ic-card__head { background:#e2eaf3; color:#2c3e57; }
.ic-card--green .ic-card__head { background:#dcedde; color:#33502b; }
.ic-card--red   .ic-card__head { background:#f1d6d3; color:#6f3328; }

/* Note */
.ic-card-note { margin-top:10px; padding-top:10px; border-top:1px solid #efede8; font-size:12.5px; line-height:1.55; color:#6e6c66; }

/* Lists */
.ic-card-list ul { list-style:none; margin:0; padding:0; }
.ic-card-list li { padding:8px 0; border-bottom:1px solid #efede8; }
.ic-card-list li:first-child { padding-top:0; }
.ic-card-list li:last-child { border-bottom:0; padding-bottom:0; }
.ic-card-list p { margin:0 0 8px; }

/* Buttons */
.ic-card-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ic-card-button-primary a { display:inline-block; background:#3a3a36; color:#fff; padding:8px 14px; border-radius:5px; text-decoration:none; }
.ic-card-button-secondary a { display:inline-block; background:#fff; color:#333; border:1px solid #d9d7d1; padding:7px 14px; border-radius:5px; text-decoration:none; }
.ic-card--red .ic-card-button-primary a { background:#7a3a2c; }
.ic-card--green .ic-card-button-primary a { background:#3d5230; }

/* Feature blocks (agent / incident) */
.ic-feature { display:flex; gap:0.8em; align-items:flex-start; }
.ic-feature__media { flex:0 0 auto; max-width:140px; }
.ic-feature__body { flex:1; }
.ic-feature__meta { font-size:90%; color:#6e6c66; }
Retrieved from "https://theicelist.org/index.php?title=Template:ICCard/styles.css&oldid=33763"