mirror of
https://github.com/IvarK/AntimatterDimensionsSourceCode.git
synced 2024-11-26 14:12:22 +00:00
6803 lines
125 KiB
CSS
6803 lines
125 KiB
CSS
html {
|
|
font-size: 62.5%;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
._kong-test {
|
|
display: flex;
|
|
background: white;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
color:#4F5957;
|
|
font-size: 1.1rem;
|
|
font-family: Typewriter, serif;
|
|
line-height: 1.5;
|
|
font-weight: 300;
|
|
text-align:center;
|
|
background-color: #fff;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
._kong-test body {
|
|
width: 1050px;
|
|
height: 700px;
|
|
margin: auto;
|
|
border: .1rem solid black;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Open Sans Condensed';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Typewriter;
|
|
src: url('MonospaceTypewriter.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Noto Sans;
|
|
src: url('MonospaceTypewriter.ttf');
|
|
unicode-range: U+F420-F430;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Runescape;
|
|
src: url('Runescape.ttf');
|
|
}
|
|
|
|
/* Background for s6 is not displayed by default */
|
|
#stars {
|
|
display: none;
|
|
}
|
|
|
|
/*#region Controls*/
|
|
|
|
/*#region Store button*/
|
|
|
|
.storebtn {
|
|
color: black;
|
|
background: #F2F2F2;
|
|
font-weight: bold;
|
|
font-family: Typewriter;
|
|
border: 1px solid #127A20;
|
|
width: 120px;
|
|
height: 25px;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.t-metro .storebtn {
|
|
background: #EEEEEE;
|
|
border: 1px solid #66BB6A;
|
|
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
|
}
|
|
|
|
.storebtn:hover {
|
|
color: #FFF;
|
|
background: #5AC467;
|
|
}
|
|
|
|
.t-metro .storebtn:hover {
|
|
background: #66BB6A;
|
|
}
|
|
|
|
.unavailablebtn {
|
|
color: #000000;
|
|
background: #A3A3A3;
|
|
font-weight: bold;
|
|
font-family: Typewriter;
|
|
border: 1px solid #B84B5F;
|
|
width: 120px;
|
|
height: 25px;
|
|
transition-duration: 0.2s;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.unavailablebtn:hover {
|
|
color: #000000;
|
|
background: #B84B5F;
|
|
}
|
|
|
|
/*#endregion Store button*/
|
|
|
|
/*#region Secondary tab button*/
|
|
|
|
.secondarytabbtn {
|
|
background: #E0E0E0;
|
|
font-weight: bold;
|
|
border: 2px solid #4980CC;
|
|
border-radius: 4px;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
width: 175px;
|
|
height: 25px;
|
|
font-family: Typewriter;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.secondarytabbtn:hover {
|
|
color: #FFFFFF;
|
|
background: #4980CC;
|
|
font-weight: bold;
|
|
border: 2px solid #4980CC;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/*#endregion Secondary tab button*/
|
|
|
|
/*#endregion Controls*/
|
|
|
|
/*#region TT shop*/
|
|
|
|
#TTbuttons {
|
|
position: fixed;
|
|
bottom: 0;
|
|
font-family: Typewriter, serif;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
z-index: 2;
|
|
}
|
|
|
|
#TTbuttons br {
|
|
content: " ";
|
|
display: block;
|
|
margin: 20px 0 0;
|
|
pointer-events:none;
|
|
}
|
|
|
|
.l-tt-buy-button {
|
|
width: 17rem;
|
|
z-index: 1;
|
|
margin: 0.3rem;
|
|
}
|
|
|
|
.c-tt-buy-button {
|
|
font-weight: bold;
|
|
font-family: Typewriter, serif;
|
|
border: 1px solid #691fa5;
|
|
transition-duration: 0.2s;
|
|
border-radius: 4px;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.c-tt-buy-button--unlocked {
|
|
color: #3AACD6;
|
|
background: #232028;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c-tt-buy-button--unlocked:hover {
|
|
color: #232028;
|
|
background: #3AACD6;
|
|
}
|
|
|
|
.c-tt-buy-button--locked {
|
|
color: black;
|
|
background: #4A4A4A;
|
|
}
|
|
|
|
.c-tt-buy-button--locked:hover {
|
|
background: #652F2F;
|
|
}
|
|
|
|
#timetheorems {
|
|
color: black;
|
|
font-size: 15px;
|
|
text-align: center;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.ttbuttons-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ttbuttons-top-row {
|
|
align-items: center;
|
|
}
|
|
|
|
.o-tt-top-row-button {
|
|
min-height: 3rem;
|
|
font-size: 1.2rem;
|
|
margin: 0.3rem;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
align-self: stretch;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.o-tt-autobuyer-button {
|
|
height: 2.5rem;
|
|
font-size: 1rem;
|
|
margin: 0.3rem;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
align-self: stretch;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
min-width: 8rem;
|
|
}
|
|
|
|
.l-tt-save-load-btn__wrapper {
|
|
margin: 0.3em;
|
|
position: relative;
|
|
}
|
|
|
|
.l-tt-save-load-btn {
|
|
min-width: 2em;
|
|
}
|
|
|
|
.l-tt-save-load-btn__menu {
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
padding: 0.5rem 0 0.5rem 0;
|
|
}
|
|
|
|
.c-tt-save-load-btn__menu {
|
|
color: white;
|
|
background: black;
|
|
border-radius: 0.5rem;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-family: Typewriter;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.l-tt-save-load-btn__menu::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
margin-left: -0.5rem;
|
|
border-width: 0.5rem;
|
|
border-style: solid;
|
|
border-color: black transparent transparent transparent;
|
|
}
|
|
|
|
.l-tt-save-load-btn__menu-rename {
|
|
margin: 0.3rem 0.5rem 0.5rem 0.7rem;
|
|
}
|
|
|
|
.c-tt-save-load-btn__menu-rename {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-family: Typewriter;
|
|
font-size: 1.4rem;
|
|
border: none;
|
|
border-radius: 0.3rem;
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
.l-tt-save-load-btn__menu-item {
|
|
padding: 0.25rem 1rem 0.25rem 1rem;
|
|
}
|
|
|
|
.c-tt-save-load-btn__menu-item:hover {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.c-tt-autobuyer-toggle {
|
|
color: initial;
|
|
}
|
|
|
|
.l-tt-buy-max-vbox {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#theorembuybackground {
|
|
background: #E0E0E0;
|
|
border: 2px solid black;
|
|
border-bottom: none;
|
|
border-top-left-radius: 7px;
|
|
border-top-right-radius: 7px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ttshop-container {
|
|
padding: 0 10px 5px 10px;
|
|
width: 555px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.25s ease-out;
|
|
}
|
|
|
|
.ttshop-minimize-btn {
|
|
width: 38px;
|
|
height: 38px;
|
|
margin-left: -1px
|
|
}
|
|
|
|
.ttshop-minimize-btn span {
|
|
display: inline-block;
|
|
transition: all 0.25s ease-out;
|
|
margin-left: -1px;
|
|
font-size: 25px;
|
|
}
|
|
|
|
#minimizeArrow {
|
|
color: black;
|
|
}
|
|
|
|
.c-ttshop__save-load-text {
|
|
color: black;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/*#endregion TT shop*/
|
|
|
|
.c-news-ticker {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c-news-ticker__line {
|
|
padding-left: 100%;
|
|
transition: transform linear;
|
|
}
|
|
|
|
.c-news-line {
|
|
display: inline-block;
|
|
font-family: Typewriter, serif;
|
|
font-size: 1.5rem;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
.c-news-line a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tabbtn {
|
|
background: #E0E0E0;
|
|
font-weight: bold;
|
|
border: 2px solid #4980CC;
|
|
border-radius: 4px;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
font-family: Typewriter;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.tabbtn:hover {
|
|
color: #FFFFFF;
|
|
background: #4980CC;
|
|
font-weight: bold;
|
|
border: 2px solid #4980CC;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.t-dark .tabbtn {
|
|
color: #E0E0E0;
|
|
border: .2rem solid #1565C0;
|
|
background-color: #455A64;
|
|
}
|
|
|
|
.t-dark .tabbtn:hover {
|
|
background: #1565C0;
|
|
color: black;
|
|
}
|
|
|
|
.t-metro .tabbtn,
|
|
.t-inverted-metro .tabbtn,
|
|
.t-s8 .tabbtn {
|
|
background: #eeeeee;
|
|
border: .1rem solid #2196F3;
|
|
box-shadow: .1rem .1rem .1rem 0 #9E9E9E;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-dark-metro .tabbtn {
|
|
color: #e0e0e0;
|
|
background-color: #455a64;
|
|
border: .1rem solid #1e88e5;
|
|
box-shadow: 0.1rem 0.1rem 0.1rem 0 black;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-s6 .tabbtn {
|
|
color: #E0E0E0;
|
|
background: black;
|
|
border: .2rem solid #1565C0;
|
|
text-shadow: 0 0 1rem white;
|
|
}
|
|
|
|
.t-s6 .tabbtn:hover {
|
|
background: #1565C0;
|
|
color: black;
|
|
}
|
|
|
|
.t-s8 .tabbtn {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.t-metro .tabbtn:hover,
|
|
.t-dark-metro .tabbtn:hover,
|
|
.t-inverted-metro .tabbtn:hover,
|
|
.t-s8 .tabbtn:hover {
|
|
background: #2196F3;
|
|
border: .1rem solid #2196F3;
|
|
}
|
|
|
|
.infinitytabbtn {
|
|
color: #FFFFFF;
|
|
background: #1F1F1F;
|
|
border: 2px solid #B67F33;
|
|
}
|
|
|
|
.infinitytabbtn:hover {
|
|
color: #000000;
|
|
background: #B67F33;
|
|
border: 2px solid #B67F33;
|
|
}
|
|
|
|
.eternitytabbtn {
|
|
color: #b341e0;
|
|
background: black;
|
|
border: 2px solid #b341e0;
|
|
}
|
|
|
|
.eternitytabbtn:hover {
|
|
color: #511568;
|
|
background: white;
|
|
border: 2px solid #b341e0;
|
|
}
|
|
|
|
.realitytabbtn {
|
|
background-color: white;
|
|
border: 2px solid #0b600e;
|
|
color: #0b600e;
|
|
}
|
|
|
|
.realitytabbtn:hover {
|
|
background-color: #0b600e;
|
|
border: 2px solid #0b600e;
|
|
color: white;
|
|
}
|
|
|
|
.celestialtabbtn {
|
|
background-color: #5151ec;
|
|
border: 2px solid #d0d0d0;
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
.celestialtabbtn:hover {
|
|
background-color: #d0d0d0;
|
|
border: 2px solid #d0d0d0;
|
|
color: #5151ec;
|
|
}
|
|
|
|
.t-metro .celestialtabbtn,
|
|
.t-dark-metro .celestialtabbtn,
|
|
.t-inverted-metro .celestialtabbtn,
|
|
.t-s8 .celestialtabbtn {
|
|
background-color: #00bcd4;
|
|
border-color: #00838f;
|
|
color: white;
|
|
}
|
|
|
|
.t-metro .celestialtabbtn:hover,
|
|
.t-dark-metro .celestialtabbtn:hover,
|
|
.t-inverted-metro .celestialtabbtn:hover,
|
|
.t-s8 .celestialtabbtn:hover {
|
|
background-color: white;
|
|
color: #00bcd4;
|
|
border-color: #00838f;
|
|
}
|
|
|
|
.t-dark .celestialtabbtn,
|
|
.t-s6 .celestialtabbtn {
|
|
background-color: #5151ec;
|
|
border-color: #d0d0d0;
|
|
color: white;
|
|
}
|
|
|
|
.t-dark .celestialtabbtn:hover,
|
|
.s6 .celestialtabbtn:hover {
|
|
background-color: #d0d0d0;
|
|
color: #5151ec;
|
|
}
|
|
|
|
.crunchbtn {
|
|
background: #E0E0E0;
|
|
font-weight: bold;
|
|
border: 2px solid #4980CC;
|
|
border-radius: 4px;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
top: 50%;
|
|
left: 40%;
|
|
|
|
}
|
|
|
|
.crunchbtn:hover {
|
|
color: #FFFFFF;
|
|
background: #4980CC;
|
|
font-weight: bold;
|
|
border: 2px solid #4980CC;
|
|
border-radius: 4px;
|
|
|
|
}
|
|
|
|
.popup {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
border: 3px solid black;
|
|
width: 300px;
|
|
height: 120px;
|
|
background-color: #E0E0E0;
|
|
border-radius: 6px;
|
|
text-align:center;
|
|
z-index: 2;
|
|
color: black;
|
|
font-family: Typewriter;
|
|
padding: 10px;
|
|
padding-bottom: 15px;
|
|
display: none;
|
|
}
|
|
|
|
.greedbtn {
|
|
height: 40px;
|
|
width: 100px;
|
|
background-color: #f2d729;
|
|
border: 1px solid red;
|
|
border-radius: 5px;
|
|
font-family: TypeWriter;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.greedbtn:hover {
|
|
cursor: pointer;
|
|
background-color: #9E913A;
|
|
|
|
}
|
|
|
|
#loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 1050px;
|
|
height:800px;
|
|
margin-top: -400px;
|
|
margin-left: -525px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.l-reality-button {
|
|
display: block;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.l-reality-button__contents {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.c-reality-button__header {
|
|
font-size: 1.4rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.c-reality-button {
|
|
font-family: Typewriter;
|
|
border-radius: 0.4rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
width: 21rem;
|
|
height: 8rem;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
background: white;
|
|
border-width: 0.2rem;
|
|
border-style: solid;
|
|
}
|
|
|
|
.t-dark-metro .c-reality-button,
|
|
.t-inverted-metro .c-reality-button,
|
|
.t-metro .c-reality-button,
|
|
.t-s8 .c-reality-button {
|
|
border-width: 0.1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-s6 .c-reality-button {
|
|
background-color: black;
|
|
}
|
|
|
|
.c-reality-button--good {
|
|
color: #0b600e;
|
|
border-color: #0b600e;
|
|
}
|
|
|
|
.c-reality-button--bad {
|
|
color: #B84B5F;
|
|
border-color: #B84B5F;
|
|
}
|
|
|
|
.t-metro .c-reality-button--bad,
|
|
.t-dark-metro .c-reality-button--bad,
|
|
.t-inverted-metro .c-reality-button--bad,
|
|
.t-s8 .c-reality-button--bad {
|
|
color: #ef5350;
|
|
border-color: #ef5350;
|
|
}
|
|
|
|
.c-reality-button--good:hover, .c-reality-button--good.force-hover {
|
|
color: white;
|
|
background: #0b600e;
|
|
}
|
|
|
|
.t-dark .c-reality-button--good:hover, .t-dark .c-reality-button--good.force-hover {
|
|
background: #0b600e;
|
|
}
|
|
|
|
.t-s6 .c-reality-button--good:hover, .t-s6 .c-reality-button--good.force-hover {
|
|
background: #0b600e;
|
|
}
|
|
|
|
.c-reality-button--bad:hover, .c-reality-button--bad.force-hover {
|
|
color: white;
|
|
background: #642a2c;
|
|
}
|
|
|
|
.t-dark .c-reality-button--bad:hover, .t-dark .c-reality-button--bad.force-hover {
|
|
background: #642a2c;
|
|
}
|
|
|
|
.t-metro .c-reality-button--bad:hover, .t-metro .c-reality-button--bad.force-hover,
|
|
.t-dark-metro .c-reality-button--bad:hover, .t-dark-metro .c-reality-button--bad.force-hover,
|
|
.t-inverted-metro .c-reality-button--bad:hover, .t-inverted-metro .c-reality-button--bad.force-hover,
|
|
.t-s8 .c-reality-button--bad:hover, .t-s8 .c-reality-button--bad.force-hover {
|
|
background: #ef5350;
|
|
}
|
|
|
|
.t-s6 .c-reality-button--bad:hover, .t-s6 .c-reality-button--bad.force-hover {
|
|
background: #642a2c;
|
|
}
|
|
|
|
.l-reality-amplify-button {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
[draggable] {
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
/* Required to make elements draggable in old WebKit */
|
|
-khtml-user-drag: element;
|
|
-webkit-user-drag: element;
|
|
}
|
|
|
|
.glyphcontainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.glyph {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 50px;
|
|
width: 50px;
|
|
background: black;
|
|
font-size: 2.4rem;
|
|
transition-duration: 0.2s;
|
|
cursor: move;
|
|
font-family: Typewriter;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
#reality * {
|
|
user-select: none;
|
|
}
|
|
|
|
.blackhole-upgrades {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 80%;
|
|
}
|
|
|
|
.radial-progress {
|
|
/* @circle-size: 120px; */
|
|
background-color: #d6dadc;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
margin: 50px
|
|
}
|
|
|
|
.circle .fill {
|
|
background-color: #97a71d;
|
|
/* rect(<top>, <right>, <bottom>, <left>) */
|
|
clip: rect(0px, 60px, 120px, 0);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.circle .mask {
|
|
/* rect(<top>, <right>, <bottom>, <left>) */
|
|
clip: rect(0px, 120px, 120px, 60px);
|
|
}
|
|
|
|
.circle .mask, .circle .fill {
|
|
width: 120px;
|
|
height: 120px;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.inset {
|
|
width: 90px;
|
|
height: 90px;
|
|
position: absolute;
|
|
margin-left: 15px;
|
|
margin-top: 15px;
|
|
background-color: #fbfbfb;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@keyframes glow {
|
|
20% { text-shadow: 0 0 10px green; }
|
|
100% { text-shadow: 0 0 10px white; }
|
|
}
|
|
|
|
@keyframes existenceGlow {
|
|
0% { text-shadow: 1px 1px 2px black; }
|
|
50% { text-shadow: 1px 1px 8px black; }
|
|
100% { text-shadow: 1px 1px 2px black; }
|
|
}
|
|
|
|
.tooltip {
|
|
width: 275px;
|
|
background-color: #4a4a4a;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px 0;
|
|
position: absolute;
|
|
z-index: 3;
|
|
left: 50%;
|
|
transition: opacity 0.3s;
|
|
font-size: 1.4rem;
|
|
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-weight: normal;
|
|
padding: 12px;
|
|
pointer-events: none;
|
|
display: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.tooltip h3 {
|
|
color:white
|
|
}
|
|
|
|
.tooltip br:last-child {
|
|
display: none;
|
|
}
|
|
|
|
.tooltip::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: #4a4a4a transparent transparent transparent;
|
|
}
|
|
|
|
[ach-tooltip] {
|
|
position: relative;
|
|
}
|
|
|
|
[ach-tooltip]:before,
|
|
[ach-tooltip]:after {
|
|
visibility: hidden;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[ach-tooltip]:before {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-bottom: 5px;
|
|
margin-left: -85px;
|
|
padding: 7px;
|
|
width: 160px;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
background-color: #000;
|
|
background-color: hsla(0, 0%, 5%, 0.9);
|
|
color: #fff;
|
|
content: attr(ach-tooltip);
|
|
text-align: center;
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
transition-duration: .5s;
|
|
z-index: 3;
|
|
}
|
|
|
|
[ach-tooltip]:after {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
width: 0;
|
|
border-top: 5px solid #000;
|
|
border-top: 5px solid hsla(0, 0%, 5%, 0.9);
|
|
border-right: 5px solid transparent;
|
|
border-left: 5px solid transparent;
|
|
content: " ";
|
|
font-size: 0;
|
|
line-height: 0;
|
|
transition-duration: .5s;
|
|
}
|
|
|
|
[ach-tooltip]:hover:before,
|
|
[ach-tooltip]:hover:after {
|
|
visibility: visible;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
|
|
opacity: 1;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: #222;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
p,
|
|
ul,
|
|
ol,
|
|
table,
|
|
dl {
|
|
margin: 0 0 3px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
h2 {
|
|
color: #393939;
|
|
}
|
|
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: #494949;
|
|
}
|
|
|
|
a {
|
|
color: #39c;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #069;
|
|
}
|
|
|
|
a small {
|
|
font-size: 11px;
|
|
color: #777;
|
|
margin-top: -0.3em;
|
|
display: block;
|
|
}
|
|
|
|
a:hover small {
|
|
color: #777;
|
|
}
|
|
|
|
.wrapper {
|
|
width: 860px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 1px solid #e5e5e5;
|
|
margin: 0;
|
|
padding: 0 0 0 20px;
|
|
font-style: italic;
|
|
}
|
|
|
|
table {
|
|
border-spacing: 0
|
|
}
|
|
|
|
th,
|
|
td {
|
|
text-align: left;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
dt {
|
|
color: #444;
|
|
font-weight: 700;
|
|
}
|
|
|
|
th {
|
|
color: #444;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
header {
|
|
width: 270px;
|
|
float: left;
|
|
position: fixed;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
}
|
|
|
|
header ul {
|
|
list-style: none;
|
|
height: 40px;
|
|
padding: 0;
|
|
background: #f4f4f4;
|
|
border-radius: 5px;
|
|
border: 1px solid #e0e0e0;
|
|
width: 270px;
|
|
}
|
|
|
|
header li {
|
|
width: 89px;
|
|
float: left;
|
|
border-right: 1px solid #e0e0e0;
|
|
height: 40px;
|
|
}
|
|
|
|
header li:first-child a {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
|
|
header li:last-child a {
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
header ul a {
|
|
line-height: 1;
|
|
font-size: 11px;
|
|
color: #999;
|
|
display: block;
|
|
text-align: center;
|
|
padding-top: 6px;
|
|
height: 34px;
|
|
}
|
|
|
|
header ul a:hover {
|
|
color: #999;
|
|
}
|
|
|
|
header ul a:active {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
strong {
|
|
color: #222;
|
|
font-weight: 700;
|
|
}
|
|
|
|
header ul li+li+li {
|
|
border-right: none;
|
|
width: 89px;
|
|
}
|
|
|
|
header ul a strong {
|
|
font-size: 14px;
|
|
display: block;
|
|
color: #222;
|
|
}
|
|
|
|
section {
|
|
width: 500px;
|
|
float: right;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
small {
|
|
font-size: 11px;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
background: #e5e5e5;
|
|
height: 1px;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
footer {
|
|
width: 270px;
|
|
float: left;
|
|
position: fixed;
|
|
bottom: 50px;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
}
|
|
|
|
br {
|
|
margin: 0;
|
|
pointer-events:none;
|
|
}
|
|
|
|
.videocontainer {
|
|
position: fixed;
|
|
z-index: -1000;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#realityanimbg {
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
position: absolute;
|
|
pointer-events: all;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
.glyphDescriptions {
|
|
width: 32%;
|
|
border: 1px solid rgb(184, 184, 184);
|
|
border-radius: 5px;
|
|
margin: 24px;
|
|
padding: 12px;
|
|
}
|
|
|
|
@media print, screen and (max-width: 960px) {
|
|
div.wrapper {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
header,
|
|
section,
|
|
footer {
|
|
float: none;
|
|
position: static;
|
|
width: auto;
|
|
}
|
|
header {
|
|
padding-right: 320px;
|
|
}
|
|
section {
|
|
border: 1px solid #e5e5e5;
|
|
border-width: 1px 0;
|
|
padding: 20px 0;
|
|
margin: 0 0 20px;
|
|
}
|
|
header a small {
|
|
display: inline;
|
|
}
|
|
header ul {
|
|
position: absolute;
|
|
right: 50px;
|
|
top: 52px;
|
|
}
|
|
}
|
|
|
|
@media print,
|
|
screen and (max-width: 720px) {
|
|
body {
|
|
word-wrap: break-word;
|
|
}
|
|
header {
|
|
padding: 0;
|
|
}
|
|
header ul,
|
|
header p.view {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
@media print,
|
|
screen and (max-width: 480px) {
|
|
body {
|
|
padding: 15px;
|
|
}
|
|
header ul {
|
|
width: 99%;
|
|
}
|
|
header li,
|
|
header ul li+li+li {
|
|
width: 33%;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
padding: 0.4in;
|
|
font-size: 12pt;
|
|
color: #444;
|
|
}
|
|
}
|
|
|
|
@keyframes barrelRoll {
|
|
0% {transform: rotateZ(0deg);}
|
|
50% {transform: rotateZ(360deg);}
|
|
100% {transform: rotateZ(360deg);}
|
|
}
|
|
|
|
@keyframes spin3d {
|
|
0% {transform: rotate3d(5.2, -2.8, 1.4, 0deg);}
|
|
100% {transform: rotate3d(5.2, -2.8, 1.4, 360deg);}
|
|
}
|
|
|
|
@keyframes spin4d {
|
|
0% {transform: scale(1) rotate3d(5.2, -2.8, 1.4, 0deg);}
|
|
50% {transform: scale(0) rotate3d(5.2, -2.8, 1.4, 360deg);}
|
|
100% {transform: scale(1) rotate3d(5.2, -2.8, 1.4, 0deg);}
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { bottom: 0; opacity: 0;}
|
|
50% {opacity: 1; }
|
|
100% { bottom: 50px; opacity: 0;}
|
|
}
|
|
|
|
@keyframes implode {
|
|
0% {transform:scale(1); filter:blur(0px)}
|
|
50% {transform:scale(0); filter:blur(5px)}
|
|
100% {transform:scale(1); filter:blur(0px)}
|
|
}
|
|
|
|
@keyframes realize {
|
|
0% {opacity: 1;}
|
|
20% {opacity: 0;}
|
|
80% {opacity: 0;}
|
|
100% {opacity: 1;}
|
|
}
|
|
|
|
@keyframes realizebg {
|
|
0% {opacity: 0;}
|
|
20% {opacity: 0;}
|
|
30% {opacity: 1;}
|
|
70% {opacity: 1;}
|
|
80% {opacity: 0;}
|
|
100% {opacity: 0;}
|
|
}
|
|
|
|
@keyframes text-grow {
|
|
0% {font-size: 1.3rem;}
|
|
50% {font-size: 1.8rem;}
|
|
100% {font-size: 1.3rem;}
|
|
}
|
|
|
|
@keyframes text-shrink {
|
|
0% {font-size: 1.8rem;}
|
|
50% {font-size: 1.3rem;}
|
|
100% {font-size: 1.8rem;}
|
|
}
|
|
|
|
@keyframes text-flash {
|
|
0% {color: yellow;}
|
|
50% {color: red;}
|
|
}
|
|
|
|
.infotooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.infotooltip .infotooltiptext {
|
|
visibility: hidden;
|
|
background-color: black;
|
|
color: #fff;
|
|
text-align: left;
|
|
padding: 5px 5px;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
white-space: nowrap;
|
|
left: 105%
|
|
}
|
|
|
|
.infotooltip:hover .infotooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
/*******
|
|
* BEM *
|
|
*******/
|
|
|
|
.c-game-ui {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
._kong-test .c-game-ui {
|
|
max-height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
/*#region o-btn*/
|
|
|
|
.o-btn {
|
|
font-family: Typewriter, serif;
|
|
font-weight: bold;
|
|
font-size: 1.3rem;
|
|
color: black;
|
|
background: #e0e0e0;
|
|
border: .2rem solid #4980cc;
|
|
border-radius: .4rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-btn:hover {
|
|
color: white;
|
|
background: #4980CC;
|
|
}
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark*/
|
|
|
|
.t-dark .o-btn {
|
|
color: #e0e0e0;
|
|
background-color: #455a64;
|
|
border-color: #1565c0;
|
|
box-shadow: 0 0 .7rem .2rem #111111;
|
|
}
|
|
|
|
.t-dark .o-btn:hover {
|
|
background-color: #1565c0;
|
|
color: black;
|
|
}
|
|
|
|
/*#endregion t-dark*/
|
|
|
|
/*#region t-dark-metro*/
|
|
|
|
.t-dark-metro .o-btn {
|
|
color: #e0e0e0;
|
|
background-color: #455a64;
|
|
border: .1rem solid #1e88e5;
|
|
box-shadow: .1rem .1rem .1rem 0 black;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-dark-metro .o-btn:hover {
|
|
background-color: #1e88e5;
|
|
}
|
|
|
|
/*#endregion t-dark-metro*/
|
|
|
|
/*#region t-metro t-inverted-metro t-s8*/
|
|
|
|
.t-metro .o-btn,
|
|
.t-inverted-metro .o-btn {
|
|
box-shadow: .1rem .1rem .1rem 0 #9e9e9e;
|
|
}
|
|
|
|
.t-metro .o-btn,
|
|
.t-inverted-metro .o-btn,
|
|
.t-s8 .o-btn {
|
|
background-color: #eeeeee;
|
|
border: .1rem solid #2196f3;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-btn:hover,
|
|
.t-inverted-metro .o-btn:hover,
|
|
.t-s8 .o-btn:hover {
|
|
background-color: #2196f3;
|
|
}
|
|
|
|
/*#endregion t-metro t-inverted-metro t-s8*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .o-btn {
|
|
background-color: #dbd242;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-btn:hover {
|
|
color: #dbd242;
|
|
background-color: black;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#region t-s4*/
|
|
|
|
.t-s4 .o-btn {
|
|
background-color: #1b00ff;
|
|
cursor: url(cursor2.cur), auto;
|
|
}
|
|
|
|
/*#endregion t-s4*/
|
|
|
|
/*#region t-s6*/
|
|
|
|
.t-s6 .o-btn {
|
|
color: #e0e0e0;
|
|
background-color: black;
|
|
border-color: #1565c0;
|
|
box-shadow: 0 0 .7rem .2rem #111111;
|
|
text-shadow: 0 0 1rem white;
|
|
}
|
|
|
|
.t-s6 .o-btn:hover {
|
|
color: black;
|
|
background-color: #1565c0;
|
|
}
|
|
|
|
/*#endregion t-s6*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion o-btn*/
|
|
|
|
/*#region o-primary-btn*/
|
|
|
|
.o-primary-btn {
|
|
height: 2.5rem;
|
|
font-family: Typewriter, serif;
|
|
font-weight: bold;
|
|
font-size: 1.3rem;
|
|
color: black;
|
|
background: #F2F2F2;
|
|
border: .1rem solid #127A20;
|
|
border-radius: .4rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
padding: .3rem 1rem;
|
|
}
|
|
|
|
.o-primary-btn:hover {
|
|
color: #FFF;
|
|
background: #5AC467;
|
|
}
|
|
|
|
.o-primary-btn--disabled {
|
|
background: #A3A3A3;
|
|
border-color: #B84B5F;
|
|
cursor: default;
|
|
}
|
|
|
|
.o-primary-btn--disabled:hover {
|
|
background: #B84B5F;
|
|
}
|
|
|
|
/*#region modifiers*/
|
|
|
|
.o-primary-btn--width-medium {
|
|
width: 12rem;
|
|
}
|
|
|
|
.o-primary-btn--tickspeed {
|
|
width: 17rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.o-primary-btn--buy-max {
|
|
font-size: 1.2rem;
|
|
width: 12rem;
|
|
}
|
|
|
|
.o-primary-btn--sacrifice {
|
|
font-size: 1.2rem;
|
|
width: 32rem;
|
|
}
|
|
|
|
.o-primary-btn--buy-nd {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.o-primary-btn--buy-single-nd {
|
|
width: 13.5rem;
|
|
}
|
|
|
|
.o-primary-btn--buy-10-nd {
|
|
width: 21rem;
|
|
}
|
|
|
|
.o-primary-btn--dimboost {
|
|
font-size: .9rem;
|
|
width: 21rem;
|
|
}
|
|
|
|
.o-primary-btn--galaxy {
|
|
font-size: .9rem;
|
|
width: 21rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.o-primary-btn--new-dim {
|
|
font-weight: bold;
|
|
width: 20rem;
|
|
height: 6rem;
|
|
}
|
|
|
|
.o-primary-btn--quick-reset {
|
|
font-size: 1.2rem;
|
|
width: 20rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.o-primary-btn--buy-id {
|
|
width: 19.5rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
.o-primary-btn--id-autobuyer {
|
|
font-size: 1rem;
|
|
width: 8rem;
|
|
}
|
|
|
|
.o-primary-btn--id-all-autobuyers {
|
|
font-size: 1.2rem;
|
|
width: 15rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
.o-primary-btn--buy-td {
|
|
width: 19.5rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
.o-primary-btn--td-autobuyer {
|
|
font-size: 1rem;
|
|
width: 8rem;
|
|
}
|
|
|
|
.o-primary-btn--td-all-autobuyers {
|
|
font-size: 1.2rem;
|
|
width: 15rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
.o-primary-btn--option {
|
|
width: 20rem;
|
|
height: 5.5rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.o-primary-btn--option_font-large {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.o-primary-btn--option_font-x-large {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.o-primary-btn--update-rate {
|
|
font-size: 1.4rem;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
.o-primary-btn--update-rate__slider {
|
|
width: 100%;
|
|
}
|
|
|
|
.o-primary-btn--modal-close {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
font-size: 2.4rem;
|
|
line-height: 2.4rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.o-primary-btn--exit-challenge {
|
|
width: 20rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.o-primary-btn--small-spoon {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.o-primary-btn--autobuyer-toggle {
|
|
font-size: 1.1rem;
|
|
width: 16rem;
|
|
height: 4rem;
|
|
}
|
|
|
|
.o-primary-btn--replicanti-unlock {
|
|
width: 20rem;
|
|
height: 8rem;
|
|
}
|
|
|
|
.o-primary-btn--replicanti-upgrade {
|
|
width: 18rem;
|
|
height: 5rem;
|
|
font-size: 1rem;
|
|
padding: .1rem .6rem;
|
|
}
|
|
|
|
.o-primary-btn--replicanti-upgrade-toggle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.o-primary-btn--dilation-upgrade-toggle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.o-primary-btn--replicanti-galaxy {
|
|
width: 20rem;
|
|
height: 7rem;
|
|
font-size: 1.2rem;
|
|
padding: .1rem .6rem;
|
|
}
|
|
|
|
.o-primary-btn--replicanti-galaxy-toggle {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.o-primary-btn--time-study-options {
|
|
width: 15rem;
|
|
height: 4rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.o-primary-btn--respec-active {
|
|
background-color: #5ac467;
|
|
}
|
|
|
|
.o-primary-btn--respec-active:hover {
|
|
background-color: #5ac467;
|
|
color: black;
|
|
cursor: default;
|
|
}
|
|
|
|
.o-primary-btn--discharge-options {
|
|
width: 15rem;
|
|
height: 4rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/*#endregion modifiers*/
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark*/
|
|
|
|
.t-dark .o-primary-btn {
|
|
background-color: #455a64;
|
|
box-shadow: 0 0 .7rem .2rem #111111;
|
|
}
|
|
|
|
.t-dark .o-primary-btn:hover {
|
|
background-color: #1b5e20;
|
|
}
|
|
|
|
.t-dark .o-primary-btn--disabled {
|
|
color: black;
|
|
background-color: #37474f;
|
|
border-color: #b84b5f;
|
|
}
|
|
|
|
.t-dark .o-primary-btn--disabled:hover {
|
|
background-color: #b84b5f;
|
|
}
|
|
|
|
.t-dark .o-primary-btn--respec-active {
|
|
background-color: #1b5e20;
|
|
}
|
|
|
|
.t-dark .o-primary-btn--discharge-active {
|
|
background-color: #1b5e20;
|
|
}
|
|
|
|
/*#endregion t-dark*/
|
|
|
|
/*#region t-dark-metro*/
|
|
|
|
.t-dark-metro .o-primary-btn {
|
|
background-color: #455a64;
|
|
border-color: #43a047;
|
|
box-shadow: .1rem .1rem .1rem 0 black;
|
|
border-radius: 0;
|
|
border-width: 0.1rem;
|
|
}
|
|
|
|
.t-dark-metro .o-primary-btn:hover {
|
|
background-color: #43a047;
|
|
}
|
|
|
|
.t-dark-metro .o-primary-btn--disabled {
|
|
background-color: #37474f;
|
|
border-color: #e53935;
|
|
}
|
|
|
|
.t-dark-metro .o-primary-btn--disabled:hover {
|
|
background-color: #e53935;
|
|
}
|
|
|
|
/*#endregion t-dark-metro*/
|
|
|
|
/*#region t-metro t-inverted-metro t-s8*/
|
|
|
|
.t-metro .o-primary-btn,
|
|
.t-inverted-metro .o-primary-btn {
|
|
box-shadow: .1rem .1rem .1rem 0 #9e9e9e;
|
|
border-radius: 0;
|
|
border-width: 0.1rem;
|
|
}
|
|
|
|
.t-metro .o-primary-btn,
|
|
.t-inverted-metro .o-primary-btn,
|
|
.t-s8 .o-primary-btn {
|
|
background-color: #eeeeee;
|
|
border-color: #66bb6a;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-primary-btn:hover,
|
|
.t-inverted-metro .o-primary-btn:hover,
|
|
.t-s8 .o-primary-btn:hover {
|
|
background-color: #66bb6a;
|
|
}
|
|
|
|
.t-metro .o-primary-btn--disabled,
|
|
.t-inverted-metro .o-primary-btn--disabled,
|
|
.t-s8 .o-primary-btn--disabled {
|
|
background-color: #9e9e9e;
|
|
border-color: #ef5350;
|
|
}
|
|
|
|
.t-metro .o-primary-btn--disabled:hover,
|
|
.t-inverted-metro .o-primary-btn--disabled:hover,
|
|
.t-s8 .o-primary-btn--disabled:hover {
|
|
background-color: #ef5350;
|
|
}
|
|
|
|
/*#endregion t-metro t-inverted-metro t-s8*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .o-primary-btn {
|
|
background-color: #dbd242;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-primary-btn:hover {
|
|
background-color: #4baf4e;
|
|
}
|
|
|
|
.t-s1 .o-primary-btn--disabled {
|
|
background-color: #9a921d;
|
|
}
|
|
|
|
.t-s1 .o-primary-btn--disabled:hover {
|
|
background-color: #d72621;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#region t-s4*/
|
|
|
|
.t-s4 .o-primary-btn {
|
|
background-color: #ff0000;
|
|
}
|
|
|
|
.t-s4 .o-primary-btn--disabled {
|
|
cursor: url(cursor2.cur), auto;
|
|
}
|
|
|
|
/*#endregion t-s4*/
|
|
|
|
/*#region t-s6*/
|
|
|
|
.t-s6 .o-primary-btn {
|
|
color: #fff;
|
|
background-color: black;
|
|
box-shadow: 0 0 .7rem .2rem #111111;
|
|
}
|
|
|
|
.t-s6 .o-primary-btn:hover {
|
|
background: #1b5e20;
|
|
}
|
|
|
|
.t-s6 .o-primary-btn--disabled {
|
|
color: grey;
|
|
background-color: black;
|
|
}
|
|
|
|
.t-s6 .o-primary-btn--disabled:hover {
|
|
color: black;
|
|
background: #b84b5f;
|
|
}
|
|
|
|
.t-s6 .o-primary-btn--respec-active {
|
|
background-color: #1b5e20;
|
|
}
|
|
|
|
.t-s6 .o-primary-btn--discharge-active {
|
|
background-color: #1b5e20;
|
|
}
|
|
|
|
/* FFS */
|
|
.t-metro .o-primary-btn--respec-active,
|
|
.t-dark .o-primary-btn--respec-active,
|
|
.t-dark-metro .o-primary-btn--respec-active,
|
|
.t-s1 .o-primary-btn--respec-active,
|
|
.t-s6 .o-primary-btn--respec-active,
|
|
.t-s8 .o-primary-btn--respec-active {
|
|
background-color: #673ab7;
|
|
}
|
|
|
|
.t-metro .o-primary-btn--respec-active:hover,
|
|
.t-dark .o-primary-btn--respec-active:hover,
|
|
.t-dark-metro .o-primary-btn--respec-active:hover,
|
|
.t-s1 .o-primary-btn--respec-active:hover,
|
|
.t-s6 .o-primary-btn--respec-active:hover,
|
|
.t-s8 .o-primary-btn--respec-active:hover {
|
|
background-color: #673ab7;
|
|
color: black;
|
|
}
|
|
|
|
.t-metro .o-primary-btn--discharge-active,
|
|
.t-dark .o-primary-btn--discharge-active,
|
|
.t-dark-metro .o-primary-btn--discharge-active,
|
|
.t-s1 .o-primary-btn--discharge-active,
|
|
.t-s6 .o-primary-btn--discharge-active,
|
|
.t-s8 .o-primary-btn--discharge-active {
|
|
background-color: #673ab7;
|
|
}
|
|
|
|
.t-metro .o-primary-btn--discharge-active:hover,
|
|
.t-dark .o-primary-btn--discharge-active:hover,
|
|
.t-dark-metro .o-primary-btn--discharge-active:hover,
|
|
.t-s1 .o-primary-btn--discharge-active:hover,
|
|
.t-s6 .o-primary-btn--discharge-active:hover,
|
|
.t-s8 .o-primary-btn--discharge-active:hover {
|
|
background-color: #673ab7;
|
|
color: black;
|
|
}
|
|
|
|
/*#endregion t-s6*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion o-primary-btn*/
|
|
|
|
/*#region o-prestige-btn*/
|
|
|
|
.o-prestige-btn {
|
|
border: .2rem solid;
|
|
border-radius: .4rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
width: 21rem;
|
|
height: 7rem;
|
|
font-size: 1.1rem;
|
|
font-family: Typewriter, serif;
|
|
}
|
|
|
|
.o-prestige-btn br {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.o-prestige-btn b {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*#region Big Crunch*/
|
|
|
|
.o-prestige-btn--big-crunch {
|
|
color: white;
|
|
background-color: #1F1F1F;
|
|
border-color: #B67F33;
|
|
}
|
|
|
|
.o-prestige-btn--big-crunch:hover {
|
|
color: #1F1F1F;
|
|
background-color: #B67F33;
|
|
}
|
|
|
|
.t-dark .o-prestige-btn--big-crunch {
|
|
color: #000;
|
|
background: #F5F5F5;
|
|
border-color: #FF9800;
|
|
}
|
|
|
|
.t-dark .o-prestige-btn--big-crunch:hover {
|
|
background: #FF9800;
|
|
}
|
|
|
|
.t-metro .o-prestige-btn--big-crunch,
|
|
.t-inverted-metro .o-prestige-btn--big-crunch,
|
|
.t-s8 .o-prestige-btn--big-crunch {
|
|
color: white;
|
|
border: 1px solid #FF9800;
|
|
background: #1F1F1F;
|
|
box-shadow: .1rem .1rem .1rem 0 #9e9e9e;
|
|
border-width: 0.1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-prestige-btn--big-crunch:hover,
|
|
.t-dark-metro .o-prestige-btn--big-crunch:hover,
|
|
.t-inverted-metro .o-prestige-btn--big-crunch:hover,
|
|
.t-s8 .o-prestige-btn--big-crunch:hover {
|
|
background-color: #FF9800;
|
|
}
|
|
|
|
.t-dark-metro .o-prestige-btn--big-crunch {
|
|
color: black;
|
|
background: white;
|
|
border: 1px solid #FF9800;
|
|
box-shadow: 1px 1px 1px 0 black;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-s1 .o-prestige-btn--big-crunch {
|
|
background-color: #dbd242;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-prestige-btn--big-crunch:hover {
|
|
color: #dbd242;
|
|
background-color: black;
|
|
}
|
|
|
|
/*#region Eternity*/
|
|
|
|
.o-prestige-btn--eternity {
|
|
color: #b341e0;
|
|
background-color: black;
|
|
border-color: #b341e0;
|
|
}
|
|
|
|
.o-prestige-btn--dilation {
|
|
color: #64dd17;
|
|
background-color: black;
|
|
border-color: #64dd17;
|
|
}
|
|
|
|
.o-prestige-btn--eternity:hover {
|
|
color: #511568;
|
|
background-color: white;
|
|
}
|
|
|
|
.t-dark .o-prestige-btn--eternity {
|
|
background-color: black;
|
|
}
|
|
|
|
.t-dark .o-prestige-btn--eternity:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.t-metro .o-prestige-btn--eternity,
|
|
.t-dark-metro .o-prestige-btn--eternity,
|
|
.t-inverted-metro .o-prestige-btn--eternity,
|
|
.t-s8 .o-prestige-btn--eternity {
|
|
color: #673ab7;
|
|
border-color: #673ab7;
|
|
border-width: 0.1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-prestige-btn--eternity:hover,
|
|
.t-dark-metro .o-prestige-btn--eternity:hover,
|
|
.t-inverted-metro .o-prestige-btn--eternity:hover,
|
|
.t-s8 .o-prestige-btn--eternity:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.t-s1 .o-prestige-btn--eternity {
|
|
color: #639565;
|
|
background-color: black;
|
|
border-color: #639565;
|
|
}
|
|
|
|
.t-s1 .o-prestige-btn--eternity:hover {
|
|
color: black;
|
|
background: #639565;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s6 .o-prestige-btn--eternity:hover {
|
|
color: #511568;
|
|
background-color: white;
|
|
}
|
|
|
|
/*#endregion Eternity*/
|
|
|
|
/*#endregion Big Crunch*/
|
|
|
|
/*#endregion o-prestige-btn*/
|
|
|
|
/*#region l-spoon-btn-group*/
|
|
|
|
.l-spoon-btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.l--spoon-btn-group__little-spoon {
|
|
align-self: stretch;
|
|
margin-top: .3rem;
|
|
}
|
|
|
|
/*#endregion l-spoon-btn-group*/
|
|
|
|
.o-big-checkbox {
|
|
width: 2rem;
|
|
height: 1.8rem;
|
|
}
|
|
|
|
/*#region hint-text*/
|
|
|
|
.o-hint-text {
|
|
font-size: 1.5rem;
|
|
color: white;
|
|
text-shadow:
|
|
-1px -1px 0 black,
|
|
1px -1px 0 black,
|
|
-1px 1px 0 black,
|
|
1px 1px 0 black;
|
|
}
|
|
|
|
.l-hint-text {
|
|
position: absolute;
|
|
top: -1.5rem;
|
|
left: 0;
|
|
z-index: -999;
|
|
}
|
|
|
|
.l-hint-text--challenge {
|
|
top: -2rem;
|
|
}
|
|
|
|
.l-hint-text--time-study {
|
|
top: -1.85rem;
|
|
}
|
|
|
|
.l-hint-text--reality-upgrade {
|
|
top: -2rem;
|
|
}
|
|
|
|
.l-hint-text--achievement {
|
|
top: -2rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.o-hint-text--alchemy-node {
|
|
color: #4f5957;
|
|
text-shadow: none;
|
|
font-size: 1.2rem;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.o-hint-text--alchemy-node--unfocused {
|
|
opacity: 0;
|
|
}
|
|
|
|
.l-hint-text--alchemy-node {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
}
|
|
|
|
/*#endregion hint-text*/
|
|
|
|
/*#region Header*/
|
|
|
|
.l-game-header__amounts-line {
|
|
position: relative;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/*#region IP Amount*/
|
|
|
|
.l-game-header__infinity-points {
|
|
position: absolute;
|
|
left: 75%;
|
|
}
|
|
|
|
.c-game-header__infinity-points {
|
|
font-size: 1.2rem;
|
|
width: 21rem;
|
|
}
|
|
|
|
.c-game-header__ip-amount {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.t-dark .c-game-header__ip-amount,
|
|
.t-s6 .c-game-header__ip-amount {
|
|
color: white;
|
|
text-shadow: 0 0 .7rem white;
|
|
}
|
|
|
|
.t-metro .c-game-header__ip-amount,
|
|
.t-dark-metro .c-game-header__ip-amount,
|
|
.t-inverted-metro .c-game-header__ip-amount,
|
|
.t-s8 .c-game-header__ip-amount {
|
|
color: #ff9800;
|
|
}
|
|
|
|
.t-s1 .c-game-header__ip-amount {
|
|
color: #7d3c1b;
|
|
text-shadow: .1rem .1rem 0 black;
|
|
}
|
|
|
|
/*#endregion IP Amount*/
|
|
|
|
/*#region EP Amount*/
|
|
|
|
.l-game-header__eternity-points {
|
|
position: absolute;
|
|
right: 75%;
|
|
}
|
|
|
|
.c-game-header__eternity-points {
|
|
font-size: 1.2rem;
|
|
width: 21rem;
|
|
}
|
|
|
|
.c-game-header__ep-amount {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.t-dark .c-game-header__ep-amount,
|
|
.t-s6 .c-game-header__ep-amount {
|
|
color: #b341e0;
|
|
text-shadow: 0 0 .7rem #b341e0;
|
|
}
|
|
|
|
.t-metro .c-game-header__ep-amount,
|
|
.t-dark-metro .c-game-header__ep-amount,
|
|
.t-inverted-metro .c-game-header__ep-amount,
|
|
.t-s8 .c-game-header__ep-amount {
|
|
color: #673ab7;
|
|
}
|
|
|
|
.t-s1 .c-game-header__ep-amount {
|
|
color: #639565;
|
|
text-shadow: .1rem .1rem 0 black;
|
|
}
|
|
|
|
/*#endregion EP Amount*/
|
|
|
|
/*#region c-game-header__antimatter*/
|
|
|
|
.c-game-header__antimatter {
|
|
font-size: 2.5rem;
|
|
color: black;
|
|
}
|
|
|
|
.t-dark .c-game-header__antimatter,
|
|
.t-s6 .c-game-header__antimatter {
|
|
animation: a-game-header__antimatter--glow 25s infinite;
|
|
}
|
|
|
|
@keyframes a-game-header__antimatter--glow {
|
|
0% {color: #2196f3;}
|
|
33% {color: #673ab7;}
|
|
66% {color: #00bcd4;}
|
|
100% {color: #2196f3;}
|
|
}
|
|
|
|
.t-dark-metro .c-game-header__antimatter {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/*#endregion c-game-header__antimatter*/
|
|
|
|
.l-game-header__buttons-line {
|
|
position: relative;
|
|
}
|
|
|
|
.l-game-header__big-crunch-btn {
|
|
position: absolute;
|
|
left: 75%;
|
|
}
|
|
|
|
.l-game-header__eternity-btn {
|
|
position: absolute;
|
|
right: 75%;
|
|
}
|
|
|
|
.l-game-header__new-dim-btn {
|
|
position: absolute;
|
|
right: 75%;
|
|
}
|
|
|
|
.c-game-header__tickspeed-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.c-game-header__tickspeed-row--hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/*#endregion Header*/
|
|
|
|
.t-s2 .c-dim-tab {
|
|
color: black;
|
|
text-shadow: .05rem .05rem 0 white, -.05rem -.05rem 0 white;
|
|
}
|
|
|
|
/*#region Normal Dimensions*/
|
|
|
|
/*#region l-normal-dim-tab*/
|
|
|
|
.l-normal-dim-tab > * {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.l-normal-dim-tab__row-container {
|
|
width: 100%;
|
|
flex: 1 0;
|
|
margin: 0 0.8rem;
|
|
}
|
|
|
|
.l-normal-dim-tab__progress_bar {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
/*#endregion l-normal-dim-tab*/
|
|
|
|
/*#region l-normal-dim-tab-header*/
|
|
|
|
.l-normal-dim-tab__header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.l-normal-dim-tab__header > * {
|
|
margin-right: .4rem;
|
|
margin-left: .4rem;
|
|
}
|
|
|
|
/*#endregion l-normal-dim-tab-header*/
|
|
|
|
.l-normal-dim-row-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/*#region c-normal-dim-row*/
|
|
|
|
.c-normal-dim-row {
|
|
/* relative because floating text is 'position: absolute' */
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 1.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.c-normal-dim-row > * {
|
|
margin-left: 1.6rem;
|
|
}
|
|
|
|
.c-normal-dim-row > *:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.c-normal-dim-row__label {
|
|
text-align: left;
|
|
}
|
|
|
|
.c-normal-dim-row__label--growable {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.c-normal-dim-row__name {
|
|
width: 32%;
|
|
}
|
|
|
|
.c-normal-dim-row__buy-button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.c-normal-dim-row__buy-button--right-offset {
|
|
margin-right: 10rem;
|
|
}
|
|
|
|
.c-normal-dim-row__floating-text {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 15rem;
|
|
animation: float 1s 1;
|
|
color: green;
|
|
opacity: 0;
|
|
}
|
|
|
|
/*#endregion c-dimension-row*/
|
|
|
|
/*#region c-progress-bar*/
|
|
|
|
.c-progress-bar {
|
|
width: 100%;
|
|
background-color: #A3A3A3;
|
|
border-radius: .5rem;
|
|
pointer-events: none;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
/* Start fill from left corner*/
|
|
text-align: left;
|
|
}
|
|
|
|
.c-progress-bar__fill {
|
|
width: 0;
|
|
background-color: #127A20;
|
|
border-radius: inherit;
|
|
transition-duration: 0.1s;
|
|
pointer-events: none;
|
|
/* Align percents on center*/
|
|
text-align: center;
|
|
}
|
|
|
|
.c-progress-bar__percents {
|
|
font-size: 1.6rem;
|
|
color: black;
|
|
pointer-events: all;
|
|
user-select: none;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark t-s6*/
|
|
|
|
.t-s6 .c-progress-bar__fill,
|
|
.t-dark .c-progress-bar__fill {
|
|
background-color: #1b5e20;
|
|
}
|
|
|
|
/*#endregion t-dark t-s6*/
|
|
|
|
/*#region t-inverted t-inverted-metro*/
|
|
|
|
.t-inverted .c-progress-bar__fill,
|
|
.t-inverted-metro .c-progress-bar__fill {
|
|
color: white;
|
|
background-color: #ed85df;
|
|
}
|
|
|
|
/*#endregion t-inverted t-inverted-metro*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .c-progress-bar__fill {
|
|
background-color: #4baf4e;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion c-progress-bar*/
|
|
|
|
/*#endregion Normal Dimensions*/
|
|
|
|
/*#region Infinity Dimensions*/
|
|
|
|
/*#region l-infinity-dim-tab*/
|
|
|
|
.l-infinity-dim-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-infinity-dim-tab__row-container {
|
|
width: 100%;
|
|
margin: 0 0.8rem;
|
|
}
|
|
|
|
.l-infinity-dim-tab__buy-max {
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.l-infinity-dim-tab__ec8-purchases {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.l-infinity-dim-tab__all-autobuyers {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/*#endregion l-infinity-dim-tab*/
|
|
|
|
/*#region c-infinity-dim-description__accent*/
|
|
|
|
.c-infinity-dim-description__accent {
|
|
font-size: 3.5rem;
|
|
color: black;
|
|
}
|
|
|
|
.t-metro .c-infinity-dim-description__accent,
|
|
.t-s8 .c-infinity-dim-description__accent {
|
|
text-shadow: 0 0 .1rem rgba(0, 0, 0, 0.5), -.1rem .1rem .1rem black;
|
|
}
|
|
|
|
.t-dark .c-infinity-dim-description__accent,
|
|
.t-s6 .c-infinity-dim-description__accent {
|
|
color: white;
|
|
text-shadow: 0 0 .7rem #fff;
|
|
}
|
|
|
|
.t-metro .c-infinity-dim-description__accent,
|
|
.t-dark-metro .c-infinity-dim-description__accent,
|
|
.t-s8 .c-infinity-dim-description__accent {
|
|
color: #ff9800;
|
|
}
|
|
|
|
/*#endregion c-infinity-dim-description__accent*/
|
|
|
|
/*#region c-infinity-dim-row*/
|
|
|
|
.c-infinity-dim-row {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.c-infinity-dim-row > * {
|
|
margin-left: 1.6rem;
|
|
}
|
|
|
|
.c-infinity-dim-row > *:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.c-infinity-dim-row__label {
|
|
text-align: left;
|
|
}
|
|
|
|
.c-infinity-dim-row__label--growable {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.c-infinity-dim-row__name {
|
|
width: 41%;
|
|
}
|
|
|
|
.c-infinity-dim-row__button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/*#endregion c-infinity-dim-row*/
|
|
|
|
/*#endregion Infinity Dimensions*/
|
|
|
|
/*#region Time Dimensions*/
|
|
|
|
/*#region l-time-dim-tab*/
|
|
|
|
.l-time-dim-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-time-dim-tab__row-container {
|
|
width: 100%;
|
|
margin: 0 0.8rem;
|
|
}
|
|
|
|
.l-time-dim-tab__buy-max {
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.l-time-dim-tab__all-autobuyers {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/*#endregion l-time-dim-tab*/
|
|
|
|
/*#region c-time-dim-description__accent*/
|
|
|
|
.c-time-dim-description__accent {
|
|
font-size: 3.5rem;
|
|
color: black;
|
|
}
|
|
|
|
.t-metro .c-time-dim-description__accent,
|
|
.t-s8 .c-time-dim-description__accent {
|
|
text-shadow: 0 0 .1rem rgba(0, 0, 0, 0.5), -.1rem .1rem .1rem black;
|
|
}
|
|
|
|
.t-dark .c-time-dim-description__accent,
|
|
.t-s6 .c-time-dim-description__accent {
|
|
color: #64dd17;
|
|
text-shadow: 0 0 .7rem #64dd17;
|
|
}
|
|
|
|
.t-metro .c-time-dim-description__accent,
|
|
.t-dark-metro .c-time-dim-description__accent,
|
|
.t-s8 .c-time-dim-description__accent {
|
|
color: #673ab7;
|
|
}
|
|
|
|
/*#endregion c-time-dim-description__accent*/
|
|
|
|
/*#region c-time-dim-row*/
|
|
|
|
.c-time-dim-row {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.c-time-dim-row > * {
|
|
margin-left: 1.6rem;
|
|
}
|
|
|
|
.c-time-dim-row > *:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.c-time-dim-row__label {
|
|
text-align: left;
|
|
}
|
|
|
|
.c-time-dim-row__label--growable {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.c-time-dim-row__name {
|
|
width: 43%;
|
|
}
|
|
|
|
.c-time-dim-row__button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/*#endregion c-time-dim-row*/
|
|
|
|
/*#endregion Time Dimensions*/
|
|
|
|
/*#region Production*/
|
|
|
|
.c-production-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.c-production-header > * {
|
|
margin-right: .4rem;
|
|
margin-left: .4rem;
|
|
}
|
|
|
|
.c-production-header__checkbox {
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
}
|
|
|
|
/*#endregion Production*/
|
|
|
|
/*#region Options*/
|
|
|
|
.l-options-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.c-options-tab__shortcuts-link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*#region l-options-grid*/
|
|
|
|
.l-options-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.l-options-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-options-grid__button {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
.l-options-grid__button--hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.l-options-grid__notations-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.c-options-grid__notations {
|
|
user-select: none;
|
|
}
|
|
|
|
/** replicate box-shadow behavior */
|
|
.t-dark .c-options-grid__notations {
|
|
box-shadow: 0 0 .7rem .2rem #111111;
|
|
}
|
|
|
|
.t-dark-metro .c-options-grid__notations {
|
|
box-shadow: .1rem .1rem .1rem 0 black;
|
|
}
|
|
|
|
.t-metro .c-options-grid__notations,
|
|
.t-inverted-metro .c-options-grid__notations {
|
|
box-shadow: .1rem .1rem .1rem 0 #9e9e9e;
|
|
}
|
|
|
|
.t-s6 .c-options-grid__notations {
|
|
box-shadow: 0 0 .7rem .2rem #111111;
|
|
}
|
|
|
|
/*#endregion l-options-grid*/
|
|
|
|
.l-select-notation,
|
|
.l-select-theme {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.l-select-notation__item,
|
|
.l-select-theme__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.o-primary-btn.c-select-notation__item,
|
|
.o-primary-btn.c-select-theme__item {
|
|
box-shadow: none;
|
|
border-top: none;
|
|
}
|
|
|
|
|
|
/*#endregion Options*/
|
|
|
|
/*#region c-stats-tab*/
|
|
/* This the top-level Statistics tab (with all subtabs)*/
|
|
|
|
.c-stats-tab {
|
|
color: black;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.t-dark .c-stats-tab {
|
|
color: #888888;
|
|
}
|
|
|
|
.t-s6 .c-stats-tab {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.t-dark-metro .c-stats-tab {
|
|
color: #757575;
|
|
}
|
|
|
|
/*#endregion c-stats-tab*/
|
|
|
|
/*#region Challenge Records*/
|
|
|
|
.l-challenge-records-tab {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-challenge-records-tab__infinity_challenges {
|
|
margin-top: auto;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
/*#endregion Challenge Records*/
|
|
|
|
/*#region Achievements*/
|
|
|
|
/*#region o-achievement*/
|
|
|
|
.o-achievement {
|
|
width: 10.4rem;
|
|
height: 10.4rem;
|
|
border-radius: .8rem;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
font-family: TypeWriter, serif;
|
|
color: black;
|
|
font-size: .8rem;
|
|
user-select: none;
|
|
border: .2rem solid;
|
|
}
|
|
|
|
.o-achievement--normal {
|
|
background-image: url("../images/normal achievements.png");
|
|
}
|
|
|
|
.o-achievement--cancer {
|
|
background-image: url("../images/cancer achievements.png");
|
|
}
|
|
|
|
.o-achievement--secret {
|
|
background-image: url("../images/secret achievements.png");
|
|
}
|
|
|
|
.o-achievement--locked {
|
|
background-color: #a3a3a3;
|
|
border-color: #b84b5f;
|
|
}
|
|
|
|
.o-achievement--unlocked {
|
|
background-color: #5ac467;
|
|
border-color: #127a20;
|
|
}
|
|
|
|
.o-achievement--disabled {
|
|
background-color: #c45a5a;
|
|
border-color: #781212;
|
|
}
|
|
|
|
.o-achievement--hidden {
|
|
background-image: url("../images/achhidden.png");
|
|
background-color: #555;
|
|
border-color: black;
|
|
}
|
|
|
|
.o-achievement--blink {
|
|
animation: o-achievement--blink 2s step-start 0s infinite;
|
|
}
|
|
|
|
@keyframes o-achievement--blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark*/
|
|
|
|
.t-dark .o-achievement--unlocked {
|
|
background-color: #43a047;
|
|
}
|
|
|
|
/*#endregion t-dark*/
|
|
|
|
/*#region t-dark-metro*/
|
|
|
|
.t-dark-metro .o-achievement {
|
|
border-width: 1px;
|
|
}
|
|
|
|
.t-dark-metro .o-achievement--unlocked {
|
|
background-color: #4caf50;
|
|
border-color: #388e3c;
|
|
}
|
|
|
|
.t-dark-metro .o-achievement--locked {
|
|
background-color: #9e9e9e;
|
|
border-color: #e53935;
|
|
}
|
|
|
|
/*#endregion t-dark-metro*/
|
|
|
|
/*#region t-metro t-inverted-metro t-s8*/
|
|
|
|
.t-metro .o-achievement,
|
|
.t-dark-metro .o-achievement,
|
|
.t-inverted-metro .o-achievement,
|
|
.t-s8 .o-achievement {
|
|
border-width: 1px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-achievement--unlocked,
|
|
.t-inverted-metro .o-achievement--unlocked,
|
|
.t-s8 .o-achievement--unlocked {
|
|
background-color: #66bb6a;
|
|
border-color: #43a047;
|
|
}
|
|
|
|
.t-metro .o-achievement--locked,
|
|
.t-inverted-metro .o-achievement--locked,
|
|
.t-s8 .o-achievement--locked {
|
|
background-color: #9e9e9e;
|
|
border-color: #ef5350;
|
|
}
|
|
|
|
/*#endregion t-metro t-dark-metro t-s8*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .o-achievement--unlocked {
|
|
background-color: #dbd242;
|
|
border-color: #c5ba26;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#region t-s2*/
|
|
|
|
.t-s2 .o-achievement--locked {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
/*#endregion t-s2*/
|
|
|
|
/*#region t-s5*/
|
|
|
|
.t-s5 .o-achievement--unlocked {
|
|
border-color: #bbb;
|
|
}
|
|
|
|
.t-s5 .o-achievement--locked {
|
|
border-color: #000;
|
|
background-color: #222;
|
|
}
|
|
|
|
/*#endregion t-s5*/
|
|
|
|
/*#region t-s6*/
|
|
|
|
.t-s6 .o-achievement--unlocked {
|
|
background-color: #43a047;
|
|
}
|
|
|
|
/*#endregion t-s6*/
|
|
|
|
/*#region t-s7*/
|
|
|
|
.t-s7 .o-achievement--unlocked {
|
|
background-color: #bbbbbb;
|
|
border-color: #666;
|
|
}
|
|
|
|
.t-s7 .o-achievement--locked {
|
|
background-color: #555;
|
|
border-color: #111;
|
|
}
|
|
|
|
/*#endregion t-s7*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion o-achievement*/
|
|
|
|
/*#region c-achievements-tab*/
|
|
|
|
.c-achievements-tab__header {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.c-achievements-tab__timer {
|
|
color: black;
|
|
font-size: 1.2rem;
|
|
width: 40%;
|
|
margin: .5rem auto;
|
|
}
|
|
|
|
.t-dark .c-achievements-tab__timer,
|
|
.t-dark-metro .c-achievements-tab__timer,
|
|
.t-s6 .c-achievements-tab__timer {
|
|
color: #757575;
|
|
}
|
|
|
|
/*#endregion c-achievements-tab*/
|
|
|
|
/*#region achievement-grid*/
|
|
|
|
.l-achievement-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-achievement-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-achievement-grid__cell {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
.c-achievement-grid__row--completed {
|
|
background-color: #007308;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.t-metro .c-achievement-grid__row--completed,
|
|
.t-dark-metro .c-achievement-grid__row--completed,
|
|
.t-inverted-metro .c-achievement-grid__row--completed,
|
|
.t-s8 .c-achievement-grid__row--completed {
|
|
background-color: #1b5e20;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.t-s1 .c-achievement-grid__row--completed {
|
|
background-color: #9a921d;
|
|
}
|
|
|
|
.t-s7 .c-achievement-grid__row--completed {
|
|
background-color: #aaa;
|
|
}
|
|
|
|
/*#endregion achievement-grid*/
|
|
|
|
/*#endregion Achievements*/
|
|
|
|
/*#region Challenges*/
|
|
|
|
/*#region l-challenges-tab*/
|
|
|
|
.l-challenges-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-challenges-tab__header {
|
|
margin: .5rem 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.l-challenges-tab__header > * {
|
|
margin-left: .3rem;
|
|
}
|
|
|
|
.l-challenges-tab__header > *:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.l-challenges-tab__exit-btn {
|
|
margin-right: 1rem;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.l-challenges-tab__auto-ec-info {
|
|
position: absolute;
|
|
left: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.c-challenges-tab__auto-ec-info {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
.l-challenges-tab__auto-ec-timers {
|
|
margin-left: .4rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/*#endregion l-challenges-tab*/
|
|
|
|
/*#region l-challenge-grid*/
|
|
|
|
.l-challenge-grid {
|
|
/* grid cell is 30rem < cell.width < 40rem, so the grid is 2x(N/2) */
|
|
width: 80rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.l-challenge-grid__cell {
|
|
margin: .8rem 1.6rem;
|
|
}
|
|
|
|
.l-challenge-grid__cell--hidden {
|
|
display: none;
|
|
}
|
|
|
|
/*#endregion l-challenge-grid*/
|
|
|
|
/*#region c-challenge-box*/
|
|
|
|
.c-challenge-box {
|
|
width: 35rem;
|
|
height: 10.5rem;
|
|
padding: .2rem .4rem .4rem .4rem;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
border: .2rem solid black;
|
|
border-radius: .5rem;
|
|
font-size: .9rem;
|
|
transition: all 0.2s, visibility 0s;
|
|
}
|
|
|
|
.c-challenge-box--normal {
|
|
color: black;
|
|
font-size: 1rem;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.c-challenge-box--infinity {
|
|
height: 15rem;
|
|
color: white;
|
|
background-color: #181818;
|
|
}
|
|
|
|
.c-challenge-box--eternity {
|
|
height: 15rem;
|
|
color: #b341e0;
|
|
background-color: black;
|
|
border: .3rem solid #b341e0;
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.c-challenge-box__reward-description--small-text {
|
|
font-size: .85rem;
|
|
}
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark*/
|
|
|
|
.t-dark .c-challenge-box--normal {
|
|
background-color: #455a64;
|
|
}
|
|
|
|
/*#endregion t-dark*/
|
|
|
|
/*#region t-metro t-dark-metro t-inverted-metro t-s8*/
|
|
|
|
.t-metro .c-challenge-box,
|
|
.t-dark-metro .c-challenge-box,
|
|
.t-inverted-metro .c-challenge-box,
|
|
.t-s8 .c-challenge-box {
|
|
border: .1rem solid black;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-dark-metro .c-challenge-box--normal {
|
|
background-color: #455a64;
|
|
}
|
|
|
|
.t-metro .c-challenge-box--eternity,
|
|
.t-dark-metro .c-challenge-box--eternity,
|
|
.t-inverted-metro .c-challenge-box--eternity,
|
|
.t-s8 .c-challenge-box--eternity {
|
|
color: #673ab7;
|
|
border-color: #673ab7;
|
|
}
|
|
|
|
/*#endregion t-metro t-dark-metro t-inverted-metro*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .c-challenge-box--normal,
|
|
.t-s1 .c-challenge-box--infinity {
|
|
background-color: #dbd242;
|
|
}
|
|
|
|
.t-s1 .c-challenge-box--eternity {
|
|
color: #639565;
|
|
border: .3rem solid #639565;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#region t-s6*/
|
|
|
|
.t-s6 .c-challenge-box--normal,
|
|
.t-s6 .c-challenge-box--infinity {
|
|
background-color: black;
|
|
border: .1rem solid;
|
|
}
|
|
|
|
.t-s6 .c-challenge-box--normal {
|
|
color: #e0e0e0;
|
|
border-color: grey;
|
|
}
|
|
|
|
.t-s6 .c-challenge-box--infinity {
|
|
border-color: white;
|
|
}
|
|
|
|
/*#endregion t-s6*/
|
|
|
|
/*#region t-s7*/
|
|
|
|
.t-s7 .c-challenge-box {
|
|
color: black;
|
|
border: .1rem solid #9b9b9b;
|
|
background: white;
|
|
}
|
|
|
|
/*#endregion t-s7*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion c-challenge-box*/
|
|
|
|
/*#region l-challenge-box*/
|
|
|
|
.l-challenge-box {
|
|
margin-top: .5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
/* because of hint-text */
|
|
position: relative;
|
|
}
|
|
|
|
.l-challenge-box > * {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.l-challenge-box__fill {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.l-challenge-box__bottom--infinity {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 5.5rem;
|
|
}
|
|
|
|
/*#endregion l-challenge-box*/
|
|
|
|
/*#region o-challenge-btn*/
|
|
|
|
.o-challenge-btn {
|
|
width: 15rem;
|
|
height: 3rem;
|
|
font-family: Typewriter, serif;
|
|
font-weight: bold;
|
|
border: .3rem solid #127a20;
|
|
border-radius: 1rem;
|
|
font-size: 1.2rem;
|
|
transition: all 0.2s, visibility 0s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-challenge-btn--unlocked {
|
|
color: black;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.o-challenge-btn--unlocked:hover,
|
|
.o-challenge-btn--completed {
|
|
color: white;
|
|
background-color: #5ac467;
|
|
}
|
|
|
|
.o-challenge-btn--running {
|
|
color: white;
|
|
background-color: #1f1f1f;
|
|
}
|
|
|
|
.o-challenge-btn--locked {
|
|
color: black;
|
|
background-color: #5c5c5c;
|
|
border-color: #881d1d;
|
|
cursor: default;
|
|
}
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark*/
|
|
|
|
.t-dark .o-challenge-btn--unlocked {
|
|
background-color: #546e7a;
|
|
}
|
|
|
|
.t-dark .o-challenge-btn--unlocked:hover,
|
|
.t-dark .o-challenge-btn--completed {
|
|
background-color: #43a047;
|
|
}
|
|
|
|
.t-dark .o-challenge-btn--completed {
|
|
box-shadow: none;
|
|
border-color: #388e3c;
|
|
}
|
|
|
|
.t-dark .o-challenge-btn--running {
|
|
background-color: #263238;
|
|
}
|
|
|
|
.t-dark .o-challenge-btn--locked {
|
|
background-color: #23292a;
|
|
border-color: #b84b5f;
|
|
}
|
|
|
|
/*#endregion t-dark*/
|
|
|
|
/*#region t-metro t-dark-metro t-inverted-metro t-s8*/
|
|
|
|
.t-metro .o-challenge-btn,
|
|
.t-dark-metro .o-challenge-btn,
|
|
.t-inverted-metro .o-challenge-btn,
|
|
.t-s8 .o-challenge-btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-challenge-btn--unlocked,
|
|
.t-metro .o-challenge-btn--completed,
|
|
.t-dark-metro .o-challenge-btn--unlocked,
|
|
.t-dark-metro .o-challenge-btn--completed,
|
|
.t-inverted-metro .o-challenge-btn--unlocked,
|
|
.t-inverted-metro .o-challenge-btn--completed,
|
|
.t-s8 .o-challenge-btn--unlocked,
|
|
.t-s8 .o-challenge-btn--completed {
|
|
border: .3rem solid #43a047;
|
|
border-bottom-color: #388e3c;
|
|
border-right-color: #388e3c;
|
|
}
|
|
|
|
.t-metro .o-challenge-btn--unlocked:hover,
|
|
.t-metro .o-challenge-btn--completed,
|
|
.t-inverted-metro .o-challenge-btn--unlocked:hover,
|
|
.t-inverted-metro .o-challenge-btn--completed,
|
|
.t-s8 .o-challenge-btn--unlocked:hover,
|
|
.t-s8 .o-challenge-btn--completed {
|
|
background-color: #66bb6a;
|
|
}
|
|
|
|
.t-dark-metro .o-challenge-btn--unlocked:hover,
|
|
.t-dark-metro .o-challenge-btn--completed {
|
|
background-color: #43a047;
|
|
}
|
|
|
|
.t-metro .o-challenge-btn--locked,
|
|
.t-dark-metro .o-challenge-btn--locked,
|
|
.t-inverted-metro .o-challenge-btn--locked,
|
|
.t-s8 .o-challenge-btn--locked {
|
|
background-color: #9e9e9e;
|
|
border: .3rem solid #757575;
|
|
border-bottom-color: #616161;
|
|
border-right-color: #616161;
|
|
}
|
|
|
|
/*#endregion t-metro t-dark-metro t-inverted-metro t-s8*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .o-challenge-btn--unlocked {
|
|
color: white;
|
|
background: none;
|
|
border: .3rem solid #507751;
|
|
}
|
|
|
|
.t-s1 .o-challenge-btn--unlocked:hover,
|
|
.t-s1 .o-challenge-btn--completed {
|
|
background-color: #639565;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#region t-s6*/
|
|
|
|
.t-s6 .o-challenge-btn {
|
|
border-color: #388e3c;
|
|
}
|
|
|
|
.t-s6 .o-challenge-btn--unlocked {
|
|
color: white;
|
|
background-color: black;
|
|
}
|
|
|
|
.t-s6 .o-challenge-btn--unlocked:hover,
|
|
.t-s6 .o-challenge-btn--completed {
|
|
background-color: #43a047;
|
|
}
|
|
|
|
.t-s6 .o-challenge-btn--completed {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.t-s6 .o-challenge-btn--running {
|
|
background: #263238;
|
|
}
|
|
|
|
.t-s6 .o-challenge-btn--locked {
|
|
color: grey;
|
|
background: black;
|
|
border-color: #b84b5f;
|
|
}
|
|
|
|
/*#endregion t-s6*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion o-challenge-btn*/
|
|
|
|
/*#endregion Challenges*/
|
|
|
|
/*#region infinity-tab*/
|
|
|
|
.l-infinity-tab {
|
|
align-items: center;
|
|
}
|
|
|
|
.c-infinity-tab__header {
|
|
color: black;
|
|
font-size: 1.5rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.c-infinity-tab__infinity-points {
|
|
}
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark t-s6*/
|
|
|
|
.t-dark .c-infinity-tab__header {
|
|
color: #4f5957;
|
|
}
|
|
|
|
.t-s6 .c-infinity-tab__header {
|
|
color: #999;
|
|
}
|
|
|
|
.t-dark .c-infinity-tab__infinity-points,
|
|
.t-s6 .c-infinity-tab__infinity-points {
|
|
color: white;
|
|
text-shadow: 0 0 .7rem white;
|
|
}
|
|
|
|
/*#endregion t-dark*/
|
|
|
|
/*#region t-metro t-dark-metro t-inverted-metro t-s8*/
|
|
|
|
.t-dark-metro .c-infinity-tab__header {
|
|
color: #757575;
|
|
}
|
|
|
|
.t-metro .c-infinity-tab__infinity-points,
|
|
.t-dark-metro .c-infinity-tab__infinity-points,
|
|
.t-inverted-metro .c-infinity-tab__infinity-points,
|
|
.t-s8 .c-infinity-tab__infinity-points {
|
|
color: #ff9800;
|
|
}
|
|
|
|
/*#endregion t-metro t-dark-metro t-inverted-metro t-s8*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .c-infinity-tab__infinity-points {
|
|
color: #7d3c1b;
|
|
text-shadow: .1rem .1rem 0 black;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion infinity-tab*/
|
|
|
|
/*#region Infinity Upgrades*/
|
|
|
|
/*#region l-infinity-upgrades-tab*/
|
|
|
|
.l-infinity-upgrades-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-infinity-upgrades-tab__grid {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.l-infinity-upgrades-tab__mult-btn {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
/*#endregion l-infinity-upgrades-tab*/
|
|
|
|
/*#region l-infinity-upgrade-grid*/
|
|
|
|
.l-infinity-upgrade-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-infinity-upgrade-grid__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.l-infinity-upgrade-grid__cell {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
/*#endregion l-infinity-upgrade-grid*/
|
|
|
|
.l-infinity-upgrades-bottom-row {
|
|
display: flex;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/*#region o-infinity-upgrade-btn*/
|
|
|
|
.o-infinity-upgrade-btn {
|
|
color: white;
|
|
background-color: #1f1f1f;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
border: .1rem solid #ed85df;
|
|
width: 19rem;
|
|
height: 9rem;
|
|
transition-duration: 0.2s;
|
|
border-radius: .4rem;
|
|
font-family: Typewriter, serif;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn,
|
|
.t-dark-metro .o-infinity-upgrade-btn,
|
|
.t-inverted-metro .o-infinity-upgrade-btn,
|
|
.t-s8 .o-infinity-upgrade-btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn,
|
|
.t-metro .o-infinity-upgrade-btn,
|
|
.t-dark-metro .o-infinity-upgrade-btn,
|
|
.t-inverted-metro .o-infinity-upgrade-btn,
|
|
.t-s1 .o-infinity-upgrade-btn,
|
|
.t-s6 .o-infinity-upgrade-btn,
|
|
.t-s8 .o-infinity-upgrade-btn {
|
|
border-color: black;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn {
|
|
color: black;
|
|
background-color: whitesmoke;
|
|
}
|
|
|
|
.t-s6 .o-infinity-upgrade-btn {
|
|
color: white;
|
|
background-color: black;
|
|
box-shadow: 0 0 7px 2px #111111;
|
|
}
|
|
|
|
.o-infinity-upgrade-btn:hover {
|
|
color: black;
|
|
}
|
|
|
|
/*#region o-infinity-upgrade-btn--available*/
|
|
|
|
.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #a53b98;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--available:hover,
|
|
.t-s6 .o-infinity-upgrade-btn--available:hover {
|
|
background-color: #6200ea;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--available:hover,
|
|
.t-dark-metro .o-infinity-upgrade-btn--available:hover,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--available:hover,
|
|
.t-s8 .o-infinity-upgrade-btn--available:hover {
|
|
background-color: #9c27b0;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn--available*/
|
|
|
|
/*#region o-infinity-upgrade-btn--color-2*/
|
|
|
|
.o-infinity-upgrade-btn--color-2.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #ff3300;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--color-2.o-infinity-upgrade-btn--available:hover,
|
|
.t-s6 .o-infinity-upgrade-btn--color-2.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #d50000;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--color-2.o-infinity-upgrade-btn--available:hover,
|
|
.t-dark-metro .o-infinity-upgrade-btn--color-2.o-infinity-upgrade-btn--available:hover,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--color-2.o-infinity-upgrade-btn--available:hover,
|
|
.t-s8 .o-infinity-upgrade-btn--color-2.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn--color-2*/
|
|
|
|
/*#region o-infinity-upgrade-btn--color-3*/
|
|
|
|
.o-infinity-upgrade-btn--color-3.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #c6d50d;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--color-3.o-infinity-upgrade-btn--available:hover,
|
|
.t-s6 .o-infinity-upgrade-btn--color-3.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #ffd600;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--color-3.o-infinity-upgrade-btn--available:hover,
|
|
.t-dark-metro .o-infinity-upgrade-btn--color-3.o-infinity-upgrade-btn--available:hover,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--color-3.o-infinity-upgrade-btn--available:hover,
|
|
.t-s8 .o-infinity-upgrade-btn--color-3.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #ffeb3b;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn--color-3*/
|
|
|
|
/*#region o-infinity-upgrade-btn--color-4*/
|
|
|
|
.o-infinity-upgrade-btn--color-4.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #0cfec5;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--color-4.o-infinity-upgrade-btn--available:hover,
|
|
.t-s6 .o-infinity-upgrade-btn--color-4.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #00e5ff;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--color-4.o-infinity-upgrade-btn--available:hover,
|
|
.t-dark-metro .o-infinity-upgrade-btn--color-4.o-infinity-upgrade-btn--available:hover,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--color-4.o-infinity-upgrade-btn--available:hover,
|
|
.t-s8 .o-infinity-upgrade-btn--color-4.o-infinity-upgrade-btn--available:hover {
|
|
background-color: #00bcd4;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn--color-4*/
|
|
|
|
/*#region o-infinity-upgrade-btn--multiplier*/
|
|
|
|
.o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available {
|
|
color: #c93a3a;
|
|
border-color: #17b3b5;
|
|
}
|
|
|
|
.o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover {
|
|
color: black;
|
|
background-color: #e0d8e0;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available,
|
|
.t-s6 .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available {
|
|
background-color: #1f1f1f;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover,
|
|
.t-s6 .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover {
|
|
color: white;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available,
|
|
.t-dark-metro .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available,
|
|
.t-s8 .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available {
|
|
color: #e53935;
|
|
border-color: #00bcd4;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover,
|
|
.t-dark-metro .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover,
|
|
.t-s8 .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover {
|
|
color: black;
|
|
background-color: #00bcd4;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available {
|
|
background-color: black;
|
|
color: #d72621;
|
|
border-color: #dbd242;
|
|
}
|
|
|
|
.t-s1 .o-infinity-upgrade-btn--multiplier.o-infinity-upgrade-btn--available:hover {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn--multiplier*/
|
|
|
|
/*#region o-infinity-upgrade-btn--unavailable*/
|
|
|
|
.o-infinity-upgrade-btn--unavailable {
|
|
color: black;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.o-infinity-upgrade-btn--unavailable:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--unavailable {
|
|
background-color: #263238;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--unavailable:hover {
|
|
background-color: #37474F;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--unavailable,
|
|
.t-dark-metro .o-infinity-upgrade-btn--unavailable,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--unavailable,
|
|
.t-s8 .o-infinity-upgrade-btn--unavailable {
|
|
background-color: #9e9e9e;
|
|
border-color: #616161;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--unavailable:hover,
|
|
.t-dark-metro .o-infinity-upgrade-btn--unavailable:hover,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--unavailable:hover,
|
|
.t-s8 .o-infinity-upgrade-btn--unavailable:hover {
|
|
background-color: #bdbdbd;
|
|
}
|
|
|
|
.t-s1 .o-infinity-upgrade-btn--unavailable {
|
|
background-color: #9a921d;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-infinity-upgrade-btn--unavailable:hover {
|
|
background-color: #c5ba26;
|
|
}
|
|
|
|
.t-s6 .o-infinity-upgrade-btn--unavailable:hover {
|
|
color: grey;
|
|
background-color: black;
|
|
border-color: grey;
|
|
}
|
|
|
|
.t-s6 .o-infinity-upgrade-btn--unavailable:hover:hover {
|
|
background-color: #222;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn--unavailable*/
|
|
|
|
/*#region o-infinity-upgrade-btn--bought*/
|
|
|
|
.o-infinity-upgrade-btn--bought {
|
|
color: black;
|
|
background-color: #5ac467;
|
|
cursor: default;
|
|
}
|
|
|
|
.t-dark .o-infinity-upgrade-btn--bought,
|
|
.t-dark-metro .o-infinity-upgrade-btn--bought,
|
|
.t-s6 .o-infinity-upgrade-btn--bought{
|
|
background-color: #43a047;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-metro .o-infinity-upgrade-btn--bought,
|
|
.t-inverted-metro .o-infinity-upgrade-btn--bought,
|
|
.t-s8 .o-infinity-upgrade-btn--bought {
|
|
background-color: #66bb6a;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-infinity-upgrade-btn--bought {
|
|
background-color: #4baf4e;
|
|
border-color: black;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn--bought*/
|
|
|
|
.o-infinity-upgrade-btn--chargeable {
|
|
background-color: #25e8e6;
|
|
animation: a-compression-btn-glow 2s infinite;
|
|
}
|
|
|
|
.o-infinity-upgrade-btn--charged {
|
|
background-color: #25e8e6;
|
|
}
|
|
|
|
/*#endregion o-infinity-upgrade-btn*/
|
|
|
|
/*#endregion Infinity Upgrades*/
|
|
|
|
/*#region Autobuyers*/
|
|
|
|
/*#region l-autobuyers-tab*/
|
|
|
|
.l-autobuyers-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-autobuyers-tab__toggles {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
/*#endregion l-autobuyers-tab*/
|
|
|
|
/*#region l-autobuyer-toggles*/
|
|
|
|
.l-autobuyer-toggles {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-autobuyer-toggles > * {
|
|
margin: 0 .3rem;
|
|
}
|
|
|
|
/*#endregion l-autobuyer-toggles*/
|
|
|
|
/*#region l-autobuyer-grid*/
|
|
|
|
.l-autobuyer-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.l-autobuyer-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-autobuyer-grid__row > * {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
/*#endregion l-autobuyer-grid*/
|
|
|
|
/*#region o-autobuyer-input*/
|
|
|
|
.o-autobuyer-input {
|
|
border: .01rem solid #c2c2c2;
|
|
padding: .3rem;
|
|
height: 2.5rem;
|
|
width: 20rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.o-autobuyer-input--invalid {
|
|
background-color: tomato;
|
|
}
|
|
|
|
.t-dark .o-autobuyer-input {
|
|
background-color: #455A64;
|
|
border: .1rem solid black;
|
|
padding: .3rem;
|
|
}
|
|
|
|
/*#endregion o-autobuyer-input*/
|
|
|
|
/*#region o-autobuyer-toggle-checkbox*/
|
|
|
|
.o-autobuyer-toggle-checkbox {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.o-autobuyer-toggle-checkbox__label {
|
|
font-size: .9rem;
|
|
}
|
|
|
|
/*#endregion o-autobuyer-toggle-checkbox*/
|
|
|
|
/*#region o-autobuyer-btn*/
|
|
|
|
.o-autobuyer-btn {
|
|
width: 18rem;
|
|
height: 3.5rem;
|
|
color: white;
|
|
background: #1f1f1f;
|
|
border: .1rem solid #ed85df;
|
|
font-family: Typewriter, serif;
|
|
font-weight: bold;
|
|
font-size: .8rem;
|
|
border-radius: .4rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-autobuyer-btn:hover {
|
|
color: black;
|
|
background-color: #b67f33;
|
|
border: .2rem solid #b67f33;
|
|
}
|
|
|
|
.t-dark .o-autobuyer-btn,
|
|
.t-dark-metro .o-autobuyer-btn,
|
|
.t-s1 .o-autobuyer-btn,
|
|
.t-s6 .o-autobuyer-btn,
|
|
.t-s8 .o-autobuyer-btn {
|
|
border-width: .1rem;
|
|
}
|
|
|
|
.t-metro .o-autobuyer-btn,
|
|
.t-dark-metro .o-autobuyer-btn,
|
|
.t-dark-metro .o-autobuyer-btn,
|
|
.t-s1 .o-autobuyer-btn,
|
|
.t-s8 .o-autobuyer-btn {
|
|
margin-bottom: -0.1rem;
|
|
}
|
|
|
|
.t-dark .o-autobuyer-btn,
|
|
.t-s6 .o-autobuyer-btn {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.t-dark .o-autobuyer-btn {
|
|
color: black;
|
|
border-color: black;
|
|
background: #455A64;
|
|
}
|
|
|
|
.t-dark-metro .o-autobuyer-btn,
|
|
.t-s6 .o-autobuyer-btn {
|
|
border-color: #ff9800;
|
|
}
|
|
|
|
.t-metro .o-autobuyer-btn,
|
|
.t-dark-metro .o-autobuyer-btn,
|
|
.t-inverted-metro .o-autobuyer-btn,
|
|
.t-s8 .o-autobuyer-btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-autobuyer-btn,
|
|
.t-inverted-metro .o-autobuyer-btn,
|
|
.t-s8 .o-autobuyer-btn {
|
|
border-color: #e91e63;
|
|
}
|
|
|
|
.t-metro .o-autobuyer-btn:hover,
|
|
.t-inverted-metro .o-autobuyer-btn:hover,
|
|
.t-s6 .o-autobuyer-btn:hover,
|
|
.t-s8 .o-autobuyer-btn:hover {
|
|
border-color: #ff9800;
|
|
}
|
|
|
|
.t-dark .o-autobuyer-btn:hover,
|
|
.t-dark-metro .o-autobuyer-btn:hover,
|
|
.t-metro .o-autobuyer-btn:hover,
|
|
.t-inverted-metro .o-autobuyer-btn:hover,
|
|
.t-s6 .o-autobuyer-btn:hover,
|
|
.t-s8 .o-autobuyer-btn:hover {
|
|
background-color: #ff9800;
|
|
}
|
|
|
|
.t-s1 .o-autobuyer-btn {
|
|
border-color: #7d3c1b;
|
|
}
|
|
|
|
.t-s1 .o-autobuyer-btn:hover {
|
|
background-color: #7d3c1b;
|
|
}
|
|
|
|
.t-s6 .o-autobuyer-btn {
|
|
color: white;
|
|
background-color: black;
|
|
}
|
|
|
|
/*#endregion o-autobuyer-btn*/
|
|
|
|
/*#region autobuyer-box*/
|
|
|
|
.c-autobuyer-box {
|
|
width: 23rem;
|
|
height: 17.5rem;
|
|
padding: 1rem;
|
|
border: solid .1rem grey;
|
|
border-radius: .4rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.t-metro .c-autobuyer-box,
|
|
.t-dark-metro .c-autobuyer-box,
|
|
.t-inverted-metro .c-autobuyer-box,
|
|
.t-s8 .c-autobuyer-box {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-s1 .c-autobuyer-box {
|
|
color: black;
|
|
border-color: black;
|
|
background-color: #dbd242;
|
|
}
|
|
|
|
.t-s5 .c-autobuyer-box {
|
|
background: #ddd;
|
|
}
|
|
|
|
.t-s8 .c-autobuyer-box {
|
|
border-color: black;
|
|
}
|
|
|
|
.c-autobuyer-box__small-text {
|
|
font-size: .9rem;
|
|
}
|
|
|
|
.c-autobuyer-box__mode-select {
|
|
font-family: Typewriter, serif;
|
|
font-size: 1.1rem;
|
|
color: #4f5957;
|
|
text-align: center;
|
|
text-align-last: center;
|
|
height: 2.5rem;
|
|
width: 20rem;
|
|
}
|
|
|
|
.l-autobuyer-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-autobuyer-box__header {
|
|
height: 1.6rem;
|
|
}
|
|
|
|
.l-autobuyer-box__content {
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-autobuyer-box__footer {
|
|
height: 1.6rem;
|
|
}
|
|
|
|
.l-autobuyer-box__button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.l-autobuyer-box__mode-select {
|
|
margin-bottom: 0.5rem
|
|
}
|
|
|
|
.l-autobuyer-box__fill {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.l-autobuyer-box__priority-selector {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/*#endregion autobuyer-box*/
|
|
|
|
/*#endregion Autobuyers*/
|
|
|
|
/*#region Replicanti*/
|
|
|
|
.l-replicanti-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* To prevent button jitter*/
|
|
width: 100%;
|
|
}
|
|
|
|
/*#region c-replicanti-description*/
|
|
|
|
.c-replicanti-description {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.c-replicanti-description__accent {
|
|
font-size: 2.3rem;
|
|
color: black
|
|
}
|
|
|
|
.t-metro .c-replicanti-description__accent,
|
|
.t-dark .c-replicanti-description__accent,
|
|
.t-dark-metro .c-replicanti-description__accent,
|
|
.t-s6 .c-replicanti-description__accent,
|
|
.t-s8 .c-replicanti-description__accent {
|
|
color: #03a9f4;
|
|
}
|
|
|
|
.t-metro .c-replicanti-description__accent,
|
|
.t-s8 .c-replicanti-description__accent {
|
|
text-shadow: 0 0 .1rem rgba(0, 0, 0, 0.5), -.1rem .1rem .1rem black;
|
|
}
|
|
|
|
.t-dark .c-replicanti-description__accent,
|
|
.t-s6 .c-replicanti-description__accent {
|
|
text-shadow: 0 0 .7rem #03a9f4;
|
|
}
|
|
|
|
/*#endregion c-replicanti-description*/
|
|
|
|
.l-replicanti-upgrade-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-replicanti-upgrade-row > * {
|
|
margin: .3rem;
|
|
}
|
|
|
|
/*#endregion Replicanti*/
|
|
|
|
/*#region Break Infinity*/
|
|
|
|
/*#region l-break-infinity-tab*/
|
|
|
|
.l-break-infinity-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-break-infinity-tab__break-btn {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.l-break-infinity-tab__grid {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/*#endregion l-break-infinity-tab*/
|
|
|
|
/*#region l-break-infinity-upgrade-grid*/
|
|
|
|
.l-break-infinity-upgrade-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.l-break-infinity-upgrade-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-break-infinity-upgrade-grid__cell {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
/*#endregion l-break-infinity-upgrade-grid*/
|
|
|
|
/*#endregion Break Infinity*/
|
|
|
|
/*#region Eternity Upgrades*/
|
|
|
|
.l-eternity-upgrades-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.l-eternity-upgrades-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-eternity-upgrades-grid__cell {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
.o-eternity-upgrade {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
border: .1rem solid #b341e0;
|
|
width: 19rem;
|
|
height: 9rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
border-radius: .4rem;
|
|
font-family: Typewriter, serif;
|
|
}
|
|
|
|
.o-eternity-upgrade--available {
|
|
color: #b341e0;
|
|
background-color: black;
|
|
}
|
|
|
|
.o-eternity-upgrade--available:hover {
|
|
color: #511568;
|
|
background-color: white;
|
|
}
|
|
|
|
.o-eternity-upgrade--unavailable {
|
|
color: #181818;
|
|
background-color: #5f5f5f;
|
|
}
|
|
|
|
.o-eternity-upgrade--unavailable:hover {
|
|
background-color: #737373;
|
|
}
|
|
|
|
.o-eternity-upgrade--bought {
|
|
color: #511568;
|
|
background-color: #5ac467;
|
|
cursor: default;
|
|
}
|
|
|
|
.t-metro .o-eternity-upgrade,
|
|
.t-dark-metro .o-eternity-upgrade,
|
|
.t-inverted-metro .o-eternity-upgrade,
|
|
.t-s8 .o-eternity-upgrade {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-eternity-upgrade--available,
|
|
.t-dark-metro .o-eternity-upgrade--available,
|
|
.t-inverted-metro .o-eternity-upgrade--available,
|
|
.t-s8 .o-eternity-upgrade--available {
|
|
color: #673ab7;
|
|
border-color: #673ab7;
|
|
}
|
|
|
|
.t-metro .o-eternity-upgrade--available {
|
|
box-shadow: .1rem .1rem .1rem 0 #9e9e9e;
|
|
}
|
|
|
|
.t-metro .o-eternity-upgrade--available:hover,
|
|
.t-dark-metro .o-eternity-upgrade--available:hover,
|
|
.t-inverted-metro .o-eternity-upgrade--available:hover,
|
|
.t-s8 .o-eternity-upgrade--available:hover {
|
|
color: #511568;
|
|
}
|
|
|
|
.t-metro .o-eternity-upgrade--bought,
|
|
.t-dark-metro .o-eternity-upgrade--bought,
|
|
.t-inverted-metro .o-eternity-upgrade--bought,
|
|
.t-s8 .o-eternity-upgrade--bought {
|
|
color: black;
|
|
background-color: #673ab7;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-metro .o-eternity-upgrade--unavailable,
|
|
.t-dark-metro .o-eternity-upgrade--unavailable,
|
|
.t-inverted-metro .o-eternity-upgrade--unavailable,
|
|
.t-s8 .o-eternity-upgrade--unavailable {
|
|
background-color: #9e9e9e;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-metro .o-eternity-upgrade--unavailable:hover,
|
|
.t-dark-metro .o-eternity-upgrade--unavailable:hover,
|
|
.t-inverted-metro .o-eternity-upgrade--unavailable:hover,
|
|
.t-s8 .o-eternity-upgrade--unavailable:hover {
|
|
background-color: #bdbdbd;
|
|
}
|
|
|
|
.t-dark .o-eternity-upgrade--available,
|
|
.t-s6 .o-eternity-upgrade--available {
|
|
color: #b341e0;
|
|
background-color: black;
|
|
}
|
|
|
|
.t-dark .o-eternity-upgrade--available:hover,
|
|
.t-s6 .o-eternity-upgrade--available:hover {
|
|
color: black;
|
|
background-color: white;
|
|
}
|
|
|
|
.t-dark .o-eternity-upgrade--unavailable {
|
|
color: black;
|
|
background-color: #263238;
|
|
border-color: #691fa5;
|
|
}
|
|
|
|
.t-dark .o-eternity-upgrade--unavailable:hover {
|
|
background-color: #37474f;
|
|
}
|
|
|
|
.t-s6 .o-eternity-upgrade--unavailable {
|
|
color: grey;
|
|
background-color: black;
|
|
border-color: #691fa5;
|
|
}
|
|
|
|
.t-s6 .o-eternity-upgrade--unavailable:hover {
|
|
background-color: #222222;
|
|
}
|
|
|
|
.t-dark .o-eternity-upgrade--bought,
|
|
.t-s6 .o-eternity-upgrade--bought {
|
|
color: #1e0830;
|
|
background-color: #8d48c3;
|
|
border-color: #691fa5;
|
|
}
|
|
|
|
.t-s1 .o-eternity-upgrade--available {
|
|
color: #639565;
|
|
background-color: black;
|
|
border-color: #639565;
|
|
}
|
|
|
|
.t-s1 .o-eternity-upgrade--available:hover {
|
|
color: black;
|
|
background-color: #639565;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-eternity-upgrade--bought {
|
|
color: black;
|
|
background-color: #639565;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-s1 .o-eternity-upgrade--unavailable {
|
|
color: black;
|
|
background-color: #4a4a4a;
|
|
border-color: #639565;
|
|
}
|
|
|
|
.t-s1 .o-eternity-upgrade--unavailable:hover {
|
|
background: #636363;
|
|
}
|
|
|
|
/*#endregion Eternity Upgrades*/
|
|
|
|
/*#region Eternity Milestones*/
|
|
|
|
.l-eternity-milestone-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-eternity-milestone-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-eternity-milestone-grid__cell {
|
|
margin: .5rem .8rem;
|
|
}
|
|
|
|
.o-eternity-milestone__goal {
|
|
font-size: 2rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.o-eternity-milestone__reward {
|
|
width: 25rem;
|
|
height: 6rem;
|
|
color: black;
|
|
font-weight: bold;
|
|
border: .1rem solid #691fa5;
|
|
transition-duration: 0.2s;
|
|
border-radius: .4rem;
|
|
font-family: Typewriter, serif;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.o-eternity-milestone__reward--locked {
|
|
background-color: dimgrey;
|
|
}
|
|
|
|
.o-eternity-milestone__reward--reached {
|
|
background-color: #8d48c3;
|
|
}
|
|
|
|
.o-eternity-milestone__reward--small-font {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.t-metro .o-eternity-milestone__reward,
|
|
.t-dark-metro .o-eternity-milestone__reward,
|
|
.t-inverted-metro .o-eternity-milestone__reward,
|
|
.t-s8 .o-eternity-milestone__reward {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-eternity-milestone__reward--reached,
|
|
.t-dark-metro .o-eternity-milestone__reward--reached,
|
|
.t-inverted-metro .o-eternity-milestone__reward--reached,
|
|
.t-s8 .o-eternity-milestone__reward--reached {
|
|
background-color: #673ab7;
|
|
border-color: #512da8;
|
|
}
|
|
|
|
.t-metro .o-eternity-milestone__reward--locked,
|
|
.t-dark-metro .o-eternity-milestone__reward--locked,
|
|
.t-inverted-metro .o-eternity-milestone__reward--locked,
|
|
.t-s1 .o-eternity-milestone__reward--locked,
|
|
.t-s8 .o-eternity-milestone__reward--locked {
|
|
background-color: #9e9e9e;
|
|
box-shadow: .1rem .1rem .1rem 0 black;
|
|
border: none;
|
|
}
|
|
|
|
.t-dark .o-eternity-milestone__reward--reached,
|
|
.t-s6 .o-eternity-milestone__reward--reached {
|
|
background-color: #8d48c3;
|
|
}
|
|
|
|
.t-dark .o-eternity-milestone__reward--locked,
|
|
.t-s6 .o-eternity-milestone__reward--locked {
|
|
color: #b341e0;
|
|
background-color: black;
|
|
border-color: #b341e0;
|
|
animation: a-time-study 7s infinite;
|
|
}
|
|
|
|
.t-s1 .o-eternity-milestone__reward--reached {
|
|
background-color: #639565;
|
|
border-color: #507751;
|
|
}
|
|
|
|
.l-eternity-milestone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/*#endregion Eternity Milestones*/
|
|
|
|
/*#region Dilation*/
|
|
|
|
.l-dilation-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/*#region c-dilation-tab*/
|
|
|
|
.c-dilation-tab__tachyons {
|
|
color: black;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.c-dilation-tab__dilated-time {
|
|
color: black;
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.c-dilation-tab__dilated-time-income {
|
|
color: black;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.c-dilation-tab__galaxy-threshold {
|
|
color: black;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.c-dilation-tab__galaxies {
|
|
color: black;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.t-metro .c-dilation-tab__tachyons,
|
|
.t-dark .c-dilation-tab__tachyons,
|
|
.t-dark-metro .c-dilation-tab__tachyons,
|
|
.t-s6 .c-dilation-tab__tachyons,
|
|
.t-s8 .c-dilation-tab__tachyons {
|
|
color: #64ddad;
|
|
}
|
|
|
|
.t-dark .c-dilation-tab__tachyons,
|
|
.t-s6 .c-dilation-tab__tachyons {
|
|
text-shadow: 0 0 .7rem #64ddad;
|
|
}
|
|
|
|
.t-metro .c-dilation-tab__tachyons,
|
|
.t-metro .c-dilation-tab__dilated-time,
|
|
.t-metro .c-dilation-tab__dilated-time-income,
|
|
.t-metro .c-dilation-tab__galaxy-threshold,
|
|
.t-metro .c-dilation-tab__galaxies,
|
|
.t-s8 .c-dilation-tab__tachyons,
|
|
.t-s8 .c-dilation-tab__dilated-time,
|
|
.t-s8 .c-dilation-tab__dilated-time-income,
|
|
.t-s8 .c-dilation-tab__galaxy-threshold,
|
|
.t-s8 .c-dilation-tab__galaxies {
|
|
text-shadow: 0 0 .1rem rgba(0, 0, 0, 0.5), -.1rem .1rem .1rem black;
|
|
}
|
|
|
|
.t-metro .c-dilation-tab__dilated-time,
|
|
.t-metro .c-dilation-tab__dilated-time-income,
|
|
.t-metro .c-dilation-tab__galaxy-threshold,
|
|
.t-metro .c-dilation-tab__galaxies,
|
|
.t-dark .c-dilation-tab__dilated-time,
|
|
.t-dark .c-dilation-tab__dilated-time-income,
|
|
.t-dark .c-dilation-tab__galaxy-threshold,
|
|
.t-dark .c-dilation-tab__galaxies,
|
|
.t-dark-metro .c-dilation-tab__dilated-time,
|
|
.t-dark-metro .c-dilation-tab__dilated-time-income,
|
|
.t-dark-metro .c-dilation-tab__galaxy-threshold,
|
|
.t-dark-metro .c-dilation-tab__galaxies,
|
|
.t-s6 .c-dilation-tab__dilated-time,
|
|
.t-s6 .c-dilation-tab__dilated-time-income,
|
|
.t-s6 .c-dilation-tab__galaxy-threshold,
|
|
.t-s6 .c-dilation-tab__galaxies,
|
|
.t-s8 .c-dilation-tab__dilated-time,
|
|
.t-s8 .c-dilation-tab__dilated-time-income,
|
|
.t-s8 .c-dilation-tab__galaxy-threshold,
|
|
.t-s8 .c-dilation-tab__galaxies {
|
|
color: #64dd17;
|
|
}
|
|
|
|
.t-dark .c-dilation-tab__dilated-time,
|
|
.t-dark .c-dilation-tab__dilated-time-income,
|
|
.t-dark .c-dilation-tab__galaxy-threshold,
|
|
.t-dark .c-dilation-tab__galaxies,
|
|
.t-s6 .c-dilation-tab__dilated-time,
|
|
.t-s6 .c-dilation-tab__dilated-time-income,
|
|
.t-s6 .c-dilation-tab__galaxy-threshold,
|
|
.t-s6 .c-dilation-tab__galaxies {
|
|
text-shadow: 0 0 .7rem #64dd17;
|
|
}
|
|
|
|
/*#endregion c-dilation-tab*/
|
|
|
|
/*#region l-dilation-upgrades-grid*/
|
|
|
|
.l-dilation-upgrades-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.l-dilation-upgrades-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-dilation-upgrades-grid__cell {
|
|
margin: 1.2rem 1.5rem;
|
|
}
|
|
|
|
/*#endregion l-dilation-upgrades-grid*/
|
|
|
|
/*#region o-dilation-btn*/
|
|
|
|
.o-dilation-btn {
|
|
color: #64dd17;
|
|
background-color: black;
|
|
font-weight: bold;
|
|
font-size: 1.12rem;
|
|
border: .2rem solid #64dd17;
|
|
width: 19rem;
|
|
height: 9rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
border-radius: .4rem;
|
|
font-family: Typewriter, serif;
|
|
animation: a-dilation-btn-glow 10s infinite;
|
|
}
|
|
|
|
.o-dilation-btn:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.t-dark .o-dilation-btn {
|
|
color: #64dd17;
|
|
background-color: black;
|
|
}
|
|
|
|
.t-dark .o-dilation-btn:hover,
|
|
.t-s6 .o-dilation-btn:hover {
|
|
color: #64dd17;
|
|
background-color: white;
|
|
}
|
|
|
|
.t-s4 .o-dilation-btn {
|
|
animation: a-dilation-btn-glow--cancer 10s infinite;
|
|
}
|
|
|
|
.t-metro .o-dilation-btn,
|
|
.t-dark-metro .o-dilation-btn,
|
|
.t-inverted-metro .o-dilation-btn,
|
|
.t-s8 .o-dilation-btn {
|
|
border-radius: 0;
|
|
border-width: 0.1rem;
|
|
}
|
|
|
|
@keyframes a-dilation-btn-glow {
|
|
0% { box-shadow: inset 0.5rem 0 2rem }
|
|
25% { box-shadow: inset 0 0.5rem 2rem }
|
|
50% { box-shadow: inset -0.5rem 0 2rem }
|
|
75% { box-shadow: inset 0 -0.5rem 2rem }
|
|
100% { box-shadow: inset 0.5rem 0 2rem }
|
|
}
|
|
|
|
@keyframes a-dilation-btn-glow--cancer {
|
|
0% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
10% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
20% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
22% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
25% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
29% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
39% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
44% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
53% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
57% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
63% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
69% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
71% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
74% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
75% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
84% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
88% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
92% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
93% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
95% { box-shadow: inset -0.5px 0.5rem 2rem }
|
|
100% { box-shadow: inset 0.5px -0.5rem 2rem }
|
|
}
|
|
|
|
/*#endregion o-dilation-btn*/
|
|
|
|
/*#region o-compression-btn*/
|
|
|
|
.o-compression-btn {
|
|
color: #5151ec;
|
|
background-color: black;
|
|
font-weight: bold;
|
|
font-size: 1.12rem;
|
|
border: .2rem solid #5151ec;
|
|
width: 19rem;
|
|
height: 9rem;
|
|
transition-duration: 0.2s;
|
|
cursor: pointer;
|
|
border-radius: .4rem;
|
|
font-family: Typewriter, serif;
|
|
animation: a-compression-btn-glow 5s infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
.o-compression-btn:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.t-dark .o-compression-btn {
|
|
color: #5151ec;
|
|
background-color: black;
|
|
}
|
|
|
|
.t-dark .o-compression-btn:hover,
|
|
.t-s6 .o-compression-btn:hover {
|
|
color: #5151ec;
|
|
background-color: white;
|
|
}
|
|
|
|
.t-s4 .o-compression-btn {
|
|
animation: a-compression-btn-glow 0.5s infinite;
|
|
}
|
|
|
|
.t-metro .o-compression-btn,
|
|
.t-dark-metro .o-compression-btn,
|
|
.t-inverted-metro .o-compression-btn,
|
|
.t-s8 .o-compression-btn {
|
|
border-radius: 0;
|
|
border-width: 0.1rem;
|
|
}
|
|
|
|
@keyframes a-compression-btn-glow {
|
|
0% { box-shadow: inset 0 0 2rem 0}
|
|
13% { box-shadow: inset 0 0 2rem 0.15rem}
|
|
25% { box-shadow: inset 0 0 2rem 0.4rem}
|
|
38% { box-shadow: inset 0 0 2rem 0.65rem}
|
|
50% { box-shadow: inset 0 0 2rem 0.8rem}
|
|
63% { box-shadow: inset 0 0 2rem 0.65rem}
|
|
75% { box-shadow: inset 0 0 2rem 0.4rem}
|
|
88% { box-shadow: inset 0 0 2rem 0.15rem}
|
|
100% { box-shadow: inset 0 0 2rem 0}
|
|
}
|
|
|
|
/*#endregion o-compression-btn*/
|
|
|
|
/*#region o-dilation-upgrade*/
|
|
|
|
.o-dilation-upgrade {
|
|
background: black;
|
|
font-weight: bold;
|
|
font-size: 1.05rem;
|
|
border: .1rem solid;
|
|
width: 17rem;
|
|
height: 9rem;
|
|
transition-duration: 0.2s;
|
|
border-radius: .4rem;
|
|
font-family: Typewriter, serif;
|
|
}
|
|
|
|
.o-dilation-upgrade--available {
|
|
color: #64dd17;
|
|
border-color: #64dd17;
|
|
animation: a-dilation-btn-glow 10s infinite;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-dilation-upgrade--rebuyable.o-dilation-upgrade--available {
|
|
color: #64ddad;
|
|
border-color: #64ddad;
|
|
}
|
|
|
|
.o-dilation-upgrade--available:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.o-dilation-upgrade--bought {
|
|
color: black;
|
|
background-color: #64dd17;
|
|
border-color: black;
|
|
}
|
|
|
|
.o-dilation-upgrade--unavailable {
|
|
color: #181818;
|
|
background-color: #5f5f5f;
|
|
border-color: #3e8a0f;
|
|
}
|
|
|
|
.o-dilation-upgrade--rebuyable.o-dilation-upgrade--unavailable {
|
|
border-color: #64ddad;
|
|
}
|
|
|
|
.o-dilation-upgrade--unavailable:hover {
|
|
color: #1d1d1d;
|
|
background-color: #660000;
|
|
}
|
|
|
|
.o-dilation-upgrade__description--small-text {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.t-metro .o-dilation-upgrade,
|
|
.t-dark-metro .o-dilation-upgrade,
|
|
.t-inverted-metro .o-dilation-upgrade,
|
|
.t-s8 .o-dilation-upgrade {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-dilation-upgrade--unavailable,
|
|
.t-dark-metro .o-dilation-upgrade--unavailable,
|
|
.t-inverted-metro .o-dilation-upgrade--unavailable,
|
|
.t-s1 .o-dilation-upgrade--unavailable,
|
|
.t-s8 .o-dilation-upgrade--unavailable {
|
|
color: black;
|
|
background-color: #9e9e9e;
|
|
box-shadow: .1rem .1rem .1rem 0 black;
|
|
border: none;
|
|
}
|
|
|
|
.t-metro .o-dilation-upgrade--unavailable:hover,
|
|
.t-dark-metro .o-dilation-upgrade--unavailable:hover,
|
|
.t-inverted-metro .o-dilation-upgrade--unavailable:hover,
|
|
.t-s8 .o-dilation-upgrade--unavailable:hover {
|
|
background-color: #ef5350;
|
|
}
|
|
|
|
.t-s1 .o-dilation-upgrade--unavailable:hover {
|
|
background-color: #d72621;
|
|
}
|
|
|
|
.t-dark .o-dilation-upgrade {
|
|
background-color: black;
|
|
}
|
|
|
|
.t-dark .o-dilation-upgrade--available:hover,
|
|
.t-s6 .o-dilation-upgrade--available:hover {
|
|
color: #64dd17;
|
|
background-color: white;
|
|
}
|
|
|
|
.t-dark .o-dilation-upgrade--rebuyable.o-dilation-upgrade--available:hover,
|
|
.t-s6 .o-dilation-upgrade--rebuyable.o-dilation-upgrade--available:hover {
|
|
color: #64ddad;
|
|
}
|
|
|
|
.t-dark .o-dilation-upgrade--bought {
|
|
background-color: #64dd17;
|
|
}
|
|
|
|
.t-s6 .o-dilation-upgrade--unavailable {
|
|
color: gray;
|
|
}
|
|
|
|
.t-dark .o-dilation-upgrade--unavailable {
|
|
color: black;
|
|
background-color: #23292a;
|
|
}
|
|
|
|
.t-dark .o-dilation-upgrade--unavailable:hover,
|
|
.t-s6 .o-dilation-upgrade--unavailable:hover {
|
|
color: black;
|
|
border-color: #b84b5f;
|
|
background-color: #b84b5f;
|
|
}
|
|
|
|
.t-s4 .o-dilation-upgrade--available {
|
|
animation: a-dilation-btn-glow--cancer 10s infinite;
|
|
}
|
|
|
|
.t-s6 .o-dilation-upgrade--bought {
|
|
background: #64dd17;
|
|
}
|
|
|
|
.t-s6 .o-dilation-upgrade--unavailable {
|
|
background-color: black;
|
|
}
|
|
|
|
/*#endregion o-dilation-upgrade*/
|
|
|
|
|
|
|
|
.c-tachyon-particle-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.o-tachyon-particle {
|
|
fill: black;
|
|
}
|
|
|
|
.t-dark .o-tachyon-particle,
|
|
.t-dark-metro .o-tachyon-particle,
|
|
.t-s6 .o-tachyon-particle {
|
|
fill: white;
|
|
}
|
|
|
|
/*#endregion Dilation*/
|
|
|
|
/*#region Modals*/
|
|
|
|
@keyframes modal-overlay-fadein {
|
|
from {background-color: rgba(0,0,0,0); }
|
|
to {background-color: rgba(60, 60, 100, 0.5);}
|
|
}
|
|
|
|
.l-modal-overlay {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 4;
|
|
animation-name: modal-overlay-fadein;
|
|
animation-duration: 2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.l-modal {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: 4;
|
|
display: inline-block;
|
|
}
|
|
|
|
/*#region c-modal*/
|
|
|
|
.c-modal {
|
|
border: .3rem solid black;
|
|
background-color: #e0e0e0;
|
|
border-radius: .6rem;
|
|
text-align: center;
|
|
color: black;
|
|
font-family: Typewriter, serif;
|
|
font-size: 1.4rem;
|
|
padding: 1rem 1rem 1rem;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.c-modal__close-btn {
|
|
position: absolute;
|
|
top: .5rem;
|
|
right: .5rem;
|
|
}
|
|
|
|
.c-modal__close-btn--tiny {
|
|
transform: scale(0.5);
|
|
top: -.5rem;
|
|
right: -.5rem;
|
|
}
|
|
|
|
/*#region themes*/
|
|
|
|
/*#region t-dark t-dark-metro*/
|
|
|
|
.t-dark .c-modal,
|
|
.t-dark-metro .c-modal {
|
|
background-color: #455a64;
|
|
}
|
|
|
|
.t-dark .c-modal {
|
|
box-shadow: 0 0 1.5rem 0 black;
|
|
}
|
|
|
|
.t-dark-metro .c-modal {
|
|
box-shadow: 0 0 1rem 0 black;
|
|
}
|
|
|
|
.t-dark h3,
|
|
.t-dark-metro h3 {
|
|
color: #999;
|
|
text-shadow: -.1rem .1rem 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/*#endregion t-dark t-dark-metro*/
|
|
|
|
/*#region t-inverted t-inverted-metro t-metro*/
|
|
|
|
.t-inverted .c-modal,
|
|
.t-inverted-metro .c-modal {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.t-metro .c-modal,
|
|
.t-inverted-metro .c-modal {
|
|
border: .1rem solid black;
|
|
}
|
|
|
|
/*#endregion t-inverted t-inverted-metro t-metro*/
|
|
|
|
/*#region t-s1*/
|
|
|
|
.t-s1 .c-modal {
|
|
background-color: #dbd242;
|
|
}
|
|
|
|
/*#endregion t-s1*/
|
|
|
|
/*#region t-s6*/
|
|
|
|
.t-s6 .c-modal {
|
|
color: #e0e0e0;
|
|
background-color: black;
|
|
border: 1px solid #1b5e20;
|
|
box-shadow: 0 0 1.5rem 0 black;
|
|
}
|
|
|
|
/*#endregion t-s6*/
|
|
|
|
/*#region t-s7*/
|
|
|
|
.t-s7 .c-modal {
|
|
filter: saturate(0);
|
|
}
|
|
|
|
/*#endregion t-s7*/
|
|
|
|
/*#region t-s8*/
|
|
|
|
.t-s8 .c-modal {
|
|
border: .1rem solid black;
|
|
}
|
|
|
|
.t-s8 h3 {
|
|
color: black;
|
|
}
|
|
|
|
/*#endregion t-s8*/
|
|
|
|
/*#endregion themes*/
|
|
|
|
/*#endregion c-modal*/
|
|
|
|
.l-modal-content--centered {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*#region c-modal-message*/
|
|
|
|
.c-modal-message {
|
|
min-width: 50rem;
|
|
}
|
|
|
|
.c-modal-message__text {
|
|
max-width: 50rem;
|
|
}
|
|
|
|
.c-modal-message__okay-btn {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/*#endregion c-modal-message*/
|
|
|
|
/*#region c-modal-import*/
|
|
|
|
.c-modal-import {
|
|
width: 47.5rem;
|
|
}
|
|
|
|
.c-modal-import__save-info > * {
|
|
margin-top: .2rem;
|
|
}
|
|
|
|
.c-modal-import__warning {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.c-modal-import__input {
|
|
width: 45rem;
|
|
}
|
|
|
|
.c-modal-import__import-btn {
|
|
margin-top: .3rem;
|
|
}
|
|
|
|
/*#endregion c-modal-import*/
|
|
|
|
/*#region c-modal-import-tree*/
|
|
|
|
.c-modal-import-tree {
|
|
width: 47.5rem;
|
|
}
|
|
|
|
.c-modal-import-tree__tree-info > * {
|
|
margin-top: .2rem;
|
|
}
|
|
|
|
.c-modal-import-tree__warning {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.c-modal-import-tree__input {
|
|
width: 45rem;
|
|
}
|
|
|
|
.c-modal-import-tree__import-btn {
|
|
margin-top: .3rem;
|
|
}
|
|
|
|
/*#endregion c-modal-import-tree*/
|
|
|
|
.c-modal-input {
|
|
border: .1rem solid black;
|
|
background-color: #F2F2F2;
|
|
border-radius: .3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.c-modal-options {
|
|
width: 30rem;
|
|
height: 30rem;
|
|
}
|
|
|
|
/*#region l-modal-options*/
|
|
|
|
.l-modal-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.l-modal-options__save-record {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/*#endregion l-modal-options*/
|
|
|
|
/*#region c-modal-shortcuts*/
|
|
|
|
.c-modal-shortcuts {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.l-modal-shortcuts {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-modal-shortcuts__column {
|
|
width: 25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.l-modal-shortcuts__column--right {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.l-modal-shortcuts-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
line-height: 1.6rem;
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
|
|
.c-modal-shortcuts-row__name {
|
|
text-align: left;
|
|
}
|
|
|
|
.l-modal-shortcuts-row__name {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.c-modal-shortcuts__shift-description {
|
|
text-align: left;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
kbd {
|
|
background-color: #fafbfc;
|
|
border: .1rem solid #d1d5da;
|
|
border-bottom-color: #c6cbd1;
|
|
border-radius: .3rem;
|
|
box-shadow: inset 0 -.1rem 0 #c6cbd1;
|
|
color: #444d56;
|
|
display: inline-block;
|
|
font: 1.1rem SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
|
|
line-height: 1rem;
|
|
padding: .3rem .5rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.t-dark kbd, .t-dark-metro kbd {
|
|
background-color: #212b36;
|
|
border-color: #464e58;
|
|
border-bottom-color: #4f5863;
|
|
box-shadow: inset 0 -0.1rem 0 #4f5863;
|
|
color: #a9b3bc;
|
|
}
|
|
|
|
/*#endregion c-modal-shortcuts*/
|
|
|
|
/*#endregion Modals*/
|
|
|
|
.l-notification-container {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
align-items: flex-end;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
margin-top: .5rem;
|
|
margin-right: 1rem;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/*#region o-notification*/
|
|
|
|
.o-notification {
|
|
padding: .8rem 1.5rem;
|
|
margin-top: .3rem;
|
|
color: black;
|
|
background-color: white;
|
|
font-size: 1.3rem;
|
|
font-family: TypeWriter, serif;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
border: .1rem solid;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-notification--success {
|
|
background-color: #dbd800;
|
|
border-color: #bab700;
|
|
}
|
|
|
|
.o-notification--error {
|
|
background-color: #bf352d;
|
|
border-color: #330000;
|
|
}
|
|
|
|
.o-notification--info {
|
|
background-color: #48c0e8;
|
|
border-color: #4980cc;
|
|
}
|
|
|
|
.o-notification--black-hole {
|
|
background-color: #b341e0;
|
|
border-color: black;
|
|
}
|
|
|
|
.t-metro .o-notification--success,
|
|
.t-dark-metro .o-notification--success,
|
|
.t-inverted-metro .o-notification--success,
|
|
.t-s8 .o-notification--success {
|
|
background-color: #ffeb3b;
|
|
border-color: #f9a825;
|
|
}
|
|
|
|
.t-metro .o-notification--error,
|
|
.t-dark-metro .o-notification--error,
|
|
.t-inverted-metro .o-notification--error,
|
|
.t-s8 .o-notification--error {
|
|
background-color: #f44336;
|
|
border-color: #c62828;
|
|
}
|
|
|
|
.t-metro .o-notification--info,
|
|
.t-dark-metro .o-notification--info,
|
|
.t-inverted-metro .o-notification--info,
|
|
.t-s8 .o-notification--info {
|
|
background-color: #03a9f4;
|
|
border-color: #0277bd;
|
|
}
|
|
|
|
.t-metro .o-notification--black-hole,
|
|
.t-dark-metro .o-notification--black-hole,
|
|
.t-inverted-metro .o-notification--black-hole,
|
|
.t-s8 .o-notification--black-hole {
|
|
background-color: #9c27b0;
|
|
border-color: #6a1b9a;
|
|
}
|
|
|
|
.a-notification--enter {
|
|
animation: a-notification--enter 0.5s ease-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
@keyframes a-notification--enter {
|
|
0% { transform: translateX(125%) }
|
|
50% { transform: translateX(-2rem) }
|
|
75% { transform: translateX(1rem) }
|
|
100% { transform: translateX(0) }
|
|
}
|
|
|
|
.a-notification--leave {
|
|
transform: translateX(125%);
|
|
transition: transform 0.25s ease-in;
|
|
}
|
|
|
|
/*#endregion o-notification*/
|
|
|
|
.o-footer {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/*#region component*/
|
|
/*#endregion component*/
|
|
|
|
/*#region Teresa tab*/
|
|
.l-mechanics-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-teresa-mechanic-container {
|
|
min-width: 40rem;
|
|
}
|
|
|
|
.l-rm-container {
|
|
min-width: 13rem;
|
|
}
|
|
|
|
.c-rm-store {
|
|
border: .1rem solid black;
|
|
height: 50rem;
|
|
width: 13rem;
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.c-rm-store-inner {
|
|
position: absolute;
|
|
background: green;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.c-rm-store-label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
color: green;
|
|
mix-blend-mode: difference;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.c-teresa-pour {
|
|
width: 13rem;
|
|
height: 4rem;
|
|
border: .2rem solid #8c1f1f;
|
|
background: #636363;
|
|
color: white;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.c-teresa-unlock-description {
|
|
position: absolute;
|
|
left: 13.1rem;
|
|
width: 20rem;
|
|
border-bottom: .1rem solid black;
|
|
margin-bottom: -0.1rem
|
|
}
|
|
|
|
.o-teresa-quotes {
|
|
display: inline-block;
|
|
margin: 1.5rem 1.5rem;
|
|
font-size: 1.9rem;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.o-quote-button {
|
|
background: transparent;
|
|
border: none;
|
|
font-weight: bold;
|
|
font-size: 3rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c-teresa-unlock {
|
|
width: 20rem;
|
|
border-radius: .5rem;
|
|
padding: 1rem;
|
|
margin: auto;
|
|
transition-duration: 0.12s;
|
|
user-select: none;
|
|
background-color: #d0d0d0;
|
|
border: 1px solid #d0d0d0;
|
|
color: #5151ec;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.c-teresa-run-button {
|
|
cursor: pointer;
|
|
background-color: #5151ec;
|
|
border: 1px solid white;
|
|
color: white;
|
|
}
|
|
|
|
.c-teresa-run-button:hover {
|
|
background-color: #d0d0d0;
|
|
border: 1px solid #d0d0d0;
|
|
color: #5151ec;
|
|
}
|
|
|
|
.c-teresa-shop {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 20rem;
|
|
margin: 4rem auto;
|
|
}
|
|
|
|
.o-teresa-shop-button {
|
|
background-color: #5151ec;
|
|
color: white;
|
|
padding: 1rem;
|
|
border: none;
|
|
border-radius: .5rem;
|
|
margin-bottom: 1rem;
|
|
font-family: Typewriter, serif;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition-duration: 0.12s;
|
|
}
|
|
|
|
.o-teresa-shop-button:hover {
|
|
background-color: #d0d0d0;
|
|
color: #5151ec;
|
|
}
|
|
|
|
.t-metro .c-teresa-pour {
|
|
color: black;
|
|
}
|
|
|
|
.t-metro .c-teresa-run-button, .t-metro .c-teresa-unlock, .t-metro .o-teresa-shop-button,
|
|
.t-dark-metro .c-teresa-run-button, .t-dark-metro .c-teresa-unlock, .t-dark-metro .o-teresa-shop-button,
|
|
.t-inverted-metro .c-teresa-run-button, .t-inverted-metro .c-teresa-unlock, .t-inverted-metro .o-teresa-shop-button,
|
|
.t-s8 .c-teresa-run-button, .t-s8 .c-teresa-unlock, .t-s8 .o-teresa-shop-button {
|
|
color: white;
|
|
background-color: #00bcd4;
|
|
border: 1px solid #2196F3;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .c-teresa-run-button:hover, .t-metro .o-teresa-shop-button:hover,
|
|
.t-dark-metro .c-teresa-run-button:hover, .t-dark-metro .o-teresa-shop-button:hover,
|
|
.t-inverted-metro .c-teresa-run-button:hover, .t-inverted-metro .o-teresa-shop-button:hover,
|
|
.t-s8 .c-teresa-run-button:hover, .t-s8 .o-teresa-shop-button:hover {
|
|
color: #00bcd4;
|
|
background-color: white;
|
|
}
|
|
|
|
.c-effarig-relics {
|
|
padding: 20px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
/*#endregion Teresa tab*/
|
|
|
|
/* #region effarig tab */
|
|
|
|
.o-effarig-shop-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
line-height: 1.5;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
font-size: 2rem;
|
|
background-color: #5151ec;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
margin: 1rem;
|
|
cursor: pointer;
|
|
transition-duration: 0.12s;
|
|
}
|
|
|
|
.o-effarig-shop-button:hover {
|
|
background-color: #d0d0d0;
|
|
color: #5151ec;
|
|
}
|
|
|
|
.effarig-unlock-bought {
|
|
background-color: #d0d0d0;
|
|
color: #5151ec;
|
|
cursor: default;
|
|
}
|
|
|
|
.l-effarig-run-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 15rem;
|
|
height: 15rem;
|
|
border-radius: 50%;
|
|
border-style: none;
|
|
position: relative;
|
|
margin: 2rem;
|
|
}
|
|
|
|
.c-effarig-run-button {
|
|
font-size: 10rem;
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.c-effarig-run-button--not-running {
|
|
background-color: #5151ec;
|
|
color: white;
|
|
z-index: 0;
|
|
-webkit-animation: effarig-run-button--not-running-glow 2s ease-in-out infinite alternate;
|
|
-moz-animation: effarig-run-button--not-running-glow 2s ease-in-out infinite alternate;
|
|
animation: effarig-run-button--not-running-glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.c-effarig-run-button--not-running:hover {
|
|
background-color: black;
|
|
}
|
|
|
|
@keyframes effarig-run-button--not-running-glow {
|
|
from {
|
|
text-shadow: 0 0 1rem #fff, 0 0 2rem #fff, 0 0 3rem #1000b0, 0 0 4rem #1000b0, 0 0 5rem #1000b0, 0 0 6rem #1000b0, 0 0 7rem #1000b0;
|
|
box-shadow: 0 0 .5rem #1000b0, 0 0 1rem #1000b0, 0 0 1.5rem #1000b0;
|
|
}
|
|
to {
|
|
text-shadow: 0 0 2rem #fff, 0 0 3rem #2512d0, 0 0 4rem #2512d0, 0 0 5rem #2512d0, 0 0 6rem #2512d0, 0 0 7rem #2512d0, 0 0 8rem #2512d0;
|
|
box-shadow: 0 0 .5rem #2512d0, 0 0 1rem #2512d0, 0 0 1.5rem #2512d0, 0 0 2rem #2512d0;
|
|
}
|
|
}
|
|
|
|
.c-effarig-run-button--running {
|
|
background: black;
|
|
z-index: 0;
|
|
-webkit-animation: effarig-run-button--running-glow 2s infinite alternate;
|
|
-moz-animation: effarig-run-button--running-glow 2s infinite alternate;
|
|
animation: effarig-run-button--running-glow 2s infinite alternate;
|
|
}
|
|
|
|
.c-effarig-run-button--running:hover {
|
|
background: #400000;
|
|
}
|
|
|
|
.c-effarig-run-button__inner--running {
|
|
background-image: url("../images/noise.png");
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 0.5);
|
|
-webkit-animation: effarig-run-button--running-noise 15s infinite alternate;
|
|
-moz-animation: effarig-run-button--running-noise 15s infinite alternate;
|
|
animation: effarig-run-button--running-noise 15s infinite alternate;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.c-effarig-run-button__inner--running:after {
|
|
background: none;
|
|
content: attr(button-symbol);
|
|
z-index: -1;
|
|
position: absolute;
|
|
-webkit-animation: effarig-run-button__inner--running-glow 2s infinite alternate;
|
|
-moz-animation: effarig-run-button__inner--running-glow 2s infinite alternate;
|
|
animation: effarig-run-button__inner--running-glow 2s infinite alternate;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
@keyframes effarig-run-button--running-noise {
|
|
0% { -webkit-text-fill-color: rgba(255, 0, 0, 1); }
|
|
20% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: -50px 0;
|
|
}
|
|
22% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 0.5);
|
|
background-position: 100px -10px;
|
|
}
|
|
24% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: 0 -150px;
|
|
}
|
|
50% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: -50px 0;
|
|
}
|
|
51% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 0.5);
|
|
background-position: 100px -10px;
|
|
}
|
|
52% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: 0 -150px;
|
|
}
|
|
54% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: 50px 0;
|
|
}
|
|
56% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 0.5);
|
|
background-position: -100px 10px;
|
|
}
|
|
58% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: 0 50px;
|
|
}
|
|
90% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: 50px 50px;
|
|
}
|
|
91% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 0.5);
|
|
background-position: 100px -110px;
|
|
}
|
|
92% {
|
|
-webkit-text-fill-color: rgba(255, 0, 0, 1);
|
|
background-position: 0 70px;
|
|
}
|
|
100% { -webkit-text-fill-color: rgba(255, 0, 0, 1); }
|
|
}
|
|
|
|
@keyframes effarig-run-button--running-glow {
|
|
from {
|
|
box-shadow: 0 0 .5rem #c20707 inset, 0 0 1rem #c20707 inset, 0 0 1.5rem #c20707 inset;
|
|
}
|
|
to {
|
|
box-shadow: 0 0 .5rem #e21717 inset, 0 0 1rem #e21717 inset, 0 0 1.5rem #e21717 inset, 0 0 2rem #e21717 inset;
|
|
}
|
|
}
|
|
|
|
@keyframes effarig-run-button__inner--running-glow {
|
|
from {
|
|
text-shadow: 0 0 0.5rem #a20707, 0 0 1rem #a20707, 0 0 1.5rem #a20707;
|
|
}
|
|
to {
|
|
text-shadow: 0 0 0.5rem #c21717, 0 0 1rem #c21717, 0 0 1.5rem #c21717, 0 0 2rem #c21717;
|
|
}
|
|
}
|
|
|
|
.l-effarig-run-button__bg {
|
|
position: absolute;
|
|
width: 80%;
|
|
height: 80%;
|
|
}
|
|
|
|
.l-effarig-run-button__fg {
|
|
position: relative;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.l-effarig-shop {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-effarig-shop-and-run {
|
|
margin-top: 2rem;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-effarig-run {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-left: 3rem;
|
|
width: 500px;
|
|
}
|
|
|
|
.c-effarig-run-description {
|
|
font-size: larger;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.l-effarig-tab__reward {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.c-effarig-tab__reward-label {
|
|
padding-right: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.c-effarig-tab__reward-symbol {
|
|
font-weight: bold;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.l-effarig-tab__reward-descriptions {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.c-effarig-tab__reward-description {
|
|
text-align: left;
|
|
}
|
|
|
|
.sortable-drag {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.t-metro .o-effarig-shop-button,
|
|
.t-dark-metro .o-effarig-shop-button,
|
|
.t-inverted-metro .o-effarig-shop-button,
|
|
.t-s8 .o-effarig-shop-button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* #endregion effarig tab*/
|
|
|
|
/* #startregion enslaved tab */
|
|
|
|
.l-enslaved-celestial-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-enslaved-top-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.l-enslaved-top-container__half {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 24rem;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.o-enslaved-stored-time, .o-enslaved-gained-infinities {
|
|
font-size: 1.6rem;
|
|
min-width: 18rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.o-enslaved-mechanic-button {
|
|
padding: .5rem;
|
|
border-radius: .5rem;
|
|
border: .2rem solid sandybrown;
|
|
background-color: #fdd3b0;
|
|
cursor: pointer;
|
|
margin: 1rem .5rem;
|
|
min-width: 18rem;
|
|
min-height: 7rem;
|
|
padding-bottom: 1rem;
|
|
padding-top: 1rem;
|
|
font-family: Typewriter;
|
|
}
|
|
|
|
.t-metro .o-enslaved-mechanic-button,
|
|
.t-dark-metro .o-enslaved-mechanic-button,
|
|
.t-inverted-metro .o-enslaved-mechanic-button,
|
|
.t-s8 .o-enslaved-mechanic-button {
|
|
border-radius: 0;
|
|
border-width: 0.1rem;
|
|
}
|
|
|
|
.o-enslaved-mechanic-button--storing-time {
|
|
background-color: #ffa337;
|
|
}
|
|
|
|
.l-enslaved-shop-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 90rem;
|
|
margin: auto;
|
|
}
|
|
|
|
.o-enslaved-shop-button {
|
|
padding: 1.7rem;
|
|
background-color: #5151ec;
|
|
color: white;
|
|
border: none;
|
|
border-radius: .5rem;
|
|
margin: 1rem;
|
|
cursor: pointer;
|
|
transition-duration: 0.12s;
|
|
width: 30rem;
|
|
height: 10rem;
|
|
font-family: Typewriter;
|
|
}
|
|
|
|
.o-enslaved-shop-button--available {
|
|
background: aquamarine;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-enslaved-shop-button--bought {
|
|
background: #16c55e;
|
|
}
|
|
|
|
.o-enslaved-run-box {
|
|
width: 35rem;
|
|
padding: 2rem;
|
|
border-radius: .5rem;
|
|
border: 2px solid #cd945c;
|
|
background: none;
|
|
font-family: Typewriter;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
margin-bottom: 1rem;
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.o-enslaved-run-box__title {
|
|
font-weight: bold;
|
|
font-size: larger;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.o-enslaved-run-button {
|
|
border-radius: 50%;
|
|
background: #ead584;
|
|
width: 15rem;
|
|
height: 15rem;
|
|
margin: 1.5rem;
|
|
color: black;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.o-enslaved-run-button:hover {
|
|
color: #bebdb8;
|
|
background: black;
|
|
}
|
|
|
|
.o-enslaved-run-button__sigil {
|
|
font-size: 12rem;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.o-enslaved-run-button__glitch {
|
|
position: absolute;
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0,0,0,0) 100%);
|
|
/*background: black;*/
|
|
border: none;
|
|
width: 1px;
|
|
}
|
|
|
|
/* #endregion enslaved tab*/
|
|
|
|
/* #startregion v tab */
|
|
|
|
.l-v-unlocks-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
max-width: 65rem;
|
|
margin: auto;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
width: 70%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.l-v-unlocks-container li {
|
|
position: relative;
|
|
float: left;
|
|
width: 18rem;
|
|
padding: 0 0 20.8rem 0;
|
|
list-style-type: none;
|
|
transform: rotate(-60deg) skewY(30deg);
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.l-v-unlocks-container li {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* required for hex structure */
|
|
.l-v-unlocks-container li:nth-child(3n+2) {
|
|
margin: 0 1%;
|
|
}
|
|
|
|
.l-v-unlocks-container li:nth-child(6n+4), .l-v-unlocks-container li:nth-child(6n+5), .l-v-unlocks-container li:nth-child(6n+6) {
|
|
margin-top: -7%;
|
|
margin-bottom: -7%;
|
|
}
|
|
|
|
.l-v-unlocks-container li:nth-child(6n+1), .l-v-unlocks-container li:nth-child(6n+2), .l-v-unlocks-container li:nth-child(6n+3) {
|
|
transform: translateX(50%) rotate(-60deg) skewY(30deg);
|
|
}
|
|
|
|
.l-v-unlocks-container li:nth-child(6n+1) {
|
|
margin-left: 1%;
|
|
}
|
|
|
|
.c-v-unlock {
|
|
background: whitesmoke;
|
|
}
|
|
|
|
.c-v-unlock-completed {
|
|
background: lightgreen;
|
|
}
|
|
|
|
.o-v-unlock-amount {
|
|
font-weight: bold;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.l-v-milestones-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.o-v-milestone {
|
|
width: 25rem;
|
|
height: 10rem;
|
|
padding: 1rem;
|
|
border: 2px solid gainsboro;
|
|
margin-right: 10px;
|
|
border-radius: .5rem;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.o-v-milestone-unlocked {
|
|
background: lightgreen;
|
|
}
|
|
|
|
.l-v-hexagon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
transform: skewY(-30deg) rotate(60deg);
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.o-v-run-button {
|
|
color: black;
|
|
background: #f1aa7f;
|
|
font-family: Typewriter;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.o-v-run-button:hover {
|
|
background: indianred;
|
|
}
|
|
|
|
/* #endregion v tab*/
|
|
|
|
/* #startregion ra tab */
|
|
|
|
.l-ra-celestial-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.c-ra-pet-header {
|
|
width: 35rem;
|
|
height: 6rem;
|
|
padding: 1rem;
|
|
margin: 2rem auto;
|
|
text-shadow: -0.5px -0.5px 0 #000,
|
|
0.5px -0.5px 0 #000,
|
|
-0.5px 0.5px 0 #000,
|
|
0.5px 0.5px 0 #000;
|
|
}
|
|
|
|
.c-ra-pet-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.l-ra-bar-container {
|
|
margin: 1rem 0 4rem 0;
|
|
width: 100%;
|
|
height: 10rem;
|
|
flex-direction: row;
|
|
flex-flow: nowrap;
|
|
}
|
|
|
|
.l-ra-lvl-chevron {
|
|
position: absolute;
|
|
top: 0;
|
|
font-size: 1.2rem;
|
|
z-index: 2;
|
|
color: black;
|
|
height: 1.75rem;
|
|
border-left: 0.1rem solid black;
|
|
padding: 0 0.2rem;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
|
|
.t-dark .l-ra-lvl-chevron,
|
|
.t-dark-metro .l-ra-lvl-chevron,
|
|
.t-s6 .l-ra-lvl-chevron {
|
|
color: white;
|
|
border-left-color: white;
|
|
}
|
|
|
|
.l-ra-lvl-chevron--no-bar {
|
|
border-left: none !important;
|
|
}
|
|
|
|
.c-important-chevron {
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
height: 5rem;
|
|
border-left-width: 0.2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-ra-unlock-hover-text {
|
|
background-color: black;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
z-index: 3;
|
|
font-size: 1rem;
|
|
left: -6.25rem;
|
|
bottom: 6rem;
|
|
width: 12.5rem;
|
|
height: fit-content;
|
|
display: flex;
|
|
padding: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-ra-exp-bar {
|
|
position: relative;
|
|
border: 0.2rem solid black;
|
|
border-radius: .5rem;
|
|
width: 80%;
|
|
margin: 2.5rem 0 2.5rem 0;
|
|
height: 5rem;
|
|
justify-self: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.t-dark .l-ra-exp-bar,
|
|
.t-dark-metro .l-ra-exp-bar,
|
|
.t-s6 .l-ra-exp-bar {
|
|
border-color: white;
|
|
}
|
|
|
|
.l-ra-exp-bar-inner {
|
|
position: relative;
|
|
z-index: -1;
|
|
height: 100%;
|
|
background-color: #35d035;
|
|
}
|
|
|
|
.l-ra-pet-container {
|
|
flex: 1 1 auto;
|
|
margin: 0 0 -5rem 0;
|
|
}
|
|
|
|
.l-ra-non-pets {
|
|
flex: 0.2 0 25rem;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
display: flex;
|
|
}
|
|
|
|
.l-ra-reality-container {
|
|
height: 30rem;
|
|
background: radial-gradient(ellipse at center, #35d035 55%, gainsboro);
|
|
border-radius: 2rem;
|
|
flex: none none 50rem;
|
|
width: 50rem;
|
|
margin: 2.5rem 5rem;
|
|
}
|
|
|
|
.l-ra-reality-inner {
|
|
font-family: Typewriter;
|
|
margin: 2.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.c-ra-rewards {
|
|
font-size: 1.5rem;
|
|
margin: 1rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
.c-ra-rewards-inner {
|
|
margin: 0rem 1rem;
|
|
}
|
|
|
|
.l-ra-laitela-unlock {
|
|
height: 30rem;
|
|
margin: 2.5rem 5rem;
|
|
border-radius: 2rem;
|
|
flex: none none 30rem;
|
|
animation: ra-color-switch 10s infinite;
|
|
}
|
|
@keyframes ra-color-switch {
|
|
0% { background-color: #86ea84; }
|
|
25% { background-color: #ea8585; }
|
|
50% { background-color: #ead584; }
|
|
75% { background-color: #f1aa7f; }
|
|
100% { background-color: #86ea84; }
|
|
}
|
|
|
|
.l-ra-laitela-unlock-inner {
|
|
font-family: Typewriter;
|
|
height: 20rem;
|
|
margin: 5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-ra-all-pets-container {
|
|
flex: 1 0 auto;
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
|
|
.l-ra-unlock {
|
|
position: relative;
|
|
height: 10rem;
|
|
top: -10rem;
|
|
left: 82.5%;
|
|
border: .2rem solid gainsboro;
|
|
background: #35d035;
|
|
width: 15%;
|
|
border-radius: .5rem;
|
|
flex-direction: column;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-ra-unlock-inner {
|
|
color: black;
|
|
margin: auto 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-ra-alchemy-tab {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.c-alchemy-resource-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 0.1rem solid black;
|
|
padding: 0.25rem 1rem;
|
|
width: 60rem;
|
|
font-size: 1.2rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.l-alchemy-orbit-canvas {
|
|
position: absolute;
|
|
overflow: visible;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.l-alchemy-arrow-canvas {
|
|
position: absolute;
|
|
overflow: visible;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.l-alchemy-circle {
|
|
position: relative;
|
|
margin: 3rem;
|
|
}
|
|
|
|
.o-alchemy-orbit {
|
|
stroke: black;
|
|
stroke-width: 1;
|
|
fill: none;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.o-alchemy-orbit--unfocused {
|
|
stroke: lightgray;
|
|
}
|
|
|
|
.o-alchemy-reaction-arrow {
|
|
stroke: black;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
.o-alchemy-reaction-arrow--unfocused {
|
|
opacity: 0;
|
|
}
|
|
|
|
.o-alchemy-node {
|
|
position: absolute;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin-left: -1rem;
|
|
margin-top: -1rem;
|
|
user-select: none;
|
|
font-size: 1.4rem;
|
|
border: 0.1rem solid black;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
transition: all 0.2s, z-index 0s;
|
|
z-index: 1;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.o-alchemy-node--unfocused {
|
|
color: lightgray;
|
|
border-color: lightgray;
|
|
z-index: 0;
|
|
}
|
|
|
|
.o-alchemy-node--base {
|
|
background-color: lightblue;
|
|
}
|
|
|
|
.o-alchemy-node--unfocused.o-alchemy-node--base {
|
|
background-color: #ebf6f9;
|
|
}
|
|
|
|
.o-alchemy-node--active {
|
|
background-color: lightgreen;
|
|
}
|
|
|
|
.o-alchemy-node--unfocused.o-alchemy-node--active {
|
|
background-color: #e9fce9;
|
|
}
|
|
|
|
.c-ra-unlock-unlocked {
|
|
background: lightgreen;
|
|
}
|
|
|
|
.c-ra-teresa-switch-container {
|
|
display: flex;
|
|
width: 10rem;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
.o-ra-teresa-switch {
|
|
border: .2rem solid #292929;
|
|
width: 5rem;
|
|
margin-left: -.2rem;
|
|
height: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
color: black;
|
|
user-select: none;
|
|
}
|
|
|
|
.o-ra-teresa-switch-active {
|
|
background: #d89eb1;
|
|
}
|
|
|
|
.o-ra-teresa-switch-active-on {
|
|
background: orangered;
|
|
}
|
|
|
|
.o-ra-teresa-switch-idle {
|
|
background: #b7e3ff;
|
|
}
|
|
|
|
.o-ra-teresa-switch-idle-on {
|
|
background: #00e6ff
|
|
}
|
|
|
|
/*#region o-compression-upgrade*/
|
|
|
|
.o-compression-upgrade {
|
|
background: black;
|
|
font-weight: bold;
|
|
font-size: 1.05rem;
|
|
border: .1rem solid;
|
|
width: 20rem;
|
|
height: 12rem;
|
|
transition-duration: 0.2s;
|
|
border-radius: .4rem;
|
|
font-family: Typewriter, serif;
|
|
}
|
|
|
|
.o-compression-upgrade--available {
|
|
color: #5151ec;
|
|
border-color: #5151ec;
|
|
animation: a-compression-btn-glow 5s infinite;
|
|
animation-timing-function: linear;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-compression-upgrade--available:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.o-compression-upgrade--inactive {
|
|
color: black;
|
|
background-color: #595779;
|
|
border-color: black;
|
|
animation: a-compression-btn-glow 5s infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
.o-compression-upgrade--active {
|
|
color: black;
|
|
background-color: #5151ec;
|
|
border-color: black;
|
|
}
|
|
|
|
.o-compression-upgrade--unavailable {
|
|
color: #181818;
|
|
background-color: #5f5f5f;
|
|
border-color: #3e8a0f;
|
|
}
|
|
|
|
.o-compression-upgrade--unavailable:hover {
|
|
color: #1d1d1d;
|
|
background-color: #660000;
|
|
}
|
|
|
|
.o-compression-upgrade__description--small-text {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.t-metro .o-compression-upgrade,
|
|
.t-dark-metro .o-compression-upgrade,
|
|
.t-inverted-metro .o-compression-upgrade,
|
|
.t-s8 .o-compression-upgrade {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-metro .o-compression-upgrade--unavailable,
|
|
.t-dark-metro .o-compression-upgrade--unavailable,
|
|
.t-inverted-metro .o-compression-upgrade--unavailable,
|
|
.t-s1 .o-compression-upgrade--unavailable,
|
|
.t-s8 .o-compression-upgrade--unavailable {
|
|
color: black;
|
|
background-color: #9e9e9e;
|
|
box-shadow: .1rem .1rem .1rem 0 black;
|
|
border: none;
|
|
}
|
|
|
|
.t-metro .o-compression-upgrade--unavailable:hover,
|
|
.t-dark-metro .o-compression-upgrade--unavailable:hover,
|
|
.t-inverted-metro .o-compression-upgrade--unavailable:hover,
|
|
.t-s8 .o-compression-upgrade--unavailable:hover {
|
|
background-color: #ef5350;
|
|
}
|
|
|
|
.t-s1 .o-compression-upgrade--unavailable:hover {
|
|
background-color: #d72621;
|
|
}
|
|
|
|
.t-dark .o-compression-upgrade {
|
|
background-color: black;
|
|
}
|
|
|
|
.t-dark .o-compression-upgrade--available:hover,
|
|
.t-s6 .o-compression-upgrade--available:hover {
|
|
color: #64dd17;
|
|
background-color: white;
|
|
}
|
|
|
|
.t-dark .o-compression-upgrade--rebuyable.o-compression-upgrade--available:hover,
|
|
.t-s6 .o-compression-upgrade--rebuyable.o-compression-upgrade--available:hover {
|
|
color: #64ddad;
|
|
}
|
|
|
|
.t-dark .o-compression-upgrade--inactive,
|
|
.t-s6 .o-compression-upgrade--inactive {
|
|
background-color: #1d2049;
|
|
}
|
|
|
|
.t-dark .o-compression-upgrade--active,
|
|
.t-s6 .o-compression-upgrade--active {
|
|
background-color: #1100ff;
|
|
}
|
|
|
|
.t-s6 .o-compression-upgrade--unavailable {
|
|
color: gray;
|
|
}
|
|
|
|
.t-dark .o-compression-upgrade--unavailable {
|
|
color: black;
|
|
background-color: #23292a;
|
|
}
|
|
|
|
.t-dark .o-compression-upgrade--unavailable:hover,
|
|
.t-s6 .o-compression-upgrade--unavailable:hover {
|
|
color: black;
|
|
border-color: #b84b5f;
|
|
background-color: #b84b5f;
|
|
}
|
|
|
|
.t-s4 .o-compression-upgrade--available {
|
|
animation: a-compression-btn-glow 0.5s infinite;
|
|
}
|
|
|
|
.t-s6 .o-compression-upgrade--unavailable {
|
|
background-color: black;
|
|
}
|
|
|
|
/*#endregion o-compression-upgrade*/
|
|
|
|
/* #endregion ra tab*/
|
|
|
|
/* #startregion laitela tab*/
|
|
|
|
.o-laitela-run-button {
|
|
width: 25rem;
|
|
padding: 2rem;
|
|
border-radius: .5rem;
|
|
border: .2rem solid indianred;
|
|
background: #f1857f;
|
|
font-family: Typewriter;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.o-laitela-matter-amount {
|
|
font-size: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.c-matter-dimension-container {
|
|
border: .2rem solid gainsboro;
|
|
background: whitesmoke;
|
|
width: 45rem;
|
|
margin: auto;
|
|
padding: 2rem;
|
|
border-radius: .5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.o-matter-dimension-amount {
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.c-matter-dimension-buttons button {
|
|
padding: 1rem;
|
|
width: 12rem;
|
|
font-family: Typewriter;
|
|
background: antiquewhite;
|
|
border: .1rem solid grey;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.o-matter-dimension-button--available {
|
|
background: aquamarine;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.l-laitela-unlocks-container {
|
|
width: 70rem;
|
|
margin: auto;
|
|
}
|
|
|
|
.o-laitela-shop-button {
|
|
width: 30rem;
|
|
padding: 1rem;
|
|
background: antiquewhite;
|
|
border: .1rem solid gray;
|
|
border-radius: .5rem;
|
|
margin-left: 1rem;
|
|
margin-top: 2rem;
|
|
font-family: Typewriter;
|
|
}
|
|
|
|
.o-laitela-shop-button--available {
|
|
background: aquamarine;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.o-laitela-shop-button--bought {
|
|
background: #16c55e;
|
|
}
|
|
|
|
/* #endregion laitela tab*/
|
|
|
|
|
|
.c-performance-stats {
|
|
width: 25rem;
|
|
padding: .3rem;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
border: .1rem solid black;
|
|
text-align: left;
|
|
background-color: whitesmoke;
|
|
z-index: 999;
|
|
}
|
|
|
|
.c-glyph-level-factors-dropdown-header {
|
|
color: #d5ffd7;
|
|
width: auto;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
background: black;
|
|
border: 0.2rem solid #0b600e;
|
|
border-radius: 0.5rem;
|
|
padding-top: 0.3rem;
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
|
|
.t-metro .c-glyph-level-factors-dropdown-header,
|
|
.t-dark-metro .c-glyph-level-factors-dropdown-header,
|
|
.t-inverted-metro .c-glyph-level-factors-dropdown-header,
|
|
.t-s8 .c-glyph-level-factors-dropdown-header {
|
|
border-width: 0.1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
width: 100%;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.c-glyph-levels-and-weights {
|
|
font-weight: bold;
|
|
background: black;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__adjust-label {
|
|
grid-column: 4;
|
|
-ms-grid-column: 4;
|
|
-ms-grid-column-span: 2;
|
|
grid-row: 5;
|
|
-ms-grid-row: 5;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
padding: 0.25em 0 .25em 1em;
|
|
z-index: 2;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__adjust-outline {
|
|
grid-column: 4 / 5;
|
|
-ms-grid-column: 4;
|
|
-ms-grid-column-span: 1;
|
|
grid-row: 1 / 6;
|
|
-ms-grid-row: 1;
|
|
-ms-grid-row-span: 5;
|
|
position:relative;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__adjust-outline::after {
|
|
content: '';
|
|
position: absolute;
|
|
border: 0.2rem solid #d5ffd7;
|
|
border-radius: 0.5em;
|
|
top: -0.5em;
|
|
bottom: -0.5em;
|
|
left: -0.5em;
|
|
right: -0.5em;
|
|
}
|
|
|
|
.t-metro .l-glyph-levels-and-weights__adjust-outline::after,
|
|
.t-dark-metro .l-glyph-levels-and-weights__adjust-outline::after,
|
|
.t-inverted-metro .l-glyph-levels-and-weights__adjust-outline::after,
|
|
.t-s8 .l-glyph-levels-and-weights__adjust-outline::after {
|
|
border-width: 0.1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
.l-glyph-levels-and-weights__factor {
|
|
grid-column: 1;
|
|
-ms-grid-column: 1;
|
|
text-align: left;
|
|
padding-left: 1em;
|
|
padding-top: 0.3em;
|
|
padding-bottom: 0.3em;
|
|
display:flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__operator {
|
|
grid-column: 2;
|
|
-ms-grid-column: 2;
|
|
display:flex;
|
|
align-items: center;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__factor-val {
|
|
grid-column: 3;
|
|
-ms-grid-column: 3;
|
|
text-align: right;
|
|
padding-left: 1em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 2em;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__slider {
|
|
grid-column: 4;
|
|
-ms-grid-column: 4;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 0.4rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.c-glyph-levels-and-weights__slider-process {
|
|
background-color: #d5ffd7;
|
|
}
|
|
|
|
.c-glyph-levels-and-weights__slider-bg {
|
|
background-color: #0b600e;
|
|
}
|
|
|
|
.c-glyph-levels-and-weights__slider-handle {
|
|
color: #d5ffd7;
|
|
background-color: black;
|
|
box-shadow: 0 0 0 0.1rem #d5ffd7;
|
|
border-radius: 0.8rem;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__reset-btn-outer {
|
|
z-index:2;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-glyph-levels-and-weights__reset-btn {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.5rem 0.2rem 0.5rem;
|
|
}
|
|
|
|
.c-glyph-levels-and-weights__reset-btn {
|
|
color: #d5ffd7;
|
|
background-color: black;
|
|
border-radius: 0.5rem;
|
|
border: 0.1rem solid #d5ffd7;
|
|
}
|
|
|
|
.c-glyph-levels-and-weights__reset-btn:hover {
|
|
color: black;
|
|
background-color: #d5ffd7;
|
|
}
|
|
|
|
.o-questionmark {
|
|
border-radius: 50%;
|
|
border: 0.1rem solid;
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
font-size: smaller;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-glyphs-tab {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.l-reality-button-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 5rem;
|
|
align-items: center;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.l-player-glyphs-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 2rem;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.l-reality-upgrade-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 1.2rem;
|
|
}
|
|
|
|
.l-reality-upgrade-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-reality-upgrade-grid__row > * {
|
|
margin: 1.2rem;
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.l-reality-upgrade-btn {
|
|
height: 10rem;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.c-reality-upgrade-btn {
|
|
background-color: black;
|
|
border: .2rem solid #0b600e;
|
|
border-radius: .5rem;
|
|
color: #d5ffd7;
|
|
cursor: pointer;
|
|
transition-duration: 0.12s;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
font-family: Typewriter, serif;
|
|
width: 25rem;
|
|
}
|
|
|
|
.c-reality-upgrade-btn__requirement {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.c-reality-upgrade-btn:hover {
|
|
color: black;
|
|
background-color: #d5ffd7;
|
|
}
|
|
|
|
.c-reality-upgrade-btn--unavailable {
|
|
background-color: #656565;
|
|
cursor: default;
|
|
}
|
|
|
|
.c-reality-upgrade-btn--unavailable:hover {
|
|
background-color: #656565;
|
|
color: #d5ffd7;
|
|
}
|
|
|
|
.c-reality-upgrade-btn--bought {
|
|
background-color: #0b600e;
|
|
border-color: #094E0B;
|
|
cursor: default;
|
|
}
|
|
|
|
.c-reality-upgrade-btn--bought:hover {
|
|
color: #d5ffd7;
|
|
background-color: #0b600e;
|
|
}
|
|
|
|
.c-reality-upgrade-btn--locked {
|
|
background-color: #a53939;
|
|
cursor: default;
|
|
}
|
|
|
|
.c-reality-upgrade-btn--locked:hover {
|
|
background-color: #a53939;
|
|
color: #d5ffd7;
|
|
}
|
|
|
|
.c-reality-upgrade-btn--black-hole-unlock {
|
|
text-shadow: -0.1rem 0.1rem 0.3rem #d5ffd7
|
|
}
|
|
|
|
.t-metro .c-reality-upgrade-btn,
|
|
.t-dark-metro .c-reality-upgrade-btn,
|
|
.t-inverted-metro .c-reality-upgrade-btn,
|
|
.t-s8 .c-reality-upgrade-btn {
|
|
border-width: 0.1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.t-dark .c-reality-upgrade-btn--unavailable {
|
|
color: #d5ffd7;
|
|
background-color: #37474f;
|
|
}
|
|
|
|
.t-dark .c-reality-upgrade-btn--locked {
|
|
color: #d5ffd7;
|
|
background-color: #b84b5f;
|
|
}
|
|
|
|
.t-s6.c-reality-upgrade-btn:hover {
|
|
background-color: #d5ffd7;
|
|
}
|
|
|
|
.t-s6.c-reality-upgrade-btn--unavailable:hover {
|
|
background-color: #656565;
|
|
color: #d5ffd7;
|
|
}
|
|
|
|
.t-s6.c-reality-upgrade-btn--bought {
|
|
background-color: #0b600e;
|
|
border-color: #094E0B;
|
|
}
|
|
|
|
.t-s6.c-reality-upgrade-btn--bought:hover {
|
|
color: #d5ffd7;
|
|
background-color: #0b600e;
|
|
}
|
|
|
|
.l-black-hole-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-black-hole-upgrade-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.l-black-hole-upgrade-grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.l-black-hole-upgrade-grid__row > * {
|
|
margin: 1.2rem;
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.c-black-hole-canvas {
|
|
border: .1rem solid black;
|
|
}
|
|
|
|
.c-pp-label {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.l-rm-amount__desc {
|
|
width: 40%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.c-rm-amount__desc {
|
|
color: black;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
|
|
.c-automator-blocks {
|
|
width: 100%;
|
|
}
|
|
|
|
.o-automator-command {
|
|
border: 1px solid gainsboro;
|
|
padding: .5rem;
|
|
display: inline-block;
|
|
background: #de8787;
|
|
border-radius: .5rem;
|
|
width: 6rem;
|
|
user-select: none;
|
|
cursor: grab;
|
|
}
|
|
|
|
.c-automator-command-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.c-automator-block-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.c-automator-block-row > * {
|
|
margin-right: .5rem
|
|
}
|
|
|
|
.c-automator-block-editor {
|
|
overflow-y: scroll;
|
|
height: 100%;
|
|
background-color: black;
|
|
border-top-left-radius: 1rem;
|
|
border-bottom-left-radius: 1rem;
|
|
box-sizing: border-box;
|
|
padding: .5rem;
|
|
tab-size: 1.5em;
|
|
-moz-tab-size: 1.5em;
|
|
}
|
|
|
|
.o-automator-block-input {
|
|
border: 1px solid gainsboro;
|
|
padding: .5rem;
|
|
display: inline-block;
|
|
background: burlywood;
|
|
border-radius: .5rem;
|
|
color: #4F5957;
|
|
font-size: 1.1rem;
|
|
font-family: Typewriter, serif;
|
|
}
|
|
|
|
.o-automator-linenumber {
|
|
color: #55ff55;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.l-automator-nested-block {
|
|
width: fit-content;
|
|
padding: 1rem;
|
|
border: 2px dotted #55ff55;
|
|
margin-left: 3rem;
|
|
margin-top: .5rem;
|
|
min-widtH: 30rem;
|
|
}
|
|
|
|
.o-automator-block-delete {
|
|
color: #ff3333;
|
|
font-size: 1.7rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c-perk-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.c-perk-network {
|
|
position: relative;
|
|
overflow: hidden;
|
|
touch-action: pan-y;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
width: 90rem;
|
|
height: 50rem;
|
|
border: 0.1rem solid black;
|
|
}
|
|
|
|
.c-perk-network__canvas {
|
|
position: relative;
|
|
touch-action: none;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|