Photon-Sidebar für Dark Theme

Lurtz

Da der Fix für eine dunkle Photon-Sidebar, passend zum Dark Theme, es leider nicht in Firefox 57 geschafft hat würde ich die Sidebar vorrübergehend gerne per userChrome.css anpassen.

Hat das jemand schon getan oder kann mich in die richtige Richtung stoßen?

2002Andreas

Ich bin mir nicht sicher, aber meinst du das so?

[attachment=0]Screenshot (281).png[/attachment]

Wenn ja teste das bitte mal, evtl. hilft es dir ja weiter.

CSS

@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"), 


url("chrome://browser/content/browser.xul"),


url("chrome://browser/content/history/history-panel.xul") {




#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
-moz-appearance: none!important;
background:black!important}


.sidebar-placesTreechildren,sidebarheader,#sidebar-search-label{
text-align:center!important;
text-decoration:underline!important;
color:yellow!important}


#sidebar-header{
border:none!important}


#sidebar-splitter{
display:none !important}
}

Alles anzeigen

Lurtz

Ja, so ähnlich. Habs jetzt ganz gut hingekommen, was mir noch fehlt ist eine dunklere searchbox und die Elemente für die Synced-Tabs-Sidebar.

2002Andreas

Zitat von Lurtz

und die Elemente für die Synced-Tabs-Sidebar.

Bitte testen:

CSS

@-moz-document url-prefix(chrome://browser/content/syncedtabs/sidebar.xhtml){


html > body{
background: grey!important;}


*{
color:black!important;}


a{
color:blue!important;}
}

Alles anzeigen

Lurtz

Danke, hat funktioniert für die Synced Tabs

Die Search-Boxen scheinen aber hartnäckig zu sein? Da hat sich nichts geändert...

Was noch grell heraussticht ist die Awesomebar und generell aufklappende Menüs. Irgendwie ist das alles noch nicht ganz zufriedenstellend, ich hoffe das dunkle Thema bekommt noch ein bisschen Liebe Bzw. die Theming API wird bald fertig.

2002Andreas

Zitat von Lurtz

Die Search-Boxen

Bitte auch testen:

CSS

@-moz-document url-prefix(chrome://browser/content/bookmarks/bookmarksPanel.xul){


#search-box > hbox{
background: grey!important;}


 textbox {
  margin: 3px 3px;
  padding: 0px 0px 0px 0px;
  padding-inline-start: 0px;
  color: red;}
}

Alles anzeigen

Lurtz

Fast.
Ein kleiner weißer Rand ist noch um die Searchbox:
[Blockierte Grafik: https://abload.de/img/unbenanntkesks.png]

2002Andreas

Das war hier erst auch so, teste bitte mal mit ändern dieser Werte:

textbox {
margin: 3px 3px;
padding: 0px 0px 0px 0px;
padding-inline-start: 0px;

2002Andreas

Ich habe die Werte mal etwas übertrieben, dann sieht man hier auch den weißen Rand wieder.

[attachment=0]Zwischenablage01.jpg[/attachment]

Auch mal mit dem Zusatz:
!important;

testen.

2002Andreas

So mit dem kompl. Code:

[attachment=0]Zwischenablage01.jpg[/attachment]

CSS

@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"), 


url("chrome://browser/content/browser.xul"),


url("chrome://browser/content/history/history-panel.xul") {




#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
-moz-appearance: none!important;
background:grey!important}


.sidebar-placesTreechildren,sidebarheader,#sidebar-search-label{
text-align:center!important;
text-decoration:underline!important;
color:yellow!important}


#sidebar-header{
border:none!important}


#sidebar-splitter{
display:none !important}


#search-box > hbox{
background: lightgrey!important;}


 textbox {
  margin: 3px 3px;
  padding: 0px!important;
  padding-inline-start: 0px!important;
  color: red;}
}

Alles anzeigen

Lurtz

Ich kriegs leider nicht hin, der Rahmen bleibt. Wirkt als würde ich das falsche Element ansprechen.

2002Andreas

Du hast recht, sorry.

Ich habe mir das Feld mal vergrößert, und dann habe ich auch diesen weißen Rahmen.

Wie man den entfernt oder auch einfärbt, habe ich leider noch nicht gefunden. :?

2002Andreas

Bitte wieder testen:

CSS

@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"), 
url("chrome://browser/content/browser.xul"),
url("chrome://browser/content/history/history-panel.xul") {




#bookmarks-view,sidebarheader,#sidebar-box,.sidebar-placesTreechildren,#sidebar-search-label,#sidebar-search-container,#placesList > treechildren{
-moz-appearance: none!important;
background:grey!important}


.sidebar-placesTreechildren,sidebarheader,#sidebar-search-label{
text-align:center!important;
text-decoration:underline!important;
color:yellow!important}


#sidebar-header{
border:none!important}


#sidebar-splitter{
display:none !important}


#search-box > hbox{
	margin: -2px -2px!important;
	background: lightgrey!important;}


 textbox {
  margin: 3px 3px;
  padding: 0px!important;
  padding-inline-start: 0px!important;
  color: red;}
}

Alles anzeigen

Lurtz

Fast perfekt. Mit -3px ist es ganz ausgefüllt.

2002Andreas

Hat zwar etwas gedauert...aber schön wenn es letztlich doch funktioniert

2002Andreas

Damit kannst du die Farben bei hover ändern...

wenn du magst:

CSS

@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"){


treechildren::-moz-tree-cell(hover),
    treechildren::-moz-tree-cell-text(hover),
    treechildren::-moz-tree-row(hover){
    -moz-appearance: none !important;    
    border:none !important;
    text-decoration: none !important;
    outline: none !important;}




treechildren:-moz-tree-cell(even, hover){
background: -moz-linear-gradient(rgb(135,206,250) 25%, rgb(240,255,255) 95%) !important;}


treechildren:-moz-tree-cell(odd, hover){
background: -moz-linear-gradient(rgb(192,192,192) 25%, rgb(255,255,255) 95%) !important;}




treechildren:-moz-tree-cell-text(hover){
color: Blue !important;}


#bookmarks-view-children:-moz-tree-cell(selected){	
   background: -moz-linear-gradient(rgb(000,255,255) 25%, rgb(000,000,255) 95%) !important;}


#bookmarks-view-children:-moz-tree-cell-text(selected){
color: Snow !important;}
}

Alles anzeigen