Advertisement
Dragoner7

devedition.inc from Firefox 39.0b7

Jul 5th, 2015
3,979
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. % This Source Code Form is subject to the terms of the Mozilla Public
  2. % License, v. 2.0. If a copy of the MPL was not distributed with this
  3. % file, You can obtain one at http://mozilla.org/MPL/2.0/.
  4.  
  5. /* devedition.css is loaded in browser.xul after browser.css when it is
  6.    preffed on.  The bulk of the styling is here in the shared file, but
  7.    there are overrides for each platform in their devedition.css files. */
  8.  
  9. :root {
  10.   --tab-toolbar-navbar-overlap: 0px;
  11.   --space-above-tabbar: 0px;
  12.   --toolbarbutton-text-shadow: none;
  13.   --panel-ui-button-background-size: 1px calc(100% - 1px);
  14.   --panel-ui-button-background-position: 1px 0px;
  15. }
  16.  
  17. :root[devtoolstheme="dark"] {
  18.   /* Chrome */
  19.   --chrome-background-color: #1C2126;
  20.   --chrome-color: #F5F7FA;
  21.   --chrome-secondary-background-color: #39424D;
  22.   --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
  23.   --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
  24.   --chrome-nav-buttons-background: #252C33;
  25.   --chrome-nav-buttons-hover-background: #1B2127;
  26.   --chrome-selection-color: #fff;
  27.   --chrome-selection-background-color: #074D75;
  28.  
  29.   /* Tabs */
  30.   --tabs-toolbar-color: #F5F7FA;
  31.   --tab-background-color: #1C2126;
  32.   --tab-hover-background-color: #07090a;
  33.   --tab-separator-color: #474C50;
  34.   --tab-selection-color: #f5f7fa;
  35.   --tab-selection-background-color: #1a4666;
  36.   --tab-selection-box-shadow: 0 2px 0 #D7F1FF inset,
  37.                               0 -2px 0 rgba(0,0,0,.05) inset,
  38.                               0 -1px 0 rgba(0,0,0,.3) inset;
  39.   --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%);
  40.  
  41.   /* Toolbar buttons */
  42.   --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
  43.   --toolbarbutton-hover-boxshadow: none;
  44.   --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
  45.   --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
  46.   --toolbarbutton-active-boxshadow: none;
  47.   --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
  48.   --toolbarbutton-checkedhover-backgroundcolor: #1D4F73;
  49.   --toolbarbutton-combined-boxshadow: none;
  50.   --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px);
  51.  
  52.   /* Identity box */
  53.   --identity-box-chrome-color: #46afe3;
  54.   --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
  55.   --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%);
  56.   --verified-identity-box-backgroundcolor: transparent;
  57.  
  58.   /* Url and search bars */
  59.   --url-and-searchbar-background-color: #171B1F;
  60.   --url-and-searchbar-color: #fff;
  61.   --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  62.   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
  63.   --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px);
  64.   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  65.   --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
  66.   --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px);
  67.   --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted");
  68.  
  69.   /* Menu button separator */
  70.   --panel-ui-button-background-image: linear-gradient(to bottom, transparent, #5F6670 30%, #5F6670 70%, transparent);
  71. }
  72.  
  73. :root[devtoolstheme="dark"] .searchbar-dropmarker-image {
  74.   --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg");
  75.   --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg");
  76. }
  77.  
  78. :root[devtoolstheme="light"] {
  79.   --url-and-searchbar-background-color: #fff;
  80.  
  81.   --chrome-background-color: #E3E4E6;
  82.   --chrome-color: #18191a;
  83.   --chrome-secondary-background-color: #f0f1f2;
  84.   --chrome-navigator-toolbox-separator-color: #cccccc;
  85.   --chrome-nav-bar-separator-color: #B6B6B8;
  86.   --chrome-nav-buttons-background: #f0f1f2;
  87.   --chrome-nav-buttons-hover-background: #DADBDB;
  88.   --chrome-selection-color: #f5f7fa;
  89.   --chrome-selection-background-color: #4c9ed9;
  90.  
  91.   --tab-background-color: #E3E4E6;
  92.   --tab-hover-background-color: #D7D8DA;
  93.   --tab-separator-color: #C6C6C7;
  94.   --tab-selection-color: #f5f7fa;
  95.   --tab-selection-background-color: #4c9ed9;
  96.   --tab-selection-box-shadow: 0 2px 0 #9FDFFF inset,
  97.                               0 -2px 0 rgba(0,0,0,.05) inset,
  98.                               0 -1px 0 rgba(0,0,0,.2) inset;
  99.   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
  100.  
  101.  
  102.   /* Toolbar buttons */
  103.   --toolbarbutton-hover-background: #D7D7D8;
  104.   --toolbarbutton-hover-boxshadow: none;
  105.   --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
  106.   --toolbarbutton-active-background: rgba(76,158,217,.5) linear-gradient(rgba(76,158,217,.5), rgba(76,158,217,.5)) border-box
  107.   --toolbarbutton-active-boxshadow: none;
  108.   --toolbarbutton-active-bordercolor: rgba(0,0,0,0.3);
  109.   --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,0.2);
  110.   --toolbarbutton-combined-boxshadow: none;
  111.   --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 18px);
  112.  
  113.   /* Url and search bars */
  114.   --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon");
  115.  
  116.   /* Menu button separator */
  117.   --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);
  118. }
  119.  
  120. /* Give some space to drag the window around while customizing
  121.    (normal space to left and right of tabs doesn't work in this case) */
  122. #main-window[tabsintitlebar][customizing] {
  123.   --space-above-tabbar: 9px;
  124. }
  125.  
  126. /* Override @tabCurveHalfWidth@ and @tabCurveWidth@.  XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */
  127. .tab-background-middle {
  128.   border-left-width: 0;
  129.   border-right-width: 0;
  130.   margin: 0;
  131. }
  132.  
  133. .tab-background,
  134. .tabs-newtab-button {
  135.   -moz-margin-end: 0;
  136.   -moz-margin-start: 0;
  137. }
  138.  
  139. .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  140.   -moz-padding-end: 0;
  141.   -moz-padding-start: 0;
  142. }
  143.  
  144. .tab-background-start[visuallyselected=true]::after,
  145. .tab-background-start[visuallyselected=true]::before,
  146. .tab-background-start,
  147. .tab-background-end,
  148. .tab-background-end[visuallyselected=true]::after,
  149. .tab-background-end[visuallyselected=true]::before {
  150.   width: 0;
  151. }
  152.  
  153. .tab-background-start[visuallyselected=true]::after,
  154. .tab-background-end[visuallyselected=true]::after {
  155.   -moz-margin-start: 0;
  156. }
  157. /* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */
  158.  
  159. #urlbar ::-moz-selection,
  160. #navigator-toolbox .searchbar-textbox ::-moz-selection,
  161. .browserContainer > findbar ::-moz-selection {
  162.   background-color: var(--chrome-selection-background-color);
  163.   color: var(--chrome-selection-color);
  164. }
  165.  
  166. /* Change the base colors for the browser chrome */
  167.  
  168. #tabbrowser-tabs,
  169. #TabsToolbar,
  170. #browser-panel {
  171.   background: var(--chrome-background-color);
  172.   color: var(--chrome-color);
  173. }
  174.  
  175. #navigator-toolbox::after {
  176.   background: var(--chrome-navigator-toolbox-separator-color);
  177. }
  178.  
  179. #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
  180. .browserContainer > findbar,
  181. #browser-bottombox {
  182.   background-color: var(--chrome-secondary-background-color) !important;
  183.   color: var(--chrome-color);
  184. }
  185.  
  186. .browserContainer > findbar {
  187.   background-image: none;
  188. }
  189.  
  190. /* Default findbar text color doesn't look good - Bug 1125677 */
  191. .browserContainer > findbar .findbar-find-status,
  192. .browserContainer > findbar .found-matches {
  193.   color: inherit;
  194. }
  195.  
  196. #navigator-toolbox .toolbarbutton-1,
  197. .browserContainer > findbar .findbar-button,
  198. #PlacesToolbar toolbarbutton.bookmark-item {
  199.   color: var(--chrome-color);
  200.   text-shadow: var(--toolbarbutton-text-shadow);
  201. }
  202.  
  203. /* Using toolbar[brighttext] instead of important to override linux */
  204. toolbar[brighttext] #downloads-indicator-counter {
  205.   text-shadow: var(--toolbarbutton-text-shadow);
  206.   color: var(--chrome-color);
  207. }
  208.  
  209. #TabsToolbar {
  210.   text-shadow: none !important;
  211.   color: var(--chrome-color) !important; /* Make sure that the brighttext attribute is added */
  212. }
  213.  
  214. /* URL bar and search bar*/
  215. /* XXX :root[devtoolstheme="dark"] is a workaround for bug 1096413 on the findbar. */
  216. #urlbar,
  217. #navigator-toolbox .searchbar-textbox,
  218. :root[devtoolstheme="dark"] .browserContainer > findbar .findbar-textbox {
  219.   background-color: var(--url-and-searchbar-background-color) !important;
  220.   background-image: none !important;
  221.   color: var(--url-and-searchbar-color);
  222.   border: none !important;
  223.   box-shadow: none !important;
  224. }
  225.  
  226. window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
  227.   overflow: -moz-hidden-unscrollable;
  228.   clip-path: none;
  229.   -moz-margin-start: 0;
  230. }
  231.  
  232. /* Make the white notication box stick out less. */
  233. #notification-popup-box {
  234.   border-radius: 0;
  235.   border: none;
  236.   background: transparent;
  237. }
  238.  
  239. /* Nav bar specific stuff */
  240. #nav-bar {
  241.   margin-top: 0 !important;
  242.   border-top: none !important;
  243.   border-bottom: none !important;
  244.   border-radius: 0 !important;
  245.   box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important;
  246.   background-image: none !important;
  247. }
  248.  
  249. /* No extra vertical padding for nav bar */
  250. #nav-bar-customization-target,
  251. #nav-bar {
  252.   padding-top: 0;
  253.   padding-bottom: 0;
  254. }
  255.  
  256. /* Use smaller back button icon */
  257. #back-button {
  258.   -moz-image-region: rect(0, 54px, 18px, 36px);
  259. }
  260.  
  261. searchbar:not([oneoffui]) .search-go-button {
  262.    /* !important is needed because searchbar.css is loaded after this */
  263.   -moz-image-region: auto !important;
  264.   list-style-image: var(--search-button-image);
  265. }
  266.  
  267. .tab-background {
  268.   visibility: hidden;
  269. }
  270.  
  271. /* Make the tab splitter 1px wide with a solid background. */
  272. #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
  273. .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
  274. #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
  275.   background: var(--tab-separator-color);
  276.   width: 1px;
  277.   -moz-margin-start: 0;
  278.   -moz-margin-end: -1px;
  279. }
  280.  
  281. /* For the last tab separator, use margin-start of -1px to prevent jittering
  282.    due to the ::after element causing the width of the tab to extend, which
  283.    causes an overflow and makes it disappear, which removes the overflow and
  284.    causes it to reappear, etc, etc. */
  285. #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
  286.   -moz-margin-start: -1px;
  287.   -moz-margin-end: 0;
  288. }
  289.  
  290. .tabbrowser-arrowscrollbox > .scrollbutton-down,
  291. .tabbrowser-arrowscrollbox > .scrollbutton-up {
  292.   background-color: var(--tab-background-color);
  293.   border-color: transparent;
  294. }
  295.  
  296. .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
  297. .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  298.   margin-bottom: 0;
  299. }
  300.  
  301. .tabbrowser-tab {
  302.   /* We normally rely on other tab elements for pointer events, but this
  303.      theme hides those so we need it set here instead */
  304.   pointer-events: auto;
  305. }
  306.  
  307. .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content {
  308.   background-image: var(--pinned-tab-glow);
  309.   background-position: center;
  310.   background-size: 100%;
  311. }
  312.  
  313. .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
  314. .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
  315. .tabbrowser-tab:hover {
  316.   background-color: var(--tab-hover-background-color);
  317. }
  318.  
  319. .tabbrowser-tab[visuallyselected] {
  320.   color: var(--tab-selection-color) !important; /* Override color: inherit */
  321.   background-color: var(--tab-selection-background-color);
  322.   box-shadow: var(--tab-selection-box-shadow);
  323. }
  324.  
  325. /* Don't need space for the tab curves (66px - 30px) */
  326. .tabs-newtab-button {
  327.   width: 36px;
  328. }
  329.  
  330. .tabs-newtab-button:hover {
  331.   /* Important needed because !important is used in browser.css */
  332.   background-color: var(--tab-hover-background-color) !important;
  333.   background-image: none;
  334. }
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement