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 = () => {
|
||||
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) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue