528 lines
8.7 KiB
SCSS
528 lines
8.7 KiB
SCSS
@font-face {
|
|
font-family: "Rubik";
|
|
src: url(../assets/fonts/Rubik.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Rubik";
|
|
font-style: italic;
|
|
src: url(../assets/fonts/RubikItalic.ttf);
|
|
}
|
|
|
|
$accent-color: #6536fe;
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: "Rubik", sans-serif;
|
|
user-select: none;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gui {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
padding: 5px;
|
|
z-index: 100;
|
|
background: #111111;
|
|
color: #ffffff;
|
|
border-radius: 10px;
|
|
transition: all 0.4s ease-in-out;
|
|
|
|
.content {
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 35px;
|
|
min-width: 350px;
|
|
max-height: calc(100vh - 30px);
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
&.minimized {
|
|
max-height: 55px;
|
|
overflow: hidden;
|
|
|
|
.head .head-buttons .minimize img {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: #ffffff00;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #ffffff22;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: #ffffff44;
|
|
}
|
|
|
|
@mixin button {
|
|
background: #ffffff11;
|
|
border: none;
|
|
border-radius: 5px;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease-in-out;
|
|
outline: none;
|
|
|
|
img {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
&:hover {
|
|
background: #ffffff2a;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
|
|
.title {
|
|
text-transform: uppercase;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.head-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
.reset,
|
|
.minimize,
|
|
.play-pause {
|
|
@include button;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-bottom: 5px;
|
|
|
|
.label {
|
|
text-transform: uppercase;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #ffffffcc;
|
|
}
|
|
|
|
.add {
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 50%;
|
|
background: #ffffff00;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: #ffffff88;
|
|
|
|
&:hover {
|
|
background: #ffffff22;
|
|
color: #ffffffaa;
|
|
}
|
|
}
|
|
}
|
|
|
|
.interaction-container .setting {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.particle-containers,
|
|
.interaction-containers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.particle-container,
|
|
.interaction-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
transition: all 0.2s ease-in-out;
|
|
background: #ffffff00;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
|
|
@mixin close {
|
|
margin-left: auto;
|
|
margin-bottom: auto;
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 50%;
|
|
background: #ffffff00;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: #ffffff88;
|
|
opacity: 0;
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
&:hover {
|
|
background: #ffffff22;
|
|
color: #ffffffaa;
|
|
}
|
|
}
|
|
|
|
.colors {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
|
|
.setting {
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffffaa;
|
|
margin: 0;
|
|
}
|
|
|
|
.color-selector {
|
|
position: relative;
|
|
|
|
.color {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
border: none;
|
|
outline: none;
|
|
|
|
&.red {
|
|
background: #f91d4d;
|
|
}
|
|
|
|
&.green {
|
|
background: #0db342;
|
|
}
|
|
|
|
&.blue {
|
|
background: #4a4ad7;
|
|
}
|
|
|
|
&.yellow {
|
|
background: #f0e246;
|
|
}
|
|
|
|
&.cyan {
|
|
background: #42cedb;
|
|
}
|
|
|
|
&.magenta {
|
|
background: #d742d7;
|
|
}
|
|
}
|
|
|
|
.color-list {
|
|
position: absolute;
|
|
top: -5px;
|
|
left: 50%;
|
|
transform: translate(-25%, -100%) scale(0.5);
|
|
opacity: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding-inline: 5px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
background: #262626;
|
|
transition: all 0.1s ease-in-out;
|
|
|
|
&.show {
|
|
opacity: 1;
|
|
transform: translate(-15px, -100%) scale(1);
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 12px;
|
|
transform: translate(-25%, 0);
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-top: 5px solid #262626;
|
|
}
|
|
}
|
|
}
|
|
|
|
.close {
|
|
@include close;
|
|
}
|
|
}
|
|
|
|
.force-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
.force-types {
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
.force-type {
|
|
width: 100%;
|
|
height: 30px;
|
|
background: #ffffff22;
|
|
border-radius: 5px;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
transition: all 0.1s ease-in-out;
|
|
|
|
&:hover {
|
|
background: #ffffff33;
|
|
}
|
|
|
|
&.selected {
|
|
background: #ffffff44;
|
|
|
|
&:hover {
|
|
background: #ffffff55;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.container-head {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
|
|
.color {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.sublabel {
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffffaa;
|
|
}
|
|
|
|
.close {
|
|
@include close;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: #ffffff05;
|
|
|
|
.container-head .close {
|
|
opacity: 1;
|
|
}
|
|
|
|
.colors .close {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.setting {
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #ffffff88;
|
|
|
|
.setting-value {
|
|
background: #ffffff22;
|
|
color: #ffffff;
|
|
padding: 2px 6px;
|
|
font-weight: 400;
|
|
border-radius: 5px;
|
|
margin-left: 2px;
|
|
border: none;
|
|
outline: none;
|
|
appearance: textfield;
|
|
-moz-appearance: textfield;
|
|
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.range {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
.value {
|
|
text-align: center;
|
|
color: #ffffff88;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.range-content {
|
|
width: 100%;
|
|
height: 5px;
|
|
background: #ffffff22;
|
|
border-radius: 5px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
@mixin thumb {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.1s ease-in-out;
|
|
background: $accent-color;
|
|
}
|
|
|
|
&::-webkit-slider-thumb {
|
|
@include thumb;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
@include thumb;
|
|
}
|
|
|
|
&::-webkit-slider-thumb:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
&::-moz-range-thumb:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
&::-webkit-slider-thumb:active {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
&::-moz-range-thumb:active {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin color($color) {
|
|
.container-head .color {
|
|
background: $color;
|
|
}
|
|
|
|
.range .range-content {
|
|
&::-webkit-slider-thumb {
|
|
background: $color;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
background: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.red {
|
|
@include color(#f91d4d);
|
|
}
|
|
|
|
&.green {
|
|
@include color(#0db342);
|
|
}
|
|
|
|
&.blue {
|
|
@include color(#4a4ad7);
|
|
}
|
|
|
|
&.yellow {
|
|
@include color(#f0e246);
|
|
}
|
|
|
|
&.cyan {
|
|
@include color(#42cedb);
|
|
}
|
|
|
|
&.magenta {
|
|
@include color(#d742d7);
|
|
}
|
|
}
|
|
}
|
|
|
|
.down-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
.save,
|
|
.load {
|
|
width: 100%;
|
|
padding-block: 10px;
|
|
background: #ffffff22;
|
|
border-radius: 5px;
|
|
border: none;
|
|
outline: none;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
transition: all 0.1s ease-in-out;
|
|
|
|
&:hover {
|
|
background: #ffffff33;
|
|
}
|
|
}
|
|
|
|
.save {
|
|
background: $accent-color;
|
|
|
|
&:hover {
|
|
background: lighten($accent-color, 5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:has(.content.minimized) {
|
|
opacity: 0.5;
|
|
}
|
|
}
|