variablelab/variabletime
variablelab/variabletime
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

css changes

Browse source
This commit is contained in:
asuk 2023-10-10 12:05:40 +02:00
parent 870a99d725
commit 9cd830f7de
5 changed files with 205 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

42
bin/web/js/audio.js
View file

@ -202,7 +202,8 @@ const Audio = function(tp, record) {
}
}
} else {
audioOptions.style.background = 'rgba(0,255,255,0.2)'; // AUDIO COLOR
audioOptions.style.background = 'rgba(163, 163, 163, 0.2)'; // AUDIO COLOR
}
audioOptions.style.order = parseInt(container.style.order) + 1;
@ -217,17 +218,21 @@ const Audio = function(tp, record) {
const min_max_Dom = document.createElement('div');
min_max_Dom.classList.add('audio_min_max');
const min_Cont = document.createElement('div');
min_Cont.classList.add('audio_min_Cont');
const min_inputDom_label = document.createElement('label');
min_inputDom_label.for = 'audio_min';
min_inputDom_label.innerHTML = 'audio_min';
min_inputDom_label.innerHTML = 'min ';
const min_inputDom = document.createElement('input');
min_inputDom.type = 'number';
min_inputDom.name = toCssClass(`audio_min${propTitle}`);
min_inputDom.id = toCssClass(`audio_min${propTitle}`);
min_inputDom.value = `${mappingOptions.min_out}`;
const max_Cont = document.createElement('div');
max_Cont.classList.add('audio_max_Cont');
const max_inputDom_label = document.createElement('label');
max_inputDom_label.for = 'audio_max';
max_inputDom_label.innerHTML = 'audio_max';
max_inputDom_label.innerHTML = 'max ';
const max_inputDom = document.createElement('input');
max_inputDom.type = 'number';
max_inputDom.name = toCssClass(`audio_max${propTitle}`);
@ -235,7 +240,7 @@ const Audio = function(tp, record) {
max_inputDom.value = `${mappingOptions.max_out}`;
const smoothing_inputDom_label = document.createElement('label');
smoothing_inputDom_label.for = 'audio_smoothing';
smoothing_inputDom_label.innerHTML = 'audio_smoothing';
smoothing_inputDom_label.innerHTML = 'audio smoothing ';
const smoothing_inputDom = document.createElement('input');
smoothing_inputDom.type = 'number';
smoothing_inputDom.name = toCssClass(`audio_smoothing${propTitle}`);
@ -246,18 +251,26 @@ const Audio = function(tp, record) {
smoothing_inputDom.step = 0.01;
min_max_Dom.append(smoothing_inputDom_label);
min_max_Dom.append(smoothing_inputDom);
min_max_Dom.append(min_inputDom_label);
min_max_Dom.append(min_inputDom);
min_max_Dom.append(max_inputDom_label);
min_max_Dom.append(max_inputDom);
min_max_Dom.append(min_Cont);
min_Cont.append(min_inputDom_label);
min_Cont.append(min_inputDom);
min_max_Dom.append(max_Cont);
max_Cont.append(max_inputDom_label);
max_Cont.append(max_inputDom);
audioOptions.append(min_max_Dom);
const sync_Dom = document.createElement('div');
sync_Dom.classList.add('sync_Dom');
const sync_titleDom = document.createElement('p');
const sync_titleDom_Cont = document.createElement('div');
sync_titleDom_Cont.classList.add('sync_titleDom_Cont');
sync_titleDom.innerHTML = 'sync with:';
sync_Dom.append(sync_titleDom);
audio_sync_options.forEach((o) => {
const sync_inputDom_Cont = document.createElement('div');
sync_inputDom_Cont.classList.add('sync_inputDom_Cont');
const sync_inputDom_label = document.createElement('label');
sync_inputDom_label.for = `audio_sync${o}`;
sync_inputDom_label.innerHTML = o;
@ -270,10 +283,14 @@ const Audio = function(tp, record) {
if (o === mappingOptions.sync) {
sync_inputDom.checked = '1';
}
sync_Dom.append(sync_inputDom_label);
sync_Dom.append(sync_inputDom);
sync_inputDom_Cont.append(sync_inputDom_label);
sync_inputDom_Cont.append(sync_inputDom);
sync_titleDom_Cont.append(sync_inputDom_Cont);
sync_Dom.append(sync_titleDom_Cont);
// sync_Dom.append(sync_inputDom);
sync_inputDom.addEventListener('change', updateMappingOptions);
});
audioOptions.append(sync_Dom);
const fft_Dom = document.createElement('div');
@ -296,8 +313,9 @@ const Audio = function(tp, record) {
fft_selectDom.style.width = '100%';
fft_selectDom.style.height = '100%';
fft_selectDom.style.pointerEvents = 'none';
fft_selectDom.style.backgroundColor = 'rgba(0,255,0,0.2)'; // AUDIO COLOR
fft_selectDom.style.border = '1px solid rgba(0,255,0,1.0)'; // AUDIO COLOR
fft_selectDom.style.backgroundColor = 'rgba(28, 186, 148,0.4)'; // AUDIO COLOR
fft_selectDom.style.border = 'none'; // AUDIO COLOR
fft_Dom.append(fft_imgDom);
fft_Dom.append(fft_selectDom);
audioOptions.append(fft_Dom);

4
bin/web/js/config.js
View file

@ -64,9 +64,9 @@ const config = {
'rotation': 'Rotation',
'transformOrigin': 'Rotation Origin',
'mirror_x': 'Mirror X',
'mirror_x_distance': 'Mirror X Distance',
'mirror_x_distance': 'X Distance',
'mirror_y': 'Mirror Y',
'mirror_y_distance': 'Mirror Y Distance',
'mirror_y_distance': 'Y Distance',
'mirror_xy': 'Mirrox XY',
'color': 'Color',
'letterDelays': 'Letter Delays',

178
bin/web/js/theatre-play.js
View file

@ -541,10 +541,64 @@ const TheatrePlay = function(autoInit = false) {
.mirror_xWrapper input, .mirror_yWrapper input, .mirror_xyWrapper input{
margin: 0px 10px;
}
label {
color: #ea2333;
margin-left:10px;
.audio_min_max{
padding: 5px;
box-sizing: border-box;
display: grid;
/* flex-direction: column; */
grid-template-columns: 1fr 1fr;
row-gap: 7px;
}
.audio_min_Cont, .audio_max_Cont{
grid-column-start: 1;
grid-column-end: 3;
display: flex;
justify-content: space-between;
}
.audio_min_max input{
background: rgb(255, 255, 255);
border: none;
color: rgb(0, 0, 0);
padding: 3px 6px 1px;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
line-height: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
outline: none;
/* cursor: ew-resize; */
/* width: 100%; */
height: calc(100% - 4px);
border-radius: 0px;
margin-bottom: 0px;
text-align: center;
font-variation-settings: "wght" 700;
}
.audioOptions{
margin-top: 5px;
margin-bottom: 5px;
}
.audioOptions label {
color: black;
font-family: 'Tonka';
font-variation-settings: 'wght' 500;
}
.mirror_xWrapper label, .mirror_yWrapper label, .mirror_xyWrapper label{
color:#ea2333;
}
// .mirror_xWrapper div:first-of-type, .mirror_yWrapper div:first-of-type, .mirror_xyWrapper div:first-of-type{
// width: fit-content;
// background: red;
// flex-grow: 0;
// margin-right: 15px;
// }
input[type=checkbox] {
position: absolute;
width: 27px;
@ -559,6 +613,50 @@ const TheatrePlay = function(autoInit = false) {
input[type=checkbox]:checked + label::after{
content: ' ON';
}
.audioOptions input[type="radio"] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: black;
width: 1.15em;
height: 1.15em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.audioOptions input[type="radio"]::before {
content: "";
width: 0.65em;
height: 0.65em;
border-radius: 50%;
opacity: 0;
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em black;
}
.audioOptions input[type="radio"]:checked::before {
opacity: 1;
}
.sync_inputDom_Cont{
display: flex;
width: fit-content;
justify-content: center;
align-items: center;
column-gap: 5px;
margin: 5px 15px 5px 0px;
}
.sync_Dom{
padding: 5px;
display: flex;
flex-direction: column;
row-gap: 7px;
}
.sync_titleDom_Cont{
display: flex;
justify-content: space-between;
}
.mirror_yWrapper{
}
.mirror_xyWrapper{
@ -702,18 +800,82 @@ const TheatrePlay = function(autoInit = false) {
margin-top: 5px;
}
.audioButton{
width: 20px;
margin: 2px;
width: 17px;
margin: 2px 2px 2px 5px;
flex-shrink: 0;
display: flex;
background: rgb(163, 163, 163);
border-radius: 50%;
height: 17px;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
box-sizing: border-box;
cursor: pointer
}
.audioButton:hover{
background: #1cba94;
}
.audioButton img{
max-width: 70%;
}
.audioButton.active{
background: green;
background: #1cba94;
}
.recordButton{
width: 20px;
width: 17px;
margin: 2px;
flex-shrink: 0;
display: flex;
background: rgb(163, 163, 163);
border-radius: 50%;
height: 17px;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
box-sizing: border-box;
cursor: pointer
}
.recording{
overflow: hidden;
background: rgb(255, 255, 255);
border: none;
color: rgb(0, 0, 0);
padding: 3px 6px 1px;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
font-stretch: inherit;
font-size: inherit;
line-height: inherit;
font-family: inherit;
font-optical-sizing: inherit;
font-kerning: inherit;
font-feature-settings: inherit;
outline: none;
cursor: ew-resize;
width: 100%;
height: calc(100% - 4px);
border-radius: 0px;
margin-bottom: 0px;
text-align: center;
font-variation-settings: "wght" 700;
}
.recordButton:hover{
background: #1cba94;
}
.recordButton img{
max-width: 70%;
}
.recordButton.active{
background: green;
background: #1cba94;
}
.panelMomWrapper{
overflow-x: hidden;
}
`;
this.shadowRoot.appendChild(style);