Template:StatsBar: Difference between revisions

← Older edit

VisualWikitext

Latest revision as of 02:58, 16 February 2025

Start Editing

@@ Line 1: / Line 1: @@
-<div class="statsbar">
+<div class="statsbar">{{#if: {{{label1|}}} | <div class="stat"><strong>{{{label1}}}:</strong> {{{data1}}}</div> }}{{#if: {{{label2|}}} | <div class="stat"><strong>{{{label2}}}:</strong> {{{data2}}}</div> }}{{#if: {{{label3|}}} | <div class="stat"><strong>{{{label3}}}:</strong> {{{data3}}}</div> }}{{#if: {{{label4|}}} | <div class="stat"><strong>{{{label4}}}:</strong> {{{data4}}}</div> }}{{#if: {{{label5|}}} | <div class="stat"><strong>{{{label5}}}:</strong> {{{data5}}}</div> }}[[Chrome_Engine_Modding_Wiki:Editing|<div class="start-editing" onclick="window.location.href='{{fullUrl:Chrome_Engine_Modding_Wiki:Editing}}'">Start Editing</div>]]
-{{#if: {{{label1|}}} | <div class="stat"><strong>{{{label1}}}:</strong> {{{data1}}}</div> }}
-{{#if: {{{label2|}}} | <div class="stat"><strong>{{{label2}}}:</strong> {{{data2}}}</div> }}
-{{#if: {{{label3|}}} | <div class="stat"><strong>{{{label3}}}:</strong> {{{data3}}}</div> }}
-{{#if: {{{label4|}}} | <div class="stat"><strong>{{{label4}}}:</strong> {{{data4}}}</div> }}
-{{#if: {{{label5|}}} | <div class="stat"><strong>{{{label5}}}:</strong> {{{data5}}}</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;
-}
-}}