[РЕШЕНО] Внешний вид 57 - скруглить края вкладок и убрать анимацию

effrit · №1

Всем привет!
После обновления выпал в осадок от серого дизайна, полез разбираться с кастомизацией.
Благодаря помощи товарищей удалось:

Cкруглить вкладки, сдвинуть панель с ними вверх, чтобы меньше места занимали.
Вернуть позитивные папки, вместо надгробий. Папки вертикальные (какие были), сначала думал повернуть, а потом привык - так лучше отбивка даже. Кому надо - перевернет.
Уменьшить высоту адресной строки.

Кастомизация на основе стандартной светлой темы, так что любители черного фона - ~~страдайте~~ перекрашивайте
Все значимые изменения отмечены комментариями, так что стирайте или комментируйте то, что вам не нужно.
последний вариант:

OLD:

Как отключить богомерзкий градиент, который пробегает по вкладке после полной загрузки страницы?
В адресной строки вбить about:config, найти и переключить в false свойство toolkit.cosmeticAnimations.enabled

Как растянуть адресную строку на всю доступную ширину?
Если до самых левых кнопок, то щелкаем правой кнопкой по пустому месту панели - Изменить, утаскиваем элемент "растягивающийся интервал".
Если нужно просто ему ширину задать, то лезем в файл стилей, ищем фрагмент
"отступ слева у адресной строки (до иконки с домиком)", раскоментируем строку ниже и ставим там нужный отступ в пикселях (сейчас там 20), сохраняем и перезапускаем FF.

Как применить кастомизацию?
скачать и положить в папку chrome
https://yadi.sk/d/1WFTOCzf3PphC7

По дефолту получите вариант с первого скриншота, но если перезатрете userChrome.css другими версиями (рядом лежат), то получите чуть иной вид. В частности, второй скриншот - это вариант OLD.

Где взять эту папку?
В адресную строку вбиваете about:support открываете папку профиля и там создаете (если её нет) папку chrome.
Внутрь распаковываете архив. Перезагружаете браузер.

надеюсь, кому-то поможет :music:

постфактум, обнаружил вход в матрицу!
https://github.com/Aris-t2/CustomCSSfor … attributes
включаем панель отладки и исследуем интерфейс, как обычную страницу!

Отредактировано effrit (19-11-2017 17:13:54)

unter_officer · №2

effrit пишет

как можно скруглить верхний бордюр активной вкладки?

Попробуйте так:

Выделить код

Код:

.tab-background[selected="true"] {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

effrit · №3

так, с простым разобрались, вот так работает

Выделить код

Код:

.tab-background[selected="true"] {
border-radius: 13px 13px 0px 0px !important;
}

Спасибо!

Теперь бы как-то прибить анимацию и можно жить

unter_officer · №4

effrit пишет

Спасибо!

А можно глянуть ваш стиль по вкладкам целиком. Я уже запарился внешний вид вкладок под себя подгонять, а то, что получилось у вас, мне понравилось.

villa7 · №5

effrit
А так
browser.tabs.animate;false
Или гляньте в настройках что нибудь типа animate, animation, и т.д.

Отредактировано villa7 (17-11-2017 16:45:52)

effrit · №6

unter_officer, давайте я домучаю его немного и тут выложу сегодня или завтра. думаю, не двое нас таких, которые не в восторге

villa7, в свойствах, доступных черех about:support не вижу такого. где-то ещё надо смотреть?
вариации на тему tab, anima тоже ничего не дают, увы :angry:

Отредактировано effrit (17-11-2017 16:52:55)

villa7 · №7

effrit
about:config

FMRUser · №8

С переключением toolkit.cosmeticAnimations.enabled анимация пропадает, что еще отключит - не знаю.

villa7 · №9

FMRUser
https://www.ghacks.net/2017/07/06/how-to-disable-animations-in-firefox-photon/

effrit · №10

спасибо, комрады, по ходу, toolkit.cosmeticAnimations.enabled - это то, что надо :music:

FMRUser · №11

effrit пишет

https://www.ghacks.net/2017/07/06/how-to-disable-animations-in-firefox-photon/

Ну да, к гадалке не ходи.
==================
В browser.css есть:

скрытый текст

Выделить код

Код:

/* Tab hover */

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
  background-color: rgba(0,0,0,.1);
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
  background-color: rgba(255,255,255,.1);
}

.tab-line:not([selected=true]) {
  opacity: 0;
  transform: scaleX(0);
  transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
}

.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
  background-color: rgba(0,0,0,.2);
  opacity: 1;
  transform: none;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
  background-color: rgba(255,255,255,.2);
}

