Rosmaninho / Zotero-Dark-Theme

userChrome.css file for a Zotero dark theme. Suggestions for improvements are welcome.
GNU General Public License v3.0
721 stars 95 forks source link

zotero-better-bibtex field doesn't follow the scheme #42

Closed glocalglocal closed 2 years ago

glocalglocal commented 2 years ago

zotero-better-bibtex adds a citation key field in the item pane but it doesn't follow the Zotero-Dark-Theme scheme.

I reported this here:

https://github.com/retorquere/zotero-better-bibtex/issues/2117#issuecomment-1101476452

The dev of zotero-better-bibtex is asking for 'a class'. I know nothing about CSS. Can you help?

Rosmaninho commented 2 years ago

Class are the #class items that you can theme. I don't know what is the class for that citation key field. It's not an original field from Zotero, is it? I had similar cases for the Item type and the date field. In that case the classes were #item-type-menu and #zotero-date-field-status.

Rosmaninho commented 2 years ago

Maybe @ThomasFKJorna can help me here. He has more knowledge, and I'm also curious how to define css classes. I just hunt for already defined classes so it's harder for me to help.

retorquere commented 2 years ago

Class are the #class items that you can theme. I don't know what is the class for that citation key field. It's not an original field from Zotero, is it? I had similar cases for the Item type and the date field. In that case the classes were #item-type-menu and #zotero-date-field-status.

It's not an original field, my plugin adds it, I suspect I only have to declare it the proper CSS class to fix it, but I don't know which.

Rosmaninho commented 2 years ago

Maybe try #citation-key ? I really have no idea about this specific one.

retorquere commented 2 years ago

Maybe try #citation-key ? I really have no idea about this specific one.

I take it there already is a CSS class that colors the existing zotero fields correctly. If I know what that is, I can add it to the citekey field. Adding #citation-key (which is an ID, not a class) wouldn't do anything as there will be no corresponding CSS style in the dark-mode CSS style.

Rosmaninho commented 2 years ago

Okay, thank you for clarifying this. With my userChrome.css I mostly used IDs to theme Zotero. The item type field was themed also using an ID. The class item that I used to change color of fields in the item pane is .zotero-clicky. The ID for the item pane is #zotero-item-pane-content. Hopefully this helps.

retorquere commented 2 years ago

I only see zotero-clicky applied to label elements in the Zotero, not to textbox elements (which are the editable fields, and which BBT uses to show the citekey). So I don't know what I should do next.

retorquere commented 2 years ago

Okay, thank you for clarifying this. With my userChrome.css I mostly used IDs to theme Zotero. The item type field was themed also using an ID. The class item that I used to change color of fields in the item pane is .zotero-clicky. The ID for the item pane is #zotero-item-pane-content. Hopefully this helps.

If you add the appropriate styling for #citation-key I can add that ID to the textbox that shows the citation key.

edit: it already has an ID, and I want to avoid accidental overlap with zotero fields. Can you add the styling for #better-bibtex-citekey-display?

Rosmaninho commented 2 years ago

You mean adding that ID to the file with the correct theming? Sure! Test it afterwards to see if it works. :)

retorquere commented 2 years ago

@glocalglocal will have to test. It should work with the existing BBT because it already uses that ID.

Rosmaninho commented 2 years ago

Installed your add-on and it's working correctly now. I'll wait for confirmation of reporter to close this issue. Thank you for your patience to my ignorance about certain terms, I just do this for fun.

retorquere commented 2 years ago

Same here, also just blundering through.

glocalglocal commented 2 years ago

If that userChrome.css updated earlier today is the one I should be using for testing, I tried it and the theme switches to light. No dark theme at all. I had to switch back the earlier userChrome.css

Rosmaninho commented 2 years ago

Weird. That shouldn't happen since I only added one ID to line 180 and adjusted the #item-type-menu:hover. Could you copy paste the code on the userChrome.css file and check again? It's working on my end so I can't fix something if I can't detect the problem.

glocalglocal commented 2 years ago

This is weird. I get the dark theme with a userChrome.css that is 11,763 bytes but not with the new one that is 269,938 bytes. Shall I send you either of these?

Line 180 in the longer (new) one is:

Rosmaninho commented 2 years ago

This is the new one: image

It does not have that size you are mentioning and that is definitely not the line 180 in the updated file. image

glocalglocal commented 2 years ago

OK, resolved. I was assuming the big file listed under main on github was the same as the one in the zip under Code. I got the zip, the file in there is 13430 bytes and it's working fine. Dark theme and citation key look as they should. Many thanks.

Rosmaninho commented 2 years ago

Nice!! Glad that this was solved. :)