@import url('https://fonts.googleapis.com/css?family=Orbitron'); .bg-button { background: #646475!important; } .text-check { color: rgba(255, 255, 255, 0.8)!important; } .text-checkbox { color: #c71543!important; } .q-checkbox__svg { color: #000!important; } div#q-loading-bar { display: none!important; } ::-webkit-scrollbar { display: none!important; } .q-card { background: rgb(35, 34, 56)!important; } p { margin: 0 !important; } .q-btn { align-items: center!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 { --main-label-color: 38, 41, 60; } .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: rgb(235, 235, 235); text-align: center; line-height: 48px; text-transform: normal; font-size: 1.5vh; font-family: 'orbitron' !important; } /* rgb() */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: transparent; } #progressbar { width: 122.6%; margin-left: 0%; margin-top: 5.1%; border-radius: 10px; background-color: rgb(25, 25, 25); } #progressbar-other { width: 122.8%; margin-left: 12%; border-radius: 10px; margin-top: 5.1%; background-color: rgb(25, 25, 25); } .pro { background: linear-gradient(to right, #c71543, #9a0b0b 500px); height: 5px; border-radius: 10px; max-width: 100%; transition: width 1s, background-color 1s; } .pro1 { background: linear-gradient(to right, #c71543, #9a0b0b 500px); height: 5px; max-width: 100%; border-radius: 10px; 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; border-radius: 5px; float: left; top: 18%; left: 5%; width: 34.5%; max-width: 38%; height: 69%; max-height: 68%; background: #141414; } .player-inventory { position: absolute; top: 7%; border-radius: 5px; left: 3%; width: 100%; max-width: 100%; height: 90%; max-height: 90%; float: left; overflow-x: hidden; overflow-y: scroll; z-index: 100; } .other-inventory-bg { position: absolute; top: 18%; float: right; right: 5%; margin: 0 auto; width: 34.5%; max-width: 38%; height: 69%; max-height: 68%; background: #141414; border-radius: 5px; } .other-inventory { position: absolute; top: 7%; left: 3%; width: 100%; border-radius: 5px; max-width: 100%; height: 90%; max-height: 90%; 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:rgb(0, 0, 0); padding-top: 4vh; padding-bottom: 0px; padding-left: 2vh; text-align: left; font-size: 7vh; line-height: 1vh; font-family: 'orbitron' !important; opacity: 100%; } /*.inv-options { padding-top: 5px; padding-left: 9px; padding-right: 10px; padding-bottom: 15px; height: 13.8%; border-radius: 4px; margin: 23% auto; background: rgba(11, 11, 11, 0.8); right: 0px; width: 9.0%; left: 3vh; opacity: 100%; cursor: pointer; /* Can also be 'none' however, as these are the buttons I feel as the pointer fits better } */ .inv-options-list{ display: flex; justify-content: flex-end; position: relative; width: 45vh; margin-left: -23%; } .inv-options { position: absolute; margin: 0 auto; right: 0; width: 7.0%; top: 14.25%; left: -80%; cursor: pointer; } .combine-option-container { display: none; position: relative; right: 0px; width: auto; left: 0vh; margin: 0px auto; } .item-slot { position: relative; width: 9.0vh; height: 9.0vh; float: left; background-color: #0b0b0bb1; margin: 2px; transition: opacity 0.2s ease 0s; } .item-slot:hover { background-color: rgba(14, 14, 14, 0.3) !important; } .inv-option-item { margin-top: 10%; } .btn-inv { width: 100%!important; max-width: 100%!important; padding: 10%!important; background-color: rgba(235, 235, 235, 0); } #item-amount { color: rgb(235, 235, 235); text-align: center; font-size: 1.5vh; font-weight: 300; font-family: 'orbitron' !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: 'orbitron' !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: 'orbitron' !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: rgb(235, 235, 235); text-align: center; line-height: 50px; text-transform: normal; font-size: 1.5vh; font-weight: 300; font-family: 'orbitron' !important; } /* .inv-option-item { width: 75%; height: 40px; background-color: #141414; color: white; margin: 0.5%; transition: background-color .1s linear; border-top: 1px solid #0080f8; border-radius: 1vh 1vh 0vh 0vh ; border: 1px solid rgba(225, 0, 255, 0.01); } */ .inv-option-item { width: 75%; height: 39px; background-color: #131313; border: 1px solid rgba(225, 0, 255, 0.01); color: white; margin: 0.6%; transition: background-color .1s linear; border-top: 2px solid #cc1616; border-radius: 1vh 1vh 0 0 ; } .inv-option-hand { margin-top: 25%; /* width: 80%; */ height: 100px; margin-left: 10%; transition: background-color .1s linear; } .inv-option-item:hover { background-color: #1f1f1f; } .btn-combine { position: relative; margin-top: 6px; width: auto; top: 100px; left: 0px; background-color: #0f0f10 !important; text-align: center; line-height: 48px; font-size: 1.2vh; font-weight: 900; font-family: 'orbitron' !important; border-radius: 0px; border-width: 1px; border-style: solid; border-color: rgba(6, 5, 5, 0.01); border-image: initial; transition: background-color 0.1s linear 0s; } .btn-combine > p { color: white; text-align: center; font-size: 1.5vh; font-weight: 300; font-family: 'orbitron' !important; outline: none; } .item-slot-amount { position: absolute; bottom: 0.8vh; left: 0.55vw; } .item-slot-amount > p { color: rgb(235, 235, 235); text-align: right; font-size: 1.1vh; font-weight: 400; cursor: none; } .item-slot-amount > p:after { content: "x" } .item-slot-name { position: absolute; bottom: 0.8vh; right: 0.55vw; } .item-slot-name > p { color: #ffffff; text-align: right; font-size: 1.25vh; font-weight: 400; cursor: none; } .item-slot-label { position: absolute; top: 0%; width: 100%; background-color: transparent; } .item-slot-label > p { font-weight: 400; padding: 2.5px; padding-left: 5px; color: white; font-size: 1.3vh; text-align: left; letter-spacing: 0px; font-family: 'bold' !important; white-space: pre; text-overflow: ellipsis; overflow: hidden; cursor: none; } .item-slot-quality { position: absolute; bottom: 0vh; width: 100%; height: 0.4vh; background-color: rgba(22, 22, 22, 0.15); } .item-slot-quality-bar { position: absolute; width: 0%; height: 90%; background-color: #d54f4f; z-index: 1; } .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 { } .player-inv-info { position: absolute; left: 6.2%; top: 16.9%; width: 26.4%; z-index: 1000; cursor: none; } #player-inv-label { position: relative; color: white; font-size: 20px; font-family: 'orbitron' !important; font-weight: 600; letter-spacing: 0.01vh; left: 0px; top: 15px; 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: 'orbitron' !important; letter-spacing: 0.1vh; bottom: 40px; right: -23%; float: right; } #other-inv-label { position: relative; color: white; font-size: 20px; font-family: 'orbitron' !important; font-weight: 600; letter-spacing: 0.01vh; left: 60px; top: 15px; 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: 'orbitron' !important; letter-spacing: 0.1vh; bottom: 40px; right: -33.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: 'orbitron' !important; } .other-inv-info { position: absolute; left: 58.7%; top: 16.9%; width: 26.4%; z-index: 1000; } .ply-iteminfo-container { background: rgba(12, 12, 12, 0.9); border-radius: 3px; color: rgba(220, 220, 220, 1); border: 2px solid #b22020; 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: 'orbitron' !important; padding-top: 5px; padding-left: 5px; } .item-info-line { position: absolute; font-family: 'orbitron' !important; width: 85%; background-color: #b22020; 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: 'orbitron' !important; color: white; padding-left: 5px; padding-top: .5vh; } .itemboxes-container { height: 140px; min-width: 129px; max-width: 80vh; width: fit-content; position: absolute; left: 47%; bottom: 20%; overflow: hidden; } .template { display: none; } .itembox-container { display: none; position: relative; float: left; margin: 0 auto; margin-right: 1vh; width: 10vh; height: 11vh; background: rgba(31, 31, 31, 0.95); } #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: 'orbitron' !important; white-space: pre; text-overflow: ellipsis; overflow: hidden; } #itembox-label { position: absolute; bottom: 0; width: 100%; background-color: #c71543; height: 0.3vh; } .itembox-image { max-width: 10%; max-height: 100%; padding: 0.10vw; } #itembox-label > p { padding-left: 15px; padding-right: 15px; 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; } .requiredItem-container { display: none; position: absolute; height: 100vh; width: 100vw; } .requiredItem-box { position: relative; top: 70%; left: 42%; width: 10vh; height: 11vh; float: left; margin-left: 20px; background: rgba(35, 34, 56, 0.95); } #requiredItem-action { position: absolute; left: 0; top: 0; color: white; padding: 3px; font-size: 14px; font-family: 'orbitron' !important; } #requiredItem-label { position: absolute; bottom: 0; width: 100%; background-color: #c71543; 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; } .z-hotbar-inventory > .z-hotbar-item-slot > .z-hotbar-item-slot-key > p { position: absolute; font-weight: 400; color: rgba(255, 255, 255, 0.15); padding-top: 5.7vh; padding-bottom: 0px; padding-left: 2.5vh; text-align: left; font-size: 9vh; line-height: 0.5vh; font-family: orbitron !important; z-index: -1; opacity: 40%; } .z-hotbar-item-slot { position: relative; width: 10.5vh; height: 11.5vh; float: left; margin-left: 2px; margin-bottom: 2px; margin: 3px; transition: opacity 0.2s; opacity: 1.0; background: rgba(4, 4, 4, 0.95); z-index: 9999; border-bottom:2px solid #b22020; } .z-hotbar-item-slot-amount { position: absolute; bottom: 0.8vh; left: 0.55vw; } .z-hotbar-item-slot-amount > p { color: rgb(235, 235, 235); text-align: left; font-size: 14px; } .z-hotbar-item-slot-amount > p:after { content: "x"; } .z-hotbar-item-slot-amount-name { position: absolute; bottom: 0.8vh; right: 0.55vw; } .z-hotbar-item-slot-amount-name > p { color: #ffffff; text-align: right; font-size: 14px; } .z-hotbar-item-slot-label { position: absolute; bottom: 0; width: 100%; background-color: transparent; min-height: 2.2vh; height: fit-content; } .z-hotbar-item-slot-label > p { color: rgb(247, 247, 247); font-size: 11.5px; text-align: center; text-transform: lowercase; font-family: 'orbitron' !important; font-variant: small-caps; } .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: 9%; left: -16%; width: auto; height: auto; max-width: 105px; max-height: 100%; } .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: 'orbitron' !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: 'orbitron' !important; } .weapon-attachments-container-description { position: absolute; margin: 5vh; top: 5vh; font-size: 1.7vh; color: rgba(255, 255, 255, 0.8); font-family: 'orbitron' !important; } .weapon-attachments-container-details { position: absolute; margin: 5vh; top: 9vh; font-size: 1.4vh; color: rgba(255, 255, 255, 0.8); font-family: 'orbitron' !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: #c71543; } .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: 'orbitron' !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; } .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(var(--main-label-color), 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: 'orbitron' !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; } .weapon-attachments-remove:hover { background-color: rgb(18, 18, 18); } .weapon-attachments-remove > i { line-height: 6.5vh; } .weapon-attachments-remove-hover { background-color: #c71543; } .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: 'orbitron' !important; transition: .05s linear; } .weapon-attachments-back:hover { background-color: rgb(18, 18, 18); }