diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js index 6157619..1c2d273 100644 --- a/bin/web/js/audio.js +++ b/bin/web/js/audio.js @@ -276,7 +276,8 @@ const Audio = function(tp, record) { mappingOptions.source = panel.querySelector(toCssClass(`audio_source${propTitle}`,'#')).value; mappingOptions.muted = panel.querySelector(toCssClass(`audio_mute${propTitle}`,'#')).checked; }; - + const source_Dom_Cont = document.createElement('div'); + source_Dom_Cont.classList.add('source_Dom_Cont'); const source_Dom = document.createElement('select'); source_Dom.id = toCssClass(`audio_source${propTitle}`); const source_mic = document.createElement('option'); @@ -296,7 +297,8 @@ const Audio = function(tp, record) { source_Dom.append(source_file); } }); - audioOptions.append(source_Dom); + source_Dom_Cont.append(source_Dom); + audioOptions.append(source_Dom_Cont); const muteDom = document.createElement('input'); const muteDom_label = document.createElement('label'); @@ -306,8 +308,8 @@ const Audio = function(tp, record) { muteDom.checked = true; muteDom_label.for = toCssClass(`audio_mute${propTitle}`); muteDom_label.innerHTML = 'muted'; - audioOptions.append(muteDom); - audioOptions.append(muteDom_label); + source_Dom_Cont.append(muteDom); + source_Dom_Cont.append(muteDom_label); const min_max_Dom = document.createElement('div'); min_max_Dom.classList.add('audio_min_max'); @@ -352,6 +354,7 @@ const Audio = function(tp, record) { max_Cont.append(max_inputDom); if (hasLetterDelay) { const letterDelayCont = document.createElement('div'); + letterDelayCont.classList.add("letterDelayCont"); const letterDelay_inputDom_label = document.createElement('label'); letterDelay_inputDom_label.for = 'audio_letterDelay'; letterDelay_inputDom_label.innerHTML = 'letterDelay'; diff --git a/bin/web/js/theatre-play.js b/bin/web/js/theatre-play.js index 97e5b9a..f5db9b7 100644 --- a/bin/web/js/theatre-play.js +++ b/bin/web/js/theatre-play.js @@ -549,7 +549,34 @@ const TheatrePlay = function(autoInit = false) { grid-template-columns: 1fr 1fr; row-gap: 7px; } - .audio_min_Cont, .audio_max_Cont{ + .source_Dom_Cont{ + padding: 5px; + } + .source_Dom_Cont select{ + background-color: white; + box-sizing: border-box; + border: 1px solid transparent; + color: rgb(0, 0, 0); + padding: 1px 6px; + 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; + text-align: left; + /* width: 100%; */ + border-radius: 0px; + font-variation-settings: "wght" 700; + height: 26px; + margin-right: 10px; + } + .audio_min_Cont, .audio_max_Cont, .letterDelayCont{ grid-column-start: 1; grid-column-end: 3; display: flex; @@ -708,15 +735,15 @@ const TheatrePlay = function(autoInit = false) { .main_panel_button, .vte_button{ background-color: white; - font-size: 1.15em; + font-size: 1.1em; padding: 5px 5px 4px 5px; - margin: 10px; + margin: 7px 10px; display: flex; flex-grow: 1; justify-content: center; border-radius: 10px; border: none; - padding: 10px; + padding: 7px; text-transform: uppercase; width: calc(100% - 20px); box-sizing: border-box;