☰

如何减小按钮尺寸？

tag-icon • tag-icon gnome themes button
如何减小按钮尺寸？

我正在使用塞拉主题。一切都很好，除了 Eclipse 中的按钮大小。

看到这张照片

看到那张图片了吗？所有按钮的高度都大于文本框。这显然不太好看，所以我想降低这些按钮的高度。所以我尝试编辑 gtk.css 文件：

button {
  min-height: 20px; /* ********** I have changed this value only, nothing else ********** */
  min-width: 16px;
  transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid;
  border-radius: 5px;
  padding: 0 6px;
  color: #242424;
  border-color: rgba(0, 0, 0, 0.12);
  background-color: white;
  box-shadow: 0px 1px 1px 0px rgba(16, 16, 16, 0.04), 0px 1px 2px 0px rgba(16, 16, 16, 0.01), inset 0 0 0 1px rgba(0, 0, 0, 0.01);
}

但我无法使按钮的高度等于文本框的高度。

看到这张照片

无论我如何降低最小高度，按钮仍然大于文本框。

那么，我怎样才能将按钮的高度降低到与文本框的高度相等？我应该再编辑一行gtk.css？（我只需要编辑按钮，不需要其他内容）

谢谢 :D

答案1

看一眼这个 GitHub 页面对于有类似问题的用户，该答案的其余部分将引用该来源。

他们给出的示例基础代码如下

button {
        min-height: 22px;
        min-width: 24px;
        @include button(shade($bg_color, 1.2), $fg_color);

        .inline-toolbar &,
        .linked > & { @include linked_button(shade($bg_color, 1.2)); }

        .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }

        &.circular { // FIXME: aggregate to buttons
            border-radius: 20px;
            -gtk-outline-radius: 20px;

            label { padding: 0; }
        }
    }

注意前两行，min-height您min-width说您现在只改变了高度，但是，如果主题中启用了将按钮锁定到一定比例的选项（通常是为了防止文本换行），您将需要同时更改高度和宽度才能看到效果：

button {
        min-height: 11px;
        min-width: 12px;
        @include button(shade($bg_color, 1.2), $fg_color);

        .inline-toolbar &,
        .linked > & { @include linked_button(shade($bg_color, 1.2)); }

        .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }

        &.circular { // FIXME: aggregate to buttons
            border-radius: 20px;
            -gtk-outline-radius: 20px;

            label { padding: 0; }
        }
    }

页面上还有一些其他评论；

将最小高度和宽度设置为 16px 以下应该可以解决问题。但这需要反复试验。

尝试使用最小高度/宽度 = 16/14 或 14/12，然后尝试优化。一切都应按比例变化。

页面本身的更新日志表明这个问题从未真正得到解决，只是开发了一种解决方法。希望这能有所帮助。

相关内容