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

Garalf · №7301

Vitaliy V.
А можно в вашем стиле about:addons для 72+ вернуть кнопку с троеточием. У меня на нее кнопка с доп. параметрами завязана.

Отредактировано Garalf (18-12-2019 13:55:10)

kokoss · №7302

Vitaliy V.
Подскажите пожалуйста, как в [firefox] 71: изменить форму (сделать квадратной или круглой) значка "Приватное окно"? Сделать так что бы значок менял цвет при нахождении в "Приватном окне"? И сдвинуть немного влево значок "Приватного окна"?

скрин

Отредактировано kokoss (18-12-2019 13:18:13)

Vitaliy V. · №7303

sandro79 пишет

В чём причина, почему наличие именно этих строк обязательно для нормальной работы этого скрипта, может из-за того что не требуется прописывать пути к запускаемым скриптам в этом методе или другая причина?

Там сделано метаданные типа как в менеджерах скриптов Greasemonkey и т. д., короче лишний не нужный код который парсит эти данные в скриптах

sandro79 пишет

стиль для иконок, если не сильно хлопотно

Можно сделать не только стиль но и изменить код чтобы работало во всех этих окнах places и contentAreaDownloadsView

user_chrome_files/custom_scripts/custom_script_all_win.js

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

Выделить код

Код:

/* ************************************************ */

        // Здесь может быть ваш код который сработает по событию "load" не раньше
        setTimeout(() => {
            var loadScripts = ((name) => {
                try {
                    Services.scriptloader.loadSubScript(`chrome://user_chrome_files/content/custom_scripts/${name}`, window, "UTF-8");
                } catch(e) {}
            });
            var url = location.href;
            if (url.startsWith("chrome://browser/content/browser.x")) {
                    loadScripts("ucjsDownloadsManager.uc.js");
            } else if (url.startsWith("chrome://browser/content/places/places.x")) {
                    loadScripts("places_win.js");
            } else if (url.startsWith("chrome://browser/content/downloads/contentAreaDownloadsView.x")) {
                    loadScripts("ucjsDownloadsManager.uc.js");
                    loadScripts("places_win.js");
            }
        }, 0);
        /* ************************************************ */

стиль
user_chrome_files/custom_styles/custom_style_user.css или импортируемом файле

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

Выделить код

Код:

@-moz-document url-prefix("chrome://browser/content/places/places.x"),
    url-prefix("chrome://browser/content/downloads/contentAreaDownloadsView.x") {
richlistbox#downloadsRichListBox > richlistitem.download-state:not([buttonhidden]):-moz-any([state="0"],[state="4"])::after {
    display: -moz-box !important;
    content: "" !important;
    width: 56px !important;
    -moz-box-align: center !important;
    -moz-context-properties: fill !important;
    fill: currentColor !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
}
richlistbox#downloadsRichListBox > richlistitem.download-state:not([buttonhidden])[state="0"]::after {
    background-image: url("./svg/download-pause.svg") !important;
}
richlistbox#downloadsRichListBox > richlistitem.download-state:not([buttonhidden])[state="4"]::after {
    background-image: url("./svg/download-resume.svg") !important;
}
richlistbox#downloadsRichListBox > richlistitem.download-state {
    -moz-box-direction: normal !important;
}
richlistbox#downloadsRichListBox > richlistitem.download-state:not([buttonhidden]) > button:last-of-type {
    -moz-box-ordinal-group: 100 !important;
    display: -moz-box !important;
    margin-inline-start: 0 !important;
}
}

иконки svg
user_chrome_files/custom_styles/svg/download-pause.svg

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

Выделить код

Код:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
    <path fill="context-fill" d="M 4.5,1 C 3.67,1 3,1.67 3,2.49 V 13.5 C 3,14.4 3.67,15 4.5,15 5.33,15 6,14.4 6,13.5 V 2.49 C 6,1.67 5.33,1 4.5,1 Z M 10.5,1 C 9.7,1 9,1.66 9,2.49 V 13.5 C 9,14.4 9.7,15 10.5,15 11.3,15 12,14.4 12,13.5 V 2.49 C 12,1.66 11.3,1 10.5,1 Z"/>
</svg>

user_chrome_files/custom_styles/svg/download-resume.svg

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

Выделить код

Код:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
    <path fill="context-fill" d="M 2,14.1 C 2,14.9 2.62,15.2 3.37,14.8 L 13.5,8.82 C 14.2,8.38 14.2,7.64 13.5,7.19 L 3.37,1.2 C 2.61,0.753 2,1.08 2,1.9 Z"/>
</svg>

Добавлено 18-12-2019 20:10:10

Garalf пишет

А можно в вашем стиле about:addons для 72+ вернуть кнопку с троеточием. У меня на нее кнопка с доп. параметрами завязана.

А для чего тогда вам этот стиль? он в основном это и делает

kokoss пишет

изменить форму (сделать квадратной или круглой) значка "Приватное окно"?

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

kokoss пишет

Сделать так что бы значок менял цвет при нахождении в "Приватном окне"? И сдвинуть немного влево значок "Приватного окна"?

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

Выделить код

Код:

#privatebrowsing-button image {
    fill: currentColor !important;
}

*|*:root[privatebrowsingmode="temporary"] #privatebrowsing-button image {
    fill: magenta !important;
}

#toolbar-menubar[autohide="true"] + #TabsToolbar .titlebar-spacer[type="post-tabs"] {
    display: -moz-box !important;
    width: 10px !important;
}

Отредактировано Vitaliy V. (18-12-2019 20:10:10)

kokoss · №7304

Vitaliy V. пишет

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

Имелось в виду, вот такой формы:

скрин

Добавлено: изменить форму получилось с помощью этого стиля;

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

Выделить код

Код:

#privatebrowsing-button {
    list-style-image: url("chrome://browser/skin/privatebrowsing/favicon.svg") !important;
}

но теперь не работает ваш стиль по изменению цвета значка ...

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

Выделить код

Код:

#privatebrowsing-button image {
    fill: currentColor !important;
}

Отредактировано kokoss (18-12-2019 23:21:56)

sandro79 · №7305

Vitaliy V. пишет: Там сделано метаданные типа как в менеджерах скриптов Greasemonkey и т. д., короче лишний не нужный код который парсит эти данные в скриптах

Спасибо за разъяснение, не зря мне этот вариант не очень понравился.

Vitaliy V. пишет: Можно сделать не только стиль но и изменить код чтобы работало во всех этих окнах places и contentAreaDownloadsView

Виталий, ну это верх моих ожиданий, кнопки паузы в обоих окнах и работают исправно. Гениально! Верх совершенства.
Огромнейшее Вам Спасибо! :beer:

фотоотчёт

Обновлённый комплект на базе user_chrome_files перезалит, скрипт ucjsDownloadsManager.uc.js для 69-72 добавил в архив, при использовании комплекта в 71 закинуть в папку custom_scripts с заменой - https://forum.mozilla-russia.org/viewto … 91#p775991
Обновил комплек для автозапуска окна загрузок для ff 68 на базе второго метода от Aris, добавлена кнопка паузы с иконками и скрипт ucjsDownloadsManager.uc.js для 69-72, обновлена инструкция.
Обновил также комплект на скриптах от alice0775 для 68, добавлена также кнопка паузы https://yadi.sk/d/YZJHtKk4o-Wikg

Отредактировано sandro79 (19-12-2019 17:30:43)

kokoss · №7306

Vitaliy V. пишет

kokoss пишет:
Сделать так что бы значок менял цвет при нахождении в "Приватном окне"? И сдвинуть немного влево значок "Приватного окна"?
скрытый текст

Большое спасибо!

Vitaliy V. · №7307

kokoss пишет

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

можно конечно просто заменить иконку но стоит попробовать с настройкой svg.context-properties.content.enabled - true
чтобы -moz-context-properties работало не только через chrome:// resource://

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

Выделить код

Код:

