|
|
| Line 6: |
Line 6: |
| {{#if: {{{label5|}}} | <div class="stat"><strong>{{{label5}}}:</strong> {{{data5}}}</div> }} | | {{#if: {{{label5|}}} | <div class="stat"><strong>{{{label5}}}:</strong> {{{data5}}}</div> }} |
| </div> | | </div> |
|
| |
| {{#css:
| |
| .statsbar {
| |
| background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.8) 100%), url(https://example.com/ragged-texture.png);
| |
| background-blend-mode: multiply;
| |
| background-size: cover;
| |
| background-position: center;
| |
| border: 2px solid #ff6600;
| |
| padding: 10px;
| |
| display: flex;
| |
| gap: 10px;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| text-transform: uppercase;
| |
| font-family: 'Oxanium', sans-serif;
| |
| font-weight: bold;
| |
| color: white;
| |
| position: relative;
| |
| }
| |
|
| |
| .statsbar::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: url(https://example.com/ragged-mask.png);
| |
| background-size: cover;
| |
| mix-blend-mode: multiply;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .stat {
| |
| background: rgba(255, 102, 0, 0.2);
| |
| padding: 5px 10px;
| |
| border-radius: 3px;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| .stat strong {
| |
| color: #ff6600;
| |
| font-size: 1.2rem;
| |
| }
| |
|
| |
| .stat:last-child {
| |
| margin-right: 0;
| |
| }
| |
| }}
| |
