Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Компьютеры » Программы » Mozilla Firefox: стили userChrome.css и скрипты js

Модерирует : gyra, Maz

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

Открыть новую тему     Написать ответ в эту тему

gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору



В теме обсуждается настройка внешнего вида Firefox с использованием userChrome.css, userContent.css, а так же использование скриптов js (uc.js).

Родственные темы: Mozilla Firefox | Расширения для Firefox
 
Обсуждение на "Форуме Mozilla Россия":
Настройка внешнего вида Firefox в userChrome.css,
UCF - ваши кнопки, темы, дополнения, скрипты…
 
Темы на GitHub:
Aris-t2 CustomCSSforFx | Aris-t2 CustomJSforFx | xiaoxiaoflood/firefox-scripts | Endor8/userChrome.js | Alice0775 userChrome.js  
VitaliyV UCF - UserChromeFiles


Просьба публикуемые коды заключать в тэг [code][/code] (из выпадающего меню), а коды более 10 строк - в двойной тэг [more][code][/code][/more]
 
Как подключить скрипты JS:
метод Aris-t2 | метод xiaoxiaoflood | метод Endor8 | метод user_chrome_files (UCF)
Как подключить скрипты JSM, MJS в загрузчик скриптов от Aris-t2 , а если у вас Firefox v117+, то дополнительно...
 
Еще один способ активации, нюансы: скрипты можно поместить в пользовательслую папку, можно не прописывать активацию каждого скрипта отдельно.
 
Куда вписывать код для стиля userChrome.css и userContent.css
Также не забываем про такую строку в user.js / prefs.js (для включения userChrome.css и userContent.css):
Код:
// Turn on userChrome.css and userContent.css support
// Включить поддержку userChrome.css и userContent.css
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);  
либо эту настройку включить через about:config.
 
Полезные ссылки
 
Онлайн-конвертер иконок в\из Base64
Онлайн-редактор иконок SVG
Онлайн-конвертер SVG to Data URI
Мануал по определению CSS-селекторов элементов интерфейса встроенными средствами браузера

Всего записей: 7757 | Зарегистр. 14-09-2020 | Отправлено: 08:34 29-07-2023 | Исправлено: gutasiho, 09:49 30-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho

Цитата:
Кнопка открывает папку профиля по ЛКМ и папку Chrome по ПКМ

Посмотрел код, при клике колесом будет открывать как по ЛКМ. Иконка локальная - не гуд. Переделал. Тестил в FF129. Код

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 01:43 31-08-2024
deannik

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
svg.context-properties.content.enabled = true

Цитата:
хотел сразу написать, но думал, что и так ясно. В предыдущем моем сообщении речь шла о параметре из about:config, который по умолчанию почему-то отключен
Вообще не туда, что это в about:config.) Спасибо, теперь цвет меняется.

Цитата:
Можно делать label без учета регистра символов, либо юзать подстановочные знаки, чтобы в некоторых случаях сразу двух и более зайцев окучить
Здесь поясните, пожалуйста. Сделал иконку "Сохранить", "Сохранить страницу как..." получилась нормально, а вот "Сохранить объект как..." бледная (скрин). Есть svg. Иконка не отображается. Если убрать строку class='stroke' style='stroke:#8e8e98;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;', то иконка получается ущербная.

Всего записей: 598 | Зарегистр. 04-08-2013 | Отправлено: 08:39 31-08-2024 | Исправлено: deannik, 08:40 31-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, я давал конвертер. Зачем добавлять fill='context-fill' fill-opacity='context-fill-opacity', если внутри некоторых svg даже похожего нет
В некоторых svg задаются цвета для stroke, но у меня таких иконок нет. Не сложно добавить stroke в стили отступа для иконок
-moz-context-properties: fill, stroke;
Можно менять внутри data:image stroke:#8e8e98 на свой цвет или задать stroke:context-stroke и красить через stroke:
 
background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path class='stroke' style='fill:none;stroke:context-stroke;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;' d='M13.6 6.6v-2c0-1-1-2-2-2H4.4c-1 0-2 .9-2 1.9v4.9H2c-1.8 0-1.8 3.2 0 3.2h5.4m2-1h6m-3 3v-6'/></svg> ");
stroke: red;
 
