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

cdrip · №13076

Oleg_V пишет

В фф115еср
-не нужную кнопку расширения (которая появилась рядом с кнопкой меню) можно убрать?
-и треугольничек "вкладки" справа вверху возле кнопок свернуть/развернуть/закрыть можно убрать?

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

/* Убрать кнопку "расширения" на "панели инструментов" */
#unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon{width: 0px !important; padding: 0px !important;}

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

Отключить кнопку выбора закладок в правом верхнем углу (Firefox 115+)
about:config -> browser.tabs.tabmanager.enabled; false

У меня руки кривые не судите строго, вдруг кому понадобится, внешний вид как у 78 ESR делал для себя, вариант под 115 ESR (вроде все доделал, а может и нет - пока не пойму)
userChrome.css

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

/* Отключить все закругления углов - везде */
* {border-radius: 0 !important;}

/***********************************************************/

/* Заголовок окна Firefox (окно активно, цвет заголовка + цвет кнопок) */
#TabsToolbar:not(:-moz-window-inactive) {background: AccentColor; color: AccentColorText;}

/* Заголовок окна Firefox (окно не активно, цвет заголовка) */
#TabsToolbar:-moz-window-inactive {background: #D1D1D1}

/* Заголовок окна Firefox (окно не активно, цвет кнопок) */
#TabsToolbar:-moz-window-inactive .toolbarbutton-1 {fill: gray !important;}
#scrollbutton-up:-moz-window-inactive, #scrollbutton-down:-moz-window-inactive {fill: gray !important;}

/* Системный заголовок окна Firefox (окно активно, цвет заголовка + цвет кнопок системный) */
#toolbar-menubar:not(:-moz-window-inactive) {background: AccentColor; color: AccentColorText;}

/* Системный заголовок окна Firefox (окно не активно, цвет заголовка + цвет кнопок) */
#toolbar-menubar:-moz-window-inactive {background: #D1D1D1; color: grey;}

/***********************************************************/

