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

Compare commits

base: kieran-mcauliffe:7a93a87ceef60208f1b1e77ca455bb52e4dad9b2
Branches Tags
kieran-mcauliffe:main
kieran-mcauliffe:patch-1
kieran-mcauliffe:private-waiting-room-snapshot
kieran-mcauliffe:modenum
kieran-mcauliffe:daemon-service
kieran-mcauliffe:greg-dev
..
compare: kieran-mcauliffe:44e19558c161dcb382883db67453deab80a25b10
Branches Tags
kieran-mcauliffe:main
kieran-mcauliffe:patch-1
kieran-mcauliffe:private-waiting-room-snapshot
kieran-mcauliffe:modenum
kieran-mcauliffe:daemon-service
kieran-mcauliffe:greg-dev

No commits in common. "7a93a87ceef60208f1b1e77ca455bb52e4dad9b2" and "44e19558c161dcb382883db67453deab80a25b10" have entirely different histories.
7a93a87cee ... 44e19558c1

3 changed files with 626 additions and 1002 deletions
Show Stats Expand all files Collapse all files

62
index.html
View File

@ -1,62 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- our stylesheet -->
<link rel="stylesheet" href="lib/drawsocket-defaults.css">
<!-- HSS -->
<link rel="stylesheet" href="./ui-style.css">
<!-- library dependencies -->
<script src="scripts/d3-selection/dist/d3-selection.min.js"></script>
<script src="scripts/pdfjs-dist/build/pdf.js"></script>
<script src="scripts/tone/build/Tone.js"></script>
<!--
<script src="scripts/startaudiocontext/StartAudioContext.js"></script>
-->
<script src="scripts/timesync/dist/timesync.js"></script>
<script src="scripts/gsap/dist/gsap.min.js"></script>
<script src="scripts/svg-points/dist/svg-points.min.js"></script>
<script src="lib/verovio-toolkit.js" ></script>
</head>
<body>
<!--main html setup -->
<div class="log" id="log"></div>
<div id="touchdiv"></div>
<!--main main main setup -->
<div id="main-div" >
<div id="main-html" ></div>
<svg id="svg"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs id="defs"></defs>
<g id="main-svg"></g>
</svg>
</div>
<div id="forms" ></div>
<div id="loading">
<p>synchronizing...</p>
</div>
<!-- our scripts -->
<script src="lib/drawsocket-client.js"></script>
</body>
</html>

189
javascript/djster_webcontrol.js
View File

@ -97,8 +97,6 @@ var html = {
"val" : body
}]
};
/*
css.push({
"selector" : ".menu",
"props" : {
@ -166,51 +164,23 @@ var html = {
"background" : active
}
});
//css navigation bars
css.push({
"selector": "#nav, #navPlayers",
"props": {
"z-index": "99",
"display": "flex !important",
"flex-flow": "row nowrap",
"position": "relative"
}
});
*/
//add css sheet to html
elements.push({
"new": "link",
"parent": "log",
"rel": "stylesheet",
"href": "ui-style.css" //href is not working for some reason?
});
//currently, the file is added by having changed the drawsocket-page.html with the following:
/*
<!-- HSS -->
<link rel="stylesheet" href="../../../../../Library/healing-soundscapes/ui-style.css">
*/
svg.push({
"new" : "rect",
"id" : "background",
"x" : 0,
"y" : 0,
"width": "100vw",//viewport width of iPad mini: 1133px; iphone 8: 400px; iPhone 5: 320px
"height": "100vh",//viewport height of iPad mini: 744px; iphone 8: 667px; iPhone 5: 568px
"fill": background
"width" : "400px",//viewport width of iphone 8; iPhone 5: 320px
"height" : "667px",//viewport height of iphone 8; iPhone 5: 568px
"fill" : background,
});
//elements = [];
//nav for buttons
addDiv("forms", "nav", "display: block");
//add buttons to navigation instead of to #forms directly
addButton("nav", "basic", "Basic Mode", "color:" + active, "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['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';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['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "room", "Room Settings", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "system", "System", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "manual", "Manual", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';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='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';");
addButton("forms", "basic", "Basic Mode", "color:" + active, "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['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';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['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "room", "Room Settings", "width:24vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "system", "System", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "manual", "Manual", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';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='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';");
addDiv("forms", "basicDIV", "display:block");
addDiv("forms", "expertDIV", "display:none");
@ -238,14 +208,11 @@ var html = {
});
*/
//navPlayers nav bar for player selectors
addDiv("expertDIV", "navPlayers", "display:block");
//add buttons to navPlayers instead of to expertDIV directly
addButton()
addButton("navPlayers", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("navPlayers", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("navPlayers", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';");
addButton("navPlayers", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';");
addButton("expertDIV", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("expertDIV", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("expertDIV", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';");
addButton("expertDIV", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';");
addMenu(-1, "basicDIV", "Piece", "piece", 36, 0, pieces, "wide");
addMenu(-1, "basicDIV", "Playing Mode", "mode", 76, 0, modes, "wide");
@ -299,12 +266,12 @@ var html = {
"new" : "h2",
"parent" : "systemDIV",
"id" : "updateheader",
"text": "Updates"/*,
"text" : "Updates",
"style" : {
"left" : "10px",
"font-family" : "Arial",
"margin-left" : "10px"
}*/
}
});
elements.push(
@ -312,65 +279,17 @@ var html = {
"new" : "p",
"parent" : "systemDIV",
"id" : "update",
"text": "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions."//,
/*"style": {
"left": "10px",
"font-family": "Arial",
"font-size": 12,
"margin-left": "10px"
}*/
});
addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;margin-left:125px;", "none");
elements.push(
{
"new": "h2",
"parent": "systemDIV",
"id": "shutdownheader",
"text": "Shut Down"/*,
"style": {
"left": "10px",
"font-family": "Arial",
"margin-left": "10px"
}*/
});
elements.push(
{
"new": "p",
"parent": "systemDIV",
"id": "shutdown",
"text": "Shutting the system down, will require you to unplug and replug the speakers before they can be operated again."/*,
"text" : "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions.",
"style" : {
"left" : "10px",
"font-family" : "Arial",
"font-size" : 12,
"margin-left" : "10px"
}*/
}
});
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}})");
addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none");
elements.push(
{
"new": "iframe",
"parent": "manualDIV",
"id": "manualdoc",
"style": {
/*"position": "absolute",
"top": "0px",
"left": "0px",*/
"width": "100vw",
"height": "100vh"
},
"src": "public/manual.html"
});
dict.parse(JSON.stringify(html));
outlet(0, "dictionary", dict.name);
outlet(1, "done");
elements.push(
{
"new" : "h2",
@ -449,7 +368,8 @@ var html = {
outlet(1, "done");
}
function addDiv(parent, id, style) {
function addDiv(parent, id, style)
{
var obj = {
"parent" : parent,
"new" : "div",
@ -465,7 +385,8 @@ function addDiv(parent, id, style) {
elements.push(obj);
}
function addButton(parent, id, text, style, onclick) {
function addButton(parent, id, text, style, onclick)
{
var obj = {
"parent" : parent,
"id" : id,
@ -485,7 +406,8 @@ function addButton(parent, id, text, style, onclick) {
elements.push(obj);
}
function addSlider(index, parent, name, id, position, range, step, value, _out, _in) {
function addSlider(index, parent, name, id, position, range, step, value, _out, _in)
{
switch (id) {
case "tonic_pitch" :
case "pitch_center" :
@ -500,13 +422,13 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"id" : id + "-label" + "_" + index,
"text" : name + ":",
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : (offset - 1 + position * 30) + "px",
"left" : "10px",
"width" : "160px",
/*"font-family": "Arial",
"font-family" : "Arial",
"font-size" : 10,
"color": textcolor*/
"color" : textcolor
}
},
{
@ -519,11 +441,11 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value" : value,
"disabled" : true,
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : (offset + position * 30) + "px",
"left" : "320px",
"width" : "30px",
//"color": textcolor
"color" : textcolor
}
},
{
@ -538,10 +460,10 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value" : value,
"step" : step,
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : (offset + 5 + position * 30) + "px",
/*"left": "135px",
"width": "170px"*/
"left" : "135px",
"width" : "170px"
},
"oninput" : "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]"
}];
@ -558,7 +480,8 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
body.push(obj2);
}
function addMenu(index, parent, name, id, position, value, array, type) {
function addMenu(index, parent, name, id, position, value, array, type)
{
var width = (type == "wide") ? 180 : 90;
child = [];
for (var i = 0; i < array.length; i++) {
@ -590,13 +513,13 @@ function addMenu(index, parent, name, id, position, value, array, type) {
"id" : id + "-label" + "_" + index,
"text" : name + ":",
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : position + "px",
"left" : "10px",
"width" : "120px",
/*"font-family": "Arial",
"font-family" : "Arial",
"font-size" : 10,
"color": textcolor*/
"color" : textcolor
}
}
, {
@ -626,7 +549,8 @@ function addMenu(index, parent, name, id, position, value, array, type) {
body.push(obj2);
}
function addCheckbox(index, parent, name, id, position, checked, type) {
function addCheckbox(index, parent, name, id, position, checked, type)
{
var left = (type == "left") ? 10 : 252;
var leftoffset = (type == "left") ? 128 : 85;
checkboxes[index + 1][id].name = name;
@ -639,13 +563,13 @@ function addCheckbox(index, parent, name, id, position, checked, type) {
"id" : id + "-label" + "_" + index,
"text" : name + ":",
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : position + "px",
"left" : left + "px",
"width" : "80px",
/*"font-family": "Arial",
"font-family" : "Arial",
"font-size" : 10,
"color": textcolor*/
"color" : textcolor
}
},
{
@ -657,12 +581,12 @@ function addCheckbox(index, parent, name, id, position, checked, type) {
"name" : id + "_" + index,
"value" : checked,
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : position - 2 + "px",
"left" : left + leftoffset + "px",
/*"border": "none",
"border" : "none",
"width" : "20px",
"height": "20px"*/
"height" : "20px"
},
"oninput" : "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})"
}];
@ -670,7 +594,8 @@ function addCheckbox(index, parent, name, id, position, checked, type) {
elements.push(obj[1]);
}
function addText(index, parent, name, id, position, type) {
function addText(index, parent, name, id, position, type)
{
var width = (type == "wide") ? 180 : 90;
var obj = [{
"parent" : parent,
@ -679,13 +604,13 @@ function addText(index, parent, name, id, position, type) {
"id" : id + "-label" + "_" + index,
"text" : name + ":",
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : position + "px",
"left" : "10px",
"width" : "120px",
/*"font-family": "Arial",
"font-family" : "Arial",
"font-size" : 10,
"color": textcolor*/
"color" : textcolor
}
},
{
@ -698,11 +623,11 @@ function addText(index, parent, name, id, position, type) {
"size" : 10,
"onkeydown" : "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}",
"style" : {
//"position": "absolute",
"position" : "absolute",
"top" : position - 1 + "px",
"left" : "139px",
"width" : width - 11 + "px",
//"color": textcolor
"color" : textcolor
}
}];
var obj2 = {
@ -715,7 +640,8 @@ function addText(index, parent, name, id, position, type) {
body.push(obj2);
}
function createSpatBox() {
function createSpatBox()
{
svg.push({
"parent" : "defs",
"new" : "path",
@ -728,6 +654,7 @@ function createSpatBox() {
"parent" : "main-svg",
"new" : "g",
"id" : "spat",
//"display" : "none",
"display" : "none",
"transform" : "matrix(1,0,0,1,0,50)",
"child" : [
@ -802,8 +729,7 @@ function createSpatBox() {
"r" : 12.5,
"fill" : "tomato"
}
]
});
]});
}
/*
@ -833,7 +759,8 @@ function createSpatBox() {
</svg>
*/
function dictionary() {
function dictionary()
{
var d = new Dict;
d.name = p[1];
var obj = {};

241
ui-style.css
View File

@ -1,241 +0,0 @@
:root {
--background: ivory;
--active: royalblue;
--nonactive: lightsteelblue;
--alert: red;
--textcolor: #737373;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html {
background-color: var(--background);
}
body {
font-family: "Poppins", sans-serif;
}
p,
label,
input[type=text] {
font-size: 13px;
background-color: var(--background);
}
h1 {
font-size: 15px;
font-weight: 400;
color: var(--active);
position: relative;
width: fit-content;
margin: 0.3em auto;
}
/*navigation*/
#nav,
#navPlayers {
z-index: 99;
display: flex !important;
flex-flow: row nowrap;
justify-content: space-around;
position: relative;
width: 100vw;
max-width: 800px;
margin: 0 auto;
}
#navPlayers>button {
/*width: 24.9vw;*/
color: var(--nonactive);
}
#navPlayers>button:active {
color: var(--active);
}
/*centers navigations*/
/*
#forms, #expertDIV {
width: 100%;
margin: 0 auto;
}
*/
.menu {
background-color: var(--background);
border: 1px solid var(--active);
color: var(--active);
text-align: left;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
height: 20px;
}
.menu option {
background-color: var(--background);
color: var(--active);
}
.but {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 4px;
text-align: center;
display: inline-block;
font-size: 11px;
margin: 4px 4px;
width: 20vw;
border: solid 1px var(--textcolor);
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);
color: var(--active);
padding: 4px 7.8px;
margin: 4px 0px;
}
.slider {
appearance: none;
-webkit-appearance: none;
height: 6px;
border-radius: 6px;
background-color: #9b9b9b;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
position: absolute;
left: 135px;
width: 170px;
overflow: hidden;
}
.slider:hover,
.slider:active {
opacity: 1;
}
/*slider knob*/
.slider::-webkit-slider-runnable-track {
-webkit-appearance: none;
color: var(--active);
margin-top: -1px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--active);
box-shadow: -80px 0 0 80px var(--active);
}
.slider::-moz-range-progress {
background-color: var(--active);
}
label {
position: absolute;
color: var(--textcolor);
}
input[type=text] {
position: absolute;
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;
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,
#shutdownheader {
left: 10px;
font-family: Arial;
margin-left: 10px;
}
#update,
#shutdown {
left: 10px;
font-family: Arial;
font-size: 12;
margin-left: 10px;
}
iframe #manualdoc {
position: absolute;
top: 0px;
left: 0px;
}