[label^="Открыть ссылку в новой вкладке" i]
i - без учета регистра символов. А про символ ^ можно прочесть здеся (номер 13) Ясно, что если название лейбла пишется полностью, то в ^ нет необходимости

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 09:29 31-08-2024 | Исправлено: Death_INN, 10:14 31-08-2024
deannik

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, вроде понятно, но вставил Ваш код — иконки нет. Ни с символом ^, ни без. Насчёт "Сохранить", вот код. Один фиг "Сохранить объект" бледная, даже если под неё отдельно код прописать.

Всего записей: 598 | Зарегистр. 04-08-2013 | Отправлено: 12:05 31-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, если иконки нет, а полный код где, к какому label относится? На счет бледной иконки, то может какой стиль или скрипт фигней страдает. Попробуй после задания цвета добавить пару стилей (для теста). Если сработает, то выясни на каком из них:
fill-opacity: 1 !important;
opacity: 1 !important;
Либо скинь всю папку chrome, проверю на ошибки и бледность

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 14:27 31-08-2024
deannik

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
если иконки нет, а полный код где, к какому label относится?
label^="Открыть ссылку в новой вкладке" (код иконки). Или я неправильно понял что нужно?
Цитата:
Попробуй после задания цвета добавить пару стилей (для теста). Если сработает, то выясни на каком из них:
fill-opacity: 1 !important;
opacity: 1 !important;
Сработало на opacity: 1 !important; (скрин). Иконка стала нормального цвета, бледность пропала.
Цитата:
Либо скинь всю папку chrome, проверю на ошибки и бледность
Отправил в ПМ, посмотрите, возможно там ошибок полно.

Всего записей: 598 | Зарегистр. 04-08-2013 | Отправлено: 15:27 31-08-2024 | Исправлено: deannik, 09:18 01-09-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik

Цитата:
label^="Открыть ссылку в новой вкладке" (код иконки). Или я неправильно понял что нужно?  

Я писал: Не сложно добавить stroke в стили отступа для иконок -moz-context-properties: fill, stroke;
Это не было сделано. Вижу просто -moz-context-properties: fill;

Цитата:
Сработало на opacity: 1 !important

А у меня с твоей папкой chrome этого не понадобилось. Удалял этот стиль. Значит, какое-то расширение свои стили юзает, но почему именно на пункте Сохранить объект.

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 18:24 31-08-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
В вашем методе иконизации увидел для себя плюс в наличии общего для всех конт. меню padding-файла, у меня пока padding отдельно для каждой иконки, но вполне можно использовать и общий padding. Второй плюс - стиль работает по названию пункта, а не по ID.
Минус: пункт Menu Bar в конт. меню панели инструментов (тот, который отмечается птичкой) уходит влево до упора без птички, и выравнивается с другими пунктами, если отмечен птичкой. Т.е. он выделяется из общей стратегии.
В общем для меня метод оказался слишком сложным, останусь на том отработанном, беспроблемном и изученном варианте, который использую.

Всего записей: 7757 | Зарегистр. 14-09-2020 | Отправлено: 19:34 31-08-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho

Цитата:
Минус: пункт Menu Bar в конт. меню панели инструментов (тот, который отмечается птичкой) уходит влево до упора без птички, и выравнивается с другими пунктами, если отмечен птичкой. Т.е. он выделяется из общей стратегии

Очень странно. Проверялось только с моими стилями или вкупе со своими? В FF115 еще нужно правильно от амперсандов избавиться.
Брал за основу как раз это конт. меню, т.к. в нем отступы есть по умолчанию. Мои стили не должны влиять на пункт Menu Bar, но влияют на другие пункты без птички в этом меню, т.е. сначала padding может увеличиваться до 36, а потом перебиваться более приоритетным стилем и уменьшаться до 12, но это в крайнем случае. На всяк пожарный, подкорректировал код отступов, удалив селекторы вместе со стилем padding-inline-start: 12px !important и добавив needsgutter в исключения отступов для menu и menuitem.
Для себя такие правки делать не буду, ибо в птичковых меню усложняется добавление иконок. Раз для них не выделено место, то они будут накладываться и связываться с текстом, и если нужно будет сделать трансформацию на определенный угол, то вместе с иконкой повернется и текст
 

