Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2025-12-23
Words:
1,059
Chapters:
1/1
Comments:
1
Kudos:
11
Bookmarks:
6
Hits:
244

Skin for Recreating Metroid Prime 2’s Scan Visor

Summary:

A work skin for recreating elements of the Metroid series’ Scan Visor, as seen in Metroid Prime 2: Echoes. Also includes the ‘Item Acquired’ pop-up from the same game.

Notes:

EDIT 1/7/2026: Scan Visor section updated to use a blockquote. Item acquisition pop-up added.

(See the end of the work for more notes.)

Work Text:

Research
Mechanisms
Vehicles 		XX%
XX%
XX% 		100%

 Samus’s Gunship

A new [Research] entry has been downloaded to your Logbook.

Starship: Hunter Class Gunship >>>
Vessel registered to Samus Aran.

Your ship has been damaged. Auto-repair function initiated. You can return to your ship to recharge energy, reload weapons, and save progress in the game.

Example HTML Code 

<blockquote class="scan-visor">
  <table>
    <tr>
      <td class="categories">
        <span><span>Research</span></span><br />
        <span><span>Mechanisms</span></span><br />
        <span><span>Vehicles</span></span>
      </td>

      <td class="percentages">
        <span>XX%</span><br />
        <span>XX%</span><br />
        <span>XX%</span>
      </td>

      <td class="percentages">
        <span class="object"><span>100%</span></span><br />
        <span class="empty"></span><br />
        <span class="empty"></span>
      </td>

      <td class="categories">
        <span class="object"><span><b>Samus’s Gunship</b></span></span><br />
        <span></span><br />
        <span></span>
      </td>
    </tr>
  </table>

  <p>
    A new <b>[Research]</b> entry has been downloaded to your Logbook.
  </p>

  <p>
    <b class="name">Starship: Hunter Class Gunship >>></b><br />
    Vessel registered to Samus Aran.
    </b>
  </p>

  <p>
    Your ship has been damaged. Auto-repair function initiated. You can return to your ship to recharge energy, reload weapons, and save progress in the game.</b>
  </p>
</blockquote>

CSS Code 

/* Echoes Scan Visor */

#workskin .scan-visor {
  border-inline-start: 0;
  margin-inline-start: 0;
  padding: 0;
}

/* Echoes Scan Visor - Categories */

#workskin .scan-visor > table {
  margin: 1.8em auto 2.2em;
  table-layout: fixed;
  width: 550px;
  max-width: 97%;
}

#workskin .scan-visor > table br {
  display: none;
}

#workskin .scan-visor > table tr:hover,
#workskin .scan-visor > table td:hover {
  background: none;
}

#workskin .scan-visor > table td.categories {
  position: relative;
  z-index: 2;
}

#workskin .scan-visor > table td.categories::before {
  content: '';
  background-color: #628c9e;
  border-radius: 15px;
  display: block;
  padding: 6px;
  position: absolute;
  top: -6px;
  height: 100%;
  width: 35px;
  z-index: -1;
}

#workskin .scan-visor > table td.categories:first-of-type::before {
  left: -6px;
}

#workskin .scan-visor > table td.categories:last-of-type::before {
  right: -6px;
}

/* Echoes Scan Visor - Categories: Containers */

#workskin .scan-visor > table td.categories > span,
#workskin .scan-visor > table td.percentages > span {
  background-color: black;
  border: 2px solid #628c9e;
  color: #8ed2f0;
  display: block;
  margin-bottom: -2px;
  padding: 5px;
  position: relative;
  height: 3em;
}

#workskin .scan-visor > table td.categories > span {
  z-index: -1;
}

#workskin .scan-visor > table td.categories > span:first-of-type,
#workskin .scan-visor > table td.percentages > span:first-of-type {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

#workskin .scan-visor > table td.categories > span:last-of-type,
#workskin .scan-visor > table td.percentages > span:last-of-type {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Echoes Scan Visor - Categories: Names */

#workskin .scan-visor > table td.categories > span > span {
  align-items: center;
  background-color: black;
  border: 2px solid #628c9e;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  line-height: 1.2;
  margin: 0 6px;
  padding: 0 5px;
  text-align: center;
  position: relative;
  height: 2.8em;
}

#workskin .scan-visor > table td.categories > span > span::before {
  content: '';
  background-color: #30454f;
  border: 2px solid #628c9e;
  border-radius: 10px;
  display: block;
  padding: 0 6px;
  position: absolute;
  left: -8px;
  height: 100%;
  width: 100%;
  z-index: -1;
}

/* Echoes Scan Visor - Categories: Scanned Object */

#workskin .scan-visor > table td.categories > span.object > span {
  border-color: #e08a00;
  color: #ffcc7a;
}

#workskin .scan-visor > table td.categories > span.object > span::before {
  background-color: #734700;
  border-color: #e08a00;
}

#workskin .scan-visor > table td.categories > span.object b {
  align-items: center;
  font-weight: normal;
  display: flex;
  overflow: clip;
  height: inherit;
}

/* Echoes Scan Visor - Categories: Percentages */

#workskin .scan-visor > table td.percentages {
  position: relative;
  width: 3.5em;
  z-index: 1;
}

#workskin .scan-visor > table td.percentages > span {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  position: relative;
}

#workskin .scan-visor > table td.percentages > span::before {
  content: '';
  background-color: black;
  border: 2px solid #628c9e;
  display: block;
  position: absolute;
  height: 25%;
  width: 100%;
  z-index: -1;
}

#workskin .scan-visor > table td.percentages:nth-child(2) > span::before {
  left: -50%;
}

#workskin .scan-visor > table td.percentages:nth-child(3) > span::before {
  right: -50%;
}

#workskin .scan-visor > table td.percentages > span:not(.empty)::after {
  content: '';
  background: linear-gradient(to right, #0a89c2, #0a89c2 50%, #628c9e60 50%);
  margin: 3px 0 0;
  height: 5px;
  width: 100%;
}

/* Echoes Scan Visor - Categories: Percentages (100%) */

#workskin .scan-visor > table td.percentages > span.object > span {
  border-left: 5px solid #ff9d00;
  padding-left: 3px;
  transform: scaleX(.8);
}

#workskin .scan-visor > table td.percentages > span.object::after {
  background: #0a89c2;
}

/* Echoes Scan Visor - Text */

#workskin .scan-visor > p,
#workskin div.echoes-message > p {
  background-color: black;
  border: 2px solid #8ed2f0;
  border-radius: 10px;
  color: #8ed2f0;
  margin: 2.2em auto 3em;
  padding: 10px 15px;
  text-align: left;
  min-height: 6em;
  width: 400px;
  position: relative;
  max-width: 70%;
}

#workskin .scan-visor > p::after,
#workskin div.echoes-message > p > b::after {
  content: 'A';
  align-items: center;
  background-color: white;
  border: 3px solid black;
  border-radius: 100%;
  color: black;
  cursor: pointer;
  display: flex;
  font-size: 1.2em;
  justify-content: center;
  outline: 2px solid #8ed2f0;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  height: 1.2em;
  width: 1.2em;
}

#workskin .scan-visor > p::after {
  bottom: -2em;
}

#workskin .scan-visor > p:last-of-type::after {
  content: '––';
  background-color: black;
  color: #8ed2f0;
  cursor: default;
  font-weight: bold;
}

#workskin .scan-visor > p b,
#workskin .scan-visor > p span {
  color: #FF452B;
  font-weight: normal;
}

#workskin .scan-visor > p b.name,
#workskin .scan-visor > p span.name {
  color: #1dff77;
}

Bonus: Item Acquired Pop-Up

[ Super Missile acquired! ]

[ This powerful attack uses 5 Missiles! Using the Power Beam, press and hold 🅐/ZR to charge, then press R to fire. ]

[ Open the menu with (-) and check the Inventory Screen for more information. ]

Example HTML Code 

<div class="echoes-message">
  <p align="center">
    <b>
      <span>[</span>
      Super Missile acquired!
      <span>]</span>
    </b>
  </p>

  <p align="center">
    <b>
      <span>[</span>
      This powerful attack uses 5 Missiles! Using the <span>Power Beam</span>, press and hold 🅐/ZR to charge, then press R to fire.
      <span>]</span>
    </b>
  </p>

  <p align="center">
    <b>
      <span>[</span>
      Open the menu with (-) and check the Inventory Screen for more information.
      <span>]</span>
    </b>
  </p>
</div>

CSS Code

(Any code that is shared with the Scan Visor text box can be found in the prior CSS section.)

#workskin div.echoes-message {
  position: relative;
  z-index: 2;
}

#workskin div.echoes-message > p {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 20px 25px;
  text-align: center;
  min-height: 8em;
  width: 450px;
}

#workskin div.echoes-message > p::before,
#workskin div.echoes-message > p::after {
  content: '';
  display: block;
  padding: 6px;
  position: absolute;
  left: -6px;
  height: 25px;
  width: 100%;
  z-index: -1;
}

#workskin div.echoes-message > p::before {
  background: linear-gradient(to right, #8ed2f0, #8ed2f0 15%, transparent 15%), linear-gradient(to left, #8ed2f0, #8ed2f0 15%, transparent 15%);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  top: -6px;
}

#workskin div.echoes-message > p::after {
  background: linear-gradient(to right, #8ed2f0, #8ed2f0 30%, transparent 30%), linear-gradient(to left, #8ed2f0, #8ed2f0 30%, transparent 30%);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  bottom: -6px;
}

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

#workskin div.echoes-message > p > b::after {
  bottom: -1.6em;
}

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

#workskin div.echoes-message > p span {
  color: #FF3A3A;
}

Notes:

Consider this a tribute to my favorite Metroid game ever.

There’s not a whole lot of Metroid fics out there, especially not ones that replicate the style of the Prime games—but even so, I wanted to do a little something for this fandom, since I was still feeling an itch despite going through Beyond twice in a row (once on Normal, once on Hard) and then Echoes via PrimeHack. So, here’s a recreation of the latter game’s Scan Visor, complete with its category and percentage displays.

I gotta say, I really love the way the Scan Visor works in Echoes. The bright, illuminated objects; the distinction between stuff that’s mission-critical and everything else; the ability to see how much of the Logbook you’ve filled up at a glance; that sweet, sweet ‘Recorded to Logbook’ voice line that both Corruption and Beyond leave by the wayside… yeah, it’s great. About the only thing holding it back how cumbersome it is to navigate the menu, what with everything being on a spinning axis as opposed to a regular drop-down interface. Dunno what they were thinking with that.

Since I’m working with limited screen real estate here (I like having my skins readable on phones), there’s a few visual details I had to leave out—like the categories being slanted, or having space for the scanned object in the center. Even then, it still looks pretty scrunched up on vertical screens—and due to the way CSS works, I can’t have multi-line text blocks use ellipses once it starts to overflow. As a compromise, I have the <b> tag on the object name set to have it clip behind the container, which will have to do for now. If you’re bothered by it, you can just remove the percentages from the table; it’s easy enough to do, and doesn’t affect the way the skin appears too much.