/* Цвет активной вкладки */
.tabbrowser-tab[selected="true"] .tab-background {background: #F9F9FB !important;}

/* Кнопки "открыть новую вкладку", "список всех вкладок" и иные добавленные на эту панель (цвет кнопки) */
#TabsToolbar .toolbarbutton-1 {fill: white !important;}

/* Кнопка "открыть новую вкладку" на URL Bar (размер hover) */
#TabsToolbar {--toolbarbutton-inner-padding: 6px !important;}

/* Высота вкладок */
#TabsToolbar, #tabbrowser-tabs {--tab-min-height: 34px !important;}

/* Выключить закругление краев вкладки (правый и левый нижний угол) */
.tab-background {border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; margin-block: 0px 0 !important;}

/* Fix для кнопок "влево", "вправо" пролистать список вкладок (визуальное выделение их при клике мышью) */
#scrollbutton-up, #scrollbutton-down {border-top-width: 1px !important; border-bottom-width: 0 !important;}

/* Кнопки "влево", "вправо" пролистать список вкладок (цвет кнопки) */
#scrollbutton-up, #scrollbutton-down {fill: white !important;}

/* Разделитель вкладок */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {border-right: 1px solid #959FAD !important;}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {border-radius: 0 !important;}

/* Убрать расстояние между вкладками до нуля */
.tabbrowser-tab {padding-left: 0 !important; padding-right: 0 !important;}

/* Отключить "ВОСПРОИЗВОДИТСЯ" на вкладке */
hbox.tab-secondary-label {display:none !important}

/* Позиция полоски над вкладкой */
.tab-background::before {content: ""; display: block; height: 2px; margin: 0px var(--user-tab-rounding) 0;}

/* Цвет полоски над активной вкладкой */
.tabbrowser-tab[selected] .tab-background::before {background-color: #0A84FF;}

/* Цвет полоски над другими вкладками от цвета активной */
.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {background-color: color-mix(in srgb, #0A84FF 66%, transparent);}

/* Цвет полоски над пассивной вкладкой при наведении мышью */
.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {background-color: #959FAD; transform: none;}

/* Анимация пассивной полоски вкладки при наведении мышью */
.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {transform: scaleX(.8); transition: transform 100ms linear;}

/* Подсветка кнопки "Новая вкладка" при наведении и клике мышью */
:root {--button-hover-bgcolor: rgb(207, 207, 216, 0.4) !important;}
:root {--button-active-bgcolor: rgb(207, 207, 216, 0.6) !important;}

/* Убрать пустое место между закрепленной вкладкой и не закрепленной */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {margin-inline-start: 0px !important;}

/* Убрать пустое место слева от крайней вкладки если окно не развернуто */
.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {width: 0px !important;}

/***********************************************************/

/* URL Bar вкл/выкл тени */
#urlbar-background, #searchbar {box-shadow: none !important;}

/* URL Bar не в фокусе (цвет фона, цвет бордюра, толщина бордюра) */
#urlbar:not([focused="true"], [open]) > #urlbar-background, #searchbar:not(:focus-within) {background-color: white !important; border-color: silver !important; border-width: 1px !important;}

/* URL Bar отключить увеличение выпадающего окна результатов поиска */
#urlbar[breakout][breakout-extend] {top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; left: 0px !important; width: calc(100% - 0px) !important;}
#urlbar[breakout][breakout-extend] > #urlbar-background {animation-name: unset !important;}
#urlbar[breakout][breakout-extend] > #urlbar-input-container {height: var(--urlbar-height) !important; padding-block: 1px !important; padding-inline: 1px !important;}

/* URL Bar в фокусе (отменить бордюр, толщина бордюра + результатов поиска 1px c цветом 0078D7) */
#urlbar:not(.hidden-focus)[focused="true"] > #urlbar-background, #urlbar[breakout][breakout-extend] > #urlbar-background, #searchbar:focus-within {outline:none !important; border: 1px solid #0078D7 !important;}

/* URL Bar изменение размера как в FF60-FF78 (требуется компактный режим: browser.compactmode.show; true) */
:root, #urlbar {--urlbar-height: 30px!important; --urlbar-toolbar-height: 40px!important;}
toolbar#nav-bar {height: var(--urlbar-toolbar-height);}

/* URL Bar убрать тень сверху, что бы кнопки над ней типа "открыть новую вкладку" располагались по центру */
:root {--tabs-navbar-shadow-size: 0px !important;}

/***********************************************************/

/* Кнопки на "панели инструментов" назад, вперед, обновить, меню и т.д. (цвет кнопки) */
.toolbarbutton-animatable-box, .toolbarbutton-1 {fill: black !important;}

/* Убрать кнопку "расширения" на "панели инструментов" */
/* #unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon{width: 0px !important; padding: 0px !important;} */

/***********************************************************/

/* Радиобуттоны переключения (вместо рамки, старый вариант пунктиром) */
radiogroup:focus-visible > radio[focused="true"] > .radio-label-box {outline: 1px dotted !important;}

/***********************************************************/

/* Расстояние между элементами всплывающего меню + расстояние в системных меню закладки / журнал и д.р. */
menupopup > menuitem, menupopup > menu {padding-block: 4px !important;}
:root {--arrowpanel-menuitem-padding: 6px !important;}

/***********************************************************/

/* Цвет строки поиска на странице silver как URL Bar + выделение контейнера поиска цветом 0078D7 и толщиной 1px */
input.findbar-textbox {border: 1px solid silver !important;}
:root {--focus-outline-color: #0078D7 !important;}
:root {--focus-outline-width: 1px !important;}

/***********************************************************/

/* Цвет активный hover / click hover выбора пункта в системных меню + фон меню */
:root {--panel-item-hover-bgcolor: rgb(207, 207, 216, 0.6) !important;}
:root {--panel-item-active-bgcolor: rgb(207, 207, 216, 0.8) !important;}
:root {--arrowpanel-background: white !important;}

/* Цвет активный hover / не активный hover выбора пункта в всплывающем меню + фон меню */
:root {--menuitem-hover-background-color: rgb(207, 207, 216, 0.6) !important;}
:root {--menuitem-disabled-hover-background-color: rgb(207, 207, 216, 0.2) !important;}
:root {--menu-background-color: white !important;}

/***********************************************************/

/* Отключить активный бордюр вокруг фокуса (например в окне "Библиотека -> Журнал" при выделении линии) */
*|*:root {--default-focusring-width: 0px !important;}

/***********************************************************/

/* Find Bar (Ctrl+F) в фокусе (отмена тени, толщина бордюра 1px c цветом 0078D7) */
.findbar-textbox:focus-within {box-shadow: none !important; outline:none !important; border: 1px solid #0078D7 !important;}

/***********************************************************/

userContent.css

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

/* Отключить все закругления углов (только firefox настройки) */
@-moz-document url-prefix("about:"), url-prefix("chrome:"), url-prefix("moz-extension:"), url-prefix("moz-icon:"), url-prefix("app:"), url-prefix("resource:") {* {border-radius: 0 !important;}}

/* Find Bar в настройках в фокусе (отмена тени, толщина бордюра 1px c цветом 0078D7) */
search-textbox:focus-within {box-shadow: none !important; outline:none !important; border: 1px solid #0078D7 !important;}

kokoss · №13077

Злой Буратино пишет

или вообще их скрыть?

Выделить код

Код:

.top-site-outer .title span {
  visibility: collapse !important;
}

Nero Wolfe · №13078

Добрый день.
Помню в какой то версии ФФ была специально встроенная тема (кажется "Для разработчиков" называлась, не помню точно), темная, с квадратными вкладками (именно вкладками, а не новомодными кнопками) и синей полоской над активной вкладкой.
Как привести к такому виду новые версии ФФ?

_zt · №13079

Nero Wolfe
К тому - никак. К чему то похожему - можно. Было бы желание. Например - https://github.com/jannikbuscha/firefox-dracula

_zt · №13080

egorsemenov06
Вы понимаете, что его надо подключать в дебагерский профиль с повышенными правами или скриптом через .\core\config.js ?
Стиль по большей части из full_theme от Vitaliy V., но в кастрированном варианте

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

Выделить код

Код:

:root {
		--v-menupopup-item-min-height: 24px;
		--v-menupopup-item-padding-inline: 8px;
		--v-menupopup-text-inline-start: 6px;
		--v-menupopup-icon-fill-opacity: 1;
		--v-arrowpanel-color: silver;
		--v-arrowpanel-background: rgba(40,42,50,.9);
		--v-arrowpanel-border-color: rgba(105,105,105,.8);
		--v-panel-separator-color: var(--theme-arrowpanel-separator, color-mix(in srgb, currentColor 20%, transparent));
		--v-arrowpanel-dimmed: var(--theme-arrowpanel-dimmed, color-mix(in srgb, currentColor 20%, transparent));
		--v-arrowpanel-dimmed-further: var(--theme-arrowpanel-dimmed-further, color-mix(in srgb, currentColor 10%, transparent));
	}
	menupopup {
		appearance: none !important;
		padding: 0 !important;
		border: 1px solid var(--v-arrowpanel-border-color) !important;
		border-radius: 0 !important;
		background: var(--v-arrowpanel-background) !important;
		color: var(--v-arrowpanel-color) !important;
		--panel-background: transparent !important;
		--panel-color: var(--v-arrowpanel-color) !important;
		--panel-border-color: transparent !important;
		--panel-border-radius: 0px !important;
		--nested-margin: 0px !important;
		box-shadow: none !important;
		--v-panel-padding: 0;
		--v-panel-background: transparent;
		--v-panel-border-width: 0;
		--v-panel-margin: 0;
		--v-panel-arrowbox-display: none;
	}
	menupopup:where(:not([side])) {
		margin: 0 !important;
	}
	menupopup > menu > menupopup {
		margin-inline-start: 0 !important;
		margin-top: -1px !important;
	}
	:where(#BMB_bookmarksPopup) {
		margin-top: -4px !important;
	}
	panel[type="arrow"].panel-no-padding {
		--v-panel-padding: 0;
	}
	.panel-arrowcontainer > .panel-arrowcontent {
		padding: var(--v-panel-padding, var(--arrowpanel-padding)) !important;
		background: var(--v-panel-background, var(--arrowpanel-background)) !important;
		border-radius: 0 !important;
		border-width: var(--v-panel-border-width, 1px) !important;
		margin: var(--v-panel-margin, 4px) !important;
	}
	.panel-arrowcontainer > .panel-arrowbox {
		display: var(--v-panel-arrowbox-display, flex);
	}
	hbox[flex="1"][part="innerbox"] {
		border-width: 0 !important;
		margin-top: 0 !important;
	}
	scrollbox[flex="1"][part="scrollbox"] {
		padding-top: 0 !important;
	}
	arrowscrollbox.menupopup-arrowscrollbox {
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background-color: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	menupopup menuseparator {
		appearance: none !important;
		height: 3px !important;
		min-height: 3px !important;
		max-height: 3px !important;
		border: none !important;
		margin: 0 !important;
		padding-inline: 6px !important; /* !!! */
		padding-block: 1px !important;
	}
	menupopup menuseparator::before {
		content: "" !important;
		display: inline-block !important;
		position: static !important;
		padding: 0 !important;
		margin: 0 !important;
		flex-grow: 1 !important;
		border: none !important;
		border-top: 1px solid var(--v-panel-separator-color) !important;
	}
	menupopup :is(menu,menuitem,menucaption) {
		appearance: none !important;
		min-height: var(--v-menupopup-item-min-height) !important;
		padding: 0px var(--v-menupopup-item-padding-inline) !important;
	}
	menupopup .menu-iconic-left {
		appearance: none !important;
		margin: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: var(--v-menupopup-text-inline-start) !important;
		visibility: visible !important;
		min-width: 16px !important;
		width: 16px !important;
		padding: 0 !important;
	}
	#context-navigation:not([hidden]) {
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: row !important;
		min-width: 0px !important;
	}
	#context-navigation > .menuitem-iconic {
		width: auto !important;
		flex-grow: 1 !important;
		justify-content: center !important;
	}
	#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
		background-color: transparent !important;
	}
	menupopup .menu-iconic-text {
		appearance: none !important;
		padding-inline-start: 0 !important;
		margin-inline-start: 0 !important;
	}
	menupopup .contentSelectDropdown-ingroup .menu-iconic-text {
		margin-inline-start: 16px !important;
	}
	menupopup .menu-text {
		appearance: none !important;
		padding-inline-start: var(--v-menupopup-text-inline-start) !important;
		margin-inline-start: 16px !important;
	}
	menupopup .menu-iconic-left > .menu-iconic-icon,
	menupopup .menu-right > image {
		width: 16px !important;
		height: 16px !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	menupopup menuitem:is([type="checkbox"],[type="radio"]) > .menu-iconic-left > .menu-iconic-icon,
	menupopup .menu-right > image {
		display: inline-flex !important;
		visibility: visible !important;
		-moz-context-properties: fill, fill-opacity;
		fill: currentColor !important;
		fill-opacity: var(--v-menupopup-icon-fill-opacity);
		color: var(--v-arrowpanel-color) !important;
	}
	menupopup .menu-right {
		appearance: none !important;
		list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CjxwYXRoIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmNvbnRleHQtZmlsbDtzdHJva2Utb3BhY2l0eTpjb250ZXh0LWZpbGwtb3BhY2l0eTtzdHJva2Utd2lkdGg6MSIgZD0ibTYgMTMgNS01LTUtNSIvPgo8L3N2Zz4K") !important;
		justify-content: center !important;
		width: 16px !important;
		height: 16px !important;
		padding: 0px !important;
	}
	menupopup :is(menu,menuitem,menucaption) {
		color: var(--v-arrowpanel-color);
	}
	:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem,menucaption) {
		color: var(--v-arrowpanel-color) !important;
	}
	menupopup :is(menu,menuitem)[_moz-menuactive="true"] {
		background: var(--v-arrowpanel-dimmed);
	}
	:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem)[_moz-menuactive="true"] {
		background: var(--v-arrowpanel-dimmed) !important;
	}
	menupopup :is(menu,menuitem)[_moz-menuactive="true"]:active {
		background: var(--v-arrowpanel-dimmed-further);
	}
	:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem)[_moz-menuactive="true"]:active {
		background: var(--v-arrowpanel-dimmed-further) !important;
	}
	:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem,menucaption):is([disabled="true"],[disabled="true"]:active) {
		opacity: 0.6 !important;
		background: none !important;
	}
	menupopup menuitem[type="checkbox"] > .menu-iconic-left {
		list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CjxyZWN0IHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmNvbnRleHQtZmlsbDtzdHJva2Utb3BhY2l0eTpjb250ZXh0LWZpbGwtb3BhY2l0eTtzdHJva2Utd2lkdGg6MTtvcGFjaXR5Oi4yNTsiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgeD0iLjUiIHk9Ii41Ii8+Cjwvc3ZnPgo=") !important;
		justify-content: center !important;
	}
	menupopup menuitem[type="checkbox"][checked="true"] > .menu-iconic-left {
		list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CjxnIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmNvbnRleHQtZmlsbDtzdHJva2Utb3BhY2l0eTpjb250ZXh0LWZpbGwtb3BhY2l0eTtzdHJva2Utd2lkdGg6MSI+CjxyZWN0IHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgc3R5bGU9Im9wYWNpdHk6LjI1IiB4PSIuNSIgeT0iLjUiLz4KPHBhdGggZD0ibTMgNyA0IDQgNi02Ii8+CjwvZz4KPC9zdmc+Cg==") !important;
	}
	menupopup menuitem[type="radio"] > .menu-iconic-left {
		list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CjxjaXJjbGUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y29udGV4dC1maWxsO3N0cm9rZS1vcGFjaXR5OmNvbnRleHQtZmlsbC1vcGFjaXR5O3N0cm9rZS13aWR0aDoxO29wYWNpdHk6LjI1IiBjeD0iOCIgY3k9IjgiIHI9IjcuNSIvPgo8L3N2Zz4K") !important;
		justify-content: center !important;
	}
	menupopup menuitem[type="radio"][checked="true"] > .menu-iconic-left {
		list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CjxnIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmNvbnRleHQtZmlsbDtzdHJva2Utb3BhY2l0eTpjb250ZXh0LWZpbGwtb3BhY2l0eTtzdHJva2Utd2lkdGg6MSI+CjxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6LjI1IiBjeD0iOCIgY3k9IjgiIHI9IjcuNSIvPgo8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNC41Ii8+CjwvZz4KPC9zdmc+Cg==") !important;
		justify-content: center !important;
	}
	menupopup:-moz-locale-dir(rtl) .menu-right > image {
		transform: scaleX(-1) !important;
	}

Если вы его хотите использовать по назначению, то в оболочке @-moz-document url-prefix(chrome://devtools/content/) { ... }
Ну а если глобально, то ...
У меня он подключен авторским способом, через CustomStylesScripts.jsm в секции/строкой/с правами

Выделить код

Код:

stylesall: [ // Для всех документов
        { path: "background_menu.css", type: "USER_SHEET", sheet() { registerSheet(this); }, }, // <-- Меню

в оболочке

Выделить код

Код:

@-moz-document url-prefix("chrome:"), url-prefix("about:") { ... }

В общем, для глобального применения лучше взять оригинал и отредактировать под себя. Или вот, оригинал отредактированный для 113+ (box >> flex и все сопутствующее), но в нем нет прозрачности, добавите сами, например сравнением с кодом выше:

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

Выделить код

Код:

@-moz-document url-prefix("chrome:"), url-prefix("about:") {
/* меню --> */
:root {
    --v-menupopup-item-min-height: 24px;
    --v-menupopup-item-padding-inline: 8px;
    --v-menupopup-text-inline-start: 4px;
    --v-menupopup-icon-fill-opacity: 1;
    --v-arrowpanel-color: var(--menu-color, var(--arrowpanel-color, FieldText));
    --v-arrowpanel-background: var(--menu-background-color, var(--arrowpanel-background, Field));
    --v-arrowpanel-border-color: var(--menu-border-color, var(--arrowpanel-border-color, ThreeDShadow));
    --v-panel-separator-color: var(--menu-border-color, var(--panel-separator-color, ThreeDShadow));
    --v-arrowpanel-dimmed: var(--menuitem-hover-background-color, var(--arrowpanel-dimmed, color-mix(in srgb, currentColor 20%, transparent)));
    --v-arrowpanel-dimmed-further: var(--menuitem-hover-background-color, var(--arrowpanel-dimmed-further, color-mix(in srgb, currentColor 10%, transparent)));
}
:root:-moz-lwtheme {
    --v-arrowpanel-color: var(--arrowpanel-color, FieldText);
    --v-arrowpanel-background: var(--arrowpanel-background, Field);
    --v-arrowpanel-border-color: var(--arrowpanel-border-color, ThreeDShadow);
    --v-panel-separator-color: var(--panel-separator-color, ThreeDShadow);
    --v-arrowpanel-dimmed: var(--arrowpanel-dimmed, color-mix(in srgb, currentColor 20%, transparent));
    --v-arrowpanel-dimmed-further: var(--arrowpanel-dimmed-further, color-mix(in srgb, currentColor 10%, transparent));
}
:root[lwt-sidebar] {
    --v-arrowpanel-color: var(--lwt-sidebar-text-color, FieldText);
    --v-arrowpanel-background: var(--lwt-sidebar-background-color, Field);
    --v-arrowpanel-border-color: color-mix(in srgb, currentColor 20%, transparent);
    --v-panel-separator-color: color-mix(in srgb, currentColor 20%, transparent);
    --v-arrowpanel-dimmed: color-mix(in srgb, currentColor 20%, transparent);
    --v-arrowpanel-dimmed-further: color-mix(in srgb, currentColor 10%, transparent);
}
:root:is(.theme-light,.theme-dark) {
    --v-arrowpanel-color: var(--theme-arrowpanel-color, FieldText);
    --v-arrowpanel-background: var(--theme-arrowpanel-background, Field);
    --v-arrowpanel-border-color: var(--theme-arrowpanel-border-color, color-mix(in srgb, currentColor 20%, transparent));
    --v-panel-separator-color: var(--theme-arrowpanel-separator, color-mix(in srgb, currentColor 20%, transparent));
    --v-arrowpanel-dimmed: var(--theme-arrowpanel-dimmed, color-mix(in srgb, currentColor 20%, transparent));
    --v-arrowpanel-dimmed-further: var(--theme-arrowpanel-dimmed-further, color-mix(in srgb, currentColor 10%, transparent));
}
menupopup {
    appearance: none !important;
    padding: 0 !important;
    border: 1px solid var(--v-arrowpanel-border-color) !important;
    border-radius: 0 !important;
    background: var(--v-arrowpanel-background) !important;
    color: var(--v-arrowpanel-color) !important;
    --panel-background: transparent !important;
    --panel-color: var(--v-arrowpanel-color) !important;
    --panel-border-color: transparent !important;
    --panel-border-radius: 0px !important;
    --nested-margin: 0px !important;
    box-shadow: none !important;
    --v-panel-padding: 0;
    --v-panel-background: transparent;
    --v-panel-border-width: 0;
    --v-panel-margin: 0;
    --v-panel-arrowbox-display: none;
}
menupopup:where(:not([side])) {
    margin: 0 !important;
}
menupopup > menu > menupopup {
    margin-inline-start: 0 !important;
    margin-top: -1px !important;
}
:where(#BMB_bookmarksPopup) {
    margin-top: -4px !important;
}
panel[type="arrow"].panel-no-padding {
    --v-panel-padding: 0;
}
.panel-arrowcontainer > .panel-arrowcontent {
    padding: var(--v-panel-padding, var(--arrowpanel-padding)) !important;
    background: var(--v-panel-background, var(--arrowpanel-background)) !important;
    border-radius: 0 !important;
    border-width: var(--v-panel-border-width, 1px) !important;
    margin: var(--v-panel-margin, 4px) !important;
}
.panel-arrowcontainer > .panel-arrowbox {
    display: var(--v-panel-arrowbox-display, flex);
}
hbox[flex="1"][part="innerbox"] {
    border-width: 0 !important;
    margin-top: 0 !important;
}
scrollbox[flex="1"][part="scrollbox"] {
    padding-top: 0 !important;
}
arrowscrollbox.menupopup-arrowscrollbox {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
menupopup menuseparator {
    appearance: none !important;
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    border: none !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    padding-block: 1px !important;
}
menupopup menuseparator::before {
    content: "" !important;
    display: inline-block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    border: none !important;
    border-top: 1px solid var(--v-panel-separator-color) !important;
}
menupopup :is(menu,menuitem,menucaption) {
    appearance: none !important;
    min-height: var(--v-menupopup-item-min-height) !important;
    padding: 0px var(--v-menupopup-item-padding-inline) !important;
}
menupopup .menu-iconic-left {
    appearance: none !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: var(--v-menupopup-text-inline-start) !important;
    visibility: visible !important;
    min-width: 16px !important;
    width: 16px !important;
    padding: 0 !important;
}
#context-navigation:not([hidden]) {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    min-width: 0px !important;
}
#context-navigation > .menuitem-iconic {
    width: auto !important;
    flex-grow: 1 !important;
    justify-content: center !important;
}
#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
    background-color: transparent !important;
}
menupopup .menu-iconic-text {
    appearance: none !important;
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}
menupopup .contentSelectDropdown-ingroup .menu-iconic-text {
    margin-inline-start: 16px !important;
}
menupopup .menu-text {
    appearance: none !important;
    padding-inline-start: var(--v-menupopup-text-inline-start) !important;
    margin-inline-start: 16px !important;
}
menupopup .menu-iconic-left > .menu-iconic-icon,
menupopup .menu-right > image {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
}
menupopup menuitem:is([type="checkbox"],[type="radio"]) > .menu-iconic-left > .menu-iconic-icon,
menupopup .menu-right > image {
    display: inline-flex !important;
    visibility: visible !important;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor !important;
    fill-opacity: var(--v-menupopup-icon-fill-opacity);
    color: var(--v-arrowpanel-color) !important;
}
menupopup .menu-right {
    appearance: none !important;
    list-style-image: url("./svg/menu-right-icon.svg") !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0px !important;
}
menupopup :is(menu,menuitem,menucaption) {
    color: var(--v-arrowpanel-color);
}
:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem,menucaption) {
    color: var(--v-arrowpanel-color) !important;
}
menupopup :is(menu,menuitem)[_moz-menuactive="true"] {
    background: var(--v-arrowpanel-dimmed);
}
:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem)[_moz-menuactive="true"] {
    background: var(--v-arrowpanel-dimmed) !important;
}
menupopup :is(menu,menuitem)[_moz-menuactive="true"]:active {
    background: var(--v-arrowpanel-dimmed-further);
}
:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem)[_moz-menuactive="true"]:active {
    background: var(--v-arrowpanel-dimmed-further) !important;
}
:where(:not(#ContentSelectDropdown)) > menupopup :is(menu,menuitem,menucaption):is([disabled="true"],[disabled="true"]:active) {
    opacity: 0.6 !important;
    background: none !important;
}
menupopup menuitem[type="checkbox"] > .menu-iconic-left {
    list-style-image: url("./svg/checkbox-icon.svg") !important;
    justify-content: center !important;
}
menupopup menuitem[type="checkbox"][checked="true"] > .menu-iconic-left {
    list-style-image: url("./svg/checkbox-icon-checked.svg") !important;
}
menupopup menuitem[type="radio"] > .menu-iconic-left {
    list-style-image: url("./svg/radio-icon.svg") !important;
    justify-content: center !important;
}
menupopup menuitem[type="radio"][checked="true"] > .menu-iconic-left {
    list-style-image: url("./svg/radio-icon-checked.svg") !important;
    justify-content: center !important;
}
menupopup:-moz-locale-dir(rtl) .menu-right > image {
    transform: scaleX(-1) !important;
}
/* <-- меню */
}

Отредактировано _zt (08-07-2023 02:36:31)

b0ttle · №13081

_zt
Как ширину уменьшить? Слишком длинное.
И еще, в чем разница? У вас этого нет.
@-moz-document url-prefix("chrome:"), url-prefix("about:") {..}

Отредактировано b0ttle (08-07-2023 06:03:29)

_zt · №13082

b0ttle пишет

Как ширину уменьшить? Слишком длинное.

Покажите.

b0ttle пишет

И еще, в чем разница? У вас этого нет.

Где "у нас", в первом коде? Перечитайте еще раз мой пост, а так же вопрос на который я в том посте отвечал.

b0ttle · №13083

_zt
Да, что-то не понравился стиль, в плане того, что снова изобретать велосипед. Мне бы стандартную немного сжать, ну контекстное меню. Из коробки контекстное меню идет в высоту, тут в ширину.

_zt · №13084

b0ttle пишет

снова изобретать велосипед

Что вам изобретать? Вам готовое все на блюдечке преподнесли.

b0ttle пишет

Из коробки контекстное меню идет в высоту, тут в ширину.

Обоснуйте свои слова, покажите скриншот. Второй раз уже пишу.

b0ttle пишет

Мне бы стандартную немного сжать

Для этого стили не нужны.

ps: И если вы взяли второй стиль, то для него нужны пять .svg, в первом стиле они в base, можно их оттуда взять.

Отредактировано _zt (09-07-2023 00:33:00)

qzqz72 · №13085

Всем привет!
После обновления с 89 -> 115 появился визуальный баг на Крестике закрытия вкладки (при наведении курсора сильно съезжает, что очень раздражает). Можно что то с этим сделать?
В безопасном режиме без дополнений и стилей баг так же присутствует. Пробовал разные темы, так же бесполезно.

Попробовал установить начистую - бага нет.
Может можно как то забэкапить все настройки закладки сессии и т д. На старых мозилах пользовался MozBackup, но сейчас она наверно уже неактуальна....

https://disk.yandex.ru/i/YhEssylhk2uCjw
https://disk.yandex.ru/i/QkKGAyv5NleQLg

kokoss · №13086

qzqz72 пишет

После обновления с 89 -> 115 появился визуальный баг на Крестике закрытия вкладки (при наведении курсора сильно съезжает, что очень раздражает). Можно что то с этим сделать?

Попробуйте так:

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

Выделить код

Код:

.tab-close-button {
  margin-inline-end: 4px !important;
  width: 24px;
  height: 24px;
  padding: 2px;
}

Oleg_V · №13087

Помогите поправить стиль, плиз
Рисует тонкую разделительную линию между неактивными вкладками
Но рисует ее перед вкладкой
в результате нет линии после последней вкладки, что некрасиво
сам так и не смог победить/исправить

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

Выделить код

Код:

/* Unselected Tab - Divide line */
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
 .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
 #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
   /* Box Model */
   content:  "";
   display:  block;
   position: absolute;
   bottom:   0%;
 
   /* Bar shape */
   width:     1px;
   height:   40px;
   overflow: hidden;
 
   /* Bar Color */
   opacity: var(--tab-separator-opacity);
   transition: opacity .2s var(--ease-basic) !important;
   background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /*  Replace var(--toolbarseparator-color) - Hard coded for compatibility */
}

Отредактировано Oleg_V (10-07-2023 18:22:46)

_zt · №13088

Oleg_V
Присмотритесь повнимательнее, при большом кол-ве вкладок, когда появляется скроллбокс, у кнопок перемотки есть свой "разделитель", в том случае если есть чего мотать, а если мотать не чего (достигнута крайняя вкладка), то он исчезает. Ваш код добавляет разделитель у первой вкладки слева, а теперь вы хотите еще и справа, т.е. будет вообще непонятно в какой позиции ленты вкладок вы находитесь в данный момент.
Так же, ваш стиль добавляет разделители не между вкладок, а прямо под краем бэкграунда, что заметно при наведении. Возможно именно поэтому добавлен ховер.

Я бы наоборот, убрал разделитель у первой вкладки, удалил ховер и сдвинул бэкграунд.

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

Выделить код

Код:

/* Разделитель неактивных вкладок */
.tabbrowser-tab:not([pinned], [visuallyselected], [multiselected], [first-visible-unpinned-tab], :first-child) .tab-background::before {
    /* Box Model */
    content:  "";
    display:  flex;
    position: absolute;
    bottom:   0%;
    left:     -3px;
    /* Bar shape */
    width:    1px;
    height:   40px;
    overflow: hidden;
    /* Bar Color */
    opacity: var(--tab-separator-opacity);
    transition: opacity .2s var(--ease-basic) !important;
    background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
    /* Для визуальной совместимости с темой можно попробовать заменить значение на
       var(--toolbarseparator-color) */
}
/* Отступы панели вкладок */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
    width: 3px !important;
}

Отредактировано _zt (10-07-2023 18:30:30)

Oleg_V · №13089

_zt
мне вообще не интересны разделители при большом количестве вкладок, когда появляются скроллеры. не пользуюсь

заменил свой код на ваш
но все равно в конце списка вкладок нет разделителя. а именно там мне режет глаз
вот смотрите
скрин1, когда последняя вкладка активна. есть полоска в конце
скрин2, когда последняя вкладка не активна. сплошняк, некрасиво

_zt · №13090

Обновил код выше, убрал еще лишнего и добавил секцию уменьшения отступов по краям панели.

Oleg_V
Я знаю, я его и не добавлял, наоборот убрал лишнее.
Попробуйте в своем коде добавить right: 1px;
Дело в том, что разделитель там задан, просто он куда-то уплыл вне диапазона.

Отредактировано _zt (10-07-2023 18:46:02)

Oleg_V · №13091

_zt

_zt пишет

Попробуйте в своем коде добавить right: 1px;

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

alla51 · №13092

Подскажите, пожалуйста.
Был FF 112, обновила на 115. Сначала обновила "поверх", но что-то пошло не так и пришлось скачать и установить заново. Сделала новый профиль.
Привыкла, что все 4 панели инструментов голубые. Нашла старый userChrome.css. Подошел.
1. Как уменьшить высоту всех панелей (хотя нижняя-панель закладок вроде пониже остальных, а почему?).
2. Почитала последние страницы - перенести панель вкладок вниз никак нельзя?
3. Насчет "Открыть новую вкладку. Выбрано "Домашнюю страницу". Ярлыки. На старой версии FF она была хорошо заполнена, но до переустановки я забыла из about:config сохранить из старого профиля значение параметра /browser.newtabpage.pinned. Попробовала взять из файла prefs.js старого профиля эти строки и вставила в prefs.js на новой FF. Но никакого результата. И такое впечатление, что она сейчас заполняется сама, туда попадают сайты, которые я открываю. Как перенести старое и как сделать, чтобы туда попадали только те сайты, которые я туда добавляю?
Спасибо.
win 8.1.

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

_zt · №13093

Oleg_V
Там еще косяк есть при закрепленных вкладках.

alla51
1. В about:config
browser.compactmode.show = true
browser.uidensity = 1
2. Можно, читайте еще, было несколько решений. Например tabs_below_navigation..., скорее всего просто так работать не будет, нужен еще general_variables.css, в общем, начните отсюда CustomCSSforFx
3. a. формат то тот? сейчас такой [{"url":"https://www.youtube.com/","label":"YouTube"},{"url":"https://www.facebook.com/","label":"Facebook"}]
б. закреплять нужное (три точки над плиткой)
в. предполагаю что, если очистите то что есть и закрепите нужное, то, при закреплении всех видимых плиток, посещаемое сохранятся не будет.
кол-во плиток можно увеличить - browser.newtabpage.activity-stream.topSitesRows = нужное кол-во строк.
А оно вам надо, может расширение?
Tabliss - New Tab
Результаты поиска для "dial"

Отредактировано _zt (11-07-2023 01:23:07)

alla51 · №13094

_zt
1.высота панелей стала ОК!

_zt пишет

2. Можно, читайте еще, было несколько решений. Например tabs_below_navigation..., скорее всего просто так работать не будет, нужен еще general_variables.css, в общем, начните отсюда CustomCSSforFx