Цитата:
В общем для меня метод оказался слишком сложным

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

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 22:35 31-08-2024 | Исправлено: Death_INN, 23:26 31-08-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Я адаптировал, это несложно, и оставил в кладези знаний.

Всего записей: 7757 | Зарегистр. 14-09-2020 | Отправлено: 08:48 01-09-2024
deannik

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
Я писал: Не сложно добавить stroke в стили отступа для иконок -moz-context-properties: fill, stroke;
Это не было сделано. Вижу просто -moz-context-properties: fill;
Добавил, иконка не появилась.
У Вас с моей папкой эта иконка есть?

Всего записей: 598 | Зарегистр. 04-08-2013 | Отправлено: 09:14 01-09-2024 | Исправлено: deannik, 09:48 01-09-2024
gutasiho

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Глобальная иконизация не для меня, иконизировано только конт. меню страницы и гамбургер. Просьба адаптировать код паддинга, чтобы применялся только к контекстному меню страницы.
Цитата:
пункт Menu Bar в конт. меню панели инструментов
Возможно, на это влияет какой-то из используемых стилей, т.к. на чистом профиле эта строка меню стоит в правильном положении всегда.

Всего записей: 7757 | Зарегистр. 14-09-2020 | Отправлено: 09:31 01-09-2024
Smallette

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik
у вас тут -moz-context-properties: fill, stroke; между филл и строк точка с запятой стоит, по моему это не правильно.

Всего записей: 334 | Зарегистр. 01-11-2006 | Отправлено: 09:31 01-09-2024
deannik

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Smallette
Цитата:
у вас тут -moz-context-properties: fill, stroke; между филл и строк точка с запятой стоит, по моему это не правильно.
У Death_INN выше в посте тоже запятая. Это всё невнимательность. Убрал, поставил запятую, иконка появилась. Спасибо.
 
Добавлено:
Death_INN
Цитата:
А у меня с твоей папкой chrome этого не понадобилось. Удалял этот стиль. Значит, какое-то расширение свои стили юзает, но почему именно на пункте Сохранить объект.
Удалил все расширения. Если убрать opacity: 1 !important иконки "Сохранить объект как", "Сохранить изображение как" становятся бледными, а вот "Сохранить в Pocket" нормальная.

Всего записей: 598 | Зарегистр. 04-08-2013 | Отправлено: 09:40 01-09-2024 | Исправлено: deannik, 10:51 01-09-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
gutasiho

Цитата:
Просьба адаптировать код паддинга, чтобы применялся только к контекстному меню страницы


Код:
menupopup#contentAreaContextMenu:not(.in-menulist) menu:not([icon], .menu-iconic)::before,
menupopup#contentAreaContextMenu:not(.in-menulist) menuitem:not([checked], [icon], .menuitem-iconic)::before {
  -moz-context-properties: fill, stroke;
  content: "";
  width: 16px;
  height: 16px;
  margin-inline-end: 8px;
}

 
deannik

Цитата:
Удалил все расширения. Если убрать opacity: 1 !important иконки "Сохранить объект как", "Сохранить изображение как" становятся бледными, а вот "Сохранить в Pocket" нормальная.

Может кто еще проверит на версии не ниже FF120. Установил везде одинаковые цвета. Добавил примеры иконок для menu и toolbarbutton. ссылка
 
Тебе самому хорошо было бы глянуть в инструментах разраба, какой стиль затемняет иконки. А пункты с затемненными иконками нормально функционируют при клике на них? По умолчанию сабж затемняет сами пункты, если установлен атрибут disabled, а у меня на этот случай стиль для иконок opacity: 0.4 в icons-padding.css
 
Можешь еще попробовать в обоих файлах убрать строку
@-moz-document url-prefix("chrome://browser/content/") {
вместе со скобкой } в самом конце файлов
 
И хорошо бы еще удалять папку startupCache перед запуском сабжа

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 14:12 01-09-2024 | Исправлено: Death_INN, 14:30 01-09-2024
grom17



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Death_INN
Цитата:
Может кто еще проверит на версии не ниже FF120



