diff --git a/client/css/style.css b/client/css/style.css
index 7feb14a0..9ae5169b 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -2,8 +2,23 @@
@import "bootstrap.css";
:root {
+ /* Main text color */
+ --body-color: #222;
+
+ /* Background color of the whole page */
+ --body-bg-color: #415364;
+
/* Links and link-looking buttons */
--link-color: #50a656;
+
+ /* Background color of the main window */
+ --window-bg-color: #fff;
+
+ /* Color of the date marker, text and separator */
+ --date-marker-color: rgba(0, 107, 59, 0.5);
+
+ /* Color of the unread message marker, text and separator */
+ --unread-marker-color: rgba(231, 76, 60, 0.5);
}
/* Samsung Internet <7.0 and Microsoft Edge support (yes, both of them use webkit prefix) */
@@ -23,8 +38,8 @@ body {
}
body {
- background: #455164;
- color: #222;
+ background: var(--body-bg-color);
+ color: var(--body-color);
font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
-webkit-user-select: none;
@@ -185,11 +200,6 @@ kbd {
touch-action: pan-y;
}
-#help .container,
-#changelog .container {
- max-width: 600px;
-}
-
#js-copy-hack,
#loading pre,
#help,
@@ -397,9 +407,8 @@ kbd {
color: #cfcfcf;
content: "\f002"; /* http://fontawesome.io/icon/search/ */
position: absolute;
- right: 18px;
- font-size: 14px;
- line-height: 50px;
+ right: 13px;
+ line-height: 45px;
}
#settings .extra-experimental::before {
@@ -428,7 +437,6 @@ kbd {
#viewport {
display: flex;
height: 100%;
- overflow: hidden;
}
#windows {
@@ -437,19 +445,21 @@ kbd {
}
#form button,
-#chat .header button {
+.header button,
+.reveal-password span {
transition: opacity 0.2s;
}
#form button:hover,
-#chat .header button:hover {
+.header button:hover,
+.reveal-password span:hover {
opacity: 0.6;
}
#viewport .lt,
#viewport .rt,
#chat button.menu {
- color: #ccc;
+ color: #607992;
display: flex;
font-size: 14px;
line-height: 1;
@@ -486,7 +496,7 @@ kbd {
width: 10px;
height: 10px;
border-radius: 50%;
- border: 2px solid white;
+ border: 2px solid var(--window-bg-color);
opacity: 0;
transition: opacity 0.2s;
background-clip: padding-box; /* Fix border-radius bleeding color */
@@ -506,6 +516,27 @@ kbd {
width: 220px;
}
+#sidebar .scrollable-area {
+ overflow-x: auto;
+ flex-grow: 1;
+ touch-action: pan-y;
+ overscroll-behavior: contain;
+ -webkit-overflow-scrolling: touch;
+}
+
+#sidebar .logo-container {
+ text-align: center;
+}
+
+#sidebar .logo,
+#sidebar .logo-inverted {
+ height: 45px;
+}
+
+#sidebar .logo {
+ display: none;
+}
+
#viewport.menu-open #sidebar {
display: none;
will-change: transform;
@@ -513,7 +544,7 @@ kbd {
#sidebar .chan,
#sidebar .empty {
- color: #99a2b4;
+ color: #b7c5d1;
font-size: 14px;
}
@@ -521,25 +552,40 @@ kbd {
display: none;
}
-#sidebar button,
#sidebar .chan {
cursor: pointer;
}
+/* All sidebar buttons and channels/queries must be white on hover and active */
#sidebar button:hover,
#sidebar .chan:hover,
#sidebar .active {
color: #fff;
}
+/* All lobbies/channels/queries and footer buttons must have a half-transparent
+background on hover (unless active) */
+#sidebar .chan:hover,
+#footer button:hover {
+ background-color: rgba(48, 62, 74, 0.5); /* #303e4a x 50% alpha */
+}
+
+/* All active elements, hovered or not, must have a background */
+#sidebar .active,
+#sidebar .active:hover {
+ background-color: #303e4a;
+}
+
+/* Remove background on hovered/active channel when sorting/drag-and-dropping */
+#sidebar .ui-sortable-helper .chan.active, /* Networks */
+#sidebar .ui-sortable-helper .chan:hover,
+#sidebar .chan.ui-sortable-helper.active, /* Channels */
+#sidebar .chan.ui-sortable-helper:hover {
+ background-color: transparent;
+}
+
#sidebar .networks {
- padding-top: 20px;
- touch-action: pan-y;
- overscroll-behavior: contain;
- -webkit-overflow-scrolling: touch;
- flex-grow: 1;
- overflow: auto;
- overflow-x: hidden;
+ padding-top: 5px;
}
#sidebar .networks:empty {
@@ -549,7 +595,7 @@ kbd {
#sidebar .network,
#sidebar .network-placeholder {
position: relative;
- margin-bottom: 30px;
+ margin-bottom: 20px;
touch-action: pan-y;
}
@@ -564,7 +610,6 @@ kbd {
#sidebar .chan-placeholder {
display: flex;
padding: 8px 14px;
- transition: color 0.2s;
}
#sidebar .network-placeholder,
@@ -762,29 +807,19 @@ kbd {
}
#footer {
- background: rgba(0, 0, 0, 0.06);
height: 45px;
font-size: 14px;
- line-height: 45px;
- text-align: center;
- width: 220px;
flex-shrink: 0;
+ display: flex;
+ justify-content: center;
}
-#footer button.active {
- color: #fff;
-}
-
-#footer .icon {
- color: #9ca5b4;
+#footer button {
+ color: #b7c5d1;
display: inline-block;
- line-height: 34px;
- padding: 0 12px;
- transition: color 0.2s;
-}
-
-#footer .icon:hover {
- color: #fff;
+ width: 45px;
+ height: 100%;
+ border-radius: 5px;
}
.signed-out #footer .sign-in {
@@ -846,7 +881,7 @@ kbd {
}
#windows .window {
- background: #fff;
+ background: var(--window-bg-color);
display: none;
overflow-y: auto;
height: 100%;
@@ -893,8 +928,8 @@ kbd {
}
#windows .header {
- line-height: 48px;
- height: 48px;
+ line-height: 45px;
+ height: 45px;
padding: 0 6px;
display: flex;
flex-shrink: 0;
@@ -1016,7 +1051,6 @@ kbd {
}
#chat .userlist {
- background: #fff;
border-left: 1px solid #e7e7e7;
width: 180px;
display: flex;
@@ -1093,13 +1127,13 @@ kbd {
left: 0;
right: 0;
top: 50%;
- border-top: 1px solid rgba(231, 76, 60, 0.5);
+ border-top: 1px solid var(--unread-marker-color);
}
#chat .unread-marker-text::before {
content: "New messages";
- background-color: white;
- color: rgba(231, 76, 60, 0.5);
+ background-color: var(--window-bg-color);
+ color: var(--unread-marker-color);
padding: 0 10px;
}
@@ -1123,13 +1157,13 @@ kbd {
left: 0;
right: 0;
top: 50%;
- border-top: 1px solid rgba(0, 107, 59, 0.5);
+ border-top: 1px solid var(--date-marker-color);
}
#chat .date-marker-text::before {
content: attr(data-label);
- background-color: white;
- color: rgba(0, 107, 59, 0.5);
+ background-color: var(--window-bg-color);
+ color: var(--date-marker-color);
padding: 0 10px;
}
@@ -1463,18 +1497,18 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .userlist .count {
background: #fafafa;
- height: 48px;
+ height: 45px;
flex-shrink: 0;
position: relative;
}
#chat .userlist .search {
- color: #222;
+ color: var(--body-color);
border: 0;
background: none;
font: inherit;
outline: 0;
- padding: 18px 16px;
+ padding: 13px;
width: 100%;
}
@@ -1578,7 +1612,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
flex-grow: 0;
}
-.logo-inverted {
+#windows .logo-inverted {
display: none; /* In dark themes, inverted logo must be used instead */
}
@@ -1710,21 +1744,17 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
.password-container .reveal-password span {
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
- color: #cdd3da;
+ color: #607992;
width: 37px;
height: 37px;
display: flex;
justify-content: center;
align-items: center;
-}
-
-.password-container .reveal-password span:hover {
- color: #79838c;
+ cursor: pointer;
}
.password-container .reveal-password span::before {
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
- transition: color 0.2s;
}
.password-container .reveal-password.visible span::before {
@@ -1864,17 +1894,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
}
#form {
- background: #eee;
- border-top: 1px solid #ddd;
flex: 0 0 auto;
- padding: 5px;
}
#windows #form .input {
- border: 1px solid #ddd;
- border-radius: 2px;
+ border: 0;
+ border-top: 1px solid #e7e7e7;
+ border-radius: 0;
margin: 0;
- padding: 0;
+ padding: 6px;
background: white;
display: flex;
align-items: flex-end;
@@ -1930,10 +1958,9 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
}
#form #submit {
- color: #9ca5b4;
+ color: #607992;
font-size: 14px;
height: 32px;
- transition: opacity 0.2s;
width: 32px;
flex: 0 0 auto;
}
@@ -2274,6 +2301,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
opacity: 0;
}
+ #sidebar .logo-container {
+ margin-top: 5px;
+ }
+
#sidebar button,
#sidebar .chan,
#sidebar .empty,
@@ -2295,7 +2326,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
}
#sidebar {
- background: #455164;
+ background: var(--body-bg-color);
height: 100%;
position: absolute;
left: -220px;
@@ -2356,6 +2387,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
}
#chat .userlist {
+ background-color: var(--window-bg-color);
height: 100%;
position: absolute;
right: 0;
diff --git a/client/img/logo-horizontal-transparent-bg-inverted.svg b/client/img/logo-horizontal-transparent-bg-inverted.svg
new file mode 100644
index 00000000..53db68da
--- /dev/null
+++ b/client/img/logo-horizontal-transparent-bg-inverted.svg
@@ -0,0 +1 @@
+
diff --git a/client/img/logo-horizontal-transparent-bg.svg b/client/img/logo-horizontal-transparent-bg.svg
new file mode 100644
index 00000000..ad81b7da
--- /dev/null
+++ b/client/img/logo-horizontal-transparent-bg.svg
@@ -0,0 +1 @@
+
diff --git a/client/img/logo-transparent-bg-inverted.svg b/client/img/logo-transparent-bg-inverted.svg
new file mode 100644
index 00000000..0c96875b
--- /dev/null
+++ b/client/img/logo-transparent-bg-inverted.svg
@@ -0,0 +1 @@
+
diff --git a/client/img/logo-transparent-bg.svg b/client/img/logo-transparent-bg.svg
new file mode 100644
index 00000000..b05918bb
--- /dev/null
+++ b/client/img/logo-transparent-bg.svg
@@ -0,0 +1 @@
+
diff --git a/client/index.html.tpl b/client/index.html.tpl
index 9035dc87..24f8b1f6 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -50,9 +50,15 @@
" data-transports="<%- JSON.stringify(transports) %>">