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

grom17 · №13926

egorsemenov06
Может это подойдёт?

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

https://www.upload.ee/files/16818357/ic … u.rar.html

grom17 · №13927

Vitaliy V. здравствуйте! Не откажите в просьбе подправить Ваш код для работы в последних версиях FF. Спасибо.
https://forum.mozilla-russia.org/viewtopic.php?pid=694630#p694630

Vitaliy V. · №13928

grom17
Как-то так, наверно, если имеется ввиду цвет текста,
функцию light-dark конечно необязательно использовать.

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

Выделить код

Код:

/* Цвет текста активной вкладки (обычной) */
.tabbrowser-tab[selected] .tab-label {
    color: light-dark(goldenrod, gold) !important;
    font-weight: bold !important;
}
/* Цвет текста неактивной вкладки (обычной) */
.tabbrowser-tab:not([selected]) .tab-label {
    color: light-dark(gray, darkgray) !important;
}
/* Цвет текста неактивной вкладки (обычной при наведении) */
.tabbrowser-tab:hover:not([selected]) .tab-label {
    color: light-dark(goldenrod, gold) !important;
}
/* Цвет текста активной вкладки (при соединении) */
.tabbrowser-tab[busy][selected] .tab-label {
    color: light-dark(gray, darkgray) !important;
}
/* Цвет текста неактивной вкладки (при соединении) */
.tabbrowser-tab[busy]:not([selected]) .tab-label {
    color: light-dark(gray, darkgray) !important;
}
/* Цвет текста активной вкладки (при загрузке) */
.tabbrowser-tab[progress][selected] .tab-label {
    color: light-dark(blue, royalblue) !important;
}
/* Цвет текста неактивной вкладки (при загрузке) */
.tabbrowser-tab[progress]:not([selected]) .tab-label {
    color: light-dark(blue, royalblue) !important;
}
/* Цвет текста вкладки (проблемы соединения) */
.tabbrowser-tab[image^="chrome://global/skin/icons/info"]:not([busy]) .tab-label {
    color: light-dark(gray, darkgray) !important;
}
.tabbrowser-tab[image^="chrome://global/skin/icons/warning"]:not([busy]) .tab-label {
    color: light-dark(darkorange, orange) !important;
}

grom17 · №13929

Vitaliy V.

Vitaliy V. пишет

Как-то так, наверно, если имеется ввиду цвет текста,

О да! Отлично! Добавьте пожалуйста цвета самих вкладок и если можно цвета НЕ прочитанных вкладок.
Извините за "наглость", просто сам я это сделать не могу, не хватает знаний. Спасибо Вам большое!

_zt · №13930

grom17
Нет такого в браузере "непрочитанные".
Скрипт нужен
https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/blob/master/Full%20dark%20theme/Proton%20(FF%2089%2B)/setAttribute_unread.uc.js
и стиль к нему
https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/blob/d4f66e1b591cd41268d03b6de8b891d97cfcbd5e/Full%20dark%20theme/Proton%20(FF%2089%2B)/userChrome.css#L136
https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/blob/d4f66e1b591cd41268d03b6de8b891d97cfcbd5e/Full%20dark%20theme/Proton%20(FF%2089%2B)/userChrome.css#L1219

Так же и незагруженные красит.

Отредактировано _zt (03-07-2024 14:18:53)

grom17 · №13931

_zt

_zt пишет

Нет такого в браузере "непрочитанные".

Да Бог с ними, с непрочитанными, мне бы вкладки покрасить по аналогии с тем кодом который Vitaliy V. предоставил.

_zt · №13932

grom17
А проблема в чем? Продублируйте код, замените .tab-label на .tab-background, а color на background-color, ну и цвета свои назначьте.

Какой смысл в этой раскраске, без незагруженных и непрочитанных?

Отредактировано _zt (03-07-2024 16:25:21)

grom17 · №13933

_zt

_zt пишет

Продублируйте код, замените .tab-label на .tab-background, а color на background-color, ну и цвета свои назначьте.

Да, конечно, я где-то так и предполагал что в эту сторону копать нужно, спасибо! Если получится отпишу.

Добавлено 03-07-2024 17:30:21
Vitaliy V. _zt Спасибо вам за помощь!

_zt Заменил всё по вашему совету, супер, всё настраивается и работает как мне нужно!

Отредактировано grom17 (03-07-2024 17:30:21)

grom17 · №13934

_zt пишет

замените .tab-label на .tab-background

Пришлось заменить на background иначе почему-то не работало.

Отредактировано grom17 (03-07-2024 17:46:56)

Vitaliy V. · №13935

grom17
Тогда лучше использовать вложенный стиль чтобы не повторять одно и тоже,
кстати для незагруженных вкладок скрипт не нужен

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

Выделить код

Код:

.tabbrowser-tab {
    /* Активные вкладки */
    &[selected] {
        .tab-label {
            color: light-dark(goldenrod, gold) !important;
            font-weight: bold !important;
        }
        .tab-background {
            background-color: light-dark(white, darkblue) !important;
        }
    }
    /* Неактивные вкладки */
    &:not([selected],[multiselected]) {
        .tab-label {
            color: light-dark(gray, darkgray) !important;
        }
        .tab-background {
            background-color: light-dark(gainsboro, black) !important;
        }
    }
    /* Активные вкладки (при соединении) */
    &[busy][selected] {
        .tab-label {
            color: light-dark(gray, darkgray) !important;
        }
        .tab-background {
            background-color: light-dark(white, darkblue) !important;
        }
    }
    /* Неактивные вкладки (при соединении) */
    &[busy]:not([selected],[multiselected]) {
        .tab-label {
            color: light-dark(gray, darkgray) !important;
        }
        .tab-background {
            background-color: light-dark(gainsboro, black) !important;
        }
    }
    /* Активные вкладки (при загрузке) */
    &[progress][selected] {
        .tab-label {
            color: light-dark(blue, royalblue) !important;
        }
        .tab-background {
            background-color: light-dark(white, darkblue) !important;
        }
    }
    /* Неактивные вкладки (при загрузке) */
    &[progress]:not([selected],[multiselected]) {
        .tab-label {
            color: light-dark(blue, royalblue) !important;
        }
        .tab-background {
            background-color: light-dark(gainsboro, black) !important;
        }
    }
    /* Вкладки (проблемы соединения) */
    &[image^="chrome://global/skin/icons/info"]:not([busy]) {
        .tab-label {
            color: light-dark(gray, darkgray) !important;
        }
    }
    &[image^="chrome://global/skin/icons/warning"]:not([busy]) {
        .tab-label {
            color: light-dark(darkorange, orange) !important;
        }
    }
    /* Незагруженные вкладки */
    &[pending] {
        .tab-label {
            font-style: italic !important;
        }
    }
    /* Неактивные вкладки (при наведении) */
    &:hover:not([selected],[multiselected]) {
        .tab-label {
            color: light-dark(goldenrod, gold) !important;
        }
        .tab-background {
            --v-tab-hover-background: light-dark(color-mix(in srgb, currentColor 5%, transparent), color-mix(in srgb, currentColor 20%, transparent));
            background-image: linear-gradient(var(--v-tab-hover-background), var(--v-tab-hover-background)) !important;
        }
    }
}

grom17 · №13936

Vitaliy V.
Вот это ДА! Круто! Спасибо большое!

6e73epo · №13937

Vitaliy V.
У вкладок есть аттрибут "notselectedsinceload" (открыта в фоне). Он должен в каких-то случаях сбрасываться и если нет, то какой в нем смысл?

_zt · №13938

"notselectedsinceload"

Очень похоже на непрочитанные, может можно как то использовать, если сбрасывать атрибут? Все равно скрипт сочинять придется.

Vitaliy V. пишет

для незагруженных вкладок скрипт не нужен

Да это понятно. Я про стиль говорил.

Vitaliy V. · №13939

6e73epo
Атрибут удаляется на активной вкладке при обновлении страницы, нужен для анимации чтобы изменить animation-name
omni/chrome/browser/skin/classic/browser/tabbrowser/tabs.css:
&[bursting][notselectedsinceload]::before {
animation-name: tab-burst-animation-light;
}

_zt пишет

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

Уже использовал во времена биндингов https://forum.mozilla-russia.org/viewto … 84#p763384
Теперь такой скриптик можно, проще чем с гитхаба

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

Выделить код

Код:

(async () => ({
    init() {
        gBrowser.tabContainer.addEventListener("TabSelect", this);
        setUnloadMap(Symbol("notselectedsinceload"), this.destructor, this);
    },
    handleEvent({target}) {
        target.setAttribute("notselectedsinceload", "false");
    },
    destructor() {
        gBrowser.tabContainer.removeEventListener("TabSelect", this);
    },
}).init())();

В стиле выше изменить блок /* Неактивные вкладки */

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

Выделить код

Код:

/* Неактивные вкладки */
    &:not([selected],[multiselected]) {
        .tab-label {
            color: light-dark(gray, darkgray) !important;
        }
        .tab-background {
            background-color: light-dark(gainsboro, black) !important;
        }
        &[notselectedsinceload=true] {
            .tab-label {
                color: light-dark(purple, magenta) !important;
                font-style: italic !important;
            }
        }
    }

Отредактировано Vitaliy V. (03-07-2024 22:59:07)

6e73epo · №13940

Vitaliy V. пишет

Теперь такой скриптик можно, проще чем с гитхаба

Себе такой сделал

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

Выделить код

Код:

(async (url) => {
	if (location != url) return;
	function setAttr(e) {
		e.target.setAttribute("notselectedsinceload", "false");
	}
	gBrowser.tabContainer.addEventListener("TabSelect", setAttr, !1);
})("chrome://browser/content/browser.xhtml");

По умолчанию в браузере нет состояния notselectedsinceload = false, а разработчики могли бы сделать, раз удалили unread, чтобы сэкономить 3 строчки

_zt · №13941

Vitaliy V.
Cкрипт в scriptschrome: load: ? Не работает для открытых в фоне, т.е. непрочитанных.
Расширение с доступом к вкладкам может мешать, например TST ?

UP^ все ясно, у меня нет этого атрибута, tst и др. расширения тут не при делах.

Если ui.prefersReducedMotion отключен, то и атрибута нет.
Но включать его не вариант, стробоскоп на страницах будет задалбывать.

Может есть вариант прибить стробоскоп с включенным ui.prefersReducedMotion ?

Отредактировано _zt (04-07-2024 04:19:00)

grom17 · №13942

Vitaliy V. пишет

В стиле выше изменить блок /* Неактивные вкладки */

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

Выделить код

Код:

/* Неактивные вкладки */
    &:not([selected],[multiselected]) {
        .tab-label {
            color: light-dark(gray, darkgray) !important;
        }
        .tab-background {
            background-color: light-dark(gainsboro, black) !important;
        }
        &[notselectedsinceload=true] {
            .tab-label {
                color: light-dark(purple, magenta) !important;
                font-style: italic !important;
            }
        }
    }

Прекрасно смотрится, единственное, посетив (активировав) эту вкладку и перейдя затем на другую она остаётся в тех же цветах.

Отредактировано grom17 (04-07-2024 07:44:46)

Vitaliy V. · №13943

_zt пишет

Может есть вариант прибить стробоскоп

А что это, белая вспышка при загрузке сайта? Посмотрел с разными темами вроде не наблюдаю такого.
Также попробовал установить Dark Reader, с ним есть вспышка на этом форуме независимо от настройки ui.prefersReducedMotion

grom17 пишет

единственное, посетив (активировав) эту вкладку и перейдя затем на другую она остаётся в тех же цветах.

Так это только со скриптом будет правильно работать. А мой скрипт для UserChromeFiles

6e73epo · №13944

_zt пишет

Если ui.prefersReducedMotion отключен, то и атрибута нет

Если включен и атрибут зависим от анимации, то его тоже не будет, если открывать в фоне about:config и прочее подобное. При настройке browser.cache.check_doc_frequency = 2 вкладки будут открываться в зависимости от попадания в кеш, то есть атрибут то будет, то нет. В итоге решил остаться на гитхабовском unread в таком варианте (не для UCF)

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

Выделить код

Код:

(async (url) => {
	if (location != url) return;
	let func = {
		add(e) {
			e.target.setAttribute("unread", "true");
		},
		change(e) {
			e.target.setAttribute("unread", "false");
		}
	};
	gBrowser.tabContainer.addEventListener("TabOpen", func.add, !1);
	gBrowser.tabContainer.addEventListener("TabSelect", func.change, !1);
})("chrome://browser/content/browser.xhtml");

