344 lines
7.8 KiB
CSS
344 lines
7.8 KiB
CSS
@font-face {
|
|
src: url("../fonts/SF-PRO-ROUNDED-BOLD.OTF");
|
|
font-family: "sf-pro-rounded-bold";
|
|
}
|
|
@font-face {
|
|
src: url("../fonts/SF-PRO-ROUNDED-MEDIUM.OTF");
|
|
font-family: "sf-pro-rounded-medium";
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
user-select: none;
|
|
/* background-color: rgba(0, 0, 0, 0.502); */
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
.fade-enter {
|
|
opacity: 0;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.fade-enter-to {
|
|
opacity: 1;
|
|
transform: translateY(8px);
|
|
}
|
|
.fade-leave {
|
|
opacity: 1;
|
|
transform: translateY(8px);
|
|
}
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-60px);
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.summaryModal-enter-active {
|
|
animation: category-enter 0.5s ease forwards;
|
|
}
|
|
.summaryModal-leave-active {
|
|
animation: categoryImage-leave 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes category-enter {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
}
|
|
100% {
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
@keyframes categoryImage-leave {
|
|
0% {
|
|
transform: translateY(0%);
|
|
}
|
|
100% {
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
.categoryItemMechanic {
|
|
transition: background-color 0.3s ease, filter 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
.categoryItemMechanic.red:hover {
|
|
background-color: #ff6262 !important;
|
|
}
|
|
.categoryItemMechanic.blue:hover {
|
|
background-color: #62a1ff !important;
|
|
}
|
|
.categoryItemMechanic.orange:hover {
|
|
background-color: #ff9a62 !important;
|
|
}
|
|
.categoryItemMechanic.white:hover {
|
|
background-color: #ffffff !important;
|
|
}
|
|
.categoryItemMechanic.purple:hover {
|
|
background-color: #bc84ff !important;
|
|
}
|
|
|
|
.bottom-container-enter-active {
|
|
animation: category-item-enter 0.2s ease forwards;
|
|
}
|
|
|
|
.bottom-container-leave-active {
|
|
animation: category-item-leave 0.2s ease forwards;
|
|
}
|
|
|
|
.stanceMenu-enter-active {
|
|
animation: stance-enter 1s ease forwards;
|
|
}
|
|
.stanceMenu-leave-active {
|
|
animation: stance-leave 0.2s ease forwards;
|
|
}
|
|
@keyframes stance-enter {
|
|
0% {
|
|
transform: translateX(100%);
|
|
}
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
@keyframes stance-leave {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes category-item-enter {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes category-item-leave {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
.swiper-pagination-bullet {
|
|
background: rgb(185, 179, 179) !important;
|
|
opacity: 0.5;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background: white !important;
|
|
opacity: 1;
|
|
border-radius: 1vw !important;
|
|
width: 4vw !important;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
/* .swiper-slide:hover {
|
|
border: 0.1875rem solid #bc84ff;
|
|
filter: drop-shadow(0rem 0rem 0.5vw #bc84ff);
|
|
} */
|
|
.swiper-slide.red:hover {
|
|
border: 0.1875rem solid #ff6262;
|
|
filter: drop-shadow(0rem 0rem 0.5vw #ff6262);
|
|
}
|
|
.swiper-slide.blue:hover {
|
|
border: 0.1875rem solid #62a1ff;
|
|
filter: drop-shadow(0rem 0rem 0.5vw #62a1ff);
|
|
}
|
|
.swiper-slide.orange:hover {
|
|
border: 0.1875rem solid #ff9a62;
|
|
filter: drop-shadow(0rem 0rem 0.5vw #ff9a62);
|
|
}
|
|
.swiper-slide.white:hover {
|
|
border: 0.1875rem solid #ffffff;
|
|
filter: drop-shadow(0rem 0rem 0.5vw #ffffff);
|
|
}
|
|
.swiper-slide.purple:hover {
|
|
background-color: #bc84ff !important;
|
|
filter: drop-shadow(0rem 0rem 0.5vw #bc84ff);
|
|
}
|
|
|
|
.special-color-fields {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: transparent;
|
|
}
|
|
|
|
.special-color-fields::-webkit-input-placeholder {
|
|
color: transparent !important;
|
|
}
|
|
.stancemenu {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
margin: 0.375rem 0;
|
|
background: linear-gradient(
|
|
to right,
|
|
#ff9c65 0%,
|
|
#ff9c65 var(--pos, 0%),
|
|
rgba(217, 217, 217, 0.32) var(--pos, 50%),
|
|
rgba(217, 217, 217, 0.32) 100%
|
|
);
|
|
}
|
|
|
|
.stancemenu::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 1.2vw;
|
|
height: 2.1vh;
|
|
background: #bc84ff;
|
|
cursor: pointer;
|
|
border: 0.125rem solid white;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.boss-menu-input {
|
|
border-radius: 0.375rem;
|
|
border: 0.125rem solid rgba(255, 156, 101, 0.14);
|
|
background: rgba(255, 156, 101, 0.23);
|
|
outline: none;
|
|
appearance: none;
|
|
|
|
color: rgba(255, 156, 101, 0.8);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: "sf-pro-rounded-bold";
|
|
font-size: 1.7vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
}
|
|
|
|
.boss-menu-input::-webkit-outer-spin-button,
|
|
.boss-menu-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.boss-menu-input::placeholder {
|
|
color: rgba(255, 156, 101, 0.29);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: "sf-pro-rounded-bold";
|
|
font-size: 1.7vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
}
|
|
|
|
.id-input {
|
|
border-radius: 0.3125rem;
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.12);
|
|
outline: none;
|
|
appearance: none;
|
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: "sf-pro-rounded-bold";
|
|
font-size: 1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.id-input::-webkit-outer-spin-button,
|
|
.id-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.id-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.47);
|
|
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: "sf-pro-rounded-bold";
|
|
font-size: 1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
/* Add if not using autoprefixer */
|
|
-webkit-appearance: none;
|
|
/* Remove most all native input styles */
|
|
appearance: none;
|
|
/* For iOS < 15 */
|
|
background: rgba(255, 156, 101, 0.3);
|
|
/* Not removed via appearance */
|
|
margin: 0;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
color: currentColor;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 0.15em solid #ff9c65;
|
|
border-radius: 6px;
|
|
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
input[type="checkbox"]::before {
|
|
content: "";
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
|
transform: scale(0);
|
|
transform-origin: bottom left;
|
|
transition: 120ms transform ease-in-out;
|
|
/* Windows High Contrast Mode */
|
|
background-color: #75482f;
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
background: #ff9c65;
|
|
}
|
|
input[type="checkbox"]:checked::before {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.search-logs-input {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
outline: none;
|
|
padding: 0 2.5rem;
|
|
border-radius: 29px;
|
|
background: linear-gradient(180deg, rgba(188, 132, 255, 0.31) 0%, rgba(188, 132, 255, 0.31) 100%),
|
|
linear-gradient(0deg, rgba(188, 132, 255, 0.03), rgba(188, 132, 255, 0.03));
|
|
color: rgba(255, 255, 255, 0.9);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: "sf-pro-rounded-bold";
|
|
font-size: 1.25vh;
|
|
font-style: normal;
|
|
font-weight: 200;
|
|
line-height: normal;
|
|
}
|
|
.search-logs-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.47);
|
|
}
|
|
|
|
.hoverjobmenu:hover {
|
|
border: 2px solid #d6b4ff;
|
|
border-radius: 0.5vw;
|
|
background-color: rgba(188, 132, 255, 0.71);
|
|
}
|