diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss index 902f9df71c..dea8faa483 100644 --- a/scss/abstracts/_mixins.scss +++ b/scss/abstracts/_mixins.scss @@ -227,6 +227,48 @@ } } } + +// Normalize margins/paddings for form controls on macOS +@mixin macOS-normalize-controls { + :is(button, toolbarbutton) .button-text { + @media (-moz-platform: macos) { + margin-block: 1px 0; + margin-inline: 3px; + } + } + + radiogroup { + @media (-moz-platform: macos) { + margin: 0; + column-gap: 8px; + } + } + + radio, checkbox { + @media (-moz-platform: macos) { + margin: 0; + gap: 6px; + } + } + + radio :is(.radio-check, .radio-check[checked], .radio-icon, .radio-label), + checkbox :is(.checkbox-check, .checkbox-check[checked], .checkbox-icon, .checkbox-label) { + @media (-moz-platform: macos) { + margin: 0; + + // Can't break these out into separate rules because of specificity: + + &:is(.radio-check, .checkbox-check) { + margin-inline-start: -2px; + } + + &:is(.checkbox-label) { + margin-top: -1px; + } + } + } +} + /* This mixin replaces the default focus-rings - those are platform-specific, do not show up on some components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS). diff --git a/scss/components/_advancedSearch.scss b/scss/components/_advancedSearch.scss index 8d36446a34..cdfdaa18df 100644 --- a/scss/components/_advancedSearch.scss +++ b/scss/components/_advancedSearch.scss @@ -1,4 +1,6 @@ #zotero-advanced-search-dialog { + @include macOS-normalize-controls; + min-height: 500px; min-width: 700px; diff --git a/scss/components/_banners.scss b/scss/components/_banners.scss index 58e238db4a..204d701a47 100644 --- a/scss/components/_banners.scss +++ b/scss/components/_banners.scss @@ -1,4 +1,6 @@ #post-upgrade-banner, #retracted-items-banner, #sync-reminder-banner { + @include macOS-normalize-controls; + display: flex; justify-content: center; text-align: center; diff --git a/scss/components/_button.scss b/scss/components/_button.scss index b09d5e7df4..dccf87329d 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -38,43 +38,3 @@ button { margin: 0 -2px -1px; } } - -// Default margins/paddings for button elements on macOS: - -:is(button, toolbarbutton) .button-text { - @media (-moz-platform: macos) { - margin-block: 1px 0; - margin-inline: 3px; - } -} - -radiogroup { - @media (-moz-platform: macos) { - margin: 0; - column-gap: 8px; - } -} - -radio, checkbox { - @media (-moz-platform: macos) { - margin: 0; - gap: 6px; - } -} - -radio :is(.radio-check, .radio-check[checked], .radio-icon, .radio-label), -checkbox :is(.checkbox-check, .checkbox-check[checked], .checkbox-icon, .checkbox-label) { - @media (-moz-platform: macos) { - margin: 0; - - // Can't break these out into separate rules because of specificity: - - &:is(.radio-check, .checkbox-check) { - margin-inline-start: -2px; - } - - &:is(.checkbox-label) { - margin-top: -1px; - } - } -} diff --git a/scss/components/_locateManager.scss b/scss/components/_locateManager.scss index d01e7835f8..cd28ff0e3c 100644 --- a/scss/components/_locateManager.scss +++ b/scss/components/_locateManager.scss @@ -1,4 +1,6 @@ #zotero-locate-manager-prefs { + @include macOS-normalize-controls; + #button-bar, #button-bar > hbox { display: flex; gap: 6px; diff --git a/scss/preferences.scss b/scss/preferences.scss index d83a763a37..50c78e5add 100644 --- a/scss/preferences.scss +++ b/scss/preferences.scss @@ -43,6 +43,8 @@ @import "preferences/cite"; @import "preferences/advanced"; +@include macOS-normalize-controls; + #zotero-prefs { min-width: 800px; min-height: 600px;