Style connection error message consistently with the rest of the app, above the message input

This commit is contained in:
Jérémie Astori 2016-12-13 01:27:56 -05:00
parent a8926e2ced
commit c20813609b
6 changed files with 34 additions and 16 deletions

View File

@ -1302,7 +1302,6 @@ button {
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: 5px; padding: 5px;
position: relative;
} }
#windows #form .input { #windows #form .input {
@ -1320,23 +1319,10 @@ button {
#connection-error { #connection-error {
display: none; display: none;
align-items: center;
justify-content: center;
line-height: 1;
background: #f44336;
color: #fff;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 5px;
z-index: 30;
cursor: pointer;
} }
#connection-error.shown { #connection-error.shown {
display: flex; display: block;
} }
[contenteditable]:focus { [contenteditable]:focus {

View File

@ -57,8 +57,8 @@
</div> </div>
<div id="chat-container" class="window"> <div id="chat-container" class="window">
<div id="chat"></div> <div id="chat"></div>
<button id="connection-error" class="btn btn-reconnect">Client connection lost &mdash; Click here to reconnect</button>
<form id="form" method="post" action=""> <form id="form" method="post" action="">
<div id="connection-error"><span>Client connection lost. Click to reconnect.</span></div>
<div class="input"> <div class="input">
<span id="nick"> <span id="nick">
<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements <span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements

View File

@ -58,6 +58,14 @@ a:hover,
background: #00ff0e; background: #00ff0e;
} }
.btn-reconnect {
background: #f00;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}
#settings .opt { #settings .opt {
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 12px;

View File

@ -46,6 +46,14 @@ body {
border-radius: 2px; border-radius: 2px;
} }
.btn-reconnect {
background: #e74c3c;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}
@media (max-width: 768px) { @media (max-width: 768px) {
#sidebar { #sidebar {
left: -220px; left: -220px;

View File

@ -227,3 +227,11 @@ body {
#chat .toggle-content .body { #chat .toggle-content .body {
color: #99a2b4; color: #99a2b4;
} }
.btn-reconnect {
background: #e74c3c;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}

View File

@ -253,3 +253,11 @@ body {
#chat .toggle-content .body { #chat .toggle-content .body {
color: #d2d39b; color: #d2d39b;
} }
.btn-reconnect {
background: #e74c3c;
color: #fff;
border: 0;
border-radius: 0;
margin: 0;
}