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

Список ответов на каверзные вопросы можно получить в FAQ-разделе форума.

№1392608-03-2024 11:07:22

egorsemenov06
Участник
 
Группа: Members
Зарегистрирован: 12-06-2018
Сообщений: 419
UA: Firefox 123.0

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

Vitaliy V. а как сделать чуть поуже вертикальную и нижню панели?

Отсутствует

 

№1392708-03-2024 13:56:59

b0ttle
Участник
 
Группа: Members
Зарегистрирован: 22-10-2020
Сообщений: 182
UA: Firefox 123.0

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

egorsemenov06, у меня так.

Выделить код

Код:

#ucf-additional-vertical-bar,#ucf-additional-top-bar,#ucf-additional-bottom-bar{--toolbarbutton-outer-padding:0px!important;--toolbarbutton-inner-padding:0.4px!important;}

Отсутствует

 

№1392808-03-2024 14:27:30

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

egorsemenov06
Это и для доп. панели если не нужно удалите #ucf-additional-top-bar, из кода

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

Выделить код

Код:

#ucf-additional-top-bar,
#ucf-additional-vertical-bar,
#ucf-additional-bottom-bar {
    --toolbarbutton-border-radius: 2px !important;
    --toolbarbutton-outer-padding: 1px !important;
    --toolbarbutton-inner-padding: 4px !important;
    :root[uidensity="compact"]  & { /* компактный режим */
        --toolbarbutton-outer-padding: 1px !important;
        --toolbarbutton-inner-padding: 4px !important;
    }
    :root[uidensity="touch"] & { /* мобильный режим */
        --toolbarbutton-outer-padding: 2px !important;
        --toolbarbutton-inner-padding: 9px !important;
    }
    .toolbarbutton-badge {
        margin-top: calc(-1 * var(--toolbarbutton-inner-padding)) !important;
        margin-inline-end: calc(-1 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) !important;
        border-radius: var(--toolbarbutton-border-radius) !important;
    }
}


P.S. Код для [firefox] 117 +

Отредактировано Vitaliy V. (08-03-2024 14:28:39)

Отсутствует

 

№1392908-03-2024 14:47:13

egorsemenov06
Участник
 
Группа: Members
Зарегистрирован: 12-06-2018
Сообщений: 419
UA: Firefox 123.0

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

Vitaliy V. пишет

egorsemenov06
Это и для доп. панели если не нужно удалите #ucf-additional-top-bar, из кода

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

Выделить код

Код:

#ucf-additional-top-bar,
#ucf-additional-vertical-bar,
#ucf-additional-bottom-bar {
    --toolbarbutton-border-radius: 2px !important;
    --toolbarbutton-outer-padding: 1px !important;
    --toolbarbutton-inner-padding: 4px !important;
    :root[uidensity="compact"]  & { /* компактный режим */
        --toolbarbutton-outer-padding: 1px !important;
        --toolbarbutton-inner-padding: 4px !important;
    }
    :root[uidensity="touch"] & { /* мобильный режим */
        --toolbarbutton-outer-padding: 2px !important;
        --toolbarbutton-inner-padding: 9px !important;
    }
    .toolbarbutton-badge {
        margin-top: calc(-1 * var(--toolbarbutton-inner-padding)) !important;
        margin-inline-end: calc(-1 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) !important;
        border-radius: var(--toolbarbutton-border-radius) !important;
    }
}


P.S. Код для [firefox] 117 +

Спасибо Большое!!!

Отсутствует

 

№1393008-03-2024 14:51:14

6e73epo
Участник
 
Группа: Members
Зарегистрирован: 06-05-2022
Сообщений: 196
UA: Firefox 122.0

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

Vitaliy V., страница about:downloads. В контекстное меню добавляю иконки. Но как вижу для окна полицию прикрутили:
csp="default-src chrome:; img-src chrome: moz-icon:;
Добавить свою иконку не получится?

Отредактировано 6e73epo (08-03-2024 14:51:59)

Отсутствует

 

№1393109-03-2024 01:25:51

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

6e73epo
Получится, данная CSP не влияет на стили, но смотря куда вы добавляете и как, если в userChrome.css понятно не сработает нужно в userContent.css или в UCF ...

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

Отсутствует

 

№1393209-03-2024 03:58:40

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1166
UA: Firefox 123.0

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

egorsemenov06
Как по мне, лучше старый код, работает. Пусть не такой универсальный.

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

Выделить код

Код:

/* Сжать доп.панели https://forum.mozilla-russia.org/viewtopic.php?pid=775867#p775867 */
#ucf-additional-top-bar,
#ucf-additional-bottom-bar {
    --toolbarbutton-outer-padding: 0px !important;
    --toolbarbutton-inner-padding: 2px !important;
    min-height: 18px !important;
}
:is(#ucf-additional-top-bar,#ucf-additional-bottom-bar) .toolbarbutton-badge {
    margin-inline-end: calc(-1 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) !important;
}
#ucf-additional-bottom-closebutton {
    padding: 0 !important;
}
#ucf-additional-vertical-bar {
    --toolbarbutton-outer-padding: 0px !important; /* это и есть ширина боковой панели; комбинируется с пар. ниже */
    --toolbarbutton-inner-padding: 3px !important; /* расстояние по вертикали между кнопками; комбинируется с предыдущим, лучше 3 или 5 */
    min-width: 18px !important;
}
#ucf-additional-vertical-bar .toolbarbutton-badge {
    margin-inline-end: calc(-1 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) !important;
}

Отредактировано xrun1 (09-03-2024 04:13:35)

Отсутствует

 

№1393309-03-2024 08:51:29

egorsemenov06
Участник
 
Группа: Members
Зарегистрирован: 12-06-2018
Сообщений: 419
UA: Firefox 123.0

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

xrun1 пишет

egorsemenov06
Как по мне, лучше старый код, работает. Пусть не такой универсальный.

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

Отсутствует

 

№1393409-03-2024 10:48:20

6e73epo
Участник
 
Группа: Members
Зарегистрирован: 06-05-2022
Сообщений: 196
UA: Firefox 122.0

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

Vitaliy V. пишет

данная CSP не влияет на стили

Влияет, но избранно. Пункт меню "Clear Downloads" особняком стоит; не имеет класса и command присутствует. Ошибка в консоли не просто так:
Content-Security-Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml;charset=utf-8,<svg wi… (“img-src”)

