Как уменьшить размер кнопки?

Question 1

Я использую Сьерра тему. Все в порядке, но кроме размера кнопки в затмении.

Видеть то изображение? вся высота кнопки больше, чем текстовое поле. Это, очевидно, не выглядит хорошим, таким образом, я хочу уменьшить высоту этих кнопок. Таким образом, я попытался отредактировать 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

Question 2

Смотрите на эту страницу 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; }
        }
    }

Заметьте 2 первых строки, 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; }
        }
    }

Пара большего количества комментариев к странице;

Установка минимальной ширины высоты ниже 16 пкс должна решить вопрос. Но это призывает к методу проб и ошибок.

Попытайтесь использовать минимальную высоту/ширину = 16/14 или 14/12 и затем попытайтесь оптимизировать. Все должно измениться пропорционально.

Журнал изменений самой страницы указывает, что это - проблема, которая действительно никогда не разрешалась, было больше разработанное обходное решение.Надеюсь, это поможет.

score 0 · Answer 1 · 25 April 2020 в 10:41