From a90a5cba08fdf6c0ceb95101c275108a152a3aed Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Wed, 12 Jun 2024 07:35:37 +0200 Subject: Merging upstream version 127.0. Signed-off-by: Daniel Baumann --- toolkit/themes/osx/global/in-content/common.css | 4 + toolkit/themes/osx/reftests/482681-ref.xhtml | 21 -- toolkit/themes/osx/reftests/checkboxsize-ref.xhtml | 33 --- toolkit/themes/osx/reftests/checkboxsize.xhtml | 31 --- toolkit/themes/osx/reftests/radiosize-ref.xhtml | 33 --- toolkit/themes/osx/reftests/radiosize.xhtml | 31 --- toolkit/themes/osx/reftests/reftest.list | 5 - toolkit/themes/shared/aboutReader.css | 141 +++++++++- .../themes/shared/design-system/design-tokens.json | 5 +- .../themes/shared/design-system/tokens-shared.css | 3 + .../shared/design-system/tokens-storybook.mjs | 13 +- toolkit/themes/shared/desktop-jar.inc.mn | 12 +- toolkit/themes/shared/desktop-non-mac.jar.inc.mn | 3 - toolkit/themes/shared/icons/blocked.svg | 2 +- toolkit/themes/shared/icons/content-analysis.svg | 8 + toolkit/themes/shared/icons/developer.svg | 2 +- toolkit/themes/shared/icons/info-filled.svg | 2 +- toolkit/themes/shared/icons/info.svg | 2 +- toolkit/themes/shared/icons/performance.svg | 4 +- toolkit/themes/shared/icons/settings.svg | 2 +- toolkit/themes/shared/icons/warning.svg | 2 +- toolkit/themes/shared/in-content/common-shared.css | 8 - toolkit/themes/shared/reader/align-center-20.svg | 6 + toolkit/themes/shared/reader/align-left-20.svg | 6 + toolkit/themes/shared/reader/align-right-20.svg | 6 + .../themes/shared/reader/character-spacing-20.svg | 7 + toolkit/themes/shared/reader/content-width-20.svg | 6 + toolkit/themes/shared/reader/line-spacing-20.svg | 6 + toolkit/themes/shared/reader/word-spacing-20.svg | 7 + toolkit/themes/shared/tree.css | 281 -------------------- toolkit/themes/shared/tree/sort-asc.svg | 6 + toolkit/themes/shared/tree/sort-dsc.svg | 6 + toolkit/themes/shared/tree/tree.css | 289 +++++++++++++++++++++ toolkit/themes/windows/global/tree/sort-asc.svg | 6 - toolkit/themes/windows/global/tree/sort-dsc.svg | 6 - 35 files changed, 524 insertions(+), 481 deletions(-) delete mode 100644 toolkit/themes/osx/reftests/482681-ref.xhtml delete mode 100644 toolkit/themes/osx/reftests/checkboxsize-ref.xhtml delete mode 100644 toolkit/themes/osx/reftests/checkboxsize.xhtml delete mode 100644 toolkit/themes/osx/reftests/radiosize-ref.xhtml delete mode 100644 toolkit/themes/osx/reftests/radiosize.xhtml delete mode 100644 toolkit/themes/osx/reftests/reftest.list create mode 100644 toolkit/themes/shared/icons/content-analysis.svg create mode 100644 toolkit/themes/shared/reader/align-center-20.svg create mode 100644 toolkit/themes/shared/reader/align-left-20.svg create mode 100644 toolkit/themes/shared/reader/align-right-20.svg create mode 100644 toolkit/themes/shared/reader/character-spacing-20.svg create mode 100644 toolkit/themes/shared/reader/content-width-20.svg create mode 100644 toolkit/themes/shared/reader/line-spacing-20.svg create mode 100644 toolkit/themes/shared/reader/word-spacing-20.svg delete mode 100644 toolkit/themes/shared/tree.css create mode 100644 toolkit/themes/shared/tree/sort-asc.svg create mode 100644 toolkit/themes/shared/tree/sort-dsc.svg create mode 100644 toolkit/themes/shared/tree/tree.css delete mode 100644 toolkit/themes/windows/global/tree/sort-asc.svg delete mode 100644 toolkit/themes/windows/global/tree/sort-dsc.svg (limited to 'toolkit/themes') diff --git a/toolkit/themes/osx/global/in-content/common.css b/toolkit/themes/osx/global/in-content/common.css index 0c6c6a99bd..3046da5cb0 100644 --- a/toolkit/themes/osx/global/in-content/common.css +++ b/toolkit/themes/osx/global/in-content/common.css @@ -12,6 +12,10 @@ xul|tabs { position: static; } +xul|menulist > xul|menupopup:not([position]) { + margin-inline-start: 0; +} + xul|menupopup > xul|menuitem::after, xul|menupopup > xul|menuitem::before { content: none; diff --git a/toolkit/themes/osx/reftests/482681-ref.xhtml b/toolkit/themes/osx/reftests/482681-ref.xhtml deleted file mode 100644 index 62fb4bb8d5..0000000000 --- a/toolkit/themes/osx/reftests/482681-ref.xhtml +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/toolkit/themes/osx/reftests/checkboxsize-ref.xhtml b/toolkit/themes/osx/reftests/checkboxsize-ref.xhtml deleted file mode 100644 index 30ed9dfe90..0000000000 --- a/toolkit/themes/osx/reftests/checkboxsize-ref.xhtml +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/toolkit/themes/osx/reftests/checkboxsize.xhtml b/toolkit/themes/osx/reftests/checkboxsize.xhtml deleted file mode 100644 index 1e5c62535e..0000000000 --- a/toolkit/themes/osx/reftests/checkboxsize.xhtml +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/toolkit/themes/osx/reftests/radiosize-ref.xhtml b/toolkit/themes/osx/reftests/radiosize-ref.xhtml deleted file mode 100644 index 219d898082..0000000000 --- a/toolkit/themes/osx/reftests/radiosize-ref.xhtml +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/toolkit/themes/osx/reftests/radiosize.xhtml b/toolkit/themes/osx/reftests/radiosize.xhtml deleted file mode 100644 index 15b4d5dd92..0000000000 --- a/toolkit/themes/osx/reftests/radiosize.xhtml +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/toolkit/themes/osx/reftests/reftest.list b/toolkit/themes/osx/reftests/reftest.list deleted file mode 100644 index 35a890d4b3..0000000000 --- a/toolkit/themes/osx/reftests/reftest.list +++ /dev/null @@ -1,5 +0,0 @@ -# This folder is registered in the chrome manifest at layout/tools/reftest/jar.mn. -defaults pref(widget.non-native-theme.enabled,false) # These are tests for the native theme. - -skip-if(!cocoaWidget) == chrome://reftest/content/osx-theme/radiosize.xhtml chrome://reftest/content/osx-theme/radiosize-ref.xhtml -skip-if(!cocoaWidget) == chrome://reftest/content/osx-theme/checkboxsize.xhtml chrome://reftest/content/osx-theme/checkboxsize-ref.xhtml diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css index 764dd39702..eeeddbb21a 100644 --- a/toolkit/themes/shared/aboutReader.css +++ b/toolkit/themes/shared/aboutReader.css @@ -17,6 +17,9 @@ --font-size: 12; --content-width: 22em; --line-height: 1.6em; + --text-alignment: start; + --word-spacing: 0; + --letter-spacing: 0; } body { @@ -43,6 +46,7 @@ body { --popup-shadow: rgba(49, 49, 49, 0.3); --popup-button-background: rgba(207, 207, 216, 0.33); --popup-button-foreground: var(--main-foreground); + --popup-button-selected-foreground: var(--color-gray-05); --popup-button-background-hover: var(--toolbar-button-background-hover); --popup-button-foreground-hover: var(--main-foreground); --popup-button-background-active: var(--toolbar-button-background-active); @@ -60,7 +64,7 @@ body { --link-selected-foreground: #333; --visited-link-foreground: #b5007f; --custom-theme-background: var(--color-white); - --custom-theme-foreground: #14151A; + --custom-theme-foreground: var(--color-gray-100); --custom-theme-unvisited-links: var(--color-blue-50); --custom-theme-visited-links: #321C64; --custom-theme-selection-highlight: #FFFFCC; @@ -88,7 +92,7 @@ body.contrast { --toolbar-button-background-hover: rgb(82, 82, 94); --toolbar-button-background-active: rgb(91, 91, 102); --popup-background: rgb(66, 65, 77); - --popup-button-border: rgba(255, 255, 255, 0.12); + --popup-button-border: rgba(255, 255, 255, 0.2); --popup-line: rgba(249, 249, 250, 0.1); --popup-button-background: rgb(43, 42, 51); --font-value-background: rgba(249, 249, 250, 0.15); @@ -97,6 +101,7 @@ body.contrast { --link-selected-foreground: #fff; --visited-link-foreground: #e675fd; --selected-background: rgba(0, 221, 255, 0.3); + --popup-button-selected-foreground: var(--color-gray-100); /* dark colours */ .moz-reader-block-img { @@ -170,6 +175,7 @@ body.hcm { --icon-disabled-fill: GrayText; --text-selected-background: SelectedItem; --text-selected-foreground: SelectedItemText; + --popup-button-selected-foreground: SelectedItemText; --link-foreground: LinkText; --link-selected-background: SelectedItem; --link-selected-foreground: SelectedItemText; @@ -501,14 +507,20 @@ button:disabled { border: 1px solid var(--popup-border); box-shadow: 0 0 10px 0 var(--popup-shadow); top: var(--space-xsmall); -} -.dropdown-popup h2 { - font-size: var(--font-size-root); - font-weight: var(--font-weight-bold); - color: var(--popup-button-foreground); - margin-block: var(--space-large); - margin-inline: var(--space-large) 0; + h2 { + font-size: var(--font-size-large); + font-weight: var(--font-weight-bold); + color: var(--popup-button-foreground); + margin-block: var(--space-large); + } + + hr { + width: 100%; + margin: 0; + border: none; + border-top: 1px solid var(--popup-line); + } } .open > .dropdown-popup { @@ -583,7 +595,6 @@ button:disabled { .radiorow > label { position: relative; box-sizing: border-box; - border-radius: 2px; border: 2px solid var(--popup-button-border); } @@ -592,12 +603,14 @@ button:disabled { } .radiorow > label:hover { - background-color: var(--toolbar-button-background-hover); + background-color: var(--popup-button-background-hover); + color: var(--popup-button-foreground-hover); } .radiorow > input[type=radio]:focus-visible + label { outline: 2px solid var(--primary-color); outline-offset: var(--focus-outline-offset); + z-index: 1; } .font-type-buttons > label { @@ -618,6 +631,7 @@ button:disabled { * baselines between serif and sans-serif, this isn't always enough. */ line-height: 1; padding-top: 2px; + border-radius: 2px; } .font-type-buttons { @@ -664,6 +678,7 @@ body.hcm .color-scheme-buttons { justify-content: center; /* We want 10px between items, but there's no margin collapsing in flexbox. */ margin: 10px 5px; + border-radius: 2px; border-color: var(--popup-border); } @@ -675,6 +690,95 @@ body.hcm .color-scheme-buttons { margin-inline-end: 10px; } +/* Improved text and layout menu popup */ + +#text-layout-controls { + display: flex; + flex-direction: column; + width: 340px; + padding: var(--space-large); + font-size: 15px; +} + +.accordion-header { + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + + .chevron-icon { + background-image: url("chrome://global/skin/icons/arrow-down.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + height: var(--size-item-large); + width: var(--size-item-large); + + #about-reader-advanced-layout[open] & { + background-image: url("chrome://global/skin/icons/arrow-up.svg"); + } + } +} + +.slider-container { + width: calc(100% - var(--space-xsmall)); + padding-bottom: var(--space-large); +} + +.text-alignment-buttons { + margin-top: var(--space-small); + gap: var(--space-xxsmall); + + > label { + display: flex; + flex: 1; + min-height: var(--button-min-height); + background-repeat: no-repeat; + background-position: center; + background-color: var(--popup-button-background); + color: var(--popup-button-foreground); + -moz-context-properties: fill; + fill: currentColor; + border: none; + + /* border radius does not target class because button order + * can be opposite in RTL */ + &:first-of-type { + border-start-start-radius: var(--border-radius-small); + border-end-start-radius: var(--border-radius-small); + } + + &:last-of-type { + border-start-end-radius: var(--border-radius-small); + border-end-end-radius: var(--border-radius-small); + } + + &.left-align-button { + background-image: url("chrome://global/skin/reader/align-left-20.svg"); + } + + &.center-align-button { + background-image: url("chrome://global/skin/reader/align-center-20.svg"); + } + + &.right-align-button { + background-image: url("chrome://global/skin/reader/align-right-20.svg"); + } + + &[checked] { + background-color: var(--primary-color); + border: none; + color: var(--popup-button-selected-foreground); + } + + body.hcm & { + border: 1px solid var(--popup-button-border); + } + } +} + /* Separate colors menu popup */ #color-controls { @@ -682,6 +786,10 @@ body.hcm .color-scheme-buttons { width: 400px; } +#about-reader-colors-menu-header { + margin-inline: var(--space-large) 0; +} + button-group { display: flex; font-size: var(--font-size-small); @@ -787,6 +895,10 @@ button[is="named-deck-button"] { background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); } +.improved-style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + .colors-button { background-image: url("chrome://mozapps/skin/extensions/category-themes.svg"); } @@ -844,6 +956,13 @@ button[is="named-deck-button"] { font-size: var(--font-size); max-width: var(--content-width); line-height: var(--line-height); + text-align: var(--text-alignment); + word-spacing: var(--word-spacing); + letter-spacing: var(--letter-spacing); + + .header { + text-align: var(--text-alignment); + } } pre { diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json index c807335942..bdccc1feb9 100644 --- a/toolkit/themes/shared/design-system/design-tokens.json +++ b/toolkit/themes/shared/design-system/design-tokens.json @@ -681,7 +681,10 @@ "value": "{focus.outline.width} solid {focus.outline.color}" }, "color": { - "value": "{color.accent.primary.@base}" + "value": { + "default": "{color.accent.primary.@base}", + "forcedColors": "{text.color.@base}" + } }, "inset": { "value": "calc(-1 * {focus.outline.width})" diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css index 42b33f5e0d..c10c1c5295 100644 --- a/toolkit/themes/shared/design-system/tokens-shared.css +++ b/toolkit/themes/shared/design-system/tokens-shared.css @@ -279,6 +279,9 @@ --color-accent-primary: ButtonText; --color-accent-primary-hover: SelectedItem; --color-accent-primary-active: var(--color-accent-primary-hover); + + /** Focus Outline **/ + --focus-outline-color: var(--text-color); } } } diff --git a/toolkit/themes/shared/design-system/tokens-storybook.mjs b/toolkit/themes/shared/design-system/tokens-storybook.mjs index fd2ea174c6..483a090ef9 100644 --- a/toolkit/themes/shared/design-system/tokens-storybook.mjs +++ b/toolkit/themes/shared/design-system/tokens-storybook.mjs @@ -605,7 +605,13 @@ export const storybookTables = { value: "var(--focus-outline-width) solid var(--focus-outline-color)", name: "--focus-outline", }, - { value: "var(--color-accent-primary)", name: "--focus-outline-color" }, + { + value: { + default: "var(--color-accent-primary)", + forcedColors: "var(--text-color)", + }, + name: "--focus-outline-color", + }, { value: "calc(-1 * var(--focus-outline-width))", name: "--focus-outline-inset", @@ -1055,7 +1061,10 @@ export const variableLookupTable = { }, "focus-outline": "var(--focus-outline-width) solid var(--focus-outline-color)", - "focus-outline-color": "var(--color-accent-primary)", + "focus-outline-color": { + default: "var(--color-accent-primary)", + forcedColors: "var(--text-color)", + }, "focus-outline-inset": "calc(-1 * var(--focus-outline-width))", "focus-outline-offset": "2px", "focus-outline-width": "2px", diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn index 226faf26ff..5907a9773f 100644 --- a/toolkit/themes/shared/desktop-jar.inc.mn +++ b/toolkit/themes/shared/desktop-jar.inc.mn @@ -46,7 +46,7 @@ skin/classic/global/popupnotification.css (../../shared/popupnotification.css) skin/classic/global/splitter.css (../../shared/splitter.css) skin/classic/global/toolbarbutton.css (../../shared/toolbarbutton.css) - skin/classic/global/tree.css (../../shared/tree.css) + skin/classic/global/tree/tree.css (../../shared/tree/tree.css) skin/classic/global/dirListing/dirListing.css (../../shared/dirListing/dirListing.css) #ifdef XP_MACOSX skin/classic/global/dirListing/folder.png (../../shared/dirListing/folder-osx.png) @@ -74,6 +74,7 @@ skin/classic/global/icons/close-12.svg (../../shared/icons/close-12.svg) skin/classic/global/icons/close-fill.svg (../../shared/icons/close-fill.svg) skin/classic/global/icons/columnpicker.svg (../../shared/icons/columnpicker.svg) + skin/classic/global/icons/content-analysis.svg (../../shared/icons/content-analysis.svg) skin/classic/global/icons/defaultFavicon.svg (../../shared/icons/defaultFavicon.svg) skin/classic/global/icons/delete.svg (../../shared/icons/delete.svg) skin/classic/global/icons/developer.svg (../../shared/icons/developer.svg) @@ -152,3 +153,12 @@ skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg (../../shared/reader/RM-Content-Width-Plus-44x16.svg) skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg (../../shared/reader/RM-Line-Height-Minus-38x14.svg) skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg (../../shared/reader/RM-Line-Height-Plus-38x24.svg) + skin/classic/global/reader/align-left-20.svg (../../shared/reader/align-left-20.svg) + skin/classic/global/reader/align-center-20.svg (../../shared/reader/align-center-20.svg) + skin/classic/global/reader/align-right-20.svg (../../shared/reader/align-right-20.svg) + skin/classic/global/reader/word-spacing-20.svg (../../shared/reader/word-spacing-20.svg) + skin/classic/global/reader/character-spacing-20.svg (../../shared/reader/character-spacing-20.svg) + skin/classic/global/reader/line-spacing-20.svg (../../shared/reader/line-spacing-20.svg) + skin/classic/global/reader/content-width-20.svg (../../shared/reader/content-width-20.svg) + skin/classic/global/tree/sort-asc.svg (../../shared/tree/sort-asc.svg) + skin/classic/global/tree/sort-dsc.svg (../../shared/tree/sort-dsc.svg) diff --git a/toolkit/themes/shared/desktop-non-mac.jar.inc.mn b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn index c976798df5..afa8123140 100644 --- a/toolkit/themes/shared/desktop-non-mac.jar.inc.mn +++ b/toolkit/themes/shared/desktop-non-mac.jar.inc.mn @@ -20,7 +20,4 @@ skin/classic/mozapps/downloads/unknownContentType.css (../../windows/mozapps/downloads/unknownContentType.css) skin/classic/mozapps/handling/handling.css (../../windows/mozapps/handling/handling.css) - skin/classic/global/tree/sort-asc.svg (../../windows/global/tree/sort-asc.svg) - skin/classic/global/tree/sort-dsc.svg (../../windows/global/tree/sort-dsc.svg) - % override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png chrome://mozapps/skin/extensions/extensionGeneric.svg diff --git a/toolkit/themes/shared/icons/blocked.svg b/toolkit/themes/shared/icons/blocked.svg index ccd1308e18..d32de9ac93 100644 --- a/toolkit/themes/shared/icons/blocked.svg +++ b/toolkit/themes/shared/icons/blocked.svg @@ -1,6 +1,6 @@ - + diff --git a/toolkit/themes/shared/icons/content-analysis.svg b/toolkit/themes/shared/icons/content-analysis.svg new file mode 100644 index 0000000000..1ff3ead797 --- /dev/null +++ b/toolkit/themes/shared/icons/content-analysis.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/toolkit/themes/shared/icons/developer.svg b/toolkit/themes/shared/icons/developer.svg index d02257d4d1..fe6d3ac98e 100644 --- a/toolkit/themes/shared/icons/developer.svg +++ b/toolkit/themes/shared/icons/developer.svg @@ -2,5 +2,5 @@ - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - + diff --git a/toolkit/themes/shared/icons/info-filled.svg b/toolkit/themes/shared/icons/info-filled.svg index 62ed3def93..86c6ba50d0 100644 --- a/toolkit/themes/shared/icons/info-filled.svg +++ b/toolkit/themes/shared/icons/info-filled.svg @@ -1,6 +1,6 @@ - + diff --git a/toolkit/themes/shared/icons/info.svg b/toolkit/themes/shared/icons/info.svg index f85c206417..4d9174d88c 100644 --- a/toolkit/themes/shared/icons/info.svg +++ b/toolkit/themes/shared/icons/info.svg @@ -1,7 +1,7 @@ - + diff --git a/toolkit/themes/shared/icons/performance.svg b/toolkit/themes/shared/icons/performance.svg index 00e4cb1d17..b6e9cc4f25 100644 --- a/toolkit/themes/shared/icons/performance.svg +++ b/toolkit/themes/shared/icons/performance.svg @@ -2,6 +2,6 @@ - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - + + diff --git a/toolkit/themes/shared/icons/settings.svg b/toolkit/themes/shared/icons/settings.svg index 8d8f791abe..fd0ad4df14 100644 --- a/toolkit/themes/shared/icons/settings.svg +++ b/toolkit/themes/shared/icons/settings.svg @@ -1,7 +1,7 @@ - + diff --git a/toolkit/themes/shared/icons/warning.svg b/toolkit/themes/shared/icons/warning.svg index 8ffcbb20fe..09fd17107b 100644 --- a/toolkit/themes/shared/icons/warning.svg +++ b/toolkit/themes/shared/icons/warning.svg @@ -1,6 +1,6 @@ - + diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css index 86c6d36210..542e38159d 100644 --- a/toolkit/themes/shared/in-content/common-shared.css +++ b/toolkit/themes/shared/in-content/common-shared.css @@ -77,23 +77,15 @@ --grey-90-a30: rgba(12, 12, 13, 0.3); --grey-90-a50: rgba(12, 12, 13, 0.5); --grey-90-a60: rgba(12, 12, 13, 0.6); - --green-50: #30e60b; --green-60: #12bc00; --green-70: #058b00; - --green-80: #006504; - --green-90: #003706; --orange-50: #ff9400; --red-40: #ff4f5e; --red-50: #ff0039; --red-60: #d70022; - --red-70: #a4000f; - --red-80: #5a0002; - --red-90: #3e0200; --yellow-50: #ffe900; --yellow-60: #d7b600; --yellow-60-a30: rgba(215, 182, 0, 0.3); - --yellow-70: #a47f00; - --yellow-80: #715100; --yellow-90: #3e2800; --shadow-10: 0 1px 4px var(--grey-90-a10); diff --git a/toolkit/themes/shared/reader/align-center-20.svg b/toolkit/themes/shared/reader/align-center-20.svg new file mode 100644 index 0000000000..85d00e63d3 --- /dev/null +++ b/toolkit/themes/shared/reader/align-center-20.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/reader/align-left-20.svg b/toolkit/themes/shared/reader/align-left-20.svg new file mode 100644 index 0000000000..d6a5f523ee --- /dev/null +++ b/toolkit/themes/shared/reader/align-left-20.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/reader/align-right-20.svg b/toolkit/themes/shared/reader/align-right-20.svg new file mode 100644 index 0000000000..fe60df4830 --- /dev/null +++ b/toolkit/themes/shared/reader/align-right-20.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/reader/character-spacing-20.svg b/toolkit/themes/shared/reader/character-spacing-20.svg new file mode 100644 index 0000000000..ecda7fe739 --- /dev/null +++ b/toolkit/themes/shared/reader/character-spacing-20.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/reader/content-width-20.svg b/toolkit/themes/shared/reader/content-width-20.svg new file mode 100644 index 0000000000..a3c2c52e92 --- /dev/null +++ b/toolkit/themes/shared/reader/content-width-20.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/reader/line-spacing-20.svg b/toolkit/themes/shared/reader/line-spacing-20.svg new file mode 100644 index 0000000000..f4a0a44c9a --- /dev/null +++ b/toolkit/themes/shared/reader/line-spacing-20.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/reader/word-spacing-20.svg b/toolkit/themes/shared/reader/word-spacing-20.svg new file mode 100644 index 0000000000..7a0fd6c2c7 --- /dev/null +++ b/toolkit/themes/shared/reader/word-spacing-20.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/tree.css b/toolkit/themes/shared/tree.css deleted file mode 100644 index 9c56af4db4..0000000000 --- a/toolkit/themes/shared/tree.css +++ /dev/null @@ -1,281 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* ===== tree.css =================================================== - == Styles used by the XUL tree element. - ======================================================================= */ - -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace html url("http://www.w3.org/1999/xhtml"); - -/* ::::: tree ::::: */ - -tree { - margin: 0 4px; - background-color: Field; - color: FieldText; - appearance: auto; - -moz-default-appearance: listbox; - @media (-moz-platform: linux) { - appearance: none; - border: 1px solid ThreeDShadow; - } -} - -/* ::::: tree rows ::::: */ - -treechildren::-moz-tree-row { - border: 1px solid transparent; -} - -treechildren::-moz-tree-row, -treecol:not([hideheader="true"]), -.tree-columnpicker-button { - min-height: max(24px, 1.3em); -} - -treechildren::-moz-tree-row(multicol, odd) { - background-color: -moz-oddtreerow; -} - -@media not (prefers-contrast) { - treechildren::-moz-tree-row(hover) { - background-color: hsla(0,0%,50%,.15); - } -} - -treechildren::-moz-tree-row(selected) { - background-color: -moz-cellhighlight; -} - -treechildren::-moz-tree-row(selected, focus) { - background-color: SelectedItem; -} - -treechildren::-moz-tree-row(current, focus) { - outline: var(--default-focusring); - outline-color: SelectedItem; - outline-offset: calc(-1 * var(--default-focusring-width)); -} - -treechildren::-moz-tree-row(selected, current, focus) { - outline-color: #F3D982; -} - -/* ::::: tree cells ::::: */ - -treechildren::-moz-tree-cell { - padding: 0 2px; -} - -treechildren::-moz-tree-cell-text { - color: inherit; -} - -treechildren::-moz-tree-image(selected), -treechildren::-moz-tree-twisty(selected), -treechildren::-moz-tree-cell-text(selected) { - color: -moz-cellhighlighttext; -} - -treechildren::-moz-tree-image(selected, focus), -treechildren::-moz-tree-twisty(selected, focus), -treechildren::-moz-tree-cell-text(selected, focus) { - color: SelectedItemText; -} - - -/* ::::: lines connecting cells ::::: */ - -treechildren::-moz-tree-line { - border: 1px dotted ThreeDShadow; -} - -treechildren::-moz-tree-line(selected, focus) { - border: 1px dotted SelectedItemText; -} - - -/* ::::: tree separator ::::: */ - -treechildren::-moz-tree-separator { - border-top: 1px solid ThreeDShadow; - border-bottom: 1px solid ThreeDHighlight; -} - - -/* ::::: drop feedback ::::: */ - -treechildren::-moz-tree-cell-text(primary, dropOn) { - background-color: SelectedItem; - color: SelectedItemText; -} - -treechildren::-moz-tree-drop-feedback { - background-color: SelectedItem; - width: 50px; - height: 2px; - margin-inline-start: 5px; -} - -/* ::::: tree columns ::::: */ - -treecol, -.tree-columnpicker-button { - appearance: auto; - -moz-default-appearance: treeheadercell; - background-color: -moz-ColHeader; - color: -moz-ColHeaderText; - align-items: center; - justify-content: center; - padding: 0 4px; - margin: 0; - border-inline-start: 1px solid ThreeDLightShadow; - - @media (-moz-platform: linux) or ((-moz-platform: windows) and (prefers-color-scheme: dark)) { - appearance: none; - box-shadow: inset 0 -1px ThreeDLightShadow; - } - - &:where(:hover) { - background-color: -moz-ColHeaderHover; - color: -moz-ColHeaderHoverText; - } - &:where(:hover:active) { - background-color: -moz-ColHeaderActive; - color: -moz-ColHeaderActiveText; - } -} - -.treecol-text { - margin: 0 !important; -} - -treecol:where([ordinal="1"]) { - border-inline-start: none; -} - -treecol[hideheader="true"] { - appearance: none; -} - -/* ::::: column drag and drop styles ::::: */ - -treecol[dragging="true"] { - color: Graytext; -} - -treechildren::-moz-tree-column(insertbefore) { - border-inline-start: 1px solid ThreeDShadow; -} - -treechildren::-moz-tree-column(insertafter) { - border-inline-end: 1px solid ThreeDShadow; -} - -/* ::::: column picker ::::: */ - -.tree-columnpicker-button { - list-style-image: url("chrome://global/skin/icons/columnpicker.svg"); - -moz-context-properties: fill; - fill: currentColor; - min-width: 0; - padding: 1px 0; -} - -.tree-columnpicker-button .button-text { - display: none; -} - -/* ::::: tree icons ::::: */ - -treechildren::-moz-tree-image { - -moz-context-properties: fill; - fill: currentColor; -} - -/* ::::: twisty ::::: */ - -treechildren::-moz-tree-twisty { - padding-top: 1px; - padding-inline: 4px; - width: 12px; /* The image's width is 12 pixels */ - list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg"); - -moz-context-properties: fill; - fill: currentColor; -} - -treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) { - list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg"); -} - -treechildren::-moz-tree-twisty(open) { - list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); -} - -treechildren::-moz-tree-indentation { - width: 16px; -} - -/* ::::: editable tree ::::: */ - -treechildren::-moz-tree-row(selected, editing) { - background-color: transparent; - border: none; -} - -treechildren::-moz-tree-cell-text(selected, editing), -treechildren::-moz-tree-image(selected, editing) { - color: inherit; -} - -html|input.tree-input { - position: absolute; - top: 0; - left: 0; - appearance: none; - flex: 1; - border: 0; - border-radius: 2px; - outline: var(--focus-outline); - margin-block: -1px 0; - margin-inline: -2px 0; - padding: 1px; - font: inherit; -} - -.scrollbar-topmost { - position: relative; - z-index: 2147483647; -} - -@media not (-moz-platform: macos) { - /* ::::: sort direction indicator ::::: */ - .treecol-sortdirection { - list-style-image: url("chrome://global/skin/tree/sort-asc.svg"); - -moz-context-properties: fill; - fill: currentColor; - visibility: hidden; - - treecol[sortDirection="ascending"]:not([hideheader="true"]) > & { - visibility: inherit; - } - - treecol[sortDirection="descending"]:not([hideheader="true"]) > & { - visibility: inherit; - list-style-image: url("chrome://global/skin/tree/sort-dsc.svg"); - } - } -} - -@media (-moz-platform: macos) and (not (prefers-contrast)) { - /* We show a `SelectedItem` background on selected rows, so we do not need the - dotted outline in that case. For users who have Full Keyboard Access - enabled, macOS draws a blue highlight above the row highlight, so keyboard- - only users can still discern the currently-selected row when multiple rows - are selected. */ - treechildren::-moz-tree-row(selected, current, focus) { - outline: none; - } -} diff --git a/toolkit/themes/shared/tree/sort-asc.svg b/toolkit/themes/shared/tree/sort-asc.svg new file mode 100644 index 0000000000..917fa96cf3 --- /dev/null +++ b/toolkit/themes/shared/tree/sort-asc.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/tree/sort-dsc.svg b/toolkit/themes/shared/tree/sort-dsc.svg new file mode 100644 index 0000000000..97cbfc6917 --- /dev/null +++ b/toolkit/themes/shared/tree/sort-dsc.svg @@ -0,0 +1,6 @@ + + + + diff --git a/toolkit/themes/shared/tree/tree.css b/toolkit/themes/shared/tree/tree.css new file mode 100644 index 0000000000..aa4ffa899c --- /dev/null +++ b/toolkit/themes/shared/tree/tree.css @@ -0,0 +1,289 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* ===== tree.css =================================================== + == Styles used by the XUL tree element. + ======================================================================= */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* ::::: tree ::::: */ + +tree { + margin: 0 4px; + background-color: Field; + color: FieldText; + appearance: auto; + -moz-default-appearance: listbox; + @media (-moz-platform: linux) { + appearance: none; + border: 1px solid ThreeDShadow; + } +} + +/********** splitter **********/ + +.tree-splitter { + margin-inline: -4px; + width: 8px; + max-width: 8px; + min-width: 8px; + appearance: none !important; + border: none !important; + background: none !important; + order: 2147483646; + z-index: 2147483646; +} + + +/* ::::: tree rows ::::: */ + +treechildren::-moz-tree-row { + border: 1px solid transparent; +} + +treechildren::-moz-tree-row, +treecol:not([hideheader="true"]), +.tree-columnpicker-button { + min-height: max(24px, 1.3em); +} + +treechildren::-moz-tree-row(multicol, odd) { + background-color: -moz-oddtreerow; +} + +@media not (prefers-contrast) { + treechildren::-moz-tree-row(hover) { + background-color: hsla(0,0%,50%,.15); + } +} + +treechildren::-moz-tree-row(selected) { + background-color: -moz-cellhighlight; +} + +treechildren::-moz-tree-row(selected, focus) { + background-color: SelectedItem; +} + +treechildren::-moz-tree-row(current, focus) { + outline: var(--default-focusring); + outline-color: SelectedItem; + outline-offset: calc(-1 * var(--default-focusring-width)); +} + +treechildren::-moz-tree-row(selected, current, focus) { + outline-color: #F3D982; +} + +/* ::::: tree cells ::::: */ + +treechildren::-moz-tree-cell { + padding: 0 2px; +} + +treechildren::-moz-tree-cell-text { + color: inherit; +} + +treechildren::-moz-tree-image(selected), +treechildren::-moz-tree-twisty(selected), +treechildren::-moz-tree-cell-text(selected) { + color: -moz-cellhighlighttext; +} + +treechildren::-moz-tree-image(selected, focus), +treechildren::-moz-tree-twisty(selected, focus), +treechildren::-moz-tree-cell-text(selected, focus) { + color: SelectedItemText; +} + + +/* ::::: lines connecting cells ::::: */ + +treechildren::-moz-tree-line { + border: 1px dotted ThreeDShadow; +} + +treechildren::-moz-tree-line(selected, focus) { + border: 1px dotted SelectedItemText; +} + + +/* ::::: tree separator ::::: */ + +treechildren::-moz-tree-separator { + border-top: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDHighlight; +} + + +/* ::::: drop feedback ::::: */ + +treechildren::-moz-tree-cell-text(primary, dropOn) { + background-color: SelectedItem; + color: SelectedItemText; +} + +treechildren::-moz-tree-drop-feedback { + background-color: SelectedItem; + width: 50px; + height: 2px; + margin-inline-start: 5px; +} + +/* ::::: tree columns ::::: */ + +treecol, +.tree-columnpicker-button { + background-color: -moz-ColHeader; + color: -moz-ColHeaderText; + align-items: center; + justify-content: center; + padding: 0 4px; + margin: 0; + + border-inline-start: 1px solid ThreeDLightShadow; + box-shadow: inset 0 -1px ThreeDLightShadow; + + &:where(:hover) { + background-color: -moz-ColHeaderHover; + color: -moz-ColHeaderHoverText; + } + &:where(:hover:active) { + background-color: -moz-ColHeaderActive; + color: -moz-ColHeaderActiveText; + } +} + +.treecol-text { + margin: 0 !important; +} + +treecol:where([ordinal="1"]) { + border-inline-start: none; +} + +treecol[hideheader="true"] { + appearance: none; +} + +/* ::::: column drag and drop styles ::::: */ + +treecol[dragging="true"] { + color: Graytext; +} + +treechildren::-moz-tree-column(insertbefore) { + border-inline-start: 1px solid ThreeDShadow; +} + +treechildren::-moz-tree-column(insertafter) { + border-inline-end: 1px solid ThreeDShadow; +} + +/* ::::: column picker ::::: */ + +.tree-columnpicker-button { + list-style-image: url("chrome://global/skin/icons/columnpicker.svg"); + -moz-context-properties: fill; + fill: currentColor; + min-width: 0; + padding: 1px 0; +} + +.tree-columnpicker-button .button-text { + display: none; +} + +/* ::::: tree icons ::::: */ + +treechildren::-moz-tree-image { + -moz-context-properties: fill; + fill: currentColor; +} + +/* ::::: twisty ::::: */ + +treechildren::-moz-tree-twisty { + padding-top: 1px; + padding-inline: 4px; + width: 12px; /* The image's width is 12 pixels */ + list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) { + list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg"); +} + +treechildren::-moz-tree-twisty(open) { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); +} + +treechildren::-moz-tree-indentation { + width: 16px; +} + +/* ::::: editable tree ::::: */ + +treechildren::-moz-tree-row(selected, editing) { + background-color: transparent; + border: none; +} + +treechildren::-moz-tree-cell-text(selected, editing), +treechildren::-moz-tree-image(selected, editing) { + color: inherit; +} + +html|input.tree-input { + position: absolute; + top: 0; + left: 0; + appearance: none; + flex: 1; + border: 0; + border-radius: 2px; + outline: var(--focus-outline); + margin-block: -1px 0; + margin-inline: -2px 0; + padding: 1px; + font: inherit; +} + +.scrollbar-topmost { + position: relative; + z-index: 2147483647; +} + +/* ::::: sort direction indicator ::::: */ +.treecol-sortdirection { + list-style-image: url("chrome://global/skin/tree/sort-asc.svg"); + -moz-context-properties: fill; + fill: currentColor; + visibility: hidden; + + treecol[sortDirection="ascending"]:not([hideheader="true"]) > & { + visibility: inherit; + } + + treecol[sortDirection="descending"]:not([hideheader="true"]) > & { + visibility: inherit; + list-style-image: url("chrome://global/skin/tree/sort-dsc.svg"); + } +} + +@media (-moz-platform: macos) and (not (prefers-contrast)) { + /* We show a `SelectedItem` background on selected rows, so we do not need the + dotted outline in that case. For users who have Full Keyboard Access + enabled, macOS draws a blue highlight above the row highlight, so keyboard- + only users can still discern the currently-selected row when multiple rows + are selected. */ + treechildren::-moz-tree-row(selected, current, focus) { + outline: none; + } +} diff --git a/toolkit/themes/windows/global/tree/sort-asc.svg b/toolkit/themes/windows/global/tree/sort-asc.svg deleted file mode 100644 index 917fa96cf3..0000000000 --- a/toolkit/themes/windows/global/tree/sort-asc.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/toolkit/themes/windows/global/tree/sort-dsc.svg b/toolkit/themes/windows/global/tree/sort-dsc.svg deleted file mode 100644 index 97cbfc6917..0000000000 --- a/toolkit/themes/windows/global/tree/sort-dsc.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - -- cgit v1.2.3