simondev.Quick_FPS1/public/base.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap');

body {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000000;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.ui {
  /* VIDEO HACK */
  /* visibility: hidden; */
  width: 100%;
  height: 100%;            
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Montserrat', sans-serif;
}

.row {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.column {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.left-ui {
  position: absolute;
  left: 100px;
  bottom: 50px; 
  background: rgba(1.0, 1.0, 1.0, 0.0);
  width: 400px;
  height: 120px;
  padding: 10px 10px;
  border-radius: 10px;
}

.right-ui {
  position: absolute;
  right: 100px;
  bottom: 50px; 
  background: rgba(1.0, 1.0, 1.0, 0.0);
  width: 400px;
  height: 100px;
  padding: 10px 10px;
  border-radius: 10px;
}

.top-right-ui {
  position: absolute;
  right: 100px;
  top: 50px; 
  background: rgba(1.0, 1.0, 1.0, 0.0);
  width: 400px;
  height: 100px;
  padding: 10px 10px;
  border-radius: 10px;
}

.top-left-ui {
  position: absolute;
  top: 200px; 
  background: rgba(1.0, 1.0, 1.0, 0.0);
  width: 400px;
  height: 100px;
  border-radius: 10px;
}

.ui-area {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: flex-end;
}

.ui-glow {
  border-radius: 5px;
  box-shadow:
    inset -20px -40px 40px rgba(7, 42, 136, 0.125),
            0 0 0 2px rgba(98, 164, 245, 0.5),
    inset -40px -60px 60px rgba(5, 28, 90, 0.125),
           7px 7px 20px rgba(0, 0, 0, 0.3);
}

.left-ui-area {
  transform: perspective(600px) rotateY(30deg) rotatez(-3deg);
  padding-right: 50px;
}

.right-ui-area {
  transform: perspective(600px) rotateY(-30deg) rotatez(3deg);
}

.top-right-ui-area {
  transform: perspective(600px) rotateY(-30deg) rotatez(-3deg);
}

.top-left-ui-area {
  text-align: center;
}

.objective-title-icon {
  filter: invert(1) drop-shadow(2px 2px 4px);
}

.objective-title {
  padding: 5px 10px;
  font-size: 1.5em;
  color: white;
  text-shadow:
      0px -2px 2px gray,
      0px 2px 2px gray,
      0px 0px 8px rgb(0, 0, 0),
      0px 0px 32px rgb(0, 0, 0);
}

.objective-text-background {
  min-width: 400px;
  padding: 10px 10px;
  background: linear-gradient(rgb(161, 202, 255), 10%, rgba(0, 0, 243, 0));
  align-items: center;
}

.objective-text {
  font-size: 1em;
  margin-left: 10px;
  margin-right: 10px;
  color: lightgray;
  text-shadow:
      0px -2px 1px gray,
      0px 2px 1px gray,
      0px 0px 4px rgb(0, 0, 0);
}

.objective-text-icon {
  filter: invert(1) drop-shadow(2px 2px 4px);
  height: 24px;
}

.ammo-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ammo-area > .ammo-icon {
  margin: 5px;
}

.ammo-icon {
  width: 48px;
  height: 48px;
  filter: invert(1) drop-shadow(2px 2px 4px);
}

.weapon-text {
  color: white;
  text-shadow:
      0px -2px 1px gray,
      0px 2px 1px gray,
      2px 2px 4px rgb(0, 0, 0);
  font-size: 16px;
}

.weapon-pic-text {
  color: white;
  text-shadow:
      0px -2px 1px gray,
      0px 2px 1px gray,
      2px 2px 4px rgb(0, 0, 0);
  font-size: 32px;
}

.weapon-icon {
  background-image: url('./resources/ui/paintball.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 110px;
  height: 40px;
}

.charge-area {
  margin: 10px;
  justify-content: right;
}

.charge-bar {
  height: 24px;
  width: 200px;
  margin-left: 5px;
}

.charge-bar-active {
  height: 100%;
  background-color: rgb(237, 50, 50);
  border-radius: 5px;
  box-shadow:
    0 0 10px rgb(190, 230, 200),
    inset 0 0 10px rgb(196, 211, 227);
}

.charge-text {
  color: white;
  text-shadow:
      0px -2px 1px gray,
      0px 2px 1px gray,
      2px 2px 4px rgb(0, 0, 0);
  font-size: 24px;
}

.weapon-text-icon {
  background-image: url('./resources/ui/currency_yuan_FILL0_wght700_GRAD0_opsz48.svg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 24px;
  width: 24px;
  margin-left: 5px;
  filter: invert(1) drop-shadow(2px 2px 4px);
}

.weapon-pic-icon {
  background-image: url('./resources/ui/safety_check_FILL0_wght700_GRAD0_opsz48.svg');
  background-size: contain;
  height: 40px;
  width: 40px;
  margin-left: 5px;
  filter: invert(1) drop-shadow(2px 2px 4px);
}

.weapon-area {
  margin-left: 10px;
}

.weapon-top-row {
  min-height: 30px;
  margin-bottom: 5px;
}

.charge-icon {
  background-image: url('./resources/ui/flash_on_FILL0_wght700_GRAD0_opsz48.svg');
  background-size: contain;
  height: 24px;
  width: 24px;
  margin-left: 5px;
}

.charge-icon-main {
  filter: invert(1) drop-shadow(2px 2px 4px);
}

.health-area {
  margin: 10px;
  justify-content: right;
}

.health-bar {
  height: 48px;
  width: 200px;
  margin: 5px;
}

.health-text {
  color: white;
  text-shadow:
      0px -2px 1px gray,
      0px 2px 1px gray,
      2px 2px 4px rgb(0, 0, 0);
  font-size: 40px;
}

.health-icon {
  background-image: url('./resources/ui/add_box_FILL0_wght700_GRAD0_opsz48.svg');
  background-size: contain;
  height: 48px;
  width: 48px;
  margin-left: 5px;
}

.health-icon-main {
  filter: invert(1) drop-shadow(2px 2px 4px);
}

.health-bar-active {
  height: 100%;
  background-color: rgb(89, 142, 241);
  border-radius: 5px;
  box-shadow:
    0 0 10px rgb(118, 176, 237),
    inset 0 0 10px rgb(196, 211, 227);
}

.top-left-ui-area.fadeOut {
  opacity: 1.0;
  animation: fadeOut 2s ease-in-out forwards;
}

.top-left-ui-area.slideIn {
  animation: slideIn 1s ease-in-out forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1.0;
    visibility: visible;
  }
  100% {
    opacity: 0.0;
    visibility: hidden;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0%);
  }
}