Template:Plant Update/styles.css: Difference between revisions

/* Plant Update Log Styles - Dark/Light Theme Support */

.plant-update {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  border: 1px solid #a2a9b1;
  background: #ffffff;
}

.infobox ~ .plant-update {
  width: calc(100% - 21em);
}

@media print {
  .infobox ~ .plant-update {
    width: calc(100% - 25em);
  }
}

.plant-update-image {
  float: left;
  clear: left;
  margin: 0 1em 0.5em 0;
  max-width: 200px;
}

.plant-update-image img {
  display: block;
  width: 100%;
  height: auto;
}

.plant-update th,
.plant-update td {
  border: 1px solid #a2a9b1;
  padding: 0.75em;
}

.plant-update-date {
  font-weight: bold;
  width: 150px;
  background: #e8f5e9;
  color: #202122;
}

.plant-update-status {
  font-weight: bold;
  background: #e8f5e9;
  color: #202122;
}

.plant-update-notes {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid #eaecf0;
  color: #202122;
}

/* Status badges — manual Night toggle */
@media screen {
  html.skin-theme-clientpref-night .plant-update {
    background: #202122;
  }

  html.skin-theme-clientpref-night .plant-update th,
  html.skin-theme-clientpref-night .plant-update td {
    border-color: #595959;
  }

  html.skin-theme-clientpref-night .plant-update-date,
  html.skin-theme-clientpref-night .plant-update-status {
    background: rgba(76, 174, 80, 0.15);
    color: #eaecf0;
  }

  html.skin-theme-clientpref-night .plant-update-notes {
    border-top-color: #404244;
    color: #eaecf0;
  }
}

/* Status badges — OS dark preference */
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plant-update {
    background: #202122;
  }

  html.skin-theme-clientpref-os .plant-update th,
  html.skin-theme-clientpref-os .plant-update td {
    border-color: #595959;
  }

  html.skin-theme-clientpref-os .plant-update-date,
  html.skin-theme-clientpref-os .plant-update-status {
    background: rgba(76, 174, 80, 0.15);
    color: #eaecf0;
  }

  html.skin-theme-clientpref-os .plant-update-notes {
    border-top-color: #404244;
    color: #eaecf0;
  }
}

.plant-update strong {
  color: inherit;
}

.plant-update img {
  max-width: 100%;
  height: auto;
  margin: 0.5em 0;
  border-radius: 4px;
  border: 1px solid #eaecf0;
}
/* Status badges — manual Night toggle */
@media screen {
  html.skin-theme-clientpref-night .plant-update img {
    border-color: #404244;
  }
}

/* Status badges — OS dark preference */
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plant-update img {
    border-color: #404244;
  }
}