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

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155

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

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 | MrOtherGuy/firefox-csshacks (known as MOG) | VicDobrov UCF-скрипты

Просьба публикуемые коды заключать в тэг [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
1\ Также не забываем про такую строку в 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.
2\ v136+: отключить CSP (Content Security Policy - Политика безопасности контента), снижает безопасность!:
Код:
security.browser_xhtml_csp.enabled = false
3\ v139+: если некоторые скрипты JS не работают, можете сделать так, снижает безопасность!:
Код:
security.allow_unsafe_dangerous_privileged_evil_eval = true  

Полезные ссылки
Онлайн-конвертер иконок в\из Base64
Онлайн-редактор иконок SVG
Онлайн-конвертер SVG to Data URI
Мануал по определению CSS-селекторов элементов интерфейса встроенными средствами браузера
Всего записей: 8874 | Зарегистр. 14-09-2020 | Отправлено: 08:34 29-07-2023 | Исправлено: gutasiho, 16:26 26-07-2025
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, компактный режим включен у тебя? Если нет, то включи, затем смотри в твоих стилях

Код:
menupopup:not([placespopup], .in-menulist) > menuitem, menupopup:not([placespopup], .in-menulist) > menu {
    padding-block: 0px !important;
    margin: 0px !important;
    min-height: 24px !important;
    border-radius: 0px !important;
}

 
Закомментируй строки с padding-block и min-height, перезапуск брауза. Если не устраивает и хочешь уменьшить, то добавишь
padding-block: 0.4em  !important;
и если нужно, уменьшаешь дальше. По умолчанию значение 0.5em
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 21:33 01-09-2024 | Исправлено: Death_INN, 21:41 01-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
компактный режим включен у тебя? Если нет, то включи
Включил, но разницы не заметил. Закомментировал строки padding-block и min-height, получается слишком большое расстояние между элементами (скрин). Выставил 0.4em — всё ещё большое, выставил 0.24em — получилось также как и до изменений (скрин слева с Вашими стилями), т.е. можно не выставлять компактный режим, оставить стиль "Межстрочный интервал" без изменений, стиль для сепараторов исправляет проблему. В общем можно и так и так. Как сделать полосу выделенного элемента вровень с сепаратороми (скрин)?
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 22:40 01-09-2024 | Исправлено: deannik, 22:47 01-09-2024
Samotek

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всем привет!  
У меня на панели задач есть кнопка вызова "Меню закладок" (Показать ваши закладки Ctrl+Shift+O). Можно ли как-то убрать у этой кнопки ее заголовок? Места жалко.
Всего записей: 2773 | Зарегистр. 18-05-2005 | Отправлено: 23:18 01-09-2024 | Исправлено: Samotek, 23:21 01-09-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik
Вот если без стилей переключать режим с компактного на нормальный и обратно, то разница была бы видна

Цитата:
Как сделать полосу выделенного элемента вровень с сепаратороми

так текущий скрин какой? на левом сепараторы короче по длине и выделение другого цвета. Тема какая у тя в сабже, системная или светлая? Прямоугольник выделения можно сделать любой длины через линейный градиент
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 10:24 02-09-2024 | Исправлено: Death_INN, 10:38 02-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
так текущий скрин какой? на левом сепараторы короче по длине и выделение другого цвета.
Вот этот.
Цитата:
Тема какая у тя в сабже, системная или светлая?
Системная. Вы мне скинули примеры иконок, но у меня снова затык получился. Сама иконка код, а это, что пытался сделать, но иконка не отображается код
 
Добавлено:
Насчёт выделения другим цветом. У меня есть такой код, брал где-то здесь в теме. Покомпактнее возможно сделать или только такой?
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 11:12 02-09-2024 | Исправлено: deannik, 12:17 02-09-2024
gutasiho

Gold Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Последняя правка паддинга "только для конт. меню страницы" работает, спс. Только к сведению: не работает в 115esr, но это не запрос, для меня править не нужно.
deannik
Я бы проверил исправность кода иконки через блокнот (вставить код иконки и сохранить как .svg) и проводник (в смысле viewer для svg), и адресную строку браузера, естественно, и там, и там иконка должна отображаться.
Второе, для проверки всего кода можно временно указать ресурсную или локальную иконку.
Всего записей: 8874 | Зарегистр. 14-09-2020 | Отправлено: 12:25 02-09-2024 | Исправлено: gutasiho, 12:26 02-09-2024
Death_INN

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

Цитата:
Вы мне скинули примеры иконок, но у меня снова затык получился. Сама иконка код, а это, что пытался сделать, но иконка не отображается код

В гамбургере - это в основном toolbarbutton icon. В других меню в основном menuitem icon, а menu icon со стрелкой справа. Так что "Закрыть вкладку" - это menuitem. В этом же меню есть "Переместить вкладку" или как там по русски - это уже menu
И юзай конвертер для перевода svg в data:image. Цвет чего в иконке предполагается изменять, прямоугольника или крестика?

Цитата:
Насчёт выделения другим цветом. У меня есть такой код, брал где-то здесь в теме. Покомпактнее возможно сделать или только такой?

Как время будет - сделаю
Для сепаратора padding-block с каким значением задал и нужно ли увеличивать длину? Если да, то сам увеличь, уменьшая дефолтное значение padding-inline: 1em. (0.9em и т.д.) и скажи какое поставил
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 13:29 02-09-2024 | Исправлено: Death_INN, 14:08 02-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
И юзай конвертер для перевода svg в data:image. Цвет чего в иконке предполагается изменять, прямоугольника или крестика?  
Получилось. Спасибо.
Цитата:
Для сепаратора padding-block с каким значением задал и нужно ли увеличивать длину? Если да, то сам увеличь, уменьшая дефолтное значение padding-inline: 1em. (0.9em и т.д.) и скажи какое поставил
padding-block — 0.24em, padding-inline: если уменьшать, то иконки сдвигаются к левому краю и некоторые пункты меню разъехались. Возможно я не в тот код вставил padding-inline:
Код:
menupopup:not([placespopup], .in-menulist) > menuitem, menupopup:not([placespopup], .in-menulist) > menu {
    padding-block: 0.24em !important;
    margin: 0px !important;
    /* min-height: 24px !important; */
    border-radius: 0px !important;
    padding-inline: 0.7em !important;
}
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 14:38 02-09-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, речь шла о сеператоре, значит padding-inline относится к нему
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 16:08 02-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, даже не знаю как лучше. Сеператор от края до края, как по мне, не смотрится. Когда заподлицо с иконкой лучше. Наверное так:
Код:
menupopup:not([placespopup], .in-menulist) > menuseparator {
  padding-block: 1px !important;
  padding-inline: 0.9em !important;
}
Или вообще padding-inline: 1em сделать.
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 17:07 02-09-2024 | Исправлено: deannik, 17:08 02-09-2024
Death_INN

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

Цитата:
Или вообще padding-inline: 1em сделать

По дефолту 1em, так что можно вообще о стиле забыть
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 17:37 02-09-2024
gutasiho

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

Код:
/* userContent.css */
/* Hide "Firefox Labs" button in Firefox v130.0 */
@-moz-document url("about:preferences") {
#category-experimental {
    display: none !important;
    visibility: collapse !important;
}
Всего записей: 8874 | Зарегистр. 14-09-2020 | Отправлено: 08:27 03-09-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, ты приказывал подсократить код. В первом приближении так

Код:
#navigator-toolbox, #mainPopupSet {
  --panel-item-hover-bgcolor: #90C8F6;
}
menupopup:not(.in-menulist) > :is(menu, menuitem):where([_moz-menuactive]:not([disabled])) {
  background-image: linear-gradient(to right, Menu 2%, var(--panel-item-hover-bgcolor) 2% 98%, Menu 98%);
}
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 09:21 03-09-2024 | Исправлено: Death_INN, 09:26 03-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, шутите,)) я не приказывал)), а попросил. Спасибо. Только работает не на всех элементах меню (видео). Как раз проблемные, иконки на которых без стиля opacity: 1 !important; бледные.
 
Добавлено:
Видимо я погорячился с пожеланием укоротить прямоугольник выделения. Смотрится как обрубок. На всю ширину меню с небольшим зазором по бокам и закругленными немного краями смотрится намного лучше (скрин). Изменил Ваш код. Большое спасибо, пусть будет, всегда можно изменить под желаемое. Интересно, что с изначальным Вашим стилем не работает border-radius: 4px !important;, после изменения на "0" и "100" стиль заработал, углы закругляются, кроме гамбургера.
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 10:07 03-09-2024 | Исправлено: deannik, 11:34 03-09-2024
Death_INN

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

Цитата:
Как раз проблемные, иконки на которых без стиля opacity: 1 !important; бледные.

Оставь одну вкладку и выложи скрин контекстного меню этой вкладки

Цитата:
На всю ширину меню с небольшим зазором по бокам и закругленными немного краями смотрится намного лучше

тогда и background-image не нужен, вместо него
background-color: var(--panel-item-hover-bgcolor) !important;

Цитата:
Интересно, что с изначальным Вашим стилем не работает border-radius: 4px !important;, после изменения на "0" и "100" стиль заработал, углы закругляются, кроме гамбургера

углы могут закругляться только на концах прямоугольника. С моим стилем на концах был цвет фона самого меню (панели). Если не понятно, то задай красный цвет, т.е. заменить Menu на red

Цитата:
углы закругляются, кроме гамбургера

В гамбургере по дефолту радиус 4px, который тебе и нужен
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 13:33 03-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
Оставь одну вкладку и выложи скрин контекстного меню этой вкладки
Скриншот.

Цитата:
углы могут закругляться только на концах прямоугольника. С моим стилем на концах был цвет фона самого меню (панели). Если не понятно, то задай красный цвет, т.е. заменить Menu на red
Заменил на red. Увидел.

Цитата:
В гамбургере по дефолту радиус 4px, который тебе и нужен
Да, заметил, что углы немного закруглены, только не знал, что именно 4px.

Цитата:
тогда и background-image не нужен, вместо него
background-color: var(--panel-item-hover-bgcolor) !important;
Спасибо. Предыдущий тоже сохранил, когда-нибудь пригодиться.
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 14:39 03-09-2024 | Исправлено: deannik, 14:40 03-09-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik, попробуй такой стиль и посмотри на цвет фона при наведении мыши на затемненные пункты. И какой будет на "Сохранить объект..."

Код:
menupopup:not(.in-menulist) :is(menu, menuitem):where([_moz-menuactive][disabled]) {
  background-color: red !important;
}
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 11:07 04-09-2024 | Исправлено: Death_INN, 11:11 04-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, "Сохранить объект как", "Сохранить изображение как" цвет красный (видео)
 
Добавлено:
Death_INN, ранее Вы писали:
Цитата:
Тебе самому хорошо было бы глянуть в инструментах разраба, какой стиль затемняет иконки.

Цитата:
манул в конце шапки
Знаю про этот мануал, т.к. с его помощью смотрю названия селекторов. Подскажите, что я должен там посмотреть/увидеть, чтобы это помогло понять почему в моём случае некоторые иконки светлее? Хотелось бы разобраться, ведь так не должно быть.
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 15:16 04-09-2024 | Исправлено: deannik, 17:55 04-09-2024
Death_INN

Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
deannik
Переключи тему с системной на светлую. Изменилось ли поведение в проблемном контекстном меню (само собой стиль с опасити 1 должен быть убран)? Обратно на системную

Цитата:
Знаю про этот мануал, т.к. с его помощью смотрю названия селекторов

ПКМ на элементе с лейблом "Сохранить объект как" и (или) "Сохранить изображение как", затем Copy - Inner HTML и в студию
Всего записей: 3949 | Зарегистр. 24-10-2002 | Отправлено: 20:20 04-09-2024 | Исправлено: Death_INN, 20:24 04-09-2024
deannik

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Цитата:
Переключи тему с системной на светлую. Изменилось ли поведение в проблемном контекстном меню (само собой стиль с опасити 1 должен быть убран)? Обратно на системную  
Иконки стали снова светлыми (видео). И это при закомментированном стиле:
Код:
menupopup:not(.in-menulist) :is(menu, menuitem):where([_moz-menuactive][disabled]) {
  background-color: red !important;
}  
Если раскомментировать, то иконки также светлые, выделение голубым (видео), но оно и там где его не должно быть (видео). Если я правильно понял, то пункты меню, которые неактивные выделяться голубым не должны.

Цитата:
ПКМ на элементе с лейблом "Сохранить объект как" и (или) "Сохранить изображение как", затем Copy - Inner HTML и в студию

Код:
<label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="menu-text" crop="end" aria-hidden="true" value="Сохранить объект как…" accesskey="С"/><hbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="menu-accel-container" aria-hidden="true"><label class="menu-accel"/></hbox>
Всего записей: 682 | Зарегистр. 04-08-2013 | Отправлено: 21:23 04-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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155

Компьютерный форум 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-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru