supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2315 from thelounge/astorije/ui

Browse Source 
Revamp default theme a bit
This commit is contained in:
Jérémie Astori 2018-06-19 00:26:20 -04:00 committed by GitHub
commit e2602b28ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 201 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
client/css/style.css
View File

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

1
client/img/logo-horizontal-transparent-bg-inverted.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 838 276"><style>.st0{fill:#ff9e18}.st1{fill:#fff}</style><path class="st0" d="M319.5 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L164.9 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1 0L210 59.1c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L47.7 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0L65 177.5c-.7-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/><path class="st0" d="M362.9 121.4h15.2v40.8h11.5v-40.8h15.3v-9.5h-42zm83.6 10.6h-22.1v-20.1h-11.2v50.4h11.2v-20.9h22.1v20.9h11.2v-50.4h-11.2zm54.2-11v-9.1h-34.5v50.4h34.5v-9.1h-23.3v-11.9h21.8v-9.2h-21.8V121z"/><path class="st1" d="M520.6 111.9h-11.4v50.4h33.3v-9.5h-21.9zm65.2 3.1c-3.8-2.1-8.4-3.1-13.6-3.1-5.2 0-9.8 1-13.6 3.1-3.9 2.1-6.9 5-9 8.8-2.1 3.8-3.1 8.3-3.1 13.4s1.1 9.6 3.1 13.4c2.1 3.8 5.1 6.8 9 8.9 3.9 2.1 8.4 3.1 13.6 3.1 5.2 0 9.8-1 13.6-3.1 3.8-2.1 6.8-5 8.9-8.9 2.1-3.8 3.1-8.3 3.1-13.4s-1-9.6-3.1-13.4c-2.1-3.8-5.1-6.7-8.9-8.8zm0 22.2c0 5.3-1.2 9.4-3.6 12.2-2.4 2.8-5.7 4.2-10 4.2s-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2 0-5.3 1.2-9.4 3.6-12.1 2.4-2.7 5.7-4.1 10-4.1 4.2 0 7.6 1.4 10 4.1 2.4 2.7 3.6 6.8 3.6 12.1zm51.9 4.4c0 3.8-.9 6.7-2.6 8.7-1.7 2-4.3 2.9-7.6 2.9s-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7V112H606v29.1c0 6.9 1.8 12.2 5.5 15.8 3.6 3.6 9 5.4 16 5.4 6.9 0 12.3-1.8 16-5.4 3.7-3.6 5.5-8.9 5.5-15.8V112h-11.3v29.6zm52.4 1.3l-24.3-31h-8.6v50.4h10.9v-31l24.2 30.9.1.1h8.6v-50.4h-10.9zm43.3-.5h9.6v10.1c-2.6.6-5.2.9-7.8.9-9.7 0-14.5-5.3-14.5-16.3 0-10.8 4.5-16 13.8-16 2.5 0 4.8.4 6.9 1.1 2.1.7 4.3 1.9 6.6 3.5l.3.2 3.7-8.2-.2-.2c-2-1.7-4.6-3.1-7.7-4.1-3.1-1-6.4-1.4-10-1.4-5 0-9.5 1-13.3 3.1-3.8 2-6.7 5-8.8 8.7-2.1 3.8-3.1 8.2-3.1 13.3 0 5.2 1 9.7 3.1 13.5 2.1 3.8 5.1 6.7 8.9 8.7 3.8 2 8.4 3 13.6 3 3.4 0 6.7-.3 9.9-1 3.2-.6 6-1.5 8.4-2.7l.2-.1v-24.3h-19.9v8.2zm62.4-21.4v-9.1h-33.9v50.5h33.9v-9.2h-22.9v-11.9h21.5v-9.2h-21.5V121z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
client/img/logo-horizontal-transparent-bg.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 838 276"><style>.st0{fill:#ff9e18}.st1{fill:#415364}</style><path class="st0" d="M319.5 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L164.9 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1 0L210 59.1c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L47.7 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0L65 177.5c-.7-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/><path class="st0" d="M362.9 121.4h15.2v40.8h11.5v-40.8h15.3v-9.5h-42zm83.6 10.6h-22.1v-20.1h-11.2v50.4h11.2v-20.9h22.1v20.9h11.2v-50.4h-11.2zm54.2-11v-9.1h-34.5v50.4h34.5v-9.1h-23.3v-11.9h21.8v-9.2h-21.8V121z"/><path class="st1" d="M520.6 111.9h-11.4v50.4h33.3v-9.5h-21.9zm65.2 3.1c-3.8-2.1-8.4-3.1-13.6-3.1-5.2 0-9.8 1-13.6 3.1-3.9 2.1-6.9 5-9 8.8-2.1 3.8-3.1 8.3-3.1 13.4s1.1 9.6 3.1 13.4c2.1 3.8 5.1 6.8 9 8.9 3.9 2.1 8.4 3.1 13.6 3.1 5.2 0 9.8-1 13.6-3.1 3.8-2.1 6.8-5 8.9-8.9 2.1-3.8 3.1-8.3 3.1-13.4s-1-9.6-3.1-13.4c-2.1-3.8-5.1-6.7-8.9-8.8zm0 22.2c0 5.3-1.2 9.4-3.6 12.2-2.4 2.8-5.7 4.2-10 4.2s-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2 0-5.3 1.2-9.4 3.6-12.1 2.4-2.7 5.7-4.1 10-4.1 4.2 0 7.6 1.4 10 4.1 2.4 2.7 3.6 6.8 3.6 12.1zm51.9 4.4c0 3.8-.9 6.7-2.6 8.7-1.7 2-4.3 2.9-7.6 2.9s-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7V112H606v29.1c0 6.9 1.8 12.2 5.5 15.8 3.6 3.6 9 5.4 16 5.4 6.9 0 12.3-1.8 16-5.4 3.7-3.6 5.5-8.9 5.5-15.8V112h-11.3v29.6zm52.4 1.3l-24.3-31h-8.6v50.4h10.9v-31l24.2 30.9.1.1h8.6v-50.4h-10.9zm43.3-.5h9.6v10.1c-2.6.6-5.2.9-7.8.9-9.7 0-14.5-5.3-14.5-16.3 0-10.8 4.5-16 13.8-16 2.5 0 4.8.4 6.9 1.1 2.1.7 4.3 1.9 6.6 3.5l.3.2 3.7-8.2-.2-.2c-2-1.7-4.6-3.1-7.7-4.1-3.1-1-6.4-1.4-10-1.4-5 0-9.5 1-13.3 3.1-3.8 2-6.7 5-8.8 8.7-2.1 3.8-3.1 8.2-3.1 13.3 0 5.2 1 9.7 3.1 13.5 2.1 3.8 5.1 6.7 8.9 8.7 3.8 2 8.4 3 13.6 3 3.4 0 6.7-.3 9.9-1 3.2-.6 6-1.5 8.4-2.7l.2-.1v-24.3h-19.9v8.2zm62.4-21.4v-9.1h-33.9v50.5h33.9v-9.2h-22.9v-11.9h21.5v-9.2h-21.5V121z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
client/img/logo-transparent-bg-inverted.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 386 276"><style>.st0{fill:#ff9e18}.st1{fill:#fff}</style><path class="st0" d="M320.1 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L165.5 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5L258 38.3c-3.4-2-7.6-2-11.1 0l-36.3 20.8c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64.6 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L48.3 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0l-65.8-37.7c-.6-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
client/img/logo-transparent-bg.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 386 276"><style>.st0{fill:#ff9e18}.st1{fill:#415364}</style><path class="st0" d="M320.1 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L165.5 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5L258 38.3c-3.4-2-7.6-2-11.1 0l-36.3 20.8c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64.6 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L48.3 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0l-65.8-37.7c-.6-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

12
client/index.html.tpl
View File

@ -50,9 +50,15 @@
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>"> <body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="viewport" role="tablist"> <div id="viewport" role="tablist">
<aside id="sidebar"> <aside id="sidebar">
<div class="networks"></div> <div class="scrollable-area">
<div class="empty"> <div class="logo-container">
You're not connected to any networks yet. <img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg.svg" class="logo" alt="The Lounge">
<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge">
</div>
<div class="networks"></div>
<div class="empty">
You are not connected to any networks yet.
</div>
</div> </div>
<footer id="footer"> <footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in" role="tab" aria-controls="sign-in" aria-selected="false"></button></span> <span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in" role="tab" aria-controls="sign-in" aria-selected="false"></button></span>

38
client/themes/default.css
View File

@ -1,43 +1,35 @@
body { #viewport {
padding: 4px; padding: 5px;
padding-left: 0; padding-left: 0;
} }
#footer { #viewport.menu-open { /* On desktop view, .menu-open means menu is closed... */
margin-left: 4px; padding-left: 5px;
border-radius: 2px;
width: 216px;
} }
#windows .window::before { #viewport #loading, /* ... except on pages without a menu */
background: #f4f4f4; #viewport #sign-in {
background-image: linear-gradient(#f4f4f4, #ececec); margin-left: 5px;
border-bottom: 1px solid #d7d7d7;
content: " ";
display: block;
height: 10px;
position: relative;
z-index: 10;
flex-shrink: 0;
} }
#windows .window { #windows .window {
border-radius: 2px; border-radius: 5px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
body { #viewport,
#viewport.menu-open {
padding: 0; padding: 0;
} }
#footer { #viewport #loading,
#viewport #sign-in {
margin-left: 0; margin-left: 0;
border-radius: 0;
width: inherit;
} }
#windows .window::before { #footer .icon {
display: none; border-radius: 0;
} }
#windows .window { #windows .window {

