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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
bin/web/assets/record.svg
View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 83.2 83.2" style="enable-background:new 0 0 83.2 83.2;" xml:space="preserve"> viewBox="0 0 83.2 83.2" style="enable-background:new 0 0 83.2 83.2;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
@ -7,23 +7,5 @@
</style> </style>
<g> <g>
<circle class="st0" cx="41.6" cy="41.6" r="40.9"/> <circle class="st0" cx="41.6" cy="41.6" r="40.9"/>
<g>
<path d="M29,43.8c0.2-0.1,0.4-0.1,0.5-0.2c0.9-0.6,1.5-1.4,2-2.4c0.5-1,0.7-2.1,0.7-3.2c0-2.3-0.8-4-2.3-5.3c-1.6-1.3-3.9-2-7-2
h-2.7c-1,0-2,0-3,0s-2,0-2.9,0c0.2,1,0.3,2.3,0.4,3.9c0.1,1.6,0.1,3.9,0.1,7.1c0,3.2,0,5.5-0.1,7.1c-0.1,1.5-0.2,2.8-0.4,3.9H22
c-0.2-1-0.3-2-0.3-3.2c-0.1-0.9-0.1-2.2-0.1-3.6c0.1,0,0.2,0,0.2,0c0.3,0,0.5,0,0.6,0c0.8,1.6,1.5,3,1.9,3.9
c0.5,1.1,0.9,2.1,1.2,3h8.6c-0.7-1-1.5-2.3-2.3-3.6C31.2,47.8,30.2,46,29,43.8z M24.8,39.9c-0.4,0.4-1.1,0.7-2,0.7
c-0.3,0-0.6,0-0.7,0c-0.1,0-0.3,0-0.4,0c0-1.7,0-3.2,0-4.4c0.2,0,0.4,0,0.6,0h0.5c0.9,0,1.5,0.2,2,0.6c0.4,0.4,0.7,0.9,0.7,1.5
C25.4,38.9,25.2,39.5,24.8,39.9z"/>
<path d="M42.6,47.1h-0.3c0,0-0.1,0-0.1,0c0-0.5-0.1-1-0.1-1.7c0-0.3,0-0.7,0-1c0.2,0,0.3,0,0.5,0c1.4,0,2.6,0,3.5,0.1
c1,0,1.8,0.1,2.6,0.2v-6.2c-0.8,0.1-1.6,0.2-2.6,0.2c-1,0-2.1,0.1-3.5,0.1c-0.2,0-0.3,0-0.5,0c0-0.1,0-0.3,0-0.5
c0-0.9,0-1.6,0.1-2.1c0.1,0,0.3,0,0.4,0c1.6,0,3,0,4.1,0.1c1.1,0.1,2.2,0.2,3.2,0.4l-0.5-6.2c-1.2,0.1-3.7,0.1-7.5,0.1
c-3.1,0-5.5,0-7.2-0.1c0.2,1.1,0.3,2.4,0.4,4c0.1,1.6,0.1,4,0.1,7c0,3.1,0,5.4-0.1,7c-0.1,1.6-0.2,3-0.4,4c2.6-0.1,5-0.1,7.1-0.1
h1.1c2.9,0,5.1,0,6.7,0.1l0.6-6.2c-1.1,0.2-2.3,0.4-3.5,0.5C45.6,47,44.2,47.1,42.6,47.1z"/>
<path d="M66.3,45.7c-0.4,0.3-0.9,0.6-1.5,0.8c-0.6,0.2-1.2,0.3-1.9,0.3c-0.8,0-1.6-0.2-2.3-0.6c-0.7-0.4-1.2-1-1.6-1.8
c-0.4-0.8-0.6-1.8-0.6-3c0-1.2,0.2-2.2,0.6-3c0.4-0.8,0.9-1.4,1.6-1.7c0.7-0.4,1.4-0.6,2.2-0.6c0.6,0,1.3,0.1,1.9,0.3
c0.6,0.2,1.1,0.5,1.5,0.9l2.8-6.2c-0.7-0.4-1.6-0.6-2.6-0.9c-1-0.2-2.1-0.3-3.4-0.3c-2.4,0-4.5,0.5-6.2,1.4c-1.7,0.9-3.1,2.3-4,4
c-0.9,1.7-1.4,3.8-1.4,6.1c0,2.3,0.5,4.3,1.4,6c0.9,1.7,2.2,3,3.9,4c1.7,0.9,3.7,1.4,6.1,1.4c1.3,0,2.5-0.1,3.6-0.4
c1.1-0.2,2-0.5,2.7-0.9L66.3,45.7z"/>
</g>
</g> </g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 475 B

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

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

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

@ -64,9 +64,9 @@ const config = {
'rotation': 'Rotation', 'rotation': 'Rotation',
'transformOrigin': 'Rotation Origin', 'transformOrigin': 'Rotation Origin',
'mirror_x': 'Mirror X', 'mirror_x': 'Mirror X',
'mirror_x_distance': 'Mirror X Distance', 'mirror_x_distance': 'X Distance',
'mirror_y': 'Mirror Y', 'mirror_y': 'Mirror Y',
'mirror_y_distance': 'Mirror Y Distance', 'mirror_y_distance': 'Y Distance',
'mirror_xy': 'Mirrox XY', 'mirror_xy': 'Mirrox XY',
'color': 'Color', 'color': 'Color',
'letterDelays': 'Letter Delays', '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{ .mirror_xWrapper input, .mirror_yWrapper input, .mirror_xyWrapper input{
margin: 0px 10px; margin: 0px 10px;
} }
label { .audio_min_max{
color: #ea2333; padding: 5px;
margin-left:10px; 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] { input[type=checkbox] {
position: absolute; position: absolute;
width: 27px; width: 27px;
@ -559,6 +613,50 @@ const TheatrePlay = function(autoInit = false) {
input[type=checkbox]:checked + label::after{ input[type=checkbox]:checked + label::after{
content: ' ON'; 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_yWrapper{
} }
.mirror_xyWrapper{ .mirror_xyWrapper{
@ -702,18 +800,82 @@ const TheatrePlay = function(autoInit = false) {
margin-top: 5px; margin-top: 5px;
} }
.audioButton{ .audioButton{
width: 20px; width: 17px;
margin: 2px; 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{ .audioButton.active{
background: green; background: #1cba94;
} }
.recordButton{ .recordButton{
width: 20px; width: 17px;
margin: 2px; 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{ .recordButton.active{
background: green; background: #1cba94;
}
.panelMomWrapper{
overflow-x: hidden;
} }
`; `;
this.shadowRoot.appendChild(style); this.shadowRoot.appendChild(style);

4
bin/web/theatre_modules/core-and-studio.js
View file

@ -38828,7 +38828,7 @@ Instead found: ${devStringify(butFoundInstead)}` : "";
padding: 0 0px 0 0px; padding: 0 0px 0 0px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: 50%; width: 42%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
padding-bottom: 4px; padding-bottom: 4px;
@ -44630,7 +44630,7 @@ ${content}</tr>
right: 0px; right: 0px;
top: 0px; top: 0px;
// Temporary, see comment about CSS grid in SingleRowPropEditor. // Temporary, see comment about CSS grid in SingleRowPropEditor.
width: 280px; width: 305px;
height: 100vh; height: 100vh;
z-index: ${panelZIndexes.propsPanel}; z-index: ${panelZIndexes.propsPanel};
backdrop-filter: blur(2px); backdrop-filter: blur(2px);