Template:Callout/styles.css

/* ==========================================================
   PokeNexus Wiki — Shared callout styles

   Base class:
   .pn-callout

   Optional variants:
   .pn-callout--info
   .pn-callout--warning
   .pn-callout--success
   .pn-callout--danger
   ========================================================== */

/* ==========================================================
   Base callout
   ========================================================== */

.pn-callout {
  display: flex;
  align-items: flex-start;

  gap: 0.75rem;

  margin-block: 1rem 1.5rem;
  padding: 0.85rem 1rem;

  background-color: var(--background-color-neutral-subtle, #eee6d8);

  color: var(--color-base, #312b25);

  border: 1px solid #cbbda8;
  border-left-width: 4px;
  border-radius: 0.4rem;

  line-height: 1.5;
}

/* ==========================================================
   Icon
   ========================================================== */

.pn-callout__icon {
  flex: 0 0 auto;

  width: 1.25rem;
  height: 1.25rem;

  margin-block-start: 0.1rem;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ==========================================================
   Content
   ========================================================== */

.pn-callout__content {
  flex: 1 1 auto;

  min-width: 0;
}

.pn-callout__title {
  margin-block: 0 0.2rem;

  color: var(--color-emphasized, #211d19);

  font-weight: 700;
}

.pn-callout__body {
  margin: 0;
}

/* ==========================================================
   Variants
   ========================================================== */

.pn-callout--info {
  border-left-color: #0b7f88;
}

.pn-callout--warning {
  border-left-color: #a66b16;
}

.pn-callout--success {
  border-left-color: #497a45;
}

.pn-callout--danger {
  border-left-color: #b32424;
}

/* ==========================================================
   Dark appearance
   ========================================================== */

html.skin-theme-clientpref-night .pn-callout {
  border-color: #54595d;
}

html.skin-theme-clientpref-night .pn-callout--info {
  border-left-color: #35d4dd;
}

html.skin-theme-clientpref-night .pn-callout--warning {
  border-left-color: #d6a44a;
}

html.skin-theme-clientpref-night .pn-callout--success {
  border-left-color: #7fb875;
}

html.skin-theme-clientpref-night .pn-callout--danger {
  border-left-color: #f15c5c;
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pn-callout {
    border-color: #54595d;
  }

  html.skin-theme-clientpref-os .pn-callout--info {
    border-left-color: #35d4dd;
  }

  html.skin-theme-clientpref-os .pn-callout--warning {
    border-left-color: #d6a44a;
  }

  html.skin-theme-clientpref-os .pn-callout--success {
    border-left-color: #7fb875;
  }

  html.skin-theme-clientpref-os .pn-callout--danger {
    border-left-color: #f15c5c;
  }
}