From 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 03:47:29 +0200 Subject: Adding upstream version 115.8.0esr. Signed-off-by: Daniel Baumann --- browser/themes/osx/browser.css | 391 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 391 insertions(+) create mode 100644 browser/themes/osx/browser.css (limited to 'browser/themes/osx/browser.css') diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css new file mode 100644 index 0000000000..4c1f29f890 --- /dev/null +++ b/browser/themes/osx/browser.css @@ -0,0 +1,391 @@ +/* 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/. */ + +@import url("chrome://browser/skin/browser-shared.css"); +@import url("chrome://browser/skin/browser-custom-colors.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-non-lwt-bgcolor: -moz-dialog; + --toolbar-non-lwt-textcolor: -moz-dialogtext; + + --arrowpanel-field-background: rgba(249,249,250,.3); + + --chrome-content-separator-color: #e1e1e2; +} + +:root:-moz-lwtheme { + --chrome-content-separator-color: rgba(0,0,0,.3); +} + +:root[lwt-popup-brighttext] { + --arrowpanel-field-background: rgba(12,12,13,.3); +} + +#browser { + /* #browser and #navigator-toolbox must have relative positions so that the + latter can slide over the former in fullscreen mode. */ + position: relative; +} + +#navigator-toolbox { + appearance: none; + position: relative; +} + +#navigator-toolbox:not(:-moz-lwtheme) { + background-color: window; +} + +@media not (prefers-contrast) { + #navigator-toolbox:not(:-moz-lwtheme) { + background-color: #f0f0f4; + } +} + +/* + This is a workaround for Bug 1482157 + -moz-default-appearance: toolbox; makes the macOS sheets attached to the + element's bottom border. We cannot put this property on the toolbox itself as + it cancels all backgrounds that are there, so we set it on the toolbox bottom + border. +*/ +#navigator-toolbox::after { + content: ""; + display: flex; + appearance: auto; + -moz-default-appearance: toolbox; + height: 1px; + margin-top: -1px; + opacity: 0.001; +} + +/** Begin titlebar **/ + +#titlebar { + /* Centrally align content items vertically */ + justify-content: center; +} + +.titlebar-button { + display: none; +} + +.titlebar-buttonbox-container { + align-items: center; +} + +/* Hide window controls in fullscreen */ +:root[inFullscreen] .titlebar-buttonbox-container { + display: none; +} + +.titlebar-buttonbox:-moz-locale-dir(ltr) { + margin-left: 12px; + margin-right: 0; +} + +.titlebar-buttonbox:-moz-locale-dir(rtl) { + margin-left: 12px; + margin-right: 12px; +} + +@media (-moz-mac-rtl) { + .titlebar-buttonbox:-moz-locale-dir(ltr) { + margin-left: 12px; + margin-right: 12px; + } + + .titlebar-buttonbox:-moz-locale-dir(rtl) { + margin-left: 0; + margin-right: 12px; + } +} + +/** End titlebar **/ + +:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { + border-top: 1px solid rgba(0,0,0,0.65); +} + +.browser-toolbar { + appearance: none; +} + +.browser-toolbar:not(.titlebar-color) { + background: var(--toolbar-bgcolor); + color: var(--toolbar-color); +} + +/* Draw the bottom border of the tabs toolbar when titlebar isn't using vibrancy */ +:root:not([inFullscreen], [tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]), +#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)); +} + +#nav-bar:not([tabs-hidden="true"]) { + /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed. + The animations use position:absolute and require a positioned #nav-bar. */ + position: relative; +} + +/* ----- BOOKMARK TOOLBAR ----- */ + +#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks { + min-height: 32px; + align-items: center; +} + +/* Workaround for native menubar inheritance */ +.openintabs-menuitem { + list-style-image: none; +} + +.bookmark-item[cutting] > .toolbarbutton-icon, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { + opacity: 0.5; +} + +.bookmark-item[cutting] > .toolbarbutton-text, +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { + opacity: 0.7; +} + +/* ----- BOOKMARK MENUS ----- */ + +.bookmark-item > .menu-iconic-left > .menu-iconic-icon { + width: 16px; + height: 16px; +} + +#bookmarksToolbarFolderMenu, +#BMB_bookmarksToolbar, +#panelMenu_bookmarksToolbar { + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg"); +} + +/* Inactive elements are faded out on OSX */ +.toolbarbutton-1:not(:hover):-moz-window-inactive, +.bookmark-item:not(:hover):-moz-window-inactive, +:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] { + opacity: 0.5; +} + +/* Address bar */ + +@media not (prefers-contrast) { + :root:not(:-moz-lwtheme) #urlbar { + --urlbar-box-bgcolor: white; + } + :root[lwt-default-theme-in-dark-mode] #urlbar { + --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color); + } +} + +@media (prefers-contrast) { + /* The "increase contrast" preference on macOS draws a 1px black line around + panels, including the separate search bar. Since the Urlbar is not + implemented as a panel, it does not get this outline. This outline rule + resembles the system outline, bringing the Urlbar in line with panels and + other Mac apps. */ + #urlbar[open] > #urlbar-background { + outline: 1px solid var(--focus-outline-color) + } +} + +#urlbar, +#searchbar { + font-size: 1.25em; +} + +@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") { + #urlbar[breakout-extend] { + font-size: 1.36em; + } +} + +/* Move the margin to the parent element to properly position the ::after badge */ +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left > .menu-iconic-icon { + margin-inline: 0; +} +moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left { + margin-inline: 0 5px; +} + +/* ----- AUTOCOMPLETE ----- */ + +#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { + border-top: 1px solid #C7C7C7; +} + +/* Bookmarking panel */ + +/* The following elements come from editBookmarkPanel.inc.xhtml. Styling that's + specific to the editBookmarkPanel should be in browser.css. Styling that + should be shared by all editBookmarkPanel.inc.xhtml consumers should be in + editBookmark.css. */ + +/**** folder tree and tag selector ****/ + +#editBMPanel_folderTree, +#editBMPanel_tagsSelector { + appearance: none; + background-color: var(--arrowpanel-field-background); + color: inherit; + border-radius: 2px; + border: 1px solid var(--panel-separator-color); + margin: 0; +} + +#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected), +#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { + background-color: var(--arrowpanel-dimmed); +} + +#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected), +#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected), +#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected), +#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { + color: inherit; +} + +#editBMPanel_folderTree { + border-bottom: none; + border-end-start-radius: 0; + border-end-end-radius: 0; + /* Implements editBookmarkPanel resizing on folderTree un-collapse. */ + margin: 0 !important; + min-width: 27em; + position: relative; +} + +/* ----- SIDEBAR ELEMENTS ----- */ + +#browser { + --sidebar-border-color: hsla(240, 5%, 5%, .1); +} + +#sidebar-box { + /* Default font size is 11px on mac, so this is 12px */ + font-size: 1.0909rem; + --sidebar-background-color: -moz-mac-source-list; +} + +/* Give the sidebar a vibrant appearance. Only do this when no lwtheme sidebar + * rules are in use. Vibrant appearance values only work if there is no + * background-color rendered behind the element. If the active theme has sidebar + * rules, we want to show the theme's background-color in the sidebar. */ +#sidebar-box:not([lwt-sidebar]) { + appearance: auto; + -moz-default-appearance: -moz-mac-source-list; + -moz-font-smoothing-background-color: -moz-mac-source-list; +} + +/* ----- CONTENT ----- */ + +.openintabs-menuitem { + list-style-image: none; +} + +/* ::::: tabbrowser ::::: */ + +#tabbrowser-tabbox { + margin: 0; +} + +.tab-label { + margin-block: 1px 0; +} + +.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"], [multiselected]) { + opacity: .9; +} + +/* + * Force the overlay to create a new stacking context so it always appears on + * top of the icon. + */ +.tab-icon-overlay { + opacity: 0.9999; +} + +.tab-label-container:not([selected="true"], [multiselected]) { + opacity: .7; +} + +.tabbrowser-tab { + font: message-box; + border: none; +} +.tabbrowser-tab[multiselected]:not(:-moz-lwtheme), +.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) { + /* overriding tabbox.css */ + color: hsl(240, 5%, 5%); +} + +.tabbrowser-tab[multiselected], +.tabbrowser-tab[visuallyselected=true] { + /* overriding tabbox.css */ + text-shadow: inherit; +} + +#tabbrowser-tabs { + /* overriding tabbox.css */ + align-items: stretch; + margin-bottom: 0; + position: static; + z-index: auto; +} + +/* Bookmark drag and drop styles */ + +.bookmark-item[dragover-into="true"] { + background: SelectedItem !important; + color: SelectedItemText !important; +} + +/* Status panel */ + +#statuspanel-label { + margin: 0; + padding: 2px 4px; + background-color: #f9f9fa; + border: 1px none #ddd; + border-top-style: solid; + color: #444; + text-shadow: none; +} + +@media (-moz-content-prefers-color-scheme: dark) { + #statuspanel-label { + background-color: hsl(240, 1%, 20%); + border-color: hsl(240, 1%, 40%); + color: rgb(249, 249, 250); + } +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) { + border-right-style: solid; + border-top-right-radius: .3em; + margin-right: 1em; +} + +#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) { + border-left-style: solid; + border-top-left-radius: .3em; + margin-left: 1em; +} + +#UITourTooltipDescription { + font-size: 1.18rem; + line-height: 2rem; +} + +#UITourTooltipClose { + margin-inline-end: -10px; + margin-top: -14px; +} -- cgit v1.2.3