mirror of
https://github.com/thelounge/thelounge
synced 2024-11-11 15:07:14 +00:00
Merge pull request #2315 from thelounge/astorije/ui
Revamp default theme a bit
This commit is contained in:
Jérémie Astori
GitHub
commit
e2602b28ad
8 changed files with 201 additions and 189 deletions
|
|
@ -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;
|
||||
|
|
|
|||
1
client/img/logo-horizontal-transparent-bg-inverted.svg
Normal file
1
client/img/logo-horizontal-transparent-bg-inverted.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
1
client/img/logo-horizontal-transparent-bg.svg
Normal file
1
client/img/logo-horizontal-transparent-bg.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
1
client/img/logo-transparent-bg-inverted.svg
Normal file
1
client/img/logo-transparent-bg-inverted.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
client/img/logo-transparent-bg.svg
Normal file
1
client/img/logo-transparent-bg.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -50,9 +50,15 @@
|
|||
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
|
||||
<div id="viewport" role="tablist">
|
||||
<aside id="sidebar">
|
||||
<div class="networks"></div>
|
||||
<div class="empty">
|
||||
You're not connected to any networks yet.
|
||||
<div class="scrollable-area">
|
||||
<div class="logo-container">
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,35 @@
|
|||
body {
|
||||
padding: 4px;
|
||||
#viewport {
|
||||
padding: 5px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-left: 4px;
|
||||
border-radius: 2px;
|
||||
width: 216px;
|
||||
#viewport.menu-open { /* On desktop view, .menu-open means menu is closed... */
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#windows .window::before {
|
||||
background: #f4f4f4;
|
||||
background-image: linear-gradient(#f4f4f4, #ececec);
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 10px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
#viewport #loading, /* ... except on pages without a menu */
|
||||
#viewport #sign-in {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#windows .window {
|
||||
border-radius: 2px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
#viewport,
|
||||
#viewport.menu-open {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
#viewport #loading,
|
||||
#viewport #sign-in {
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
#windows .window::before {
|
||||
display: none;
|
||||
#footer .icon {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#windows .window {
|
||||
|
|
|
|||
|
|
@ -1,33 +1,27 @@
|
|||
@import 'default.css';
|
||||
|
||||
:root {
|
||||
--link-color: #428bca;
|
||||
--body-color: #f3f3f3;
|
||||
--link-color: #77abd9;
|
||||
--window-bg-color: #303e4a;
|
||||
--date-marker-color: #97ea70;
|
||||
--unread-marker-color: #f92772;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.logo {
|
||||
#windows .logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-inverted {
|
||||
#windows .logo-inverted {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#main,
|
||||
#chat .userlist,
|
||||
#windows .chan,
|
||||
#windows .window {
|
||||
background: #333c4a;
|
||||
}
|
||||
|
||||
#chat .userlist .count {
|
||||
background-color: #2e3642;
|
||||
background-color: #28333d;
|
||||
}
|
||||
|
||||
#chat .userlist .search {
|
||||
color: #ccc;
|
||||
padding: 15px 16px;
|
||||
#chat .count::before {
|
||||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
|
|
@ -35,16 +29,12 @@ body {
|
|||
#windows #chat .header,
|
||||
#chat .user-mode::before,
|
||||
#chat .userlist {
|
||||
border-color: #2a323d;
|
||||
border-color: #28333d;
|
||||
}
|
||||
|
||||
/* User list */
|
||||
#chat .user-mode {
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
#chat .userlist .user.active {
|
||||
background-color: #242a33;
|
||||
background-color: #28333d;
|
||||
}
|
||||
|
||||
/* Nicknames */
|
||||
|
|
@ -55,16 +45,16 @@ body {
|
|||
#chat.colored-nicks .user.color-1 { color: #f7adf7; }
|
||||
#chat.colored-nicks .user.color-2 { color: #abf99f; }
|
||||
#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-6 { color: #f7999a; }
|
||||
#chat.colored-nicks .user.color-7 { color: #f497b9; }
|
||||
#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-11 { color: #ad88fc; }
|
||||
#chat.colored-nicks .user.color-11 { color: #b695fc; }
|
||||
#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-15 { color: #8cb6ea; }
|
||||
#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-19 { color: #ffcce3; }
|
||||
#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-23 { color: #97ea70; }
|
||||
#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-27 { color: #ffade1; }
|
||||
#chat.colored-nicks .user.color-28 { color: #98ecf2; }
|
||||
#chat.colored-nicks .user.color-29 { color: #7187f2; }
|
||||
#chat.colored-nicks .user.color-30 { color: #9676e2; }
|
||||
#chat.colored-nicks .user.color-29 { color: #91a2f5; }
|
||||
#chat.colored-nicks .user.color-30 { color: #b19aea; }
|
||||
#chat.colored-nicks .user.color-31 { color: #f2a4eb; }
|
||||
#chat.colored-nicks .user.color-32 { color: #85f27d; }
|
||||
|
||||
|
|
@ -91,59 +81,43 @@ body {
|
|||
.irc-fg12 { color: #50a8ff; }
|
||||
|
||||
/* Message form */
|
||||
#form {
|
||||
background: #2a323d;
|
||||
border-color: #242a33;
|
||||
}
|
||||
|
||||
#windows #form .input {
|
||||
background-color: #2e3642 !important;
|
||||
border-color: #242a33 !important;
|
||||
color: #ccc;
|
||||
background-color: #28333d;
|
||||
border-color: #28333d;
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
#form #nick {
|
||||
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;
|
||||
}
|
||||
|
||||
#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 {
|
||||
color: #fefefe;
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
#chat .self .text {
|
||||
color: #99a2b4;
|
||||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
#chat .error,
|
||||
|
|
@ -155,30 +129,34 @@ body {
|
|||
}
|
||||
|
||||
#chat .unhandled .from {
|
||||
color: #99a2b4;
|
||||
}
|
||||
|
||||
#chat .msg.quit .time,
|
||||
#chat .msg.quit .from button {
|
||||
color: #d0907d !important;
|
||||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
#chat .msg.topic {
|
||||
color: #fefefe;
|
||||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
#chat .msg.join .time,
|
||||
#chat .msg.join .from button {
|
||||
color: #84ce88 !important;
|
||||
#chat .condensed .content,
|
||||
#chat .away .content,
|
||||
#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 {
|
||||
color: #ccc;
|
||||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
code,
|
||||
.irc-monospace {
|
||||
background: #242a33;
|
||||
background: #28333d;
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +171,7 @@ kbd {
|
|||
|
||||
/* Embeds */
|
||||
#chat .toggle-content {
|
||||
background: #242a33;
|
||||
background: #28333d;
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
|
|
@ -204,18 +182,18 @@ kbd {
|
|||
/* Form elements */
|
||||
|
||||
#chat-container ::-moz-placeholder {
|
||||
color: #99a2b4;
|
||||
opacity: 0.5;
|
||||
color: #b7c5d1;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#chat-container ::-webkit-input-placeholder {
|
||||
color: #99a2b4;
|
||||
opacity: 0.5;
|
||||
color: #b7c5d1;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#chat-container :-ms-input-placeholder {
|
||||
color: #99a2b4;
|
||||
opacity: 0.5;
|
||||
color: #b7c5d1;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* End form elements */
|
||||
|
|
|
|||
Loading…
Reference in a new issue