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

Retif · №12576

kokoss пишет

https://github.com/Aris-t2/CustomCSSfor … .css#L1083

Да, спасибо, то что нужно! :beer:

А вот про цвет активной вкладки не подскажете? Копаюсь, копаюсь, пока не могу найти, где можно поменять.

kokoss · №12577

Retif пишет

А вот про цвет активной вкладки не подскажете?

Выделить код

Код:

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: свой цвет;
  color: свой цвет;
}

Add, ладно, тогда так:

Выделить код

Код:

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: red;
  color: black;
}

Отредактировано kokoss (20-01-2023 18:36:47)

vitalii201 · №12578

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

Orchello · №12579

Всем привет. Часов шесть мучаюсь, не получается. Как?

6e73epo · №12580

Orchello,

Выделить код

Код:

#tabbrowser-tabs {
	border-inline-start: none !important;
}

Orchello · №12581

6e73epo пишет

Orchello,
Выделить код
Код:
#tabbrowser-tabs {
	border-inline-start: none !important;
}

Спасибо, помогло, в натуре (-:

Orchello · №12582

.tabbrowser-tab {
max-width: 114px !important;
max-height: 20px !important;
min-height: 20px !important;
}
20 пикселей, весь тулбар 36, если уменьшаю, кнопки уходят за верхнюю границу окна. Откуда эти 16 пикселей?
#TabsToolbar {
max-height: 36px !important;
border-bottom: 1px solid #008000 !important;
}

Кнопки "список вкладок" и "новая вкладка"? Или ещё что?

Отредактировано Orchello (21-01-2023 21:12:59)

usalex · №12583

Использую код Виталия для уменьшения высоты панели вкладок.
Уменьшил до 26 пикселей, но хочу еще сильнее уменьшить высоту. Дальнейшему уменьшению, похоже, препятствуют кнопки управления окном (крестик, квадратик и черта).
Подскажите, плиз, код для 109, чтоб уменьшить размер этих кнопок?

Отредактировано usalex (21-01-2023 22:25:52)

Orchello · №12584

usalex пишет

код для 109, чтоб уменьшить размер этих кнопок?)

В настройках Винды, персонализация, там кнопки управления окном.

usalex · №12585

Orchello
При чем здесь винда??? Мне нужно уменьшить размер кнопок управления окном браузера.

xrun1 · №12586

usalex
Попробуйте поиграться с этим стилем

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

Выделить код

Код:

/* Замена кнопок управления окном https://forum.mozilla-russia.org/viewtopic.php?pid=765572#p765572 */
@-moz-document url("chrome://browser/content/browser.xhtml") {
:root {
    --v-titlebar-button-vert-padding: 6px; /* 5px */
    --v-titlebar-button-horizont-padding: 6px; /* 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);
}

: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);
}

:root {
    background-color: -moz-Dialog !important;
    color: -moz-DialogText !important;
}

@media (-moz-windows-glass), (-moz-os-version: windows-win8) {
    :root {
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: ActiveCaption !important;
        color: CaptionText !important;
    }

    :root:-moz-window-inactive {
        background-color: InactiveCaption !important;
        color: InactiveCaptionText !important;
    }

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

@media (-moz-windows-glass: 0) and (-moz-os-version: windows-win7) {
    :root {
        background-color: ActiveCaption !important;
        color: CaptionText !important;
    }

    :root:-moz-window-inactive {
        background-color: InactiveCaption !important;
        color: InactiveCaptionText !important;
    }
}

:root:-moz-lwtheme {
    --v-lwt-accent-color-for-lwtheme: var(--lwt-accent-color, rgb(227, 228, 230));
    background-color: var(--v-lwt-accent-color-for-lwtheme) !important;
    color: var(--lwt-text-color, rgb(24, 25, 26)) !important;
}

:root:-moz-lwtheme-brighttext {
    --v-lwt-accent-color-for-lwtheme: var(--lwt-accent-color, rgb(12, 12, 13));
    color: var(--lwt-text-color, rgb(249, 249, 250)) !important;
}

:root:-moz-lwtheme:-moz-window-inactive {
    background-color: var(--lwt-accent-color-inactive, var(--v-lwt-accent-color-for-lwtheme)) !important;
}

@media (-moz-windows-accent-color-in-titlebar) {
    :root[tabsintitlebar]:not(:-moz-lwtheme):not(:-moz-window-inactive),
    :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
        background-color: -moz-win-accentcolor !important;
        color: -moz-win-accentcolortext !important;
    }
}

:root[tabsintitlebar]:not([inDOMFullscreen]) #titlebar {
    visibility: hidden !important;
}

:root[tabsintitlebar]:not([inDOMFullscreen]):not([chromehidden~="menubar"]) #titlebar > #toolbar-menubar,
:root[tabsintitlebar]:not([inDOMFullscreen]):not([chromehidden~="toolbar"]) #titlebar > #TabsToolbar {
    visibility: visible;
}

:root[sizemode="normal"] #titlebar {
    -moz-appearance: none !important;
    appearance: none !important;
}

.titlebar-buttonbox-container {
    -moz-box-align: start !important;
}

.titlebar-buttonbox {
    -moz-appearance: none !important;
    appearance: none !important;
    -moz-box-align: start !important;
    -moz-box-pack: end !important;
    margin: 0 !important;
    padding: 0 !important;
}

:root[data-l10n-id="browser-main-window-mac"] .titlebar-buttonbox:-moz-locale-dir(ltr) {
    -moz-box-direction: reverse !important;
}

:root[sizemode="normal"] #navigator-toolbox {
    border-top: none !important;
    padding-top: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
    margin-top: 0 !important;
}

#toolbar-menubar {
    text-shadow: inherit !important;
}

#main-menubar {
    text-shadow: inherit !important;
    background-color: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
}

#toolbar-menubar,
#TabsToolbar {
    color: inherit !important;
    background-image: none !important;
}

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

:root[tabsintitlebar] #TabsToolbar .tab-label {
    opacity: 1 !important;
}

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

.titlebar-buttonbox > :is(.titlebar-min,.titlebar-max,.titlebar-restore,.titlebar-close),
#minimize-button, #restore-button, #close-button {
    display: -moz-box !important;
    -moz-appearance: none !important;
    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;
    background-color: transparent !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;
}

.titlebar-buttonbox > :is(.titlebar-min,.titlebar-max,.titlebar-restore,.titlebar-close) > .toolbarbutton-icon,
:is(#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,
#minimize-button {
    list-style-image: var(--v-titlebar-min-image) !important;
    -moz-image-region: auto !important;
}

.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,
.titlebar-buttonbox > .titlebar-restore,
#restore-button {
    list-style-image: var(--v-titlebar-maximized-image) !important;
    -moz-image-region: auto !important;
}

.titlebar-buttonbox > :is(.titlebar-min,.titlebar-max,.titlebar-restore):hover,
:is(#minimize-button,#restore-button):hover {
/*    background-color: var(--v-titlebar-button-background-hover) !important; */
    background-color: blue !important;
    color: yellow !important;
}

.titlebar-buttonbox > :is(.titlebar-min,.titlebar-max,.titlebar-restore):hover:active,
:is(#minimize-button,#restore-button):hover:active {
/*    background-color: var(--v-titlebar-button-background-active) !important; */
    background-color: blue !important;
    color: yellow !important;
}

.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,
#close-button:hover {
    background-color: var(--v-titlebar-close-background-hover) !important;
    color: yellow !important;
}

.titlebar-buttonbox > .titlebar-close:hover:active,
#close-button:hover:active {
    background-color: var(--v-titlebar-close-background-active) !important;
    color: yellow !important;
}
/* Мерцание бэкграунда при наведении мыши (в режиме показа главного меню через Alt)
  https://forum.mozilla-russia.org/viewtopic.php?pid=802651#p802651 */
#toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container {
    visibility: collapse !important;
}
}

Orchello · №12587

usalex пишет

При чем здесь винда???

Чисто для эксперимента попробуй.

Отредактировано Orchello (22-01-2023 14:28:26)

xrun1 · №12588

Orchello
У меня Windows 10 Pro. Не вижу такой возможности в Персонализации. Где это, можно точнее?

Orchello · №12589

xrun1 пишет

Orchello
У меня Windows 10 Pro. Не вижу такой возможности в Персонализации. Где это, можно точнее?

У меня Вин 7. ПКМ по раб.столу, Персонализация, внизу Цвет окна. Как-то так называется, почему-то...

usalex · №12590

Orchello

Orchello пишет

У меня Вин 7

В актуальной винде таких настроек нет. Да мне и не нужно глобально уменьшать кнопки во всех окнах - нужно уменьшить только для фаерфокса.

xrun1

xrun1 пишет

Попробуйте поиграться с этим стилем

Спасибо, попробую.
Но код какой-то слишком большой. Или там только часть кода (какая?) относится к кнопкам управления окном, а остальное можно вычеркнуть?

aleks66 · №12591

Подскажите пожалуйста, как спрямить углы вкладок через userChrome.css?

kokoss · №12592

aleks66

Выделить код

Код:

:root {
    --tab-border-radius: 0px !important;
}

Отредактировано kokoss (22-01-2023 18:53:44)

aleks66 · №12593

kokoss
Спасибо! Помогло.

6e73epo · №12594

aleks66, думаю, что можно спрямить углы без !important, если переопределить переменную на внутреннем уровне, но не уверен

Выделить код

Код:

#TabsToolbar {
	--tab-border-radius: 0;
}

kokoss · №12595

6e73epo пишет

думаю, что можно спрямить углы без !important,

А если с !important, то что не так ?

6e73epo · №12596

kokoss пишет

А если с !important, то что не так ?

Можно ознакомиться

kokoss · №12597

6e73epo пишет

Можно ознакомиться

Ну не знаю, работает без глюков...

xrun1 · №12598

usalex
Код писал человек, который в этом разбирается лучше меня. Там для разных режимов: окно, на весь экран, режим чтения и т.д. Можно же сохранить код отдельным стилем и просто импортировать в userChrome.css.
Размеры задаются в начале. Попробуйте изменить в том коде 4, 11 и 12-ю строки, как здесь. Кнопочки маленькие, вроде, получаются.

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

Выделить код

Код:

/* Замена кнопок управления окном https://forum.mozilla-russia.org/viewtopic.php?pid=765572#p765572 */
@-moz-document url("chrome://browser/content/browser.xhtml") {
:root {
    --v-titlebar-button-vert-padding: 3px; /* 5px */
    --v-titlebar-button-horizont-padding: 6px; /* 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: 10px;
    --v-titlebar-button-image-width: 10px;

usalex · №12599

xrun1
Спасибо вам огромное за помощь!

xrun1 пишет

Код писал человек, который в этом разбирается лучше меня.

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

xrun1 пишет

Размеры задаются в начале.

Правильно ли я понимаю, что, кроме размеров, там в коде есть еще и замена картинок?
Но я не понимаю, на какие именно картинки происходит замена? Где лежат (куда класть) новые кастомные картинки?

robotest · №12600

Здравствуйте,
может кто знает как ширину исправить. После 108 версии, этот код не работает:

Выделить код

Код:

menu.bookmark-item,

menuitem.bookmark-item {

max-width: 16em ! 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