1387 lines
28 KiB
CSS
1387 lines
28 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
|
|
|
.bg-button { background: var(--color-primary)!important; box-shadow: none!important; }
|
|
.text-check { color: rgba(255, 255, 255, 0.8)!important; }
|
|
.text-checkbox { color: #0fffd5!important; }
|
|
.q-checkbox__svg { color: #000!important; }
|
|
div#q-loading-bar { display: none!important; }
|
|
.q-card { background: var(--color-primary)!important; }
|
|
p { margin: 0 !important; }
|
|
.q-btn { align-items: center!important; box-shadow: none!important;}
|
|
.text-h6 { color: #fff; }
|
|
.q-card__section.q-card__section--vert.q-pt-none { color: #fff; }
|
|
|
|
@media screen and (min-width: 2540px) {
|
|
#itembox-label {
|
|
min-height: 1.8vh;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: 0px!important;
|
|
margin-left: 0px!important;
|
|
}
|
|
|
|
:root {
|
|
--color-primary: #23242e;
|
|
--color-secondary: #383942;
|
|
--color-accent: rgb(65, 199, 165);
|
|
}
|
|
|
|
.fas.fa-lock {
|
|
font-size: 22px;
|
|
top: -82px;
|
|
right: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.brand-logo {
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding-top: 3px;
|
|
padding-bottom: 10px;
|
|
width: 45%;
|
|
}
|
|
|
|
::placeholder {
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
text-transform: normal;
|
|
font-size: 1.5vh;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
/* rgb() */
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
background: var(--color-secondary);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #191b1f;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
#progressbar {
|
|
width: 112%;
|
|
margin-left: 65.8%;
|
|
margin-top: 1.8%;
|
|
border-radius: 15px;
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
#progressbar-other {
|
|
width: 77.6%;
|
|
margin-left: 2.2%;
|
|
margin-top: 1.8%;
|
|
border-radius: 15px;
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
.pro {
|
|
background: linear-gradient(to right, var(--color-accent), var(--color-accent) 500px);
|
|
height: 6px;
|
|
max-width: 100%;
|
|
border-radius: 15px;
|
|
transition: width 1s, background-color 1s;
|
|
}
|
|
|
|
.pro1 {
|
|
background: linear-gradient(to right, var(--color-accent), var(--color-accent) 500px);
|
|
height: 6px;
|
|
max-width: 100%;
|
|
border-radius: 15px;
|
|
transition: width 1s, background-color 1s;
|
|
}
|
|
|
|
.weight-img {
|
|
margin-top: 0.6%;
|
|
width: 4%;
|
|
right: -14%;
|
|
position: absolute;
|
|
}
|
|
|
|
.weight-img-other {
|
|
margin-top: 0.6%;
|
|
width:4%;
|
|
right: -12%;
|
|
position:absolute;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#qbcore-inventory {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0vw;
|
|
display: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.inv-background {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.inv-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.player-inventory-bg {
|
|
position: absolute;
|
|
float: left;
|
|
top: 15%;
|
|
left: 21.2%;
|
|
width: 45.7%;
|
|
max-width: 35.7%;
|
|
height: 64.17%;
|
|
max-height: 64.17%;
|
|
background: var(--color-primary);
|
|
border-bottom-left-radius: 10px;
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.player-inventory {
|
|
position: absolute;
|
|
top: 8%;
|
|
left: 2.3%;
|
|
width: 100.22%;
|
|
max-width: 102.22%;
|
|
height: 100%;
|
|
max-height: 132%;
|
|
float: right;
|
|
z-index: 100;
|
|
}
|
|
|
|
.player-inventory-first {
|
|
position: absolute;
|
|
margin-top: -0.6rem;
|
|
margin-left: -19%;
|
|
width: 19%;
|
|
height: 78.2%;
|
|
background-color: var(--color-primary);
|
|
padding: 10px;
|
|
border-bottom-left-radius: 10px;
|
|
border-top-left-radius: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.other-inventory-bg {
|
|
position: absolute;
|
|
top: 15%;
|
|
float: right;
|
|
right: 18.2%;
|
|
margin: 0 auto;
|
|
width: 25.26%;
|
|
max-width: 25.26%;
|
|
height: 64.17%;
|
|
max-height: 64.17%;
|
|
background: var(--color-primary);
|
|
border-bottom-right-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.other-inventory {
|
|
position: absolute;
|
|
top: 8%;
|
|
right: 1.5%;
|
|
width: 89%;
|
|
max-width: 102.22%;
|
|
height: 90%;
|
|
max-height: 132%;
|
|
float: right;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
z-index: 100;
|
|
}
|
|
|
|
.ply-hotbar-inventory {
|
|
position: absolute;
|
|
bottom: 10%;
|
|
left: 35.5%;
|
|
z-index: 105;
|
|
}
|
|
|
|
.player-inventory > .item-slot > .item-slot-key > p {
|
|
position: absolute;
|
|
font-weight: 400;
|
|
color: #20202062;
|
|
padding-top: 4vh;
|
|
padding-bottom: 0px;
|
|
padding-left: 2.35vh;
|
|
text-align: center;
|
|
font-size: 7vh;
|
|
line-height: 1.8vh;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
.player-inventory-first > .item-slot > .item-slot-key > p {
|
|
position: absolute;
|
|
font-weight: 400;
|
|
color: #20202062;
|
|
padding-top: 4vh;
|
|
padding-bottom: 0px;
|
|
padding-left: 2.35vh;
|
|
text-align: center;
|
|
font-size: 7vh;
|
|
line-height: 1.8vh;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
.inv-options {
|
|
position: absolute;
|
|
margin: 11.5% auto;
|
|
right: -12.6%;
|
|
height: 4rem;
|
|
width: 4.3rem;
|
|
left: 1vh;
|
|
cursor: pointer; /* Can also be 'none' however, as these are the buttons I feel as the pointer fits better */
|
|
z-index: 200;
|
|
}
|
|
|
|
.inv-help-options {
|
|
background: var(--color-primary);
|
|
height: 2.8rem;
|
|
width: 2.8rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
margin-left: 18%;
|
|
margin-top: 40%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.inv-help-options button {
|
|
background-color: transparent;
|
|
width: 2.8rem;
|
|
height: 2.8rem;
|
|
color: white;
|
|
border: none;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
font-size: large;
|
|
}
|
|
|
|
.btn {
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
.combine-option-container {
|
|
display: none;
|
|
position: relative;
|
|
right: 0px;
|
|
width: auto;
|
|
left: 0vh;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.item-slot {
|
|
position: relative;
|
|
width: 98px;
|
|
height: 98px;
|
|
float: left;
|
|
border: 2px solid #41414b;
|
|
background-color: #33343d !important;
|
|
margin: 3px;
|
|
transition: opacity 0.2s ease 0s;
|
|
border-radius: 9px;
|
|
opacity: 90%;
|
|
}
|
|
|
|
.item-slot:hover {
|
|
background-color: #292932 !important;
|
|
opacity: 90%;
|
|
}
|
|
|
|
.inv-option-item {
|
|
margin-top: 10%;
|
|
}
|
|
|
|
.btn-inv {
|
|
width: 100%!important;
|
|
max-width: 100%!important;
|
|
padding: 10%!important;
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
#item-amount {
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 1.5vh;
|
|
font-weight: 300;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
outline: none;
|
|
}
|
|
|
|
.ammo-info-block {
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
width: 22vh;
|
|
height: 11vh;
|
|
background-color: rgba(235, 235, 235, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.01);
|
|
top: 2vh;
|
|
}
|
|
.ammo-info-header {
|
|
/* background-color: rgba(5, 5, 5, 0.5); */
|
|
width: 100%;
|
|
color: white;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
background-color: rgba(0, 0, 0, 0.192);
|
|
font-size: 1.vh;
|
|
padding: .4vh;
|
|
text-align: center;
|
|
}
|
|
.ammo-info {
|
|
position: relative;
|
|
color: white;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
font-weight: 200;
|
|
font-size: 1.vh;
|
|
margin-left: .8vh;
|
|
margin-top: .4vh;
|
|
margin-bottom: .25vh;
|
|
top: .6vh;
|
|
}
|
|
.ammo-info span {
|
|
margin-right: 1vh;
|
|
float: right;
|
|
}
|
|
|
|
.inv-option-item > p {
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
text-transform: normal;
|
|
font-size: 1.5vh;
|
|
font-weight: 300;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
.inv-option-item > label {
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
text-transform: normal;
|
|
font-size: 1.5vh;
|
|
font-weight: 300;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
margin-right: 10px;
|
|
margin-bottom: auto;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.inv-option-item {
|
|
margin-top: 10%;
|
|
height: 3rem;
|
|
width: 4.5rem;
|
|
margin-left: 0%;
|
|
background: var(--color-secondary)!important;
|
|
border: none;
|
|
color: white;
|
|
transition: background-color .1s linear;
|
|
border-radius: 5px!important;
|
|
opacity: 70%;
|
|
}
|
|
.inv-option-hand {
|
|
margin-top: 20%;
|
|
/* width: 80%; */
|
|
height: 100px;
|
|
margin-left: 10%;
|
|
transition: background-color .1s linear;
|
|
}
|
|
|
|
.inv-option-item:hover {
|
|
background-color: #5c5c6c;
|
|
}
|
|
|
|
.btn-combine {
|
|
position: relative;
|
|
margin-top: 6px;
|
|
height: 3rem;
|
|
width: 4.5rem;
|
|
top: 0px;
|
|
left: 0px;
|
|
background: var(--color-secondary)!important;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
font-size: 1.1vh;
|
|
font-weight: 900;
|
|
font-family: Roboto, sans-serif !important;
|
|
border-radius: 0px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-image: initial;
|
|
transition: background-color 0.1s linear 0s;
|
|
border-radius: 5px!important;
|
|
opacity: 70%;
|
|
}
|
|
|
|
.btn-combine > p {
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 1.5vh;
|
|
font-weight: 300;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
outline: none;
|
|
|
|
}
|
|
|
|
.item-slot-amount {
|
|
position: absolute;
|
|
top: 0.3%;
|
|
left: 0.15vw;
|
|
background-color: #41414b;
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.item-slot-amount > p {
|
|
color: #ffffff;
|
|
text-align: right;
|
|
font-size: 1.25vh;
|
|
font-weight: 400;
|
|
cursor: none;
|
|
}
|
|
|
|
.item-slot-name {
|
|
position: absolute;
|
|
top: 0.3%;
|
|
right: 0.15vw;
|
|
background-color: #41414b;
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.item-slot-name > p {
|
|
color: #ffffff;
|
|
text-align: right;
|
|
font-size: 1.25vh;
|
|
font-weight: 400;
|
|
cursor: none;
|
|
}
|
|
|
|
.item-slot-label {
|
|
position: absolute;
|
|
bottom: 0vh;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.item-slot-label > p {
|
|
font-weight: 400;
|
|
padding: 2.5px;
|
|
padding-left: 5px;
|
|
color: white;
|
|
font-size: 1.15vh;
|
|
text-align: left;
|
|
letter-spacing: 0px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
cursor: none;
|
|
}
|
|
|
|
.item-slot-quality {
|
|
position: absolute;
|
|
bottom: 0.2vh;
|
|
width: 100%;
|
|
height: 0.4vh;
|
|
border-radius: 25px;
|
|
background-color: rgba(32, 6, 6, 0.15);
|
|
border-bottom-left-radius: 9px;
|
|
border-bottom-right-radius: 9px;
|
|
}
|
|
|
|
.item-slot-quality-bar {
|
|
position: absolute;
|
|
width: 0%;
|
|
height: 150%;
|
|
background-color: var(--color-accent);
|
|
z-index: 1;
|
|
border-bottom-left-radius: 9px;
|
|
border-bottom-right-radius: 9px;
|
|
}
|
|
|
|
.item-slot-quality p {
|
|
color: transparent;
|
|
}
|
|
|
|
.item-slot-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
padding: 0.5vw;
|
|
}
|
|
|
|
.item-slot-img img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
margin-top: 9%;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 92%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.item-slot-img-itembox img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
margin-top: 2vh;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 75%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.item-slot-img2 img {
|
|
display:block;
|
|
}
|
|
|
|
.ui-draggable-dragging {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.player-inv-info {
|
|
position: absolute;
|
|
left: 3.3%;
|
|
top: 15.6%;
|
|
width: 28.8%;
|
|
z-index: 1000;
|
|
cursor: none;
|
|
}
|
|
|
|
#player-inv-label {
|
|
position: relative;
|
|
color: white;
|
|
font-size: 20px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01vh;
|
|
right: -66%;
|
|
float: left;
|
|
text-transform: normal;
|
|
cursor: none;
|
|
}
|
|
|
|
#player-inv-weight {
|
|
position: relative;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
letter-spacing: 0.1vh;
|
|
bottom: 30px;
|
|
right: -77%;
|
|
float: right;
|
|
}
|
|
|
|
#other-inv-label {
|
|
position: relative;
|
|
color: white;
|
|
font-size: 20px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01vh;
|
|
left: 3%;
|
|
float: left;
|
|
text-transform: normal;
|
|
cursor: none;
|
|
}
|
|
|
|
|
|
#other-inv-weight {
|
|
position: relative;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
letter-spacing: 0.1vh;
|
|
bottom: 30px;
|
|
right: 20.5%;
|
|
float: right;
|
|
cursor: none;
|
|
}
|
|
|
|
.player-inv-weight {
|
|
position: absolute;
|
|
left: 38%;
|
|
top: 10%;
|
|
}
|
|
|
|
.player-inv-weight > p {
|
|
color: white;
|
|
font-size: 12px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
.other-inv-info {
|
|
position: absolute;
|
|
left: 58.3%;
|
|
top: 15.6%;
|
|
width: 28.8%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.ply-iteminfo-container {
|
|
background: var(--color-primary);
|
|
opacity: 50%;
|
|
border-radius: 3px;
|
|
color: rgba(220, 220, 220, 1);
|
|
border: 1px solid rgba(255, 255, 255, 0.02);
|
|
font-size: 1.35vh;
|
|
font-weight: 0;
|
|
left: 41%;
|
|
max-height: 25%;
|
|
min-height: 50px;
|
|
overflow: hidden;
|
|
padding: 1%;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
text-decoration: none;
|
|
top: 50%;
|
|
transition: opacity 0.6s ease;
|
|
width: 13%;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.item-info-title {
|
|
text-transform: normal;
|
|
font-weight: 900;
|
|
font-family: sans-serif;
|
|
font-size: 2.4vh;
|
|
letter-spacing: 0.3px;
|
|
line-height: 1;
|
|
color: white;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
padding-top: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.item-info-line {
|
|
position: absolute;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
width: 85%;
|
|
background-color: #6d6d6d96;
|
|
height: 0.13vh;
|
|
}
|
|
|
|
.item-info-description {
|
|
text-transform: normal;
|
|
font-size: 1.4vh;
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
letter-spacing: 0.3px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
color: white;
|
|
padding-left: 5px;
|
|
padding-top: .5vh;
|
|
}
|
|
|
|
.itemboxes-container {
|
|
display: flex;
|
|
gap: 1rem;
|
|
width: 100vw;
|
|
position: absolute;
|
|
bottom: 18%;
|
|
overflow: hidden;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.template {
|
|
display: none !important;
|
|
}
|
|
|
|
.itembox-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 10vh;
|
|
height: 11vh;
|
|
border: 2px solid #41414b;
|
|
background-color: #33343d !important;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
#itembox-action {
|
|
position: absolute;
|
|
color: white;
|
|
border-top-left-radius: 1px;
|
|
padding: 4px;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#itembox-action > p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#itembox-label {
|
|
height: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.itembox-image {
|
|
max-width: 10%;
|
|
max-height: 100%;
|
|
padding: 0.10vw;
|
|
}
|
|
|
|
#itembox-label > p {
|
|
padding: 0 15px;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
top: -10px;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.requiredItem-container {
|
|
display: none;
|
|
position: absolute;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
}
|
|
|
|
.requiredItem-box {
|
|
position: relative;
|
|
top: 79%;
|
|
left: 42%;
|
|
width: 10vh;
|
|
height: 11vh;
|
|
float: left;
|
|
margin-left: 20px;
|
|
background: rgba(54, 54, 54, 0.233);
|
|
}
|
|
|
|
#requiredItem-action {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: white;
|
|
padding: 3px;
|
|
font-size: 14px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
#requiredItem-label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 0.3vh;
|
|
}
|
|
|
|
#requiredItem-label > p {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
top: -25px;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item-slot-img-itembox-test img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
margin-top: 1.3vh;
|
|
width: 80px;
|
|
height: 80px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.z-hotbar-inventory {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 1%;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
width: fit-content;
|
|
z-index: 105;
|
|
padding: 4px;
|
|
background-color: var(--color-primary);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.z-hotbar-inventory > .z-hotbar-item-slot > .z-hotbar-item-slot-key > p {
|
|
position: absolute;
|
|
font-weight: 400;
|
|
color: #20202062;
|
|
padding-top: 42%;
|
|
padding-bottom: 0px;
|
|
padding-left: 29%;
|
|
text-align: center;
|
|
font-size: 4rem;
|
|
line-height: 1.8vh;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
z-index: -1;
|
|
}
|
|
|
|
.z-hotbar-item-slot {
|
|
margin-left: 2px;
|
|
margin-bottom: 2px;
|
|
position: relative;
|
|
width: 6.15rem;
|
|
height: 6.15rem;
|
|
float: left;
|
|
border: 2px solid #41414b;
|
|
background-color: #33343d !important;
|
|
margin: 3px;
|
|
transition: opacity 0.2s ease 0s;
|
|
border-radius: 9px;
|
|
opacity: 90%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.z-hotbar-item-slot-amount {
|
|
position: absolute;
|
|
top: 0.5%;
|
|
left: 0.15vw;
|
|
background-color: #41414b;
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.z-hotbar-item-slot-amount > p {
|
|
color: #ffffff;
|
|
text-align: right;
|
|
font-size: 1.25vh;
|
|
font-weight: 400;
|
|
cursor: none;
|
|
}
|
|
|
|
.z-hotbar-item-slot-amount-name {
|
|
position: absolute;
|
|
top: 0.5%;
|
|
right: 0.15vw;
|
|
background-color: #41414b;
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.z-hotbar-item-slot-amount-name > p {
|
|
color: #ffffff;
|
|
text-align: right;
|
|
font-size: 1.25vh;
|
|
font-weight: 400;
|
|
cursor: none;
|
|
}
|
|
|
|
.z-hotbar-item-slot-label {
|
|
position: absolute;
|
|
bottom: 0vh;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.z-hotbar-item-slot-label > p {
|
|
font-weight: 400;
|
|
padding: 2.5px;
|
|
padding-left: 5px;
|
|
color: white;
|
|
font-size: 1.15vh;
|
|
text-align: left;
|
|
letter-spacing: 0px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
cursor: none;
|
|
}
|
|
|
|
.z-hotbar-item-slot-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
padding: 0.8vw;
|
|
}
|
|
|
|
.z-hotbar-item-slot-img img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
margin-top: -12%;
|
|
left: -18%;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 120%;
|
|
max-height: 120%;
|
|
}
|
|
|
|
.ammo-container {
|
|
position: absolute;
|
|
background-color: rgba(20, 18, 32, 0.2);
|
|
width: 3.25%;
|
|
height: 44.16%;
|
|
top: 26%;
|
|
left: 6%;
|
|
}
|
|
|
|
.ammo-container-header {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 5vh;
|
|
background-color: rgba(120, 10, 20, 0.5);
|
|
text-align: center;
|
|
color: rgba(216, 216, 216, 0.897);
|
|
}
|
|
|
|
.ammo-container-header > i {
|
|
line-height: 5vh;
|
|
font-size: 1.8vh;
|
|
}
|
|
|
|
.ammo-box {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 6vh;
|
|
top: 5vh;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
margin-bottom: .5vh;
|
|
margin-top: .5vh;
|
|
}
|
|
|
|
.ammo-box > img {
|
|
position: absolute;
|
|
top: .15vh;
|
|
left: .2vh;
|
|
width: 5.25vh;
|
|
opacity: .25;
|
|
}
|
|
|
|
.ammo-box > span {
|
|
position: absolute;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
font-size: .93vh;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: .3vh;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
.ammo-box-amount {
|
|
position: absolute;
|
|
width: 100%;
|
|
background-color: rgba(36, 36, 36, 0.4);
|
|
bottom: 0;
|
|
max-height: 100%;
|
|
}
|
|
|
|
#pistol_ammo > .ammo-box-amount {
|
|
height: 0%;
|
|
}
|
|
|
|
#smg_ammo > .ammo-box-amount {
|
|
height: 0%;
|
|
}
|
|
|
|
#shotgun_ammo > .ammo-box-amount {
|
|
height: 0%;
|
|
}
|
|
|
|
#rifle_ammo > .ammo-box-amount {
|
|
height: 0%;
|
|
}
|
|
|
|
/* Weapon Attachments */
|
|
|
|
.weapon-attachments-container {
|
|
position: absolute;
|
|
left: -100vw;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.weapon-attachments-container-title {
|
|
position: absolute;
|
|
margin: 5vh;
|
|
font-size: 3vh;
|
|
color: rgb(255, 255, 255);
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
.weapon-attachments-container-description {
|
|
position: absolute;
|
|
margin: 5vh;
|
|
top: 5vh;
|
|
font-size: 1.7vh;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
.weapon-attachments-container-details {
|
|
position: absolute;
|
|
margin: 5vh;
|
|
top: 9vh;
|
|
font-size: 1.4vh;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: 'Roboto', sans-serif !important;
|
|
}
|
|
|
|
.weapon-attachments-container-detail-durability {
|
|
height: 1.5vh;
|
|
width: 10vh;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.weapon-attachments-container-detail-durability-total {
|
|
height: 100%;
|
|
width: 50%;
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
.weapon-attachments-container-image {
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
top: 32%;
|
|
width: 30%;
|
|
}
|
|
|
|
.weapon-attachments {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: 5vh;
|
|
width: 50vh;
|
|
height: 12.5vh;
|
|
}
|
|
|
|
.weapon-attachments-title {
|
|
position: absolute;
|
|
bottom: 14vh;
|
|
left: 0;
|
|
margin: 5vh;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: 'Roboto', sans-serif !important;
|
|
font-size: 1.4vh
|
|
}
|
|
|
|
.weapon-attachment {
|
|
position: relative;
|
|
height: 12.5vh;
|
|
width: 10.5vh;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgb(75, 75, 75);
|
|
margin-right: 1vh;
|
|
float: left;
|
|
transition: .05s linear;
|
|
z-index: 9888;
|
|
}
|
|
|
|
.weapon-attachment:hover {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgb(29, 29, 29);
|
|
transition: .05s linear;
|
|
}
|
|
|
|
.weapon-attachment-label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: rgba(38, 41, 60, 0.3);
|
|
padding: 2.1%;
|
|
}
|
|
|
|
.weapon-attachment-label > p {
|
|
color: #ffffff;
|
|
font-size: 1.1vh;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
line-height: 1.9vh;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.weapon-attachment-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
padding: 0.5vw;
|
|
}
|
|
|
|
.weapon-attachment-img > img {
|
|
display:block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
margin-top: 10%;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.weapon-attachments-remove {
|
|
position: absolute;
|
|
width: 6.5vh;
|
|
height: 6.5vh;
|
|
background-color: rgb(15, 15, 15);
|
|
border-radius: 1px;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 20vh;
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 2vh;
|
|
transition: background-color .05s linear;
|
|
z-index: 9888;
|
|
}
|
|
|
|
.weapon-attachments-remove:hover {
|
|
background-color: rgb(18, 18, 18);
|
|
}
|
|
|
|
.weapon-attachments-remove > i {
|
|
line-height: 6.5vh;
|
|
}
|
|
|
|
.weapon-attachments-remove-hover {
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
.weapon-dragging-class {
|
|
animation: ShakeEffect .75s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes ShakeEffect {
|
|
0% { transform: translate(1px, 1px) rotate(0deg); }
|
|
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
|
20% { transform: translate(-3px, 0px) rotate(1deg); }
|
|
30% { transform: translate(3px, 2px) rotate(0deg); }
|
|
40% { transform: translate(1px, -1px) rotate(1deg); }
|
|
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
|
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
|
70% { transform: translate(3px, 1px) rotate(-1deg); }
|
|
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
|
90% { transform: translate(1px, 2px) rotate(0deg); }
|
|
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
|
}
|
|
|
|
.weapon-attachments-back {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 10vh;
|
|
height: 6vh;
|
|
margin: 5vh;
|
|
background-color: rgb(15, 15, 15);
|
|
border-radius: 1px;
|
|
text-align: center;
|
|
line-height: 6vh;
|
|
color: white;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
transition: .05s linear;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.weapon-attachments-back:hover {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
.color-picker-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (width: 2560px) and (height: 1440px) {
|
|
.item-slot {
|
|
position: relative;
|
|
width: 133px;
|
|
height: 133px;
|
|
float: left;
|
|
border: 2px solid #41414b;
|
|
background-color: #33343d !important;
|
|
margin: 3px;
|
|
transition: opacity 0.2s ease 0s;
|
|
border-radius: 9px;
|
|
opacity: 90%;
|
|
}
|
|
}
|
|
|
|
@media (width: 3360px) and (height: 1440px) {
|
|
.item-slot {
|
|
position: relative;
|
|
width: 133px;
|
|
height: 133px;
|
|
float: left;
|
|
border: 2px solid #41414b;
|
|
background-color: #33343d !important;
|
|
margin: 3px;
|
|
transition: opacity 0.2s ease 0s;
|
|
border-radius: 9px;
|
|
opacity: 90%;
|
|
}
|
|
.player-inventory-bg {
|
|
position: absolute;
|
|
float: left;
|
|
top: 15%;
|
|
left: 29.2%;
|
|
width: 26%;
|
|
max-width: 25.7%;
|
|
height: 64.17%;
|
|
max-height: 64.17%;
|
|
background: var(--color-primary);
|
|
border-bottom-left-radius: 10px;
|
|
border-top-left-radius: 10px;
|
|
}
|
|
.other-inventory-bg {
|
|
position: absolute;
|
|
top: 15%;
|
|
float: right;
|
|
right: 26%;
|
|
margin: 0 auto;
|
|
width: 19.26%;
|
|
max-width: 19.26%;
|
|
height: 64.17%;
|
|
max-height: 64.17%;
|
|
background: var(--color-primary);
|
|
border-bottom-right-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
#progressbar {
|
|
width: 85%;
|
|
margin-left: 92.8%;
|
|
margin-top: 1.8%;
|
|
border-radius: 15px;
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
#progressbar-other {
|
|
width: 57.2%;
|
|
margin-left: -6.2%;
|
|
margin-top: 1.8%;
|
|
border-radius: 15px;
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
.inv-options {
|
|
position: absolute;
|
|
margin: 8.7% auto;
|
|
right: -10.6%;
|
|
height: 4rem;
|
|
width: 4.3rem;
|
|
left: 1vh;
|
|
cursor: pointer; /* Can also be 'none' however, as these are the buttons I feel as the pointer fits better */
|
|
z-index: 200;
|
|
}
|
|
|
|
.inv-option-item {
|
|
margin-top: 10%;
|
|
height: 3rem;
|
|
width: 4rem;
|
|
margin-left: 6%;
|
|
background: var(--color-secondary)!important;
|
|
border: none;
|
|
color: white;
|
|
transition: background-color .1s linear;
|
|
border-radius: 5px!important;
|
|
opacity: 70%;
|
|
}
|
|
|
|
#player-inv-label {
|
|
position: relative;
|
|
color: white;
|
|
font-size: 20px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01vh;
|
|
right: -93%;
|
|
float: left;
|
|
text-transform: normal;
|
|
cursor: none;
|
|
}
|
|
|
|
#other-inv-label {
|
|
position: relative;
|
|
color: white;
|
|
font-size: 20px;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01vh;
|
|
left: -6%;
|
|
float: left;
|
|
text-transform: normal;
|
|
cursor: none;
|
|
}
|
|
|
|
#other-inv-weight {
|
|
position: relative;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
font-family: 'Roboto', sans-serif !important;
|
|
letter-spacing: 0.1vh;
|
|
bottom: 30px;
|
|
right: 49.5%;
|
|
float: right;
|
|
cursor: none;
|
|
}
|
|
|
|
}
|
|
|
|
.craft-item-slot {
|
|
width: 30%;
|
|
height: 30%;
|
|
background: #0fffd5;
|
|
}
|