Template:ICCard/styles.css: Difference between revisions

Latest revision as of 17:33, 16 December 2025

/* Base card */
.ic-card {
  border: 1px solid #a7d7f9;
  background: #f8fcff;
   margin: 0 0 6px 0;
  box-sizing: border-box;
}

/* Header */
.ic-card__head {
  padding: 8px 10px;
  border-bottom: 1px solid #a7d7f9;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

/* Title + more link */
.ic-card__title {
  font-weight: 700;
}

.ic-card__more {
  font-size: 0.9em;
  white-space: nowrap;
}

/* Hide “more” when empty */
.ic-card__more:empty {
  display: none;
}

/* Body */
.ic-card__body {
  padding: 10px 12px;
}

/* =========================
   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;
}

.ic-card__body > :first-child {
  margin-top: 0;
}

.ic-card__body > :last-child {
  margin-bottom: 0;
}

.ic-card__body p {
  margin: 0.5em 0;
}

.ic-card__body ul,
.ic-card__body ol {
  margin: 0.5em 0 0.5em 1.2em;
}