Skin for Recreating Metroid Dread’s Item Acquisition Pop-Ups

by SpookyTesting (FierySprites)

Summary:

A work skin for recreating the ‘Item Acquired’ pop-up and upgrade description screen from Metroid Dread.

---

[ Speed Booster acquired. ]

[ Missile+ Tank acquired.
Missile capacity increased by 10. ]

---

Speed Booster

Allows Samus to dash at supersonic speed after a short buildup.

Press Ⓛ once while running to ready the Speed Booster. Continue running for a certain distance and the Speed Booster will activate. While active, any enemies in Samus’s path will be damaged, and any Speed Booster Blocks will be destroyed. You can retain the Speed Booster through slides and wall jumps.

In addition, while the Speed Booster is active, Samus can propel herself in a set direction using a Shinespark. Tilt Ⓛ down while the Speed Booster is active to ready a Shinespark. Once readied, press 🅑 to activate it before tilting Ⓛ in any direction to propel Samus in that direction. You can also activate a Shinespark while in the Morph Ball.

---

Example HTML Code

<div class="dread-message">
  <p align="center">
    <b>
      <span>[</span>
      Speed Booster acquired.
      <span>]</span>
    </b>
  </p>
</div>

<blockquote class="dread-upgrade">
  <div>
    <p class="name">
      <b><u>Speed Booster</u></b>
    </p>

    <div class="description">
      <div class="image">
        <img src="https://vignette.wikia.nocookie.net/metroid/images/0/0c/Dread_SpeedBooster_Demo.gif/revision/latest?cb=20211121044327">
      </div>

      <div>
        <p>
          Allows Samus to dash at supersonic speed after a short buildup.
        </p>

        <p>
          Press Ⓛ once while running to <b>ready the Speed Booster</b>. Continue running for a certain distance and the Speed Booster will activate. While active, any enemies in Samus’s path will be damaged, and any <b>Speed Booster Blocks</b> will be destroyed. You can retain the Speed Booster through slides and wall jumps.
        </p>

        <p>
          In addition, while the Speed Booster is active, Samus can <b>propel herself in a set direction</b> using a Shinespark. Tilt Ⓛ down while the Speed Booster is active to <b>ready a Shinespark</b>. Once readied, press 🅑 to activate it before tilting Ⓛ in any direction to propel Samus in that direction. You can also activate a Shinespark while in the Morph Ball.
        </p>
      </div>
    </div>
  </div>
</blockquote>

CSS Code

/* Dread Item Acquired */

#workskin .dread-message {
  position: relative;
  z-index: 1;
}

#workskin .dread-message > p {
  align-items: center;
  background-color: #0C1E26;
  /* border-top: 2px solid #B4EAF2;
  border-bottom: 2px solid #B4EAF2; */
  border-radius: 8px;
  color: white;
  display: flex;
  justify-content: center;
  margin: 35px auto;
  padding: 20px 10px 40px;
  text-align: center;
  position: relative;
  min-height: 40px;
  width: 500px;
  max-width: 80%;
}

#workskin .dread-message > p::before {
  content: '';
  background: linear-gradient(#B4EAF2, #B4EAF2 25px, transparent 25px), linear-gradient(to top, #B4EAF2, #B4EAF2 25px, transparent 25px);
  border-radius: 10px;
  display: block;
  padding: 4px;
  position: absolute;
  top: -4px;
  left: -4px;
  height: 100%;
  width: 100%;
  z-index: -1;
}

#workskin .dread-message > p::after,
#workskin .dread-upgrade > div::before {
  content: '';
  background-color: #0C1E26;
  border-radius: 8px;
  padding: 2px 0;
  position: absolute;
  height: 100%;
  width: 70%;
  z-index: -1;
}

#workskin .dread-message > p::after {
  top: -2px;
}

#workskin .dread-message > p > b {
  font-weight: normal;
}

#workskin .dread-message > p > b::before {
  content: '';
  background-color: #0C1E26;
  border-radius: 5px;
  height: 100%;
  width: 70%;
}

