Template:ICCard/styles.css: Difference between revisions
Created page with ".ic-card{ border:1px solid #a7d7f9; background:#f8fcff; margin:0 0 12px 0; } .ic-card__head{ padding:8px 10px; border-bottom:1px solid #a7d7f9; display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .ic-card__title{ font-weight:700; } .ic-card__more{ font-size:0.9em; white-space:nowrap; } .ic-card__body{ padding:10px 12px; } →Tones to mimic that Wikipedia “portal box” vibe: .ic-card--green{ border-color:#b7d7c2; backg..." |
No edit summary |
||
| Line 1: | Line 1: | ||
.ic-card{ | /* Base card */ | ||
border:1px solid #a7d7f9; | .ic-card { | ||
background:#f8fcff; | border: 1px solid #a7d7f9; | ||
margin:0 0 | background: #f8fcff; | ||
margin: 0 0 14px 0; | |||
box-sizing: border-box; | |||
} | } | ||
.ic-card__head{ | /* Header */ | ||
padding:8px 10px; | .ic-card__head { | ||
border-bottom:1px solid #a7d7f9; | padding: 8px 10px; | ||
display:flex; | border-bottom: 1px solid #a7d7f9; | ||
justify-content:space-between; | display: flex; | ||
align-items:baseline; | justify-content: space-between; | ||
gap: | align-items: baseline; | ||
gap: 12px; | |||
} | } | ||
.ic-card__title{ font-weight:700; } | /* Title + more link */ | ||
.ic-card__more{ font-size:0.9em; white-space:nowrap; } | .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; | |||
} | |||
.ic-card__body{ padding:10px 12px; } | /* Body */ | ||
.ic-card__body { | |||
padding: 10px 12px; | |||
} | |||
/* | /* ========================= | ||
TONE VARIANTS | |||
========================= */ | |||
.ic-card--blue{ border-color:#a7d7f9; background:#f8fcff; } | /* Default / neutral blue (Wikipedia-style) */ | ||
.ic-card--blue .ic-card__head{ background:#cedff2; border-bottom-color:#a7d7f9; } | .ic-card--blue { | ||
border-color: #a7d7f9; | |||
background: #f8fcff; | |||
} | |||
.ic-card--blue .ic-card__head { | |||
background: #cedff2; | |||
border-bottom-color: #a7d7f9; | |||
} | |||
.ic-card--gray{ border-color:#d9d9d9; background:#fafafa; } | /* News / current events (slightly stronger blue) */ | ||
.ic-card--gray .ic-card__head{ background:#eeeeee; border-bottom-color:#d9d9d9; } | .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; | |||
} | |||