icy3dw/src/client/scss/index.scss

165 lines
2.9 KiB
SCSS
Raw Normal View History

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 {
display: none;
position: absolute;
width: var(--size);
height: var(--size);
bottom: 10px;
left: calc(50% - var(--size) / 2);
background-color: #e7e7e7b3;
border-radius: 100%;
border: 2px solid #ddd;
z-index: 1000;
&__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;
}
}
.chat {
min-width: 200px;
width: 40vw;
max-height: 180px;
height: 180px;
display: flex;
flex-direction: column;
&__toggle {
width: 24px;
height: 24px;
appearance: none;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
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=%27currentColor%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");
padding: 1rem;
border: 2px solid #ddd;
border-radius: 100%;
background-size: 70%;
margin-bottom: 0.5rem;
}
&__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;
&-timestamp {
color: #646464;
&::before {
content: '[';
}
&::after {
content: ']';
}
}
&-sender {
color: var(--name-color);
&::before {
content: '<';
}
&::after {
content: '>';
}
}
&-content {
overflow-wrap: anywhere;
}
}
&.invisible {
.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;
}
}
}
}
&.visible {
.chat__history {
background-color: #6464644d;
}
}
}
@media all and (max-width: 737px) {
.chat {
&__wrapper {
right: 8px;
&:not(.focused) {
&, *:not(input):not(button) {
pointer-events: none;
}
button {
pointer-events: all;
}
}
}
min-width: 100%;
width: 100%;
}
}