Отредактировано 6e73epo (09-03-2024 10:49:30)

Отсутствует

 

№1393509-03-2024 11:47:32

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

6e73epo пишет

data:image

А ну да, забыл уже давно не использую data:image, отдельным файлом загружайте и не будет ошибки

xrun1 пишет

Как по мне, лучше старый код, работает

Что именно лучше ? Там плюс минус одно и то же

Отредактировано Vitaliy V. (09-03-2024 12:16:40)

Отсутствует

 

№1393609-03-2024 15:27:38

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1166
UA: Firefox 123.0

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

Vitaliy V. пишет

Там плюс минус одно и то же

Да, конечно. Просто для компактного режима, мне так кажется, значения лучше поменьше. Они такие же же, как в обычном.

Выделить код

Код:

:root[uidensity="compact"]  & { /* компактный режим */
        --toolbarbutton-outer-padding: 0px !important; /* 1px */
        --toolbarbutton-inner-padding: 3px !important; /* 4px */
    }

И чтобы два раза со стула не вставать. В версиях UCF от 2024-3-2 и 2024-3-7 незначительно изменился файл vertical_top_bottom_bar.css, который есть в UserChromeFiles_Fix_115_ESR.zip. Может это и не особенно важно, просто информация.

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

Выделить код

Код:

#ucf-additional-vertical-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 3 !important;
    margin: -1px 0 !important;
   :root[BookmarksToolbarOverlapsBrowser] & {
        margin-top: calc(var(--bookmarks-toolbar-overlapping-browser-height) - 1px) !important;
    }
}

Отсутствует

 

№1393709-03-2024 16:11:06

6e73epo
Участник
 
Группа: Members
Зарегистрирован: 06-05-2022
Сообщений: 196
UA: Firefox 122.0

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

Vitaliy V. пишет

А ну да, забыл уже давно не использую data:image, отдельным файлом загружайте и не будет ошибки

Сегодня нельзя data:image, а позже нельзя ничего, кроме chrome:// Да и не любитель плодить файлы иконок внутри каталога chrome
Нашел выход через стилевое переопределение "неиспользуемого" svg

Отсутствует

 

№1393809-03-2024 17:16:05

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

xrun1 пишет

Просто для компактного режима, мне так кажется, значения лучше поменьше

Со значениями это свои используйте, да и компактный режим только через about:config включается

xrun1 пишет

В версиях UCF от 2024-3-2 и 2024-3-7 незначительно изменился файл vertical_top_bottom_bar.css, который есть в UserChromeFiles_Fix_115_ESR.zip.

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

Отредактировано Vitaliy V. (09-03-2024 17:16:42)

Отсутствует

 

№1393911-03-2024 02:04:56

egorsemenov06
Участник
 
Группа: Members
Зарегистрирован: 12-06-2018
Сообщений: 419
UA: Firefox 123.0

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

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

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

Выделить код

Код:

:root {
  --tab-curve-width: 26px;
  --tabs-border: transparent !important;
  --tab-border-radius: 0 !important;
}

.tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
  padding-inline-start: 10px !important;
}

/* To be able to see the top border of the tab */
.tab-stack {
  margin-top: 2px !important;
}

/* To prevent tab label appearing on pinned tab in compact mode. */
.tab-content {
  padding: 0 18px !important;
}

/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar  {
  padding-inline-start: 8px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}

.tabbrowser-tab[first-visible-tab="true"] {
  padding-left: 12px !important;
}

#tabbrowser-tabs {
  margin-left: -15px !important;
}

.titlebar-placeholder {
  border: none !important;
}

.titlebar-spacer {
  border: none !important;
}

/* Styles to account for when tab scrollbar is visible, and margin-inline-start kicks in */
.tabbrowser-tab[pinned="true"] {
  width: 41px !important; /* Actual photon pinned tab is 41px, but 40px removes pixelated artifact from pinned tab favicon */
}

.tabbrowser-tab[pinned="true"][style^="margin-inline-start"] {
  padding-left: 12px !important;
}

/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
  border: none !important;
}

/* Remove uneeded styles from Proton */
.tabbrowser-tab {
  padding-inline: 0px !important;
}

.tab-background {
  margin-bottom: 0 !important;
  display: flex !important;
}

.tab-background > .tab-context-line {
  flex: 1 !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0px !important;
}

.tabbrowser-tab {
  margin-inline-start: -8px !important;
}

/* Remove container colors */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  background-color: rgba(0,0,0,0) !important;
  height: inherit !important;
  border-radius: 0px !important;
  margin: 0px !important;
}

#new-tab-button > .toolbarbutton-icon,
#tabs-newtab-button > .toolbarbutton-icon {
  fill: rgb(249,249,250) !important;
}
/* End default theme customizations */

/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
  .tabbrowser-tab {
    background-color: transparent !important;
    border: none !important;
  }

  @media (-moz-windows-default-theme) {
    .tabbrowser-tab:not(:-moz-lwtheme) {
      background-color: transparent !important;
      border: none !important;
    }
  }
}

.tabbrowser-tab > .tab-stack > .tab-background {
  background-image: none !important;
  flex-direction: row !important;
  background-color: transparent !important;
  margin-top: 0px !important;
}

.tab-background[selected] {
  border: none !important;
}

.tab-background {
  pointer-events: none !important;
}

.tab-line {
  display: none !important;
}

.tab-bottom-line {
  display: none !important;
}
.tab-label-container{
  height: 2.2em !important;
}
/* Match height of new tab button (right svg) on hover */
#tabs-newtab-button {
  margin: 0 !important;
}

/* overlap the tab curves */
.tab-background {
  -moz-margin-end: -15px !important;
  -moz-margin-start: -15px !important;
}

/* Remove blue animation on tab on page load complete */
.tab-loading-burst {
  display: none !important;
}

/* Begin tab background customizations */
.tab-background[selected]::before {
  border: none !important;
  content: "" !important;
  width: 34px !important;
  min-height: 26px !important;
  display: flex !important;
  background-repeat: no-repeat !important;
}

tabbrowser-tab[pinned="true"][first-visible-tab="true"] .tab-background::before,
.tabbrowser-tab[pinned="true"][first-visible-tab="true"]:hover > .tab-stack > .tab-background:not([selected=true])::before {
  width: 42px !important;
}

.tabbrowser-tab[pinned="true"][first-visible-tab="true"] .tab-content {
  padding: 0px 18px 0px 22px !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: -16px !important;
}

