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

Stkvsky · №6251

Пробую перейти на квантум
Подскажите пожалуйста как правильно перекинуть стили
Сейчас они у меня в дополнении Stylish (раздел "Стили" в дополнениях)
Их все нужно вставить по очереди в какой то файл?
Или можно каждый стиль создавать отдельным файлом?

Acid Crash · №6252

Stkvsky.
Приветствую.
Со Stylish было много кипиша касательно слива-слежки после того как его перекупили-продали.
Когда это произошло (начиная с какой версии)- затрудняюсь сказать...
По описанию у Вас версия ещё то этого инцидента...
Сейчас популярность пользуется Stylus
https://addons.mozilla.org/en-US/firefox/addon/styl-us/
Фактически это форк первого до того как он испортился.
Касательно бекабов, в Stylus можно делать импорт/экспорт из/в Json. Ну и ещё можно через DropBox бекапить.

По переходу с одно на другой.
Если у Вас очень старая версия Stylish, то вероятно вот тут (вопрос 5) об этом указано.

Войдите или зарегистрируйтесь, чтобы увидеть скрытый текст.

На самый крайний случай можно руками через Ctrl+C Ctrl+V перенести.

З.Ы. на всякий случай, вдруг не сталкивались.
Stylus не умеет менять оформление/стили браузера. Для этого сейчас только userChrome.css

UPD. Вот тут вроде ещё по Вашей теме обсуждение

Войдите или зарегистрируйтесь, чтобы увидеть скрытый текст.

Отредактировано Acid Crash (19-08-2019 17:43:27)

Stkvsky · №6253

Acid Crash
Большое спасибо за детальное пояснение.
Еще пара вопросов:

1. userChrome.css это один файл для всех стилей/оформлений браузера?
Или можно создать для каждого стиля отдельный файл userChrome1.css userChrome2.css и т.д.

2. Можно ли в userChrome.css вставлять стили изменяющие сайты, чтобы не устанавливать Stylus
или они работать не будут?

Отредактировано Stkvsky (19-08-2019 17:59:30)

_zt · №6254

Vitaliy V.
Вы не могли бы сделать шаблон стиля с биндингом создающего подменю в контекстном меню полей ввода, для вставки:
1. символов
2. тегов, вокруг выделенного текста, с отображением короткого имени в подменю
3. произвольного текста, с отображением короткого имени в подменю
?
В идеале, три подменю с возможностью отключения ненужных.

Похоже, что кроме вас с таким ни кто не справится.
Рабочих расширений с подобным функционалом на данный момент нет (или я не нашел), для актуальных версий [firefox] .

Acid Crash · №6255

Stkvsky пишет

Acid Crash
Большое спасибо за детальное пояснение.
Еще пара вопросов:

Stkvsky
1. userChrome.css можно использовать как отправную точку, прописывая в нем путь к другим файлам-стилям (коротко, через схему @import "./config/general_variables.css"; ).
Получится своеобразная модульность с возможностью относительно быстрого отключения "блоков".
2. Для сайтов (и частично для некоторых страниц браузера) используется userContent.css. Логика аналогичная первому.
В принципе можно обойтись и без расширения и прописать всё в userContent.css. Но это объективно значительно усложняет процесс обновления/добавления стилей.

По модульности системы userChrome.css-userContent.css попробуйте посмотреть в проекте Aris-а, там можно посмотреть как оно работает

Войдите или зарегистрируйтесь, чтобы увидеть скрытый текст.

_zt · №6256

tt74
Вот посмотрите может подойдет.

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

Выделить код

Код:

/* Высота заголовка боковой панели */
#sidebar-header {
    align: top;
    height: 30px;
}
/* Кнопка с выпадающем меню */
toolbarbutton#sidebar-switcher-target {
    -moz-appearance: none !important;
    margin: -15px 0px -14px 0px !important;
    padding: 0px 1px 0px 1px !important;
}
/* Скрыть крестик закрытия боковой панели */
#sidebar-close {
    visibility: collapse !important;
}

Отредактировано _zt (19-08-2019 18:45:22)

Stkvsky · №6257

Acid Crash
Ясно. Спасибо.
Я так подумал, лучше все стили оформления браузера в один userChrome.css вставить, я все равно их не обновляю никогда.
Как правильно это сделать?
Вот например два стиля:
1. FF Scroll color

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

