Template:ICCard/styles.css: Difference between revisions

← Older edit

@@ 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;
-}