Template:ICCard/styles.css: Difference between revisions
Jump to navigation
Jump to search
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 |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.ic-card{ | /* 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; } | |||
.ic-card__head{ | /* 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; } | |||
} | |||
.ic- | /* 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; } | |||
.ic- | /* 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-- | .ic-card-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } | ||
.ic-card-- | .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; } | |||
.ic- | /* Feature blocks (agent / incident) */ | ||
.ic- | .ic-feature { display:flex; gap:0.8em; align-items:flex-start; } | ||
.ic-feature__media { flex:0 0 auto; max-width:140px; } | |||
.ic- | .ic-feature__body { flex:1; } | ||
.ic- | .ic-feature__meta { font-size:90%; color:#6e6c66; } | ||
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; }