Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- % 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;
- --space-above-tabbar: 0px;
- --toolbarbutton-text-shadow: none;
- --panel-ui-button-background-size: 1px calc(100% - 1px);
- --panel-ui-button-background-position: 1px 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-selection-color: #fff;
- --chrome-selection-background-color: #074D75;
- /* Tabs */
- --tabs-toolbar-color: #F5F7FA;
- --tab-background-color: #1C2126;
- --tab-hover-background-color: #07090a;
- --tab-separator-color: #474C50;
- --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;
- --toolbarbutton-combined-boxshadow: none;
- --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px);
- /* Identity box */
- --identity-box-chrome-color: #46afe3;
- --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
- --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
- --verified-identity-box-backgroundcolor: transparent;
- /* Url and search bars */
- --url-and-searchbar-background-color: #171B1F;
- --url-and-searchbar-color: #fff;
- --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
- --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
- --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px);
- --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
- --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
- --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px);
- --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted");
- /* Menu button separator */
- --panel-ui-button-background-image: linear-gradient(to bottom, transparent, #5F6670 30%, #5F6670 70%, transparent);
- }
- :root[devtoolstheme="dark"] .searchbar-dropmarker-image {
- --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg");
- --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg");
- }
- :root[devtoolstheme="light"] {
- --url-and-searchbar-background-color: #fff;
- --chrome-background-color: #E3E4E6;
- --chrome-color: #18191a;
- --chrome-secondary-background-color: #f0f1f2;
- --chrome-navigator-toolbox-separator-color: #cccccc;
- --chrome-nav-bar-separator-color: #B6B6B8;
- --chrome-nav-buttons-background: #f0f1f2;
- --chrome-nav-buttons-hover-background: #DADBDB;
- --chrome-selection-color: #f5f7fa;
- --chrome-selection-background-color: #4c9ed9;
- --tab-background-color: #E3E4E6;
- --tab-hover-background-color: #D7D8DA;
- --tab-separator-color: #C6C6C7;
- --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: #D7D7D8;
- --toolbarbutton-hover-boxshadow: none;
- --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
- --toolbarbutton-active-background: rgba(76,158,217,.5) linear-gradient(rgba(76,158,217,.5), rgba(76,158,217,.5)) border-box
- --toolbarbutton-active-boxshadow: none;
- --toolbarbutton-active-bordercolor: rgba(0,0,0,0.3);
- --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,0.2);
- --toolbarbutton-combined-boxshadow: none;
- --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 18px);
- /* Url and search bars */
- --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon");
- /* Menu button separator */
- --panel-ui-button-background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 70%, transparent);
- }
- /* 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;
- color: var(--chrome-color);
- }
- .browserContainer > findbar {
- background-image: none;
- }
- /* 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*/
- /* XXX :root[devtoolstheme="dark"] is a workaround for bug 1096413 on the findbar. */
- #urlbar,
- #navigator-toolbox .searchbar-textbox,
- :root[devtoolstheme="dark"] .browserContainer > findbar .findbar-textbox {
- background-color: var(--url-and-searchbar-background-color) !important;
- background-image: none !important;
- color: var(--url-and-searchbar-color);
- border: none !important;
- box-shadow: none !important;
- }
- window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
- overflow: -moz-hidden-unscrollable;
- clip-path: none;
- -moz-margin-start: 0;
- }
- /* Make the white notication box stick out less. */
- #notification-popup-box {
- border-radius: 0;
- border: none;
- background: transparent;
- }
- /* 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;
- background-image: none !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);
- }
- searchbar:not([oneoffui]) .search-go-button {
- /* !important is needed because searchbar.css is loaded after this */
- -moz-image-region: auto !important;
- list-style-image: var(--search-button-image);
- }
- .tab-background {
- visibility: hidden;
- }
- /* Make the tab splitter 1px wide with a solid background. */
- #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
- .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
- #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
- background: var(--tab-separator-color);
- width: 1px;
- -moz-margin-start: 0;
- -moz-margin-end: -1px;
- }
- /* For the last tab separator, use margin-start of -1px to prevent jittering
- due to the ::after element causing the width of the tab to extend, which
- causes an overflow and makes it disappear, which removes the overflow and
- causes it to reappear, etc, etc. */
- #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
- -moz-margin-start: -1px;
- -moz-margin-end: 0;
- }
- .tabbrowser-arrowscrollbox > .scrollbutton-down,
- .tabbrowser-arrowscrollbox > .scrollbutton-up {
- background-color: var(--tab-background-color);
- border-color: transparent;
- }
- .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
- .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
- margin-bottom: 0;
- }
- .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[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content {
- background-image: var(--pinned-tab-glow);
- background-position: center;
- background-size: 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;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement