模板: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;
 }

}