API tools faq
paste
Guest User

Untitled

a guest
Aug 26th, 2020
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.03 KB | None | 0 0
raw download clone embed print report
  1. /* START OF USERCHROME FILE */
  2.  
  3. /*================== Simplify Darkish Purple for Firefox ==================
  4. Author: dpcdpc11.gumroad.com
  5. ENJOY!
  6. */
  7.  
  8. /*================ GLOBAL COLORS ================*/
  9. :root {
  10.     --accent-color: 54, 54, 54;
  11.     --secondary-accent-color: 140, 140, 140;
  12.     --third-accent-color: 190, 190, 190;
  13.     --light-color: 255, 255, 255;
  14.     --dark-color: 36, 36, 36;
  15.     --caption-min-color: 255, 133, 94;
  16.     --caption-max-color: 255, 100, 159;
  17.     --caption-close-color: 153, 132, 255;
  18. }
  19.  
  20. /*================ LIGHT THEME ================*/
  21. :root {
  22.     --main-bgcolor: var(--light-color);
  23.     --transparent-bgcolor: var(--dark-color);
  24. }
  25.  
  26. /*================ DARK THEME ================*/
  27. :root:-moz-lwtheme-brighttext,
  28.  
  29. .sidebar-panel[lwt-sidebar-brighttext],
  30. body[lwt-sidebar-brighttext] {
  31.     --main-bgcolor: var(--dark-color);
  32.     --transparent-bgcolor: var(--accent-color);
  33. }
  34.  
  35.  
  36. /*================== MAIN HEADER ==================*/
  37. toolbox#navigator-toolbox  {
  38.     border: 0 !important;
  39. }
  40.  
  41. /*================== TABS BAR ==================*/
  42. #titlebar #TabsToolbar {
  43.     padding: 6px 0px 2px 6px !important;
  44.     background: rgba(var(--dark-color), 1) !important;
  45. }
  46. .titlebar-spacer[type="pre-tabs"] {
  47.     /* border: 0 !important; */
  48.     display: none;
  49. }
  50.  
  51. #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after {
  52.     opacity: 0 !important;
  53. }
  54. .tab-line {
  55.     height: 0px !important;
  56. }
  57.  
  58. .tabbrowser-tab {
  59.     margin-right: 5px !important;
  60. }
  61. .tabbrowser-tab:not([visuallyselected="true"]), .tabbrowser-tab:-moz-lwtheme {
  62.     color: rgba(var(--secondary-accent-color), 1) !important;
  63. }
  64.  
  65. tab[selected="true"] .tab-content {
  66.     color: rgba(var(--secondary-accent-color), 1) !important;
  67. }
  68. tab[selected="true"] .tab-background {
  69.     background: rgba(var(--accent-color), 1) !important;
  70. }
  71.  
  72. .tabbrowser-tab::after, .tabbrowser-tab::before {
  73.     border-left: 0 !important;
  74.     opacity: 0 !important;
  75. }
  76.  
  77. .tab-close-button {
  78.     transition: all 0.3s ease !important;
  79.     border-radius: 4px !important;
  80. }
  81. .tab-close-button:hover {
  82.     fill-opacity: 0.2 !important;
  83. }
  84.  
  85. .tabbrowser-tab > .tab-stack > .tab-background {
  86.     border-radius: 4px !important;
  87. }
  88. .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"]) {
  89.     transition: all 0.3s ease !important;
  90. }
  91. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
  92.     background-color: rgba(var(--transparent-bgcolor), 0.7) !important;
  93. }
  94.  
  95.  
  96. /*================== BOOKMARKS TOOLBAR ==================*/
  97. #PersonalToolbar {
  98.     background: rgba(var(--dark-color), 1) !important;
  99.     color: rgba(var(--main-bgcolor), 1) !important;
  100.     padding-bottom: 6px !important;
  101.     padding-top: 1px !important;
  102. }
  103. toolbarbutton.bookmark-item {
  104.     transition: all 0.3s ease !important;
  105.     padding: 3px 5px !important;
  106.     border-radius:4px !important;
  107. }
  108. toolbarbutton.bookmark-item .toolbarbutton-icon {
  109.     fill: rgba(var(--main-bgcolor), 1) !important;
  110. }
  111. #PlacesToolbar toolbarseparator {
  112.     -moz-appearance: none !important;
  113.     width: 1px;
  114.     margin: 0 8px !important;
  115.     background-color: rgba(var(--main-bgcolor), 1) !important;
  116. }
  117.  
  118.  
  119. /*================== CAPTION BUTTONS ==================*/
  120. .titlebar-buttonbox {
  121.     position: relative;
  122.     margin-right: 0px;
  123.     margin-top: -10px !important;
  124. }
  125. .titlebar-button {
  126.     transition: all 0.3s ease !important;
  127.     padding: 8px 10px !important;
  128.     background: rgba(var(--dark-color), 1) !important;
  129. }
  130. .titlebar-button.titlebar-close {
  131.     padding-right: 26px !important;
  132. }
  133. .titlebar-button > .toolbarbutton-icon {
  134.     transition: all 0.3s ease !important;
  135.     list-style-image: none;
  136.     border-radius: 10px;
  137. }
  138.  
  139. .titlebar-button.titlebar-min > .toolbarbutton-icon {
  140.     background: rgba(var(--caption-min-color), 1); !important;
  141. }
  142. .titlebar-button.titlebar-max > .toolbarbutton-icon,
  143. .titlebar-button.titlebar-restore > .toolbarbutton-icon {
  144.     background: rgba(var(--caption-max-color), 1); !important;
  145. }
  146. .titlebar-button.titlebar-close > .toolbarbutton-icon {
  147.     background: rgba(var(--caption-close-color), 1); !important;
  148. }
  149.  
  150. .titlebar-button:hover > .toolbarbutton-icon {
  151.     background: rgba(var(--third-accent-color), 1); !important;
  152. }
  153. .titlebar-button.titlebar-min:hover > .toolbarbutton-icon,
  154. .titlebar-button.titlebar-max:hover > .toolbarbutton-icon,
  155. .titlebar-button.titlebar-restore:hover > .toolbarbutton-icon,
  156. .titlebar-button.titlebar-close:hover > .toolbarbutton-icon {
  157.    
  158. }
  159.  
  160.  
  161. /*================== NEW TAB BUTTON ==================*/
  162. toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
  163. toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon,
  164. toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon {
  165.     transition: all 0.3s ease !important;
  166.     fill: rgba(var(--secondary-accent-color), 1) !important;
  167.     border-radius: 4px !important;
  168.     background-color: rgba(var(--transparent-bgcolor), 0.7) !important;
  169. }
  170. toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon {
  171.     background-color: rgba(var(--transparent-bgcolor), 1) !important;
  172. }
  173.  
  174.  
  175. /*================== NAV BAR ==================*/
  176. toolbar#nav-bar {
  177.     background: rgba(var(--dark-color), 1) !important;
  178.     box-shadow: none !important;
  179.     padding-bottom: 4px !important;
  180. }
  181. toolbar#nav-bar toolbarbutton .toolbarbutton-icon,
  182. toolbar#nav-bar toolbarbutton #fxa-avatar-image {
  183.     transition: all 0.3s ease !important;
  184.     fill: rgba(var(--secondary-accent-color), 1) !important;
  185. }
  186. #urlbar > #urlbar-background {
  187.     border-radius: 4px !important;
  188.     border: 0 !important;
  189.     background-color: rgba(var(--accent-color), 1) !important;
  190. }
  191. #urlbar:not([focused="true"]) > #urlbar-background,
  192. #urlbar > #urlbar-input-container {
  193.     border-radius: 4px !important;
  194. }
  195. #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover, .tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover, .tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover, .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover, toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]), toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
  196.     background-color: rgba(var(--transparent-bgcolor), 0.7) !important;
  197. }
  198.  
  199. #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active), .findbar-button:not([disabled="true"]):-moz-any([checked="true"], :hover:active), toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]), toolbarbutton.bookmark-item[open="true"], toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack {
  200.     background-color: rgba(var(--transparent-bgcolor), 0.2) !important;
  201. }
  202.  
  203. :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
  204.     background-color: transparent !important;
  205. }
  206.  
  207. .urlbar-input-box {
  208.     color: rgba(var(--third-accent-color), 1) !important;
  209. }
  210.  
  211.  
  212. /*================== SIDEBAR ==================*/
  213. #sidebar-box,
  214. .sidebar-panel[lwt-sidebar-brighttext] {
  215.     background-color: rgba(var(--main-bgcolor), 1) !important;
  216. }
  217. #sidebar-header {
  218.     border-color: rgba(var(--accent-color), 1) !important;
  219. }
  220. .sidebar-splitter {
  221.     border-color: rgba(var(--accent-color), 1) !important;
  222. }
  223. #sidebar-switcher-target:hover,
  224. #sidebar-switcher-target:hover:active, #sidebar-switcher-target.active,
  225. #viewButton:hover,
  226. #viewButton[open] {
  227.     background-color: rgba(var(--accent-color), 1) !important;
  228. }
  229. .sidebar-placesTreechildren {
  230.     color: unset !important;
  231. }
  232. #search-box,
  233. .search-box {
  234.     -moz-appearance: none !important;
  235.     background-color: rgba(var(--accent-color), 1) !important;
  236.     border-radius: 4px !important;
  237.     color: unset !important;
  238. }
  239. .content-container {
  240.     background-color: rgba(var(--main-bgcolor), 1) !important;
  241.     color: unset !important;
  242. }
  243. #viewButton {
  244.     color: unset !important;
  245. }
  246. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_urlbar_megabar.css made available under Mozilla Public License v. 2.0
  247. See the above repository for updates as well as full license text. */
  248.  
  249. /* Make urlbar appear more compact */
  250. #urlbar[breakout]{
  251.     margin-inline-start: 0px !important;
  252.     width: 100% !important;
  253.     left: 0 !important;
  254.     top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  255.   }
  256.   #urlbar[breakout]:not([open]){ bottom: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; }
  257.   .urlbarView{ margin-inline: 0 !important; width: auto !important; }
  258.   .urlbarView-row{ padding: 0 2px !important; }
  259.   .urlbarView-row-inner{ padding-inline-start: 4px !important; }
  260.   #urlbar-background{ animation: none !important; }
  261.   #urlbar-input-container{ padding: 0 !important; height: 100% !important; }
  262.   #identity-box{ padding-block: var(--urlbar-icon-padding) }
  263.   .urlbarView > .search-one-offs:not([hidden]){ padding-block: 0px !important; }
  264.  
  265. /* END OF USERCHROME FILE */
  266.  
  267.  
  268.  
  269.  
  270.  
  271. /* START OF USERCONTENT FILE */
  272.  
  273. /*================ IMPORT USERCHROME.CSS ================*/
  274. @import "userChrome.css";
  275.  
  276. /*================== NEW TAB BG COLOR ==================*/
  277. @media (prefers-color-scheme: dark) {
  278. @-moz-document url("about:newtab"), url("about:home"), url("about:blank") {
  279.  body.activity-stream { background-color: rgba(var(--dark-color), 1) !important;}
  280. }
  281. }
  282.  
  283. @media (prefers-color-scheme: light) {
  284. @-moz-document url("about:newtab"), url("about:home"), url("about:blank") {
  285.  body.activity-stream { background-color: rgba(var(--light-color), 1) !important;}
  286. }
  287. }
  288.  
  289. /*================== SEARCH BAR ==================*/
  290. .search-wrapper input {
  291.     transition: all 0.3s ease !important;
  292.     background: rgba(var(--accent-color), 0.2) var(--newtab-search-icon) 12px center no-repeat !important;
  293.     background-size: 20px !important;
  294.     border: 2px solid !important;
  295.     border-color: rgba(var(--accent-color), 0.3) !important;
  296.     box-shadow: none !important;
  297. }
  298. .search-wrapper .search-inner-wrapper:hover input,
  299. .search-wrapper .search-inner-wrapper:active input,
  300. .search-wrapper input:focus {
  301.     border-color: rgba(var(--accent-color), 0.6) !important;
  302. }
  303.  
  304. .search-wrapper .search-button,
  305. .search-wrapper .search-button {
  306.     transition: all 0.3s ease !important;
  307. }
  308. .search-wrapper .search-button:focus,
  309. .search-wrapper .search-button:hover {
  310.     background-color: rgba(var(--accent-color), 1) !important;
  311. }
  312.  
  313. /*================== SEARCH BAR RESULTS ==================*/
  314. .contentSearchSuggestionTable .contentSearchSuggestionsContainer,
  315. .contentSearchSuggestionTable .contentSearchHeader {
  316.     background-color: rgba(var(--accent-color), 1) !important;
  317. }
  318. .contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
  319. .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
  320.     background-color: rgba(var(--secondary-accent-color), 0.2) !important;
  321. }
  322.  
  323. .contentSearchSuggestionTable .contentSearchHeader,
  324. .contentSearchSuggestionTable .contentSearchSettingsButton,
  325. .contentSearchSuggestionTable .contentSearchOneOffsTable {
  326.     border-color: rgba(var(--secondary-accent-color), 0.2) !important;
  327. }
  328.  
  329. .contentSearchSuggestionTable {
  330.     box-shadow: none !important;
  331.     border: 2px solid rgba(var(--secondary-accent-color), 0.2) !important;
  332.     border-radius: 3px !important;
  333. }
  334.  
  335. /* END OF USERCONTENT FILE */
  336.  
  337.  
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!