Suggestion: Line width independent of actual width

[5cript]

I personally prefer finer lines, but decresing the size of the splitter line also makes the area where you can click smaller.

It'd be great if the actual line that you can click can be of any size, which contains another rectangle thats the actual line (another color), so that you dont have to be pixel perfect for clicking it.

[nathggns]

In lieu of a first party solution to this, you can achieve it with a bit of custom CSS.

.container {
  --splitter-hit-area: 7px;
  --splitter-visible-area: 1px;
  --splitter-hit-offset: calc(
    -1 * ((var(--splitter-hit-area) - var(--splitter-visible-area)) / 2)
  );
}

.container .splitter-layout > .layout-splitter {
  width: var(--splitter-visible-area);
  background: blue;
  z-index: 2;
  position: relative;
}

.container .splitter-layout > .layout-splitter:before {
  content: "";
  display: block;
  width: var(--splitter-hit-area);
  position: absolute;
  left: var(--splitter-hit-offset);
  top: 0;
  height: 100%;
}

.container .splitter-layout > .layout-splitter:hover,
.container .splitter-layout > .layout-splitter:hover:before {
  background: red;
}

.container .splitter-layout.layout-changing > .layout-splitter,
.container .splitter-layout.layout-changing > .layout-splitter:before {
  background: green;
}

.container .splitter-layout.splitter-layout-vertical > .layout-splitter {
  height: var(--splitter-visible-area);
}

.container
  .splitter-layout.splitter-layout-vertical
  > .layout-splitter:before {
  width: 100%;
  height: var(--splitter-hit-area);
  top: var(--splitter-hit-offset);
  left: 0;
}