commit a393408e2d11782a892da76ad7caff958c05e879
parent ff1d5cb609a56362de908d04b8816529d09107a4
Author: William Casarin <jb55@jb55.com>
Date: Wed, 14 Dec 2022 16:50:20 -0800
Merge remote-tracking branch 'thomas/main'
Diffstat:
5 files changed, 61 insertions(+), 14 deletions(-)
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -14,6 +14,13 @@ body {
padding: 0;
}
+a {
+ color: var(--clrLink);
+}
+a:visited {
+ color: var(--clrLinkVisited);
+}
+
#gsticker {
position: absolute;
top: 0;
@@ -398,6 +405,8 @@ input[type="text"].cw {
border: none;
border-bottom: solid 2px var(--clrWarn);
font-size: var(--fsReduced);
+ background: transparent;
+ color: var(--clrText);
}
/* Profile */
@@ -429,3 +438,9 @@ label[role="profile-nip5"] {
display: block;
}
+@media (prefers-color-scheme: dark) {
+ .icon.svg {
+ filter: invert(1);
+ }
+}
+
diff --git a/web/css/utils.css b/web/css/utils.css
@@ -36,10 +36,10 @@ button.icon > img.icon {
button.action {
border: none;
border-radius: 50px;
- background: #171717;
+ background: var(--clrBgAction);
padding: 10px 15px;
font-size: 16px;
- color: white;
+ color: var(--clrTextAction);
font-weight: 800;
}
@@ -66,10 +66,10 @@ img.icon.small {
top: 0;
}
.event-message {
- background: #f4f4f4;
+ background: var(--clrEvMsg);
padding: 7px;
border-radius: 12px;
- color: #444;
+ color: var(--clrTextEvMsg);
}
.flex {
display: flex;
@@ -81,3 +81,12 @@ img.invert {
/* This class is good for white on black icons; */
filter: invert(1);
}
+
+@media (prefers-color-scheme: dark) {
+ img.dark-invert {
+ filter: invert(1);
+ }
+ img.invert, img.svg.invert {
+ filter: initial;
+ }
+}
diff --git a/web/css/vars.css b/web/css/vars.css
@@ -11,6 +11,14 @@
--clrTextLighter: #abb4ca;
--clrHeart: #ff5050;
--clrWarn: #fbc560;
+ --clrLink: blue;
+ --clrLinkVisited: purple;
+
+ /* TODO I don't like these and simply did it for dark mode. To rename. */
+ --clrEvMsg: #f4f4f4;
+ --clrTextEvMsg: #444;
+ --clrBgAction: #171717;
+ --clrTextAction: white;
/* Font Sizes */
--fsSmall: 12px;
@@ -32,3 +40,18 @@
--iconSize: 24px;
--iconSizeSmall: 15px;
}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --clrBg: #0f0f0f;
+ --clrText: #fff;
+ --clrPanel: #1f1f1f;
+ --clrBorder: #282828;
+ --clrLink: #fb5151;
+ --clrLinkVisited: #f77;
+ --clrEvMsg: #353535;
+ --clrTextEvMsg: white;
+ --clrBgAction: white;
+ --clrTextAction: #1f1f1f;
+ }
+}
diff --git a/web/index.html b/web/index.html
@@ -21,7 +21,7 @@
// This is our main entry.
// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
addEventListener('DOMContentLoaded', (ev) => {
- damus_web_init()
+ damus_web_init();
});
</script>
<div id="gsticker" title="This is alpha software.">αlpha</div>
@@ -90,7 +90,7 @@
<input id="content-warning-input" class="cw hide" type="text" placeholder="Reason"/>
<button title="Mark this message as sensitive."
onclick="toggle_cw(this)" class="cw icon">
- <img class="icon small" src="icon/content-warning.svg"/>
+ <img class="icon svg small" src="icon/content-warning.svg"/>
</button>
<button onclick="send_post(this)" class="action"
role="send" id="post-button" disabled>Send</button>
@@ -131,7 +131,7 @@
-->
<button class="icon" role="copy-pk"
data-pk="" onclick="click_copy_pk(this)" title="Copy Public Key">
- <img class="icon" src="icon/pubkey.svg"/></button>
+ <img class="icon svg" src="icon/pubkey.svg"/></button>
<button class="action" role="follow-user" data-pk=""
onclick="click_toggle_follow_user(this)">Follow</button>
</div>
@@ -152,7 +152,7 @@
<header>
<label>Reply To</label>
<button class="icon" onclick="close_reply()">
- <img class="icon" src="icon/close-modal.svg"/>
+ <img class="icon svg" src="icon/close-modal.svg"/>
</button>
</header>
<div id="replying-to"></div>
diff --git a/web/js/ui/render.js b/web/js/ui/render.js
@@ -36,7 +36,7 @@ function render_thread_collapsed(model, ev, opts)
return `<div onclick="expand_thread('${ev.id}')" class="thread-collapsed">
<div class="thread-summary clickable event-message">
Read More
- <img class="icon small" src="icon/read-more.svg"/>
+ <img class="icon svg small" src="icon/read-more.svg"/>
</div>
</div>`
}
@@ -198,7 +198,7 @@ function render_event(damus, view, ev, opts={}) {
${render_name(ev.pubkey, profile)}
<span class="timestamp">${delta}</span>
<button class="icon" title="View Thread" role="view-event" data-eid="${ev.id}" onclick="click_event(this)">
- <img class="icon small" src="icon/open-thread.svg"/>
+ <img class="icon svg small" src="icon/open-thread.svg"/>
</button>
</div>
<div class="comment">
@@ -247,7 +247,7 @@ function render_action_bar(damus, ev, can_delete) {
if (can_delete)
delete_html = `
<button class="icon" title="Delete" onclick="delete_post_confirm('${ev.id}')">
- <img class="icon small" src="icon/event-delete.svg"/>
+ <img class="icon svg small" src="icon/event-delete.svg"/>
</button>`
const groups = get_reactions(damus, ev.id)
@@ -257,10 +257,10 @@ function render_action_bar(damus, ev, can_delete) {
return `
<div class="action-bar">
<button class="icon" title="Reply" onclick="reply_to('${ev.id}')">
- <img class="icon small" src="icon/event-reply.svg"/>
+ <img class="icon svg small" src="icon/event-reply.svg"/>
</button>
<button class="icon react heart" ${react_onclick} title="Like">
- <img class="icon small" src="icon/event-like.svg"/>
+ <img class="icon svg small" src="icon/event-like.svg"/>
</button>
<!--<button class="icon" title="Share" onclick=""><i class="fa fa-fw fa-link"></i></a>-->
${delete_html}
@@ -346,7 +346,7 @@ function render_loading_spinner()
return `
<div class="loading-events">
<div class="loader" title="Loading...">
- <img src="icon/loader-fragment.svg"/>
+ <img class="dark-invert" src="icon/loader-fragment.svg"/>
</div>
</div>`
}
