aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pages/login.tsx2
-rw-r--r--pages/register.tsx2
-rw-r--r--pages/search.tsx2
-rw-r--r--styles/dark.css22
-rw-r--r--styles/game.css45
-rw-r--r--styles/gameSettings.css3
-rw-r--r--styles/global.css36
-rw-r--r--styles/ui.css13
8 files changed, 42 insertions, 83 deletions
diff --git a/pages/login.tsx b/pages/login.tsx
index 4cadd82..da13f45 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -48,7 +48,7 @@ export default function LoginPage() {
return (
<div>
<NavBar />
- <CenteredPage width={500} className="h100vh">
+ <CenteredPage width={500} className='h100vh'>
<div className='posrel center centeredForm'>
<Vierkant className='pad-l bg-800'>
<form onSubmit={(e) => submitLogin(e, toast)}>
diff --git a/pages/register.tsx b/pages/register.tsx
index 2709a10..bc2fc0f 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -88,7 +88,7 @@ export default function RegisterPage() {
return (
<div>
<NavBar />
- <CenteredPage width={500} className="h100vh">
+ <CenteredPage width={500} className='h100vh'>
<div className='posrel center centeredForm'>
<Vierkant className='pad-l bg-800'>
<form onSubmit={(e) => submitRegister(e, toast)}>
diff --git a/pages/search.tsx b/pages/search.tsx
index 7aba29c..99f99b0 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -31,7 +31,7 @@ function SearchResults(props: { userList: Array<userInfo>; }) {
function SearchResult(props: { user: userInfo; }) {
return <Vierkant
- className='result pad-m fullwidth'
+ className='result bg-800 pad-m fullwidth'
href={'/user?id=' + props.user.id}
>
<div className='inner posrel'>
diff --git a/styles/dark.css b/styles/dark.css
index 681116f..b44171b 100644
--- a/styles/dark.css
+++ b/styles/dark.css
@@ -1,9 +1,19 @@
html.dark {
- --text: #FCFFFD;
- --text-alt: var(--text);
+ --background: var(--gray-900);
+ --foreground: #FFFFF3;
- --page-background: #11171a;
- --background: #222d33;
- --background-alt: #344047;
-}
+ --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/game.css b/styles/game.css
index f454691..2c1eb94 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -7,55 +7,35 @@
padding: var(--spacing-medium) var(--spacing-large);
}
-.newGameDialog .inviteButton {
- height: 160px;
-}
+.newGameDialog .inviteButton { height: 160px; }
-.newGameDialog .inviteButton.random {
- background-color: var(--confirm);
-}
+.newGameDialog .inviteButton.random { background-color: var(--confirm); }
-.newGameDialog .inviteButton.link {
- background-color: var(--error);
-}
+.newGameDialog .inviteButton.link { background-color: var(--error); }
.newGameDialog .inviteButton .icon {
top: var(--spacing-medium);
font-size: 100px;
}
-.newGameDialog .inviteButton .label {
- bottom: var(--spacing-medium);
-}
+.newGameDialog .inviteButton .label { bottom: var(--spacing-medium); }
-.newGameDialog > div {
- margin-top: var(--spacing-large);
-}
+.newGameDialog > div { margin-top: var(--spacing-large); }
-.voerBord {
- border-spacing: var(--spacing-small);
-}
+.voerBord { border-spacing: var(--spacing-small); }
-.voerBord .cell.inner {
- border: 2px solid var(--gray-800);
-}
+.voerBord .cell.inner { border: 2px solid var(--gray-800); }
-.voerBord .square {
- margin-top: 100%;
-}
+.voerBord .square { margin-top: 100%; }
-.voerBord.active .cell.inner {
- cursor: pointer;
-}
+.voerBord.active .cell.inner { cursor: pointer; }
.voerBord .disk {
border-radius: 999999999px;
margin: 3px;
}
-.gameBar .gameBarButton {
- margin: 0;
-}
+.gameBar .gameBarButton { margin: 0; }
.gameBar .move {
width: 32px;
@@ -73,3 +53,8 @@
margin: 0 auto;
}
+html.dark .newGameDialog .inviteButton { background-color: var(--gray-800); }
+html.dark .newGameDialog .inviteButton.random .icon { color: var(--confirm); }
+html.dark .newGameDialog .inviteButton.link .icon { color: var(--error); }
+html.dark .newGameDialog .searchBar .input { background-color: var(--gray-800); }
+
diff --git a/styles/gameSettings.css b/styles/gameSettings.css
index 533cea0..d9ba262 100644
--- a/styles/gameSettings.css
+++ b/styles/gameSettings.css
@@ -40,6 +40,9 @@
margin: 0;
margin-bottom: var(--spacing-medium);
}
+html.dark .editGameSettings .editableRules .editableRulesSection {
+ background-color: var(--gray-800);
+}
.editGameSettings .button {
line-height: normal;
diff --git a/styles/global.css b/styles/global.css
index f70b6bd..541dd76 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -33,42 +33,6 @@
--spacing-large: 24px;
}
-@media (prefers-color-scheme: dark) {
- :root {
- --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;
- }
-}
-
-/* html { */
-/* --text: #FCFFFD; */
-/* --page-background: var(--text); */
-
-/* --background: #5D737E; */
-/* --text-alt: var(--background); */
-/* --background-alt: #81949E; */
-
-/* --disk-a: #E16D82; */
-/* --disk-a-text: #FDC0C4; */
-/* --disk-b: #71D9CC; */
-/* --disk-b-text: #C0FDEB; */
-/* } */
-
/* default margin */
html, body {
margin: 0;
diff --git a/styles/ui.css b/styles/ui.css
index cd9f461..6dbc388 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -5,6 +5,7 @@
box-sizing: border-box;
}
+html.dark .button { color: var(--foreground); }
.button {
background-color: var(--accent);
color: var(--gray-900);
@@ -64,20 +65,16 @@
transform: translate(-50%, 0%) rotate(0deg);
}
-.dialogbox {
- width: 392px;
-}
-
-.dialogbox > .title {
- margin-bottom: var(--spacing-large);
-}
-
+.dialogbox { width: 392px; }
+.dialogbox > .title { margin-bottom: var(--spacing-large); }
.dialogbox .icon.close {
top: 25px;
right: 25px;
cursor: pointer;
}
+html.dark .dialogbox { background-color: var(--gray-700); }
+
.searchBar {
overflow: hidden;
}