gecko/browser/themes/windows/devedition.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/devedition.inc.css

: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);
}

#TabsToolbar::after {
  display: none;
}

#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  background: var(--chrome-nav-buttons-background) !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: 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);
}

/* 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);
  -moz-border-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;
  -moz-border-start: 1px solid var(--chrome-nav-bar-separator-color);
  -moz-border-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;
  -moz-border-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 */
#main-window[sizemode="maximized"]: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[sizemode="maximized"] #main-menubar {
  color: var(--chrome-color);
  background-color: transparent;
}

#main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) {
  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;
}

#toolbar-menubar {
  text-shadow: none !important;
}

/* 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;
}

/* This rule is specific to the dark theme, because we only set the dropdown image there */
:root[devtoolstheme="dark"] .searchbar-dropmarker-image {
  /* Reset image-region from the windows theme */
  -moz-image-region: auto !important;
  /* Add margin otherwise it looks weird */
  -moz-margin-start: 2px;
}

/* 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);
}