mobile css

Synergism.css

@@ -1,6 +1,7 @@
 body *,
 body {
-    transition: background-color var(--transition), border-color var(--transition);
+    transition-property: background-color, border-color;
+    transition-duration: var(--transition);
 }
 
 html {
@@ -195,10 +196,10 @@ input[type="checkbox"] {
 button {
     min-height: 30px;
     color: white;
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
     cursor: pointer;
     background-color: var(--button-color);
     outline: none;
+    transition-duration: var(--transition-extra);
 }
 
 body button:hover,
@@ -312,9 +313,9 @@ body button:active {
     font-size: 0;
     z-index: 1;
     color: white;
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
     cursor: pointer;
     background-color: var(--button-color);
+    transition-duration: var(--transition-extra);
 }
 
 #notifx:hover {
@@ -579,20 +580,11 @@ body button:active {
 #tabrow {
     text-align: center;
     width: 100%;
-    list-style: none;
     margin: 0;
-    margin-inline: unset;
-    margin-block: unset;
-    padding-inline: unset;
     display: flex;
     justify-content: center;
     gap: 0 5px;
-}
-
-.navbar {
-    display: flex;
-    justify-content: center;
-    width: 100%;
+    overflow-x: visible;
 }
 
 nav button {
@@ -679,10 +671,10 @@ button.isEvent:hover {
 }
 
 .subTabWrapper {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 145px);
+    display: flex;
+    flex-wrap: wrap;
     justify-content: center;
-    gap: 10px 15px;
+    gap: 15px 10px;
     width: 90%;
     margin: 15px auto 0;
 }
@@ -702,19 +694,11 @@ button.isEvent:hover {
     margin: 0 auto;
 }
 
-#coinBuildings p {
-    margin: 0;
-}
-
 p#buildinghotkeys,
 p#buildinghotkeys2 {
-    margin-top: 15px;
     color: lightgray;
     text-align: center;
-}
-
-p#buildinghotkeys2 {
-    margin-top: 0;
+    margin: 0;
 }
 
 #buildingtext {
@@ -754,6 +738,7 @@ p#buildinghotkeys2 {
     font-size: 0;
     min-height: 182px;
     text-align: center;
+    display: block;
 }
 
 #upgradesFlex > div > table img {
@@ -864,7 +849,7 @@ p#themesTitle {
     min-height: 20px;
     margin: 2px auto;
     box-sizing: border-box;
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 #importFileButton:hover {
@@ -1006,15 +991,28 @@ p#promocodeinfo {
     margin-top: 0.25em;
 }
 
-.buttonRow > div > .image {
+.buttonRow > div > img {
     height: 32px;
     width: 32px;
 }
 
+body.legacyIcons .buttonRow > div > img { background-color: black; }
+
 .buttonRow > div > .desc {
     width: 22em;
 }
 
+.goldBuild { color: gold; }
+.yellowBuild { color: yellow; }
+.pinkBuild { color: pink; }
+.cyanBuild { color: cyan; }
+.plumBuild { color: plum; }
+.limegreenBuild { color: limegreen; }
+.orangeBuild { color: orange; }
+
+#multiplier > .desc { color: yellow; }
+#accelerator > .stats { color: cyan; }
+
 .buildingPurchaseBtn {
     width: 15em;
     border-radius: 8px;
@@ -1027,20 +1025,25 @@ p#promocodeinfo {
     background-color: var(--buttonbuy-color);
 }
 
-.buildingPurchaseBtn.buildingPurchaseBtnAvailable {
+.buildingPurchaseAvailable > .buildingPurchaseBtn {
     cursor: pointer;
     background-color: var(--buildings-canbuy-color);
 }
 
-.buildingPurchaseBtn.buildingPurchaseBtnAvailable:hover {
+.buildingPurchaseAvailable > .buildingPurchaseBtn:hover {
     background-color: var(--buildings-hover-color);
 }
 
 .buttonRow > div > .auto {
     width: 6em;
     min-width: 80px;
+    border: 2px solid;
+    background-color: var(--button-color);
 }
 
+.buttonRow .auto[data-status="on"] { border-color: green; }
+.buttonRow .auto[data-status="off"] { border-color: red; }
+
 .autobuyerToggleButton {
     background-color: var(--button-color);
 }
@@ -1050,16 +1053,16 @@ p#promocodeinfo {
     line-height: 1em;
 }
 
-#buildtext12,
-#buildtext14,
-#buildtext16 {
+#accelerator > .stats,
+#multiplier > .stats,
+#acceleratorboost > .stats {
     min-height: 2em;
 }
 
 #taxinfo {
     text-align: center;
     font-size: 1em;
-    margin-top: 30px;
+    margin: 30px 0 15px;
 }
 
 .tightText {
@@ -1171,19 +1174,18 @@ p#promocodeinfo {
     gap: 5px;
 }
 
