mirror of
https://github.com/stagehacks/Cue-View.git
synced 2026-08-13 09:43:38 +00:00
restyle to match LSS for mac
This commit is contained in:
sparks-alec
@@ -29,18 +29,14 @@ exports.update = function update(device, _document, updateType, data) {
|
||||
if (updateType === 'programInput' || updateType === 'previewInput' || updateType === 'inputs') {
|
||||
device.data.inputs.forEach((input) => {
|
||||
if (device.data.program === input.number) {
|
||||
document.getElementById(`program-input-${input.number}`).classList.add('lss-red');
|
||||
document.getElementById(`input-${input.number}`).classList.add('lss-red');
|
||||
} else {
|
||||
document.getElementById(`program-input-${input.number}`).classList.remove('lss-red');
|
||||
document.getElementById(`input-${input.number}`).classList.remove('lss-red');
|
||||
}
|
||||
|
||||
if (device.data.preview === input.number) {
|
||||
document.getElementById(`preview-input-${input.number}`).classList.add('lss-green');
|
||||
document.getElementById(`input-${input.number}`).classList.add('lss-green');
|
||||
} else {
|
||||
document.getElementById(`preview-input-${input.number}`).classList.remove('lss-green');
|
||||
document.getElementById(`input-${input.number}`).classList.remove('lss-green');
|
||||
}
|
||||
});
|
||||
@@ -48,22 +44,18 @@ exports.update = function update(device, _document, updateType, data) {
|
||||
const ftbId = 'ftb';
|
||||
|
||||
if (device.data.fadeToBlack) {
|
||||
if (document.getElementById(ftbId).classList.contains('lss-red')) {
|
||||
document.getElementById(ftbId).classList.remove('lss-red');
|
||||
} else {
|
||||
document.getElementById(ftbId).classList.add('lss-red');
|
||||
}
|
||||
document.getElementById(ftbId).classList.add('lss-ftb-glow');
|
||||
} else {
|
||||
document.getElementById(ftbId).classList.remove('lss-red');
|
||||
document.getElementById(ftbId).classList.remove('lss-ftb-glow');
|
||||
}
|
||||
} else if (updateType === 'tbar') {
|
||||
const tbarId = `tbar-div`;
|
||||
const tbarHandleId = `tbar-handle-div`;
|
||||
if (document.getElementById(tbarId)) {
|
||||
document.getElementById(tbarId).style.height = `${device.data.tBar.percent}%`;
|
||||
document.getElementById(tbarId).style.height = `${device.data.tBar.percent * 1.4 + 10}px`;
|
||||
}
|
||||
if (document.getElementById(tbarHandleId)) {
|
||||
document.getElementById(tbarHandleId).style.bottom = `${device.data.tBar.percent}%`;
|
||||
document.getElementById(tbarHandleId).style.bottom = `${device.data.tBar.percent * 1.4 + 10}px`;
|
||||
}
|
||||
|
||||
if (device.data.tBar.status === 'Automatic') {
|
||||
@@ -120,8 +112,11 @@ exports.data = function data(_device, msg) {
|
||||
device.update('previewInput', device.data);
|
||||
} else if (packetType === 'Cut') {
|
||||
[device.data.preview, device.data.program] = [device.data.program, device.data.preview];
|
||||
device.data.tBar.percent = 0;
|
||||
device.data.tBar.status = 'Stop';
|
||||
device.update('cut');
|
||||
device.update('program', device.data);
|
||||
device.update('inputs', device.data);
|
||||
device.update('tbar', device.data);
|
||||
} else if (packetType === 'FOut') {
|
||||
device.data.fadeToBlack = true;
|
||||
device.update('fadeToBlack', device.data);
|
||||
@@ -139,6 +134,9 @@ exports.data = function data(_device, msg) {
|
||||
}
|
||||
device.update('tbar', device.data);
|
||||
} else if (packetType === 'TrAStart' || packetType === 'TrAStop') {
|
||||
if (device.data.tBar === undefined) {
|
||||
device.data.tBar = {};
|
||||
}
|
||||
device.data.tBar.status = packetType.slice(3);
|
||||
if (packetType === 'TrAStop') {
|
||||
device.data.tBar.percent = 0;
|
||||
|
||||
@@ -1,58 +1,76 @@
|
||||
body {
|
||||
background-color: #282828;
|
||||
background-color: #191919;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
h3 {
|
||||
color: #6d6d6d !important;
|
||||
margin: 30px 0px 10px 9px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 400;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
h5 {
|
||||
color: white;
|
||||
margin: 0px 0px 10px 3px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
/* font-family: 'Open Sans', sans-serif; */
|
||||
}
|
||||
|
||||
.lss-input {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background-image: url('img/button_white.png');
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
background-color: #242424;
|
||||
color: white;
|
||||
border: #242424 6px solid;
|
||||
outline: black 1px solid;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.lss-button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
background: linear-gradient(#363636, #282828);
|
||||
border-radius: 5px;
|
||||
border: black 2px solid;
|
||||
color: gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.source-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #1f1f1f;
|
||||
border: #1a1a1a 2px solid;
|
||||
border-radius: 8px;
|
||||
max-width: 416px;
|
||||
padding: 12px;
|
||||
background-color: #000000;
|
||||
width: 122px;
|
||||
border: black 1px solid;
|
||||
}
|
||||
|
||||
.lss-red {
|
||||
background-image: url('img/button_red.png');
|
||||
box-shadow: 0px 0px 10px 1px #ff0000;
|
||||
z-index: 10000;
|
||||
border-color: #6f1607;
|
||||
outline-color: #ff0000;
|
||||
}
|
||||
.lss-button.lss-red {
|
||||
color: #6f1607;
|
||||
}
|
||||
|
||||
.lss-green {
|
||||
background-image: url('img/button_green.png');
|
||||
box-shadow: 0px 0px 10px 1px #06c300;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.lss-yellow {
|
||||
background-image: url('img/button_yellow.png');
|
||||
box-shadow: 0px 0px 10px 1px #c7ca00;
|
||||
z-index: 10000;
|
||||
border-color: #395a13;
|
||||
outline-color: #558522;
|
||||
}
|
||||
|
||||
.lss-disabled {
|
||||
background-image: url('img/button_off.png');
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.lss-gray {
|
||||
color: #575757;
|
||||
.lss-ftb-glow {
|
||||
border: gray 2px solid;
|
||||
animation: ftb-glow 0.75s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes ftb-glow {
|
||||
0% {
|
||||
border-color: #666666;
|
||||
color: #666666;
|
||||
}
|
||||
100% {
|
||||
border-color: #fc584b;
|
||||
color: #fc584b;
|
||||
}
|
||||
}
|
||||
|
||||
.source-label {
|
||||
@@ -64,6 +82,10 @@ h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inputs-container {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.transition-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -80,29 +102,27 @@ h3 {
|
||||
.tbar-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
background-color: #1f1f1f;
|
||||
border: 2px solid;
|
||||
border-color: #1a1a1a;
|
||||
border-radius: 6px;
|
||||
width: 88px;
|
||||
height: 429px;
|
||||
background-color: red;
|
||||
border: 2px black solid;
|
||||
width: 80px;
|
||||
height: 176px;
|
||||
position: relative;
|
||||
margin-top: 58px;
|
||||
margin-right: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tbar-bg {
|
||||
position: absolute;
|
||||
background-image: url('img/tbar_bg.png');
|
||||
width: 88px;
|
||||
height: 429px;
|
||||
width: 80px;
|
||||
height: 176px;
|
||||
}
|
||||
.tbar-handle {
|
||||
position: absolute;
|
||||
background-image: url('img/tbar_handle.png');
|
||||
width: 126px;
|
||||
height: 50px;
|
||||
left: -3px;
|
||||
width: 42px;
|
||||
height: 20px;
|
||||
left: 19px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.tbar-div {
|
||||
width: 100%;
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
</header>
|
||||
|
||||
<% if (data.inputCount) { %>
|
||||
<div class="inputs-container show-small">
|
||||
<h3 class="lss-gray">Preview/Program</h3>
|
||||
<div class="inputs-container float-left">
|
||||
<h5>INPUTS</h5>
|
||||
<div class="source-wrapper">
|
||||
<% data.inputs.forEach((input)=>{ %>
|
||||
<div id="input-<%= input.number %>" class="lss-input">
|
||||
@@ -13,27 +13,6 @@
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-left" style="margin-right: 30px;">
|
||||
<div class="program-container hide-small">
|
||||
<h3 class="lss-gray">Program</h3>
|
||||
<div class="source-wrapper">
|
||||
<% data.inputs.forEach((input)=>{ %>
|
||||
<div id="program-input-<%= input.number %>" class="lss-input">
|
||||
<div class="source-label"><%= input.name %></div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview hide-small">
|
||||
<h3 class="lss-gray">Preview</h3>
|
||||
<div class="source-wrapper">
|
||||
<% data.inputs.forEach((input)=>{ %>
|
||||
<div id="preview-input-<%= input.number %>" class="lss-input">
|
||||
<div class="source-label"><%= input.name %></div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transition-container float-left">
|
||||
<div class="transition-settings">
|
||||
@@ -65,31 +44,23 @@
|
||||
</div> -->
|
||||
|
||||
<div class="transition-style">
|
||||
<h3>Transition Style</h3>
|
||||
<div class="source-wrapper" style="width: 260px;">
|
||||
<div id="cut" class="lss-input">
|
||||
<div class="source-label">CUT</div>
|
||||
</div>
|
||||
<div id="auto" class="lss-input">
|
||||
<div class="source-label">AUTO</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbar-container">
|
||||
<div class="tbar-bg"></div>
|
||||
<div id="tbar-handle-div" class="tbar-handle"></div>
|
||||
<div id="tbar-div" class="tbar-div" ></div>
|
||||
</div>
|
||||
<div class="fade-to-black-container">
|
||||
<div class="fade-to-black">
|
||||
<h3 class="lss-gray">Fade to Black</h3>
|
||||
<div class="source-wrapper">
|
||||
<div id="ftb" class="lss-input">
|
||||
<div class="source-label">FTB</div>
|
||||
</div>
|
||||
<h5>TRANSITION</h5>
|
||||
<div id="cut" class="lss-button">
|
||||
<div class="source-label">CUT</div>
|
||||
</div>
|
||||
<div id="auto" class="lss-button">
|
||||
<div class="source-label">AUTO</div>
|
||||
</div>
|
||||
<div class="tbar-container">
|
||||
<div class="tbar-bg"></div>
|
||||
<div id="tbar-handle-div" class="tbar-handle"></div>
|
||||
<div id="tbar-div" class="tbar-div" ></div>
|
||||
</div>
|
||||
<div id="ftb" class="lss-button">
|
||||
<div class="source-label">FTB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
Reference in New Issue
Block a user