Выделить код

Код:

/* AGENT_SHEET */
scrollbarbutton[sbattr="scrollbar-up-top"],
scrollbarbutton[sbattr="scrollbar-down-top"],
scrollbarbutton[sbattr="scrollbar-up-bottom"],
scrollbarbutton[sbattr="scrollbar-down-bottom"]
{
  -moz-appearance: none !important;
  display: none !important;
}

scrollbar[orient="vertical"]
{
  -moz-margin-start: -15px;
  min-width: 15px!important;
  max-width: 15px!important;
  -moz-appearance: none!important;
  position: relative;
  background-color: transparent!important;
  background-image: none!important;
  border: 0;
  z-index: 2147483647;
  -moz-box-align: start;
  padding: 1px 1px 1px 6px!important;
}

scrollbar[orient="horizontal"]
{
  margin-top: -15px;
  min-height: 15px;
  max-height: 15px;
  -moz-appearance: none!important;
  position: relative;
  background-color: transparent;
  background-image: none;
  border: 0;
  z-index: 2147483647;
  -moz-box-align: start;
  padding: 6px 11px 1px 1px!important;
}

scrollbar thumb
{
  -moz-appearance: none !important;
  background-color: rgba(200,0,0,0.5);
  border-radius: 8px;
  border: 0;
}

scrollbar[orient="vertical"] thumb
{
  min-height: 20px!important;
  min-width: 15px!important;
  max-width: 15px!important;
}

scrollbar[orient="horizontal"] thumb
{
  min-width: 20px!important;
  min-height: 15px!important;
  max-height: 15px!important;
}

scrollbar thumb:hover, scrollbar thumb:active
{
  background-color: rgba(0,0,0,0.5);
}

html div scrollbar
{
  -moz-margin-start: 0!important;
}

2.FF Adres Размер шрифта в адресной строке

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

Выделить код

Код:

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

.urlbar-input-box{
 /* font-family: Sans-serif !important;*/
  font-size: 18px !important;
 /** font-weight: normal !important;*/
  color: black !important;
}

Вот мой userChrome.css
Как правильно добавить эти два стиля в него
Там как то нужно разделять их правильно?
Если просто скопировать и вставить не работает.

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

Выделить код

Код:

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

@-moz-document url-prefix("chrome://browser/content/browser.x") {
vbox#browser-create-start {
    position: relative !important;
    width: 5px !important;
    margin-inline-end: -5px !important;
    opacity: 0 !important;
    z-index: 6 !important;
}

vbox#browser-create-end {
    position: relative !important;
    width: 5px !important;
    margin-inline-start: -5px !important;
    opacity: 0 !important;
    z-index: 6 !important;
}

vbox#browser-border-end {
    -moz-binding: url("./bindings/startend.xml#startend") !important;
    display: -moz-box !important;
}

vbox#browser-border-end[hidden="true"] {
    visibility: collapse !important;
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
}
}

Отредактировано Stkvsky (19-08-2019 22:21:00)

Vitaliy V. · №6258

_zt пишет

Рабочих расширений с подобным функционалом на данный момент нет (или я не нашел), для актуальных версий

Думаю есть нечто подобное, возможно есть и ещё варианты если получше поискать
https://addons.mozilla.org/ru/firefox/a … editables/
https://addons.mozilla.org/ru/firefox/a … t-editing/

А биндинги смысла делать нет когда [firefox] от них избавляется, почти избавился...
Или в теме CB спросите если используете.

Отредактировано Vitaliy V. (19-08-2019 20:36:25)

kokoss · №6259

Stkvsky
Что касается Скроллбара, если для [firefox] 68, то так.

Stkvsky · №6260

kokoss
Спасибо.
А как много стилей правильно вставить в один userChrome.css?
Я на обычной 56 версии проверяю, копирую все стили в userChrome.css но они не работают.

Добавлено 19-08-2019 22:05:02
Я не могу вашим userChrome.css заменить свой, у меня там тоже нужный стиль
Мне нужно научится совмещать

Отредактировано Stkvsky (19-08-2019 22:05:02)

kokoss · №6261

Stkvsky пишет

Я на обычной 56 версии проверяю, копирую все стили в userChrome.css но они не работают.

Надо проверять не на [firefox] 56, а на которую собирайтесь перейти?