-#buyamountcoin,
-#buyamountcrystal,
-#buyamountmythos,
-#buyamountparticle,
-#buyAmountTesseract {
+.buyAmount {
+    display: flex;
+    margin: 4px 0;
+    column-gap: 4px;
     position: absolute;
     left: 80%;
 }
 
 .buyAmountBtn {
     background-color: var(--button-color);
     cursor: pointer;
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 .buyAmountBtn:hover {
@@ -1193,7 +1195,6 @@ p#promocodeinfo {
 #prestige {
     position: relative;
     padding: 0;
-    color: cyan;
     flex-direction: column;
     align-items: center;
     max-width: 1600px;
@@ -1329,7 +1330,7 @@ p#prestigehotkeys {
 .runeTypeElement {
     margin: 0;
     text-align: center;
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 img.runeTypeElement {
@@ -1519,10 +1520,6 @@ img.runeTypeElement:hover {
     text-align: center;
 }
 
-#transcension > .buttonRow {
-    color: plum;
-}
-
 #transcendshardbonus {
     margin-top: 2px;
 }
@@ -1700,7 +1697,7 @@ p#transcendhotkeys {
 
 .challenge {
     background-color: var(--button-color);
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 .challenge:hover {
@@ -1718,7 +1715,6 @@ p#transcendhotkeys {
 #reincarnation {
     position: relative;
     padding: 0;
-    color: limegreen;
     flex-direction: column;
     align-items: center;
     max-width: 1600px;
@@ -1823,7 +1819,7 @@ p#reincarnatehotkeys {
 
 #researchtable .researchAvailable {
     cursor: pointer;
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 #researchtable .researchAvailable:hover {
@@ -1836,7 +1832,7 @@ p#reincarnatehotkeys {
 
 #researchtable .researchPurchasedAvailable {
     cursor: pointer;
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 #researchtable .researchPurchasedAvailable:hover {
@@ -2445,7 +2441,6 @@ button.language-select span.lang-name {
 #ascension {
     position: relative;
     padding: 0;
-    color: orange;
     flex-direction: column;
     align-items: center;
     max-width: 1600px;
@@ -2604,7 +2599,7 @@ p#ascendHotKeys {
 
 .constUpgrade {
     background-color: var(--button-color);
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 .constUpgradeAvailable {
@@ -2764,6 +2759,8 @@ p#ascendHotKeys {
     overflow-y: auto;
 }
 
+body.legacyIcons .historyTableWrap img { background-color: black; }
+
 #historyAscend .historyTableWrap,
 #historySingularity .historyTableWrap {
     min-width: 1212px;
@@ -3688,7 +3685,7 @@ img#singularityPerksIcon {
     border: 2px ridge gold;
     font-weight: bold;
     background-color: var(--button-color);
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 .oldPerk {
@@ -3701,7 +3698,7 @@ img#singularityPerksIcon {
     cursor: pointer;
     border: 2px solid gold;
     background-color: var(--button-color);
-    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    transition-duration: var(--transition-extra);
 }
 
 .newPerk:hover {
@@ -3812,3 +3809,5 @@ form input:hover {
     background-color: var(--hover-color);
     cursor: pointer;
 }
+
+.mobileShow { display: none; }