模板:Infobox/styles.css

/* InfoBox CSS */
.calc-infobox {
  width: 300px;
  float: right;
  margin: 0 0 1em 1em;
  border: 1px solid var(--border-color-subtle, #ccc);
  border-radius: 4px;
  background: var(--background-color-base, #fff);
  color: var(--color-base, #000);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.calc-title {
  font-weight: bold;
  text-align: center;
  padding: 12px;
  background: linear-gradient(135deg, #f4ca30 0%, #e5b720 100%);
  color: #000;
  font-size: 1.1em;
}

.calc-image {
  text-align: center;
  padding: 10px;
  background: var(--background-color-neutral, #f9f9f9);
}

.calc-image img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

.calc-data {
  padding: 0;
}

.calc-row {
  display: flex;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color-subtle, #eee);
}

.calc-row:last-child {
  border-bottom: none;
}

.calc-label {
  width: 40%;
  font-weight: bold;
  color: var(--color-base, #333);
}

.calc-value {
  width: 60%;
  text-align: right;
  color: var(--color-base, #666);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .calc-infobox {
    background: #2a2a2a;
    border-color: #444;
  }
  .calc-title {
    background: linear-gradient(135deg, #d4a820 0%, #c5a010 100%);
  }
  .calc-image {
    background: #333;
  }
  .calc-row {
    border-color: #444;
  }
  .calc-label,
  .calc-value {
    color: #ddd;
  }
}