Merge pull request #675 from Pseudo-Corp/campaign-progress-bar

Campaign progress bars

Author: Pseudonian

Synergism.css

@@ -2917,6 +2917,21 @@ p#ascendHotKeys {
     justify-content: center;
 }
 
+/* Credit: gwabo_ */
+.campaignIcon:not(.green-background) {
+    --pct: 0;
+
+    background-image:
+        linear-gradient(
+            0deg,
+            #00800033 -25%,
+            #00800088 calc(round(var(--pct) * 100%, 1px) - 1px),
+            green calc(round(var(--pct) * 100%, 1px) - 1px),
+            green calc(round(var(--pct) * 100%, 1px)),
+            transparent calc(round(var(--pct) * 100%, 1px))
+        );
+}
+
 #campaignsIcons h3 {
     text-align: center;
 }

index.html

@@ -2852,10 +2852,11 @@ <h2 id="campaignsIntroduction" class="tightText" i18n="campaigns.intro" style="c
             <h4 id="campaignsInfo1" class="tightText" i18n="campaigns.campaignInfo" style="color: orange"></h4>
         </div>
         <div id="campaignsMain">
-            <div id="campaignsIcons">
+            <div id="campaignsIcons" aria-live="polite">
                 <h3 i18n="campaigns.pickNow"></h3>
                 <div id="campaignIconGrid"> 
                 </div>
+                <h3 id="currentCampaignText"></h3>
             </div>
             <div id="campaignsDescriptions" aria-live="polite">
                 <h3 id="campaignName"></h3>