Настройка внешнего вида Firefox в userChrome.css

sandro79 · №3651

skoda53 пишет

Ребята подскажите код изменить цвет папки на панели закладок фф 57

Скачайте custom_css_for_fx_v1.7.4.zip Цвет папок закладок в старом стиле по дефолту.
Там множество настроек. Распаковать архив в папку chrome, и закинуть в профиль.

Отредактировано sandro79 (04-03-2018 00:10:11)

skoda53 · №3652

skoda53 пишет

Ребята подскажите код изменить цвет папки на панели закладок фф 57.
Серый не приятный.
https://i.imgur.com/UX6hU3s.png

Нашел решение

.bookmark-item[container=true] {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABAklEQVR42mNkoBAwAjEXEAcCMTsW+U9AvB6I/+I0gJ2Noe3QJoZKASEgjwkq+h+C795lYPCKZMgC8mZg0fsfbICIIMOcF6cZkrGZ/v8fA0PndIa/7z8BXfAPqgVKv//A8GPeZoYERmE+hjmP1+AwAOgiTjOIP7HZLyjLMJNRmB/ogjMMyYzsUC8wIhQwsgCFWHAHoKAy0AARIYY5r69idwEhIKgBMgAYBq8vkGmALsyAU2QaYAwz4CiZBliADBAAGnCATANsYQbsJtMAJ5ABwGh8uZE8A4R9gAYwMzHkT8hl6Bfgxp5ecIH3Xxj+F05hyIdpUmXAnpnwge9AfJckW7EBAC/gSzisxsnmAAAAAElFTkSuQmCC") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

.bookmark-item[container="true"][open=true] {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABAklEQVR42mNkoBAwAjEXEAcCMTsW+U9AvB6I/+I0gJ2Noe3QJoZKASEgjwkq+h+C795lYPCKZMgC8mZg0fsfbICIIMOcF6cZkrGZ/v8fA0PndIa/7z8BXfAPqgVKv//A8GPeZoYERmE+hjmP1+AwAOgiTjOIP7HZLyjLMJNRmB/ogjMMyYzsUC8wIhQwsgCFWHAHoKAy0AARIYY5r69idwEhIKgBMgAYBq8vkGmALsyAU2QaYAwz4CiZBliADBAAGnCATANsYQbsJtMAJ5ABwGh8uZE8A4R9gAYwMzHkT8hl6Bfgxp5ecIH3Xxj+F05hyIdpUmXAnpnwge9AfJckW7EBAC/gSzisxsnmAAAAAElFTkSuQmCC") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

Niclaus · №3653

skoda53
Лучше всё-таки не внедрять base64-код в userChrome.css, а сделать отдельно лежащей картинкой с ссылкой на неё.
С base64 в коде сильно тормозит при старте — у меня три секунды запускается, а с картинкой только одну с момента клика на ярлык.

у меня вот так

Выделить код

Код:

.bookmark-item[container] {
 list-style-image: url("./image/folder-item.png") !important;
 -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

сама картинка

Отредактировано Niclaus (28-12-2017 04:39:51)

Vitaliy V. · №3654

Niclaus пишет

Лучше всё-таки

Нет ещё лучше не заменять дефолтную svg иконку на png если нужно просто поменять цвет, на любой https://forum.mozilla-russia.org/viewto … 50#p751150
это и в боковой панели работает

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

или если заменять то на svg и правильным кодом а не просто .bookmark-item[container] {list-style-image: ...} - такой код заменит все папки а они не все одинаковые...

Отредактировано Vitaliy V. (28-12-2017 13:13:00)

skoda53 · №3655

Niclaus пишет

skoda53
Лучше всё-таки не внедрять base64-код в userChrome.css, а сделать отдельно лежащей картинкой с ссылкой на неё.
С base64 в коде сильно тормозит при старте — у меня три секунды запускается, а с картинкой только одну с момента клика на ярлык.
у меня вот так
Выделить код
Код:
.bookmark-item[container] {
 list-style-image: url("./image/folder-item.png") !important;
 -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}
сама картинка
http://i12.pixs.ru/storage/1/1/9/folder … 813119.png

Да нет тормозов ни каких , загружается за 1 сек. Спасибо.

Acid Crash · №3656

Vitaliy V. пишет

Нет ещё лучше не заменять дефолтную svg иконку на png если нужно просто поменять цвет, на любой https://forum.mozilla-russia.org/viewto … 50#p751150

Привествую, а можно подправить, чтобы цвет и в Библиотеке(Ctrl+Shift+B) менялся?

skoda53 · №3657

Может,кто знает можно ли изменить вид кнопки "вперед-назад" , хотя бы на такую

Vitaliy V. · №3658

Acid Crash пишет

Привествую, а можно подправить, чтобы цвет и в Библиотеке(Ctrl+Shift+B) менялся?

Так он и меняется везде

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

Скорей всего у вас код ограничен @-moz-document url("chrome://browser/content/browser.xul") { код }
Перенесите мой код из @-moz-document в другой @-moz-document url-prefix("chrome:") { код }
или просто переместите без @-moz-document

Отредактировано Vitaliy V. (29-12-2017 14:13:15)

Acid Crash · №3659

Vitaliy V. пишет

Так он и меняется везде

Спасибо, разобрался, я код для теста только в ТулБокс вписал, потому не везде работало.
Как прописал в CSS - везде применилось.

Отредактировано Acid Crash (29-12-2017 14:58:13)

voffka69 · №3660

Приветствую! Может кто в курсе, как переместить поле поиска по странице (Cntr-F) из нижней части куда-нибудь под адресную строку?

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

Нагуглил таки решение:

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

.browserContainer findbar {
-moz-box-ordinal-group: 0 !important;
}
.findbar-container {-moz-box-direction: reverse !important;}

Отредактировано voffka69 (29-12-2017 21:19:20)

sandro79 · №3661

voffka69

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

Выделить код

Код:

:-moz-any(.browserContainer, #viewSource) .findbar-container :-moz-any(spacer, .findbar-find-fast[anonid="match-case-status"]) {
  visibility: collapse;
}

:-moz-any(.browserContainer, #viewSource) .findbar-closebutton {
  position: relative !important;
  top: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-margin-end: 2px !important;
}

:-moz-any(.browserContainer, #viewSource) .findbar-closebutton  .toolbarbutton-icon{
  width: 16px !important;
  height: 16px !important;
}
:-moz-any(.browserContainer, #viewSource) .findbar-textbox {
  font-size: 14px !important;
}

:-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) {
  -moz-box-ordinal-group: 0;
  position: fixed !important;
  margin-top: -1px !important;
  box-shadow: unset !important;
  border: 1px solid #e1e1e2 !important;
  border-top: 0px solid transparent !important;
  border-radius: 0 0 3px 3px;
  transition-property: margin-top, opacity, visibility !important;
  background-image: unset !important;
}

#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']):-moz-lwtheme :-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) {
  border: 1px solid var(--tabs-border-color) !important;
  border-top: 0px solid transparent !important;
}

#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']):-moz-lwtheme :-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) .findbar-container {
  background-image: linear-gradient(to bottom, var(--toolbar-bgcolor),transparent) !important;
  -moz-margin-end: -18px !important;
  -moz-padding-end: 18px !important;
}

/* space before findbar */
:-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar):-moz-locale-dir(ltr) {
  left: 5px;
}
:-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar):-moz-locale-dir(rtl) {
  right: 5px;
}

/* increase width to full window size *//*
:-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}
 
/**//*
#viewSource #FindToolbar {
  background-color: -moz-dialog;
  color: -moz-dialogtext;
}

/* exclude these from Windows Classic theme */
:-moz-any(.browserContainer,#viewSource) .findbar-button {
  -moz-appearance: toolbarbutton !important;
  background: unset !important;
  box-shadow: unset !important;
}
.browserContainer findbar toolbarbutton * {
  background: unset !important;
  box-shadow: unset !important;
}
/**/

:-moz-any(.browserContainer, #viewSource) :-moz-any(.findbar-find-status,.found-matches) {
  -moz-margin-start: 4px !important;
  -moz-margin-end: 4px !important;
  font-weight: bold !important;
}
:-moz-any(.browserContainer, #viewSource) .findbar-find-status {
  font-style: italic !important;
}
#main-window:not(:-moz-lwtheme-brighttext) :-moz-any(.browserContainer, #viewSource) .findbar-find-status {
  color: red !important;
}
#main-window:not(:-moz-lwtheme-brighttext) :-moz-any(.browserContainer, #viewSource) .found-matches {
  color: green !important;
}
#main-window:-moz-lwtheme-brighttext :-moz-any(.browserContainer, #viewSource) :-moz-any(.findbar-find-status,.found-matches) {
  color: white !important;
}

