Preferences redesign

This commit is contained in:
windingwind 2023-12-22 13:43:05 +08:00 committed by Dan Stillman
parent c6505d3e39
commit 843d23bbd2
23 changed files with 659 additions and 632 deletions

View file

@ -86,9 +86,8 @@
<html:div id="prefs-inner-container">
<html:div id="prefs-search-container">
<html:div id="prefs-subpane-back-button-container">
<button
<toolbarbutton
id="prefs-subpane-back-button"
label=""
aria-label="&zotero.pdfReader.back;"
hidden="true"/>
</html:div>

View file

@ -31,7 +31,7 @@ Zotero.PreferencePanes = {
{
id: 'zotero-prefpane-general',
label: 'zotero.preferences.prefpane.general',
image: 'chrome://zotero/skin/prefs-general.png',
image: 'chrome://zotero/skin/20/universal/cog.svg',
src: 'chrome://zotero/content/preferences/preferences_general.xhtml',
scripts: ['chrome://zotero/content/preferences/preferences_general.js'],
defaultXUL: true,
@ -40,7 +40,7 @@ Zotero.PreferencePanes = {
{
id: 'zotero-prefpane-sync',
label: 'zotero.preferences.prefpane.sync',
image: 'chrome://zotero/skin/prefs-sync.png',
image: 'chrome://zotero/skin/20/universal/sync.svg',
src: 'chrome://zotero/content/preferences/preferences_sync.xhtml',
scripts: ['chrome://zotero/content/preferences/preferences_sync.js'],
defaultXUL: true,
@ -49,7 +49,7 @@ Zotero.PreferencePanes = {
{
id: 'zotero-prefpane-export',
label: 'zotero.preferences.prefpane.export',
image: 'chrome://zotero/skin/prefs-export.png',
image: 'chrome://zotero/skin/20/universal/export.svg',
src: 'chrome://zotero/content/preferences/preferences_export.xhtml',
scripts: ['chrome://zotero/content/preferences/preferences_export.js'],
defaultXUL: true,
@ -58,7 +58,7 @@ Zotero.PreferencePanes = {
{
id: 'zotero-prefpane-cite',
label: 'zotero.preferences.prefpane.cite',
image: 'chrome://zotero/skin/prefs-styles.png',
image: 'chrome://zotero/skin/20/universal/cite.svg',
src: 'chrome://zotero/content/preferences/preferences_cite.xhtml',
scripts: ['chrome://zotero/content/preferences/preferences_cite.js'],
defaultXUL: true,
@ -67,7 +67,7 @@ Zotero.PreferencePanes = {
{
id: 'zotero-prefpane-advanced',
label: 'zotero.preferences.prefpane.advanced',
image: 'chrome://zotero/skin/prefs-advanced.png',
image: 'chrome://zotero/skin/20/universal/wrench-screwdriver.svg',
src: 'chrome://zotero/content/preferences/preferences_advanced.xhtml',
scripts: ['chrome://zotero/content/preferences/preferences_advanced.js'],
defaultXUL: true,

View file

@ -0,0 +1,10 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1132_37395)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 11H17V9.75H3V11ZM3 6.75H17V8H3V6.75ZM3 12.75H12V14H3V12.75ZM6 4.5H3.5V2L4.5 0H5.5L4.5 2H6V4.5ZM1 0H2L1 2H2.5V4.5H0V2L1 0ZM16.5 15.5H14V18H15.5L14.5 20H15.5L16.5 18V15.5ZM18 20H19L20 18V15.5H17.5V18H19L18 20Z" fill="context-fill"/>
</g>
<defs>
<clipPath id="clip0_1132_37395">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 534 B

View file

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1256 6.09925L14.7636 6.70249L15.0915 7.32492C15.2533 7.63216 15.388 7.95563 15.4925 8.29221L15.7011 8.96367L16.3832 9.1342L17.7502 9.47597V10.524L16.3832 10.8658L15.7011 11.0363L15.4925 11.7078C15.388 12.0444 15.2533 12.3679 15.0914 12.6752L14.7636 13.2976L15.1255 13.9009L15.8507 15.1095L15.1096 15.8506L13.901 15.1254L13.2977 14.7635L12.6753 15.0914C12.368 15.2532 12.0444 15.388 11.7078 15.4925L11.0363 15.701L10.8658 16.3831L10.5241 17.75H9.47603L9.13431 16.3831L8.96378 15.701L8.29231 15.4925C7.9557 15.388 7.63219 15.2533 7.32492 15.0914L6.70249 14.7635L6.09924 15.1255L4.89071 15.8506L4.14962 15.1095L4.8747 13.9011L5.23666 13.2978L4.90876 12.6753C4.74685 12.368 4.61209 12.0444 4.50755 11.7077L4.29905 11.0362L3.61694 10.8657L2.25024 10.524V9.47597L3.61694 9.1343L4.29905 8.96377L4.50755 8.29229C4.61208 7.95564 4.74681 7.6321 4.90869 7.32479L5.23657 6.70235L4.87462 6.0991L4.14944 4.89047L4.89053 4.14938L6.09916 4.87456L6.70241 5.23651L7.32485 4.90863C7.63215 4.74676 7.95567 4.61203 8.29231 4.5075L8.96378 4.299L9.13431 3.6169L9.47603 2.25H10.5241L10.8658 3.6169L11.0363 4.299L11.7078 4.5075C12.0445 4.61204 12.368 4.74678 12.6753 4.90867L13.2978 5.23656L13.9011 4.8746L15.1098 4.14936L15.8509 4.89045L15.1256 6.09925ZM19.0002 11.5V8.5L16.6863 7.92152C16.5588 7.511 16.3946 7.11667 16.1975 6.74237L17.4249 4.69669L15.3035 2.57536L13.2579 3.80274C12.8835 3.60552 12.4891 3.44123 12.0785 3.31373L11.5001 1H8.50006L7.92163 3.31373C7.51104 3.44122 7.11664 3.60549 6.74228 3.80269L4.69676 2.57538L2.57544 4.6967L3.80275 6.74222C3.60554 7.11659 3.44127 7.51101 3.31377 7.92162L1.00024 8.5V11.5L3.31377 12.0784C3.44128 12.489 3.60559 12.8835 3.80283 13.2579L2.57563 15.3033L4.69695 17.4246L6.74236 16.1974C7.1167 16.3945 7.51107 16.5588 7.92163 16.6863L8.50006 19H11.5001L12.0785 16.6863C12.4891 16.5588 12.8835 16.3945 13.2578 16.1973L15.3034 17.4246L17.4247 15.3033L16.1974 13.2578C16.3946 12.8834 16.5588 12.4891 16.6863 12.0785L19.0002 11.5ZM9.99998 14.25C12.3472 14.25 14.25 12.3472 14.25 10C14.25 7.65279 12.3472 5.75 9.99998 5.75C7.65277 5.75 5.74998 7.65279 5.74998 10C5.74998 12.3472 7.65277 14.25 9.99998 14.25ZM13 10C13 11.6569 11.6568 13 9.99998 13C8.34313 13 6.99998 11.6569 6.99998 10C6.99998 8.34315 8.34313 7 9.99998 7C11.6568 7 13 8.34315 13 10Z" fill="context-fill"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 7.11609L5.88388 7.99997L9.375 4.50886V14H10.625V4.50886L14.1161 7.99997L15 7.11609L10 2.11609L5 7.11609ZM2.25 12H1V18H19V12H17.75V16.75H2.25V12Z" fill="context-fill"/>
</svg>

After

Width:  |  Height:  |  Size: 323 B

View file

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00016 4.5L6.49991 3L2.99991 1L0.999914 3L2.99991 6.5L4.49991 7L6.79236 9.29245L2.35482 12.7346C1.96238 13.039 1.63922 13.4234 1.40682 13.8623C1.17442 14.3013 1.03809 14.7847 1.00691 15.2803C0.975721 15.776 1.05039 16.2727 1.22595 16.7373C1.4015 17.2019 1.67393 17.6238 2.02513 17.975C2.37632 18.3262 2.79824 18.5986 3.26284 18.7741C3.72744 18.9497 4.22408 19.0244 4.71977 18.9932C5.21545 18.962 5.69882 18.8257 6.13775 18.5933C6.57669 18.3609 6.96113 18.0377 7.26554 17.6453L9.66634 14.5502L13.2323 18.1161C14.2086 19.0924 15.7915 19.0924 16.7678 18.1161L18.1162 16.7678C19.0925 15.7915 19.0925 14.2086 18.1162 13.2322L14.869 9.98511C17.1817 9.7974 19 7.86106 19 5.50002C19 4.98065 18.912 4.48184 18.7501 4.01766C18.6042 3.59931 18.3983 3.2091 18.1427 2.85734L15.5 5.50002L14.5 4.50003L17.1427 1.85734C16.7909 1.60171 16.4007 1.39579 15.9824 1.24989C15.5182 1.08801 15.0194 1.00003 14.5 1.00003C12.0147 1.00003 10 3.01474 10 5.50002C10 5.90926 10.0546 6.30574 10.157 6.68257L9.60832 7.10816L7.00016 4.5ZM14.1162 17.2322L10.4386 13.5546L13.161 10.0449L17.2323 14.1161C17.7204 14.6043 17.7204 15.3957 17.2323 15.8839L15.8839 17.2322C15.3958 17.7204 14.6043 17.7204 14.1162 17.2322ZM8.61278 7.88038L6.11627 5.38388L5.90769 5.1753L5.81436 4.89546L5.46518 3.84841L3.20869 2.55899L2.5589 3.20878L3.84827 5.46517L4.8952 5.81415L5.17514 5.90746L5.3838 6.11612L7.7879 8.52022L8.61278 7.88038ZM14.9513 2.28097C14.8039 2.26057 14.6533 2.25003 14.5 2.25003C12.7051 2.25003 11.25 3.7051 11.25 5.50002C11.25 5.79757 11.2897 6.08389 11.3633 6.35489C11.4956 6.842 11.322 7.36089 10.9231 7.67026L3.12096 13.7222C2.86868 13.9179 2.66093 14.1651 2.51153 14.4473C2.36213 14.7294 2.27449 15.0402 2.25444 15.3588C2.23439 15.6775 2.28239 15.9967 2.39525 16.2954C2.50811 16.5941 2.68324 16.8653 2.90901 17.0911C3.13477 17.3168 3.40601 17.492 3.70469 17.6048C4.00335 17.7177 4.32262 17.7657 4.64128 17.7457C4.95993 17.7256 5.27067 17.638 5.55284 17.4886C5.83502 17.3392 6.08216 17.1314 6.27785 16.8791L12.3299 9.07693C12.6392 8.67809 13.1581 8.50446 13.6452 8.63677C13.9162 8.71037 14.2025 8.75002 14.5 8.75002C16.2949 8.75002 17.75 7.29495 17.75 5.50002C17.75 5.34675 17.7395 5.19611 17.7191 5.04874L16.3839 6.38391C15.8957 6.87206 15.1043 6.87206 14.6161 6.38391L13.6161 5.38391C13.128 4.89575 13.128 4.1043 13.6161 3.61614L14.9513 2.28097ZM5.50004 15.5C5.50004 16.0523 5.05232 16.5 4.50004 16.5C3.94775 16.5 3.50004 16.0523 3.50004 15.5C3.50004 14.9477 3.94775 14.5 4.50004 14.5C5.05232 14.5 5.50004 14.9477 5.50004 15.5ZM12.5581 13.442L15.0581 15.942L15.942 15.0581L13.442 12.5581L12.5581 13.442Z" fill="context-fill"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -1,619 +0,0 @@
#zotero-prefs {
width: 800px;
height: 600px;
min-width: 800px;
min-height: 600px;
}
#prefs-outer-container {
display: flex;
flex-direction: row;
min-width: 0;
min-height: 0;
-moz-box-flex: 1;
}
#prefs-inner-container {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
#prefs-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: scroll;
padding-bottom: 10px;
}
#prefs-content > * {
display: flex;
flex-direction: column;
margin: 5px 15px;
max-width: 800px;
}
#prefs-content > [hidden] {
display: none;
}
#prefs-search-container {
display: flex;
flex-direction: row;
align-items: center;
min-height: 40px;
padding-inline-end: 8px;
}
#prefs-search {
width: 16em;
-moz-box-pack: end;
}
#prefs-navigation {
width: 180px;
flex-shrink: 0;
appearance: none;
background: transparent;
margin: 6px;
}
#prefs-navigation > richlistitem {
padding: 1em;
border-radius: 5px;
-moz-box-align: center;
font-size: 1.1em;
transition: background-color 0.2s ease;
}
#prefs-navigation > richlistitem:is([selected="true"], [data-parent-selected="true"]) {
background-color: highlight;
color: highlighttext;
}
#prefs-navigation > richlistitem:not([selected="true"], [data-parent-selected="true"]):hover {
background-color: color-mix(in srgb, transparent 60%, highlight);
}
#prefs-navigation > richlistitem image {
width: 24px;
}
#prefs-navigation > hr {
margin: 8px 0;
border: none;
border-top: 1px solid lightgray;
}
#prefs-subpane-back-button-container {
flex: 1;
}
#prefs-subpane-back-button {
appearance: none;
font-size: 32px;
min-width: auto;
padding: 8px;
color: -moz-dialogtext;
background-color: transparent;
transition: color 0.1s ease;
}
#prefs-subpane-back-button:hover {
color: color-mix(in srgb, -moz-dialogtext 30%, SelectedItem);
}
#prefs-subpane-back-button:hover:active {
color: SelectedItem;
}
#prefs-help-container {
display: flex;
align-items: end;
}
h1 {
margin: 0 0 12px 0;
font-size: 1.3em;
font-weight: normal;
}
.header {
margin-bottom: 8px;
}
/* Headers in subsections */
.main-section {
margin-bottom: 16px;
}
.main-section:not([hidden]):not(.hidden-by-search) ~ .main-section {
padding-top: 16px;
margin-top: 32px;
border-top: 1px solid lightgray;
}
groupbox > label > h2, groupbox > * > label > h2 {
border-bottom: none;
font-weight: bold;
}
groupbox:first-of-type label > h2 {
margin-top: .5em !important;
}
/* Space out sections */
groupbox:not(:first-of-type) label > h2 {
margin-top: 2em !important;
}
/* Approach to search tooltips (mostly borrowed from Fx prefs): */
.search-tooltip-parent {
position: relative;
}
.search-tooltip {
min-width: 20px;
max-width: 200px;
position: absolute;
bottom: 24px;
background-color: #ffe900;
border: 1px solid rgba(0, 0, 0, 40%);
padding: 2px 8px;
text-align: center;
}
.search-tooltip::before, .search-tooltip::after {
content: '';
position: absolute;
width: 0;
height: 0;
left: calc(50% - 3px);
border-inline: 6px solid transparent;
}
.search-tooltip::before {
top: calc(100% + 1px);
border-top: 6px solid rgba(0, 0, 0, 40%);
}
.search-tooltip::after {
top: 100%;
border-top: 6px solid #ffe900;
}
.search-tooltip > span {
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hidden-by-search {
display: none;
}
prefwindow .chromeclass-toolbar
{
display: -moz-box !important; /* Ignore toolbar collapse button on OS X */
}
window[windowtype="zotero:pref"] {
min-width: 600px;
}
label {
/* Apply XUL label styles to all labels */
margin-block: 1px 2px;
margin-inline: 6px 5px;
}
description, label, checkbox {
max-width: 630px;
}
radio[pane]
{
min-width: 5.5em;
height: 48px;
-moz-box-align: center;
-moz-box-pack: end;
}
checkbox[disabled="true"] {
color: gray !important;
}
menulist[disabled="true"] {
opacity: 75%;
/* Disable default hover styling */
pointer-events: none;
}
#export-citePaperJournalArticleURL
{
font-size: .85em;
}
.statusLine
{
margin-top: .75em;
margin-bottom: .75em;
font-size: .85em;
}
/* Links within messages */
description label[class=zotero-text-link], label[class=zotero-text-link]
{
margin: 0;
}
.form-grid {
display: grid;
grid-template-columns: max-content 1fr;
row-gap: .3em;
}
.form-grid > :nth-child(odd) {
-moz-box-pack: end; /* Right-justify left column */
}
.pref-row {
display: flex;
align-items: center;
}
button {
flex-shrink: 0;
}
/* General pane */
#zotero-prefpane-general .statusLine {
margin-inline-start: .75em;
}
.indented-pref {
margin-inline-start: 2em;
}
.fileHandler-menus {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
justify-content: start;
column-gap: 1em;
}
.fileHandler-menu .menulist-icon {
height: 16px;
}
/* File Renaming tab */
#file-renaming-customize-button {
margin-top: .6em;
}
#zotero-prefpane-file-renaming-format label:not([is=zotero-text-link]) {
display: block;
}
#file-renaming-format-template {
width: 100%;
min-height: 1.25em;
padding: 0.4em;
/* Match label margins */
margin-block: 1px 2px;
margin-inline: 6px 5px;
}
#file-renaming-format-preview {
width: 100%;
padding: 0.4em;
}
/*
* Sync pane
*/
/* Settings tab */
#zotero-prefpane-sync .form-grid {
align-items: center;
}
#zotero-prefpane-sync .form-grid > hbox {
-moz-box-align: center;
}
#zotero-prefpane-sync .form-grid > label:nth-child(odd)
{
text-align: right;
}
#zotero-prefpane-sync .form-grid > hbox
{
margin-inline-start: 4px;
display: flex;
align-items: center;
}
#zotero-prefpane-sync .form-grid > hbox > label:first-child,
#zotero-prefpane-sync .form-grid > hbox > menulist:first-child
{
margin-inline: 0;
}
#zotero-prefpane-sync .form-grid > hbox > textbox
{
margin-inline: 3px;
}
#zotero-prefpane-sync .form-grid > hbox > label:last-child
{
margin-inline-start: 0;
margin-inline-end: 10px;
}
#zotero-prefpane-sync #sync-auth-button {
margin-inline-start: 0;
}
#zotero-prefpane-sync #sync-status-indicator
{
width: 20px;
height: 20px;
margin-left: -1px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#zotero-prefpane-sync #sync-status-indicator[verified=true]
{
background-image: url("chrome://zotero/skin/tick.png")
}
#zotero-prefpane-sync #sync-status-indicator[verified=false]
{
background-image: url("chrome://zotero/skin/cross.png")
}
#zotero-prefpane-sync #sync-status-indicator[animated]
{
background-image: url("chrome://zotero/skin/arrow_rotate_animated.png")
}
.storage-settings-download-options
{
margin-inline-start: 40px;
}
#storage-webdav-settings > .form-grid {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#storage-verify, #storage-abort, #storage-clean
{
margin-inline-start: 0;
min-width: 8em;
}
#storage-terms label
{
margin-inline-start: 0;
font-size: .9em;
}
#storage-terms label:first-child
{
margin-inline-end: .25em;
}
#storage-terms label[class=zotero-text-link]
{
margin-inline-end: 0;
}
/* Reset tab */
#sync-reset-form {
margin-inline-start: 1em;
}
#reset-sync-warning {
font-size: 12px;
}
#sync-reset-form {
margin-top: 1em;
}
#sync-reset-library-menu-container > label {
font-weight: bold;
font-size: 15px;
}
#sync-reset-library-menu {
width: 14em;
margin-inline-start: .25em;
font-size: 15px;
height: 1.6em;
}
#sync-reset-radiogroup {
margin-bottom: 1.4em;
}
#sync-reset-radiogroup > div {
margin: 0;
padding: 0;
list-style: none;
}
/* Allow a click between lines to select the radio */
#sync-reset-radiogroup > div label {
display: block;
}
#sync-reset-radiogroup > div:first-child {
margin-top: 1.4em;
}
#sync-reset-radiogroup > div radio .radio-label {
font-weight: bold;
font-size: 15px;
margin-bottom: .2em;
}
#sync-reset-radiogroup > div .sync-reset-option-desc {
font-size: 12px;
}
#sync-reset-radiogroup > div radio {
float: left;
margin-top: 1em;
}
#sync-reset-radiogroup > div radio .radio-check {
margin-inline-end: 1.05em;
}
#sync-reset-radiogroup > div[disabled] span {
color: gray;
}
#sync-reset button {
font-size: 14px;
}
/*
* Search pane
*/
#pdfinfo-status
{
margin-top: 0 !important;
}
#fulltext-stats > .form-grid > label:nth-child(odd)
{
text-align: right;
}
/* Export pane */
#zotero-prefpane-export separator:not(.thin)
{
height: 1em;
}
#quickCopy-instructions, #quickCopy-citationInstructions {
font-size: 12px;
}
#zotero-prefpane-export .virtualized-table-container {
height: 120px;
}
#zotero-quickCopy-format
{
min-height: 1.5em; /* Fix collapse on Windows */
}
#noteQuickCopy-format-options th {
font-weight: normal;
text-align: right;
max-width: 3.6em;
}
/*
* Cite pane
*/
#wordProcessors > label:not(:first-child) {
margin-top: 10px;
}
#wordProcessorInstallers {
margin-block: 0.5em;
}
#wordProcessorInstallers > groupbox > label > h2 {
/* Override spacing added between groupboxes */
margin-top: 0.5em !important;
}
#styleManager
{
height: 250px;
}
#styleManager-updated
{
width: 105px;
}
/* Advanced General pane */
#zotero-prefpane-advanced-general-tab #openurl-menu {
width: 400px;
}
/* Shortcut Keys pane */
#zotero-prefpane-advanced-keys-tab input
{
margin-inline-start: 0;
}
/* Advanced pane */
#zotero-keys-grid {
display: grid;
align-items: center;
grid-template-columns: 1fr max-content max-content;
}
#command-line-data-dir description {
font-size: 12px;
cursor: text;
-moz-user-select: text;
}
#command-line-data-dir label {
font-size: 11px;
font-style: italic;
padding-top: .4em;
padding-bottom: .4em;
}
#zotero-prefpane-advanced-feeds-feedDefaults .html-input {
width: 50px;
text-align: right;
}
#zotero-prefpane-advanced-feeds-feedDefaults hbox {
display: flex;
align-items: center;
}
#baseAttachmentPath {
padding-inline-start: 24px;
/* Background set in JS */
background: none;
background-repeat: no-repeat;
background-size: 16px;
background-position: center left 4px;
appearance: none;
border: none;
}
#zotero-prefpane-advanced-open-buttons {
display: block;
text-align: right;
margin-top: 1em;
margin-bottom: .5em;
}
/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
@media (min-resolution: 1.25dppx) {
#zotero-prefpane-sync #sync-status-indicator[verified=true] { background-image: url("chrome://zotero/skin/tick@2x.png") }
#zotero-prefpane-sync #sync-status-indicator[animated] { background-image: url("chrome://zotero/skin/arrow_rotate_animated@2x.png") }
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2 KiB

View file

@ -8,23 +8,20 @@
font-style: normal;
@media (-moz-platform: windows) {
--color-accent: var(--accent-blue);
}
@media not (-moz-platform: windows) {
--color-accent: SelectedItem;
}
--color-focus-search: color-mix(in srgb, var(--color-accent) 70%, transparent);
@media (-moz-platform: windows) {
@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) 70%, 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) 70%, transparent);
}
#zotero-collections-pane, #zotero-item-pane {

300
scss/preferences.scss Normal file
View file

@ -0,0 +1,300 @@
// Abstracts
// --------------------------------------------------
@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";
// Panes
// --------------------------------------------------
@import "preferences/general";
@import "preferences/file_renaming";
@import "preferences/sync";
@import "preferences/sync_reset";
@import "preferences/export";
@import "preferences/cite";
@import "preferences/advanced";
#zotero-prefs {
width: 800px;
height: 600px;
min-width: 800px;
min-height: 600px;
}
#prefs-outer-container {
display: flex;
flex-direction: row;
min-width: 0;
min-height: 0;
-moz-box-flex: 1;
background-color: var(--material-sidepane);
color: var(--fill-primary);
}
#prefs-inner-container {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
#prefs-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: scroll;
padding-bottom: 10px;
& > * {
display: flex;
flex-direction: column;
margin: 5px 15px;
max-width: 800px;
}
& > [hidden] {
display: none;
}
}
#prefs-search-container {
display: flex;
flex-direction: row;
align-items: center;
min-height: 40px;
padding-inline-end: 8px;
}
#prefs-search {
width: 16em;
-moz-box-pack: end;
}
#prefs-navigation {
width: 180px;
flex-shrink: 0;
appearance: none;
background: transparent;
margin: 6px;
& > richlistitem {
padding: 1em;
border-radius: 5px;
-moz-box-align: center;
font-size: 1.1em;
transition: background-color 0.2s ease;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
@include macOS-inactive-opacity;
&:is([selected="true"], [data-parent-selected="true"]) {
@media (-moz-platform: macos) {
background-color: color-mix(in srgb, var(--color-accent) 80%, transparent);
}
@media not (-moz-platform: macos) {
background-color: var(--color-accent);
}
color: #fff;;
}
&:not([selected="true"], [data-parent-selected="true"]):hover {
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}
}
& > hr {
margin: 8px 0;
border: none;
border-top: var(--material-panedivider)
}
}
#prefs-navigation > richlistitem image {
width: 24px;
}
#prefs-subpane-back-button-container {
flex: 1;
}
#prefs-subpane-back-button {
margin-left: 20px;
@include svgicon-menu("chevron", "universal", "20");
rotate: 90deg;
}
#prefs-help-container {
display: flex;
align-items: end;
}
h1 {
margin: 0 6px 12px 6px;
font-size: 17px;
font-weight: 400;
}
.header {
margin-bottom: 8px;
}
/* Headers in subsections */
.main-section {
margin-bottom: 16px;
&:not([hidden]):not(.hidden-by-search) ~ .main-section {
padding-top: 16px;
margin-top: 32px;
border-top: var(--material-panedivider);
}
}
groupbox > label > h2, groupbox > * > label > h2 {
border-bottom: none;
font-size: 15px;
font-weight: 590;
}
groupbox:first-of-type label > h2 {
margin-top: .5em !important;
}
/* Space out sections */
groupbox:not(:first-of-type) label > h2 {
margin-top: 2em !important;
}
/* Approach to search tooltips (mostly borrowed from Fx prefs): */
.search-tooltip-parent {
position: relative;
}
.search-tooltip {
min-width: 20px;
max-width: 200px;
position: absolute;
bottom: 24px;
background-color: #ffe900;
border: 1px solid rgba(0, 0, 0, 40%);
padding: 2px 8px;
text-align: center;
&::before,
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
left: calc(50% - 3px);
border-inline: 6px solid transparent;
}
&::before {
top: calc(100% + 1px);
border-top: 6px solid rgba(0, 0, 0, 40%);
}
&::after {
top: 100%;
border-top: 6px solid #ffe900;
}
& > span {
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.hidden-by-search {
display: none;
}
prefwindow .chromeclass-toolbar
{
display: -moz-box !important; /* Ignore toolbar collapse button on OS X */
}
window[windowtype="zotero:pref"] {
min-width: 600px;
}
label {
/* Apply XUL label styles to all labels */
margin-block: 1px 2px;
margin-inline: 6px 5px;
}
description, label, checkbox {
max-width: 630px;
}
radio[pane]
{
min-width: 5.5em;
height: 48px;
-moz-box-align: center;
-moz-box-pack: end;
}
checkbox[disabled="true"] {
color: gray !important;
}
menulist[disabled="true"] {
opacity: 75%;
/* Disable default hover styling */
pointer-events: none;
}
#export-citePaperJournalArticleURL
{
font-size: .85em;
}
.statusLine
{
margin-top: .75em;
margin-bottom: .75em;
font-size: .85em;
}
/* Links within messages */
description label[class=zotero-text-link], label[class=zotero-text-link]
{
margin: 0;
}
.form-grid {
display: grid;
grid-template-columns: max-content 1fr;
row-gap: .3em;
& > :nth-child(odd) {
-moz-box-pack: end; /* Right-justify left column */
}
}
.pref-row {
display: flex;
align-items: center;
}
button {
flex-shrink: 0;
}

View file

@ -0,0 +1,71 @@
/* General pane */
#zotero-prefpane-advanced-general-tab #openurl-menu {
width: 400px;
}
/* Shortcut Keys pane */
#zotero-prefpane-advanced-keys-tab input
{
margin-inline-start: 0;
}
/* Advanced pane */
#zotero-keys-grid {
display: grid;
align-items: center;
grid-template-columns: 1fr max-content max-content;
}
#command-line-data-dir description {
font-size: 12px;
cursor: text;
-moz-user-select: text;
}
#command-line-data-dir label {
font-size: 11px;
font-style: italic;
padding-top: .4em;
padding-bottom: .4em;
}
#zotero-prefpane-advanced-feeds-feedDefaults .html-input {
width: 50px;
text-align: right;
}
#zotero-prefpane-advanced-feeds-feedDefaults hbox {
display: flex;
align-items: center;
}
#baseAttachmentPath {
padding-inline-start: 24px;
/* Background set in JS */
background: none;
background-repeat: no-repeat;
background-size: 16px;
background-position: center left 4px;
appearance: none;
border: none;
}
#zotero-prefpane-advanced-open-buttons {
display: block;
text-align: right;
margin-top: 1em;
margin-bottom: .5em;
}
/*
* Search pane
*/
#pdfinfo-status
{
margin-top: 0 !important;
}
#fulltext-stats > .form-grid > label:nth-child(odd)
{
text-align: right;
}

