First commit of group-ironmen-master directory.

group-ironmen-master/site/src/skill-box/skill-box.css

@@ -0,0 +1,76 @@
+skill-box {
+  display: flex;
+  position: relative;
+  transform: translateZ(1px);
+  width: 62px;
+  height: 32px;
+
+  font-family: "rstiny";
+}
+
+.skill-box__left {
+  background-image: url(/ui/174-0.png);
+}
+
+.dark-mode .skill-box__left {
+  background-image: url(/ui/174-0-dark.png);
+}
+
+.skill-box__right {
+  position: relative;
+  background-image: url(/ui/175-0.png);
+}
+
+.dark-mode .skill-box__right {
+  background-image: url(/ui/175-0-dark.png);
+}
+
+.skill-box__left,
+.skill-box__right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 31px;
+  height: 32px;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.skill-box__left,
+.skill-box__right,
+.skill-box__progress {
+  pointer-events: none;
+}
+
+.skill-box__current-level,
+.skill-box__baseline-level {
+  position: absolute;
+  font-size: 16px;
+  color: yellow;
+  text-shadow: 1px 1px var(--black);
+  min-width: 10px;
+}
+
+.skill-box__baseline-level {
+  transform: translate(calc(50% - 1px), 5px);
+  text-align: right;
+}
+
+.skill-box__current-level {
+  transform: translate(calc(-50% - 2px), -5px);
+  text-align: left;
+}
+
+.skill-box__progress {
+  width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 1px;
+}
+
+.skill-box__progress-bar {
+  height: 2px;
+  width: 100%;
+  transform-origin: left;
+}