/* status at findbars start *//*
:-moz-any(.browserContainer, #viewSource) :-moz-any(.findbar-find-status,.found-matches) {
  -moz-box-ordinal-group: 0;
  -moz-margin-start: 0px !important;
  -moz-margin-end: 6px !important;
}
/**/

:root {
  --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_text_color: inherit;
  --general_toolbar_text_shadow: unset;
}

/* navigation toolbar background */
#nav-bar:not(:-moz-lwtheme) {
  background: unset !important;
  border: unset !important;
  box-shadow: unset !important;
}

/* toolbar background */
toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  background: unset !important;
  border: unset !important;
  box-shadow: unset !important;
}

/* hide toolbar shadow */
#nav-bar:not(:-moz-lwtheme),
toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  -moz-appearance: none !important;
  box-shadow: unset !important;
}

#nav-bar:not(:-moz-lwtheme) {
  background-image: var(--general_toolbar_color_navbar) !important;
}

toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  background-image: var(--general_toolbar_color_toolbars) !important;
}

/* set white text for toolbar items */
#main-window:not(:-moz-lwtheme) #PersonalToolbar #bookmarks-menu-button::after,
#main-window:not(:-moz-lwtheme) toolbar > toolbarbutton > .toolbarbutton-text,
#main-window:not(:-moz-lwtheme) #nav-bar-customization-target > toolbarbutton > .toolbarbutton-text,
#main-window:not(:-moz-lwtheme) #main-menubar > menu > :-moz-any(label,description),
#main-window:not(:-moz-lwtheme) #PlacesToolbarItems toolbarbutton > :-moz-any(label,description) {
  color: var(--general_toolbar_text_color) !important;
  text-shadow: var(--general_toolbar_text_shadow) !important;
}

/* findbar */
#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']) :-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) {
  background: var(--general_toolbar_color_toolbars) !important;
}

#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']):-moz-lwtheme :-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) {
  background: var(--lwt-header-image) !important;
  background-position: calc(100vw - 5px) !important;
}

#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']):-moz-lwtheme :-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) :-moz-any(.toolbarbutton-icon,.toolbarbutton-text) {
  color: var(--lwt-text-color) !important;
  fill: var(--lwt-text-color) !important;
}
#main-window:not([style*='--lwt-header-image:url("resource:///chrome/browser/content/browser/defaultthemes/compact.header.png");']):-moz-lwtheme-brighttext :-moz-any(.browserContainer,#viewSource) :-moz-any(findbar,#FindToolbar) :-moz-any(.toolbarbutton-icon,.toolbarbutton-text) {
  text-shadow: 1px 1px 1px black !important;
}

/**/

Ваше решение при вызове сдвигает содержимое страницы вниз.

Отредактировано sandro79 (29-12-2017 21:25:57)

voffka69 · №3662

sandro79 пишет

Ваше решение при вызове сдвигает содержимое страницы вниз.

Тогда так

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

.browserContainer findbar {
-moz-box-ordinal-group: 0 !important;
}
.findbar-container {-moz-box-direction: reverse !important;}

.browserContainer findbar, #viewSource #FindToolbar {
-moz-box-ordinal-group: 0;
position: fixed !important;
right: 30px;
margin-top: -1px !important;
box-shadow: 1px 2px 3px rgba(0, 0, 0, .25) !important;
border: 1px solid threedshadow !important;
border-top: none !important;
border-radius: 0 0 3px 3px;
transition-property: margin-top, opacity, visibility !important;
}

sandro79 · №3663

voffka69
Спасибо за помощь. Подойдёт.

Ultima2m · №3664

voffka69
А переместить findbar вправо и вверх экрана и убрать надписи с кнопок можно?

Coroner · №3665

Ultima2m пишет

А переместить findbar вправо и вверх экрана и убрать надписи с кнопок можно?

Findbar on Top Right

Ultima2m · №3666

Всем спасибо. Разобрался.
Был конфликт с findbar_on_top.css из CTR-пакета.
Поэтому, другие стили никак не влияли на findbar.
Осталось убрать надписи на кнопках.

Ultima2m · №3667

2 Vitaliy V.
У меня два вопроса:
можно ли переместить вашу панель вверх?
Есть ли кнопка "показать/скрыть панель"?

Viatcheslav · №3668

Ultima2m пишет

Есть ли кнопка "показать/скрыть панель"?

