diff --git a/Pictures/Legacy/Accelerator.png b/Pictures/Legacy/Accelerator.png index 0af7026b2..7fb82120f 100644 Binary files a/Pictures/Legacy/Accelerator.png and b/Pictures/Legacy/Accelerator.png differ diff --git a/Pictures/Legacy/DiamondTier1.png b/Pictures/Legacy/DiamondTier1.png index 83f0cbce7..8748156fd 100644 Binary files a/Pictures/Legacy/DiamondTier1.png and b/Pictures/Legacy/DiamondTier1.png differ diff --git a/Pictures/Legacy/DiamondTier2.png b/Pictures/Legacy/DiamondTier2.png index b2b9e58c9..484f028f6 100644 Binary files a/Pictures/Legacy/DiamondTier2.png and b/Pictures/Legacy/DiamondTier2.png differ diff --git a/Pictures/Legacy/DiamondTier3.png b/Pictures/Legacy/DiamondTier3.png index d4d82c487..c93adc4a3 100644 Binary files a/Pictures/Legacy/DiamondTier3.png and b/Pictures/Legacy/DiamondTier3.png differ diff --git a/Pictures/Legacy/DiamondTier4.png b/Pictures/Legacy/DiamondTier4.png index 635528a59..976590e0a 100644 Binary files a/Pictures/Legacy/DiamondTier4.png and b/Pictures/Legacy/DiamondTier4.png differ diff --git a/Pictures/Legacy/DiamondTier5.png b/Pictures/Legacy/DiamondTier5.png index ddc2801e3..08c41ca1c 100644 Binary files a/Pictures/Legacy/DiamondTier5.png and b/Pictures/Legacy/DiamondTier5.png differ diff --git a/Pictures/Legacy/Multiplier.png b/Pictures/Legacy/Multiplier.png index 9b3562297..3eb13fb29 100644 Binary files a/Pictures/Legacy/Multiplier.png and b/Pictures/Legacy/Multiplier.png differ diff --git a/Pictures/Legacy/MythosTier1.png b/Pictures/Legacy/MythosTier1.png index 632ca6277..942a791f6 100644 Binary files a/Pictures/Legacy/MythosTier1.png and b/Pictures/Legacy/MythosTier1.png differ diff --git a/Pictures/Legacy/MythosTier2.png b/Pictures/Legacy/MythosTier2.png index 3153d1ca8..fc0a9c924 100644 Binary files a/Pictures/Legacy/MythosTier2.png and b/Pictures/Legacy/MythosTier2.png differ diff --git a/Pictures/Legacy/MythosTier3.png b/Pictures/Legacy/MythosTier3.png index 651f546b9..f781c4def 100644 Binary files a/Pictures/Legacy/MythosTier3.png and b/Pictures/Legacy/MythosTier3.png differ diff --git a/Pictures/Legacy/MythosTier4.png b/Pictures/Legacy/MythosTier4.png index 31f357bc4..6f39f5b1f 100644 Binary files a/Pictures/Legacy/MythosTier4.png and b/Pictures/Legacy/MythosTier4.png differ diff --git a/Pictures/Legacy/MythosTier5.png b/Pictures/Legacy/MythosTier5.png index 658ebcbb0..1884b733f 100644 Binary files a/Pictures/Legacy/MythosTier5.png and b/Pictures/Legacy/MythosTier5.png differ diff --git a/Pictures/Legacy/ParticlesTier1.png b/Pictures/Legacy/ParticlesTier1.png index 76637e03c..182c3a113 100644 Binary files a/Pictures/Legacy/ParticlesTier1.png and b/Pictures/Legacy/ParticlesTier1.png differ diff --git a/Pictures/Legacy/ParticlesTier2.png b/Pictures/Legacy/ParticlesTier2.png index e8ef46642..cc2f0664c 100644 Binary files a/Pictures/Legacy/ParticlesTier2.png and b/Pictures/Legacy/ParticlesTier2.png differ diff --git a/Pictures/Legacy/ParticlesTier3.png b/Pictures/Legacy/ParticlesTier3.png index 43d552c55..694580cbd 100644 Binary files a/Pictures/Legacy/ParticlesTier3.png and b/Pictures/Legacy/ParticlesTier3.png differ diff --git a/Pictures/Legacy/ParticlesTier4.png b/Pictures/Legacy/ParticlesTier4.png index 3dce77c14..7fb20a0b2 100644 Binary files a/Pictures/Legacy/ParticlesTier4.png and b/Pictures/Legacy/ParticlesTier4.png differ diff --git a/Pictures/Legacy/ParticlesTier5.png b/Pictures/Legacy/ParticlesTier5.png index fae14b098..864b995c1 100644 Binary files a/Pictures/Legacy/ParticlesTier5.png and b/Pictures/Legacy/ParticlesTier5.png differ diff --git a/Pictures/Legacy/TesseractTier1.png b/Pictures/Legacy/TesseractTier1.png index 0dd1b68d6..42761654f 100644 Binary files a/Pictures/Legacy/TesseractTier1.png and b/Pictures/Legacy/TesseractTier1.png differ diff --git a/Pictures/Legacy/TesseractTier2.png b/Pictures/Legacy/TesseractTier2.png index 49bebae59..198dd0497 100644 Binary files a/Pictures/Legacy/TesseractTier2.png and b/Pictures/Legacy/TesseractTier2.png differ diff --git a/Pictures/Legacy/TesseractTier3.png b/Pictures/Legacy/TesseractTier3.png index 6191b16ea..4f89d836c 100644 Binary files a/Pictures/Legacy/TesseractTier3.png and b/Pictures/Legacy/TesseractTier3.png differ diff --git a/Pictures/Legacy/TesseractTier4.png b/Pictures/Legacy/TesseractTier4.png index 90e370e78..d1ebbf881 100644 Binary files a/Pictures/Legacy/TesseractTier4.png and b/Pictures/Legacy/TesseractTier4.png differ diff --git a/Pictures/Legacy/TesseractTier5.png b/Pictures/Legacy/TesseractTier5.png index 6032897d4..a42e48712 100644 Binary files a/Pictures/Legacy/TesseractTier5.png and b/Pictures/Legacy/TesseractTier5.png differ diff --git a/Pictures/Legacy/Tier1.png b/Pictures/Legacy/Tier1.png index 76baac748..0ec31ae0b 100644 Binary files a/Pictures/Legacy/Tier1.png and b/Pictures/Legacy/Tier1.png differ diff --git a/Pictures/Legacy/Tier2.png b/Pictures/Legacy/Tier2.png index a0848620e..3a47f5d82 100644 Binary files a/Pictures/Legacy/Tier2.png and b/Pictures/Legacy/Tier2.png differ diff --git a/Pictures/Legacy/Tier3.png b/Pictures/Legacy/Tier3.png index 11145d451..7288732bf 100644 Binary files a/Pictures/Legacy/Tier3.png and b/Pictures/Legacy/Tier3.png differ diff --git a/Pictures/Legacy/Tier4.png b/Pictures/Legacy/Tier4.png index cb0d322aa..2cbb457e0 100644 Binary files a/Pictures/Legacy/Tier4.png and b/Pictures/Legacy/Tier4.png differ diff --git a/Pictures/Legacy/Tier5.png b/Pictures/Legacy/Tier5.png index 8e17d2b50..cb6bfa17b 100644 Binary files a/Pictures/Legacy/Tier5.png and b/Pictures/Legacy/Tier5.png differ diff --git a/Synergism.css b/Synergism.css index f4f747169..559cc335c 100644 --- a/Synergism.css +++ b/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,11 +1174,10 @@ p#promocodeinfo { gap: 5px; } -#buyamountcoin, -#buyamountcrystal, -#buyamountmythos, -#buyamountparticle, -#buyAmountTesseract { +.buyAmount { + display: flex; + margin: 4px 0; + column-gap: 4px; position: absolute; left: 80%; } @@ -1183,7 +1185,7 @@ p#promocodeinfo { .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; } diff --git a/SynergismMobile.css b/SynergismMobile.css new file mode 100644 index 000000000..2d429e1da --- /dev/null +++ b/SynergismMobile.css @@ -0,0 +1,213 @@ +@media screen and (max-width: 767px) { + .mobileShow { display: unset; } + .mobileHide { display: none; } + + /* For testing: */ + /* header { display: none; } + html { min-width: unset; } */ + + /* html { min-width: unset; } */ /* Uncomment after fixing scroll on all tabs */ + body { margin-bottom: 60px; } + + /* Buggy: (but everything can be fixed with just adding minimum-scale=1.0 to viewport meta) + Doesn't fit properly with current header and html min-width; + Moves on scrolling and chaning tabs; + */ + /* .navbar { + align-self: normal; + position: fixed; + bottom: 0; + z-index: 2; + } + + #tabrow { + border-top: 2px solid var(--scrollbar-color); + justify-content: unset; + overflow-x: scroll; + width: 100vw; + gap: 0; + } + + #tabrow::-webkit-scrollbar-track { + background-color: var(--button-color); + border-top: 2px solid var(--scrollbar-color); + } + + #tabrow button { + min-width: unset; + padding: 0 8px; + height: 40px; + border: none; + border-radius: 0; + background-color: var(--button-color); + flex-shrink: 0; + flex-grow: 1; + } + + #tabrow button:hover { background-color: var(--hover-color); } */ + + #multiplier > .desc { color: unset; } + #accelerator > .stats { color: unset; } + #acceleratorboost:not(.buildingPurchaseAvailable) .crimsonText { color: #49494a; } + + #accelerator > .stats, + #multiplier > .stats { + display: flex; + flex-direction: column; + row-gap: 8px; + } + + .buyAmount { + margin: 16px 0 22px; + position: unset; + /* left: unset; */ + } + + .buttonRow { + row-gap: 6px; + margin: 0 0 20px; + } + + .buttonRow > div:not(.buildingSpacer) { + display: grid; + grid-template-columns: 32px 1fr; + grid-template-areas: + "img name toggle" + "total total toggle" + "coins coins toggle" + "cost cost toggle"; + align-items: center; + justify-content: space-between; + border: 2px solid #49494a; + background-color: #121212; + color: #49494a; + border-radius: 8px; + padding: 8px 12px 12px; + gap: 8px 2px; + min-width: 20em; + transition-duration: var(--transition-extra); + } + + .buttonRow > div > .desc > span:first-of-type { + grid-area: name; + font-size: 1.4em; + } + + .buttonRow > div > .desc > span:last-of-type { + grid-area: total; + line-height: 1em; + } + + .buttonRow > div > .buildingPurchaseBtn { + grid-area: cost; + text-align: start; + color: inherit; + background-color: unset; + font-size: min(1em, 20px); + width: unset; + min-height: unset; + border: none; + padding: 0; + line-height: 1em; + } + + .buttonRow > div > *:not(.auto) { + pointer-events: none; + width: unset; + } + + .buttonRow > div > .auto { + grid-area: toggle; + height: 90%; + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + } + + .buttonRow > div > .auto::after { + content: ''; + width: 25px; + height: 25px; + display: block; + border: 2px solid white; + border-radius: 4px; + } + + .buttonRow > div > .auto[data-status="on"]::after { + background-color: white; + box-shadow: inset 0 0 0 2px #002400; + } + + .buttonRow > div > .auto[data-status="on"] { background-color: #002400; } + .buttonRow > div > .auto[data-status="off"] { background-color: #330000; } + + .buttonRow > div > img { + grid-area: img; + filter: brightness(0.33) grayscale(1); + } + + body.legacyIcons .buttonRow > div > img { + padding: 3px; + object-fit: none; + box-sizing: border-box; + background-color: unset; + } + + .buttonRow > div > .stats { grid-area: coins; } + + .buttonRow > div > .desc { display: contents; } + /* .buttonRow > div > .stats { line-height: 1em; } */ + + .buttonRow > .buildingPurchaseAvailable.goldBuild { + border-color: gold; + background-color: #1f1a00; + color: gold; + } + + .buttonRow > .buildingPurchaseAvailable.yellowBuild { + border-color: yellow; + background-color: #242400; + color: yellow; + } + + .buttonRow > .buildingPurchaseAvailable.pinkBuild { + border-color: pink; + background-color: #291e20; + color: pink; + } + + .buttonRow > .buildingPurchaseAvailable.cyanBuild { + border-color: cyan; + background-color: #002424; + color: cyan; + } + + .buttonRow > .buildingPurchaseAvailable.plumBuild { + border-color: plum; + background-color: #1a091a; + color: plum; + } + + .buttonRow > .buildingPurchaseAvailable.limegreenBuild { + border-color: limegreen; + background-color: #071d07; + color: limegreen; + } + + .buttonRow > .buildingPurchaseAvailable.orangeBuild { + border-color: orange; + background-color: #241700; + color: orange; + } + + .buttonRow > .buildingPurchaseAvailable > img { filter: unset; } + + .buildingPurchaseAvailable { cursor: pointer; } + .buildingPurchaseAvailable > .buildingPurchaseBtn:hover { background-color: unset; } + + .resetautomation { margin-top: 40px !important; } + #buildingtext { width: unset; } + #taxinfo { margin: 0; } +} diff --git a/index.html b/index.html index 72ab391f6..936dd5882 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,8 @@ + + Synergism @@ -236,138 +238,160 @@
-
- - - - - - - - - -
One Coin BuildingTen Coin buildings100 Coin Buildings1000 Coin Buildings10000 Coin Building100000 Coin Building
+
+ One Coin Building + Ten Coin buildings + 100 Coin Buildings + 1000 Coin Buildings + 10000 Coin Building + 100000 Coin Building
- +
-
- Worker - +
+ Worker + + Total: + - - + +
-
- Investment - - - - 0 +
+ Investment + + Total: + + + + 0
-
- Printer - - - - +
+ Printer + + Total: + + + +
-
- Coin Mint - - - - +
+ Coin Mint + + Total: + + + +
-
- Alchemy - - - - +
+ Alchemy + + Total: + + + +
-
- Accelerator - Accelerators: 0 [+0] - - - Acceleration Factor: 10.0%. Acceleration Multiplier: 1.00x +
+ Accelerator + + Total: + + + + + || +
-
- Multiplier - Multipliers: 0 [+0] - - - +
+ Multiplier + + Total: + + + + + || +
-
- Accelerator Boost - Accelerator Boosts: 0 [+0] - - - Next one adds 1.00% Acceleration Factor. +
+ Accelerator Boost + + Total: + + + + Next one adds 1.00% Acceleration Factor.

-

-

+

+