..если оно, то как изменить не знаю.

effrit · №12

Готово. В шапку заколупал, все, что смог сотворить.
Мне хватит, но если кто в курсе - можно дописать, как уменьшить высоту вкладок нормально (сейчас они тупо сдвигаются вверх и снизу чутка режутся).
Если верхнее меню по дефолту скрыто, как у меня, то это норм. Если нет - то видно, что они слегка наползают.
По фэншую сам блок с ними по высоте бы сократить и будет вообще хорошо.

ibb1386 · №13

Очень даже ничего так, но иные, стандартные тему кроме "Светлой" лучше не использовать =-)

effrit · №14

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

dalex · №15

спасибо, то что нужно, чтобы не броситься ставить старую версию.
Вот еще чтобы сделать вкладки в несколько рядом работающий вариант
https://www.reddit.com/r/firefox/comments/6yvi2j/yet_another_collection_of_addons_to_imitate_tab/dmrniao/?context=1

AjiTae · №16

effrit пишет

Г но если кто в курсе - можно дописать, как уменьшить высоту вкладок нормально

Первый набросок липосакции нового фокса, с которым пока живу:

Выделить код

Код:

.tab-content{
    margin: 0 !important;
    padding: 0 3px 0 6px !important;
}

toolbarbutton,
#toolbar-menubar{
    margin: 0 !important;
    padding: 0 3px !important;
}
.tab-content[pinned]{
    --tab-min-width: 10px !important;
    padding: 0 3px !important;
}
:root{
    --tab-min-width: 100px !important;
    --tab-min-height: 28px !important;
}
#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image{
    min-height: var(--tab-min-height) !important;
}
#urlbar, .searchbar-textbox {
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    height: 26px !important;
}
#menubar{
    padding-top: 0 !important;
}
#nav-bar {
    height: 32px !important;
}
#nav-bar-customization-target{
    padding: 0 !important;
}

Что-то тут может быть вам не нужно, но высоту режет как надо.)

Отредактировано AjiTae (17-11-2017 21:52:02)

fonto · №17

effrit пишет

Как отключить богомерзкий градиент, который пробегает по вкладке после полной загрузки страницы?
В адресной строки вбить about:config, найти и переключить в false свойство toolkit.cosmeticAnimations.enabled

так намного лучше! а то когда много вкладок открываю мигает как на дискотеке :tongue2:

effrit · №18

AjiTae, спасибо, заюзал пару строк и еще пару пикселей высоты отвоевал у браузера. днем ещё надо пошаманить будет.

unter_officer · №19

effrit пишет

Готово. В шапку заколупал, все, что смог сотворить.

effrit
Большое спасибо. :beer:

effrit · №20

еще помучил немного, уменьшил высоту вкладок без наезжания на верхнее меню, кнопку "назад" уменьшил. (скрин и аттач в первом посте)
отладчик перестал запускаться :angry: , видимо, устал от меня
но в принципе, все уже устраивает. хотел ещё бордюр градиентным сделать по краям вкладок (сейчас там полупрозрачная палка торчит, не критично, но на светлом фоне видно).
даже нашел, где это задается (в css закомментировал фрагмент), но чего-то не взлетело.
у кого прямые руки - можете доделать этот момент.

ofizer · №21

effrit
А Вы не знаете, как можно вернуть старый поиск, где нет "Искать в..." и показа поисковых систем?

effrit · №22

ofizer, я давно отдельным окном не пользуюсь - сразу в адресную строку вбиваю, а для неё настройки есть, чтобы не вываливало предварительные результаты.
имхо, это удобно, и не захламляет интерфейс лишним окошком.

Отредактировано effrit (18-11-2017 10:17:14)

rubel · №23

effrit пишет

а для неё настройки есть, чтобы не вываливало предварительные результаты.

А что это за настройки, можно подробнее.

effrit · №24

Настройки - вкладка Поиск, или так, в браузере вбить
about:preferences#search
снимаете галочки с "Отображать поисковые предложения" и со всех браузеров из списка ниже.

ofizer · №25

effrit пишет

Настройки - вкладка Поиск, или так, в браузере вбить
about:preferences#search
снимаете галочки с "Отображать поисковые предложения" и со всех браузеров из списка ниже.

Да нет, поисковые предложения мне нужны. Мне не нужны предлагаемые поисковики, которые отображаются при поиске (Искать в... далее кнопки поисковиков). Нужный поиск был, кажется, до 43-ей версии FF.

Полезная информация