diff --git a/HACKING.md b/HACKING.md
index 5759a7cf0ff50f5013dabfc7a9e6f1ca41743c80..7d3b15e5a9648cf9b52041ec88ccc73632a781cd 100644
--- a/HACKING.md
+++ b/HACKING.md
@@ -23,12 +23,14 @@ Run `nix-shell` to enter the environment.
## Running Locally
The `examples/dev.html` file is small example page, which runs the code you have in `src/`.
-You can serve it on `localhost:8080` by running:
+You can serve it by running:
```sh
$ npm run dev
```
+By default, Parcel will serve it on all interfaces, meaning you can access it on `localhost:8080` on the same device or on your local network on `DEVICE_IP:8080`.
+
It uses the public [matrix.cactus.chat](https://matrix.cactus.chat:8448) homeserver and
[appservice](https://gitlab.com/cactus-comments/cactus-appservice).
diff --git a/examples/dev.html b/examples/dev.html
index f4fcd0f5a0f7eb739fb5765c216d340f8f0fc3e7..667df38ba72d0a0d25b7f4fee155538e968ef07d 100644
--- a/examples/dev.html
+++ b/examples/dev.html
@@ -1,36 +1,68 @@
+
+
+
+
- (Note, by default automatic light/dark mode is used based on the system color scheme. Using the toggle switches to
+ manual light/dark mode. It returns to automatic light/dark mode after refreshing the page (or removing the class from the <html> element)
Toggle Dark Mode
Comments
@@ -66,3 +98,5 @@
-->
+
+
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index cd4a38f3ba8157bce7cd002045f8144fcf2e94b4..ae91593e58572167ca5d8086f685b90663b2b489 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,50 @@
+/*
+ * ***** DEFAULT COLORS *****
+ */
+/* automatic / manual light mode */
+:root, :root.light {
+ --cactus-text-color--soft: hsl(0, 0%, 60%);
+ --cactus-background-color--strong: hsl(0, 0%, 98%);
+ --cactus-border-color: hsl(0, 0%, 85%);
+ --cactus-box-shadow-color: hsl(0, 0%, 20%, 0.3);
+ --cactus-button-color: hsl(0, 0%, 80%);
+ --cactus-button-color--strong: hsl(0, 0%, 75%);
+ --cactus-button-color--stronger: hsl(0, 0%, 70%);
+ /* unchanged variables */
+ --cactus-border-width: 1px;
+ --cactus-border-radius: 0.4em;
+ --cactus-text-color: inherit;
+ --cactus-background-color: transparent;
+ --cactus-error-color: red;
+}
+
+/* automatic dark mode */
+/* ❗️ keep these rules in sync with the manual dark mode below! */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --cactus-text-color--soft: hsl(0, 0%, 80%);
+ --cactus-background-color--strong: hsl(0, 0%, 10%);
+ --cactus-border-color: hsl(0, 0%, 20%);
+ --cactus-box-shadow-color: hsl(0, 0%, 10%, 1);
+ --cactus-button-color: hsl(0, 0%, 25%);
+ --cactus-button-color--strong: hsl(0, 0%, 30%);
+ --cactus-button-color--stronger: hsl(0, 0%, 35%);
+ }
+}
+
+/* manual dark mode
+/* ❗️ keep these rules in sync with the automatic dark mode above! */
+:root.dark {
+ --cactus-text-color--soft: hsl(0, 0%, 80%);
+ --cactus-background-color--strong: hsl(0, 0%, 10%);
+ --cactus-border-color: hsl(0, 0%, 20%);
+ --cactus-box-shadow-color: hsl(0, 0%, 10%, 1);
+ --cactus-button-color: hsl(0, 0%, 25%);
+ --cactus-button-color--strong: hsl(0, 0%, 30%);
+ --cactus-button-color--stronger: hsl(0, 0%, 35%);
+ }
+
+
/*
* ***** CONTAINER *****
*/
@@ -6,6 +53,8 @@
display: flex;
flex-direction: column;
gap: 1em;
+ color: var(--cactus-text-color);
+ background-color: var(--cactus-background-color);
}
@@ -16,8 +65,8 @@
.cactus-error {
padding: 0.5em;
padding-inline-end: 1.5em;
- border: 2px solid red;
- border-radius: 0.4em;
+ border: var(--cactus-border-width) solid var(--cactus-error-color);
+ border-radius: var(--cactus-border-radius);
/* for absolutely positioned close button */
position: relative;
}
@@ -29,20 +78,25 @@
top: 0;
transform: translate(+5%, -20%);
font-size: 1.5em;
- color: rgb(180, 180, 180);
+ color: var(--cactus-button-color);
/* todo: remove after using all: unset */
- background-color: inherit;
+ background-color: transparent;
border: none;
}
.cactus-error-close:hover:not([disabled]) {
- opacity: 0.8;
+ color: var(--cactus-button-color--strong);
+ cursor: pointer;
+}
+
+.cactus-error-close:active:not([disabled]) {
+ color: var(--cactus-button-color--stronger);
cursor: pointer;
}
/* error message */
.cactus-error-text {
- color: #ff0000;
+ color: var(--cactus-error-color);
font-weight: bold;
/* todo: remove after using all: unset */
margin: 0;
@@ -67,12 +121,12 @@
.cactus-editor-textarea {
display: flex;
flex: 1;
- height: 10rem;
- border-radius: 0.4em;
- border: solid 1px rgba(127, 127, 127, 0.5);
+ height: 9rem;
+ border-radius: var(--cactus-border-radius);
+ border: solid var(--cactus-border-width) var(--cactus-border-color);
padding: 0.5em;
/* todo: remove after using all: unset */
- background-color: inherit;
+ background-color: transparent;
color: inherit;
font: inherit;
}
@@ -81,6 +135,7 @@
text-align: center;
line-height: 9rem;
font-size: 1.5em;
+ color: var(--cactus-text-color--soft);
}
/* login and post button */
@@ -107,15 +162,19 @@
/* todo: use a class */
.cactus-editor-name > span > input {
inline-size: 100%;
- border-radius: 0.4em;
- border: solid 1px rgba(127, 127, 127, 0.5);
+ border-radius: var(--cactus-border-radius);
+ border: solid var(--cactus-border-width) var(--cactus-border-color);
padding: 0.5em;
/* todo: remove after using all: unset */
- background-color: inherit;
+ background-color: transparent;
color: inherit;
font-size: inherit;
}
+.cactus-editor-name > span > input::placeholder {
+ color: var(--cactus-text-color--soft);
+}
+
/* div with login and send buttons */
.cactus-editor-buttons {
display: flex;
@@ -160,9 +219,9 @@ when guestPostingEnabled=false and loginEnabled=false */
top: 10%;
transform: translate(-50%, 0);
z-index: 1;
- border-radius: 0.5em;
- background-color: white;
- box-shadow: 0 0 1em #0005;
+ border-radius: var(--cactus-border-radius);
+ background-color: var(--cactus-background-color--strong);
+ box-shadow: 0 0.5em 1em 0.5em var(--cactus-box-shadow-color);
display: flex;
flex-direction: column;
gap: 0.5em;
@@ -193,15 +252,19 @@ when guestPostingEnabled=false and loginEnabled=false */
/* todo: use a class */
.cactus-login-field > input {
inline-size: 100%;
- border-radius: 0.4em;
- border: solid 1px rgba(127, 127, 127, 0.5);
+ border-radius: var(--cactus-border-radius);
+ border: solid var(--cactus-border-width) var(--cactus-border-color);
padding: 0.5em;
/* todo: remove after using all: unset */
- background-color: inherit;
- /* color: inherit; */
+ background-color: transparent;
+ color: inherit;
font-size: inherit;
}
+.cactus-login-field > input::placeholder {
+ color: var(--cactus-text-color--soft);
+}
+
/* "back" and "log in" buttons */
.cactus-login-buttons {
display: flex;
@@ -257,7 +320,8 @@ when guestPostingEnabled=false and loginEnabled=false */
flex-direction: row;
gap: 1em;
padding-block-end: 0.5em;
- border-block-end: 1px solid rgba(127, 127, 127, 0.2);
+ border-block-end: var(--cactus-border-width) solid var(--cactus-border-color);
+
}
/* avatar beside comment content */
@@ -281,8 +345,8 @@ when guestPostingEnabled=false and loginEnabled=false */
display: flex;
justify-content: center;
align-items: center;
- background: black;
- color: white;
+ background-color: var(--cactus-border-color);
+ color: var(--cactus-text-color--soft);
}
/* header and body */
@@ -317,7 +381,7 @@ when guestPostingEnabled=false and loginEnabled=false */
/* comment posting time */
.cactus-comment-time {
- opacity: 0.7;
+ color: var(--cactus-text-color--soft)
}
/* text or media content of comment */
@@ -338,7 +402,7 @@ when guestPostingEnabled=false and loginEnabled=false */
.cactus-message-emote {
padding-top: 0.5em;
- opacity: 0.7;
+ color: var(--cactus-text-color--soft);
}
.cactus-message-image {
@@ -368,17 +432,22 @@ when guestPostingEnabled=false and loginEnabled=false */
align-items: center;
padding-block: 0.6em;
padding-inline: 1em;
- background-color: rgb(240, 240, 240);
+ background-color: var(--cactus-button-color);
font-weight: bold;
- border-radius: 0.4em;
+ border-radius: var(--cactus-border-radius);
/* todo: remove after using all: unset */
- /* color: inherit; */
+ color: inherit;
font-size: inherit;
border: none;
}
.cactus-button:hover:not([disabled]) {
- opacity: 0.8;
+ background-color: var(--cactus-button-color--strong);
+ cursor: pointer;
+}
+
+.cactus-button:active:not([disabled]) {
+ background-color: var(--cactus-button-color--stronger);
cursor: pointer;
}