Firefox - zmiana kolorów interfejsu w CSS


(aspix) #1

Wraz z modyfikacjami za pomocą substytutów w postaci plików css zmieniłem wygląd jako
Photon Australis, z strony

chciałbym dokonać zmiany kolorów w interfejsie. Mianowicie koloru kart, oraz zlikwidować tło które jest widoczne przy ciemniejszych motywach w załączniku przesyłam zrzut przedstawiający zmiany które chciałbym zmienić. Dodam również iż w css zmieniłem położenie kart zgodnie z poradnikiem :


(krystian3w) #2

How to find item ids and attributes?

Enable once:
1. Tools > WebDeveloper > Toggle Tools > Toolbox Options > Enable browser chrome and add-on debugging toolboxes
2. Tools > WebDeveloper > Toggle Tools > Toolbox Options > Enable remote debugging

Hit Ctrl+Alt+Shift+I or open ‘Tools > WebDeveloper > Browser Toolbox’.

Inspect ui or web content.

Force popups to stay open for inspection:
Click on ‘disable popup auto hide’ button (= button with four squares) on developer toolbars end.

Po polsku tak się nazywają te opcje:

obraz


Może ktoś ci poda gotowy css lub nazwy elementów (id / klasę / typ znacznika…) do ostylowania ich ręcznie.

Wilfredwee nawet fajnie opisał kolory w CSS, więc skoro wybierasz wersje dark to w niej poszukaj co aktywuje czarny kolor i co białe podświetlenie (domyślny css Firefox) - minus musisz sobie sam np. w inkscape zrobić zakrzywione rogi w innym kolorze (niestety tego autor nie mógł wykonać jak w Firefox 56 że przeglądarka w locie koloruje).


(aspix) #3

Sprawdziłem też na nowej czystej instalacji z nowym profilem podświetlenie tło dla paska zakładek i adresu jest od samego poczatku, jest to widoczne zwłaszcza przy ciemniejszych motywach.


(krystian3w) #4

No i masz w sumie racje efekt po włączeniu lekkich motywów z grafiki:

#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
    background-color: transparent !important;
}

Kreskę pod menu nawigacyjnym nie wiem jak ukryć.

Kolory Australisa są w gradiencie:

--background-selected-middle:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(
      transparent
      2px,
      rgb(50, 50, 52) 2px,
      rgb(50, 50, 52)
    ),
    none !important;


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

Jak wyżej napisałem osobno trzeba by pokolorować zaokrąglenia bo są wektorową grafiką (Inskcape albo jakoś ręcznie jak rozgryziesz znaczniki).


(aspix) #5

Właśnie o tym myślałem. I się udało. Kolory to tylko kwestia zmiany kolorów w CSS. Odnośnie pozostałej kreski to nie ma znaczenia jeżeli używa się odpowiedniego motywu. Podziękowania dla krystian3w


(aspix) #6

W sumie wszystko mam jak w dawnym Firefox, choć dwie zmiany mógłbym poprawić : 1- zmienić wysokość paska adresu i wyszukiwarki oraz nadać folderom które są utworzone na pasku zakładek kolor aby było widoczne w postaci żółtych folderów.


(krystian3w) #7

“Kolory” żółci dla folderu są gdzieś w CustomCssForFX, obecnie przeniesione do jednego colorized.css i może jednego pliku *.css z katalogu config i ogólnie to chyba podmieniana jest grafika a nie szara kolorowana.

.bookmark-item[container] {
    list-style-image: url("./../../image/folder-item.png") !important;
    -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

folder-item


Co do wysokości to z tamtej grupy modyfikacji to chyba będzie trudno znaleźć i może szybciej ręcznie zmniejszysz metodą prób i błędów.