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

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в 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

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

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-селекторов элементов интерфейса встроенными средствами браузера
Всего записей: 7303 | Зарегистр. 14-09-2020 | Отправлено: 08:34 29-07-2023 | Исправлено: gutasiho, 09:49 30-08-2024
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
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 21:33 01-09-2024 | Исправлено: Death_INN, 21:41 01-09-2024
deannik

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

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

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

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

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

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

Gold Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN
Последняя правка паддинга "только для конт. меню страницы" работает, спс. Только к сведению: не работает в 115esr, но это не запрос, для меня править не нужно.
deannik
Я бы проверил исправность кода иконки через блокнот (вставить код иконки и сохранить как .svg) и проводник (в смысле viewer для svg), и адресную строку браузера, естественно, и там, и там иконка должна отображаться.
Второе, для проверки всего кода можно временно указать ресурсную или локальную иконку.
Всего записей: 7303 | Зарегистр. 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 и т.д.) и скажи какое поставил
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 13:29 02-09-2024 | Исправлено: Death_INN, 14:08 02-09-2024
deannik

Full 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;
}
Всего записей: 549 | Зарегистр. 04-08-2013 | Отправлено: 14:38 02-09-2024
Death_INN

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

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

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

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

По дефолту 1em, так что можно вообще о стиле забыть
Всего записей: 3427 | Зарегистр. 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;
}
Всего записей: 7303 | Зарегистр. 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%);
}
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 09:21 03-09-2024 | Исправлено: Death_INN, 09:26 03-09-2024
deannik

Full Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Death_INN, шутите,)) я не приказывал)), а попросил. Спасибо. Только работает не на всех элементах меню (видео). Как раз проблемные, иконки на которых без стиля opacity: 1 !important; бледные.
 
Добавлено:
Видимо я погорячился с пожеланием укоротить прямоугольник выделения. Смотрится как обрубок. На всю ширину меню с небольшим зазором по бокам и закругленными немного краями смотрится намного лучше (скрин). Изменил Ваш код. Большое спасибо, пусть будет, всегда можно изменить под желаемое. Интересно, что с изначальным Вашим стилем не работает border-radius: 4px !important;, после изменения на "0" и "100" стиль заработал, углы закругляются, кроме гамбургера.
Всего записей: 549 | Зарегистр. 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, который тебе и нужен
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 13:33 03-09-2024
deannik

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

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

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

Цитата:
тогда и background-image не нужен, вместо него
background-color: var(--panel-item-hover-bgcolor) !important;
Спасибо. Предыдущий тоже сохранил, когда-нибудь пригодиться.
Всего записей: 549 | Зарегистр. 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;
}
Всего записей: 3427 | Зарегистр. 24-10-2002 | Отправлено: 11:07 04-09-2024 | Исправлено: Death_INN, 11:11 04-09-2024
deannik

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

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

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

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

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

Full 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>
Всего записей: 549 | Зарегистр. 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

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