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

Black_Monk · №4801

Vitaliy V.

--v-tabs-border-color: Highlight; она же линия на панели навигации

Я так понимаю, что развести их по разным параметрам нельзя? Просто хотел сделать Панель меню, Панель навигации и Панель вкладок как-бы "одним целым", как это видно на моём скриншоте на предыдущей странице. Сейчас так сделать не получается...

--v-placeholder-pre-tabs: 0px;

Не работает. Или тоже от системы зависит?

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

Отредактировано Black_Monk (03-11-2018 15:02:50)

Gruz_35 · №4802

Спс за ссылку на легкую тему. И хорошо смотрится и глаза не режет :beer:

Отредактировано Gruz_35 (03-11-2018 15:43:43)

Vitaliy V. · №4803

Black_Monk пишет

Я так понимаю, что развести их по разным параметрам нельзя?

ну переменную делать не буду можете добавить туда это

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

Выделить код

Код:

#TabsToolbar:not([collapsed="true"]) + #nav-bar {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

Black_Monk пишет

Или тоже от системы зависит?

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

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

Выделить код

Код:

#TabsToolbar > .titlebar-placeholder[type="pre-tabs"] {
  display: -moz-box !important;
}

ну и та настройка

Black_Monk пишет

- регулировка ширины вкладки и кнопки новой вкладки;

максимальная ширина вкладки

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

Выделить код

Код:

#TabsToolbar .tabbrowser-tab:not([pinned])[fadein] {
    max-width: 160px !important;
}

минимальная ширина вкладки about:config - browser.tabs.tabMinWidth
ширина новой вкладки добавил в стиль точнее это padding
--v-newtab-width-inner-padding: 6px;

Black_Monk пишет

- возможность отключения изменения цвета неактивной вкладки и её линий при поднесении к ней курсора мыши;

странные запросы у вас ну да ладно добавьте это

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

Выделить код

Код:

#tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
  background-color: transparent !important;
}

и цвет линий найдите в стиле #TabsToolbar .tabbrowser-tab:hover .tab-background > .tab-line:not([selected="true"]):not([multiselected])
и измените background-color: var(--v-tabs-border-inactive-color) !important;
на background-color: transparent !important;

Black_Monk пишет

- возможность отключения "подсветки" активного окошка поиска или ввода адреса (сейчас оно "подсвечивается" синей рамкой).

укажите свой цвет

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

Выделить код

Код:

#urlbar[focused="true"], #searchbar .searchbar-textbox[focused="true"] {
  border-color: Highlight !important;
}

Отредактировано Vitaliy V. (03-11-2018 15:52:05)

Black_Monk · №4804

Vitaliy V., огромное спасибо. 99% своих "хотелок" реализовал. :cool:

Осталось несколько мелочей (при их возможности, конечно):
- убрать подсветку пунктов Панели меню при поднесении к ним курсора (сейчас в не зависимости от темы оформления они подсвечиваются синим цветом);
- уменьшить расстояние между адресным окошком и окошком ввода адреса;
- уменьшить значки Лупы в окошках ввода адреса и поиска. У меня почему-то при настройке уменьшались только значки на Панели навигации;
- убрать толстую горизонтальную линию на неактивной вкладке при поднесении к ней курсора.

Vitaliy V. · №4805

Black_Monk

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

Выделить код

Код:

#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon, #searchbar .searchbar-textbox .searchbar-search-icon {
    padding: 2px !important;
}
    
#urlbar-search-splitter {
    min-width: 7px !important;
    margin: 0 -6px;
}
/* отключить анимацию .tab-line */
#TabsToolbar .tabbrowser-tab .tab-line {
    transition: none !important;
}

Black_Monk пишет

- убрать толстую горизонтальную линию на неактивной вкладке при поднесении к ней курсора.

я это уже в предыдущем писал найдите в стиле #TabsToolbar .tabbrowser-tab:hover .tab-background > .tab-line:not([selected="true"]):not([multiselected])....

Black_Monk пишет

- убрать подсветку пунктов Панели меню при поднесении к ним курсора

эти пункты? код для проверить

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

Выделить код

Код:

#main-menubar > menu {
  -moz-appearance: none !important;
}

Отредактировано Vitaliy V. (03-11-2018 17:48:10)

Black_Monk · №4806

Vitaliy V.

эти пункты? код для проверить

Нет, не эти. Я имел в виду пункты Файл, Правка, Вид и т.д.

я это уже в предыдущем писал найдите в стиле #TabsToolbar .tabbrowser-tab:hover .tab-background > .tab-line:not([selected="true"]):not([multiselected])....

Я это сделал, но осталась жирная линия по верхнему краю неактивной вкладки при поднесении к ней курсора. Вот что у меня сейчас в userChrome.css:

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

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url("chrome://browser/content/browser.xul") {
:root {
--v-tabs-border-round-start: 5px;
--v-tabs-border-round-end: 5px;
--v-tabs-padding-between-start: 0px;
--v-tabs-padding-between-end: 1px;
--v-tabs-min-height: 28px;
--v-tabs-border-color: rgba(0,0,0,0.25);
--v-tabs-border-inactive-color: rgba(0,0,0,0.25);
--v-newtab-button-round-start: 6px;
--v-newtab-button-round-end: 12px;
--v-newtab-padding-start: 0px;
--v-newtab-margin-top: 6px;
--v-newtab-width-inner-padding: 6px;
--v-placeholder-pre-tabs: 4px;
--v-placeholder-post-tabs: 10px;
--v-toolbarbutton-border-radius: 4px;
--v-toolbarbutton-outer-padding: 1px;
--v-toolbarbutton-inner-padding: 5px;
--v-textbox-border-radius: 5px;
--v-textbox-min-height: 22px;
--v-textbox-icon-padding: 1px;
}
/* темный фон светлый текст */
#TabsToolbar[brighttext="true"], #nav-bar[brighttext="true"],
#TabsToolbar:-moz-lwtheme-brighttext, #nav-bar:-moz-lwtheme-brighttext {
--v-tabs-border-color: Highlight;
--v-tabs-line-color: var(--v-tabs-border-color);
--v-tabs-border-inactive-color: rgba(255,255,255,0.25);
}
/* компактный режим */
:root[uidensity="compact"] {
--v-tabs-min-height: 29px;
--v-toolbarbutton-outer-padding: 1px;
--v-toolbarbutton-inner-padding: 5px;
--v-textbox-min-height: 26px;
--v-textbox-icon-padding: 4px;
}
/* мобильный режим */
:root[uidensity="touch"] {
--v-tabs-min-height: 41px;
--v-toolbarbutton-outer-padding: 2px;
--v-toolbarbutton-inner-padding: 9px;
--v-textbox-min-height: 32px;
--v-textbox-icon-padding: 7px;
}
/* ************************************************ */

:root:-moz-locale-dir(rtl) {
--v-tabs-border-round-start: var(--v-tabs-border-round-end);
--v-tabs-border-round-end: var(--v-tabs-border-round-start);
--v-newtab-button-round-start: var(--v-newtab-button-round-end);
--v-newtab-button-round-end: var(--v-newtab-button-round-start);
}

:root {
--toolbarbutton-border-radius: var(--v-toolbarbutton-border-radius) !important;
--toolbarbutton-outer-padding: var(--v-toolbarbutton-outer-padding) !important;
--toolbarbutton-inner-padding: var(--v-toolbarbutton-inner-padding) !important;
--urlbar-icon-padding: var(--v-textbox-icon-padding) !important;
}

#TabsToolbar, #tabbrowser-tabs, #nav-bar {
--tabs-border-color: var(--v-tabs-border-color) !important;
--tab-line-color: var(--v-tabs-line-color) !important;
}

#titlebar,
#tabbrowser-tabs {
--tab-min-height: var(--v-tabs-min-height) !important;
}

#TabsToolbar .tabbrowser-tab {
padding-inline-start: var(--v-tabs-padding-between-start) !important;
padding-inline-end: var(--v-tabs-padding-between-end) !important;
border: none !important;
border-radius: 0 !important;
background-color: transparent !important;
}

#TabsToolbar .tab-background {
border-top: 1px solid var(--v-tabs-border-inactive-color) !important;
border-left: 1px solid var(--v-tabs-border-inactive-color) !important;
border-right: 1px solid var(--v-tabs-border-inactive-color) !important;
}

#TabsToolbar .tabbrowser-tab .tab-stack > :-moz-any(.tab-background,.tab-loading-burst,.tab-content) {
margin-top: 2px !important;
}

#TabsToolbar .tabbrowser-tab .tab-stack > .tab-background[selected="true"] {
border-color: var(--v-tabs-border-color) !important;
margin-top: 0 !important;
}

#TabsToolbar .tabbrowser-tab :-moz-any(.tab-stack,.tab-background,.tab-loading-burst,.tab-content) {
border-top-left-radius: var(--v-tabs-border-round-start) !important;
border-top-right-radius: var(--v-tabs-border-round-end) !important;
overflow: hidden;
}

#TabsToolbar .tabbrowser-tab:hover .tab-background > .tab-line:not([selected="true"]):not([multiselected]) {
background-color: background-color: transparent !important;
}

#TabsToolbar .tabs-newtab-button {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-inline-start: var(--v-newtab-padding-start) !important;
padding-inline-end: 0 !important;
background: none !important;
border: none !important;
}

#TabsToolbar .tabs-newtab-button > .toolbarbutton-icon {
margin-top: var(--v-newtab-margin-top) !important;
border-top: 1px solid var(--v-tabs-border-inactive-color) !important;
border-left: 1px solid var(--v-tabs-border-inactive-color) !important;
border-right: 1px solid var(--v-tabs-border-inactive-color) !important;
border-top-left-radius: var(--v-newtab-button-round-start) !important;
border-top-right-radius: var(--v-newtab-button-round-end) !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
height: auto !important;
padding-top: calc((var(--v-tabs-min-height) - (16px + var(--v-newtab-margin-top))) / 2) !important;
padding-bottom: calc((var(--v-tabs-min-height) - (16px + var(--v-newtab-margin-top))) / 2) !important;
width: calc(2 * var(--v-newtab-width-inner-padding) + 16px) !important;
padding-left: var(--v-newtab-width-inner-padding) !important;
padding-right: var(--v-newtab-width-inner-padding) !important;
}

#TabsToolbar .tabbrowser-tab::after,
#TabsToolbar .tabbrowser-tab::before {
display: none !important;
}

#TabsToolbar .titlebar-placeholder[type="pre-tabs"] {
width: var(--v-placeholder-pre-tabs) !important;
border: none !important;
}

#TabsToolbar .titlebar-placeholder[type="post-tabs"] {
width: var(--v-placeholder-post-tabs) !important;
border: none !important;
}

#urlbar, #searchbar .searchbar-textbox {
border-radius: var(--v-textbox-border-radius) !important;
margin-top: 1px !important;
margin-bottom: 1px !important;
min-height: var(--v-textbox-min-height) !important;
--urlbar-icon-padding: var(--v-textbox-icon-padding) !important;
}

textbox .urlbar-icon {
width: calc(2 * var(--v-textbox-icon-padding) + 16px) !important;
height: calc(2 * var(--v-textbox-icon-padding) + 16px) !important;
padding: var(--v-textbox-icon-padding) !important;
}

#pageActionSeparator {
height: calc(2 * var(--v-textbox-icon-padding) + 16px) !important;
}

:root:not([uidensity="compact"]) #back-button {
padding-top: var(--v-toolbarbutton-outer-padding) !important;
padding-bottom: var(--v-toolbarbutton-outer-padding) !important;
padding-inline-start: var(--v-toolbarbutton-outer-padding) !important;
padding-inline-end: 0 !important;
}

:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
width: calc(2 * var(--v-toolbarbutton-inner-padding) + 16px) !important;
height: calc(2 * var(--v-toolbarbutton-inner-padding) + 16px) !important;
padding: var(--v-toolbarbutton-inner-padding) !important;
}

