repl-color -> repl_color

This commit is contained in:
Daniel Kluge 2022-10-16 00:07:02 +02:00
parent 37b723d3fb
commit a7998e48af
11 changed files with 38 additions and 38 deletions

View File

@ -1,16 +1,16 @@
import Color from "color";
export function getColors() {
const replColor = window.document.documentElement.style.getPropertyValue("--repl-color") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color") || "rgb(24, 138, 24)";
const linkColor = window.document.documentElement.style.getPropertyValue("--repl-color-link") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-link") || "rgb(31, 179, 31)";
const hintColor = window.document.documentElement.style.getPropertyValue("--repl-color-hint") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color-hint") || "rgba(24, 138, 24, 0.3)";
const replColor = window.document.documentElement.style.getPropertyValue("--repl_color") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl_color") || "rgb(24, 138, 24)";
const linkColor = window.document.documentElement.style.getPropertyValue("--repl_color-link") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl_color-link") || "rgb(31, 179, 31)";
const hintColor = window.document.documentElement.style.getPropertyValue("--repl_color-hint") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl_color-hint") || "rgba(24, 138, 24, 0.3)";
return [replColor, linkColor, hintColor];
};
export function setColors(color: Color) {
window?.document.documentElement.style.setProperty("--repl-color", color.string());
window?.document.documentElement.style.setProperty("--repl-color-link", color.lighten(0.3).rgb().string());
window?.document.documentElement.style.setProperty("--repl-color-hint", color.fade(0.7).string());
window?.document.documentElement.style.setProperty("--repl_color", color.string());
window?.document.documentElement.style.setProperty("--repl_color-link", color.lighten(0.3).rgb().string());
window?.document.documentElement.style.setProperty("--repl_color-hint", color.fade(0.7).string());
};
export class Rainbow {

View File

@ -260,9 +260,9 @@ const color: Command = {
}
if (args[0] === "reset") {
Rainbow.stop();
window.document.documentElement.style.removeProperty("--repl-color");
window.document.documentElement.style.removeProperty("--repl-color-link");
window.document.documentElement.style.removeProperty("--repl-color-hint");
window.document.documentElement.style.removeProperty("--repl_color");
window.document.documentElement.style.removeProperty("--repl_color-link");
window.document.documentElement.style.removeProperty("--repl_color-hint");
return ["Color reset."];
} else {
let color: Color;

View File

@ -61,17 +61,17 @@ const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => {
<span className={styles.divider}>|</span>
<a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank" rel="noreferrer">Bug?</a>
<span className={styles.divider}>|</span>
<a href="mailto:admin-website@c0ntroller.de" rel="noreferrer"><Envelope color="var(--repl-color)" className={styles.iconLink} alt="E-Mail" /></a>
<a href="mailto:admin-website@c0ntroller.de" rel="noreferrer"><Envelope color="var(--repl_color)" className={styles.iconLink} alt="E-Mail" /></a>
<span className={styles.divider}>|</span>
<a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer"><GithubLogo color="var(--repl-color)" className={styles.iconLink} alt="GitHub" /></a>
<a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer"><GithubLogo color="var(--repl_color)" className={styles.iconLink} alt="GitHub" /></a>
<span className={styles.divider}>|</span>
<a href="https://www.instagram.com/c0ntroller/" target="_blank" rel="noreferrer"><InstagramLogo color="var(--repl-color)" className={styles.iconLink} alt="Instagram" /></a>
<a href="https://www.instagram.com/c0ntroller/" target="_blank" rel="noreferrer"><InstagramLogo color="var(--repl_color)" className={styles.iconLink} alt="Instagram" /></a>
<span className={styles.divider}>|</span>
<a href="https://steamcommunity.com/id/c0ntroller/" target="_blank" rel="noreferrer"><GameController color="var(--repl-color)" className={styles.iconLink} alt="Steam" /></a>
<a href="https://steamcommunity.com/id/c0ntroller/" target="_blank" rel="noreferrer"><GameController color="var(--repl_color)" className={styles.iconLink} alt="Steam" /></a>
<span className={styles.divider}>|</span>
<a href="https://discordapp.com/users/224208617820127233" target="_blank" rel="noreferrer">
<span className={styles.tooltip} style={{ cursor: "pointer" }}>
<DiscordLogo color="var(--repl-color)" className={styles.iconLink} alt="Discord" />
<DiscordLogo color="var(--repl_color)" className={styles.iconLink} alt="Discord" />
<span className={styles.tooltiptext}>
C0ntroller_Z#3883
</span>

View File

@ -1,5 +1,5 @@
.spinnerPath {
stroke: var(--repl-color);
stroke: var(--repl_color);
stroke-width: 25;
fill: none;
}

View File

@ -75,7 +75,7 @@
/* Firefox */
.modalContainer {
scrollbar-width: auto;
scrollbar-color: var(--repl-color, #188a18) var(--modal-gray, #0e0f0e);
scrollbar-color: var(--repl_color, #188a18) var(--modal-gray, #0e0f0e);
}
/* Chrome, Edge, and Safari */
@ -90,7 +90,7 @@
}
.modalContainer::-webkit-scrollbar-thumb {
background-color: var(--repl-color, #188a18);
background-color: var(--repl_color, #188a18);
border-radius: 20px;
border: none;
}
@ -107,12 +107,12 @@
.pageSelector select {
background: var(--modal-gray); /* Transparent does not work for the dropdown */
color: var(--repl-color-link);
color: var(--repl_color-link);
font-size: 1rem;
}
.pageSelector a:link, .pageSelector a:visited, .pageSelector a:hover, .pageSelector a:active {
color: var(--repl-color-link);
color: var(--repl_color-link);
text-decoration: none;
}
@ -145,7 +145,7 @@
}
.fakeLink {
color: var(--repl-color-link);
color: var(--repl_color-link);
text-decoration: none;
cursor: pointer;
}

View File

@ -14,5 +14,5 @@
}
.container::-webkit-scrollbar-thumb {
background: var(--repl-color);
background: var(--repl_color);
}

View File

@ -15,13 +15,13 @@
}
.line a:link, .line a:visited, .line a:hover, .line a:active {
color: var(--repl-color-link);
color: var(--repl_color-link);
text-decoration: underline;
}
.line a::after {
content: "⤤";
color: var(--repl-color-link);
color: var(--repl_color-link);
font-size: 80%;
text-decoration: none;
}
@ -29,7 +29,7 @@
.line .cmd {
cursor: pointer;
text-decoration: underline dotted;
color: var(--repl-color-link);
color: var(--repl_color-link);
}
.line .cmd::before {content: "'"}

View File

@ -5,7 +5,7 @@
display: flex;
flex-direction: row;
flex-wrap: nowrap;
color: var(--repl-color);
color: var(--repl_color);
}
.wrapper {
@ -32,7 +32,7 @@
background: transparent;
width: 100%;
appearance: none !important;
caret-color: var(--repl-color);
caret-color: var(--repl_color);
outline: none;
}
@ -64,6 +64,6 @@
}
.completion {
color: var(--repl-color-hint);
color: var(--repl_color-hint);
flex-grow: 1;
}

View File

@ -4,7 +4,7 @@
height: 100vh;
margin: 0;
padding: 2px 10px 10px 10px;
color: var(--repl-color);
color: var(--repl_color);
background: #000;
}
@ -25,17 +25,17 @@
.header a:active,
.header a:visited,
.header a {
color: var(--repl-color);
color: var(--repl_color);
text-decoration: underline;
font-size: 0.9em;
}
.header a:hover {
color: var(--repl-color-link);
color: var(--repl_color-link);
}
.header .divider {
color: var(--repl-color);
color: var(--repl_color);
margin: 0 5px;
font-size: 1.1em;
}
@ -59,7 +59,7 @@
visibility: hidden;
width: 140px;
background-color: #333;
color: var(--repl-color);
color: var(--repl_color);
text-align: center;
border-radius: 6px;
padding: 5px 0;

View File

@ -5,7 +5,7 @@
@import "~highlight.js/scss/atom-one-dark";
h1 {
color: var(--repl-color-link, #2ac02a);
color: var(--repl_color-link, #2ac02a);
font-size: 2em;
}
@ -30,7 +30,7 @@
h4,
h5,
h6 {
color: var(--repl-color, #188a18);
color: var(--repl_color, #188a18);
}
#preamble {
@ -53,7 +53,7 @@
pre {
background-color: #282c34;
border: 1px solid var(--repl-color-hint, #188a18);
border: 1px solid var(--repl_color-hint, #188a18);
padding: 1em;
color: #abb2bf;
}

View File

@ -8,9 +8,9 @@
}
:root {
--repl-color: rgb(24, 138, 24);
--repl-color-link: rgb(31, 179, 31);
--repl-color-hint: rgba(24, 138, 24, 0.3);
--repl_color: rgb(24, 138, 24);
--repl_color-link: rgb(31, 179, 31);
--repl_color-hint: rgba(24, 138, 24, 0.3);
--blog_nav-background: rgba(128, 128, 128, 0.3);