379 lines
7.1 KiB
SCSS
379 lines
7.1 KiB
SCSS
// 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";
|
|
|
|
// Components
|
|
// --------------------------------------------------
|
|
|
|
@import "components/button";
|
|
@import "components/icons";
|
|
@import "components/listheader";
|
|
@import "components/menu";
|
|
@import "components/richlistbox";
|
|
@import "components/search";
|
|
@import "components/spinner";
|
|
@import "components/titleBar";
|
|
@import "components/textLink";
|
|
@import "components/virtualized-table";
|
|
@import "components/window";
|
|
|
|
// Panes
|
|
// --------------------------------------------------
|
|
|
|
@import "preferences/general";
|
|
@import "preferences/file_renaming";
|
|
@import "preferences/sync";
|
|
@import "preferences/sync_reset";
|
|
@import "preferences/export";
|
|
@import "preferences/cite";
|
|
@import "preferences/advanced";
|
|
|
|
@include macOS-normalize-controls;
|
|
|
|
#zotero-prefs {
|
|
min-width: 800px;
|
|
min-height: 600px;
|
|
}
|
|
|
|
#prefs-outer-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex: 1;
|
|
background-color: var(--material-sidepane);
|
|
// See scss/win/abstracts/mixin
|
|
--color-form-element-base-background: 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: auto 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 {
|
|
margin-inline-start: auto;
|
|
width: 16em;
|
|
}
|
|
|
|
#prefs-navigation {
|
|
width: 180px;
|
|
flex-shrink: 0;
|
|
appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
margin: 6px;
|
|
|
|
& > richlistitem {
|
|
padding: 1em;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
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 {
|
|
margin-inline-start: 20px;
|
|
@include svgicon-menu("chevron", "universal", "20");
|
|
rotate: 90deg;
|
|
|
|
.toolbarbutton-text {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#prefs-help-container {
|
|
display: flex;
|
|
align-items: end;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 12px 0;
|
|
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: 600;
|
|
}
|
|
|
|
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 !important;
|
|
}
|
|
|
|
window[windowtype="zotero:pref"] {
|
|
min-width: 600px;
|
|
}
|
|
|
|
label:not([is=zotero-text-link], .button-text, .checkbox-label, .radio-label) {
|
|
margin-block: 1px 2px;
|
|
margin-inline: 0 5px;
|
|
}
|
|
|
|
description {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
description, label, checkbox {
|
|
max-width: 630px;
|
|
}
|
|
|
|
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],
|
|
label[is=zotero-text-link] {
|
|
margin: 0;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
row-gap: .3em;
|
|
|
|
& > :nth-child(odd) {
|
|
justify-self: end; /* Right-justify left column */
|
|
}
|
|
}
|
|
|
|
button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (-moz-platform: windows) {
|
|
// Adjust padding and margin of form elements on Windows
|
|
// Assumptions:
|
|
// 1. All radio are in radiogroup
|
|
// 2. All radiogroup/checkbox are in hbox/vbox/groupbox
|
|
// 3. Vertical radiogroup are only in vertical layout
|
|
|
|
// First and last checkbox in a horizontal layout should not have inline padding and margin
|
|
hbox > checkbox[native]{
|
|
&:first-child {
|
|
padding-inline-start: 0;
|
|
margin-inline-start: 0;
|
|
}
|
|
&:last-child {
|
|
padding-inline-end: 0;
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
vbox, groupbox {
|
|
// Checkbox in a vertical layout should not have inline padding and margin
|
|
& > checkbox[native] {
|
|
padding-inline: 0;
|
|
margin-inline: 0;
|
|
}
|
|
|
|
// Button-like elements in a vertical layout should not have inline margin
|
|
& > button,
|
|
& > menulist {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
// Radiogroup in a vertical layout and radio in a horizontal layout
|
|
// First and last radio should not have inline padding and margin
|
|
& > radiogroup[orient=horizontal] radio {
|
|
&:first-child {
|
|
padding-inline-start: 0;
|
|
margin-inline-start: 0;
|
|
}
|
|
&:last-child {
|
|
padding-inline-end: 0;
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
// In horizontal layout inside vertical layout
|
|
// First and last button-like element should not have inline margin
|
|
& > hbox > :is(button, menulist) {
|
|
&:first-child {
|
|
margin-inline-start: 0;
|
|
}
|
|
&:last-child {
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Radio in a vertical layout should not have inline padding and margin
|
|
radiogroup:not([orient=horizontal]) radio {
|
|
padding-inline: 0;
|
|
margin-inline: 0;
|
|
}
|
|
}
|
|
|
|
@media not (-moz-platform: windows) {
|
|
radiogroup {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
radio, checkbox {
|
|
margin-block: 4px;
|
|
}
|
|
}
|