aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pages/_app.tsx2
-rw-r--r--public/themes/classic.css87
-rw-r--r--public/themes/default.css54
-rw-r--r--styles/dark.css19
-rw-r--r--styles/global.css35
-rw-r--r--styles/ui.css5
-rw-r--r--styles/user.css2
7 files changed, 147 insertions, 57 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c1347e8..f53a6ff 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,7 +3,6 @@ import { PreferencesContextWrapper } from '../components/preferencesContext';
import { SocketContextWrapper } from '../components/socketContext';
import { ToastContextWrapper } from '../components/toast';
-import '../styles/dark.css';
import '../styles/disk.css';
import '../styles/footer.css';
import '../styles/global.css';
@@ -28,6 +27,7 @@ export default function VierOpEenRijWebsite({ Component, pageProps }) {
<title>4 op een rij</title>
<link rel='stylesheet' href='/font/stylesheet.css' />
+ <link rel='stylesheet' id='theme' href='/themes/default.css' />
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<link rel='icon' href='/favicon.png' type='image/png' />
diff --git a/public/themes/classic.css b/public/themes/classic.css
new file mode 100644
index 0000000..ff699bb
--- /dev/null
+++ b/public/themes/classic.css
@@ -0,0 +1,87 @@
+:root {
+ --background: var(--gray-900);
+ --foreground: var(--gray-900);
+
+ --accent: var(--error);
+
+ --error: #E16D82;
+ --disk-b-alt: #FDC0C4;
+
+ --confirm: #71D9CC;
+ --disk-a-alt: #C0FDEB;
+
+ /* shade */
+ --gray-100: #11171a;
+ --gray-200: #222d33;
+ --gray-300: #344047;
+ --gray-400: #11171a88;
+
+ --gray-600: #fcfffdaa;
+ --gray-700: #81949E;
+ --gray-800: #5d737e;
+
+ --gray-900: #fcfffd;
+
+ /* box-shadow */
+ --drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3);
+ --drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
+
+ /* border-radius */
+ --tight-corner: 8px;
+ --loose-corner: 8px;
+
+ /* margin/padding */
+ --spacing-small: 6px;
+ --spacing-medium: 12px;
+ --spacing-large: 24px;
+}
+
+html:not(.dark) .pageTitle,
+html:not(.dark) .footer {
+ color: var(--gray-800) !important;
+}
+
+html:not(.dark) .footer svg circle.circle { stroke: var(--gray-800); }
+
+html:not(.dark) .searchBar .input {
+ background-color: var(--gray-900) !important;
+ color: var(--gray-800);
+}
+
+html:not(.dark) .searchBar .input::placeholder { color: var(--gray-400); }
+
+.newGameDialog .inviteButton {
+ background-color: var(--gray-900) !important;
+ color: var(--gray-800);
+}
+
+.newGameDialog .inviteButton.random .icon { color: var(--confirm); }
+.newGameDialog .inviteButton.link .icon { color: var(--error); }
+
+table.voerBord .cell.inner {
+ border-color: var(--gray-700);
+ opacity: .5;
+}
+
+html:not(.dark) *[contenteditable="true"] {
+ color: var(--gray-800) !important;
+}
+
+html.dark {
+ --background: var(--gray-100) !important;
+ --foreground: var(--gray-900) !important;
+
+ --gray-800: #222d33 !important;
+ --gray-700: #344047 !important;
+}
+
+html.dark .newGameDialog .inviteButton,
+html.dark .searchBar .input
+{ background-color: var(--gray-100) !important; }
+
+html.dark .dialogbox { background-color: var(--gray-800) !important; }
+
+html.dark .newGameDialog .inviteFromFriendsList .inviteableFriend,
+html.dark .gameRuleEdit .editableRulesSection
+{ background-color: var(--gray-700) !important; }
+
diff --git a/public/themes/default.css b/public/themes/default.css
new file mode 100644
index 0000000..882c0af
--- /dev/null
+++ b/public/themes/default.css
@@ -0,0 +1,54 @@
+:root {
+ --background: var(--gray-900);
+ --foreground: var(--gray-100);
+
+ --accent: #7E3AA6;
+
+ --error: #A63A4D;
+ --disk-b-alt: #582D35;
+
+ --confirm: #3AA699;
+ --disk-a-alt: #244743;
+
+ /* shade */
+ --gray-100: #141619;
+ --gray-200: #1F242D;
+ --gray-300: #293140;
+ --gray-600: #757D92;
+ --gray-700: #A9AFC0;
+ --gray-800: #CED2DC;
+ --gray-900: #E3E6EE;
+
+ /* box-shadow */
+ --drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3);
+ --drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
+
+ /* border-radius */
+ --tight-corner: 6px;
+ --loose-corner: 8px;
+
+ /* margin/padding */
+ --spacing-small: 6px;
+ --spacing-medium: 12px;
+ --spacing-large: 24px;
+}
+
+html.dark {
+ --background: var(--gray-900);
+ --foreground: #FFFFF3;
+
+ --accent: #AD34F3;
+
+ --error: #FF4365;
+ --disk-b-alt: #F49BA1;
+
+ --confirm: #00D9C0;
+ --disk-a-alt: #86F3F3;
+
+ --gray-100: #CED2DC;
+ --gray-200: #A9AFC0;
+ --gray-300: #757D92;
+ --gray-700: #293140;
+ --gray-800: #1F242D;
+ --gray-900: #141619;
+}
diff --git a/styles/dark.css b/styles/dark.css
deleted file mode 100644
index b44171b..0000000
--- a/styles/dark.css
+++ /dev/null
@@ -1,19 +0,0 @@
-html.dark {
- --background: var(--gray-900);
- --foreground: #FFFFF3;
-
- --accent: #AD34F3;
-
- --error: #FF4365;
- --disk-b-alt: #F49BA1;
-
- --confirm: #00D9C0;
- --disk-a-alt: #86F3F3;
-
- --gray-100: #CED2DC;
- --gray-200: #A9AFC0;
- --gray-300: #757D92;
- --gray-700: #293140;
- --gray-800: #1F242D;
- --gray-900: #141619;
-}
diff --git a/styles/global.css b/styles/global.css
index 79aa026..b6c550a 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,38 +1,3 @@
-:root {
- --background: var(--gray-900);
- --foreground: var(--gray-100);
-
- --accent: #7E3AA6;
-
- --error: #A63A4D;
- --disk-b-alt: #582D35;
-
- --confirm: #3AA699;
- --disk-a-alt: #244743;
-
- /* shade */
- --gray-100: #141619;
- --gray-200: #1F242D;
- --gray-300: #293140;
- --gray-600: #757D92;
- --gray-700: #A9AFC0;
- --gray-800: #CED2DC;
- --gray-900: #E3E6EE;
-
- /* box-shadow */
- --drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3);
- --drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
-
- /* border-radius */
- --tight-corner: 6px;
- --loose-corner: 8px;
-
- /* margin/padding */
- --spacing-small: 6px;
- --spacing-medium: 12px;
- --spacing-large: 24px;
-}
-
/* default margin */
html, body {
margin: 0;
diff --git a/styles/ui.css b/styles/ui.css
index 2736a2c..ee71071 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -65,7 +65,10 @@ html.dark .button { color: var(--foreground); }
transform: translate(-50%, 0%) rotate(0deg);
}
-.dialogbox { width: 392px; }
+.dialogbox {
+ width: 392px;
+ margin: 0;
+}
.dialogbox > .title { margin-bottom: var(--spacing-large); }
.dialogbox .icon.close {
top: 25px;
diff --git a/styles/user.css b/styles/user.css
index d66fa94..5487bb0 100644
--- a/styles/user.css
+++ b/styles/user.css
@@ -11,7 +11,7 @@
}
*[contenteditable="true"] {
background-color: var(--background);
- color: var(--text-alt);
+ color: var(--foreground);
padding: 8px;
box-shadow: inset 0 0 0 2px var(--foreground);
}