Всего записей: 1518 | Зарегистр. 12-10-2002 | Отправлено: 16:20 01-09-2024 | Исправлено: grom17, 16:38 01-09-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
grom17, у тебя все в порядке, никаких затемнений.
Тестируя русскую локализацию сабжа заметил, что не пашет параметр i "без учета регистра символов" с русскими буквами. Оно и понятно, поддерживается токо ASCII. Недаром я давно сижу на инглише, хоть и по другой причине

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 18:38 01-09-2024 | Исправлено: Death_INN, 18:54 01-09-2024
deannik

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
Тебе самому хорошо было бы глянуть в инструментах разраба, какой стиль затемняет иконки.
Даже не знаю и не понимаю где и что смотреть?
Цитата:
А пункты с затемненными иконками нормально функционируют при клике на них?
Тоже не пойму, почему затемненными? Проблема ведь в том, что без opacity: 1 !important; некоторые иконки светлее, чем должны быть. Все иконки, при клике на них, функционируют нормально.
Цитата:
Можешь еще попробовать в обоих файлах убрать строку
@-moz-document url-prefix("chrome://browser/content/") {
вместе со скобкой } в самом конце файлов  
Не помогло.
Цитата:
И хорошо бы еще удалять папку startupCache перед запуском сабжа
Тоже не помогло.
Цитата:
Добавил примеры иконок для menu и toolbarbutton. ссылка
Спасибо. Удалил все стили в userChrome.css, оставил только импорт, удалил userContent.css — не помогло, иконки бледные. Скачал, ради интереса, FF от cento8, выкинул его папку chrome и подсунул свою — иконки бледные.) Фигня какая-то.
 
Добавлено:
Как уменьшить расстояние между пунктами меню и разделителями. Вот скрин, слева как сейчас у меня, справа как хотелось бы (используется этот код). Я бы его оставил, но он конфликтует с Вашим и сильно.

Всего записей: 598 | Зарегистр. 04-08-2013 | Отправлено: 19:10 01-09-2024 | Исправлено: deannik, 19:31 01-09-2024
Death_INN

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik

Цитата:
Даже не знаю и не понимаю где и что смотреть?

манул в конце шапки

Цитата:
Проблема ведь в том, что без opacity: 1 !important; некоторые иконки светлее, чем должны быть

в том-то и дело, что некоторые (причем с одинаковой иконкой), а не все

Цитата:
Скачал, ради интереса, FF от cento8, выкинул его папку chrome и подсунул свою — иконки бледные.) Фигня какая-то.  

скинь в личку ссылку

Цитата:
Как уменьшить расстояние между пунктами меню и разделителями

в твоих стилях уже есть установка межстрочного интервала, причем без учета режима. И компактный режим наверное включен. Нужно меньше - уменьши значение минимальной высоты. А для сепараторов:

Код:
menupopup:not([placespopup], .in-menulist) > menuseparator {
  padding-block: 1px !important;
}

 
Добавлено:
Сейчас у себя глянул. В компактном режиме минимальня высота пунктов контекстных меню 18px и если у тебя такой же режим, то min-height: 24px только увеличит промежутки, т.е. стиль вообще не нужен и все прекрасно регулируется через padding-block, который по умолчанию 0.5em, а я себе ставлю 0.15em

Всего записей: 3561 | Зарегистр. 24-10-2002 | Отправлено: 20:18 01-09-2024 | Исправлено: Death_INN, 20:36 01-09-2024
deannik

Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
скинь в личку ссылку
http://effect8.ru/soft/firefox-repack.html (ссылка: https://wdfiles.ru/1t71f)
Цитата:
в твоих стилях уже есть установка межстрочного интервала, причем без учета режима.
 
Да, знаю, выставлено в нём 24px, 22 слишком сжато получается.
Цитата:
И компактный режим наверное включен.
Не знаю, где и как он включается? Сам точно ничего не включал.
Цитата:
т.е. стиль вообще не нужен и все прекрасно регулируется через padding-block, который по умолчанию 0.5em, а я себе ставлю 0.15em
И снова непонимание с моей стороны, где находится этот padding-block? В стилях их несколько, но все значения в пикселях, em не вижу у себя.

Всего записей: 598 | Зарегистр. 04-08-2013 | Отправлено: 21:06 01-09-2024 | Исправлено: deannik, 22:40 01-09-2024
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

Компьютерный форум Ru.Board » Компьютеры » Программы » Mozilla Firefox: стили userChrome.css и скрипты js


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru