如何摆脱GNOME面板按钮中的“border-bottom”风格

Question

我想制作新的gnome-shell主题，现在主题还缺乏文档。

请查看下图，

我想摆脱border-bottom（可能）。我试着用几种方法改变其他元素，而不是我的意思。

在这里，我尝试使用.panel-button类操作元素，

.panel-button {
       border: 1px solid #ff0;
}

.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
       border: 1px solid #ff0;
}

但不，它会产生意想不到的结果。

Answer 1

这是一种奇怪的方式，但我自己通过查看gnome-shell-viva主题来源找到了。 我们可以使用相同颜色的渐变

.panel-button:active,
.panel-button:checked,
.panel-button:focus,
.panel-button:hover,
.panel-button:overview {
    background-gradient-direction: vertical;
    background-gradient-start: $bg-color;
    background-gradient-end: $bg-color;
}

这不是一个完美的答案，仍然看起来更好。

Answer 2

必须更改的属性是box-shadow属性。

#panel .panel-button:active,
#panel .panel-button:overview,
#panel .panel-button:focus,
#panel .panel-button:checked {
  box-shadow: none;
}