aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--vnext/src/index.css50
-rw-r--r--vnext/src/ui/Button.css2
-rw-r--r--vnext/src/ui/Contacts.js2
-rw-r--r--vnext/src/ui/Message.css16
-rw-r--r--vnext/src/ui/Thread.css2
-rw-r--r--vnext/src/ui/helpers/BubbleStyle.js2
6 files changed, 39 insertions, 35 deletions
diff --git a/vnext/src/index.css b/vnext/src/index.css
index 225379d7..7bbc0a22 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -1,8 +1,12 @@
@custom-media --viewport-desktop (width >=62.5rem);
:root {
--main-width: 1000px;
- --background-color: #fff;
+ --main-background-color: #fdfdfe;
+ --background-color: #f8f8f8;
+ --border-color: #eee;
+ --text-background-color: #fff;
--text-color: #363636;
+ --link-color: #3c77aa;
}
* {
@@ -32,16 +36,13 @@ body {
}
body {
- background: #f8f8f8;
+ background: var(--main-background-color);
text-size-adjust: 100%;
word-break: break-word;
color: var(--text-color);
line-height: 1.4;
text-rendering: optimizeLegibility;
-}
-
-textarea {
- overflow: auto;
+ -webkit-overflow-scrolling: touch;
}
html,
@@ -87,7 +88,7 @@ body:not(:-moz-handler-blocked) fieldset {
}
a {
- color: #069;
+ color: var(--link-color);
text-decoration: none;
}
@@ -107,8 +108,8 @@ hr {
#header {
grid-area: header;
- background: var(--background-color);
- border-bottom: 1px solid #eee;
+ background: var(--text-background-color);
+ border-bottom: 1px solid var(--border-color);
transition: transform 0.2s;
overflow-x: hidden;
}
@@ -131,7 +132,7 @@ hr {
flex-direction: row;
justify-content: space-around;
background: var(--background-color);
- border-top: 1px solid #eee;
+ border-top: 1px solid var(--border-color);
}
.nav_content {
@@ -141,13 +142,12 @@ hr {
#content {
grid-area: content;
margin-top: 12px;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
+ overflow-y: scroll;
}
#footer {
display: none;
- background: #f8f8f8;
+ background: var(--background-color);
border-top: 1px solid #ccc;
color: var(--text-color);
padding: 10px;
@@ -224,7 +224,7 @@ hr {
}
#sidebar > a:hover {
- background-color: #f8f8f8;
+ background-color: var(--background-color);
border-top: 2px solid #ff339a;
cursor: pointer;
}
@@ -237,14 +237,14 @@ hr {
#ctitle a,
.l a,
.msg-button {
- border-bottom: 2px solid #fdfdfe;
+ border-bottom: 2px solid var(--main-background-color);
}
#global a:hover,
#ctitle a:hover,
.l a:hover,
.msg-button:hover {
- background-color: #f8f8f8;
+ background-color: var(--background-color);
border-bottom: 2px solid #ff339a;
cursor: pointer;
}
@@ -299,8 +299,8 @@ hr {
}
.page {
- background: #fdfdfe;
- border: 1px solid #eee;
+ background: var(--main-background-color);
+ border: 1px solid var(--border-color);
margin-bottom: 12px;
padding: 6px;
text-align: center;
@@ -314,7 +314,7 @@ hr {
width: 6px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
- background-color: #f8f8f8;
+ background-color: var(--main-background-color);
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
@@ -322,7 +322,7 @@ hr {
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
- background-color: #eee;
+ background-color: var(--border-color);
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
@@ -351,7 +351,7 @@ hr {
justify-content: initial;
border-top: initial;
margin: 12px;
- border: 1px solid #eee;
+ border: 1px solid var(--border-color);
}
#sidebar > a:hover {
border-top: initial;
@@ -361,7 +361,11 @@ hr {
@media (prefers-color-scheme: dark) {
:root {
- --background-color: #363636;
- --text-color: #fff;
+ --main-background-color: #222;
+ --background-color: #333;
+ --text-background-color: #383838;
+ --border-color: #4c4c4c;
+ --text-color: #ccc;
+ --link-color: #c38855;
}
}
diff --git a/vnext/src/ui/Button.css b/vnext/src/ui/Button.css
index 2acb87be..539e6d36 100644
--- a/vnext/src/ui/Button.css
+++ b/vnext/src/ui/Button.css
@@ -1,6 +1,6 @@
.Button {
background: #fff;
- border: 1px solid #eee;
+ border: 1px solid var(--border-color);
color: #888;
cursor: pointer;
display: inline-block;
diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js
index 3852b26f..7a42283c 100644
--- a/vnext/src/ui/Contacts.js
+++ b/vnext/src/ui/Contacts.js
@@ -45,5 +45,5 @@ const chatTitleStyle = {
textAlign: 'left',
background: '#fff',
color: '#222',
- borderBottom: '1px solid #eee'
+ borderBottom: '1px solid var(--border-color)'
};
diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css
index 126fcd6a..d66352a4 100644
--- a/vnext/src/ui/Message.css
+++ b/vnext/src/ui/Message.css
@@ -10,11 +10,11 @@
padding: 12px;
}
.msg-cont > .l {
- border-top: 1px solid #eee;
+ border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-around;
- background: #fdfdfe;
+ background: var(--main-background-color);
}
.msg-cont > .l a {
color: #88958d;
@@ -36,8 +36,8 @@
margin-bottom: 0;
}
.msg-cont {
- background: #FFF;
- border: 1px solid #eee;
+ background: var(--text-background-color);
+ border: 1px solid var(--border-color);
line-height: 140%;
margin-bottom: 12px;
}
@@ -119,8 +119,8 @@ blockquote {
}
.msg-comment input {
align-self: flex-start;
- background: #EEE;
- border: 1px solid #CCC;
+ background: var(--background-color);
+ border: 1px solid var(--border-color);
color: #999;
margin: 0 0 0 6px;
position: sticky;
@@ -130,11 +130,11 @@ blockquote {
}
.msg-recomms {
color: #88958d;
- background: #fdfdfe;
+ background: var(--main-background-color);
font-size: small;
margin-bottom: 10px;
padding: 6px;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid var(--border-color);
overflow: hidden;
text-indent: 10px;
}
diff --git a/vnext/src/ui/Thread.css b/vnext/src/ui/Thread.css
index 3a3f9589..5e515627 100644
--- a/vnext/src/ui/Thread.css
+++ b/vnext/src/ui/Thread.css
@@ -1,6 +1,6 @@
#replies {
background: #fff;
- border: 1px solid #eee;
+ border: 1px solid var(--border-color);
padding: 12px;
}
diff --git a/vnext/src/ui/helpers/BubbleStyle.js b/vnext/src/ui/helpers/BubbleStyle.js
index 570b7337..f44f726e 100644
--- a/vnext/src/ui/helpers/BubbleStyle.js
+++ b/vnext/src/ui/helpers/BubbleStyle.js
@@ -1,7 +1,7 @@
export function bubbleStyle(me, msg) {
const isMe = me.uid === msg.user.uid;
const color = isMe ? '#fff' : '#222';
- const background = isMe ? '#ec4b98' : '#eee';
+ const background = isMe ? '#ec4b98' : 'var(--border-color)';
return {
background: background,
color: color,
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-23 15:20:44 +0000