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

kokoss · №12776

Northtech
Попробуйте ещё такой вариант ->

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

Код:

menupopup[placespopup="true"] > .menupopup-arrowscrollbox {
    --uc-scrollbox-overflow: auto;
}
scrollbox { overflow-y: var(--uc-scrollbox-overflow,initial) }

Add, проверьте только с этим кодом, так как у меня он работает без глюков.

Отредактировано kokoss (25-04-2023 20:49:24)

Northtech · №12777

kokoss
ага, нашел. конфликт с

Выделить код

Код:

.tabbrowser-tab {
margin-top: -4px !important;
margin-bottom: -4px !important;
}

видимо перебор с уменьшением вкладок. спасибо)
хотя странно конечно...

Отредактировано Northtech (25-04-2023 21:11:21)

kokoss · №12778

Northtech пишет

видимо перебор с уменьшением вкладок.

Для уменьшения вкладок попробуйте с этим кодом ->

Выделить код

Код:

#titlebar,
#tabbrowser-tabs {
    --tab-min-height: 24px;
}

_zt · №12779

Northtech пишет

"ограничить зону действия типа "scrollbox:not([...])" не получается"

Зачем not когда есть is? Вопрос риторический.

Тоторо · №12780

У кого-нибудь есть точная копия внешнего вида [firefox]78-88 для 100+ версий?
~~Или, может быть, Мозилла планирует в ближайшее время переименовать протон в бозон и снова дизайн сменить?~~

_zt · №12781

Тоторо
Например
GitHub - black7375/Firefox-UI-Fix
GitHub - jannikbuscha/firefox-dracula
Такое еще
GitHub - datguypiko/Firefox-Mod-Blur

Да и full_theme от VitaliyV до сих пор работает, с минимальными правками.

Тоторо · №12782

_zt
Можно поверх них обычные темы ставить? А если извлечь из 88 старые значки закладок/загрузок/домашней страницы и т.д., их тоже надо будет дополнительным кодом оформлять или можно просто в папке подменить?

Или может, у какого-то форка от [firefox] нормальный дизайн сохранился, чтобы не извращаться?

Отредактировано Тоторо (03-05-2023 00:55:08)

_zt · №12783

Тоторо пишет

Можно поверх них обычные темы ставить?

Не знаю. На Firefox-UI-Fix можно попробовать.

Тоторо пишет

извлечь из 88 старые значки закладок/загрузок/домашней ... подменить?

В omni.ja можно подменить, но этого мало, формат, размер, названия и пути многих значков изменились. Вот бы все так просто было.

Тоторо пишет

может, у какого-то форка

Может быть, пробуйте.
Pale Moon - https://www.palemoon.org/
Basilisk - https://basilisk-browser.org/
Waterfox - https://www.waterfox.net/
Floorp - https://floorp.ablaze.one/

Тоторо пишет

нормальный дизайн сохранился, чтобы не извращаться

Вот и не извращайтесь форками, в теме про css для [firefox] .

Отредактировано _zt (03-05-2023 15:47:14)

Тоторо · №12784

_zt пишет

Может быть, пробуйте.

Спасибо, попробую.

FireForce · №12785

Идентификация первой и последней вкладок

Здравствуйте.

Как однозначно идентифицировать первую и последнюю вкладки на панели вкладок. Я имею ввиду элементы tab класса tabbrowser-tab, являющиеся дочерними для элемента tabs класса tabbrowser-tabs.

Спасибо.

6e73epo · №12786

FireForce, наверное так для большей гибкости:
tab.tabbrowser-tab:nth-child(1)
tab.tabbrowser-tab:nth-last-child(1)

Подробнее

Элементы tab класса tabbrowser-tab не являются дочерними для элемента tabs класса tabbrowser-tabs. Хотя, может в ранних версиях Firefox по другому - не проверял

Отредактировано 6e73epo (08-05-2023 14:25:59)

FireForce · №12787

Разобрался в вопросе. Вот решение.

Выделить код

Код:

tab:first-of-type hbox[class='tab-content']
  background-color: violet

tab:last-of-type hbox[class='tab-content']
  background-color: orange

