diff --git a/application/basilisk/themes/linux/devedition.css b/application/basilisk/themes/linux/devedition.css new file mode 100644 index 0000000000..1f16d5d63b --- /dev/null +++ b/application/basilisk/themes/linux/devedition.css @@ -0,0 +1,106 @@ +% 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/. + +%include ../shared/devedition.inc.css + +:root { + --forwardbutton-width: 29px; +} + +:root[devtoolstheme="light"] { + --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); +} + +:root[devtoolstheme="dark"] .findbar-closebutton:not(:hover), +:root[devtoolstheme="dark"] #sidebar-header > .close-icon:not(:hover), +.tab-close-button[selected]:not(:hover) { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); +} + +/* The menubar and tabs toolbar should match the devedition theme */ +#TabsToolbar, +#toolbar-menubar { + -moz-appearance: none !important; +} +#main-menubar { + color: var(--chrome-color); +} +#main-menubar > menu:not([open]) { + color: inherit; +} + +/* Allow buttons with -moz-appearance set to look normal on hover and open states */ +#navigator-toolbox .toolbarbutton-1:-moz-any(:hover, [open="true"]), +#PlacesToolbar toolbarbutton.bookmark-item:-moz-any(:hover, [open="true"]) { + color: initial; +} + +/* Square back and forward buttons */ +#back-button > .toolbarbutton-icon, +#forward-button > .toolbarbutton-icon { + margin: 0; + border: 1px solid var(--chrome-nav-bar-controls-border-color); + padding: 2px 5px; + background: var(--chrome-nav-buttons-background); + box-shadow: none !important; +} + +#forward-button > .toolbarbutton-icon { + border-inline-start: none; +} + +/* Override a box shadow for disabled back button */ +#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon { + box-shadow: none !important; +} + +#back-button:hover:not([disabled="true"]) > .toolbarbutton-icon, +#forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon { + background: var(--chrome-nav-buttons-hover-background) !important; +} + +#back-button > .toolbarbutton-icon { + border-radius: 2px 0 0 2px !important; +} + +.urlbar-history-dropmarker { + -moz-appearance: none; + padding: 0 3px; + list-style-image: var(--urlbar-dropmarker-url); + -moz-image-region: var(--urlbar-dropmarker-region); +} + +/* Add the proper background for tab overflow */ +#alltabs-button, +#new-tab-button { + background: var(--chrome-background-color); +} + +#new-tab-button:hover > .toolbarbutton-icon { + border-color: transparent !important; +} + +/* Prevent double border below tabs toolbar */ +#TabsToolbar:not([collapsed="true"]) + #nav-bar { + border-top-width: 0 !important; +} + +/* Fix the bad-looking text-shadow in the sidebar header: */ +.sidebar-header, +#sidebar-header { + text-shadow: none; +} + +.ac-type-icon { + /* Left-align the type icon in awesomebar popup results with the icon in the + urlbar. */ + margin-inline-start: 11px; +} diff --git a/application/basilisk/themes/linux/jar.mn b/application/basilisk/themes/linux/jar.mn index 81581dfaa9..e9f666418b 100644 --- a/application/basilisk/themes/linux/jar.mn +++ b/application/basilisk/themes/linux/jar.mn @@ -13,6 +13,7 @@ browser.jar: #endif skin/classic/browser/actionicon-tab.png * skin/classic/browser/browser.css +* skin/classic/browser/devedition.css * skin/classic/browser/browser-lightweightTheme.css skin/classic/browser/click-to-play-warning-stripes.png skin/classic/browser/Info.png diff --git a/application/basilisk/themes/osx/devedition.css b/application/basilisk/themes/osx/devedition.css new file mode 100644 index 0000000000..c7a2bdd714 --- /dev/null +++ b/application/basilisk/themes/osx/devedition.css @@ -0,0 +1,121 @@ +% 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/. + +%include ../shared/devedition.inc.css + +:root { + --forwardbutton-width: 32px; +} + +/* Use only 1px separator between nav toolbox and page content */ +#navigator-toolbox::after { + border-top-style: none; + margin-top: -1px; +} + +/* Include extra space on left/right for dragging since there is no space above + the tabs */ +#main-window[tabsintitlebar] #TabsToolbar { + padding-left: 50px; + padding-right: 50px; + margin-bottom: 0; /* Don't overlap the inner highlight at the top of the nav-bar */ +} + +/* Get rid of 1px bright strip at the top of window */ +#main-window[tabsintitlebar] #titlebar-content { + background: var(--chrome-background-color); +} + +/* Resize things so that the native titlebar is in line with the tabs */ +#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container, +#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button { + margin-top: 6px; +} + +/* Square back and forward buttons. Need !important on these because there + are a lot of more specific selectors sprinkled around elsewhere for changing + background / shadows for different states */ +#back-button, +#forward-button { + height: 24px !important; + box-shadow: none !important; + border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + background: var(--chrome-nav-buttons-background) !important; +} + +#forward-button { + border-inline-start: none !important; + /* browser.css and friends set up the width of the button to be 32px. + * They then set margin-left to -2px to ensure the button is not too wide + * compared to the back button, and set padding-left to center the icon + * correctly. + * In our theme, the back and forward buttons are the same width, with the + * back button being 32px with 1px border on both sides. To ensure the + * forward button's content box looks like it is the same size with width + * set to 32px and a 1px border on only 1 side, we overlap by 1px, so both + * buttons end up with a content box that looks like it's 30px. + */ + margin-left: -1px; + padding-left: 1px; +} + +#forward-button > .toolbarbutton-icon { + margin-left: 0; + margin-right: 0; +} + +#back-button:hover:not([disabled="true"]), +#forward-button:hover:not([disabled="true"]) { + background: var(--chrome-nav-buttons-hover-background) !important; +} + +#back-button { + border-radius: 3px 0 0 3px !important; + padding: 0 !important; + margin: 0 !important; +} + +#back-button:hover:active:not([disabled="true"]) { + -moz-image-region: rect(18px, 54px, 36px, 36px); +} + +/* Use smaller back button icon */ +@media (min-resolution: 2dppx) { + #back-button:hover:active:not([disabled="true"]) { + -moz-image-region: rect(36px, 108px, 72px, 72px); + } +} + +/* Don't use the default background for tabs toolbar */ +#TabsToolbar { + -moz-appearance: none !important; +} + +/* Prevent the hover styling from on the identity icon from overlapping the + urlbar border. */ +#identity-box { + margin-top: -1px !important; + margin-bottom: -1px !important; + padding-top: 3px !important; + padding-bottom: 3px !important; +} + +:root[devtoolstheme="dark"] .findbar-closebutton:not(:hover), +/* Tab styling - make sure to use an inverted icon for the selected tab + (brighttext only covers the unselected tabs) */ +.tab-close-button[selected=true]:not(:hover) { + -moz-image-region: rect(0, 64px, 16px, 48px); +} +@media (min-resolution: 2dppx) { + :root[devtoolstheme="dark"] .findbar-closebutton:not(:hover), + .tab-close-button[selected=true]:not(:hover) { + -moz-image-region: rect(0, 128px, 32px, 96px); + } +} + +.ac-type-icon { + /* Left-align the type icon in awesomebar popup results with the icon in the + urlbar. */ + margin-inline-start: 14px; +} diff --git a/application/basilisk/themes/osx/jar.mn b/application/basilisk/themes/osx/jar.mn index 5dec6559ad..92d2ceedf5 100644 --- a/application/basilisk/themes/osx/jar.mn +++ b/application/basilisk/themes/osx/jar.mn @@ -13,6 +13,7 @@ browser.jar: skin/classic/browser/actionicon-tab.png skin/classic/browser/actionicon-tab@2x.png * skin/classic/browser/browser.css +* skin/classic/browser/devedition.css * skin/classic/browser/browser-lightweightTheme.css skin/classic/browser/click-to-play-warning-stripes.png skin/classic/browser/Info.png diff --git a/application/basilisk/themes/shared/devedition.inc.css b/application/basilisk/themes/shared/devedition.inc.css new file mode 100644 index 0000000000..a5c0db9489 --- /dev/null +++ b/application/basilisk/themes/shared/devedition.inc.css @@ -0,0 +1,311 @@ +% 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/. + +/* devedition.css is loaded in browser.xul after browser.css when it is + preffed on. The bulk of the styling is here in the shared file, but + there are overrides for each platform in their devedition.css files. */ + +:root { + --tab-toolbar-navbar-overlap: 0px; + --navbar-tab-toolbar-highlight-overlap: 0px; + --space-above-tabbar: 0px; + --toolbarbutton-text-shadow: none; + --backbutton-urlbar-overlap: 0px; +} + +:root[devtoolstheme="dark"] { + /* Chrome */ + --chrome-background-color: #272b35; + --chrome-color: #F5F7FA; + --chrome-secondary-background-color: #393F4C; + --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2); + --chrome-nav-bar-separator-color: rgba(0,0,0,.2); + --chrome-nav-buttons-background: #252C33; + --chrome-nav-buttons-hover-background: #1B2127; + --chrome-nav-bar-controls-border-color: #1D2328; + --chrome-selection-color: #fff; + --chrome-selection-background-color: #5675B9; + + /* Tabs */ + --tabs-toolbar-color: #F5F7FA; + --tab-background-color: #272b35; + --tab-hover-background-color: #07090a; + --tab-selection-color: #f5f7fa; + --tab-selection-background-color: #5675B9; + --tab-selection-box-shadow: none; + --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%); + + /* Url and search bars */ + --url-and-searchbar-background-color: #171B1F; + --urlbar-separator-color: #5F6670; + --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); + --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px); + --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); +} + +/* Override the lwtheme-specific styling for toolbar buttons */ +:root[devtoolstheme="dark"], +:root[devtoolstheme="dark"] toolbar:-moz-lwtheme { + --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box; + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6); + --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box; + --toolbarbutton-active-boxshadow: none; + --toolbarbutton-active-bordercolor: rgba(25,33,38,.8); + --toolbarbutton-checkedhover-backgroundcolor: #3C5283; + +} + +:root[devtoolstheme="light"] { + --url-and-searchbar-background-color: #fff; + + --chrome-background-color: #E3E4E6; + --chrome-color: #18191a; + --chrome-secondary-background-color: #f5f6f7; + --chrome-navigator-toolbox-separator-color: #cccccc; + --chrome-nav-bar-separator-color: #B6B6B8; + --chrome-nav-buttons-background: #ffffff; /* --theme-body-background */ + --chrome-nav-buttons-hover-background: #DADBDB; + --chrome-nav-bar-controls-border-color: #ccc; + --chrome-selection-color: #f5f7fa; + --chrome-selection-background-color: #4c9ed9; + + --tab-background-color: #E3E4E6; + --tab-hover-background-color: #D7D8DA; + --tab-selection-color: #f5f7fa; + --tab-selection-background-color: #4c9ed9; + --tab-selection-box-shadow: none; + --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%); +} + +/* Override the lwtheme-specific styling for toolbar buttons */ +:root[devtoolstheme="light"], +:root[devtoolstheme="light"] toolbar:-moz-lwtheme { + --toolbarbutton-hover-background: #eaeaea; + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1); + --toolbarbutton-active-background: #d7d7d8 border-box; + --toolbarbutton-active-boxshadow: none; + --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15); + --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8; +} + +/* Give some space to drag the window around while customizing + (normal space to left and right of tabs doesn't work in this case) */ +#main-window[tabsintitlebar][customizing] { + --space-above-tabbar: 9px; +} + +/* Override @tabCurveHalfWidth@ and @tabCurveWidth@. XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */ +.tab-background-middle { + border-left-width: 0; + border-right-width: 0; + margin: 0; +} + +.tab-background, +.tabs-newtab-button { + margin-inline-end: 0; + margin-inline-start: 0; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-inline-end: 0; + padding-inline-start: 0; +} + +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, +.tab-background-start, +.tab-background-end, +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { + width: 0; +} + +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { + margin-inline-start: 0; +} +/* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */ + +#urlbar ::-moz-selection, +#navigator-toolbox .searchbar-textbox ::-moz-selection, +.browserContainer > findbar ::-moz-selection { + background-color: var(--chrome-selection-background-color); + color: var(--chrome-selection-color); +} + +/* Change the base colors for the browser chrome */ + +#tabbrowser-tabs, +#TabsToolbar, +#browser-panel { + background: var(--chrome-background-color); + color: var(--chrome-color); +} + +#navigator-toolbox:-moz-lwtheme::after { + border-bottom-color: var(--chrome-navigator-toolbox-separator-color); +} + +#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), +.browserContainer > findbar, +#browser-bottombox { + background-color: var(--chrome-secondary-background-color) !important; + background-image: none !important; + color: var(--chrome-color); +} + +/* Default findbar text color doesn't look good - Bug 1125677 */ +.browserContainer > findbar .findbar-find-status, +.browserContainer > findbar .found-matches { + color: inherit; +} + +#navigator-toolbox .toolbarbutton-1, +.browserContainer > findbar .findbar-button, +#PlacesToolbar toolbarbutton.bookmark-item { + color: var(--chrome-color); + text-shadow: var(--toolbarbutton-text-shadow); +} + +/* Using toolbar[brighttext] instead of important to override linux */ +toolbar[brighttext] #downloads-indicator-counter { + text-shadow: var(--toolbarbutton-text-shadow); + color: var(--chrome-color); +} + +#TabsToolbar { + text-shadow: none !important; +} + +/* URL bar and search bar*/ +#urlbar, +#navigator-toolbox .searchbar-textbox { + background-color: var(--url-and-searchbar-background-color) !important; + background-image: none !important; + color: inherit !important; + border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + box-shadow: none !important; +} + +%filter substitution +%define selectorPrefix :root[devtoolstheme="dark"] +%define selectorSuffix :-moz-lwtheme +%define iconVariant -white +%include identity-block/icons.inc.css + +#urlbar { + border-inline-start: none !important; + opacity: 1 !important; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper { + overflow: -moz-hidden-unscrollable; + clip-path: none; + margin-inline-start: 0; +} + +:root[devtoolstheme="dark"] #urlbar-zoom-button:hover { + background-color: rgba(255,255,255,.2); +} + +:root[devtoolstheme="dark"] #urlbar-zoom-button:hover:active { + background-color: rgba(255,255,255,.3); +} + +/* Nav bar specific stuff */ +#nav-bar { + margin-top: 0 !important; + border-top: none !important; + border-bottom: none !important; + border-radius: 0 !important; + box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important; +} + +/* No extra vertical padding for nav bar */ +#nav-bar-customization-target, +#nav-bar { + padding-top: 0; + padding-bottom: 0; +} + +/* Use smaller back button icon */ +#back-button { + -moz-image-region: rect(0, 54px, 18px, 36px); +} + +@media (min-resolution: 1.1dppx) { + #back-button { + -moz-image-region: rect(0, 108px, 36px, 72px); + } +} + +.tab-background { + visibility: hidden; +} + +/* Tab separators */ +.tabbrowser-tab::after, +.tabbrowser-tab::before { + background: currentColor; + opacity: 0.2 !important; +} + +.tabbrowser-arrowscrollbox > .scrollbutton-down, +.tabbrowser-arrowscrollbox > .scrollbutton-up { + background-color: var(--tab-background-color); + border-color: transparent; +} + +.tabbrowser-tab { + /* We normally rely on other tab elements for pointer events, but this + theme hides those so we need it set here instead */ + pointer-events: auto; +} + +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-image: var(--pinned-tab-glow); + background-position: center; + background-size: 100%; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { + background-position: left bottom var(--tab-toolbar-navbar-overlap); + background-size: 34px 100%; +} + +.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover, +.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover, +.tabbrowser-tab:hover { + background-color: var(--tab-hover-background-color); +} + +.tabbrowser-tab[visuallyselected] { + color: var(--tab-selection-color) !important; /* Override color: inherit */ + background-color: var(--tab-selection-background-color); +} + +.tab-icon-sound[soundplaying], +.tab-icon-sound[muted] { + filter: url(chrome://browser/skin/filters.svg#fill) !important; /* removes drop-shadow filter */ +} + +/* Don't need space for the tab curves (66px - 30px) */ +.tabs-newtab-button { + width: 36px; +} + +.tabs-newtab-button:hover { + /* Important needed because !important is used in browser.css */ + background-color: var(--tab-hover-background-color) !important; + background-image: none; +} diff --git a/application/basilisk/themes/shared/devedition/urlbar-history-dropmarker.svg b/application/basilisk/themes/shared/devedition/urlbar-history-dropmarker.svg new file mode 100644 index 0000000000..115fbf127e --- /dev/null +++ b/application/basilisk/themes/shared/devedition/urlbar-history-dropmarker.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/application/basilisk/themes/shared/jar.inc.mn b/application/basilisk/themes/shared/jar.inc.mn index 1fc7769a5d..361edd3117 100644 --- a/application/basilisk/themes/shared/jar.inc.mn +++ b/application/basilisk/themes/shared/jar.inc.mn @@ -139,5 +139,6 @@ skin/classic/browser/privatebrowsing/private-browsing.svg (../shared/privatebrowsing/private-browsing.svg) skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg) skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg) + skin/classic/browser/devedition/urlbar-history-dropmarker.svg (../shared/devedition/urlbar-history-dropmarker.svg) skin/classic/browser/urlbar-star.svg (../shared/urlbar-star.svg) skin/classic/browser/urlbar-tab.svg (../shared/urlbar-tab.svg) diff --git a/application/basilisk/themes/windows/browser.css b/application/basilisk/themes/windows/browser.css index ee537a4b66..d87b8eeafa 100644 --- a/application/basilisk/themes/windows/browser.css +++ b/application/basilisk/themes/windows/browser.css @@ -196,6 +196,9 @@ toolbar:-moz-lwtheme { @media not all and (-moz-windows-compositor), not all and (-moz-windows-default-theme) { + /* Please keep the menu text colors in this media block in sync with + * devedition.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718. + */ :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme) { --titlebar-text-color: CaptionText; } diff --git a/application/basilisk/themes/windows/devedition.css b/application/basilisk/themes/windows/devedition.css new file mode 100644 index 0000000000..2dc72eeeb3 --- /dev/null +++ b/application/basilisk/themes/windows/devedition.css @@ -0,0 +1,319 @@ +% 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/. + +%include ../shared/devedition.inc.css + +:root { + --forwardbutton-width: 29px; +} + +:root[devtoolstheme="dark"], +:root[devtoolstheme="light"] { + /* Matches the #browser-border-start, #browser-border-end color */ + --chrome-nav-bar-separator-color: rgba(10, 31, 51, 0.35); +} + +/* The window background is white due to no accentcolor in the lightweight + theme. It can't be changed to transparent when there is no compositor + (Win XP or 7 in classic / basic theme), or else dragging and focus become + broken. So instead just show the normal titlebar in that case, and override + the window color as transparent when the compositor is available. */ +@media not all and (-moz-windows-compositor) { + #main-window[tabsintitlebar] #titlebar:-moz-lwtheme { + visibility: visible; + } + + #main-window { + background: var(--chrome-background-color) !important; + } +} + +@media (-moz-windows-compositor) { + #main-window { + background: transparent !important; + } +} + +#TabsToolbar::after { + display: none; +} + +#back-button > .toolbarbutton-icon, +#forward-button > .toolbarbutton-icon { + background: var(--chrome-nav-buttons-background) !important; + border-radius: 0 !important; + height: auto !important; + padding: var(--toolbarbutton-vertical-inner-padding) 5px !important; + margin: 0 !important; + border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + box-shadow: none !important; +} + +#back-button > .toolbarbutton-icon { + /* 18px icon + 2 * 5px padding + 2 * 1px border */ + width: 30px !important; +} + +#forward-button > .toolbarbutton-icon { + /* 18px icon + 2 * 5px padding + 1 * 1px border */ + width: 29px !important; +} + +/* the normal theme adds box-shadow: !important when the back-button is [open]. Fix: */ +#back-button[open="true"] > .toolbarbutton-icon { + box-shadow: none !important; +} + +#forward-button > .toolbarbutton-icon { + border-inline-start: none !important; +} + +/* Override a box shadow for disabled back button */ +#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon { + box-shadow: none !important; +} + +/* Override !important properties for hovered back button */ +#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon, +#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon { + background: var(--chrome-nav-buttons-hover-background) !important; + box-shadow: none !important; +} + +#back-button > .toolbarbutton-icon { + border-radius: 2px 0 0 2px !important; +} + +#nav-bar .toolbarbutton-1:not([type=menu-button]), +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { + padding-top: 2px; + padding-bottom: 2px; +} + +.tabbrowser-tab { + background-color: var(--tab-background-color); +} + +#toolbar-menubar { + text-shadow: none !important; +} + +:root[devtoolstheme="dark"] .findbar-closebutton, +:root[devtoolstheme="dark"] #sidebar-header > .close-icon, +/* Tab styling - make sure to use an inverted icon for the selected tab + (brighttext only covers the unselected tabs) */ +.tab-close-button[selected=true] { + list-style-image: url("chrome://global/skin/icons/close-inverted.png"); +} + +@media (min-resolution: 1.1dppx) { + :root[devtoolstheme="dark"] .findbar-closebutton, + :root[devtoolstheme="dark"] #sidebar-header > .close-icon, + .tab-close-button[selected=true] { + list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); + } +} + +@media (-moz-os-version: windows-xp), + (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8) { + :root { + --space-above-tabbar: 15px; + } + + /* It'd be nice if there was an element in the scrollbox's inner content + that collapsed to the current width of the tabs. Since there isn't we + need to handle overflowing and non-overflowing tabs separately. + + In the case of overflowing tabs, set a border-top on the entire container, + otherwise we need to set it on each element individually */ + #main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] { + background-clip: padding-box; + border-top: 1px solid var(--chrome-nav-bar-separator-color); + border-inline-end: 1px solid var(--chrome-nav-bar-separator-color); + background-color: var(--tab-background-color); /* Make sure there is no transparent gap during tab close animation */ + } + + /* Add a border to the left of the first tab (or scroll arrow). Using .tabbrowser-tabs + instead of #TabsToolbar because it will work even in customize mode. */ + #main-window[sizemode=normal] .tabbrowser-tabs { + background-clip: padding-box; + border-inline-start: 1px solid var(--chrome-nav-bar-separator-color); + border-inline-end: 1px solid transparent; + } + + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab, + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-down, + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-up, + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabs-newtab-button { + background-clip: padding-box; + border-top: 1px solid var(--chrome-nav-bar-separator-color); + } + + /* Allow the border-top rule to take effect */ + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab { + -moz-border-top-colors: none; + } + + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer { + background-clip: padding-box; + border-inline-start: 1px solid var(--chrome-nav-bar-separator-color); + } + + .tabs-newtab-button { + background: var(--tab-background-color); + } + + /* Use default window colors when in non-maximized mode */ + #tabbrowser-tabs, + #TabsToolbar, + #browser-panel, + #titlebar-content { + background: transparent; + } + + /* Ensure that the entire background is styled when maximized/fullscreen */ + #main-window:not([sizemode="normal"]):not([customizing]) #browser-panel { + background: var(--chrome-background-color) !important; + } + + /* The menu items need to be visible when the entire background is styled */ + #main-window:not([sizemode="normal"]) #main-menubar { + color: var(--chrome-color); + background-color: transparent; + } + + #main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) { + color: inherit; + } + + /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */ + @media not all and (-moz-windows-compositor), + not all and (-moz-windows-default-theme) { + :root[tabsintitlebar]:not([inFullscreen]) { + --titlebar-text-color: CaptionText; + } + + :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive { + --titlebar-text-color: InactiveCaptionText; + } + + #main-window[tabsintitlebar] #main-menubar > menu { + color: inherit; + } + } + + /* Use less opacity than normal since this is very dark, and on top of the default toolbar color */ + .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled], + .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] { + opacity: .6; + } + + /* Override scrollbutton gradients in normal and hover state */ + .tabbrowser-arrowscrollbox > .scrollbutton-down, + .tabbrowser-arrowscrollbox > .scrollbutton-up { + background-image: none !important; + transition: none; /* scrollbutton-down has an unwanted transition on background color */ + } + + /* Restore draggable space on the sides of tabs when maximized */ + #main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-left: 15px; + padding-right: 15px; + } + + /* Override the padding that's intended to compensate for tabs that can overlap border-radius on nav-bar in default theme. */ + #main-window[sizemode=normal]:not([customizing]) #TabsToolbar { + padding-left: 0; + padding-right: 0; + } +} + +/* Restored windows get an artificial border on windows, because the lwtheme background + * overlaps the regular window border. That isn't the case for us, so we avoid painting + * over the native border with our custom borders: */ +#browser-panel { + /* These are !important to avoid specificity-wars with the selectors that add borders here. */ + background-image: none !important; + border-top: none !important; +} + +#navigator-toolbox { + /* The side borders on the toolbox also look out-of-place because we don't paint over + * the native background color at all, and these are !important for the same reason as above. */ + border-left: none !important; + border-right: none !important; +} + +/* Disable dragging like in the default theme: */ +#main-window[tabsintitlebar] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):-moz-lwtheme { + -moz-window-dragging: no-drag; +} + +/* The sidebar header has no background now that the background of the #browser-panel + * has no image and is transparent. Fix: */ +.sidebar-header:-moz-lwtheme, +#sidebar-header { + background-color: var(--chrome-background-color); + color: var(--chrome-color); +} + +@media (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8) { + /* And then we add them back on toolbars so that they don't look borderless: */ + #main-window:not([customizing])[sizemode=normal] #navigator-toolbox::after, + #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) { + border-left: 1px solid hsla(209,67%,12%,0.35); + border-right: 1px solid hsla(209,67%,12%,0.35); + } +} + +@media (-moz-os-version: windows-win10) { + /* Always keep draggable space on the sides of tabs since there is no top margin on Win10 */ + #main-window .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-left: 15px; + padding-right: 15px; + } + + /* Force white caption buttons for the dark theme on Windows 10 */ + :root[devtoolstheme="dark"] #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white); + } + :root[devtoolstheme="dark"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white); + } + #main-window[devtoolstheme="dark"][sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white); + } + :root[devtoolstheme="dark"] #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); + } + + /* ... and normal ones for the light theme on Windows 10 */ + :root[devtoolstheme="light"] #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); + } + :root[devtoolstheme="light"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize); + } + #main-window[devtoolstheme="light"][sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); + } + :root[devtoolstheme="light"] #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); + } + + :root[devtoolstheme="light"] #titlebar-close:hover { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); + } +} + +.ac-type-icon { + /* Left-align the type icon in awesomebar popup results with the icon in the + urlbar. */ + margin-inline-start: 13px; +} diff --git a/application/basilisk/themes/windows/jar.mn b/application/basilisk/themes/windows/jar.mn index c25d0c9930..6aeaadb89b 100644 --- a/application/basilisk/themes/windows/jar.mn +++ b/application/basilisk/themes/windows/jar.mn @@ -14,6 +14,7 @@ browser.jar: skin/classic/browser/actionicon-tab@2x.png skin/classic/browser/actionicon-tab-XPVista7.png * skin/classic/browser/browser.css +* skin/classic/browser/devedition.css * skin/classic/browser/browser-lightweightTheme.css skin/classic/browser/caption-buttons.svg skin/classic/browser/click-to-play-warning-stripes.png