1642 lines
42 KiB
CSS
1642 lines
42 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap");
|
|
|
|
@import "./101_RotatedButton.css";
|
|
@import "./Error.css";
|
|
:root {
|
|
--text-color: #333;
|
|
--company-color1: rgba(64, 119, 187, 1);
|
|
--company-color2: rgba(29, 47, 78, 1);
|
|
--company-color3: rgba(255, 255, 255, 1);
|
|
--company-color1-alpha: rgba(64, 119, 187, 0.3);
|
|
--company-color2-alpha: rgba(29, 47, 78, 0.3);
|
|
--company-color3-alpha: rgba(255, 255, 255, 0.3);
|
|
--global-shadow-color: rgba(0, 0, 0, 0.4);
|
|
|
|
--sidebar-transition-time: 0.2s;
|
|
--sidebar-transition-time-quick: 0.1s;
|
|
--sidebar-transition-animation: ease-in-out;
|
|
|
|
--header-height: 1.5rem;
|
|
--right-sidebar-width: 320px;
|
|
|
|
--dialog-border-color: rgba(100, 100, 100, 1);
|
|
--dialog-shadow-color: rgba(0, 0, 0, 0.3);
|
|
--dialog-background-color: rgba(255, 255, 255, 1);
|
|
--dialog-primary-color: rgba(19, 70, 209, 1);
|
|
--dialog-active-color: rgba(40, 70, 209, 1);
|
|
--dialog-input-border-color: rgba(200, 200, 200, 1);
|
|
--dialog-submit-button-color: rgba(180, 190, 230, 1);
|
|
--dialog-cancel-button-color: rgba(235, 80, 80, 1);
|
|
|
|
--body-video-seeker-height: 3rem;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: "Poppins", sans-serif;
|
|
}
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
color: var(--text-color);
|
|
/* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */
|
|
background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);
|
|
}
|
|
#app {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.first-gesture {
|
|
background: rgba(200, 0, 0, 0.2);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
/* Main + Section Partition*/
|
|
.main-body {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 2rem;
|
|
font-family: "Yusei Magic", sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1rem;
|
|
user-select: none;
|
|
/* Title */
|
|
.top-title {
|
|
.title {
|
|
font-size: 3rem;
|
|
}
|
|
.top-title-version {
|
|
margin-left: 2rem;
|
|
font-size: 1.2rem;
|
|
background: linear-gradient(transparent 60%, yellow 30%);
|
|
}
|
|
.top-title-version-number {
|
|
margin-left: 0.3rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
.belongings {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
.link {
|
|
margin-left: 1rem;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Partition */
|
|
.partition {
|
|
width: 100%;
|
|
.partition-header {
|
|
font-weight: 700;
|
|
color: rgb(71, 69, 69);
|
|
display: flex;
|
|
.caret {
|
|
width: 2rem;
|
|
}
|
|
.title {
|
|
font-size: 1.1rem;
|
|
}
|
|
.belongings {
|
|
font-weight: 400;
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
margin-left: 10px;
|
|
.belongings-checkbox {
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
}
|
|
.partition-content {
|
|
position: static;
|
|
overflow-y: hidden;
|
|
}
|
|
.row-split {
|
|
}
|
|
}
|
|
}
|
|
.state-control-checkbox:checked + .partition .partition-content {
|
|
max-height: 700px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);
|
|
}
|
|
.state-control-checkbox + .partition .partition-content {
|
|
max-height: 0px;
|
|
background: rgba(233, 233, 255, 0.3);
|
|
transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);
|
|
}
|
|
/* ROW */
|
|
|
|
.split-8-2 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 80%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 80%;
|
|
width: 20%;
|
|
}
|
|
}
|
|
.split-6-4 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 60%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 60%;
|
|
width: 40%;
|
|
}
|
|
}
|
|
.split-5-5 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 50%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 50%;
|
|
width: 50%;
|
|
}
|
|
}
|
|
.split-4-6 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 40%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 40%;
|
|
width: 60%;
|
|
}
|
|
}
|
|
.split-3-7 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
.split-2-8 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 20%;
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
.split-1-8-1 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 10%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 10%;
|
|
width: 80%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 90%;
|
|
width: 10%;
|
|
}
|
|
}
|
|
.split-2-2-6 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 20%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 40%;
|
|
width: 60%;
|
|
}
|
|
}
|
|
.split-3-3-4 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 60%;
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
.split-3-4-3 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 40%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 70%;
|
|
width: 30%;
|
|
}
|
|
}
|
|
.split-2-5-3 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 20%;
|
|
width: 50%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 70%;
|
|
width: 30%;
|
|
}
|
|
}
|
|
.split-4-4-2 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 40%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 40%;
|
|
width: 40%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 80%;
|
|
width: 20%;
|
|
}
|
|
}
|
|
.split-1-4-4-1 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 10%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 10%;
|
|
width: 40%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 50%;
|
|
width: 40%;
|
|
}
|
|
& > div:nth-child(4) {
|
|
left: 90%;
|
|
width: 10%;
|
|
}
|
|
}
|
|
|
|
.split-3-2-2-3 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 50%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(4) {
|
|
left: 70%;
|
|
width: 30%;
|
|
}
|
|
}
|
|
.split-3-2-3-2 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 50%;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(4) {
|
|
left: 80%;
|
|
width: 20%;
|
|
}
|
|
}
|
|
.split-3-1-2-4 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 10%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 40%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(4) {
|
|
left: 60%;
|
|
width: 40%;
|
|
}
|
|
}
|
|
.split-3-2-1-4 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 50%;
|
|
width: 10%;
|
|
}
|
|
& > div:nth-child(4) {
|
|
left: 60%;
|
|
width: 40%;
|
|
}
|
|
}
|
|
.split-3-2-2-2-1 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 50%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(4) {
|
|
left: 70%;
|
|
width: 20%;
|
|
}
|
|
& > div:nth-child(5) {
|
|
left: 90%;
|
|
width: 10%;
|
|
}
|
|
}
|
|
.split-3-1-1-1-4 {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin: 1px 0px 1px 0px;
|
|
& > div:nth-child(1) {
|
|
left: 0px;
|
|
width: 30%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
left: 30%;
|
|
width: 10%;
|
|
}
|
|
& > div:nth-child(3) {
|
|
left: 40%;
|
|
width: 10%;
|
|
}
|
|
& > div:nth-child(4) {
|
|
left: 50%;
|
|
width: 10%;
|
|
}
|
|
& > div:nth-child(5) {
|
|
left: 60%;
|
|
width: 40%;
|
|
}
|
|
}
|
|
.w20 {
|
|
width: 20%;
|
|
}
|
|
.bold {
|
|
font-weight: 700;
|
|
}
|
|
.w40 {
|
|
width: 40%;
|
|
}
|
|
|
|
.underline {
|
|
border-bottom: 3px solid #333;
|
|
}
|
|
.left-padding-05 {
|
|
padding-left: 0.5rem;
|
|
}
|
|
.left-padding-1 {
|
|
padding-left: 1rem;
|
|
}
|
|
.left-padding-2 {
|
|
padding-left: 2rem;
|
|
}
|
|
.left-margin-1 {
|
|
margin-left: 1rem;
|
|
}
|
|
.left-margin-2 {
|
|
margin-left: 2rem;
|
|
}
|
|
.highlight {
|
|
background-color: rgba(200, 200, 255, 0.3);
|
|
}
|
|
.guided {
|
|
/* background-color: rgba(9, 133, 67, 0.3); */
|
|
background-color: rgba(159, 165, 162, 0.1);
|
|
/* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */
|
|
}
|
|
|
|
.divider {
|
|
height: 0.8rem;
|
|
/* background-color: rgba(16, 210, 113, 0.1); */
|
|
background-color: rgba(31, 42, 36, 0.1);
|
|
}
|
|
|
|
.body-section-title {
|
|
font-size: 1.5rem;
|
|
color: rgb(51, 49, 49);
|
|
}
|
|
.body-sub-section-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: rgb(3, 53, 12);
|
|
}
|
|
|
|
.body-item-title {
|
|
color: rgb(51, 99, 49);
|
|
display: flex;
|
|
}
|
|
.body-item-text {
|
|
color: rgb(30, 30, 30);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
.body-item-text-item {
|
|
padding-left: 1rem;
|
|
}
|
|
}
|
|
.body-item-text-small {
|
|
color: rgb(30, 30, 30);
|
|
font-size: 0.7rem;
|
|
}
|
|
.body-item-text-em {
|
|
color: rgb(250, 30, 30);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.body-input-container {
|
|
display: flex;
|
|
}
|
|
.body-item-input {
|
|
width: 60%;
|
|
}
|
|
.body-item-input-slider {
|
|
width: 60%;
|
|
}
|
|
.body-item-input-slider-label {
|
|
margin-right: 1rem;
|
|
}
|
|
.body-item-input-slider-val {
|
|
margin-left: 1rem;
|
|
}
|
|
.body-item-input-slider-2nd {
|
|
width: 60%;
|
|
accent-color: #33f;
|
|
}
|
|
|
|
.body-button-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
& > div {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
.body-button {
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
.body-button-disabled {
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
vertical-align: middle;
|
|
background: #ddd;
|
|
}
|
|
.body-button-active {
|
|
user-select: none;
|
|
border: solid 1px #333;
|
|
border-radius: 2px;
|
|
background: #ada;
|
|
}
|
|
.body-button-stanby {
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
background: #aba;
|
|
cursor: pointer;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.body-button-container-space-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.body-select {
|
|
color: rgb(30, 30, 30);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.body-select-50 {
|
|
color: rgb(30, 30, 30);
|
|
max-width: 50%;
|
|
height: 1.5rem;
|
|
}
|
|
.select-option-red {
|
|
color: #f66;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.body-image-container,
|
|
.body-wav-container {
|
|
display: flex;
|
|
width: 100%;
|
|
.body-image-container-title,
|
|
.body-wav-container-title {
|
|
width: 20%;
|
|
}
|
|
.body-image-container-img,
|
|
.body-wav-container-wav {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
.donate-img {
|
|
border-radius: 35px;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
/* Dialog */
|
|
.dialog-container,
|
|
.dialog-container2 {
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
display: none;
|
|
.dialog-frame {
|
|
color: var(--company-color2);
|
|
width: 40rem;
|
|
max-height: 80vh;
|
|
border: 2px solid var(--dialog-border-color);
|
|
border-radius: 20px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-shadow: 5px 5px 5px var(--dialog-shadow-color);
|
|
background: var(--dialog-background-color);
|
|
overflow: hidden;
|
|
display: flex;
|
|
.dialog-title {
|
|
margin-top: 20px;
|
|
background: var(--company-color2);
|
|
color: #fff;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.dialog-content {
|
|
width: 90%;
|
|
.dialog-application-title {
|
|
font-family: "Chicle", cursive;
|
|
font-size: 3rem;
|
|
text-align: center;
|
|
}
|
|
.dialog-content-part {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.input-text-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 20px;
|
|
}
|
|
}
|
|
.dialog-fixed-size-content {
|
|
width: 90%;
|
|
max-height: 70vh;
|
|
.model-slot-header,
|
|
.file-uploader-header {
|
|
font-weight: 700;
|
|
margin: 5px 5px 5px 5px;
|
|
.model-slot-header-button,
|
|
.file-uploader-header-button {
|
|
font-weight: 400;
|
|
font-size: 0.8rem;
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
padding: 1px 5px 1px 5px;
|
|
margin-left: 1rem;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
}
|
|
.model-slot-container {
|
|
max-height: 60vh;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
|
|
.model-slot {
|
|
height: 5rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
.model-slot-icon {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
.model-slot-icon-pointable {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
cursor: pointer;
|
|
}
|
|
.model-slot-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 0.8rem;
|
|
border-bottom: solid 1px #aaa;
|
|
width: 80%;
|
|
overflow-y: scroll;
|
|
&::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #f7cfec80;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.model-slot-detail-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.model-slot-detail-row-label {
|
|
width: 20%;
|
|
white-space: nowrap;
|
|
}
|
|
.model-slot-detail-row-value {
|
|
width: 55%;
|
|
white-space: nowrap;
|
|
}
|
|
.model-slot-detail-row-value-download {
|
|
width: 55%;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
.model-slot-detail-row-value-pointable {
|
|
width: 55%;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
.model-slot-detail-row-value-edit {
|
|
width: 55%;
|
|
font-weight: 700;
|
|
color: #f00;
|
|
white-space: nowrap;
|
|
}
|
|
.model-slot-detail-row-button {
|
|
width: 15%;
|
|
height: 90%;
|
|
}
|
|
}
|
|
}
|
|
.model-slot-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: solid 1px #a00;
|
|
width: 20%;
|
|
font-size: 0.8rem;
|
|
padding: 4px;
|
|
}
|
|
.model-slot-button {
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
padding: 1px;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
.model-slot-button-disabled {
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
vertical-align: middle;
|
|
background: #ddd;
|
|
}
|
|
.model-slot-button-active {
|
|
user-select: none;
|
|
border: solid 1px #333;
|
|
border-radius: 2px;
|
|
background: #ada;
|
|
}
|
|
.model-slot-button-stanby {
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
background: #aba;
|
|
cursor: pointer;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.file-uploader-voice-changer-select,
|
|
.edit-model-slot-title {
|
|
font-size: 1rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
.file-uploader-file-select-container {
|
|
font-size: 0.9rem;
|
|
padding-left: 1rem;
|
|
.file-uploader-file-select-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0.2rem;
|
|
.file-uploader-file-select-row-label {
|
|
width: 5rem;
|
|
}
|
|
.file-uploader-file-select-row-value {
|
|
width: 20rem;
|
|
color: #f00;
|
|
white-space: nowrap;
|
|
}
|
|
.file-uploader-file-select-row-button {
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
padding: 1px;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.file-uploader-file-select-upload-button-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
justify-content: center;
|
|
.file-uploader-file-select-upload-button {
|
|
/* width: 12rem; */
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
padding: 1px 10px 1px 10px;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
}
|
|
.edit-model-slot-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.edit-model-slot-title {
|
|
}
|
|
.edit-model-slot-speakers {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0px 0px 0px 1rem;
|
|
.edit-model-slot-speakers-id-label,
|
|
.edit-model-slot-speakers-name-label {
|
|
margin: 0px 0px 0px 0.5rem;
|
|
}
|
|
.edit-model-slot-speakers-buttons {
|
|
margin: 0px 0px 0px 0.5rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
.edit-model-slot-speakers-button {
|
|
margin: 0px 0.5rem 0px 0.5rem;
|
|
user-select: none;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
padding: 0px 10px 0px 10px;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dialog-container-show {
|
|
display: flex;
|
|
}
|
|
|
|
.state-control-checkbox:checked ~ .dialog-container {
|
|
background: rgba(200, 200, 200, 0.4);
|
|
animation-name: dialog-show;
|
|
animation-duration: 0.4s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
animation-direction: normal;
|
|
}
|
|
.state-control-checkbox ~ .dialog-container {
|
|
background: rgba(100, 100, 100, 0.4);
|
|
animation-name: dialog-hide;
|
|
animation-duration: 0.4s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
animation-direction: normal;
|
|
}
|
|
.state-control-checkbox:checked + .dialog-frame {
|
|
display: flex;
|
|
}
|
|
.state-control-checkbox + .dialog-frame {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes dialog-hide {
|
|
from {
|
|
opacity: 1;
|
|
z-index: 200;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
@keyframes dialog-show {
|
|
from {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
10% {
|
|
z-index: 200;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
z-index: 200;
|
|
}
|
|
}
|
|
|
|
.state-control-checkbox:checked ~ .dialog-container2 {
|
|
background: rgba(200, 200, 200, 0.4);
|
|
animation-name: dialog-show2;
|
|
animation-duration: 0.4s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
animation-direction: normal;
|
|
}
|
|
.state-control-checkbox ~ .dialog-container2 {
|
|
background: rgba(100, 100, 100, 0.4);
|
|
animation-name: dialog-hide2;
|
|
animation-duration: 0.4s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
animation-direction: normal;
|
|
}
|
|
/* .state-control-checkbox:checked + .dialog-frame {
|
|
display: flex;
|
|
}
|
|
.state-control-checkbox + .dialog-frame {
|
|
display: none;
|
|
} */
|
|
|
|
@keyframes dialog-hide2 {
|
|
from {
|
|
opacity: 1;
|
|
z-index: 400;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
@keyframes dialog-show2 {
|
|
from {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
10% {
|
|
z-index: 400;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
z-index: 400;
|
|
}
|
|
}
|
|
|
|
.tooltip-text {
|
|
display: none;
|
|
position: absolute;
|
|
padding: 4px;
|
|
font-size: 0.7rem;
|
|
line-height: 2rem;
|
|
color: #ddd;
|
|
border-radius: 5px;
|
|
background: #444;
|
|
/* width: 100px; */
|
|
}
|
|
.tooltip-text-100px {
|
|
width: 100px;
|
|
}
|
|
.tooltip-text-thin {
|
|
line-height: 1rem;
|
|
}
|
|
.tooltip-text-right {
|
|
line-height: 1rem;
|
|
}
|
|
.tooltip-text:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -1.4rem;
|
|
border: 12px solid transparent;
|
|
border-top: 16px solid #444;
|
|
margin-left: 0rem;
|
|
transform: rotateZ(180deg);
|
|
}
|
|
.tooltip:hover .tooltip-text {
|
|
display: inline-block;
|
|
top: 30px;
|
|
left: 0px;
|
|
}
|
|
.tooltip:hover .tooltip-text-lower {
|
|
display: inline-block;
|
|
top: 60px;
|
|
left: 0px;
|
|
}
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ################## */
|
|
.merge-field-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.merge-field {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.merge-field-elem {
|
|
padding-left: 5px;
|
|
}
|
|
.red {
|
|
color: #f00;
|
|
}
|
|
.purple {
|
|
color: #33f;
|
|
}
|
|
.grey-bold {
|
|
color: #555;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
}
|
|
.model-slot-area {
|
|
display: inline-block;
|
|
background: var(--company-color2);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
.model-slot-panel {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
.model-slot-tiles-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 2px;
|
|
flex-wrap: wrap;
|
|
/* width: calc(30rem + 40px + 10px); */
|
|
}
|
|
|
|
.model-slot-buttons {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
.model-slot-button {
|
|
border: solid 2px #999;
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
border-radius: 2px;
|
|
background: #333;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
.model-slot-button:hover {
|
|
border: solid 2px #faa;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.model-slot-tile-container,
|
|
.model-slot-tile-container-selected {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.model-slot-tile-container-selected {
|
|
background: #43030c;
|
|
}
|
|
.model-slot-tile-container:hover {
|
|
background: #43030c;
|
|
}
|
|
|
|
.model-slot-tile-icon-div {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
padding-top: 4px;
|
|
position: relative;
|
|
}
|
|
.model-slot-tile-icon {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
object-fit: contain;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
}
|
|
.model-slot-tile-vctype {
|
|
position: absolute;
|
|
font-size: 0.6rem;
|
|
font-weight: 800;
|
|
top: 5px;
|
|
left: 2px;
|
|
background: RGBA(10, 200, 100, 0.6);
|
|
border-radius: 5px;
|
|
padding: 0px 2px 0px 2px;
|
|
}
|
|
.model-slot-tile-icon-no-entry {
|
|
color: gray;
|
|
position: absolute;
|
|
top: 2rem;
|
|
}
|
|
.model-slot-tile-dscription {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
color: navajowhite;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.character-area {
|
|
display: flex;
|
|
gap: 5px;
|
|
padding: 20px;
|
|
.portrait-area {
|
|
width: 20rem;
|
|
height: 20rem;
|
|
.portrait-container {
|
|
position: relative;
|
|
width: 20rem;
|
|
height: 20rem;
|
|
.portrait {
|
|
width: 20rem;
|
|
height: 20rem;
|
|
object-fit: contain;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
}
|
|
.portrait-area-status {
|
|
width: 5rem;
|
|
background: rgba(100, 100, 100, 0.5);
|
|
color: white;
|
|
position: absolute;
|
|
padding: 0px 0px 0px 3px;
|
|
font-size: 0.7rem;
|
|
left: 5px;
|
|
top: 5px;
|
|
border-radius: 2px;
|
|
.portrait-area-status-vctype {
|
|
font-weight: 800;
|
|
color: #866;
|
|
}
|
|
}
|
|
.portrait-area-terms-of-use {
|
|
width: 5rem;
|
|
background: rgba(100, 100, 100, 0.5);
|
|
color: white;
|
|
position: absolute;
|
|
paddig: 2px;
|
|
font-size: 0.7rem;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
.portrait-area-terms-of-use-link {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.character-area-control-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
.character-area-control {
|
|
display: flex;
|
|
gap: 3px;
|
|
.character-area-control-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
.character-area-control-button-active {
|
|
width: 5rem;
|
|
border: solid 1px #333;
|
|
border-radius: 2px;
|
|
background: #ada;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
.character-area-control-button-stanby {
|
|
width: 5rem;
|
|
border: solid 1px #999;
|
|
border-radius: 2px;
|
|
background: #aba;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
&:hover {
|
|
border: solid 1px #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.character-area-control-title {
|
|
width: 4rem;
|
|
font-weight: 700;
|
|
}
|
|
.character-area-control-field {
|
|
/* width: 20rem; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.character-area-slider-control {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.character-area-slider-control-kind {
|
|
width: 2rem;
|
|
}
|
|
.character-area-slider-control-slider {
|
|
width: 10rem;
|
|
}
|
|
.character-area-slider-control-val {
|
|
width: 3rem;
|
|
}
|
|
.character-area-slider-control-text {
|
|
padding: 0px 1px 0px 1px;
|
|
}
|
|
}
|
|
.character-area-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
.character-area-button {
|
|
border: solid 2px #999;
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
border-radius: 2px;
|
|
background: #666;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
.character-area-button:hover {
|
|
border: solid 2px #faa;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* audio::-webkit-media-controls-play-button,
|
|
audio::-webkit-media-controls-panel {
|
|
background-color: #ff0;
|
|
height: 1rem;
|
|
}
|
|
audio::-webkit-media-controls-enclosure {
|
|
max-height: 1rem;
|
|
}
|
|
audio::-webkit-media-controls {
|
|
justify-content: start;
|
|
}
|
|
audio::-webkit-media-controls-overlay-enclosure{
|
|
height: 1rem;
|
|
} */
|
|
|
|
.config-area {
|
|
display: flex;
|
|
gap: 5px;
|
|
padding: 20px;
|
|
.config-sub-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
.config-sub-area-control {
|
|
display: flex;
|
|
.config-sub-area-control-title {
|
|
width: 5rem;
|
|
font-weight: 700;
|
|
}
|
|
.config-sub-area-control-title-long {
|
|
width: 20rem;
|
|
font-weight: 700;
|
|
}
|
|
.config-sub-area-control-field {
|
|
width: 15rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.config-sub-area-noise-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
.config-sub-area-noise-checkbox-container {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
}
|
|
|
|
.config-sub-area-slider-control {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.config-sub-area-slider-control-kind {
|
|
width: 1rem;
|
|
}
|
|
.config-sub-area-slider-control-slider {
|
|
width: 10rem;
|
|
}
|
|
.config-sub-area-slider-control-val {
|
|
width: 3rem;
|
|
}
|
|
}
|
|
.config-sub-area-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
align-items: center;
|
|
.config-sub-area-button {
|
|
border: solid 2px #999;
|
|
color: white;
|
|
background: #666;
|
|
|
|
cursor: pointer;
|
|
|
|
font-size: 0.8rem;
|
|
border-radius: 5px;
|
|
height: 1.2rem;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
.config-sub-area-button:hover {
|
|
border: solid 2px #faa;
|
|
}
|
|
.config-sub-area-button-active {
|
|
border: solid 2px #999;
|
|
color: white;
|
|
background: #844;
|
|
|
|
cursor: pointer;
|
|
|
|
font-size: 0.8rem;
|
|
border-radius: 5px;
|
|
height: 1.2rem;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
}
|
|
.config-sub-area-control-field-auido-io {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.config-sub-area-control-field-auido-io-filter {
|
|
max-width: 30%;
|
|
}
|
|
.config-sub-area-control-field-auido-io-select {
|
|
max-width: 70%;
|
|
}
|
|
}
|
|
.config-sub-area-control-field-wav-file {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
.config-sub-area-control-field-wav-file-audio-container {
|
|
height: 1rem;
|
|
.config-sub-area-control-field-wav-file-audio {
|
|
height: 1rem;
|
|
width: 15rem;
|
|
}
|
|
}
|
|
.config-sub-area-control-field-wav-file-folder {
|
|
height: 1rem;
|
|
width: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.config-sub-area-control-field-wav-file-echoback-button {
|
|
border: solid 1px #333;
|
|
background: #fff;
|
|
font-size: 0.8rem;
|
|
border-radius: 5px;
|
|
height: 1.2rem;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
cursor: pointer;
|
|
}
|
|
.config-sub-area-control-field-wav-file-echoback-button-active {
|
|
font-size: 0.8rem;
|
|
border: solid 1px #333;
|
|
border-radius: 5px;
|
|
background: #ada;
|
|
height: 1.2rem;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.headerArea {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.title1 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
align-items: flex-end;
|
|
.title {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
text-shadow: 0 0 2px #333;
|
|
}
|
|
.title-version {
|
|
font-size: 0.9rem;
|
|
}
|
|
.title-version-number {
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
.icons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
.belongings {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 3px;
|
|
.belongings-button {
|
|
border: solid 2px #999;
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
border-radius: 5px;
|
|
background: #666;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
height: 1.7rem;
|
|
top: -2px;
|
|
}
|
|
.belongings-button:hover {
|
|
border: solid 2px #cc6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advanced-setting-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
margin: 10px;
|
|
.advanced-setting-container-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
.advanced-setting-container-row-title {
|
|
width: 7rem;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
}
|
|
.advanced-setting-container-row-field {
|
|
width: 15rem;
|
|
font-size: 0.9rem;
|
|
.advanced-setting-container-row-field-crossfade-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
width: 10rem;
|
|
& > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 3px;
|
|
& > div:nth-child(1) {
|
|
color: #333;
|
|
}
|
|
& > div:nth-child(2) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.merge-lab-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 10px;
|
|
gap: 10px;
|
|
.merge-lab-type-filter {
|
|
display: flex;
|
|
flex-direction: row;
|
|
& > div:nth-child(1) {
|
|
width: 50%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.merge-lab-manipulator {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.merge-lab-model-list {
|
|
width: 70%;
|
|
.merge-lab-model-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
& > div:nth-child(1) {
|
|
width: 50%;
|
|
}
|
|
& > div:nth-child(2) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
.merge-lab-merge-buttons {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
width: 30%;
|
|
.merge-lab-merge-button {
|
|
border: solid 2px #ddd;
|
|
color: black;
|
|
font-size: 0.8rem;
|
|
border-radius: 5px;
|
|
background: #eee;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
height: 1.7rem;
|
|
text-align: center;
|
|
}
|
|
.merge-lab-merge-button:hover {
|
|
border: solid 2px #aaa;
|
|
}
|
|
.merge-lab-merge-buttons-notice {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|