321 lines
7.8 KiB
CSS
321 lines
7.8 KiB
CSS
@font-face {
|
|
font-family: "Gilroy-Bold";
|
|
src: url("../fonts/GILROY-BOLD.TTF");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Gilroy-SemiBold";
|
|
src: url("../fonts/GILROY-SEMIBOLD.TTF");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Gilroy-Medium";
|
|
src: url("../fonts/GILROY-MEDIUM.TTF");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Gilroy-Black";
|
|
src: url("../fonts/GILROY-BLACK.TTF");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Circular Std";
|
|
src: url("../fonts/CIRCULARSTD-MEDIUM.OTF");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "SF Compact Rounded";
|
|
src: url("../fonts/SF-Compact-Rounded-Semibold.ttf");
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
user-select: none;
|
|
/* background-color: rgba(0, 0, 0, 0.502); */
|
|
}
|
|
|
|
.borderred {
|
|
border: 1px solid red;
|
|
}
|
|
|
|
#layout1::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
background-color: #d9d9d92b;
|
|
}
|
|
|
|
#layout1::-webkit-scrollbar {
|
|
width: 4px;
|
|
background-color: #d9d9d92b;
|
|
}
|
|
|
|
#layout1::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
background-color: rgba(255, 255, 255, 0.685);
|
|
}
|
|
|
|
#craftingscroll::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
background-color: #d9d9d92b;
|
|
}
|
|
|
|
#craftingscroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
background-color: #d9d9d92b;
|
|
}
|
|
|
|
#craftingscroll::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
background-color: #3388ff;
|
|
}
|
|
|
|
.settingsmodal-enter-active {
|
|
animation: opensettingspage-enter 0.3s ease forwards;
|
|
}
|
|
|
|
.settingsmodal-leave-active {
|
|
animation: closesettingspage-leave 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes opensettingspage-enter {
|
|
0% {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes closesettingspage-leave {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.orangemain-inventory-slot-css {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(217, 217, 217, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%), linear-gradient(0deg, rgba(255, 136, 51, 0.34) 0%, rgba(255, 136, 51, 0.34) 100%) !important;
|
|
border-radius: 3px;
|
|
border: 2px #ff8833 solid;
|
|
}
|
|
.whitemain-inventory-slot-css {
|
|
border-radius: 3px;
|
|
border: 2px white solid;
|
|
}
|
|
.redmain-inventory-slot-css {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(217, 217, 217, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%), linear-gradient(0deg, rgba(255, 51, 51, 0.34) 0%, rgba(255, 51, 51, 0.34) 100%) !important;
|
|
border-radius: 3px;
|
|
border: 2px #ff3333 solid;
|
|
}
|
|
.purplemain-inventory-slot-css {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(217, 217, 217, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%), linear-gradient(0deg, rgba(255, 51, 217.6, 0.34) 0%, rgba(255, 51, 217.6, 0.34) 100%) !important;
|
|
border-radius: 3px;
|
|
border: 2px #ff33da solid;
|
|
}
|
|
.bluemain-inventory-slot-css {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(217, 217, 217, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%), linear-gradient(0deg, rgba(51, 200.6, 255, 0.34) 0%, rgba(51, 200.6, 255, 0.34) 100%) !important;
|
|
border-radius: 3px;
|
|
border: 2px #33c9ff solid;
|
|
}
|
|
.greenmain-inventory-slot-css {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(217, 217, 217, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%), linear-gradient(0deg, rgba(51, 255, 125.8, 0.34) 0%, rgba(51, 255, 125.8, 0.34) 100%) !important;
|
|
border-radius: 3px;
|
|
border: 2px #33ff7e solid;
|
|
}
|
|
|
|
.fade-enter-active {
|
|
animation: notification-enter 0.5s ease forwards;
|
|
}
|
|
.fade-leave-active {
|
|
animation: notification-leave 0.3s ease forwards;
|
|
}
|
|
@keyframes notification-enter {
|
|
0% {
|
|
transform: translateY(50px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes notification-leave {
|
|
0% {
|
|
transform: translateY(0px);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(50px);
|
|
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.orangetext {
|
|
color: #ff8833;
|
|
filter: drop-shadow(0px 0px 0.5vw #ff8833);
|
|
}
|
|
.orangebackground {
|
|
background-color: #ff8833;
|
|
filter: drop-shadow(0px 0px 0.5vw #ff8833);
|
|
}
|
|
.orangedurabilitybaropacity {
|
|
background-color: #662b00;
|
|
}
|
|
.orangedurabilitybar {
|
|
background-color: #ff8833;
|
|
}
|
|
.whitetext {
|
|
color: white;
|
|
filter: drop-shadow(0px 0px 0.5vw white);
|
|
}
|
|
.whitebackground {
|
|
background-color: white;
|
|
filter: drop-shadow(0px 0px 0.5vw white);
|
|
}
|
|
.whitedurabilitybaropacity {
|
|
background-color: #333333;
|
|
}
|
|
.whitedurabilitybar {
|
|
background-color: white;
|
|
}
|
|
|
|
.redtext {
|
|
color: #ff3333;
|
|
filter: drop-shadow(0px 0px 0.5vw #ff3333);
|
|
}
|
|
.redbackground {
|
|
background-color: #ff3333;
|
|
filter: drop-shadow(0px 0px 0.5vw #ff3333);
|
|
}
|
|
.reddurabilitybaropacity {
|
|
background-color: #660000;
|
|
}
|
|
.reddurabilitybar {
|
|
background-color: #ff3333;
|
|
}
|
|
|
|
.greentext {
|
|
color: #33ff7e;
|
|
filter: drop-shadow(0px 0px 0.5vw #33ff7e);
|
|
}
|
|
.greenbackground {
|
|
background-color: #33ff7e;
|
|
filter: drop-shadow(0px 0px 0.5vw #33ff7e);
|
|
}
|
|
.greendurabilitybaropacity {
|
|
background-color: #006625;
|
|
}
|
|
.greendurabilitybar {
|
|
background-color: #33ff7e;
|
|
}
|
|
|
|
.purpletext {
|
|
color: #ff33da;
|
|
filter: drop-shadow(0px 0px 0.5vw #ff33da);
|
|
}
|
|
.purplebackground {
|
|
background-color: #ff33da;
|
|
filter: drop-shadow(0px 0px 0.5vw #ff33da);
|
|
}
|
|
.purpledurabilitybaropacity {
|
|
background-color: #660053;
|
|
}
|
|
.purpledurabilitybar {
|
|
background-color: #ff33da;
|
|
}
|
|
|
|
.bluetext {
|
|
color: #33c9ff;
|
|
filter: drop-shadow(0px 0px 0.5vw #33c9ff);
|
|
}
|
|
.bluebackground {
|
|
background-color: #33c9ff;
|
|
filter: drop-shadow(0px 0px 0.5vw #33c9ff);
|
|
}
|
|
|
|
.bluedurabilitybaropacity {
|
|
background-color: #004b66;
|
|
}
|
|
.bluedurabilitybar {
|
|
background-color: #33c9ff;
|
|
}
|
|
|
|
.weapononhand {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(251.6, 255, 51, 0.61) 0%, rgba(61.2, 42.84, 0, 0.61) 100%);
|
|
border-radius: 9px;
|
|
border: 2px rgba(0, 0, 0, 0.44) solid;
|
|
color: #eeff33;
|
|
}
|
|
.weapononbehind {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(51, 255, 217.6, 0.61) 0%, rgba(0, 60.18, 61.2, 0.61) 100%);
|
|
border-radius: 9px;
|
|
border: 2px rgba(0, 0, 0, 0.44) solid;
|
|
color: #33fff1;
|
|
}
|
|
|
|
.itemadded {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(51, 255, 125.8, 0.61) 0%, rgba(0, 61.2, 22.44, 0.61) 100%);
|
|
border-radius: 9px;
|
|
border: 2px rgba(0, 0, 0, 0.44) solid;
|
|
color: #33ff7e;
|
|
}
|
|
|
|
.itemremoved {
|
|
background: radial-gradient(78.26% 78.26% at 39.13% 39.13%, rgba(255, 51, 51, 0.61) 0%, rgba(61.2, 0, 0, 0.61) 100%);
|
|
border-radius: 9px;
|
|
border: 2px rgba(0, 0, 0, 0.44) solid;
|
|
color: #ff3333;
|
|
}
|
|
|
|
#slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 0.8vh !important;
|
|
width: 95%;
|
|
background-color: #fcfcfc;
|
|
outline: none;
|
|
border-radius: 1vw;
|
|
}
|
|
|
|
#slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 1.2vw;
|
|
height: 1.2vw;
|
|
border-radius: 50%;
|
|
background: white;
|
|
cursor: pointer;
|
|
border: 3px solid black;
|
|
}
|
|
|
|
#slider::-moz-range-thumb {
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
background-color: #dbc500;
|
|
cursor: pointer;
|
|
border: 3px solid #f4f4f4;
|
|
}
|
|
|
|
.craft-item-hover {
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.craft-item-hover:hover {
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.selectedcraft {
|
|
opacity: 1 !important;
|
|
}
|