#workskin .dread-message > p > b::after, {
  content: '🅐 Accept';
  color: #B4EAF2;
  cursor: pointer;
  text-transform: uppercase;
  position: absolute;
  bottom: 5px;
  right: 30px;
}

#workskin .dread-message > p span:first-of-type,
#workskin .dread-message > p span:last-of-type {
  display: none;
}

/* Dread Upgrade Info - Background */

#workskin .dread-upgrade {
  background: linear-gradient(#B4EAF2, #B4EAF2 25px, #0C1E26 25px, #0C1E26 50%, transparent 50%), linear-gradient(to top, #B4EAF2, #B4EAF2 25px, #0C1E26 25px, #0C1E26 50%, transparent 50%);
  border: 0;
  color: white;
  margin: 30px auto;
  padding: 5px 4px;
  position: relative;
  width: 800px;
  max-width: 98%;
  z-index: 1;
}

#workskin .dread-upgrade > div {
  background-color: #0C1E26;
  border-radius: 8px;
  padding: 15px 20px;
  position: relative;
}

#workskin .dread-upgrade > div::before {
  padding: 3px 0;
  top: -3px;
  transform: translateX(15%);
}

#workskin .dread-upgrade > div::after {
  content: '🅑 Back';
  color: #B4EAF2;
  cursor: pointer;
  display: block;
  margin-top: 1.286em;
  text-transform: uppercase;
}

/* Dread Upgrade Info - Name */

#workskin .dread-upgrade .name b {
  color: #B4EAF2;
  font-size: 1.8em;
  font-weight: normal;
  text-transform: uppercase;
}

#workskin .dread-upgrade .name u {
  text-decoration: none;
}

/* Dread Upgrade Info - Image & Description */

#workskin .dread-upgrade .description {
  align-items: center;
  line-height: 1.5em;
  display: flex;
  position: relative;
}

#workskin .dread-upgrade .description > div.image {
  flex-basis: 300px;
  margin-right: 4%;
}

#workskin .dread-upgrade .description > div:last-of-type {
  flex-basis: 500px;
  overflow-y: scroll;
  padding-right: 10px;
  height: 15em;
}

#workskin .dread-upgrade .description > div:last-of-type::before,
#workskin .dread-upgrade .description > div:last-of-type::after {
  color: #B4EAF280;
  transform: scale(2, 1.2);
  position: absolute;
  right: 30%;
}

#workskin .dread-upgrade .description > div:last-of-type::before {
  content: '▲';
  top: -1.7em;
}

#workskin .dread-upgrade .description > div:last-of-type::after {
  content: '▼';
  bottom: -1.7em;
}

/* Dread Upgrade Info - Description Text */

#workskin .dread-upgrade .description p {
  margin: 1.5em auto;
}

#workskin .dread-upgrade .description p:first-of-type {
  margin-top: 0;
}

#workskin .dread-upgrade .description p:last-of-type {
  margin-bottom: 0;
}

#workskin .dread-upgrade .description b {
  color: yellow;
  font-weight: normal;
}

/* Dread Upgrade Info - Description Scrollbar */

#workskin .dread-upgrade .description > div:last-of-type::-webkit-scrollbar {
  -webkit-appearance: none;
}

#workskin .dread-upgrade .description > div:last-of-type::-webkit-scrollbar:vertical {
  width: 4px;
}

#workskin .dread-upgrade .description > div:last-of-type::-webkit-scrollbar-thumb {
  background-color: #B4EAF2;
}

#workskin .dread-upgrade .description > div:last-of-type::-webkit-scrollbar-track {
  background-color: #B4EAF280;
}

Notes:

After adding the item acquisition text box from Metroid Prime 2: Echoes to my Scan Visor work skin, I decided that since Metroid Dread also had reasonably simplistic text boxes, I might as well do those, too. As a bonus, I threw in the upgrade description screen—complete with working image functionality—so that this wouldn’t be one of the shortest work skins in existence. Ain’t that neat?