View file

@ -0,0 +1,22 @@
#wordProcessors > label:not(:first-child) {
margin-top: 10px;
}
#wordProcessorInstallers {
margin-block: 0.5em;
}
#wordProcessorInstallers > groupbox > label > h2 {
/* Override spacing added between groupboxes */
margin-top: 0.5em !important;
}
#styleManager
{
height: 250px;
}
#styleManager-updated
{
width: 105px;
}

View file

@ -0,0 +1,23 @@
#zotero-prefpane-export separator:not(.thin)
{
height: 1em;
}
#quickCopy-instructions, #quickCopy-citationInstructions {
font-size: 12px;
}
#zotero-prefpane-export .virtualized-table-container {
height: 120px;
}
#zotero-quickCopy-format
{
min-height: 1.5em; /* Fix collapse on Windows */
}
#noteQuickCopy-format-options th {
font-weight: normal;
text-align: right;
max-width: 3.6em;
}

View file

@ -0,0 +1,21 @@
#file-renaming-customize-button {
margin-top: .6em;
}
#zotero-prefpane-file-renaming-format label:not([is=zotero-text-link]) {
display: block;
}
#file-renaming-format-template {
width: 100%;
min-height: 1.25em;
padding: 0.4em;
/* Match label margins */
margin-block: 1px 2px;
margin-inline: 6px 5px;
}
#file-renaming-format-preview {
width: 100%;
padding: 0.4em;
}