Думала, может у кого есть уже готовый код.

_zt пишет

3. a. формат то тот? сейчас такой [{"url":"https://www.youtube.com/

Формат вроде тот же (взяты куски из файлов Prefs.js):

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

в старом FF 112:
user_pref("browser.newtabpage.pinned", "[{\"url\":\"https://yandex.ru/\",\"label\":\"yandex\",\"baseDomain\":\"yandex.ru\"},{\"url\":\"https://realmeteo.ru/spb/1/current\",\"label\":\"Погода в СПб\",\"baseDomain\":\"realmeteo.ru\"},
в новом FF 115:
user_pref("browser.newtabpage.pinned", "[{\"url\":\"https://yandex.com\",\"label\":\"yandex\"},{\"url\":\"https://dzen.ru/?yredirect=true\",\"label\":\"dzen\"},{\"url\":\"https://realmeteo.ru/spb/1/current\",\"label\":\"Погода\",\"baseDomain\":\"realmeteo.ru\"},{\"

Как закреплять, я знаю. Хотелось "автоматизировать" процесс. Придется делать ручками

_zt пишет

Tabliss - New Tab
Результаты поиска для "dial"

Думаю, это лишнее. Мне только надо было перенести закладки этой страницы.
Спасибо.
Скажите, пожалуйста, параметр layout.css.devpixelsPerPx -влияет не только на размер шрифта в панелях? но и на размер шрифта на страницах?

Отредактировано alla51 (11-07-2023 02:09:20)

_zt · №13095

alla51
2. А я вам какой предложил, не готовый? Видимо у нас разное понимание готовности.
3. Нет, не тот, не знаю где вы в новом слэши нашли. Прежде чем писать, тестировал на чистом профиле.
layout.css.devpixelsPerPx не на шрифт влияет, а на масштабирование браузера, т.е. всего.

Oleg_V · №13096

_zt
А можно стиль, чтобы нарисовать тонкую полоску слева и справа от кнопки "Открыть новую вкладку" (крестик справа на панели вкладок)
полоску по всей высоте панели вкладок, а не только по высоте этой кнопки (кнопка меньше высоты панели)
может так будет лучше
вот так чтобы выглядело

_zt пишет

Там еще косяк есть при закрепленных вкладках.

да, вижу
но мне не актуально
хотя, конечно, хочется универсальное решение

Отредактировано Oleg_V (11-07-2023 11:15:18)

alla51 · №13097

_zt,

alla51 пишет

перенести панель вкладок вниз никак нельзя?

_zt пишет

2. А я вам какой предложил, не готовый? Видимо у нас разное понимание готовности.

_zt пишет

Можно, читайте еще, было несколько решений. Например tabs_below_navigation..., скорее всего просто так работать не будет, нужен еще general_variables.css, в общем, начните отсюда CustomCSSforFx

В этом мне не разобраться. Под готовым я имела ввиду готовый файл, который просто подставить в папку.

_zt пишет

3. Нет, не тот, не знаю где вы в новом слэши нашли

вроде сравнивала, синтаксис кажется одинаковым. А вы про какие слэши говорите?

_zt · №13098

alla51
Там так и есть:
а. Скачиваете архив - прямая ссылка
б. Делаете бэкап вашей папки Chrome
в. Распаковываете содержимое архива в папку Chrome с заменой
г. Открываете по очереди файлы userChrome.css, userContent.css, читаете и следуете инструкциям
д. Свои коды из бэкапа можно потом добавить в конец новых userChrome.css, userContent.css

3. Которые перед кавычками у вас везде. Честно говоря не знаю насколько это важно, но факт налицо, у вас копируется со слэшами, а у меня нет, поэтому подозреваю, что вы копируете то что ранее туда вставили из старого профиля.

Oleg_V
Посмотрю.

alla51 · №13099

_zt, спасибо.

_zt пишет

Честно говоря не знаю насколько это важно, но факт налицо, у вас копируется со слэшами, а у меня нет, поэтому подозреваю, что вы копируете то что ранее туда вставили из старого профиля.

Вроде не копировала из старого, но столько раз повторяла, что ...
А если так, и там записи с неверным синтаксисом, то на что это может повлиять? Сейчас руками заполнила весь экран, вроде работает.
Может руками удалить в prefs эти строки и занести ВСЕ снова руками (чтоб было правильно)? Или это лишнее?

_zt · №13100

alla51
Конечно лишнее, работает же уже.

Oleg_V
Три варианта, но все работают только до появления скроллбара.

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

Выделить код

Код:

/* 1. *//*
#tabbrowser-arrowscrollbox-periphery toolbartabstop {
    border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
}
/* 2. *//*
#tabbrowser-arrowscrollbox-periphery toolbartabstop {
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
}
/* 3. *//*
#tabs-newtab-button {
    border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
    border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent) !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