shadowCss in external file
This commit is contained in:
themancalledjakob
parent
f829eea911
commit
7823711f1a
2 changed files with 519 additions and 463 deletions
515
bin/em/variabletime/web/css/theatre.css
Normal file
515
bin/em/variabletime/web/css/theatre.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -354,470 +354,11 @@ const TheatrePlay = function(autoInit = false) {
|
||||||
};
|
};
|
||||||
this.addShadowCss = () => {
|
this.addShadowCss = () => {
|
||||||
if (this.shadowRoot.querySelector(`#tpShadowCss`) === null) {
|
if (this.shadowRoot.querySelector(`#tpShadowCss`) === null) {
|
||||||
let style = document.createElement("style");
|
let style = document.createElement("link");
|
||||||
style.setAttribute('id', 'tpShadowCss');
|
style.setAttribute('id', 'tpShadowCss');
|
||||||
|
style.setAttribute('rel', 'stylesheet');
|
||||||
// ASYA: here you can adjust css
|
style.setAttribute('href', '/web/css/theatre.css');
|
||||||
style.textContent = `
|
this.shadowRoot.insertBefore(style, this.shadowRoot.querySelector('#pointer-root'));
|
||||||
.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);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const waitingForShadowRoot = (callback) => {
|
const waitingForShadowRoot = (callback) => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue