

/* 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: #1C2126;
  --chrome-color: #F5F7FA;
  --chrome-secondary-background-color: #39424D;
  --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: #074D75;

  /* Tabs */
  --tabs-toolbar-color: #F5F7FA;
  --tab-background-color: #1C2126;
  --tab-hover-background-color: #07090a;
  --tab-selection-color: #f5f7fa;
  --tab-selection-background-color: #1a4666;
  --tab-selection-box-shadow: 0 2px 0 #D7F1FF inset,
                              0 -2px 0 rgba(0,0,0,.05) inset,
                              0 -1px 0 rgba(0,0,0,.3) inset;
  --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%);

  /* Toolbar buttons */
  --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: #1D4F73;

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

:root[devtoolstheme="dark"] #identity-box {
  --identity-box-chrome-color: #46afe3;
  --identity-box-verified-background-color: transparent;
  --identity-box-hover-background-color: rgba(231,230,230,.2);
  --identity-box-selected-background-color: rgba(211,210,210,.2);
}

: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: #fcfcfc;
  --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: 0 2px 0 #9FDFFF inset,
                              0 -2px 0 rgba(0,0,0,.05) inset,
                              0 -1px 0 rgba(0,0,0,.2) inset;
  --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);


  /* Toolbar buttons */
  --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 {
  -moz-margin-end: 0;
  -moz-margin-start: 0;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  -moz-padding-end: 0;
  -moz-padding-start: 0;
}

.tab-background-start[visuallyselected=true]::after,
.tab-background-start[visuallyselected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[visuallyselected=true]::after,
.tab-background-end[visuallyselected=true]::before {
  width: 0;
}

.tab-background-start[visuallyselected=true]::after,
.tab-background-end[visuallyselected=true]::after {
  -moz-margin-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::after {
  background: 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;
  color: var(--chrome-color) !important; /* Make sure that the brighttext attribute is added */
}

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

#urlbar {
  -moz-border-start: none !important;
  opacity: 1 !important;
}

window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
  overflow: -moz-hidden-unscrollable;
  clip-path: none;
  -moz-margin-start: 0;
}

/* Swap out the white arrow with a dark one for the dark theme */
:root[devtoolstheme="dark"] #notification-popup-box {
  border-image: url("chrome://browser/skin/devedition/urlbar-arrow.png") 0 8 0 0 fill;
}

@media (min-resolution: 1.1dppx) {
  :root[devtoolstheme="dark"] #notification-popup-box {
    border-image: url("chrome://browser/skin/devedition/urlbar-arrow@2x.png") 0 16 0 0 fill;
  }
}

/* The (white) notification box background color should match the theme */
#notification-popup-box {
  border-radius: 0;
  background-color: var(--url-and-searchbar-background-color);
}

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

.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([visuallyselected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
  background-image: var(--pinned-tab-glow);
  background-position: center;
  background-size: 100%;
}

.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([visuallyselected="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);
  box-shadow: var(--tab-selection-box-shadow);
}

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

:root {
  --forwardbutton-width: 32px;
}

/* Use only 1px separator between nav toolbox and page content */
#navigator-toolbox::after {
  background: linear-gradient(to top, var(--chrome-navigator-toolbox-separator-color), var(--chrome-navigator-toolbox-separator-color) 1px, transparent 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 {
  -moz-border-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 {
    -moz-image-region: rect(0, 108px, 36px, 72px);
  }

  #back-button:hover:active:not([disabled="true"]) {
    -moz-image-region: rect(36px, 108px, 72px, 72px);
  }
}

#forward-button:hover:active:not(:-moz-lwtheme) {
  background-image: none;
  box-shadow: none;
}

/* 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[visuallyselected=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[visuallyselected=true]:not(:hover) {
    -moz-image-region: rect(0, 128px, 32px, 96px);
  }
}
