Advertisement
Guest User

flat-plat-firefox-css-alpha

a guest
Nov 15th, 2016
668
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 36.71 KB | None | 0 0
  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.   --navbar-tab-toolbar-highlight-overlap: 0px;
  12.   --space-above-tabbar: 0px;
  13.   --toolbarbutton-text-shadow: none;
  14.   --backbutton-urlbar-overlap: 0px;
  15.   --tab-min-height: 36px;
  16. }
  17.  
  18. :root[devtoolstheme="dark"] {
  19.   /* Chrome */
  20.   --chrome-background-color: #272b35;
  21.   --chrome-color: #F5F7FA;
  22.   --chrome-secondary-background-color: #393F4C;
  23.   --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
  24.   --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
  25.   --chrome-nav-buttons-background: #252C33;
  26.   --chrome-nav-buttons-hover-background: #1B2127;
  27.   --chrome-nav-bar-controls-border-color: #1D2328;
  28.   --chrome-selection-color: #fff;
  29.   --chrome-selection-background-color: #5675B9;
  30.  
  31.   /* Tabs */
  32.   --tabs-toolbar-color: #F5F7FA;
  33.   --tab-background-color: #272b35;
  34.   --tab-hover-background-color: #07090a;
  35.   --tab-hover-box-shadow: inset 0 -2px rgba(255, 255, 255, 0.3);
  36.   --tab-selection-color: #FFFFFF;
  37.   --tab-selection-background-color: #5675B9;
  38.   --tab-selection-box-shadow: inset 0 -2px #42A5F5;
  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: transparent;
  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: transparent;
  48.   --toolbarbutton-checkedhover-backgroundcolor: #3C5283;
  49.  
  50.   /* Url and search bars */
  51.   --panel-separator-color: rgba(0, 0, 0, 0.2);
  52.   --url-and-searchbar-background-color: #171B1F;
  53.   --urlbar-separator-color: #5F6670;
  54.   --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  55.   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
  56.   --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
  57.   --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
  58.   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  59.   --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
  60.   --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
  61.   --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
  62. }
  63.  
  64. :root[devtoolstheme="light"] {
  65.   --panel-separator-color: rgba(0, 0, 0, 0.1);
  66.   --url-and-searchbar-background-color: #FFFFFF;
  67.  
  68.   --chrome-background-color: #F5F5F5;
  69.   --chrome-color: rgba(0, 0, 0, 0.8);
  70.   --chrome-secondary-background-color: #F5F5F5;
  71.   --chrome-navigator-toolbox-separator-color: rgba(0, 0, 0, 0.1);
  72.   --chrome-nav-bar-separator-color: rgba(0, 0, 0, 0.1);
  73.   --chrome-nav-buttons-background: #FFFFFF; /* --theme-body-background */
  74.   --chrome-nav-buttons-hover-background: red;
  75.   --chrome-nav-bar-controls-border-color: rgba(0, 0, 0, 0.1);
  76.   --chrome-selection-color: #FFFFFF;
  77.   --chrome-selection-background-color: #42A5F5;
  78.  
  79.   --tab-background-color: #F5F5F5;
  80.   --tab-hover-background-color: #FAFAFA;
  81.   --tab-hover-box-shadow: inset 0 -2px rgba(0, 0, 0, 0.24);
  82.   --tab-selection-color: rgba(0, 0, 0, 0.8);
  83.   --tab-selection-background-color: #FFFFFF;
  84.   --tab-selection-box-shadow: inset 0 -2px #42A5F5;
  85.   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
  86.  
  87.  
  88.   /* Toolbar buttons */
  89.   --toolbarbutton-hover-background: rgba(0, 0, 0, 0.12);
  90.   --toolbarbutton-hover-boxshadow: none;
  91.   --toolbarbutton-hover-bordercolor: transparent;
  92.   --toolbarbutton-active-background: rgba(0, 0, 0, 0.24);
  93.   --toolbarbutton-active-boxshadow: none;
  94.   --toolbarbutton-active-bordercolor: transparent;
  95.   --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
  96. }
  97.  
  98. /* Give some space to drag the window around while customizing
  99.    (normal space to left and right of tabs doesn't work in this case) */
  100. #main-window[tabsintitlebar][customizing] {
  101.   --space-above-tabbar: 9px;
  102. }
  103.  
  104. /* Override @tabCurveHalfWidth@ and @tabCurveWidth@.  XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */
  105. .tab-background-middle {
  106.   border-left-width: 0;
  107.   border-right-width: 0;
  108.   margin: 0;
  109. }
  110.  
  111. .tab-background,
  112. .tabs-newtab-button {
  113.   margin-inline-end: 0;
  114.   margin-inline-start: 0;
  115. }
  116.  
  117. .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  118.   padding-inline-end: 0;
  119.   padding-inline-start: 0;
  120. }
  121.  
  122. .tab-background-start[selected=true]::after,
  123. .tab-background-start[selected=true]::before,
  124. .tab-background-start,
  125. .tab-background-end,
  126. .tab-background-end[selected=true]::after,
  127. .tab-background-end[selected=true]::before {
  128.   width: 0;
  129. }
  130.  
  131. .tab-background-start[selected=true]::after,
  132. .tab-background-end[selected=true]::after {
  133.   margin-inline-start: 0;
  134. }
  135. /* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */
  136.  
  137. #urlbar ::-moz-selection,
  138. #navigator-toolbox .searchbar-textbox ::-moz-selection,
  139. .browserContainer > findbar ::-moz-selection {
  140.   background-color: var(--chrome-selection-background-color);
  141.   color: var(--chrome-selection-color);
  142. }
  143.  
  144. /* Change the base colors for the browser chrome */
  145.  
  146. #tabbrowser-tabs,
  147. #TabsToolbar,
  148. #browser-panel {
  149.   background: var(--chrome-background-color);
  150.   color: var(--chrome-color);
  151. }
  152.  
  153. /* Remove bottom border */
  154. #navigator-toolbox::after {
  155.   height: 0;
  156. }
  157.  
  158. #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar),
  159. .browserContainer > findbar,
  160. #browser-bottombox {
  161.   background-color: var(--chrome-secondary-background-color) !important;
  162.   background-image: none !important;
  163.   color: var(--chrome-color);
  164. }
  165.  
  166. /* Default findbar text color doesn't look good - Bug 1125677 */
  167. .browserContainer > findbar .findbar-find-status,
  168. .browserContainer > findbar .found-matches {
  169.   color: inherit;
  170. }
  171.  
  172. #navigator-toolbox .toolbarbutton-1,
  173. .browserContainer > findbar .findbar-button,
  174. #PlacesToolbar toolbarbutton.bookmark-item {
  175.   color: var(--chrome-color);
  176.   text-shadow: var(--toolbarbutton-text-shadow);
  177. }
  178.  
  179. /* Using toolbar[brighttext] instead of important to override linux */
  180. toolbar[brighttext] #downloads-indicator-counter {
  181.   text-shadow: var(--toolbarbutton-text-shadow);
  182.   color: var(--chrome-color);
  183. }
  184.  
  185. #TabsToolbar {
  186.   text-shadow: none !important;
  187.   color: var(--chrome-color) !important; /* Make sure that the brighttext attribute is added */
  188. }
  189.  
  190. /* URL bar and search bar*/
  191. #urlbar,
  192. #navigator-toolbox .searchbar-textbox {
  193.   margin: 6px !important;
  194.   min-height: 36px;
  195.   background-color: var(--url-and-searchbar-background-color) !important;
  196.   background-image: none !important;
  197.   border: none !important;
  198.   box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24) !important;
  199.   border-radius: 2px !important;
  200.   transition: all 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
  201. }
  202.  
  203. #urlbar {
  204.   background-color: transparent !important;
  205.   color: rgba(255, 255, 255, 0.75);
  206.   box-shadow: none !important;
  207. }
  208.  
  209. #urlbar:hover {
  210.   color: white;
  211. }
  212.  
  213. #urlbar[focused="true"] {
  214.   background-color: var(--url-and-searchbar-background-color) !important;
  215.   color: var(--chrome-color);
  216. }
  217.  
  218. #urlbar[focused="true"],
  219. #navigator-toolbox .searchbar-textbox[focused="true"] {
  220.   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23) !important;
  221. }
  222.  
  223. #navigator-toolbox .searchbar-textbox {
  224.   -moz-margin-start: -4px !important;
  225. }
  226.  
  227. .search-go-button,
  228. #identity-box {
  229.   padding: 8px;
  230. }
  231.  
  232. .searchbar-search-button {
  233.   margin: 0;
  234.   padding: 6px;
  235. }
  236.  
  237. .ac-url-text,
  238. .ac-action-text {
  239.   font-size: 90%;
  240.   color: currentColor;
  241.   opacity: 0.6;
  242. }
  243.  
  244. :root[devtoolstheme="dark"] #identity-icon:-moz-lwtheme {
  245.   --identity-icon-normal: url(chrome://browser/skin/identity-icon.svg#normal-white);
  246.   --identity-icon-hover: url(chrome://browser/skin/identity-icon.svg#hover-white);
  247.   --identity-icon-notice: url(chrome://browser/skin/identity-icon.svg#notice-white);
  248.   --identity-icon-notice-hover: url(chrome://browser/skin/identity-icon.svg#notice-hover-white);
  249. }
  250.  
  251. :root[devtoolstheme="dark"] #tracking-protection-icon:-moz-lwtheme {
  252.   --tracking-protection-icon-enabled: url(chrome://browser/skin/tracking-protection-16.svg#enabled-white);
  253.   --tracking-protection-icon-disabled: url(chrome://browser/skin/tracking-protection-16.svg#disabled-white);
  254. }
  255.  
  256. :root[devtoolstheme="dark"] #connection-icon:-moz-lwtheme {
  257.   --connection-icon-mixed-passive-loaded: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-white);
  258.   --connection-icon-mixed-active-loaded: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-white);
  259. }
  260.  
  261. #urlbar {
  262.   border-inline-start: none !important;
  263.   opacity: 1 !important;
  264. }
  265.  
  266. window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
  267.   overflow: -moz-hidden-unscrollable;
  268.   clip-path: none;
  269.   margin-inline-start: 0;
  270. }
  271.  
  272. /* Nav bar specific stuff */
  273. #nav-bar {
  274.   margin-top: 0 !important;
  275.   border-top: none !important;
  276.   border-bottom: none !important;
  277.   border-radius: 0 !important;
  278.   box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important;
  279. }
  280.  
  281. /* No extra vertical padding for nav bar */
  282. #nav-bar-customization-target,
  283. #nav-bar {
  284.   padding-top: 0;
  285.   padding-bottom: 0;
  286. }
  287.  
  288. /* Use smaller back button icon */
  289. #back-button {
  290.   -moz-image-region: rect(0, 54px, 18px, 36px);
  291. }
  292.  
  293. @media (min-resolution: 1.1dppx) {
  294.   #back-button {
  295.     -moz-image-region: rect(0, 108px, 36px, 72px);
  296.   }
  297. }
  298.  
  299. .tab-background {
  300.   visibility: hidden;
  301. }
  302.  
  303. /* Tab separators */
  304. .tabbrowser-tab::after,
  305. .tabbrowser-tab::before {
  306.   background: currentColor;
  307.   opacity: 0 !important;
  308. }
  309.  
  310. .tabbrowser-tab {
  311.   /* We normally rely on other tab elements for pointer events, but this
  312.      theme hides those so we need it set here instead */
  313.   pointer-events: auto;
  314.  
  315.   transition: all 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
  316.               background-size 0.001s,
  317.               background-image 0.001s !important;
  318.   border: 1px solid transparent;
  319.   border-width: 0 1px;
  320.   margin: 0 -1px;
  321.  
  322.     background-image: radial-gradient(circle farthest-corner at center, currentColor 10%, transparent 0%) !important;
  323.   background-repeat: no-repeat;
  324.   background-position: center;
  325.   background-size: 0% 0%;
  326.   background-clip: padding-box;
  327.   color: var(--chrome-selection-background-color) !important;
  328.   font-weight: 500;
  329. }
  330.  
  331. .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  332. .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  333.   background-image: var(--pinned-tab-glow);
  334.   background-position: center;
  335.   background-size: 100%;
  336. }
  337.  
  338. .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
  339.   background-position: left bottom var(--tab-toolbar-navbar-overlap);
  340.   background-size: 34px 100%;
  341. }
  342.  
  343. .tabbrowser-tab:hover {
  344.   border-color: var(--chrome-nav-bar-controls-border-color);
  345.   background-color: var(--tab-hover-background-color);
  346.   box-shadow: var(--tab-hover-box-shadow);
  347. }
  348.  
  349. .tabbrowser-tab[visuallyselected] {
  350.   border-color: var(--chrome-nav-bar-controls-border-color);
  351.   color: transparent !important;
  352.   background-color: var(--tab-selection-background-color);
  353.   background-size: 1000% 1000%;
  354.   box-shadow: var(--tab-selection-box-shadow);
  355.   transition: all 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
  356.               background-size 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
  357.               color 0.8s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  358. }
  359.  
  360. .tabbrowser-tab .tab-label {
  361.   transition: all 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  362.   color: rgba(0, 0, 0, 0.6);
  363. }
  364.  
  365. .menubar-text,
  366. .tabbrowser-tab:hover .tab-label,
  367. .tabbrowser-tab[visuallyselected] .tab-label {
  368.   color: var(--tab-selection-color); /* Override color: inherit */
  369. }
  370.  
  371. .tab-icon-sound[soundplaying],
  372. .tab-icon-sound[muted] {
  373.   filter: url(chrome://browser/skin/filters.svg#fill) !important; /* removes drop-shadow filter */
  374. }
  375.  
  376. /* Don't need space for the tab curves (66px - 30px) */
  377. .tabs-newtab-button {
  378.   width: 36px;
  379. }
  380.  
  381. .tabs-newtab-button:hover {
  382.   /* Important needed because !important is used in browser.css */
  383.   background-color: var(--toolbarbutton-hover-background) !important;
  384.   background-image: none;
  385. }
  386.  
  387. #main-menubar > menu {
  388.   -moz-appearance: none;
  389.   min-height: 28px;
  390.   padding: 4px 8px;
  391.     background-image: radial-gradient(circle farthest-corner at center, currentColor 10%, transparent 0%) !important;
  392.   background-repeat: no-repeat;
  393.   background-position: center;
  394.   background-size: 1000% 1000%;
  395.   color: transparent !important;
  396.   transition: color 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
  397. }
  398.  
  399. #main-menubar > menu:hover {
  400.   background-color: transparent;
  401. }
  402.  
  403. #main-menubar > menu:hover:active {
  404.   color: rgba(0,0,0,0.12) !important;
  405.   transition: none;
  406.   background-size: 0% 0%;
  407.   animation: ripple_effect 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
  408. }
  409.  
  410. #main-menubar > menu[open] {
  411.   color: rgba(0,0,0,0.12) !important;
  412.   transition: background-size 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
  413. }
  414.  
  415. .menubar-text {
  416.   margin: 0 !important;
  417.   color: var(--chrome-color);
  418. }
  419.  
  420. :root {
  421.   --forwardbutton-width: 36px;
  422. }
  423.  
  424. :root[devtoolstheme="light"] {
  425.   --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  426.   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
  427.   --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
  428.   --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
  429.   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
  430.   --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
  431.   --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
  432.   --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
  433. }
  434.  
  435. :root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
  436. :root[devtoolstheme="dark"] #sidebar-header > .close-icon:not(:hover),
  437. .tab-close-button[selected]:not(:hover) {
  438.   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
  439. }
  440.  
  441. /* The menubar and tabs toolbar should match the devedition theme */
  442. #TabsToolbar,
  443. #toolbar-menubar {
  444.   -moz-appearance: none !important;
  445. }
  446. #main-menubar {
  447.   color: var(--chrome-color);
  448. }
  449. #main-menubar > menu:not([open]) {
  450.   color: inherit;
  451. }
  452.  
  453. /* Allow buttons with -moz-appearance set to look normal on hover and open states */
  454. #navigator-toolbox .toolbarbutton-1:-moz-any(:hover, [open="true"]),
  455. #PlacesToolbar toolbarbutton.bookmark-item:-moz-any(:hover, [open="true"]) {
  456.   color: initial;
  457. }
  458.  
  459. /* Square back and forward buttons */
  460. #back-button > .toolbarbutton-icon,
  461. #forward-button > .toolbarbutton-icon {
  462.   margin: 0;
  463.   border: none;
  464.   padding: 8px;
  465.   background-color: transparent;
  466.   box-shadow: none !important;
  467. }
  468.  
  469. #forward-button > .toolbarbutton-icon {
  470.   border-inline-start: none;
  471. }
  472.  
  473. /* Override a box shadow for disabled back button */
  474. #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
  475.   box-shadow: none !important;
  476. }
  477.  
  478. #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon,
  479. #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon {
  480. /*
  481.   background-color: var(--toolbarbutton-hover-background) !important;
  482. */
  483. }
  484.  
  485. #back-button > .toolbarbutton-icon {
  486.   border-radius: 2px !important;
  487. }
  488.  
  489. .urlbar-history-dropmarker {
  490.   -moz-appearance: none;
  491.   padding: 0 3px;
  492.   list-style-image: var(--urlbar-dropmarker-url);
  493.   -moz-image-region: var(--urlbar-dropmarker-region);
  494. }
  495.  
  496. /* Add the proper background for tab overflow */
  497. #alltabs-button,
  498. #new-tab-button {
  499.   background-color: transparent;
  500. }
  501.  
  502. #new-tab-button:hover > .toolbarbutton-icon {
  503.   border-color: transparent !important;
  504. }
  505.  
  506. /* Prevent double border below tabs toolbar */
  507. #TabsToolbar:not([collapsed="true"]) + #nav-bar {
  508.   border-top-width: 0 !important;
  509. }
  510.  
  511. /* Fix the bad-looking text-shadow in the sidebar header: */
  512. .sidebar-header,
  513. #sidebar-header {
  514.   text-shadow: none;
  515. }
  516.  
  517. .ac-type-icon {
  518.   /* Left-align the type icon in awesomebar popup results with the icon in the
  519.      urlbar. */
  520.   margin-inline-start: 11px;
  521. }
  522.  
  523.  
  524. /* GNOME stuff */
  525.  
  526. .tabbrowser-arrowscrollbox > .scrollbutton-down,
  527. .tabbrowser-arrowscrollbox > .scrollbutton-up {
  528.   min-width: 24px;
  529.   background-color: transparent;
  530.   border-color: transparent;
  531. }
  532.  
  533. .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
  534. .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
  535. button:hover {
  536.   background-color: var(--toolbarbutton-hover-background);
  537. }
  538.  
  539. .tab-content {
  540.   padding: 0 8px;
  541. }
  542.  
  543. .tab-content[pinned] {
  544.   padding-inline-end: 2px;
  545. }
  546.  
  547. .tab-throbber, .tab-icon-image, .tab-icon-sound, .tab-close-button {
  548.   margin-top: 0;
  549. }
  550.  
  551. .tabbrowser-arrowscrollbox {
  552.   margin-inline-start: -2px;
  553. }
  554. .arrowscrollbox-scrollbox {
  555.   padding-inline-start: 1px !important;
  556. }
  557.  
  558. .arrowscrollbox-overflow-start-indicator,
  559. .arrowscrollbox-overflow-end-indicator {
  560.   width: 0 !important;
  561.   margin: 0 !important;
  562.   background-image: none !important;
  563. }
  564.  
  565. .arrowscrollbox-overflow-start-indicator {
  566.   margin-inline-end: -1px !important;
  567.   border-inline-end: 1px solid rgba(0, 0, 0, 0.1);
  568. }
  569.  
  570. .arrowscrollbox-overflow-end-indicator {
  571.   margin-inline-start: -1px !important;
  572.   border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
  573. }
  574.  
  575.  
  576. #nav-bar {
  577.   -moz-box-ordinal-group: 1;
  578.   z-index: 100 !important;
  579.   padding: 0 6px !important;
  580.   border-radius: 2px 2px 0 0 !important;
  581.   box-shadow: inset 0 1px rgba(255,255,255,0.2), 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24) !important;
  582.   background-color: #455A64 !important;
  583.   background-image: none !important;
  584.   color: #fff;
  585. }
  586.  
  587. #toolbar-menubar {
  588.   -moz-box-ordinal-group: 2;
  589.   border-bottom: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
  590.   padding: 0;
  591. }
  592.  
  593. #TabsToolbar {
  594.   -moz-box-ordinal-group: 3;
  595.   box-shadow: inset 0 -1px var(--chrome-nav-bar-controls-border-color) !important;
  596.   padding: 0 !important;
  597. }
  598.  
  599. #tabbrowser-tabs {
  600.   background-color: transparent !important;
  601. }
  602.  
  603. #PersonalToolbar {
  604.   -moz-box-ordinal-group: 4;
  605.   border-bottom: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
  606.   padding: 4px !important;
  607. }
  608.  
  609. #personal-bookmarks {
  610.   min-height: 24px;
  611. }
  612.  
  613. .close-icon {
  614.   border-radius: 9999px;
  615.   list-style-image: url("moz-icon://stock/window-close-symbolic?size=menu") !important;
  616.   opacity: 0.75;
  617.   min-height: 24px;
  618.   min-width: 24px;
  619. }
  620.  
  621. .close-icon:hover,
  622. .close-icon:hover:active {
  623.   opacity: 1;
  624. }
  625.  
  626. .toolbarbutton-text {
  627.   color: var(--chrome-color);
  628. }
  629.  
  630. #PersonalToolbar toolbarbutton {
  631.   -moz-appearance: none;
  632.   height: 28px !important;
  633.   margin: 0px !important;
  634.   padding: 0 4px !important;
  635.   border-radius: 2px;
  636. }
  637.  
  638. .bookmark-item .toolbarbutton-icon[label]:not([label=""]),
  639. .bookmark-item .toolbarbutton-icon[type="menu"] {
  640.   -moz-margin-end: 0;
  641. }
  642.  
  643. .bookmark-item .toolbarbutton-text {
  644.   margin: 0 4px !important;
  645. }
  646.  
  647. #window-controls {
  648.   margin: 0;
  649. }
  650.  
  651. /***********
  652.  * buttons *
  653.  ***********/
  654.  
  655. #main-window button {
  656.   transition: box-shadow 0.2s cubic-bezier(0.0, 0.0, 0.2, 1),
  657.               background-color 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
  658.               background-size 0.5s cubic-bezier(0.0, 0.0, 0.2, 1),
  659.               color 1s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  660.   -moz-appearance: none;
  661.   min-width: 16px !important;
  662.   min-height: 32px !important;
  663.   padding: 0 8px !important;
  664.   border: none !important;
  665.   border-radius: 2px;
  666.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  667.   background-color: #fafafa !important;
  668.     background-image: radial-gradient(circle farthest-corner at center, currentColor 10%, transparent 0%) !important;
  669.   background-repeat: no-repeat;
  670.   background-position: center;
  671.   background-size: 1000% 1000%;
  672.   color: transparent;
  673. }
  674.  
  675. #main-window button:hover {
  676.   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  677. }
  678.  
  679. #main-window button:hover:active {
  680.   transition: box-shadow 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
  681.               background-color 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  682.   animation: ripple_effect 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
  683.   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
  684.   background-size: 0% 0%;
  685.   color: rgba(0, 0, 0, 0.12);
  686. }
  687.  
  688. #main-window button[disabled="true"] {
  689.   box-shadow: none;
  690.   background-color: rgba(0, 0, 0, 0.12) !important;
  691. }
  692.  
  693. #main-window button:hover:active *,
  694. #main-window button * {
  695.   color: var(--chrome-color); /* Override color: inherit */
  696. }
  697.  
  698. #window-controls toolbarbutton {
  699.   -moz-appearance: none;
  700.   border-radius: 2px;
  701.   min-height: 24px;
  702.   min-width: 24px;
  703. }
  704.  
  705. .toolbarbutton-1 {
  706.   min-width: 36px;
  707.   min-height: 36px;
  708.   margin: 6px 0 !important;
  709.   padding: 0 !important;
  710.   border-radius: 9999px !important;
  711. }
  712.  
  713. .toolbarbutton-1:not(#bookmarks-menu-button)[open="true"] {
  714.   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
  715.                                 white 100%,
  716.                                 transparent 0%)
  717.                                 0 0 2 / 0 0 2px;
  718. }
  719.  
  720. #TabsToolbar .toolbarbutton-1 {
  721.   margin: 0 !important;
  722.   border-radius: 0 !important;
  723. }
  724.  
  725. .panelUI-grid .toolbarbutton-1 {
  726.   border-radius: 2px !important;
  727. }
  728.  
  729. .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
  730. .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
  731.   color: var(--chrome-color);
  732. }
  733.  
  734. /* reset default button style */
  735. .findbar-button > .toolbarbutton-text,
  736. :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
  737. :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
  738. :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack,
  739. :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon {
  740.   margin: 0 !important;
  741.   padding: 0 !important;
  742.   border: none !important;
  743.   box-shadow: none !important;
  744.   background: none !important;
  745. }
  746.  
  747. #forward-button {
  748.   -moz-box-align: center; /* reset */
  749. }
  750.  
  751. :-moz-any(#back-button, #forward-button):not(:hover):not(:active):not([open="true"]) > .toolbarbutton-icon,
  752. [disabled="true"]:-moz-any(#back-button, #forward-button) > .toolbarbutton-icon {
  753.   background-color: transparent !important;
  754. }
  755.  
  756. .toolbarbutton-menubutton-button,
  757. .toolbarbutton-menubutton-dropmarker {
  758.   margin: 0 !important;
  759.   padding: 9px !important;
  760.   min-width: 0 !important;
  761.   min-height: 0 !important;
  762. }
  763.  
  764. .toolbarbutton-menubutton-button {
  765.   border-top-left-radius: 2px;
  766.   border-bottom-left-radius: 2px;
  767. }
  768.  
  769. .toolbarbutton-menubutton-dropmarker {
  770.   border-top-right-radius: 2px;
  771.   border-bottom-right-radius: 2px;
  772. }
  773.  
  774. .toolbarbutton-1#bookmarks-menu-button .toolbarbutton-menubutton-dropmarker {
  775.   background-clip: padding-box;
  776.   border-inline-start: 1px solid transparent !important;
  777.   border-image: linear-gradient(transparent 15%, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.2) 85%, transparent 85%) !important;
  778.   border-image-slice: 1 !important;
  779. }
  780.  
  781. .toolbarbutton-1#bookmarks-menu-button:hover .toolbarbutton-menubutton-dropmarker {
  782.   background-clip: padding-box;
  783.   border-color: rgba(0, 0, 0, 0.2) !important;
  784. }
  785.  
  786. .toolbarbutton-menubutton-dropmarker::before {
  787.   all: unset !important;
  788. }
  789.  
  790. /***********
  791.  * ripples *
  792.  ***********/
  793.  
  794. @keyframes ripple_effect {
  795.   to { background-size: 1000% 1000%; }
  796. }
  797.  
  798. #identity-box,
  799. .toolbarbutton-menubutton-button,
  800. .toolbarbutton-menubutton-dropmarker,
  801. .toolbarbutton-1:not(#bookmarks-menu-button),
  802. .close-icon,
  803. #TabsToolbar toolbarbutton,
  804. #PersonalToolbar toolbarbutton {
  805.   transition: background-color 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
  806.               background-size 0.5s cubic-bezier(0.0, 0.0, 0.2, 1),
  807.               color 1s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  808.     background-image: radial-gradient(circle farthest-corner at center, currentColor 10%, transparent 0%) !important;
  809.   background-repeat: no-repeat;
  810.   background-position: center;
  811.   background-size: 1000% 1000%;
  812.   color: transparent !important;
  813. }
  814.  
  815.  
  816. #identity-box:hover,
  817. .toolbarbutton-1:not(#bookmarks-menu-button):not([disabled="true"]):hover,
  818. .close-icon:hover,
  819. #TabsToolbar toolbarbutton:hover,
  820. #PersonalToolbar toolbarbutton:hover {
  821.   background-color: var(--toolbarbutton-hover-background) !important;
  822. }
  823.  
  824. #identity-box:hover:active,
  825. .toolbarbutton-menubutton-button:hover:active,
  826. .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button:not(:hover) + .toolbarbutton-menubutton-dropmarker,
  827. .toolbarbutton-1:not(#bookmarks-menu-button):not([disabled="true"]):hover:active,
  828. .close-icon:hover:active,
  829. #TabsToolbar toolbarbutton:hover:active,
  830. #PersonalToolbar toolbarbutton:hover:active {
  831.   transition: background-color 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  832.   animation: ripple_effect 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
  833.   background-color: var(--toolbarbutton-hover-background) !important;
  834.   background-size: 0% 0%;
  835.   color: var(--toolbarbutton-hover-background) !important;
  836. }
  837.  
  838. .toolbarbutton-menubutton-button:hover,
  839. .toolbarbutton-1:hover > .toolbarbutton-menubutton-button:not(:hover) + .toolbarbutton-menubutton-dropmarker,
  840. toolbar:not(#TabsToolbar) .toolbarbutton-1:not(#bookmarks-menu-button):not([disabled="true"]):hover {
  841.   background-color: rgba(255, 255, 255, 0.15) !important;
  842. }
  843.  
  844. .toolbarbutton-menubutton-button:hover:active,
  845. .toolbarbutton-1:hover:hover:active > .toolbarbutton-menubutton-button:not(:hover) + .toolbarbutton-menubutton-dropmarker,
  846. toolbar:not(#TabsToolbar) .toolbarbutton-1:not(#bookmarks-menu-button):not([disabled="true"]):hover:active {
  847.   background-color: rgba(255, 255, 255, 0.15) !important;
  848.   color: rgba(255, 255, 255, 0.15) !important;
  849. }
  850.  
  851. .toolbarbutton-menubutton-button[open="true"],
  852. .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-button:not(:hover) + .toolbarbutton-menubutton-dropmarker,
  853. toolbar:not(#TabsToolbar) .toolbarbutton-1:not(#bookmarks-menu-button):not([disabled="true"])[open="true"] {
  854.   border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
  855.                                 white 100%,
  856.                                 transparent 0%)
  857.                                 0 0 2 / 0 0 2px;
  858. }
  859.  
  860.  
  861. #PanelUI-button {
  862.   border-inline-start: 1px solid rgba(0, 0, 0, 0.12);
  863.   border-image: none !important;
  864.   margin-inline-start: 6px;
  865.   padding-inline-start: 6px;
  866. }
  867.  
  868. window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
  869.   margin-left: 0 !important;
  870. }
  871.  
  872. #identity-box {
  873.   background-color: transparent !important;
  874.   padding: 0 8px !important;
  875.   border-radius: 2px 0 0 2px;
  876. }
  877.  
  878. #identity-box * {
  879.   color: #4CAF50 !important;
  880. }
  881.  
  882. /* Restyle icons; look in /usr/share/icons/Adwaita for names */
  883.  
  884. /*
  885. #back-button .toolbarbutton-icon {
  886.   list-style-image: url("moz-icon://stock/go-previous-symbolic?size=menu") !important;
  887.   -moz-image-region: auto;
  888. }
  889.  
  890. #forward-button .toolbarbutton-icon {
  891.   list-style-image: url("moz-icon://stock/go-next-symbolic?size=menu") !important;
  892.   -moz-image-region: auto;
  893. }
  894.  
  895. #PanelUI-menu-button {
  896.   list-style-image: url("moz-icon://stock/open-menu-symbolic?size=menu") !important;
  897.   -moz-image-region: auto;
  898. }
  899.  
  900. #downloads-button {
  901.   list-style-image: url("moz-icon://stock/folder-download-symbolic?size=menu") !important;
  902.   -moz-image-region: auto;
  903. }
  904. */
  905.  
  906. /***********
  907.  * popover *
  908.  ***********/
  909.  
  910. .panel-arrow {
  911.   visibility: hidden;
  912. }
  913.  
  914. #BMB_bookmarksPopup menupopup,
  915. .panel-arrowcontent {
  916.   background: white;
  917.   border: none;
  918.   border-radius: 2px;
  919.   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  920. }
  921.  
  922. #PanelUI-popup {
  923.   margin: -2px -26px !important;
  924. }
  925.  
  926. #BMB_bookmarksPopup {
  927.   margin: -11px -26px !important;
  928. }
  929.  
  930. .panel-arrowcontent {
  931.   margin: 8px;
  932.   padding: 4px 0;
  933. }
  934.  
  935. autorepeatbutton {
  936.   border-color: rgba(0, 0, 0, 0.1);
  937. }
  938.  
  939. autorepeatbutton.autorepeatbutton-up {
  940.   border-style: none none solid;
  941. }
  942.  
  943. autorepeatbutton.autorepeatbutton-down {
  944.   border-style: solid none none;
  945. }
  946.  
  947. .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
  948.   margin: 0;
  949. }
  950.  
  951. .PanelUI-subView menuseparator,
  952. .PanelUI-subView toolbarseparator,
  953. .cui-widget-panelview menuseparator {
  954.   margin: 4px 0;
  955. }
  956.  
  957. #BMB_bookmarksPopup menupopup {
  958.   margin-top: -4px;
  959.   padding-top: 0;
  960. }
  961.  
  962. panelview .toolbarbutton-1,
  963. .subviewbutton,
  964. .widget-overflow-list .toolbarbutton-1,
  965. .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  966. .share-provider-button,
  967. .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
  968.   min-height: 28px;
  969.   padding: 4px 8px;
  970.   background-color: transparent;
  971.   border-radius: 0;
  972.   border-style: none;
  973. }
  974.  
  975. panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
  976. toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
  977. menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
  978. menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
  979. .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover:not([checked="true"]),
  980. .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
  981. .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not(:-moz-any([disabled],[open],:active)):hover {
  982.   background-color: rgba(0, 0, 0, 0.12);
  983. }
  984.  
  985. .panel-subviews {
  986.   background-color: white;
  987.   padding-inline-start: 0;
  988.   background-clip: padding-box;
  989.   border-left: none;
  990.   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  991. }
  992.  
  993. #PanelUI-footer {
  994.   background-color: transparent;
  995. }
  996.  
  997. #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview >  #PanelUI-mainView {
  998.   background-color: rgba(0, 0, 0, 0.2);
  999. }
  1000.  
  1001. .panelUI-grid .toolbarbutton-1:not([buttonover]):not(:-moz-any([disabled],[open],:active)):hover > .toolbarbutton-menubutton-dropmarker {
  1002.   background-color: red !important;
  1003. }
  1004.  
  1005. .PanelUI-remotetabs-prefs-button {
  1006.   background-color: red !important;
  1007. }
  1008.  
  1009. #PanelUI-fxa-status:not([disabled]):hover,
  1010. #PanelUI-fxa-icon:not([disabled]):hover,
  1011. #PanelUI-help:not([disabled]):hover,
  1012. #PanelUI-customize:hover,
  1013. #PanelUI-quit:not([disabled]):hover {
  1014.   outline: none;
  1015.   background-color: rgba(0, 0, 0, 0.12);
  1016. }
  1017.  
  1018. #PanelUI-fxa-status:not([disabled]):hover:active,
  1019. #PanelUI-fxa-icon:not([disabled]):hover:active,
  1020. #PanelUI-help:not([disabled]):hover:active,
  1021. #PanelUI-customize:hover:active,
  1022. #PanelUI-quit:not([disabled]):hover:active {
  1023.   outline: none;
  1024.   background-color: rgba(0, 0, 0, 0.24);
  1025.   box-shadow: none;
  1026. }
  1027.  
  1028. #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
  1029.   background-color: red !important;
  1030. }
  1031.  
  1032. #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
  1033.   background-color: red !important;
  1034. }
  1035.  
  1036. #PanelUI-panic-timeframe {
  1037.   border-color: red;
  1038. }
  1039.  
  1040. #PanelUI-update-status {
  1041.   border-color: red !important;
  1042. }
  1043.  
  1044. .panel-subview-header {
  1045.   margin: -4px -4px 4px;
  1046.   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  1047.   box-shadow: none;
  1048.   color: GrayText;
  1049.   font-variant: small-caps;
  1050. }
  1051.  
  1052. .subviewbutton.panel-subview-footer {
  1053.   background-clip: padding-box;
  1054.   margin: 4px -4px -4px;
  1055.   background-color: transparent;
  1056.   border-color: rgba(0, 0, 0, 0.1);
  1057. }
  1058.  
  1059. .subviewradio {
  1060.   background-color: red !important;
  1061. }
  1062.  
  1063. #PanelUI-footer-inner,
  1064. #PanelUI-footer-fxa:not([hidden]) {
  1065.   border-color: rgba(0, 0, 0, 0.1);
  1066. }
  1067.  
  1068. #PanelUI-footer-inner > toolbarseparator,
  1069. #PanelUI-footer-fxa > toolbarseparator {
  1070.   margin: 6px -1px 6px 0;
  1071.   border-color: rgba(0, 0, 0, 0.1);
  1072. }
  1073.  
  1074. #PanelUI-footer-inner:hover > toolbarseparator,
  1075. #PanelUI-footer-fxa:hover > toolbarseparator {
  1076.   margin: 0 -1px 0 0;
  1077. }
  1078.  
  1079. .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
  1080.   border-color: rgba(0, 0, 0, 0.1);
  1081. }
  1082.  
  1083. .subviewbutton > .toolbarbutton-text {
  1084.   padding-top: 0;
  1085.   padding-bottom: 0;
  1086. }
  1087.  
  1088. :root {
  1089.   --panel-ui-exit-subview-gutter-width: 48px;
  1090. }
  1091.  
  1092. /****************
  1093.  * new tab page *
  1094.  ****************/
  1095.  
  1096. .newtab-cell {
  1097.   border-radius: 2px;
  1098. }
  1099.  
  1100. .newtab-site {
  1101.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  1102. }
  1103.  
  1104. .newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
  1105. .newtab-cell:not([ignorehover]) .newtab-link:hover,
  1106. .newtab-site[dragged] {
  1107.   border: none;
  1108.   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  1109.   margin: 0;
  1110. }
  1111.  
  1112. .newtab-link {
  1113.   border-radius: 2px;
  1114.   overflow: hidden;
  1115. }
  1116.  
  1117. .newtab-thumbnail {
  1118.   border-radius: 2px 2px 0px 0px;
  1119. }
  1120.  
  1121. .newtab-title {
  1122.   color: white !important;
  1123.   background-color: rgba(0, 0, 0, 0.5) !important;
  1124.   border: none !important;
  1125.   border-radius: 0px 0px 2px 2px;
  1126. }
  1127.  
  1128. .newtab-sponsored {
  1129.   background-color: #FFFFFF;
  1130.   border: 1px solid red;
  1131.   border-radius: 3px;
  1132.   color: #4A4A4A;
  1133. }
  1134.  
  1135. #newtab-search-text {
  1136.   -moz-box-flex: 1;
  1137.   padding-top: 6px;
  1138.   padding-bottom: 6px;
  1139.   padding-left: 36px;
  1140.   padding-right: 8px;
  1141.   background-color: white;
  1142.   border: none;
  1143.   border-radius: 2px;
  1144.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  1145.   transition: box-shadow 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  1146. }
  1147.  
  1148. #newtab-search-text:focus {
  1149.   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  1150. }
  1151.  
  1152. #newtab-search-form {
  1153.   height: 40px;
  1154. }
  1155.  
  1156. #newtab-search-icon {
  1157.   width: 40px;
  1158.   height: 40px;
  1159. }
  1160.  
  1161. #newtab-search-submit {
  1162.   padding: 0;
  1163.   margin: 0;
  1164.   width: 40px;
  1165.   height: 40px;
  1166.   right: 0;
  1167.   position: absolute;
  1168.  
  1169.   background-color: transparent !important;
  1170.   background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") !important;
  1171.   border: none;
  1172.   box-shadow: none !important;
  1173. }
  1174.  
  1175. #newtab-search-text:focus + #newtab-search-submit,
  1176. #newtab-search-text + #newtab-search-submit:hover,
  1177. #newtab-search-text[autofocus] + #newtab-search-submit {
  1178.   border-color: #59b5fc #45a3e7 #3294d5;
  1179.   color: white;
  1180. }
  1181.  
  1182. #newtab-search-text:focus + #newtab-search-submit,
  1183. #newtab-search-text[keepfocus] + #newtab-search-submit,
  1184. #newtab-search-text[autofocus] + #newtab-search-submit {
  1185.   background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted") center center no-repeat, linear-gradient(#4cb1ff, #1793e5);
  1186.   box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
  1187.               0 0 0 1px hsla(0,0%,100%,.1) inset,
  1188.               0 1px 0 hsla(210,54%,20%,.03);
  1189. }
  1190.  
  1191. #newtab-search-text + #newtab-search-submit:hover {
  1192.   background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted") center center no-repeat, linear-gradient(#4cb1ff, #1793e5);
  1193.   box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
  1194.               0 0 0 1px hsla(0,0%,100%,.1) inset,
  1195.               0 1px 0 hsla(210,54%,20%,.03),
  1196.               0 0 4px hsla(206,100%,20%,.2);
  1197. }
  1198.  
  1199.  
  1200. #newtab-customize-button {
  1201.   background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0) !important;
  1202.   background-size: 24px;
  1203.   height: 48px;
  1204.   width: 48px;
  1205.   background-color: transparent;
  1206.   background-repeat: no-repeat;
  1207.   background-position: center;
  1208.   border: none !important;
  1209.   border-radius: 9999px !important;
  1210. }
  1211.  
  1212. #newtab-search-submit:hover,
  1213. #newtab-customize-button:-moz-any(:hover, :active, [active]) {
  1214.   background-color: rgba(0, 0, 0, 0.12) !important;
  1215. }
  1216.  
  1217. #newtab-search-submit:hover:active,
  1218. #newtab-customize-button:-moz-any(:active, [active]) {
  1219.   background-color: rgba(0, 0, 0, 0.24) !important;
  1220. }
  1221.  
  1222. #newtab-customize-panel-inner-wrapper {
  1223.   border-radius: 2px;
  1224. }
  1225.  
  1226. #newtab-customize-panel {
  1227.   filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.23));
  1228. }
  1229.  
  1230. .newtab-customize-panel-superitem,
  1231. .newtab-customize-panel-item:not(:first-child) {
  1232.   background-clip: padding-box;
  1233.   border-color: rgba(0, 0, 0, 0.1);
  1234. }
  1235.  
  1236. .newtab-customize-panel-item,
  1237. .newtab-customize-complex-option {
  1238.   background-color: transparent;
  1239. }
  1240.  
  1241.  
  1242. .newtab-customize-panel-item:not([selected]),
  1243. .newtab-customize-panel-subitem:not([selected]){
  1244.   color: var(--chrome-color);
  1245. }
  1246.  
  1247. .newtab-customize-panel-item:not([selected]):hover {
  1248.   color: var(--chrome-color);
  1249.   background-color: rgba(0, 0, 0, 0.12);
  1250. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement