|
|
| Line 2: |
Line 2: |
| border-radius: 4px; | | border-radius: 4px; |
| padding: 0.75em 1em; | | padding: 0.75em 1em; |
| margin: 0.5em 0; | | margin: 0.75em 0; |
| border: 1px solid transparent; | | border: 1px solid transparent; |
| font-size: 95%; | | font-size: 95%; |
| }
| |
|
| |
| /* Light theme */
| |
| .color-box--green { background:#e6f4ea; color:#0a5c2a; border-color:#b7e1c0; }
| |
| .color-box--turquoise{ background:#e0f7f9; color:#006b6b; border-color:#b3e6ea; }
| |
| .color-box--blue { background:#e6f0ff; color:#0645ad; border-color:#c0d4ff; }
| |
| .color-box--yellow { background:#fff8d6; color:#7a5a00; border-color:#f2e2a0; }
| |
| .color-box--red { background:#ffe6e6; color:#b00020; border-color:#f5b3b3; }
| |
| .color-box--brown { background:#f3e6dc; color:#5b3b1f; border-color:#d9bda3; }
| |
| .color-box--purple { background:#f1e6ff; color:#5b2b8a; border-color:#d3b8ff; }
| |
|
| |
| /* Dark theme */
| |
| @media (prefers-color-scheme: dark) {
| |
| .color-box--green { background:#0f2d1f; color:#b5f7c8; border-color:#1f5a37; }
| |
| .color-box--turquoise{ background:#062b30; color:#9df2f2; border-color:#0f5a61; }
| |
| .color-box--blue { background:#0a1c33; color:#a9c7ff; border-color:#234a7a; }
| |
| .color-box--yellow { background:#2f2804; color:#ffeaa0; border-color:#7a6510; }
| |
| .color-box--red { background:#2f0c0f; color:#ffb3b8; border-color:#7a1f26; }
| |
| .color-box--brown { background:#24170f; color:#e2c3a3; border-color:#5b3b24; }
| |
| .color-box--purple { background:#1f102d; color:#d7b8ff; border-color:#4f2f7a; }
| |
| } | | } |
.color-box {
border-radius: 4px;
padding: 0.75em 1em;
margin: 0.75em 0;
border: 1px solid transparent;
font-size: 95%;
}