То есть, задача стояла окрасить первую и последнюю вкладки в определенные цвета. Для её решения можно было использовать как псевдоклассы first-child/last-child, так и first-of-type/last-of-type.

Разница заключается в следующем.

Псевдоклассы типа -child репрезентует заданный элемент в группе всех дочерних элементов. Псевдоклассы же типа -of-type репрезентуют заданный элемент в группе дочерних элементов данного типа. То есть, если элемент выбранного типа не является заданным элементом (первым, последним, n-ым), то в случае -child он выбран не будет, а в случае -of-type будет.

Посколько в иерархии дочерних элементов репрезентующих вкладки на панели вкладок элемент „вкладка“ не является единственным возможным дочерним элементом, то его выбор в некоторых случаях возможен только по типу.

6e73epo, спасибо за внимание к вопросу.

kokoss · №12788

FireForce
Скобки забыли добавить!

FireForce · №12789

kokoss Это Sass.

kokoss · №12790

FireForce пишет

Это Sass.

И как это работает ?

FireForce · №12791

kokoss Пишите на Sass, компилируете в CSS. Далее, используете скомпилированный файл так, как вам необходимо.

Pifontiy · №12792

В 113 версии пропали кнопки управления окном:

Код из userChrome.css

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

Выделить код

Код:

/* Кнопки управления окном */
*|*:root {
    --v-titlebar-button-vert-padding: 5px;
    --v-titlebar-button-horizont-padding: 10px;
    --v-svg-filter-fill: url("data:image/svg+xml;charset=utf-8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='fill'><feComposite in='FillPaint' in2='SourceGraphic' operator='in'/></filter></svg>#fill");
	--v-titlebar-min-image: url("data:image/svg+xml;charset=utf-8,<svg width='12' height='12' xmlns='http://www.w3.org/2000/svg'><line stroke='black' stroke-width='.9' fill='none' shape-rendering='crispEdges' x1='1' y1='5.5' x2='11' y2='5.5'/></svg>");
	--v-titlebar-max-image: url("data:image/svg+xml;charset=utf-8,<svg width='12' height='12' xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='.9' fill='none' shape-rendering='crispEdges'><rect x='1.5' y='1.5' width='9' height='9'/></svg>");
	--v-titlebar-maximized-image: url("data:image/svg+xml;charset=utf-8,<svg width='12' height='12' xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='.9' fill='none' shape-rendering='crispEdges'><rect x='1.5' y='3.5' width='7' height='7'/><polyline points='3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5'/></svg>");
	--v-titlebar-close-image: url("data:image/svg+xml;charset=utf-8,<svg width='12' height='12' xmlns='http://www.w3.org/2000/svg'><path stroke='black' stroke-width='.9' fill='none' d='M1,1 l 10,10 M1,11 l 10,-10'/></svg>");
	--v-titlebar-button-image-height: 12px;
	--v-titlebar-button-image-width: 12px;
	--v-titlebar-button-background-hover: rgba(0,0,0,.12);
	--v-titlebar-button-background-active: rgba(0,0,0,.22);
	--v-titlebar-close-background-hover: rgb(227, 27, 93);
	--v-titlebar-close-background-active: rgb(191, 22, 78);
	--v-windows-glass-default-background: ActiveCaption;
	--v-windows-glass-default-background-inactive: InactiveCaption;
}

*|*:root:-moz-lwtheme-brighttext,
toolbar[brighttext] {
	--v-titlebar-button-background-hover: rgba(255,255,255,.22);
	--v-titlebar-button-background-active: rgba(255,255,255,.12);
}

