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

6e73epo · №13301

m_nikolay, утка на главной странице? Да, добивает. Сдвинь ее, достаточно на размер заданной ширины в стиле

xrun1 · №13302

Dumby
Спасибо, сработало!
Я примерно понимал, откуда проблема нарисовалась, не только в кнопке. В меню страницы, в меню открыть в контейнере...

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

Но сам бы не "дотумкал".

m_nikolay · №13303

6e73epo

m_nikolay пишет

Сдвинь ее, достаточно на размер заданной ширины в стиле

Как это прописать в коде, который я выложил в посте https://forum.mozilla-russia.org/viewto … 43#p806943?

Отредактировано m_nikolay (15-09-2023 07:36:21)

6e73epo · №13304

m_nikolay, у меня нет Stylus. Для главных страниц (есть еще такая) для лого будет примерно так

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

Выделить код

Код:

@-moz-document domain("duckduckgo.com") {
  :root {
    --no-ga-ga: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.unixmen.com%2Fwp-content%2Fuploads%2F2016%2F02%2Fgitlab-logo-square.png");
  }
  div[class^="header_logo"] > img[src], img[class^="legacy-homepage_logo"] {
    object-position: 200px 0;
    background: no-repeat center/150px var(--no-ga-ga);
  }
  .body--html .logo_homepage {
    background-image: var(--no-ga-ga) !important;
  }
  @media only screen and (max-height: 425px) {
    .body--html .logo_homepage {
      background-size: 70px !important;
    }
  }
}

Отредактировано 6e73epo (15-09-2023 08:45:48)

m_nikolay · №13305

6e73epo
Спасибо, получилось то, что нужно. Всяческого вам добра

rubel · №13306

В 115.2.0esr не работает скрол от Виталия из full_theme. Вообще нет полосы прокрутки на страницах, а вот в боковушке в закладках
эта полоса прокрутки имеется. Можно это дело починить или у кого есть работающий красивый scrollbars.css в 115.2.0esr.

kokoss · №13307

rubel пишет

или у кого есть работающий красивый scrollbars.css в 115.2.0esr.

Как вариант:

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

Выделить код

Код:

user_pref("widget.non-native-theme.scrollbar.style", 5);
user_pref("ui.useOverlayScrollbars", 1);

Atherson · №13308

kokoss

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

Вот этот фрагмент для кнопок управления окном не работает на 115 лисе:

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

/* Кнопки управления окном */
*|*: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;
}
}

rubel · №13309

kokoss
Да полоска появилась, но уж очень она невзрачная, серенькая. А как бы её подкрасить в какой-нибудь приятный цвет.

kokoss · №13310

Atherson

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

Выделить код

Код:

@-moz-document url("chrome://browser/content/browser.xhtml") {
: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);
}

: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 {
    align-items: start !important;
}

.titlebar-buttonbox {
    -moz-appearance: none !important;
    appearance: none !important;
    align-items: start !important;
    justify-content: end !important;
    margin: 0 !important;
    padding: 0 !important;
}

:root[data-l10n-id="browser-main-window-mac"] .titlebar-buttonbox:-moz-locale-dir(ltr) {
    flex-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: flex !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 {
    align-items: 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;
}

.titlebar-buttonbox > .titlebar-max {
    list-style-image: var(--v-titlebar-max-image) !important;
}

:root[sizemode="maximized"] .titlebar-buttonbox > .titlebar-max,
.titlebar-buttonbox > .titlebar-restore,
#restore-button {
    list-style-image: var(--v-titlebar-maximized-image) !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;
}

.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;
}

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

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

rubel пишет

Да полоска появилась, но уж очень она невзрачная, серенькая. А как бы её подкрасить в какой-нибудь приятный цвет.

Выделить код

Код:

* {
  scrollbar-color: #0040aa transparent !important;
}

добавить в userContent.css

rubel · №13311

kokoss
Да, полоска покрасилась, но только на странице, а вот в боковушке в закладках так и осталась серенькая.

kokoss · №13312

rubel пишет

а вот в боковушке в закладках так и осталась серенькая.

Выделить код

Код:

.sidebar-panel[lwt-sidebar-brighttext] {
  scrollbar-color: #0040aa transparent !important;
}

в userChrome.css

rubel · №13313

kokoss
Нет, последний код ничего не меняет, остаётся серенькая.

kokoss · №13314

rubel пишет

Нет, последний код ничего не меняет, остаётся серенькая.

Странно, у меня работает, тогда добавьте предыдущий код в -> файл: custom_styles_all_agent.css.

fuchsfan · №13315

rubel пишет

красивый scrollbars.css в 115.2.0esr.

Не css, а js, зато красивый скролл везде, где есть прокрутка https://github.com/Aris-t2/CustomJSforF … bars.uc.js

rubel · №13316

fuchsfan
Спасибо за наводку на этот прекрасный скрипт. Очень красиво и скролл везде, где есть прокрутка. Вот только сделать бы эту полоску
немного по уже, слишком она широкая.
kokoss
Может ты поможешь это сделать.

Farby · №13317

rubel пишет

Вот только сделать бы эту полоску
немного по уже, слишком она широкая.

Можно сделать его thin

custom_scrollbars.uc.js

Выделить код

Код:

.
  // default: thin_scrollbars = false / browsers own way to show thin scrollbars
  const thin_scrollbars = true;

rubel · №13318

Farby

Farby пишет

Можно сделать его thin

Попробовал. Сбоку страницы полоска стала уже, а во всех других местах осталась широкой.

fuchsfan · №13319

rubel пишет

Вот только сделать бы эту полоску
немного по уже, слишком она широкая.

Я не знаю, но стоит попробовать. В браузере есть переключение стилей скроллбара, влияющее на ширину скролла. А вдруг оно будет иметь эффект при использовании скрипта https://forum.ru-board.com/topic.cgi?fo … tart=160#5

rubel · №13320

fuchsfan
Ну вот с этим значением - 2 Скролбар GTK меня вполне устраивает. Спасибо ! :beer:

kokoss · №13321

rubel
Можно ещё добавить скроллбар в закладки

+ цвет полосы прокрутки

Выделить код

Код:

:root {
  scrollbar-color: #0040aa transparent !important;
}

и тогда везде вроде будет.

xrun1 · №13322

Dumby
Часть 2 к этому.
При большом списке, который не помещается по вертикали, ломается прокрутка в кнопке "Дополнения". И в кнопке приложения Add Toolbar Buttons аналогично. Не знаете, как и это поправить?

rubel · №13323

kokoss
Спасибо за внимание. Я пока остановился на скрипте.

Atherson · №13324

kokoss
https://forum.mozilla-russia.org/viewtopic.php?pid=806958#p806958
Все получилось в лучшем виде.
Благодарствую.

Dumby · №13325

xrun1 пишет

Часть 2 к этому.

Ааа, у них там --panel-shadow-margin используется в round(…, 1px);

То есть, его нужно тоже указывать в пикселях
--panel-shadow-margin: 0px !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