diff --git a/src/front/colors.css b/src/front/colors.module.css similarity index 100% rename from src/front/colors.css rename to src/front/colors.module.css diff --git a/src/front/components/Lanyard/index.tsx b/src/front/components/Lanyard/index.tsx index 3e69529..c56e1dd 100644 --- a/src/front/components/Lanyard/index.tsx +++ b/src/front/components/Lanyard/index.tsx @@ -2,6 +2,8 @@ import { highlightElement } from "@speed-highlight/core"; import { createRef } from "tsx-dom"; import socket from "../../utilities/socket"; +import colors from "../../colors.module.css"; + const activityTypes: Record = { 0: "Playing", 1: "Streaming", @@ -19,9 +21,9 @@ export default () => { const streamingActivity = lanyard.activities.find((act) => act.type === 1); if (streamingActivity) { - document.documentElement.className = "streaming"; + document.documentElement.className = colors.streaming || ""; } else { - document.documentElement.className = lanyard.discord_status; + document.documentElement.className = colors[lanyard.discord_status] || ""; } if (lanyard.activities.length === 0) { diff --git a/src/front/components/pages/About/index.module.css b/src/front/components/pages/About/index.module.css new file mode 100644 index 0000000..db4a39c --- /dev/null +++ b/src/front/components/pages/About/index.module.css @@ -0,0 +1,34 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100%; +} + +.card { + width: 90%; + padding: .5rem; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .center { + text-align: center; + } +} + +.avatar { + width: 5rem; + height: inherit; + border: 2px solid rgb(var(--mdui-color-primary)); +} + +.lanyard { + display: var(--lanyard-display); +} + +.hyperate { + display: var(--hyperate-display); +} \ No newline at end of file diff --git a/src/front/components/pages/About/index.tsx b/src/front/components/pages/About/index.tsx index dcf2d9b..98fa17e 100644 --- a/src/front/components/pages/About/index.tsx +++ b/src/front/components/pages/About/index.tsx @@ -7,39 +7,23 @@ import "mdui/components/segmented-button"; import Hyperate from "../../Hyperate"; import Lanyard from "../../Lanyard"; +import styles from "./index.module.css"; +import colors from "../../../colors.module.css"; + + export default () => { return (

Seth, the dedicated backend developer, with many{" "} @@ -55,47 +39,25 @@ export default () => {

diff --git a/src/front/index.css b/src/front/index.css index 29b519d..a860177 100644 --- a/src/front/index.css +++ b/src/front/index.css @@ -2,7 +2,6 @@ @import "../../node_modules/@fontsource/roboto-mono/latin-400.css"; */ @import "../../node_modules/mdui/mdui.css"; -@import "./colors.css"; :not(:defined) { visibility: hidden; @@ -22,12 +21,12 @@ body { background-color: rgb(var(--mdui-color-background)); } -[class*="shj-lang-"] { +.shj-lang-json { white-space: pre; - color: #112; + color: #f8f8f2; + background: var(--mdui-color-secondary-container); text-shadow: none; box-sizing: border-box; - background: #dedede; border-radius: 10px; max-width: min(100%, 100vw); margin: 10px 0; @@ -35,6 +34,14 @@ body { font: 18px / 24px monospace; box-shadow: 0 0 5px #0001; + + :before { + color: #6f9aff; + } + + ::selection { + background: #bdf5; + } } .shj-inline { @@ -44,140 +51,15 @@ body { display: inline-block; } -[class*="shj-lang-"]::selection { - background: #bdf5; -} - -[class*="shj-lang-"] ::selection { - background: #bdf5; -} - -/* -[class*="shj-lang-"] > div { - display: flex; - overflow: auto; -} - -[class*="shj-lang-"] > div :last-child { - outline: none; - flex: 1; -} - -.shj-numbers { - counter-reset: line; - padding-left: 5px; -} - -.shj-numbers div { - padding-right: 5px; -} - -.shj-numbers div:before { - color: #999; - content: counter(line); - opacity: 0.5; - text-align: right; - counter-increment: line; - margin-right: 5px; - display: block; -} - -.shj-syn-cmnt { - font-style: italic; -} - -.shj-syn-err, -.shj-syn-kwd { - color: #e16; -} - -.shj-syn-num, -.shj-syn-class { - color: #f60; -} -*/ -.shj-syn-insert, .shj-syn-str { color: #7d8; } -/* -.shj-syn-bool { - color: #3bf; -} - -.shj-syn-type, -.shj-syn-oper { - color: #5af; -} - -.shj-syn-section, -.shj-syn-func { - color: #84f; -} -*/ -.shj-syn-deleted, -.shj-syn-var { - color: #f44; -} - -/* -.shj-oneline { - padding: 12px 10px; -} - -.shj-lang-http.shj-oneline .shj-syn-kwd { - color: #fff; - background: #25f; - border-radius: 5px; - padding: 5px 7px; -} -*/ -[class*="shj-lang-"] { - color: #f8f8f2; - background: var(--mdui-color-secondary-container); -} - -[class*="shj-lang-"]:before { - color: #6f9aff; -} - -.shj-syn-deleted, -.shj-syn-err, .shj-syn-var { color: #ff5261; } -/* -.shj-syn-section, -.shj-syn-kwd { - color: #ff7cc6; -} -.shj-syn-class { - color: #eab07c; -} - -.shj-numbers, -.shj-syn-cmnt { - color: #7d828b; -} - -.shj-syn-insert, -.shj-syn-type, -.shj-syn-func, -.shj-syn-bool { - color: #71d58a; -} - -.shj-syn-num { - color: #b581fd; -} - -.shj-syn-oper { - color: #80c6ff; -} -*/ .shj-syn-str { color: #4dacfa; } diff --git a/src/front/index.html b/src/front/index.html index 480d0c9..571faad 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/front/index.tsx b/src/front/index.tsx index eaf9dd5..043834f 100644 --- a/src/front/index.tsx +++ b/src/front/index.tsx @@ -4,6 +4,10 @@ import "./utilities/clicker"; import App from "./App"; +import colors from "./colors.module.css"; + +document.documentElement.className = colors.offline || ""; + document.body.appendChild(); // You're garbage, let me collect you. diff --git a/types/css.d.ts b/types/css.d.ts new file mode 100644 index 0000000..c5e4c4d --- /dev/null +++ b/types/css.d.ts @@ -0,0 +1,6 @@ +declare module '*.module.css' { + const styles: { + readonly [key: string]: string + } + export default styles +} \ No newline at end of file