Minor UI changes
Changed playing div to be outside of hidden and the color to be darker Make the notifyBox a smaller font to not be as imposing Changed joinbox to have a better style that matches the rest of the website
This commit is contained in:
parent
0b05a7aea6
commit
e42c7d14cc
|
@ -1,5 +1,6 @@
|
||||||
:root {
|
:root {
|
||||||
--var-border: 1px solid #606060;
|
--var-border: 1px solid #606060;
|
||||||
|
--var-border-radius: 5px;
|
||||||
--var-message-color: #f4f4f4;
|
--var-message-color: #f4f4f4;
|
||||||
--var-contrast-color: #1bf7ec;
|
--var-contrast-color: #1bf7ec;
|
||||||
}
|
}
|
||||||
|
@ -52,7 +53,7 @@ span.svmsg {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: var(--var-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
|
@ -129,10 +130,12 @@ span.svmsg {
|
||||||
color: var(--var-contrast-color);
|
color: var(--var-contrast-color);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#playing {
|
#playing {
|
||||||
color: var(--var-contrast-color);
|
color: #288a85;
|
||||||
font-size: x-Large;
|
font-size: x-Large;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -145,12 +148,29 @@ span.svmsg {
|
||||||
}
|
}
|
||||||
|
|
||||||
#joinbox {
|
#joinbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#joinbox div {
|
||||||
|
margin: 5px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#name {
|
||||||
|
background: transparent;
|
||||||
|
border: var(--var-border);
|
||||||
|
border-radius: var(--var-border-radius);
|
||||||
|
color: var(--var-message-color);
|
||||||
|
padding: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
#chat {
|
#chat {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 2.5em 1fr 6em 2.5em 1em;
|
grid-template-rows: 1.5em 2em 1fr 6em 2.5em 1em;
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
margin: 0px 5px;
|
margin: 0px 5px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -185,7 +205,8 @@ span.svmsg {
|
||||||
#msg {
|
#msg {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: var(--var-border);
|
border: var(--var-border);
|
||||||
border-radius: 5px;
|
border-radius: var(--var-border-radius);
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
color: var(--var-message-color);
|
color: var(--var-message-color);
|
||||||
resize: none;
|
resize: none;
|
||||||
|
|
|
@ -56,8 +56,8 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<a id="playing" target="_blank"></a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<a id="playing" target="_blank"></a>
|
||||||
<div id="messages" class="scrollbar"></div>
|
<div id="messages" class="scrollbar"></div>
|
||||||
<div id="msgbox">
|
<div id="msgbox">
|
||||||
<div id="suggestions"></div>
|
<div id="suggestions"></div>
|
||||||
|
@ -69,9 +69,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="joinbox">
|
<div id="joinbox">
|
||||||
<p style="color:#e5e0e5">Please enter your name to Join the chat</P>
|
<div style="color: #e5e0e5; text-align: center;">Please enter your name<br />to join the chat</div>
|
||||||
<input id="name" maxlength="36">
|
<div>
|
||||||
<button id="join" class="button pretty-button" onclick="join();">Join</button>
|
<input id="name" maxlength="36">
|
||||||
|
<button id="join" class="button pretty-button" onclick="join();">Join</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
Loading…
Reference in New Issue