@media (-moz-windows-glass), (-moz-os-version: windows-win8) {
    *|*:root[sizemode="normal"] > #titlebar {
		-moz-appearance: none !important;
		margin-bottom: calc(-1 * (var(--v-titlebar-button-vert-padding) * 2 + var(--v-titlebar-button-image-height))) !important;
	}

	*|*:root[sizemode="normal"] > #titlebar > #titlebar-content {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

    *|*:root[sizemode="normal"] > #navigator-toolbox,
    *|*:root[sizemode="normal"] > box > #navigator-toolbox {
        border-top: none !important;
        padding-top: 0 !important;
        box-shadow: 0 1px 0 rgba(12,12,13,0.3) inset !important;
    }

    #titlebar-buttonbox,
    .titlebar-buttonbox {
        -moz-appearance: none !important;
		margin: 0 !important;
		padding: 0 !important;
    }

    *|*:root {
        -moz-appearance: none !important;
        background-color: var(--lwt-accent-color, var(--v-windows-glass-default-background)) !important;
    }

	*|*:root:-moz-window-inactive {
        background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color, var(--v-windows-glass-default-background-inactive))) !important;
    }

	#TabsToolbar:-moz-lwtheme-darktext {
        color: inherit !important;
		--lwt-toolbarbutton-icon-fill: currentColor !important;
    }

	#TabsToolbar:not(:-moz-lwtheme) {
        color: inherit !important;
    }

	#TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab {
        background-color: transparent !important;
    }

    vbox#appcontent {
        -moz-appearance: none !important;
    }
}

#titlebar-buttonbox > .titlebar-button,
.titlebar-buttonbox > :-moz-any(.titlebar-min,.titlebar-max,.titlebar-restore,.titlebar-close),
#minimize-button, #restore-button, #close-button {
	display: -moz-box !important;
    -moz-appearance: none !important;
	margin: 0 !important;
    padding: var(--v-titlebar-button-vert-padding) var(--v-titlebar-button-horizont-padding) !important;
    color: var(--lwt-toolbarbutton-icon-fill, inherit) !important;
}

*|*:root:not([sizemode="maximized"]) .titlebar-buttonbox > .titlebar-restore[tooltiptext],
*|*:root[sizemode="maximized"] .titlebar-buttonbox > .titlebar-max[tooltiptext] {
    display: none !important;
}

#window-controls {
    -moz-box-align: start !important;
}

@media not all and (-moz-os-version: windows-win7) {
    #titlebar-buttonbox,
    .titlebar-buttonbox {
        -moz-appearance: none !important;
        -moz-box-align: start !important;
        -moz-box-pack: end !important;
    }
}

#titlebar-buttonbox > .titlebar-button > .toolbarbutton-icon,
.titlebar-buttonbox > :-moz-any(.titlebar-min,.titlebar-max,.titlebar-restore,.titlebar-close) > .toolbarbutton-icon,
:-moz-any(#minimize-button,#restore-button,#close-button) > .toolbarbutton-icon {
    filter: var(--v-svg-filter-fill) !important;
    fill: currentColor !important;
    color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	height: var(--v-titlebar-button-image-height) !important;
	width: var(--v-titlebar-button-image-width) !important;
}

#titlebar-buttonbox > #titlebar-min,
.titlebar-buttonbox > .titlebar-min,
#minimize-button {
    list-style-image: var(--v-titlebar-min-image) !important;
    -moz-image-region: auto !important;
}

#titlebar-buttonbox > #titlebar-max,
.titlebar-buttonbox > .titlebar-max {
    list-style-image: var(--v-titlebar-max-image) !important;
    -moz-image-region: auto !important;
}

*|*:root[sizemode="maximized"] #titlebar-buttonbox > #titlebar-max,
*|*:root[sizemode="maximized"] .titlebar-buttonbox > .titlebar-max,
.titlebar-buttonbox > .titlebar-restore,
#restore-button {
    list-style-image: var(--v-titlebar-maximized-image) !important;
    -moz-image-region: auto !important;
}

#titlebar-buttonbox > :-moz-any(#titlebar-min,#titlebar-max):hover,
.titlebar-buttonbox > :-moz-any(.titlebar-min,.titlebar-max,.titlebar-restore):hover,
:-moz-any(#minimize-button,#restore-button):hover {
    background-color: var(--v-titlebar-button-background-hover) !important;
}

#titlebar-buttonbox > :-moz-any(#titlebar-min,#titlebar-max):hover:active,
.titlebar-buttonbox > :-moz-any(.titlebar-min,.titlebar-max,.titlebar-restore):hover:active,
:-moz-any(#minimize-button,#restore-button):hover:active {
    background-color: var(--v-titlebar-button-background-active) !important;
}