View file

@ -0,0 +1,19 @@
#zotero-prefpane-general .statusLine {
margin-inline-start: .75em;
}
.indented-pref {
margin-inline-start: 2em;
}
.fileHandler-menus {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
justify-content: start;
column-gap: 1em;
}
.fileHandler-menu .menulist-icon {
height: 16px;
}

106
scss/preferences/_sync.scss Normal file
View file

@ -0,0 +1,106 @@
/* Settings tab */
#zotero-prefpane-sync .form-grid {
align-items: center;
}
#zotero-prefpane-sync .form-grid > hbox {
-moz-box-align: center;
}
#zotero-prefpane-sync .form-grid > label:nth-child(odd)
{
text-align: right;
}
#zotero-prefpane-sync .form-grid > hbox
{
margin-inline-start: 4px;
display: flex;
align-items: center;
}
#zotero-prefpane-sync .form-grid > hbox > label:first-child,
#zotero-prefpane-sync .form-grid > hbox > menulist:first-child
{
margin-inline: 0;
}
#zotero-prefpane-sync .form-grid > hbox > textbox
{
margin-inline: 3px;
}
#zotero-prefpane-sync .form-grid > hbox > label:last-child
{
margin-inline-start: 0;
margin-inline-end: 10px;
}
#zotero-prefpane-sync #sync-auth-button {
margin-inline-start: 0;
}
#zotero-prefpane-sync #sync-status-indicator
{
width: 20px;
height: 20px;
margin-left: -1px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#zotero-prefpane-sync #sync-status-indicator[verified=true]
{
@include svgicon("success", "universal", "20");
}
#zotero-prefpane-sync #sync-status-indicator[verified=false]
{
@include svgicon("error", "universal", "20");
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#zotero-prefpane-sync #sync-status-indicator[animated]
{
@include svgicon("sync", "universal", "20");
animation: rotating 2s linear infinite;
}
.storage-settings-download-options
{
margin-inline-start: 40px;
}
#storage-webdav-settings > .form-grid {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#storage-verify, #storage-abort, #storage-clean
{
margin-inline-start: 0;
min-width: 8em;
}
#storage-terms label
{
margin-inline-start: 0;
font-size: .9em;
}
#storage-terms label:first-child
{
margin-inline-end: .25em;
}
#storage-terms label[class=zotero-text-link]
{
margin-inline-end: 0;
}

View file

@ -0,0 +1,69 @@
#sync-reset-form {
margin-inline-start: 1em;
}
#reset-sync-warning {
font-size: 12px;
}
#sync-reset-form {
margin-top: 1em;
}
#sync-reset-library-menu-container > label {
font-weight: bold;
font-size: 15px;
}
#sync-reset-library-menu {
width: 14em;
margin-inline-start: .25em;
font-size: 15px;
height: 1.6em;
}
#sync-reset-radiogroup {
margin-bottom: 1.4em;
}
#sync-reset-radiogroup > div {
margin: 0;
padding: 0;
list-style: none;
}
/* Allow a click between lines to select the radio */
#sync-reset-radiogroup > div label {
display: block;
}
#sync-reset-radiogroup > div:first-child {
margin-top: 1.4em;
}
#sync-reset-radiogroup > div radio .radio-label {
font-weight: bold;
font-size: 15px;
margin-bottom: .2em;
}
#sync-reset-radiogroup > div .sync-reset-option-desc {
font-size: 12px;
}
#sync-reset-radiogroup > div radio {
float: left;
margin-top: 1em;
}
#sync-reset-radiogroup > div radio .radio-check {
margin-inline-end: 1.05em;
}
#sync-reset-radiogroup > div[disabled] span {
color: gray;
}
#sync-reset button {
font-size: 14px;
}