mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 06:35:42 +00:00
0dfcf308e1
This commit does the following: * Install two lightweight themes instead of one * Introduce a build config to install the themes instead of relying on channel: INSTALL_COMPACT_THEMES * Change browser-compacttheme to use the new themes instead of the old one * Remove inferBrightness since the lwt colors are part of the compact theme definision, as opposed to the devedition theme which could be light or * Update CSS to use :-moz-lwtheme-darktext and :-moz-lwtheme-brighttext instead of [devtoolstheme] MozReview-Commit-ID: 4gKU68drlE2 --HG-- rename : browser/base/content/defaultthemes/devedition.header.png => browser/base/content/defaultthemes/compact.header.png
127 lines
3.9 KiB
CSS
127 lines
3.9 KiB
CSS
% 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/compacttheme.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 */
|
|
}
|
|
|
|
/* Don't use the default background for tabs toolbar */
|
|
#TabsToolbar {
|
|
-moz-appearance: none !important;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
#PanelUI-button {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.findbar-closebutton:-moz-lwtheme-brighttext: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) {
|
|
.findbar-closebutton:-moz-lwtheme-brighttext :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;
|
|
}
|