Hide color div when clicking color button

closes #69
This commit is contained in:
joeyak 2019-03-30 16:08:41 -04:00
parent cc3da4292e
commit 5aa41cc80c
3 changed files with 32 additions and 11 deletions

View File

@ -42,6 +42,23 @@ span.svmsg {
color: #ea6260;
}
input[type=text] {
background: transparent;
border: var(--var-border);
border-radius: var(--var-border-radius);
color: var(--var-message-color);
padding: 5px;
font-weight: bold;
}
#colorInputDiv {
font-size: 14px;
}
#colorInput {
border: 2px solid var(--var-message-color);
}
.root {
max-width: var(--var-max-width);
max-height: var(--var-max-height);
@ -219,15 +236,6 @@ span.svmsg {
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: 1.5em 2em 1fr 6em 2.5em 1em;
@ -291,6 +299,12 @@ span.svmsg {
color: #b1b1b1;
}
#colorName {
font-weight: bold;
background: var(--var-background-color);
padding: -10px;
}
#colorSubmit:disabled {
display: none;
}

View File

@ -158,6 +158,10 @@ function help() {
}
function showColors(show) {
if (show === undefined) {
show = $("#hiddencolor").css("display") === "none";
}
$("#hiddencolor").css("display", show ? "block" : "");
}

View File

@ -50,7 +50,7 @@
<div id="chatButtons">
<input type="button" class="button pretty-button" onclick="auth();" value="Auth" />
<input type="button" class="button pretty-button" onclick="help();" value="Help" />
<input type="button" class="button pretty-button" onclick="showColors(true);" value="Color" />
<input type="button" class="button pretty-button" onclick="showColors();" value="Color" />
<input type="button" class="button pretty-button" onclick="nick();" value="Nick" />
{{if .Video}}
<input type="button" class="button pretty-button" onclick="initPlayer();" value="Reload Player" />
@ -75,7 +75,10 @@
<input id="colorBlue" type="range" min="0" max="255" value="0" oninput="updateColor();" />
<span id="colorBlueLabel"></span>
</div>
<div id="colorName" class="range-div" style="font-weight: bold;">
<div id="colorInputDiv" class="range-div">
#<input id="colorInput" type="text" maxlength="6" onchange="changeColorInput();" />
</div>
<div id="colorName" class="range-div">
NAME
</div>
<div id="colorWarning" class="range-div contrast">