API tools faq
paste
Guest User

Untitled

a guest
Dec 24th, 2024
54
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 220.82 KB | None | 0 0
raw download clone embed print report
  1. * {
  2. border-radius: 0 !important;
  3. }
  4.  
  5. .tabbrowser-tab {min-width: initial !important;}.tab-content {overflow: hidden !important;}
  6.  
  7.  
  8. /* FONT */
  9. * {
  10. font-family: "Tahoma" !important;
  11. font-size: 11px !important;
  12. }
  13.  
  14. /* ---Tabs/Tab Bar height--- */
  15. :root {
  16. --tab-min-height: 23px !important;
  17. }
  18.  
  19. /* MENU SHADOWS */
  20. slot[part="content"]{ box-shadow: none !important }
  21. panel{
  22. --windows-panel-box-shadow: none !important;
  23. }
  24. menupopup{
  25. -moz-window-shadow: none !important;
  26. }
  27. .menupopup-arrowscrollbox{
  28. box-shadow: none !important;
  29. }
  30.  
  31.  
  32.  
  33. /big one
  34. @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  35. menubar,
  36. menubutton,
  37. menulist,
  38. menu,
  39. menuitem {
  40. font-family: Tahoma !important;
  41. font-size: 11px !important;
  42. }
  43. #toolbar-menubar {
  44. font-family: Tahoma !important;
  45. font-size: 11px !important;
  46. }
  47. #edit-menu {
  48. font-family: Tahoma !important;
  49. font-size: 11px !important;
  50. }
  51. #history-menu {
  52. font-family: Tahoma !important;
  53. font-size: 11px !important;
  54. }
  55. #bookmarksMenu {
  56. font-family: Tahoma !important;
  57. font-size: 11px !important;
  58. }
  59. #view-menu {
  60. font-family: Tahoma !important;
  61. font-size: 11px !important;
  62. }
  63. #file-menu {
  64. font-family: Tahoma !important;
  65. font-size: 11px !important;
  66. }
  67. #tools-menu {
  68. font-family: Tahoma !important;
  69. font-size: 11px !important;
  70. }
  71. #help-menu {
  72. font-family: Tahoma !important;
  73. font-size: 11px !important;
  74. }
  75. #personal-bookmarks .menu-iconic-text,
  76. #personal-bookmarks .toolbarbutton-text {
  77. font-family: Tahoma !important;
  78. font-size: 11px !important;
  79. }
  80. .tab-text {
  81. font-family: Tahoma !important;
  82. font-size: 11px !important;
  83. }
  84. .autocomplete-richlistitem {
  85. font-family: Tahoma !important;
  86. font-size: 11px !important;
  87. }
  88.  
  89.  
  90. /* Photon one holy shit it's HUGE */
  91. @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  92. @namespace html "http://www.w3.org/1999/xhtml";
  93.  
  94. /** Default Thme - Contrast ***************************************************/
  95. /*= Lightmode - Color darker =================================================*/
  96. :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), /* Legacy - v96 */
  97. :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
  98. --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */
  99. }
  100. @media (-moz-os-version: windows-win10), /* Legacy - v99 */
  101. (-moz-platform: windows-win10) {
  102. :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, /* Legacy - v96 */
  103. :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
  104. background-color: var(--lwt-accent-color) !important;
  105. }
  106. }
  107. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  108. :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, /* Legacy - v96 */
  109. :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
  110. background-color: var(--lwt-accent-color) !important;
  111. }
  112. }
  113.  
  114. /*= Darkmode - Color lighter =================================================*/
  115. :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], /* Legacy - v96 */
  116. :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
  117. --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */
  118. }
  119.  
  120. /** Theme - Compatibility *****************************************************/
  121. /*= Hotfix #98 ===============================================================*/
  122. /* Hidden Tab Panel Padding */
  123. #allTabsMenu-hiddenTabsView .all-tabs-item {
  124. margin-inline: 8px;
  125. border-radius: 4px;
  126. }
  127.  
  128. /*= Remote Tabs Panel's Bottom Padding =======================================*/
  129. #PanelUI-remotetabs #PanelUI-remotetabs-main {
  130. margin-bottom: 6px;
  131. }
  132.  
  133. /*= Identity Popup Icon Crop =================================================*/
  134. .identity-popup-security-connection.identity-button {
  135. padding-block: 1px !important;
  136. }
  137.  
  138. /*= Zoom in button's plus icon horizontal rate ===============================*/
  139. #customization-palette-container #zoom-in-button > .toolbarbutton-icon,
  140. #customization-panel-container #zoom-in-button > .toolbarbutton-icon,
  141. #widget-overflow-mainView #zoom-in-button > .toolbarbutton-icon {
  142. padding-inline-start: 0px !important;
  143. }
  144.  
  145. /*= Icon Fill Color ==========================================================*/
  146. :root:-moz-lwtheme {
  147. /* Auto create --lwt-toolbarbutton-icon-fill-attention, fix for nightly default theme
  148. Default Color: rgb(0,97,224) -> rgb(0, 120, 215) for more light
  149. */
  150. --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215));
  151. }
  152.  
  153. /*= First visible tab margin at maximized #332 ===============================*/
  154. :root[tabsintitlebar="true"][sizemode="maximized"] #TabsToolbar {
  155. margin-left: -1px;
  156. }
  157.  
  158. /*= Disabled menu background color ===========================================*/
  159. menuitem[disabled="true"],
  160. menu[disabled="true"] {
  161. background-color: transparent !important;
  162. }
  163.  
  164. /*= Remove Tab Border ========================================================*/
  165. /* Light Theme */
  166. #TabsToolbar:not([brighttext])
  167. #tabbrowser-tabs:not([noshadowfortests])
  168. .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  169. > .tab-stack
  170. > .tab-background {
  171. border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
  172. }
  173.  
  174. /* Dark Theme */
  175. #TabsToolbar[brighttext]
  176. #tabbrowser-tabs:not([noshadowfortests])
  177. .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  178. > .tab-stack
  179. > .tab-background:-moz-lwtheme {
  180. border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */
  181. }
  182.  
  183. /*= Light Weight Theme =======================================================*/
  184. /* Header Image */
  185. :root[lwtheme-image] {
  186. background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */
  187. background-repeat: no-repeat !important;
  188. background-position: right top !important;
  189. }
  190. @media (min-width: 2500px) {
  191. :root[lwtheme-image] {
  192. background-size: contain;
  193. }
  194. }
  195. :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme {
  196. background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
  197. background-repeat: var(--lwt-background-tiling) !important;
  198. background-position: var(--lwt-background-alignment) !important;
  199. background-color: unset !important; /* Original: var(--lwt-accent-color) */
  200. }
  201.  
  202. /* Navbar Border */
  203. #navigator-toolbox:-moz-lwtheme {
  204. --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
  205. --lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
  206. }
  207.  
  208. /** OS - Compatibility ********************************************************/
  209. /*= Windows 7, 8 - Tab Bar Background *****************************************/
  210. @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
  211. (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  212. /* Header Color */
  213. :root:not([lwtheme-image]):-moz-lwtheme {
  214. background-color: var(--lwt-accent-color) !important;
  215. }
  216. }
  217. @media (-moz-os-version: windows-win7), /* Legacy - v99 */
  218. (-moz-platform: windows-win7) {
  219. #TabsToolbar:-moz-lwtheme {
  220. color: var(--lwt-text-color) !important;
  221. }
  222.  
  223. /* Remove Aero */
  224. #TabsToolbar {
  225. /* Original: radial-gradient(eclipse at bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 80%, transparent) */
  226. background-image: unset !important;
  227. }
  228. }
  229. @media (-moz-os-version: windows-win8), /* Legacy - v99 */
  230. (-moz-platform: windows-win8) {
  231. #navigator-toolbox:-moz-lwtheme {
  232. color: var(--lwt-text-color) !important;
  233. }
  234. }
  235.  
  236. /*= Windows 7, 8 - Menu Active Color =========================================*/
  237. @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
  238. (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  239. menupopup > menu,
  240. menupopup > menuitem,
  241. #context-navigation > menuitem {
  242. border: 1px solid transparent; /* Need reduce 2px at menu */
  243. }
  244.  
  245. #main-menubar > menu[open="true"],
  246. #main-menubar > menu[_moz-menuactive="true"] {
  247. background-color: -moz-menuhover !important; /* Make to original */
  248. }
  249. :root:-moz-lwtheme #main-menubar > menu[open="true"],
  250. :root:-moz-lwtheme #main-menubar > menu[_moz-menuactive="true"] {
  251. color: inherit !important; /* Original: -moz-menubarhovertext */
  252. background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
  253. }
  254.  
  255. menulist > menupopup > menuitem[_moz-menuactive="true"],
  256. menulist > menupopup > menu[_moz-menuactive="true"] {
  257. background-color: highlight !important;
  258. color: highlighttext !important;
  259. }
  260.  
  261. #PlacesToolbar menu,
  262. #PlacesToolbar menuitem,
  263. #BMB_bookmarksPopup menu,
  264. #BMB_bookmarksPopup menuitem {
  265. border: none !important; /* Remove border */
  266. }
  267. #PlacesToolbar menu:not([disabled], :active)[_moz-menuactive="true"],
  268. #PlacesToolbar menuitem:not([disabled], :active)[_moz-menuactive="true"],
  269. #BMB_bookmarksPopup menu:not([disabled], :active)[_moz-menuactive="true"],
  270. #BMB_bookmarksPopup menuitem:not([disabled], :active)[_moz-menuactive="true"] {
  271. background-color: var(--button-hover-bgcolor) !important;
  272. }
  273. }
  274.  
  275. @media (-moz-os-version: windows-win7), /* Legacy - v99 */
  276. (-moz-platform: windows-win7) {
  277. menu[_moz-menuactive="true"],
  278. menuitem[_moz-menuactive="true"] {
  279. background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important;
  280. border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important;
  281. }
  282. menu[_moz-menuactive="true"][disabled="disabled"],
  283. menuitem[_moz-menuactive="true"][disabled="true"] {
  284. background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
  285. border-color: color-mix(in srgb, currentColor 60%, transparent) !important;
  286. }
  287.  
  288. /* Remove text shadow */
  289. :root:-moz-lwtheme #toolbar-menubar {
  290. text-shadow: unset !important;
  291. /* Original: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255, 255, 255, .4) */
  292. }
  293.  
  294. /* Remove Color */
  295. :root:-moz-lwtheme #main-menubar:not(:-moz-window-inactive) {
  296. background-color: unset !important; /* Original: rgba(255, 255, 255, .5) */
  297. color: unset !important; /* Original: black */
  298. }
  299. }
  300. @media (-moz-os-version: windows-win8), /* Legacy - v99 */
  301. (-moz-platform: windows-win8) {
  302. menu[_moz-menuactive="true"],
  303. menuitem[_moz-menuactive="true"] {
  304. background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important;
  305. border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important;
  306. }
  307. menu[_moz-menuactive="true"][disabled="disabled"],
  308. menuitem[_moz-menuactive="true"][disabled="true"] {
  309. background-color: color-mix(in srgb, currentColor 17%, transparent) !important;
  310. border-color: color-mix(in srgb, currentColor 80%, transparent) !important;
  311. }
  312. }
  313.  
  314. /*= Windows 10 - Top border of accent color at ESR #358 ======================*/
  315. @media (-moz-os-version: windows-win10), /* Legacy - v99 */
  316. (-moz-platform: windows-win10) {
  317. :root[sizemode=normal][tabsintitlebar] #navigator-toolbox {
  318. border-top: .5px solid rgb(47, 47, 47) !important;
  319. }
  320. :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive #navigator-toolbox {
  321. border-top-color: rgb(57, 57, 57) !important;
  322. }
  323. @media (-moz-windows-accent-color-in-titlebar) {
  324. :root[sizemode=normal][tabsintitlebar] #navigator-toolbox {
  325. border-top-color: -moz-accent-color !important;
  326. }
  327. }
  328. }
  329.  
  330. @media (-moz-gtk-csd-available) {
  331. /*= Linux - Global Menubar Active Color ====================================*/
  332. #main-menubar > menu[open="true"],
  333. #main-menubar > menu[_moz-menuactive="true"] {
  334. color: inherit !important; /* Original: -moz-menubarhovertext */
  335. background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */
  336. }
  337.  
  338. /*= Linux - Titlebar button at lwtheme =====================================*/
  339. .titlebar-button:-moz-lwtheme {
  340. appearance: auto !important;
  341. }
  342. .titlebar-min:-moz-lwtheme,
  343. .titlebar-max:-moz-lwtheme,
  344. .titlebar-restore:-moz-lwtheme,
  345. .titlebar-close:-moz-lwtheme {
  346. list-style-image: none !important;
  347. }
  348. .titlebar-button:-moz-lwtheme:hover,
  349. .titlebar-button:-moz-lwtheme:hover:active {
  350. background-color: unset !important;
  351. color: unset !important;
  352. }
  353. }
  354.  
  355. /*= Linux - Light System Default Theme's Selected Tab ========================*/
  356. @media (-moz-gtk-csd-available) and (-moz-toolbar-prefers-color-scheme: light),
  357. (-moz-gtk-csd-available) and (prefers-color-scheme: light) {
  358. /* Because of
  359. #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background {
  360. border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9));
  361. box-shadow: 0 0 4px rgba(128,128,142,0.5);
  362. }
  363. */
  364. #tabbrowser-tabs:not([noshadowfortests])
  365. .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  366. > .tab-stack
  367. > .tab-background:not(:-moz-lwtheme) {
  368. box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important;
  369. }
  370. #TabsToolbar:not([brighttext])
  371. #tabbrowser-tabs:not([noshadowfortests])
  372. .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  373. > .tab-stack
  374. > .tab-background:not(:-moz-lwtheme) {
  375. box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important;
  376. }
  377. }
  378.  
  379. /** System Default Theme ******************************************************/
  380. /*= Common - URL Bar focus color =============================================*/
  381. @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
  382. /* URL Bar */
  383. :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
  384. :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
  385. --focus-outline-color: -moz-accent-color !important;
  386. }
  387.  
  388. :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
  389. :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
  390. border-color: color-mix(
  391. in srgb,
  392. -moz-accent-color 50%,
  393. transparent
  394. ) !important; /* Like: --toolbar-field-focus-border-color */
  395. }
  396. }
  397.  
  398. /*= Windows7 - Aero Based Theme ==============================================*/
  399. @media (-moz-os-version: windows-win7), /* Legacy - v99 */
  400. (-moz-platform: windows-win7) {
  401. #TabsToolbar:not(:-moz-lwtheme) {
  402. --background-color: rgb(229, 229, 235);
  403. --toolbarseparator-color: transparent;
  404. }
  405. #TabsToolbar:not(:-moz-lwtheme)
  406. .tabbrowser-tab
  407. > .tab-stack
  408. > .tab-background:not([selected="true"], [multiselected]) {
  409. color: var(--background-color);
  410. background-color: color-mix(in srgb, currentColor 60%, transparent);
  411. }
  412. #TabsToolbar:not(:-moz-lwtheme)
  413. .tabbrowser-tab:hover
  414. > .tab-stack
  415. > .tab-background:not([selected="true"], [multiselected]) {
  416. background-color: color-mix(
  417. in srgb,
  418. currentColor 85%,
  419. transparent
  420. ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
  421. }
  422. #scrollbutton-up:not(:-moz-lwtheme),
  423. #scrollbutton-down:not(:-moz-lwtheme),
  424. #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
  425. #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
  426. color: var(--background-color) !important;
  427. background-color: color-mix(in srgb, currentColor 50%, transparent);
  428. }
  429. }
  430.  
  431. /*= Windows10 - UWP like color ===============================================*/
  432. @media (-moz-os-version: windows-win10), /* Legacy - v99 */
  433. (-moz-platform: windows-win10) {
  434. :root:not(:-moz-lwtheme) {
  435. --win-text-color: rgba(0, 0, 0);
  436. --win-bgcolor: rgb(204, 204, 204);
  437. --win-disabled-color: rgb(145, 145, 145);
  438. --win-disabled-bgcolor: transparent;
  439. --win-hover-bgcolor: rgb(218, 218, 218); /* also button-bgcolor */
  440. --win-hover-active-bgcolor: #c2c2c2; /* also button-hover-bgcolor */
  441. --win-button-hover-bgcolor: rgba(218, 218, 218, 0.66);
  442. --win-button-active-bgcolor: #aaaaaa;
  443. --win-field-bgcolor: #ffffff;
  444. --win-component-bgcolor: #f2f2f2;
  445. --win-border-color: #8a8a8a;
  446. --win-tab-seperator-color: #a3a3a3;
  447. --win-sidebar-bgcolor: #e6e6e6;
  448. --win-sidebar-hover-bgcolor: #cfcfcf;
  449. --win-sidebar-button-hover-bgcolor: #b8b8b8;
  450. --win-sidebar-button-hover-active-bgcolor: #a3a3a3;
  451. --win-button-border: #747474;
  452. --win-shorcut-text-color: #757575;
  453. --win-error-color: #b31616;
  454. --win-red-border-color: #ff4343;
  455. --win-accent-forground-color: -moz-accent-color-foreground;
  456. --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
  457. --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
  458. --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
  459. --win-accent-active-color: -moz-accent-color;
  460. }
  461. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  462. :root:not(:-moz-lwtheme),
  463. :root[lwt-default-theme-in-dark-mode] {
  464. --win-text-color: #ffffff;
  465. --win-bgcolor: #2b2b2b;
  466. --win-disabled-color: #747474;
  467. --win-disabled-bgcolor: transparent;
  468. --win-hover-bgcolor: #2e2e2e; /* also button-bgcolor */
  469. --win-hover-active-bgcolor: #454545; /* also button-active-color */
  470. --win-button-hover-bgcolor: rgba(46, 46, 46, 0.66);
  471. --win-button-active-bgcolor: #515151;
  472. --win-field-bgcolor: #373737;
  473. --win-component-bgcolor: #171717;
  474. --win-border-color: #5b5b5b;
  475. --win-tab-seperator-color: #555555;
  476. --win-sidebar-bgcolor: #1f1f1f;
  477. --win-sidebar-hover-bgcolor: #353535;
  478. --win-sidebar-button-hover-bgcolor: #353535;
  479. --win-sidebar-button-hover-active-bgcolor: #4c4c4c;
  480. --win-button-border: #8f8f8f;
  481. --win-shorcut-text-color: #adadad;
  482. --win-error-color: #ffb900;
  483. --win-red-border-color: #ff4343;
  484. --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
  485. --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
  486. --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
  487. --win-accent-active-color: -moz-accent-color;
  488. }
  489. }
  490.  
  491. :root:not(:-moz-lwtheme),
  492. :root[lwt-default-theme-in-dark-mode] {
  493. /* Text, Icon Color */
  494. --menu-color: var(--win-text-color) !important;
  495. --lwt-text-color: var(--win-text-color) !important;
  496. --button-color: var(--win-text-color) !important;
  497. --input-color: var(--win-text-color) !important;
  498. --toolbar-color: var(--win-text-color) !important;
  499. --toolbar-non-lwt-textcolor: var(--win-text-color) !important;
  500. --toolbarbutton-icon-fill: var(--win-text-color) !important;
  501. --toolbar-field-focus-color: var(--win-text-color) !important;
  502. --urlbar-popup-action-color: var(--win-text-color) !important;
  503. --toolbar-field-color: var(--win-text-color) !important;
  504. --autocomplete-popup-highlight-color: var(--win-text-color) !important;
  505. --tab-icon-overlay-fill: var(--win-text-color) !important;
  506. --panel-banner-item-color: var(--win-text-color) !important;
  507. --arrowpanel-color: var(--win-text-color) !important;
  508. --autocomplete-popup-color: var(--win-text-color) !important;
  509.  
  510. /* Text Disabled Color */
  511. --menu-disabled-color: var(--win-disabled-color) !important;
  512. --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important;
  513. --panel-disabled-color: var(--win-disabled-color) !important;
  514. --download-progress-paused-color: var(--win-disabled-color) !important;
  515.  
  516. /* Text Shortcut Color */
  517. --panel-shortcut-color: var(--win-shorcut-text-color) !important;
  518. --panel-description-color: var(--win-shorcut-text-color) !important;
  519.  
  520. /* Title Background, Border Color */
  521. --menu-border-color: var(--win-bgcolor) !important;
  522. --lwt-accent-color: var(--win-bgcolor) !important;
  523. --toolbar-field-border-color: var(--win-bgcolor) !important;
  524. --chrome-content-separator-color: var(--win-bgcolor) !important;
  525.  
  526. /* Component Background Color */
  527. --menu-background-color: var(--win-component-bgcolor) !important;
  528. --toolbar-bgcolor: var(--win-component-bgcolor) !important;
  529. --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
  530. --arrowpanel-background: var(--win-component-bgcolor) !important;
  531. --autocomplete-popup-background: var(--win-component-bgcolor) !important;
  532.  
  533. /* Seperator */
  534. --toolbarseparator-color: var(--win-tab-seperator-color) !important;
  535.  
  536. /* Field Backround Color */
  537. --input-bgcolor: var(--win-field-bgcolor) !important;
  538. --toolbar-field-background-color: var(--win-field-bgcolor) !important;
  539. --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important;
  540. --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important;
  541.  
  542. /* Hover Background Color, Button Color */
  543. --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
  544. --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
  545. --button-bgcolor: var(--win-hover-bgcolor) !important;
  546. --panel-banner-item-background-color: var(--win-hover-bgcolor) !important;
  547.  
  548. /* Hover Active, Button Hover Color */
  549. --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important;
  550. --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important;
  551. --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important;
  552. --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important;
  553. --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important;
  554. --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important;
  555. --panel-banner-item-hover-bgcolor: var(--win-hover-active-bgcolor) !important;
  556.  
  557. /* Button Hover Active Color */
  558. --button-active-bgcolor: var(--win-button-active-bgcolor) !important;
  559. --panel-banner-item-active-bgcolor: var(--win-button-active-bgcolor) !important;
  560.  
  561. /* Disabled Background Color */
  562. --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
  563.  
  564. /* Button Hover Color */
  565. --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
  566. --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
  567. --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
  568. --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important;
  569.  
  570. /* Button Border Color */
  571. --checkbox-border-color: var(--win-button-border) !important;
  572. --input-border-color: var(--win-button-border) !important;
  573. --autocomplete-popup-separator-color: var(--win-button-border) !important;
  574.  
  575. /* Accent Forground Color */
  576. --button-primary-color: var(--win-accent-forground-color) !important;
  577. --checkbox-checked-color: var(--win-accent-forground-color) !important;
  578.  
  579. /* Accent Color */
  580. --button-primary-bgcolor: var(--win-accent-color) !important;
  581. --focus-outline-color: var(--win-accent-color) !important;
  582. --checkbox-checked-bgcolor: var(--win-accent-color) !important;
  583.  
  584. /* Accent Content Color */
  585. --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important;
  586. --urlbar-popup-url-color: var(--win-accent-content-color) !important;
  587. --download-progress-fill-color: var(--win-accent-content-color) !important;
  588.  
  589. /* Accent Hover Color */
  590. --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important;
  591. --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important;
  592.  
  593. /* Accent Hover Active Color */
  594. --button-primary-active-bgcolor: var(--win-accent-active-color) !important;
  595. --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important;
  596.  
  597. /* Error Color */
  598. --error-text-color: var(--win-error-color) !important;
  599. --input-error-border-color: var(--win-error-color) !important;
  600.  
  601. /* Others */
  602. --tab-line-color: Highlight !important;
  603. --tab-selected-bgcolor: unset !important;
  604. --tabs-border-color: transparent !important;
  605. --checkbox-checked-border-color: transparent !important;
  606.  
  607. /* Other Defaults */
  608. --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
  609. --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
  610. --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
  611.  
  612. --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
  613.  
  614. --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
  615. }
  616. #navigator-toolbox:not(:-moz-lwtheme) {
  617. background: var(--lwt-accent-color) !important;
  618. }
  619.  
  620. /*- Separator --------------------------------------------------------------*/
  621. :root:not(:-moz-lwtheme) {
  622. --arrowpanel-border-color: var(--win-bgcolor) !important;
  623. --panel-separator-color: var(--win-bgcolor) !important;
  624. }
  625. :root[lwt-default-theme-in-dark-mode] {
  626. --arrowpanel-border-color: var(--win-border-color) !important;
  627. --panel-separator-color: var(--win-border-color) !important;
  628. }
  629.  
  630. @media (-moz-windows-accent-color-in-titlebar) {
  631. :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
  632. :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
  633. --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* As default */
  634. }
  635. }
  636.  
  637. /*- Menu -------------------------------------------------------------------*/
  638. html#main-window menupopup:not(:-moz-lwtheme) {
  639. --menu-color: var(--win-text-color) !important;
  640. --menu-background-color: var(--win-component-bgcolor) !important;
  641. --menu-border-color: var(--win-bgcolor) !important;
  642. --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
  643. --menu-disabled-color: var(--win-disabled-color) !important;
  644. --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
  645. }
  646.  
  647. /*- Toolbar ----------------------------------------------------------------*/
  648. :root:not(:-moz-lwtheme) #titlebar,
  649. :root[lwt-default-theme-in-dark-mode] #titlebar {
  650. --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor);
  651. --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor);
  652. --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor);
  653. --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor);
  654. }
  655.  
  656. /*- Sidebar ----------------------------------------------------------------*/
  657. #sidebar-box:not([lwt-sidebar]) {
  658. appearance: none !important;
  659. }
  660. :root:not(:-moz-lwtheme) #sidebar-box,
  661. :root[lwt-default-theme-in-dark-mode] #sidebar-box {
  662. --sidebar-background-color: var(--win-sidebar-bgcolor) !important;
  663. --sidebar-text-color: var(--win-text-color) !important;
  664. --sidebar-border-color: var(--win-border-color) !important;
  665. }
  666. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  667. .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
  668. body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
  669. .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
  670. body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
  671. /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
  672. --lwt-sidebar-background-color: transparent !important;
  673. --lwt-sidebar-text-color: var(--win-text-color) !important;
  674. }
  675. }
  676.  
  677. /*- Panel ------------------------------------------------------------------*/
  678. :root:not(:-moz-lwtheme) .subviewbutton,
  679. :root[lwt-default-theme-in-dark-mode] .subviewbutton {
  680. --button-hover-bgcolor: var(--win-hover-active-bgcolor) !important;
  681. --button-active-bgcolor: var(--win-button-active-bgcolor) !important;
  682. }
  683.  
  684. :root:not(:-moz-lwtheme)
  685. toolbarbutton.subviewbutton:not([disabled], [open], :active, #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is(:hover),
  686. :root[lwt-default-theme-in-dark-mode]
  687. toolbarbutton.subviewbutton:not([disabled], [open], :active, #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is(:hover) {
  688. background-color: var(--win-hover-bgcolor) !important;
  689. }
  690. :root:not(:-moz-lwtheme)
  691. toolbarbutton.subviewbutton:not([disabled], #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is([open], :hover:active),
  692. :root[lwt-default-theme-in-dark-mode]
  693. toolbarbutton.subviewbutton:not([disabled], #appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2):is([open], :hover:active) {
  694. background-color: var(--win-hover-active-bgcolor) !important;
  695. }
  696.  
  697. /*- Others -----------------------------------------------------------------*/
  698. /* For overwrite */
  699. :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy - lwtheme-mozlightdark at v96 */
  700. :root:not(:-moz-lwtheme) {
  701. /* Light Theme */
  702. --lwt-accent-color: var(--win-bgcolor) !important;
  703. }
  704. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  705. :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
  706. --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
  707. }
  708. }
  709.  
  710. #tabbrowser-tabs:not([movingtab])
  711. > #tabbrowser-arrowscrollbox
  712. > .tabbrowser-tab
  713. > .tab-stack
  714. > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
  715. :root[lwtheme-mozlightdark] /* Legacy - lwtheme-mozlightdark at v96 */
  716. #tabbrowser-tabs:not([movingtab])
  717. > #tabbrowser-arrowscrollbox
  718. > .tabbrowser-tab
  719. > .tab-stack
  720. > .tab-background[multiselected]:not([selected]),
  721. :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
  722. #tabbrowser-tabs:not([movingtab])
  723. > #tabbrowser-arrowscrollbox
  724. > .tabbrowser-tab
  725. > .tab-stack
  726. > .tab-background[multiselected]:not([selected]) {
  727. background-image: linear-gradient(
  728. color-mix(in srgb, currentColor 11%, transparent),
  729. color-mix(in srgb, currentColor 11%, transparent)
  730. ),
  731. linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  732. }
  733. }
  734.  
  735. /*= Windows10 - Titlebar accent color ========================================*/
  736. @media (-moz-windows-accent-color-in-titlebar) {
  737. /* Tab Bar */
  738. :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
  739. :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
  740. color: -moz-accent-color-foreground;
  741. background-color: -moz-accent-color;
  742. }
  743.  
  744. :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
  745. :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
  746. --toolbarbutton-icon-fill: currentColor;
  747. --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
  748. --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
  749. }
  750. }
  751.  
  752. /*= GTK - URL View url accent color ==========================================*/
  753. @media (-moz-gtk-csd-available) {
  754. :root:not(:-moz-lwtheme) .urlbarView-url {
  755. --urlbar-popup-url-color: -moz-accent-color;
  756. }
  757.  
  758. /* Nightly Compatibility */
  759. :root:not(:-moz-lwtheme) #urlbar {
  760. --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1) */
  761. --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
  762. }
  763. }
  764.  
  765. /*= Mac - Default like color =================================================*/
  766. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  767. :root:not(:-moz-lwtheme),
  768. :root[lwt-default-theme-in-dark-mode] {
  769. /* Colors */
  770. --mac-text-color: -moz-dialogtext;
  771. --mac-disabled-color: GrayText;
  772. --mac-bgcolor: Window;
  773. --mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
  774. --mac-field-bgcolor: Window;
  775. --mac-panel-bgcolor: Menu;
  776. --mac-sidebar-bgcolor: -moz-mac-source-list;
  777. --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
  778. --mac-hover-bgcolor: Window;
  779. --mac-disabled-bgcolor: transparent;
  780. --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
  781. --mac-accent-color: -moz-accent-color; /* or LinkText */
  782. --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
  783. --mac-accent-hover-color: color-mix(
  784. in srgb,
  785. rgb(0, 0, 0) 10%,
  786. -moz-accent-color
  787. ); /* or -moz-mac-menuselect, Highlight */
  788. --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */
  789.  
  790. /* Text, Icon Color */
  791. --menu-color: var(--mac-text-color) !important;
  792. --lwt-text-color: var(--mac-text-color) !important;
  793. --button-color: var(--mac-text-color) !important;
  794. --input-color: var(--mac-text-color) !important;
  795. --toolbar-color: var(--mac-text-color) !important;
  796. --toolbar-non-lwt-textcolor: var(--mac-text-color) !important;
  797. --toolbarbutton-icon-fill: var(--mac-text-color) !important;
  798. --toolbar-field-focus-color: var(--mac-text-color) !important;
  799. --urlbar-popup-action-color: var(--mac-text-color) !important;
  800. --toolbar-field-color: var(--mac-text-color) !important;
  801. --autocomplete-popup-highlight-color: var(--mac-text-color) !important;
  802. --tab-icon-overlay-fill: var(--mac-text-color) !important;
  803. --panel-banner-item-color: var(--mac-text-color) !important;
  804. --arrowpanel-color: var(--mac-text-color) !important;
  805. --autocomplete-popup-color: var(--mac-text-color) !important;
  806. --panel-shortcut-color: var(--mac-text-color) !important;
  807. --panel-description-color: var(--mac-text-color) !important;
  808.  
  809. /* Text Disabled Color */
  810. --menu-disabled-color: var(--mac-disabled-color) !important;
  811. --button-active-bgcolor: var(--mac-disabled-color) !important;
  812. --checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important;
  813. --panel-disabled-color: var(--mac-disabled-color) !important;
  814. --download-progress-paused-color: var(--mac-disabled-color) !important;
  815.  
  816. /* Background Color */
  817. --lwt-accent-color: var(--mac-bgcolor) !important;
  818. --menu-background-color: var(--mac-bgcolor) !important;
  819. --autocomplete-popup-background: var(--mac-bgcolor) !important;
  820.  
  821. /* Selected Background Color */
  822. --toolbar-bgcolor: var(--mac-selected-bgcolor) !important;
  823. --toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important;
  824.  
  825. /* Field Backround Color */
  826. --input-bgcolor: var(--mac-field-bgcolor) !important;
  827. --toolbar-field-background-color: var(--mac-field-bgcolor) !important;
  828. --tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important;
  829.  
  830. /* Panel Backround Color */
  831. --arrowpanel-background: var(--mac-panel-bgcolor) !important;
  832.  
  833. /* Hover Background Color */
  834. --menuitem-hover-background-color: var(--mac-hover-bgcolor) !important;
  835. --toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important;
  836. --panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important;
  837.  
  838. --button-bgcolor: var(--mac-hover-bgcolor) !important;
  839. --checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important;
  840. --panel-banner-item-background-color: var(--mac-hover-bgcolor) !important;
  841. --urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important;
  842. --urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important;
  843. --panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important;
  844. --toolbarbutton-active-background: var(--mac-hover-bgcolor) !important;
  845. --urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important;
  846. --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
  847.  
  848. --button-hover-bgcolor: var(--mac-hover-bgcolor) !important;
  849. --checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important;
  850. --urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important;
  851. --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
  852.  
  853. /* Disabled Background Color */
  854. --menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important;
  855.  
  856. /* Border Color */
  857. /*
  858. --menu-border-color: var(--mac-bgcolor) !important;
  859. --toolbar-field-border-color: var(--mac-bgcolor) !important;
  860. --arrowpanel-border-color: var(--mac-bgcolor) !important;
  861. --chrome-content-separator-color: var(--mac-bgcolor) !important;
  862. --toolbarseparator-color: var(--mac-bgcolor) !important;
  863. --panel-separator-color: var(--mac-bgcolor) !important;
  864. */
  865.  
  866. /* Button Border Color */
  867. /*
  868. --tab-line-color: var(---mac-bgcolor) !important;
  869. --checkbox-border-color: var(--mac-bgcolor) !important;
  870. --input-border-color: var(--mac-bgcolor) !important;
  871. --autocomplete-popup-separator-color: var(--mac-bgcolor) !important;
  872. */
  873.  
  874. /* Accent Color Forground */
  875. --button-primary-color: var(--mac-primary-button-color) !important;
  876. --checkbox-checked-color: var(--mac-primary-button-color) !important;
  877.  
  878. /* Accent Color */
  879. --button-primary-bgcolor: var(--mac-accent-color) !important;
  880. --focus-outline-color: var(--mac-accent-color) !important;
  881. --checkbox-checked-bgcolor: var(--mac-accent-color) !important;
  882.  
  883. /* Accent Content Color */
  884. --toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important;
  885. --urlbar-popup-url-color: var(--mac-accent-content-color) !important;
  886. --download-progress-fill-color: var(--mac-accent-content-color) !important;
  887.  
  888. /* Accent Hover Color */
  889. --button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important;
  890. --checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important;
  891.  
  892. /* Accent Hover Active Color */
  893. --button-primary-active-bgcolor: var(--mac-accent-active-color) !important;
  894. --checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important;
  895.  
  896. /* Error Color */
  897. /*
  898. --error-text-color: var(--win-error-color) !important;
  899. --input-error-border-color: var(--win-error-color) !important;
  900. */
  901.  
  902. /* Others */
  903. --tab-selected-bgcolor: unset !important;
  904. --tabs-border-color: transparent !important;
  905. --checkbox-checked-border-color: transparent !important;
  906.  
  907. /* Other Defaults */
  908. --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
  909. --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
  910. --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
  911.  
  912. --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
  913.  
  914. --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
  915. }
  916. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  917. :root:not(:-moz-lwtheme),
  918. :root[lwt-default-theme-in-dark-mode] {
  919. --mac-field-bgcolor: Field;
  920. --mac-panel-bgcolor: -moz-CellHighlight;
  921. --mac-hover-bgcolor: ButtonFace;
  922.  
  923. --toolbar-field-focus-background-color: var(--mac-bgcolor) !important;
  924. --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important;
  925. }
  926. }
  927.  
  928. /*- Toolbar ----------------------------------------------------------------*/
  929. :root:not(:-moz-lwtheme) #navigator-toolbox,
  930. :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
  931. background-color: var(--mac-bgcolor) !important;
  932. }
  933.  
  934. :root:not(:-moz-lwtheme) #titlebar {
  935. --mac-hover-bgcolor: ButtonFace;
  936. }
  937. :root:not(:-moz-lwtheme) #titlebar,
  938. :root[lwt-default-theme-in-dark-mode] #titlebar {
  939. --button-hover-bgcolor: var(--mac-hover-bgcolor);
  940. --button-active-bgcolor: var(--mac-hover-bgcolor);
  941. --toolbarbutton-hover-background: var(--mac-hover-bgcolor);
  942. --toolbarbutton-active-background: var(--mac-hover-bgcolor);
  943.  
  944. /* Prevent transparent tabbar at fullscreen hover #312 */
  945. background: var(--mac-bgcolor);
  946. }
  947.  
  948. :root[lwt-default-theme-in-dark-mode] #urlbar {
  949. --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
  950. --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
  951. }
  952.  
  953. /*- Sidebar ----------------------------------------------------------------*/
  954. #sidebar-box:not([lwt-sidebar]) {
  955. appearance: none !important;
  956. }
  957. :root:not(:-moz-lwtheme) #sidebar-box,
  958. :root[lwt-default-theme-in-dark-mode] #sidebar-box {
  959. --sidebar-background-color: var(--mac-sidebar-bgcolor) !important;
  960. --sidebar-text-color: var(--mac-text-color) !important;
  961. /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
  962. }
  963. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  964. .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
  965. body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
  966. .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
  967. body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
  968. /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
  969. --lwt-sidebar-background-color: transparent !important;
  970. --lwt-sidebar-text-color: var(--mac-text-color) !important;
  971. }
  972. }
  973.  
  974. :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup {
  975. --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor);
  976. --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor);
  977. }
  978.  
  979. /*- Others -----------------------------------------------------------------*/
  980. /* For Overwrite */
  981. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  982. :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
  983. --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
  984. }
  985. }
  986.  
  987. /* Hard Coded */
  988. :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy - lwtheme-mozlightdark at v96 */
  989. #tabbrowser-tabs:not([movingtab])
  990. > #tabbrowser-arrowscrollbox
  991. > .tabbrowser-tab
  992. > .tab-stack
  993. > .tab-background[selected="true"],
  994. :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
  995. #tabbrowser-tabs:not([movingtab])
  996. > #tabbrowser-arrowscrollbox
  997. > .tabbrowser-tab
  998. > .tab-stack
  999. > .tab-background[selected="true"] {
  1000. background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
  1001. }
  1002.  
  1003. :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
  1004. :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
  1005. :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before,
  1006. :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after {
  1007. fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
  1008. }
  1009. }
  1010.  
  1011. /** Fully Theme Mode **********************************************************/
  1012. /* Default Themes
  1013. https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json
  1014. https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json
  1015. https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json
  1016. */
  1017.  
  1018. /*= Default Colors - Hard Coded ==============================================*/
  1019. /* Based on chrome://global/skin/in-content/common.css */
  1020. :host,
  1021. :root {
  1022. --in-content-page-color: rgb(21, 20, 26);
  1023. --in-content-page-background: #fff;
  1024. --in-content-text-color: var(--in-content-page-color);
  1025. --in-content-deemphasized-text: rgb(91, 91, 102);
  1026. --in-content-box-background: #fff;
  1027. --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
  1028. --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
  1029. --in-content-box-info-background: #f0f0f4;
  1030. --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
  1031. --in-content-item-hover-text: var(--in-content-page-color);
  1032. --in-content-item-selected: var(--in-content-primary-button-background);
  1033. --in-content-item-selected-text: var(--in-content-primary-button-text-color);
  1034. --in-content-icon-color: rgb(91, 91, 102);
  1035. --in-content-accent-color: #0a84ff;
  1036. --in-content-accent-color-active: #0060df;
  1037. --in-content-border-hover: var(--grey-90-a50);
  1038. --in-content-border-invalid: var(--red-50);
  1039. --in-content-border-color: #d7d7db;
  1040. --in-content-error-text-color: #c50042;
  1041. --in-content-link-color: var(--blue-60);
  1042. --in-content-link-color-hover: var(--blue-70);
  1043. --in-content-link-color-active: var(--blue-80);
  1044. --in-content-link-color-visited: var(--blue-60);
  1045. /* button background states are also used for checkboxes and radiobuttons */
  1046. --in-content-button-text-color: var(--in-content-text-color);
  1047. --in-content-button-text-color-hover: var(--in-content-text-color);
  1048. --in-content-button-background: rgba(207, 207, 216, 0.33);
  1049. --in-content-button-background-hover: rgba(207, 207, 216, 0.66);
  1050. --in-content-button-background-active: rgb(207, 207, 216);
  1051. --in-content-primary-button-text-color: rgb(251, 251, 254);
  1052. --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
  1053. --in-content-primary-button-background: #0061e0;
  1054. --in-content-primary-button-background-hover: #0250bb;
  1055. --in-content-primary-button-background-active: #053e94;
  1056. --in-content-danger-button-background: #e22850;
  1057. --in-content-danger-button-background-hover: #c50042;
  1058. --in-content-danger-button-background-active: #810220;
  1059. --in-content-focus-outline-color: var(--in-content-primary-button-background);
  1060.  
  1061. /* Note: 1px smaller than we want because we have a 1px transparent border. */
  1062. /* Once proton ships, these can probably stop being variables. */
  1063. --in-content-button-border-radius: 4px;
  1064. --in-content-button-horizontal-padding: 15px;
  1065. --in-content-button-vertical-padding: 7px;
  1066.  
  1067. --in-content-table-background: #f8f8fa;
  1068. --in-content-table-border-color: var(--in-content-box-border-color); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
  1069. --in-content-table-header-background: var(
  1070. --in-content-primary-button-background
  1071. ); /* Legacy: #0a84ff; rgb(5, 64, 150); */
  1072. --in-content-table-header-color: var(
  1073. --in-content-primary-button-text-color
  1074. ); /* Legacy: #ffffff; var(--in-content-page-color); */
  1075. --in-content-sidebar-width: 240px;
  1076.  
  1077. --dialog-warning-text-color: var(--red-60);
  1078.  
  1079. --checkbox-border-color: var(--in-content-box-border-color);
  1080. --checkbox-unchecked-bgcolor: var(--in-content-button-background);
  1081. --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
  1082. --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
  1083. --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
  1084. --checkbox-checked-color: var(--in-content-primary-button-text-color);
  1085. --checkbox-checked-border-color: transparent;
  1086. --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
  1087. --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
  1088. --blue-40: #45a1ff;
  1089. --blue-50: #0a84ff;
  1090. --blue-60: #0060df;
  1091. --blue-70: #003eaa;
  1092. --blue-80: #002275;
  1093. --grey-30: #d7d7db;
  1094. --grey-60: #4a4a4f;
  1095. --grey-90-a10: rgba(12, 12, 13, 0.1);
  1096. --grey-90-a20: rgba(12, 12, 13, 0.2);
  1097. --grey-90-a30: rgba(12, 12, 13, 0.3);
  1098. --grey-90-a50: rgba(12, 12, 13, 0.5);
  1099. --grey-90-a60: rgba(12, 12, 13, 0.6);
  1100. --green-50: #30e60b;
  1101. --green-60: #12bc00;
  1102. --green-70: #058b00;
  1103. --green-80: #006504;
  1104. --green-90: #003706;
  1105. --orange-50: #ff9400;
  1106. --red-40: #ff4f5e;
  1107. --red-50: #ff0039;
  1108. --red-60: #d70022;
  1109. --red-70: #a4000f;
  1110. --red-80: #5a0002;
  1111. --red-90: #3e0200;
  1112. --yellow-50: #ffe900;
  1113. --yellow-60: #d7b600;
  1114. --yellow-60-a30: rgba(215, 182, 0, 0.3);
  1115. --yellow-70: #a47f00;
  1116. --yellow-80: #715100;
  1117. --yellow-90: #3e2800;
  1118.  
  1119. --shadow-10: 0 1px 4px var(--grey-90-a10);
  1120. --shadow-30: 0 4px 16px var(--grey-90-a10);
  1121.  
  1122. --card-padding: 16px;
  1123. --card-shadow: var(--shadow-10);
  1124. --card-outline-color: var(--grey-30);
  1125. --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
  1126. }
  1127.  
  1128. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  1129. :host,
  1130. :root {
  1131. /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
  1132. --in-content-page-background: rgb(28, 27, 34);
  1133. --in-content-page-color: rgb(251, 251, 254);
  1134. --in-content-deemphasized-text: rgb(191, 191, 201);
  1135.  
  1136. --in-content-box-background: rgb(35, 34, 43);
  1137. --in-content-box-background-odd: rgba(249, 249, 250, 0.05);
  1138. --in-content-box-info-background: rgba(249, 249, 250, 0.15);
  1139.  
  1140. --in-content-border-color: rgba(249, 249, 250, 0.2);
  1141. --in-content-border-hover: rgba(249, 249, 250, 0.3);
  1142. --in-content-border-invalid: rgb(255, 132, 139);
  1143.  
  1144. --in-content-error-text-color: #ff9aa2;
  1145.  
  1146. --in-content-button-background: rgb(43, 42, 51);
  1147. --in-content-button-background-hover: rgb(82, 82, 94);
  1148. --in-content-button-background-active: rgb(91, 91, 102);
  1149. --in-content-icon-color: rgb(251, 251, 254);
  1150.  
  1151. --in-content-primary-button-text-color: rgb(43, 42, 51);
  1152. --in-content-primary-button-background: rgb(0, 221, 255);
  1153. --in-content-primary-button-background-hover: rgb(128, 235, 255);
  1154. --in-content-primary-button-background-active: rgb(170, 242, 255);
  1155.  
  1156. --in-content-danger-button-background: #ff848b;
  1157. --in-content-danger-button-background-hover: #ffbdc5;
  1158. --in-content-danger-button-background-active: #ffdfe7;
  1159.  
  1160. --in-content-table-background: rgb(35, 34, 43);
  1161. --in-content-table-border-dark-color: var(--in-content-box-border-color);
  1162.  
  1163. --in-content-accent-color: var(--in-content-primary-button-background);
  1164. --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
  1165. --in-content-link-color: var(--in-content-primary-button-background);
  1166. --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
  1167. --in-content-link-color-active: var(--in-content-primary-button-background-active);
  1168. --in-content-link-color-visited: var(--in-content-link-color);
  1169.  
  1170. --card-outline-color: var(--grey-60);
  1171.  
  1172. --dialog-warning-text-color: var(--red-40);
  1173. }
  1174. }
  1175.  
  1176. /*== Menu color =============================================================*/
  1177. html#main-window menupopup {
  1178. /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */
  1179. --menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important;
  1180. --menu-background-color: var(--arrowpanel-background, var(--in-content-button-background)) !important;
  1181.  
  1182. --menu-border-color: var(
  1183. --toolbarbutton-active-background,
  1184. var(--button-active-bgcolor, var(--card-outline-color))
  1185. ) !important;
  1186. --menuitem-hover-background-color: var(
  1187. --toolbarbutton-hover-background,
  1188. var(--button-hover-bgcolor, var(--in-content-button-background-hover))
  1189. ) !important;
  1190.  
  1191. --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important;
  1192. --menuitem-disabled-hover-background-color: color-mix(
  1193. in srgb,
  1194. var(--menuitem-hover-background-color) 40%,
  1195. transparent
  1196. ) !important;
  1197. }
  1198.  
  1199. @media not all and (-moz-gtk-csd-available) {
  1200. window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menupopup {
  1201. --panel-color: var(--lwt-sidebar-text-color, var(--menu-color)) !important;
  1202. --panel-background: var(--lwt-sidebar-background-color, var(--menu-background-color)) !important;
  1203. }
  1204. window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menu[_moz-menuactive="true"]:not([disabled="true"]),
  1205. window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"]
  1206. menuitem[_moz-menuactive="true"]:not([disabled="true"]) {
  1207. --menuitem-hover-background-color: color-mix(
  1208. in srgb,
  1209. currentColor 17%,
  1210. transparent
  1211. ); /* Looks like toolbar button */
  1212. /* or var(--lwt-sidebar-highlight-background-color)
  1213. If this value is used, unset is required in the default theme.
  1214. */
  1215. }
  1216.  
  1217. /* Fallback background */
  1218. menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) {
  1219. background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important;
  1220. }
  1221. }
  1222.  
  1223. /* Default theme color preservation */
  1224. :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy - lwtheme-mozlightdark at v96 */
  1225. :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy - lwtheme-mozlightdark at v96 */
  1226. :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
  1227. :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
  1228. --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important;
  1229. --arrowpanel-background: var(
  1230. --toolbar-bgcolor,
  1231. var(--in-content-button-background)
  1232. ) !important; /* --menu-background-color */
  1233. }
  1234. @media not all and (-moz-gtk-csd-available) {
  1235. window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(249, 249, 251, 1);"] menupopup, /* Default Light Mode */
  1236. window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] menupopup {
  1237. /* Default Dark Mode */
  1238. --panel-color: var(--menu-color) !important;
  1239. --panel-background: var(--menu-background-color) !important;
  1240. }
  1241. }
  1242.  
  1243. /*== Bookmark Popup Color ====================================================*/
  1244. #editBMPanel_folderTree:-moz-lwtheme,
  1245. #editBMPanel_tagsSelector:-moz-lwtheme {
  1246. appearance: none !important;
  1247. border: 0.5px solid var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
  1248. }
  1249.  
  1250. #editBMPanel_folderTree:-moz-lwtheme,
  1251. #editBMPanel_folderTree:-moz-lwtheme > treechildren,
  1252. #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-image,
  1253. #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(hover),
  1254. #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected),
  1255. #editBMPanel_tagsSelector:-moz-lwtheme,
  1256. #editBMPanel_tagsSelector:-moz-lwtheme > richlistitem {
  1257. color: var(--lwt-text-color, fieldtext) !important;
  1258. }
  1259. #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-cell-text(selected) {
  1260. font-weight: 600 !important;
  1261. }
  1262.  
  1263. #editBMPanel_folderTree:-moz-lwtheme > treechildren,
  1264. #editBMPanel_tagsSelector:-moz-lwtheme {
  1265. background-color: color-mix(in srgb, var(--arrowpanel-background) 35%, var(--in-content-box-background)) !important;
  1266. }
  1267. #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(hover),
  1268. #editBMPanel_tagsSelector > richlistitem:hover {
  1269. background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent)) !important;
  1270. }
  1271. #editBMPanel_folderTree:-moz-lwtheme > treechildren::-moz-tree-row(selected),
  1272. #editBMPanel_tagsSelector > richlistitem[selected="true"] {
  1273. background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent)) !important;
  1274. }
  1275.  
  1276. #editBMPanel_namePicker,
  1277. #editBMPanel_tagsField {
  1278. --input-bgcolor: var(--arrowpanel-background, Field);
  1279. --input-color: var(--arrowpanel-color, FieldText);
  1280. }
  1281.  
  1282. /*== Sidebar - Field Color ===================================================*/
  1283. .sidebar-panel #search-box,
  1284. xul|search-textbox.tabsFilter {
  1285. --input-bgcolor: color-mix(in srgb, currentColor 30%, transparent);
  1286.  
  1287. appearance: none !important;
  1288. padding: 5px 8px !important;
  1289. border: 1px solid var(--input-bgcolor) !important;
  1290. border-radius: 4px;
  1291.  
  1292. background-color: var(--lwt-sidebar-background-color, Field) !important;
  1293. color: var(--lwt-sidebar-text-color, FieldText) !important;
  1294. }
  1295. .sidebar-panel:not([lwt-sidebar]) #search-box {
  1296. --input-bgcolor: ThreeDShadow;
  1297. }
  1298.  
  1299. .sidebar-panel #search-box[focused="true"],
  1300. xul|search-textbox.tabsFilter[focused="true"] {
  1301. outline: 1px solid var(--input-bgcolor);
  1302. }
  1303. .sidebar-panel[lwt-sidebar] #search-box[focused="true"],
  1304. body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] {
  1305. --input-bgcolor: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
  1306. }
  1307. .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"],
  1308. body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
  1309. border-color: -moz-accent-color !important; /* Hard Coded */
  1310. outline-color: -moz-accent-color !important;
  1311. }
  1312.  
  1313. /*= PopupAutoComplete ========================================================*/
  1314. #PopupAutoComplete {
  1315. --panel-bgcolor: var(--arrowpanel-background, var(--in-content-button-background));
  1316.  
  1317. /* overwrite */
  1318. --panel-border-radius: 4px !important; /* Original: 0 */
  1319. --panel-border-color: var(
  1320. --arrowpanel-border-color,
  1321. var(--menu-border-color)
  1322. ) !important; /* Original: ThreeDShadow */
  1323.  
  1324. appearance: none !important;
  1325. background: transparent !important;
  1326. border: none !important;
  1327. clip-path: inset(0 round var(--panel-border-radius));
  1328. }
  1329.  
  1330. #PopupAutoComplete > richlistbox {
  1331. border-radius: var(--panel-border-radius) !important;
  1332. background-color: var(--panel-bgcolor) !important; /* Original: Field */
  1333. color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */
  1334. }
  1335. .autocomplete-richlistitem:hover {
  1336. background-color: var(--arrowpanel-dimmed) !important;
  1337. }
  1338.  
  1339. #PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
  1340. #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
  1341. #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
  1342. fill: GrayText !important;
  1343. }
  1344.  
  1345. #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
  1346. --panel-border-color: var(--panel-bgcolor);
  1347. color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */
  1348. background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */
  1349. border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */
  1350. }
  1351.  
  1352. #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover,
  1353. #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] {
  1354. background-color: var(
  1355. --arrowpanel-dimmed-further,
  1356. hsla(0, 0%, 80%, 0.5)
  1357. ) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */
  1358. }
  1359.  
  1360. /* Fully Dark Mode ************************************************************/
  1361. /*= Remove White Flash =======================================================*/
  1362. #tabbrowser-tabbox,
  1363. #tabbrowser-tabpanels,
  1364. browser[type="content-primary"],
  1365. browser[type="content"] > html {
  1366. background: var(--in-content-page-background) !important;
  1367. }
  1368.  
  1369. /*= Notification =============================================================*/
  1370. @-moz-document url("chrome://global/content/alerts/alert.xhtml")
  1371. {
  1372. /* Color */
  1373. :root {
  1374. --menu-color: #15141a;
  1375. --menu-background-color: #f9f9fb;
  1376. --menu-border-color: #cfcfd8;
  1377. --menuitem-hover-background-color: #e0e0e6;
  1378. }
  1379. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  1380. :root {
  1381. --menu-border-color: rgba(107, 107, 107, 0.3);
  1382. --menu-color: #fbfbfe;
  1383. --menu-background-color: #2b2a33;
  1384. --menuitem-hover-background-color: #52525e;
  1385. }
  1386. #alertSourceLabel {
  1387. color: rgb(5, 209, 241) !important;
  1388. }
  1389. }
  1390.  
  1391. /* line below removes background from the notification "window" on linux */
  1392. #alertNotification {
  1393. background: transparent !important;
  1394. }
  1395.  
  1396. #alertBox {
  1397. color: var(--menu-color) !important;
  1398. background-color: var(--menu-background-color) !important;
  1399. border-color: var(--menu-border-color) !important;
  1400. border-radius: 6px !important;
  1401. -moz-window-shadow: cliprounded !important;
  1402. }
  1403. #alertSettings {
  1404. fill: currentColor !important;
  1405. color: inherit !important;
  1406. border-radius: 0 !important;
  1407. margin-inline: 0 !important;
  1408. margin-bottom: -4px !important;
  1409. }
  1410. .close-icon,
  1411. #alertSettings {
  1412. background: transparent !important;
  1413. }
  1414. .close-icon:hover > .toolbarbutton-icon,
  1415. #alertSettings:is(:hover, [open]) > .button-box > .box-inherit {
  1416. background-color: var(--menuitem-hover-background-color, #e0e0e6) !important;
  1417. }
  1418.  
  1419. /* Shape */
  1420. .close-icon > .toolbarbutton-icon,
  1421. #alertSettings > .button-box > .box-inherit {
  1422. border-radius: 4px !important;
  1423. padding: 2px !important;
  1424. margin: 2px 2px -2px 0 !important;
  1425. }
  1426. #alertSettings > .button-box > .box-inherit {
  1427. margin: -4px 4px 3px 0 !important;
  1428. }
  1429. #alertSettings > .button-box > .box-inherit > .button-icon {
  1430. padding: 1px;
  1431. }
  1432. }
  1433.  
  1434. /*= Proton Commons ===========================================================*/
  1435. @-moz-document url("chrome://global/content/commonDialog.xhtml"),
  1436. url("chrome://pippki/content/editcacert.xhtml"),
  1437. url("chrome://pippki/content/deletecert.xhtml"),
  1438. url("chrome://pippki/content/exceptionDialog.xhtml"),
  1439. url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
  1440. url("chrome://global/content/appPicker.xhtml"),
  1441. url("chrome://browser/content/pageinfo/pageInfo.xhtml")
  1442. {
  1443. /*- Overwrite --------------------------------------------------------------*/
  1444. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  1445. :root {
  1446. --in-content-page-background: #42414d;
  1447. }
  1448. }
  1449.  
  1450. :root:not(:-moz-lwtheme),
  1451. :root[lwt-default-theme-in-dark-mode] {
  1452. --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;
  1453. --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important;
  1454. --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important;
  1455. --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important;
  1456. --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
  1457. --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
  1458. --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important;
  1459. }
  1460.  
  1461. /*- Dialog -----------------------------------------------------------------*/
  1462. #commonDialog,
  1463. #editCaCert,
  1464. #deleteCertificate,
  1465. #exceptiondialog,
  1466. #unknownContentType,
  1467. #app-picker,
  1468. #topBar, /* #topBar, #mainDeck: Page Info */
  1469. #mainDeck {
  1470. -moz-appearance: none !important; /* For Mac */
  1471. color: var(--in-content-page-color) !important;
  1472. background-color: var(--in-content-page-background) !important;
  1473. /* border-radius: 0 0 8px 8px !important; */
  1474. }
  1475.  
  1476. /*- Button -----------------------------------------------------------------*/
  1477. button {
  1478. -moz-appearance: none !important;
  1479. color: var(--in-content-button-text-color) !important;
  1480. background-color: var(--in-content-button-background) !important;
  1481. font: inherit;
  1482. font-size: 1em !important;
  1483. font-weight: 600 !important;
  1484. min-height: 32px !important;
  1485. border: 1px solid transparent !important; /* shows up in high-contrast mode */
  1486. border-radius: var(--in-content-button-border-radius) !important;
  1487. padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
  1488.  
  1489. min-height: 32px !important;
  1490. /* Use the same margin of other elements for the alignment */
  1491. margin-inline: 4px !important;
  1492. min-width: 6.3em !important;
  1493. }
  1494.  
  1495. /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
  1496. * the 1px border): */
  1497. button.medium {
  1498. padding: 6px 13px !important;
  1499. min-height: 28px !important;
  1500. font-size: 0.95em !important;
  1501. }
  1502. button.small {
  1503. padding: 5px 11px !important;
  1504. min-height: 24px !important;
  1505. font-size: 0.9em !important;
  1506. }
  1507.  
  1508. /* Remove margin added by button.css */
  1509. xul|button > .button-box > .button-text {
  1510. margin: 0 !important;
  1511. }
  1512.  
  1513. button:-moz-focusring,
  1514. xul|menulist:-moz-focusring,
  1515. xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
  1516. xul|radio[focused="true"]:-moz-focusring {
  1517. box-shadow: none !important;
  1518. outline: 2px solid var(--in-content-focus-outline-color) !important;
  1519. outline-offset: 2px !important;
  1520. }
  1521. button:not([disabled="true"]):hover {
  1522. background-color: var(--in-content-button-background-hover) !important;
  1523. color: var(--in-content-button-text-color-hover) !important;
  1524. border-color: transparent !important;
  1525. }
  1526.  
  1527. xul|button:not([disabled="true"]):hover:active,
  1528. xul|button[open],
  1529. xul|button[open]:hover,
  1530. xul|menulist[open="true"]:not([disabled="true"]) {
  1531. background-color: var(--in-content-button-background-active) !important;
  1532. }
  1533.  
  1534. xul|button[default] {
  1535. background-color: var(--in-content-primary-button-background) !important;
  1536. color: var(--in-content-primary-button-text-color) !important;
  1537. }
  1538. xul|button[default]:not([disabled="true"]):hover {
  1539. background-color: var(--in-content-primary-button-background-hover) !important;
  1540. color: var(--in-content-primary-button-text-color) !important;
  1541. }
  1542. xul|button[default]:not([disabled="true"]):hover:active {
  1543. background-color: var(--in-content-primary-button-background-active) !important;
  1544. }
  1545.  
  1546. xul|button[disabled="true"],
  1547. xul|menulist[disabled="true"] {
  1548. opacity: 0.4 !important;
  1549. }
  1550. xul|button:not([disabled="true"]):hover,
  1551. xul|menulist:not([disabled="true"]):hover {
  1552. background-color: var(--in-content-button-background-hover) !important;
  1553. color: var(--in-content-button-text-color-hover) !important;
  1554. border-color: transparent !important;
  1555. }
  1556.  
  1557. @media (prefers-contrast) {
  1558. xul|button[default]:not([disabled="true"]):hover {
  1559. border-color: currentColor !important;
  1560. }
  1561.  
  1562. button:focus {
  1563. color: var(--in-content-button-text-color) !important;
  1564. }
  1565.  
  1566. xul|button[default]:focus,
  1567. button.primary:focus {
  1568. color: var(--in-content-primary-button-text-color) !important;
  1569. }
  1570. }
  1571.  
  1572. /*- Radio Button -----------------------------------------------------------*/
  1573. xul|radio {
  1574. /* margin-inline-start: 0 !important; */
  1575. appearance: none !important;
  1576. }
  1577.  
  1578. xul|*.radio-check {
  1579. appearance: none !important;
  1580. width: 16px !important;
  1581. height: 16px !important;
  1582. padding: 0 !important;
  1583. border: 1px solid var(--in-content-box-border-color) !important;
  1584. border-radius: 100% !important;
  1585. margin-block: 2px !important; /* extend the vertical clicktarget */
  1586. margin-inline: 0 6px !important;
  1587. background-color: var(--in-content-button-background) !important;
  1588. background-position: center !important;
  1589. flex-shrink: 0 !important; /* avoid shrinking inside flex container */
  1590. }
  1591.  
  1592. xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
  1593. background-color: var(--in-content-button-background-hover) !important;
  1594. color: var(--in-content-button-text-color-hover) !important;
  1595. }
  1596.  
  1597. xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
  1598. background-color: var(--in-content-button-background-active) !important;
  1599. }
  1600.  
  1601. xul|*.radio-check[selected] {
  1602. -moz-context-properties: fill !important;
  1603. fill: currentColor !important;
  1604. color: var(--in-content-primary-button-text-color) !important;
  1605. background-color: var(--in-content-primary-button-background) !important;
  1606. background-image: url("chrome://global/skin/icons/radio.svg") !important;
  1607. border-color: transparent !important;
  1608.  
  1609. /* Style the button also when printing with "Print Backgrounds" unchecked */
  1610. color-adjust: exact !important;
  1611. }
  1612.  
  1613. xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
  1614. background-color: var(--in-content-primary-button-background-hover) !important;
  1615. color: var(--in-content-primary-button-text-color-hover) !important;
  1616. }
  1617.  
  1618. xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
  1619. background-color: var(--in-content-primary-button-background-active) !important;
  1620. }
  1621.  
  1622. xul|*.radio-label-box {
  1623. margin-inline: 0 8px !important;
  1624. padding-inline-start: 0 !important;
  1625. }
  1626.  
  1627. /* Disabled checkboxes, radios and labels */
  1628. xul|checkbox[disabled="true"],
  1629. xul|radio[disabled="true"],
  1630. xul|label[disabled="true"] {
  1631. color: inherit !important;
  1632. }
  1633.  
  1634. xul|checkbox[disabled="true"],
  1635. xul|radio[disabled="true"],
  1636. xul|label[disabled="true"] {
  1637. opacity: 0.5 !important;
  1638. }
  1639.  
  1640. /*- Check Box --------------------------------------------------------------*/
  1641. /* From checkbox.css */
  1642. checkbox {
  1643. appearance: none !important;
  1644. -moz-box-align: center !important;
  1645. margin: 4px 2px !important;
  1646. }
  1647.  
  1648. .checkbox-icon[src] {
  1649. margin-inline-end: 2px !important;
  1650. }
  1651. .checkbox-label {
  1652. margin: 1px 0 !important;
  1653. }
  1654.  
  1655. checkbox[disabled="true"] {
  1656. opacity: 0.4 !important;
  1657. }
  1658.  
  1659. .checkbox-check {
  1660. appearance: none !important;
  1661. color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
  1662. background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
  1663. border: 1px solid currentColor !important;
  1664. border-radius: 2px !important;
  1665. margin-inline-end: 6px !important;
  1666. }
  1667.  
  1668. .checkbox-check {
  1669. height: 16px !important;
  1670. width: 16px !important;
  1671. }
  1672.  
  1673. checkbox:not([disabled="true"]):hover > .checkbox-check {
  1674. background-color: var(
  1675. --checkbox-unchecked-hover-bgcolor,
  1676. color-mix(in srgb, -moz-accent-color 4%, Field)
  1677. ) !important;
  1678. }
  1679.  
  1680. checkbox:not([disabled="true"]):hover:active > .checkbox-check {
  1681. background-color: var(
  1682. --checkbox-unchecked-active-bgcolor,
  1683. color-mix(in srgb, -moz-accent-color 8%, Field)
  1684. ) !important;
  1685. }
  1686.  
  1687. .checkbox-check[checked] {
  1688. border-color: var(--checkbox-checked-border-color, transparent) !important;
  1689. background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
  1690. background-image: url("chrome://global/skin/icons/check.svg") !important;
  1691. background-position: center !important;
  1692. background-repeat: no-repeat !important;
  1693. -moz-context-properties: fill !important;
  1694. fill: currentColor !important;
  1695. color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
  1696. /* Style the button also when printing with "Print Backgrounds" unchecked */
  1697. color-adjust: exact !important;
  1698. }
  1699.  
  1700. checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
  1701. background-color: var(
  1702. --checkbox-checked-hover-bgcolor,
  1703. color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
  1704. ) !important;
  1705. }
  1706.  
  1707. checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
  1708. background-color: var(
  1709. --checkbox-checked-active-bgcolor,
  1710. color-mix(in srgb, currentColor 25%, -moz-accent-color)
  1711. ) !important;
  1712. }
  1713.  
  1714. checkbox:-moz-focusring > .checkbox-check {
  1715. outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
  1716. outline-offset: var(--focus-outline-offset, 2px) !important;
  1717. }
  1718.  
  1719. @media (prefers-contrast) {
  1720. checkbox:not([disabled="true"]):hover > .checkbox-check {
  1721. /* color will set the border-color on the check due to how HCM works for in-content pages. */
  1722. color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
  1723. }
  1724.  
  1725. .checkbox-check[checked] {
  1726. color: var(--checkbox-checked-border-color, currentColor) !important;
  1727. fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
  1728. }
  1729.  
  1730. checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
  1731. checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
  1732. color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
  1733. fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
  1734. }
  1735. }
  1736.  
  1737. /* From common.css */
  1738. xul|*.checkbox-check {
  1739. margin-block: 2px !important;
  1740. }
  1741. xul|richlistitem > xul|*.checkbox-check {
  1742. margin: 3px 6px !important;
  1743. }
  1744.  
  1745. /*- Menulist ---------------------------------------------------------------*/
  1746. /* From mulist.css */
  1747. xul|menulist {
  1748. appearance: none !important;
  1749. background-color: var(--in-content-button-background, ButtonFace) !important;
  1750. color: var(--in-content-button-text-color, ButtonText) !important;
  1751. border-radius: 4px !important;
  1752. padding-block: 4px !important;
  1753. padding-inline: 12px 8px !important;
  1754. margin: 5px 2px 3px !important;
  1755. }
  1756.  
  1757. xul|menulist[size="medium"] {
  1758. padding-block: 6px !important;
  1759. padding-inline: 16px 10px !important;
  1760. }
  1761.  
  1762. xul|menulist[size="large"] {
  1763. padding-block: 8px !important;
  1764. padding-inline: 16px 12px !important;
  1765. }
  1766.  
  1767. xul|menulist:hover {
  1768. background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
  1769. }
  1770.  
  1771. xul|menulist:hover:active {
  1772. background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
  1773. }
  1774.  
  1775. xul|menulist:-moz-focusring {
  1776. outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
  1777. outline-offset: var(--focus-outline-offset, 2px) !important;
  1778. }
  1779.  
  1780. #label-box {
  1781. -moz-box-align: center !important;
  1782. -moz-box-pack: center !important;
  1783. font-weight: 600 !important;
  1784. }
  1785.  
  1786. dropmarker {
  1787. display: -moz-box !important;
  1788. appearance: none !important;
  1789. width: 12px !important;
  1790. height: 12px !important;
  1791. }
  1792.  
  1793. /* dropmarker::part(icon)
  1794. * ::part is not apply chrome
  1795. */
  1796. dropmarker[exportparts="icon: dropmarker-icon"] {
  1797. list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
  1798. -moz-context-properties: fill !important;
  1799. fill: currentColor !important;
  1800. }
  1801.  
  1802. #highlightable-label:not([highlightable="true"]),
  1803. #label[highlightable="true"] {
  1804. display: none !important;
  1805. }
  1806.  
  1807. xul|menuitem > label:not(.menu-text) {
  1808. margin: 0 3px !important;
  1809. }
  1810.  
  1811. /* From common.css */
  1812. xul|menulist > xul|menupopup {
  1813. appearance: none !important;
  1814.  
  1815. /* Reset native styles on Windows and macOS */
  1816. border: none !important;
  1817. background-color: transparent !important;
  1818.  
  1819. --panel-border-color: var(--in-content-box-border-color) !important;
  1820. --panel-border-radius: 2px !important;
  1821. --panel-background: var(--in-content-box-background) !important;
  1822. --panel-color: var(--in-content-text-color) !important;
  1823. --panel-padding: 0 !important;
  1824. }
  1825.  
  1826. xul|menulist > xul|menupopup xul|menu,
  1827. xul|menulist > xul|menupopup xul|menuitem {
  1828. appearance: none !important;
  1829. font-size: 1em !important;
  1830. padding-block: 0.2em !important;
  1831. padding-inline: 10px 30px !important;
  1832. }
  1833.  
  1834. xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
  1835. xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
  1836. color: var(--in-content-item-hover-text) !important;
  1837. background-color: var(--in-content-item-hover) !important;
  1838. }
  1839.  
  1840. xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
  1841. xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
  1842. color: var(--in-content-item-selected-text) !important;
  1843. background-color: var(--in-content-item-selected) !important;
  1844. }
  1845.  
  1846. xul|menulist > xul|menupopup > xul|menu[disabled="true"],
  1847. xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
  1848. color: #999 !important;
  1849. /* override the [_moz-menuactive="true"] background color from
  1850. global/menu.css */
  1851. background-color: transparent !important;
  1852. }
  1853.  
  1854. xul|menulist > xul|menupopup xul|menuseparator {
  1855. appearance: none !important;
  1856. margin: 0 !important;
  1857. padding: 0 !important;
  1858. border-top: 1px solid var(--in-content-box-border-color) !important;
  1859. border-bottom: none !important;
  1860. }
  1861.  
  1862. xul|menulist::part(dropmarker) {
  1863. margin-block: 1px !important;
  1864. }
  1865.  
  1866. /* Override menulist.css */
  1867. xul|menulist[disabled="true"] {
  1868. background-color: var(--in-content-button-background) !important;
  1869. }
  1870.  
  1871. xul|menulist:-moz-focusring > xul|*.menulist-label-box {
  1872. outline: none !important;
  1873. }
  1874.  
  1875. /*- List Boxes -------------------------------------------------------------*/
  1876. html|select[size][multiple],
  1877. xul|listheader,
  1878. xul|richlistbox {
  1879. appearance: none !important;
  1880. margin-inline: 0 !important;
  1881. background-color: var(--in-content-box-background) !important;
  1882. border: 1px solid var(--in-content-box-border-color) !important;
  1883. border-radius: 4px !important;
  1884. color: var(--in-content-text-color) !important;
  1885. }
  1886.  
  1887. xul|listheader {
  1888. border-bottom: none !important;
  1889. border-bottom-left-radius: 0 !important;
  1890. border-bottom-right-radius: 0 !important;
  1891. padding-bottom: 1px !important;
  1892. box-shadow: inset 0 -1px var(--in-content-table-border-color) !important;
  1893. overflow: clip !important; /* Clip border-radius */
  1894. }
  1895.  
  1896. xul|listheader + xul|richlistbox {
  1897. margin-top: 0 !important;
  1898. border-top: none !important;
  1899. border-top-left-radius: 0 !important;
  1900. border-top-right-radius: 0 !important;
  1901. }
  1902.  
  1903. html|select[size][multiple] > html|option,
  1904. xul|treechildren::-moz-tree-row {
  1905. padding: 0.3em inherit !important;
  1906. margin: 0 !important;
  1907. border: none !important;
  1908. border-radius: 0 !important;
  1909. background-image: none !important;
  1910. }
  1911.  
  1912. xul|treechildren::-moz-tree-row(multicol, odd) {
  1913. background-color: var(--in-content-box-background-odd);
  1914. }
  1915.  
  1916. html|select[size][multiple] > html|option:hover,
  1917. xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover,
  1918. xul|treechildren::-moz-tree-row(hover) {
  1919. background-color: var(--in-content-item-hover) !important;
  1920. color: var(--in-content-item-hover-text) !important;
  1921. }
  1922.  
  1923. xul|richlistbox > xul|richlistitem[selected],
  1924. xul|treechildren::-moz-tree-row(selected) {
  1925. background-color: var(--in-content-item-selected) !important;
  1926. color: var(--in-content-item-selected-text) !important;
  1927. }
  1928.  
  1929. xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
  1930. /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
  1931. --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important;
  1932. --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important;
  1933. --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important;
  1934. --in-content-button-text-color: var(--in-content-item-selected-text) !important;
  1935. --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important;
  1936. --in-content-focus-outline-color: var(--in-content-item-selected-text) !important;
  1937. }
  1938.  
  1939. xul|richlistitem[selected] xul|menulist:focus-visible {
  1940. outline-offset: -2px !important;
  1941. }
  1942.  
  1943. /* Use a 2px border so that selected row highlight is still visible behind
  1944. an existing high-contrast border that uses the background color */
  1945. @media (prefers-contrast) {
  1946. xul|treechildren::-moz-tree-row(selected) {
  1947. border: 2px solid currentColor !important;
  1948. border-radius: 4px !important;
  1949. }
  1950. }
  1951.  
  1952. xul|panel[type="autocomplete-richlistbox"] {
  1953. background-color: var(--in-content-box-background) !important;
  1954. border: 1px solid var(--in-content-box-border-color) !important;
  1955. color: var(--in-content-text-color) !important;
  1956. }
  1957.  
  1958. /*- Each OS ----------------------------------------------------------------*/
  1959. @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), /* Legacy - v99 */
  1960. (-moz-platform: windows-win7), (-moz-platform: windows-win8), (-moz-platform: windows-win10) {
  1961. xul|checkbox,
  1962. xul|radio {
  1963. padding-inline-start: 0 !important;
  1964. }
  1965.  
  1966. /* Override menulist.css */
  1967. xul|menulist[disabled="true"] {
  1968. background-color: var(--in-content-button-background) !important;
  1969. }
  1970.  
  1971. xul|menulist:-moz-focusring > xul|*.menulist-label-box {
  1972. outline: none !important;
  1973. }
  1974. }
  1975.  
  1976. @media (-moz-gtk-csd-available) {
  1977. /* Overriding appearance also avoids incorrect selection background color with light text. */
  1978. xul|button > xul|*.button-box,
  1979. xul|menulist::part(label-box),
  1980. xul|*.radio-label-box,
  1981. xul|*.checkbox-label-box {
  1982. appearance: none !important;
  1983. }
  1984.  
  1985. xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
  1986. appearance: none !important;
  1987. }
  1988. xul|menulist {
  1989. font-size: inherit !important;
  1990. }
  1991. xul|menulist::part(dropmarker) {
  1992. display: -moz-box;
  1993. margin-block: 6px !important;
  1994. }
  1995. xul|menulist:-moz-focusring::part(label-box) {
  1996. outline: none !important;
  1997. }
  1998. }
  1999.  
  2000. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  2001. xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
  2002. xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
  2003. display: none !important;
  2004. }
  2005.  
  2006. xul|menulist::part(dropmarker) {
  2007. display: -moz-box !important;
  2008. margin-block: 1px !important;
  2009. }
  2010.  
  2011. xul|menulist > xul|menupopup xul|menu,
  2012. xul|menulist > xul|menupopup xul|menuitem {
  2013. padding-inline-end: 34px !important;
  2014. }
  2015.  
  2016. xul|*.checkbox-icon,
  2017. xul|*.radio-icon {
  2018. margin-inline-end: 0 !important;
  2019. }
  2020.  
  2021. xul|*.text-link:-moz-focusring {
  2022. box-shadow: none !important;
  2023. }
  2024. }
  2025. }
  2026.  
  2027. /*= Delete Cert ==============================================================*/
  2028. @-moz-document url("chrome://pippki/content/deletecert.xhtml")
  2029. {
  2030. #certlist {
  2031. border: 1px solid var(--in-content-table-border-color) !important;
  2032. border-radius: 4px !important;
  2033. }
  2034. }
  2035.  
  2036. /*= Cert Exeption Dialog =====================================================*/
  2037. @-moz-document url("chrome://pippki/content/exceptionDialog.xhtml")
  2038. {
  2039. #locationTextBox {
  2040. appearance: none !important;
  2041. border: 1px solid var(--in-content-box-border-color) !important;
  2042. border-radius: 4px !important;
  2043. color: inherit !important;
  2044. background-color: var(--in-content-box-background) !important;
  2045.  
  2046. font-family: inherit !important;
  2047. font-size: inherit !important;
  2048. padding: 8px !important;
  2049. margin: 2px 4px !important;
  2050. }
  2051. #locationTextBox:focus {
  2052. border-color: transparent !important;
  2053. outline: 2px solid var(--in-content-focus-outline-color) !important;
  2054. outline-offset: -1px !important; /* Prevents antialising around the corners */
  2055. }
  2056. #locationTextBox:-moz-ui-invalid {
  2057. border-color: transparent !important;
  2058. outline: 2px solid var(--in-content-border-invalid) !important;
  2059. outline-offset: -1px !important; /* Prevents antialising around the corners */
  2060. }
  2061. #locationTextBox:disabled {
  2062. opacity: 0.4 !important;
  2063. }
  2064.  
  2065. #exceptiondialog:first-child > hbox > vbox:not([flex="1"]) {
  2066. width: 48px !important;
  2067. height: 48px !important;
  2068. background-image: url("chrome://global/skin/icons/warning.svg") !important;
  2069. background-size: 48px !important;
  2070. background-repeat: no-repeat !important;
  2071.  
  2072. -moz-context-properties: fill !important;
  2073. fill: currentColor !important;
  2074. }
  2075. #exceptiondialog:first-child > hbox > vbox > image {
  2076. display: none !important;
  2077. }
  2078. }
  2079.  
  2080. /*= Page Info ================================================================*/
  2081. @-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml")
  2082. {
  2083. :root {
  2084. --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
  2085. }
  2086.  
  2087. #viewGroup > radio {
  2088. border-radius: 8px !important;
  2089. padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
  2090. margin: 4px !important;
  2091. }
  2092. #viewGroup > radio:hover {
  2093. background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
  2094. }
  2095. #viewGroup > radio[selected="true"] {
  2096. color: var(--in-content-button-text-color) !important; /* SelectedItemText */
  2097. background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
  2098. }
  2099. #viewGroup > radio {
  2100. color: var(--in-content-deemphasized-text) !important; /* FieldText */
  2101. }
  2102.  
  2103. #viewGroup > radio {
  2104. list-style-image: none !important;
  2105. background-image: var(--viewgroup-image) !important;
  2106. background-repeat: no-repeat;
  2107. background-position: top var(--in-content-button-vertical-padding) center;
  2108. background-size: 32px !important;
  2109.  
  2110. -moz-context-properties: fill !important;
  2111. fill: currentColor !important;
  2112. }
  2113. #generalTab {
  2114. --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
  2115. }
  2116. #mediaTab {
  2117. --viewgroup-image: url(chrome://browser/skin/canvas.svg);
  2118. }
  2119. #permTab {
  2120. --viewgroup-image: url(chrome://browser/skin/permissions.svg);
  2121. }
  2122. #securityTab {
  2123. --viewgroup-image: url(chrome://global/skin/icons/security.svg);
  2124. }
  2125.  
  2126. #viewGroup > radio > .radio-label-box {
  2127. /* Overwrite */
  2128. margin: 0 !important;
  2129. padding: 0 6 !important;
  2130. }
  2131. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  2132. #viewGroup > radio > .radio-label-box {
  2133. padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */
  2134. }
  2135. }
  2136.  
  2137. #mainDeck input {
  2138. color: var(--in-content-page-color) !important;
  2139. }
  2140.  
  2141. #permList {
  2142. -moz-appearance: none !important;
  2143. color: var(--in-content-page-color) !important;
  2144. background-color: var(--in-content-box-background) !important;
  2145. }
  2146. .permission:hover {
  2147. color: var(--in-content-text-color) !important;
  2148. background-color: var(--in-content-button-background-hover) !important;
  2149. }
  2150. .permission radio[disabled] {
  2151. color: var(--in-content-deemphasized-text) !important;
  2152. }
  2153.  
  2154. treecols {
  2155. -moz-appearance: none !important;
  2156. background: var(--in-content-table-header-background) !important;
  2157. color: var(--in-content-table-header-color) !important;
  2158. }
  2159. treecols > treecol,
  2160. treecols > treecolpicker.treecol-image {
  2161. -moz-appearance: none !important;
  2162. color: var(--in-content-table-header-color) !important;
  2163. background: var(--in-content-table-header-background) !important;
  2164. border: 1px solid var(--in-content-table-border-color) !important;
  2165. padding: 4px !important;
  2166. border-spacing: 0;
  2167.  
  2168. text-align: center !important;
  2169. }
  2170.  
  2171. tree,
  2172. treechildren::-moz-tree-row {
  2173. -moz-appearance: none !important;
  2174. color: var(--in-content-text-color) !important;
  2175. background-color: var(--in-content-table-background) !important;
  2176. border: 1px solid var(--in-content-table-border-color) !important;
  2177. }
  2178.  
  2179. treechildren::-moz-tree-row(odd) {
  2180. background-color: var(--in-content-box-background-odd) !important;
  2181. }
  2182.  
  2183. treechildren::-moz-tree-row(hover) {
  2184. color: var(--in-content-item-hover-text) !important;
  2185. background-color: var(--in-content-item-hover) !important;
  2186. }
  2187. treechildren::-moz-tree-row(selected) {
  2188. background-color: var(--in-content-item-selected) !important;
  2189. }
  2190.  
  2191. treechildren::-moz-tree-cell {
  2192. border-inline: 1px solid var(--in-content-table-border-color) !important;
  2193. border-spacing: 0 !important;
  2194. padding: 4px !important;
  2195. margin: 0 !important;
  2196. }
  2197. treechildren::-moz-tree-cell-text(hover) {
  2198. color: var(--in-content-item-hover-text) !important;
  2199. }
  2200. treechildren::-moz-tree-cell-text(selected) {
  2201. font-weight: 600 !important;
  2202. color: var(--in-content-item-selected-text) !important;
  2203. }
  2204.  
  2205. #imagecontainerbox {
  2206. background-color: var(--in-content-box-background) !important;
  2207. }
  2208.  
  2209. #metatree,
  2210. #imagetree,
  2211. #imagecontainerbox,
  2212. #permList {
  2213. border-radius: 4px !important;
  2214. }
  2215. #metatree,
  2216. #imagetree {
  2217. overflow: hidden !important;
  2218. }
  2219.  
  2220. #topBar,
  2221. #imagecontainerbox,
  2222. #permList {
  2223. border-color: var(--in-content-table-border-color) !important;
  2224. }
  2225. }
  2226.  
  2227. /*= Library Popup ============================================================*/
  2228. @-moz-document url("chrome://browser/content/places/places.xhtml")
  2229. {
  2230. @media (-moz-gtk-csd-available) {
  2231. :root {
  2232. --organizer-color: -moz-DialogText;
  2233. --organizer-deemphasized-color: GrayText;
  2234.  
  2235. --organizer-toolbar-background: -moz-Dialog;
  2236. --organizer-pane-background: -moz-Dialog;
  2237. --organizer-content-background: -moz-Dialog;
  2238.  
  2239. --organizer-hover-background: SelectedItem;
  2240. --organizer-hover-color: SelectedItemText;
  2241. --organizer-selected-background: SelectedItem;
  2242. --organizer-selected-color: SelectedItemText;
  2243. --organizer-outline-color: SelectedItem;
  2244.  
  2245. --organizer-separator-color: ThreeDDarkShadow;
  2246. --organizer-border-color: ThreeDShadow;
  2247.  
  2248. --organizer-toolbar-field-background: Field;
  2249. --organizer-toolbar-field-background-focused: Field;
  2250. --organizer-toolbar-field-border-color: ThreeDShadow;
  2251. --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
  2252. --organizer-toolbar-field-focus-box-shadow: unset;
  2253. --organizer-pane-field-border-color: ThreeDShadow;
  2254. }
  2255.  
  2256. @media not all and (prefers-contrast) {
  2257. :root {
  2258. --organizer-color: var(--in-content-page-color);
  2259. --organizer-deemphasized-color: var(--in-content-deemphasized-text);
  2260.  
  2261. --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
  2262. --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
  2263. --organizer-content-background: var(--in-content-page-background);
  2264.  
  2265. --organizer-hover-background: var(--in-content-button-background-hover);
  2266. --organizer-hover-color: var(--organizer-color);
  2267. --organizer-selected-background: var(--in-content-button-background-active);
  2268. --organizer-selected-color: var(--organizer-color);
  2269. --organizer-outline-color: var(--in-content-primary-button-background);
  2270.  
  2271. --organizer-separator-color: var(--organizer-pane-field-border-color);
  2272. --organizer-border-color: var(--in-content-border-color);
  2273.  
  2274. --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
  2275. --organizer-toolbar-field-background-focused: Field;
  2276. --organizer-toolbar-field-border-color: transparent;
  2277. --organizer-toolbar-field-focus-border-color: color-mix(
  2278. in srgb,
  2279. var(--organizer-outline-color) 50%,
  2280. transparent
  2281. );
  2282. --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
  2283. --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
  2284. }
  2285.  
  2286. @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
  2287. :root {
  2288. --organizer-color: rgb(251, 251, 254);
  2289. --organizer-deemphasized-color: rgb(191, 191, 201);
  2290.  
  2291. --organizer-toolbar-background: rgb(43, 42, 51);
  2292. --organizer-pane-background: rgb(35, 34, 43);
  2293. --organizer-content-background: rgb(28, 27, 34);
  2294.  
  2295. --organizer-hover-background: rgb(82, 82, 94);
  2296. --organizer-selected-background: rgb(91, 91, 102);
  2297. --organizer-outline-color: rgb(0, 221, 255);
  2298.  
  2299. --organizer-toolbar-field-background: var(--in-content-page-background);
  2300. --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
  2301. scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
  2302. }
  2303. }
  2304. }
  2305.  
  2306. /*- Toolbar & Menus ----------------------------------------------------*/
  2307. #placesToolbar {
  2308. appearance: none !important;
  2309. background-color: var(--organizer-toolbar-background) !important;
  2310. color: var(--organizer-color) !important;
  2311. border-bottom: 1px solid var(--organizer-border-color) !important;
  2312. padding: 4px !important;
  2313. padding-inline-end: 6px !important;
  2314. }
  2315.  
  2316. #placesToolbar > toolbarbutton {
  2317. appearance: none !important;
  2318. padding: 5px !important;
  2319. border-radius: 4px !important;
  2320. }
  2321.  
  2322. #placesToolbar > toolbarbutton[disabled] {
  2323. opacity: 0.6 !important;
  2324. }
  2325.  
  2326. #placesToolbar > toolbarbutton:not([disabled]):hover {
  2327. background-color: var(--organizer-hover-background) !important;
  2328. color: var(--organizer-hover-color) !important;
  2329. }
  2330.  
  2331. #placesToolbar > toolbarbutton:not([disabled]):hover:active {
  2332. background-color: var(--organizer-selected-background) !important;
  2333. }
  2334.  
  2335. #placesToolbar > toolbarbutton > .toolbarbutton-icon,
  2336. #placesMenu > menu > image,
  2337. #placesMenu > menu > .menubar-text {
  2338. -moz-context-properties: fill !important;
  2339. fill: currentColor !important;
  2340. }
  2341.  
  2342. #placesMenu {
  2343. margin-inline-start: 6px !important;
  2344. }
  2345.  
  2346. #placesMenu > menu {
  2347. appearance: none !important;
  2348. color: var(--organizer-color) !important;
  2349. border-radius: 4px !important;
  2350. padding-block: 5px !important;
  2351. padding-inline-start: 5px !important;
  2352. margin-inline-end: 2px !important;
  2353. }
  2354.  
  2355. #placesMenu > menu[_moz-menuactive="true"],
  2356. #placesMenu > menu:hover {
  2357. background-color: var(--organizer-hover-background) !important;
  2358. color: var(--organizer-hover-color) !important;
  2359. }
  2360.  
  2361. #placesMenu > menu:hover:active,
  2362. #placesMenu > menu[open] {
  2363. background-color: var(--organizer-selected-background) !important;
  2364. color: var(--organizer-selected-color) !important;
  2365. }
  2366.  
  2367. #placesMenu > menu > .menubar-text {
  2368. margin-block: 0 !important; /* override menu.css */
  2369. padding-inline-end: 4px !important;
  2370. }
  2371.  
  2372. /*- Search Bar & Input ---------------------------------------------------*/
  2373. #searchFilter,
  2374. #detailsPane html|input {
  2375. appearance: none !important;
  2376. background-color: var(--organizer-toolbar-field-background) !important;
  2377. color: var(--organizer-color) !important;
  2378. border: 1px solid var(--organizer-toolbar-field-border-color) !important;
  2379. border-radius: 4px !important;
  2380. margin: 0 !important;
  2381. padding-block: 2px !important;
  2382. min-height: 24px !important;
  2383. }
  2384.  
  2385. #searchFilter[focused] {
  2386. box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
  2387. background-color: var(--organizer-toolbar-field-background-focused) !important;
  2388. border-color: transparent !important;
  2389. outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
  2390. outline-offset: -2px !important;
  2391. }
  2392.  
  2393. /*- Sidebar & Splitter ---------------------------------------------------*/
  2394. #placesList {
  2395. background-color: var(--organizer-pane-background) !important;
  2396. }
  2397.  
  2398. #placesView > splitter {
  2399. border: 0 !important;
  2400. border-inline-end: 1px solid var(--organizer-border-color) !important;
  2401. min-width: 0 !important;
  2402. width: 3px !important;
  2403. background-color: transparent !important;
  2404. margin-inline-start: -3px !important;
  2405. position: relative !important;
  2406. }
  2407.  
  2408. /*- Downloads Pane -------------------------------------------------------*/
  2409. #downloadsRichListBox {
  2410. color: var(--organizer-color) !important;
  2411. background-color: var(--organizer-content-background) !important;
  2412. }
  2413.  
  2414. #clearDownloadsButton:focus-visible {
  2415. outline: 2px solid var(--organizer-outline-color) !important;
  2416. }
  2417.  
  2418. richlistitem[selected="true"],
  2419. richlistitem:hover {
  2420. background-color: var(--organizer-hover-background) !important;
  2421. color: var(--organizer-color) !important;
  2422. }
  2423.  
  2424. richlistbox:where(:focus) > richlistitem[selected="true"] {
  2425. background-color: var(--organizer-selected-background) !important;
  2426. }
  2427.  
  2428. /*- Tree -----------------------------------------------------------------*/
  2429. #contentView treecol {
  2430. /* Use box-shadow to draw a bottom border instead of border-bottom
  2431. * because otherwise the items on contentView won't be perfectly
  2432. * aligned with the items on the sidebar. */
  2433. box-shadow: inset 0 -1px var(--organizer-border-color) !important;
  2434. }
  2435.  
  2436. tree {
  2437. background-color: var(--organizer-content-background) !important;
  2438. color: var(--organizer-color) !important;
  2439. }
  2440.  
  2441. treecol:not([hideheader="true"]),
  2442. treecolpicker {
  2443. appearance: none !important;
  2444. border: none !important;
  2445. background-color: var(--in-content-button-background) !important;
  2446. color: var(--organizer-color, inherit) !important;
  2447. padding: 5px 10px !important;
  2448. }
  2449.  
  2450. treecol:not([hideheader="true"], [sortable="false"]):hover,
  2451. treecolpicker:hover {
  2452. background-color: var(--organizer-hover-background) !important;
  2453. color: var(--organizer-color) !important;
  2454. }
  2455.  
  2456. treecol:not([hideheader="true"], [sortable="false"]):hover:active,
  2457. treecolpicker:hover:active {
  2458. background-color: var(--organizer-selected-background) !important;
  2459. }
  2460.  
  2461. treecol:not([hideheader="true"], :first-child),
  2462. treecolpicker {
  2463. padding-left: 10px !important;
  2464. border-inline-start-width: 1px !important;
  2465. border-inline-start-style: solid !important;
  2466. border-image: linear-gradient(
  2467. transparent 0%,
  2468. transparent 20%,
  2469. var(--organizer-border-color) 20%,
  2470. var(--organizer-border-color) 80%,
  2471. transparent 80%,
  2472. transparent 100%
  2473. )
  2474. 1 1 !important;
  2475. }
  2476.  
  2477. treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
  2478. fill: currentColor !important;
  2479. width: 18px !important;
  2480. height: 18px !important;
  2481. }
  2482.  
  2483. treechildren::-moz-tree-row {
  2484. background-color: transparent !important;
  2485. }
  2486.  
  2487. treechildren::-moz-tree-row(hover) {
  2488. background-color: var(--organizer-hover-background) !important;
  2489. }
  2490.  
  2491. treechildren::-moz-tree-row(selected) {
  2492. background-color: var(--organizer-selected-background) !important;
  2493. color: var(--organizer-selected-color) !important;
  2494. border: 1px solid transparent !important;
  2495. }
  2496.  
  2497. treechildren::-moz-tree-image(hover),
  2498. treechildren::-moz-tree-twisty(hover),
  2499. treechildren::-moz-tree-cell-text(hover) {
  2500. color: var(--organizer-hover-color) !important;
  2501. }
  2502.  
  2503. treechildren::-moz-tree-image(selected),
  2504. treechildren::-moz-tree-twisty(selected),
  2505. treechildren::-moz-tree-cell-text(selected) {
  2506. color: var(--organizer-selected-color) !important;
  2507. }
  2508.  
  2509. treechildren::-moz-tree-separator {
  2510. height: 1px !important;
  2511. border-color: var(--organizer-separator-color) !important;
  2512. }
  2513.  
  2514. treechildren::-moz-tree-separator(hover) {
  2515. border-color: var(--organizer-hover-color) !important;
  2516. }
  2517.  
  2518. treechildren::-moz-tree-separator(selected) {
  2519. border-color: var(--organizer-selected-color) !important;
  2520. }
  2521.  
  2522. /*- Info Box -------------------------------------------------------------*/
  2523. #detailsPane {
  2524. background-color: var(--organizer-pane-background) !important;
  2525. color: var(--organizer-color) !important;
  2526. padding: 5px !important;
  2527. border-top: 1px solid var(--organizer-border-color) !important;
  2528. }
  2529.  
  2530. #editBookmarkPanelRows .expander-up,
  2531. #editBookmarkPanelRows .expander-down {
  2532. appearance: none !important;
  2533. min-width: 0 !important;
  2534. padding: 5px !important;
  2535. margin: 0 !important;
  2536. margin-inline-end: 4px !important;
  2537. border: 1px solid var(--organizer-pane-field-border-color) !important;
  2538. border-radius: 4px !important;
  2539. color: var(--organizer-color) !important;
  2540. background-color: var(--organizer-content-background) !important;
  2541. list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
  2542. -moz-context-properties: fill !important;
  2543. fill: currentColor !important;
  2544. }
  2545.  
  2546. #editBookmarkPanelRows .expander-up:hover,
  2547. #editBookmarkPanelRows .expander-down:hover {
  2548. background-color: var(--organizer-hover-background) !important;
  2549. color: var(--organizer-hover-color) !important;
  2550. }
  2551.  
  2552. #editBookmarkPanelRows .expander-up:hover:active,
  2553. #editBookmarkPanelRows .expander-down:hover:active {
  2554. background-color: var(--organizer-selected-background) !important;
  2555. color: var(--organizer-selected-color) !important;
  2556. }
  2557.  
  2558. #editBookmarkPanelRows .expander-up:focus-visible,
  2559. #editBookmarkPanelRows .expander-down:focus-visible {
  2560. outline: 2px solid var(--organizer-outline-color) !important;
  2561. outline-offset: -1px !important;
  2562. }
  2563.  
  2564. #editBookmarkPanelRows .expander-up {
  2565. list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
  2566. }
  2567.  
  2568. #editBookmarkPanelRows .expander-up > .button-box,
  2569. #editBookmarkPanelRows .expander-down > .button-box {
  2570. padding: 0 !important;
  2571. }
  2572.  
  2573. #places input {
  2574. border: 1px solid var(--organizer-pane-field-border-color) !important;
  2575. border-radius: 4px !important;
  2576. background-color: var(--organizer-content-background) !important;
  2577. color: var(--organizer-color) !important;
  2578. min-height: 20px !important;
  2579. padding-inline: 4px !important;
  2580. }
  2581.  
  2582. #places input:focus {
  2583. outline: 2px solid var(--organizer-outline-color) !important;
  2584. outline-offset: -1px !important;
  2585. }
  2586.  
  2587. #places input:not(:read-write):focus {
  2588. outline: none !important;
  2589. }
  2590.  
  2591. .caption-label {
  2592. margin-inline-start: 8px !important;
  2593. color: var(--organizer-deemphasized-color) !important;
  2594. }
  2595.  
  2596. #editBMPanel_tagsSelectorRow > richlistbox {
  2597. appearance: none !important;
  2598. color: var(--organizer-color) !important;
  2599. background-color: var(--organizer-content-background) !important;
  2600. border: 1px solid var(--organizer-border-color) !important;
  2601. border-radius: 4px !important;
  2602. }
  2603.  
  2604. #editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
  2605. border: 1px solid transparent !important;
  2606. }
  2607.  
  2608. #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
  2609. background-color: var(--organizer-hover-background) !important;
  2610. color: var(--organizer-hover-color) !important;
  2611. }
  2612.  
  2613. #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
  2614. background-color: var(--organizer-selected-background) !important;
  2615. color: var(--organizer-selected-color) !important;
  2616. }
  2617. }
  2618. }
  2619.  
  2620. /** Decoration ****************************************************************/
  2621. @media (prefers-reduced-motion: no-preference) {
  2622. /*= URL, Search Bar ========================================================*/
  2623. #urlbar:hover:not([focused="true"]) > #urlbar-background,
  2624. #searchbar:hover:not(:focus-within) {
  2625. --toolbar-field-border-color: var(--toolbar-field-focus-border-color);
  2626. }
  2627.  
  2628. /*= Other Fields ===========================================================*/
  2629. /* Sidebar */
  2630. .sidebar-panel[lwt-sidebar] #search-box:hover,
  2631. body[lwt-sidebar] xul|search-textbox.tabsFilter:hover {
  2632. border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important;
  2633. }
  2634. .sidebar-panel:not([lwt-sidebar]) #search-box:hover,
  2635. body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover {
  2636. border-color: -moz-accent-color !important;
  2637. }
  2638.  
  2639. /* Others */
  2640. #editBMPanel_namePicker:hover,
  2641. #editBMPanel_tagsField:hover,
  2642. .findbar-container .findbar-textbox:hover {
  2643. --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent);
  2644. }
  2645.  
  2646. /*= Downloads Panel ========================================================*/
  2647. /* Accent Color for downloaded item */
  2648. #downloadsListBox .download-state[exists] .downloadDetails {
  2649. color: var(--button-primary-bgcolor);
  2650. }
  2651. #downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
  2652. color: var(--button-primary-hover-bgcolor);
  2653. }
  2654.  
  2655. /* File moved or missing */
  2656. #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget {
  2657. text-decoration: line-through;
  2658. text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
  2659. }
  2660. #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
  2661. filter: grayscale(100%) !important;
  2662. }
  2663. }
  2664.  
  2665. /*= Cursor Types =============================================================*/
  2666. #appMenu-proton-update-banner,
  2667. #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2,
  2668. #appMenu-zoomReduce-button2,
  2669. #appMenu-zoomReset-button2,
  2670. #appMenu-zoomEnlarge-button2,
  2671. #appMenu-fullscreen-button2,
  2672. #panelMenu_showAllBookmarks,
  2673. #PanelUI-historyMore,
  2674. #appMenuClearRecentHistory:not([disabled]),
  2675. #appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button,
  2676. #appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button,
  2677. #BMB_viewBookmarksSidebar,
  2678. #BMB_bookmarksShowAllTop,
  2679. #BMB_bookmarksShowAll,
  2680. #import-button,
  2681. menuitem.openintabs-menuitem,
  2682. #downloadsListBox .downloadButton,
  2683. #downloadsListBox .download-state[exists],
  2684. #downloadsListBox .download-state[exists] .downloadDetails,
  2685. #downloadsHistory,
  2686. #protections-popup-footer .protections-popup-footer-button,
  2687. #protections-popup-multiView .panel-subview-footer-button,
  2688. #identity-popup-clear-sitedata-button,
  2689. #identity-popup-more-info {
  2690. cursor: pointer !important;
  2691. }
  2692.  
  2693. /* TODO: For now, fxa-menu doesn't show any status.
  2694. (JS required, observe .syncNowBtn status)
  2695. #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] {
  2696. cursor: progress !important;
  2697. }
  2698. */
  2699.  
  2700. /*= Animate ==================================================================*/
  2701. @media (prefers-reduced-motion: no-preference) {
  2702. /*- Background Color -------------------------------------------------------*/
  2703. button,
  2704. toolbarbutton,
  2705. stack,
  2706. vbox,
  2707. .toolbarbutton-icon,
  2708. #tabs-newtab-button > .toolbarbutton-icon {
  2709. transition: background-color 1s var(--animation-easing-function) !important;
  2710. }
  2711. button:hover,
  2712. toolbarbutton:hover,
  2713. stack:hover,
  2714. vbox:hover,
  2715. .toolbarbutton-icon:hover,
  2716. #tabs-newtab-button:hover > .toolbarbutton-icon {
  2717. transition: background-color 0.25s var(--animation-easing-function) !important;
  2718. }
  2719. @media (-moz-gtk-csd-available) {
  2720. .tabbrowser-tab:is([visuallyselected], [multiselected], [selected]) .tab-background:not(:-moz-lwtheme) {
  2721. transition: background-image 0.25s var(--animation-easing-function) !important;
  2722. }
  2723. }
  2724.  
  2725. .subviewbutton {
  2726. /* treechildren::-moz-tree-row: Can't apply
  2727. menu, menuitem is not apply.
  2728. */
  2729. transition: background-color 0.5s var(--animation-easing-function) !important;
  2730. }
  2731. .subviewbutton:hover {
  2732. transition: background-color 0.1s var(--animation-easing-function) !important;
  2733. }
  2734.  
  2735. /*- Pinned Tab -------------------------------------------------------------*/
  2736. #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([collapsed]) {
  2737. /* -moz-box-flex may be caused #tabbrowser-tabs[closebuttons] */
  2738. transition: -moz-box-flex 0.2s var(--animation-easing-function),
  2739. margin-inline-start 0.2s var(--animation-easing-function), min-width 0.1s ease-out, max-width 0.1s ease-out !important;
  2740. }
  2741. #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[pinned] {
  2742. transition: -moz-box-flex 0.2s var(--animation-easing-function),
  2743. margin-inline-start 0.2s var(--animation-easing-function) !important;
  2744. }
  2745.  
  2746. #tabbrowser-tabs:not([movingtab]) .tab-content::before,
  2747. #tabbrowser-tabs:not([movingtab]) .tab-content::after {
  2748. transition: width 0.2s var(--animation-easing-function), transform 0.2s var(--animation-easing-function) !important;
  2749. }
  2750. #tabbrowser-tabs:not([movingtab]) .tab-content .tab-label-container {
  2751. transition: width 0.3s var(--animation-easing-function) !important;
  2752. }
  2753. #tabbrowser-tabs:not([movingtab]) .tab-content .tab-icon-image {
  2754. transition: all 0.3s var(--animation-easing-function) !important;
  2755. }
  2756.  
  2757. /*- URL / Search Bar -------------------------------------------------------*/
  2758. #urlbar-background,
  2759. #searchbar {
  2760. transition: border-color 1s var(--animation-easing-function), background-color 1.5s var(--animation-easing-function) !important;
  2761. }
  2762. #urlbar-background:hover,
  2763. #searchbar:hover {
  2764. transition: border-color 0.5s var(--animation-easing-function), background-color 1s var(--animation-easing-function) !important;
  2765. }
  2766.  
  2767. /* Buttons in URL bar */
  2768. #tracking-protection-icon-container,
  2769. #identity-icon-box,
  2770. #identity-permission-box,
  2771. #notification-popup-box,
  2772. #page-action-buttons > .urlbar-page-action {
  2773. transition: background-color 2.5s var(--animation-easing-function) !important;
  2774. }
  2775. #tracking-protection-icon-container:hover,
  2776. #identity-icon-box:hover,
  2777. #identity-permission-box:hover,
  2778. #notification-popup-box:hover,
  2779. #page-action-buttons > .urlbar-page-action:hover {
  2780. transition: background-color 1.25s var(--animation-easing-function) !important;
  2781. }
  2782.  
  2783. /*- Border - Other Fields --------------------------------------------------*/
  2784. #search-box:hover,
  2785. xul|search-textbox.tabsFilter:hover,
  2786. #editBMPanel_namePicker:hover,
  2787. #editBMPanel_tagsField:hover,
  2788. .findbar-container .findbar-textbox:hover {
  2789. transition: border-color 1s var(--animation-easing-function) !important;
  2790. }
  2791. #search-box:hover,
  2792. xul|search-textbox.tabsFilter:hover,
  2793. #editBMPanel_namePicker:hover,
  2794. #editBMPanel_tagsField:hover,
  2795. .findbar-container .findbar-textbox:hover {
  2796. transition: border-color 0.5s var(--animation-easing-function) !important;
  2797. }
  2798.  
  2799. /*- Sidebar ----------------------------------------------------------------*/
  2800. #sidebar-box {
  2801. /* like #sidebar-box > #sidebar */
  2802. min-width: 14em;
  2803. width: 18em;
  2804. max-width: 36em;
  2805.  
  2806. /* Animation */
  2807. transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out,
  2808. visibility 0s linear !important;
  2809. }
  2810. #sidebar-box[hidden="true"] {
  2811. display: -moz-box !important;
  2812. margin-inline-start: -18em;
  2813. opacity: 0;
  2814. visibility: collapse;
  2815. transition-delay: 0s, 0s, 0.25s !important;
  2816. }
  2817.  
  2818. /*- Full Screen ------------------------------------------------------------*/
  2819. #navigator-toolbox {
  2820. /* Full screen out */
  2821. transition: margin-top 1s ease;
  2822. transform-origin: top;
  2823. }
  2824. #navigator-toolbox[inFullscreen="true"] {
  2825. /* Full screen enter */
  2826. animation-duration: 1s;
  2827. animation-name: fullscreen;
  2828. animation-timing-function: ease;
  2829.  
  2830. /* Full screen navbar not hover */
  2831. transition: margin-top 0.3s var(--animation-easing-function) 50ms;
  2832. }
  2833. #navigator-toolbox[inFullscreen="true"]:hover {
  2834. transition-duration: 1.5s;
  2835. transition-delay: 0.1s;
  2836. }
  2837.  
  2838. @keyframes fullscreen {
  2839. from {
  2840. margin-top: 0;
  2841. }
  2842. /* Dont' use `to`: Depending on density */
  2843. }
  2844.  
  2845. /*- Expand - Synced Tabs ---------------------------------------------------*/
  2846. @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
  2847. {
  2848. .item-tabs-list {
  2849. transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  2850. transform: translateY(0%);
  2851. opacity: 1;
  2852. max-height: 100%;
  2853. }
  2854.  
  2855. .item.client.closed .item-tabs-list {
  2856. display: flex !important;
  2857.  
  2858. transition: transform 0.2s ease-out, opacity 0.2s ease-out,
  2859. max-height 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0.05s;
  2860. visibility: hidden;
  2861. transform: translateY(-100%);
  2862. opacity: 0;
  2863. max-height: 0;
  2864. }
  2865. }
  2866.  
  2867. /*- Arrow - Synced Tabs ----------------------------------------------------*/
  2868. @-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml")
  2869. {
  2870. /* treechildren::-moz-tree-twisty: Can't apply */
  2871. #template-container .item.client .item-twisty-container {
  2872. transition: transform 0.1s var(--animation-easing-function) !important;
  2873. }
  2874.  
  2875. #template-container .item.client.closed .item-twisty-container {
  2876. transform: rotate(-90deg);
  2877. background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
  2878. }
  2879.  
  2880. #template-container .item.client.closed .item-twisty-container:dir(rtl) {
  2881. transform: rotate(90deg);
  2882. background-image: url("chrome://global/skin/icons/arrow-down-12.svg") !important;
  2883. }
  2884. }
  2885.  
  2886. /*- Arrow - Edit Bookmark Popup --------------------------------------------*/
  2887. #editBookmarkPanelRows .expander-up .button-icon,
  2888. #editBookmarkPanelRows .expander-down .button-icon {
  2889. transition: transform 0.1s var(--animation-easing-function) !important;
  2890. }
  2891. #editBookmarkPanelRows .expander-up {
  2892. list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
  2893. }
  2894. #editBookmarkPanelRows .expander-up .button-icon {
  2895. transform: rotate(180deg);
  2896. }
  2897. }
  2898.  
  2899. /** Reduce Padding ************************************************************/
  2900. /*= Tab Bar - Distribution padding, radius ===================================*/
  2901. :root {
  2902. --tab-border-radius: 0px !important; /* Original: 4px */
  2903.  
  2904. --tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */
  2905. --proton-tab-block-margin: var(--tab-block-margin) !important; /* Original: 4px, Legacy */
  2906. }
  2907.  
  2908. :root[uidensity="touch"] {
  2909. /* Like Original */
  2910. --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */
  2911. }
  2912.  
  2913. /* Fix Tab bar button radious */
  2914. #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
  2915. #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
  2916. #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
  2917. .tab-close-button {
  2918. --tab-border-radius: 4px !important;
  2919. }
  2920.  
  2921. /*= Tab Bar - Reduce Width, Show more tabs ===================================*/
  2922. /* for First Tab Space */
  2923. :root {
  2924. --space-left-tabbar: 0px; /* If you want drag space, set to 8px */
  2925. }
  2926. :root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]),
  2927. :root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) {
  2928. padding-inline-start: var(--space-left-tabbar) !important;
  2929. }
  2930.  
  2931. /* Titlebar Space */
  2932. .titlebar-spacer[type="pre-tabs"] {
  2933. width: 30px !important; /* Original: 40px */
  2934. }
  2935. .titlebar-spacer[type="post-tabs"] {
  2936. width: 25px !important; /* Original: 40px */
  2937. }
  2938.  
  2939. /* Tabbar Buttons */
  2940. :root {
  2941. --newtab-button-minus-width-padding: 2px;
  2942. --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
  2943. }
  2944. #new-tab-button > .toolbarbutton-icon,
  2945. #alltabs-button > .toolbarbutton-badge-stack {
  2946. /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
  2947. width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;
  2948.  
  2949. /* Original: --toolbarbutton-inner-padding */
  2950. padding-left: var(--newtab-button-width-padding) !important;
  2951. padding-right: var(--newtab-button-width-padding) !important;
  2952. }
  2953.  
  2954. #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
  2955. > #tabbrowser-arrowscrollbox
  2956. > .tabbrowser-tab[first-visible-unpinned-tab] {
  2957. margin-inline-start: 0 !important;
  2958. }
  2959.  
  2960. :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
  2961. --scrollbtn-inner-padding: 1px;
  2962. --scrollbtn-outer-padding: 3px;
  2963. }
  2964. #scrollbutton-up {
  2965. padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
  2966. padding-right: var(--scrollbtn-outer-padding, 4px) !important;
  2967. }
  2968. #scrollbutton-down {
  2969. padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
  2970. padding-right: var(--scrollbtn-inner-padding, 4px) !important;
  2971. }
  2972.  
  2973. :root:not([uidensity="touch"]) #new-tab-button,
  2974. #alltabs-button {
  2975. --toolbarbutton-outer-padding: 1px; /* Original: 2px*/
  2976. }
  2977.  
  2978. /* Tab - Max Size */
  2979. :root {
  2980. --tab-max-width: 225px;
  2981. }
  2982. .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
  2983. max-width: var(--tab-max-width) !important; /* Original: 225px */
  2984. }
  2985.  
  2986. /* neighbouring tabs should "pinch" together */
  2987. .tabbrowser-tab {
  2988. padding-inline: 0 !important;
  2989. }
  2990.  
  2991. /*= Tab Bar - Reduce Height, Show more contents ==============================*/
  2992. /* for Extra Drag Space */
  2993. :root {
  2994. --space-above-tabbar: 0px; /* If you want drag space, set to 8px */
  2995. }
  2996. :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
  2997. height: calc(var(--tab-min-height) + var(--space-above-tabbar));
  2998. }
  2999. :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
  3000. :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
  3001. padding-top: var(--space-above-tabbar) !important;
  3002. }
  3003.  
  3004. /* Toolbar Height */
  3005. #TabsToolbar {
  3006. --tab-min-height: 33px;
  3007. --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */
  3008. }
  3009. :root[uidensity="compact"] #TabsToolbar {
  3010. --tab-min-height: 29px;
  3011. }
  3012. :root[uidensity="touch"] #TabsToolbar {
  3013. --tab-min-height: 41px;
  3014. }
  3015.  
  3016. :root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox,
  3017. #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
  3018. #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
  3019. #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
  3020. max-height: var(--tab-min-height) !important; /* Force apply height */
  3021. }
  3022. :root[uidensity="compact"] #tabbrowser-arrowscrollbox {
  3023. height: var(--tab-min-height) !important;
  3024. }
  3025.  
  3026. /* Top Margin */
  3027. .tab-background,
  3028. .tab-content {
  3029. margin-top: 0 !important;
  3030. }
  3031.  
  3032. /* Scroll Button - Size Fix */
  3033. :root #tabbrowser-arrowscrollbox {
  3034. --scrollbtn-vertical-padding: 3px;
  3035. --scrollbtn-vertical-border: 2px;
  3036. --scrollbtn-border-radius: 7px;
  3037. }
  3038. #scrollbutton-up,
  3039. #scrollbutton-down {
  3040. /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
  3041. /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
  3042. padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
  3043. padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
  3044.  
  3045. /* Original: 4px */
  3046. border-top-width: var(--scrollbtn-vertical-border, 4px) !important;
  3047. border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important;
  3048. /* Original: calc(var(--tab-border-radius) + 4px) = 8px */
  3049. border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important;
  3050. }
  3051.  
  3052. :root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] {
  3053. height: calc(
  3054. var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px
  3055. ); /* Compact: 28px, Normal: 33px, Touch: 38px */
  3056. }
  3057.  
  3058. /*= Tool Bar - Button Padding ================================================*/
  3059. :root[uidensity="compact"] {
  3060. --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */
  3061. }
  3062.  
  3063. /*= Nav Bar - Reduce Width ===================================================*/
  3064. #nav-bar:not([customizing]) toolbarspring {
  3065. min-width: 1px !important;
  3066. max-width: 100px !important;
  3067. }
  3068.  
  3069. /*= URL Bar - Reduce Padding =================================================*/
  3070. :root:not([uidensity="touch"]) #urlbar-container,
  3071. :root:not([uidensity="touch"]) #search-container {
  3072. padding-block: 3px !important; /* Original: 4px */
  3073. margin-inline: 5px !important; /* Original: 5px */
  3074. }
  3075. :root:not([uidensity="compact"]) #urlbar-container,
  3076. :root:not([uidensity="compact"]) #search-container {
  3077. padding-block: 2px !important;
  3078. }
  3079.  
  3080. /* spread menu */
  3081. :root:not([uidensity]) .urlbarView-row {
  3082. padding-block: 1px !important; /* Original: 2px */
  3083. }
  3084. :root[uidensity="compact"] .urlbarView-row {
  3085. padding-block: 0px !important;
  3086. }
  3087.  
  3088. :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) {
  3089. padding-block: 8px !important; /* Original: 10px */
  3090. }
  3091. :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) {
  3092. padding-block: 2px !important;
  3093. }
  3094.  
  3095. /*= BookMark Bar - Reduce Height =============================================*/
  3096. :root[uidensity="compact"] #PersonalToolbar toolbarbutton {
  3097. margin-top: 0px; /* Original: 2px */
  3098. }
  3099.  
  3100. /*= Info Bar - Reduce Padding ================================================*/
  3101. :root:not([uidensity]) #tab-notification-deck {
  3102. --infobar-message-margin: 0 4px 3px;
  3103. }
  3104. :root[uidensity="compact"] #tab-notification-deck {
  3105. --infobar-message-margin: 0 4px 2px;
  3106. }
  3107. #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
  3108. margin: var(--infobar-message-margin, 0 4px 4px) !important;
  3109. }
  3110.  
  3111. :root:not([uidensity]) notification-message[message-bar-type="infobar"] {
  3112. --infobar-vertical-margin: 7px;
  3113. --infobar-button-vertical-margin: 3px;
  3114. }
  3115. :root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
  3116. --infobar-vertical-margin: 6px;
  3117. --infobar-button-vertical-margin: 2px;
  3118. }
  3119. .infobar > .icon {
  3120. margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
  3121. }
  3122. .notification-message {
  3123. padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
  3124. }
  3125. .notification-button-container > .notification-button {
  3126. margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
  3127. }
  3128. .notification-close {
  3129. margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
  3130. }
  3131.  
  3132. /* Hard coded for compatibility - Disappearing phenomenon */
  3133. .container.infobar::before {
  3134. content: "";
  3135. display: block;
  3136. width: 2px;
  3137. position: absolute;
  3138. background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
  3139. top: 0;
  3140. inset-inline-start: 0;
  3141. height: 100%;
  3142. border-start-start-radius: 4px;
  3143. border-end-start-radius: 4px;
  3144. }
  3145.  
  3146. /*= Menu - Reduce Padding ====================================================*/
  3147. :root {
  3148. --menu-padding: 0.35em; /* Win7, 8: 0px */
  3149. }
  3150. :root[uidensity="compact"] {
  3151. --menu-padding: 0.25em;
  3152. }
  3153. :root[uidensity="touch"] {
  3154. --menu-padding: 0.5em;
  3155. }
  3156. menupopup:not(.in-menulist) > menuitem,
  3157. menupopup > menu {
  3158. /* Original: 0.5em */
  3159. padding-block: var(--menu-padding) !important;
  3160. }
  3161.  
  3162. #ContentSelectDropdown > menupopup > menucaption,
  3163. #ContentSelectDropdown > menupopup > menuitem {
  3164. padding-block: 0 !important;
  3165. }
  3166.  
  3167. @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  3168. :root:not([uidensity="touch"]) .menu-text,
  3169. :root:not([uidensity="touch"]) .menu-iconic-text {
  3170. padding-inline-end: 0 !important; /* Original: 2px */
  3171. }
  3172. :root:not([uidensity="touch"]) .menupopup-arrowscrollbox {
  3173. padding-block: 1px !important; /* Original: 4px*/
  3174. }
  3175. :root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
  3176. padding: 0 0 1px !important; /* Original: 0 0 4px*/
  3177. }
  3178. :root:not([uidensity="touch"]) .menu-right {
  3179. margin-right: 6px !important; /* Original: 12px */
  3180. }
  3181. }
  3182.  
  3183. @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
  3184. (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  3185. /* Remove border */
  3186. menupopup > menuitem,
  3187. menupopup > menu {
  3188. padding-block: calc(var(--menu-padding) - 2px) !important;
  3189. }
  3190.  
  3191. /* Make to original */
  3192. :root:not([uidensity="touch"]) #context-navigation:not([hidden]) {
  3193. padding: 0 0 4px !important;
  3194. }
  3195. }
  3196.  
  3197. @media (-moz-gtk-csd-available) {
  3198. menupopup > menu {
  3199. padding-inline-start: 0.5em;
  3200. }
  3201. }
  3202.  
  3203. /* Arrow Icon Align to Right */
  3204. .bookmark-item.subviewbutton > .menu-right {
  3205. margin-inline-end: 0 !important;
  3206. }
  3207.  
  3208. /*= Bookmark Menu - Reduce Padding ===========================================*/
  3209. :root {
  3210. --bookmark-menu-padding: 3px;
  3211. }
  3212. :root[uidensity="compact"] {
  3213. --bookmark-menu-padding: 1.5px;
  3214. }
  3215.  
  3216. :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
  3217. :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton,
  3218. :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item,
  3219. :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem {
  3220. padding-block: var(--bookmark-menu-padding) !important;
  3221. }
  3222.  
  3223. /*= Global Menu - Set Padding ================================================*/
  3224. /* Vertical Align - Center & Height: 100% */
  3225. #main-menubar {
  3226. -moz-box-flex: 1 !important;
  3227. }
  3228.  
  3229. /* Rounding */
  3230. #main-menubar > menu {
  3231. border-radius: 4px;
  3232. }
  3233.  
  3234. /* Menubar item padding */
  3235. :root {
  3236. --global-menubar-padding: 2px;
  3237. }
  3238. :root[uidensity="compact"] {
  3239. --global-menubar-padding: 1px;
  3240. }
  3241. :root[uidensity="touch"] {
  3242. --global-menubar-padding: 4px;
  3243. }
  3244. #main-menubar > menu {
  3245. padding-block: var(--global-menubar-padding) !important;
  3246. }
  3247.  
  3248. /* Reduce items */
  3249. #main-menubar > menu > menupopup menuitem,
  3250. #main-menubar > menu > menupopup menu {
  3251. padding-block: var(--bookmark-menu-padding) !important;
  3252. }
  3253.  
  3254. /*= Panel - Reduce padding ===================================================*/
  3255. :root {
  3256. --arrowpanel-menuicon-padding: 8px;
  3257. --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
  3258. --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
  3259. --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
  3260. }
  3261.  
  3262. :root[uidensity="compact"] {
  3263. --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */
  3264. }
  3265. :root[uidensity="touch"] {
  3266. --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */
  3267. }
  3268.  
  3269. /*= Popup Panel - Reduce padding =============================================*/
  3270. #protections-popup-main-header-label {
  3271. height: unset !important; /* Original: 37.6px */
  3272. }
  3273.  
  3274. #identity-popup,
  3275. #permission-popup,
  3276. #protections-popup {
  3277. --vertical-section-padding: 0.8em; /* Original: 0.9em */
  3278. }
  3279.  
  3280. .protections-popup-footer-button,
  3281. .protections-popup-category {
  3282. min-height: 24px; /* Original: 32px */
  3283. height: unset !important;
  3284. }
  3285.  
  3286. /** Popup panel - Compact mode */
  3287. /* Footer Button Height */
  3288. :root[uidensity="compact"] .panel-footer.panel-footer-menulike > button {
  3289. padding: 3px 8px !important;
  3290. }
  3291. /* Footer Button Height */
  3292. :root[uidensity="compact"] #protections-popup-trackersView-settings-button {
  3293. margin: 4px 8px 0 !important;
  3294. }
  3295. /* not cut off for Protection popup Footer on windows */
  3296. :root[uidensity="compact"] #protections-popup-multiView #protections-popup-footer {
  3297. padding: 3px 0 10px !important;
  3298. }
  3299. /* Button and disabled category in Protection popup */
  3300. :root[uidensity="compact"] #protections-popup-multiView .protections-popup-footer-button,
  3301. :root[uidensity="compact"] #protections-popup-multiView .protections-popup-category {
  3302. height: 20px !important;
  3303. min-height: 20px !important;
  3304. }
  3305. /* Footer Button in Tracking Content Panel */
  3306. :root[uidensity="compact"] #protections-popup-multiView .panel-footer.panel-footer-menulike {
  3307. margin: 0 0 3px !important;
  3308. }
  3309. /* Identity popup header padding */
  3310. :root[uidensity="compact"] #identity-popup-multiView #identity-popup-mainView-panel-header {
  3311. padding: 2px 5px !important;
  3312. }
  3313. /* Text When There is no trackers */
  3314. :root[uidensity="compact"] #protections-popup-no-trackers-found-description {
  3315. margin: 2em 4em !important;
  3316. }
  3317. /* Download Item margin */
  3318. :root[uidensity="compact"] #downloadsListBox {
  3319. margin: 0 !important;
  3320. }
  3321.  
  3322. /** Tab Bar - Connect to window ***********************************************/
  3323. .tab-background {
  3324. border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
  3325. margin-bottom: 0px !important;
  3326. }
  3327.  
  3328. .tab-content {
  3329. margin-top: var(--tab-block-margin);
  3330. }
  3331.  
  3332. .tab-stack {
  3333. margin-top: 0px !important;
  3334. margin-bottom: 0px !important;
  3335. }
  3336.  
  3337. /* Remove line at Toolbar's top */
  3338. #tabbrowser-tabs {
  3339. z-index: 1 !important;
  3340. }
  3341. #TabsToolbar {
  3342. overflow: hidden; /* Prevent toolbar area over */
  3343. }
  3344.  
  3345. /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
  3346. #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
  3347. z-index: 0 !important;
  3348. }
  3349.  
  3350. /** Selected Tab - Color like toolbar *****************************************/
  3351. :root:not(:-moz-lwtheme) {
  3352. /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */
  3353. --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */
  3354. }
  3355. #tabbrowser-tabs:not([movingtab])
  3356. > #tabbrowser-arrowscrollbox
  3357. > .tabbrowser-tab
  3358. > .tab-stack
  3359. > .tab-background[selected="true"]:-moz-lwtheme {
  3360. /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
  3361. */
  3362. background-image: linear-gradient(transparent, transparent),
  3363. linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  3364. }
  3365.  
  3366. /* Multi Selected Color */
  3367. #tabbrowser-tabs:not([movingtab])
  3368. > #tabbrowser-arrowscrollbox
  3369. > .tabbrowser-tab
  3370. > .tab-stack
  3371. > .tab-background[multiselected]:not([selected]):-moz-lwtheme {
  3372. background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
  3373. linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  3374. }
  3375.  
  3376. .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
  3377. background: color-mix(in srgb, currentColor 65%, transparent);
  3378. opacity: 0.3;
  3379. }
  3380. #TabsToolbar[brighttext]
  3381. .tab-background[multiselected="true"]:not([selected="true"])
  3382. > .tab-loading-burst:not([bursting]) {
  3383. opacity: 0.15;
  3384. }
  3385.  
  3386. /** Selected Tab - Photon like contextline ************************************/
  3387. :root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */
  3388. :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
  3389. :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
  3390. --tab-line-color: rgb(10, 132, 255) !important;
  3391. }
  3392. @media (-moz-gtk-csd-available) {
  3393. :root:not(:-moz-lwtheme) #tabbrowser-tabs {
  3394. --tab-line-color: Highlight !important; /* -moz-accent-color */
  3395. }
  3396. }
  3397.  
  3398. .tab-context-line {
  3399. display: -moz-inline-box !important;
  3400. height: 2px !important;
  3401. border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
  3402. }
  3403.  
  3404. .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
  3405. /* Photon like color
  3406. Default: var(--tab-line-color, rgb(10, 132, 255))
  3407. Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent)
  3408.  
  3409. FF v96+ replace by var(--lwt-tab-line-color) */
  3410. background-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) !important;
  3411. }
  3412.  
  3413. .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
  3414. background-color: rgba(0, 0, 0, 0.2) !important;
  3415. opacity: 1 !important;
  3416. transform: none !important;
  3417. }
  3418. #TabsToolbar[brighttext]
  3419. .tabbrowser-tab:hover:not([selected="true"], [multiselected])
  3420. > .tab-stack
  3421. > .tab-background
  3422. > .tab-context-line {
  3423. background-color: rgba(255, 255, 255, 0.2) !important;
  3424. }
  3425.  
  3426. /* Prevent identitiy color flashing */
  3427. .tabbrowser-tab[usercontextid] .tab-context-line {
  3428. --identity-icon-color: none;
  3429. }
  3430.  
  3431. :root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) /* Legacy - lwtheme-mozlightdark at v96 */
  3432. #TabsToolbar[brighttext]
  3433. #tabbrowser-tabs:not([noshadowfortests])
  3434. tab[visuallyselected]
  3435. > stack:-moz-lwtheme::before,
  3436. :root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) /* Legacy - lwtheme-mozlightdark at v96 */
  3437. #TabsToolbar[brighttext]
  3438. #tabbrowser-tabs:not([noshadowfortests])
  3439. tab[visuallyselected]
  3440. > stack:-moz-lwtheme::after {
  3441. /* As Selected Tab - Box Shadow */
  3442. stroke: var(--toolbar-color) !important;
  3443. }
  3444.  
  3445. /* Animation */
  3446. .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
  3447. opacity: 0 !important;
  3448. transform: scaleX(0) !important;
  3449. }
  3450. @media (prefers-reduced-motion: no-preference) {
  3451. .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
  3452. transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
  3453. }
  3454. }
  3455.  
  3456. /* Remove side's background color border */
  3457. #TabsToolbar[brighttext]
  3458. #tabbrowser-tabs:not([noshadowfortests])
  3459. .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  3460. > .tab-stack
  3461. > .tab-background:-moz-lwtheme {
  3462. --tabs-border-color: rgba(0, 0, 0, 0.3) !important;
  3463. box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */
  3464. }
  3465. #TabsToolbar:not([brighttext])
  3466. #tabbrowser-tabs:not([noshadowfortests])
  3467. .tabbrowser-tab:is([visuallyselected="true"], [multiselected])
  3468. > .tab-stack
  3469. > .tab-background {
  3470. box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
  3471. }
  3472.  
  3473. /* Container Tab */
  3474. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  3475. margin: unset !important;
  3476. }
  3477.  
  3478. /** Unselected Tab - Divide line **********************************************/
  3479. .tabbrowser-tab[first-visible-tab="true"] .tab-background::before,
  3480. .tab-background::after {
  3481. content: "";
  3482. }
  3483.  
  3484. .tab-background::before,
  3485. .tab-background::after {
  3486. /* Box Model */
  3487. display: block;
  3488. position: absolute;
  3489.  
  3490. /* Position */
  3491. top: 50%;
  3492. transform: translateY(calc(-50% + 1px)) !important;
  3493.  
  3494. /* Bar shape */
  3495. width: 0px;
  3496. height: 100%;
  3497.  
  3498. /* Bar Color */
  3499. opacity: 0.3;
  3500. border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
  3501. }
  3502. .tab-background::after {
  3503. right: 0;
  3504. }
  3505.  
  3506. .tabbrowser-tab[visuallyselected] .tab-background::before,
  3507. .tabbrowser-tab[visuallyselected] .tab-background::after,
  3508. .tabbrowser-tab[beforeselected-visible] .tab-background::after {
  3509. opacity: 0;
  3510. }
  3511.  
  3512. /* Animate */
  3513. @media (prefers-reduced-motion: no-preference) {
  3514. .tab-background::before,
  3515. .tab-background::after {
  3516. transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */
  3517. }
  3518. }
  3519.  
  3520. /** New tab button - Smaller button *******************************************/
  3521. #tabs-newtab-button > .toolbarbutton-icon {
  3522. margin-left: 1px;
  3523.  
  3524. /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */
  3525. --toolbarbutton-inner-padding: 6px;
  3526. }
  3527. :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon {
  3528. --toolbarbutton-inner-padding: 4px; /* Photon: 6px */
  3529. }
  3530. :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon {
  3531. --toolbarbutton-inner-padding: 9px; /* Photon: 9px */
  3532. }
  3533.  
  3534. /* Unloaded Tab - Contents Opacity ********************************************/
  3535. #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  3536. opacity: 0.7;
  3537. }
  3538.  
  3539. /** Clipped tabs - Letters cleary *********************************************/
  3540. #tabbrowser-tabs[closebuttons="activetab"] {
  3541. --inline-tab-padding: 7px !important; /* Original: 8px */
  3542. }
  3543. #tabbrowser-tabs[overflow="true"] {
  3544. --inline-tab-padding: 6px !important; /* Original: 8px */
  3545. }
  3546.  
  3547. .tab-content[pinned] {
  3548. --inline-tab-padding: 10px; /* Prevent overflow pinned tab's divide line not aligned */
  3549. padding-inline: var(--inline-tab-padding) !important;
  3550. }
  3551. :root[uidensity="compact"] .tab-content[pinned] {
  3552. --inline-tab-padding: 8px;
  3553. }
  3554.  
  3555. #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
  3556. #tabbrowser-tabs[closebuttons="activetab"]
  3557. .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
  3558. mask-image: linear-gradient(to right, black 70%, transparent) !important;
  3559. }
  3560.  
  3561. #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
  3562. #tabbrowser-tabs[closebuttons="activetab"]
  3563. .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
  3564. mask-image: linear-gradient(to left, black 70%, transparent) !important;
  3565. }
  3566.  
  3567. /** Clipped tabs - Show close button at hover *********************************/
  3568. #tabbrowser-tabs[closebuttons="activetab"]
  3569. > #tabbrowser-arrowscrollbox
  3570. > .tabbrowser-tab:not([pinned])
  3571. > .tab-stack
  3572. > .tab-content
  3573. > .tab-close-button:not([selected="true"]) {
  3574. display: -moz-inline-box !important;
  3575. }
  3576.  
  3577. #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
  3578. visibility: collapse !important;
  3579. opacity: 0;
  3580. }
  3581. #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
  3582. visibility: visible !important;
  3583. opacity: 1;
  3584. }
  3585.  
  3586. /* Animate */
  3587. @media (prefers-reduced-motion: no-preference) {
  3588. /* Fade out */
  3589. #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
  3590. transition: opacity 0.1s var(--animation-easing-function) !important;
  3591. }
  3592.  
  3593. /* Fade in */
  3594. #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button {
  3595. transition: opacity 0.25s var(--animation-easing-function) !important;
  3596. }
  3597. }
  3598.  
  3599. /* Closed Button's icon thicker */
  3600. .tabbrowser-tab .tab-content > .close-icon {
  3601. list-style-image: url("./icons/dismiss-filled.svg") !important;
  3602. }
  3603.  
  3604. /* Closed Button's icon larger */
  3605. .tab-close-button {
  3606. padding: 6px !important; /* Original: 7px */
  3607. }
  3608. .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
  3609. padding-inline-start: 1px !important; /* Original: 0px */
  3610. width: 19px !important; /* Original: 17px */
  3611. }
  3612.  
  3613. /* Closed Button's padding reduce */
  3614. #tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button {
  3615. margin-inline-end: calc(
  3616. (var(--inline-tab-padding) / -2) + 2px
  3617. ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/
  3618. padding: 4px !important; /* Original: 7px */
  3619. width: 20px !important; /* Original: 24px */
  3620. height: 20px !important; /* Original: 24px */
  3621. }
  3622. #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
  3623. padding-inline-start: 3px !important; /* Original: 0px */
  3624. width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */
  3625. }
  3626.  
  3627.  
  3628.  
  3629.  
  3630. /* Animate */
  3631. @media (prefers-reduced-motion: no-preference) {
  3632. .tab-icon-overlay:not([crashed]),
  3633. .tab-icon-overlay[pinned][crashed][selected] {
  3634. transition: 0.1s var(--animation-easing-function);
  3635. }
  3636.  
  3637. .tab-label-container > .tab-label {
  3638. transition: transform 0.25s var(--animation-easing-function);
  3639. }
  3640. }
  3641.  
  3642. /* None exist favicon - Size bigger */
  3643. .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
  3644. transform: translateX(-0.5px) translateY(-1px);
  3645. inset-inline-end: 0 !important;
  3646. margin-inline-end: 0 !important;
  3647. padding: 0 !important;
  3648. }
  3649. .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) {
  3650. opacity: 0 !important; /* Favicon hidden */
  3651. }
  3652. .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
  3653. .tab-label {
  3654. transform: translateX(3px);
  3655. }
  3656.  
  3657. /* Busy - Show */
  3658. .tab-throbber[busy],
  3659. .tab-icon-pending[busy] {
  3660. opacity: 1 !important;
  3661. }
  3662.  
  3663. /* Busy - Overlay Position */
  3664. .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
  3665. transform: translateX(-0.5px) translateY(-6px);
  3666. }
  3667. .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
  3668. inset-inline-end: -9px !important;
  3669. margin-inline-end: 9.5px !important;
  3670. padding: 1.5px !important;
  3671. }
  3672.  
  3673. /* Hover */
  3674. .tab-icon-overlay:not([crashed])[soundplaying]:hover,
  3675. .tab-icon-overlay:not([crashed])[muted]:hover,
  3676. .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  3677. color: var(--toolbar-bgcolor, white) !important;
  3678. stroke: var(--lwt-tab-text, var(--toolbar-color)) !important;
  3679. background-color: var(--lwt-tab-text, var(--toolbar-color)) !important;
  3680. fill-opacity: 0.95 !important;
  3681. }
  3682.  
  3683. #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
  3684. #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover,
  3685. #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  3686. color: var(--toolbar-bgcolor, black) !important;
  3687. }
  3688.  
  3689. .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover {
  3690. padding: 0 !important;
  3691. }
  3692.  
  3693. /** PictureInPicture Tab - Show PIP Icon **************************************/
  3694. #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after,
  3695. #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tab-content::after {
  3696. content: "";
  3697. }
  3698. .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after {
  3699. /* Shape */
  3700. display: -moz-inline-box !important;
  3701. width: 14px;
  3702. height: 14px;
  3703. background-size: 14px;
  3704. -moz-box-ordinal-group: 1 !important;
  3705.  
  3706. /* Color */
  3707. fill: currentColor;
  3708. opacity: 0.8;
  3709. -moz-context-properties: fill;
  3710.  
  3711. /* Icon */
  3712. background-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
  3713. }
  3714. .tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after {
  3715. opacity: 0.95;
  3716. }
  3717.  
  3718. /* Close Button's position */
  3719. .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
  3720. -moz-box-ordinal-group: 2 !important;
  3721. }
  3722. #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
  3723. margin-left: 7px !important;
  3724. }
  3725. #tabbrowser-tabs:not([closebuttons="activetab"])
  3726. .tabbrowser-tab[pictureinpicture]:not([pinned]):hover
  3727. .tab-close-button {
  3728. margin-left: 2px !important;
  3729. }
  3730.  
  3731. /** Container Tab - Color line at icon's bottom *******************************/
  3732. .tabbrowser-tab {
  3733. --container-position-y: 11px;
  3734. }
  3735. :root[uidensity="compact"] .tabbrowser-tab {
  3736. --container-position-y: 10px;
  3737. }
  3738. :root[uidensity="touch"] .tabbrowser-tab {
  3739. --container-position-y: 12px;
  3740. }
  3741. .tab-content:not([titlechanged])::before {
  3742. /* Box Model */
  3743. content: "";
  3744. display: block;
  3745. position: absolute !important;
  3746. transform: translate(9px, var(--container-position-y)) !important;
  3747.  
  3748. /* Shape */
  3749. border-bottom: 2px solid var(--identity-icon-color);
  3750. width: 25%;
  3751. opacity: 0.75;
  3752. }
  3753. .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
  3754. width: calc(100% - 30px);
  3755. opacity: 1;
  3756. }
  3757. #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
  3758. width: calc(100% - 33px);
  3759. }
  3760.  
  3761. /* Animate */
  3762. @media (prefers-reduced-motion: no-preference) {
  3763. .tab-content:not([titlechanged])::before {
  3764. transition: 0.15s var(--animation-easing-function) !important;
  3765. transition-property: width, opacity;
  3766. }
  3767. }
  3768.  
  3769. /* Pinned Tab */
  3770. .tabbrowser-tab[pinned] .tab-content::before {
  3771. transform: translateY(var(--container-position-y)) !important;
  3772. width: 16px;
  3773. }
  3774.  
  3775. /* Pinned Tab - Titlechanged Indicator override */
  3776. .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
  3777. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  3778. /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
  3779. --dotted-identity-image: radial-gradient(
  3780. circle,
  3781. var(--identity-icon-color),
  3782. var(--identity-icon-color) 2px,
  3783. transparent 2px
  3784. );
  3785. background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
  3786. background-position-x: 32%, 50%, 70% !important;
  3787. }
  3788. :root[uidensity="compact"]
  3789. .tabbrowser-tab:is([image], [pinned])[usercontextid]
  3790. > .tab-stack
  3791. > .tab-content[attention]:not([selected="true"]),
  3792. :root[uidensity="compact"]
  3793. .tabbrowser-tab[usercontextid]
  3794. > .tab-stack
  3795. > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  3796. /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
  3797. background-position-x: 30%, 50%, 70% !important;
  3798. }
  3799.  
  3800. .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  3801. .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  3802. /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
  3803. background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important;
  3804. }
  3805.  
  3806. /* Pinned Tab - Titlechanged & soundplaying */
  3807. .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  3808. > .tab-stack
  3809. > .tab-content[attention]:not([selected="true"]),
  3810. .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  3811. > .tab-stack
  3812. > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  3813. background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
  3814. }
  3815. :root[uidensity="compact"]
  3816. .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  3817. > .tab-stack
  3818. > .tab-content[attention]:not([selected="true"]),
  3819. :root[uidensity="compact"]
  3820. .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
  3821. > .tab-stack
  3822. > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  3823. background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
  3824. }
  3825.  
  3826. /** Crashed Tab - Don't show Favicons *****************************************/
  3827. .tab-icon-image[crashed] {
  3828. display: none !important;
  3829. }
  3830.  
  3831. /** Fullscreen - Overlap toolbar **********************************************/
  3832. @supports -moz-bool-pref("browser.fullscreen.autohide") {
  3833. :root[sizemode="fullscreen"] #navigator-toolbox {
  3834. position: fixed !important; /* Needed for content to take up entire height */
  3835. display: block !important; /* Needed for content to take up entire height */
  3836. z-index: 1000 !important; /* Puts the UI above the content */
  3837. }
  3838.  
  3839. :root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) {
  3840. width: 100%; /* Makes the UI take up the entire width */
  3841. }
  3842.  
  3843. :root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]),
  3844. :root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] {
  3845. visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */
  3846. }
  3847. }
  3848.  
  3849. /** Library - Icons Replace ***************************************************/
  3850. /*= Standard Folder - More Visible ===========================================*/
  3851. /* on Toolbar and Menus */
  3852. :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]),
  3853. /* in Sidebar, Library, Add/Edit Bookmark dialog */
  3854. /* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */
  3855. /* Need to overide!!, can not use :not() */
  3856. :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container),
  3857. #editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]),
  3858. #editBMPanel_folderMenuList .folder-icon:not([id]),
  3859. /* Download Popup */
  3860. .downloadIconShow > .button-box > .button-icon {
  3861. list-style-image: url("./icons/folder.svg") !important;
  3862. }
  3863.  
  3864. /* Standard Folder - Open */
  3865. :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
  3866. .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"],
  3867. :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
  3868. treechildren::-moz-tree-image(title, container, open) {
  3869. list-style-image: url("./icons/folder-open.svg") !important;
  3870. }
  3871.  
  3872. /*= Other Folder - Inbox Icon ================================================*/
  3873. /* on Menus */
  3874. #PlacesToolbar #OtherBookmarks,
  3875. #BMB_bookmarksPopup #BMB_unsortedBookmarks,
  3876. #bookmarksMenuPopup #menu_unsortedBookmarks,
  3877. /* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */
  3878. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
  3879. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
  3880. #editBMPanel_unfiledRootItem,
  3881. #editBMPanel_folderMenuList[selectedGuid="unfiled_____"] {
  3882. list-style-image: url("./icons/mail-inbox-all.svg") !important;
  3883. }
  3884.  
  3885. /* Other Folder - Open */
  3886. #PlacesToolbar #OtherBookmarks[open="true"],
  3887. #BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"],
  3888. #bookmarksMenuPopup #menu_unsortedBookmarks[open="true"],
  3889. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
  3890. treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks),
  3891. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
  3892. treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) {
  3893. list-style-image: url("./icons/mail-inbox.svg") !important;
  3894. }
  3895.  
  3896. /*= Default Icon - Overide ===================================================*/
  3897. /* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */
  3898.  
  3899. /* Query */
  3900. :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) {
  3901. list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
  3902. }
  3903.  
  3904. /* History */
  3905. :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer),
  3906. :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
  3907. list-style-image: url("chrome://browser/skin/history.svg") !important;
  3908. }
  3909.  
  3910. /* Downloads */
  3911. :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
  3912. list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
  3913. }
  3914.  
  3915. /* Tag */
  3916. :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer),
  3917. :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
  3918. list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
  3919. }
  3920.  
  3921. /* Boomark */
  3922. :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
  3923. list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
  3924. }
  3925.  
  3926. /* Bookmark Toolbar */
  3927. #BMB_bookmarksPopup #BMB_bookmarksToolbar, /* Original: Default folder icon */
  3928. #bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */
  3929. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
  3930. list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
  3931. }
  3932.  
  3933. /* Bookmark Menu */
  3934. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
  3935. treechildren::-moz-tree-image(container, queryFolder_menu________) {
  3936. list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
  3937. }
  3938.  
  3939. /*= Default Icon - Open ======================================================*/
  3940. /* Query */
  3941. :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
  3942. .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"]
  3943. > .menu-iconic-left
  3944. > .menu-iconic-icon {
  3945. transform: rotate(15deg) !important;
  3946. }
  3947.  
  3948. /* History */
  3949. :-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer),
  3950. :-moz-any(#historyTree, #placesList, #placeContent)
  3951. treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) {
  3952. list-style-image: url("./icons/history-reverse.svg") !important;
  3953. }
  3954.  
  3955. /* Tag */
  3956. :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
  3957. .bookmark-item[container="true"][tagContainer="true"][open="true"],
  3958. :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer),
  3959. :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) {
  3960. list-style-image: url("./icons/tag-open.svg") !important;
  3961. }
  3962.  
  3963. /* Boomark */
  3964. :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) {
  3965. list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
  3966. }
  3967.  
  3968. /* Bookmark Toolbar */
  3969. #BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"],
  3970. #bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"],
  3971. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
  3972. treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) {
  3973. list-style-image: url("./icons/bookmarksToolbar-open.svg") !important;
  3974. }
  3975.  
  3976. /* Bookmark Menu */
  3977. :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
  3978. treechildren::-moz-tree-image(container, open, queryFolder_menu________) {
  3979. list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */
  3980. }
  3981.  
  3982. /*= Menubar - Icons ===========================================*/
  3983. @-moz-document url("chrome://browser/content/places/places.xhtml")
  3984. {
  3985. @media (-moz-gtk-csd-available) {
  3986. #organizeButton,
  3987. #viewMenu,
  3988. #maintenanceButton,
  3989. #back-button,
  3990. #forward-button,
  3991. #clearDownloadsButton {
  3992. fill: currentColor !important;
  3993. -moz-context-properties: fill !important;
  3994. }
  3995.  
  3996. /* Add */
  3997. #organizeButton {
  3998. list-style-image: url("chrome://global/skin/icons/settings.svg") !important;
  3999. }
  4000. #viewMenu {
  4001. list-style-image: url("./icons/sort.svg") !important;
  4002. }
  4003. #maintenanceButton {
  4004. list-style-image: url("./icons/import-export.svg") !important;
  4005. }
  4006.  
  4007. #clearDownloadsButton {
  4008. list-style-image: url("chrome://global/skin/icons/delete.svg") !important;
  4009. }
  4010. #clearDownloadsButton > .toolbarbutton-icon {
  4011. display: -moz-inline-box !important;
  4012. margin-top: 0;
  4013. margin-bottom: 0;
  4014. margin-inline-start: 0;
  4015. margin-inline-end: 2px;
  4016. }
  4017.  
  4018. /* Replace */
  4019. #back-button {
  4020. list-style-image: url("chrome://browser/skin/back.svg") !important;
  4021. }
  4022. #forward-button {
  4023. list-style-image: url("chrome://browser/skin/forward.svg") !important;
  4024. }
  4025.  
  4026. #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
  4027. #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
  4028. transform: scaleX(-1) !important;
  4029. }
  4030. }
  4031. }
  4032.  
  4033. /** Panel - Icons *************************************************************/
  4034. /*= Padding ==================================================================*/
  4035. :root {
  4036. --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
  4037. --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
  4038.  
  4039. /* Blank Menu Left Padding */
  4040. --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
  4041. --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
  4042. }
  4043. :root[uidensity="compact"] {
  4044. --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px);
  4045. }
  4046. :root[uidensity="touch"] {
  4047. --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding));
  4048. }
  4049. :root {
  4050. /* Global */
  4051. --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);
  4052.  
  4053. /* General Panel */
  4054. --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
  4055. --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
  4056.  
  4057. /* Blank Menu Left Padding */
  4058. --arrowpanel-menuimageblank-padding-horizontal: calc(
  4059. var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)
  4060. );
  4061. --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
  4062. }
  4063. .subviewbutton > .toolbarbutton-icon {
  4064. width: 16px;
  4065. }
  4066.  
  4067. #downloadsHistory .button-text,
  4068. .subviewbutton > .toolbarbutton-text {
  4069. padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
  4070. }
  4071. .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
  4072. padding-inline-start: 0 !important;
  4073. }
  4074. #panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text,
  4075. #appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text {
  4076. padding-inline-start: var(--arrowpanel-menublank-padding) !important;
  4077. }
  4078. #appMenu-proton-update-banner .toolbarbutton-text {
  4079. margin-inline-start: 0 !important;
  4080. }
  4081.  
  4082. #appMenu-multiView .subviewbutton::before,
  4083. #appMenu-proton-update-banner::before {
  4084. display: -moz-inline-box;
  4085. margin-inline-end: var(--arrowpanel-menuicon-padding);
  4086. width: 16px;
  4087. height: 16px;
  4088. }
  4089. #appMenu-proton-update-banner {
  4090. margin-bottom: 2px !important;
  4091. }
  4092. #appMenu-proton-update-banner::before {
  4093. margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
  4094. }
  4095. #appMenu-fxa-status2,
  4096. #appMenu-zoom-controls2 {
  4097. align-items: center;
  4098. padding-top: var(--arrowpanel-menuimageblank-padding) !important;
  4099. padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
  4100. }
  4101. #appMenu-zoom-controls2::before {
  4102. margin-inline-end: 0 !important;
  4103. }
  4104.  
  4105. .subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text {
  4106. margin-left: 16px !important;
  4107. }
  4108.  
  4109. /* Icons Color */
  4110. #appMenu-multiView .subviewbutton::before,
  4111. #appMenu-proton-update-banner::before,
  4112. #downloadsHistory .button-icon,
  4113. .subviewbutton > image {
  4114. fill: currentColor !important;
  4115. fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
  4116. -moz-context-properties: fill !important;
  4117. }
  4118. #appMenu-zoomReduce-button2 > .toolbarbutton-icon,
  4119. #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
  4120. stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important;
  4121. -moz-context-properties: fill, stroke !important;
  4122. }
  4123. #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon,
  4124. #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon {
  4125. stroke: var(--button-hover-bgcolor) !important;
  4126. }
  4127.  
  4128. .subviewbutton[disabled="true"] > image {
  4129. /* Ghost icons when disabled */
  4130. opacity: 0.4;
  4131. }
  4132.  
  4133. /*= Panel - Main =============================================================*/
  4134. #appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
  4135. display: -moz-inline-box !important;
  4136. margin-inline-start: var(--arrowpanel-menuicon-padding);
  4137. -moz-box-ordinal-group: 0 !important;
  4138. }
  4139.  
  4140. #appMenu-proton-update-banner::before {
  4141. content: url("./icons/whatsnew.svg");
  4142. }
  4143. #appMenu-fxa-status2::before {
  4144. /* Don't exist img tag */
  4145. content: url("chrome://browser/skin/fxa/avatar-empty.svg");
  4146. }
  4147. #appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])::before {
  4148. display: none;
  4149. }
  4150. #appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])
  4151. #appMenu-fxa-label2::before {
  4152. /* url("https://profile.accounts.firefox.com/v1/avatar/a") */
  4153. content: "";
  4154. border-radius: 50% !important;
  4155. background-size: 16px !important;
  4156. background-image: var(--avatar-image-url) !important;
  4157. }
  4158.  
  4159. #appMenu-new-tab-button2, /* Seperate */
  4160. #appMenu-passwords-button, /* Seperate */
  4161. #appMenu-extensions-themes-button,
  4162. #appMenu-save-file-button2, /* Seperate */
  4163. #appMenu-find-button2,
  4164. #appMenu-more-button2, /* Seperate */
  4165. #appMenu-help-button2,
  4166. #appMenu-quit-button2 /* Seperate */ {
  4167. padding-top: var(--arrowpanel-menuitemblank-padding) !important;
  4168. padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
  4169. }
  4170. #appMenu-zoom-controls2 {
  4171. padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
  4172. }
  4173.  
  4174. #appMenu-new-window-button2 {
  4175. list-style-image: url("chrome://browser/skin/window.svg");
  4176. }
  4177. #appMenu-new-private-window-button2 {
  4178. list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
  4179. }
  4180.  
  4181. #appMenu-bookmarks-button {
  4182. list-style-image: url("chrome://browser/skin/bookmark.svg");
  4183. }
  4184. #appMenu-history-button {
  4185. list-style-image: url("chrome://browser/skin/history.svg");
  4186. }
  4187. #appMenu-downloads-button {
  4188. list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
  4189. }
  4190.  
  4191. #appMenu-print-button2 {
  4192. list-style-image: url("chrome://global/skin/icons/print.svg");
  4193. }
  4194.  
  4195. #appMenu-settings-button {
  4196. list-style-image: url("chrome://global/skin/icons/settings.svg");
  4197. }
  4198.  
  4199. /*= Panel - Account ==========================================================*/
  4200. #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon,
  4201. #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon {
  4202. width: 16px !important;
  4203. height: 16px !important;
  4204. }
  4205.  
  4206. /* Default */
  4207. #fxa-manage-account-button::before {
  4208. content: "";
  4209. display: -moz-inline-box;
  4210. width: 32px !important;
  4211. height: 32px !important;
  4212. border-radius: 50%;
  4213. background-size: 32px;
  4214. background-image: var(--avatar-image-url);
  4215. margin-inline-end: var(--arrowpanel-menuicon-padding);
  4216. }
  4217.  
  4218. .syncNowBtn {
  4219. visibility: visible !important;
  4220. -moz-box-ordinal-group: 1 !important;
  4221. margin-inline-end: var(--arrowpanel-menuicon-padding);
  4222. }
  4223. #PanelUI-fxa-menu-setup-sync-button {
  4224. list-style-image: url("chrome://browser/skin/sync.svg");
  4225. }
  4226.  
  4227. #PanelUI-fxa-menu-connect-device-button {
  4228. list-style-image: url("chrome://browser/skin/fxa/add-device.svg");
  4229. }
  4230. #PanelUI-fxa-menu-sendtab-button {
  4231. list-style-image: url("./icons/send-to-device.svg");
  4232. }
  4233. #PanelUI-fxa-menu-sync-prefs-button {
  4234. list-style-image: url("chrome://global/skin/icons/settings.svg");
  4235. }
  4236. #PanelUI-fxa-menu-account-signout-button {
  4237. list-style-image: url("./icons/sign-out.svg");
  4238. }
  4239. #PanelUI-remotetabs-view-managedevices::before {
  4240. /* Box */
  4241. content: "";
  4242. padding-inline-end: 16px;
  4243. padding-block: 1px;
  4244. margin-inline-end: var(--arrowpanel-menuicon-padding);
  4245.  
  4246. /* Color */
  4247. fill: currentColor;
  4248. fill-opacity: var(--toolbarbutton-icon-fill-opacity);
  4249. -moz-context-properties: fill;
  4250.  
  4251. background-size: 16px;
  4252. background-repeat: no-repeat;
  4253. background-position: left center;
  4254. background-image: url("chrome://global/skin/icons/settings.svg");
  4255. }
  4256.  
  4257. .PanelUI-remotetabs-notabsforclient-label {
  4258. margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
  4259. padding-inline-start: var(--arrowpanel-menublank-padding) !important;
  4260. }
  4261.  
  4262. /* Change Separator */
  4263. #PanelUI-fxa-menu::before {
  4264. content: "";
  4265. display: -moz-box;
  4266. border-bottom: 1px solid var(--panel-separator-color);
  4267. margin: var(--panel-separator-margin);
  4268. padding: 0;
  4269. }
  4270. #PanelUI-fxa-menu > :first-child {
  4271. -moz-box-ordinal-group: 0;
  4272. }
  4273. #PanelUI-sign-out-separator {
  4274. display: none;
  4275. }
  4276. .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""], /* Legacy */
  4277. .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] {
  4278. list-style-image: url("./icons/send-to-device.svg");
  4279. }
  4280. .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]), /* Legacy */
  4281. .sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) {
  4282. list-style-image: url("chrome://global/skin/icons/settings.svg");
  4283. }
  4284.  
  4285. /*= Panel - Bookmark =========================================================*/
  4286. #panelMenuBookmarkThisPage {
  4287. list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
  4288. }
  4289. panelMenuBookmarkThisPage[starred] {
  4290. list-style-image: url("chrome://browser/skin/bookmark.svg");
  4291. }
  4292.  
  4293. #panelMenu_searchBookmarks {
  4294. list-style-image: url("chrome://global/skin/icons/search-glass.svg");
  4295. }
  4296. #panelMenu_viewBookmarksToolbar {
  4297. list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
  4298. }
  4299.  
  4300. #panelMenu_showAllBookmarks {
  4301. list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
  4302. }
  4303.  
  4304. /*= Panel - History ==========================================================*/
  4305. #appMenuRecentlyClosedTabs {
  4306. list-style-image: url("chrome://browser/skin/tab.svg");
  4307. }
  4308. #appMenuRecentlyClosedWindows {
  4309. list-style-image: url("chrome://browser/skin/window.svg");
  4310. }
  4311. #appMenuRestoreSession {
  4312. list-style-image: url("./icons/restore-session.svg");
  4313. }
  4314. #appMenuClearRecentHistory {
  4315. list-style-image: url("chrome://browser/skin/forget.svg");
  4316. }
  4317.  
  4318. #PanelUI-historyMore {
  4319. list-style-image: url("chrome://browser/skin/history.svg");
  4320. }
  4321.  
  4322. #appMenu-library-recentlyClosedTabs {
  4323. list-style-image: url("./icons/movetowindow-16.svg");
  4324. }
  4325. #appMenu-library-recentlyClosedWindows {
  4326. list-style-image: url("./icons/restore-session.svg");
  4327. }
  4328.  
  4329. /*= Panel - More tools =======================================================*/
  4330. #appmenu-moreTools-button {
  4331. list-style-image: url("chrome://browser/skin/customize.svg");
  4332. }
  4333.  
  4334. /* Web Developer Tools */
  4335. #appmenu-developer-tools-view .subviewbutton:nth-child(1),
  4336. #PanelUI-developer-tools-view .subviewbutton:nth-child(1) {
  4337. list-style-image: url("./icons/developer.svg");
  4338. }
  4339. /* Task Manager */
  4340. #appmenu-developer-tools-view .subviewbutton:nth-child(2),
  4341. #PanelUI-developer-tools-view .subviewbutton:nth-child(2) {
  4342. list-style-image: url("./icons/performance.svg");
  4343. }
  4344. /* Remote Debugging - Edge bug.svg */
  4345. #appmenu-developer-tools-view .subviewbutton:nth-child(3),
  4346. #PanelUI-developer-tools-view .subviewbutton:nth-child(3) {
  4347. list-style-image: url("./icons/bug.svg");
  4348. }
  4349. /* Browser Toolbox - Edge webdeveloper.svg */
  4350. #appmenu-developer-tools-view .subviewbutton:nth-child(4),
  4351. #PanelUI-developer-tools-view .subviewbutton:nth-child(4) {
  4352. list-style-image: url("./icons/window-dev-tools.svg");
  4353. }
  4354. /* Browser Content Toolbaox - */
  4355. #appmenu-developer-tools-view .subviewbutton:nth-child(5),
  4356. #PanelUI-developer-tools-view .subviewbutton:nth-child(5) {
  4357. list-style-image: url("./icons/command-frames.svg");
  4358. }
  4359. /* Browser Console */
  4360. #appmenu-developer-tools-view .subviewbutton:nth-last-child(5),
  4361. #PanelUI-developer-tools-view .subviewbutton:nth-last-child(5) {
  4362. list-style-image: url("chrome://devtools/skin/images/command-console.svg");
  4363. }
  4364. /* Responsive Design Mode */
  4365. #appmenu-developer-tools-view .subviewbutton:nth-last-child(4),
  4366. #PanelUI-developer-tools-view .subviewbutton:nth-last-child(4) {
  4367. list-style-image: url("./icons/command-responsivemode.svg");
  4368. }
  4369. /* Eyedropper */
  4370. #appmenu-developer-tools-view .subviewbutton:nth-last-child(3),
  4371. #PanelUI-developer-tools-view .subviewbutton:nth-last-child(3) {
  4372. list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
  4373. }
  4374. /* Page Source - Edge file-search.svg */
  4375. #appmenu-developer-tools-view .subviewbutton:nth-last-child(2),
  4376. #PanelUI-developer-tools-view .subviewbutton:nth-last-child(2) {
  4377. list-style-image: url("./icons/document-search.svg");
  4378. }
  4379. /* Extensions for Devel */
  4380. #appmenu-developer-tools-view .subviewbutton:nth-last-child(1),
  4381. #PanelUI-developer-tools-view .subviewbutton:nth-last-child(1) {
  4382. list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg");
  4383. }
  4384. #appmenu-developer-tools-view .subviewbutton:last-child {
  4385. margin-bottom: 6px !important;
  4386. }
  4387.  
  4388. /*= Panel - Help =============================================================*/
  4389. #appMenu_menu_openHelp {
  4390. list-style-image: url("chrome://global/skin/icons/help.svg");
  4391. }
  4392. #appMenu_feedbackPage {
  4393. list-style-image: url("./icons/send.svg");
  4394. }
  4395. #appMenu_helpSafeMode {
  4396. list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg");
  4397. }
  4398. #appMenu_troubleShooting {
  4399. list-style-image: url("chrome://global/skin/icons/more.svg");
  4400. }
  4401. #appMenu_help_reportSiteIssue {
  4402. list-style-image: url("chrome://global/skin/icons/lightbulb.svg");
  4403. }
  4404. #appMenu_menu_HelpPopup_reportPhishingtoolmenu {
  4405. list-style-image: url("chrome://global/skin/icons/warning.svg");
  4406. }
  4407. #appMenu_aboutName {
  4408. list-style-image: url("chrome://global/skin/icons/info.svg");
  4409. }
  4410.  
  4411. /*= Panel - Library ==========================================================*/
  4412. #appMenu-library-bookmarks-button {
  4413. list-style-image: url("chrome://browser/skin/bookmark.svg");
  4414. }
  4415. #appMenu-library-history-button {
  4416. list-style-image: url("chrome://browser/skin/history.svg");
  4417. }
  4418. #appMenu-library-downloads-button {
  4419. list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
  4420. }
  4421.  
  4422. /*= Panel - Downloads ========================================================*/
  4423. #downloadsHistory {
  4424. list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
  4425. }
  4426. #downloadsHistory .box-inherit.button-box {
  4427. display: -moz-inline-box !important;
  4428. }
  4429.  
  4430. /*= Toolbar - Overflow Menu ==================================================*/
  4431. #overflowMenu-customize-button {
  4432. list-style-image: url("chrome://browser/skin/customize.svg");
  4433. }
  4434.  
  4435. /*= Tabbar - All Tab Menu ====================================================*/
  4436. #allTabsMenu-undoCloseTab {
  4437. list-style-image: url("./icons/undo.svg");
  4438. }
  4439. #allTabsMenu-searchTabs {
  4440. list-style-image: url("chrome://global/skin/icons/search-glass.svg");
  4441. }
  4442. #allTabsMenu-containerTabsButton {
  4443. list-style-image: url("./icons/container-openin-16.svg");
  4444. }
  4445.  
  4446. #allTabsMenu-hiddenTabsButton {
  4447. list-style-image: url("./icons/password-hide.svg");
  4448. }
  4449.  
  4450. #allTabsMenu-containerTabsView .subviewbutton:last-child {
  4451. list-style-image: url("chrome://global/skin/icons/settings.svg");
  4452. }
  4453.  
  4454. /*= BMB_bookmarksPopup =======================================================*/
  4455. #BMB_viewBookmarksSidebar {
  4456. }
  4457. #BMB_bookmarksShowAllTop,
  4458. #BMB_bookmarksShowAll {
  4459. --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
  4460. }
  4461. #BMB_bookmarksToolbar {
  4462. --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
  4463. }
  4464.  
  4465. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  4466. #BMB_bookmarksShowAllTop {
  4467. list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important;
  4468. }
  4469. #BMB_bookmarksShowAllTop > .menu-iconic-left {
  4470. display: -moz-box !important;
  4471. }
  4472. }
  4473.  
  4474. /*= protections-popup ========================================================*/
  4475. #protections-popup-settings-button > .protections-popup-settings-icon,
  4476. #protections-popup-show-report-button > .protections-popup-show-report-icon {
  4477. -moz-context-properties: fill;
  4478. fill: currentColor;
  4479. margin-inline-end: 1em;
  4480. }
  4481.  
  4482. #protections-popup-settings-button > .protections-popup-settings-icon,
  4483. #protections-popup-multiView .panel-subview-footer-button {
  4484. list-style-image: url("chrome://global/skin/icons/settings.svg");
  4485. }
  4486.  
  4487. #protections-popup-show-report-button > .protections-popup-show-report-icon {
  4488. /* chrome://browser/skin/controlcenter/dashboard.svg */
  4489. list-style-image: url("icons/dashboard.svg");
  4490. }
  4491.  
  4492. /*= identity-popup ===========================================================*/
  4493. #identity-popup-clear-sitedata-button,
  4494. #identity-popup-more-info {
  4495. padding-inline: 5px !important;
  4496. }
  4497.  
  4498. #identity-popup-securityView-body {
  4499. margin-inline-start: 32px !important; /* Original: 10px */
  4500. }
  4501.  
  4502. #identity-popup-clear-sitedata-button {
  4503. list-style-image: url("./icons/broom.svg");
  4504. }
  4505.  
  4506. /*= sidebarMenu-popup ========================================================*/
  4507. #identity-popup-more-info {
  4508. list-style-image: url("chrome://global/skin/icons/info.svg");
  4509. }
  4510.  
  4511. #sidebar-switcher-bookmarks {
  4512. list-style-image: url("chrome://browser/skin/bookmark.svg");
  4513. }
  4514.  
  4515. #sidebar-switcher-history {
  4516. list-style-image: url("chrome://browser/skin/history.svg");
  4517. }
  4518.  
  4519. #sidebar-switcher-tabs {
  4520. list-style-image: url("chrome://browser/skin/tab.svg");
  4521. }
  4522.  
  4523. #sidebar-reverse-position {
  4524. list-style-image: url("chrome://browser/skin/sidebars-right.svg");
  4525. }
  4526. #sidebar-box[positionend="true"] #sidebar-reverse-position {
  4527. /* Can't apply this. shadow dom */
  4528. list-style-image: url("chrome://browser/skin/sidebars.svg");
  4529. }
  4530.  
  4531. #sidebarMenu-popup > .subviewbutton[data-l10n-id="sidebar-menu-close"] {
  4532. list-style-image: url("chrome://global/skin/icons/close.svg");
  4533. }
  4534.  
  4535. /** Menu - Icons Layout *******************************************************/
  4536. menupopup menuitem:not([type="checkbox"], [type="radio"]),
  4537. menupopup menu:not([type="checkbox"], [type="radio"]),
  4538. #main-menubar > menu {
  4539. -moz-appearance: none !important; /* Linux: menulist */
  4540. }
  4541.  
  4542. /* Icon */
  4543. :not(menu, #ContentSelectDropdown)
  4544. > menupopup
  4545. > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  4546. :not(menu, #ContentSelectDropdown)
  4547. > menupopup
  4548. > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  4549. #main-menubar > menu,
  4550. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4551. menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  4552. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4553. menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  4554. menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  4555. menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  4556. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  4557. .openintabs-menuitem,
  4558. #blockedPopupDontShowMessage {
  4559. /* Color */
  4560. -moz-context-properties: fill, fill-opacity !important;
  4561. fill: currentColor !important;
  4562.  
  4563. /* Layout */
  4564. background-size: 16px !important;
  4565. background-repeat: no-repeat !important;
  4566. background-image: var(--menuitem-image);
  4567. }
  4568.  
  4569. /* For native context menus on macOS */
  4570. @supports -moz-bool-pref("widget.macos.native-context-menus") {
  4571. :not(menu, #ContentSelectDropdown)
  4572. > menupopup
  4573. > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  4574. :not(menu, #ContentSelectDropdown)
  4575. > menupopup
  4576. > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) {
  4577. list-style-image: var(--menuitem-image, url("./icons/blank.svg")) !important;
  4578. }
  4579. }
  4580.  
  4581. /* Padding */
  4582. :root {
  4583. --context-menu-background-padding-default: 5px;
  4584. --context-menu-background-padding: var(--context-menu-background-padding-default);
  4585. }
  4586. :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
  4587. :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
  4588. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4589. menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
  4590. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4591. menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  4592. menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  4593. menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  4594. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  4595. .openintabs-menuitem,
  4596. #blockedPopupDontShowMessage {
  4597. background-position: left var(--context-menu-background-padding) center !important;
  4598. padding-inline-start: var(--context-menu-background-padding) !important;
  4599. }
  4600.  
  4601. /* Menubar */
  4602. #main-menubar > menu {
  4603. background-position: left var(--context-menu-background-padding-default) center !important;
  4604. padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
  4605. padding-inline-end: 3px;
  4606. }
  4607. #main-menubar > menu:first-child {
  4608. background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
  4609. padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
  4610. }
  4611. #main-menubar > menu > menupopup {
  4612. --menuitem-image: none; /* Prevent Image Inheritance */
  4613. }
  4614.  
  4615. /* Padding - Windows */
  4616. @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), /* Legacy - v99 */
  4617. (-moz-platform: windows-win7), (-moz-platform: windows-win8), (-moz-platform: windows-win10) {
  4618. /* Checkbox */
  4619. :root {
  4620. --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
  4621. }
  4622. :not(menu, #ContentSelectDropdown, #context-navigation)
  4623. > menupopup
  4624. > menuitem[type="checkbox"][checked="false"]
  4625. > .menu-iconic-left {
  4626. padding-inline-start: var(--context-menu-text-padding);
  4627. }
  4628. }
  4629.  
  4630. @media (-moz-os-version: windows-win7), /* Legacy - v99 */
  4631. (-moz-platform: windows-win7) {
  4632. :root {
  4633. --context-menu-background-padding-default: 2px;
  4634. }
  4635. }
  4636. @media (-moz-os-version: windows-win8), /* Legacy - v99 */
  4637. (-moz-platform: windows-win8) {
  4638. :root {
  4639. --context-menu-background-padding-default: 3px;
  4640. }
  4641. }
  4642. @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
  4643. (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  4644. :not(menu, #ContentSelectDropdown, #context-navigation)
  4645. > menupopup
  4646. > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  4647. :not(menu, #ContentSelectDropdown, #context-navigation)
  4648. > menupopup
  4649. > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  4650. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4651. menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
  4652. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4653. menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  4654. menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  4655. menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  4656. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  4657. .openintabs-menuitem,
  4658. #blockedPopupDontShowMessage {
  4659. background-position: left var(--context-menu-background-padding) center !important;
  4660. padding-inline-start: 0 !important;
  4661. }
  4662. }
  4663. @media (-moz-os-version: windows-win10), /* Legacy - v99 */
  4664. (-moz-platform: windows-win10) {
  4665. :root {
  4666. --context-menu-background-padding: 1em;
  4667. --context-menu-text-padding: 24px; /* 16px + 8px */
  4668. --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
  4669. }
  4670.  
  4671. :not(menu, #ContentSelectDropdown, #context-navigation)
  4672. > menupopup
  4673. > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  4674. :not(menu, #ContentSelectDropdown, #context-navigation)
  4675. > menupopup
  4676. > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  4677. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4678. menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
  4679. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4680. menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
  4681. menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  4682. menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  4683. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  4684. .openintabs-menuitem,
  4685. #blockedPopupDontShowMessage {
  4686. padding-inline-start: var(--menu-background-padding-default) !important;
  4687. margin-left: 0 !important;
  4688. }
  4689. }
  4690.  
  4691. /* Padding - Linux */
  4692. @media (-moz-gtk-csd-available) {
  4693. :root {
  4694. --context-menu-background-padding-default: 6px;
  4695. }
  4696.  
  4697. #main-menubar > menu > .menubar-text {
  4698. padding-inline-start: 3px;
  4699. }
  4700. }
  4701.  
  4702. /* Padding - Mac */
  4703. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  4704. :root {
  4705. --context-menu-background-padding-default: 10px;
  4706. --context-menu-mac-padding: 21px;
  4707. }
  4708.  
  4709. /* context menu width */
  4710. :not(menu, #ContentSelectDropdown, #context-navigation)
  4711. > menupopup
  4712. > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  4713. :not(menu, #ContentSelectDropdown, #context-navigation)
  4714. > menupopup
  4715. > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
  4716. #blockedPopupDontShowMessage {
  4717. padding-inline-end: var(--context-menu-background-padding) !important;
  4718. }
  4719.  
  4720. /* text position */
  4721. :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text,
  4722. :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text {
  4723. padding-inline-start: var(--context-menu-mac-padding) !important;
  4724. }
  4725.  
  4726. /* Checkbox menuitem, None iconic menu */
  4727. :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"],
  4728. :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) {
  4729. padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
  4730. }
  4731.  
  4732. /* Global Menu */
  4733. /* Disabled. some icons not appear
  4734. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4735. menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
  4736. menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  4737. menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
  4738. list-style-image: var(--menuitem-image, url("./icons/blank.svg"));
  4739. }
  4740. */
  4741. }
  4742.  
  4743. /*= Bookmark Menu - Layout ===================================================*/
  4744. /* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu
  4745. * #BMB_bookmarksPopup: looks like arrow panel
  4746. */
  4747.  
  4748. /* Empty Menu */
  4749. menupopup menupopup[emptyplacesresult] .menu-text,
  4750. #PersonalToolbar menupopup[emptyplacesresult] .menu-text {
  4751. margin-inline-start: 0 !important;
  4752. }
  4753.  
  4754. /* Bookmark Popup - As Arrow Panel */
  4755. #BMB_bookmarksPopup,
  4756. #PersonalToolbar {
  4757. --context-menu-background-padding: var(--arrowpanel-menuitem-padding);
  4758. }
  4759.  
  4760. /* Windows 7, 8 */
  4761. @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), /* Legacy - v99 */
  4762. (-moz-platform: windows-win7), (-moz-platform: windows-win8) {
  4763. /* Global Menu */
  4764. menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
  4765. padding-inline-start: 0 !important;
  4766. }
  4767.  
  4768. /* Bookmark Popup - None icon menu */
  4769. #BMB_bookmarksPopup,
  4770. #PersonalToolbar {
  4771. --arrowpanel-menuicon-padding: 9px;
  4772. }
  4773. menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  4774. menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
  4775. #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  4776. #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
  4777. margin-inline: var(--arrowpanel-menuitem-padding) !important;
  4778. background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
  4779. }
  4780. menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  4781. menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
  4782. padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
  4783. }
  4784. #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  4785. #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
  4786. padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
  4787. }
  4788. }
  4789.  
  4790. /* Windows */
  4791. @media (-moz-os-version: windows-win10), /* Legacy - v99 */
  4792. (-moz-platform: windows-win10) {
  4793. /* Bookmark Popup - None icon menu */
  4794. menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  4795. menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
  4796. #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  4797. #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
  4798. margin-inline: var(--arrowpanel-menuitem-padding) !important;
  4799. padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
  4800. background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
  4801. }
  4802. }
  4803.  
  4804. /* Linux */
  4805. @media (-moz-gtk-csd-available) {
  4806. /* Global Menu */
  4807. menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item {
  4808. padding-inline-start: var(--context-menu-background-padding) !important;
  4809. }
  4810.  
  4811. /* Bookmark Popup - Iconic menu */
  4812. #BMB_bookmarksPopup .menu-iconic-text,
  4813. #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text {
  4814. padding-inline-start: 1px !important;
  4815. }
  4816. /* Bookmark Popup - None icon menu */
  4817. menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  4818. menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
  4819. #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
  4820. #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
  4821. padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 1px) !important;
  4822. }
  4823. }
  4824.  
  4825. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  4826. /* Bookmark Popup - As Arrow Panel */
  4827. #PersonalToolbar menupopup menuitem,
  4828. #PersonalToolbar menupopup menu {
  4829. padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
  4830. }
  4831.  
  4832. /* Bookmark Popup - None icon menu */
  4833. menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
  4834. menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
  4835. padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important;
  4836. }
  4837. }
  4838.  
  4839. /** Context Menu - Icons ******************************************************/
  4840. /*= tabContextMenu ===========================================================*/
  4841. #context_openANewTab {
  4842. --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  4843. }
  4844.  
  4845. #context_reloadTab,
  4846. #context_reloadSelectedTabs {
  4847. --menuitem-image: url("./icons/reload.svg");
  4848. }
  4849. #context_toggleMuteTab,
  4850. #context_toggleMuteSelectedTabs {
  4851. --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  4852. }
  4853. #context_toggleMuteTab[muted],
  4854. #context_toggleMuteSelectedTabs[muted] {
  4855. --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
  4856. }
  4857. #context_pinTab,
  4858. #context_pinSelectedTabs {
  4859. --menuitem-image: url("./icons/pin-tab.svg");
  4860. }
  4861. #context_unpinTab,
  4862. #context_unpinSelectedTabs {
  4863. --menuitem-image: url("./icons/unpin-tab.svg");
  4864. }
  4865. #context_duplicateTab,
  4866. #context_duplicateTabs {
  4867. --menuitem-image: url("./icons/notebook-subsection.svg");
  4868. }
  4869.  
  4870. #context_bookmarkTab,
  4871. #context_bookmarkSelectedTabs {
  4872. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  4873. }
  4874. #context_moveTabOptions {
  4875. --menuitem-image: url("./icons/arrow-swap.svg");
  4876. }
  4877. #context_sendTabToDevice {
  4878. --menuitem-image: url("./icons/send-to-device.svg");
  4879. }
  4880.  
  4881. #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */
  4882. #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item {
  4883. /* At windows */
  4884. --menuitem-image: url("./icons/share.svg");
  4885. }
  4886. #context_reopenInContainer {
  4887. --menuitem-image: url("./icons/container-openin-16.svg");
  4888. }
  4889. #context_selectAllTabs {
  4890. --menuitem-image: url("./icons/tab-multiple.svg");
  4891. }
  4892.  
  4893. #context_closeTab {
  4894. --menuitem-image: url("chrome://global/skin/icons/close.svg");
  4895. }
  4896. #context_closeTabOptions {
  4897. }
  4898. #context_undoCloseTab {
  4899. --menuitem-image: url("./icons/undo.svg");
  4900. }
  4901.  
  4902. /*= new-tab-button-popup =====================================================*/
  4903. #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"],
  4904. .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] {
  4905. --menuitem-image: url("./icons/container-openin-16.svg");
  4906. }
  4907.  
  4908. #new-tab-button-popup > menuitem[command="Browser:OpenAboutContainers"],
  4909. .new-tab-popup > menuitem[command="Browser:OpenAboutContainers"] {
  4910. --menuitem-image: url("chrome://global/skin/icons/settings.svg");
  4911. }
  4912.  
  4913. /*= toolbar-context-menu =====================================================*/
  4914. .customize-context-manageExtension {
  4915. --menuitem-image: url("chrome://global/skin/icons/settings.svg");
  4916. }
  4917. .customize-context-removeExtension {
  4918. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  4919. }
  4920. .customize-context-reportExtension {
  4921. --menuitem-image: url("./icons/send.svg");
  4922. }
  4923.  
  4924. .customize-context-moveToPanel {
  4925. --menuitem-image: url("chrome://browser/skin/pin-12.svg");
  4926. }
  4927. .toolbar-context-autohide-downloads-button {
  4928. --menuitem-image: url("./icons/password-hide.svg");
  4929. }
  4930. .customize-context-removeFromToolbar {
  4931. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  4932. }
  4933. #toolbar-context-openANewTab {
  4934. --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  4935. }
  4936.  
  4937. #toolbar-context-reloadSelectedTab,
  4938. #toolbar-context-reloadSelectedTabs {
  4939. --menuitem-image: url("./icons/reload.svg");
  4940. }
  4941. #toolbar-context-bookmarkSelectedTab,
  4942. #toolbar-context-bookmarkSelectedTabs {
  4943. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  4944. }
  4945. #toolbar-context-selectAllTabs {
  4946. --menuitem-image: url("./icons/tab-multiple.svg");
  4947. }
  4948. #toolbar-context-undoCloseTab {
  4949. --menuitem-image: url("./icons/undo.svg");
  4950. }
  4951.  
  4952. #toggle_toolbar-menubar {
  4953. /* checkbox */
  4954. /* --menuitem-image: url("./icons/calendar-agenda.svg"); */
  4955. }
  4956. #toggle_PersonalToolbar {
  4957. /* Also placeContext */
  4958. --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
  4959. }
  4960.  
  4961. menuitem.viewCustomizeToolbar {
  4962. --menuitem-image: url("chrome://browser/skin/customize.svg");
  4963. }
  4964.  
  4965. /*= blockedPopupOptions ======================================================*/
  4966. #blockedPopupAllowSite {
  4967. --menuitem-image: url("chrome://global/skin/icons/check.svg");
  4968. }
  4969. #blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] {
  4970. --menuitem-image: url("chrome://global/skin/icons/edit.svg");
  4971. }
  4972. #blockedPopupDontShowMessage {
  4973. /* checkbox */
  4974. --menuitem-image: url("chrome://global/skin/icons/blocked.svg");
  4975. }
  4976.  
  4977. /*= autohide-context =========================================================*/
  4978. #autohide-context > menuitem[data-l10n-id="full-screen-autohide"] {
  4979. /* checkbox */
  4980. }
  4981.  
  4982. #autohide-context > menuitem[data-l10n-id="full-screen-exit"] {
  4983. --menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg");
  4984. }
  4985.  
  4986. /*= contentAreaContextMenu ===================================================*/
  4987. #context-viewsource-goToLine {
  4988. --menuitem-image: url("./icons/text-number-format.svg");
  4989. }
  4990. #context-viewsource-wrapLongLines {
  4991. /* checkbox */
  4992. /* --menuitem-image: url("./icons/arrow-sort-down-lines.svg"); */
  4993. }
  4994.  
  4995. #context-viewsource-highlightSyntax {
  4996. /* checkbox */
  4997. /* --menuitem-image: url("./icons/code.svg"); */
  4998. }
  4999.  
  5000. #spell-no-suggestions {
  5001. --menuitem-image: url("./icons/text-proofing-tools.svg");
  5002. }
  5003. #spell-add-to-dictionary {
  5004. --menuitem-image: url("./icons/book-add.svg");
  5005. }
  5006. #spell-undo-add-to-dictionary {
  5007. --menuitem-image: url("./icons/undo.svg");
  5008. }
  5009.  
  5010. #context-openlinkincurrent {
  5011. --menuitem-image: url("./icons/link-square.svg");
  5012. }
  5013. #context-openlinkincontainertab {
  5014. --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  5015. }
  5016. #context-openlinkintab {
  5017. --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  5018. }
  5019. #context-openlinkinusercontext-menu {
  5020. --menuitem-image: url("./icons/container-openin-16.svg");
  5021. }
  5022. #context-openlink {
  5023. --menuitem-image: url("chrome://browser/skin/window.svg");
  5024. }
  5025. #context-openlinkprivate {
  5026. --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
  5027. }
  5028.  
  5029. #context-bookmarklink {
  5030. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5031. }
  5032. #context-savelink {
  5033. --menuitem-image: url("chrome://browser/skin/save.svg");
  5034. }
  5035. #context-savelinktopocket {
  5036. --menuitem-image: url("./icons/pocket-outline.svg");
  5037. }
  5038. #context-copyemail {
  5039. --menuitem-image: url("chrome://browser/skin/mail.svg");
  5040. }
  5041. #context-copylink {
  5042. --menuitem-image: url("./icons/link.svg");
  5043. }
  5044. #context-sendlinktodevice {
  5045. --menuitem-image: url("./icons/send-to-device.svg");
  5046. }
  5047.  
  5048. #context-media-play {
  5049. --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
  5050. }
  5051. #context-media-pause {
  5052. --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
  5053. }
  5054. #context-media-mute {
  5055. --menuitem-image: url("chrome://global/skin/media/audio-muted.svg");
  5056. }
  5057. #context-media-unmute {
  5058. --menuitem-image: url("chrome://global/skin/media/audio.svg");
  5059. }
  5060. #context-media-playbackrate {
  5061. --menuitem-image: url("./icons/time-picker.svg");
  5062. }
  5063. #context-media-loop {
  5064. /* checkbox */
  5065. /* --menuitem-image: url("./icons/arrow-repeat-all.svg"); */
  5066. }
  5067. #context-leave-dom-fullscreen {
  5068. --menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg");
  5069. }
  5070. #context-video-fullscreen {
  5071. --menuitem-image: url("chrome://global/skin/media/fullscreenEnterButton.svg");
  5072. }
  5073. #context-media-hidecontrols {
  5074. --menuitem-image: url("./icons/eye-hide.svg");
  5075. }
  5076. #context-media-showcontrols {
  5077. --menuitem-image: url("./icons/eye-show.svg");
  5078. }
  5079.  
  5080. #context-viewvideo {
  5081. --menuitem-image: url("./icons/video.svg");
  5082. }
  5083. #context-video-pictureinpicture {
  5084. /* checkbox */
  5085. /* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */
  5086. }
  5087.  
  5088. #context-reloadimage {
  5089. --menuitem-image: url("./icons/image-arrow-counterclockwise.svg");
  5090. }
  5091. #context-viewimage {
  5092. --menuitem-image: url("./icons/image-add.svg");
  5093. }
  5094. #context-saveimage {
  5095. --menuitem-image: url("./icons/image.svg");
  5096. }
  5097. #context-video-saveimage {
  5098. --menuitem-image: url("./icons/video-snapshot.svg");
  5099. }
  5100. #context-savevideo {
  5101. --menuitem-image: url("./icons/video.svg");
  5102. }
  5103. #context-saveaudio {
  5104. --menuitem-image: url("chrome://global/skin/media/audio.svg");
  5105. }
  5106. #context-copyimage-contents {
  5107. --menuitem-image: url("./icons/image-copy.svg");
  5108. }
  5109. #context-copyimage,
  5110. #context-copyvideourl,
  5111. #context-copyaudiourl {
  5112. --menuitem-image: url("./icons/link.svg");
  5113. }
  5114. #context-sendimage,
  5115. #context-sendvideo,
  5116. #context-sendaudio {
  5117. --menuitem-image: url("chrome://browser/skin/mail.svg");
  5118. }
  5119. #context-viewimageinfo {
  5120. --menuitem-image: url("chrome://global/skin/icons/info.svg");
  5121. }
  5122. #context-viewimagedesc {
  5123. --menuitem-image: url("./icons/image-alt-text.svg");
  5124. }
  5125. #context-setDesktopBackground {
  5126. --menuitem-image: url("./icons/resize-image.svg");
  5127. }
  5128. #context-ctp-play {
  5129. --menuitem-image: url("chrome://global/skin/icons/plugin.svg");
  5130. }
  5131. #context-ctp-hide {
  5132. --menuitem-image: url("chrome://global/skin/icons/plugin-blocked.svg");
  5133. }
  5134.  
  5135. #context-savepage {
  5136. --menuitem-image: url("chrome://browser/skin/save.svg");
  5137. }
  5138. #context-pocket {
  5139. --menuitem-image: url("./icons/pocket-outline.svg");
  5140. }
  5141. #context-sendpagetodevice {
  5142. --menuitem-image: url("./icons/send-to-device.svg");
  5143. }
  5144. #fill-login {
  5145. --menuitem-image: url("./icons/password.svg");
  5146. }
  5147. #fill-login-generated-password {
  5148. --menuitem-image: url("chrome://browser/skin/login.svg");
  5149. }
  5150. #manage-saved-logins {
  5151. --menuitem-image: url("./icons/key-multiple.svg");
  5152. }
  5153.  
  5154. #context-undo {
  5155. --menuitem-image: url("./icons/undo.svg");
  5156. }
  5157. #context-redo {
  5158. }
  5159.  
  5160. #context-cut {
  5161. --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  5162. }
  5163. #context-copy {
  5164. --menuitem-image: url("./icons/edit-copy.svg");
  5165. }
  5166. #context-paste {
  5167. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5168. }
  5169. #context-delete {
  5170. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5171. }
  5172. #context-selectall {
  5173. --menuitem-image: url("./icons/select-all-on.svg");
  5174. }
  5175. #context-print-selection {
  5176. --menuitem-image: url("chrome://global/skin/icons/print.svg");
  5177. }
  5178.  
  5179. #context-take-screenshot {
  5180. --menuitem-image: url("chrome://browser/skin/screenshot.svg");
  5181. }
  5182.  
  5183. #context-keywordfield {
  5184. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5185. }
  5186. #context-searchselect,
  5187. #context-searchselect-private {
  5188. --menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
  5189. }
  5190.  
  5191. #frame {
  5192. --menuitem-image: url("./icons/command-frames.svg");
  5193. }
  5194.  
  5195. #spell-check-enabled {
  5196. /* checkbox */
  5197. }
  5198. #spell-add-dictionaries-main {
  5199. --menuitem-image: url("./icons/book-add.svg");
  5200. }
  5201. #spell-dictionaries {
  5202. --menuitem-image: url("./icons/book.svg");
  5203. }
  5204.  
  5205. #context-bidi-text-direction-toggle {
  5206. --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg");
  5207. }
  5208. #context-bidi-page-direction-toggle {
  5209. --menuitem-image: url("./icons/document-landscape-split-hint.svg");
  5210. }
  5211.  
  5212. #context-viewpartialsource-selection,
  5213. #context-viewsource {
  5214. --menuitem-image: url("./icons/document-search.svg");
  5215. }
  5216. #context-inspect-a11y {
  5217. --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg");
  5218. }
  5219. #context-inspect {
  5220. --menuitem-image: url("./icons/command-pick.svg");
  5221. }
  5222.  
  5223. #context-media-eme-learnmore {
  5224. /* iconic */
  5225. }
  5226.  
  5227. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  5228. #context-back {
  5229. --menuitem-image: url("chrome://browser/skin/back.svg");
  5230. }
  5231. #context-forward {
  5232. --menuitem-image: url("chrome://browser/skin/forward.svg");
  5233. }
  5234. #context-reload {
  5235. --menuitem-image: url("./icons/reload.svg");
  5236. }
  5237. #context-stop {
  5238. --menuitem-image: url("chrome://global/skin/icons/close.svg");
  5239. }
  5240.  
  5241. #context-bookmarkpage {
  5242. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5243. }
  5244. }
  5245.  
  5246. /*= pictureInPictureToggleContextMenu ========================================*/
  5247. #pictureInPictureToggleContextMenu > menuitem[oncommand="PictureInPicture.hideToggle();"] {
  5248. --menuitem-image: url("./icons/eye-hide.svg");
  5249. }
  5250.  
  5251. /*= placeContext =============================================================*/
  5252. #placesContext_open {
  5253. --menuitem-image: url("./icons/link-square.svg");
  5254. }
  5255. #placesContext_openBookmarkContainer\:tabs,
  5256. #placesContext_openBookmarkLinks\:tabs {
  5257. --menuitem-image: url("./icons/movetowindow-16.svg");
  5258. }
  5259. #placesContext_open\:newtab,
  5260. #placesContext_openContainer\:tabs,
  5261. #placesContext_openLinks\:tabs {
  5262. --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  5263. }
  5264. #placesContext_open\:newwindow {
  5265. --menuitem-image: url("chrome://browser/skin/window.svg");
  5266. }
  5267. #placesContext_open\:newprivatewindow {
  5268. --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
  5269. }
  5270.  
  5271. #placesContext_show_bookmark\:info,
  5272. #placesContext_show\:info,
  5273. #placesContext_show_folder\:info {
  5274. --menuitem-image: url("chrome://global/skin/icons/edit.svg");
  5275. }
  5276. #placesContext_deleteBookmark,
  5277. #placesContext_deleteFolder,
  5278. #placesContext_delete,
  5279. #placesContext_delete_history {
  5280. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5281. }
  5282. #placesContext_deleteHost {
  5283. --menuitem-image: url("./icons/eye-hide.svg");
  5284. }
  5285. #placesContext_sortBy\:name {
  5286. --menuitem-image: url("./icons/text-sort-ascending.svg");
  5287. }
  5288.  
  5289. #placesContext_cut {
  5290. --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  5291. }
  5292. #placesContext_copy {
  5293. --menuitem-image: url("./icons/edit-copy.svg");
  5294. }
  5295. #placesContext_paste_group {
  5296. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5297. }
  5298.  
  5299. #placesContext_new\:bookmark {
  5300. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5301. }
  5302. #placesContext_new\:folder {
  5303. --menuitem-image: url("./icons/folder.svg");
  5304. }
  5305. #placesContext_new\:separator {
  5306. --menuitem-image: url("./icons/vertical-line.svg");
  5307. }
  5308.  
  5309. #placesContext_paste {
  5310. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5311. }
  5312.  
  5313. #placesContext_createBookmark {
  5314. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5315. }
  5316. #show-other-bookmarks_PersonalToolbar {
  5317. /* checkbox */
  5318. /* --menuitem-image: url("./icons/star-line-horizontal.svg"); */
  5319. }
  5320. #placesContext_showAllBookmarks {
  5321. --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
  5322. }
  5323.  
  5324. .openintabs-menuitem {
  5325. --menuitem-image: url("./icons/movetowindow-16.svg");
  5326. }
  5327.  
  5328. /*= pageActionContextMenu ====================================================*/
  5329. .pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem {
  5330. --menuitem-image: url("chrome://global/skin/icons/settings.svg");
  5331. }
  5332. .pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem {
  5333. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5334. }
  5335.  
  5336. /*= customizationPanelItemContextMenu ========================================*/
  5337. #customizationPanelItemContextMenuUnpin {
  5338. --menuitem-image: url("./icons/unpin-tab.svg");
  5339. }
  5340. .customize-context-removeFromPanel {
  5341. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5342. }
  5343.  
  5344. /*= customizationPaletteItemContextMenu ======================================*/
  5345. .customize-context-addToToolbar {
  5346. --menuitem-image: url("chrome://devtools/skin/images/dock-bottom.svg");
  5347. }
  5348. .customize-context-addToPanel {
  5349. --menuitem-image: url("chrome://browser/skin/menu.svg");
  5350. }
  5351.  
  5352. /*= customizationPanelContextMenu ============================================*/
  5353. #customizationPanelContextMenu > menuitem[command="cmd_CustomizeToolbars"] {
  5354. --menuitem-image: url("chrome://browser/skin/customize.svg");
  5355. }
  5356.  
  5357. /*= downloads-button-autohide-panel ==========================================*/
  5358. #downloads-button-autohide-checkbox {
  5359. /* checkbox */
  5360. }
  5361.  
  5362. /*= downloadsContextMenu =====================================================*/
  5363. .downloadPauseMenuItem {
  5364. --menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
  5365. }
  5366. .downloadResumeMenuItem {
  5367. --menuitem-image: url("chrome://global/skin/media/play-fill.svg");
  5368. }
  5369. .downloadUnblockMenuItem {
  5370. --menuitem-image: url("./icons/checkmark-circle.svg");
  5371. }
  5372. .downloadUseSystemDefaultMenuItem {
  5373. --menuitem-image: url("chrome://browser/skin/open.svg");
  5374. }
  5375. .downloadAlwaysUseSystemDefaultMenuItem {
  5376. /* checkbox */
  5377. }
  5378. .downloadShowMenuItem {
  5379. --menuitem-image: url("./icons/folder.svg");
  5380. }
  5381.  
  5382. #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
  5383. --menuitem-image: url("./icons/link-square.svg");
  5384. }
  5385. #downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
  5386. --menuitem-image: url("./icons/link.svg");
  5387. }
  5388.  
  5389. .downloadDeleteFileMenuItem {
  5390. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5391. }
  5392. .downloadRemoveFromHistoryMenuItem {
  5393. --menuitem-image: url("./icons/eraser.svg");
  5394. }
  5395. #downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
  5396. #downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
  5397. --menuitem-image: url("./icons/broom.svg");
  5398. }
  5399.  
  5400. /*= SyncedTabsSidebarContext =================================================*/
  5401. #syncedTabsOpenSelected {
  5402. --menuitem-image: url("./icons/link-square.svg");
  5403. }
  5404. #syncedTabsOpenSelectedInTab {
  5405. --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  5406. }
  5407. #syncedTabsOpenSelectedInWindow {
  5408. --menuitem-image: url("chrome://browser/skin/window.svg");
  5409. }
  5410. #syncedTabsOpenSelectedInPrivateWindow {
  5411. --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
  5412. }
  5413.  
  5414. #syncedTabsBookmarkSelected {
  5415. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5416. }
  5417. #syncedTabsCopySelected {
  5418. --menuitem-image: url("./icons/link.svg");
  5419. }
  5420.  
  5421. #syncedTabsOpenAllInTabs {
  5422. --menuitem-image: url("./icons/movetowindow-16.svg");
  5423. }
  5424. #syncedTabsManageDevices {
  5425. --menuitem-image: url("chrome://global/skin/icons/settings.svg");
  5426. }
  5427. #syncedTabsRefresh {
  5428. --menuitem-image: url("chrome://browser/skin/sync.svg");
  5429. }
  5430.  
  5431. /*= SyncedTabsSidebarTabsFilterContext =======================================*/
  5432. #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_undo"] {
  5433. --menuitem-image: url("./icons/undo.svg");
  5434. }
  5435. #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] {
  5436. --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  5437. }
  5438. #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] {
  5439. --menuitem-image: url("./icons/edit-copy.svg");
  5440. }
  5441. #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] {
  5442. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5443. }
  5444. #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] {
  5445. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5446. }
  5447.  
  5448. #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] {
  5449. --menuitem-image: url("./icons/select-all-on.svg");
  5450. }
  5451.  
  5452. #syncedTabsRefreshFilter {
  5453. --menuitem-image: url("chrome://browser/skin/sync.svg");
  5454. }
  5455.  
  5456. /*= urlbar-input-container ===================================================*/
  5457. #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] {
  5458. --menuitem-image: url("./icons/undo.svg");
  5459. }
  5460. #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] {
  5461. }
  5462.  
  5463. #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] {
  5464. --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  5465. }
  5466. #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] {
  5467. --menuitem-image: url("./icons/edit-copy.svg");
  5468. }
  5469. #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] {
  5470. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5471. }
  5472. #paste-and-go {
  5473. }
  5474. #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] {
  5475. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5476. }
  5477. #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] {
  5478. --menuitem-image: url("./icons/select-all-on.svg");
  5479. }
  5480.  
  5481. /*= textbox-contextmenu ======================================================*/
  5482. /* Browser's Searchbar, Libray's Searchbar, Page Info */
  5483. .textbox-contextmenu > menuitem[data-l10n-id="text-action-undo"] {
  5484. --menuitem-image: url("./icons/undo.svg");
  5485. }
  5486. .textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] {
  5487. }
  5488.  
  5489. .textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] {
  5490. --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  5491. }
  5492. .textbox-contextmenu > menuitem[data-l10n-id="text-action-copy"] {
  5493. --menuitem-image: url("./icons/edit-copy.svg");
  5494. }
  5495. .textbox-contextmenu > menuitem[data-l10n-id="text-action-paste"] {
  5496. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5497. }
  5498. .textbox-contextmenu > menuitem[data-l10n-id="text-action-delete"] {
  5499. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5500. }
  5501. .textbox-contextmenu > menuitem[data-l10n-id="text-action-select-all"] {
  5502. --menuitem-image: url("./icons/select-all-on.svg");
  5503. }
  5504.  
  5505. /* Only searchbar */
  5506. menuitem.searchbar-paste-and-search {
  5507. }
  5508. menuitem.searchbar-clear-history {
  5509. --menuitem-image: url("chrome://browser/skin/forget.svg");
  5510. }
  5511.  
  5512. /*= context_sendTabToDevicePopupMenu =========================================*/
  5513. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  5514. > .sync-menuitem.sendtab-target[clientType="phone"] {
  5515. --menuitem-image: url("chrome://browser/skin/device-phone.svg");
  5516. }
  5517.  
  5518. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  5519. > .sync-menuitem.sendtab-target[clientType="tablet"] {
  5520. --menuitem-image: url("chrome://browser/skin/device-tablet.svg");
  5521. }
  5522.  
  5523. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  5524. > .sync-menuitem.sendtab-target[clientType="desktop"] {
  5525. --menuitem-image: url("chrome://browser/skin/device-desktop.svg");
  5526. }
  5527.  
  5528. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  5529. > .sync-menuitem.sendtab-target[clientType="tv"] {
  5530. --menuitem-image: url("chrome://browser/skin/device-tv.svg");
  5531. }
  5532.  
  5533. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  5534. > .sync-menuitem.sendtab-target[clientType="vr"] {
  5535. --menuitem-image: url("chrome://browser/skin/device-vr.svg");
  5536. }
  5537.  
  5538. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  5539. > .sync-menuitem.sendtab-target[clientType=""] {
  5540. --menuitem-image: url("./icons/send-to-device.svg");
  5541. }
  5542.  
  5543. menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
  5544. > .sync-menuitem.sendtab-target:not([clientType]) {
  5545. --menuitem-image: url("chrome://global/skin/icons/settings.svg");
  5546. }
  5547.  
  5548. /** Global Menu ***************************************************************/
  5549. /*= main-menubar =============================================================*/
  5550. #file-menu {
  5551. --menuitem-image: url("./icons/mail-inbox-all.svg");
  5552. }
  5553. #edit-menu {
  5554. --menuitem-image: url("chrome://global/skin/icons/edit.svg");
  5555. }
  5556. #view-menu {
  5557. --menuitem-image: url("./icons/content-view.svg");
  5558. }
  5559. #history-menu {
  5560. --menuitem-image: url("chrome://browser/skin/history.svg");
  5561. }
  5562. #bookmarksMenu {
  5563. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5564. }
  5565. #tools-menu {
  5566. --menuitem-image: url("./icons/toolbox.svg");
  5567. }
  5568. #helpMenu {
  5569. --menuitem-image: url("chrome://global/skin/icons/help.svg");
  5570. }
  5571.  
  5572. /*= menu_FilePopup ===========================================================*/
  5573. #menu_newNavigatorTab {
  5574. --menuitem-image: url("chrome://browser/skin/new-tab.svg");
  5575. }
  5576. #menu_newUserContext {
  5577. }
  5578. #menu_newNavigator {
  5579. --menuitem-image: url("chrome://browser/skin/window.svg");
  5580. }
  5581. #menu_newPrivateWindow {
  5582. --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
  5583. }
  5584. #menu_newFissionWindow {
  5585. }
  5586. #menu_newNonFissionWindow {
  5587. }
  5588. #menu_openLocation {
  5589. }
  5590. #menu_openFile {
  5591. --menuitem-image: url("chrome://browser/skin/open.svg");
  5592. }
  5593. #menu_close {
  5594. }
  5595. #menu_closeWindow {
  5596. }
  5597.  
  5598. #menu_savePage {
  5599. --menuitem-image: url("chrome://browser/skin/save.svg");
  5600. }
  5601. #menu_sendLink {
  5602. --menuitem-image: url("chrome://browser/skin/mail.svg");
  5603. }
  5604.  
  5605. #menu_printPreview {
  5606. }
  5607. #menu_print {
  5608. --menuitem-image: url("chrome://global/skin/icons/print.svg");
  5609. }
  5610.  
  5611. #menu_importFromAnotherBrowser {
  5612. --menuitem-image: url("chrome://browser/skin/import.svg");
  5613. }
  5614.  
  5615. #goOfflineMenuitem {
  5616. }
  5617. #menu_FileQuitItem {
  5618. --menuitem-image: url("./icons/quit.svg");
  5619. }
  5620.  
  5621. /* Mange Containers */
  5622. #menu_newUserContext menupopup menuitem:last-child {
  5623. --menuitem-image: url("chrome://global/skin/icons/settings.svg");
  5624. }
  5625.  
  5626. /*= menu_EditPopup ===========================================================*/
  5627. #menu_undo {
  5628. --menuitem-image: url("./icons/undo.svg");
  5629. }
  5630. #menu_redo {
  5631. }
  5632.  
  5633. #menu_cut {
  5634. --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  5635. }
  5636. #menu_copy {
  5637. --menuitem-image: url("./icons/edit-copy.svg");
  5638. }
  5639. #menu_paste {
  5640. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5641. }
  5642. #menu_delete {
  5643. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5644. }
  5645.  
  5646. #menu_selectAll {
  5647. --menuitem-image: url("./icons/select-all-on.svg");
  5648. }
  5649.  
  5650. #menu_find {
  5651. --menuitem-image: url("chrome://global/skin/icons/search-glass.svg");
  5652. }
  5653. #menu_findAgain {
  5654. }
  5655.  
  5656. #textfieldDirection-swap {
  5657. }
  5658.  
  5659. #menu_preferences {
  5660. --menuitem-image: url("chrome://global/skin/icons/settings.svg");
  5661. }
  5662.  
  5663. /*= menu_viewPopup ===========================================================*/
  5664. #viewToolbarsMenu {
  5665. --menuitem-image: url("./icons/toolbar.svg");
  5666. }
  5667. #viewSidebarMenuMenu {
  5668. --menuitem-image: url("chrome://browser/skin/sidebars.svg");
  5669. }
  5670.  
  5671. #viewFullZoomMenu {
  5672. --menuitem-image: url("./icons/screenshot.svg");
  5673. }
  5674. #pageStyleMenu {
  5675. --menuitem-image: url("./icons/document-css.svg");
  5676. }
  5677. #repair-text-encoding {
  5678. --menuitem-image: url("chrome://browser/skin/characterEncoding.svg");
  5679. }
  5680.  
  5681. #fullScreenItem {
  5682. --menuitem-image: url("chrome://browser/skin/fullscreen.svg");
  5683. }
  5684. #menu_readerModeItem {
  5685. --menuitem-image: url("chrome://browser/skin/reader-mode.svg");
  5686. }
  5687. #menu_showAllTabs {
  5688. }
  5689.  
  5690. #documentDirection-swap {
  5691. --menuitem-image: url("./icons/text-direction-horizontal-ltr.svg");
  5692. }
  5693.  
  5694. /* view-menu-popup sub menu */
  5695. #menu_customizeToolbars {
  5696. --menuitem-image: url("chrome://browser/skin/customize.svg");
  5697. }
  5698.  
  5699. /* viewFullZoomMenu sub menu */
  5700. #menu_zoomEnlarge {
  5701. --menuitem-image: url("chrome://browser/skin/add-circle-fill.svg");
  5702. }
  5703. #menu_zoomReduce {
  5704. --menuitem-image: url("chrome://browser/skin/subtract-circle-fill.svg");
  5705. }
  5706. #menu_zoomReset {
  5707. --menuitem-image: url("./icons/resize.svg");
  5708. }
  5709.  
  5710. /*= goPopup ==================================================================*/
  5711. #menu_showAllHistory {
  5712. --menuitem-image: url("chrome://browser/skin/history.svg");
  5713. }
  5714. #sanitizeItem {
  5715. --menuitem-image: url("chrome://browser/skin/forget.svg");
  5716. }
  5717.  
  5718. #sync-tabs-menuitem {
  5719. --menuitem-image: url("chrome://browser/skin/sync.svg");
  5720. }
  5721. #historyRestoreLastSession {
  5722. --menuitem-image: url("./icons/restore-session.svg");
  5723. }
  5724. #hiddenTabsMenu {
  5725. }
  5726. #historyUndoMenu {
  5727. --menuitem-image: url("chrome://browser/skin/tab.svg");
  5728. }
  5729. #historyUndoWindowMenu {
  5730. --menuitem-image: url("chrome://browser/skin/window.svg");
  5731. }
  5732.  
  5733. /* sub menu */
  5734. #historyUndoPopup .restoreallitem {
  5735. --menuitem-image: url("./icons/movetowindow-16.svg");
  5736. }
  5737. #historyUndoWindowPopup .restoreallitem {
  5738. --menuitem-image: url("./icons/restore-session.svg");
  5739. }
  5740.  
  5741. /*= bookmarksMenuPopup =======================================================*/
  5742. #bookmarksShowAll {
  5743. --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
  5744. }
  5745.  
  5746. #menu_bookmarkThisPage,
  5747. #menu_bookmarkAllTabs {
  5748. --menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg");
  5749. }
  5750. #menu_bookmarkThisPage[data-l10n-id="menu-bookmark-edit"] {
  5751. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5752. }
  5753.  
  5754. #bookmarksToolbarFolderMenu {
  5755. }
  5756. #menu_unsortedBookmarks {
  5757. }
  5758. #menu_mobileBookmarks {
  5759. }
  5760.  
  5761. /*= menu_ToolsPopup ==========================================================*/
  5762. #menu_openDownloads {
  5763. --menuitem-image: url("chrome://browser/skin/downloads/downloads.svg");
  5764. }
  5765. #menu_openAddons {
  5766. --menuitem-image: url("chrome://mozapps/skin/extensions/extension.svg");
  5767. }
  5768. #sync-setup {
  5769. --menuitem-image: url("chrome://browser/skin/fxa/avatar-empty.svg");
  5770. }
  5771. #sync-enable {
  5772. }
  5773. #sync-unverifieditem {
  5774. }
  5775. #sync-syncnowitem {
  5776. --menuitem-image: url("chrome://browser/skin/sync.svg");
  5777. }
  5778. #sync-reauthitem {
  5779. }
  5780.  
  5781. #webDeveloperMenu, /* Legacy */
  5782. #browserToolsMenu {
  5783. --menuitem-image: url("./icons/developer.svg");
  5784. }
  5785. #menu_pageInfo {
  5786. --menuitem-image: url("./icons/document-endnote.svg");
  5787. }
  5788.  
  5789. /* menuWebDeveloperPopup sub menu */
  5790. #enableDeveloperTools {
  5791. }
  5792. #menu_devToolbox {
  5793. }
  5794. #menu_taskManager {
  5795. --menuitem-image: url("./icons/performance.svg");
  5796. }
  5797. #menu_devtools_remotedebugging {
  5798. --menuitem-image: url("./icons/bug.svg");
  5799. }
  5800. #menu_browserToolbox {
  5801. --menuitem-image: url("./icons/window-dev-tools.svg");
  5802. }
  5803. #menu_browserContentToolbox {
  5804. --menuitem-image: url("./icons/command-frames.svg");
  5805. }
  5806. #menu_browserConsole {
  5807. --menuitem-image: url("chrome://devtools/skin/images/command-console.svg");
  5808. }
  5809. #menu_responsiveUI {
  5810. }
  5811. #menu_eyedropper {
  5812. }
  5813. #menu_pageSource {
  5814. --menuitem-image: url("./icons/document-search.svg");
  5815. }
  5816. #extensionsForDevelopers {
  5817. --menuitem-image: url("chrome://devtools/skin/images/debugging-addons.svg");
  5818. }
  5819.  
  5820. /*= menu_HelpPopup ===========================================================*/
  5821. #menu_openHelp {
  5822. --menuitem-image: url("chrome://global/skin/icons/help.svg");
  5823. }
  5824. #feedbackPage {
  5825. --menuitem-image: url("./icons/send.svg");
  5826. }
  5827. #helpSafeMode {
  5828. --menuitem-image: url("chrome://devtools/skin/images/debugging-workers.svg");
  5829. }
  5830. #troubleShooting {
  5831. --menuitem-image: url("chrome://global/skin/icons/more.svg");
  5832. }
  5833. #help_reportSiteIssue {
  5834. --menuitem-image: url("chrome://global/skin/icons/lightbulb.svg");
  5835. }
  5836. #menu_HelpPopup_reportPhishingtoolmenu {
  5837. --menuitem-image: url("chrome://global/skin/icons/warning.svg");
  5838. }
  5839. #menu_HelpPopup_reportPhishingErrortoolmenu {
  5840. }
  5841.  
  5842. #aboutName {
  5843. --menuitem-image: url("chrome://global/skin/icons/info.svg");
  5844. }
  5845.  
  5846. #helpPolicySupport {
  5847. }
  5848.  
  5849. /** Libray Menu ***************************************************************/
  5850. /*= organizeButtonPopup ======================================================*/
  5851. #newbookmark {
  5852. --menuitem-image: url("chrome://browser/skin/bookmark.svg");
  5853. }
  5854. #newfolder {
  5855. --menuitem-image: url("./icons/folder.svg");
  5856. }
  5857. #newseparator {
  5858. --menuitem-image: url("./icons/vertical-line.svg");
  5859. }
  5860.  
  5861. #orgUndo {
  5862. --menuitem-image: url("./icons/undo.svg");
  5863. }
  5864. #orgRedo {
  5865. }
  5866.  
  5867. #orgCut {
  5868. --menuitem-image: url("chrome://browser/skin/edit-cut.svg");
  5869. }
  5870. #orgCopy {
  5871. --menuitem-image: url("./icons/edit-copy.svg");
  5872. }
  5873. #orgPaste {
  5874. --menuitem-image: url("chrome://browser/skin/edit-paste.svg");
  5875. }
  5876. #orgDelete {
  5877. --menuitem-image: url("chrome://global/skin/icons/delete.svg");
  5878. }
  5879.  
  5880. #orgSelectAll {
  5881. --menuitem-image: url("./icons/select-all-on.svg");
  5882. }
  5883.  
  5884. #orgClose {
  5885. --menuitem-image: url("chrome://global/skin/icons/close.svg");
  5886. }
  5887.  
  5888. /*= viewMenuPopup ============================================================*/
  5889. #viewColumns {
  5890. --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg");
  5891. }
  5892. #viewSort {
  5893. --menuitem-image: url("./icons/text-sort-ascending.svg");
  5894. }
  5895.  
  5896. /*= maintenanceButtonPopup ===================================================*/
  5897. #backupBookmarks {
  5898. --menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
  5899. }
  5900. #fileRestoreMenu {
  5901. }
  5902.  
  5903. #fileImport {
  5904. --menuitem-image: url("chrome://browser/skin/save.svg");
  5905. }
  5906. #fileExport {
  5907. --menuitem-image: url("chrome://browser/skin/open.svg");
  5908. }
  5909.  
  5910. #browserImport {
  5911. --menuitem-image: url("chrome://browser/skin/import.svg");
  5912. }
  5913.  
  5914. /*= Waterfox =================================================================*/
  5915. /* Icons */
  5916. #appMenu-restart-button {
  5917. list-style-image: url("./icons/refresh-cw.svg") !important;
  5918. }
  5919. #menu_FileRestartItem {
  5920. --menuitem-image: url("./icons/refresh-cw.svg");
  5921. }
  5922.  
  5923. menuitem.privatetab-icon {
  5924. --menuitem-image: url("./icons/private-favicon.svg");
  5925. }
  5926.  
  5927. /* New Folder Button */
  5928. #editBMPanel_newFolderButton {
  5929. appearance: none;
  5930. border: 0;
  5931. border-radius: 4px;
  5932. background-color: var(--button-bgcolor);
  5933. color: var(--button-color, inherit);
  5934. font-weight: 600;
  5935. min-width: 0;
  5936. padding: 8px 16px;
  5937.  
  5938. /* This button is deeper in the visual hierarchy than others (notably the
  5939. buttons at the bottom of the panel), so it should be slightly smaller. */
  5940. font-size: 90%;
  5941.  
  5942. /* This button needs to align with the tree above it. */
  5943. margin-inline-start: 4px;
  5944. }
  5945.  
  5946. #editBMPanel_newFolderButton:hover {
  5947. background-color: var(--button-hover-bgcolor);
  5948. }
  5949.  
  5950. #editBMPanel_newFolderButton:hover:active {
  5951. background-color: var(--button-active-bgcolor);
  5952. }
  5953.  
  5954. /*= Tor Browser ==============================================================*/
  5955. #appMenuNewIdentity{
  5956. list-style-image: url("chrome://browser/skin/new_identity.svg");
  5957. }
  5958. #appMenuNewCircuit {
  5959. list-style-image: url("chrome://browser/skin/new_circuit.svg");
  5960. }
  5961. #appMenu_torBrowserUserManual {
  5962. list-style-image: url("chrome://browser/skin/onion.svg");
  5963. }
  5964.  
  5965. #menu_newIdentity {
  5966. --menuitem-image: url("chrome://browser/skin/new_identity.svg");
  5967. }
  5968. #menu_newCircuit {
  5969. --menuitem-image: url("chrome://browser/skin/new_circuit.svg");
  5970. }
  5971. #torBrowserUserManual {
  5972. --menuitem-image: url("chrome://browser/skin/onion.svg");
  5973. }
  5974.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!