Дизайн кнопки Firefox

j23 · №1

Здравствуйте! Взялся изменить оранжевую кнопку приложения. Так как в Австралисе ее нет, кнопка связана с расширением Classic Theme Restorer. А есть еще расширение Stratiform (которое с вышеупомянутым не совместимо). Вот в нем мне нравился прозрачный стиль кнопки приложения:

Я открыл css-документ с кодом этой кнопки:

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

Выделить код

Код:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xul") {

#main-window #appmenu-button {
  color: rgba(0,0,0,.4) !important;
  text-shadow: 0 1px hsla(0,0%,100%,.35) !important;
  /*padding: 0 1.85em 0.005em !important;*/
  background-color: transparent !important;
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.16), hsla(0,0%,100%,.02)) !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0,0,0,.13) !important;
  border-top: 0 !important;
  border-bottom-color: rgba(0,0,0,.14) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06),
              1px 0 0 hsla(0,0%,100%,.2) inset,
              -1px 0 0 hsla(0,0%,100%,.2) inset,
              0 -1px 0 hsla(0,0%,100%,.14) inset !important;
  height: 19px !important;
  max-height: 19px !important;
  min-height: 19px !important;
}

#appmenu-button .button-menu-dropmarker {
  list-style-image: url(dropmarker.png) !important;
}

#main-window #appmenu-button:not([open]):not(:active):hover {
  background-image: -moz-linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.04)) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06),
              1px 0 0 rgba(255,255,255,.31) inset,
              -1px 0 0 rgba(255,255,255,.31) inset,
              0 -1px 0 rgba(255,255,255,.17) inset !important;
}

#main-window #appmenu-button[open] {
  background-image: -moz-linear-gradient(rgba(217,217,217,.08),rgba(240,240,240,.17)) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06),
              1px 0 0 rgba(255,255,255,.2) inset,
              -1px 0 0 rgba(255,255,255,.2) inset,
              0 -1px 0 rgba(255,255,255,.2) inset !important;
}

#main-window[privatebrowsingmode] #appmenu-button {
  background-color: rgba(0,0,0,.3) !important;
  border-color: rgba(0,0,0,.35) !important;
}

}

ID кнопки (с учетом принадлежнасти к CTR) - ctraddon_appbutton2.
Я скопировал фрагменты кода в userChrome, но ничего не изменилось. Хотя ранее благополучно менял радиус углов этой CTR-овской кнопки.
Помогите, пожалуйста, с решением этой задачи.

Отредактировано j23 (22-03-2016 21:08:53)

turbot · №2

Не понял, в чем проблема. Почему не включить прозрачный цвет кнопки в самом ctr?

j23 пишет

но ничего не изменилось

Стили ctr имеют более высокий приоритет, чем стили браузера или userChrome.css. Только Stylish с /*AGENT_SHEET*/, в начале стиля, может их перебить.

Добавлено 22-03-2016 21:34:47
Да, и писать вопросы надо в нужные темы/разделы форума и по css-стилям и по ctr есть свои.

Отредактировано turbot (22-03-2016 21:34:47)

j23 · №3

turbot
Спасибо за подсказку на счет Stylish. Всё получилось.

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

№122-03-2016 21:07:34

Дизайн кнопки Firefox

Код:

№222-03-2016 21:32:57

Re: Дизайн кнопки Firefox

№322-03-2016 22:09:44

Re: Дизайн кнопки Firefox

Board footer