在Atom中，如何在抓取选项卡时设置选项卡之间显示的线条的样式？

Question

我正在努力弄清楚如何设计这条线。

我知道该类被称为is-drop-target但是我无法滚动样式列表以确定哪些样式应用于哪些属性，因为光标正在保持类的选项卡以显示和滚动光标握住时不允许使用。

我已尝试过属性background-color，border-color和color，但都没有。

我尝试过伪元素::before和::after，但这些都没有。

任何建议都将不胜感激。谢谢！

编辑：
我使用名为UI Theme的{​​{1}}。 https://www.screencast.com/t/n8u5M0akkJd

https://atom.io/themes/seti-ui

Answer 1

最容易调试的方法是使用元素检查器并在两个选项卡之间手动添加类.placeholder的列表项。

示例：的

<li is="tabs-tab" class="texteditor tab sortable modified active" data-type="TextEditor">...</li>
<li class="placeholder"></li>
<li is="tabs-tab" class="texteditor tab sortable modified" data-type="TextEditor">...</li>

然后，您可以展开占位符项并修改:before / :after伪元素。

以下是 Atom Dark 主题的示例：

.tab-bar .placeholder:before {
    z-index: 1;
    margin: 0;
    width: 2px;
    height: 2.5em;
    background-color: #519fee;
}

.tab-bar .placeholder:after {
    z-index: 0;
    top: 1.25em;
    margin: -4px 0 0 -3px;
    border-radius: 0;
    border: 4px solid #519fee;
    transform: rotate(45deg);
    background: transparent;
}

希望这有帮助！

Answer 2

拖动标签时该行的类名称为placeholder。请尝试下面的代码，看看我的意思。

.placeholder {
  background-color: yellow !important;
}

Answer 3

我使用的是Atom 1.14.4版。我已经检查了我在tab-bar上应用了ul类的版本中的开发人员工具。此ul的列表元素具有属性background。你可以改变它。