.tab-background[selected]::after {
  border: none !important;
  content: "" !important;
  width: 34px !important;
  min-height: 26px !important;
  display: flex !important;
  background-repeat: no-repeat !important;
}

.tab-background[selected] > spacer {
  margin-top: 0px !important;
}

#new-tab-button,
#tabs-newtab-button {
  width: calc(36px + 30px) !important;
  margin-inline-start: -16px !important;
  margin-top: 1px !important;
}

/* Tab hover customizations */
.close-icon:hover {
  border-radius: 50% !important;
}
 .tab-close-button:hover {
  fill: red !important;
  padding: 3px !important;
} 
.tab-close-button {
	width: 20px !important;
	height: 20px !important;
	padding: 3px !important;
}

/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  display: flex !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 34px !important;
  max-height: 26px !important;
  background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  display: flex !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 34px !important;
  max-height: 26px !important;
  background-color: transparent !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  margin-top: 0px !important;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]),
#tabs-newtab-button:hover,
#tabs-newtab-button:hover::before,
#tabs-newtab-button:hover::after {
  background-color: transparent !important;
}

/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]), #tabs-newtab-button:hover {
  background-position: 0px 2px, 30px 4px , 36px 2px !important;
  background-repeat: no-repeat !important;
  background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}

#tabs-newtab-button:hover > .toolbarbutton-icon {
  background: none !important;
  background-color: transparent !important;
}


/* Color specific customizations */
:root {
  --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='26px' height='27px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='26' height='27' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(249,249,250);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

  --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='26px' height='27px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='26' height='27' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(249, 249, 255);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

  --background-selected-middle:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(
      transparent
      2px,
      rgb(249,249,255) 2px,
      rgb(249,249,255)
    ),
    none;

  --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='26px' height='26px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='26' height='26' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

  --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='26px' height='27px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='26' height='27' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");

  --background-hover-middle:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(
      transparent
      2px,
      rgba(255,255,255,.1) 2px,
      rgba(255,255,255,.1)
    ),
    none;

  --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='26px' height='26px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='26' height='27' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"),
  linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='26px' height='27px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='26' height='27' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
}


/* OS-specific color variables */
@media screen and (-moz-windows-theme) {
  :root {

  }
}

@media not screen and (-moz-windows-theme) {
  :root {

  }
}
  
.tab-background[selected]::before {
  background-image: var(--svg-selected-before) !important;
    background-position: right top;
}

.tab-background[selected]::after {
  background-image: var(--svg-selected-after) !important;
}

.tab-background[selected] > .tab-context-line {
  background-image: var(--background-selected-middle) !important;
}

.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
  box-shadow: none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected])::before {
  background-image: var(--svg-hover-before) !important;
    background-position: right top;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected])::after {
  background-image: var(--svg-hover-after)  !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) > .tab-context-line {
  background-image: var(--background-hover-middle) !important;
}
#tabs-newtab-button:hover {
  background-image: var(--newtab-hover) !important;
  margin-inline-start: -16px !important;
}

/*Белый шрифт и динамик и иконки на неактивных вкладках*/
.tabbrowser-tab:not([visuallyselected="true"], [multiselected]) {
	color: white !important;
}

/*Fix под кнопками управления окном */
 .titlebar-buttonbox-container {
  padding: 0px !important;
  height: 2.0em !important;
  margin-top: 2px !important;
}

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

/*Ширина вкладок*/
.tabbrowser-tab[fadein]:not([pinned]) {
    min-width: 90px !important;
    max-width: 90px !important;
}

/* поднимаем панель с табами выше, чтобы меньше места занимала */
#TabsToolbar{
margin-top: -4px !important;
}

/* Когда много мелких табов при выборе или наведении мыши таб растягивается */
.tabbrowser-tab[fadein][selected]:not([pinned]), .tabbrowser-tab:hover[fadein]:not([pinned])
{
    min-width: 90px !important;
}

/*Покрасить все панели*/
*|*:root {
    --toolbar-non-lwt-bgcolor: #f0f0f0 !important;
    --toolbar-non-lwt-textcolor: black !important;
}
.tabbrowser-tab[multiselected="true"]:not(:-moz-lwtheme),
.tabbrowser-tab[selected]:not(:-moz-lwtheme) {
    --toolbar-bgcolor: white !important;
    color: black !important;
}

/* TabBar reduce Spacer width on the right */
 .titlebar-spacer[type="post-tabs"] {
	 width: 10px !important;
}
 
/* твик иконки воспроизведения на вкладке */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    opacity: 1 !important;
    margin-inline-start: 20px !important;
    margin-inline-end: 2px !important;
}
.tab-icon-overlay[soundplaying] {
	list-style-image: url("chrome://global/skin/media/audio.svg") !important;
}
.tab-icon-overlay[muted] {
	list-style-image: url("chrome://global/skin/media/audio-muted.svg") !important;
}
.tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
    opacity: 1 !important;
}
/* Скрыть надпись "воспроизводится" в режиме обычных и мобильных значков */
.tab-secondary-label {
    display: none !important;
}

Отсутствует

 

№1394011-03-2024 13:44:35

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

egorsemenov06
Системная тема может быть как светлой так и темной я так понял у вас светлая, но с этим стилем и со светлой темой текста не видно он белый.
Исправьте во всех стилях visuallyselected="true" --> visuallyselected
Чтобы текст был черным на активных вкладках можно добавить в  :root {
--tab-selected-textcolor: black !important;

Отсутствует

 

№1394111-03-2024 14:10:06

egorsemenov06
Участник
 
Группа: Members
Зарегистрирован: 12-06-2018
Сообщений: 419
UA: Firefox 123.0

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

Vitaliy V. пишет

egorsemenov06
Системная тема может быть как светлой так и темной я так понял у вас светлая, но с этим стилем и со светлой темой текста не видно он белый.
Исправьте во всех стилях visuallyselected="true" --> visuallyselected
Чтобы текст был черным на активных вкладках можно добавить в  :root {
--tab-selected-textcolor: black !important;

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

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

Выделить код

Код:

:root:not([uidensity="touch"]) {
        --urlbar-min-height: 28px !important;
        --urlbar-icon-padding: 4px !important;
        --urlbar-container-padding: 0px !important;
}
/*скругление адресной строки и строки поиска*/
#urlbar-background,
#urlbar-input-container,
#searchbar {
    border-radius: calc(var(--urlbar-height, 2000px) / 2) !important;
    overflow: -moz-hidden-unscrollable;
	background-clip: padding-box !important;
	border: 1px solid #c9c9c9 !important;
}

/* Уменьшаем высоту адресной и поисковой строки */
#urlbar-container,
#search-container { /* это правило не является обязательным */
    padding: 1px 0 !important;
    margin: 0 1px !important;
}

#urlbar-container[breakout] {
    position: relative !important;
    min-height: (--urlbar-min-height) !important;
}

#urlbar[breakout] {
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    height: var(--urlbar-height) !important;
    top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
    left: 0px !important;
}

#urlbar[breakout] > #urlbar-input-container {
    width: 100% !important;
    height: var(--urlbar-height) !important;
    padding: 0 !important;
    vertical-align: top !important;
}

#urlbar[breakout][breakout-extend],
#urlbar[breakout][breakout-extend-disabled][open] {
    height: auto !important;
}

#urlbar[breakout] > #urlbar-background {
    animation: none !important;
    inset-inline-start: 0 !important;
    box-shadow: none !important;
    height: var(--urlbar-height) !important;
    top: 0px !important;
    bottom: auto !important;
}

#urlbar[breakout] > .urlbarView {
    margin: 0 !important;
    width: 100% !important;
    border-bottom-left-radius: var(--toolbarbutton-border-radius, 4px) !important;
    border-bottom-right-radius: var(--toolbarbutton-border-radius, 4px) !important;
    color: var(--autocomplete-popup-color, var(--arrowpanel-color, rgba(12, 12, 13, 1))) !important;
    background: var(--autocomplete-popup-background, var(--arrowpanel-background, rgb(255, 255, 255))) !important;
    border: 1px solid var(--panel-separator-color, var(--arrowpanel-border-color, rgba(24,26,27,.14))) !important;
}

*|*:root[lwt-popup-brighttext] #urlbar[breakout] > .urlbarView {
    color: var(--autocomplete-popup-color, var(--arrowpanel-color, rgb(177,177,179))) !important;
    background: var(--autocomplete-popup-background, var(--arrowpanel-background, rgb(27,27,29))) !important;
    border: 1px solid var(--panel-separator-color, var(--arrowpanel-border-color, rgba(249,249,250,.1))) !important;
}

#urlbar[breakout] > .urlbarView *|*.urlbarView-body-inner {
    border: none !important;
}

#urlbar[breakout] > #urlbar-input-container > #urlbar-search-icon {
    fill: currentColor !important;
    fill-opacity: .6 !important;
}

*|*:root #urlbar > .urlbarView {
    border-bottom-left-radius: calc(var(--urlbar-height) / 2) !important;
    border-bottom-right-radius: calc(var(--urlbar-height) / 2) !important;
}

/* Прозрачность */
#urlbar > .urlbarView, #urlbar-results,  panel[type="autocomplete-richlistbox"], #PopupSearchAutoComplete {
	--urlbarView-hover-background: rgba(255,255,255,0.1) !important;
    --arrowpanel-dimmed: rgba(255,255,255,0.1) !important;
    --arrowpanel-dimmed-further: Highlight !important;
    --arrowpanel-dimmed-even-further: transparent !important;
    --panel-separator-color: rgba(250,250,255,0.3) !important;
    --chrome-content-separator-color: rgba(250,250,255,0.3) !important;
    --arrowpanel-border-color: rgba(250,250,255,0.3) !important;
    --arrowpanel-background: rgba(10,10,15,0.6) !important;
    --autocomplete-popup-background: rgba(10,10,15,0.6) !important;
    --autocomplete-popup-color: rgb(240,240,245) !important;
    --arrowpanel-color: rgb(240,240,245) !important;
    --panel-disabled-color: rgb(190,190,195) !important;
    --urlbar-popup-url-color: LightSkyBlue !important;
    --urlbar-popup-action-color: Aquamarine !important;
    border: 1px solid var(--chrome-content-separator-color) !important;
}
#urlbar.megabar {
    background-color: rgba(10,10,15,0.6) !important;
    color: rgb(240,240,245) !important;
}

panel[type="autocomplete-richlistbox"] {
    --panel-background: var(--autocomplete-popup-background) !important;
    --panel-color: var(--autocomplete-popup-color) !important;
    border-color: var(--arrowpanel-border-color) !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox {
    background: transparent !important;
    color: inherit !important;
    margin: 0 !important;
}

panel#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
    color: var(--autocomplete-popup-color) !important;
    border-top-color: var(--chrome-content-separator-color) !important;
    background-color: var(--arrowpanel-dimmed) !important;
}

panel#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover,
panel#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] {
    background-color: Highlight !important;
    color: HighlightText !important;
}

/*Вернуть разделители в строки поиска и urlbar между поисковыми системами*/
.searchbar-engine-one-off-item:not(#urlbar-anon-search-settings-compact) {
    background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
    background-size: 1px auto;
    background-repeat: no-repeat;
    background-position: right center;
    background-clip: padding-box;
    color: var(--panel-disabled-color);
}
.searchbar-engine-one-off-item:not(#urlbar-anon-search-settings-compact),
.search-panel-one-offs-header {
    border-bottom: 1px solid var(--panel-separator-color);
}
.search-panel-one-offs {
    height: auto !important;
}
.search-one-offs .searchbar-separator {
    display: none;
}
#PopupSearchAutoComplete {
    padding-bottom: 0 !important;
}
.search-setting-button {
    border-top: none !important;
}
#urlbar .searchbar-engine-one-off-item {
    margin-inline-end: 0 !important;
}
#urlbar .search-one-offs {
    padding-bottom: 0 !important;
}
#urlbar .search-panel-header {
    display: none !important;
}
#urlbar .search-one-offs {
    padding-block: 0 !important;
}

Отредактировано egorsemenov06 (11-03-2024 16:52:41)

Отсутствует

 

№1394212-03-2024 14:43:57

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

egorsemenov06 пишет

А еще как сделать белую адресную и поисковую строки  с голубой обводкой как в светлой так и в темной теме без этих шторок

Так какой темой пользуетесь светлой или темной? Зачем делать везде одинаково не пойму если вы хотите из темной темы сделать светлую я пас.
И что шторками называете, без них это как? Если уж изменяете цвета в стилях (хотя это темы должны делать) то можно использовать функцию  light-dark()
она возвращает первое значение для светлой темы и второе для темной, например
background-color: light-dark(rgba(255,255,255,0.8), rgba(10,10,15,0.6)) !important;

