Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-11-10 06:02:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

add stylelint, configure, and apply changes

Browse Source
This commit is contained in:
WaitingIdly 2022-05-09 09:51:04 -07:00
parent 0d8a169d9d
commit 95e5c2f886
64 changed files with 3150 additions and 2498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.stylelintignore Normal file
View File

@ -0,0 +1,3 @@
public/stylesheets/fontawesome/**/*.css
public/stylesheets/codemirror/*.css
public/stylesheets/vis-network.css

57
.stylelintrc.json Normal file
View File

@ -0,0 +1,57 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recommended-vue"
],
"rules": {
"no-descending-specificity": null,
"font-family-no-missing-generic-family-keyword": null,
"no-empty-source": null,
"color-hex-length": "long",
"custom-property-empty-line-before": null,
"color-function-notation": null,
"property-no-vendor-prefix": [
true,
{
"ignoreProperties": ["appearance", "background-clip-text", "backdrop-filter", "clip-path", "user-select"]
}
],
"unit-allowed-list": [
"rem",
"%",
"px",
"deg",
"s",
"ms",
"fr"
],
"custom-property-pattern": [
"^([_a-z][a-z0-9]*)([-_]{1,2}[a-z0-9]+)*$",
{
"message": "Expected custom property name to be kebab-case"
}
],
"selector-class-pattern": [
"^(CodeMirror.*|([_a-z][a-z0-9]*)([-_]{1,2}[a-z0-9]+)*)$",
{
"message": "Expected class selector name to be kebab-case"
}
],
"keyframes-name-pattern": [
"^([_a-z][a-z0-9]*)([-_]{1,2}[a-z0-9]+)*$",
{
"message": "Expected keyframe name to be kebab-case"
}
],
"selector-id-pattern": [
"^([_a-z][a-z0-9]*)([-_]{1,2}[a-z0-9]+)*$",
{
"message": "Expected id selector name to be kebab-case"
}
]
}
}

2741
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -41,6 +41,10 @@
"eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.26.0", "eslint-plugin-import": "^2.26.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"postcss-html": "^1.4.1",
"stylelint": "^14.8.2",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^25.0.0",
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"webpack": "^5.64.0" "webpack": "^5.64.0"
} }

65
public/stylesheets/ad-slider-component.css
View File

@ -46,23 +46,21 @@ SOFTWARE.
.l-ad-slider__wrap { .l-ad-slider__wrap {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; user-select: none;
-ms-user-select: none;
-o-user-select: none;
} }
.l-ad-slider--disabled .l-ad-slider__wrap { .l-ad-slider--disabled .l-ad-slider__wrap {
opacity: .5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.l-ad-slider--has-label .l-ad-slider__bg{ .l-ad-slider--has-label .l-ad-slider__bg {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.l-ad-slider--has-label.l-ad-slider--horizontal .l-ad-slider__bg, .l-ad-slider--has-label.l-ad-slider--horizontal-reverse .l-ad-slider__bg { .l-ad-slider--has-label.l-ad-slider--horizontal .l-ad-slider__bg,
.l-ad-slider--has-label.l-ad-slider--horizontal-reverse .l-ad-slider__bg {
top: 0.75rem; top: 0.75rem;
} }
@ -77,11 +75,11 @@ SOFTWARE.
.c-ad-slider__bg { .c-ad-slider__bg {
border-radius: var(--var-border-radius, 1.5rem); border-radius: var(--var-border-radius, 1.5rem);
background-color: #ccc; background-color: #cccccc;
} }
.l-ad-slider__bg::after { .l-ad-slider__bg::after {
content: ''; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -156,19 +154,19 @@ SOFTWARE.
.c-ad-slider__dot-handle { .c-ad-slider__dot-handle {
border-radius: var(--var-border-radius, 50%) !important; border-radius: var(--var-border-radius, 50%) !important;
background-color: #fff; background-color: #ffffff;
box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32); box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 32%);
} }
.l-ad-slider__dot--focus .c-ad-slider__dot-handle { .l-ad-slider__dot--focus .c-ad-slider__dot-handle {
box-shadow: 0 0 2px 1px #3498db; box-shadow: 0 0 2px 1px #3498db;
} }
.l-ad-slider__dot---dragging { .l-ad-slider__dot--dragging {
z-index: 5; z-index: 5;
} }
.l-ad-slider__dot---disabled { .l-ad-slider__dot--disabled {
z-index: 4; z-index: 4;
} }
@ -219,7 +217,7 @@ SOFTWARE.
padding: 2px 5px; padding: 2px 5px;
min-width: 20px; min-width: 20px;
text-align: center; text-align: center;
color: #fff; color: #ffffff;
border-radius: var(--var-border-radius, 5px); border-radius: var(--var-border-radius, 5px);
border: 0.1rem solid #3498db; border: 0.1rem solid #3498db;
background-color: #3498db; background-color: #3498db;
@ -249,8 +247,9 @@ SOFTWARE.
transform: translate(100%, -50%); transform: translate(100%, -50%);
} }
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-top .ad-slider-tooltip::before, .l-ad-slider__wrap .ad-slider-tooltip-top .vue-merged-tooltip .ad-slider-tooltip::before { .l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-top .ad-slider-tooltip::before,
content: ''; .l-ad-slider__wrap .ad-slider-tooltip-top .vue-merged-tooltip .ad-slider-tooltip::before {
content: "";
position: absolute; position: absolute;
bottom: -10px; bottom: -10px;
left: 50%; left: 50%;
@ -267,8 +266,9 @@ SOFTWARE.
visibility: hidden; visibility: hidden;
} }
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-bottom .ad-slider-tooltip::before, .l-ad-slider__wrap .ad-slider-tooltip-bottom .vue-merged-tooltip .ad-slider-tooltip::before { .l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-bottom .ad-slider-tooltip::before,
content: ''; .l-ad-slider__wrap .ad-slider-tooltip-bottom .vue-merged-tooltip .ad-slider-tooltip::before {
content: "";
position: absolute; position: absolute;
top: -10px; top: -10px;
left: 50%; left: 50%;
@ -280,8 +280,9 @@ SOFTWARE.
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-left .ad-slider-tooltip::before, .l-ad-slider__wrap .ad-slider-tooltip-left .vue-merged-tooltip .ad-slider-tooltip::before { .l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-left .ad-slider-tooltip::before,
content: ''; .l-ad-slider__wrap .ad-slider-tooltip-left .vue-merged-tooltip .ad-slider-tooltip::before {
content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -10px; right: -10px;
@ -293,8 +294,9 @@ SOFTWARE.
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-right .ad-slider-tooltip::before, .l-ad-slider__wrap .ad-slider-tooltip-right .vue-merged-tooltip .ad-slider-tooltip::before { .l-ad-slider__wrap .ad-slider-tooltip-wrap.ad-slider-tooltip-right .ad-slider-tooltip::before,
content: ''; .l-ad-slider__wrap .ad-slider-tooltip-right .vue-merged-tooltip .ad-slider-tooltip::before {
content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -10px; left: -10px;
@ -311,7 +313,7 @@ SOFTWARE.
} }
.l-ad-slider__wrap .l-ad-slider__dot.ad-slider-always .ad-slider-tooltip-wrap { .l-ad-slider__wrap .l-ad-slider__dot.ad-slider-always .ad-slider-tooltip-wrap {
display: block!important; display: block !important;
} }
.l-ad-slider__wrap .ad-slider-piecewise { .l-ad-slider__wrap .ad-slider-piecewise {
@ -338,37 +340,40 @@ SOFTWARE.
width: 100%; width: 100%;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
background-color: rgba(0, 0, 0, 0.16); background-color: rgba(0, 0, 0, 16%);
border-radius: var(--var-border-radius, 50%); border-radius: var(--var-border-radius, 50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 2; z-index: 2;
transition: all .3s; transition: all 0.3s;
} }
.l-ad-slider__wrap .ad-slider-piecewise-item:first-child .ad-slider-piecewise-dot, .l-ad-slider__wrap .ad-slider-piecewise-item:last-child .ad-slider-piecewise-dot { .l-ad-slider__wrap .ad-slider-piecewise-item:first-child .ad-slider-piecewise-dot,
.l-ad-slider__wrap .ad-slider-piecewise-item:last-child .ad-slider-piecewise-dot {
visibility: hidden; visibility: hidden;
} }
.l-ad-slider--horizontal .ad-slider-piecewise-label, .l-ad-slider--horizontal-reverse .ad-slider-piecewise-label { .l-ad-slider--horizontal .ad-slider-piecewise-label,
.l-ad-slider--horizontal-reverse .ad-slider-piecewise-label {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top: 100%; top: 100%;
left: 50%; left: 50%;
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: 12px;
color: #333; color: #333333;
transform: translate(-50%, 8px); transform: translate(-50%, 8px);
visibility: visible; visibility: visible;
} }
.l-ad-slider--vertical .ad-slider-piecewise-label, .l-ad-slider--vertical-reverse .ad-slider-piecewise-label { .l-ad-slider--vertical .ad-slider-piecewise-label,
.l-ad-slider--vertical-reverse .ad-slider-piecewise-label {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top: 50%; top: 50%;
left: 100%; left: 100%;
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: 12px;
color: #333; color: #333333;
transform: translate(8px, -50%); transform: translate(8px, -50%);
visibility: visible; visibility: visible;
} }

15
public/stylesheets/automator.css
View File

@ -29,6 +29,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-top: 1rem; margin-top: 1rem;
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -144,6 +145,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
/* for corner buttons */ /* for corner buttons */
position: relative; position: relative;
} }
@ -152,13 +154,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.3rem 0.8rem 0.3rem 0.8rem; padding: 0.3rem 0.8rem;
} }
.l-automator__button--corner { .l-automator__button--corner {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0 top: 0;
} }
.l-automator__script-names { .l-automator__script-names {
@ -172,7 +174,7 @@
.l-automator__scripts-dropdown { .l-automator__scripts-dropdown {
width: 90%; width: 90%;
height: 90%; height: 90%;
padding: 0.2rem 0 0.3rem 0; padding: 0.2rem 0 0.3rem;
border-width: 0.1rem; border-width: 0.1rem;
border-radius: 0; border-radius: 0;
margin: 0.4rem; margin: 0.4rem;
@ -253,6 +255,7 @@
font-size: 1.4rem; font-size: 1.4rem;
font-family: Typewriter, serif; font-family: Typewriter, serif;
line-height: 1.6rem; line-height: 1.6rem;
/* required for expanding into pane */ /* required for expanding into pane */
flex: 1 1 auto; flex: 1 1 auto;
} }
@ -297,11 +300,11 @@
position: relative; position: relative;
} }
.o-automator-error-underline:before { .o-automator-error-underline::before {
content: "~~~~~~~~~~~~"; content: "~~~~~~~~~~~~";
font-size: 0.6em; font-size: 0.6rem;
font-weight: 700; font-weight: 700;
font-family: Times New Roman, Serif; font-family: "Times New Roman", serif;
color: red; color: red;
width: 100%; width: 100%;
position: absolute; position: absolute;

253
public/stylesheets/glyphs.css
View File

@ -135,7 +135,7 @@
top: 100%; top: 100%;
} }
.c-glyph-sacrifice-options__option__tooltip:after { .c-glyph-sacrifice-options__option__tooltip::after {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
@ -161,12 +161,12 @@
top: calc(100% + 0.8rem); top: calc(100% + 0.8rem);
} }
.c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip:after { .c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip::after {
border-bottom-width: 0.7rem; border-bottom-width: 0.7rem;
margin-top: -0.9rem; margin-top: -0.9rem;
} }
.s-base--metro .c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip:after { .s-base--metro .c-glyph-sacrifice-options__option:hover .c-glyph-sacrifice-options__option__tooltip::after {
margin-top: -0.8rem; margin-top: -0.8rem;
} }
@ -204,8 +204,7 @@
.l-glyph-inventory-management { .l-glyph-inventory-management {
display: flex; display: flex;
flex-direction: row; flex-flow: row wrap;
flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
@ -215,56 +214,52 @@
} }
.c-auto-sac-type-tab__input { .c-auto-sac-type-tab__input {
width: 2.5em; width: 2.5rem;
height: 1.5em; height: 1.5rem;
font-size: 1.2rem; font-size: 1.2rem;
background-color: #333; background-color: #333333;
color: var(--color-reality-light); color: var(--color-reality-light);
border-radius: var(--var-border-radius, 0.2rem); border-radius: var(--var-border-radius, 0.2rem);
border: solid 0.1rem; border: solid 0.1rem;
text-align: center; text-align: center;
-webkit-appearance: none; appearance: textfield;
-moz-appearance: textfield;
} }
.c-auto-sac-effect-tab__input::-webkit-inner-spin-button, .c-auto-sac-effect-tab__input::-webkit-inner-spin-button,
.c-auto-sac-effect-tab__input::-webkit-outer-spin-button { .c-auto-sac-effect-tab__input::-webkit-outer-spin-button {
-webkit-appearance: none; appearance: textfield;
-moz-appearance: textfield;
margin: 0; margin: 0;
} }
.c-auto-sac-effect-tab__input { .c-auto-sac-effect-tab__input {
width: 1.5em; width: 1.5rem;
height: 1.5em; height: 1.5rem;
font-size: 1.2rem; font-size: 1.2rem;
text-align: center; text-align: center;
background-color: #333; background-color: #333333;
color: var(--color-reality-light); color: var(--color-reality-light);
border-radius: var(--var-border-radius, 0.2rem); border-radius: var(--var-border-radius, 0.2rem);
border: solid 0.1rem; border: solid 0.1rem;
-webkit-appearance: none; appearance: textfield;
-moz-appearance: textfield;
margin: 0; margin: 0;
} }
.c-auto-sac-effect-tab__checkbox { .c-auto-sac-effect-tab__checkbox {
width: 1.5em; width: 1.5rem;
height: 1.5em; height: 1.5rem;
border-radius: var(--var-border-radius, 0.2rem); border-radius: var(--var-border-radius, 0.2rem);
border: solid 0.1rem; border: solid 0.1rem;
} }
.c-auto-sac-type-tab__input:focus { .c-auto-sac-type-tab__input:focus {
font-weight: bold; font-weight: bold;
background-color: #555; background-color: #555555;
box-shadow: 0 0 0.4rem 0.1rem var(--color-reality-light); box-shadow: 0 0 0.4rem 0.1rem var(--color-reality-light);
} }
.c-auto-sac-type-tab__input::-webkit-outer-spin-button, .c-auto-sac-type-tab__input::-webkit-outer-spin-button,
.c-auto-sac-type-tab__input::-webkit-inner-spin-button { .c-auto-sac-type-tab__input::-webkit-inner-spin-button {
-webkit-appearance: none; appearance: textfield;
-moz-appearance: textfield;
margin: 0; margin: 0;
} }
@ -278,7 +273,7 @@
border-radius: var(--var-border-radius, 0.2rem); border-radius: var(--var-border-radius, 0.2rem);
border: solid 0.1rem; border: solid 0.1rem;
font-size: 1.2rem; font-size: 1.2rem;
font-family: Typewriter, serif font-family: Typewriter, serif;
} }
.l-advanced-sac-options-for-glyph-type { .l-advanced-sac-options-for-glyph-type {
@ -301,10 +296,10 @@
} }
.c-auto-sac-type-tab__effect-desc { .c-auto-sac-type-tab__effect-desc {
border-radius: var(--var-border-radius, 0.5em); border-radius: var(--var-border-radius, 0.5rem);
border: 0.1rem solid; border: 0.1rem solid;
padding: 0.25em 1.5em; padding: 0.25rem 1.5rem;
min-height: 3em; min-height: 3rem;
position: relative; position: relative;
} }
@ -341,9 +336,9 @@
} }
.l-glyph-sacrifice-options__advanced-type-select { .l-glyph-sacrifice-options__advanced-type-select {
font-size: 2em; font-size: 2rem;
width: 3em; width: 3rem;
height: 3em; height: 3rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -352,7 +347,7 @@
} }
.c-glyph-sacrifice-options__advanced-type-select { .c-glyph-sacrifice-options__advanced-type-select {
color: #888; color: #888888;
font-size: 2rem; font-size: 2rem;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
@ -364,8 +359,8 @@
} }
.c-glyph-sacrifice-options__advanced-type-select:hover { .c-glyph-sacrifice-options__advanced-type-select:hover {
background: #131; background: #113311;
box-shadow: 0 0 0.8rem 0.4rem #131; box-shadow: 0 0 0.8rem 0.4rem #113311;
} }
.c-glyph-auto-pick-options { .c-glyph-auto-pick-options {
@ -385,6 +380,7 @@
font-weight: bold; font-weight: bold;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
-webkit-user-select: none;
user-select: none; user-select: none;
width: 12rem; width: 12rem;
height: 5rem; height: 5rem;
@ -415,7 +411,7 @@
.c-glyph-tooltip__effect { .c-glyph-tooltip__effect {
font-weight: normal; font-weight: normal;
text-shadow: none; text-shadow: none;
margin-bottom: 1em; margin-bottom: 1rem;
} }
.l-glyph-tooltip { .l-glyph-tooltip {
@ -445,7 +441,7 @@
.c-glyph-tooltip { .c-glyph-tooltip {
background-color: black; background-color: black;
color: #fff; color: #ffffff;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
@ -492,7 +488,7 @@
color: #d4d4ff; color: #d4d4ff;
border: 0.1rem solid #d4d4ff; border: 0.1rem solid #d4d4ff;
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
padding: 0.25em 1em; padding: 0.25rem 1rem;
} }
.l-modal-glyph-selection__row { .l-modal-glyph-selection__row {
@ -505,7 +501,7 @@
} }
.l-modal-glyph-selection__glyph--selected { .l-modal-glyph-selection__glyph--selected {
box-shadow: #B4B420 0 0 1rem 0.5rem !important; box-shadow: #b4b420 0 0 1rem 0.5rem !important;
} }
.l-equipped-glyphs { .l-equipped-glyphs {
@ -521,7 +517,7 @@
width: 18rem; width: 18rem;
height: 18rem; height: 18rem;
position: relative; position: relative;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0%);
} }
.l-equipped-glyphs__dropzone { .l-equipped-glyphs__dropzone {
@ -532,7 +528,7 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0%);
} }
.l-equipped-glyphs__empty { .l-equipped-glyphs__empty {
@ -546,11 +542,11 @@
} }
.t-dark-metro .c-equipped-glyphs__empty { .t-dark-metro .c-equipped-glyphs__empty {
background-color: #333; background-color: #333333;
} }
.t-dark .c-equipped-glyphs__empty { .t-dark .c-equipped-glyphs__empty {
background-color: #333; background-color: #333333;
} }
.t-s6 .c-equipped-glyphs__empty, .t-s6 .c-equipped-glyphs__empty,
@ -559,7 +555,7 @@
} }
.c-equipped-glyphs__empty--dragover { .c-equipped-glyphs__empty--dragover {
box-shadow: 0 0 0.5rem 0.25rem #444; box-shadow: 0 0 0.5rem 0.25rem #444444;
} }
.l-equipped-glyphs__buttons { .l-equipped-glyphs__buttons {
@ -609,7 +605,7 @@
.c-glyph-sets-save-name__input { .c-glyph-sets-save-name__input {
width: 16rem; width: 16rem;
height: 1.5em; height: 1.5rem;
font-size: 1.35rem; font-size: 1.35rem;
background-color: black; background-color: black;
color: var(--color-reality-light); color: var(--color-reality-light);
@ -618,8 +614,7 @@
border-bottom: 0.1rem solid; border-bottom: 0.1rem solid;
text-align: center; text-align: center;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
-webkit-appearance: none; appearance: textfield;
-moz-appearance: textfield;
} }
.c-glyph-set-save-setting-button { .c-glyph-set-save-setting-button {
@ -693,7 +688,7 @@
} }
.l-current-glyph-effects__capped-header { .l-current-glyph-effects__capped-header {
margin-bottom: 1em; margin-bottom: 1rem;
} }
.l-current-glyph-effects { .l-current-glyph-effects {
@ -726,7 +721,7 @@
overflow: auto; overflow: auto;
color: var(--color-reality-light); color: var(--color-reality-light);
background: black; background: black;
border:var(--var-border-width, 0.2rem) solid var(--color-reality); border: var(--var-border-width, 0.2rem) solid var(--color-reality);
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
@ -848,8 +843,7 @@
.c-glyph-choice-container { .c-glyph-choice-container {
display: flex; display: flex;
flex-direction: row; flex-flow: row wrap;
flex-wrap: wrap;
width: 74rem; width: 74rem;
} }
@ -869,22 +863,22 @@
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 10%);
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 0.15); border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 15%);
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
font-size: 1.2rem; font-size: 1.2rem;
height: 10rem; height: 10rem;
width: 10rem; width: 10rem;
text-shadow: 0.1rem 0.1rem 0.1rem black, 0.1rem 0.1rem 0 black; text-shadow: 0.1rem 0.1rem 0.1rem black, 0.1rem 0.1rem 0 black;
box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.5); box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 50%);
} }
.c-glyph-choice-effect-list { .c-glyph-choice-effect-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 10%);
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 0.15); border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 15%);
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
height: 11rem; height: 11rem;
width: 25rem; width: 25rem;
@ -945,6 +939,7 @@
.c-sacrificed-glyphs__confirm { .c-sacrificed-glyphs__confirm {
cursor: pointer; cursor: pointer;
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -981,7 +976,7 @@
} }
.s-base--dark .c-glyph-inventory__slot { .s-base--dark .c-glyph-inventory__slot {
background-color: #333; background-color: #333333;
} }
.c-glyph-inventory-option { .c-glyph-inventory-option {
@ -1031,7 +1026,7 @@
bottom: 100%; bottom: 100%;
} }
.c-glyph-inventory-option__tooltip:after { .c-glyph-inventory-option__tooltip::after {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
@ -1060,12 +1055,12 @@
color: var(--color-reality-light); color: var(--color-reality-light);
} }
.c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip:after { .c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip::after {
border-top-width: 0.7rem; border-top-width: 0.7rem;
margin-bottom: -0.9rem; margin-bottom: -0.9rem;
} }
.s-base--metro .c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip:after { .s-base--metro .c-glyph-inventory-option:hover .c-glyph-inventory-option__tooltip::after {
margin-bottom: -0.8rem; margin-bottom: -0.8rem;
} }
@ -1159,9 +1154,9 @@
} }
@keyframes a-glyph-side-box-button-glow { @keyframes a-glyph-side-box-button-glow {
0% { box-shadow: inset 0 0 2rem var(--color-ra-pet--effarig) } 0% { box-shadow: inset 0 0 2rem var(--color-ra-pet--effarig); }
50% { box-shadow: inset 0 0 0 } 50% { box-shadow: inset 0 0 0; }
100% { box-shadow: inset 0 0 2rem var(--color-ra-pet--effarig) } 100% { box-shadow: inset 0 0 2rem var(--color-ra-pet--effarig); }
} }
.o-glyph-color-checkbox { .o-glyph-color-checkbox {
@ -1177,6 +1172,7 @@
color: black; color: black;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
-webkit-user-select: none;
user-select: none; user-select: none;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@ -1185,7 +1181,6 @@
border-color: black; border-color: black;
} }
.o-glyph-color-checkbox:hover { .o-glyph-color-checkbox:hover {
transform: scale(1.1) translate(0.1rem, -0.1rem); transform: scale(1.1) translate(0.1rem, -0.1rem);
} }
@ -1207,22 +1202,27 @@
background-color: #b67f33; background-color: #b67f33;
box-shadow: #b67f33 0 0 1rem 0.2rem; box-shadow: #b67f33 0 0 1rem 0.2rem;
} }
20% { 20% {
background-color: #64dd17; background-color: #64dd17;
box-shadow: #64dd17 0 0 1rem 0.2rem; box-shadow: #64dd17 0 0 1rem 0.2rem;
} }
40% { 40% {
background-color: #22aa48; background-color: #22aa48;
box-shadow: #22aa48 0 0 1rem 0.2rem; box-shadow: #22aa48 0 0 1rem 0.2rem;
} }
60% { 60% {
background-color: #03a9f4; background-color: #03a9f4;
box-shadow: #03a9f4 0 0 1rem 0.2rem; box-shadow: #03a9f4 0 0 1rem 0.2rem;
} }
80% { 80% {
background-color: #b241e3; background-color: #b241e3;
box-shadow: #b241e3 0 0 1rem 0.2rem; box-shadow: #b241e3 0 0 1rem 0.2rem;
} }
100% { 100% {
background-color: #b67f33; background-color: #b67f33;
box-shadow: #b67f33 0 0 1rem 0.2rem; box-shadow: #b67f33 0 0 1rem 0.2rem;
@ -1233,18 +1233,23 @@
0% { 0% {
box-shadow: #b67f33 0 0 1rem calc(0.3rem) inset; box-shadow: #b67f33 0 0 1rem calc(0.3rem) inset;
} }
20% { 20% {
box-shadow: #64dd17 0 0 1rem calc(0.3rem) inset; box-shadow: #64dd17 0 0 1rem calc(0.3rem) inset;
} }
40% { 40% {
box-shadow: #22aa48 0 0 1rem calc(0.3rem) inset; box-shadow: #22aa48 0 0 1rem calc(0.3rem) inset;
} }
60% { 60% {
box-shadow: #03a9f4 0 0 1rem calc(0.3rem) inset; box-shadow: #03a9f4 0 0 1rem calc(0.3rem) inset;
} }
80% { 80% {
box-shadow: #b241e3 0 0 1rem calc(0.3rem) inset; box-shadow: #b241e3 0 0 1rem calc(0.3rem) inset;
} }
100% { 100% {
box-shadow: #b67f33 0 0 1rem calc(0.3rem) inset; box-shadow: #b67f33 0 0 1rem calc(0.3rem) inset;
} }
@ -1253,87 +1258,126 @@
@keyframes a-reality-glyph-icon-cycle { @keyframes a-reality-glyph-icon-cycle {
0% { 0% {
color: #b67f33; color: #b67f33;
text-shadow: #b67f33 -0.04em 0.04em 0.08em; text-shadow: #b67f33 -0.04rem 0.04rem 0.08rem;
} }
20% { 20% {
color: #64dd17; color: #64dd17;
text-shadow: #64dd17 -0.04em 0.04em 0.08em; text-shadow: #64dd17 -0.04rem 0.04rem 0.08rem;
} }
40% { 40% {
color: #22aa48; color: #22aa48;
text-shadow: #22aa48 -0.04em 0.04em 0.08em; text-shadow: #22aa48 -0.04rem 0.04rem 0.08rem;
} }
60% { 60% {
color: #03a9f4; color: #03a9f4;
text-shadow: #03a9f4 -0.04em 0.04em 0.08em; text-shadow: #03a9f4 -0.04rem 0.04rem 0.08rem;
} }
80% { 80% {
color: #b241e3; color: #b241e3;
text-shadow: #b241e3 -0.04em 0.04em 0.08em; text-shadow: #b241e3 -0.04rem 0.04rem 0.08rem;
} }
100% { 100% {
color: #b67f33; color: #b67f33;
text-shadow: #b67f33 -0.04em 0.04em 0.08em; text-shadow: #b67f33 -0.04rem 0.04rem 0.08rem;
} }
} }
@keyframes a-reality-glyph-name-cycle { @keyframes a-reality-glyph-name-cycle {
0% { 0% {
color: #b67f33; color: #b67f33;
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b67f33 0 0 3px text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b67f33 0 0 3px;
} }
20% { 20% {
color: #64dd17; color: #64dd17;
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #64dd17 0 0 3px text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #64dd17 0 0 3px;
} }
40% { 40% {
color: #22aa48; color: #22aa48;
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #22aa48 0 0 3px text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #22aa48 0 0 3px;
} }
60% { 60% {
color: #03a9f4; color: #03a9f4;
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #03a9f4 0 0 3px text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #03a9f4 0 0 3px;
} }
80% { 80% {
color: #b241e3; color: #b241e3;
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b241e3 0 0 3px text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b241e3 0 0 3px;
} }
100% { 100% {
color: #b67f33; color: #b67f33;
text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b67f33 0 0 3px text-shadow: black -1px 1px 1px, black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, #b67f33 0 0 3px;
} }
} }
@keyframes a-reality-glyph-description-cycle { @keyframes a-reality-glyph-description-cycle {
0% { 0% {
color: #b67f33; color: #b67f33;
text-shadow: var(--color-text-base) -1px 1px 1px, var(--color-text-base) text-shadow:
1px 1px 1px, var(--color-text-base) -1px -1px 1px, var(--color-text-base) 1px -1px 1px, #b67f33 0 0 3px var(--color-text-base) -1px 1px 1px,
var(--color-text-base) 1px 1px 1px,
var(--color-text-base) -1px -1px 1px,
var(--color-text-base) 1px -1px 1px,
#b67f33 0 0 3px;
} }
20% { 20% {
color: #64dd17; color: #64dd17;
text-shadow: var(--color-text-base) -1px 1px 1px, var(--color-text-base) text-shadow:
1px 1px 1px, var(--color-text-base) -1px -1px 1px, var(--color-text-base) 1px -1px 1px, #64dd17 0 0 3px var(--color-text-base) -1px 1px 1px,
var(--color-text-base) 1px 1px 1px,
var(--color-text-base) -1px -1px 1px,
var(--color-text-base) 1px -1px 1px,
#64dd17 0 0 3px;
} }
40% { 40% {
color: #22aa48; color: #22aa48;
text-shadow: var(--color-text-base) -1px 1px 1px, var(--color-text-base) text-shadow:
1px 1px 1px, var(--color-text-base) -1px -1px 1px, var(--color-text-base) 1px -1px 1px, #22aa48 0 0 3px var(--color-text-base) -1px 1px 1px,
var(--color-text-base) 1px 1px 1px,
var(--color-text-base) -1px -1px 1px,
var(--color-text-base) 1px -1px 1px,
#22aa48 0 0 3px;
} }
60% { 60% {
color: #03a9f4; color: #03a9f4;
text-shadow: var(--color-text-base) -1px 1px 1px, var(--color-text-base) text-shadow:
1px 1px 1px, var(--color-text-base) -1px -1px 1px, var(--color-text-base) 1px -1px 1px, #03a9f4 0 0 3px var(--color-text-base) -1px 1px 1px,
var(--color-text-base) 1px 1px 1px,
var(--color-text-base) -1px -1px 1px,
var(--color-text-base) 1px -1px 1px,
#03a9f4 0 0 3px;
} }
80% { 80% {
color: #b241e3; color: #b241e3;
text-shadow: var(--color-text-base) -1px 1px 1px, var(--color-text-base) text-shadow:
1px 1px 1px, var(--color-text-base) -1px -1px 1px, var(--color-text-base) 1px -1px 1px, #b241e3 0 0 3px var(--color-text-base) -1px 1px 1px,
var(--color-text-base) 1px 1px 1px,
var(--color-text-base) -1px -1px 1px,
var(--color-text-base) 1px -1px 1px,
#b241e3 0 0 3px;
} }
100% { 100% {
color: #b67f33; color: #b67f33;
text-shadow: var(--color-text-base) -1px 1px 1px, var(--color-text-base) text-shadow:
1px 1px 1px, var(--color-text-base) -1px -1px 1px, var(--color-text-base) 1px -1px 1px, #b67f33 0 0 3px var(--color-text-base) -1px 1px 1px,
var(--color-text-base) 1px 1px 1px,
var(--color-text-base) -1px -1px 1px,
var(--color-text-base) 1px -1px 1px,
#b67f33 0 0 3px;
} }
} }
@ -1341,18 +1385,23 @@
0% { 0% {
background: #b67f33; background: #b67f33;
} }
20% { 20% {
background: #64dd17; background: #64dd17;
} }
40% { 40% {
background: #22aa48; background: #22aa48;
} }
60% { 60% {
background: #03a9f4; background: #03a9f4;
} }
80% { 80% {
background: #b241e3; background: #b241e3;
} }
100% { 100% {
background: #b67f33; background: #b67f33;
} }
@ -1361,53 +1410,63 @@
@keyframes a-reality-glyph-tooltip-cycle { @keyframes a-reality-glyph-tooltip-cycle {
0% { 0% {
border-color: #b67f33; border-color: #b67f33;
box-shadow: 0 0 0.5rem #b67f33, 0 0 0.5rem #b67f33 inset box-shadow: 0 0 0.5rem #b67f33, 0 0 0.5rem #b67f33 inset;
} }
20% { 20% {
border-color: #64dd17; border-color: #64dd17;
box-shadow: 0 0 0.5rem #64dd17, 0 0 0.5rem #64dd17 inset box-shadow: 0 0 0.5rem #64dd17, 0 0 0.5rem #64dd17 inset;
} }
40% { 40% {
border-color: #22aa48; border-color: #22aa48;
box-shadow: 0 0 0.5rem #22aa48, 0 0 0.5rem #22aa48 inset box-shadow: 0 0 0.5rem #22aa48, 0 0 0.5rem #22aa48 inset;
} }
60% { 60% {
border-color: #03a9f4; border-color: #03a9f4;
box-shadow: 0 0 0.5rem #03a9f4, 0 0 0.5rem #03a9f4 inset box-shadow: 0 0 0.5rem #03a9f4, 0 0 0.5rem #03a9f4 inset;
} }
80% { 80% {
border-color: #b241e3; border-color: #b241e3;
box-shadow: 0 0 0.5rem #b241e3, 0 0 0.5rem #b241e3 inset box-shadow: 0 0 0.5rem #b241e3, 0 0 0.5rem #b241e3 inset;
} }
100% { 100% {
border-color: #b67f33; border-color: #b67f33;
box-shadow: 0 0 0.5rem #b67f33, 0 0 0.5rem #b67f33 inset box-shadow: 0 0 0.5rem #b67f33, 0 0 0.5rem #b67f33 inset;
} }
} }
@keyframes a-reality-glyph-tooltip-header-cycle { @keyframes a-reality-glyph-tooltip-header-cycle {
0% { 0% {
border-color: #b67f33; border-color: #b67f33;
box-shadow: 0 0 0.5rem 0.1rem #b67f33, 0 0 0.8rem #b67f33 inset box-shadow: 0 0 0.5rem 0.1rem #b67f33, 0 0 0.8rem #b67f33 inset;
} }
20% { 20% {
border-color: #64dd17; border-color: #64dd17;
box-shadow: 0 0 0.5rem 0.1rem #64dd17, 0 0 0.8rem #64dd17 inset box-shadow: 0 0 0.5rem 0.1rem #64dd17, 0 0 0.8rem #64dd17 inset;
} }
40% { 40% {
border-color: #22aa48; border-color: #22aa48;
box-shadow: 0 0 0.5rem 0.1rem #22aa48, 0 0 0.8rem #22aa48 inset box-shadow: 0 0 0.5rem 0.1rem #22aa48, 0 0 0.8rem #22aa48 inset;
} }
60% { 60% {
border-color: #03a9f4; border-color: #03a9f4;
box-shadow: 0 0 0.5rem 0.1rem #03a9f4, 0 0 0.8rem #03a9f4 inset box-shadow: 0 0 0.5rem 0.1rem #03a9f4, 0 0 0.8rem #03a9f4 inset;
} }
80% { 80% {
border-color: #b241e3; border-color: #b241e3;
box-shadow: 0 0 0.5rem 0.1rem #b241e3, 0 0 0.8rem #b241e3 inset box-shadow: 0 0 0.5rem 0.1rem #b241e3, 0 0 0.8rem #b241e3 inset;
} }
100% { 100% {
border-color: #b67f33; border-color: #b67f33;
box-shadow: 0 0 0.5rem 0.1rem #b67f33, 0 0 0.8rem #b67f33 inset box-shadow: 0 0 0.5rem 0.1rem #b67f33, 0 0 0.8rem #b67f33 inset;
} }
} }

97
public/stylesheets/new-ui-styles.css
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: Typewriter; font-family: Typewriter;
src: url('MonospaceTypewriter.ttf'); src: url("MonospaceTypewriter.ttf");
} }
*:focus { *:focus {
@ -74,13 +74,13 @@ body.t-s9 {
.resource h2 { .resource h2 {
margin: 0; margin: 0;
font-size: 1.7em; font-size: 1.7rem;
z-index: 1; z-index: 1;
} }
.t-dark .resource h2, .t-dark .resource h2,
.t-dark-metro .resource h2 { .t-dark-metro .resource h2 {
text-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.5), -0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.8); text-shadow: 0 0 0.1rem rgba(0, 0, 0, 50%), -0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 80%);
} }
.resource-information { .resource-information {
@ -89,16 +89,16 @@ body.t-s9 {
align-items: flex-start; align-items: flex-start;
color: var(--color-text); color: var(--color-text);
justify-content: space-between; justify-content: space-between;
font-size: 1.5em; font-size: 1.5rem;
} }
.resource-gain { .resource-gain {
font-size: 0.7em; font-size: 0.7rem;
color: var(--color-text); color: var(--color-text);
} }
.resource-name { .resource-name {
font-size: 0.8em; font-size: 0.8rem;
} }
.o-sidebar-currency--antimatter { .o-sidebar-currency--antimatter {
@ -124,24 +124,24 @@ body.t-s9 {
} }
.o-sidebar-currency--infinity { .o-sidebar-currency--infinity {
color: var(--color-infinity) color: var(--color-infinity);
} }
.o-sidebar-currency--eternity { .o-sidebar-currency--eternity {
color: var(--color-eternity) color: var(--color-eternity);
} }
.o-sidebar-currency--reality { .o-sidebar-currency--reality {
color: var(--color-reality) color: var(--color-reality);
} }
.t-dark .o-sidebar-currency--reality, .t-dark .o-sidebar-currency--reality,
.t-dark-metro .o-sidebar-currency--reality { .t-dark-metro .o-sidebar-currency--reality {
color: var(--color-reality) color: var(--color-reality);
} }
.o-sidebar-currency--pelle { .o-sidebar-currency--pelle {
color: var(--color-pelle--base) color: var(--color-pelle--base);
} }
.resource-infinity-canreset, .resource-infinity-canreset,
@ -153,7 +153,7 @@ body.t-s9 {
.resource-infinity-canreset:hover, .resource-infinity-canreset:hover,
.resource-eternity-canreset:hover { .resource-eternity-canreset:hover {
background-color: rgb(49, 49, 49) background-color: rgb(49, 49, 49);
} }
.t-normal .c-modal { .t-normal .c-modal {
@ -166,7 +166,7 @@ body.t-s9 {
border-width: 0.1rem; border-width: 0.1rem;
border-radius: 0; border-radius: 0;
margin-top: -0.1rem; margin-top: -0.1rem;
font-size: 1.3em; font-size: 1.3rem;
position: relative; position: relative;
transition-duration: 0.15s; transition-duration: 0.15s;
transition-delay: 0.2s; transition-delay: 0.2s;
@ -197,7 +197,7 @@ body.t-s9 {
} }
.o-tab-btn::after { .o-tab-btn::after {
content: ''; content: "";
position: absolute; position: absolute;
left: calc(100% + 0.1rem); left: calc(100% + 0.1rem);
top: calc(0% + -0.1rem); top: calc(0% + -0.1rem);
@ -291,12 +291,13 @@ body.t-s9 {
line-height: 4.5rem; line-height: 4.5rem;
cursor: pointer; cursor: pointer;
transition-duration: 0.15s; transition-duration: 0.15s;
-webkit-user-select: none;
user-select: none; user-select: none;
} }
.o-tab-btn--subtab .o-tab-btn--cel3 { .o-tab-btn--subtab .o-tab-btn--cel3 {
font-weight: normal; font-weight: normal;
transform: rotate(45deg) transform: rotate(45deg);
} }
.o-subtab__tooltip { .o-subtab__tooltip {
@ -317,7 +318,7 @@ body.t-s9 {
bottom: 100%; bottom: 100%;
} }
.o-subtab__tooltip:after { .o-subtab__tooltip::after {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
@ -334,10 +335,10 @@ body.t-s9 {
.o-tab-btn--subtab:hover .o-subtab__tooltip { .o-tab-btn--subtab:hover .o-subtab__tooltip {
opacity: 1; opacity: 1;
bottom: calc(100% + 0.7rem) bottom: calc(100% + 0.7rem);
} }
.o-tab-btn--subtab:hover .o-subtab__tooltip:after { .o-tab-btn--subtab:hover .o-subtab__tooltip::after {
border-top-width: 0.7rem; border-top-width: 0.7rem;
margin-bottom: -0.7rem; margin-bottom: -0.7rem;
} }
@ -348,7 +349,7 @@ body.t-s9 {
border-color: var(--color-infinity); border-color: var(--color-infinity);
} }
.o-tab-btn--infinity .o-subtab__tooltip:after { .o-tab-btn--infinity .o-subtab__tooltip::after {
border-top-color: var(--color-infinity); border-top-color: var(--color-infinity);
} }
@ -358,7 +359,7 @@ body.t-s9 {
border-color: var(--color-eternity); border-color: var(--color-eternity);
} }
.o-tab-btn--eternity .o-subtab__tooltip:after { .o-tab-btn--eternity .o-subtab__tooltip::after {
border-top-color: var(--color-eternity); border-top-color: var(--color-eternity);
} }
@ -368,7 +369,7 @@ body.t-s9 {
border-color: var(--color-reality); border-color: var(--color-reality);
} }
.o-tab-btn--reality .o-subtab__tooltip:after { .o-tab-btn--reality .o-subtab__tooltip::after {
border-top-color: var(--color-reality); border-top-color: var(--color-reality);
} }
@ -378,7 +379,7 @@ body.t-s9 {
border-color: var(--color-celestials); border-color: var(--color-celestials);
} }
.o-tab-btn--celestial .o-subtab__tooltip:after { .o-tab-btn--celestial .o-subtab__tooltip::after {
border-top-color: var(--color-celestials); border-top-color: var(--color-celestials);
} }
@ -503,14 +504,14 @@ body.t-s9 {
} }
.tickspeed-labels span { .tickspeed-labels span {
color: var(--color-text);; color: var(--color-text);
height: 3rem; height: 3rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.particle { .particle {
position: absolute; position: absolute;
color: var(--color-text);; color: var(--color-text);
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;
background-image: url("../icon.png"); background-image: url("../icon.png");
@ -552,11 +553,10 @@ body.t-s9 {
} }
.t-normal .c-game-header__tesseract-available { .t-normal .c-game-header__tesseract-available {
background: #EEEEEE; background: #eeeeee;
animation: a-tesseract-shift-dark 5s infinite; animation: a-tesseract-shift-dark 5s infinite;
} }
.l-new-ui-big-crunch__container { .l-new-ui-big-crunch__container {
margin-top: 2rem; margin-top: 2rem;
} }
@ -566,7 +566,7 @@ body.t-s9 {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: bold; font-weight: bold;
font-size: 1.1em; font-size: 1.1rem;
border-bottom: 0.1rem solid var(--color-good); border-bottom: 0.1rem solid var(--color-good);
padding-bottom: 0.6rem; padding-bottom: 0.6rem;
} }
@ -582,7 +582,7 @@ body.t-s9 {
background: var(--color-base); background: var(--color-base);
} }
.t-normal .o-achievement__tooltip:after { .t-normal .o-achievement__tooltip::after {
border-top-color: var(--color-accent); border-top-color: var(--color-accent);
} }
@ -598,7 +598,10 @@ body.t-s9 {
color: var(--color-text-inverted); color: var(--color-text-inverted);
} }
.o-primary-btn--option, .o-primary-btn--option-wide, .c-select-theme__item, .c-select-notation__item { .o-primary-btn--option,
.o-primary-btn--option-wide,
.c-select-theme__item,
.c-select-notation__item {
background: var(--color-base); background: var(--color-base);
color: var(--color-text); color: var(--color-text);
border: 0.1rem solid var(--color-good); border: 0.1rem solid var(--color-good);
@ -650,7 +653,7 @@ body.t-s9 {
.t-metro .o-autobuyer-input, .t-metro .o-autobuyer-input,
.t-metro .c-autobuyer-box__mode-select { .t-metro .c-autobuyer-box__mode-select {
color: black; color: black;
border: 0.1rem solid #A9A9A9; border: 0.1rem solid #a9a9a9;
background: white; background: white;
} }
@ -659,7 +662,7 @@ body.t-s9 {
.t-dark .c-autobuyer-box__mode-select, .t-dark .c-autobuyer-box__mode-select,
.t-dark-metro .c-autobuyer-box__mode-select { .t-dark-metro .c-autobuyer-box__mode-select {
color: black; color: black;
background-color: #455A64; background-color: #455a64;
border: 0.1rem solid black; border: 0.1rem solid black;
} }
@ -675,7 +678,7 @@ body.t-s9 {
.t-s10 .c-autobuyer-box__mode-select { .t-s10 .c-autobuyer-box__mode-select {
color: white; color: white;
background-color: black; background-color: black;
border: 0.1rem solid #888; border: 0.1rem solid #888888;
} }
.o-autobuyer-btn { .o-autobuyer-btn {
@ -697,17 +700,17 @@ body.t-s9 {
} }
.c-antimatter-dim-row:nth-child(even) { .c-antimatter-dim-row:nth-child(even) {
background-color: rgba(223, 80, 80, 0.3); background-color: rgba(223, 80, 80, 30%);
} }
.t-metro .c-antimatter-dim-row:nth-child(even), .t-metro .c-antimatter-dim-row:nth-child(even),
.t-inverted-metro .c-antimatter-dim-row:nth-child(even), .t-inverted-metro .c-antimatter-dim-row:nth-child(even),
.t-s8 .c-antimatter-dim-row:nth-child(even) { .t-s8 .c-antimatter-dim-row:nth-child(even) {
background-color: rgba(33, 150, 243, 0.3); background-color: rgba(33, 150, 243, 30%);
} }
.c-antimatter-dim-row__multiplier { .c-antimatter-dim-row__multiplier {
font-size: 1.4rem font-size: 1.4rem;
} }
.c-infinity-dim-description__accent { .c-infinity-dim-description__accent {
@ -715,15 +718,15 @@ body.t-s9 {
} }
.c-infinity-dim-row:nth-child(even) { .c-infinity-dim-row:nth-child(even) {
background: rgba(182, 127, 51, 0.3); background: rgba(182, 127, 51, 30%);
} }
.s-base--metro .c-infinity-dim-row:nth-child(even) { .s-base--metro .c-infinity-dim-row:nth-child(even) {
background: rgba(255, 152, 0, 0.3); background: rgba(255, 152, 0, 30%);
} }
.c-infinity-dim-row__multiplier { .c-infinity-dim-row__multiplier {
font-size: 1.4rem font-size: 1.4rem;
} }
.o-primary-btn--buy-id-max, .o-primary-btn--buy-id-max,
@ -736,15 +739,15 @@ body.t-s9 {
} }
.c-time-dim-row:nth-child(even) { .c-time-dim-row:nth-child(even) {
background: rgba(179, 65, 224, 0.3); background: rgba(179, 65, 224, 30%);
} }
.s-base--metro .c-time-dim-row:nth-child(even) { .s-base--metro .c-time-dim-row:nth-child(even) {
background: rgba(103, 58, 183, 0.3); background: rgba(103, 58, 183, 30%);
} }
.c-time-dim-row__multiplier { .c-time-dim-row__multiplier {
font-size: 1.4rem font-size: 1.4rem;
} }
.o-primary-btn--buy-td-max, .o-primary-btn--buy-td-max,
@ -752,7 +755,7 @@ body.t-s9 {
height: 4.4rem; height: 4.4rem;
} }
.l-reality-upgrade-btn { .l-reality-upgrade-btn {
width: 18rem; width: 18rem;
margin: 0.6rem 0.4rem; margin: 0.6rem 0.4rem;
} }
@ -789,6 +792,7 @@ body.t-s9 {
top: 15%; top: 15%;
left: 72%; left: 72%;
} }
.l-game-header__eternity-btn { .l-game-header__eternity-btn {
top: 15%; top: 15%;
right: 72%; right: 72%;
@ -809,7 +813,6 @@ body.t-s9 {
top: 8.5rem; top: 8.5rem;
} }
.l-reset-buttons-container__reality-button { .l-reset-buttons-container__reality-button {
margin-top: 1.7rem; margin-top: 1.7rem;
margin-bottom: 0; margin-bottom: 0;
@ -878,13 +881,13 @@ body.t-s9 {
} }
.t-normal .c-glyph-choice-icon { .t-normal .c-glyph-choice-icon {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 30%);
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 0.4); border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 40%);
} }
.t-normal .c-glyph-choice-effect-list { .t-normal .c-glyph-choice-effect-list {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 30%);
border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 0.4); border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 40%);
} }
.l-help-me { .l-help-me {

4
public/stylesheets/old-ui.css
View File

@ -61,7 +61,7 @@
} }
.s-base--metro .o-tab-btn { .s-base--metro .o-tab-btn {
box-shadow: 0.1rem 0.1rem 0.1rem 0 #9E9E9E; box-shadow: 0.1rem 0.1rem 0.1rem 0 #9e9e9e;
} }
.t-dark-metro .o-tab-btn { .t-dark-metro .o-tab-btn {
@ -69,7 +69,7 @@
} }
.t-s4 .o-tab-btn { .t-s4 .o-tab-btn {
cursor: url(cursor2.cur), auto; cursor: url("cursor2.cur"), auto;
} }
.t-s8 .o-tab-btn { .t-s8 .o-tab-btn {

1791
public/stylesheets/styles.css
View File

File diff suppressed because it is too large Load Diff

14
public/stylesheets/theme-Dark Metro.css
View File

@ -1,28 +1,28 @@
body.t-dark-metro { body.t-dark-metro {
background-image: url('../images/dark-bg.png'); background-image: url("../images/dark-bg.png");
background-position: center; background-position: center;
color: #757575; color: #757575;
} }
.t-dark-metro .c-tt-buy-button--unlocked { .t-dark-metro .c-tt-buy-button--unlocked {
background: #212121; background: #212121;
color: #00BCD4; color: #00bcd4;
border: 0.1rem solid #00BCD4; border: 0.1rem solid #00bcd4;
} }
.t-dark-metro .c-tt-buy-button--unlocked:hover { .t-dark-metro .c-tt-buy-button--unlocked:hover {
color: #212121; color: #212121;
background: #00BCD4; background: #00bcd4;
} }
.t-dark-metro .c-tt-buy-button--locked { .t-dark-metro .c-tt-buy-button--locked {
background: #9E9E9E; background: #9e9e9e;
border: none; border: none;
box-shadow: 1px 1px 1px 0 #000; box-shadow: 1px 1px 1px 0 #000000;
} }
.t-dark-metro .c-tt-buy-button--locked:hover { .t-dark-metro .c-tt-buy-button--locked:hover {
background: #E53935; background: #e53935;
} }
.t-dark-metro #realityanimbg { .t-dark-metro #realityanimbg {

16
public/stylesheets/theme-Dark.css
View File

@ -1,33 +1,33 @@
body.t-dark { body.t-dark {
background-image: url('../images/dark-bg.png'); background-image: url("../images/dark-bg.png");
background-position: center; background-position: center;
color: #888888; color: #888888;
} }
input.t-dark { input.t-dark {
background-color: #455A64; background-color: #455a64;
border: 0.1rem solid black; border: 0.1rem solid black;
} }
.t-dark .c-tt-amount { .t-dark .c-tt-amount {
color: #64DD17; color: #64dd17;
text-shadow: 0 0 7px #64DD17; text-shadow: 0 0 7px #64dd17;
} }
.t-dark .c-tt-buy-button--unlocked { .t-dark .c-tt-buy-button--unlocked {
color: #3AACD6; color: #3aacd6;
background: #161616; background: #161616;
border: 0.1rem solid #3AACD6; border: 0.1rem solid #3aacd6;
} }
.t-dark .c-tt-buy-button--unlocked:hover { .t-dark .c-tt-buy-button--unlocked:hover {
color: #161616; color: #161616;
background: #3AACD6; background: #3aacd6;
} }
.t-dark .c-tt-buy-button--locked { .t-dark .c-tt-buy-button--locked {
background: #263238; background: #263238;
border: 0.1rem solid #3AACD6; border: 0.1rem solid #3aacd6;
} }
.t-dark .c-tt-buy-button--locked:hover { .t-dark .c-tt-buy-button--locked:hover {

18
public/stylesheets/theme-Inverted Metro.css
View File

@ -6,7 +6,7 @@ body.t-inverted-metro {
.t-inverted-metro #page, .t-inverted-metro #page,
.t-inverted-metro .l-notification-container, .t-inverted-metro .l-notification-container,
.t-inverted-metro .c-modal, .t-inverted-metro .c-modal,
.t-inverted-metro #TTbuttons, .t-inverted-metro .time-theorem-buttons,
.t-inverted-metro .sidebar, .t-inverted-metro .sidebar,
.t-inverted-metro .c-glyph-tooltip { .t-inverted-metro .c-glyph-tooltip {
filter: invert(100%); filter: invert(100%);
@ -18,28 +18,28 @@ body.t-inverted-metro {
.t-inverted-metro #timetheorems, .t-inverted-metro #timetheorems,
.t-inverted-metro .c-ttshop__save-load-text, .t-inverted-metro .c-ttshop__save-load-text,
.t-inverted-metro #minimizeArrow, .t-inverted-metro .minimize-arrow,
.t-inverted-metro .ttshop-background { .t-inverted-metro .ttshop-background {
color: #bbb; color: #bbbbbb;
} }
.t-inverted-metro .c-tt-buy-button--unlocked { .t-inverted-metro .c-tt-buy-button--unlocked {
background: #212121; background: #212121;
color: #00BCD4; color: #00bcd4;
border: 0.1rem solid #00BCD4; border: 0.1rem solid #00bcd4;
} }
.t-inverted-metro .c-tt-buy-button--unlocked:hover { .t-inverted-metro .c-tt-buy-button--unlocked:hover {
color: #212121; color: #212121;
background: #00BCD4; background: #00bcd4;
} }
.t-inverted-metro .c-tt-buy-button--locked { .t-inverted-metro .c-tt-buy-button--locked {
background: #9E9E9E; background: #9e9e9e;
border: none; border: none;
box-shadow: 1px 1px 1px 0 #000; box-shadow: 1px 1px 1px 0 #000000;
} }
.t-inverted-metro .c-tt-buy-button--locked:hover { .t-inverted-metro .c-tt-buy-button--locked:hover {
background: #EF5350; background: #ef5350;
} }

2
public/stylesheets/theme-Inverted.css
View File

@ -6,7 +6,7 @@ body.t-inverted {
.t-inverted #page, .t-inverted #page,
.t-inverted .l-notification-container, .t-inverted .l-notification-container,
.t-inverted .c-modal, .t-inverted .c-modal,
.t-inverted #TTbuttons, .t-inverted .time-theorem-buttons,
.t-inverted .sidebar, .t-inverted .sidebar,
.t-inverted .c-glyph-tooltip { .t-inverted .c-glyph-tooltip {
filter: invert(100%); filter: invert(100%);

12
public/stylesheets/theme-Metro.css
View File

@ -1,20 +1,20 @@
.t-metro .c-tt-buy-button--unlocked { .t-metro .c-tt-buy-button--unlocked {
background: #212121; background: #212121;
color: #00BCD4; color: #00bcd4;
border: 0.1rem solid #00BCD4; border: 0.1rem solid #00bcd4;
} }
.t-metro .c-tt-buy-button--unlocked:hover { .t-metro .c-tt-buy-button--unlocked:hover {
color: #212121; color: #212121;
background: #00BCD4; background: #00bcd4;
} }
.t-metro .c-tt-buy-button--locked { .t-metro .c-tt-buy-button--locked {
background: #9E9E9E; background: #9e9e9e;
border: none; border: none;
box-shadow: 1px 1px 1px 0 #000; box-shadow: 1px 1px 1px 0 #000000;
} }
.t-metro .c-tt-buy-button--locked:hover { .t-metro .c-tt-buy-button--locked:hover {
background: #EF5350; background: #ef5350;
} }

24
public/stylesheets/theme-S1.css
View File

@ -1,11 +1,10 @@
html { html {
background: url('../images/s1-bg.svg') no-repeat; background: url("../images/s1-bg.svg") no-repeat;
background-size: contain;
align-content: center; align-content: center;
background-size: 100%; background-size: 100%;
background-color: #d72621; background-color: #d72621;
background-attachment:fixed; background-attachment: fixed;
background-position:center bottom; background-position: center bottom;
} }
body.t-s1 { body.t-s1 {
@ -38,7 +37,7 @@ body.t-s1 {
#snow { #snow {
display: block !important; display: block !important;
background-image: url('../images/snow1.png'), url('../images/snow2.png'), url('../images/snow3.png'); background-image: url("../images/snow1.png"), url("../images/snow2.png"), url("../images/snow3.png");
height: 100%; height: 100%;
width: 100%; width: 100%;
left: 0; left: 0;
@ -47,17 +46,18 @@ body.t-s1 {
z-index: 0; z-index: 0;
opacity: 1; opacity: 1;
pointer-events: none; pointer-events: none;
animation: snow 10s linear infinite, snowFade 10s cubic-bezier(0,0.3,1,0.7) infinite; animation: snow 10s linear infinite, snowFade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
} }
@keyframes snow { @keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;} 0% { background-position: 0 0, 0 0, 0 0; }
50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 50% { background-position: 500px 500px, 100px 200px, -100px 150px; }
100% {background-position: 1000px 1000px, 200px 400px, -200px 300px;} 100% { background-position: 1000px 1000px, 200px 400px, -200px 300px; }
} }
/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes snowFade { @keyframes snowFade {
0% {opacity: 0;} 0% { opacity: 0; }
50% {opacity: 1;} 50% { opacity: 1; }
100% {opacity: 0;} 100% { opacity: 0; }
} }

19
public/stylesheets/theme-S10.css
View File

@ -1,5 +1,6 @@
.t-s10 #stars { .t-s10 #stars {
display: block; display: block;
/* Make video to at least 100% wide and tall */ /* Make video to at least 100% wide and tall */
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
@ -13,31 +14,31 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: -1000; z-index: -1000;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
body.t-s10 { body.t-s10 {
color: #999; color: #999999;
background: black; background: black;
background-image: url('../images/stars-bg.png'); background-image: url("../images/stars-bg.png");
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
} }
.t-s10 .c-tt-amount { .t-s10 .c-tt-amount {
color: #64DD17; color: #64dd17;
text-shadow: 0 0 7px #64DD17; text-shadow: 0 0 7px #64dd17;
} }
.t-s10 .c-tt-buy-button--unlocked { .t-s10 .c-tt-buy-button--unlocked {
color: #3AACD6; color: #3aacd6;
background: black; background: black;
border: 0.1rem solid #3AACD6; border: 0.1rem solid #3aacd6;
} }
.t-s10 .c-tt-buy-button--unlocked:hover { .t-s10 .c-tt-buy-button--unlocked:hover {
color: black; color: black;
background: #3AACD6; background: #3aacd6;
} }
.t-s10 .c-tt-buy-button--locked { .t-s10 .c-tt-buy-button--locked {
@ -53,7 +54,7 @@ body.t-s10 {
} }
.t-s10 .c-rm-amount__desc { .t-s10 .c-rm-amount__desc {
color: #999; color: #999999;
} }
.t-s10 #realityanimbg { .t-s10 #realityanimbg {

17
public/stylesheets/theme-S11.css
View File

@ -1,29 +1,29 @@
@font-face { @font-face {
font-family: Typewriter; font-family: Typewriter;
src: url('BlobEmoji-Bold.ttf'), url('MonospaceTypewriter.ttf'); src: url("BlobEmoji-Bold.ttf"), url("MonospaceTypewriter.ttf");
} }
body.t-s11 { body.t-s11 {
color: #999; color: #999999;
background: black; background: black;
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
} }
.t-s11 .c-tt-amount { .t-s11 .c-tt-amount {
color: #64DD17; color: #64dd17;
text-shadow: 0 0 7px #64DD17; text-shadow: 0 0 7px #64dd17;
} }
.t-s11 .c-tt-buy-button--unlocked { .t-s11 .c-tt-buy-button--unlocked {
color: #3AACD6; color: #3aacd6;
background: black; background: black;
border: 0.1rem solid #3AACD6; border: 0.1rem solid #3aacd6;
} }
.t-s11 .c-tt-buy-button--unlocked:hover { .t-s11 .c-tt-buy-button--unlocked:hover {
color: black; color: black;
background: #3AACD6; background: #3aacd6;
} }
.t-s11 .c-tt-buy-button--locked { .t-s11 .c-tt-buy-button--locked {
@ -39,7 +39,7 @@ body.t-s11 {
} }
.t-s11 .c-rm-amount__desc { .t-s11 .c-rm-amount__desc {
color: #999; color: #999999;
} }
.t-s11 #realityanimbg { .t-s11 #realityanimbg {
@ -56,6 +56,7 @@ body.t-s11 {
font-size: 20px; font-size: 20px;
fill: orange !important; fill: orange !important;
pointer-events: none; pointer-events: none;
-webkit-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
} }

5
public/stylesheets/theme-S2.css
View File

@ -1,6 +1,5 @@
html { html {
background: url('../images/s2-bg.svg') no-repeat; background: url("../images/s2-bg.svg") no-repeat;
background-size: contain;
background-position-x: 50%; background-position-x: 50%;
background-position-y: 50%; background-position-y: 50%;
background-size: 50%; background-size: 50%;
@ -17,7 +16,7 @@ body {
.t-s2 #page, .t-s2 #page,
.t-s2 .l-notification-container, .t-s2 .l-notification-container,
.t-s2 .c-modal, .t-s2 .c-modal,
.t-s2 #TTbuttons, .t-s2 .time-theorem-buttons,
.t-s2 .sidebar, .t-s2 .sidebar,
.t-s2 .c-glyph-tooltip { .t-s2 .c-glyph-tooltip {
filter: sepia(100%) hue-rotate(180deg) saturate(250%); filter: sepia(100%) hue-rotate(180deg) saturate(250%);

28
public/stylesheets/theme-S3.css
View File

@ -6,24 +6,24 @@ body {
.t-s3 #page, .t-s3 #page,
.t-s3 .l-notification-container, .t-s3 .l-notification-container,
.t-s3 .c-modal, .t-s3 .c-modal,
.t-s3 #TTbuttons, .t-s3 .time-theorem-buttons,
.t-s3 .sidebar, .t-s3 .sidebar,
.t-s3 .c-glyph-tooltip { .t-s3 .c-glyph-tooltip {
animation: glasses 7s infinite; animation: glasses 7s infinite;
} }
@keyframes glasses { @keyframes glasses {
0% {filter: blur(0);} 0% { filter: blur(0); }
10% {filter: blur(3px);} 10% { filter: blur(3px); }
20% {filter: blur(0);} 20% { filter: blur(0); }
30% {transform: rotateZ(0deg)} 30% { transform: rotateZ(0deg); }
35% {transform: rotateZ(4deg)} 35% { transform: rotateZ(4deg); }
40% {transform: rotateZ(-4deg)} 40% { transform: rotateZ(-4deg); }
45% {transform: rotateZ(0deg)} 45% { transform: rotateZ(0deg); }
55% {filter: invert(0%);} 55% { filter: invert(0%); }
65% {filter: invert(100%);} 65% { filter: invert(100%); }
75% {filter: invert(0%);} 75% { filter: invert(0%); }
85% {filter: opacity(100%);} 85% { filter: opacity(100%); }
92.5% {filter: opacity(50%);} 92.5% { filter: opacity(50%); }
100% {filter: opacity(100%);} 100% { filter: opacity(100%); }
} }

31
public/stylesheets/theme-S4.css
View File

@ -1,33 +1,34 @@
* { * {
border-radius: 40% !important; border-radius: 40% !important;
box-shadow: 1px 1px 1px 0 #9e9e9e;
font-family:
"Comic Sans MS",
cursive,
sans-serif,
Typewriter,
fas,
fab,
"Font Awesome 6 Brands",
"Font Awesome 6 Free" !important;
} }
* { html {
font-family: "Comic Sans MS", cursive, sans-serif, Typewriter, background-color: #ff00ff;
fas, fab, 'Font Awesome 6 Brands', 'Font Awesome 6 Free' !important;
}
html{
background-color: #FF00FF;
color: black !important; color: black !important;
background-attachment:fixed; background-attachment: fixed;
background-position:center bottom; background-position: center bottom;
border: 0.1rem solid white !important; border: 0.1rem solid white !important;
} }
#container { #container {
cursor: url(cursor.cur), auto !important; cursor: url("cursor.cur"), auto !important;
} }
body { body {
background: #0FFF0F !important; background: #0fff0f !important;
border: 0.1rem solid white !important; border: 0.1rem solid white !important;
} }
.o-achievement { .o-achievement {
border-radius: 0.8rem !important; border-radius: 0.8rem !important;
} }
* {
box-shadow: 1px 1px 1px 0 #9E9E9E;
}

4
public/stylesheets/theme-S5.css
View File

@ -1,5 +1,5 @@
html { html {
background: url('../images/s5-bg.jpg'); background: url("../images/s5-bg.jpg");
background-position-x: 50%; background-position-x: 50%;
background-position-y: 50%; background-position-y: 50%;
background-size: 150%; background-size: 150%;
@ -15,7 +15,7 @@ body.t-s5 {
.t-s5 #page, .t-s5 #page,
.t-s5 .l-notification-container, .t-s5 .l-notification-container,
.t-s5 .c-modal, .t-s5 .c-modal,
.t-s5 #TTbuttons, .t-s5 .time-theorem-buttons,
.t-s5 .sidebar { .t-s5 .sidebar {
filter: sepia(100%) hue-rotate(0deg) saturate(100%); filter: sepia(100%) hue-rotate(0deg) saturate(100%);
} }

19
public/stylesheets/theme-S6.css
View File

@ -1,5 +1,6 @@
.t-s6 #stars { .t-s6 #stars {
display: block; display: block;
/* Make video to at least 100% wide and tall */ /* Make video to at least 100% wide and tall */
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;
@ -13,31 +14,31 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: -1000; z-index: -1000;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
body.t-s6 { body.t-s6 {
color: #999; color: #999999;
background: black; background: black;
background-image: url('../images/stars-bg.png'); background-image: url("../images/stars-bg.png");
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
} }
.t-s6 .c-tt-amount { .t-s6 .c-tt-amount {
color: #64DD17; color: #64dd17;
text-shadow: 0 0 7px #64DD17; text-shadow: 0 0 7px #64dd17;
} }
.t-s6 .c-tt-buy-button--unlocked { .t-s6 .c-tt-buy-button--unlocked {
color: #3AACD6; color: #3aacd6;
background: black; background: black;
border: 0.1rem solid #3AACD6; border: 0.1rem solid #3aacd6;
} }
.t-s6 .c-tt-buy-button--unlocked:hover { .t-s6 .c-tt-buy-button--unlocked:hover {
color: black; color: black;
background: #3AACD6; background: #3aacd6;
} }
.t-s6 .c-tt-buy-button--locked { .t-s6 .c-tt-buy-button--locked {
@ -53,7 +54,7 @@ body.t-s6 {
} }
.t-s6 .c-rm-amount__desc { .t-s6 .c-rm-amount__desc {
color: #999; color: #999999;
} }
.t-s6 #realityanimbg { .t-s6 #realityanimbg {

14
public/stylesheets/theme-S7.css
View File

@ -1,5 +1,5 @@
* { * {
font-family: "Arial", Typewriter; font-family: Arial, Typewriter;
transition-duration: 1ms !important; transition-duration: 1ms !important;
border-width: 1px !important; border-width: 1px !important;
border-radius: 0 !important; border-radius: 0 !important;
@ -12,27 +12,19 @@
} }
button { button {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
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; background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
padding: 3px !important; padding: 3px !important;
border: 0.1rem solid #9B9B9B !important; border: 0.1rem solid #9b9b9b !important;
color: black !important; color: black !important;
text-decoration: none !important; text-decoration: none !important;
} }
.o-primary-btn { .o-primary-btn {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
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; background-image: linear-gradient(to top, rgb(222, 222, 222) 0%, rgb(246, 246, 246) 100%) !important;
padding: 3px !important; padding: 3px !important;
border: 0.1rem solid #9B9B9B !important; border: 0.1rem solid #9b9b9b !important;
color: black !important; color: black !important;
text-decoration: none !important; text-decoration: none !important;
} }

22
public/stylesheets/theme-S8.css
View File

@ -1,5 +1,5 @@
body.t-s8 { body.t-s8 {
background: url('../images/s8-bg.jpg') no-repeat; background: url("../images/s8-bg.jpg") no-repeat;
color: black; color: black;
background-color: white; background-color: white;
height: 100%; height: 100%;
@ -15,30 +15,30 @@ body.t-s8 {
color: black; color: black;
} }
/*metro theme with less box shadows*/ /* metro theme with less box shadows */
.t-s8 input,
.t-s8 input, .t-s8 select { .t-s8 select {
border: 0.1rem solid #A9A9A9; border: 0.1rem solid #a9a9a9;
} }
.t-s8 .c-tt-buy-button--unlocked { .t-s8 .c-tt-buy-button--unlocked {
background: #212121; background: #212121;
color: #00BCD4; color: #00bcd4;
border: 0.1rem solid #00BCD4; border: 0.1rem solid #00bcd4;
} }
.t-s8 .c-tt-buy-button--unlocked:hover { .t-s8 .c-tt-buy-button--unlocked:hover {
color: #212121; color: #212121;
background: #00BCD4; background: #00bcd4;
} }
.t-s8 .c-tt-buy-button--locked { .t-s8 .c-tt-buy-button--locked {
background: #9E9E9E; background: #9e9e9e;
border: none; border: none;
box-shadow: 1px 1px 1px 0 #000; box-shadow: 1px 1px 1px 0 #000000;
} }
.t-s8 .c-tt-buy-button--locked:hover { .t-s8 .c-tt-buy-button--locked:hover {
background: #EF5350; background: #ef5350;
} }

3
public/stylesheets/theme-S9.css
View File

@ -1,10 +1,11 @@
* { * {
color: transparent !important; color: transparent !important;
text-shadow: none !important; text-shadow: none !important;
-webkit-user-select: none;
user-select: none; user-select: none;
} }
[ach-tooltip]:before { [ach-tooltip]::before {
color: transparent; color: transparent;
} }

36
public/stylesheets/time-studies.css
View File

@ -35,7 +35,7 @@
z-index: 0; z-index: 0;
} }
/*#region o-time-study*/ /* #region o-time-study */
.c-pelle-useless { .c-pelle-useless {
border: 0.1rem solid; border: 0.1rem solid;
@ -46,7 +46,7 @@
height: 10rem; height: 10rem;
transition-duration: 0.2s; transition-duration: 0.2s;
border-radius: var(--var-border-radius, 0.4rem); border-radius: var(--var-border-radius, 0.4rem);
font-size: 1.0rem; font-size: 1rem;
} }
.c-pelle-useless-available { .c-pelle-useless-available {
@ -80,7 +80,7 @@
height: 10rem; height: 10rem;
transition-duration: 0.2s; transition-duration: 0.2s;
border-radius: var(--var-border-radius, 0.4rem); border-radius: var(--var-border-radius, 0.4rem);
font-size: 1.0rem; font-size: 1rem;
} }
.o-time-study--available { .o-time-study--available {
@ -115,9 +115,9 @@
} }
@keyframes a-time-study { @keyframes a-time-study {
0% { box-shadow: inset 0 0 0.3rem 0 } 0% { box-shadow: inset 0 0 0.3rem 0; }
50% { box-shadow: inset 0 0 2rem 0 } 50% { box-shadow: inset 0 0 2rem 0; }
100% { box-shadow: inset 0 0 0.3rem 0 } 100% { box-shadow: inset 0 0 0.3rem 0; }
} }
.o-time-study--small { .o-time-study--small {
@ -231,7 +231,7 @@
} }
.o-time-study-dilation--available:hover { .o-time-study-dilation--available:hover {
color: #64DD17; color: #64dd17;
background-color: white; background-color: white;
animation: a-time-study-dilation 10s infinite; animation: a-time-study-dilation 10s infinite;
} }
@ -260,11 +260,11 @@
} }
@keyframes a-time-study-dilation { @keyframes a-time-study-dilation {
0% { box-shadow: inset 0.5rem 0 2rem } 0% { box-shadow: inset 0.5rem 0 2rem; }
25% { box-shadow: inset 0 0.5rem 2rem } 25% { box-shadow: inset 0 0.5rem 2rem; }
50% { box-shadow: inset -0.5rem 0 2rem } 50% { box-shadow: inset -0.5rem 0 2rem; }
75% { box-shadow: inset 0 -0.5rem 2rem } 75% { box-shadow: inset 0 -0.5rem 2rem; }
100% { box-shadow: inset 0.5rem 0 2rem } 100% { box-shadow: inset 0.5rem 0 2rem; }
} }
.o-time-study-normal--unavailable { .o-time-study-normal--unavailable {
@ -394,11 +394,11 @@
} }
@keyframes a-eternity-challenge-running { @keyframes a-eternity-challenge-running {
0% { box-shadow: inset 1rem 0 3rem #490066 } 0% { box-shadow: inset 1rem 0 3rem #490066; }
25% { box-shadow: inset 0 0.5rem 3rem #490066 } 25% { box-shadow: inset 0 0.5rem 3rem #490066; }
50% { box-shadow: inset -1rem 0 3rem #490066 } 50% { box-shadow: inset -1rem 0 3rem #490066; }
75% { box-shadow: inset 0 -0.5rem 3rem #490066 } 75% { box-shadow: inset 0 -0.5rem 3rem #490066; }
100% { box-shadow: inset 1rem 0 3rem #490066 } 100% { box-shadow: inset 1rem 0 3rem #490066; }
} }
.o-time-study-dilation--bought { .o-time-study-dilation--bought {
@ -481,7 +481,7 @@
cursor: default; cursor: default;
} }
/*#endregion o-time-study*/ /* #endregion o-time-study */
.o-time-study-connection { .o-time-study-connection {
/* This one should be px, because it rem svg behaves weirdly under scale */ /* This one should be px, because it rem svg behaves weirdly under scale */

15
public/stylesheets/tooltips.css
View File

@ -5,7 +5,7 @@
} }
.general-tooltip .tooltip-inner { .general-tooltip .tooltip-inner {
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 90%);
color: white; color: white;
border-radius: var(--var-border-radius, 3px); border-radius: var(--var-border-radius, 3px);
width: 160px; width: 160px;
@ -14,6 +14,7 @@
font-family: Typewriter, serif; font-family: Typewriter, serif;
font-size: 14px; font-size: 14px;
line-height: 1.2; line-height: 1.2;
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -47,7 +48,7 @@
height: 0; height: 0;
position: absolute; position: absolute;
margin: 5px; margin: 5px;
border: solid rgba(0, 0, 0, 0.9); border: solid rgba(0, 0, 0, 90%);
z-index: 1; z-index: 1;
} }
@ -56,7 +57,7 @@
} }
.general-tooltip[x-placement^="top"] .tooltip-arrow { .general-tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px !important; border-width: 5px 5px 0 !important;
border-left-color: transparent !important; border-left-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
@ -71,7 +72,7 @@
} }
.general-tooltip[x-placement^="bottom"] .tooltip-arrow { .general-tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px; border-width: 0 5px 5px;
border-left-color: transparent !important; border-left-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;
border-top-color: transparent !important; border-top-color: transparent !important;
@ -116,20 +117,20 @@
color: black; color: black;
padding: 24px; padding: 24px;
border-radius: var(--var-border-radius, 5px); border-radius: var(--var-border-radius, 5px);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 30px rgba(0, 0, 0, 10%);
} }
.general-tooltip.popover .popover-arrow { .general-tooltip.popover .popover-arrow {
border-color: #f9f9f9; border-color: #f9f9f9;
} }
.general-tooltip[aria-hidden='true'] { .general-tooltip[aria-hidden="true"] {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s;
} }
.general-tooltip[aria-hidden='false'] { .general-tooltip[aria-hidden="false"] {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: opacity 0.3s; transition: opacity 0.3s;

3
public/stylesheets/vue-sfc-classes.css
View File

@ -45,6 +45,7 @@
white-space: nowrap; white-space: nowrap;
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -86,7 +87,7 @@
} }
.old-ui .t-s1 .c-news-ticker { .old-ui .t-s1 .c-news-ticker {
background-color: #dbd242 background-color: #dbd242;
} }
.old-ui .t-s6 .c-news-ticker, .old-ui .t-s6 .c-news-ticker,

8
src/components/BlobBackground.vue
View File

@ -46,12 +46,14 @@ export default {
<style scoped> <style scoped>
.o-blob-background { .o-blob-background {
fill: #fbc21b; fill: #fbc21b;
text-shadow: 0 0 5px #000, text-shadow:
0 0 5px #000, 0 0 5px #000000,
0 0 5px #000; 0 0 5px #000000,
0 0 5px #000000;
opacity: 0.3; opacity: 0.3;
overflow: visible; overflow: visible;
pointer-events: none; pointer-events: none;
-webkit-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
} }

8
src/components/BlobSnowflake.vue
View File

@ -98,12 +98,14 @@ export default {
<style scoped> <style scoped>
.o-blob-snowflake { .o-blob-snowflake {
fill: #fbc21b; fill: #fbc21b;
text-shadow: 0 0 5px #000, text-shadow:
0 0 5px #000, 0 0 5px #000000,
0 0 5px #000; 0 0 5px #000000,
0 0 5px #000000;
opacity: 0.9; opacity: 0.9;
overflow: visible; overflow: visible;
pointer-events: none; pointer-events: none;
-webkit-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
} }

2
src/components/BlobSnowflakes.vue
View File

@ -75,6 +75,7 @@ export default {
z-index: 9999; z-index: 9999;
overflow: visible; overflow: visible;
pointer-events: none; pointer-events: none;
-webkit-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
} }
@ -88,6 +89,7 @@ export default {
z-index: -9999; z-index: -9999;
overflow: visible; overflow: visible;
pointer-events: none; pointer-events: none;
-webkit-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
} }

12
src/components/CustomizeableTooltip.vue
View File

@ -151,8 +151,8 @@ export default {
padding: 0.7rem; padding: 0.7rem;
width: 16rem; width: 16rem;
border-radius: var(--var-border-radius, 0.3rem); border-radius: var(--var-border-radius, 0.3rem);
background-color: hsla(0, 0%, 5%, 0.9); background-color: hsla(0deg, 0%, 5%, 90%);
color: #fff; color: #ffffff;
content: attr(ach-tooltip); content: attr(ach-tooltip);
text-align: center; text-align: center;
font-size: 1.4rem; font-size: 1.4rem;
@ -180,7 +180,7 @@ export default {
} }
.c-tooltip--top.c-tooltip-arrow { .c-tooltip--top.c-tooltip-arrow {
border-top: 0.55rem solid hsla(0, 0%, 5%, 0.9); border-top: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
border-bottom: 0; border-bottom: 0;
} }
@ -189,7 +189,7 @@ export default {
} }
.c-tooltip--bottom.c-tooltip-arrow { .c-tooltip--bottom.c-tooltip-arrow {
border-bottom: 0.55rem solid hsla(0, 0%, 5%, 0.9); border-bottom: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
border-top: 0; border-top: 0;
} }
@ -198,7 +198,7 @@ export default {
} }
.c-tooltip--right.c-tooltip-arrow { .c-tooltip--right.c-tooltip-arrow {
border-right: 0.55rem solid hsla(0, 0%, 5%, 0.9); border-right: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
border-left: 0; border-left: 0;
} }
@ -207,7 +207,7 @@ export default {
} }
.c-tooltip--left.c-tooltip-arrow { .c-tooltip--left.c-tooltip-arrow {
border-left: 0.55rem solid hsla(0, 0%, 5%, 0.9); border-left: 0.55rem solid hsla(0deg, 0%, 5%, 90%);
border-right: 0; border-right: 0;
} }

2
src/components/ExpandingControlBox.vue
View File

@ -208,12 +208,10 @@ export default {
width: 100%; width: 100%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
-webkit-transform: translateX(-50%);
} }
.l-expanding-control-box__container--transition { .l-expanding-control-box__container--transition {
transition: max-height 0.5s; transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
} }
.l-expanding-control-box__button { .l-expanding-control-box__button {

3
src/components/SaveTimer.vue
View File

@ -47,6 +47,7 @@ export default {
border-top: 0.1rem solid var(--color-accent); border-top: 0.1rem solid var(--color-accent);
border-right: 0.1rem solid var(--color-accent); border-right: 0.1rem solid var(--color-accent);
cursor: pointer; cursor: pointer;
-webkit-user-select: none;
user-select: none; user-select: none;
padding: 0 0.5rem; padding: 0 0.5rem;
z-index: 5; z-index: 5;
@ -54,7 +55,7 @@ export default {
.t-inverted .o-save-timer, .t-inverted .o-save-timer,
.t-inverted-metro .o-save-timer { .t-inverted-metro .o-save-timer {
filter: invert(100%) filter: invert(100%);
} }
.t-s2 .o-save-timer { .t-s2 .o-save-timer {

1
src/components/SpeedrunStatus.vue
View File

@ -114,6 +114,7 @@ export default {
background-color: var(--color-base); background-color: var(--color-base);
white-space: nowrap; white-space: nowrap;
border: var(--var-border-width, 0.2rem) solid var(--color-accent); border: var(--var-border-width, 0.2rem) solid var(--color-accent);
-webkit-user-select: none;
user-select: none; user-select: none;
padding: 0.8rem 2rem; padding: 0.8rem 2rem;
z-index: 5; z-index: 5;

5
src/components/modals/InformationModal.vue
View File

@ -95,6 +95,7 @@ export default {
.l-information-modal { .l-information-modal {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* stylelint-disable-next-line unit-allowed-list */
width: calc(100vw - 50vh); width: calc(100vw - 50vh);
justify-content: space-around; justify-content: space-around;
} }
@ -125,14 +126,14 @@ export default {
} }
.c-socials--icon__wrapper { .c-socials--icon__wrapper {
transition: all .2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.c-socials--icon__wrapper:hover { .c-socials--icon__wrapper:hover {
transform: scale(1.1); transform: scale(1.1);
} }
[ach-tooltip]:before { [ach-tooltip]::before {
width: 20rem; width: 20rem;
font-size: 1.5rem; font-size: 1.5rem;
} }

2
src/components/modals/ModalProgressBar.vue
View File

@ -81,7 +81,9 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 40rem; width: 40rem;
/* stylelint-disable-next-line unit-allowed-list */
left: 50vw; left: 50vw;
/* stylelint-disable-next-line unit-allowed-list */
top: 50vh; top: 50vh;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

2
src/components/tabs/automator/AutomatorControls.vue
View File

@ -115,7 +115,7 @@ export default {
border-color: var(--color-reality-light); border-color: var(--color-reality-light);
} }
.c-automator__button.fa-eject:before { .c-automator__button.fa-eject::before {
transform: rotate(90deg); transform: rotate(90deg);
} }
</style> </style>

6
src/components/tabs/automator/AutomatorEditor.vue
View File

@ -163,7 +163,7 @@ export default {
z-index: 1; z-index: 1;
} }
.c-slider-toggle-button:before { .c-slider-toggle-button::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
@ -176,12 +176,12 @@ export default {
z-index: 0; z-index: 0;
} }
.c-slider-toggle-button--right:before { .c-slider-toggle-button--right::before {
left: 3rem; left: 3rem;
background-color: white; background-color: white;
} }
.tutorial--glow:after { .tutorial--glow::after {
z-index: 2; z-index: 2;
} }
</style> </style>

2
src/components/tabs/black-hole/BlackHoleTab.vue
View File

@ -219,7 +219,7 @@ export default {
<style scoped> <style scoped>
.l-auto-pause-button { .l-auto-pause-button {
width: 30rem width: 30rem;
} }
.l-pre-unlock-text { .l-pre-unlock-text {

2
src/components/tabs/celestial-laitela/SingularityPane.vue
View File

@ -180,6 +180,6 @@ export default {
<style scoped> <style scoped>
.c-laitela-singularity__cap-control { .c-laitela-singularity__cap-control {
margin: 0 0.3rem 1rem 0.3rem; margin: 0 0.3rem 1rem;
} }
</style> </style>

37
src/components/tabs/celestial-pelle/CreditsContainer.vue
View File

@ -132,7 +132,6 @@ export default {
font-size: 1.3rem; font-size: 1.3rem;
} }
.c-credits-cel-symbol { .c-credits-cel-symbol {
position: absolute; position: absolute;
font-size: 14rem; font-size: 14rem;
@ -155,7 +154,7 @@ export default {
.c-effarig-credits { .c-effarig-credits {
left: 80%; left: 80%;
top: 50rem; top: 50rem;
color: #f40; color: #ff4400;
animation: a-effarig-credits 4s ease-in-out infinite; animation: a-effarig-credits 4s ease-in-out infinite;
} }
@ -209,9 +208,20 @@ export default {
} }
@keyframes a-effarig-credits { @keyframes a-effarig-credits {
0% { opacity: 0.8; text-shadow: 0 0 3rem; } 0% {
50% { opacity: 1; text-shadow: 0 0 4rem, 0 0 4rem; } opacity: 0.8;
100% { opacity: 0.8; text-shadow: 0 0 3rem; } text-shadow: 0 0 3rem;
}
50% {
opacity: 1;
text-shadow: 0 0 4rem, 0 0 4rem;
}
100% {
opacity: 0.8;
text-shadow: 0 0 3rem;
}
} }
@keyframes a-enslaved-credits { @keyframes a-enslaved-credits {
@ -232,9 +242,20 @@ perfectly the same. */
} }
@keyframes a-ra-credits { @keyframes a-ra-credits {
0% { opacity: 0.1; transform: translateX(-50%) scale(0.2); } 0% {
50% { opacity: 0.4; transform: translateX(-50%) scale(0.9); } opacity: 0.1;
100% { opacity: 0.1; transform: translateX(-50%) scale(0.2); } transform: translateX(-50%) scale(0.2);
}
50% {
opacity: 0.4;
transform: translateX(-50%) scale(0.9);
}
100% {
opacity: 0.1;
transform: translateX(-50%) scale(0.2);
}
} }
@keyframes a-laitela-credits { @keyframes a-laitela-credits {

4
src/components/tabs/celestial-pelle/FadeToBlack.vue
View File

@ -25,7 +25,7 @@ export default {
</template> </template>
<style scoped> <style scoped>
.black-overlay { .black-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -33,5 +33,5 @@ export default {
height: 100%; height: 100%;
background: black; background: black;
z-index: 8; z-index: 8;
} }
</style> </style>

6
src/components/tabs/celestial-pelle/PelleBarPanel.vue
View File

@ -75,6 +75,7 @@ export default {
left: 1.5rem; left: 1.5rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer;
} }
.l-pelle-panel-container { .l-pelle-panel-container {
@ -82,6 +83,7 @@ export default {
margin: 1rem; margin: 1rem;
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base); border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
border-radius: var(--var-border-radius, 0.2rem); border-radius: var(--var-border-radius, 0.2rem);
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -102,8 +104,4 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.c-collapse-icon-clickable {
cursor: pointer;
}
</style> </style>

8
src/components/tabs/celestial-pelle/PelleGalaxyGeneratorPanel.vue
View File

@ -156,6 +156,7 @@ export default {
left: 1.5rem; left: 1.5rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer;
} }
.l-pelle-panel-container { .l-pelle-panel-container {
@ -163,6 +164,7 @@ export default {
margin: 1rem; margin: 1rem;
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base); border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
border-radius: var(--var-border-radius, 0.2rem); border-radius: var(--var-border-radius, 0.2rem);
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -196,7 +198,6 @@ export default {
font-size: 2.5rem; font-size: 2.5rem;
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base)); background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
background-clip: text; background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -221,6 +222,7 @@ export default {
height: 11.4rem; height: 11.4rem;
overflow: hidden; overflow: hidden;
box-shadow: inset 0 0 0.1rem 0.1rem var(--color-pelle--base); box-shadow: inset 0 0 0.1rem 0.1rem var(--color-pelle--base);
/* box-shadow is here to prevent a weird grey border forming around the background */ /* box-shadow is here to prevent a weird grey border forming around the background */
} }
@ -257,8 +259,4 @@ export default {
font-size: 2rem; font-size: 2rem;
text-shadow: 0.2rem 0.2rem 0.2rem black; text-shadow: 0.2rem 0.2rem 0.2rem black;
} }
.c-collapse-icon-clickable {
cursor: pointer;
}
</style> </style>

3
src/components/tabs/celestial-pelle/PelleRift.vue
View File

@ -100,8 +100,9 @@ export default {
margin-top: 1rem; margin-top: 1rem;
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base); border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
/* transparent crimson */ /* transparent crimson */
box-shadow: inset 0 0 1rem 0.1rem rgba(237, 20, 61, 0.45), 0 0 1rem 0.1rem rgba(237, 20, 61, 0.45); box-shadow: inset 0 0 1rem 0.1rem rgba(237, 20, 61, 45%), 0 0 1rem 0.1rem rgba(237, 20, 61, 45%);
} }
.t-s1 .c-pelle-rift { .t-s1 .c-pelle-rift {

62
src/components/tabs/celestial-pelle/PelleRiftBar.vue
View File

@ -184,6 +184,7 @@ export default {
.c-pelle-rift-bar { .c-pelle-rift-bar {
--color-bar-bg: #1e1e1e; --color-bar-bg: #1e1e1e;
height: 5rem; height: 5rem;
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--secondary); border: var(--var-border-width, 0.2rem) solid var(--color-pelle--secondary);
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
@ -195,16 +196,12 @@ export default {
align-items: center; align-items: center;
background: var(--color-bar-bg); background: var(--color-bar-bg);
} }
.c-pelle-rift-bar--filling, .c-pelle-rift-bar--filling,
.c-pelle-rift-bar--idle { .c-pelle-rift-bar--idle {
cursor: pointer; cursor: pointer;
} }
.c-pelle-rift-bar--idle .l-overflow-hidden,
.c-pelle-rift-bar--idle .o-pelle-rift-bar-percentage {
opacity: 0.6;
}
.l-overflow-hidden { .l-overflow-hidden {
overflow: hidden; overflow: hidden;
border: var(--var-border-width, 0.16rem) solid transparent; border: var(--var-border-width, 0.16rem) solid transparent;
@ -231,7 +228,6 @@ export default {
box-shadow: inset 0 0 0.3rem 0.1rem var(--color-pelle--secondary); box-shadow: inset 0 0 0.3rem 0.1rem var(--color-pelle--secondary);
} }
/* FILLING STYLES */ /* FILLING STYLES */
.o-pelle-rift-bar-fill { .o-pelle-rift-bar-fill {
position: absolute; position: absolute;
@ -251,10 +247,8 @@ export default {
background: var(--color-pelle--base); background: var(--color-pelle--base);
z-index: 0; z-index: 0;
filter: brightness(0.5); filter: brightness(0.5);
z-index: 0;
} }
/* SPECIAL BAR OVERLAY STYLES */ /* SPECIAL BAR OVERLAY STYLES */
.o-pelle-rift-bar-permanent { .o-pelle-rift-bar-permanent {
position: absolute; position: absolute;
@ -278,15 +272,15 @@ export default {
@keyframes a-pelle-bar-overfill-pulse { @keyframes a-pelle-bar-overfill-pulse {
/* #ed143d66 is the base pelle colour except transparent. */ /* #ed143d66 is the base pelle colour except transparent. */
0% { box-shadow: 0 0 0.7rem 1rem rgba(237, 20, 61, 0.4); } 0% { box-shadow: 0 0 0.7rem 1rem rgba(237, 20, 61, 40%); }
50% { box-shadow: 0 0 1.5rem 0 rgba(237, 20, 61, 0.4); } 50% { box-shadow: 0 0 1.5rem 0 rgba(237, 20, 61, 40%); }
100% { box-shadow: 0 0 0.7rem 1rem rgba(237, 20, 61, 0.4); } 100% { box-shadow: 0 0 0.7rem 1rem rgba(237, 20, 61, 40%); }
} }
@keyframes a-pelle-bar-overfill-pulse-but-green { @keyframes a-pelle-bar-overfill-pulse-but-green {
0% { box-shadow: 0 0 0.7rem 1rem rgba(124, 183, 39, 0.533); } 0% { box-shadow: 0 0 0.7rem 1rem rgba(124, 183, 39, 53.3%); }
50% { box-shadow: 0 0 1.5rem 0rem rgba(124, 183, 39, 0.533); } 50% { box-shadow: 0 0 1.5rem 0 rgba(124, 183, 39, 53.3%); }
100% { box-shadow: 0 0 0.7rem 1rem rgba(124, 183, 39, 0.533); } 100% { box-shadow: 0 0 0.7rem 1rem rgba(124, 183, 39, 53.3%); }
} }
.c-pelle-rift-bar-overfill-container { .c-pelle-rift-bar-overfill-container {
@ -297,13 +291,27 @@ export default {
animation: a-pelle-bar-overfill-pulse-but-green 1s infinite linear; animation: a-pelle-bar-overfill-pulse-but-green 1s infinite linear;
} }
/* ACTIVE RIFT FILLING STYLES */ /* ACTIVE RIFT FILLING STYLES */
@keyframes a-pelle-bar-filling-sweep { @keyframes a-pelle-bar-filling-sweep {
0% { left: 0; width: 0; } 0% {
10% { left: 0; width: 2rem; } left: 0;
90% { left: calc(100% - 2rem); width: 2rem; } width: 0;
100% { left: 100%; width: 0; } }
10% {
left: 0;
width: 2rem;
}
90% {
left: calc(100% - 2rem);
width: 2rem;
}
100% {
left: 100%;
width: 0;
}
} }
.o-pelle-rift-bar-active-fill { .o-pelle-rift-bar-active-fill {
@ -321,21 +329,27 @@ export default {
color: white; color: white;
text-shadow: 0.1rem 0.1rem 0.2rem var(--color-pelle--base); text-shadow: 0.1rem 0.1rem 0.2rem var(--color-pelle--base);
z-index: 2; z-index: 2;
/* This keeps the percentage from blocking the hover area */ /* This keeps the percentage from blocking the hover area */
pointer-events: none; pointer-events: none;
} }
.c-pelle-rift-bar--idle .l-overflow-hidden,
.c-pelle-rift-bar--idle .o-pelle-rift-bar-percentage {
opacity: 0.6;
}
/* MILESTONE STYLES */ /* MILESTONE STYLES */
.o-pelle-rift-bar-milestone-hover-container { .o-pelle-rift-bar-milestone-hover-container {
height: 100%; height: 100%;
} }
@keyframes a-pelle-bar-unfinished-milestone-flash { @keyframes a-pelle-bar-unfinished-milestone-flash {
0% { opacity: 1 } 0% { opacity: 1; }
20% { opacity: 1 } 20% { opacity: 1; }
50% { opacity: 0.3 } 50% { opacity: 0.3; }
80% { opacity: 1 } 80% { opacity: 1; }
100% { opacity: 1 } 100% { opacity: 1; }
} }
.o-pelle-rift-bar-milestone-line { .o-pelle-rift-bar-milestone-line {

2
src/components/tabs/celestial-pelle/PelleTab.vue
View File

@ -187,7 +187,7 @@ export default {
} }
@keyframes roll { @keyframes roll {
100% { transform: rotateY(360deg) } 100% { transform: rotateY(360deg); }
} }
.pelle-icon { .pelle-icon {

7
src/components/tabs/celestial-pelle/PelleUpgrade.vue
View File

@ -184,7 +184,7 @@ export default {
transition-duration: 0.3s; transition-duration: 0.3s;
} }
/* stylelint-disable-next-line selector-class-pattern */
.c-pelle-upgrade--galaxyGenerator { .c-pelle-upgrade--galaxyGenerator {
background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base)); background: linear-gradient(var(--color-pelle--secondary), var(--color-pelle--base));
color: black; color: black;
@ -211,6 +211,7 @@ export default {
color: black; color: black;
} }
/* stylelint-disable-next-line selector-class-pattern */
.c-pelle-upgrade--galaxyGenerator:hover, .c-pelle-upgrade--galaxyGenerator:hover,
.c-pelle-upgrade--unavailable:hover, .c-pelle-upgrade--unavailable:hover,
.c-pelle-upgrade--faded:hover, .c-pelle-upgrade--faded:hover,
@ -220,12 +221,12 @@ export default {
} }
.l-pelle-upgrade-gap { .l-pelle-upgrade-gap {
height: 0.5em; height: 0.5rem;
flex-shrink: 0; flex-shrink: 0;
} }
.c-improved-effect { .c-improved-effect {
color: #0b0; color: #00bb00;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }

6
src/components/tabs/celestial-pelle/PelleUpgradePanel.vue
View File

@ -146,6 +146,7 @@ export default {
left: 1.5rem; left: 1.5rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer;
} }
.l-pelle-panel-container { .l-pelle-panel-container {
@ -153,6 +154,7 @@ export default {
margin: 1rem; margin: 1rem;
border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base); border: var(--var-border-width, 0.2rem) solid var(--color-pelle--base);
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -209,8 +211,4 @@ export default {
font-size: 2rem; font-size: 2rem;
color: var(--color-pelle--base); color: var(--color-pelle--base);
} }
.c-collapse-icon-clickable {
cursor: pointer;
}
</style> </style>

2
src/components/tabs/celestial-pelle/RemnantGainFactor.vue
View File

@ -153,7 +153,7 @@ export default {
.l-remnant-factors-row { .l-remnant-factors-row {
display: flex; display: flex;
width: 100% width: 100%;
} }
.l-remnant-factors-col { .l-remnant-factors-col {

2
src/components/tabs/celestial-ra/RaPet.vue
View File

@ -307,11 +307,13 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.c-ra-pet-upgrade-memory { .c-ra-pet-upgrade-memory {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.c-ra-pet-upgrade-chunk { .c-ra-pet-upgrade-chunk {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;

2
src/components/tabs/celestial-v/VTab.vue
View File

@ -335,6 +335,6 @@ export default {
} }
.l-v-goal-reduction-spacer { .l-v-goal-reduction-spacer {
height :0.8rem; height: 0.8rem;
} }
</style> </style>

3
src/components/tabs/glyphs/GlyphLevelsAndWeights.vue
View File

@ -547,7 +547,6 @@ function roundPreservingSum(data) {
<style scoped> <style scoped>
.l-glyph-level-and-weights-note { .l-glyph-level-and-weights-note {
grid-column-start: 1; grid-column: 1 / 5;
grid-column-end: 5;
} }
</style> </style>

1
src/components/tabs/glyphs/sidebar/SelectedEffectToggle.vue
View File

@ -106,6 +106,7 @@ export default {
color: black; color: black;
font-size: 1rem; font-size: 1rem;
position: absolute; position: absolute;
/* -0.1rem = -1px, needed because CSS renders a black border between the check and the border of the selector /* -0.1rem = -1px, needed because CSS renders a black border between the check and the border of the selector
otherwise */ otherwise */
top: -0.1rem; top: -0.1rem;

4
src/components/tabs/perks/PerkPointLabel.vue
View File

@ -71,7 +71,7 @@ export default {
</template> </template>
<style scoped> <style scoped>
.perk-settings > button { .perk-settings > button {
margin-right: 1rem; margin-right: 1rem;
} }
</style> </style>

1
src/components/tabs/replicanti/ReplicantiTab.vue
View File

@ -215,4 +215,5 @@ export default {
</template> </template>
<style scoped> <style scoped>
</style> </style>

4
src/components/tabs/shop/ShopButton.vue
View File

@ -50,7 +50,7 @@ export default {
padding: 1rem; padding: 1rem;
border: var(--var-border-width, 0.2rem) solid #1f7d1f; border: var(--var-border-width, 0.2rem) solid #1f7d1f;
border-radius: var(--var-border-radius, 0.5rem); border-radius: var(--var-border-radius, 0.5rem);
margin: .5rem; margin: 0.5rem;
background: #3c3c3c; background: #3c3c3c;
color: white; color: white;
} }
@ -63,7 +63,7 @@ export default {
margin: auto; margin: auto;
align-items: center; align-items: center;
font-family: Typewriter; font-family: Typewriter;
padding: .5rem 2rem; padding: 0.5rem 2rem;
margin-top: 1rem; margin-top: 1rem;
cursor: pointer; cursor: pointer;
} }

2
src/components/tabs/shop/ShopTab.vue
View File

@ -146,7 +146,7 @@ export default {
margin: auto; margin: auto;
align-items: center; align-items: center;
font-family: Typewriter; font-family: Typewriter;
padding: .5rem 2rem; padding: 0.5rem 2rem;
margin-top: 1rem; margin-top: 1rem;
cursor: pointer; cursor: pointer;
} }

4
src/components/tabs/time-studies/tt-shop/TimeStudySaveLoadButton.vue
View File

@ -123,12 +123,12 @@ export default {
<style scoped> <style scoped>
.l-tt-save-load-btn__wrapper { .l-tt-save-load-btn__wrapper {
margin: 0.3em; margin: 0.3rem;
position: relative; position: relative;
} }
.l-tt-save-load-btn { .l-tt-save-load-btn {
min-width: 2em; min-width: 2rem;
} }
.l-tt-save-load-btn__menu { .l-tt-save-load-btn__menu {

6
src/components/tabs/time-studies/tt-shop/TimeTheoremShop.vue
View File

@ -131,7 +131,7 @@ export default {
</script> </script>
<template> <template>
<div class="TTbuttons"> <div class="time-theorem-buttons">
<div class="ttshop-container ttshop-background"> <div class="ttshop-container ttshop-background">
<div <div
data-role="page" data-role="page"
@ -219,7 +219,7 @@ export default {
@click="minimize" @click="minimize"
> >
<span <span
id="minimizeArrow" class="minimize-arrow"
:style="minimizeArrowStyle" :style="minimizeArrowStyle"
>▼</span> >▼</span>
</button> </button>
@ -240,6 +240,6 @@ export default {
} }
.ttbuttons-bottom-row-hide { .ttbuttons-bottom-row-hide {
height: 0rem; height: 0;
} }
</style> </style>

1
src/components/ui-modes/HeaderBlackHole.vue
View File

@ -120,6 +120,7 @@ export default {
margin: 0.2rem; margin: 0.2rem;
vertical-align: middle; vertical-align: middle;
} }
.c-black-hole-status-text { .c-black-hole-status-text {
margin: 0 0.8rem; margin: 0 0.8rem;
} }

2
src/components/ui-modes/modern/ModernTabButton.vue
View File

@ -105,7 +105,7 @@ export default {
<style scoped> <style scoped>
.o-tab-btn::before { .o-tab-btn::before {
content: ''; content: "";
width: 0; width: 0;
height: 100%; height: 100%;
position: absolute; position: absolute;