0

I am using the Sierra theme. Everything is alright, but except the button size in eclipse.

see this picture

See that image? all of the button's height is larger than the text box. It obviously doesn't look good, so I want to decrease the height of these buttons. So I have tried to edit the gtk.css file:

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);
}

But I cannot make the height of the button equal to the height of the text box.

see this picture

No matter how much I reduce the value of min-height, the button remains larger than the text box.

So, how can I reduce the height of the button equal to the height of the text box? Should I edit another line of gtk.css? (I need to edit only buttons, nothing else)

Thank you :D

1 Answer 1

0

Take a look at this GitHub page for a user with a similar issue, the rest of this answer will be citing that source.

The example base code they gave was the following

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; }
        }
    }

Notice the 2 first lines, min-height and min-width You say that you have only changed height as of now, however, if there are options enabled in the theme to lock buttons to a certain ratio (usually to prevent text wrapping), you will need to change both height and width to see an effect:

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; }
        }
    }

A couple more comments on the page;

Setting min height-width below 16px should resolve the issue. But this calls for trial and error.


Try using min height/width = 16/14 or 14/12 and then try optimizing. Everything should change proportionally.

The changelog of the page itself indicates this is a problem that was never really resolved, there was more so a workaround developed. Hope this helps.

1
  • Thank you very much sir, but button is still larger than text field. I have tried changing both height and width, I have tried some combination of height and width but no luck. button size decreased, but not the same as text field :(
    – Shawmik
    May 2, 2020 at 16:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .