html, body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
color: var(--color-white);
font-family: var(--font);
}
button, input {
all: unset;
box-sizing: border-box;
cursor: text;
}
button {
cursor: pointer;
transition: background-color .1s, color .1s, border-color .1s, opacity .1s;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
.shadown {
display: none;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: var(--bg-overlay);
}
.inventory {
display: none;
width: 100%;
height: 100%;
position: fixed;
align-items: center;
flex-direction: column;
justify-content: center;
background: var(--bg-shell);
z-index: 100;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.player-info {
width: 186px;
min-height: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 100px;
}
.player-info img {
border-radius: 6px;
box-shadow: inset 0 0 0 1px var(--white-1);
}
.name-player{
margin-top: 25px;
font-size: 20px;
font-weight: 600;
line-height: 1;
text-align: center;
}
.id-player{
font-weight: 700;
color: var(--text-5);
}
.id-player-number{
color: var(--white);
}
.innerInventory {
width: min-content;
height: min-content;
display: flex;
}
.innerInventory .mid {
display: flex;
flex-direction: column;
}
*::-webkit-scrollbar {
width: 4px;
}
*::-webkit-scrollbar-thumb {
width: 4px;
border-radius: 6px;
background: var(--white);
}
*::-webkit-scrollbar-track {
width: 4px;
border-radius: 6px;
background: var(--white-1);
}
@layer container_atalhos {
.cont_atalhos {
position: relative;
margin-top: 3px;
margin-right: 56px;
}
.cont_atalhos .titulo {
display: grid;
grid-template-rows: 1fr 1.25fr 1fr;
align-items: center;
justify-content: center;
justify-items: center;
width: min-content;
max-width: 15px;
}
.cont_atalhos .titulo > h1 {
font-size: 0.875rem;
color: var(--color-white);
transform: rotate(-90deg);
width: min-content;
height: min-content;
white-space: nowrap;
}
.cont_atalhos .titulo > div {
font-size: 0.875rem;
color: var(--color-white);
transform: rotate(-90deg);
width: max-content;
}
.cont_atalhos .titulo > span{
border-radius: 0.125rem;
background: var(--bg-details);
width: 0.1875rem;
height: 100%;
}
.cont_atalhos .bloco_caixas {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: min-content;
position: relative;
gap: 10px;
margin-top: -1px;
}
.cont_atalhos .bloco_caixas .caixa {
position: relative;
}
.cont_atalhos .bloco_caixas .caixa:not(:nth-child(6))::after {
font-family: var(--font);
content: '';
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(calc(-50% + 2px));
left: -16px;
width: 30px;
height: 30px;
border-radius: 6px;
background: var(--bg-details);
box-shadow: inset 0 0 0 1px var(--white-1);
font-weight: 400;
font-size: 14px;
z-index: 10;
}
.cont_atalhos .bloco_caixas .caixa:nth-child(1)::after {
content: '1';
}
.cont_atalhos .bloco_caixas .caixa:nth-child(2)::after {
content: '2';
}
.cont_atalhos .bloco_caixas .caixa:nth-child(3)::after {
content: '3';
}
.cont_atalhos .bloco_caixas .caixa:nth-child(4)::after {
content: '4';
}
.cont_atalhos .bloco_caixas .caixa:nth-child(5)::after {
content: '5';
}
}
.inventory .caixa {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2px;
min-width: 100px;
min-height: 100px;
width: 100px;
height: 100px;
border-radius: 0.5rem;
background: var(--bg-block);
box-shadow: inset 0 0 0 1px var(--inv-slot-border);
padding: 5px 6px 10px 3px;
background-repeat: no-repeat;
background-size: 70%;
background-position: center;
position: relative;
box-sizing: border-box;
z-index: 1;
}
.inventory .caixa:hover::before {
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
content: "";
inset: 0;
border-radius: 0.5rem;
box-shadow: inset 0 0 0 1px var(--border-color-hover);
background: linear-gradient(180deg, var(--transparent) 0%, var(--background-color-hover) 100%);
mix-blend-mode: screen;
opacity: .4;
}
@keyframes caixa {
/* 0% {
transform: scale(.85);
}
100% {
transform: scale(1);
} */
}
.populated .top svg:hover path {
fill: var(--border-color-hover);
}
.inventory .caixa .top {
display: flex;
align-items: center;
justify-content: space-between;
width: 95%;
height: min-content;
z-index: 10;
margin-left: 4px;
}
.inventory .caixa:hover .top {
position: relative;
}
.inventory .caixa:hover .top svg {
position: relative;
z-index: 20;
}
/* .icon_box {
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 22px;
left: -15px;
width: 0.9375rem;
height: 0.9375rem;
background: var(--color-white);
border-radius: 13px 0 0 13px;
z-index: 100;
} */
.inventory .caixa .top span {
font-size: 12px;
color: var(--white-6);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.inventory .caixa .top span {
position: relative;
top: 1px;
left: 2px;
}
.inventory .caixa .prog_durabilidade {
display: flex;
gap: 2px;
/* width: 100%; */
width: 65px;
height: 4.5px;
margin: 0 auto;
}
.inventory .caixa .prog_durabilidade .bloco_prog {
width: calc(100% / 4);
height: 100%;
border-radius: 2px;
background: var(--text-6);
}
.inventory .caixa .progress {
width: 0;
max-width: 100% !important;
height: 100%;
border-radius: 0.125rem;
}
.main_box {
display: flex;
gap: 8px;
min-height: 30rem;
margin-bottom: 29px;
}
.main_box .top_cont {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
height: 22px;
margin-bottom: .55rem;
gap: 4px;
/* background-color: red; */
}
.main_box .top_cont h1 {
color: var(--color-white);
font-size: 13px;
font-weight: 600;
/* margin-right: 10px; */
/* white-space: nowrap; */
}
.min_bar {
position: relative;
bottom: 3px;
width: 100%;
height: 1px;
border-radius: 0.125rem;
background: var(--led-details);
margin-bottom: 5px;
}
.main_box .top_cont .min_bar:nth-child(1) {
background: var(--led-details2);
}
.main_box .top_cont .weight_box {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 101px;
min-height: 25px;
background: var(--bg-block);
box-shadow: inset 0 0 0 1px var(--inv-slot-border);
border-radius: 3px;
}
.main_box .top_cont .weight_box .weight_box_span {
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
}
.main_box .top_cont .weight_box span:nth-child(1) {
color: white;
font-size: 14px;
font-weight: 700;
margin: 0;
}
.main_box .top_cont .weight_box span:nth-child(2) {
color: var(--accent-10);
font-size: 12px;
font-weight: 700;
margin: 0;
}
.header_box {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.header_box_icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 25px;
border-radius: 5px;
background: var(--accent);
border-radius: 5px;
}
.left_container, .right_container {
position: relative;
}
.left_container #items_grid, .right_container #items_grid {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 1fr;
gap: 10px;
margin-right: -24px;
}
.left_scroll {
/* direction: rtl; */
}
.left_scroll, .right_container #items_grid {
width: 100%;
overflow-y: scroll;
overflow-x: clip;
max-height: 650px;
padding-right: 20px;
padding-bottom: 1px;
box-sizing: content-box;
}
.main_content {
position: relative;
}
.mid_container {
display: flex;
flex-direction: column;
width: 134px;
/* margin-left: 58px; */
margin-right: 17px;
/* height: min-content; */
position: relative;
top: 33px;
}
.mid_container .block_mid {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.5rem;
box-shadow: inset 0 0 0 1px var(--inv-slot-border);
background: var(--bg-block);
color: var(--color-txt);
font-size: 12px;
font-weight: 600;
}
.use {
background: var(--accent) !important;
color: white !important;
}
.buttons-container {
display: flex;
gap: 5px;
margin-bottom: 48px;
}
.buttons-container button {
padding: 14px 10px;
}
.buttons-container button:hover {
background: var(--accent);
}
.vip_btn, .skins_btn {
min-width: 100px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 6px;
background: var(--white-1);
box-shadow: inset 0 0 0 1px var(--white-1);
color: white;
font-size: 12px;
font-weight: 600;
cursor: pointer;
letter-spacing: 2px;
gap: 10px;
}
.battlepass_btn {
min-width: 120px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 6px;
background: var(--white-1);
box-shadow: inset 0 0 0 1px var(--white-1);
color: white;
font-size: 12px;
font-weight: 600;
cursor: pointer;
letter-spacing: 2px;
gap: 10px;
}
.leaderboard_btn {
min-width: 131px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 6px;
background: var(--white-1);
box-shadow: inset 0 0 0 1px var(--white-1);
color: white;
font-size: 12px;
font-weight: 600;
cursor: pointer;
letter-spacing: 2px;
gap: 10px;
}
.mid_container .min_bottom {
display: grid;
gap: 10px;
width: 100%;
height: min-content;
}
.mid_container > input {
width: 8.125rem;
margin-bottom: 26px;
color: var(--color-white) !important;
}
.mid_container > input::placeholder {
color: var(--color-txt);
}
.main_content .trash_box {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 540px;
height: 82px;
border-radius: 6px;
background: var(--bg-block);
box-shadow: inset 0 0 0 1px var(--inv-slot-border);
/* mix-blend-mode: screen; */
}
.main_content .trash_box .b_top {
width: 100%;
height: 3px;
border-radius: 0.125rem;
/* background: var(--white-1); */
margin-bottom: 1.38rem;
}
.main_content .trash_box span {
font-size: 15px;
color: var(--text-3);
text-align: center;
font-weight: 400;
}
.detalhes_box {
width: auto;
max-width: 300px;
min-width: fit-content;
min-height: 2rem;
border-radius: 0.5rem;
box-shadow: inset 0 0 0 1px var(--white-2);
background: var(--bg-6);
padding: .6rem;
z-index: 500;
/* white-space: nowrap; */
}
.detalhes_box .top_desc {
display: flex;
align-items: center;
justify-content: space-between;
gap: .25rem;
width: 100%;
}
.detalhes_box .top_desc span {
color: var(--color-white);
font-size: 12px;
font-weight: 700;
}
.detalhes_box .max {
color: var(--success);
font-weight: 500;
}
.detalhes_box .sl {
color: var(--text-dim);
font-weight: 500;
}
.detalhes_box .bottom_desc {
display: flex;
/* grid-template-columns: 1fr min-content 1fr; */
/* row-gap: .25rem; */
/* column-gap: .5rem; */
align-items: center;
gap: 5px;
white-space: nowrap;
flex-wrap: wrap;
width: 100%;
}
.detalhes_box .bottom_desc span {
display: flex;
align-items: center;
white-space: nowrap;
gap: .25rem;
font-size: 10px;
font-weight: 400;
color: var(--white);
}
.bottom_desc span span {
color: var(--white) !important;
}
.detalhes_box .description_box {
display: none;
width: 100%;
margin-top: 12px;
margin-bottom: 10px;
font-size: 11px;
color: var(--white-7);
font-weight: 400;
}
.item-rarity-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.item-rarity-icon-1, .item-rarity-icon-2 {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
}
.detalhes_box .bottom_desc > span:nth-child(even) {
text-align: end;
}
#tooltip {
position: absolute;
}
.populated.is-dragging-away {
background-image: none !important;
}
.populated.is-dragging-away.is-bag-dragging {
background-image: url("nui://villa_ui/images/bag.webp") !important;
background-size: 50% 50% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.populated.is-dragging-away > * {
visibility: hidden !important;
}
.ui-draggable-dragging.no-pseudo {
z-index: 10000;
pointer-events: none;
}
.no-pseudo::before,
.no-pseudo::after {
content: none !important;
display: none !important;
}
#aux_box {
position: absolute;
width: 100%;
height: 25rem;
background-color: transparent;
z-index: 500;
}
green {
color: var(--txt-green);
font-weight: 700;
}
gold {
color: var(--txt-gold);
font-weight: 700;
}
gray {
color: var(--txt-gray);
font-weight: 700;
}
blue {
color: var(--txt-blue);
font-weight: 700;
}
pink {
color: var(--txt-pink);
font-weight: 700;
}
epic {
color: var(--warning);
font-weight: 700;
}
rare {
color: #A600FF;
font-weight: 700;
}
legendary {
color: #FF0040;
font-weight: 700;
}
purple {
color: var(--epic);
font-weight: 700;
}
yellow {
color: var(--txt-gold);
font-weight: 700;
}
red {
color: var(--txt-details);
font-weight: 700;
}
#Shortcuts {
height: 100%;
position: relative;
display: none;
}
.caixa_shortcut {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
width: 80px;
height: 80px;
border-radius: 0.5rem;
box-shadow: none;
outline: 1px solid var(--inv-slot-border);
background: rgba(var(--black-rgb), 0.3);
/* padding: 3px 5px 5px 5px; */
background-repeat: no-repeat;
background-position: center;
background-size: 80%;
position: relative;
}
.caixa_shortcut img {
width: 80%;
height: 80%;
}
@layer container_atalhos {
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-100%) translateY(-50%);
}
100% {
opacity: 1;
transform: translateX(0) translateY(-50%);
}
}
@keyframes slideOutLeft {
from {
opacity: 1;
transform: translateX(0) translateY(-50%);
}
to {
opacity: 0;
transform: translateX(-100%) translateY(-50%);
}
}
.cont_atalhos_shortcuts {
display: flex;
position: absolute;
top: 50%;
left: 40px;
transform: translate(0, -50%);
max-height: 26.625rem;
width: min-content;
gap: 1.25rem;
margin-right: 3.85rem;
animation: 0.1s ease-out forwards;
}
.slide-in {
animation-name: slideInLeft;
}
.slide-out {
animation-name: slideOutLeft;
}
.cont_atalhos_shortcuts .titulo {
display: grid;
grid-template-rows: 1fr 1.25fr 1fr;
align-items: center;
justify-content: center;
justify-items: center;
width: min-content;
max-width: 15px;
}
.cont_atalhos_shortcuts .titulo > h1 {
font-size: 0.875rem;
color: var(--color-white);
transform: rotate(-90deg);
width: min-content;
height: min-content;
white-space: nowrap;
}
.cont_atalhos_shortcuts .titulo > div {
font-size: 0.875rem;
color: var(--color-white);
transform: rotate(-90deg);
width: max-content;
}
.cont_atalhos_shortcuts .titulo > span{
border-radius: 0.125rem;
background: var(--bg-details);
width: 0.1875rem;
height: 100%;
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: min-content;
position: relative;
gap: .37rem;
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut .caixa_shortcut {
position: relative;
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut .caixa_shortcut::after {
content: '';
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: absolute;
right: -16px;
top: 50%;
transform: translateY(calc(-50% + 2px));
width: 30px;
height: 30px;
border-radius: 6px;
background: var(--bg-details);
font-weight: 400;
font-size: 14px;
z-index: 10;
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut .caixa_shortcut:nth-child(1)::after {
content: '1';
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut .caixa_shortcut:nth-child(2)::after {
content: '2';
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut .caixa_shortcut:nth-child(3)::after {
content: '3';
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut .caixa_shortcut:nth-child(4)::after {
content: '4';
}
.cont_atalhos_shortcuts .bloco_caixas_shortcut .caixa_shortcut:nth-child(5)::after {
content: '5';
}
}
#Choices {
height: 100%;
position: relative;
display: none;
background: var(--black-8);
}
.caixa_choices {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 3rem;
width: 5rem;
height: 5rem;
border-radius: 0.5rem;
box-shadow: inset 0 0 0 1px var(--white-7);
background: var(--black-5);
background-repeat: no-repeat;
background-position: center;
background-size: 80%;
transition: background 0.15s ease-in-out;
}
.caixa_choices:hover {
background: var(--black-8);
box-shadow: inset 0 0 0 2px var(--white-7);
}
.caixa_choices img {
width: 70%;
height: 70%;
margin-bottom: 0.5rem;
position: absolute
}
.cont_choice_shortcuts {
display: flex;
flex-direction: column;
position: absolute;
top: 65%;
left: 50%;
transform: translateX(-50%);
width: 100%;
align-items: center;
gap: 1rem;
}
.cont_choice_shortcuts .titulo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.cont_choice_shortcuts .titulo > h1 {
transform: none;
font-size: 1rem;
color: var(--color-white);
white-space: nowrap;
}
.cont_choice_shortcuts .titulo > div {
font-size: 0.875rem;
color: var(--color-white);
transform: rotate(-90deg);
width: max-content;
}
.cont_choice_shortcuts .titulo > span{
width: 85%;
height: 2px;
background: var(--bg-details);
border-radius: 2px;
}
.cont_choice_shortcuts .bloco_caixas_choices {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.cont_choice_shortcuts .bloco_caixas_choices .caixa_choices {
position: relative;
}
.cont_choice_shortcuts .bloco_caixas_choices .caixa_choices .shortcut-name {
font-size: 10px !important;
text-align: center;
position: absolute;
bottom: 0.25em;
}
.locked-slot {
position: relative;
pointer-events: none;
opacity: 0.4;
}
.locked-overlay {
position: absolute;
width: 461px;
height: 60px;
top: 576px; right: 50%;
transform: translate(calc(50% - 1.5px), -50%);
background: var(--white-1);
box-shadow: inset 0 0 0 1px var(--white-1);
color: var(--white-5);
display: flex;
align-items: center;
/* justify-content: center; */
gap: 20px;
font-size: 14px;
z-index: -1;
border-radius: 6px;
font-weight: 600;
box-sizing: border-box;
}
.locked-overlay span{
color: var(--white);
}
.locked-overlay-icon {
width: 36.07px;
height: 36.07px;
border-radius: 6px;
background: var(--bg-10);
display: flex;
align-items: center;
justify-content: center;
margin-left: 12px;
box-sizing: border-box;
/* margin-top: -9px; */
}
@media (max-width: 1400px) {
#tooltip {
transform: scale(0.7);
transform-origin: bottom left;
}
}