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

sandro79 · №6201

Vitaliy V.
Понял, спасибо. Пока неработающие стили отключил.

Основная, на которой пока сижу 58 версия. К nightly непонятный интерес возник после выхода квантум, раньше ей не пользовался.
Интересно как-бы посмотреть что там разработчики нового придумали за ночь.

tom911 · №6202

Можно ли панель табов сделать прозрачной или с эффектом размытия?

_zt · №6203

tom911
Она и так прозрачная, на системах с AeroGlass.

Dumby · №6204

egorsemenov06 пишет

grh1
Здравствуте выложите пожалуйста код для для внешнего скругления вкладок не будьте таким мелочным я уверен что многие скажут вам спасибо

На photon-australis похоже.

solombala · №6205

egorsemenov06 пишет

Здравствуте выложите пожалуйста код для для внешнего скругления вкладок не будьте таким мелочным я уверен что многие скажут вам спасибо

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

Выделить код

Код:

/* tab top border roundness */
#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
  border-top-left-radius: var(--default_tab_border_roundness) !important;
  border-top-right-radius: var(--default_tab_border_roundness) !important;
}

Радиусы можно свои , типа, 3-4px;

solombala · №6206

egorsemenov06
tab {background-color: #?????? !important; color: #?????? !important;}
Ну и накой спрашивать, если коды уже есть?
Второе:

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

Выделить код

Код:

toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-badge-stack {
     
     fill-opacity: 1 !important;
     color: inherit;
     fill: orange !important;
}

toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
  
  transition-duration: 10ms;
  fill: #00ffff !important;
  fill-opacity: 0.5 !important;
}

toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
  
  fill: blue !important;
  fill-opacity: 1 !important;
  color: inherit;                                                    
}

Отредактировано solombala (31-07-2019 19:48:29)

solombala · №6207

egorsemenov06

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

Выделить код

Код:

toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active) > .toolbarbutton-badge-stack {
     
     fill-opacity: 1 !important;
     color: inherit;
     fill: #d6dde5 !important;
}

css · №6208

rubel пишет

В Firefox 68 пропало контекстное меню страницы с прописанными иконками, которое работало в 55-67 версиях, типа

Та же фигня. Конкретно этот код

Выделить код

Код:

menupopup menuitem:not([type="checkbox"]):not([type="radio"])
{-moz-binding:url("chrome://global/content/bindings/menu.xml#menuitem-iconic") !important;-moz-image-region:auto !important;

Убивает контекстное меню. Если его закомментировать, меню работает, но без иконок. А их надо бы, я с ними легче ориентируюсь. Есть какая-то альтернатива?

rubel · №6209

css пишет

Убивает контекстное меню. Если его закомментировать, меню работает, но без иконок. А их надо бы, я с ними легче ориентируюсь. Есть какая-то альтернатива?

Я просто в omni.ja\chrome\toolkit\content\global\bindings\ вставил файл menu.xml из 67-ой
версии Firefox и все прекрасно работает

grh1 · №6210

egorsemenov06

egorsemenov06 пишет

grh1
Здравствуте выложите пожалуйста код для для внешнего скругления вкладок не будьте таким мелочным я уверен что многие скажут вам спасибо

Знать бы еще где эти коды... Я начинающий пользователь всяких кодов, разбираюсь.
Откуда взял userChrome.css с такими вкладками - хз, но в нем вот такой код:

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

Выделить код

Код:

:root {
  --tab-curve-width: 30px;
  --tabs-border: transparent !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;
}

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

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

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

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

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

/* 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;
  -moz-box-orient: horizontal !important;
  background-color: transparent !important;
  margin-top: 1px !important;
}

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

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

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

.tab-bottom-line {
  display: none !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="true"]::before {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}

.tab-background[selected="true"]::after {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}

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

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

/* Tab hover customizations */
.close-icon:hover {
  border-radius: 50% !important;
}

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

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  display: -moz-box !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 30px !important;
  max-height: 30px !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="true"]),
.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="true"]), .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='30px' height='31px' 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='30' height='31' 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='30px' height='31px' 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='30' height='31' 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='30px' height='30px' 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='30' height='30' 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='30px' height='31px' 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='30' height='31' 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='30px' height='30px' 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='30' height='31' 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='30px' height='31px' 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='30' height='31' 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="true"]::before {
  background-image: var(--svg-selected-before) !important;
}

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

.tab-background[selected="true"] > spacer {
  background-image: var(--background-selected-middle) !important;

}

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

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

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  background-image: var(--background-hover-middle) !important;

}

.tabs-newtab-button:hover {
  background-image: var(--newtab-hover) !important;
}

А кто кому в этом коде рабинович уж и не знаю.

grh1 · №6211

egorsemenov06

мой вопрос, кстати, так и остался открытым.
Сейчас взял уже Ваш код, поменял в нем цвет с такого: rgb(245,246,247) на такой: 104,246,247

получил вот так:

а как сделать, чтобы было вот так:

css · №6212

rubel пишет

Я просто в omni.ja\chrome\toolkit\content\global\bindings\ вставил файл menu.xml из 67-ой
версии Firefox и все прекрасно работает

О! Поделитесь, пожалуйста, файликом, если не сложно.

rubel · №6213

css
А что у Вас нет 67-ой версии Firefox ? Оттуда извлеките и поместите в 68 Firefox.
Ну если нет, то вот:
https://www114.zippyshare.com/v/Sgl6KYSr/file.html]menu.xml

css · №6214

rubel, огромное спасибо! Иконки вернулись.
А дистрибутива 67 [firefox] у меня нет. И где скачать вчера не нашла, только несколько сомнительных источников.

kokoss · №6215

css пишет

rubel, огромное спасибо! Иконки вернулись.

Только если не отключено обновление браузера, то при каждом обновлении [firefox] придётся по новой добавлять этот файл в...

Отредактировано kokoss (01-08-2019 14:45:30)

rubel · №6216

css
Вообще-то абсолютно все версии Firefox лежат здесь. :offtopic:
kokoss
Я много чего добавляю в новые версии из старых. Обновлениями никогда не пользовался, только заново с добавлением нужного
из старого. Зато все хорошо и ничего не пропадает, как многие жалуются, что после обновления заимели различные проблемы.

css · №6217

kokoss пишет

Только если не отключено обновление браузера

Конечно, отключено. Всё в ручном режиме обновляется.
rubel, ещё раз спасибо! Буду знать. Ссылку прикопала.

grh1 · №6218

egorsemenov06
мистика какая-то - я так и менял (только менял 245 на 104), но результат был как у меня на скриншоте.
а когда вставил блоком, результат стал как нужно. в чем прикол?

но всё-равно спасибо.

P.S. А как убрать синий фон и сделать прозрачность как у Вас?

Отредактировано grh1 (01-08-2019 19:47:45)

ofizer · №6219

css
С версиями всё проще:

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

https://mozilla-russia.org/products/fir … story.html

css · №6220

ofizer, я находила этот склад, но там, вроде, нет 67й для вин. Или я не нашла.

grh1 · №6221

egorsemenov06 а посмотрите пожалуйста у себя вот этот цвет 255, 255, 204 - у меня не заливает всю вкладку

grh1 · №6222

egorsemenov06
спасибо, разобрался - немного невнимателен был.

solombala · №6223

Кто знает код в 68 "Закрыть все вкладки" ?

xrun1 · №6224

solombala
Как-то так

Выделить код

Код:

var win = event.target.ownerDocument.defaultView;
win.gBrowser.selectAllTabs();
win.gBrowser.removeMultiSelectedTabs();

P.S. Этот код скорее для темы CB, хотя я сделал такую кнопку в vertical_top_bottom_bar Vitaly V.

Отредактировано xrun1 (08-08-2019 19:36:40)

Maxtor74 · №6225

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

Отредактировано Maxtor74 (09-08-2019 13:20:06)

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

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