@media (-moz-windows-compositor) {
#main-window[uidensity="compact"][sizemode="normal"] > #titlebar {
-moz-appearance: none !important;
}
}
}
#TabsToolbar > .titlebar-placeholder[type="pre-tabs"] {
display: -moz-box !important;
}
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0) !important;
}
#TabsToolbar .tabbrowser-tab:not([pinned])[fadein] {
max-width: 200px !important;
}
#tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
background-color: transparent !important;
}
#urlbar[focused="true"], #searchbar .searchbar-textbox[focused="true"] {
border-color: rgba(0,0,0,0.25) !important;
}
#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon, #searchbar .searchbar-textbox .searchbar-search-icon {
padding: 2px !important;
}

#urlbar-search-splitter {
min-width: 7px !important;
margin: 0 -6px;
}
/* отключить анимацию .tab-line */
#TabsToolbar .tabbrowser-tab .tab-line {
transition: none !important;
}
#main-menubar > menu {
-moz-appearance: none !important;
}

Может что-то я уже успел "испортить"?

Отредактировано Black_Monk (03-11-2018 18:04:11)

Vitaliy V. · №4807

Black_Monk пишет

Нет, не эти. Я имел в виду пункты Файл, Правка, Вид и т.д.

это они и есть что нужно сделать? попробуйте добавить background-color: transparent !important;
или лучше так

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

Выделить код

Код:

#main-menubar > menu {
    -moz-appearance: none !important;
}

#main-menubar > menu[_moz-menuactive="true"] {
    color: inherit !important;
    background-color: rgba(255,255,255,0.15) !important;
}

#main-menubar > menu[open] {
    color: inherit !important;
    background-color: rgba(255,255,255,0.25) !important;
}

Black_Monk пишет

#TabsToolbar .tabbrowser-tab:hover .tab-background > .tab-line:not([selected="true"]):not([multiselected]) {
background-color: background-color: transparent !important;
}

ну так он и не работает что за background-color: background-color:

Отредактировано Vitaliy V. (03-11-2018 18:23:54)

Black_Monk · №4808

Vitaliy V.

ну так он и не работает что за background-color: background-color:

И правда, вот я балбес... :rolleyes:

Самая последняя хотелка на сегодня. Был у меня когда-то стиль, убирающий кнопку "Открыть меню" с Панели навигации. Можно её сейчас сделать?

Отредактировано Black_Monk (03-11-2018 18:28:57)

Vitaliy V. · №4809

Black_Monk пишет

убирающий кнопку "Открыть меню" с Панели навигации

Выделить код

Код:

#PanelUI-button {
    display: none !important;
}

Black_Monk · №4810

Vitaliy V.
а шрифт в окошках поиска и адреса через стиль уменьшается? А то я их высоту уменьшил, а шрифт остался очень большой. Или это сама Мозилла регулирует?

Vitaliy V. · №4811

Black_Monk
в стиле есть уже такие селекторы добавьте туда или отдельно

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

Выделить код

Код:

#urlbar, #searchbar .searchbar-textbox {
    font-size: 100% !important;
}

можно в px, pt, em и т.д.

Black_Monk · №4812

Vitaliy V., большое вам спасибо за все ответы. После всех моих "хотелок" получился результат, сильно напоминающий старую добрую Opera 12. Привык я к ней когда-то, вот и переношу периодически её оформление на новые версии Мозиллы... :cool:

westyles · №4813

Благодарю всех, кто подсказал мне начало пути по настройке оформления,
и тех кто тут помогает всем.

Потратил неделю на оформление под оригинальную темную тему, но только основных элементов:
контекстные меню, тулбары, скролбары, закладки, загрузки, история в урлбаре.

Изменений вида не делал, кроме "новой вкладки с закладками". оставил все как в оригинале.
Делал первый раз, знаний по html5 и css не так много,
да и самого принципа как устроены стили в браузере. Может что и сделал не по стандарту.
Все не делал, так как и так очень много времени ушло.
Не все понял как изменить. так как dom inspector не все показывает да и глючит.

