Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2025-07-28
Words:
790
Chapters:
1/1
Kudos:
6
Bookmarks:
2
Hits:
159

Work Skin Recreating Fire Emblem Engage Stat Gauges

Summary:

A work skin recreating Fire Emblem Engage's stat gauge screen for level up and class changes.

Notes:

(See the end of the work for notes.)

Work Text:

Alear
 Divine Dragon Lvl 20
 HP: 100
Str: 32
Mag: 37 +5
Dex: 30 -2
Spd: 38
Def: 24 +1
Res: 50 -10
Lck: 50 +10
Bld: 10
Mov: 5

raw HTML 
<div class="properties">

<p align="center" class="property-table">

  
    <span class="stat-table">
         <span class="label name-label stat-row">
      <b><u>Alear</u></b><br />
</span>
          <span class="label stat-row class-row">
      <span class="class-label"><u>Divine Dragon Lvl 20</u></span><br />
</span>
      <span class="stat-row">
        <b class="stat">HP</b><span class="hide">:</span>
        <span class="stat-number">100</span>
        <span class="stat-gauge stat-100"></span>
      </span><br />
<span class="stat-row">
        <b class="stat">Str</b><span class="hide">:</span>
        <span class="stat-number">32</span>
        <span class="stat-gauge stat-32"></span>
      </span><br />
<span class="stat-row boosted">
  <b class="stat">Mag</b><span class="hide">:</span>
  <span class="stat-number">37</span>
  <span class="stat-gauge stat-32 modified-37">
  <span class="stat-change">+5</span>
  </span>

</span><br />
<span class="stat-row reduced">
        <b class="stat">Dex</b><span class="hide">:</span>
        <span class="stat-number">30</span>
        <span class="stat-gauge stat-30 modified-32">
		  <span class="stat-change">-2</span>
		</span>
      </span><br />
<span class="stat-row">
        <b class="stat">Spd</b><span class="hide">:</span>
        <span class="stat-number">38</span>
        <span class="stat-gauge stat-38">
		  <span class="stat-change"></span>
		</span>
      </span><br />
<span class="stat-row boosted">
        <b class="stat">Def</b><span class="hide">:</span>
        <span class="stat-number">24</span>
        <span class="stat-gauge stat-23 modified-24"><span class="stat-change">+1</span></span>
      </span><br />
<span class="stat-row reduced">
        <b class="stat">Res</b><span class="hide">:</span>
        <span class="stat-number">50</span>
        <span class="stat-gauge stat-50 modified-60"> <span class="stat-change">-10</span>
</span>

      </span><br />
<span class="stat-row boosted">
        <b class="stat">Lck</b><span class="hide">:</span>
        <span class="stat-number">50</span>
        <span class="stat-gauge stat-40 modified-50">
 <span class="stat-change">+10</span>
</span>
      </span><br />
<span class="stat-row">
        <b class="stat">Bld</b><span class="hide">:</span>
        <span class="stat-number">10</span>
        <span class="stat-gauge stat-10"></span>
      </span><br />
<span class="stat-row">
        <b class="stat">Mov</b><span class="hide">:</span>
        <span class="stat-number">5</span>
        <span class="stat-gauge stat-5"></span>
      </span>
    </span>
  </p></div>
raw CSS 
#workskin .label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-top: -5px;
  padding: 0 3px;
  text-align: center;
  position: relative;
  top: 7px;
}

#workskin .properties {
  display: block;
  margin: 20px auto 25px;
  overflow-x: visible;
  text-align: center;
  width: 345px;
}

#workskin .properties u {
  text-decoration: none;
}

#workskin .properties br {
  display: none;
}

#workskin .property-table {
  display: inline-block;
  margin: 0 2px;
}

#workskin .stat-label {
  background-color: #3270C9;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  color: azure;
}

#workskin .name-label {
  font-size: 14px;
  background-color: #3270C9;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  color: azure;
  margin-bottom: 15px;
  top: 5px;
}

#workskin .stat-table {
  background-color: linear-gradient(#051526, #051526);
  border-radius: 4px;
  display: table;
  font-size: 14px;
  font-weight: bold;
  padding: 20px 20px;
  text-align: left;
  background-image: radial-gradient(circle at 50% 0%, rgba(78, 181, 255, 0.9) 0%, rgba(64, 141, 254, 0.5) 20%, transparent 40%), linear-gradient(to bottom, #051526 0%, #051526 95%, transparent 100%);
}

#workskin .stat-row {
  display: block;
}

#workskin .class-row {
  background: rgba(143,128,110,.3);
  box-shadow: 0px 0px 10px rgba(143,128,110,.3),
    0px 0px 20px rgba(143,128,110,.8);
  top: 2px;
  margin-bottom: 10px;
}

#workskin .class-label {
  background-color: #3270C9;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  opacity: 1.0;
  color: azure;
  font-size: 15px;
  top: 5px;
  margin-bottom: 15px;
}

#workskin .stat {
  background-color: #3270C9;
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px transparent;
  border-radius: 2px;
  color: azure;
  display: inline-block;
  text-align: left;
  height: 18px;
  width: 36px;
  font-weight: normal;
}

#workskin .stat-number {
  background-color: #283176;
  -webkit-background-clip: text;
  -webkit-text-stroke: 3px transparent;
  color: white;
  display: inline-block;
  padding: 0 1px;
  text-align: right;
  min-width: 28px;
}

#workskin .stat-gauge {
  background-color: #010B19;
  border: 2px solid #04215E;
  display: inline-block;
  height: 10px;
  width: 100px;
  position: relative;
  top: 2px;
}

#workskin .stat-gauge::before {
  content: '';
  background-color: aliceblue;
  display: inline-block;
  height: 10px;
  position: absolute;
  left: 0px;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 125, 210, 0.9);
}

#workskin .stat-gauge::after {
  content: '';
  background-color: aliceblue;
  display: inline-block;
  height: 10px;
  position: absolute;
  left: 0px;
}

#workskin .stat-30::before {
  width: 30%;
}

#workskin .stat-32::before {
  width: 32%;
}

#workskin .stat-38::before {
  width: 38%;
}

#workskin .stat-23::before {
  width: 23%;
}

#workskin .stat-100::before {
  width: 100%;
}

#workskin .stat-20::before {
  width: 20%;
}

#workskin .stat-10::before {
  width: 10%;
}

#workskin .stat-5::before {
  width: 5%;
}

#workskin .stat-60::before {
  width: 60%;
}

#workskin .stat-50::before {
  width: 50%;
}

#workskin .stat-40::before,
#workskin .modified-40::after {
  width: 40%;
}

#workskin .boosted .stat-number,
#workskin .boosted .stat-change {
  color: #24DFFF;
}

#workskin .boosted .stat-number::after {
  content: "↑";
  font-size: 12px;
  vertical-align: top;
}

#workskin .boosted .stat-gauge::after {
  background-color: #24DFFF;
}

#workskin .reduced .stat-number,
#workskin .reduced .stat-change {
  color: #FA4B5A;
}

#workskin .reduced .stat-gauge::after {
  background-color: #FA4B5A;
}

#workskin .reduced .stat-number::after {
  content: "↓";
  font-size: 12px;
  vertical-align: top;
}

#workskin .modified-37::after {
  width: 37%;
}

#workskin .modified-32::after {
  width: 32%;
}

#workskin .modified-43::after {
  width: 43%;
}

#workskin .modified-50::after {
  width: 50%;
}

#workskin .modified-60::after {
  width: 60%;
}

#workskin .modified-24::after {
  width: 24%;
}

#workskin .stat-change {
  background-color: #283176;
  background-clip: text;
  -webkit-text-stroke: 3px transparent;
  position: relative;
  left: 90%;
  bottom: 2px;
}

#workskin .hide {
  display: none;
}

Notes:

I mainly based this off of SpookyTesting's Persona Q2 stat skin linked in the Inspired By section, as one of the only references I could find with stat gauges. They also already explain this in Chapter 3 better than I could, so I've just left the raw code here without commentary. The main differences in classes are stat-change for the extra number, and boosted/reduced determining the colour of stat rows, and the original boosted-stat classes being named "modified" as they can serve either purpose.

I wanted to try making something like this for a FE game for a while, and the Engage stat screen seemed simple enough to recreate with all the bars naturally being out of 100 and having a simple layout without needing any extra graphics or pages, so I decided to try and relearn some CSS for the sake of it. I ended up settling for having the numerical stat gains always on the right rather than adjusting each's position manually. Also no fancy symbols surrounding the character name and class, though I did manage other aesthetic elements like the yellowish background label, the fade at the bottom, and the blue glow at the top in which I wasn't sure of at first.

Speaking of which, I was stuck for a good while because AO3 kept telling me the background-image property "cannot have the value" I set for radial-gradient, even as I found other fics that seemed to use the same properties. It turned out that AO3 did not like using linebreaks after commas to separate arguments, and putting the radial-gradient all in one line instead worked fine. I am documenting this here if anyone else happens to have the same issue.