523 lines
9 KiB
CSS
523 lines
9 KiB
CSS
.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';
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.audio_recordButton,
|
|
.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
|
|
}
|
|
|
|
.audio_recordButton {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.recordButton:hover {
|
|
background: #1cba94;
|
|
}
|
|
|
|
.recordButton img {
|
|
max-width: 70%;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.recordButton label {
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.recordButton.active {
|
|
background: #1cba94;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.panelMomWrapper {
|
|
overflow-x: hidden;
|
|
}
|