Вот готовый результат с полным описанием в стилях и как использовать:
https://yadi.sk/d/EvMLzLlK4jSJrg
И скриншот там есть некоторых элементов.

Отредактировано westyles (05-11-2018 20:20:36)

sandro79 · №4814

westyles пишет: Вот готовый результат с полным описанием в стилях и как использовать:
https://yadi.sk/d/EvMLzLlK4jSJrg

Великолепно! Кое-что выдёрнул себе в комплект, спасибо. Вот тут бы ещё надписи возле значков подправить, если можно:

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

Использую правда не тёмную тему, а Ubuntu-Mate-Grate

westyles · №4815

sandro79

sandro79 пишет

Великолепно! Кое-что выдёрнул себе в комплект, спасибо. Вот тут бы ещё надписи возле значков подправить, если можно:

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

Выделить код

Код:

/* Цвет названий и элементов расширений в расширенном меню */
.widget-overflow-list {
    color: rgba(200,200,200,1.00) !important;
}
/* Отступ названий у расширений от значков */
.widget-overflow-list .toolbarbutton-text {
    margin-left: 5px !important;
}

sandro79 · №4816

westyles, благолврю за быстрый ответ, сработало! Успехов вам в покорении новых высот! А я уже "стар" такое освоить, только готовые стили ковырять.

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

Отредактировано sandro79 (05-11-2018 23:46:49)

j23 · №4817

Помогите, пожалуйста, с кодом для изменения размера шрифта подсказок поиска и расстояния между ними:

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

MrDenver · №4818

Доброго дня.

Подскажите пожалуйста код чтобы можно было перекрсить цвет "плюса" или поменять отображение самой кнопки.
Который расположен на кнопке "открыть новую вкладку (CTR+T)"

Отредактировано MrDenver (07-11-2018 12:02:29)

Acid Crash · №4819

MrDenver пишет

Доброго дня.
Подскажите пожалуйста код чтобы можно было перекрсить цвет "плюса" или поменять отображение самой кнопки.
Который расположен на кнопке "открыть новую вкладку (CTR+T)"

Приветствую. Как-то так

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

Выделить код

Код:

/* Цвет */
/* Неактивное окно */ #TabsToolbar .tabs-newtab-button .toolbarbutton-icon {fill: green !important;}
/* Активное окно */ #TabsToolbar[brighttext="true"] .tabs-newtab-button .toolbarbutton-icon {fill: red !important;}

/* Иконка */
.tabs-newtab-button .toolbarbutton-icon {list-style-image: url("chrome://browser/skin/tab.svg") !important;}

Отредактировано Acid Crash (07-11-2018 13:41:54)

MrDenver · №4820

Acid Crash
спасибо большое!

Vitaliy V. · №4821

j23 пишет

изменения размера шрифта подсказок поиска и расстояния между ними:

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

Выделить код

Код:

#PopupSearchAutoComplete .ac-title {
    font-size: 1em !important;
    line-height: 1.1em !important;
}

#PopupSearchAutoComplete .ac-type-icon {
    width: 14px !important;
    height: 14px !important;
}

#PopupSearchAutoComplete .autocomplete-richlistitem {
    padding: 1px !important;
    margin: 0 !important;
}

#PopupSearchAutoComplete :-moz-any(.ac-type-icon,.ac-title,.ac-text-overflow-container,.ac-title-text) {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

j23 · №4822

Vitaliy V.
Спасибо за помощь!

MrDenver · №4823

При наведении на кнопки появляется серый фон.
Подскажите пожалуйста код изменения цвета этого фона, при наведении на любую кнопку?
Каким кодом можно добавить обводку к этому фону?

Отредактировано MrDenver (07-11-2018 19:35:35)

usalex · №4824

Vitaliy V.
Ваша суперская боковая панель закладок https://forum.mozilla-russia.org/viewto … 19#p721919, которой я долгое время пользовался на ff57 в билде ff63 уже не работает.
Никакой адекватной замены среди расширений я не нашел.
Не могли бы вы внести изменения, чтоб ваша боковая панель заработала на ff63 ?

MrDenver · №4825

Приветствую всех!

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

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

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