Template:STFI/styles.css

.standard-frame-icon, .standard-frame-icon-hq {
  --frame-image: url("/mediawiki/images/d/d9/Action_overlay_glassy.png");
  --icon-size: 40px;

  --frame-size: calc(var(--icon-size) * 1.2); /* 48px for 40px icon */
  --icon-offset-x: calc(var(--icon-size) * 0.1); /* 4px for 40px icon */
  --icon-offset-y: calc(var(--icon-size) * 0.05); /* 2px for 40px icon */

  position: relative;
  width: var(--frame-size);
  height: var(--frame-size);
  display: inline-block !important;
  vertical-align: middle;

  /* default background for missing/transparent icon images */
  background-image: url(/mediawiki/images/2/2b/Action_background.png);
  background-position: var(--icon-offset-x) var(--icon-offset-y);
  background-size: var(--icon-size);
  background-repeat: no-repeat;

  /* negative inline margin for visual alignment with the frame */
  margin-inline: calc(var(--icon-offset-x) * -0.5); /* -1px for 40px icon */
}

/* Icon */
.standard-frame-icon img,
.standard-frame-icon-hq img {
  position: absolute;
  top: var(--icon-offset-y);
  left: var(--icon-offset-x);
  width: var(--icon-size);
}

/* Frame */
.standard-frame-icon::after,
.standard-frame-icon-hq::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: var(--frame-image);
  background-size: var(--frame-size);
  z-index: 2;
  pointer-events: none;
}

/* Dye slot container */
.standard-frame-icon-dye-slots {
  position: absolute;
  top: 0;
  right: calc(var(--icon-size) * 0.075); /* 3px at 40px */
  z-index: 3;
}
/* Dye slot circle */
.standard-frame-icon-dye-slots span {
  display: block;
  width: calc(var(--icon-size) * 0.175); /* 7px at 40px */
  height: calc(var(--icon-size) * 0.175);
  border: calc(var(--icon-size) * 0.025) solid #000; /* 1px at 40px */
  border-radius: 50%;
  margin-bottom: calc(var(--icon-size) * 0.1); /* 4px gap at 40px */
}

/* HQ frame */
.standard-frame-icon-hq {
  --frame-image: url("/mediawiki/images/a/af/HQ_overlay.png");
}

/* Sizes */
.standard-frame-icon.mid,
.standard-frame-icon-hq.mid {
  --icon-size: 30px;
}
.standard-frame-icon.small, 
.standard-frame-icon-hq.small {
  --icon-size: 20px;
}

/* [[Category:Template stylesheets]] */