diff --git a/chrome/content/scaffold/scaffold.xhtml b/chrome/content/scaffold/scaffold.xhtml index e27796cb12..c6b6d582d9 100644 --- a/chrome/content/scaffold/scaffold.xhtml +++ b/chrome/content/scaffold/scaffold.xhtml @@ -371,7 +371,7 @@ - + @@ -496,7 +496,7 @@ - + diff --git a/scss/components/_button.scss b/scss/components/_button.scss index 57de95553c..54f9198716 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -31,3 +31,9 @@ } } +button { + @media (-moz-platform: macos) { + // Prevent ugly non-native button styles on macOS + max-height: 25px; + } +} diff --git a/scss/mac/_tabbox.scss b/scss/mac/_tabbox.scss new file mode 100644 index 0000000000..30ec713579 --- /dev/null +++ b/scss/mac/_tabbox.scss @@ -0,0 +1,76 @@ +tabbox { + tabs { + tab { + appearance: none; + // Since the tab with opacity is weird, we just use hard-coded colors + @include light-dark(background, #ededed, #343434); + box-shadow: + 0px 2px 2px -2px var(--fill-quarternary) inset, + 0px -2px 2px -2px var(--fill-quarternary) inset, + 0px 4px 4px -4px var(--fill-quinary) inset, + 0px -4px 4px -4px var(--fill-quinary) inset; + + &::before { + content: ""; + position: absolute; + height: 14px; + top: 5px; + border-left: 1px solid var(--fill-quarternary); + } + + &:first-of-type { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + box-shadow: + 0px 2px 2px -2px var(--fill-quarternary) inset, + 0px -2px 2px -2px var(--fill-quarternary) inset, + 0px 4px 4px -4px var(--fill-quinary) inset, + 0px -4px 4px -4px var(--fill-quinary) inset, + 2px 0px 2px -2px var(--fill-quarternary) inset, + 4px 0px 4px -4px var(--fill-quinary) inset; + &::before { + display: none; + } + } + + &:last-of-type { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + box-shadow: + 0px 2px 2px -2px var(--fill-quarternary) inset, + 0px -2px 2px -2px var(--fill-quarternary) inset, + 0px 4px 4px -4px var(--fill-quinary) inset, + 0px -4px 4px -4px var(--fill-quinary) inset, + -2px 0px 2px -2px var(--fill-quarternary) inset, + -4px 0px 4px -4px var(--fill-quinary) inset; + } + + &[visuallyselected=true] { + & + tab { + &::before { + display: none; + } + } + + &::before { + display: none; + } + + .tab-middle { + border-radius: 5px; + background: var(--material-button); + box-shadow: + 0px 1px 0.75px 0px var(--fill-quinary), + 0px 0.25px 0.25px 0px var(--color-border);; + border: 0.5px solid var(--fill-senary); + } + } + } + } + tabpanels { + appearance: none; + background: var(--color-sidepane); + border: 1px solid var(--fill-quinary); + border-radius: 5px; + } +} diff --git a/scss/scaffold.scss b/scss/scaffold.scss index 1d958eecc4..65e46152e6 100644 --- a/scss/scaffold.scss +++ b/scss/scaffold.scss @@ -96,20 +96,22 @@ richlistbox { min-width:200px; } -#zotero-toolbar { - margin-bottom: 3px; -} - #zotero-toolbar toolbarseparator { height: 18px; } -browser { - background: white; +browser, +#appcontent +{ + background: var(--material-toolbar); +} + +#appcontent { + padding: 16px; } vbox > splitter { - cursor: row-resize; + cursor: row-rgb(4, 4, 4)e; } /* Adapted from Mozilla common-shared.css */ @@ -120,8 +122,8 @@ listheader, richlistbox { appearance: none; margin-inline: 0; - background-color: #fff; - border: 1px solid #ccc; + background: var(--material-background); + border: var(--material-panedivider); } listheader { @@ -164,7 +166,7 @@ dialog richlistbox > richlistitem[disabled] { } #left-tabbox { - margin-top: 5px; + margin: 5px; } #checkboxes-translatorType checkbox { @@ -176,7 +178,16 @@ dialog richlistbox > richlistitem[disabled] { text-align: right; } -#right-pane textarea { - margin-right: 5px; - margin-bottom: 5px; +#pane-splitter { + // 16px (padding of tabbox container) - 9px + margin-left: 7px; +} + +#right-pane { + margin: -16px -16px -16px 0px; + border-left: var(--material-panedivider); + textarea { + outline: none; + border: 0; + } } diff --git a/scss/zotero-mac.scss b/scss/zotero-mac.scss index 142bc2ec22..40843840a6 100644 --- a/scss/zotero-mac.scss +++ b/scss/zotero-mac.scss @@ -7,6 +7,7 @@ @import "mac/createParent"; @import "mac/editable"; @import "mac/tabBar"; +@import "mac/tabbox"; @import "mac/menupopup"; // Elements