#privatebrowsing-button {
    list-style-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16'><g><circle cx='8' cy='8' r='8' fill='context-fill rgb(141, 32, 174)'/><path fill='context-stroke white' d='M 11.3,11 C 10.1,11 9.2,9.5 8,9.5 6.81,9.5 5.87,11 4.7,11 3.16,11 2.02,9.54 2,7.05 1.99,5.5 2.45,5 4.45,5 6.45,5 7.04,5.82 8,5.82 8.97,5.82 9.56,5 11.6,5 13.6,5 14,5.5 14,7.04 14,9.54 12.9,11 11.3,11 Z M 5.43,6.91 A 1.74,1.74 0 0 0 3.72,7.86 2.05,2.05 0 0 0 5.31,8.54 C 6.09,8.54 7.02,8.25 7.02,8 A 1.43,1.43 0 0 0 5.43,6.91 Z M 10.6,6.91 A 1.43,1.43 0 0 0 8.98,8 C 8.98,8.25 9.91,8.54 10.7,8.54 A 2.05,2.05 0 0 0 12.3,7.86 1.74,1.74 0 0 0 10.6,6.91 Z'/></g></svg>") !important;
    -moz-context-properties: fill, stroke !important;
    fill: #757575 !important;
    stroke: #ffffff !important;
}
*|*:root[privatebrowsingmode="temporary"] #privatebrowsing-button {
    fill: #8d20ae !important;
    stroke: #ffd700 !important;
}

если будут мешать др. стили можно добавить #privatebrowsing-button image {

Отредактировано Vitaliy V. (19-12-2019 01:06:09)

_zt · №7308

Vitaliy V.
Ваш стиль для отображения attr(label) не работает совместно со стилем скрытия заголовка и панели вкладок. Можете первый поправить?

С него все началось со скрытием заголовка и вот опять.

PEAKTOP · №7309

А какой параметр отвечает за фон панели вкладок? Хочу покрасить пустое место в панели вкладок отображаемой несколько строк градиентом, могли бы написать строчку кода?

Отредактировано PEAKTOP (19-12-2019 14:17:38)

kokoss · №7310

Vitaliy V. пишет

можно конечно просто заменить иконку но стоит попробовать с настройкой svg.context-properties.content.enabled - true
чтобы -moz-context-properties работало не только через chrome:// resource://

Этот параметр у меня включён!

Vitaliy V. пишет

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

Вот теперь ОТЛИЧНО

Добавлено 19-12-2019 14:52:11

PEAKTOP пишет

А какой параметр отвечает за фон панели вкладок?

/* Фон панели вкладок */
#TabsToolbar {background-color: #3d3d3d !important}

Отредактировано kokoss (19-12-2019 14:52:11)

Vitaliy V. · №7311

_zt пишет

Ваш стиль для отображения attr(label) не работает совместно со стилем скрытия заголовка и панели вкладок

Это с вашим не работает, но не с моим
кто вам говорил что нужно hidden а не visible как у меня

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

*|*:root:not([customizing="true"]) #tabbrowser-tabs {
visibility: visible !important;

_zt · №7312

Vitaliy V.
А потому что в полноэкранном режиме, в персонализации, вкладки на панель навигации налазят. Их вообще в персонализации скрыть надо, для этого стиля. В общем, исправил, заработало. Спасибо.

Отредактировано _zt (19-12-2019 17:35:12)

sandro79 · №7313

Vitaliy V.
Виталий, хотел ещё попросить, может есть несложный способ добавить в стиль для отображения кнопки паузы в окнах загрузки, чтоб при наведении на кнопку паузы происходило такое же поведение, как при наведении на штатную кнопку отмены/повтора/откр.папки загрузок, т.е. выделение и изменение окраски значка и всплывающая подсказка Приостановить/Возобновить при наведении указателя мыши, примерно так, как это было раньше при использовании для окна загрузки дополнения Downloads Window. Понятное дело, что это лишь не особо нужный марафет, не влияющий на функционал и моя блажь, но может это не слишком сложно осуществить. Под спойлером снимки, для большей наглядности, окон дополнения Downloads Window и окна ucjsDownloadsManager.uc.js, хотя последнее наверное было и необязательно заливать. Спасибо.

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

Vitaliy V. пишет

sandro79
Если бы было не сложно то сделал бы, как таковых кнопок там нет есть псевдоэлементы...можно скриптом отслеживать движение мыши но оно того не стоит.

Понятно. Спасибо. Было сомнение, что это не так просто, но подумал,- а вдруг получится Согласен, скрипт для этого украшательства не стоит делать.