160
client/themes/morning.css
View File

@ -1,33 +1,27 @@
@import 'default.css';
:root { :root {
--link-color: #428bca; --body-color: #f3f3f3;
--link-color: #77abd9;
--window-bg-color: #303e4a;
--date-marker-color: #97ea70;
--unread-marker-color: #f92772;
} }
body { #windows .logo {
color: #ccc;
}
.logo {
display: none; display: none;
} }
.logo-inverted { #windows .logo-inverted {
display: inline-block; display: inline-block;
} }
#main,
#chat .userlist,
#windows .chan,
#windows .window {
background: #333c4a;
}
#chat .userlist .count { #chat .userlist .count {
background-color: #2e3642; background-color: #28333d;
} }
#chat .userlist .search { #chat .count::before {
color: #ccc; color: #b7c5d1;
padding: 15px 16px;
} }
/* Borders */ /* Borders */
@ -35,16 +29,12 @@ body {
#windows #chat .header, #windows #chat .header,
#chat .user-mode::before, #chat .user-mode::before,
#chat .userlist { #chat .userlist {
border-color: #2a323d; border-color: #28333d;
} }
/* User list */ /* User list */
#chat .user-mode {
color: #fefefe;
}
#chat .userlist .user.active { #chat .userlist .user.active {
background-color: #242a33; background-color: #28333d;
} }
/* Nicknames */ /* Nicknames */
@ -55,16 +45,16 @@ body {
#chat.colored-nicks .user.color-1 { color: #f7adf7; } #chat.colored-nicks .user.color-1 { color: #f7adf7; }
#chat.colored-nicks .user.color-2 { color: #abf99f; } #chat.colored-nicks .user.color-2 { color: #abf99f; }
#chat.colored-nicks .user.color-3 { color: #86efdc; } #chat.colored-nicks .user.color-3 { color: #86efdc; }
#chat.colored-nicks .user.color-4 { color: #b76ee5; } #chat.colored-nicks .user.color-4 { color: #c890eb; }
#chat.colored-nicks .user.color-5 { color: #f9a4b3; } #chat.colored-nicks .user.color-5 { color: #f9a4b3; }
#chat.colored-nicks .user.color-6 { color: #f7999a; } #chat.colored-nicks .user.color-6 { color: #f7999a; }
#chat.colored-nicks .user.color-7 { color: #f497b9; } #chat.colored-nicks .user.color-7 { color: #f497b9; }
#chat.colored-nicks .user.color-8 { color: #f9a9d7; } #chat.colored-nicks .user.color-8 { color: #f9a9d7; }
#chat.colored-nicks .user.color-9 { color: #7fa2e2; } #chat.colored-nicks .user.color-9 { color: #85a7e3; }
#chat.colored-nicks .user.color-10 { color: #a8b8ff; } #chat.colored-nicks .user.color-10 { color: #a8b8ff; }
#chat.colored-nicks .user.color-11 { color: #ad88fc; } #chat.colored-nicks .user.color-11 { color: #b695fc; }
#chat.colored-nicks .user.color-12 { color: #f4aead; } #chat.colored-nicks .user.color-12 { color: #f4aead; }
#chat.colored-nicks .user.color-13 { color: #fc71ab; } #chat.colored-nicks .user.color-13 { color: #fc7cb1; }
#chat.colored-nicks .user.color-14 { color: #ff72e0; } #chat.colored-nicks .user.color-14 { color: #ff72e0; }
#chat.colored-nicks .user.color-15 { color: #8cb6ea; } #chat.colored-nicks .user.color-15 { color: #8cb6ea; }
#chat.colored-nicks .user.color-16 { color: #f9857c; } #chat.colored-nicks .user.color-16 { color: #f9857c; }
@ -72,7 +62,7 @@ body {
#chat.colored-nicks .user.color-18 { color: #8df484; } #chat.colored-nicks .user.color-18 { color: #8df484; }
#chat.colored-nicks .user.color-19 { color: #ffcce3; } #chat.colored-nicks .user.color-19 { color: #ffcce3; }
#chat.colored-nicks .user.color-20 { color: #efcc81; } #chat.colored-nicks .user.color-20 { color: #efcc81; }
#chat.colored-nicks .user.color-21 { color: #90a1ed; } #chat.colored-nicks .user.color-21 { color: #92a2ed; }
#chat.colored-nicks .user.color-22 { color: #f4d484; } #chat.colored-nicks .user.color-22 { color: #f4d484; }
#chat.colored-nicks .user.color-23 { color: #97ea70; } #chat.colored-nicks .user.color-23 { color: #97ea70; }
#chat.colored-nicks .user.color-24 { color: #fcbbba; } #chat.colored-nicks .user.color-24 { color: #fcbbba; }
@ -80,8 +70,8 @@ body {
#chat.colored-nicks .user.color-26 { color: #c7ff93; } #chat.colored-nicks .user.color-26 { color: #c7ff93; }
#chat.colored-nicks .user.color-27 { color: #ffade1; } #chat.colored-nicks .user.color-27 { color: #ffade1; }
#chat.colored-nicks .user.color-28 { color: #98ecf2; } #chat.colored-nicks .user.color-28 { color: #98ecf2; }
#chat.colored-nicks .user.color-29 { color: #7187f2; } #chat.colored-nicks .user.color-29 { color: #91a2f5; }
#chat.colored-nicks .user.color-30 { color: #9676e2; } #chat.colored-nicks .user.color-30 { color: #b19aea; }
#chat.colored-nicks .user.color-31 { color: #f2a4eb; } #chat.colored-nicks .user.color-31 { color: #f2a4eb; }
#chat.colored-nicks .user.color-32 { color: #85f27d; } #chat.colored-nicks .user.color-32 { color: #85f27d; }
@ -91,59 +81,43 @@ body {
.irc-fg12 { color: #50a8ff; } .irc-fg12 { color: #50a8ff; }
/* Message form */ /* Message form */
#form {
background: #2a323d;
border-color: #242a33;
}
#windows #form .input { #windows #form .input {
background-color: #2e3642 !important; background-color: #28333d;
border-color: #242a33 !important; border-color: #28333d;
color: #ccc; color: var(--body-color);
} }
#form #nick { #form #nick {
background: #242a33; background: #242a33;
color: #ccc;
}
#form #submit:hover {
opacity: 1;
}
#chat .header {
color: #99a2b4;
}
/* Notification dot on the top right corner of the menu icon */
#viewport .lt::after {
border-color: #333c4a;
}
#chat .unread-marker-text::before {
background-color: #333c4a;
}
#chat .date-marker::before {
border-color: #97ea70;
}
#chat .date-marker-text::before {
background-color: #333c4a;
color: #97ea70;
}
/* Setup text colors */
#chat .msg {
color: #f3f3f3; color: #f3f3f3;
} }
#windows .window {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.75);
}
#windows .window h2 {
color: #b7c5d1;
}
#windows .header .topic {
color: #b7c5d1;
}
#viewport .lt,
#viewport .rt,
#chat button.menu,
#form #submit {
color: #b7c5d1;
}
/* Setup text colors */
#chat .message { #chat .message {
color: #fefefe; color: #f3f3f3;
} }
#chat .self .text { #chat .self .text {
color: #99a2b4; color: #b7c5d1;
} }
#chat .error, #chat .error,
@ -155,30 +129,34 @@ body {
} }
#chat .unhandled .from { #chat .unhandled .from {
color: #99a2b4; color: #b7c5d1;
}
#chat .msg.quit .time,
#chat .msg.quit .from button {
color: #d0907d !important;
} }
#chat .msg.topic { #chat .msg.topic {
color: #fefefe; color: #b7c5d1;
} }
#chat .msg.join .time, #chat .condensed .content,
#chat .msg.join .from button { #chat .away .content,
color: #84ce88 !important; #chat .back .content,
#chat .join .content,
#chat .kick .content,
#chat .mode .content,
#chat .nick .content,
#chat .part .content,
#chat .quit .content,
#chat .topic .content,
#chat .topic_set_by .content {
color: #b7c5d1;
} }
#chat table.channel-list td { #chat table.channel-list td {
color: #ccc; color: #b7c5d1;
} }
code, code,
.irc-monospace { .irc-monospace {
background: #242a33; background: #28333d;
color: #f3f3f3; color: #f3f3f3;
} }
@ -193,7 +171,7 @@ kbd {
/* Embeds */ /* Embeds */
#chat .toggle-content { #chat .toggle-content {
background: #242a33; background: #28333d;
color: #f3f3f3; color: #f3f3f3;
} }
@ -204,18 +182,18 @@ kbd {
/* Form elements */ /* Form elements */
#chat-container ::-moz-placeholder { #chat-container ::-moz-placeholder {
color: #99a2b4; color: #b7c5d1;
opacity: 0.5; opacity: 0.75;
} }
#chat-container ::-webkit-input-placeholder { #chat-container ::-webkit-input-placeholder {
color: #99a2b4; color: #b7c5d1;
opacity: 0.5; opacity: 0.75;
} }
#chat-container :-ms-input-placeholder { #chat-container :-ms-input-placeholder {
color: #99a2b4; color: #b7c5d1;
opacity: 0.5; opacity: 0.75;
} }
/* End form elements */ /* End form elements */