2022-04-09 11:29:54 +00:00
|
|
|
*, *::before, *::after {
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
|
|
|
body, html {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
.joystick {
|
|
|
|
width: var(--size);
|
|
|
|
height: var(--size);
|
|
|
|
background-color: #e7e7e7b3;
|
|
|
|
border-radius: 100%;
|
|
|
|
border: 2px solid #ddd;
|
|
|
|
z-index: 1000;
|
|
|
|
|
2022-04-16 07:44:50 +00:00
|
|
|
&__wrapper {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
left: calc(50% - var(--size) / 2);
|
|
|
|
bottom: 10px;
|
|
|
|
}
|
|
|
|
|
2022-04-09 11:29:54 +00:00
|
|
|
&__knob {
|
|
|
|
width: calc(var(--size) / 2);
|
|
|
|
height: calc(var(--size) / 2);
|
|
|
|
position: absolute;
|
|
|
|
background-color: #fff;
|
|
|
|
border: 2px solid #ddd;
|
|
|
|
border-radius: 100%;
|
|
|
|
cursor:grab;
|
|
|
|
transform-origin: center center;
|
|
|
|
}
|
2022-04-16 07:44:50 +00:00
|
|
|
|
|
|
|
&__button {
|
|
|
|
position: absolute;
|
|
|
|
appearance: none;
|
|
|
|
left: var(--button-x);
|
|
|
|
top: var(--button-y);
|
|
|
|
width: 48px;
|
|
|
|
height: 48px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
border-radius: 100%;
|
|
|
|
background-color: rgba(231, 231, 231, 0.7019607843);
|
|
|
|
border: 2px solid #ddd;
|
|
|
|
z-index: 1001;
|
|
|
|
color: #5c5c5c;
|
|
|
|
font-weight: bold;
|
|
|
|
transition: border 250ms linear, background-color 250ms linear;
|
|
|
|
|
|
|
|
&--active {
|
|
|
|
border-width: 4px;
|
|
|
|
border-color: #db8f00;
|
|
|
|
background-color: rgb(231 231 231 / 78%);
|
|
|
|
}
|
|
|
|
}
|
2022-04-09 11:29:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.chat {
|
|
|
|
min-width: 200px;
|
|
|
|
width: 40vw;
|
|
|
|
max-height: 180px;
|
|
|
|
height: 180px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
&__toggle {
|
|
|
|
width: 24px;
|
|
|
|
height: 24px;
|
|
|
|
appearance: none;
|
2022-04-10 12:54:29 +00:00
|
|
|
background-color: #fff;
|
2022-04-09 11:29:54 +00:00
|
|
|
background-position: center center;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
cursor: pointer;
|
2022-04-10 12:54:29 +00:00
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 style=%27width:24px;height:24px%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23878787%27 d=%27M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M20 16H5.2L4 17.2V4H20V16Z%27 /%3E%3C/svg%3E");
|
2022-04-09 11:29:54 +00:00
|
|
|
padding: 1rem;
|
2022-04-10 12:54:29 +00:00
|
|
|
border: 2px solid transparent;
|
2022-04-09 11:29:54 +00:00
|
|
|
border-radius: 100%;
|
|
|
|
background-size: 70%;
|
|
|
|
margin-bottom: 0.5rem;
|
2022-04-10 12:54:29 +00:00
|
|
|
|
|
|
|
transition-property: background-color, border-color;
|
|
|
|
transition-timing-function: linear;
|
|
|
|
transition-duration: 150ms;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: rgb(233, 233, 233);
|
|
|
|
}
|
2022-04-09 11:29:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&__wrapper {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 8px;
|
|
|
|
left: 8px;
|
|
|
|
z-index: 2000;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__history {
|
|
|
|
flex-grow: 1;
|
|
|
|
overflow-y: scroll;
|
|
|
|
padding: 0.15rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__input {
|
|
|
|
flex-grow: 1;
|
|
|
|
&-wrapper {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__message {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
gap: 0.5rem;
|
2022-04-10 12:54:29 +00:00
|
|
|
text-shadow: 1px 1px 2px black;
|
2022-04-09 11:29:54 +00:00
|
|
|
|
|
|
|
&-timestamp {
|
|
|
|
color: #646464;
|
|
|
|
&::before {
|
|
|
|
content: '[';
|
|
|
|
}
|
|
|
|
&::after {
|
|
|
|
content: ']';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&-sender {
|
|
|
|
color: var(--name-color);
|
|
|
|
&::before {
|
|
|
|
content: '<';
|
|
|
|
}
|
|
|
|
&::after {
|
|
|
|
content: '>';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&-content {
|
2022-04-10 12:54:29 +00:00
|
|
|
--text-color: #fff;
|
|
|
|
color: var(--text-color);
|
2022-04-09 11:29:54 +00:00
|
|
|
overflow-wrap: anywhere;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-10 06:03:31 +00:00
|
|
|
&__wrapper.invisible {
|
2022-04-09 11:29:54 +00:00
|
|
|
.chat {
|
|
|
|
&__input-wrapper {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__history {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__message {
|
|
|
|
visibility: visible;
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
&--old {
|
|
|
|
visibility: hidden;
|
|
|
|
opacity: 0;
|
|
|
|
transition: visibility 0s 2s, opacity 2s linear;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-10 06:03:31 +00:00
|
|
|
&__wrapper.visible {
|
2022-04-09 11:29:54 +00:00
|
|
|
.chat__history {
|
2022-04-10 12:54:29 +00:00
|
|
|
background-color: rgba(73, 73, 73, 0.3);
|
|
|
|
}
|
|
|
|
|
|
|
|
.chat__toggle {
|
|
|
|
border-color: #878787;
|
2022-04-09 11:29:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media all and (max-width: 737px) {
|
|
|
|
.chat {
|
|
|
|
&__wrapper {
|
|
|
|
right: 8px;
|
|
|
|
|
2022-04-10 06:03:31 +00:00
|
|
|
&:not(.visible) {
|
2022-04-09 11:29:54 +00:00
|
|
|
&, *:not(input):not(button) {
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
2022-04-09 12:57:20 +00:00
|
|
|
button, input {
|
2022-04-09 11:29:54 +00:00
|
|
|
pointer-events: all;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
min-width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
2022-04-16 06:50:46 +00:00
|
|
|
|
|
|
|
.loading {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
max-width: 400px;
|
|
|
|
width: 100vw;
|
|
|
|
margin: 10% auto;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 2rem;
|
|
|
|
padding: 2rem;
|
|
|
|
|
|
|
|
&__wrapper {
|
|
|
|
position: absolute;
|
|
|
|
z-index: 3000;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background-color: #202020;
|
|
|
|
color: #fff;
|
|
|
|
transition: opacity 1s linear;
|
|
|
|
opacity: 1;
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
|
|
&.loading--complete {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2022-04-16 10:21:07 +00:00
|
|
|
|
|
|
|
&.loading--error {
|
|
|
|
.loading__bar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
2022-04-16 06:50:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&__bar {
|
|
|
|
width: 100%;
|
|
|
|
height: 20px;
|
|
|
|
margin-top: 2rem;
|
|
|
|
background-color: #141414;
|
|
|
|
border-radius: 4px;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
&-inner {
|
|
|
|
width: var(--loading-percentage);
|
|
|
|
height: 20px;
|
|
|
|
background-color: #1098ab;
|
|
|
|
transition: width 50ms linear;
|
|
|
|
|
|
|
|
background-image: linear-gradient(
|
|
|
|
-45deg,
|
|
|
|
rgba(255, 255, 255, .2) 25%,
|
|
|
|
transparent 25%,
|
|
|
|
transparent 50%,
|
|
|
|
rgba(255, 255, 255, .2) 50%,
|
|
|
|
rgba(255, 255, 255, .2) 75%,
|
|
|
|
transparent 75%,
|
|
|
|
transparent
|
|
|
|
);
|
|
|
|
z-index: 1;
|
|
|
|
background-size: 50px 50px;
|
|
|
|
animation: move 2s linear infinite;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes move {
|
|
|
|
0% {
|
|
|
|
background-position: 0 0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
background-position: 50px 50px;
|
|
|
|
}
|
|
|
|
}
|