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

Анатолий58 · №11151

С вкладками разобрался все стало идеально "олд"
Кто еще подскажет как изменить, если такое возможно - активный цвет.., т.е. в настройках чекбоксы - бирюзовый цвет" стандартный заменить на свой! он же есть на активном урл баре..

ebe1961 · №11152

Люди! Дайте пожалуйста настройки в файл userChrome, чтобы изменить шрифт и расстояние между пунктами выпадающего меню настроек (того, что в правом верхнем углу вызывается).

sandro79 · №11153

angelseee пишет

Можно ли переместить кнопки в окне "Мастер-пароля" Firefox по центру, как было раньше?

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

Выделить код

Код:

@-moz-document url("chrome://global/content/commonDialog.xhtml") {
.dialog-button-box {
    margin-right: 65px !important;
}
}

Анатолий58 пишет

как изменить, если такое возможно - активный цвет.., т.е. в настройках чекбоксы

userContent.css

Выделить код

Код:

@-moz-document url(about:preferences), url-prefix(about:preferences) {
.checkbox-check[checked] {
    --checkbox-checked-bgcolor: green !important;
    --checkbox-checked-hover-bgcolor: red !important;
}
.radio-check[selected] {
    --in-content-primary-button-background: green !important;
    --in-content-primary-button-background-hover: red !important;
}
}

ebe1961 пишет

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

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

Выделить код

Код:

#appMenu-multiView .subviewbutton > .toolbarbutton-text {
    font-style: oblique !important;
    font-size: medium !important;
}

https://forum.mozilla-russia.org/viewto … 16#p792816

Отредактировано sandro79 (11-09-2021 12:00:09)

bezuma · №11154

sandro79

расстояние между пунктами выпадающего меню настроек

:beer: как раз этого не хватало для гармонии

angelseee · №11155

sandro79 пишет

angelseee пишет
Можно ли переместить кнопки в окне "Мастер-пароля" Firefox по центру, как было раньше?
скрытый текст
Выделить код
Код:
@-moz-document url("chrome://global/content/commonDialog.xhtml") {
.dialog-button-box {
    margin-right: 65px !important;
}
}

Премного Вам благодарен!

indastokiliuytr · №11156

А цвет папок в закладках протон как изменить на старый.Они бесцветные сейчас.

ebe1961 · №11157

sandro79

sandro79 пишет

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

Спасибо! А, как изменить расстояние между пунктами это го меню?

DenKa · №11158

ebe1961 пишет

чтобы изменить шрифт и расстояние между пунктами выпадающего меню настроек
Спасибо! А, как изменить расстояние между пунктами это го меню?

Выделить код

Код:

:root {--arrowpanel-menuitem-padding: 4px 8px !important;}

Отредактировано DenKa (11-09-2021 22:49:06)

usalex · №11159

Vitaliy V., опять нужна ваша помощь в вопросе уменьшения высоты панели вкладок.
На 90 использовал такой ваш код и всё устраивало:

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

/* Уменьшить высоту панели вкладок */
:root:not([uidensity="touch"]) {
--proton-tab-block-margin: 0px !important;
--tab-block-margin: 0px !important;
--tab-border-radius: 0px !important;
--tab-min-height: 23px !important;
--toolbarbutton-outer-padding: 1px !important;
--bookmark-block-padding: 1px !important;
--toolbarbutton-inner-padding: 4px !important;
--toolbar-start-end-padding: var(--toolbarbutton-outer-padding) !important;
--urlbar-min-height: 24px !important;
--urlbar-icon-padding: 3px !important;
--urlbar-container-padding: 0px !important;
--v-textbox-padding: 1px;

Высота панели вкладок с этим кодом была 24 пикселя (это высота именно панели вкладок - там, где заголовки страниц пишутся).

Но на 92 высота этой панели почему-то увеличилась до 26 пикселей.
Подскажите, пожалуйста, как вернуть былые 24 px ?
(и можно ли в коде задавать напрямую в пикселях высоту этой панели?)

DenKa · №11160

usalex пишет

в вопросе уменьшения высоты панели вкладок

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

Выделить код

Код:

#titlebar,
#tabbrowser-tabs {
    --tab-min-height: 30px !important;
}

sandro79 · №11161

ebe1961 пишет

А, как изменить расстояние между пунктами это го меню?

Ну там же ссылка на код. И не только расстояние между пунктами.

indastokiliuytr пишет

А цвет папок в закладках протон как изменить на старый.Они бесцветные сейчас.

Так попробуйте https://forum.mozilla-russia.org/viewto … 46#p793946

Vitaliy V.
Подскажите пожалуйста по возврату бордюра у меню папок панели закладок в 92+. Он выставлен в 0 в chrome://browser/skin/customizableui/panelUI.css
Вернуть-то его получается только в инспекторе, если прописать border: 1px solid var(--arrowpanel-border-color); для #PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox).
А средствами css если, правило #PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox) {border: 1px solid var(--arrowpanel-border-color) !important;} уже не подхватывается. Через css получается только в custom_style_author.css комплекта user_chrome_files
Я так понимаю, недостаточно прав через просто userChrome.css или custom_style_user.css чтоб бордюр вернуть, а можно ли обойти как-то это ограничение, кроме как использованием кода в custom_style_author.css?

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

10,

92, только custom_style_author.css без др. стилей

Выделить код

Код:

#PlacesToolbar menupopup[placespopup="true"]::part(arrowscrollbox) {
	border: 1px solid var(--panel-border-color) !important;
}

Анатолий58 · №11162

sandro79,
Спасибо работает..
Еще бы хотелось, сделать обводку точнее "контур-бордюр" "урл бара" и цвет шрифта..

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

alur · №11163

Перешел на ESR 91.1.0 ибо постоянные обновления задолбали, последнее обновление немного что то поломало, подправил код CSS, без наворотов классика, компактный режим в комплекте

userChrome.css 91.1.0 esr

Выделить код

Код:

:root
{
  --lwt-toolbarbutton-hover-background: #CACACA;
  --toolbar-inactive-title-bg-color: #717f93;
  --toolbarbutton-border-color: #9394a4;
  --chrome-content-separator-color: rgba(224, 224, 230, 0.6) !important;

  /* Компактный режим вкладок и значков панели инструментов*/
  --toolbarbutton-inner-padding: 6px !important; /* Изменение размера иконок панели управления */  
  --proton-tab-block-margin: 2px 3px !important;
  --tab-min-height:  27px !important;
  --tabs-shadow-size: 0px !important;
  --tab-border-radius: 12px 12px !important; /* Изменение радиуса вкладок*/
  --arrowpanel-menuitem-padding: 5px !important;
  --panel-font-size: 1.1em !important;
  --arrowpanel-padding: 0.8em !important;
  --arrowpanel-dimmed: color-mix(in srgb, #1ae0ff 35%, transparent) !important;
  --arrowpanel-dimmed-further: color-mix(in srgb, #1ae0ff 40%, transparent) !important;
  --arrowpanel-dimmed-even-further: color-mix(in srgb, #1ae0ff 45%, transparent) !important;  
  --urlbar-icon-padding: 4px !important;

  /* end */

}

/*Цвет текста меню и вкладкок*/

#titlebar > .browser-toolbar {
 background-color: #233969 !important;
}

.menubar-text,
#toolbar-menubar {
  color: #ffffff !important;
}

#main-menubar menu:hover .menubar-text {
  color: #f9f9fb !important;
}

.tabbrowser-tab[selected="true"] {
  color: black !important;
}

.tabbrowser-tab {
  color: white !important;
}

.titlebar-button {
  color: white !important;
}

#tabs-newtab-button{
  fill: #ffffff !important;
}

/* end */

/** Back-button fix **/

#back-button > .toolbarbutton-icon
{
  background: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
  border: 1px solid var(--toolbarbutton-border-color) !important;
  padding: 6px !important;
}

#back-button:not([disabled]):hover > .toolbarbutton-icon
{
  background: var(--lwt-toolbarbutton-hover-background) !important;
}

#zoom-reset-button > .toolbarbutton-text,
#zoom-out-button > .toolbarbutton-icon,
#zoom-in-button > .toolbarbutton-icon,

#reload-button > .toolbarbutton-icon,
#stop-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon

{
  border: 1px solid var(--toolbarbutton-border-color);
}


#nav-bar :-moz-any(#edit-controls, #zoom-controls) separator {
  visibility: collapse !important;
}

/* Высота пунктов меню */

.subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1,
menupopup > menu, menupopup > menuitem, menupopup > menucaption {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

/* end */

/** Цвет рамки значков панели инструментов **/

toolbarbutton[removable="true"] > .toolbarbutton-badge-stack,
toolbarbutton[removable="true"]:not([type="menu"]) > .toolbarbutton-icon,
#nav-bar-overflow-button > .toolbarbutton-icon,
#PanelUI-menu-button > .toolbarbutton-badge-stack
{
  border: 1px solid var(--toolbarbutton-border-color);

/* end */

/* Изменение размера значков на панели инструментов*/

/* - off -

  width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
  height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;

*/  

} 

/* end */


/* удаляет режим чтения из адресной строки*/

#urlbar-input-container :is(#reader-mode-button, #urlbar-zoom-button, #star-button-box)  {
    display: none !important;
}

/* end */

/* убрать жирный бордюр при фокусе в строке адреса и поиска */

#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background {
  border-color: #bbbbbb !important; 
}

/* end */

/* замена иконок в закладках (желтые папки) */

.bookmark-item[container] {
  list-style-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' fill='%23fee082' stroke='%23b28501'><path d='M 7.7500004,3.5 H 13.5 a 2,2 45 0 1 2,2 v 7 a 2,2 135 0 1 -2,2 h -11 a 2,2 45 0 1 -2,-2 v -9 a 2,2 135 0 1 2,-2 H 5.0000004 A 1.3150997,1.3150997 20.81677 0 1 5.8737051,1.8321819 L 7.7500004,3.5 5.8737051,5.1678181 A 1.3150997,1.3150997 159.18323 0 1 5.0000004,5.5 H 0.5'/></svg>") !important;
}

/* end*/

Получилось так

Как разукрасить Firefox

Выделить код

Код:

:root {
  --highlight-grey-1: rgb(240, 240, 240);
  --highlight-grey-2: rgb(224, 224, 224);

  --toolbar-field-non-lwt-bgcolor: #f1f1f1 !important;
  --toolbar-bgcolor: color-mix(in srgb, white 75%, -moz-accent-color) !important;  
  --focus-outline-color: -moz-accent-color !important;

  --lwt-accent-color: -moz-accent-color !important;
  --lwt-toolbar-field-border-color: rgb(190, 190, 190) !important;
  --lwt-toolbar-field: white !important;
  --lwt-toolbar-field-focus: white !important;
  --lwt-toolbar-field-focus-color: black !important;
  --lwt-toolbar-field-highlight: white !important;
  --lwt-toolbar-field-highlight-text: white !important;
  --lwt-toolbar-field-background-color: color-mix(in srgb, white 90%, -moz-accent-color) !important;
  --lwt-selected-tab-background-color:  var(--lwt-toolbar-field-background-color) !important;

  --button-hover-bgcolor: color-mix(in srgb, white 60%, -moz-accent-color) !important;
  --button-active-bgcolor: color-mix(in srgb, white 40%, -moz-accent-color) !important;
  --button-bgcolor: var(--highlight-grey-1) !important;

  --autocomplete-popup-hover-background: var(--highlight-grey-1) !important;
  --autocomplete-popup-highlight-background: var(--highlight-grey-2) !important;
  --arrowpanel-border-color: var(--highlight-grey-1) !important;
}

#titlebar > .browser-toolbar {
 background-color: -moz-accent-color !important;
}

.tabbrowser-tab[selected="true"] {
  color: black !important;
}

.tabbrowser-tab {
  color: white !important;
}

.titlebar-button {
  color: white !important;
}

#tabs-newtab-button {
  fill: color-mix(in srgb, white 70%, -moz-accent-color) !important;
}

Отредактировано alur (13-09-2021 08:18:54)

Анатолий58 · №11164

alur,
из вашего кода взял фикс для своего вопроса.. рамка урлбара..

Осталось решить цвет шрифта..
И всплывайка на просмотре видео, бордюр

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

Vitaliy V. · №11165

usalex пишет

На 90 использовал такой ваш код

Что это за код, даже скобки закрывающей нет.
Если бы все можно было решить одними переменными зачем бы я писал остальной код вам так не кажется?
Вот немного подправил чтобы выиграть 1px https://forum.mozilla-russia.org/viewto … 22#p790422
но меньше 24px на [windows] вкладки то уменьшаться, а #titlebar нет без доп. костыля.

sandro79 пишет

а можно ли обойти как-то это ограничение, кроме как использованием кода в custom_style_author.css?

Именно с использованием ::part нет
но на селекторе arrowscrollbox.menupopup-arrowscrollbox юзер стиль сработает конечно
а только для #PlacesToolbar нет способа обойти shadow DOM но с помощью переменных можно задать отличающиеся значения для #PlacesToolbar
например

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

Выделить код

Код:

#PlacesToolbar {
	--v-panel-border-color: red;
}

arrowscrollbox.menupopup-arrowscrollbox {
	border: 1px solid var(--v-panel-border-color, var(--panel-border-color)) !important;
}

usalex · №11166

DenKa пишет

Код:
#titlebar,
#tabbrowser-tabs {
--tab-min-height: 30px !important;
}

Этот код не помог уменьшить высоту панели вкладок.
Ставил 20 px (и 23 px) -- без разницы (не влияет).

_zt · №11167

Vitaliy V.
Сделайте пожалуйста, зависимый от темы браузера, стиль для уведомлений в углу экрана?
У меня сейчас выдранная откуда-то нелепица затрагивающая еще и сайдбар.

Отредактировано _zt (12-09-2021 16:25:55)

usalex · №11168

Vitaliy V. пишет

Вот немного подправил чтобы выиграть 1px https://forum.mozilla-russia.org/viewto … 22#p790422

Vitaliy V. пишет

но меньше 24px на вкладки то уменьшаться

А у меня не уменьшаются вкладки меньше, чем до 25 px.
И между верхней границей вкладки и границей экрана появился один пиксель.

Эх... Похоже, с этим 92-м уже нормально не получится сделать. Жаль.

Vitaliy V. · №11169

usalex
Со шрифтом то что сделали он и мешает скорей всего, а может и нет,
короче мне надоело со всеми этими стилями, буду только свой поддерживать

usalex пишет

И между верхней границей вкладки и границей экрана появился один пиксель.

Он там и должен быть даже больше чтобы была видна окантовка, это на темной теме её нет а так должна
Добавлено 12-09-2021 17:02:38

_zt пишет

стиль для уведомлений в углу экрана?

Если сделаю добавлю в FullTheme. Для этого в [windows] надо лезть...
А вообще то можно включить и на тоже alerts.useSystemBackend - true

Отредактировано Vitaliy V. (12-09-2021 17:23:26)

usalex · №11170

Vitaliy V. пишет

Он там и должен быть даже больше чтобы была видна окантовка

Этого лишнего верхнего пикселя нет на 92 (темная тема) с предыдущим вашим кодом (вот этим):

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

Выделить код

Код:

/*  Уменьшить высоту панели вкладок и навигации  */
:root:not([uidensity="touch"]) {
    --proton-tab-block-margin: 0px !important;
    --tab-block-margin: 0px !important;
    --tab-border-radius: 0px !important;
    --tab-min-height: 23px !important;
    --toolbarbutton-outer-padding: 1px !important;
    --bookmark-block-padding: 1px !important;
    --toolbarbutton-inner-padding: 4px !important;
    --toolbar-start-end-padding: var(--toolbarbutton-outer-padding) !important;
    --urlbar-min-height: 24px !important;
    --urlbar-icon-padding: 3px !important;
    --urlbar-container-padding: 0px !important;
    --v-textbox-padding: 1px;
	
/*  Уменьшить межстрочный интервал в меню-сэндвич (три полоски в правом верхнем углу) и в Журнале  */
      --arrowpanel-menuitem-padding-block: 1px !important;
      --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) 4px !important;
}
#urlbar-container,
#search-container {
    padding-block: var(--v-textbox-padding, 4px) !important;
}
#PersonalToolbar {
    padding: 0 !important;
}
#personal-toolbar-empty-description,
#PersonalToolbar .toolbarbutton-1,
toolbarbutton.bookmark-item:not(.subviewbutton) {
    margin: var(--toolbarbutton-outer-padding) !important;
}
.titlebar-buttonbox > .titlebar-button,
#minimize-button, #restore-button, #close-button {
    margin: 0 !important;
    padding: 1px 6px !important;
}
.tabbrowser-tab {
    padding-inline: 1px !important;
}
:root[tabsintitlebar][sizemode="normal"] #titlebar {
    appearance: none !important;
}

Отредактировано usalex (12-09-2021 17:48:24)

Vitaliy V. · №11171

usalex пишет

Этого лишнего верхнего пикселя нет на 92 (темная тема) с предыдущим вашим кодом (вот этим):

Был, у меня значение переменной было --tab-block-margin: 1px !important; а не 0
Да уберите 1px вот здесь в новом коде

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

.tab-background {
margin-block: 1px 0 !important;
min-height: 0 !important;
}

Отредактировано Vitaliy V. (12-09-2021 17:52:15)

kokoss · №11172

usalex пишет

DenKa пишет
Код:
#titlebar,
#tabbrowser-tabs {
--tab-min-height: 30px !important;
}
Этот код не помог уменьшить высоту панели вкладок.
Ставил 20 px (и 23 px) -- без разницы (не влияет).

Не помог потому что этот код для изменения высоты вкладок, а не панели вкладок.

sandro79 · №11173

Vitaliy V. пишет

Именно с использованием ::part нет но на селекторе arrowscrollbox.menupopup-arrowscrollbox юзер стиль сработает конечно
а только для #PlacesToolbar нет способа обойти shadow DOM но с помощью переменных можно задать отличающиеся значения для #PlacesToolbar
например
скрытый текст
Выделить код
Код:
#PlacesToolbar {
	--v-panel-border-color: red;
}

arrowscrollbox.menupopup-arrowscrollbox {
	border: 1px solid var(--v-panel-border-color, var(--panel-border-color)) !important;
}

Спасибо огромное за подробное разъяснение. Да, теперь ясно. А так работает отлично с юзер стилем. Для основной 91 ESR пока не требуется, а в [nightly] 94 уже нужно.

Анатолий58 пишет

Осталось решить цвет шрифта..

Сделал вроде всё что раньше просили, но не смог сразу отправить по техническим причинам. На счёт остального не знаю

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

https://forum.mozilla-russia.org/viewto … 22#p793722

Выделить код

Код:

#urlbar-input, #urlbar-scheme, .searchbar-textbox {
    color: #00ddff !important;
}
#urlbar:not([focused="true"]) > #urlbar-background {  /* неактивный urlbar */
    border-color: #00ddff !important;
}
#urlbar[focused=true] > #urlbar-background {  /* активный urlbar */
    border: 1px solid #00ddff !important;
    box-shadow: none !important;
}

usalex · №11174

kokoss пишет

Не помог потому что этот код для изменения высоты вкладок, а не панели вкладок.

Моя цель - уменьшить высоту панели вкладок вместе с высотой самих вкладок, разумеется.

Vitaliy V. пишет

Да уберите 1px вот здесь в новом коде

Убрал (просто удалил). Оставил так: margin-block: 0 !important;
В результате верхний пиксель исчез, но сама вкладка увеличилась с 25 пикселей до 26 и общая высота не изменилась

Vitaliy V. · №11175

usalex
Не знаю что у вас там мешает но у меня ровно 24px на [windows] 10

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

Сделайте полный скриншот что ли, может кнопки управления окном или просто кнопки нестандартные мешают

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

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