From 4bdd9004c43fb36fe39df3aab4bfe364948a6407 Mon Sep 17 00:00:00 2001 From: Harley White Date: Mon, 7 Jun 2021 20:16:11 -0400 Subject: [PATCH] Moved styles and broke up the files for them --- css/bars.css | 38 ++ css/components.css | 166 ++++++++ css/general-style.css | 41 ++ css/misc.css | 83 ++++ css/other-tabs.css | 111 ++++++ popup.css => css/popup.css | 0 css/system-style.css | 248 ++++++++++++ css/tree-node.css | 103 +++++ demo.html | 10 +- index.html | 9 +- js/components.js | 2 +- style.css | 785 ------------------------------------- 12 files changed, 807 insertions(+), 789 deletions(-) create mode 100644 css/bars.css create mode 100644 css/components.css create mode 100644 css/general-style.css create mode 100644 css/misc.css create mode 100644 css/other-tabs.css rename popup.css => css/popup.css (100%) create mode 100644 css/system-style.css create mode 100644 css/tree-node.css delete mode 100644 style.css diff --git a/css/bars.css b/css/bars.css new file mode 100644 index 0000000..3bcf74d --- /dev/null +++ b/css/bars.css @@ -0,0 +1,38 @@ +.barBase { + overflow: hidden; + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + display:table +} + +.barBorder { + border: 2px solid; + border-radius: 10px; + border-color: var(--color); + overflow: hidden; + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + margin:0 +} + +.overlayTextContainer { + z-index: 3; + border-radius: 10px; + vertical-align: middle; + display: flex; + justify-content: center; + align-items: left; + position: absolute; +} + +.fill { + background-color: var(--color); + z-index:2; + position: absolute; + overflow: hidden; + margin-left: -0.5px; + transition-duration: 0.2s; + +} + +.overlayText { + z-index: 6; +} \ No newline at end of file diff --git a/css/components.css b/css/components.css new file mode 100644 index 0000000..ac42fd6 --- /dev/null +++ b/css/components.css @@ -0,0 +1,166 @@ +.upg { + min-height: 120px; + width: 120px; + border-radius: 25%; + border: 2px solid; + border-color: rgba(0, 0, 0, 0.125); + font-size: 10px; + overflow: visible; +} + +.achievement { + height: 90px; + width: 90px; + border-radius: 25%; + border: 2px solid; + border-color: rgba(0, 0, 0, 0.125); + font-size: 10px; + color: white; + text-shadow: 0 0 2px #000000; +} +.achievement:hover { + box-shadow: 0 0 10px var(--points); + z-index: 7; +} + +.buyable { + height: 200px; + width: 200px; + border-radius: 25%; + border: 2px solid; + border-color: rgba(0, 0, 0, 0.125); + font-size: 10px; + position:relative; +} + +.milestone { + width: 100%; + min-width: 120px; + padding-left: 5px; + padding-right: 5px; + height: 75px; + background-color: #bf8f8f; + border: 4px solid; + border-radius: 4px; + border-color: rgba(0, 0, 0, 0.125); + color: rgba(0, 0, 0, 0.5); +} + +.milestoneDone { + width: 100%; + min-width: 120px; + padding-left: 5px; + padding-right: 5px; + + height: 75px; + background-color: #77bf5f; + border: 4px solid; + border-radius: 4px; + border-color: rgba(0, 0, 0, 0.125); + color: rgba(0, 0, 0, 0.5); +} + +.challenge { + background-color: #bf8f8f; + position: relative; + border: 4px solid; + border-color: rgba(0, 0, 0, 0.125); + color: rgba(0, 0, 0, 0.5); + width: 300px; + height: 300px; + font-size: 15px; + border-radius: 33.33%; +} + +.challenge.done { + background-color: #77bf5f; +} + +.challenge.canComplete { + background-color: #ffbf00; +} + +/* Infoboxes */ +.story { + width: 600px; + max-width: 95%; + border-bottom: solid 4px; + border-radius: 8px; + margin-bottom: 8px; + text-align: left; +} + +.story-title { + text-align: left; + font-size: 24px; + color: black; + cursor: pointer; + border: none; + padding: 2px; + border-radius: 8px 8px 0 0; +} + +.story-toggle { + border: none; + background: black; + color: white; + font-size: 20px; + pointer-events: none; + width: 1em; + display: inline-block; +} + +.story-text { + padding: 2px; + border: solid 4px; + border-color: inherit; + border-radius: inherit; + border-top-left-radius: 0; + margin-bottom: -2px; +} + + +/* Tiles are gridables */ +.tile { + height: 80px; + width: 80px; + border-radius: 15%; + border: 2px solid; + border-color: rgba(0, 0, 0, 0.125); + font-size: 10px; + overflow: visible; +} + +.tile.can:hover { + box-shadow: 0 0 10px var(--points); + transform: scale(1.1, 1.1); + z-index: 7; +} + +.upgBig { + height: 200px; + width: 200px; + border-radius: 25%; + border: 2px solid; + border-color: rgba(0, 0, 0, 0.125); +} + +/* Used for respec button and similar */ +.longUpg { + height: 50px; + width: 120px; + background: var(--points); + border-radius: 50%; + border: 2px solid; + border-color: rgba(0, 0, 0, 0.125); + font-size: 10px; +} + +.smallUpg { + height: 40px; + width: 40px; + border-radius: 25%; + border: 2px solid; + border-color: rgba(0, 0, 0, 0.125); +} + diff --git a/css/general-style.css b/css/general-style.css new file mode 100644 index 0000000..0173a2d --- /dev/null +++ b/css/general-style.css @@ -0,0 +1,41 @@ +/* Global things */ +body { + color: var(--color); + overflow: hidden; + --background: #0f0f0f; + --color: #dfdfdf; + --points: #ffffff; + background: var(--background) +} + +/* General text */ +h1, h2, h3, b, input { + display: inline; + font-family: "Lucida Console", "Courier New", monospace +} + +/* These are styles for different states of components. You can make layer-specific versions with .c.locked, for example */ +.locked { + background-color: #bf8f8f; + cursor: not-allowed; +} + +/* Can meens can be clicked/bought/etc */ +.can { + cursor: pointer; +} + +.can:hover { + transform: scale(1.15, 1.15); + box-shadow: 0 0 20px var(--points) +} + +.bought { + background-color: #77bf5f; + cursor: default; +} + +#points { + color: var(--points); + text-shadow: 0 0 10px var(--points); +} diff --git a/css/misc.css b/css/misc.css new file mode 100644 index 0000000..0cb6234 --- /dev/null +++ b/css/misc.css @@ -0,0 +1,83 @@ + +/* Prestige button */ +.reset { + height: 120px; + width: 180px; + border-radius: 25%; + border: 4px solid; + border-color: rgba(0, 0, 0, 0.125); +} + +.tabButton { + background-color: transparent; + color: var(--color); + font-size: 20px; + cursor: pointer; + padding: 5px 20px; + margin: 5px; + border-radius: 10px; + border: 2px solid; + color: var(--color); + +} + +.tabButton:hover { + transform: scale(1.1, 1.1); + text-shadow: 0 0 7px var(--color); +} + +.tooltip { + pointer-events: none; + text-align: center; + width: 150px; + font-size: 16px; + line-height: 1.2; + bottom: 100%; + left: 50%; + margin-bottom: 5px; + margin-left: -80px; + padding: 7px; + font-family: "Lucida Console", "Courier New", monospace; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + opacity: 0; + transition: opacity 0.5s; + + position: absolute; + z-index: 20000 ; + + background-color: var(--background_tooltip); + color: var(--points); + content: attr(tooltip); + font-size:14px; + + } + + .tooltip::after { + content: " "; + position: absolute; + bottom: 100%; + left: 50%; + + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: var(--background_tooltip) transparent transparent transparent; + } + +/* Horizontal/vertical lines */ +.vl { + border-left: 6px solid var(--color); + height: 100%; + position: absolute; + left: 50%; + margin-left: -3px; + top: 0 +} + +.hl { + border-top: 3px solid var(--color); +} diff --git a/css/other-tabs.css b/css/other-tabs.css new file mode 100644 index 0000000..e6f3a58 --- /dev/null +++ b/css/other-tabs.css @@ -0,0 +1,111 @@ + +#optionWheel { + position: absolute; + top: 0; + left: 0; + height: 50px; + width: 50px; + cursor: pointer; +} + +#optionWheel:hover { + transform: rotate(360deg); +} + +#info { + font-size: 20px; + color: white; + position: absolute; + top: 50px; + left: 4px; + cursor: pointer; + width: 40px; + height: 40px; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #02f2f2; +} + +#info:hover { + transform: scale(1.2, 1.2); + text-shadow: 5px 0 10px #02f2f2, + -3px 0 12px #02f2f2; +} + +#discord { + position: absolute; + top: 120px; + left: 4px; + width: 40px; + height: 40px; +} + +#discord img { + width: 100%; + height: 100%; +} + +#discord-links { + position: absolute; + top: 0; + padding-top: 44px; + left: -244px; + width: 200px; + transition: left .3s ease; +} + +#discord:hover #discord-links { + left: -4px; +} + +#version { + position: absolute; + right: 4px; + top: 4px; + text-align: right; + color: var(--points); + text-shadow: 0 0 10px var(--points); + cursor: pointer; +} + +#version:hover { + transform: scale(1.1, 1.1); + right: 4.8px; +} + +a { + color: #007fff; + text-decoration-line: none; + cursor: pointer +} + +.link { + display: block; + font-size: 20px; + color: #41f5f5; + cursor: pointer; + font-family: "Lucida Console", "Courier New", monospace; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #02f2f2; + text-decoration: none; +} + +.link:hover { + transform: scale(1.2, 1.2); + text-shadow: 5px 0 10px #02f2f2, + -3px 0 12px #02f2f2; +} + +.opt { + height: 100px; + width: 100px; + border-radius: 25%; + border: 4px solid; + background-color: var(--color); + border-color: rgba(0, 0, 0, 0.125); + color: rgba(0, 0, 0, 0.5); + cursor: pointer; +} + +.opt:hover { + background-color: #439ea3; +} \ No newline at end of file diff --git a/popup.css b/css/popup.css similarity index 100% rename from popup.css rename to css/popup.css diff --git a/css/system-style.css b/css/system-style.css new file mode 100644 index 0000000..e180dc5 --- /dev/null +++ b/css/system-style.css @@ -0,0 +1,248 @@ +* { + transition-duration: 0.5s; + text-align: center; + font-family: "Inconsolata", monospace; + font-weight: bold; + table-align: center; + margin: auto; + -webkit-text-size-adjust: none; + text-size-adjust: none; + +} + +*:focus { + outline: none; + webkit-outline: none; +} + +html, body { + min-height: 100%; + height: 100%; +} + +td { + padding: 0 +} + +.upgTable { + display: flex !important; + flex-flow: column wrap; + justify-content: center; + align-items: center; + max-width: 100%; + margin: 0 auto; +} + +.upgRow { + display: flex !important; + flex-flow: row wrap; + justify-content: center; + align-items: center; + max-width: 100%; + margin: 0 auto; +} + +.upgAlign { + vertical-align: 0 +} + +.bigUpgAlign { + vertical-align: 0 +} + +.treeThing { + margin: 0 10px 0 10px; + vertical-align: middle; +} + +.can.upg:hover { + z-index: 2 +} + +.can.buyable:hover { + z-index: 2 +} + +.back { + position: absolute; + top: 0; + left: 0; + background-color: transparent; + border: 1px solid transparent; + color: var(--color); + font-size: 40px; + cursor: pointer; +} + +.other-back { + position: absolute; + top: 0; + left: 60px; + background-color: transparent; + border: 1px solid transparent; + color: var(--color); + font-size: 60px; + cursor: pointer; +} + +.back:hover { + transform: scale(1.1, 1.1); + text-shadow: 0 0 7px var(--color); +} + +.hidden { + visibility: hidden; + height: 50px !important; +} + +.canvas { + top: 0; + left: 0; + position: absolute; + z-index: -999; +} + +.left { + position: absolute; + left: 0; +} + +.remove { + height: 24px; + width: 24px; + cursor: pointer; +} + +.remove:hover { + transform: scale(1.1, 1.1); +} + +.col { + min-width: 49.5%; + max-width: 49.5%; + width: 49.5%; + height: 100%; + min-height: 100%; + column-span: 1; + position: absolute; + overflow-y: auto; + overflow-x: auto; + transition-duration: 0s +} + +.instant { + transition-duration: 0s !important +} + +.fast { + transition:color none +} + +.col.right { + top: 0; + right: 0; +} + +#app { + column-count: 2; + column-width: 50%; + min-height: 100%; +} + +.vl2 { + border-left: 3px solid var(--color); + height: 100%; +} + +ul { + list-style-type: none; +} + +.fullWidth { + position: absolute; + height: 100%; + width: 100%; + min-width: 100%; + overflow-y: auto; + overflow-x: auto; + transition-duration: 0s +} + +.tooltipBox { + position: relative; + display: inline-block; + } + + .tooltipBox:hover .tooltip{ + opacity: 1; + } + + .forceTooltip .tooltip{ + opacity: 1; + } + + +#loadingSection { + display: flex; + flex-direction: column; + justify-content: center; +} + +.treeOverlay { + pointer-events:none; + overflow:hidden; +} + +.front { + z-index: 30000 +} + +.overlayThing { + z-index: 10000; + pointer-events:auto; +} + +.sideLayers { + z-index: 10000; + pointer-events:auto; + position: absolute; + right: 55px; + top: 65px; + background-color: transparent; +} + +button > * { + pointer-events:none; +} + +.ghost { + visibility: hidden +} + +#treeTab td button { + margin: 0 10px; +} + +.bg { + z-index: -9000; + width: 100%; + height: 100%; + position: absolute; + background-color: transparent; + top: 0 +} + +.bg2 { + z-index: -9009; + width: 100%; + height: 100%; + position: absolute; + top: 0 +} + +.noBackground { + background: transparent !important; + background-image: none !important; + --background: transparent !important; +} + diff --git a/css/tree-node.css b/css/tree-node.css new file mode 100644 index 0000000..73ff441 --- /dev/null +++ b/css/tree-node.css @@ -0,0 +1,103 @@ +/* Tree nodes, button nodes, and side layers */ +.treeNode { + height: 100px; + width: 100px; + border: var(--hqProperty1); + border-color: rgba(0, 0, 0, 0.125); + border-radius: 50%; + box-shadow: var(--hqProperty2a), var(--hqProperty2b); + font-size: 40px; + font-family: "Lucida Console", "Courier New", monospace; + color: rgba(0, 0, 0, 0.5); + text-shadow: var(--hqProperty3); + padding: 0; + margin: 0 10px 0 10px; +} + +.treeButton { + height: 100px; + width: 100px; + border: var(--hqProperty1); + border-color: rgba(0, 0, 0, 0.125); + border-radius: 33%; + box-shadow: var(--hqProperty2a), var(--hqProperty2b); + font-size: 40px; + font-family: "Lucida Console", "Courier New", monospace; + color: rgba(0, 0, 0, 0.5); + text-shadow: var(--hqProperty3); + padding: 0; +} + +.smallNode { + height: 60px; + width: 60px; + font-size: 30px; +} + +.resetNotify { + box-shadow: var(--hqProperty2a), 0 0 8px #ffffff; +} + +.treeNode.can:hover { + transform: scale(1.15, 1.15); + box-shadow: var(--hqProperty2a), 0 0 20px var(--points); +} + +.notify { + transform: scale(1.05, 1.05); + border-color: rgba(0, 0, 0, 0.125); + box-shadow: var(--hqProperty2a), 0 0 20px #ff0000; +} + + + +.mark { + position: relative; + display: inline-block; + width: 30px; + height: 30px; + z-index: 10000; + margin-left: 0.9em; + margin-right: 0.9em; + margin-bottom: 1.2em; + border-right: 0.3em solid transparent; + border-bottom: 0.7em solid transparent; + border-left: 0.3em solid transparent; + font-size: 10px; + overflow:auto; + pointer-events: none; +} + +.star { + position: relative; + display: inline-block; + width: 0; + height: 0; + z-index: 10000; + margin-left: 0.9em; + margin-right: 0.9em; + margin-bottom: 1.2em; + border-right: 0.3em solid transparent; + border-bottom: 0.7em solid #ffcc00; + border-left: 0.3em solid transparent; + font-size: 10px; + pointer-events: none; + +} + +.star:before, .star:after { + content: ""; + width: 0; + height: 0; + position: absolute; + top: .6em; + left: -1em; + border-right: 1em solid transparent; + border-bottom: 0.7em solid #ffcc00; + border-left: 1em solid transparent; + transform: rotate(-35deg); +} + +.star:after { + transform: rotate(35deg); +} \ No newline at end of file diff --git a/demo.html b/demo.html index a4bd643..144fa28 100644 --- a/demo.html +++ b/demo.html @@ -2,8 +2,14 @@ - - + + + + + + + + diff --git a/index.html b/index.html index 8e03186..237fd69 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,14 @@ - + + + + + + + + diff --git a/js/components.js b/js/components.js index c51ab1e..8ab36cb 100644 --- a/js/components.js +++ b/js/components.js @@ -138,7 +138,7 @@ function loadVue() { props: ['layer', 'data'], template: `
+ v-bind:class="['challenge', challengeStyle(layer, data), inChallenge(layer, data) ? 'resetNotify' : '']" v-bind:style="tmp[layer].challenges[data].style">





diff --git a/style.css b/style.css deleted file mode 100644 index 164e71b..0000000 --- a/style.css +++ /dev/null @@ -1,785 +0,0 @@ -* { - transition-duration: 0.5s; - text-align: center; - font-family: "Inconsolata", monospace; - font-weight: bold; - table-align: center; - margin: auto; - -webkit-text-size-adjust: none; - text-size-adjust: none; - -} - -*:focus { - outline: none; - webkit-outline: none; -} - -body { - color: var(--color); - overflow: hidden; - --background: #0f0f0f; - --color: #dfdfdf; - --points: #ffffff; - background: var(--background) -} - -html, body { - min-height: 100%; - height: 100%; -} - -td { - padding: 0 -} - -.upgTable { - display: flex !important; - flex-flow: column wrap; - justify-content: center; - align-items: center; - max-width: 100%; - margin: 0 auto; -} - -.upgRow { - display: flex !important; - flex-flow: row wrap; - justify-content: center; - align-items: center; - max-width: 100%; - margin: 0 auto; -} - -.upgAlign { - vertical-align: 0 -} - -.bigUpgAlign { - vertical-align: 0 -} - -h1, h2, h3, b, input { - display: inline; - font-family: "Lucida Console", "Courier New", monospace -} - - - -.treeNode { - height: 100px; - width: 100px; - border: var(--hqProperty1); - border-color: rgba(0, 0, 0, 0.125); - border-radius: 50%; - box-shadow: var(--hqProperty2a), var(--hqProperty2b); - font-size: 40px; - font-family: "Lucida Console", "Courier New", monospace; - color: rgba(0, 0, 0, 0.5); - text-shadow: var(--hqProperty3); - padding: 0; - margin: 0 10px 0 10px; -} - - -.treeButton { - height: 100px; - width: 100px; - border: var(--hqProperty1); - border-color: rgba(0, 0, 0, 0.125); - border-radius: 33%; - box-shadow: var(--hqProperty2a), var(--hqProperty2b); - font-size: 40px; - font-family: "Lucida Console", "Courier New", monospace; - color: rgba(0, 0, 0, 0.5); - text-shadow: var(--hqProperty3); - padding: 0; -} - -.treeThing { - margin: 0 10px 0 10px; - vertical-align: middle; -} - -.smallNode { - height: 60px; - width: 60px; - font-size: 30px; -} - - -.locked { - background-color: #bf8f8f; - cursor: not-allowed; -} - -.can { - cursor: pointer; -} - -.can:hover { - transform: scale(1.15, 1.15); - box-shadow: 0 0 20px var(--points) -} - -.can.upg:hover { - z-index: 2 -} - -.can.buyable:hover { - z-index: 2 -} - -.resetNotify { - box-shadow: var(--hqProperty2a), 0 0 8px #ffffff; -} - -.treeNode.can:hover { - transform: scale(1.15, 1.15); - box-shadow: var(--hqProperty2a), 0 0 20px var(--points); -} - -.notify { - transform: scale(1.05, 1.05); - border-color: rgba(0, 0, 0, 0.125); - box-shadow: var(--hqProperty2a), 0 0 20px #ff0000; -} - -.bought { - background-color: #77bf5f; - cursor: default; -} - -.back { - position: absolute; - top: 0; - left: 0; - background-color: transparent; - border: 1px solid transparent; - color: var(--color); - font-size: 40px; - cursor: pointer; -} - -.other-back { - position: absolute; - top: 0; - left: 60px; - background-color: transparent; - border: 1px solid transparent; - color: var(--color); - font-size: 60px; - cursor: pointer; -} - - -.back:hover { - transform: scale(1.1, 1.1); - text-shadow: 0 0 7px var(--color); -} - -.barBase { - overflow: hidden; - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); - display:table -} - -.barBorder { - border: 2px solid; - border-radius: 10px; - border-color: var(--color); - overflow: hidden; - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); - margin:0 -} - -.overlayTextContainer { - z-index: 3; - border-radius: 10px; - vertical-align: middle; - display: flex; - justify-content: center; - align-items: left; - position: absolute; -} - -.fill { - background-color: var(--color); - z-index:2; - position: absolute; - overflow: hidden; - margin-left: -0.5px; - transition-duration: 0.2s; - -} - -.overlayText { - z-index: 6; -} - -.tabButton { - background-color: transparent; - color: var(--color); - font-size: 20px; - cursor: pointer; - padding: 5px 20px; - margin: 5px; - border-radius: 10px; - border: 2px solid; - color: var(--color); - -} - -.tabButton:hover { - transform: scale(1.1, 1.1); - text-shadow: 0 0 7px var(--color); -} - -.reset { - height: 120px; - width: 180px; - border-radius: 25%; - border: 4px solid; - border-color: rgba(0, 0, 0, 0.125); -} - -.upg { - min-height: 120px; - width: 120px; - border-radius: 25%; - border: 2px solid; - border-color: rgba(0, 0, 0, 0.125); - font-size: 10px; - overflow: visible; -} - -.achievement { - height: 90px; - width: 90px; - border-radius: 25%; - border: 2px solid; - border-color: rgba(0, 0, 0, 0.125); - font-size: 10px; - color: white; - text-shadow: 0 0 2px #000000; -} -.achievement:hover { - box-shadow: 0 0 10px var(--points); - z-index: 7; -} - -.buyable { - height: 200px; - width: 200px; - border-radius: 25%; - border: 2px solid; - border-color: rgba(0, 0, 0, 0.125); - font-size: 10px; - position:relative; -} - -.tile { - height: 80px; - width: 80px; - border-radius: 15%; - border: 2px solid; - border-color: rgba(0, 0, 0, 0.125); - font-size: 10px; - overflow: visible; -} - -.tile.can:hover { - box-shadow: 0 0 10px var(--points); - transform: scale(1.1, 1.1); - z-index: 7; -} - -.upgBig { - height: 200px; - width: 200px; - border-radius: 25%; - border: 2px solid; - border-color: rgba(0, 0, 0, 0.125); -} - -.longUpg { - height: 50px; - width: 120px; - background: var(--points); - border-radius: 50%; - border: 2px solid; - border-color: rgba(0, 0, 0, 0.125); - font-size: 10px; -} - -.smallUpg { - height: 40px; - width: 40px; - border-radius: 25%; - border: 2px solid; - border-color: rgba(0, 0, 0, 0.125); -} - -#points { - color: var(--points); - text-shadow: 0 0 10px var(--points); -} - -#optionWheel { - position: absolute; - top: 0; - left: 0; - height: 50px; - width: 50px; - cursor: pointer; -} - -#optionWheel:hover { - transform: rotate(360deg); -} - -#info { - font-size: 20px; - color: white; - position: absolute; - top: 50px; - left: 4px; - cursor: pointer; - width: 40px; - height: 40px; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #02f2f2; -} - -#info:hover { - transform: scale(1.2, 1.2); - text-shadow: 5px 0 10px #02f2f2, - -3px 0 12px #02f2f2; -} - -#discord { - position: absolute; - top: 120px; - left: 4px; - width: 40px; - height: 40px; -} - -#discord img { - width: 100%; - height: 100%; -} - -#discord-links { - position: absolute; - top: 0; - padding-top: 44px; - left: -244px; - width: 200px; - transition: left .3s ease; -} - -#discord:hover #discord-links { - left: -4px; -} - -#version { - position: absolute; - right: 4px; - top: 4px; - text-align: right; - color: var(--points); - text-shadow: 0 0 10px var(--points); - cursor: pointer; -} - -#version:hover { - transform: scale(1.1, 1.1); - right: 4.8px; -} - -a { - color: #007fff; - text-decoration-line: none; - cursor: pointer -} - -.link { - display: block; - font-size: 20px; - color: #41f5f5; - cursor: pointer; - font-family: "Lucida Console", "Courier New", monospace; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #02f2f2; - text-decoration: none; -} - -.link:hover { - transform: scale(1.2, 1.2); - text-shadow: 5px 0 10px #02f2f2, - -3px 0 12px #02f2f2; -} - -.opt { - height: 100px; - width: 100px; - border-radius: 25%; - border: 4px solid; - background-color: var(--color); - border-color: rgba(0, 0, 0, 0.125); - color: rgba(0, 0, 0, 0.5); - cursor: pointer; -} - -.opt:hover { - background-color: #439ea3; -} - -.hidden { - visibility: hidden; - height: 50px !important; -} - -.canvas { - top: 0; - left: 0; - position: absolute; - z-index: -999; -} - -.milestone { - width: 100%; - min-width: 120px; - padding-left: 5px; - padding-right: 5px; - height: 75px; - background-color: #bf8f8f; - border: 4px solid; - border-radius: 4px; - border-color: rgba(0, 0, 0, 0.125); - color: rgba(0, 0, 0, 0.5); -} - -.milestoneDone { - width: 100%; - min-width: 120px; - padding-left: 5px; - padding-right: 5px; - - height: 75px; - background-color: #77bf5f; - border: 4px solid; - border-radius: 4px; - border-color: rgba(0, 0, 0, 0.125); - color: rgba(0, 0, 0, 0.5); -} - -.left { - position: absolute; - left: 0; -} - -.remove { - height: 24px; - width: 24px; - cursor: pointer; -} - -.remove:hover { - transform: scale(1.1, 1.1); -} - -.col { - min-width: 49.5%; - max-width: 49.5%; - width: 49.5%; - height: 100%; - min-height: 100%; - column-span: 1; - position: absolute; - overflow-y: auto; - overflow-x: auto; - transition-duration: 0s -} - -.instant { - transition-duration: 0s !important -} - -.fast { - transition:color none -} - -.col.right { - top: 0; - right: 0; -} - -#app { - column-count: 2; - column-width: 50%; - min-height: 100%; -} - -.vl { - border-left: 6px solid var(--color); - height: 100%; - position: absolute; - left: 50%; - margin-left: -3px; - top: 0 -} - -.vl2 { - border-left: 3px solid var(--color); - height: 100%; -} - -.hl { - border-top: 3px solid var(--color); -} - -ul { - list-style-type: none; -} - -.hChallenge { - background-color: #bf8f8f; - position: relative; - border: 4px solid; - border-color: rgba(0, 0, 0, 0.125); - color: rgba(0, 0, 0, 0.5); - width: 300px; - height: 300px; - font-size: 15px; - border-radius: 33.33%; -} - -.hChallenge.done { - background-color: #77bf5f; -} - -.hChallenge.canComplete { - background-color: #ffbf00; -} - -.fullWidth { - position: absolute; - height: 100%; - width: 100%; - min-width: 100%; - overflow-y: auto; - overflow-x: auto; - transition-duration: 0s -} - -.tooltipBox { - position: relative; - display: inline-block; - } - - .tooltipBox:hover .tooltip{ - opacity: 1; - } - - .forceTooltip .tooltip{ - opacity: 1; - } - - .tooltip { - pointer-events: none; - text-align: center; - width: 150px; - font-size: 16px; - line-height: 1.2; - bottom: 100%; - left: 50%; - margin-bottom: 5px; - margin-left: -80px; - padding: 7px; - font-family: "Lucida Console", "Courier New", monospace; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - opacity: 0; - transition: opacity 0.5s; - - position: absolute; - z-index: 20000 ; - - background-color: var(--background_tooltip); - color: var(--points); - content: attr(tooltip); - font-size:14px; - - } - - .tooltip::after { - content: " "; - position: absolute; - bottom: 100%; - left: 50%; - - top: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: var(--background_tooltip) transparent transparent transparent; - } - -#loadingSection { - display: flex; - flex-direction: column; - justify-content: center; -} - -.treeOverlay { - pointer-events:none; - overflow:hidden; -} - -.front { - z-index: 30000 -} - -.overlayThing { - z-index: 10000; - pointer-events:auto; -} - -.sideLayers { - z-index: 10000; - pointer-events:auto; - position: absolute; - right: 55px; - top: 65px; - background-color: transparent; - -} - -button > * { - pointer-events:none; -} - -.ghost { - visibility: hidden -} - -.story { - width: 600px; - max-width: 95%; - border-bottom: solid 4px; - border-radius: 8px; - margin-bottom: 8px; - text-align: left; -} - -.story-title { - text-align: left; - font-size: 24px; - color: black; - cursor: pointer; - border: none; - padding: 2px; - border-radius: 8px 8px 0 0; -} - -.story-toggle { - border: none; - background: black; - color: white; - font-size: 20px; - pointer-events: none; - width: 1em; - display: inline-block; -} - -.story-text { - padding: 2px; - border: solid 4px; - border-color: inherit; - border-radius: inherit; - border-top-left-radius: 0; - margin-bottom: -2px; -} - -#treeTab td button { - margin: 0 10px; -} - -.mark { - position: relative; - display: inline-block; - width: 30px; - height: 30px; - z-index: 10000; - margin-left: 0.9em; - margin-right: 0.9em; - margin-bottom: 1.2em; - border-right: 0.3em solid transparent; - border-bottom: 0.7em solid transparent; - border-left: 0.3em solid transparent; - font-size: 10px; - overflow:auto; - pointer-events: none; -} - -.star { - position: relative; - display: inline-block; - width: 0; - height: 0; - z-index: 10000; - margin-left: 0.9em; - margin-right: 0.9em; - margin-bottom: 1.2em; - border-right: 0.3em solid transparent; - border-bottom: 0.7em solid #ffcc00; - border-left: 0.3em solid transparent; - font-size: 10px; - pointer-events: none; - -} - -.star:before, .star:after { - content: ""; - width: 0; - height: 0; - position: absolute; - top: .6em; - left: -1em; - border-right: 1em solid transparent; - border-bottom: 0.7em solid #ffcc00; - border-left: 1em solid transparent; - transform: rotate(-35deg); -} - -.star:after { - transform: rotate(35deg); -} - -.bg { - z-index: -9000; - width: 100%; - height: 100%; - position: absolute; - background-color: transparent; - top: 0 -} - -.bg2 { - z-index: -9009; - width: 100%; - height: 100%; - position: absolute; - top: 0 -} - -.noBackground { - background: transparent !important; - background-image: none !important; - --background: transparent !important; -} -