Template:StatsBar: Difference between revisions

← Older edit Newer edit →

VisualWikitext

@@ Line 1: / Line 1: @@
 <div class="statsbar">
-{{#if: {{{label1|}}} | <div class="stat template-statsbar"><strong>{{{label1}}}:</strong> {{{data1}}}</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> }}
@@ Line 6: / Line 6: @@
 {{#if: {{{label5|}}} | <div class="stat"><strong>{{{label5}}}:</strong> {{{data5}}}</div> }}
 </div>
 {{#css:
-.template-statsbar {
+.statsbar {
-     margin: 1rem 0;
+     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);
-    display: grid;
+     background-blend-mode: multiply;
-    font-size: 0.8125rem;
+     background-size: cover;
-     line-height: 1.2;
+     background-position: center;
-     overflow-x: auto;
+     border: 2px solid #ff6600;
-     grid-auto-columns: minmax(auto, 1fr);
+     padding: 10px;
-     grid-auto-flow: column;
-}
-.template-statsbar__item {
-     padding: 0 1rem;
      display: flex;
+    gap: 10px;
+    justify-content: space-between;
      align-items: center;
-     flex-direction: column;
+     text-transform: uppercase;
+    font-family: 'Oxanium', sans-serif;
+    font-weight: bold;
+    color: white;
+    position: relative;
 }
-.template-statsbar__item + .template-statsbar__item {
+.statsbar::before {
-     border-left: 1px solid #ccc;
+    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;
 }
-.template-statsbar__label {
+.stat {
-     color: #777;
+    background: rgba(255, 102, 0, 0.2);
-     letter-spacing: 0.05em;
+    padding: 5px 10px;
-     white-space: nowrap;
+    border-radius: 3px;
+    display: flex;
+     flex-direction: column;
+     align-items: center;
+     justify-content: center;
 }
-.template-statsbar__data {
+.stat strong {
-     color: #222;
+     color: #ff6600;
-    font-weight: 500;
+     font-size: 1.2rem;
-     font-size: 2rem;
-    white-space: nowrap;
 }
-.template-statsbar__desc {
+.stat:last-child {
-     letter-spacing: 0.025em;
+     margin-right: 0;
 }
 }}

Revision as of 23:23, 14 February 2025