Revamp default theme a bit

This commit is contained in:
Jérémie Astori 2018-03-30 02:07:11 -04:00
parent a81cef397c
commit 6201df072e
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
4 changed files with 129 additions and 77 deletions

View File

@ -23,7 +23,7 @@ body {
} }
body { body {
background: #455164; background: #415364;
color: #222; color: #222;
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;
@ -185,11 +185,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 +392,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 +422,6 @@ kbd {
#viewport { #viewport {
display: flex; display: flex;
height: 100%; height: 100%;
overflow: hidden;
} }
#windows { #windows {
@ -437,19 +430,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;
@ -513,7 +508,7 @@ kbd {
#sidebar .chan, #sidebar .chan,
#sidebar .empty { #sidebar .empty {
color: #99a2b4; color: #b7c5d1;
font-size: 14px; font-size: 14px;
} }
@ -521,19 +516,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; touch-action: pan-y;
overscroll-behavior: contain; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -549,7 +565,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 +580,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 +777,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 {
@ -893,8 +898,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;
@ -1463,7 +1468,7 @@ 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;
} }
@ -1474,7 +1479,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
background: none; background: none;
font: inherit; font: inherit;
outline: 0; outline: 0;
padding: 18px 16px; padding: 13px;
width: 100%; width: 100%;
} }
@ -1710,21 +1715,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 +1865,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 +1929,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;
} }
@ -2292,7 +2290,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
} }
#sidebar { #sidebar {
background: #455164; background: #415364;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: -220px; left: -220px;

View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 838 276" style="enable-background:new 0 0 838 276;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF9E18;}
.st1{fill:#FFFFFF;}
</style>
<g>
<g>
<g>
<g>
<path class="st0" d="M319.5,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L164.9,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
l78.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,0
l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
C319.2,98.7,319.5,99.3,319.5,100z"/>
<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"/>
</g>
<g>
<path class="st1" d="M64,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.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,0
L47.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-0.7,1.2-2.5,0-3.2
l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C64.3,177.3,64,176.7,64,176z"/>
<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"/>
</g>
</g>
</g>
<g>
<g>
<polygon class="st0" points="362.9,121.4 378.1,121.4 378.1,162.2 389.6,162.2 389.6,121.4 404.9,121.4 404.9,111.9 362.9,111.9
"/>
<polygon class="st0" points="446.5,132 424.4,132 424.4,111.9 413.2,111.9 413.2,162.3 424.4,162.3 424.4,141.4 446.5,141.4
446.5,162.3 457.7,162.3 457.7,111.9 446.5,111.9 "/>
<polygon class="st0" points="500.7,121 500.7,111.9 466.2,111.9 466.2,162.3 500.7,162.3 500.7,153.2 477.4,153.2 477.4,141.3
499.2,141.3 499.2,132.1 477.4,132.1 477.4,121 "/>
</g>
<g>
<polygon class="st1" points="520.6,111.9 509.2,111.9 509.2,162.3 542.5,162.3 542.5,152.8 520.6,152.8 "/>
<path class="st1" d="M585.8,115c-3.8-2.1-8.4-3.1-13.6-3.1c-5.2,0-9.8,1-13.6,3.1c-3.9,2.1-6.9,5-9,8.8
c-2.1,3.8-3.1,8.3-3.1,13.4c0,5.1,1.1,9.6,3.1,13.4c2.1,3.8,5.1,6.8,9,8.9c3.9,2.1,8.4,3.1,13.6,3.1c5.2,0,9.8-1,13.6-3.1
c3.8-2.1,6.8-5,8.9-8.9c2.1-3.8,3.1-8.3,3.1-13.4c0-5.1-1-9.6-3.1-13.4C592.6,120,589.6,117.1,585.8,115z M585.8,137.2
c0,5.3-1.2,9.4-3.6,12.2c-2.4,2.8-5.7,4.2-10,4.2c-4.3,0-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2c0-5.3,1.2-9.4,3.6-12.1
c2.4-2.7,5.7-4.1,10-4.1c4.2,0,7.6,1.4,10,4.1C584.6,127.8,585.8,131.9,585.8,137.2z"/>
<path class="st1" d="M637.7,141.6c0,3.8-0.9,6.7-2.6,8.7c-1.7,2-4.3,2.9-7.6,2.9c-3.3,0-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7
V112H606v29.1c0,6.9,1.8,12.2,5.5,15.8c3.6,3.6,9,5.4,16,5.4c6.9,0,12.3-1.8,16-5.4c3.7-3.6,5.5-8.9,5.5-15.8V112h-11.3V141.6z"
/>
<polygon class="st1" points="690.1,142.9 665.8,111.9 657.2,111.9 657.2,162.3 668.1,162.3 668.1,131.3 692.3,162.2 692.4,162.3
701,162.3 701,111.9 690.1,111.9 "/>
<path class="st1" d="M733.4,142.4h9.6v10.1c-2.6,0.6-5.2,0.9-7.8,0.9c-9.7,0-14.5-5.3-14.5-16.3c0-10.8,4.5-16,13.8-16
c2.5,0,4.8,0.4,6.9,1.1c2.1,0.7,4.3,1.9,6.6,3.5l0.3,0.2l3.7-8.2l-0.2-0.2c-2-1.7-4.6-3.1-7.7-4.1c-3.1-1-6.4-1.4-10-1.4
c-5,0-9.5,1-13.3,3.1c-3.8,2-6.7,5-8.8,8.7c-2.1,3.8-3.1,8.2-3.1,13.3c0,5.2,1,9.7,3.1,13.5c2.1,3.8,5.1,6.7,8.9,8.7
c3.8,2,8.4,3,13.6,3c3.4,0,6.7-0.3,9.9-1c3.2-0.6,6-1.5,8.4-2.7l0.2-0.1v-24.3h-19.9V142.4z"/>
<polygon class="st1" points="795.8,121 795.8,111.9 761.9,111.9 761.9,162.4 795.8,162.4 795.8,153.2 772.9,153.2 772.9,141.3
794.4,141.3 794.4,132.1 772.9,132.1 772.9,121 "/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -50,6 +50,7 @@
<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">
<img src="img/logo-horizontal-transparent-bg-inverted.svg" class="logo" alt="The Lounge" height="45">
<div class="networks"></div> <div class="networks"></div>
<div class="empty"> <div class="empty">
You're not connected to any networks yet. You're not connected to any networks yet.

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 {