incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-22 00:21:32 +00:00
Code Issues Releases Activity Actions

v1.1

Browse source 
It is finally here!
This commit is contained in:
Aarex Tiaokhiao 2020-09-14 15:26:10 -04:00
parent 8da71643e5
commit c08042da7e
9 changed files with 848 additions and 697 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
discord.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

59
index.html
View file

@ -15,19 +15,38 @@
<div id="app"> <div id="app">
<div class="vl" v-if="player.tab!='tree'&&player.tab!='gameEnded'"></div> <div class="vl" v-if="player.tab!='tree'&&player.tab!='gameEnded'"></div>
<div v-if="player.tab=='gameEnded'" class="fullWidth"> <div v-if="player.tab=='gameEnded'" class="fullWidth">
<h2>Thank you for playing Prestige Tree v{{player.version}}!</h2><br> <br>
<h4 v-if="!player.timePlayedReset">It took you {{formatTime(player.timePlayed)}}</h4> <h2>Prestige Tree {{VERSION.withoutName}}</h2><br><br>
<h4 v-if="player.timePlayedReset">Make sure that you record the time in your stream or else your speedrun won't count!</h4><br><br><br><br><br> <h3>Congratulations! You have reached the end and beaten this game, but for now...</h3><br>
If you would like to speedrun this, play again from the beginning and record the whole thing as fast as possible, then submit in <span class="link" onclick="window.open('https://discord.gg/wwQfgPa','mywindow')" target="_blank">my discord</span><br><br><br><br><br> <h3>Please check the Discord to see there are new content updates!</h3><br><br>
<div v-if="!player.timePlayedReset">It took you {{formatTime(player.timePlayed)}} to beat the game.</div>
<div v-if="player.timePlayedReset">Make sure that you record the time in your stream or else your speedrun won't count!</div>
<br>
<button class="longUpg can" onclick="hardReset(true)">Play Again</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="longUpg can" onclick="keepGoing()">Keep Going</button> <button class="longUpg can" onclick="hardReset(true)">Play Again</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="longUpg can" onclick="keepGoing()">Keep Going</button>
<br><br><br>
<a class="link" href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Discord</a><br>
<a class="link" href="http://aarextiaokhiao.github.io/" target="_blank">Aarex's Home</a>
<br><br>
If you would like to speedrun this, press Play Again and record your attempt, then submit on the Discord Server in the channel #speedrun-submissions.
<br><br><br>
<h1>Oh, you are still reading this?</h1>
<br>
Yeah. You also can test the next update whether you want to.<br>
<a class="link">Test server</a> (Coming soon!)
<br><br>
For this next update, there will be 3 new layers which come after row 6! Stay tuned.
</div> </div>
<div v-if="player.tab=='changelog'" class="col right"> <div v-if="player.tab=='changelog'" class="col right">
<button class="back" onclick="showTab('tree')">←</button><br> <button class="back" onclick="showTab('tree')">←</button><br>
<h3>v1.1: The Life Update</h3> <h3>v1.1: The Life Update</h3>
<ul> <ul>
<li>Added 4 new layers</li> <li>Added 4 new layers</li>
<li>Added some QoL displays</li>
<li>Added Aqua theme</li>
<li>Added HQ Tree option</li>
<li>Rebalanced early parts of rows 4 - 5 progression</li> <li>Rebalanced early parts of rows 4 - 5 progression</li>
<li>Balanced up to e???,000,000</li> <li>Balanced up to e290,000,000</li>
<li>Fixed some bugs</li>
</ul><br> </ul><br>
<h3>v1.0 Patch 1</h3> <h3>v1.0 Patch 1</h3>
<ul> <ul>
@ -308,13 +327,14 @@
<button class="back" onclick="showTab('tree')">←</button><br> <button class="back" onclick="showTab('tree')">←</button><br>
<h2>Prestige Tree</h2> <h2>Prestige Tree</h2>
<br> <br>
<h3>v1.1: The Life Update</h3> <h3>{{VERSION.withName}}</h3>
<br> <br>
Made by Jacorb and Aarex Made by Jacorb and Aarex
<br> <br>
Idea by papyrus (on discord) Idea by papyrus (on discord)
<br><br> <br><br>
<div class="link" onclick="showTab('changelog')">Changelog</div><br> <div class="link" onclick="showTab('changelog')">Changelog</div><br>
<a class="link">Test server</a> (Coming soon!)<br><br>
<a class="link" href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Discord</a><br> <a class="link" href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Discord</a><br>
<a class="link" href="http://aarextiaokhiao.github.io/" target="_blank">Aarex's Home</a> <a class="link" href="http://aarextiaokhiao.github.io/" target="_blank">Aarex's Home</a>
<br> <br>
@ -360,18 +380,26 @@
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td> <td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td>
</tr> </tr>
<tr> <tr>
<td><button class="opt" onclick="switchTheme()">Theme: {{ getThemeName() }}</button></td>
<td><button class="opt" onclick="adjustMSDisp()">Show Milestones: {{ player.msDisplay.toUpperCase() }}</button></td> <td><button class="opt" onclick="adjustMSDisp()">Show Milestones: {{ player.msDisplay.toUpperCase() }}</button></td>
<td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ player.hqTree?"ON":"OFF" }}</button></td> <td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ player.hqTree?"ON":"OFF" }}</button></td>
</tr> </tr>
</table> </table>
</div> </div>
<div id="treeTab" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}"> <div id="treeTab" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}">
<div id="version" v-if="player.tab!='changelog'" onclick="showTab('changelog')">v{{player.version}}</div> <div id="version" onclick="showTab('changelog')">{{VERSION.withoutName}}</div>
<img id="optionWheel" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img> <img id="optionWheel" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
<div id="info" v-if="player.tab!='info'" onclick="showTab('info')"><br>i</div> <div id="info" v-if="player.tab!='info'" onclick="showTab('info')"><br>i</div>
<img id="discord" onclick="window.open('https://discord.gg/wwQfgPa','mywindow')" src="discord.png" target="_blank"></img>
<span v-if="player.devSpeed && player.devSpeed != 1">
<br>Dev Speed: {{format(player.devSpeed)}}x<br>
</span>
<span v-if="offTime.remain>0"> <span v-if="offTime.remain>0">
<br>Offline Time: {{formatTime(offTime.remain)}} ({{format(offTime.speed)}}x speed)<br> <br>Offline Time: {{formatTime(offTime.remain)}} ({{format(offTime.speed)}}x speed)<br>
</span> </span>
<span v-if="player.sp.unl && !player.keepGoing">
<br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
</span>
<br> <br>
<span v-if="player.points.lt('1e1000')">You have </span> <span v-if="player.points.lt('1e1000')">You have </span>
<h2 id="points">{{format(player.points)}}</h2> <h2 id="points">{{format(player.points)}}</h2>
@ -483,12 +511,12 @@
</table><br><br> </table><br><br>
You have {{formatWhole(getSpace())}} Space remaining for Space Buildings.<br> You have {{formatWhole(getSpace())}} Space remaining for Space Buildings.<br>
You have {{ format(player.g.power) }} Generator Power<br><br> You have {{ format(player.g.power) }} Generator Power<br><br>
<button onclick="respecSpaceBuildings()" v-bind:class="{ longUpg: true, can: player.s.unl, locked: !player.s.unl }">Respec Space Buildings</button><br> <button onclick="respecSpaceBuildings()" v-bind:class="{ longUpg: true, s: true, can: player.s.unl, locked: !player.s.unl }">Respec Space Buildings</button><br>
<div class="upgRow"> <div class="upgRow">
<div v-for="id in tmp.s.trueSbUnl"> <div v-for="id in tmp.s.trueSbUnl">
<button v-bind:class="{ upg: true, can: (player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1)), locked: (!(player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1))), s: true }" v-on:click="buyBuilding(id)"><h3>Building {{id}}</h3><br>{{getSpaceBuildingEffDesc(id)}}<br><br>Level: {{formatWhole(tmp.s.sb[id])}}<br>Cost: {{format(getSpaceBuildingCost(id))}} Generator Power</button><br><br> <button v-bind:class="{ upg: true, can: (player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1)), locked: (!(player.g.power.gte(getSpaceBuildingCost(id))&&player.s.unl&&getSpace().gte(1))), s: true }" v-on:click="buyBuilding(id)"><h3>Building {{id}}</h3><br>{{getSpaceBuildingEffDesc(id)}}<br><br>Level: {{formatWhole(tmp.s.sb[id])}}<br>Cost: {{format(getSpaceBuildingCost(id))}} Generator Power</button><br><br>
<button v-if="player.q.best.gte(2500)" v-bind:class="{ longUpg: true, can: tmp.s.sb[id].gte(1), locked: tmp.s.sb[id].lt(1) }" v-on:click="destroyBuilding(id)">Destroy One</button><br> <button v-if="player.q.best.gte(2500)" v-bind:class="{ longUpg: true, s: true, can: tmp.s.sb[id].gte(1), locked: tmp.s.sb[id].lt(1) }" v-on:click="destroyBuilding(id)">Destroy One</button><br>
<button v-if="player.q.best.gte(2500)" v-bind:class="{ longUpg: true, can: tmp.s.sb[id].gte(1), locked: tmp.s.sb[id].lt(1) }" v-on:click="destroyBuilding(id, true)">Destroy All</button> <button v-if="player.q.best.gte(2500)" v-bind:class="{ longUpg: true, s: true, can: tmp.s.sb[id].gte(1), locked: tmp.s.sb[id].lt(1) }" v-on:click="destroyBuilding(id, true)">Destroy All</button>
</div> </div>
</div> </div>
</div> </div>
@ -571,8 +599,8 @@
</div> </div>
<div v-if="layer=='ps'"> <div v-if="layer=='ps'">
<table> <table>
<tr v-if="milestoneShown(player.ps.best.gte(3), true)"><td v-bind:class="{ milestone: player.ps.best.lt(5), milestoneDone: player.ps.best.gte(3) }"><h3>3 Phantom Souls</h3><br>You can buy max Phantom Souls, and automatically purchase Phantom Souls&nbsp;&nbsp;&nbsp;<button v-if="player.ps.best.gte(3)" class="smallUpg can ps" onclick="toggleAuto('ps')">{{player.ps.auto?"ON":"OFF"}}</button></td></tr> <tr v-if="milestoneShown(player.ps.best.gte(2), true)"><td v-bind:class="{ milestone: player.ps.best.lt(5), milestoneDone: player.ps.best.gte(2) }"><h3>2 Phantom Souls</h3><br>Automatically purchase Phantom Souls&nbsp;&nbsp;&nbsp;<button v-if="player.ps.best.gte(2)" class="smallUpg can ps" onclick="toggleAuto('ps')">{{player.ps.auto?"ON":"OFF"}}</button></td></tr>
<tr v-if="milestoneShown(player.ps.best.gte(5))"><td v-bind:class="{ milestone: player.ps.best.lt(5), milestoneDone: player.ps.best.gte(5) }"><h3>5 Phantom Souls</h3><br>Phantom Souls reset nothing</td></tr> <tr v-if="milestoneShown(player.ps.best.gte(5))"><td v-bind:class="{ milestone: player.ps.best.lt(5), milestoneDone: player.ps.best.gte(5) }"><h3>5 Phantom Souls</h3><br>You can buy max Phantom Souls, and Phantom Souls reset nothing</td></tr>
</table><br><br> </table><br><br>
</div> </div>
<div v-if="layer=='sp'"> <div v-if="layer=='sp'">
@ -595,7 +623,7 @@
</div> </div>
<div v-if="layer=='hs'"> <div v-if="layer=='hs'">
<table> <table>
<tr v-if="milestoneShown(player.hs.best.gte(2e4))"><td v-bind:class="{ milestone: player.hs.best.lt(2e4), milestoneDone: player.hs.best.gte(2e4) }"><h3>20,000 Hyperspace Energy</h3><br>Gain 10% of Super-Prestige Points gain every second</td></tr> <tr v-if="milestoneShown(player.hs.best.gte(2e4))"><td v-bind:class="{ milestone: player.hs.best.lt(2e4), milestoneDone: player.hs.best.gte(2e4) }"><h3>20,000 Hyperspace Energy</h3><br>Gain 1% of Super-Prestige Points gain every second</td></tr>
</table> </table>
<br><br> <br><br>
You have {{formatWhole(player.ba.points)}} Balance Energy You have {{formatWhole(player.ba.points)}} Balance Energy
@ -620,13 +648,14 @@
Next Life Brick is at {{format(player.l.power)}} / {{format(IMPERIUM.lifeReq())}} Life Power Next Life Brick is at {{format(player.l.power)}} / {{format(IMPERIUM.lifeReq())}} Life Power
<br><br> <br><br>
<button v-on:click="IMPERIUM.build()" v-bind:class="{ upgBig: true, i: true, can: IMPERIUM.canBuild(), locked: !IMPERIUM.canBuild() }"> <button v-on:click="IMPERIUM.build()" v-bind:class="{ upgBig: true, i: true, can: IMPERIUM.canBuild(), locked: !IMPERIUM.canBuild() }">
<h3>Imperium Buildings</h3><br>
<span v-if="tmp.s.sbUnl.lt(SPACE_BUILDINGS.max)">Build Space Building {{formatWhole(tmp.s.sbUnl.add(1))}}</span> <span v-if="tmp.s.sbUnl.lt(SPACE_BUILDINGS.max)">Build Space Building {{formatWhole(tmp.s.sbUnl.add(1))}}</span>
<span v-if="tmp.s.sbUnl.gte(SPACE_BUILDINGS.max)">Enhance<sup v-if="tmp.s.sbUnl.div(SPACE_BUILDINGS.max).gte(2)">{{formatWhole(tmp.s.sbUnl.div(SPACE_BUILDINGS.max).floor())}}</sup> Space Building {{formatWhole(tmp.s.sbUnl.sub(tmp.s.sbUnl.div(SPACE_BUILDINGS.max).floor().times(SPACE_BUILDINGS.max)).add(1))}}</span> <span v-if="tmp.s.sbUnl.gte(SPACE_BUILDINGS.max)">Enhance<sup v-if="tmp.s.sbUnl.div(SPACE_BUILDINGS.max).gte(2)">{{formatWhole(tmp.s.sbUnl.div(SPACE_BUILDINGS.max).floor())}}</sup> Space Building {{formatWhole(tmp.s.sbUnl.sub(tmp.s.sbUnl.div(SPACE_BUILDINGS.max).floor().times(SPACE_BUILDINGS.max)).add(1))}}</span>
<br> <br>
Built Buildings: {{formatWhole(player.i.extraBuildings)}} Built Buildings: {{formatWhole(player.i.extraBuildings)}}
<br><br> <br><br>
<span v-if="!player.i.building">Cost: {{0}} Imperium Bricks & {{0}} Life Bricks</span> <span v-if="!player.i.building">Cost: {{IMPERIUM.cost().i}} Imperium Bricks & {{IMPERIUM.cost().l}} Life Bricks</span>
<span v-if="player.i.building">Progress: {{format(player.i.progress * 100)}}%<br><br>Click to cancel building</span> <span v-if="player.i.building">Progress: {{format(player.i.progress * 100)}}%<br>Your Super-Generator Power speeds up your progress by {{format(IMPERIUM.sgSpeedBoost())}}x<br><br>Click to cancel building</span>
</button> </button>
<br> <br>
Your Work is currently {{format(tmp.i.work)}}, which reduces the gain power of rows 1 - 5 by {{format(tmp.i.workEff)}}x Your Work is currently {{format(tmp.i.work)}}, which reduces the gain power of rows 1 - 5 by {{format(tmp.i.workEff)}}x

4
js/break_eternity.js
View file

@ -212,10 +212,6 @@
this.layer = 0; this.layer = 0;
this.mag = 0; this.mag = 0;
} }
if (isNaN(this.sign)) this.sign = 0
if (isNaN(this.layer)) this.layer = 0
if (isNaN(this.mag)) this.mag = 0
} }
Object.defineProperty(Decimal.prototype, "m", { Object.defineProperty(Decimal.prototype, "m", {

12
js/canvas.js
View file

@ -23,10 +23,18 @@ function resizeCanvas() {
} }
var colors = { var colors = {
default: {
1: "#ffffff", 1: "#ffffff",
2: "#bfbfbf", 2: "#bfbfbf",
3: "#7f7f7f" 3: "#7f7f7f",
},
aqua: {
1: "#bfefff",
2: "#8fb3bf",
3: "#5f777f",
},
} }
var colors_theme
function drawTree() { function drawTree() {
if (!retrieveCanvasData()) return; if (!retrieveCanvasData()) return;
@ -107,7 +115,7 @@ function drawTreeBranch(num1, num2, color_id = 1) { // taken from Antimatter Dim
let y2 = end.top + (end.height / 2) + (document.getElementById("treeTab").scrollTop || document.body.scrollTop); let y2 = end.top + (end.height / 2) + (document.getElementById("treeTab").scrollTop || document.body.scrollTop);
ctx.lineWidth = 15; ctx.lineWidth = 15;
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = colors[color_id] ctx.strokeStyle = colors_theme[color_id]
ctx.moveTo(x1, y1); ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2); ctx.lineTo(x2, y2);
ctx.stroke(); ctx.stroke();

1412
js/game.js
View file

File diff suppressed because it is too large Load diff

4
js/temp.js
View file

@ -41,7 +41,7 @@ function updateTemp() {
tmp.enhEff2 = getEnhancerEff2() tmp.enhEff2 = getEnhancerEff2()
tmp.subbedEnh = new Decimal(0) tmp.subbedEnh = new Decimal(0)
if (tmp.challActive ? tmp.challActive.h[52] : true) { if (tmp.challActive ? tmp.challActive.h[52] : true) {
tmp.subbedEnh = tmp.subbedEnh.plus(new Decimal(player.h.time).times(40).plus(1).log10().pow(10).max(10)).round() tmp.subbedEnh = tmp.subbedEnh.add(new Decimal(player.h.time).times(40).add(1).log10().pow(10).max(10)).round()
} }
tmp.freeExtCap = getFreeExtCapsules() tmp.freeExtCap = getFreeExtCapsules()
@ -121,7 +121,7 @@ function updateTemp() {
data.compressed = tmp.s.sbUnl.sub(SPACE_BUILDINGS.max).max(0).floor().toNumber() data.compressed = tmp.s.sbUnl.sub(SPACE_BUILDINGS.max).max(0).floor().toNumber()
data.work = new Decimal(1) data.work = new Decimal(1)
if (player.i.building) data.work = data.work.add(player.i.extraBuildings.add(1).log10().add(2).div(5)) if (player.i.building) data.work = data.work.add(player.i.extraBuildings.add(4).sqrt().div(5))
data.workEff = Decimal.pow(2, data.work.sub(1)) data.workEff = Decimal.pow(2, data.work.sub(1))
} }
} }

3
js/v.js
View file

@ -35,6 +35,7 @@ function loadVue() {
formatWhole, formatWhole,
formatTime, formatTime,
focused, focused,
getThemeName,
layerUnl, layerUnl,
getLayerEffDesc, getLayerEffDesc,
doReset, doReset,
@ -56,6 +57,8 @@ function loadVue() {
spellActive, spellActive,
updateToCast, updateToCast,
keepGoing, keepGoing,
VERSION,
ENDGAME,
LAYERS, LAYERS,
LAYER_RES, LAYER_RES,
LAYER_TYPE, LAYER_TYPE,

BIN
options_wheel.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

45
style.css
View file

@ -13,9 +13,12 @@
} }
body { body {
background-color: black; background-color: var(--background);
color: #dfdfdf; color: var(--color);
overflow: hidden; overflow: hidden;
--background: #000000;
--color: #dfdfdf;
--points: #ffffff;
} }
html, body { html, body {
@ -79,7 +82,7 @@ h1, h2, h3, b, input {
.can:hover { .can:hover {
transform: scale(1.15, 1.15); transform: scale(1.15, 1.15);
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5) box-shadow: 0px 0px 20px var(--points)
} }
.treeNode.notify { .treeNode.notify {
@ -91,7 +94,7 @@ h1, h2, h3, b, input {
.treeNode.can:hover { .treeNode.can:hover {
transform: scale(1.15, 1.15); transform: scale(1.15, 1.15);
box-shadow: var(--hqProperty2a), 0px 0px 20px rgba(255, 255, 255, 0.5); box-shadow: var(--hqProperty2a), 0px 0px 20px var(--points);
z-index: 4 z-index: 4
} }
@ -104,16 +107,16 @@ h1, h2, h3, b, input {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
background-color: black; background-color: var(--background);
border: 1px solid black; border: 1px solid var(--background);
color: white; color: var(--color);
font-size: 40px; font-size: 40px;
cursor: pointer; cursor: pointer;
} }
.back:hover { .back:hover {
transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);
text-shadow: 0px 0px 7px white; text-shadow: 0px 0px 7px var(--color);
} }
.reset { .reset {
@ -144,6 +147,7 @@ h1, h2, h3, b, input {
.longUpg { .longUpg {
height: 50px; height: 50px;
width: 120px; width: 120px;
background: var(--points);
border-radius: 50%; border-radius: 50%;
border: 2px solid; border: 2px solid;
border-color: rgba(255, 255, 255, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.125); border-color: rgba(255, 255, 255, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.125);
@ -159,8 +163,8 @@ h1, h2, h3, b, input {
} }
#points { #points {
color: white; color: var(--points);
text-shadow: 0px 0px 10px white; text-shadow: 0px 0px 10px var(--points);
} }
.p { .p {
@ -425,13 +429,26 @@ h1, h2, h3, b, input {
-3px 0px 12px #02f2f2; -3px 0px 12px #02f2f2;
} }
#discord {
position: absolute;
top: 120px;
left: 4px;
width: 40px;
height: 40px;
cursor: pointer
}
#discord:hover {
transform: scale(1.2, 1.2);
}
#version { #version {
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 4px; top: 4px;
text-align: right; text-align: right;
color: white; color: var(--points);
text-shadow: 0px 0px 10px #ffffff; text-shadow: 0px 0px 10px var(--points);
cursor: pointer; cursor: pointer;
} }
@ -471,7 +488,7 @@ a {
width: 100px; width: 100px;
border-radius: 25%; border-radius: 25%;
border: 4px solid; border: 4px solid;
background-color: #a1a1a1; background-color: var(--color);
border-color: rgba(255, 255, 255, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.125); border-color: rgba(255, 255, 255, 0.125) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.125);
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
@ -553,7 +570,7 @@ a {
} }
.vl { .vl {
border-left: 6px solid #969696; border-left: 6px solid var(--color);
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 50%; left: 50%;