Отвечу, пока нет автора. Есть кнопка закрытия панели (аналогично закрытию вкладки). Дополнительно включить/отключить панель можно из контекстного меню (ПКМ по панели меню [firefox] ), включая/снимая чекбокс Нижняя панель
Про перемещение вверх - увы, не знаю

Ultima2m · №3669

Привет.
Как уменьшить расстояние между кнопок на панели навигации (красный)
И еще на этой панели кнопки СВ растягиваются (синий). Как лечить?

Менять пропорции иконок не хочу - лень.

Vitaliy V. · №3670

Ultima2m пишет

2 Vitaliy V.
У меня два вопроса:
можно ли переместить вашу панель вверх?
Есть ли кнопка "показать/скрыть панель"?

Ну в самый верх добавлять не стоит там панель меню и вкладок лучше под панель адреса nav-bar
Кнопка "Переключить панель" есть но по умолчанию находится в хранилище её можно перенести на другую панель чтобы можно было Скрыть / Показать эту панель
На панели по умолчанию находятся кнопки: tooltiptext: "Показать / Скрыть Историю","Показать / Скрыть Закладки","Перезапустить приложение" их можно перенести или убрать в хранилище.
пробуйте
скачать или отсюда скачать
Не использовать вместе с https://forum.mozilla-russia.org/viewto … 46#p748946 и др. похожими стилями.

Ultima2m пишет

Как уменьшить расстояние между кнопок на панели навигации

если не помешают другие стили можно попробовать включить в персонализации компактные значки и дополнительно применить код

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

Выделить код

Код:

#nav-bar .toolbarbutton-1 {
    padding: 0px !important;
}

#nav-bar .toolbarbutton-badge {
    margin-inline-end: -5px !important;
}

или если сработает (в [nightly] работает) лучше так

Выделить код

Код:

#nav-bar {
    --toolbarbutton-outer-padding: 0px !important;
}

#nav-bar .toolbarbutton-badge {
    margin-inline-end: -5px !important;
}

или свои стили покажите или разбирайтесь с ними, кстати кнопки возможно растягиваются из-за них

Отредактировано Vitaliy V. (06-04-2018 00:29:26)

Vitaliy V. · №3671

Viatcheslav пишет

Есть кнопка закрытия панели (аналогично закрытию вкладки). Дополнительно включить/отключить панель можно из контекстного меню (ПКМ по панели меню ), включая/снимая чекбокс Нижняя панель

В том стиле https://forum.mozilla-russia.org/viewto … 46#p748946 помимо встроенной кнопки на панели есть перемещаемая кнопка "Переключить панель" по умолчанию находится в хранилище.
Кстати заодно его обновил.

Viatcheslav · №3672

Vitaliy V. пишет

В том стиле https://forum.mozilla-russia.org/viewto … 46#p748946 помимо встроенной кнопки на панели есть перемещаемая кнопка "Переключить панель" по умолчанию находится в хранилище.
Кстати заодно его обновил

А можно узнать, что за изменения? Спасибо

Vitaliy V. · №3673

Viatcheslav пишет

что за изменения?

Изменил метод добавления перемещаемых кнопок - CustomizableUI.jsm вместо оверлея

Ultima2m · №3674

Привет

Vitaliy V. пишет

если не помешают другие стили

Ругается на margin-inline-end:. Пишет, что неизвестное выражение.
Через chrome тоже не запустилось. Хотя на фф 57, вроде должно было бы.

Последняя панель работает нормально. Только расположение внизу для меня не очень удобно.
Если возможно, то сделать "доп. панель" ниже всех других панелей (навигации и закладок)
Прошлый раз я неточно выразил желание и панель получилась между панелями навигации и закладок, что не очень функционально.

С искажением кнопок тоже разобрался. Влиял один из стилей CTR.
Никогда бы не подумал на него, спасибо за подсказку.

Vitaliy V. · №3675

Ultima2m пишет

Ругается на margin-inline-end:. Пишет, что неизвестное выражение.

Где ругается в консоли? это может только в старых версиях [firefox] https://developer.mozilla.org/en-US/doc … inline-end
а тот код для 57+
в стилях браузера уже давно используется margin-inline-end: вместо -moz-margin-end:

Ultima2m пишет

Если возможно, то сделать "доп. панель" ниже всех других панелей (навигации и закладок)

В overlay.xul замените insertafter="nav-bar" на insertafter="PersonalToolbar" или можно совсем удалить этот атрибут.

Отредактировано Vitaliy V. (02-01-2018 12:44:37)

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

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Board footer