From 7823711f1a1b417937b8e4a6e76c830a3ae514e5 Mon Sep 17 00:00:00 2001
From: themancalledjakob <jrkb@jrkb.land>
Date: Thu, 7 Mar 2024 12:41:11 +0100
Subject: [PATCH]  shadowCss in external file

---
 bin/em/variabletime/web/css/theatre.css    | 515 +++++++++++++++++++++
 bin/em/variabletime/web/js/theatre-play.js | 467 +------------------
 2 files changed, 519 insertions(+), 463 deletions(-)
 create mode 100644 bin/em/variabletime/web/css/theatre.css

diff --git a/bin/em/variabletime/web/css/theatre.css b/bin/em/variabletime/web/css/theatre.css
new file mode 100644
index 0000000..94ecc63
--- /dev/null
+++ b/bin/em/variabletime/web/css/theatre.css
@@ -0,0 +1,515 @@
+.alignButtons,
+.textAlignButtons {
+    flex-direction: row;
+    padding: 10px 0px !important;
+    justify-content: center;
+}
+
+.word {
+    margin-right: 10px;
+}
+
+.letter {
+    transition: 0.5s font-variation-settings;
+}
+
+@font-face {
+    font-family: 'vtVF';
+    src: url("/web/fonts/vtVF.ttf") format("TrueType");
+}
+
+.vtTitle {
+    font-family: 'vtVF';
+    font-size: 3em;
+    font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
+    height: 50px;
+    width: 100%;
+    position: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#panel,
+.panel {
+    display: flex;
+    flex-direction: column;
+}
+
+.panel>div {
+    order: 1;
+}
+
+.panel>.panelWrapperMom {
+    order: 2;
+}
+
+.panel>.bottomButtonsContainer {
+    order: 3;
+}
+
+.panelWrapper {}
+
+.panelControlsWrapper {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-row-start: 2;
+    grid-column-start: 1;
+    grid-column-end: 7;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.xWrapper,
+.yWrapper,
+.fontFamilyWrapper,
+.fontFamilyWrapper,
+.rotationWrapper,
+.letterDelayWrapper,
+.transformOriginWrapper,
+.widthWrapper,
+.fontSizeWrapper,
+.letterSpacingWrapper,
+.lineHeighWrapper,
+.textWrapper,
+.colorWrapper,
+.mirror_xWrapper,
+.mirror_yWrapper,
+.mirror_xyWrapper,
+.mirror_x_distanceWrapper,
+.mirror_y_distanceWrapper,
+.alignButtons,
+.textAlignButtons {
+
+    border: none;
+    padding: 0px;
+    display: flex;
+    width: 100%;
+
+}
+
+.textWrappingButton {
+    margin-left: 30px;
+}
+
+.textWrappingButton.active {
+    background: white;
+}
+
+
+.alignButtonsVertical {
+
+    padding-bottom: 10px;
+}
+
+.alignButtons {
+    display: flex;
+    width: 50%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.xWrapper {}
+
+.yWrapper {}
+
+.mirror_xWrapper {}
+
+.mirror_xWrapper input,
+.mirror_yWrapper input,
+.mirror_xyWrapper input {
+    margin: 0px 10px;
+}
+
+.audio_min_max {
+    padding: 5px;
+    box-sizing: border-box;
+    display: grid;
+    /* flex-direction: column; */
+    grid-template-columns: 1fr 1fr;
+    row-gap: 7px;
+}
+
+.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;
+    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;
+}
+
+input[type=checkbox] {}
+
+input[type=checkbox]:checked+label {
+    color: #1cba94;
+    padding-left: 4px;
+}
+
+input[type=checkbox]+label::after {
+    content: ' OFF';
+}
+
+input[type=checkbox]:checked+label::after {
+    content: ' ON';
+}
+
+input[type=button].audio_recordButton {
+}
+
+.audioOptions input[type="radio"] {
+    appearance: none;
+    background-color: #f00;
+    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 {}
+
+.mirror_x_distanceWrapper {}
+
+.mirror_y_distanceWrapper {}
+
+.fontFamilyWrapper {}
+
+.rotationWrapper {
+    border-top: 1px dashed #91919177;
+    padding-top: 10px;
+}
+
+.transformOriginWrapper {}
+
+.widthWrapper {}
+
+.heightWrapper {
+    display: none;
+}
+
+.fontSizeWrapper {}
+
+.letterSpacingWrapper {}
+
+.letterDelayWrapper {}
+
+.lineHeighWrapper {}
+
+.textWrapper {}
+
+.colorWrapper {
+    border-bottom: 1px dashed #91919177;
+    border-top: 1px dashed #91919177;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+
+span.icon {
+    font-family: 'VariableIcons';
+    font-size: 3em;
+    margin: 2px 5px;
+    line-height: 0.2em;
+    box-sizing: border-box;
+}
+
+
+.main_panel_button,
+.vte_button {
+    background-color: white;
+    font-size: 1.1em;
+    padding: 5px 5px 4px 5px;
+    margin: 7px 10px;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    border-radius: 10px;
+    border: none;
+    padding: 7px;
+    text-transform: uppercase;
+    width: calc(100% - 20px);
+    box-sizing: border-box;
+    cursor: pointer;
+    font-variation-settings: 'wght' 750, 'wdth' 100;
+
+}
+
+.main_panel_button:hover,
+.vte_button:hover {
+    color: white;
+    background-color: black;
+}
+
+.removeButtonContainer {
+    display: flex;
+    padding-right: 10px;
+    padding-bottom: 10px;
+}
+
+.alignButtons img,
+.textAlignButtons img {
+    height: 19px;
+    cursor: pointer;
+    margin: 5px 5px 2px 5px;
+
+}
+
+li.layerMover div {}
+
+li.layerMover div.selected {
+    background: rgba(255, 255, 255, 1);
+}
+
+li.layerMover div.selected svg circle {
+    fill: #ea2333;
+}
+
+.letterDelaysContWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-bottom: 10px;
+}
+
+.letterDelaysContWrapper>*,
+.fontVariationAxesContWrapper>* {
+    margin-left: calc(var(--left-pad) * (var(--depth) - 1));
+}
+
+.fontVariationAxesContWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px dashed #91919177;
+    border-top: 1px dashed #91919177;
+    margin-top: 10px;
+}
+
+.moveLayerButton {}
+
+.removeLayerButton img,
+.duplicateLayerButton img,
+.addLayerButton img,
+.moveLayerButton img {
+    height: 10px;
+    cursor: pointer;
+}
+
+.propTitleStuff {
+    color: red;
+}
+
+.addLayerButton {
+    width: calc(100% - 40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* padding-left: 15px; */
+    align-self: end;
+    margin-top: 5px;
+}
+
+.audioButton {
+    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: #1cba94;
+}
+
+.recordButton {
+    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: #1cba94;
+}
+
+.panelMomWrapper {
+    overflow-x: hidden;
+}
diff --git a/bin/em/variabletime/web/js/theatre-play.js b/bin/em/variabletime/web/js/theatre-play.js
index 3114556..b3ebd47 100644
--- a/bin/em/variabletime/web/js/theatre-play.js
+++ b/bin/em/variabletime/web/js/theatre-play.js
@@ -354,470 +354,11 @@ const TheatrePlay = function(autoInit = false) {
     };
     this.addShadowCss = () => {
         if (this.shadowRoot.querySelector(`#tpShadowCss`) === null) {
-            let style = document.createElement("style");
+            let style = document.createElement("link");
             style.setAttribute('id', 'tpShadowCss');
-
-            // ASYA: here you can adjust css
-            style.textContent = `
-        .alignButtons, .textAlignButtons {
-            flex-direction: row;
-            padding: 10px 0px !important;
-            justify-content: center;
-        }
-
-        .word{
-            margin-right: 10px;
-        }
-        .letter{
-            transition: 0.5s font-variation-settings;
-        }
-
-        @font-face {
-          font-family: 'vtVF';
-          src: url("/web/fonts/vtVF.ttf") format("TrueType");
-        }
-
-        .vtTitle{
-            font-family: 'vtVF';
-            font-size: 3em;
-            font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
-            height: 50px;
-            width: 100%;
-            position: inherit;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #panel,
-        .panel {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .panel > div {
-            order: 1;
-        }
-        .panel > .panelWrapperMom {
-            order: 2;
-        }
-        .panel > .bottomButtonsContainer {
-            order: 3;
-        }
-
-        .panelWrapper{
-        }
-
-        .panelControlsWrapper{
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-            grid-row-start: 2;
-            grid-column-start: 1;
-            grid-column-end: 7;
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        .xWrapper, .yWrapper, .fontFamilyWrapper, .fontFamilyWrapper, .rotationWrapper, .letterDelayWrapper, .transformOriginWrapper, .widthWrapper, .fontSizeWrapper, .letterSpacingWrapper, .lineHeighWrapper, .textWrapper, .colorWrapper, .mirror_xWrapper, .mirror_yWrapper, .mirror_xyWrapper, .mirror_x_distanceWrapper, .mirror_y_distanceWrapper, .alignButtons, .textAlignButtons{
-
-            border: none;
-            padding: 0px;
-            display: flex;
-            width: 100%;
-
-        }
-
-        .textWrappingButton {
-            margin-left: 30px;
-        }
-        .textWrappingButton.active {
-            background: white;
-        }
-
-        
-        .alignButtonsVertical{
-           
-            padding-bottom: 10px;
-        }
-
-        .alignButtons{
-            display: flex;
-            width: 50%;
-            padding-top: 10px;
-            padding-bottom: 10px;
-        }
-
-        .xWrapper{
-        } 
-        .yWrapper{
-        }
-        .mirror_xWrapper{
-        } 
-        .mirror_xWrapper input, .mirror_yWrapper input, .mirror_xyWrapper input{
-            margin: 0px 10px;
-        }
-        .audio_min_max{
-            padding: 5px;
-            box-sizing: border-box;
-            display: grid;
-            /* flex-direction: column; */
-            grid-template-columns: 1fr 1fr;
-            row-gap: 7px;
-        }
-        .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;
-            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]:checked + label {
-          color: #1cba94;
-          padding-left: 4px;
-        }
-        input[type=checkbox] + label::after{
-          content: ' OFF';
-        }
-        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{
-        }
-        .mirror_x_distanceWrapper{
-        }
-        .mirror_y_distanceWrapper{
-        }
-
-        .fontFamilyWrapper{
-        }
-        .rotationWrapper{
-             border-top: 1px dashed #91919177;
-             padding-top: 10px;
-        }
-        .transformOriginWrapper{
-        }
-        .widthWrapper{
-        }
-        .heightWrapper{
-            display: none;
-        }
-        .fontSizeWrapper{
-        }
-        .letterSpacingWrapper{
-        }
-        .letterDelayWrapper{
-        }
-        .lineHeighWrapper{
-        }
-        .textWrapper{
-        }
-        .colorWrapper{
-            border-bottom: 1px dashed #91919177;
-            border-top: 1px dashed #91919177;
-            margin-bottom: 10px;
-            padding-bottom: 10px;
-            padding-top: 10px;
-        }
-
-        span.icon{
-            font-family: 'VariableIcons';
-            font-size: 3em;
-            margin: 2px 5px;
-            line-height: 0.2em;
-            box-sizing: border-box;
-        }
-
-        
-        .main_panel_button, .vte_button{
-            background-color: white;
-            font-size: 1.1em;
-            padding: 5px 5px 4px 5px;
-            margin: 7px 10px;
-            display: flex;
-            flex-grow: 1;
-            justify-content: center;
-            border-radius: 10px;
-            border: none;
-            padding: 7px;
-            text-transform: uppercase;
-            width: calc(100% - 20px);
-            box-sizing: border-box;
-            cursor: pointer;
-            font-variation-settings: 'wght' 750, 'wdth' 100;
-
-        }
-        .main_panel_button:hover, .vte_button:hover{
-            color: white;
-            background-color:black;
-        }
-
-        .removeButtonContainer{
-            display: flex;
-            padding-right: 10px;
-            padding-bottom: 10px;
-        }
-        
-        .alignButtons img,
-        .textAlignButtons img{
-            height: 19px;
-            cursor: pointer;
-            margin: 5px 5px 2px 5px;
-           
-        }
-
-        li.layerMover div {
-            
-        }
-
-        li.layerMover div.selected {
-            background: rgba(255, 255, 255, 1);
-        }
-
-        li.layerMover div.selected svg circle{
-            fill: #ea2333;
-        }
-
-        .letterDelaysContWrapper{
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            padding-bottom: 10px;
-        }
-
-        .letterDelaysContWrapper > *, .fontVariationAxesContWrapper > *{
-            margin-left: calc(var(--left-pad) * (var(--depth) - 1));
-        }
-
-        .fontVariationAxesContWrapper{
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            padding-bottom: 10px;
-            margin-bottom: 10px;
-            border-bottom: 1px dashed #91919177;
-            border-top: 1px dashed #91919177;
-            margin-top: 10px;
-        }
-
-        .moveLayerButton {
-            
-        }
-        .removeLayerButton img,
-        .duplicateLayerButton img,
-        .addLayerButton img,
-        .moveLayerButton img {
-            height: 10px;
-            cursor: pointer;
-        }
-        .propTitleStuff {
-            color: red;
-        }
-        .addLayerButton{
-            width: calc(100% - 40px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            /* padding-left: 15px; */
-            align-self: end;
-            margin-top: 5px;
-        }
-        .audioButton{
-            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: #1cba94;
-        }
-        .recordButton{
-            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: #1cba94;
-        }
-        .panelMomWrapper{
-            overflow-x: hidden;
-        }
-    `;
-            this.shadowRoot.appendChild(style);
+            style.setAttribute('rel', 'stylesheet');
+            style.setAttribute('href', '/web/css/theatre.css');
+            this.shadowRoot.insertBefore(style, this.shadowRoot.querySelector('#pointer-root'));
         }
     };
     const waitingForShadowRoot = (callback) => {