init

frontend-ui/src/pages/Character/Skill/components/SkillTree/style.scss

@@ -1,6 +1,16 @@
+.skill-tree {
+  /* Preserve the original 11-column tree rhythm while allowing its host to scroll on narrow screens. */
+  min-width: 550px;
+}
+
 .skill-tree-line {
+  display: flex;
   height: 80px;
   width: auto;
+  align-items: center;
+  gap: 8px;
+  padding-inline: 5px;
+
   &:nth-child(n + 1) {
     background-color: #000000;
   }
@@ -9,6 +19,130 @@
   }
 }
 
+.skill-tree__slot {
+  position: relative;
+  width: 35px;
+  height: 55px;
+  flex: 0 0 35px;
+}
+
+.skill-tree__enhancements {
+  position: absolute;
+  top: -18px;
+  left: 1px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.skill-tree__skill {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  box-sizing: border-box;
+  width: 36px;
+  height: 48px;
+  padding-block: 3px;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.skill-tree__icon {
+  display: block;
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.skill-tree__level {
+  display: flex;
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  justify-content: center;
+}
+
+.skill-tree__awake {
+  position: absolute;
+  top: -3px;
+  left: 18px;
+  display: flex;
+  box-sizing: border-box;
+  width: 196px;
+  height: 54px;
+  padding: 2px 3px;
+  align-items: center;
+  justify-content: space-between;
+  transform: translateX(-50%);
+}
+
+.skill-tree__awake-option {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  box-sizing: border-box;
+  width: 36px;
+  padding-block: 2px;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.skill-tree__awake-icon {
+  margin-top: 1px;
+}
+
+.skill-tree__awake-label {
+  display: flex;
+  width: 100%;
+  margin-top: 1px;
+  align-items: center;
+  justify-content: center;
+  color: #ffc701;
+}
+
+.skill-tree__actions {
+  position: absolute;
+  z-index: 5;
+  top: -1px;
+  left: 16px;
+  width: 88px;
+  height: 78px;
+  transform: translateX(-50%);
+}
+
+.skill-tree__action-list {
+  position: relative;
+  top: 54px;
+  display: flex;
+  padding-inline: 5px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.skill-tree__row-label,
+.skill-tree__placeholder {
+  display: flex;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  align-items: center;
+  justify-content: center;
+}
+
+.skill-tree__row-label {
+  color: #fff;
+}
+
+.skill-tree__row-end {
+  width: 5px;
+  height: 34px;
+  flex: 0 0 5px;
+}
+
 .passive {
   filter: grayscale(100%) invert(3%) sepia(14%) saturate(874%) hue-rotate(65deg) brightness(105%)
     contrast(102%);
@@ -24,6 +158,18 @@
   background-size: 100% 100%;
 }
 
+.skill-action-button {
+  --ui-control-height-default: 17px;
+
+  border-color: transparent;
+
+  img {
+    width: 11px;
+    height: 11px;
+    object-fit: contain;
+  }
+}
+
 .awake_50 {
   background-image: url('./img/awake_50.png');
   background-size: 100% 100%;