#titlebar-buttonbox > #titlebar-close,
.titlebar-buttonbox > .titlebar-close,
#close-button {
    list-style-image: var(--v-titlebar-close-image) !important;
    -moz-image-region: auto !important;
}

#titlebar-buttonbox > #titlebar-close:hover,
.titlebar-buttonbox > .titlebar-close:hover,
#close-button:hover {
    background-color: var(--v-titlebar-close-background-hover) !important;
    color: white !important;
}

#titlebar-buttonbox > #titlebar-close:hover:active,
.titlebar-buttonbox > .titlebar-close:hover:active,
#close-button:hover:active {
    background-color: var(--v-titlebar-close-background-active) !important;
    color: white !important;
}
}

Можно их вернуть обратно...

kokoss · №12793

Pifontiy пишет

В 113 версии пропали кнопки управления окном:

https://forum.mozilla-russia.org/viewtopic.php?pid=804888#p804888

Retif · №12794

kokoss пишет

Retif пишетНо для панели со вкладками что-то не выходитhttps://github.com/Aris-t2/CustomCSSfor … .css#L1083

https://forum.mozilla-russia.org/viewto … 70#p803370

Тут Firefox решил обновиться до версии 113.0 и это:

Выделить код

Код:

@import "./css/toolbars/general_toolbar_colors_tabs_toolbar_aeroglass.css";

больше не работает.

Опять тогда вопрос, как задать свой цвет для панели с табами?

Использую Custom CSS for Firefox 4.3.5

Отредактировано Retif (10-05-2023 13:16:35)

kokoss · №12795

Retif пишет

больше не работает.
Опять тогда вопрос, как задать свой цвет для панели с табами?

У меня в [firefox] 113 работает!

Попробуйте тогда такой вариант ->

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

#TabsToolbar {
background-image: radial-gradient(ellipse at bottom, rgba(255,0,0,0.8), rgba(139,0,0,0.5) 80%, transparent) !important;
color: white !important;
}

Pifontiy · №12796

kokoss
Мой вопрос https://forum.mozilla-russia.org/viewtopic.php?pid=804907#p804907
Ваша рекомендация https://forum.mozilla-russia.org/viewtopic.php?pid=804888#p804888
При всём уважении не понял,как код для вертикальной панели может быть использован для возвращения убежавших кнопок управления окном.
Или я таки чего то не там смотрю?

kokoss · №12797

Pifontiy пишет

как код для вертикальной панели может быть использован для возвращения убежавших кнопок управления окном.

Этот код не только для вертикальной панели...

Отредактировано kokoss (10-05-2023 13:43:47)

Retif · №12798

kokoss пишет

Попробуйте тогда такой вариант ->

Попробовал. Что-то не работает, как был F0F0F0, так и остался.

kokoss пишет

У меня в 113 работает!

Блин. А у меня почему не работает тогда... Конфликт между какими-то параметрами что ли...

kokoss · №12799

Retif пишет

А у меня почему не работает тогда... Конфликт между какими-то параметрами что ли...

Да ->

Retif · №12800

kokoss пишет

Retif пишетА у меня почему не работает тогда... Конфликт между какими-то параметрами что ли...Да ->

Ну вот я закомментил

Выделить код

Код:

@import "./css/toolbars/general_toolbar_colors_tabs_toolbar_aeroglass.css";

И в my_userChrome.css добавил то же самое:

Выделить код

Код:

/* tabs toolbar background */
#main-window #navigator-toolbox #TabsToolbar:not(:-moz-lwtheme),
#main-window #navigator-toolbox #TabsToolbar:-moz-lwtheme,
#main-window #navigator-toolbox #TabsToolbar {
  background: red !important;
  border: unset !important;
  box-shadow: unset !important;
}

#main-window[sizemode="normal"]  #TabsToolbar:not(:-moz-lwtheme){
  border-left: unset !important;
  border-right: unset !important;
}

И опять нифига Белый так и остался. Только у меня панель вкладок внизу окна.

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

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