Modyfikacja schematów

[Majki]

Pracuję nad modyfikacją schematu Mostly Crystal dla Firebird 0.8, tak aby wyglądał jak Crystal-Classic. Ale mam problem z przyciskami. Nie wiem co zrobić, żeby po najechaniu myszą na przycisk pokazywał się jego zarys, czyli żeby działało tak jak w domyślnym schemacie. W tym schemacie nie widać wogóle jaki obszar jest zajmowany przez poszczególne przyciski. Próbowałem podglądnąć jak to jest zrobione w schemacie Nautical, i poprzenosiłem te ustawienia co wydały się konieczne ale mimo tego dalej nie działa.
Uzupełniłem wpisy w global/button.css

Kod: Zaznacz cały

/* .......... focused state .......... */

button:focus {
  -moz-border-top-colors: ThreeDDarkShadow ThreeDHighlight transparent;
  -moz-border-right-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  -moz-border-left-colors: ThreeDDarkShadow ThreeDHighlight transparent;
}

button:focus > .button-box {
  border: 1px dotted ThreeDDarkShadow;
}

/* .......... default state .......... */

button[default="true"] {
  -moz-border-top-colors: ThreeDDarkShadow ThreeDHighlight ThreeDLightShadow;
  -moz-border-right-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDDarkShadow ThreeDShadow;
  -moz-border-left-colors: ThreeDDarkShadow ThreeDHighlight ThreeDLightShadow;
}

/* .......... active/open/checked state .......... */

button:hover:active,
button[open="true"],
button[checked="true"] {
  -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent;
  -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent;
  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent;
  -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent;
}

button:hover:active > .button-box,
button[open="true"] > .button-box,
button[checked="true"] > .button-box {
  padding: 2px 3px 1px 4px;
}

/* .......... disabled state .......... */

button[disabled="true"] {
  -moz-border-top-colors: transparent ThreeDHighlight ThreeDLightShadow !important;
  -moz-border-right-colors: transparent ThreeDDarkShadow ThreeDShadow !important;
  -moz-border-bottom-colors: transparent ThreeDDarkShadow ThreeDShadow !important;
  -moz-border-left-colors: transparent ThreeDHighlight ThreeDLightShadow !important;
  color: GrayText;
}

button[disabled="true"] > .button-box {
  padding: 1px 4px 2px 3px !important;
}



Czego mi jeszcze brakuje? Udało się uzyskać taki efekt jak potrzebuję dla przycisku GO w pliku browser/browser.css

Kod: Zaznacz cały

#go-button,
#go-container {
  -moz-appearance: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  min-width: 0;
  list-style-image: url("chrome://browser/skin/icons/go.png");
  -moz-image-region: rect(0 32px 32px 0);
}

#go-button {
  -moz-appearance: toolbarbutton;
  border-width: 1px !important;
  -moz-border-top-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: transparent;
  -moz-border-left-colors: transparent;
  -moz-appearance: toolbarbutton;
}

#go-button:hover {
  -moz-border-top-colors: ThreeDHighlight;
  -moz-border-right-colors: ThreeDShadow;
  -moz-border-bottom-colors: ThreeDShadow;
  -moz-border-left-colors: ThreeDHighlight;
  -moz-image-region: rect(32px, 32px, 64px, 0px);
}

#go-button:hover:active {
  -moz-border-top-colors: ThreeDShadow;
  -moz-border-right-colors: ThreeDHighlight;
  -moz-border-bottom-colors: ThreeDHighlight;
  -moz-border-left-colors: ThreeDShadow;
  -moz-image-region: rect(32px, 32px, 64px, 0px);
}

#go-button[disabled="true"] {
  border-color: transparent;
  -moz-image-region: rect(64px, 32px, 96px, 0px);
  -moz-opacity: 0.2;
}


Ale to bez sensu żeby dla każdego przycisku coś takiego robić, tym bardziej że chcę mieć taki sam efekt także dla przycisków z linkami dla stron.
Czy jest jakiś opis co jest w których plikach, i jaka jest hierarchia dziedziczenia ustawień?
Co jest ustawiane w pliku browser/browser.xml ?
Co daje parametr: !important ?