kieran-mcauliffe/healing-soundscapes
2
0
Fork 1
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

active and hover interaction + colours system buttons and selector options, recommit

Browse Source
This commit is contained in:
Eveline-97 2025-04-08 13:06:10 +02:00
parent 6caae03759
commit ba3492d78f
2 changed files with 71 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
djster_webcontrol.js
View File

@ -304,7 +304,7 @@ function bang() {
}*/
});
addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none");
addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;margin-left:125px;", "none");
elements.push(
{
@ -333,7 +333,7 @@ function bang() {
}*/
});
addButton("systemDIV", "cancelbutton", "Cancel", "background-color:" + nonactive + ";margin-left:20vw;", "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['background-color']='" + active + "';document.getElementById('expert').style['background-color']='" + nonactive + "';document.getElementById('room').style['background-color']='" + nonactive + "';document.getElementById('system').style['background-color']='" + nonactive + "';document.getElementById('manual').style['background-color']='" + nonactive + "';");
addButton("systemDIV", "cancelbutton", "Cancel", "margin-left:20vw;", "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['background-color']='" + active + "';document.getElementById('expert').style['background-color']='" + nonactive + "';document.getElementById('room').style['background-color']='" + nonactive + "';document.getElementById('system').style['background-color']='" + nonactive + "';document.getElementById('manual').style['background-color']='" + nonactive + "';");
addButton("systemDIV", "proceedbutton", "Shut Down", "background-color:" + alert + ";margin-left:15vw;", "drawsocket.send({system: {shutdown : true}})");
elements.push(

93
ui-style.css
View File

@ -1,5 +1,5 @@
:root {
--background: white;
--background: ivory;
--active: royalblue;
--nonactive: lightsteelblue;
--alert: red;
@ -20,6 +20,7 @@ p,
label,
input[type=text] {
font-size: 13px;
background-color: var(--background);
}
/*navigation*/
@ -45,13 +46,18 @@ input[type=text] {
.menu {
background-color: var(--background);
border: 1px solid + var(--active);
border: 1px solid var(--active);
color: var(--active);
padding: 5px 5px;
text-align: left;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
height: 20px;
}
.menu option {
background-color: var(--background);
color: var(--active);
}
.but {
@ -68,6 +74,11 @@ input[type=text] {
border-radius: 25px;
}
.but:hover, .but:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
.toggle {
background-color: var(--background);
border: 1px solid + var(--active);
@ -93,7 +104,7 @@ input[type=text] {
overflow: hidden;
}
.slider:hover {
.slider:hover, .slider:active {
opacity: 1;
}
@ -117,24 +128,7 @@ input[type=text] {
.slider::-moz-range-progress {
background-color: var(--active);
}
/*
input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #13bba4;
margin-top: -1px;
}
input[type='range']::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
background: #434343;
box-shadow: -80px 0 0 80px #43e5f7;
}
*/
label {
position: absolute;
color: var(--textcolor);
@ -142,14 +136,65 @@ label {
input[type=text] {
position: absolute;
color: var(--textcolor);
color: var(--active);
border: 1px solid var(--active);
}
input[type=text]:hover:not([disabled]),
input[type=checkbox]:hover,
.menu:hover,
.menu:active,
.option:hover,
.option:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
input[type=checkbox] {
position: absolute;
border: none;
width: 20px;
height: 20px;
background-color: var(--background);
text-align: center;
display: table-cell;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance: none;
border-radius: 10%;
box-shadow: none;
font-size: 1em;
border: 1px solid var(--active);
}
input[type='checkbox']:checked {
background-color: var(--active);
}
input[type='checkbox']:checked:after {
content: '\2713';
color: var(--background);
}
#oph_-1 {
width: 174px !important;
}
/*System page*/
#proceedbutton {
background-color: var(--background)!important;
color: red!important;
border: 1px solid red;
}
#proceedbutton:hover,
#proceedbutton:active {
background-color: red !important;
color: white !important;
}
#versionbutton, #cancelbutton {
background-color: var(--background) !important;
}
#updateheader,