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

Make relative prestige gain coloring depend on theme text color, fixes #2858

Browse Source
This commit is contained in:
SpectralFlame 2022-07-28 10:18:58 -05:00 committed by cyip92
parent 739080271e
commit ed840093c0
4 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
:root .t-normal,
:root .t-s9 {
--color-text: white;
--color-text: #ffffff;
--color-text-inverted: black;
--color-base: #1d1b22;
--color-accent: #df5050;

10
public/stylesheets/styles.css
View File

@ -48,7 +48,9 @@ html {
}
:root {
--color-text: black;
/* Don't change this instance of --color-text or any of its values in other themes to not be hex; it's parsed as hex
elsewhere to provide theme-dependent color gradients */
--color-text: #000000;
--color-text-inverted: white;
--color-base: #f2f2f2;
--color-disabled: #a3a3a3;
@ -94,7 +96,7 @@ html {
:root .t-metro,
:root .t-inverted-metro,
:root .t-s8 {
--color-text: black;
--color-text: #000000;
--color-text-inverted: white;
--color-base: #eeeeee;
--color-disabled: #9e9e9e;
@ -151,7 +153,7 @@ html {
}
:root .t-s1 {
--color-text: black;
--color-text: #000000;
--color-text-inverted: #dbd242;
--color-base: #dbd242;
--color-disabled: #9a921d;
@ -172,7 +174,7 @@ html {
}
:root .t-s4 {
--color-text: black;
--color-text: #000000;
--color-text-inverted: white;
--color-base: #1b00ff;
--color-accent: #1b00ff;

28
src/components/ui-modes/HeaderBigCrunchButton.vue
View File

@ -36,14 +36,28 @@ export default {
"transition-duration": "0.2s"
};
const ratio = this.gainedIP.log10() / this.currentIP.log10();
const rgb = [
Math.round(255 - (ratio - 1) * 10 * 255),
Math.round(255 - (1 - ratio) * 10 * 255),
ratio > 1
? Math.round(255 - (ratio - 1) * 10 * 255)
: Math.round(255 - (1 - ratio) * 10 * 255)
// Dynamically generate red-text-green based on the CSS entry for text color. This returns a string
// as " #xxxxxx" (Yes, there's a leading space). stepRGB is an array specifying the three RGB codes,
// which is then interpolated in order to generate the final color; only ratios between 0.9-1.1 give
// a color gradient
const textHexCode = getComputedStyle(document.body).getPropertyValue("--color-text").substring(2);
const stepRGB = [
[255, 0, 0],
[
parseInt(textHexCode.substring(0, 2), 16),
parseInt(textHexCode.substring(2, 4), 16),
parseInt(textHexCode.substring(4), 16)
],
[0, 255, 0]
];
const ratio = this.gainedIP.log10() / this.currentIP.log10();
const interFn = index => {
if (ratio < 0.9) return stepRGB[0][index];
if (ratio < 1) return Math.round(stepRGB[0][index] + stepRGB[1][index] * 10 * (ratio - 0.9));
if (ratio < 1.1) return Math.round(stepRGB[1][index] + stepRGB[2][index] * 10 * (ratio - 1));
return stepRGB[2][index];
};
const rgb = [interFn(0), interFn(1), interFn(2)];
return {
color: `rgb(${rgb.join(",")})`,
"transition-duration": "0.2s"

30
src/components/ui-modes/HeaderEternityButton.vue
View File

@ -45,18 +45,32 @@ export default {
"transition-duration": "0s"
};
if (this.hover) return {
color: "black",
color: "var(--color-text)",
"transition-duration": "0.2s"
};
const ratio = this.gainedEP.log10() / this.currentEP.log10();
const rgb = [
Math.round(255 - (ratio - 1) * 10 * 255),
Math.round(255 - (1 - ratio) * 10 * 255),
ratio > 1
? Math.round(255 - (ratio - 1) * 10 * 255)
: Math.round(255 - (1 - ratio) * 10 * 255)
// Dynamically generate red-text-green based on the CSS entry for text color. This returns a string
// as " #xxxxxx" (Yes, there's a leading space). stepRGB is an array specifying the three RGB codes,
// which is then interpolated in order to generate the final color; only ratios between 0.9-1.1 give
// a color gradient
const textHexCode = getComputedStyle(document.body).getPropertyValue("--color-text").substring(2);
const stepRGB = [
[255, 0, 0],
[
parseInt(textHexCode.substring(0, 2), 16),
parseInt(textHexCode.substring(2, 4), 16),
parseInt(textHexCode.substring(4), 16)
],
[0, 255, 0]
];
const ratio = this.gainedEP.log10() / this.currentEP.log10();
const interFn = index => {
if (ratio < 0) return stepRGB[0][index];
if (ratio < 1) return Math.round(stepRGB[0][index] + stepRGB[1][index] * ratio);
if (ratio < 2) return Math.round(stepRGB[1][index] + stepRGB[2][index] * (ratio - 1));
return stepRGB[2][index];
};
const rgb = [interFn(0), interFn(1), interFn(2)];
return {
color: `rgb(${rgb.join(",")})`,
"transition-duration": "0.2s"