Отредактировано kokoss (20-08-2019 15:28:32)

_zt · №6262

Vitaliy V.
Insert Template что-то вроде того что нужно.

CB заметно тормозит [firefox] даже без кнопок. И учитывая, что большинство кнопок требует однопроцессорный режим, а большинство старых кнопок не работает... В общем, CB сейчас только для тех, кто сам способен исправлять кнопки.

Stkvsky · №6263

kokoss пишет

Надо проверять не на 56, а на которую собирайтесь перейти?

я хочу понять как правильно вставлять несколько стилей в userChrome.css
И со Stilyshа перенести все в userChrome.css

Отредактировано Stkvsky (20-08-2019 01:34:17)

Stkvsky · №6264

Ясно короче, а я то думаю в чем дело
Вставляю в userChrome.css стиль изменяющий цвет скролл бара, а он не работает
В стилише работает а в userChrome.css нет
Получается не все стили можно перенести в userChrome.css?

Stkvsky · №6265

В общем разобрался, все стили которые не работают в userChrome.css
Нужно добавлять в файл scrollbars.as.css (стиль изменения скролбара)
Этот файл который идет в пакете изменения скролбара который скинули выше.

Отредактировано Stkvsky (20-08-2019 03:16:35)

Stkvsky · №6266

А поповоду стилей для сайтов
создаете в папке сhrome (там где лежит файл userChrome.css)
текстовый файл с форматом *.css
и закидываете в него стиль для сайта
можно на каждый стиль отдельный файл создавать (можно все в один запихнуть)

tt74 · №6267

_zt пишет

tt74
Вот посмотрите может подойдет...

Спасибо!! Убрал крестик у вкладок, появляется только при наведении на вкладку

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

Еще бы убрать отступ вначале (перед иконкой вкладки) как у Вас
Upd.: Убрал вот этим кодом

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

Выделить код

Код:

.tab .twisty {
  margin-right: -2em;
  opacity: 0;
  position: relative;
  z-index: 10000;}

Отредактировано tt74 (20-08-2019 09:48:37)

solombala · №6268

Как задать размер сепаратора .urlbarView-title-separator ?

_zt · №6269

tt74
Код который я давал выше у меня в userChrome.css используется и он не для вкладок, а для заголовков всех боковых панелей.

vassemm · №6270

Vitaliy V.
Приветствую!
Долгое время пользуюсь вашим стилем для скрытия панели закладок (левый сайдбар) по клику, но вот в 69 версии он перестал работать.
Помогите пожалуйста.

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

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

@-moz-document url("chrome://browser/content/browser.xul") {
#sidebar-box {
--v-sidebar-min-width: 1px;
--v-sidebar-min-width-normal: 2px;
--v-sidebar-max-width: 20em;
--v-sidebar-transition-delay-show: .2s;
--v-sidebar-transition-delay-hide: .0s;
--v-sidebar-transition-duration: .0s;
/* ********************************************** */

position: relative !important;
z-index: 2 !important;
min-width: var(--v-sidebar-max-width) !important;
width: var(--v-sidebar-max-width) !important;
max-width: var(--v-sidebar-max-width) !important;
overflow: hidden !important;
opacity: 0 !important;
--v-sidebar-margin-max-width: calc(-1 * var(--v-sidebar-max-width));
--v-sidebar-margin-left-locale-dir: 0;
--v-sidebar-margin-right-locale-dir: var(--v-sidebar-margin-max-width);
--v-sidebar-transform-locale-dir: -1;
margin-left: var(--v-sidebar-margin-left-locale-dir) !important;
margin-right: var(--v-sidebar-margin-right-locale-dir) !important;
transform: translateX(calc(var(--v-sidebar-transform-locale-dir) * (var(--v-sidebar-max-width) - var(--v-sidebar-min-width)))) !important;
transition-timing-function: linear, step-start !important;
transition-delay: var(--v-sidebar-transition-delay-hide), calc(var(--v-sidebar-transition-delay-hide) + var(--v-sidebar-transition-duration)) !important;
transition-duration: var(--v-sidebar-transition-duration), 0s !important;
transition-property: transform, opacity !important;
-moz-binding: url("data:text/xml;charset=utf-8,<bindings xmlns='http://www.mozilla.org/xbl'><binding id='sidebar'><implementation><field name='listener'>false;</field><field name='timer'>null;</field><field name='delay'>null;</field><method name='handleEvent'><parameter name='event'/><body><![CDATA[ var boxObj = this.boxObject; if (event.screenY < boxObj.screenY || event.screenY > boxObj.screenY + boxObj.height || event.screenX < boxObj.screenX || event.screenX > boxObj.screenX + boxObj.width) { window.removeEventListener('click', this, false); this.listener = false; if (this.hasAttribute('sidebardrag')) this.removeAttribute('sidebardrag'); } ]]></body></method></implementation><handlers><handler event='mouseenter'><![CDATA[ if (!this.hasAttribute('sidebardrag') && !this.listener) { clearTimeout(this.timer); var delay = this.delay || (this.delay = +getComputedStyle(this).getPropertyValue('transition-delay').replace(/[^0-9\.]/g, '') * 1000); this.timer = setTimeout(() => { this.setAttribute('sidebardrag', 'true'); this.listener = true; window.addEventListener('click', this, false); }, delay); } ]]></handler><handler event='mouseleave'><![CDATA[ clearTimeout(this.timer); ]]></handler><handler event='dragenter'><![CDATA[ if (!this.hasAttribute('sidebardrag')) this.setAttribute('sidebardrag', 'true'); ]]></handler><handler event='drop'><![CDATA[ if (!this.listener && this.hasAttribute('sidebardrag')) this.removeAttribute('sidebardrag'); ]]></handler><handler event='dragexit'><![CDATA[ var boxObj = this.boxObject; if (!this.listener && (!event.relatedTarget || event.screenY <= (boxObj.screenY + 5) || event.screenY >= (boxObj.screenY + boxObj.height - 5) || event.screenX <= (boxObj.screenX + 5) || event.screenX >= (boxObj.screenX + boxObj.width - 5)) && this.hasAttribute('sidebardrag')) this.removeAttribute('sidebardrag'); ]]></handler></handlers></binding></bindings>#sidebar") !important;
}

#sidebar-box[ordinal][positionend="true"],
#sidebar-box:-moz-locale-dir(rtl) {
--v-sidebar-margin-left-locale-dir: var(--v-sidebar-margin-max-width);
--v-sidebar-margin-right-locale-dir: 0;
--v-sidebar-transform-locale-dir: 1;
}

#sidebar-box[ordinal][positionend="true"]:-moz-locale-dir(rtl) {
--v-sidebar-margin-left-locale-dir: 0;
--v-sidebar-margin-right-locale-dir: var(--v-sidebar-margin-max-width);
--v-sidebar-transform-locale-dir: -1;
}

#main-window[sizemode="normal"] #sidebar-box {
--v-sidebar-min-width: var(--v-sidebar-min-width-normal) !important;
}

#browser > *:not(#appcontent):hover ~ #sidebar-box[ordinal]:not([positionend="true"]),
#sidebar-box:hover,
#sidebar-box[sidebardrag] {
transform: translateX(0) !important;
opacity: 1 !important;
transition-delay: var(--v-sidebar-transition-delay-show) !important;
}

#main-window #browser > #sidebar-splitter {
-moz-appearance: none !important;
visibility: collapse !important;
padding: 0 !important;
border: none !important;
width: 0 !important;
}

#sidebar-box > #sidebar {
min-width: 0 !important;
width: auto !important;
max-width: none !important;
-moz-box-flex: 1 !important;
}
}

PS: кстати тут на форуме он исчез куда-то

Vitaliy V. · №6271

vassemm пишет

кстати тут на форуме он исчез куда-то

Да нет там где и был https://forum.mozilla-russia.org/viewto … 19#p721919

Отредактировано Vitaliy V. (20-08-2019 21:26:55)

vassemm · №6272

Vitaliy V. пишет

там где и был

Так этот я видел.
Это по таймауту, а мне нужен по клику

Vitaliy V. · №6273

vassemm
или нет замените @-moz-document url("chrome://browser/content/browser.xul") {
на @-moz-document url-prefix("chrome://browser/content/browser.x") {
в своем коде

Отредактировано Vitaliy V. (20-08-2019 21:31:55)

vassemm · №6274

Тогда один раз выезжает и все.
Не убирается

Vitaliy V. · №6275

vassemm пишет

Не убирается

по клику же должен убираться у меня работает

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

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