Отсутствует

 

№1394312-03-2024 15:09:52

egorsemenov06
Участник
 
Группа: Members
Зарегистрирован: 12-06-2018
Сообщений: 419
UA: Firefox 123.0

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

Vitaliy V. пишет
egorsemenov06 пишет

А еще как сделать белую адресную и поисковую строки  с голубой обводкой как в светлой так и в темной теме без этих шторок

Так какой темой пользуетесь светлой или темной? Зачем делать везде одинаково не пойму если вы хотите из темной темы сделать светлую я пас.
И что шторками называете, без них это как? Если уж изменяете цвета в стилях (хотя это темы должны делать) то можно использовать функцию  light-dark()
она возвращает первое значение для светлой темы и второе для темной, например
background-color: light-dark(rgba(255,255,255,0.8), rgba(10,10,15,0.6)) !important;

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

Отредактировано egorsemenov06 (12-03-2024 15:11:09)

Отсутствует

 

№1394412-03-2024 19:54:16

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

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

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

Выделить код

Код:

:root {
    --urlbar-min-height: max(28px, 1.4em) !important;
    --urlbar-icon-padding: 4px !important;
    --urlbar-container-padding: 0px !important;
    --urlbar-icon-border-radius: 0px !important;
    --urlbar-margin-inline: 1px !important;
    --focus-outline-width: 1px !important;
    --v-urlbar-searchbar-border-radius: calc(var(--urlbar-min-height) / 2);
}
:root[uidensity=touch] {
    --urlbar-min-height: max(34px, 1.4em) !important;
    --urlbar-margin-inline: 5px !important;
}

#urlbar-container,
#search-container {
    padding: 1px 0 !important;
    margin: 0 var(--urlbar-margin-inline) !important;
    &[breakout] {
        position: relative !important;
        min-height: var(--urlbar-container-height) !important;
    }
    #urlbar, #searchbar {
        min-height: var(--urlbar-min-height) !important;
        font-size: 1em !important;
        box-shadow: none !important;
        align-items: stretch !important;
        .searchbar-search-icon {
            margin-inline-start: 6px !important;
        }
        #urlbar-input-container, #urlbar-background, #search-container & {
            box-shadow: none !important;
            background-clip: border-box !important;
            border-radius: var(--v-urlbar-searchbar-border-radius) !important;
            overflow: clip;
        }
        &:not([focused], :focus-within) input {
            mask-image: linear-gradient(to left, transparent, black 3ch);
            mask-repeat: no-repeat;
        }
        &:not([focused], :focus-within):-moz-locale-dir(rtl) input {
            mask-image: linear-gradient(to right, transparent, black 3ch);
        }
    }
    #urlbar {
        #identity-icon-box,
        #identity-box {
            max-width: calc(30px + 15em) !important;
        }
        &[breakout] {
            display: block !important;
            position: absolute !important;
            width: 100% !important;
            height: var(--urlbar-height) !important;
            top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
            inset-inline: 0px !important;
        }
        &[breakout] > #urlbar-input-container {
            width: 100% !important;
            height: var(--urlbar-height) !important;
            padding: 0 !important;
        }
        &[breakout][breakout-extend],
        &[breakout][breakout-extend-disabled][open] {
            height: auto !important;
        }
        &[breakout] > #urlbar-background {
            display: block !important;
            position: absolute !important;
            animation: none !important;
            inset-inline: 0 !important;
            box-shadow: none !important;
            height: var(--urlbar-height) !important;
            top: 0px !important;
            bottom: auto !important;
        }
        &[breakout][open] > #urlbar-background {
            border-color: var(--toolbar-field-border-color, transparent) !important;
        }
        &[breakout][focused="true"] > #urlbar-background {
            border-color: var(--toolbar-field-focus-border-color, Highlight) !important;
        }
        &[breakout] > .urlbarView {
            margin: 0 !important;
            width: 100% !important;
            border-radius: var(--v-urlbar-searchbar-border-radius) !important;
            background: var(--toolbar-field-focus-background-color, Field) !important;
            color: var(--toolbar-field-focus-color, FieldText) !important;
            border: 1px solid var(--arrowpanel-border-color, ThreeDShadow) !important;
            border-top: none !important;
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
            .searchbar-engine-one-off-item {
                margin: 0 !important;
                min-width: 28px !important;
                height: 28px !important;
                &:not(.search-setting-button)::after {
                    content: "";
                    border-inline-end: 1px solid;
                    border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
                }
            }
            .search-panel-one-offs-container {
                min-width: calc(5 * 28px) !important;
            }
        }
        &[breakout] > .urlbarView .urlbarView-body-inner {
            border: none !important;
        }
        &[breakout] > #urlbar-input-container > #urlbar-search-icon {
            fill: currentColor !important;
            fill-opacity: .6 !important;
        }
        &[breakout] > .urlbarView .search-one-offs,
        &[breakout] > .urlbarView .urlbarView-results {
            padding-block: 0 !important;
        }
    }
}
#PopupSearchAutoComplete {
    --panel-subview-body-padding: 0 !important;
    --panel-padding: 0 !important;
    --panel-border-radius: var(--v-urlbar-searchbar-border-radius) !important;
    --panel-shadow-margin: 14px !important;
    --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
    & > .search-panel-current-engine {
        margin-top: 0px !important;
        padding-inline: 6px !important;
    }
    & > menuseparator.searchbar-separator {
        display: none !important;
    }
    & > .search-one-offs:not([hidden]) {
        border-top: 1px solid var(--urlbarView-separator-color);
        display: flex !important;
        align-items: start !important;
        flex-wrap: wrap !important;
    }
    .search-panel-one-offs-container {
        min-width: calc(5 * 28px) !important;
    }
    .searchbar-engine-one-off-item {
        margin: 0 !important;
        min-width: 28px !important;
        height: 28px !important;
        &:not(.search-setting-button)::after {
            content: "";
            border-inline-end: 1px solid;
            border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
        }
    }
}
#urlbar-search-splitter {
    min-width: 6px !important;
    width: 6px !important;
    margin: 0 -3px !important;
}

А все цвета меняйте здесь как надо

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

Выделить код

Код:

:root {
    --toolbar-field-background-color: rgb(240, 240, 244) !important;
    --toolbar-field-color: rgb(21, 20, 26) !important;
    --toolbar-field-border-color: color-mix(in srgb, currentColor 20%, transparent) !important;
    --toolbar-field-focus-background-color: rgb(255,255,255) !important;
    --toolbar-field-focus-color: rgb(21, 20, 26) !important;
    --toolbar-field-focus-border-color: rgb(0, 97, 224) !important;
}
#urlbar > .urlbarView, #PopupSearchAutoComplete {
    --urlbarView-hover-background: color-mix(in srgb, currentColor 17%, transparent) !important;
    --urlbarView-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important;
    --toolbar-field-focus-background-color: light-dark(rgb(255,255,255), rgba(10,10,15,0.6)) !important;
    --link-color: light-dark(rgb(0, 97, 224), rgb(41, 148, 255)) !important;
    --toolbar-field-focus-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)) !important;
}
panel[type="autocomplete-richlistbox"] {
    --panel-background: light-dark(rgb(255,255,255), rgba(10,10,15,0.6)) !important;
    --panel-shadow-margin: 14px !important;
    --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
}

Отсутствует

 

№1394512-03-2024 21:46:29

egorsemenov06
Участник
 
Группа: Members
Зарегистрирован: 12-06-2018
Сообщений: 419
UA: Firefox 123.0

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

Vitaliy V. пишет

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

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

Выделить код

Код:

:root {
    --urlbar-min-height: max(28px, 1.4em) !important;
    --urlbar-icon-padding: 4px !important;
    --urlbar-container-padding: 0px !important;
    --urlbar-icon-border-radius: 0px !important;
    --urlbar-margin-inline: 1px !important;
    --focus-outline-width: 1px !important;
    --v-urlbar-searchbar-border-radius: calc(var(--urlbar-min-height) / 2);
}
:root[uidensity=touch] {
    --urlbar-min-height: max(34px, 1.4em) !important;
    --urlbar-margin-inline: 5px !important;
}

#urlbar-container,
#search-container {
    padding: 1px 0 !important;
    margin: 0 var(--urlbar-margin-inline) !important;
    &[breakout] {
        position: relative !important;
        min-height: var(--urlbar-container-height) !important;
    }
    #urlbar, #searchbar {
        min-height: var(--urlbar-min-height) !important;
        font-size: 1em !important;
        box-shadow: none !important;
        align-items: stretch !important;
        .searchbar-search-icon {
            margin-inline-start: 6px !important;
        }
        #urlbar-input-container, #urlbar-background, #search-container & {
            box-shadow: none !important;
            background-clip: border-box !important;
            border-radius: var(--v-urlbar-searchbar-border-radius) !important;
            overflow: clip;
        }
        &:not([focused], :focus-within) input {
            mask-image: linear-gradient(to left, transparent, black 3ch);
            mask-repeat: no-repeat;
        }
        &:not([focused], :focus-within):-moz-locale-dir(rtl) input {
            mask-image: linear-gradient(to right, transparent, black 3ch);
        }
    }
    #urlbar {
        #identity-icon-box,
        #identity-box {
            max-width: calc(30px + 15em) !important;
        }
        &[breakout] {
            display: block !important;
            position: absolute !important;
            width: 100% !important;
            height: var(--urlbar-height) !important;
            top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
            inset-inline: 0px !important;
        }
        &[breakout] > #urlbar-input-container {
            width: 100% !important;
            height: var(--urlbar-height) !important;
            padding: 0 !important;
        }
        &[breakout][breakout-extend],
        &[breakout][breakout-extend-disabled][open] {
            height: auto !important;
        }
        &[breakout] > #urlbar-background {
            display: block !important;
            position: absolute !important;
            animation: none !important;
            inset-inline: 0 !important;
            box-shadow: none !important;
            height: var(--urlbar-height) !important;
            top: 0px !important;
            bottom: auto !important;
        }
        &[breakout][open] > #urlbar-background {
            border-color: var(--toolbar-field-border-color, transparent) !important;
        }
        &[breakout][focused="true"] > #urlbar-background {
            border-color: var(--toolbar-field-focus-border-color, Highlight) !important;
        }
        &[breakout] > .urlbarView {
            margin: 0 !important;
            width: 100% !important;
            border-radius: var(--v-urlbar-searchbar-border-radius) !important;
            background: var(--toolbar-field-focus-background-color, Field) !important;
            color: var(--toolbar-field-focus-color, FieldText) !important;
            border: 1px solid var(--arrowpanel-border-color, ThreeDShadow) !important;
            border-top: none !important;
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
            .searchbar-engine-one-off-item {
                margin: 0 !important;
                min-width: 28px !important;
                height: 28px !important;
                &:not(.search-setting-button)::after {
                    content: "";
                    border-inline-end: 1px solid;
                    border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
                }
            }
            .search-panel-one-offs-container {
                min-width: calc(5 * 28px) !important;
            }
        }
        &[breakout] > .urlbarView .urlbarView-body-inner {
            border: none !important;
        }
        &[breakout] > #urlbar-input-container > #urlbar-search-icon {
            fill: currentColor !important;
            fill-opacity: .6 !important;
        }
        &[breakout] > .urlbarView .search-one-offs,
        &[breakout] > .urlbarView .urlbarView-results {
            padding-block: 0 !important;
        }
    }
}
#PopupSearchAutoComplete {
    --panel-subview-body-padding: 0 !important;
    --panel-padding: 0 !important;
    --panel-border-radius: var(--v-urlbar-searchbar-border-radius) !important;
    --panel-shadow-margin: 14px !important;
    --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
    & > .search-panel-current-engine {
        margin-top: 0px !important;
        padding-inline: 6px !important;
    }
    & > menuseparator.searchbar-separator {
        display: none !important;
    }
    & > .search-one-offs:not([hidden]) {
        border-top: 1px solid var(--urlbarView-separator-color);
        display: flex !important;
        align-items: start !important;
        flex-wrap: wrap !important;
    }
    .search-panel-one-offs-container {
        min-width: calc(5 * 28px) !important;
    }
    .searchbar-engine-one-off-item {
        margin: 0 !important;
        min-width: 28px !important;
        height: 28px !important;
        &:not(.search-setting-button)::after {
            content: "";
            border-inline-end: 1px solid;
            border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
        }
    }
}
#urlbar-search-splitter {
    min-width: 6px !important;
    width: 6px !important;
    margin: 0 -3px !important;
}

А все цвета меняйте здесь как надо

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

Выделить код

Код:

:root {
    --toolbar-field-background-color: rgb(240, 240, 244) !important;
    --toolbar-field-color: rgb(21, 20, 26) !important;
    --toolbar-field-border-color: color-mix(in srgb, currentColor 20%, transparent) !important;
    --toolbar-field-focus-background-color: rgb(255,255,255) !important;
    --toolbar-field-focus-color: rgb(21, 20, 26) !important;
    --toolbar-field-focus-border-color: rgb(0, 97, 224) !important;
}
#urlbar > .urlbarView, #PopupSearchAutoComplete {
    --urlbarView-hover-background: color-mix(in srgb, currentColor 17%, transparent) !important;
    --urlbarView-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important;
    --toolbar-field-focus-background-color: light-dark(rgb(255,255,255), rgba(10,10,15,0.6)) !important;
    --link-color: light-dark(rgb(0, 97, 224), rgb(41, 148, 255)) !important;
    --toolbar-field-focus-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)) !important;
}
panel[type="autocomplete-richlistbox"] {
    --panel-background: light-dark(rgb(255,255,255), rgba(10,10,15,0.6)) !important;
    --panel-shadow-margin: 14px !important;
    --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
}

ОГРОМНЕЙШЕЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО ВАМ!!!!!!!!!

Отсутствует

 

№1394613-03-2024 04:24:05

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1166
UA: Firefox 123.0

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

Извините за вопрос не по теме.
А есть редактор, в котором можно этот новый формат стилей вернуть к старому виду? Я и так мало что понимаю, а тут сплошные амперсанды. Надо в голове держать начало, потом добавлять, что за амперсандом без амперсанда...
У меня голова старая, и компьютер старый. Я так не могу. Мне нужна одна команда строчкой, другая и т.д. Иначе как свои старые стили править?

Отредактировано xrun1 (13-03-2024 04:26:07)

Отсутствует

 

№1394716-03-2024 09:06:59

f480185
Участник
 
Группа: Members
Зарегистрирован: 05-04-2012
Сообщений: 155
UA: Firefox 51.0

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

Всем привет.
Подскажите,пожалуйста,как можно добавить пункт меню в раздел Файл возможность добавить "Отправить ярлык на рабочий стол"
115 [firefox] WIN10

Отредактировано f480185 (16-03-2024 09:09:36)

Отсутствует

 

№1394816-03-2024 18:20:12

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2123
UA: Firefox 124.0

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

xrun1 пишет

А есть редактор, в котором можно этот новый формат стилей вернуть к старому виду?

Насчет [windows] не в курсе, можно попробовать Visual Studio Code там поищите расширения sass/scss (сам не пробовал подобные расширения)
В Arch Linux хорошо работает такая консольная утилита

скрытый текст
Screenshot-20240316-174457.png

В терминале выполнить команду
sassc -t expanded input.css output.css
и из input.css на выходе получим expanded стиль. Возможные значения Output style: nested, expanded, compact, compressed

Ну как хорошо, вот стиль выше преобразованный данной утилитой

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

Выделить код

Код:

:root {
  --urlbar-min-height: max(28px, 1.4em) !important;
  --urlbar-icon-padding: 4px !important;
  --urlbar-container-padding: 0px !important;
  --urlbar-icon-border-radius: 0px !important;
  --urlbar-margin-inline: 1px !important;
  --focus-outline-width: 1px !important;
  --v-urlbar-searchbar-border-radius: calc(var(--urlbar-min-height) / 2);
}

:root[uidensity=touch] {
  --urlbar-min-height: max(34px, 1.4em) !important;
  --urlbar-margin-inline: 5px !important;
}

#urlbar-container,
#search-container {
  padding: 1px 0 !important;
  margin: 0 var(--urlbar-margin-inline) !important;
}

#urlbar-container[breakout],
#search-container[breakout] {
  position: relative !important;
  min-height: var(--urlbar-container-height) !important;
}

#urlbar-container #urlbar, #urlbar-container #searchbar,
#search-container #urlbar,
#search-container #searchbar {
  min-height: var(--urlbar-min-height) !important;
  font-size: 1em !important;
  box-shadow: none !important;
  align-items: stretch !important;
}

#urlbar-container #urlbar .searchbar-search-icon, #urlbar-container #searchbar .searchbar-search-icon,
#search-container #urlbar .searchbar-search-icon,
#search-container #searchbar .searchbar-search-icon {
  margin-inline-start: 6px !important;
}

#urlbar-container #urlbar #urlbar-input-container, #urlbar-container #urlbar #urlbar-background, #search-container #urlbar-container #urlbar, #urlbar-container #searchbar #urlbar-input-container, #urlbar-container #searchbar #urlbar-background, #search-container #urlbar-container #searchbar,
#search-container #urlbar #urlbar-input-container,
#search-container #urlbar #urlbar-background, #search-container #search-container #urlbar,
#search-container #searchbar #urlbar-input-container,
#search-container #searchbar #urlbar-background, #search-container #search-container #searchbar {
  box-shadow: none !important;
  background-clip: border-box !important;
  border-radius: var(--v-urlbar-searchbar-border-radius) !important;
  overflow: clip;
}

#urlbar-container #urlbar:not([focused], :focus-within) input, #urlbar-container #searchbar:not([focused], :focus-within) input,
#search-container #urlbar:not([focused], :focus-within) input,
#search-container #searchbar:not([focused], :focus-within) input {
  mask-image: linear-gradient(to left, transparent, black 3ch);
  mask-repeat: no-repeat;
}

#urlbar-container #urlbar:not([focused], :focus-within):-moz-locale-dir(rtl) input, #urlbar-container #searchbar:not([focused], :focus-within):-moz-locale-dir(rtl) input,
#search-container #urlbar:not([focused], :focus-within):-moz-locale-dir(rtl) input,
#search-container #searchbar:not([focused], :focus-within):-moz-locale-dir(rtl) input {
  mask-image: linear-gradient(to right, transparent, black 3ch);
}

#urlbar-container #urlbar #identity-icon-box,
#urlbar-container #urlbar #identity-box,
#search-container #urlbar #identity-icon-box,
#search-container #urlbar #identity-box {
  max-width: calc(30px + 15em) !important;
}

#urlbar-container #urlbar[breakout],
#search-container #urlbar[breakout] {
  display: block !important;
  position: absolute !important;
  width: 100% !important;
  height: var(--urlbar-height) !important;
  top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
  inset-inline: 0px !important;
}

#urlbar-container #urlbar[breakout] > #urlbar-input-container,
#search-container #urlbar[breakout] > #urlbar-input-container {
  width: 100% !important;
  height: var(--urlbar-height) !important;
  padding: 0 !important;
}

#urlbar-container #urlbar[breakout][breakout-extend], #urlbar-container #urlbar[breakout][breakout-extend-disabled][open],
#search-container #urlbar[breakout][breakout-extend],
#search-container #urlbar[breakout][breakout-extend-disabled][open] {
  height: auto !important;
}

#urlbar-container #urlbar[breakout] > #urlbar-background,
#search-container #urlbar[breakout] > #urlbar-background {
  display: block !important;
  position: absolute !important;
  animation: none !important;
  inset-inline: 0 !important;
  box-shadow: none !important;
  height: var(--urlbar-height) !important;
  top: 0px !important;
  bottom: auto !important;
}

#urlbar-container #urlbar[breakout][open] > #urlbar-background,
#search-container #urlbar[breakout][open] > #urlbar-background {
  border-color: var(--toolbar-field-border-color, transparent) !important;
}

#urlbar-container #urlbar[breakout][focused="true"] > #urlbar-background,
#search-container #urlbar[breakout][focused="true"] > #urlbar-background {
  border-color: var(--toolbar-field-focus-border-color, Highlight) !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView,
#search-container #urlbar[breakout] > .urlbarView {
  margin: 0 !important;
  width: 100% !important;
  border-radius: var(--v-urlbar-searchbar-border-radius) !important;
  background: var(--toolbar-field-focus-background-color, Field) !important;
  color: var(--toolbar-field-focus-color, FieldText) !important;
  border: 1px solid var(--arrowpanel-border-color, ThreeDShadow) !important;
  border-top: none !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
}

#urlbar-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item,
#search-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item {
  margin: 0 !important;
  min-width: 28px !important;
  height: 28px !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item:not(.search-setting-button)::after,
#search-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item:not(.search-setting-button)::after {
  content: "";
  border-inline-end: 1px solid;
  border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
}

#urlbar-container #urlbar[breakout] > .urlbarView .search-panel-one-offs-container,
#search-container #urlbar[breakout] > .urlbarView .search-panel-one-offs-container {
  min-width: calc(5 * 28px) !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView .urlbarView-body-inner,
#search-container #urlbar[breakout] > .urlbarView .urlbarView-body-inner {
  border: none !important;
}

#urlbar-container #urlbar[breakout] > #urlbar-input-container > #urlbar-search-icon,
#search-container #urlbar[breakout] > #urlbar-input-container > #urlbar-search-icon {
  fill: currentColor !important;
  fill-opacity: .6 !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView .search-one-offs, #urlbar-container #urlbar[breakout] > .urlbarView .urlbarView-results,
#search-container #urlbar[breakout] > .urlbarView .search-one-offs,
#search-container #urlbar[breakout] > .urlbarView .urlbarView-results {
  padding-block: 0 !important;
}

#PopupSearchAutoComplete {
  --panel-subview-body-padding: 0 !important;
  --panel-padding: 0 !important;
  --panel-border-radius: var(--v-urlbar-searchbar-border-radius) !important;
  --panel-shadow-margin: 14px !important;
  --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
}

#PopupSearchAutoComplete > .search-panel-current-engine {
  margin-top: 0px !important;
  padding-inline: 6px !important;
}

#PopupSearchAutoComplete > menuseparator.searchbar-separator {
  display: none !important;
}

#PopupSearchAutoComplete > .search-one-offs:not([hidden]) {
  border-top: 1px solid var(--urlbarView-separator-color);
  display: flex !important;
  align-items: start !important;
  flex-wrap: wrap !important;
}

#PopupSearchAutoComplete .search-panel-one-offs-container {
  min-width: calc(5 * 28px) !important;
}

#PopupSearchAutoComplete .searchbar-engine-one-off-item {
  margin: 0 !important;
  min-width: 28px !important;
  height: 28px !important;
}

#PopupSearchAutoComplete .searchbar-engine-one-off-item:not(.search-setting-button)::after {
  content: "";
  border-inline-end: 1px solid;
  border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
}

#urlbar-search-splitter {
  min-width: 6px !important;
  width: 6px !important;
  margin: 0 -3px !important;
}


Но как видно в некоторых случаях все равно надо редактировать вручную

f480185 пишет

Подскажите,пожалуйста,как можно добавить пункт меню в раздел Файл

Это не та тема, стилями не добавляют пункты, кнопки и т.д.

Отредактировано Vitaliy V. (16-03-2024 18:35:01)

Отсутствует

 

№1394916-03-2024 19:23:54

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1166
UA: Firefox 123.0

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

Vitaliy V.
Спасибо. Значит, придётся привыкать.
Скачал Visual Studio Code, попробую.

Отсутствует

 

№1395017-03-2024 00:31:38

_zt
Участник
 
Группа: Members
Зарегистрирован: 10-11-2014
Сообщений: 1496
UA: Firefox 115.0

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

Vitaliy V.
Как это работает?

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

Выделить код

Код:

#PopupSearchAutoComplete {
    --panel-shadow: ... !important;
    & > .search-panel-current-engine {
        margin-top: ... !important;
    }
    .search-panel-one-offs-container {
        min-width: ... !important;
    }
    .searchbar-engine-one-off-item {
        margin: ... !important;
        &:not(.search-setting-button)::after {
            content: "";
        }
    }
}


Амперсанд точно заменяет корневой селектор, а вложенные селекторы (без амперсанда) добавляются к корневому селектору через пробел?
Т.е. код выше равен коду ниже?
скрытый текст

Выделить код

Код:

#PopupSearchAutoComplete {
    --panel-shadow: ... !important;
}
#PopupSearchAutoComplete > .search-panel-current-engine {
        margin-top: ... !important;
}
#PopupSearchAutoComplete .search-panel-one-offs-container {
        min-width: ... !important;
}
#PopupSearchAutoComplete .searchbar-engine-one-off-item {
        margin: ... !important;
}
#PopupSearchAutoComplete .searchbar-engine-one-off-item:not(.search-setting-button)::after {
            content: "";
}

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]