From 21a588802253d0dc10a44112f3c03b9ad7fff30b Mon Sep 17 00:00:00 2001
From: asuk <asuk@pointer.click>
Date: Fri, 13 Oct 2023 17:01:11 +0200
Subject: [PATCH] css changes

---
 bin/web/js/audio.js        | 11 +++++++----
 bin/web/js/theatre-play.js | 35 +++++++++++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 8 deletions(-)

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;