Template:Progress bar/styles.css

.progress-bar {
  display: flex;
  /* width always set inline */
  height: 14px; /* 10 + 2 for borders + 2 for padding */
  padding: 1px;
  border: 1px solid;
  border-color: var(--border-color-subtle, #c8ccd1);
  background-color: #eaecf0;
  background-clip: content-box;
  box-sizing: border-box;
  margin: .5em 0;
}

.progress-bar .green {
  background: #00AF32;
}

.progress-bar .arealmreborn {
  background: #666666;
}

html.view-dark .progress-bar .arealmreborn {
  background: #8F8F8F;
}

.progress-bar .heavensward {
  background: #4B7FE9;
}

.progress-bar .stormblood {
  background: #A3253C;
}

html.view-dark .progress-bar .stormblood {
  background: #BE344D;
}

.progress-bar .shadowbringers {
  background: #4F45B4;
}

html.view-dark .progress-bar .shadowbringers {
  background: #756DC7;
}

.progress-bar .endwalker {
  background: #C0790B;
}

.progress-bar .dawntrail {
  background: #DEB746;
}

html.view-dark .progress-bar {
  background-color: #323232;
}