mirror of
https://github.com/IvarK/AntimatterDimensionsSourceCode.git
synced 2024-11-10 14:12:02 +00:00
G420/css cleanup (#941)
* remove global focus outline disable * remove a bunch of unused styles * remove units from 0 values in stylesheets * clean up reality upgrade button grid a bit make sure the text doesn't bump up against the border remove > * selector limit amount of stretch of upgrade grid to 1200px * some more > * selector cleanup * fix up challenges header remove another couple of > * selectors * fix css for dimension rows (avoid > *), format template sanely * couple more codefactor warnings * general ui css/ui theming cleanup * last tab-btn stuff I missed in s8 * reality glyph style sprucing * fix visual bug for teresa unlock display
This commit is contained in:
garnet420
GitHub
parent
a7599659f3
commit
ef48d0a956
@ -204,7 +204,7 @@ Vue.component("alchemy-tab", {
|
||||
},
|
||||
template:
|
||||
`<div class="l-ra-alchemy-tab">
|
||||
<div @click="showAlchemyHowTo()" class="o-btn">Click for alchemy info</div>
|
||||
<div @click="showAlchemyHowTo()" class="o-primary-btn">Click for alchemy info</div>
|
||||
<alchemy-resource-info :key="infoResourceId" :resource="infoResource" />
|
||||
<div>
|
||||
<input type="checkbox"
|
||||
|
||||
@ -9,10 +9,12 @@ Vue.component("teresa-tab", {
|
||||
rm: new Decimal(0),
|
||||
percentage: "",
|
||||
rmMult: 0,
|
||||
unlocks: [],
|
||||
bestAM: new Decimal(0),
|
||||
runReward: 0,
|
||||
pp: 0,
|
||||
hasReality: false,
|
||||
hasEPGen: false,
|
||||
hasPerkShop: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -39,7 +41,9 @@ Vue.component("teresa-tab", {
|
||||
this.rmStore = player.celestials.teresa.rmStore;
|
||||
this.percentage = formatPercents(Teresa.fill, 2);
|
||||
this.rmMult = Teresa.rmMultiplier;
|
||||
this.unlocks = Object.values(TERESA_UNLOCKS).map(info => Teresa.has(info)).filter(x => x);
|
||||
this.hasReality = Teresa.has(TERESA_UNLOCKS.RUN);
|
||||
this.hasEPGen = Teresa.has(TERESA_UNLOCKS.EPGEN);
|
||||
this.hasPerkShop = Teresa.has(TERESA_UNLOCKS.SHOP);
|
||||
this.bestAM.copyFrom(player.celestials.teresa.bestRunAM);
|
||||
this.runReward = Teresa.runRewardMultiplier;
|
||||
this.pp = player.reality.pp;
|
||||
@ -62,17 +66,17 @@ Vue.component("teresa-tab", {
|
||||
<div>You have {{shorten(rm, 2, 2)}} {{"Reality Machine" | pluralize(rm)}}.</div>
|
||||
<div class="l-mechanics-container">
|
||||
<div class="l-teresa-unlocks l-teresa-mechanic-container">
|
||||
<div class="c-teresa-unlock c-teresa-run-button" v-if="unlocks[0]" @click="startRun()">
|
||||
<div class="c-teresa-unlock c-teresa-run-button" v-if="hasReality" @click="startRun()">
|
||||
Start Teresa's Reality. Glyph TT generation is disabled and
|
||||
you gain less IP and EP (x^{{shorten(0.55, 2, 2)}}).
|
||||
<br><br>
|
||||
Highest antimatter in Teresa's Reality: {{ shorten(bestAM, 2, 0) }}
|
||||
</div>
|
||||
<div class="c-teresa-unlock" v-if="unlocks[0]">
|
||||
<div class="c-teresa-unlock" v-if="hasReality">
|
||||
Teresa Reality reward: Glyph sacrifice power {{ formatX(runReward, 2, 2) }}
|
||||
</div>
|
||||
<div class="c-teresa-unlock" v-if="unlocks[1]">You gain 1% of your peaked EP/min every second.</div>
|
||||
<div class="c-teresa-shop" v-if="unlocks[3]">
|
||||
<div class="c-teresa-unlock" v-if="hasEPGen">You gain 1% of your peaked EP/min every second.</div>
|
||||
<div class="c-teresa-shop" v-if="hasPerkShop">
|
||||
<span class="o-teresa-pp"> You have {{ shorten(pp, 2, 0) }} {{"Perk Point" | pluralize(pp)}}.</span>
|
||||
<perk-shop-upgrade
|
||||
v-for="upgrade in upgrades"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
"use strict";
|
||||
|
||||
Vue.component('challenges-header', {
|
||||
data: function() {
|
||||
Vue.component("challenges-header", {
|
||||
data() {
|
||||
return {
|
||||
isICTabUnlocked: false,
|
||||
isECTabUnlocked: false,
|
||||
@ -53,36 +53,37 @@ Vue.component('challenges-header', {
|
||||
if (current !== undefined) {
|
||||
current.exit();
|
||||
}
|
||||
},
|
||||
toggleShowAll() {
|
||||
this.showAllChallenges = !this.showAllChallenges;
|
||||
},
|
||||
toggleAutoEC() {
|
||||
this.autoEC = !this.autoEC;
|
||||
}
|
||||
},
|
||||
template:
|
||||
`<div v-if="isInChallenge || isShowAllVisible" class="l-challenges-tab__header">
|
||||
<primary-button
|
||||
v-if="isInChallenge"
|
||||
class="o-primary-btn--exit-challenge l-challenges-tab__exit-btn"
|
||||
@click="exitChallenge"
|
||||
>Exit Challenge</primary-button>
|
||||
<template v-if="isShowAllVisible">
|
||||
<b>Show all:</b>
|
||||
<input
|
||||
v-model="showAllChallenges"
|
||||
type="checkbox"
|
||||
class="o-big-checkbox"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="isAutoECVisible">
|
||||
<b>Auto EC completion:</b>
|
||||
<input
|
||||
v-model="autoEC"
|
||||
type="checkbox"
|
||||
class="o-big-checkbox"
|
||||
>
|
||||
</template>
|
||||
<div
|
||||
v-if="autoEC && isAutoECVisible && remainingECTiers > 0"
|
||||
class="c-challenges-tab__auto-ec-info l-challenges-tab__auto-ec-info"
|
||||
>
|
||||
<span>Until</span>
|
||||
<primary-button v-if="isInChallenge"
|
||||
class="o-primary-btn--exit-challenge l-challenges-tab__exit-btn"
|
||||
@click="exitChallenge">
|
||||
Exit Challenge
|
||||
</primary-button>
|
||||
<div>
|
||||
<div v-if="isShowAllVisible"
|
||||
class="o-challenges-tab__header-toggle"
|
||||
@click="toggleShowAll">
|
||||
<input :checked="showAllChallenges" type="checkbox" class="o-big-checkbox" />
|
||||
<b>Show all</b>
|
||||
</div>
|
||||
<div v-if="isAutoECVisible"
|
||||
class="o-challenges-tab__header-toggle"
|
||||
@click="toggleAutoEC">
|
||||
<input :checked="autoEC" type="checkbox" class="o-big-checkbox" />
|
||||
<b>Auto EC completion</b>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="autoEC && isAutoECVisible && remainingECTiers > 0"
|
||||
class="c-challenges-tab__auto-ec-info l-challenges-tab__auto-ec-info">
|
||||
<div class="l-challenges-tab__auto-ec-timers">
|
||||
<span v-if="remainingECTiers > 1">next auto EC completion: {{untilNextEC}}</span>
|
||||
<span>all auto EC completions: {{untilAllEC}}</span>
|
||||
|
||||
@ -76,22 +76,22 @@ Vue.component("infinity-dim-row", {
|
||||
},
|
||||
template:
|
||||
`<div v-show="isUnlocked" class="c-infinity-dim-row">
|
||||
<div
|
||||
class="c-infinity-dim-row__label c-infinity-dim-row__name"
|
||||
>{{name}} Infinity Dimension x{{shortenMoney(multiplier)}}</div>
|
||||
<div
|
||||
class="c-infinity-dim-row__label c-infinity-dim-row__label--growable"
|
||||
>{{shortenDimensions(amount)}} {{rateOfChangeDisplay}}</div>
|
||||
<div class="c-infinity-dim-row__label c-infinity-dim-row__name">
|
||||
{{name}} Infinity Dimension x{{shortenMoney(multiplier)}}
|
||||
</div>
|
||||
<div class="c-infinity-dim-row__label c-infinity-dim-row__label--growable">
|
||||
{{shortenDimensions(amount)}} {{rateOfChangeDisplay}}
|
||||
</div>
|
||||
<primary-button-on-off
|
||||
v-if="isAutobuyerUnlocked && !isEC8Running"
|
||||
v-model="isAutobuyerOn"
|
||||
class="o-primary-btn--id-autobuyer c-infinity-dim-row__button"
|
||||
class="o-primary-btn--id-autobuyer l-infinity-dim-row__button"
|
||||
text="Auto:"
|
||||
/>
|
||||
<primary-button
|
||||
v-tooltip="capTooltip"
|
||||
:enabled="isAvailableForPuchase"
|
||||
class="o-primary-btn--buy-id c-infinity-dim-row__button"
|
||||
class="o-primary-btn--buy-id l-infinity-dim-row__button"
|
||||
@click="buyManyInfinityDimension"
|
||||
>{{costDisplay}}</primary-button>
|
||||
</div>`,
|
||||
|
||||
@ -68,12 +68,12 @@ Vue.component("normal-dim-row", {
|
||||
},
|
||||
template:
|
||||
`<div v-show="isUnlocked" class="c-normal-dim-row">
|
||||
<div
|
||||
class="c-normal-dim-row__name c-normal-dim-row__label"
|
||||
>{{name}} Dimension x{{shorten(multiplier, 1, 1)}}</div>
|
||||
<div
|
||||
class="c-normal-dim-row__label c-normal-dim-row__label--growable"
|
||||
>{{amountDisplay}} ({{shortenSmallInteger(boughtBefore10)}}){{rateOfChangeDisplay}}</div>
|
||||
<div class="c-normal-dim-row__name c-normal-dim-row__label">
|
||||
{{name}} Dimension x{{shorten(multiplier, 1, 1)}}
|
||||
</div>
|
||||
<div class="c-normal-dim-row__label c-normal-dim-row__label--growable">
|
||||
{{amountDisplay}} ({{shortenSmallInteger(boughtBefore10)}}){{rateOfChangeDisplay}}
|
||||
</div>
|
||||
<primary-button
|
||||
:enabled="isAffordable"
|
||||
class="o-primary-btn--buy-nd o-primary-btn--buy-single-nd c-normal-dim-row__buy-button"
|
||||
|
||||
@ -58,21 +58,21 @@ Vue.component("time-dim-row", {
|
||||
},
|
||||
template:
|
||||
`<div v-show="isUnlocked" class="c-time-dim-row">
|
||||
<div
|
||||
class="c-time-dim-row__label c-time-dim-row__name"
|
||||
>{{name}} Time Dimension x{{shortenMoney(multiplier)}}</div>
|
||||
<div
|
||||
class="c-time-dim-row__label c-time-dim-row__label--growable"
|
||||
>{{shortenDimensions(amount)}}{{rateOfChangeDisplay}}</div>
|
||||
<div class="c-time-dim-row__label c-time-dim-row__name">
|
||||
{{name}} Time Dimension x{{shortenMoney(multiplier)}}
|
||||
</div>
|
||||
<div class="c-time-dim-row__label c-time-dim-row__label--growable">
|
||||
{{shortenDimensions(amount)}}{{rateOfChangeDisplay}}
|
||||
</div>
|
||||
<primary-button-on-off
|
||||
v-if="areAutobuyersUnlocked"
|
||||
v-model="isAutobuyerOn"
|
||||
class="o-primary-btn--td-autobuyer c-time-dim-row__button"
|
||||
class="o-primary-btn--td-autobuyer l-time-dim-row__button"
|
||||
text="Auto:"
|
||||
/>
|
||||
<primary-button
|
||||
:enabled="isAffordable"
|
||||
class="o-primary-btn--buy-td c-time-dim-row__button"
|
||||
class="o-primary-btn--buy-td l-time-dim-row__button"
|
||||
@click="buyTimeDimension"
|
||||
>{{buttonContents}}</primary-button>
|
||||
</div>`,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
"use strict";
|
||||
|
||||
Vue.component("help-me", {
|
||||
template: `<div onclick="Modal.h2p.show()" class="o-btn l-help-me">?</div>`
|
||||
template: `<div onclick="Modal.h2p.show()" class="o-tab-btn l-help-me">?</div>`
|
||||
});
|
||||
|
||||
@ -41,7 +41,7 @@ Vue.component("replicanti-upgrade-button", {
|
||||
}
|
||||
},
|
||||
template:
|
||||
`<div class="l-spoon-btn-group">
|
||||
`<div class="l-spoon-btn-group l-replicanti-upgrade-button">
|
||||
<primary-button
|
||||
:enabled="canBeBought"
|
||||
class="o-primary-btn--replicanti-upgrade"
|
||||
|
||||
@ -41,7 +41,7 @@ Vue.component("modal-h2p", {
|
||||
<div class="c-h2p-title">
|
||||
How To Play
|
||||
</div>
|
||||
<div class="c-modal__close-btn o-primary-btn .o-primary-btn--modal-close" @click="exit">×</div>
|
||||
<div class="c-modal__close-btn o-primary-btn o-primary-btn--modal-close" @click="exit">×</div>
|
||||
</div>
|
||||
<div class="l-h2p-container">
|
||||
<div class="l-h2p-search-tab">
|
||||
|
||||
@ -110,23 +110,25 @@ Vue.component("modal-import-tree", {
|
||||
<div class="c-modal-import-tree__tree-info">
|
||||
<div v-if="inputIsSecret">???</div>
|
||||
<template v-else-if="inputIsValidTree">
|
||||
<div>
|
||||
<div class="l-modal-import-tree__tree-info-line">
|
||||
Total tree cost:
|
||||
{{ formatCost(tree.totalCost) }} {{ "Time Theorem" | pluralize(tree.totalCost, "Time Theorems") }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="l-modal-import-tree__tree-info-line">
|
||||
Cost of missing studies:
|
||||
{{ formatCost(tree.currentCost) }} {{ "Time Theorem" | pluralize(tree.currentCost, "Time Theorems") }}
|
||||
</div>
|
||||
<div v-if="tree.hasFirstSplit">
|
||||
<div v-if="tree.hasFirstSplit" class="l-modal-import-tree__tree-info-line">
|
||||
{{ "First split path:" | pluralize(tree.firstSplitPaths.size, "First split paths:") }}
|
||||
{{ formatPaths(tree.firstSplitPaths) }}
|
||||
</div>
|
||||
<div v-if="tree.hasSecondSplit">
|
||||
<div v-if="tree.hasSecondSplit" class="l-modal-import-tree__tree-info-line">
|
||||
{{ "Second split path:" | pluralize(tree.secondSplitPaths.size, "Second split paths:") }}
|
||||
{{ formatPaths(tree.secondSplitPaths) }}
|
||||
</div>
|
||||
<div v-if="tree.hasEternityChallenge">Eternity challenge: {{ tree.eternityChallenge.id }}</div>
|
||||
<div v-if="tree.hasEternityChallenge" class="l-modal-import-tree__tree-info-line">
|
||||
Eternity challenge: {{ tree.eternityChallenge.id }}
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="hasInput">Not a valid tree</div>
|
||||
</div>
|
||||
|
||||
@ -54,8 +54,8 @@ Vue.component("new-dim-shift-row", {
|
||||
<h4>Dimensional {{name}} ({{boostCountText}})</h4>
|
||||
<span>Requires: {{shortenSmallInteger(requirement.amount)}} {{dimName}} D</span>
|
||||
<button
|
||||
class="storebtn" style="height: 56px;"
|
||||
:class="{ 'storebtn-unavailable': !isBuyable }"
|
||||
class="o-primary-btn o-primary-btn--new" style="height: 56px;"
|
||||
:class="{ 'o-primary-btn--disabled': !isBuyable }"
|
||||
:enabled="isBuyable"
|
||||
@click="softReset"
|
||||
>{{buttonText}}</button>
|
||||
|
||||
@ -73,7 +73,7 @@ Vue.component("new-dimension-row", {
|
||||
`<div v-show="isUnlocked" class="dimension-row">
|
||||
<h3>{{name}} D<span class="mult">x{{ shortenMultiplier(multiplier) }}</span></h3>
|
||||
<span>{{amountDisplay}}</span>
|
||||
<button class="storebtn" @click="buy" :class="{ 'storebtn-unavailable': !isAffordable }">
|
||||
<button class="o-primary-btn o-primary-btn--new" @click="buy" :class="{ 'o-primary-btn--disabled': !isAffordable }">
|
||||
<div
|
||||
class="button-content"
|
||||
:enabled="isAffordable"
|
||||
|
||||
@ -108,20 +108,20 @@ Vue.component("new-dimensions-tab", {
|
||||
<br><span v-if="isChallengePowerVisible">{{challengePower}}</span>
|
||||
</div>
|
||||
<div class="modes-container">
|
||||
<button class="storebtn" @click="toggleUntil10" style="width: 100px; height: 30px; padding: 0;">
|
||||
<button class="o-primary-btn" @click="toggleUntil10" style="width: 100px; height: 30px; padding: 0;">
|
||||
{{ getUntil10Display() }}
|
||||
</button>
|
||||
<primary-button
|
||||
v-show="isSacrificeUnlocked"
|
||||
v-tooltip="sacrificeTooltip"
|
||||
:enabled="isSacrificeAffordable"
|
||||
class="storebtn sacrifice-btn"
|
||||
class="o-primary-btn sacrifice-btn"
|
||||
@click="sacrifice"
|
||||
>
|
||||
<span v-if="isSacrificeAffordable">Dimensional Sacrifice ({{ formatX(sacrificeBoost, 2, 2) }})</span>
|
||||
<span v-else>Sacrifice Disabled ({{ disabledCondition }})</span>
|
||||
</primary-button>
|
||||
<button class="storebtn" @click="maxAll" style="width: 100px; height: 30px; padding: 0;">Max All (M)</button>
|
||||
<button class="o-primary-btn" @click="maxAll" style="width: 100px; height: 30px; padding: 0;">Max All (M)</button>
|
||||
</div>
|
||||
<span v-if="isSacrificeUnlocked">Sacrifice multiplier: {{ formatX(currentSacrifice, 2, 2) }}</span>
|
||||
<new-tickspeed-row></new-tickspeed-row>
|
||||
|
||||
@ -86,8 +86,8 @@ Vue.component("new-galaxy-row", {
|
||||
<span>Requires: {{shortenSmallInteger(requirement.amount)}} {{dimName}} D</span>
|
||||
<div v-if="hasIncreasedScaling">{{costScalingText}}</div>
|
||||
<button
|
||||
class="storebtn" style="height: 56px; font-size: 1rem;"
|
||||
:class="{ 'storebtn-unavailable': !canBeBought }"
|
||||
class="o-primary-btn o-primary-btn--new" style="height: 56px; font-size: 1rem;"
|
||||
:class="{ 'o-primary-btn--disabled': !canBeBought }"
|
||||
onclick="galaxyResetBtnClick()"
|
||||
:enabled="canBeBought"
|
||||
>{{buttonText}}</button>
|
||||
|
||||
@ -78,14 +78,14 @@ Vue.component("new-tickspeed-row", {
|
||||
</div>
|
||||
<div class="tickspeed-buttons">
|
||||
<button
|
||||
class="storebtn tickspeed-btn"
|
||||
:class="{ 'storebtn-unavailable': !isAffordable }"
|
||||
class="o-primary-btn tickspeed-btn"
|
||||
:class="{ 'o-primary-btn--disabled': !isAffordable }"
|
||||
:enabled="isAffordable"
|
||||
onclick="buyTickSpeed()"
|
||||
>Cost: {{shortenCosts(cost)}}</button>
|
||||
<button
|
||||
class="storebtn tickspeed-max-btn"
|
||||
:class="{ 'storebtn-unavailable': !isAffordable }"
|
||||
class="o-primary-btn tickspeed-max-btn"
|
||||
:class="{ 'o-primary-btn--disabled': !isAffordable }"
|
||||
:enabled="isAffordable"
|
||||
onclick="buyMaxTickSpeed()"
|
||||
>Buy Max</button>
|
||||
|
||||
@ -78,22 +78,22 @@ Vue.component("new-inf-dimension-row", {
|
||||
},
|
||||
template:
|
||||
`<div v-show="isUnlocked" class="c-infinity-dim-row">
|
||||
<div
|
||||
class="c-infinity-dim-row__label c-infinity-dim-row__name"
|
||||
>{{name}} Infinity D <span class="c-infinity-dim-row__multiplier">x{{shortenMoney(multiplier)}}</span></div>
|
||||
<div
|
||||
class="c-infinity-dim-row__label c-infinity-dim-row__label--growable"
|
||||
>{{shortenDimensions(amount)}}</div>
|
||||
<div class="c-infinity-dim-row__label c-infinity-dim-row__name">
|
||||
{{name}} Infinity D <span class="c-infinity-dim-row__multiplier">x{{shortenMoney(multiplier)}}</span>
|
||||
</div>
|
||||
<div class="c-infinity-dim-row__label c-infinity-dim-row__label--growable">
|
||||
{{shortenDimensions(amount)}}
|
||||
</div>
|
||||
<primary-button-on-off
|
||||
v-if="isAutobuyerUnlocked && !isEC8Running"
|
||||
v-model="isAutobuyerOn"
|
||||
class="o-primary-btn--id-autobuyer c-infinity-dim-row__button"
|
||||
class="o-primary-btn--id-autobuyer l-infinity-dim-row__button"
|
||||
text="Auto:"
|
||||
/>
|
||||
<primary-button
|
||||
v-tooltip="capTooltip"
|
||||
:enabled="isAvailableForPuchase"
|
||||
class="o-primary-btn--buy-id c-infinity-dim-row__button storebtn"
|
||||
class="o-primary-btn--buy-id l-infinity-dim-row__button o-primary-btn o-primary-btn--new"
|
||||
@click="buyManyInfinityDimension"
|
||||
>{{costDisplay}}</primary-button>
|
||||
</div>`,
|
||||
|
||||
@ -58,21 +58,21 @@ Vue.component("new-time-dimension-row", {
|
||||
},
|
||||
template:
|
||||
`<div v-show="isUnlocked" class="c-time-dim-row">
|
||||
<div
|
||||
class="c-time-dim-row__label c-time-dim-row__name"
|
||||
>{{name}} Time D <span class="c-time-dim-row__multiplier">x{{shortenMoney(multiplier)}}</span></div>
|
||||
<div
|
||||
class="c-time-dim-row__label c-time-dim-row__label--growable"
|
||||
>{{shortenDimensions(amount)}}</div>
|
||||
<div class="c-time-dim-row__label c-time-dim-row__name">
|
||||
{{name}} Time D <span class="c-time-dim-row__multiplier">x{{shortenMoney(multiplier)}}</span>
|
||||
</div>
|
||||
<div class="c-time-dim-row__label c-time-dim-row__label--growable">
|
||||
{{shortenDimensions(amount)}}
|
||||
</div>
|
||||
<primary-button-on-off
|
||||
v-if="areAutobuyersUnlocked"
|
||||
v-model="isAutobuyerOn"
|
||||
class="o-primary-btn--td-autobuyer c-time-dim-row__button"
|
||||
class="o-primary-btn--td-autobuyer l-time-dim-row__button"
|
||||
text="Auto:"
|
||||
/>
|
||||
<primary-button
|
||||
:enabled="isAffordable"
|
||||
class="o-primary-btn--buy-td c-time-dim-row__button storebtn"
|
||||
class="o-primary-btn--buy-td l-time-dim-row__button o-primary-btn o-primary-btn--new"
|
||||
@click="buyTimeDimension"
|
||||
>{{buttonContents}}</primary-button>
|
||||
</div>`,
|
||||
|
||||
@ -15,8 +15,8 @@ Vue.component("old-ui-subtab-button", {
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<button v-if="isAvailable" @click="subtab.show()" style="margin: .5rem .8rem" class="o-btn o-btn--secondary-tab">
|
||||
{{subtab.name}}
|
||||
</button>
|
||||
<button v-if="isAvailable" @click="subtab.show()" style="margin: .5rem .8rem" class="o-tab-btn o-tab-btn--secondary">
|
||||
{{subtab.name}}
|
||||
</button>
|
||||
`
|
||||
});
|
||||
|
||||
@ -18,7 +18,7 @@ Vue.component("old-ui-tab-button", {
|
||||
<button
|
||||
v-if="isAvailable"
|
||||
:class="tab.config.oldUIClass"
|
||||
class="tabbtn"
|
||||
class="o-tab-btn"
|
||||
style="margin: .2rem"
|
||||
@click="tab.show()"
|
||||
>{{tab.name}}</button>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Vue.component("old-ui", {
|
||||
components: {
|
||||
"big-crunch-button": {
|
||||
template: `<button class="tabbtn o-big-crunch-btn" onclick="bigCrunchResetRequest()">Big Crunch</button>`
|
||||
template: `<button class="o-tab-btn o-big-crunch-btn" onclick="bigCrunchResetRequest()">Big Crunch</button>`
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -115,11 +115,16 @@ const GlyphTooltipComponent = {
|
||||
color: this.rarityInfo.color,
|
||||
"text-shadow": `-1px 1px 1px black, 1px 1px 1px black,
|
||||
-1px -1px 1px black, 1px -1px 1px black, 0 0 3px ${this.rarityInfo.color}`,
|
||||
float: "left"
|
||||
float: "left",
|
||||
animation: this.type === "reality" ? "c-reality-glyph-description-cycle 10s infinite" : undefined,
|
||||
"margin-top": this.type === "reality" ? "0.7rem" : undefined,
|
||||
"margin-left": this.type === "reality" ? "0.7rem" : undefined
|
||||
};
|
||||
},
|
||||
description() {
|
||||
return `${this.rarityInfo.name} glyph of ${this.type} (${this.roundedRarity.toFixed(1)}%)`;
|
||||
const name = this.type === "reality" ? "Pure" : this.rarityInfo.name;
|
||||
const rarity = this.type === "reality" ? "" : `(${this.roundedRarity.toFixed(1)}%)`;
|
||||
return `${name} glyph of ${this.type} ${rarity}`;
|
||||
},
|
||||
isLevelCapped() {
|
||||
return this.levelOverride && this.levelOverride < this.level;
|
||||
@ -287,6 +292,7 @@ Vue.component("glyph-component", {
|
||||
"background-color": "rgba(0, 0, 0, 0)",
|
||||
"box-shadow": `0 0 ${this.glowBlur} calc(${this.glowSpread} + 0.1rem) ${this.borderColor} inset`,
|
||||
"border-radius": this.circular ? "50%" : "0",
|
||||
animation: this.isRealityGlyph ? "c-reality-glyph-over-cycle 10s infinite" : undefined,
|
||||
};
|
||||
},
|
||||
outerStyle() {
|
||||
@ -300,8 +306,7 @@ Vue.component("glyph-component", {
|
||||
};
|
||||
},
|
||||
innerStyle() {
|
||||
const rarityColor = this.glyph.color ||
|
||||
GlyphRarities.find(e => this.glyph.strength >= e.minStrength).color;
|
||||
const rarityColor = this.glyph.color || getRarity(this.glyph.strength).color;
|
||||
return {
|
||||
width: `calc(${this.size} - 0.2rem)`,
|
||||
height: `calc(${this.size} - 0.2rem)`,
|
||||
@ -309,7 +314,7 @@ Vue.component("glyph-component", {
|
||||
color: rarityColor,
|
||||
"text-shadow": `-0.04em 0.04em 0.08em ${rarityColor}`,
|
||||
"border-radius": this.circular ? "50%" : "0",
|
||||
animation: this.isRealityGlyph ? "c-reality-glyph-inner-cycle 10s infinite" : undefined,
|
||||
animation: this.isRealityGlyph ? "c-reality-glyph-icon-cycle 10s infinite" : undefined,
|
||||
};
|
||||
},
|
||||
mouseEventHandlers() {
|
||||
|
||||
@ -149,7 +149,7 @@ GameDatabase.tabs = [
|
||||
{
|
||||
key: "infinity",
|
||||
name: "Infinity",
|
||||
oldUIClass: "infinitytabbtn",
|
||||
oldUIClass: "o-tab-btn--infinity",
|
||||
newUIClass: "infinity",
|
||||
condition: () =>
|
||||
PlayerProgress.realityUnlocked() ||
|
||||
@ -186,7 +186,7 @@ GameDatabase.tabs = [
|
||||
{
|
||||
key: "eternity",
|
||||
name: "Eternity",
|
||||
oldUIClass: "eternitytabbtn",
|
||||
oldUIClass: "o-tab-btn--eternity",
|
||||
newUIClass: "eternity",
|
||||
condition: () =>
|
||||
PlayerProgress.realityUnlocked() ||
|
||||
@ -230,7 +230,7 @@ GameDatabase.tabs = [
|
||||
key: "reality",
|
||||
name: "Reality",
|
||||
before: "reality-machines-header",
|
||||
oldUIClass: "realitytabbtn",
|
||||
oldUIClass: "o-tab-btn--reality",
|
||||
newUIClass: "reality",
|
||||
condition: () => PlayerProgress.realityUnlocked() || TimeStudy.reality.isBought,
|
||||
subtabs: [
|
||||
@ -276,7 +276,7 @@ GameDatabase.tabs = [
|
||||
{
|
||||
key: "celestials",
|
||||
name: "Celestials",
|
||||
oldUIClass: "celestialtabbtn",
|
||||
oldUIClass: "o-tab-btn--celestial",
|
||||
newUIClass: "celestials",
|
||||
condition: () => RealityUpgrades.allBought,
|
||||
subtabs: [
|
||||
|
||||
@ -9,9 +9,7 @@
|
||||
|
||||
#ui {
|
||||
--color-text: white;
|
||||
--color-light: #FFFFFF;
|
||||
--color-medium: #AEAEAE;
|
||||
--color-dark: #1d1b22;
|
||||
--color-base: #1d1b22;
|
||||
--color-accent-1: rgb(223, 80, 80);
|
||||
--color-accent-2: #E64C66;
|
||||
--color-good: #1bbb36;
|
||||
@ -27,9 +25,7 @@
|
||||
|
||||
.t-metro #ui, .t-s8 #ui {
|
||||
--color-text: black;
|
||||
--color-light: #FFFFFF;
|
||||
--color-medium: #AEAEAE;
|
||||
--color-dark: #eeeeee;
|
||||
--color-base: #eeeeee;
|
||||
--color-accent-1: #2196F3;
|
||||
--color-accent-2: #2196F3;
|
||||
--color-good: #66bb6a;
|
||||
@ -45,18 +41,14 @@
|
||||
|
||||
.t-dark #ui {
|
||||
--color-text: white;
|
||||
--color-light: #FFFFFF;
|
||||
--color-medium: #AEAEAE;
|
||||
--color-dark: #455a64;
|
||||
--color-base: #455a64;
|
||||
--color-accent-1: #1565C0;
|
||||
--color-accent-2: #1565C0;
|
||||
}
|
||||
|
||||
.t-dark-metro #ui {
|
||||
--color-text: #e0e0e0;
|
||||
--color-light: #FFFFFF;
|
||||
--color-medium: #AEAEAE;
|
||||
--color-dark: #455a64;
|
||||
--color-base: #455a64;
|
||||
--color-accent-1: #2196F3;
|
||||
--color-accent-2: #2196F3;
|
||||
--color-good: #66bb6a;
|
||||
@ -70,11 +62,32 @@
|
||||
--color-celestials-accent: #00838f;
|
||||
}
|
||||
|
||||
.t-s1 #ui {
|
||||
--color-text: black;
|
||||
--color-base: #dbd242;
|
||||
--color-accent-1: black;
|
||||
--color-accent-2: black;
|
||||
--color-good: #4baf4e;
|
||||
--color-good-dark: #3c8b3e;
|
||||
--color-bad: #d72621;
|
||||
|
||||
--color-infinity: #7d3c1b;
|
||||
--color-eternity: #639565;
|
||||
--color-reality: #AFA3A5;
|
||||
--color-celestials: #F2D6C1;
|
||||
--color-celestials-accent: #E5A67B;
|
||||
}
|
||||
|
||||
.t-s4 #ui {
|
||||
--color-text: black;
|
||||
--color-base: #1b00ff;
|
||||
--color-accent-1: #1b00ff;
|
||||
--color-bad: #ff0000;
|
||||
}
|
||||
|
||||
.t-s6 #ui {
|
||||
--color-text: white;
|
||||
--color-light: black;
|
||||
--color-medium: black;
|
||||
--color-dark: black;
|
||||
--color-base: black;
|
||||
--color-accent-1: #1565C0;
|
||||
--color-accent-2: #1565C0;
|
||||
}
|
||||
@ -94,6 +107,10 @@ body.t-dark {
|
||||
color: #888
|
||||
}
|
||||
|
||||
body.t-s1 {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
#page {
|
||||
margin: auto;
|
||||
@ -122,7 +139,7 @@ body.t-dark {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-dark);
|
||||
background-color: var(--color-base);
|
||||
border-right: 1px solid var(--color-accent-1);
|
||||
border-bottom: 1px solid var(--color-accent-1);
|
||||
}
|
||||
@ -142,7 +159,7 @@ body.t-dark {
|
||||
|
||||
.t-dark .resource h2,
|
||||
.t-dark-metro .resource h2 {
|
||||
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), -1px 1px 1px rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), -1px 1px 1px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.resource-information {
|
||||
@ -183,7 +200,7 @@ body.t-dark {
|
||||
|
||||
.tab-button {
|
||||
height: 46px;
|
||||
background-color: var(--color-dark);
|
||||
background-color: var(--color-base);
|
||||
border: 1px solid var(--color-accent-1);
|
||||
border-left: none;
|
||||
margin-top: -1px;
|
||||
@ -227,7 +244,7 @@ body.t-dark {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 23px solid transparent;
|
||||
border-left: 0px solid var(--color-accent-1);
|
||||
border-left: 0 solid var(--color-accent-1);
|
||||
border-top: 23px solid transparent;
|
||||
z-index: 4;
|
||||
transition-duration: 0.15s;
|
||||
@ -251,7 +268,7 @@ body.t-dark {
|
||||
}
|
||||
|
||||
.tab-button.celestials::after {
|
||||
border-left-color: var(--color-celestials);
|
||||
border-left-color: var(--color-celestials-accent);
|
||||
}
|
||||
|
||||
.tab-button h3 {
|
||||
@ -269,6 +286,10 @@ body.t-dark {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.t-s1 .tab-button:hover h3 {
|
||||
color: var(--color-base);
|
||||
}
|
||||
|
||||
.tab-button.infinity {
|
||||
background-color: black;
|
||||
}
|
||||
@ -329,7 +350,7 @@ body.t-dark {
|
||||
|
||||
.tab-button.celestials:hover {
|
||||
background-color: var(--color-celestials-accent);
|
||||
border-color: var(--color-celestials);
|
||||
border-color: var(--color-celestials-accent);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
@ -441,7 +462,7 @@ body.t-dark {
|
||||
.subtab {
|
||||
height: 47px;
|
||||
width: 47px;
|
||||
background-color: var(--color-dark);
|
||||
background-color: var(--color-base);
|
||||
border: 1px solid var(--color-accent-1);
|
||||
color: var(--color-text);;
|
||||
font-size: 1.6em;
|
||||
@ -479,6 +500,11 @@ body.t-dark {
|
||||
background-color: var(--color-accent-1);
|
||||
}
|
||||
|
||||
.t-s1 .subtab:hover {
|
||||
color: var(--color-base);
|
||||
background-color: var(--color-accent-1);
|
||||
}
|
||||
|
||||
.subtab.infinity {
|
||||
color: var(--color-infinity);
|
||||
background-color: black;
|
||||
@ -582,52 +608,17 @@ body.t-dark {
|
||||
}
|
||||
|
||||
|
||||
.storebtn {
|
||||
background-color: var(--color-dark);
|
||||
border: 1px solid var(--color-good);
|
||||
padding: 10px;
|
||||
.o-primary-btn--new {
|
||||
background-color: var(--color-base);
|
||||
border: 0.1rem solid var(--color-good);
|
||||
padding: 1rem;
|
||||
color: var(--color-text);
|
||||
font-family: Typewriter, serif;
|
||||
border-radius: 5px;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
width: 175px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.t-metro .storebtn,
|
||||
.t-dark-metro .storebtn,
|
||||
.t-inverted-metro .storebtn,
|
||||
.t-s8 .storebtn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.storebtn:hover {
|
||||
background: #50b55d6b;
|
||||
}
|
||||
|
||||
.storebtn-unavailable {
|
||||
background: rgba(160, 42, 42, 0.534);
|
||||
border-color: var(--color-bad) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.t-metro .storebtn-unavailable,
|
||||
.t-inverted-metro .storebtn-unavailable,
|
||||
.t-s8 .storebtn-unavailable {
|
||||
background: #9E9E9E;
|
||||
}
|
||||
|
||||
.t-dark .storebtn-unavailable {
|
||||
background: #37474f;
|
||||
}
|
||||
|
||||
.t-dark-metro .storebtn-unavailable {
|
||||
background: #37474f;
|
||||
}
|
||||
|
||||
.storebtn-unavailable:hover {
|
||||
background: var(--color-bad) !important;
|
||||
width: 17.5rem;
|
||||
height: 4.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-content {
|
||||
@ -767,6 +758,7 @@ body.t-dark {
|
||||
}
|
||||
|
||||
.information-header {
|
||||
color: var(--color-text);
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
@ -796,13 +788,13 @@ body.t-dark {
|
||||
}
|
||||
|
||||
.o-primary-btn--option, .c-select-theme__item, .c-select-notation__item {
|
||||
background: var(--color-dark);
|
||||
background: var(--color-base);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-good);
|
||||
}
|
||||
|
||||
.o-primary-btn {
|
||||
background-color: var(--color-dark);
|
||||
background-color: var(--color-base);
|
||||
border: 1px solid var(--color-good);
|
||||
color: var(--color-text);
|
||||
}
|
||||
@ -823,7 +815,7 @@ body.t-dark {
|
||||
|
||||
.c-challenge-box--normal {
|
||||
color: var(--color-text);
|
||||
background: var(--color-dark);
|
||||
background: var(--color-base);
|
||||
border: 1px solid var(--color-accent-1);
|
||||
}
|
||||
|
||||
@ -847,7 +839,7 @@ body.t-dark {
|
||||
|
||||
.o-autobuyer-input,
|
||||
.l-autobuyer-grid select {
|
||||
background: var(--color-dark);
|
||||
background: var(--color-base);
|
||||
border: 0.1rem solid var(--color-accent-1);
|
||||
color: var(--color-accent-1);
|
||||
}
|
||||
@ -957,12 +949,9 @@ body.t-dark {
|
||||
font-size: 1.4rem
|
||||
}
|
||||
|
||||
.l-reality-upgrade-grid__row > * {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.l-reality-upgrade-btn {
|
||||
width: 15.6rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.resource-eternity-canreset > div {
|
||||
|
||||
@ -49,11 +49,6 @@
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.o-btn--secondary-tab {
|
||||
width: 17.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.o-big-crunch-btn {
|
||||
font-family: Typewriter, serif;
|
||||
font-size: 5rem;
|
||||
@ -68,6 +63,283 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.o-tab-btn {
|
||||
background: #E0E0E0;
|
||||
font-weight: bold;
|
||||
border: 0.2rem solid #4980CC;
|
||||
border-radius: 0.4rem;
|
||||
transition-duration: 0.2s;
|
||||
cursor: pointer;
|
||||
font-family: Typewriter;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.o-tab-btn:hover {
|
||||
color: #FFFFFF;
|
||||
background: #4980CC;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn {
|
||||
color: #E0E0E0;
|
||||
border: .2rem solid #1565C0;
|
||||
background-color: #455A64;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn:hover {
|
||||
background: #1565C0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn,
|
||||
.t-inverted-metro .o-tab-btn,
|
||||
.t-s8 .o-tab-btn {
|
||||
background: #eeeeee;
|
||||
border: .1rem solid #2196F3;
|
||||
box-shadow: .1rem .1rem .1rem 0 #9E9E9E;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.t-dark-metro .o-tab-btn {
|
||||
color: #e0e0e0;
|
||||
background-color: #455a64;
|
||||
border: .1rem solid #1e88e5;
|
||||
box-shadow: 0.1rem 0.1rem 0.1rem 0 black;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.t-s1 .o-tab-btn {
|
||||
color: black;
|
||||
background: #dbd242;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.t-s1 .o-tab-btn:hover {
|
||||
color: #dbd242;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.t-s4 .o-tab-btn {
|
||||
background-color: #1b00ff !important;
|
||||
cursor: url(cursor2.cur), auto;
|
||||
}
|
||||
|
||||
.t-s6 .o-tab-btn {
|
||||
color: #E0E0E0;
|
||||
background: black;
|
||||
border: .2rem solid #1565C0;
|
||||
text-shadow: 0 0 1rem white;
|
||||
}
|
||||
|
||||
.t-s6 .o-tab-btn:hover {
|
||||
background: #1565C0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.t-s8 .o-tab-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn:hover,
|
||||
.t-dark-metro .o-tab-btn:hover,
|
||||
.t-inverted-metro .o-tab-btn:hover,
|
||||
.t-s8 .o-tab-btn:hover {
|
||||
background: #2196F3;
|
||||
border: .1rem solid #2196F3;
|
||||
}
|
||||
|
||||
.o-tab-btn--secondary {
|
||||
font-size: 1.3rem;
|
||||
width: 17.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.o-tab-btn--infinity {
|
||||
color: #FFFFFF;
|
||||
background: #1F1F1F;
|
||||
border-color: #B67F33;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--infinity,
|
||||
.t-s6 .o-tab-btn--infinity {
|
||||
color: #000;
|
||||
background: #F5F5F5;
|
||||
border-color: #FF9800;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--infinity,
|
||||
.t-inverted-metro .o-tab-btn--infinity,
|
||||
.t-s8 .o-tab-btn--infinity {
|
||||
border-color: #FF9800;
|
||||
background: #1F1F1F;
|
||||
}
|
||||
|
||||
.t-dark-metro .o-tab-btn--infinity {
|
||||
color: black;
|
||||
background: white;
|
||||
border-color: #FF9800;
|
||||
box-shadow: 1px 1px 1px 0 black;
|
||||
}
|
||||
|
||||
|
||||
.o-tab-btn--infinity:hover {
|
||||
color: #000000;
|
||||
background: #B67F33;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--infinity:hover,
|
||||
.t-s6 .o-tab-btn--infinity:hover {
|
||||
background: #FF9800;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--infinity:hover,
|
||||
.t-dark-metro .o-tab-btn--infinity:hover,
|
||||
.t-inverted-metro .o-tab-btn--infinity:hover,
|
||||
.t-s8 .o-tab-btn--infinity:hover {
|
||||
background: #FF9800;
|
||||
border-color: #FF9800;
|
||||
}
|
||||
|
||||
.o-tab-btn--eternity {
|
||||
color: #b341e0;
|
||||
background: black;
|
||||
border-color: #b341e0;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--eternity,
|
||||
.t-s6 .o-tab-btn--eternity {
|
||||
color: #b341e0;
|
||||
background: black;
|
||||
border-color: #b341e0;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--eternity,
|
||||
.t-dark-metro .o-tab-btn--eternity,
|
||||
.t-inverted-metro .o-tab-btn--eternity,
|
||||
.t-s8 .o-tab-btn--eternity {
|
||||
color: #673AB7;
|
||||
background: black;
|
||||
border-color: #673AB7;
|
||||
}
|
||||
|
||||
.t-s1 .o-tab-btn--eternity {
|
||||
color: #639565;
|
||||
background: black;
|
||||
border-color: #639565;
|
||||
}
|
||||
|
||||
.o-tab-btn--eternity:hover {
|
||||
color: #511568;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--eternity:hover,
|
||||
.t-s6 .o-tab-btn--eternity:hover {
|
||||
color: #511568;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--eternity:hover,
|
||||
.t-dark-metro .o-tab-btn--eternity:hover,
|
||||
.t-inverted-metro .o-tab-btn--eternity:hover,
|
||||
.t-s8 .o-tab-btn--eternity:hover {
|
||||
background: white;
|
||||
border-color: #673AB7;
|
||||
}
|
||||
|
||||
.t-s1 .o-tab-btn--eternity:hover {
|
||||
color: black;
|
||||
background: #639565;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.t-s6 .eternitytabbtn:hover {
|
||||
color: #511568;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.o-tab-btn--reality {
|
||||
background: white;
|
||||
border-color: #0b600e;
|
||||
color: #0b600e;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--reality,
|
||||
.t-s6 .o-tab-btn--reality {
|
||||
background: white;
|
||||
border-color: #0b600e;
|
||||
color: #0b600e;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--reality,
|
||||
.t-dark-metro .o-tab-btn--reality,
|
||||
.t-inverted-metro .o-tab-btn--reality,
|
||||
.t-s8 .o-tab-btn--reality {
|
||||
background: white;
|
||||
border-color: #0b600e;
|
||||
}
|
||||
|
||||
.o-tab-btn--reality:hover {
|
||||
background: #0b600e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--reality:hover,
|
||||
.t-s6 .o-tab-btn--reality:hover {
|
||||
background: #0b600e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--reality:hover,
|
||||
.t-dark-metro .o-tab-btn--reality:hover,
|
||||
.t-inverted-metro .o-tab-btn--reality:hover,
|
||||
.t-s8 .o-tab-btn--reality:hover {
|
||||
background: #0b600e;
|
||||
color: white;
|
||||
border-color: #0b600e;
|
||||
}
|
||||
|
||||
.o-tab-btn--celestial {
|
||||
background: #5151ec;
|
||||
border-color: #d0d0d0;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--celestial,
|
||||
.t-dark-metro .o-tab-btn--celestial,
|
||||
.t-inverted-metro .o-tab-btn--celestial,
|
||||
.t-s8 .o-tab-btn--celestial {
|
||||
background: #00bcd4;
|
||||
border-color: #00838f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.o-tab-btn--celestial:hover {
|
||||
background: #d0d0d0;
|
||||
color: #5151ec;
|
||||
}
|
||||
|
||||
.t-metro .o-tab-btn--celestial:hover,
|
||||
.t-dark-metro .o-tab-btn--celestial:hover,
|
||||
.t-inverted-metro .o-tab-btn--celestial:hover,
|
||||
.t-s8 .o-tab-btn--celestial:hover {
|
||||
background: white;
|
||||
color: #00bcd4;
|
||||
border-color: #00838f;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--celestial,
|
||||
.t-s6 .o-tab-btn--celestial {
|
||||
background: #5151ec;
|
||||
border-color: #d0d0d0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.t-dark .o-tab-btn--celestial:hover,
|
||||
.t-s6 .o-tab-btn--celestial:hover {
|
||||
background: #d0d0d0;
|
||||
color: #5151ec;
|
||||
}
|
||||
|
||||
.c-news-ticker {
|
||||
border: .2rem solid black;
|
||||
border-radius: .4rem;
|
||||
|
||||
@ -9,16 +9,12 @@ html {
|
||||
background: white;
|
||||
}
|
||||
|
||||
* {
|
||||
* { /* csslint allow: universal-selector */
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -71,88 +67,10 @@ body {
|
||||
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;
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -416,213 +334,6 @@ body {
|
||||
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%;
|
||||
@ -736,81 +447,13 @@ body {
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-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; }
|
||||
@ -822,45 +465,6 @@ body {
|
||||
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;
|
||||
}
|
||||
@ -1137,14 +741,6 @@ br {
|
||||
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;
|
||||
@ -1236,9 +832,9 @@ screen and (max-width: 480px) {
|
||||
}
|
||||
|
||||
@keyframes implode {
|
||||
0% {transform:scale(1); filter:blur(0px)}
|
||||
0% {transform:scale(1); filter:blur(0)}
|
||||
50% {transform:scale(0); filter:blur(5px)}
|
||||
100% {transform:scale(1); filter:blur(0px)}
|
||||
100% {transform:scale(1); filter:blur(0)}
|
||||
}
|
||||
|
||||
@keyframes realize {
|
||||
@ -1316,126 +912,6 @@ screen and (max-width: 480px) {
|
||||
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 {
|
||||
@ -1486,6 +962,7 @@ screen and (max-width: 480px) {
|
||||
.o-primary-btn--sacrifice {
|
||||
font-size: 1.2rem;
|
||||
width: 32rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
.o-primary-btn--buy-nd {
|
||||
@ -1600,6 +1077,7 @@ screen and (max-width: 480px) {
|
||||
font-size: 1.1rem;
|
||||
width: 16rem;
|
||||
height: 4rem;
|
||||
margin: 0 .3rem;
|
||||
}
|
||||
|
||||
.o-primary-btn--replicanti-unlock {
|
||||
@ -1778,10 +1256,11 @@ screen and (max-width: 480px) {
|
||||
|
||||
.t-s4 .o-primary-btn {
|
||||
background-color: #ff0000;
|
||||
cursor: url(cursor2.cur), auto;
|
||||
}
|
||||
|
||||
.t-s4 .o-primary-btn--disabled {
|
||||
cursor: url(cursor2.cur), auto;
|
||||
cursor: url(cursor.cur), auto;
|
||||
}
|
||||
|
||||
/*#endregion t-s4*/
|
||||
@ -2255,11 +1734,6 @@ screen and (max-width: 480px) {
|
||||
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 {
|
||||
@ -2279,14 +1753,6 @@ screen and (max-width: 480px) {
|
||||
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;
|
||||
}
|
||||
@ -2301,6 +1767,7 @@ screen and (max-width: 480px) {
|
||||
|
||||
.c-normal-dim-row__buy-button {
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.6rem;
|
||||
}
|
||||
|
||||
.c-normal-dim-row__buy-button--right-offset {
|
||||
@ -2449,14 +1916,6 @@ screen and (max-width: 480px) {
|
||||
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;
|
||||
}
|
||||
@ -2469,8 +1928,9 @@ screen and (max-width: 480px) {
|
||||
width: 41%;
|
||||
}
|
||||
|
||||
.c-infinity-dim-row__button {
|
||||
.l-infinity-dim-row__button {
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.6rem;
|
||||
}
|
||||
|
||||
/*#endregion c-infinity-dim-row*/
|
||||
@ -2538,14 +1998,6 @@ screen and (max-width: 480px) {
|
||||
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;
|
||||
}
|
||||
@ -2558,8 +2010,9 @@ screen and (max-width: 480px) {
|
||||
width: 43%;
|
||||
}
|
||||
|
||||
.c-time-dim-row__button {
|
||||
.l-time-dim-row__button {
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.6rem;
|
||||
}
|
||||
|
||||
/*#endregion c-time-dim-row*/
|
||||
@ -2943,7 +2396,7 @@ screen and (max-width: 480px) {
|
||||
.t-inverted-metro .c-achievement-grid__row--completed,
|
||||
.t-s8 .c-achievement-grid__row--completed {
|
||||
background-color: #1b5e20;
|
||||
border-radius: 0px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.t-s1 .c-achievement-grid__row--completed {
|
||||
@ -2971,18 +2424,19 @@ screen and (max-width: 480px) {
|
||||
.l-challenges-tab__header {
|
||||
margin: .5rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.l-challenges-tab__header > * {
|
||||
margin-left: .3rem;
|
||||
}
|
||||
|
||||
.l-challenges-tab__header > *:first-child {
|
||||
margin-left: 0;
|
||||
.o-challenges-tab__header-toggle {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 0 1rem 0 1rem;
|
||||
}
|
||||
|
||||
.l-challenges-tab__exit-btn {
|
||||
@ -2991,7 +2445,6 @@ screen and (max-width: 480px) {
|
||||
}
|
||||
|
||||
.l-challenges-tab__auto-ec-info {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -3369,9 +2822,6 @@ screen and (max-width: 480px) {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.c-infinity-tab__infinity-points {
|
||||
}
|
||||
|
||||
/*#region themes*/
|
||||
|
||||
/*#region t-dark t-s6*/
|
||||
@ -3764,10 +3214,6 @@ screen and (max-width: 480px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.l-autobuyer-toggles > * {
|
||||
margin: 0 .3rem;
|
||||
}
|
||||
|
||||
/*#endregion l-autobuyer-toggles*/
|
||||
|
||||
/*#region l-autobuyer-grid*/
|
||||
@ -3783,10 +3229,6 @@ screen and (max-width: 480px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.l-autobuyer-grid__row > * {
|
||||
margin: .5rem .8rem;
|
||||
}
|
||||
|
||||
/*#endregion l-autobuyer-grid*/
|
||||
|
||||
/*#region o-autobuyer-input*/
|
||||
@ -3975,6 +3417,7 @@ screen and (max-width: 480px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: .5rem .8rem;
|
||||
}
|
||||
|
||||
.l-autobuyer-box__header {
|
||||
@ -4059,7 +3502,7 @@ screen and (max-width: 480px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.l-replicanti-upgrade-row > * {
|
||||
.l-replicanti-upgrade-button {
|
||||
margin: .3rem;
|
||||
}
|
||||
|
||||
@ -4949,7 +4392,7 @@ screen and (max-width: 480px) {
|
||||
width: 47.5rem;
|
||||
}
|
||||
|
||||
.c-modal-import__save-info > * {
|
||||
.c-modal-import__save-info > div {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
@ -4973,7 +4416,7 @@ screen and (max-width: 480px) {
|
||||
width: 47.5rem;
|
||||
}
|
||||
|
||||
.c-modal-import-tree__tree-info > * {
|
||||
.l-modal-import-tree__tree-info-line {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
@ -6131,7 +5574,7 @@ kbd {
|
||||
justify-content: center;
|
||||
}
|
||||
.c-ra-rewards-inner {
|
||||
margin: 0rem 1rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.l-ra-laitela-unlock {
|
||||
@ -6657,9 +6100,9 @@ kbd {
|
||||
}
|
||||
|
||||
@keyframes darkEnergyGlow {
|
||||
0% { box-shadow: 0px 0px 0px rgb(53, 10, 53); }
|
||||
50% { box-shadow: 0px 0px 5px rgb(53, 10, 53); }
|
||||
100% { box-shadow: 0px 0px 0px rgb(53, 10, 53); }
|
||||
0% { box-shadow: 0 0 0 rgb(53, 10, 53); }
|
||||
50% { box-shadow: 0 0 5px rgb(53, 10, 53); }
|
||||
100% { box-shadow: 0 0 0 rgb(53, 10, 53); }
|
||||
}
|
||||
|
||||
.o-laitela-shop-button--dark-energy {
|
||||
@ -6715,7 +6158,7 @@ kbd {
|
||||
}
|
||||
|
||||
@keyframes o-laitela-run-button__icon--scroll {
|
||||
0% {background-position-y: 0rem}
|
||||
0% {background-position-y: 0}
|
||||
100% {background-position-y: 24rem}
|
||||
}
|
||||
|
||||
@ -6955,7 +6398,7 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes c-reality-glyph-inner-cycle {
|
||||
@keyframes c-reality-glyph-over-cycle {
|
||||
0% {
|
||||
box-shadow: #b67f33 0 0 1rem calc(0.3rem) inset;
|
||||
}
|
||||
@ -6976,6 +6419,60 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes c-reality-glyph-icon-cycle {
|
||||
0% {
|
||||
color: #b67f33;
|
||||
text-shadow: #b67f33 -0.04em 0.04em 0.08em;
|
||||
}
|
||||
20% {
|
||||
color: #64dd17;
|
||||
text-shadow: #64dd17 -0.04em 0.04em 0.08em;
|
||||
}
|
||||
40% {
|
||||
color: #22aa48;
|
||||
text-shadow: #22aa48 -0.04em 0.04em 0.08em;
|
||||
}
|
||||
60% {
|
||||
color: #03a9f4;
|
||||
text-shadow: #03a9f4 -0.04em 0.04em 0.08em;
|
||||
}
|
||||
80% {
|
||||
color: #b241e3;
|
||||
text-shadow: #b241e3 -0.04em 0.04em 0.08em;
|
||||
}
|
||||
100% {
|
||||
color: #b67f33;
|
||||
text-shadow: #b67f33 -0.04em 0.04em 0.08em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes c-reality-glyph-description-cycle {
|
||||
0% {
|
||||
color: #b67f33;
|
||||
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b67f33 0px 0px 3px
|
||||
}
|
||||
20% {
|
||||
color: #64dd17;
|
||||
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #64dd17 0px 0px 3px
|
||||
}
|
||||
40% {
|
||||
color: #22aa48;
|
||||
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #22aa48 0px 0px 3px
|
||||
}
|
||||
60% {
|
||||
color: #03a9f4;
|
||||
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #03a9f4 0px 0px 3px
|
||||
}
|
||||
80% {
|
||||
color: #b241e3;
|
||||
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b241e3 0px 0px 3px
|
||||
}
|
||||
100% {
|
||||
color: #b67f33;
|
||||
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b67f33 0px 0px 3px
|
||||
}
|
||||
}
|
||||
|
||||
.l-reality-button-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -6995,27 +6492,27 @@ kbd {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1.2rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.l-reality-upgrade-grid__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.l-reality-upgrade-grid__row > * {
|
||||
margin: 1.2rem;
|
||||
flex: 1 1 0;
|
||||
max-width: 120rem;
|
||||
}
|
||||
|
||||
.l-reality-upgrade-btn {
|
||||
height: 10rem;
|
||||
padding: 0;
|
||||
padding: 0 1rem 0 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 25rem;
|
||||
margin: 1.2rem;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.c-reality-upgrade-btn {
|
||||
@ -7129,11 +6626,6 @@ kbd {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.l-black-hole-upgrade-grid__row > * {
|
||||
margin: 1.2rem;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.c-black-hole-canvas {
|
||||
border: .1rem solid black;
|
||||
}
|
||||
@ -7223,6 +6715,7 @@ kbd {
|
||||
padding: .5rem;
|
||||
tab-size: 1.5em;
|
||||
-moz-tab-size: 1.5em;
|
||||
-o-tab-size: 1.5em;
|
||||
}
|
||||
|
||||
.o-automator-block-input {
|
||||
@ -7240,11 +6733,6 @@ input.o-automator-block-input {
|
||||
color: #0f0;
|
||||
}
|
||||
|
||||
.o-automator-linenumber {
|
||||
color: #55ff55;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.l-automator-nested-block {
|
||||
width: fit-content;
|
||||
padding: 1rem;
|
||||
|
||||
@ -3,93 +3,15 @@ body.t-dark-metro {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.t-dark-metro .radial-progress, .circle, .mask full, .fill, .fill fix, .inset{
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t-dark-metro .container {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.t-dark-metro .popup {
|
||||
background-color: #455A64;
|
||||
box-shadow: 0 0 10px 0 black;
|
||||
}
|
||||
|
||||
.t-dark-metro input {
|
||||
background-color: #455A64;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.t-dark-metro .secondarytabbtn {
|
||||
color: #E0E0E0;
|
||||
background: #455A64;
|
||||
border: 1px solid #1E88E5;
|
||||
box-shadow: 1px 1px 1px 0 black;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.t-dark-metro .secondarytabbtn:hover {
|
||||
background: #1E88E5;
|
||||
}
|
||||
|
||||
.t-dark-metro .storebtn {
|
||||
background: #455A64;
|
||||
border: 1px solid #43A047;
|
||||
box-shadow: 1px 1px 1px 0 black;
|
||||
}
|
||||
|
||||
.t-dark-metro .storebtn:hover {
|
||||
background: #43A047;
|
||||
}
|
||||
|
||||
.t-dark-metro .unavailablebtn {
|
||||
background: #37474F;
|
||||
border: 1px solid #E53935;
|
||||
box-shadow: 1px 1px 1px 0 black;
|
||||
}
|
||||
|
||||
.t-dark-metro .unavailablebtn:hover {
|
||||
background: #E53935;
|
||||
}
|
||||
|
||||
.t-dark-metro .infinitytabbtn {
|
||||
color: black;
|
||||
background: white;
|
||||
border: 1px solid #FF9800;
|
||||
box-shadow: 1px 1px 1px 0 black;
|
||||
}
|
||||
|
||||
.t-dark-metro .infinitytabbtn:hover {
|
||||
background: #FF9800;
|
||||
border-color: #FF9800;
|
||||
}
|
||||
|
||||
.t-dark-metro .eternitytabbtn {
|
||||
color: #673AB7;
|
||||
background: black;
|
||||
border: 1px solid #673AB7;
|
||||
box-shadow: 1px 1px 1px 0 black;
|
||||
}
|
||||
|
||||
.t-dark-metro .eternitytabbtn:hover {
|
||||
background: white;
|
||||
border-color: #673AB7;
|
||||
box-shadow: 1px 1px 1px 0 black;
|
||||
}
|
||||
|
||||
.t-dark-metro .celestialtabbtn {
|
||||
background-color: #00bcd4;
|
||||
border-color: #00838f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.t-dark-metro .celestialtabbtn:hover {
|
||||
background-color: white;
|
||||
color: #00bcd4;
|
||||
border-color: #00838f;
|
||||
}
|
||||
|
||||
.t-dark-metro .c-tt-buy-button--unlocked {
|
||||
background: #212121;
|
||||
color: #00BCD4;
|
||||
@ -111,18 +33,6 @@ body.t-dark-metro {
|
||||
background: #E53935;
|
||||
}
|
||||
|
||||
.t-dark-metro .realitytabbtn {
|
||||
background-color: white;
|
||||
border: 1px solid #0b600e;
|
||||
color: #0b600e;
|
||||
}
|
||||
|
||||
.t-dark-metro .realitytabbtn:hover {
|
||||
color: white;
|
||||
background-color: #0b600e;
|
||||
border-color: #0b600e;
|
||||
}
|
||||
|
||||
.t-dark-metro .c-rm-amount__desc {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
@ -3,23 +3,6 @@ body.t-dark {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.t-dark .popup {
|
||||
background-color: #455A64;
|
||||
box-shadow: 0 0 15px 0 black;
|
||||
}
|
||||
|
||||
.t-dark .storebtn {
|
||||
color: #E0E0E0;
|
||||
background-color: #455A64;
|
||||
border: 1px solid black;
|
||||
box-shadow: 0 0 7px 2px #111111;
|
||||
}
|
||||
|
||||
.t-dark .storebtn:hover {
|
||||
color: #FFF;
|
||||
background: #1B5E20;
|
||||
}
|
||||
|
||||
input.t-dark {
|
||||
background-color: #455A64;
|
||||
border: 1px solid black;
|
||||
@ -29,51 +12,11 @@ input.t-dark {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.t-dark .secondarytabbtn {
|
||||
color: #E0E0E0;
|
||||
border: 2px solid #1565C0;
|
||||
background-color: #455A64;
|
||||
}
|
||||
|
||||
.t-dark .secondarytabbtn:hover {
|
||||
background: #1565C0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.t-dark .infinitytabbtn {
|
||||
color: #000;
|
||||
background: #F5F5F5;
|
||||
border: 2px solid #FF9800;
|
||||
}
|
||||
|
||||
.t-dark .infinitytabbtn:hover {
|
||||
background: #FF9800;
|
||||
}
|
||||
|
||||
.t-dark .c-rm-amount {
|
||||
color: #0b600e;
|
||||
text-shadow: 0 0 7px #0b600e;
|
||||
}
|
||||
|
||||
.t-dark .unavailablebtn {
|
||||
background: #37474F;
|
||||
}
|
||||
|
||||
.t-dark .unavailablebtn:hover {
|
||||
background: #B84B5F;
|
||||
}
|
||||
|
||||
.t-dark .eternitytabbtn {
|
||||
color: #b341e0;
|
||||
background: black;
|
||||
border: 2px solid #b341e0;
|
||||
}
|
||||
|
||||
.t-dark .eternitytabbtn:hover {
|
||||
color: #511568;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.t-dark .c-tt-amount {
|
||||
color: #64DD17;
|
||||
text-shadow: 0 0 7px #64DD17;
|
||||
@ -100,26 +43,6 @@ input.t-dark {
|
||||
border: 1px solid #B84B5F;
|
||||
}
|
||||
|
||||
.t-dark .greedbtn {
|
||||
background-color: #f2d729;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.t-dark .greedbtn:hover {
|
||||
background-color: #9E913A;
|
||||
}
|
||||
|
||||
.t-dark .realitytabbtn {
|
||||
color: #0b600e;
|
||||
background-color: white;
|
||||
border: 2px solid #0b600e;
|
||||
}
|
||||
|
||||
.t-dark .realitytabbtn:hover {
|
||||
background-color: #0b600e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.t-dark .c-rm-amount__desc {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
@ -6,78 +6,10 @@ body.t-inverted-metro {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.t-inverted-metro .popup {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.t-inverted-metro #realityanimbg {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.radial-progress, .circle, .mask full, .fill, .fill fix, .inset{
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t-inverted-metro .popup {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.t-inverted-metro .secondarytabbtn {
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #2196F3;
|
||||
border-radius: 0;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-inverted-metro .secondarytabbtn:hover {
|
||||
background: #2196F3;
|
||||
border: 1px solid #2196F3;
|
||||
}
|
||||
|
||||
.t-inverted-metro .storebtn {
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #66BB6A;
|
||||
border-radius: 0;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-inverted-metro .storebtn:hover {
|
||||
background: #66BB6A;
|
||||
}
|
||||
|
||||
.t-inverted-metro .unavailablebtn {
|
||||
background: #9E9E9E;
|
||||
border: 1px solid #EF5350;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-inverted-metro .unavailablebtn:hover {
|
||||
background: #EF5350;
|
||||
}
|
||||
|
||||
.t-inverted-metro .infinitytabbtn {
|
||||
border: 1px solid #FF9800;
|
||||
background: #1F1F1F;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-inverted-metro .infinitytabbtn:hover {
|
||||
background: #FF9800;
|
||||
border: 1px solid #FF9800;
|
||||
}
|
||||
|
||||
.t-inverted-metro .eternitytabbtn {
|
||||
color: #673AB7;
|
||||
background: #000;
|
||||
border: 1px solid #673AB7;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-inverted-metro .eternitytabbtn:hover {
|
||||
background: #FFF;
|
||||
border: 1px solid #673AB7;
|
||||
}
|
||||
|
||||
.t-inverted-metro .c-rm-amount {
|
||||
color: #0b600e;
|
||||
}
|
||||
@ -96,20 +28,9 @@ body.t-inverted-metro {
|
||||
.t-inverted-metro .c-tt-buy-button--locked {
|
||||
background: #9E9E9E;
|
||||
border: none;
|
||||
box-shadow: 1px 1px 1px 0px #000;
|
||||
box-shadow: 1px 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
.t-inverted-metro .c-tt-buy-button--locked:hover {
|
||||
background: #EF5350;
|
||||
}
|
||||
|
||||
.t-inverted-metro .realitytabbtn {
|
||||
background: white;
|
||||
border: 1px solid #0b600e;
|
||||
}
|
||||
|
||||
.t-inverted-metro .realitytabbtn:hover {
|
||||
background-color: #0b600e;
|
||||
border: 1px solid #0b600e;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@ -6,10 +6,6 @@ body.t-inverted {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.t-inverted .popup {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.t-inverted #realityanimbg {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@ -1,60 +1,7 @@
|
||||
.radial-progress, .circle, .mask full, .fill, .fill fix, .inset{
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.t-metro input, .t-metro select {
|
||||
border: 1px solid #A9A9A9;
|
||||
}
|
||||
|
||||
.t-metro .popup {
|
||||
border: 1px solid black !important;
|
||||
}
|
||||
|
||||
.t-metro .secondarytabbtn {
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #2196F3;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.t-metro .secondarytabbtn:hover {
|
||||
background: #2196F3;
|
||||
border: 1px solid #2196F3;
|
||||
}
|
||||
|
||||
.t-metro .unavailablebtn {
|
||||
background: #9E9E9E;
|
||||
border: 1px solid #EF5350;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-metro .unavailablebtn:hover {
|
||||
background: #EF5350;
|
||||
}
|
||||
|
||||
.t-metro .infinitytabbtn {
|
||||
border: 1px solid #FF9800;
|
||||
background: #1F1F1F;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-metro .infinitytabbtn:hover {
|
||||
background: #FF9800;
|
||||
border: 1px solid #FF9800;
|
||||
}
|
||||
|
||||
.t-metro .eternitytabbtn {
|
||||
color: #673AB7;
|
||||
background: #000;
|
||||
border: 1px solid #673AB7;
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
}
|
||||
|
||||
.t-metro .eternitytabbtn:hover {
|
||||
background: #FFF;
|
||||
border: 1px solid #673AB7;
|
||||
}
|
||||
|
||||
.t-metro .c-rm-amount {
|
||||
color: #0b600e;
|
||||
}
|
||||
@ -73,26 +20,15 @@
|
||||
.t-metro .c-tt-buy-button--locked {
|
||||
background: #9E9E9E;
|
||||
border: none;
|
||||
box-shadow: 1px 1px 1px 0px #000;
|
||||
box-shadow: 1px 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
.t-metro .c-tt-buy-button--locked:hover {
|
||||
background: #EF5350;
|
||||
}
|
||||
|
||||
.t-metro .realitytabbtn {
|
||||
background: white !important;
|
||||
border: 1px solid #0b600e !important;
|
||||
}
|
||||
|
||||
.t-metro .realitytabbtn:hover {
|
||||
background-color: #0b600e !important;
|
||||
border: 1px solid #0b600e !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes metroStudyGlowIn {
|
||||
0% {box-shadow: inset 0px 0px 3px 0px #673AB7;}
|
||||
50% {box-shadow: inset 0px 0px 20px 0px #673AB7;}
|
||||
100% {box-shadow: inset 0px 0px 3px 0px #673AB7;}
|
||||
0% {box-shadow: inset 0 0 3px 0 #673AB7;}
|
||||
50% {box-shadow: inset 0 0 20px 0 #673AB7;}
|
||||
100% {box-shadow: inset 0 0 3px 0 #673AB7;}
|
||||
}
|
||||
|
||||
@ -13,68 +13,10 @@ body {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.popup {
|
||||
background-color: #dbd242 !important;
|
||||
}
|
||||
|
||||
.tabbtn {
|
||||
color: black !important;
|
||||
background: #dbd242 !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
||||
.secondarytabbtn {
|
||||
color: black !important;
|
||||
background: #dbd242 !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
||||
.tabbtn:hover {
|
||||
color: #dbd242 !important;
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
.secondarytabbtn:hover {
|
||||
color: #dbd242 !important;
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
.storebtn {
|
||||
background: #dbd242 !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
||||
.storebtn:hover {
|
||||
background-color: #4baf4e !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
||||
.unavailablebtn {
|
||||
background: #9a921d !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
||||
.unavailablebtn:hover {
|
||||
background: #d72621 !important;
|
||||
border: 1px solid black !important;
|
||||
}
|
||||
|
||||
#container.container {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.eternitytabbtn {
|
||||
color: #639565 !important;
|
||||
background: black !important;
|
||||
border-color: #639565 !important;
|
||||
}
|
||||
|
||||
.eternitytabbtn:hover {
|
||||
color: black !important;
|
||||
background: #639565 !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #9a921d !important;
|
||||
border: 1px solid black !important;
|
||||
@ -100,17 +42,6 @@ input {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.greedbtn {
|
||||
color: black !important;
|
||||
background: #dbd242 !important;
|
||||
border-color: black !important;
|
||||
}
|
||||
|
||||
.greedbtn:hover {
|
||||
color: #dbd242 !important;
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
#snow {
|
||||
display: block !important;
|
||||
background-image: url('../images/snow1.png'), url('../images/snow2.png'), url('../images/snow3.png');
|
||||
@ -126,7 +57,7 @@ input {
|
||||
}
|
||||
|
||||
@keyframes snow {
|
||||
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
|
||||
0% {background-position: 0 0, 0 0, 0 0;}
|
||||
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
|
||||
100% {background-position: 1000px 1000px, 200px 400px, -200px 300px;}
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@ body {
|
||||
}
|
||||
|
||||
@keyframes glasses {
|
||||
0% {filter: blur(0px);}
|
||||
0% {filter: blur(0);}
|
||||
10% {filter: blur(3px);}
|
||||
20% {filter: blur(0px);}
|
||||
20% {filter: blur(0);}
|
||||
30% {transform: rotateZ(0deg)}
|
||||
35% {transform: rotateZ(4deg)}
|
||||
40% {transform: rotateZ(-4deg)}
|
||||
|
||||
@ -25,24 +25,10 @@ body {
|
||||
border: 1px solid white !important;
|
||||
}
|
||||
|
||||
.unavailablebtn {
|
||||
background-color: #ff0000 !important;
|
||||
}
|
||||
|
||||
.storebtn {
|
||||
background-color: #ff00e0 !important;
|
||||
cursor: url(cursor2.cur), auto !important;
|
||||
}
|
||||
|
||||
.tabbtn, .secondarytabbtn {
|
||||
background-color: #1b00ff !important;
|
||||
cursor: url(cursor2.cur), auto !important;
|
||||
}
|
||||
|
||||
.o-achievement {
|
||||
border-radius: .8rem !important;
|
||||
}
|
||||
|
||||
* {
|
||||
box-shadow: 1px 1px 1px 0px #9E9E9E;
|
||||
box-shadow: 1px 1px 1px 0 #9E9E9E;
|
||||
}
|
||||
@ -15,5 +15,5 @@ body {
|
||||
|
||||
.container {
|
||||
color: black !important;
|
||||
text-shadow: 0.5px 0.5px 0px black;
|
||||
text-shadow: 0.5px 0.5px 0 black;
|
||||
}
|
||||
@ -24,28 +24,6 @@ body.t-s6 {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.t-s6 .popup {
|
||||
color: #E0E0E0;
|
||||
background-color: black!important;
|
||||
border: 1px solid #1B5E20;
|
||||
box-shadow: 0 0 15px 0 black;
|
||||
}
|
||||
|
||||
/*
|
||||
strong {
|
||||
color: #E0E0E0;
|
||||
}
|
||||
*/
|
||||
.t-s6 .storebtn {
|
||||
color: #FFF;
|
||||
background-color: black;
|
||||
box-shadow: 0 0 7px 2px #111111;
|
||||
}
|
||||
|
||||
.t-s6 .storebtn:hover {
|
||||
background: #1B5E20;
|
||||
}
|
||||
|
||||
.t-s6 input {
|
||||
color: white;
|
||||
background-color: black;
|
||||
@ -56,43 +34,6 @@ strong {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.t-s6 .secondarytabbtn {
|
||||
color: #E0E0E0;
|
||||
background: black;
|
||||
border: 2px solid #1565C0;
|
||||
text-shadow: 0 0 10px white;
|
||||
}
|
||||
|
||||
.t-s6 .secondarytabbtn:hover {
|
||||
background: #1565C0;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.t-s6 .unavailablebtn {
|
||||
color: grey;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.t-s6 .unavailablebtn:hover {
|
||||
color: black;
|
||||
background: #B84B5F;
|
||||
}
|
||||
|
||||
.t-s6 .storebtn:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.t-s6 .eternitytabbtn {
|
||||
color: #b341e0;
|
||||
background: black;
|
||||
border: 2px solid #b341e0;
|
||||
}
|
||||
|
||||
.t-s6 .eternitytabbtn:hover {
|
||||
color: #511568;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.t-s6 .c-tt-amount {
|
||||
color: #64DD17;
|
||||
text-shadow: 0 0 7px #64DD17;
|
||||
@ -125,15 +66,6 @@ strong {
|
||||
border: 1px solid #B84B5F;
|
||||
}
|
||||
|
||||
.t-s6 .greedbtn {
|
||||
background-color: #f2d729;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.t-s6 .greedbtn:hover {
|
||||
background-color: #9E913A;
|
||||
}
|
||||
|
||||
.t-s6 .realitytabbtn {
|
||||
color: #0b600e;
|
||||
background-color: white;
|
||||
|
||||
@ -2,27 +2,19 @@
|
||||
font-family: "Arial";
|
||||
transition-duration: 0s !important;
|
||||
border-width: 1px !important;
|
||||
border-radius: 0px !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
#container {
|
||||
filter: saturate(0) !important;
|
||||
}
|
||||
|
||||
.popup {
|
||||
filter: saturate(0) !important;
|
||||
}
|
||||
|
||||
#notification-container {
|
||||
#ui {
|
||||
filter: saturate(0) !important;
|
||||
}
|
||||
|
||||
button {
|
||||
-webkit-border-radius: 0px !important;
|
||||
-moz-border-radius: 0px !important;
|
||||
border-radius: 0px !important;
|
||||
-webkit-border-radius: 0 !important;
|
||||
-moz-border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgb(222, 222, 222)), color-stop(1.00, rgb(246, 246, 246))) !important;
|
||||
background-image: -moz-linear-gradient(center bottom, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
||||
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
||||
@ -33,9 +25,9 @@ button {
|
||||
}
|
||||
|
||||
.o-primary-btn {
|
||||
-webkit-border-radius: 0px !important;
|
||||
-moz-border-radius: 0px !important;
|
||||
border-radius: 0px !important;
|
||||
-webkit-border-radius: 0 !important;
|
||||
-moz-border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgb(222, 222, 222)), color-stop(1.00, rgb(246, 246, 246))) !important;
|
||||
background-image: -moz-linear-gradient(center bottom, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
||||
background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
|
||||
|
||||
@ -16,79 +16,16 @@ body.t-s8 {
|
||||
}
|
||||
|
||||
.t-s8 .c-rm-amount {
|
||||
color: black;
|
||||
color: #0b600e;
|
||||
}
|
||||
|
||||
.t-s8 .glyphDescriptions {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
/*metro theme with less box shadows*/
|
||||
|
||||
.radial-progress, .circle, .mask full, .fill, .fill fix, .inset{
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t-s8 input, .t-s8 select {
|
||||
border: 1px solid #A9A9A9;
|
||||
}
|
||||
|
||||
.t-s8 .popup {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.t-s8 .secondarytabbtn {
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #2196F3;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.t-s8 .secondarytabbtn:hover {
|
||||
background: #2196F3;
|
||||
border: 1px solid #2196F3;
|
||||
}
|
||||
|
||||
.t-s8 .storebtn {
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #66BB6A;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.t-s8 .storebtn:hover {
|
||||
background: #66BB6A;
|
||||
}
|
||||
|
||||
.t-s8 .unavailablebtn {
|
||||
background: #9E9E9E;
|
||||
border: 1px solid #EF5350;
|
||||
}
|
||||
|
||||
.t-s8 .unavailablebtn:hover {
|
||||
background: #EF5350;
|
||||
}
|
||||
|
||||
.t-s8 .infinitytabbtn {
|
||||
border: 1px solid #FF9800;
|
||||
background: #1F1F1F;
|
||||
}
|
||||
|
||||
.t-s8 .infinitytabbtn:hover {
|
||||
background: #FF9800;
|
||||
border: 1px solid #FF9800;
|
||||
}
|
||||
|
||||
.t-s8 .eternitytabbtn {
|
||||
color: #673AB7;
|
||||
background: #000;
|
||||
border: 1px solid #673AB7;
|
||||
}
|
||||
|
||||
.t-s8 .eternitytabbtn:hover {
|
||||
background: #FFF;
|
||||
border: 1px solid #673AB7;
|
||||
}
|
||||
|
||||
.t-s8 .c-tt-buy-button--unlocked {
|
||||
background: #212121;
|
||||
color: #00BCD4;
|
||||
@ -103,20 +40,9 @@ body.t-s8 {
|
||||
.t-s8 .c-tt-buy-button--locked {
|
||||
background: #9E9E9E;
|
||||
border: none;
|
||||
box-shadow: 1px 1px 1px 0px #000;
|
||||
box-shadow: 1px 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
.t-s8 .c-tt-buy-button--locked:hover {
|
||||
background: #EF5350;
|
||||
}
|
||||
|
||||
.t-s8 .realitytabbtn {
|
||||
background: white;
|
||||
border: 1px solid #0b600e;
|
||||
}
|
||||
|
||||
.t-s8 .realitytabbtn:hover {
|
||||
background-color: #0b600e;
|
||||
border: 1px solid #0b600e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -79,12 +79,12 @@
|
||||
<div class="c-component-block">
|
||||
<button class="o-primary-btn">Normal button</button>
|
||||
<button class="o-primary-btn o-primary-btn--disabled">Disabled button</button>
|
||||
<button class="tabbtn">Primary tab</button>
|
||||
<button class="o-btn o-btn--secondary-tab">Secondary tab</button>
|
||||
<button class="tabbtn infinitytabbtn">Infinity tab</button>
|
||||
<button class="tabbtn eternitytabbtn">Eternity tab</button>
|
||||
<button class="tabbtn realitytabbtn" style="display: flex;">Reality tab</button>
|
||||
<button class="tabbtn celestialtabbtn" style="display: flex;">Celestial tab</button>
|
||||
<button class="o-tab-btn">Primary tab</button>
|
||||
<button class="o-tab-btn o-tab-btn--secondary">Secondary tab</button>
|
||||
<button class="o-tab-btn o-tab-btn--infinity">Infinity tab</button>
|
||||
<button class="o-tab-btn o-tab-btn--eternity">Eternity tab</button>
|
||||
<button class="o-tab-btn o-tab-btn--reality" style="display: flex;">Reality tab</button>
|
||||
<button class="o-tab-btn o-tab-btn--celestial" style="display: flex;">Celestial tab</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user