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"; import Color from "color";
export function getColors() { export function getColors() {
const replColor = window.document.documentElement.style.getPropertyValue("--repl-color") || window.getComputedStyle(document.documentElement).getPropertyValue("--repl-color") || "rgb(24, 138, 24)"; 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 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 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]; return [replColor, linkColor, hintColor];
}; };
export function setColors(color: Color) { export function setColors(color: Color) {
window?.document.documentElement.style.setProperty("--repl-color", color.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-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-hint", color.fade(0.7).string());
}; };
export class Rainbow { export class Rainbow {

View File

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

View File

@ -61,17 +61,17 @@ const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => {
<span className={styles.divider}>|</span> <span className={styles.divider}>|</span>
<a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank" rel="noreferrer">Bug?</a> <a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank" rel="noreferrer">Bug?</a>
<span className={styles.divider}>|</span> <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> <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> <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> <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> <span className={styles.divider}>|</span>
<a href="https://discordapp.com/users/224208617820127233" target="_blank" rel="noreferrer"> <a href="https://discordapp.com/users/224208617820127233" target="_blank" rel="noreferrer">
<span className={styles.tooltip} style={{ cursor: "pointer" }}> <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}> <span className={styles.tooltiptext}>
C0ntroller_Z#3883 C0ntroller_Z#3883
</span> </span>

View File

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

View File

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

View File

@ -14,5 +14,5 @@
} }
.container::-webkit-scrollbar-thumb { .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 { .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; text-decoration: underline;
} }
.line a::after { .line a::after {
content: "⤤"; content: "⤤";
color: var(--repl-color-link); color: var(--repl_color-link);
font-size: 80%; font-size: 80%;
text-decoration: none; text-decoration: none;
} }
@ -29,7 +29,7 @@
.line .cmd { .line .cmd {
cursor: pointer; cursor: pointer;
text-decoration: underline dotted; text-decoration: underline dotted;
color: var(--repl-color-link); color: var(--repl_color-link);
} }
.line .cmd::before {content: "'"} .line .cmd::before {content: "'"}

View File

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

View File

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

View File

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

View File

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