Style connection error message consistently with the rest of the app, above the message input
This commit is contained in:
parent
a8926e2ced
commit
c20813609b
@ -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 {
|
||||||
|
@ -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 — 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
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user