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

egorsemenov06 · №13926

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

b0ttle · №13927

egorsemenov06, у меня так.

Код:

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

Vitaliy V. · №13928

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)

egorsemenov06 · №13929

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 +

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

6e73epo · №13930

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

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

Vitaliy V. · №13931

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

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

xrun1 · №13932

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)

egorsemenov06 · №13933

xrun1 пишет

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

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

6e73epo · №13934

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)

Vitaliy V. · №13935

6e73epo пишет

data:image

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

xrun1 пишет

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

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

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

xrun1 · №13936

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

6e73epo · №13937

Vitaliy V. пишет

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

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

Vitaliy V. · №13938

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)

egorsemenov06 · №13939

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

Vitaliy V. · №13940

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

egorsemenov06 · №13941

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)

Vitaliy V. · №13942

egorsemenov06 пишет

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

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

egorsemenov06 · №13943

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)

Vitaliy V. · №13944

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

egorsemenov06 · №13945

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

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

xrun1 · №13946

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

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

f480185 · №13947

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

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

Vitaliy V. · №13948

xrun1 пишет

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

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

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

В терминале выполнить команду
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)

xrun1 · №13949

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

_zt · №13950

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

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

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