sjw
/
MovieNight
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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:
joeyak 2019-03-17 22:35:07 -04:00
parent 0b05a7aea6
commit e42c7d14cc
2 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
static/css/site.css
View File

@ -1,5 +1,6 @@
:root {
--var-border: 1px solid #606060;
--var-border-radius: 5px;
--var-message-color: #f4f4f4;
--var-contrast-color: #1bf7ec;
}
@ -52,7 +53,7 @@ span.svmsg {
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
border-radius: var(--var-border-radius);
}
.button:hover {
@ -129,10 +130,12 @@ span.svmsg {
color: var(--var-contrast-color);
padding: 10px;
font-weight: bold;
font-size: 12px;
text-align: center;
}
#playing {
color: var(--var-contrast-color);
color: #288a85;
font-size: x-Large;
}
@ -145,12 +148,29 @@ span.svmsg {
}
#joinbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
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 {
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;
margin: 0px 5px;
height: 100%;
@ -185,7 +205,8 @@ span.svmsg {
#msg {
background: transparent;
border: var(--var-border);
border-radius: 5px;
border-radius: var(--var-border-radius);
border-bottom-right-radius: 0px;
padding: 5px;
color: var(--var-message-color);
resize: none;

10
static/main.html
View File

@ -56,8 +56,8 @@
{{ end }}
</div>
<hr />
<a id="playing" target="_blank"></a>
</div>
<a id="playing" target="_blank"></a>
<div id="messages" class="scrollbar"></div>
<div id="msgbox">
<div id="suggestions"></div>
@ -69,9 +69,11 @@
</div>
</div>
<div id="joinbox">
<p style="color:#e5e0e5">Please enter your name to Join the chat</P>
<input id="name" maxlength="36">
<button id="join" class="button pretty-button" onclick="join();">Join</button>
<div style="color: #e5e0e5; text-align: center;">Please enter your name<br />to join the chat</div>
<div>
<input id="name" maxlength="36">
<button id="join" class="button pretty-button" onclick="join();">Join</button>
</div>
</div>
</div>
{{ end }}