diff --git a/chrome/content/zotero/elements/editableText.js b/chrome/content/zotero/elements/editableText.js index de9b20c1de..86ef933175 100644 --- a/chrome/content/zotero/elements/editableText.js +++ b/chrome/content/zotero/elements/editableText.js @@ -184,6 +184,7 @@ input.rows = 1; } input.classList.add('input'); + input.toggleAttribute("no-windows-native", true); let handleInput = () => { if (!this.multiline) { this._input.value = this._input.value.replace(/\n/g, ' '); diff --git a/scss/elements/_editableText.scss b/scss/elements/_editableText.scss index b86f52e318..f6e52331ad 100644 --- a/scss/elements/_editableText.scss +++ b/scss/elements/_editableText.scss @@ -79,6 +79,15 @@ editable-text { @media not (-moz-platform: windows) { @include focus-ring(true); } + // Do not use default Windows focus-ring + @media (-moz-platform: windows) { + &:focus-visible { + outline: none; + box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border); + --width-focus-border: 1px; + --color-focus-border: var(--color-accent); + } + } // Necessary for consistent padding, even if it's actually an -moz-default-appearance: textarea; @@ -93,13 +102,17 @@ editable-text { &:read-only, &:not(:focus) { appearance: none; - background: transparent !important; + background: transparent; } &:hover:not(:read-only, :focus) { - background: var(--fill-quinary) !important; + background: var(--fill-quinary); box-shadow: 0 0 0 1px var(--fill-quinary); } + + &:focus { + background: var(--material-background); + } ::placeholder { color: var(--fill-tertiary); diff --git a/scss/win/components/_input.scss b/scss/win/components/_input.scss index b3443116fc..e0492b4710 100644 --- a/scss/win/components/_input.scss +++ b/scss/win/components/_input.scss @@ -51,11 +51,11 @@ input:is([type=color], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], - [type=url], [type=week], [type=autocomplete]), -input:not([type]), -textbox, -search-textbox, -textarea { + [type=url], [type=week], [type=autocomplete]):not([no-windows-native]), +input:not([type], [no-windows-native]), +textbox:not([no-windows-native]), +search-textbox:not([no-windows-native]), +textarea:not([no-windows-native]) { appearance: none; height: 26px; padding: 0; diff --git a/scss/win/elements/_editableText.scss b/scss/win/elements/_editableText.scss deleted file mode 100644 index 014abd3556..0000000000 --- a/scss/win/elements/_editableText.scss +++ /dev/null @@ -1,13 +0,0 @@ -editable-text { - .input { - height: unset !important; - // Disable focus ring - outline: none; - padding-inline-start: unset; - - &:not(:focus, :focus-visible), - &:read-only { - border: none !important; - } - } -} diff --git a/scss/zotero-win.scss b/scss/zotero-win.scss index 86a96eeca1..7970b3482e 100644 --- a/scss/zotero-win.scss +++ b/scss/zotero-win.scss @@ -14,7 +14,6 @@ // Elements @import "win/elements/itemBox"; -@import "win/elements/editableText"; // Components