mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix attachment preview button background color

Browse source
This commit is contained in:
windingwind 2024-11-14 17:21:28 +01:00 committed by Dan Stillman
parent a6c178dfe8
commit 6270311b24
2 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
chrome/content/zotero/elements/attachmentPreview.js
View file

@ -95,6 +95,10 @@
*/
this._isReaderInitialized = false;
this._notifierID = null;
this._prefObserver = null;
this._resizeOb = new ResizeObserver(this._handleResize.bind(this));
}
@ -213,6 +217,8 @@
this.addEventListener("keypress", this._handleKeypress);
this.setAttribute("data-preview-type", "unknown");
this._notifierID = Zotero.Notifier.registerObserver(this, ["item"], "attachmentPreview");
this._prefObserver = Zotero.Prefs.registerObserver("reader.contentDarkMode", this._handleContentDarkModeChange);
this._handleContentDarkModeChange(Zotero.Prefs.get("reader.contentDarkMode"));
}
destroy() {
@ -226,6 +232,7 @@
this.removeEventListener("focusin", this._handleFocusIn);
this.removeEventListener("keypress", this._handleKeypress);
Zotero.Notifier.unregisterObserver(this._notifierID);
Zotero.Prefs.unregisterObserver(this._prefObserver);
}
notify(event, type, ids, extraData) {
@ -645,6 +652,10 @@
this.style.setProperty("--width-height-ratio", scaleRatio);
}
_handleContentDarkModeChange = (useDarkMode) => {
this.querySelector(".btn-container").classList.toggle("dark", useDarkMode);
};
_id(id) {
return this.querySelector(`#${id}`);
}

23
scss/elements/_attachmentPreview.scss
View file

@ -77,21 +77,30 @@ attachment-preview {
toolbarbutton {
padding: 4px;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, 0.55);
color: #fff;
&:hover {
background-color: rgba(0,0,0,0.4);
opacity: 0.75;
}
&:active, &[selected] {
background-color: rgba(0,0,0,0.3);
opacity: 0.5;
}
&:disabled,
&[disabled="true"] {
background-color: rgba(0,0,0,0.2);
opacity: 0.4;
}
}
// The reader can have different themes, we need to adjust the button color
// based on the class set by the AttachmentPreview element
&.dark toolbarbutton {
background-color: rgba(255, 255, 255, 0.55);
color: #000;
}
&:-moz-locale-dir(rtl) {
transform: scaleX(-1);
@ -99,11 +108,11 @@ attachment-preview {
}
.btn-prev {
@include svgicon-menu("arrow-left", "universal", "20", false, false, (#fff, #fff));
@include svgicon-menu("arrow-left", "universal", "20");
}
.btn-next {
@include svgicon-menu("arrow-right", "universal", "20", false, false, (#fff, #fff));
@include svgicon-menu("arrow-right", "universal", "20");
}
.drag-container {