Отредактировано 6e73epo (04-07-2024 16:00:17)

Vitaliy V. · №13945

6e73epo пишет

Если включен и атрибут зависим от анимации, то его тоже не будет, если открывать в фоне about:config и прочее подобное. При настройке browser.cache.check_doc_frequency = 2 вкладки будут открываться в зависимости от попадания в кеш, то есть атрибут то будет, то нет

Это всё скорее плюсы чем минусы, зачем на всё подряд лепить unread атрибут...

6e73epo пишет

(не для UCF)

А есть такой скрипт что не заработает в UCF ?

Отредактировано Vitaliy V. (04-07-2024 16:19:03)

_zt · №13946

Vitaliy V. пишет

попробовал установить Dark Reader, с ним есть вспышка на этом форуме независимо от настройки ui.prefersReducedMotion

Нет, нету, если

@-moz-document url("about:blank") {
:root, body:empty {
background: rgb(40,42,50) !important;
}
}

6e73epo
Я выше давал вариант который в UCF работает. Первая ссылка скрипт, две вторых фрагменты стиля для скрипта.

Отредактировано _zt (04-07-2024 16:26:04)

grom17 · №13947

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

Заметил что в последней "ночнушке" вспышек вообще нет. Стилей "тонну" подгружал, ну нет вспышек и всё.
И работает на мой взгляд шустрее и плавнее.

Отредактировано grom17 (04-07-2024 22:07:15)

6e73epo · №13948

Vitaliy V. пишет

Это всё скорее плюсы чем минусы, зачем на всё подряд лепить unread атрибут...

Я уже потестировал "notselectedsinceload". Открывал в фоне подряд один и тот же сайт 20 раз и в двух случаях вкладки окрашивались, а в остальных нет. При browser.cache.check_doc_frequency = 1 все 20 окрасились, но меня постоянная проверка страницы на изменения не устраивает

Vitaliy V. пишет

А есть такой скрипт что не заработает в UCF ?

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

Vitaliy V. · №13949

6e73epo пишет

Открывал в фоне подряд один и тот же сайт 20 раз и в двух случаях вкладки окрашивались, а в остальных нет.

Сомнительный результат у меня только раз не окрасилось, но не в этом дело а смысл помечать вкладки непрочитанными загруженные из кеша, это не логично,
атрибут notselectedsinceload добавляется только когда идет загрузка из сети, поэтому безусловно это плюс, но если хотите поспорить дело ваше.

6e73epo пишет

UCF скрипты часто приходится адаптировать для userChromeJS, а наоборот - не в курсе

Ну я тоже особо не в курсе userChromeJS, потому как естественно считаю свой продукт лучше. Скажу так, все или c адаптацией скрипты userChromeJS могут работать в UCF, а наоборот даже адаптировать не все получится.

6e73epo пишет

все
removeListener, потому что они и так удаляются

Типа полагаться на сборщик мусора, ну это такое себе

6e73epo пишет

, !1);

А это что, укороченная запись false? При том что если не нужно делать перехват т.е. true, то false писать уже не требуется.

6e73epo · №13950

Vitaliy V. пишет

Сомнительный результат у меня только раз не окрасилось, но не в этом дело а смысл помечать вкладки непрочитанными загруженные из кеша, это не логично,
атрибут notselectedsinceload добавляется только когда идет загрузка из сети, поэтому безусловно это плюс, но если хотите поспорить дело ваше.

Не сомнительный, если не соблюдать периодичность по времени. В остальном соглашусь и забываю про unread пока есть notselectedsinceload

Vitaliy V. пишет

Типа полагаться на сборщик мусора, ну это такое себе

Что-то я не то сморозил. События добавлены в gBrowser.tabContainer и спокойно в нем висят. Их хоть по 100 раз подряд вызывай, ошибок не будет, и в удалении нет необходимости при переключении на вкладку или ее закрытии.

Vitaliy V. пишет

А это что, укороченная запись false? При том что если не нужно делать перехват т.е. true, то false писать уже не требуется

Кто как привык. !1 или !0 всегда ставлю. Умолчального значения нет, точнее отсутствие будет трактоваться как неопределенный тип данных, что в итоге даст false. А true я называю не перехватом, а первый в очереди, ну если еще для страховки до уровня окна подняться.

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

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