Отредактировано sandro79 (20-12-2019 16:28:52)

Vitaliy V. · №7314

sandro79
Если бы было не сложно то сделал бы, как таковых кнопок там нет есть псевдоэлементы
к которым нельзя применить :hover по крайней мере в текущем стандарте css
Ну да можно скриптом отслеживать движение мыши но оно того не стоит.

haze242 · №7315

Пытаюсь скрыть только надпись Not Secure, а прибивается весь identity-box... Что я не так делаю?
Огнелис 70-ый.

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

Выделить код

Код:

#identity-box:-moz-any(.notSecureText){
  visibility: collapse !important;
}

Acid Crash · №7316

haze242 пишет

Пытаюсь скрыть только надпись Not Secure, а прибивается весь identity-box... Что я не так делаю?
Огнелис 70-ый.
скрытый текст
Выделить код
Код:
#identity-box:-moz-any(.notSecureText){
  visibility: collapse !important;
}
https://i111.fastpic.ru/big/2019/1220/8 … cdba8e.png

Так в about:config есть отдельный параметр, что убрать текст.

about:config > security.insecure_connection_text.enabled > true
about:config > security.insecure_connection_text.pbmode.enabled > true (для режима инкогнито)

Ещё можно с замочком пошаманить
security.insecure_connection_icon.enabled
security.insecure_connection_icon.pbmode.enabled

Andrey_Krropotkin · №7317

Vitaliy V. а можно ли добавить кнопку паузы еще в стандартную кнопку загрузки и about:downloads

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

Отредактировано Andrey_Krropotkin (21-12-2019 09:45:23)

kokoss · №7318

Vitaliy V.
Возможно ли добавить своё изображение:

сюда

Vitaliy V. · №7319

Andrey_Krropotkin пишет

а можно ли добавить кнопку паузы еще в стандартную кнопку загрузки и about:downloads

Думаю да, завтра подумаю как

kokoss пишет

Возможно ли добавить своё изображение:

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

Выделить код

Код:

@-moz-document url("about:newtab"), url("about:home") {
body {
    background-image: url("./png/background.png") !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}
}

haze242 · №7320

Acid Crash пишет

Так в about:config есть отдельный параметр, что убрать текст

Круть! Спасибо, не знал.

sandro79 · №7321

Vitaliy V. Я на счёт добавления изображения в about:newtab хотел спросить. А возможно ли ещё сменить цвет надписей названий плиток в топе сайтов на белый?
Я долгое время использую стиль для тёмного фона about:newtab отсюда, но естественно изображение как-то более приятно, его можно поменять при желании. Я нашёл строку, отвечающую за белый цвет надписей плиток, но меняется ещё и цвет в окнах настроек плитки и ничего не видно --newtab-text-primary-color: #F9F9FA !important; Белый лучше различим на не слишком ярких изображениях. Может можно как-то задать текст только для надписей под плитками. Спасибо.

снимки

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

Прошу прощения, поторопился, всё же не то я изначально нашёл, теперь нашёл то, что действительно нужно было --newtab-topsites-label-color: rgba(249, 249, 250, 0.8) !important; - цвет подписей плиток. И цвет меню "Топ сайтов"

--newtab-section-header-text-color: rgba(249, 249, 250, 0.8) !important;

Отредактировано sandro79 (21-12-2019 20:35:03)

kokoss · №7322

Vitaliy V.
Классссссно !!!

Отредактировано kokoss (22-12-2019 16:27:48)

Vitaliy V. · №7323

sandro79 пишет

Может можно как-то задать текст только для надписей под плитками.

Может лучше обновить стиль, теперь оно встроено в [firefox]
resource://activity-stream/css/activity-stream.css

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

Выделить код

Код:

@-moz-document url("about:newtab"), url("about:home") {
body {
    --newtab-background-color: #2A2A2E !important;
    --newtab-border-primary-color: rgba(249, 249, 250, 0.8) !important;
    --newtab-border-secondary-color: rgba(249, 249, 250, 0.1) !important;
    --newtab-button-primary-color: #0060DF !important;
    --newtab-button-secondary-color: #38383D !important;
    --newtab-element-active-color: rgba(249, 249, 250, 0.2) !important;
    --newtab-element-hover-color: rgba(249, 249, 250, 0.1) !important;
    --newtab-icon-primary-color: rgba(249, 249, 250, 0.8) !important;
    --newtab-icon-secondary-color: rgba(249, 249, 250, 0.4) !important;
    --newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4) !important;
    --newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2) !important;
    --newtab-link-primary-color: #45A1FF !important;
    --newtab-link-secondary-color: #50BCB6 !important;
    --newtab-text-conditional-color: #F9F9FA !important;
    --newtab-text-primary-color: #F9F9FA !important;
    --newtab-text-secondary-color: rgba(249, 249, 250, 0.8) !important;
    --newtab-textbox-background-color: #38383D !important;
    --newtab-textbox-border: rgba(249, 249, 250, 0.2) !important;
    --newtab-textbox-focus-color: #45A1FF !important;
    --newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3) !important;
    --newtab-feed-button-background: #38383D !important;
    --newtab-feed-button-text: #F9F9FA !important;
    --newtab-feed-button-background-faded: rgba(56, 56, 61, 0.6) !important;
    --newtab-feed-button-text-faded: rgba(249, 249, 250, 0) !important;
    --newtab-feed-button-spinner: #D7D7DB !important;
    --newtab-contextmenu-background-color: #4A4A4F !important;
    --newtab-contextmenu-button-color: #2A2A2E !important;
    --newtab-modal-color: #2A2A2E !important;
    --newtab-overlay-color: rgba(12, 12, 13, 0.8) !important;
    --newtab-section-header-text-color: rgba(249, 249, 250, 0.8) !important;
    --newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8) !important;
    --newtab-section-active-contextmenu-color: #FFF !important;
    --newtab-search-border-color: rgba(249, 249, 250, 0.2) !important;
    --newtab-search-dropdown-color: #38383D !important;
    --newtab-search-dropdown-header-color: #4A4A4F !important;
    --newtab-search-header-background-color: rgba(42, 42, 46, 0.95) !important;
    --newtab-search-icon-color: rgba(249, 249, 250, 0.6) !important;
    --newtab-search-wordmark-color: #FFF !important;
    --newtab-topsites-background-color: #38383D !important;
    --newtab-topsites-icon-shadow: none !important;
    --newtab-topsites-label-color: rgba(249, 249, 250, 0.8) !important;
    --newtab-card-active-outline-color: #4A4A4F !important;
    --newtab-card-background-color: #38383D !important;
    --newtab-card-hairline-color: rgba(249, 249, 250, 0.1) !important;
    --newtab-card-placeholder-color: #4A4A4F !important;
    --newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2) !important;
    --newtab-snippets-background-color: #38383D !important;
    --newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1) !important;
    --trailhead-header-text-color: rgba(255, 255, 255, 0.6) !important;
    --trailhead-cards-background-color: rgba(12, 12, 13, 0.1) !important;
    --trailhead-card-button-background-color: rgba(12, 12, 13, 0.3) !important;
    --trailhead-card-button-background-hover-color: rgba(12, 12, 13, 0.5) !important;
    --trailhead-card-button-background-active-color: rgba(12, 12, 13, 0.7) !important; 
}
}

Отредактировано Vitaliy V. (21-12-2019 20:40:24)

sandro79 · №7324

Vitaliy V. пишет

Может лучше обновить стиль, теперь оно встроено в
resource://activity-stream/css/activity-stream.css

Да, понял, благодарю. Виталий, да я вроде разобрался, ещё немного поднапрягшись, выше сообщение подправил. Да, этот стиль я тоже заберу, \browser\features --> activity-stream@mozilla.org.xpi уже давно удалили и несомненно стиль немного изменился. Буду разбираться и дальше рихтовать about:newtab. Огромное Спасибо.
А если ещё и гифку поставить, так вообще красота, надо mp4 еще попробовать

видео

Отредактировано sandro79 (21-12-2019 21:51:34)

shadow_user · №7325

Пользовательская картинка в about:newtab. Как полностью погасить "стробоскоп" (вспышку белого) при загрузке браузера? Особенно заметно, если картинка темная.
Немного облегчает ситуацию установка темного фона при загрузке страницы, но неприятная вспышка на долю секунды все равно остается.

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

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