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

Implement Windows redesign for native elements (#3727)

Browse source
This commit is contained in:
windingwind 2024-03-02 15:51:55 +08:00 committed by GitHub
parent 337f54ac03
commit 23da0d70b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
67 changed files with 1189 additions and 656 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc
View file

@ -18,6 +18,7 @@
"MozXULElement": false,
"PluralForm": false,
"Services": false,
"windowUtils": false,
"XPCOMUtils": false,
"XRegExp": false,
"XULElement": false,

14
app/scripts/fetch_xulrunner
View file

@ -297,6 +297,20 @@ function modify_omni {
replace_line 'window.sizeToContent\(\);' 'if (ui.infoIcon.complete) window.sizeToContent();' chrome/toolkit/content/global/commonDialog.js
replace_line 'ui.infoIcon.addEventListener' 'if (!ui.infoIcon.complete) ui.infoIcon.addEventListener' chrome/toolkit/content/global/commonDialog.js
# Import style into built-in dialogs
replace_line '<window id=\"commonDialogWindow\"' \
'<window id=\"commonDialogWindow\" class=\"zotero-dialog\"' \
chrome/toolkit/content/global/commonDialog.xhtml
replace_line '<\?xml-stylesheet href=\"chrome:\/\/global\/skin\/commonDialog.css\" type=\"text\/css\"\?>' \
'<\?xml-stylesheet href=\"chrome:\/\/global\/skin\/commonDialog.css\" type=\"text\/css\"\?>
<\?xml-stylesheet href=\"chrome:\/\/zotero-platform\/content\/zotero.css\" type=\"text\/css\"\?>' \
chrome/toolkit/content/global/commonDialog.xhtml
replace_line '<script>' \
'<script>
Services.scriptloader.loadSubScript(\"chrome:\/\/zotero\/content\/include.js\", this);
Services.scriptloader.loadSubScript(\"chrome:\/\/zotero\/content\/customElements.js\", this);' \
chrome/toolkit/content/global/commonDialog.xhtml
# Use native checkbox instead of Firefox-themed version in prompt dialogs
replace_line '<xul:checkbox' '<xul:checkbox native=\"true\"' chrome/toolkit/content/global/commonDialog.xhtml

20
chrome/content/scaffold/load.js
View file

@ -23,7 +23,11 @@
***** END LICENSE BLOCK *****
*/
var Scaffold_Load = new function() {
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
var Scaffold_Load = new function () {
this.onLoad = async function () {
document.addEventListener('dialogaccept', () => this.accept());
@ -43,12 +47,12 @@ var Scaffold_Load = new function() {
}
});
var translators = {};
var translators = {};
// Get the matching translators
// Get the matching translators
var translatorProvider = window.arguments[0].translatorProvider;
var url = window.arguments[0].url;
var rootUrl = window.arguments[0].rootUrl
var rootUrl = window.arguments[0].rootUrl;
url = Zotero.Proxies.proxyToProper(url);
translators["Matching Translators"] = (await translatorProvider.getWebTranslatorsForLocation(url, rootUrl))[0];
translators["Web Translators"] = (await translatorProvider.getAllForType("web"))
@ -68,8 +72,8 @@ var Scaffold_Load = new function() {
listitem.style.MozUserInput = 'none';
listitem.append(set);
listbox.appendChild(listitem);
for (var j=0; j<translators[set].length; j++) {
var translator = translators[set][j];
for (var j = 0; j < translators[set].length; j++) {
translator = translators[set][j];
listitem = document.createXULElement("richlistitem");
// set search label for type-to-find functionality. This is not displayed.
listitem.searchLabel = translator.label;
@ -96,5 +100,5 @@ var Scaffold_Load = new function() {
Zotero.debug(translatorID);
window.arguments[0].dataOut = translator;
}
}
};
};

18
chrome/content/scaffold/load.xhtml
View file

@ -26,22 +26,22 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://scaffold/skin/scaffold.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://scaffold/locale/scaffold.dtd">
<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&scaffold.load.title;" width="400" height="330"
onload="Scaffold_Load.onLoad()">
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&scaffold.load.title;" width="400" height="330"
onload="Scaffold_Load.onLoad()"
class="zotero-dialog">
<dialog buttons="cancel,accept"
id="scaffold-load">
<script src="chrome://zotero/content/include.js"/>
<script src="load.js"/>
<listheader>
<treecol flex="1" label="&scaffold.load.label.label;"/>
<listheader>
<treecol flex="1" label="&scaffold.load.label.label;"/>
<treecol width="130" label="&scaffold.load.creator.label;"/>
</listheader>
<richlistbox id="listbox" flex="1"/>
</listheader>
<richlistbox id="listbox" class="theme-listbox" flex="1"/>
</dialog>
</window>

416
chrome/content/scaffold/scaffold.xhtml
View file

@ -24,11 +24,12 @@
***** END LICENSE BLOCK *****
-->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/scaffold.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<?xml-stylesheet href="chrome://zotero/skin/scaffold.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd"> %globalDTD;
@ -43,10 +44,13 @@
title="Scaffold"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
style="display: flex;">
style="display: flex;"
drawintitlebar-platforms="win, linux">
<linkset>
<html:link rel="localization" href="browser/menubar.ftl"/>
<html:link rel="localization" href="toolkit/global/textActions.ftl"/>
<html:link rel="localization" href="zotero.ftl" />
</linkset>
<script>
@ -55,6 +59,7 @@
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("resource://zotero/require.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/titlebar.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/platformKeys.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/editMenuOverlay.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/xpcom/translate/testTranslators/translatorTester.js", this);
@ -70,6 +75,8 @@
// Custom elements
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/menuAccessKey.js", this);
</script>
<commandset id="mainCommandSet">
@ -148,201 +155,236 @@
<broadcaster id="validate-tests"/>
</broadcasterset>
<vbox flex="1" id="scaffold-pane">
<menubar id="mb">
<menu id="mb-file" label="&fileMenu.label;" accesskey="&fileMenu.accesskey;">
<menupopup id="mb-file-popup">
<menuitem id="mb-file-new" label="&scaffold.menu.new;" key="new" command="cmd_new"/>
<menuitem id="mb-file-load" label="&scaffold.menu.open;" key="load" command="cmd_load"/>
<menuitem id="mb-file-setTranslatorsDirectory" label="&scaffold.menu.setTranslatorsDirectory;" oncommand="Scaffold.promptForTranslatorsDirectory()"/>
<menuseparator/>
<menuitem id="mb-file-save" label="&scaffold.toolbar.save.label;" key="save" command="cmd_save"/>
<menuitem id="mb-file-saveToZotero" label="&scaffold.toolbar.saveToZotero.label;" key="save-to-zotero" command="cmd_save_to_zotero"/>
<menuseparator/>
<menuitem id="mb-file-runDetect" label="&scaffold.menu.runDetect;" key="detect-web" command="cmd_run_detect"/>
<menuitem id="mb-file-runDo" label="&scaffold.menu.runDo;" key="run-do-web" command="cmd_run_translator_or_tests"/>
<menuseparator/>
<menuitem id="menu_close" label="&closeCmd.label;" key="key_close" accesskey="&closeCmd.accesskey;" command="cmd_close"/>
</menupopup>
</menu>
<menu id="menu_edit" data-l10n-id="menu-edit">
<menupopup id="menu_EditPopup">
<menuitem id="menu_undo"
key="key_undo"
command="cmd_undo" data-l10n-id="text-action-undo"/>
<menuitem id="menu_redo"
key="key_redo"
command="cmd_redo" data-l10n-id="text-action-redo"/>
<menuseparator/>
<menuitem id="menu_cut"
key="key_cut"
command="cmd_cut" data-l10n-id="text-action-cut"/>
<menuitem id="menu_copy"
key="key_copy"
command="cmd_copy" data-l10n-id="text-action-copy"/>
<menuitem id="menu_paste"
key="key_paste"
command="cmd_paste" data-l10n-id="text-action-paste"/>
<menuitem id="menu_delete"
key="key_delete"
command="cmd_delete" data-l10n-id="text-action-delete"/>
<menuseparator/>
<menuitem id="menu_selectAll"
key="key_selectAll"
command="cmd_selectAll" data-l10n-id="text-action-select-all"/>
<menuseparator/>
<menuitem id="menu_find" label="&findCmd.label;"
key="key_find" accesskey="&findCmd.accesskey;"
command="cmd_find"/>
<!--
#ifdef XP_UNIX
#ifndef XP_MACOSX
<menuseparator/>
<menuitem id="menu_preferences"
oncommand="Zotero.Utilities.Internal.openPreferences()" data-l10n-id="menu-preferences"/>
#endif
#endif
-->
</menupopup>
</menu>
<menu id="mb-view" label="&viewMenu.label;">
<menupopup id="mb-view-popup">
<menu id="mb-font-size-fields" label="&fontSize.label;">
<menupopup id="mb-help-fields-popup">
<menuitem id="mb-view-biggerFont" label="&zotero.general.bigger;" key="increase-font-size" command="cmd_increase_font_size"/>
<menuitem id="mb-view-smallerFont" label="&zotero.general.smaller;" key="decrease-font-size" command="cmd_decrease_font_size"/>
<vbox id="titlebar">
<hbox class="titlebar-icon-container">
<image class="titlebar-icon" src="chrome://zotero/skin/z.svg"></image>
</hbox>
<!-- Menu -->
<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
defaultset="menubar-items"
mode="icons" iconsize="small" defaulticonsize="small" autohide="false"
context="toolbar-context-menu">
<toolbaritem id="menubar-items" align="center">
<menubar id="main-menubar">
<menu id="mb-file" label="&fileMenu.label;" accesskey="&fileMenu.accesskey;">
<menupopup id="mb-file-popup">
<menuitem id="mb-file-new" label="&scaffold.menu.new;" key="new" command="cmd_new"/>
<menuitem id="mb-file-load" label="&scaffold.menu.open;" key="load" command="cmd_load"/>
<menuitem id="mb-file-setTranslatorsDirectory" label="&scaffold.menu.setTranslatorsDirectory;" oncommand="Scaffold.promptForTranslatorsDirectory()"/>
<menuseparator/>
<menuitem id="mb-view-restoreFont" label="&zotero.general.reset;" key="restore-font-size" command="restore-font-size"/>
<menuitem id="mb-file-save" label="&scaffold.toolbar.save.label;" key="save" command="cmd_save"/>
<menuitem id="mb-file-saveToZotero" label="&scaffold.toolbar.saveToZotero.label;" key="save-to-zotero" command="cmd_save_to_zotero"/>
<menuseparator/>
<menuitem id="mb-file-runDetect" label="&scaffold.menu.runDetect;" key="detect-web" command="cmd_run_detect"/>
<menuitem id="mb-file-runDo" label="&scaffold.menu.runDo;" key="run-do-web" command="cmd_run_translator_or_tests"/>
<menuseparator/>
<menuitem id="menu_close" label="&closeCmd.label;" key="key_close" accesskey="&closeCmd.accesskey;" command="cmd_close"/>
</menupopup>
</menu>
</menupopup>
</menu>
<menu id="toolsMenu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;">
<menupopup id="menu_ToolsPopup">
<menu id="menu_template"
label="&scaffold.menu.template;"
observes="code-tab-only">
<menupopup>
<menuitem label="&scaffold.toolbar.template.newWeb.label;" oncommand="Scaffold.addTemplate('newWeb')"/>
<menu label="&scaffold.toolbar.template.scrape.label;">
<menupopup id="menu_template_scrapePopup">
<menuitem id="tb-template-scrape-em" label="Embedded Metadata" oncommand="Scaffold.addTemplate('scrapeEM')"/>
<menuitem id="tb-template-scrape-ris" label="RIS" oncommand="Scaffold.addTemplate('scrapeRIS')"/>
<menuitem id="tb-template-scrape-bibtex" label="BibTeX" oncommand="Scaffold.addTemplate('scrapeBibTeX')"/>
<menuitem id="tb-template-scrape-marc" label="MARC" oncommand="Scaffold.addTemplate('scrapeMARC')"/>
</menupopup>
</menu>
<menu id="menu_edit" data-l10n-id="menu-edit">
<menupopup id="menu_EditPopup">
<menuitem id="menu_undo"
key="key_undo"
command="cmd_undo" data-l10n-id="text-action-undo"/>
<menuitem id="menu_redo"
key="key_redo"
command="cmd_redo" data-l10n-id="text-action-redo"/>
<menuseparator/>
<menuitem id="menu_cut"
key="key_cut"
command="cmd_cut" data-l10n-id="text-action-cut"/>
<menuitem id="menu_copy"
key="key_copy"
command="cmd_copy" data-l10n-id="text-action-copy"/>
<menuitem id="menu_paste"
key="key_paste"
command="cmd_paste" data-l10n-id="text-action-paste"/>
<menuitem id="menu_delete"
key="key_delete"
command="cmd_delete" data-l10n-id="text-action-delete"/>
<menuseparator/>
<menuitem id="menu_selectAll"
key="key_selectAll"
command="cmd_selectAll" data-l10n-id="text-action-select-all"/>
<menuseparator/>
<menuitem id="menu_find" label="&findCmd.label;"
key="key_find" accesskey="&findCmd.accesskey;"
command="cmd_find"/>
<!--
#ifdef XP_UNIX
#ifndef XP_MACOSX
<menuseparator/>
<menuitem id="menu_preferences"
oncommand="Zotero.Utilities.Internal.openPreferences()" data-l10n-id="menu-preferences"/>
#endif
#endif
-->
</menupopup>
</menu>
<menuseparator/>
<menu id="linter-menu"
label="&scaffold.menu.linter;"
onpopupshowing="Scaffold.populateLinterMenu()">
<menupopup>
<menuitem id="menu_eslintStatus" disabled="true"/>
<menuitem id="menu_toggleESLint" oncommand="Scaffold.toggleESLint()"/>
</menupopup>
</menu>
</menupopup>
</menu>
<commandset id="macCommandSet"> <!-- was mainCommandSet -->
<command id="minimizeWindow"
label="&minimizeWindow.label;"
oncommand="window.minimize();" />
<command id="zoomWindow"
label="&zoomWindow.label;"
oncommand="zoomWindow();" />
</commandset>
<keyset id="macKeyset"> <!-- was mainKeySet -->
<key id="key_minimizeWindow"
command="minimizeWindow"
key="&minimizeWindow.key;"
modifiers="accel"/>
<key id="key_quitApplication"
key="&quitApplicationCmdMac.key;"
command="cmd_quitApplication"
modifiers="accel"
internal="true"/>
</keyset>
<!-- nsMenuBarX hides these and uses them to build the Application menu. -->
<menupopup id="menu_FilePopup">
<menuitem id="menu_preferences"
label="&preferencesCmdMac.label;"
key="key_preferencesCmdMac"
oncommand="Zotero.Utilities.Internal.openPreferences()"/>
<menuitem id="menu_mac_services"
label="&servicesMenuMac.label;"/>
<menuitem id="menu_mac_hide_app"
label="&hideThisAppCmdMac.label;"
key="key_hideThisAppCmdMac"/>
<menuitem id="menu_mac_hide_others"
label="&hideOtherAppsCmdMac.label;"
key="key_hideOtherAppsCmdMac"/>
<menuitem id="menu_mac_show_all"
label="&showAllAppsCmdMac.label;"/>
<menuitem id="menu_FileQuitItem"
label="&quitApplicationCmdMac.label;"
key="key_quitApplication"
command="cmd_quitApplication"/>
</menupopup>
<menu id="windowMenu"
label="&windowMenu.label;"
datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"
onpopupshowing="macWindowMenuDidShow();"
onpopuphidden="macWindowMenuDidHide();"
hidden="false">
<template>
<rule>
<menupopup>
<menuitem uri="rdf:*"
label="rdf:http://home.netscape.com/NC-rdf#Name"
type="radio"
name="windowList"
oncommand="ShowWindowFromResource(event.target)"/>
</menupopup>
</rule>
</template>
<menupopup id="windowPopup">
<menuitem command="minimizeWindow" label="&minimizeWindow.label;" key="key_minimizeWindow"/>
<menuitem command="zoomWindow" label="&zoomWindow.label;"/>
<!-- decomment when "BringAllToFront" is implemented
<menuseparator/>
<menuitem label="&bringAllToFront.label;" disabled="true"/> -->
<menuseparator id="sep-window-list"/>
</menupopup>
</menu>
<!-- endif -->
<menu id="helpMenu" label="&helpMenu.label;" accesskey="&helpMenu.accesskey;">
<menupopup id="mb-help-popup">
<menuitem id="mb-help-types" label="&scaffold.toolbar.template.itemTypes.label;" oncommand="Scaffold.addTemplate('templateAllTypes')"/>
<menu id="mb-help-fields" label="&scaffold.toolbar.template.newItem.label;">
<menupopup id="mb-help-fields-popup">
<menuitem id="mb-help-fields-book" label="book" oncommand="Scaffold.addTemplate('templateNewItem', 'book')"/>
<menuitem id="mb-help-fields-booksection" label="bookSection" oncommand="Scaffold.addTemplate('templateNewItem', 'bookSection')"/>
<menuitem id="mb-help-fields-conferencepaper" label="conferencePaper" oncommand="Scaffold.addTemplate('templateNewItem', 'conferencePaper')"/>
<menuitem id="mb-help-fields-journalarticle" label="journalArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'journalArticle')"/>
<menuitem id="mb-help-fields-magazinearticle" label="magazineArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'magazineArticle')"/>
<menuitem id="mb-help-fields-newspaperarticle" label="newspaperArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'newspaperArticle')"/>
<menu id="mb-help-fields-more" label="&scaffold.toolbar.template.more.label;">
<menupopup id="mb-help-fields-more-popup">
<!-- This will be filled on load with all other item types -->
<menu id="mb-view" label="&viewMenu.label;" accesskey="&viewMenu.accesskey;">
<menupopup id="mb-view-popup">
<menu id="mb-font-size-fields" label="&fontSize.label;">
<menupopup id="mb-help-fields-popup">
<menuitem id="mb-view-biggerFont" label="&zotero.general.bigger;" key="increase-font-size" command="cmd_increase_font_size"/>
<menuitem id="mb-view-smallerFont" label="&zotero.general.smaller;" key="decrease-font-size" command="cmd_decrease_font_size"/>
<menuseparator/>
<menuitem id="mb-view-restoreFont" label="&zotero.general.reset;" key="restore-font-size" command="restore-font-size"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
<menu id="toolsMenu" label="&toolsMenu.label;" accesskey="&toolsMenu.accesskey;">
<menupopup id="menu_ToolsPopup">
<menu id="menu_template"
label="&scaffold.menu.template;"
observes="code-tab-only">
<menupopup>
<menuitem label="&scaffold.toolbar.template.newWeb.label;" oncommand="Scaffold.addTemplate('newWeb')"/>
<menu label="&scaffold.toolbar.template.scrape.label;">
<menupopup id="menu_template_scrapePopup">
<menuitem id="tb-template-scrape-em" label="Embedded Metadata" oncommand="Scaffold.addTemplate('scrapeEM')"/>
<menuitem id="tb-template-scrape-ris" label="RIS" oncommand="Scaffold.addTemplate('scrapeRIS')"/>
<menuitem id="tb-template-scrape-bibtex" label="BibTeX" oncommand="Scaffold.addTemplate('scrapeBibTeX')"/>
<menuitem id="tb-template-scrape-marc" label="MARC" oncommand="Scaffold.addTemplate('scrapeMARC')"/>
</menupopup>
</menu>
</menupopup>
</menu>
<menuseparator/>
<menu id="linter-menu"
label="&scaffold.menu.linter;"
onpopupshowing="Scaffold.populateLinterMenu()">
<menupopup>
<menuitem id="menu_eslintStatus" disabled="true"/>
<menuitem id="menu_toggleESLint" oncommand="Scaffold.toggleESLint()"/>
</menupopup>
</menu>
</menupopup>
</menu>
<commandset id="macCommandSet"> <!-- was mainCommandSet -->
<command id="minimizeWindow"
label="&minimizeWindow.label;"
oncommand="window.minimize();" />
<command id="zoomWindow"
label="&zoomWindow.label;"
oncommand="zoomWindow();" />
</commandset>
<keyset id="macKeyset"> <!-- was mainKeySet -->
<key id="key_minimizeWindow"
command="minimizeWindow"
key="&minimizeWindow.key;"
modifiers="accel"/>
<key id="key_quitApplication"
key="&quitApplicationCmdMac.key;"
command="cmd_quitApplication"
modifiers="accel"
internal="true"/>
</keyset>
<!-- nsMenuBarX hides these and uses them to build the Application menu. -->
<menupopup id="menu_FilePopup">
<menuitem id="menu_preferences"
label="&preferencesCmdMac.label;"
key="key_preferencesCmdMac"
oncommand="Zotero.Utilities.Internal.openPreferences()"/>
<menuitem id="menu_mac_services"
label="&servicesMenuMac.label;"/>
<menuitem id="menu_mac_hide_app"
label="&hideThisAppCmdMac.label;"
key="key_hideThisAppCmdMac"/>
<menuitem id="menu_mac_hide_others"
label="&hideOtherAppsCmdMac.label;"
key="key_hideOtherAppsCmdMac"/>
<menuitem id="menu_mac_show_all"
label="&showAllAppsCmdMac.label;"/>
<menuitem id="menu_FileQuitItem"
label="&quitApplicationCmdMac.label;"
key="key_quitApplication"
command="cmd_quitApplication"/>
</menupopup>
<menu id="windowMenu"
label="&windowMenu.label;"
datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"
onpopupshowing="macWindowMenuDidShow();"
onpopuphidden="macWindowMenuDidHide();"
hidden="false">
<template>
<rule>
<menupopup>
<menuitem uri="rdf:*"
label="rdf:http://home.netscape.com/NC-rdf#Name"
type="radio"
name="windowList"
oncommand="ShowWindowFromResource(event.target)"/>
</menupopup>
</rule>
</template>
<menupopup id="windowPopup">
<menuitem command="minimizeWindow" label="&minimizeWindow.label;" key="key_minimizeWindow"/>
<menuitem command="zoomWindow" label="&zoomWindow.label;"/>
<!-- decomment when "BringAllToFront" is implemented
<menuseparator/>
<menuitem label="&bringAllToFront.label;" disabled="true"/> -->
<menuseparator id="sep-window-list"/>
</menupopup>
</menu>
<!-- endif -->
<menu id="helpMenu" label="&helpMenu.label;" accesskey="&helpMenu.accesskey;">
<menupopup id="mb-help-popup">
<menuitem id="mb-help-types" label="&scaffold.toolbar.template.itemTypes.label;" oncommand="Scaffold.addTemplate('templateAllTypes')"/>
<menu id="mb-help-fields" label="&scaffold.toolbar.template.newItem.label;">
<menupopup id="mb-help-fields-popup">
<menuitem id="mb-help-fields-book" label="book" oncommand="Scaffold.addTemplate('templateNewItem', 'book')"/>
<menuitem id="mb-help-fields-booksection" label="bookSection" oncommand="Scaffold.addTemplate('templateNewItem', 'bookSection')"/>
<menuitem id="mb-help-fields-conferencepaper" label="conferencePaper" oncommand="Scaffold.addTemplate('templateNewItem', 'conferencePaper')"/>
<menuitem id="mb-help-fields-journalarticle" label="journalArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'journalArticle')"/>
<menuitem id="mb-help-fields-magazinearticle" label="magazineArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'magazineArticle')"/>
<menuitem id="mb-help-fields-newspaperarticle" label="newspaperArticle" oncommand="Scaffold.addTemplate('templateNewItem', 'newspaperArticle')"/>
<menu id="mb-help-fields-more" label="&scaffold.toolbar.template.more.label;">
<menupopup id="mb-help-fields-more-popup">
<!-- This will be filled on load with all other item types -->
</menupopup>
</menu>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
</toolbaritem>
</toolbar>
<hbox class="titlebar-buttonbox titlebar-color">
<!-- TODO: remove `titlebar-btn` when we are on FX115. See https://phabricator.services.mozilla.com/D162757 -->
<toolbarbutton class="titlebar-button titlebar-min"
titlebar-btn="min"
oncommand="window.minimize();"
data-l10n-id="browser-window-minimize-button"
/>
<toolbarbutton class="titlebar-button titlebar-max"
titlebar-btn="max"
oncommand="window.maximize();"
data-l10n-id="browser-window-maximize-button"
/>
<toolbarbutton class="titlebar-button titlebar-restore"
titlebar-btn="max"
oncommand="window.fullScreen ? BrowserFullScreen() : window.restore();"
data-l10n-id="browser-window-restore-down-button"
/>
<toolbarbutton class="titlebar-button titlebar-close"
titlebar-btn="close"
oncommand="window.close();"
data-l10n-id="browser-window-close-button"
/>
</hbox>
</vbox>
<vbox flex="1" id="scaffold-pane">
<toolbar id="zotero-toolbar" class="toolbar toolbar-primary">
<hbox id="scaffold-toolbar" align="center">
<toolbarbutton id="tb-load" tooltiptext="&scaffold.toolbar.load.label;" command="cmd_load" class="zotero-tb-button" />

4
chrome/content/zotero-platform/mac/tab.css
View file

@ -1,4 +0,0 @@
#zotero-toolbar {
-moz-appearance: none !important;
background: url("chrome://zotero/skin/mac/toolbar-background.png") left center repeat-x;
}

11
chrome/content/zotero/about.xhtml
View file

@ -8,8 +8,12 @@
<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="moveToAlertPosition(); sizeToContent(); document.getElementById('zotero-about').getButton('accept').focus();"
inwindowmenu="false"
class="zotero-window">
inwindowmenu="false">
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<dialog
id="zotero-about"
class="zotero-window"
@ -17,8 +21,6 @@
buttonlabelaccept="&zotero.about.close;"
ondialogaccept="return true;">
<script src="include.js"/>
<vbox id="aboutcontent" class="zotero-dialog">
<div xmlns="http://www.w3.org/1999/xhtml">
<img id="logo" src="chrome://zotero/skin/zotero.svg" alt="Zotero" />
@ -28,7 +30,6 @@
<label id="changelog" class="zotero-text-link" value="&zotero.whatsNew;"/>
</hbox>
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
var version = Zotero.version;
if (!Zotero.isMac) {
version += ` (${Services.appinfo.is64Bit ? '64' : '32'}-bit)`;

53
chrome/content/zotero/customElements.js
View file

@ -157,14 +157,49 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
}
// inject custom CSS into FF built-in custom elements (currently only <wizard>)
for (let element of ["wizard"]) {
let oldAttachShadow = customElements.get(element).prototype.attachShadow;
customElements.get(element).prototype.attachShadow = function () {
let shadowRoot = oldAttachShadow.apply(this, arguments);
shadowRoot.appendChild(MozXULElement.parseXULToFragment(
`<html:link rel="stylesheet" href="chrome://zotero/skin/${element}.css"/>`
));
return shadowRoot;
};
const InjectCSSConfig = {
global: ["wizard"],
win: [
"wizard",
{
element: "dialog",
// The `attachShadow` are cleared in <dialog>, we need to monkey-patch after `connectedCallback`.
patchee: "connectedCallback"
}
],
mac: [],
linux: [],
};
for (let [key, configs] of Object.entries(InjectCSSConfig)) {
if (key == "win" && !Zotero.isWin) continue;
if (key == "mac" && !Zotero.isMac) continue;
if (key == "linux" && !Zotero.isLinux) continue;
let prefix = "";
if (key == "global") {
prefix = "zotero/skin/";
}
else {
prefix = "zotero-platform/content/";
}
for (let config of configs) {
let element, patchee;
// By default, monkey-patch `attachShadow`
if (typeof config === "string") {
element = config;
patchee = "attachShadow";
}
else {
element = config.element;
patchee = config.patchee;
}
let oldFunc = customElements.get(element).prototype[patchee];
customElements.get(element).prototype[patchee] = function () {
let ret = oldFunc.apply(this, arguments);
this.shadowRoot.append(MozXULElement.parseXULToFragment(
`<html:link rel="stylesheet" href="chrome://${prefix}${element}.css"/>`
));
return ret;
};
}
}
}

6
chrome/content/zotero/errorReport.xhtml
View file

@ -15,7 +15,11 @@
<html:link rel="localization" href="toolkit/global/wizard.ftl"/>
</linkset>
<script src="chrome://global/content/customElements.js"/>
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<wizard title="&zotero.errorReport.title;" width="550" height="450">
<script>

6
chrome/content/zotero/exportOptions.xhtml
View file

@ -15,7 +15,11 @@
buttons="cancel,accept"
id="zotero-export-options">
<script src="include.js"/>
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<script src="charsetMenu.js"/>
<script src="exportOptions.js"/>
<script type="application/javascript">

3
chrome/content/zotero/import/importWizard.xhtml
View file

@ -7,7 +7,6 @@
<window data-l10n-id="import-window"
id="import-wizard-window"
class="zotero-window"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
onload="Zotero_Import_Wizard.init()"
@ -23,7 +22,7 @@
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<wizard id="import-wizard" class="import-wizard zotero-window" width="600" height="400">
<wizard id="import-wizard" class="import-wizard" width="600" height="400">
<wizardpage pageid="page-start" data-header-label-id="import-where-from">
<radiogroup id="import-source-group" align="start">
<radio value="file" data-l10n-id="import-source-file" />

1
chrome/content/zotero/longTagFixer.xhtml
View file

@ -14,7 +14,6 @@
onload="Zotero_Long_Tag_Fixer.init()">
<dialog
id="zotero-long-tag-fixer"
class="zotero-dialog"
buttons="cancel,accept"
>
<html:div id="intro">

1
chrome/content/zotero/newCollectionDialog.xhtml
View file

@ -53,7 +53,6 @@
</linkset>
<dialog
class="zotero-dialog"
buttons="cancel,accept"
data-l10n-id="new-collection-dialog"
data-l10n-attrs="buttonlabelaccept"

3
chrome/content/zotero/rtfScan.xhtml
View file

@ -8,7 +8,6 @@
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
id="rtfscan-wizard-window"
class="zotero-window"
onload="Zotero_RTFScan.init()"
>
<linkset>
@ -22,7 +21,7 @@
Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
</script>
<wizard id="rtfscan-wizard" class="rtfscan-wizard zotero-window" width="700" height="550" data-l10n-id="rtfScan-wizard">
<wizard id="rtfscan-wizard" class="rtfscan-wizard" width="700" height="550" data-l10n-id="rtfScan-wizard">
<wizardpage pageid="page-start" data-l10n-id="rtfScan-intro-page">
<div>
<span class="page-start-1" data-l10n-id="rtfScan-introPage-description" />

2
chrome/content/zotero/runJS.html
View file

@ -3,7 +3,7 @@
<title>Run JavaScript</title>
<link href="chrome://zotero-platform/content/zotero.css" rel="stylesheet"/>
</head>
<body class="zotero-window">
<body>
<nav>
<button onclick="run()">Run</button>
<span id="run-label"></span>

3
chrome/content/zotero/selectItemsDialog.xhtml
View file

@ -42,11 +42,10 @@
height="450"
persist="screenX screenY width height"
style="display: flex"
class="zotero-window"
class="zotero-dialog"
>
<dialog
id="select-items-dialog"
class="zotero-window"
orient="vertical"
buttons="cancel,accept"
>

3
chrome/content/zotero/standalone/basicViewer.xhtml
View file

@ -27,6 +27,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<?xul-overlay href="chrome://zotero/content/standalone/editMenuOverlay.xul"?>
<?xul-overlay href="chrome://zotero-platform/content/standalone/menuOverlay.xul"?>
@ -122,7 +123,7 @@
</menupopup>
</popupset>
<toolbox id="navigator-toolbox" class="toolbox-top" mode="icons" defaultmode="icons">
<toolbox id="navigator-toolbox" class="toolbox-top menubar-container" mode="icons" defaultmode="icons">
<!-- Menu -->
<toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
defaultset="menubar-items"

141
chrome/content/zotero/standalone/standalone.js
View file

@ -52,146 +52,7 @@ const ZoteroStandalone = new function() {
/**
* Run when standalone window first opens
*/
this.onLoad = function() {
// Fix window without menubar/titlebar when Zotero is closed in full-screen mode in OS X 10.11+
if (Zotero.isMac && window.document.documentElement.getAttribute('sizemode') == 'fullscreen') {
window.document.documentElement.setAttribute('sizemode', 'normal');
}
// Create tab bar by default
document.documentElement.setAttribute('drawintitlebar', true);
document.documentElement.setAttribute('tabsintitlebar', true);
if (Zotero.isMac) {
document.documentElement.setAttribute('chromemargin', '0,-1,-1,-1');
}
else {
document.documentElement.setAttribute('chromemargin', '0,2,2,2');
}
if (Zotero.isWin) {
let windowIcon = document.querySelector(".titlebar-icon");
// Simulate Windows window control
windowIcon.addEventListener("dblclick", (ev) => {
if (ev.button !== 0) {
return;
}
window.close();
});
const DBLCLICK_INTERVAL = 300;
let leftClicked = false;
let simulatingClick = false;
windowIcon.addEventListener("click", (ev) => {
// If already/about to open, do nothing.
if (simulatingClick || leftClicked) {
return;
}
// Left-click: open at icon
if (ev.button === 0) {
leftClicked = true;
// Reset leftClicked flag to allow open again
const onWindowClick = (ev) => {
leftClicked = false;
window.removeEventListener("click", onWindowClick);
}
// Delay to allow dblclick happen
setTimeout(() => {
// Clicking inside image (36*36)
openWindowMenu(2, 35, ()=>{
setTimeout(()=>window.addEventListener("click", onWindowClick), 0);
});
}, DBLCLICK_INTERVAL);
return;
}
// Right-click: open at cursor
if (ev.button === 2) {
openWindowMenu();
}
/**
* What we do here:
* We want to open the window menu when clicking the window icon.
* Why we do this way:
* The window menu is a native menu, which is not accessible from JS.
* Firefox didn't expose this to the JS level (they do at a C++ level),
* which forces us to simulate a native right-click on a `-moz-window-drag: drag` element.
* How we do this:
* 1. temporarily change the -moz-window-drag of the icon after clicking,
* 2. simulate a native right-click (which triggers the window menu),
* 3. change the -moz-window-drag back to no-drag.
* The function is to open window menu. If X or Y not given, use click position.
*/
function openWindowMenu(clientX = undefined, clientY = undefined, callback = undefined) {
simulatingClick = true;
windowIcon.style["-moz-window-dragging"] = "drag";
const resolution = windowUtils.getResolution();
const scaleValue = window.devicePixelRatio;
const getX = (inputX) => {
let winInnerOffsetX
= window.top.mozInnerScreenX
+ (window.mozInnerScreenX - window.top.mozInnerScreenX) * resolution;
return (
(inputX * resolution + winInnerOffsetX)* scaleValue
);
};
const getY = (inputY) => {
let winInnerOffsetY
= window.top.mozInnerScreenY
+ (window.mozInnerScreenY - window.top.mozInnerScreenY) * resolution;
return (
(inputY * resolution + winInnerOffsetY) * scaleValue
);
};
const x = getX(clientX ?? ev.x);
const y = getY(clientY ?? ev.y);
// Following implementation from https://searchfox.org/mozilla-central/rev/ffdc4971dc18e1141cb2a90c2b0b776365650270/testing/mochitest/tests/SimpleTest/EventUtils.js#1323
windowUtils.sendNativeMouseEvent(
x,
y,
windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_DOWN,
2, // button
0, // modifierFlags
windowIcon,
function () {
windowUtils.sendNativeMouseEvent(
x,
y,
windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_UP,
2, // button
0, // modifierFlags
windowIcon,
{
observe: (_subject, topic, _data) => {
if (topic == "mouseevent") {
if (typeof clientX !== "undefined" || typeof clientY !== "undefined")
{
// Move mouse back if the click position is given
windowUtils.sendNativeMouseEvent(
getX(ev.x),
getY(ev.y),
windowUtils.NATIVE_MOUSE_MESSAGE_MOVE,
0, // button
0, // modifierFlags
windowIcon
);
}
windowIcon.style["-moz-window-dragging"] = "no-drag";
callback && callback();
simulatingClick = false;
}
},
},
);
}
);
}
});
}
this.onLoad = function () {
this.switchMenuType('library');
this._notifierID = Zotero.Notifier.registerObserver(
{

173
chrome/content/zotero/titlebar.js Normal file
View file

@ -0,0 +1,173 @@
/*
***** BEGIN LICENSE BLOCK *****
Copyright © 2024 Center for History and New Media
George Mason University, Fairfax, Virginia, USA
http://zotero.org
This file is part of Zotero.
Zotero is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Zotero is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Zotero. If not, see <http://www.gnu.org/licenses/>.
***** END LICENSE BLOCK *****
*/
(() => {
let platforms = document.querySelector("window")?.getAttribute("drawintitlebar-platforms");
if (platforms) {
if (Zotero.isMac && !platforms.includes("mac")) return;
else if (Zotero.isWin && !platforms.includes("win")) return;
else if (Zotero.isLinux && !platforms.includes("linux")) return;
}
window.addEventListener("load", function () {
// Fix window without menubar/titlebar when Zotero is closed in full-screen mode in OS X 10.11+
if (Zotero.isMac && window.document.documentElement.getAttribute('sizemode') == 'fullscreen') {
window.document.documentElement.setAttribute('sizemode', 'normal');
}
// Create tab bar by default
document.documentElement.setAttribute('drawintitlebar', true);
document.documentElement.setAttribute('tabsintitlebar', true);
if (Zotero.isMac) {
document.documentElement.setAttribute('chromemargin', '0,-1,-1,-1');
}
else {
document.documentElement.setAttribute('chromemargin', '0,2,2,2');
}
if (Zotero.isWin) {
let windowIcon = document.querySelector(".titlebar-icon");
// Simulate Windows window control
windowIcon.addEventListener("dblclick", (ev) => {
if (ev.button !== 0) {
return;
}
window.close();
});
const DBLCLICK_INTERVAL = 300;
let leftClicked = false;
let simulatingClick = false;
windowIcon.addEventListener("click", (ev) => {
// If already/about to open, do nothing.
if (simulatingClick || leftClicked) {
return;
}
// Left-click: open at icon
if (ev.button === 0) {
leftClicked = true;
// Reset leftClicked flag to allow open again
const onWindowClick = () => {
leftClicked = false;
window.removeEventListener("click", onWindowClick);
};
// Delay to allow dblclick happen
setTimeout(() => {
// Clicking inside image (36*36)
openWindowMenu(2, 35, () => {
setTimeout(() => window.addEventListener("click", onWindowClick), 0);
});
}, DBLCLICK_INTERVAL);
return;
}
// Right-click: open at cursor
if (ev.button === 2) {
openWindowMenu();
}
/**
* What we do here:
* We want to open the window menu when clicking the window icon.
* Why we do this way:
* The window menu is a native menu, which is not accessible from JS.
* Firefox didn't expose this to the JS level (they do at a C++ level),
* which forces us to simulate a native right-click on a `-moz-window-drag: drag` element.
* How we do this:
* 1. temporarily change the -moz-window-drag of the icon after clicking,
* 2. simulate a native right-click (which triggers the window menu),
* 3. change the -moz-window-drag back to no-drag.
* The function is to open window menu. If X or Y not given, use click position.
*/
function openWindowMenu(clientX = undefined, clientY = undefined, callback = undefined) {
simulatingClick = true;
windowIcon.style["-moz-window-dragging"] = "drag";
const resolution = windowUtils.getResolution();
const scaleValue = window.devicePixelRatio;
const getX = (inputX) => {
let winInnerOffsetX
= window.top.mozInnerScreenX
+ (window.mozInnerScreenX - window.top.mozInnerScreenX) * resolution;
return (
(inputX * resolution + winInnerOffsetX) * scaleValue
);
};
const getY = (inputY) => {
let winInnerOffsetY
= window.top.mozInnerScreenY
+ (window.mozInnerScreenY - window.top.mozInnerScreenY) * resolution;
return (
(inputY * resolution + winInnerOffsetY) * scaleValue
);
};
const x = getX(clientX ?? ev.x);
const y = getY(clientY ?? ev.y);
// Following implementation from https://searchfox.org/mozilla-central/rev/ffdc4971dc18e1141cb2a90c2b0b776365650270/testing/mochitest/tests/SimpleTest/EventUtils.js#1323
windowUtils.sendNativeMouseEvent(
x,
y,
windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_DOWN,
2, // button
0, // modifierFlags
windowIcon,
function () {
windowUtils.sendNativeMouseEvent(
x,
y,
windowUtils.NATIVE_MOUSE_MESSAGE_BUTTON_UP,
2, // button
0, // modifierFlags
windowIcon,
{
observe: (_subject, topic, _data) => {
if (topic == "mouseevent") {
if (typeof clientX !== "undefined" || typeof clientY !== "undefined") {
// Move mouse back if the click position is given
windowUtils.sendNativeMouseEvent(
getX(ev.x),
getY(ev.y),
windowUtils.NATIVE_MOUSE_MESSAGE_MOVE,
0, // button
0, // modifierFlags
windowIcon
);
}
windowIcon.style["-moz-window-dragging"] = "no-drag";
callback && callback();
simulatingClick = false;
}
},
},
);
}
);
}
});
}
}, { once: true });
})();

2
chrome/content/zotero/tools/csledit.js
View file

@ -279,7 +279,7 @@ var Zotero_CSL_Editor = new function () {
}
</style>
</head>
<body id="csl-edit-preview"><div class="${containerClass}">${content}</div></body>
<body id="csl-edit-preview"><div class="${containerClass} zotero-dialog">${content}</div></body>
</html>`;
};
}();

3
chrome/content/zotero/tools/csledit.xhtml
View file

@ -33,7 +33,6 @@
<window
id="csl-edit"
class="zotero-window"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
onload="Zotero_CSL_Editor.init();"
@ -42,7 +41,7 @@
<script src="chrome://zotero/content/include.js"/>
<script src="csledit.js"/>
<vbox class="zotero-window" flex="1">
<vbox flex="1">
<vbox class="csl-edit-toolbars">
<hbox class="csl-edit-toolbar">
<button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/>

1
chrome/content/zotero/zoteroPane.xhtml
View file

@ -64,6 +64,7 @@
Services.scriptloader.loadSubScript("resource://zotero/require.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/standalone/standalone.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/titlebar.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/platformKeys.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/editMenuOverlay.js", this);

6
chrome/skin/default/zotero/itemPane.css
View file

@ -55,12 +55,6 @@
}
/* Buttons in trash and feed views */
.zotero-item-pane-top-buttons {
-moz-appearance: toolbar;
-moz-box-pack: center;
min-height: 3em;
}
.zotero-item-pane-top-buttons > button {
-moz-box-flex: 1
}

2
scss/_zotero.scss
View file

@ -34,6 +34,7 @@
@import "components/icons";
@import "components/import-wizard";
@import "components/item-tree";
@import "components/listheader";
@import "components/longTagFixer";
@import "components/mainWindow";
@import "components/menu";
@ -49,6 +50,7 @@
@import "components/syncButtonTooltip";
@import "components/tabBar";
@import "components/tagSelector";
@import "components/titleBar";
@import "components/splitter";
@import "components/textLink";
@import "components/toolbar";

24
scss/abstracts/_mixins.scss
View file

@ -236,10 +236,22 @@
components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).
Box-shadow is used to be able to set the radius.
*/
@mixin focus-ring {
&:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) -moz-accent-color;
border-radius: var(--radius-focus-border);
@mixin focus-ring($thin: false, $selector: focus-visible) {
&:#{$selector} {
@media (-moz-platform: windows) {
outline: var(--color-focus-outer-border) solid var(--width-focus-outer-border);
outline-offset: var(--width-focus-border);
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
}
@media not (-moz-platform: windows) {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
@if $thin {
--width-focus-border: 1px;
--color-focus-border: var(--color-accent);
}
}
}
}
}

51
scss/base/_base.scss
View file

@ -1,30 +1,25 @@
:root {
font-family: system-ui, -apple-system, sans-serif;
font-size: 13px;
font-style: normal;
line-height: 1.3333333333;
@media (-moz-platform: windows) {
--color-accent: var(--accent-blue);
@include light-dark(--color-focus-border, #000, #fff);
--width-focus-border: 2px;
}
@media (-moz-platform: macos) {
--color-accent: SelectedItem;
--color-focus-border: color-mix(in srgb, var(--color-accent) 50%, transparent);
--width-focus-border: 3px;
}
@media (-moz-platform: linux) {
--color-accent: SelectedItem;
--color-focus-border: var(--color-accent);
--width-focus-border: 2px;
}
--color-focus-search: color-mix(in srgb, var(--color-accent) 50%, transparent);
}
#zotero-collections-pane, #zotero-item-pane {
background: var(--material-sidepane);
}
#zotero-title-bar {
border-bottom: var(--material-panedivider);
font-family: system-ui, -apple-system, sans-serif;
font-size: 13px;
font-style: normal;
line-height: 1.3333333333;
@media (-moz-platform: windows) {
--color-accent: var(--accent-blue);
@include light-dark(--color-focus-outer-border, var(--fill-primary), var(--accent-white));
@include light-dark(--color-focus-border, var(--accent-white), #00000080);
--width-focus-outer-border: 2px;
--width-focus-border: 1px;
}
@media (-moz-platform: macos) {
--color-accent: SelectedItem;
--color-focus-border: color-mix(in srgb, var(--color-accent) 50%, transparent);
--width-focus-border: 3px;
}
@media (-moz-platform: linux) {
--color-accent: SelectedItem;
--color-focus-border: -moz-accent-color;
--width-focus-border: 2px;
}
// Only used on Windows
--color-form-element-base-background: var(--color-background);
}

4
scss/components/_clicky.scss
View file

@ -4,11 +4,11 @@
&:not([disabled=true]) {
&:hover {
background-color: var(--fill-quinary) !important;
background: var(--fill-quinary) !important;
}
&:active {
background-color: var(--fill-quarternary) !important;
background: var(--fill-quarternary) !important;
}
}
}

1
scss/components/_collection-tree.scss
View file

@ -14,6 +14,7 @@ $icons: (
#zotero-collections-pane {
min-width: $min-width-collections-pane;
width: $min-width-collections-pane;
background: var(--material-sidepane);
}
#zotero-collections-tree-container {

2
scss/components/_item-tree.scss
View file

@ -32,6 +32,8 @@
}
.first-column {
padding-inline-start: 36px;
&::before {
content: "";
display: inline-block;

1
scss/components/_itemPane.scss
View file

@ -3,4 +3,5 @@
min-width: $min-width-item-pane;
/* Need a min height to prevent layout issues in stacked mode */
min-height: 168px;
background: var(--material-sidepane);
}

56
scss/components/_listheader.scss Normal file
View file

@ -0,0 +1,56 @@
/* Adapted from Mozilla common-shared.css */
/* https://searchfox.org/mozilla-central/rev/2f5ed7b7244172d46f538051250b14fb4d8f1a5f/toolkit/themes/shared/in-content/common-shared.css */
select[size][multiple],
listheader,
richlistbox {
appearance: none;
margin-inline: 0;
background: var(--material-background);
border: var(--material-panedivider);
}
treecol {
appearance: none;
border: none;
background: transparent;
&:hover {
background: var(--material-mix-quinary);
}
&:hover:active {
background: var(--material-mix-quarternary);
}
}
listheader + richlistbox {
margin-top: 0;
border-top: none;
}
select[size][multiple] > option,
treechildren::-moz-tree-row {
padding: 0.3em;
margin: 0;
border: none;
background-image: none;
}
richlistitem hbox {
overflow: hidden;
}
richlistitem[selected] menulist:focus-visible {
outline-offset: -2px;
}
richlistbox[disabled] {
opacity: 0.6;
pointer-events: none;
}
dialog richlistbox > richlistitem[disabled] {
font-weight: 600;
}

111
scss/components/_mainWindow.scss
View file

@ -1,114 +1,3 @@
// Styling for displaying tabs in the title bar
:root:not([legacytoolbar="true"]) {
& {
--tab-min-height: 36px;
--tabs-border-color: rgba(0,0,0,.3);
--tabline-color: #0a84ff;
--toolbar-non-lwt-bgcolor: #f9f9fa;
--toolbar-non-lwt-textcolor: #0c0c0d;
--toolbar-non-lwt-bgimage: none;
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
--chrome-content-separator-color: hsl(0, 0%, 60%);
--toolbarbutton-border-radius: 3px;
--toolbarbutton-icon-fill-opacity: .85;
--toolbarbutton-hover-background: hsla(0, 0%, 100%, .1)
linear-gradient(hsla(0, 0%, 100%, .3),
hsla(0, 0%, 100%, .1)) no-repeat;
--toolbarbutton-hover-bordercolor: hsla(0, 0%, 0%, .2);
--toolbarbutton-header-bordercolor: hsla(0, 0%, 0%, .2);
--toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0, 0%, 100%, .5),
0 1px 0 hsla(0, 0%, 100%, .5) inset;
--toolbarbutton-active-background: hsla(0, 0%, 0%, .02)
linear-gradient(hsla(0, 0%, 0%, .12),
transparent) border-box;
--toolbarbutton-active-bordercolor: hsla(0, 0%, 0%, .3);
--toolbarbutton-active-boxshadow: 0 1px 0 hsla(0, 0%, 100%, .5),
0 1px 0 hsla(0, 0%, 0%, .05) inset,
0 1px 1px hsla(0, 0%, 0%, .2) inset;
--toolbarbutton-inactive-bordercolor: rgba(0, 0, 0, 0.1);
--toolbarbutton-inactive-boxshadow: 0 1px 0 hsla(0, 0%, 0%, .05) inset;
--toolbarbutton-checkedhover-backgroundcolor: hsla(0, 0%, 0%, .09);
--toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
--lwt-header-image: none;
--row-grouped-header-bg-color: #d5d5d5;
--row-grouped-header-bg-color-selected: #3874d1;
--panel-separator-color: hsla(210, 4%, 10%, .14);
--arrowpanel-dimmed: hsla(0, 0%, 80%, .3);
--arrowpanel-dimmed-further: hsla(0, 0%, 80%, .45);
--splitter-color: #bdbdbd;
--urlbar-popup-url-color: hsl(210, 77%, 47%);
--urlbar-popup-action-color: hsl(178, 100%, 28%);
--autocomplete-popup-background: -moz-field;
--autocomplete-popup-color: -moz-fieldtext;
--autocomplete-popup-border-color: ThreeDShadow;
--autocomplete-popup-highlight-background: Highlight;
--autocomplete-popup-highlight-color: HighlightText;
/* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
--space-above-tabbar: 0px;
}
&:-moz-window-inactive {
--toolbar-bgcolor: -moz-mac-chrome-inactive;
}
/* ::::: Tabs in Titlebar :::::: */
&:not([chromemargin]) > #titlebar {
display: none;
}
/**
* For tabs in titlebar on OS X, we stretch the titlebar down so that the
* tabstrip can overlap it.
*/
&[tabsintitlebar] > #titlebar {
min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
}
&:not([tabsintitlebar]) .titlebar-placeholder {
visibility: collapse;
}
@media (-moz-platform: macos) {
/* NB: these would be margin-inline-start/end if it wasn't for the fact that OS X
* doesn't reverse the order of the items in the titlebar in RTL mode. */
.titlebar-placeholder[type="caption-buttons"],
.titlebar-buttonbox {
margin-right: 12px;
margin-left: 12px;
}
.titlebar-buttonbox {
-moz-appearance: -moz-window-button-box;
}
.titlebar-icon {
display: none;
}
}
}
:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
display: none;
}
#titlebar {
display: flex;
align-items: center;
-moz-window-dragging: drag;
menu {
font-size: var(--zotero-font-size);
}
}
:is(panel)::part(content) {
--panel-background: var(--material-toolbar);
}

7
scss/components/_reader.scss
View file

@ -2,4 +2,11 @@ menupopup.tags-popup {
font: inherit;
min-width: 300px;
padding-inline: 8px;
@media (-moz-platform: windows) {
& > tags-box {
// padding-inline does not work on Windows
margin-inline: 8px;
}
}
}

20
scss/components/_richlistbox.scss
View file

@ -1,12 +1,20 @@
richlistbox {
richlistbox.theme-listbox {
background: var(--material-background);
border: var(--material-panedivider);
richlistitem {
color: var(--fill-primary);
&[selected=true] {
background: var(--color-accent);
}
--listitem-selectedBackground: var(--tag-gray);
--listitem-selectedFocusCurrentBackground: var(--color-accent);
--listitem-selectedTextColor: var(--accent-white);
--listitem-selectedBorder: transparent;
--listitem-selectedBottomBorder: transparent;
--listitem-selectedCurrentBorder: transparent;
--listitem-selectedFocusBorder: transparent;
--listitem-selectedFocusBottomBorder: transparent;
--listitem-selectedFocusCurrentBorder: transparent;
--listitem-selectedFocusBackground: var(--color-accent);
--listitem-selectedFocusColor: var(--accent-white);
--listitem-selectedColor: var(--accent-white);
--listitem-selectedFocusCurrentBottomBorder: transparent;
}
}

17
scss/components/_search.scss
View file

@ -4,9 +4,10 @@
height: 36px;
input {
background: var(--material-background);
background-color: var(--material-background);
border-radius: 5px;
border: var(--material-border-quinary);
// Overwrite input style on Windows
border: var(--material-border-quinary) !important;
color: var(--fill-primary);
flex: 1 0;
margin: 6px 0px;
@ -18,10 +19,8 @@
opacity: 1.0;
}
&:focus {
outline: none;
border-color: var(--color-focus-search);
box-shadow: 0 0 0 calc(var(--width-focus-border) - 1px) var(--color-focus-search);
@media not (-moz-platform: windows) {
@include focus-ring;
}
}
@ -54,10 +53,8 @@ search-textbox {
opacity: 1.0;
}
&:focus {
outline: none;
border-color: transparent;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-search);
@media not (-moz-platform: windows) {
@include focus-ring(false, focus);
}
}

6
scss/components/_tabsMenu.scss
View file

@ -8,7 +8,6 @@
padding: 7px;
border-radius: 5px;
--width-focus-border: 3px;
--radius-focus-border: 5px;
}
#zotero-tabs-menu-filter {
@ -17,7 +16,10 @@
border: 1px solid transparent;
padding-inline-start: 5px !important;
padding: 2px;
@include focus-ring;
@media not (-moz-platform: windows) {
@include focus-ring;
}
}
#zotero-tabs-menu-list {

9
scss/components/_tagSelector.scss
View file

@ -92,10 +92,7 @@
background-color: var(--fill-quarternary);
}
&:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
}
@include focus-ring;
.icon-css {
fill: var(--fill-secondary);
@ -117,9 +114,7 @@
padding: 2px 4px;
}
--width-focus-border: 1px;
--radius-focus-border: 5px;
@include focus-ring;
@include focus-ring(true);
&:hover {
background-color: var(--fill-quinary);

72
scss/components/_titleBar.scss Normal file
View file

@ -0,0 +1,72 @@
// Styling for displaying tabs in the title bar
:root:not([legacytoolbar="true"]) {
--tab-min-height: 36px;
& {
--autocomplete-popup-background: -moz-field;
--autocomplete-popup-color: -moz-fieldtext;
--autocomplete-popup-border-color: ThreeDShadow;
--autocomplete-popup-highlight-background: Highlight;
--autocomplete-popup-highlight-color: HighlightText;
/* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
--space-above-tabbar: 0px;
}
&:-moz-window-inactive {
--toolbar-bgcolor: -moz-mac-chrome-inactive;
}
/* ::::: Tabs in Titlebar :::::: */
&:not([chromemargin]) > #titlebar {
display: none;
}
/**
* For tabs in titlebar on OS X, we stretch the titlebar down so that the
* tabstrip can overlap it.
*/
&[tabsintitlebar] > #titlebar {
min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
}
&:not([tabsintitlebar]) .titlebar-placeholder {
visibility: collapse;
}
@media (-moz-platform: macos) {
/* NB: these would be margin-inline-start/end if it wasn't for the fact that OS X
* doesn't reverse the order of the items in the titlebar in RTL mode. */
.titlebar-placeholder[type="caption-buttons"],
.titlebar-buttonbox {
margin-right: 12px;
margin-left: 12px;
}
.titlebar-buttonbox {
-moz-appearance: -moz-window-button-box;
}
.titlebar-icon {
display: none;
}
}
}
:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
display: none;
}
#zotero-title-bar {
border-bottom: var(--material-panedivider);
}
#titlebar {
display: flex;
align-items: center;
-moz-window-dragging: drag;
menu {
font-size: var(--zotero-font-size);
}
}

5
scss/components/_toolbar.scss
View file

@ -42,11 +42,6 @@
min-width: 0;
width: 40px;
}
&:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
}
}
}

2
scss/components/_toolbarbutton.scss
View file

@ -27,6 +27,8 @@ toolbarbutton {
&:active, &[selected] {
background-color: var(--fill-quarternary);
}
@include focus-ring;
&:disabled,
&[disabled="true"] {

18
scss/components/_virtualized-table.scss
View file

@ -48,12 +48,8 @@
box-sizing: border-box;
&.label {
padding-inline-end: 4px;
}
&.label,
&.first-column {
padding-inline-start: 0;
padding-inline-end: 4px;
}
&.first-column,
@ -225,6 +221,9 @@
height: 1.83333333em; // 22px @ 12px font size
overflow: hidden;
border-bottom: 1px solid var(--material-border-quarternary);
padding-inline: 8px;
box-sizing: border-box;
padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
@include comfortable {
height: 2.33333333em; // 28px @ 12px font size
@ -270,10 +269,6 @@
background: var(--material-mix-quarternary);
}
&.first-column {
padding-inline-start: 36px;
}
.resizer {
background: linear-gradient(var(--fill-quarternary), var(--fill-quarternary)) no-repeat center/1px 66.666667%; // 14px @ 12px font size
cursor: col-resize;
@ -329,6 +324,7 @@
flex: 1 0;
max-width: 100%;
overflow: auto;
padding: 4px 8px 8px;
.cell {
text-overflow: ellipsis;
@ -340,6 +336,10 @@
// pointer-events are enabled, and we need to rerender the rows for selection
// before dragging.
pointer-events: none;
&.first-column {
padding-inline-start: 0;
}
}
}

29
scss/components/_window.scss
View file

@ -1,7 +1,28 @@
.zotero-window {
background: var(--material-sidepane);
@mixin zotero-window {
background: var(--material-sidepane);
--color-form-element-base-background: var(--material-sidepane);
}
.zotero-dialog {
background: var(--material-background);
@mixin zotero-dialog {
background: var(--material-background);
--color-form-element-base-background: var(--material-background);
}
window:root,
window:root > wizard,
body {
@include zotero-window();
}
window:root > dialog {
@include zotero-dialog();
}
// Can overwrite default style
window:root .zotero-window {
@include zotero-window();
}
window:root .zotero-dialog {
@include zotero-dialog();
}

28
scss/dialog-win.scss Normal file
View file

@ -0,0 +1,28 @@
// Override/enhance wizard styles
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "abstracts/utilities";
@import "abstracts/split-button";
@import "abstracts/svgicon";
@import "themes/light";
@import "themes/dark";
// Base
// --------------------------------------------------
@import "base/base";
@import "win/abstracts/mixins";
@import "win/components/button";
.dialog-button-box {
margin-top: 8px;
}

1
scss/elements/_collapsibleSection.scss
View file

@ -5,7 +5,6 @@ collapsible-section {
padding-block: 4px;
--width-focus-border: 2px;
--radius-focus-border: 5px;
:not(:last-child) > & {
border-bottom: 1px solid var(--fill-quinary);

16
scss/elements/_editableText.scss
View file

@ -68,14 +68,17 @@ editable-text {
}
.input {
--width-focus-border: 1px;
--radius-focus-border: 5px;
border-radius: 5px;
// No focus ring for read-only fields
&:read-only {
--width-focus-border: 0px;
--width-focus-outer-border: 0px;
}
@media not (-moz-platform: windows) {
@include focus-ring(true);
}
@include focus-ring;
// Necessary for consistent padding, even if it's actually an <input>
-moz-default-appearance: textarea;
@ -90,13 +93,12 @@ editable-text {
&:read-only, &:not(:focus) {
appearance: none;
background: transparent;
background: transparent !important;
}
&:hover:not(:read-only, :focus) {
border-radius: 5px;
background-color: var(--fill-quinary);
box-shadow: 0 0 0 1px var(--fill-quinary);
background: var(--fill-quinary) !important;
box-shadow: 0 0 0 1px var(--fill-quinary);
}
::placeholder {

8
scss/elements/_itemBox.scss
View file

@ -7,8 +7,6 @@ item-box {
&[hidden] {
display: none;
}
--width-focus-border: 1px;
--radius-focus-border: 5px;
#item-box {
width: 100%;
@ -27,7 +25,7 @@ item-box {
}
#item-type-menu {
@include focus-ring;
@include focus-ring(true);
margin: 0;
margin-inline-end: 5px !important;
flex: 1;
@ -57,7 +55,7 @@ item-box {
}
#item-type-menu:not(:hover):not(:active) {
background-color: transparent;
background: transparent !important;
}
#item-type-menu > .menulist-label-box {
@ -91,7 +89,7 @@ item-box {
/* creator type menu */
.creator-type-label {
@include focus-ring;
@include focus-ring(true);
display: inline-block;
// undo the padding so that the name is pushed to the end
margin-inline-end: -4px;

1
scss/elements/_paneHeader.scss
View file

@ -32,7 +32,6 @@ pane-header {
.menu-button toolbarbutton {
@include svgicon-menu("go-to", "universal", "20");
--radius-focus-border: 5px;
--width-focus-border: 2px;
@include focus-ring;
}

6
scss/elements/_quickSearchTextbox.scss
View file

@ -32,6 +32,7 @@ quick-search-textbox {
#zotero-tb-search-menu-button {
width: 36px;
height: 28px;
min-height: 28px;
// 6px padding + 16px icon width + 2px padding
padding-block: 0;
padding-inline: 24px 4px;
@ -45,10 +46,7 @@ quick-search-textbox {
color: var(--fill-secondary);
background: transparent;
&:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
}
@include focus-ring;
.button-menu-dropmarker {
display: none; /* Hide automatic dropmarker */

4
chrome/skin/default/zotero/errorReport.css → scss/errorReport.scss
View file

@ -3,10 +3,6 @@ description {
}
/* Intro pane */
#zotero-error-message {
background: #FFF;
}
#report-start {
display: flex;
flex-direction: column;

3
scss/linux/_errorReport.scss
View file

@ -1,3 +0,0 @@
#zotero-error-message {
color: #3d3d3d;
}

6
scss/mac/_titleBar.scss
View file

@ -1,3 +1,7 @@
#titlebar {
margin-bottom: calc(0px - var(--tab-min-height));
}
}
.menubar-container {
border: none;
}

2
scss/preferences.scss
View file

@ -42,6 +42,8 @@
min-height: 0;
-moz-box-flex: 1;
background-color: var(--material-sidepane);
// See scss/win/abstracts/mixin
--color-form-element-base-background: var(--material-sidepane);
color: var(--fill-primary);
}

6
scss/preferences/_cite.scss
View file

@ -20,3 +20,9 @@
{
width: 105px;
}
#styleManager-buttons {
button {
min-width: 0;
}
}

6
scss/preferences/_general.scss
View file

@ -17,3 +17,9 @@
.fileHandler-menu .menulist-icon {
height: 16px;
}
@media (-moz-platform: windows) {
button, menulist, radio, checkbox, input {
margin-block: 4px;
}
}

72
scss/scaffold.scss
View file

@ -29,7 +29,23 @@ $scaffold-toolbarbutton-icons: (
}
};
.menubar-container {
display: flex;
background: var(--material-sidepane);
border-bottom: var(--material-panedivider);
#main-menubar {
pointer-events: all;
}
}
#zotero-toolbar {
@media not (-moz-platform: macos) {
appearance: none;
background: var(--material-sidepane);
}
border-bottom: var(--material-panedivider);
toolbarbutton {
width: 28px;
height: 28px;
@ -71,10 +87,6 @@ tab {
grid-template-columns: 1fr max-content;
}
#tabpanel-metadata input {
height: 1.5em;
}
#metadata-bottom-row {
display: flex;
align-items: center;
@ -90,6 +102,7 @@ tab {
#output {
height:200px;
background: var(--material-background);
}
richlistbox {
@ -114,57 +127,6 @@ vbox > splitter {
cursor: row-rgb(4, 4, 4)e;
}
/* Adapted from Mozilla common-shared.css */
/* https://searchfox.org/mozilla-central/rev/2f5ed7b7244172d46f538051250b14fb4d8f1a5f/toolkit/themes/shared/in-content/common-shared.css */
select[size][multiple],
listheader,
richlistbox {
appearance: none;
margin-inline: 0;
background: var(--material-background);
border: var(--material-panedivider);
}
listheader {
padding-bottom: 1px;
}
treecol {
appearance: none;
border: none;
}
listheader + richlistbox {
margin-top: 0;
border-top: none;
}
select[size][multiple] > option,
treechildren::-moz-tree-row {
padding: 0.3em;
margin: 0;
border: none;
background-image: none;
}
richlistitem hbox {
overflow: hidden;
}
richlistitem[selected] menulist:focus-visible {
outline-offset: -2px;
}
richlistbox[disabled] {
opacity: 0.6;
pointer-events: none;
}
dialog richlistbox > richlistitem[disabled] {
font-weight: 600;
}
#left-tabbox {
margin: 5px;
}

1
scss/win/_menupopup.scss
View file

@ -8,6 +8,7 @@ menupopup, panel, #search-mode-popup {
menupopup {
menu, menuitem {
appearance: none !important;
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;

6
scss/win/_titleBar.scss
View file

@ -1,4 +1,6 @@
#toolbar-menubar {
// Need this to force show the menubar
display: initial;
// Allow right-click context menu on menubar
pointer-events: none;
visibility: visible;
@ -14,7 +16,9 @@
pointer-events: all;
}
#titlebar {
#titlebar,
.menubar-container {
appearance: none;
height :var(--tab-min-height);
-moz-box-pack: center;
pointer-events: none;

55
scss/win/abstracts/_mixins.scss Normal file
View file

@ -0,0 +1,55 @@
@mixin windows-form-element-base {
appearance: none;
padding: 0;
border: solid 1px transparent;
border-radius: 3px;
background-origin: border-box;
background-clip: padding-box, padding-box, border-box;
// Overwrite default background color
background-color: unset;
// Simulate linear-gradient border with border-radius using background-image
@include light-dark(--color-form-element-background, var(--color-background70), var(--fill-quinary));
@include light-dark(--color-form-element-border,
linear-gradient(180deg, rgba(0, 0, 0, 0.0578) 90.58%, rgba(0, 0, 0, 0.1622) 100%),
linear-gradient(180deg, rgba(255, 255, 255, 0.093) 0%, rgba(255, 255, 255, 0.0698) 9.57%));
background-image:
linear-gradient(var(--color-form-element-background), var(--color-form-element-background)),
// Must be non-transparent color
linear-gradient(var(--color-form-element-base-background), var(--color-form-element-base-background)),
var(--color-form-element-border),
}
@mixin windows-form-element-hover {
@include light-dark(--color-form-element-background, var(--color-background50), var(--fill-quarternary));
}
@mixin windows-form-element-active {
@include light-dark(--color-form-element-background, rgba(255, 255, 255, 0.3), var(--fill-senary));
--color-form-element-border: linear-gradient(var(--fill-quinary), var(--fill-quinary));
}
@mixin windows-form-element {
height: 28px;
@include windows-form-element-base;
&:not([disabled]) {
&:hover {
@include windows-form-element-hover;
}
&:active {
@include windows-form-element-active;
}
@include focus-ring;
}
&:disabled,
&[disabled] {
@include windows-form-element-active;
}
}

31
scss/win/components/_button.scss Normal file
View file

@ -0,0 +1,31 @@
// skip React Button element
button:not(.btn, [type=checkbox], [type=radio]),
input:is([type=button], [type=submit]) {
@include windows-form-element;
padding: 4px 11px 6px 11px;
margin-top: 2px;
&[default] {
color: var(--accent-white);
&:not([disabled]) {
--color-form-element-background: var(--accent-blue);
&:hover {
--color-form-element-background: rgba(64, 114, 229, 0.9);
}
&:active {
--color-form-element-background: rgba(64, 114, 229, 0.8);
}
@include focus-ring;
}
&[disabled] {
@include light-dark(--color-form-element-background, var(--fill-tertiary), var(--fill-quaternary));
--color-form-element-border: linear-gradient(transparent, transparent);
}
}
}

126
scss/win/components/_input.scss Normal file
View file

@ -0,0 +1,126 @@
@mixin windows-input-hover {
@media (prefers-color-scheme: light) {
background-color: var(--color-background50);
background-image: none;
}
@media (prefers-color-scheme: dark) {
background-color: var(--fill-quarternary);
background-image: none;
}
}
@mixin windows-input-active {
outline: none;
background-clip: border-box, padding-box;
@media (prefers-color-scheme: light) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--accent-blue);
background-color: unset;
background-image:
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
}
@media (prefers-color-scheme: dark) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--accent-blue);
background-color: unset;
background-image:
linear-gradient(to top, var(--accent-blue) 2px, transparent 2px 100%),
linear-gradient(var(--fill-senary), var(--fill-senary));
}
}
@mixin windows-input-disabled {
@media (prefers-color-scheme: light) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--fill-quinary);
background-color: var(--color-background70);
background-image: none;
}
@media (prefers-color-scheme: dark) {
border: 1px solid var(--fill-quinary);
border-bottom-color: var(--fill-quinary);
background-color: var(--fill-senary);
background-image: none;
}
}
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 {
appearance: none;
height: 26px;
padding: 0;
padding-inline-start: 5px;
border: solid 1px transparent;
border-radius: 3px;
background-origin: border-box;
background-clip: padding-box;
// Overwrite default background color
background-color: unset;
@media (prefers-color-scheme: light) {
border: 1px solid rgba(0, 0, 0, 0.0578);
border-bottom-color: rgba(0, 0, 0, 0.4458);
background-color: var(--color-background70);
}
@media (prefers-color-scheme: dark) {
border: 1px solid rgba(255, 255, 255, 0.08);
border-bottom-color: rgba(255, 255, 255, 0.5442);
background-color: var(--fill-quinary);
}
&:not([disabled]):not([readonly]) {
&::placeholder {
color: var(--fill-secondary);
}
&:hover {
@include windows-input-hover;
}
&:active,
&:focus,
&:focus-visible {
@include windows-input-active;
}
&::selection {
background-color: var(--accent-blue);
color: var(--accent-white);
}
&:-moz-window-inactive {
&::selection {
background-color: var(--tag-gray);
}
}
}
&:disabled,
&:read-only {
&::placeholder {
color: var(--fill-tertiary);
}
&::selection {
background-color: var(--tag-gray);
color: var(--accent-white);
}
@include windows-input-disabled;
}
}
textarea {
height: unset;
}

24
scss/win/components/_menulist.scss Normal file
View file

@ -0,0 +1,24 @@
menulist {
@include windows-form-element;
padding: 4px 11px 6px 11px;
&:focus-visible {
&::part(label-box) {
outline: none;
}
}
&[open] {
@include windows-form-element-active;
// Overwrite hover status
&:hover {
@include windows-form-element-active;
}
}
&::part(dropmarker) {
margin-top: 0;
}
}

67
scss/win/components/_tabbox.scss Normal file
View file

@ -0,0 +1,67 @@
tabbox {
--color-form-element-base-background: var(--color-sidepane);
tabs {
position: relative;
z-index: 1;
background: transparent;
spacer:first-of-type {
-moz-box-flex: 1;
}
tab {
appearance: none;
height: 28px;
margin-top: 0;
margin-bottom: -14px;
padding: 0;
// Since the tab with opacity is weird, we just use hard-coded colors
@include light-dark(--tabbox-tab-background, #ededed, #252525);
background: var(--tabbox-tab-background);
border-block: 1px solid var(--fill-quinary);
border-inline: 1px solid var(--tabbox-tab-background);
&:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid var(--fill-quinary);
}
&:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid var(--fill-quinary);
}
@include focus-ring;
.tab-middle {
outline: none !important;
padding: 4px 11px 5px 11px;
}
&[visuallyselected=true] {
tab {
border-radius: 4px;
}
.tab-middle {
@include windows-form-element-base;
padding: 4px 11px 5px 11px;
border-radius: 4px;
}
}
}
}
tabpanels {
appearance: none;
color-scheme: inherit;
background: var(--color-sidepane);
border: 1px solid var(--fill-quinary);
border-radius: 8px;
// 8 (original) + 14 (from tabs)
padding-top: 22px;
}
}

13
scss/win/elements/_editableText.scss Normal file
View file

@ -0,0 +1,13 @@
editable-text {
.input {
height: unset;
// Disable focus ring
outline: none;
padding-inline-start: unset;
&:not(:focus, :focus-visible),
&:read-only {
border: none !important;
}
}
}

1
scss/win/elements/_itemBox.scss
View file

@ -23,5 +23,6 @@ item-box {
margin: 0 !important;
margin-inline-start: 1px !important;
margin-inline-end: 5px !important;
height: unset;
}
}

23
scss/wizard-win.scss Normal file
View file

@ -0,0 +1,23 @@
// Override/enhance wizard styles
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "abstracts/utilities";
@import "abstracts/split-button";
@import "abstracts/svgicon";
@import "themes/light";
@import "themes/dark";
// Base
// --------------------------------------------------
@import "base/base";
@import "win/abstracts/mixins";
@import "win/components/button"

1
scss/zotero-unix.scss
View file

@ -6,7 +6,6 @@
@import "linux/createParent";
@import "linux/editable";
@import "linux/errorReport";
@import "linux/feedSettings";
@import "linux/menu";
@import "linux/menupopup";

10
scss/zotero-win.scss
View file

@ -4,6 +4,8 @@
// Windows specific
// --------------------------------------------------
@import "win/abstracts/mixins";
@import "win/createParent";
@import "win/tabBar";
@import "win/titleBar";
@ -12,3 +14,11 @@
// Elements
@import "win/elements/itemBox";
@import "win/elements/editableText";
// Components
@import "win/components/button";
@import "win/components/input";
@import "win/components/menulist";
@import "win/components/tabbox";