API tools faq
paste
Guest User

Untitled

a guest
Nov 26th, 2024
256
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.60 KB | None | 0 0
raw download clone embed print report
  1. /*** Megabar Styler General ***/
  2.  
  3. /*** General Preferences ***/
  4. :root {
  5. /* Number of pixels of enlargement when URL bar is focused */
  6. --mbarstyler-popout-pixels: 0px; /* [0px - 7px] */
  7.  
  8. /* Top Bar Display or Not */
  9. --mbarstyler-top-bar-display: none; /* [block,none] */
  10.  
  11. /* Font sizes (default: 13.8px for title, 10.2px for URL) */
  12. --mbarstyler-title-font-size: 16px; /* [13px - 18px] */
  13. --mbarstyler-url-font-size: 14px; /* [12px - 16px] */
  14.  
  15. /* Rows to show without scrolling */
  16. --mbarstyler-max-rows-without-scrolling: 10;
  17.  
  18. /* Bottom border for each result row */
  19. --mbarstyler-bottom-border-width: 1px; /* [0px or 1px] */
  20.  
  21. /* Match display style */
  22. --mbarstyler-match-weight: 700; /* [400,700] */
  23. --mbarstyler-match-background-opacity: 0.05; /* [0.0,0.05,0.1] */
  24. }
  25.  
  26. /*** URL bar enlargement or lack thereof ***/
  27.  
  28. /* Compute new position, width, and padding */
  29. #urlbar[breakout][breakout-extend] {
  30. top: calc(5px - var(--mbarstyler-popout-pixels)) !important;
  31. left: calc(0px - var(--mbarstyler-popout-pixels)) !important;
  32. width: calc(100% + (2 * var(--mbarstyler-popout-pixels))) !important;
  33. padding: var(--mbarstyler-popout-pixels) !important;
  34. }
  35. [uidensity="compact"] #urlbar[breakout][breakout-extend] {
  36. top: calc(3px - var(--mbarstyler-popout-pixels)) !important;
  37. }
  38. [uidensity="touch"] #urlbar[breakout][breakout-extend] {
  39. top: calc(4px - var(--mbarstyler-popout-pixels)) !important;
  40. }
  41.  
  42. /* Prevent shift of URL bar contents */
  43. #urlbar[breakout][breakout-extend] > #urlbar-input-container {
  44. height: var(--urlbar-height) !important;
  45. padding: 0 !important;
  46. }
  47.  
  48. /* Do not animate */
  49. #urlbar[breakout][breakout-extend] > #urlbar-background {
  50. animation: none !important;;
  51. }
  52.  
  53. /* Remove shadows */
  54. #urlbar[breakout][breakout-extend] > #urlbar-background {
  55. box-shadow: none !important;
  56. }
  57.  
  58. /*** Top "Blue Bar" Display ***/
  59.  
  60. .urlbarView-row:first-of-type {
  61. display: var(--mbarstyler-top-bar-display) !important;
  62. }
  63.  
  64. /*** Font Sizes and Scrolling ***/
  65.  
  66. /* Title font-size */
  67. .urlbarView-row .urlbarView-title {
  68. font-size: var(--mbarstyler-title-font-size) !important;
  69. }
  70.  
  71. /* URL / action font-size */
  72. .urlbarView-row .urlbarView-secondary,
  73. .urlbarView-row .urlbarView-url,
  74. .urlbarView-row .urlbarView-action {
  75. font-size: var(--mbarstyler-url-font-size) !important;
  76. }
  77.  
  78. /* Set max-height for items visible without scrolling */
  79. #urlbarView-results, #urlbar-results {
  80. height: unset !important;
  81. max-height: calc(2.5 * (var(--mbarstyler-title-font-size) + var(--mbarstyler-bottom-border-width)) * var(--mbarstyler-max-rows-without-scrolling)) !important;
  82. }
  83. #urlbar-results {
  84. overflow-y: auto !important;
  85. }
  86.  
  87. /* Clean up extra spacing at the top and bottom */
  88. #urlbar-results {
  89. padding-top: 0 !important;
  90. padding-bottom: 0 !important;
  91. }
  92.  
  93. /* Subtle border between results */
  94. .urlbarView-row:not(:last-of-type) {
  95. border-bottom: var(--mbarstyler-bottom-border-width) solid rgba(0, 0, 0, 0.1) !important;
  96. }
  97.  
  98. /* Match Styling Like Fx43-47 */
  99. [lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-title strong,
  100. [lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-url strong {
  101. font-weight: var(--mbarstyler-match-weight) !important;
  102. box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, calc(var(--mbarstyler-match-background-opacity) * 2));
  103. background-color: rgba(0, 0, 0, var(--mbarstyler-match-background-opacity));
  104. border-radius: 2px;
  105. }
  106. [lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-title strong,
  107. [lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-url strong {
  108. font-weight: var(--mbarstyler-match-weight) !important;
  109. box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, calc(var(--mbarstyler-match-background-opacity) * 2));
  110. background-color: rgba(255, 255, 255, var(--mbarstyler-match-background-opacity));
  111. border-radius: 2px;
  112. }
  113.  
  114. /*** End of: Megabar Styler General ***/
  115.  
  116.  
  117. /*** Megabar Styler Two-Row Flex Layout - version 2020-04-12 ***/
  118.  
  119. /* !!! Requires variables from Megabar Styler General !!! */
  120.  
  121. /* Adjust heights for scrolling */
  122. #urlbarView-results, #urlbar-results {
  123. max-height: calc(1.825 * (var(--mbarstyler-title-font-size) + var(--mbarstyler-url-font-size) + var(--mbarstyler-bottom-border-width)) * var(--mbarstyler-max-rows-without-scrolling)) !important;
  124. }
  125. /* Wrap the url (adapted from Fx75 narrow bar design) */
  126. .urlbarView-row-inner {
  127. flex-wrap: wrap !important;
  128. padding-top: 20 !important;
  129. padding-bottom: 4px !important;
  130. }
  131. .urlbarView-no-wrap {
  132. max-width: 100% !important;
  133. flex-basis: 100% !important;
  134. position: relative;
  135. }
  136.  
  137. /* Adjust horizontal and vertical URL position */
  138. .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url {
  139. padding-inline-start: calc(6px + 2px + /* favicon */ 16px) !important;
  140. margin-top: calc(6px + (var(--mbarstyler-url-font-size) - var(--mbarstyler-title-font-size)));
  141. }
  142.  
  143. /* Hide the separator if there's a URL */
  144. .urlbarView.megabar[actionoverride] .urlbarView-row[has-url] .urlbarView-title-separator,
  145. .urlbarView.megabar .urlbarView-row[has-url]:not([type$=tab]) .urlbarView-title-separator,
  146. .urlbarView.megabar .urlbarView-row[type=remotetab]:-moz-any(:hover, [selected]) .urlbarView-title-separator {
  147. display: none !important;
  148. }
  149.  
  150. /* Move Switch Tab info to URL line :: added 2020-04-12 */
  151.  
  152. /* Make sure URL is always visible */
  153. .urlbarView-row[type="switchtab"][has-url="true"] .urlbarView-url {
  154. visibility: visible !important;
  155. }
  156. /* Show Switch to Tab or Open depending on [actionoverride] */
  157. .urlbarView:not([actionoverride]) .urlbarView-row[type="switchtab"][has-url="true"] .urlbarView-url::before {
  158. content: "Switch to Tab: ";
  159. font-style: italic;
  160. color: var(--urlbar-popup-action-color);
  161. }
  162. .urlbarView[actionoverride] .urlbarView-row[type="switchtab"][has-url="true"] .urlbarView-url::before {
  163. content: "Open: ";
  164. font-style: italic;
  165. color: var(--urlbar-popup-action-color);
  166. }
  167. /* Hide the existing Action phrase and separator */
  168. .urlbarView-row[type="switchtab"][has-url="true"] .urlbarView-action,
  169. .urlbarView-row[type="switchtab"][has-url="true"] .urlbarView-title-separator {
  170. display: none !important;
  171. }
  172.  
  173. /*** End of: Megabar Styler Two-Row Flex Layout ***/
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180. /*SHARP TABS*/
  181. :root[id]{
  182. --tab-block-margin: 0px !important;
  183. --tabs-shadow-size: 1px !important;
  184.  
  185. /* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color */
  186. --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
  187. }
  188.  
  189. /* Uncomment next line to force specific color for tab top line */
  190. #tabbrowser-tabs{ --lwt-tab-line-color: white !important; }
  191.  
  192. /* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.
  193. #nav-bar{
  194. box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;
  195. }
  196. .tab-background[selected]{
  197. border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;
  198. border-bottom-color: transparent !important;
  199. }
  200. */
  201. #TabsToolbar{
  202. --toolbarbutton-inner-padding: 7px !important;
  203. }
  204. /* Few exceptions for default light theme */
  205. #navigator-toolbox:not([movingtab]):-moz-lwtheme > #titlebar > #TabsToolbar{
  206. --toolbar-bgcolor: transparent;
  207. }
  208.  
  209. .tab-background[selected]:not(:-moz-lwtheme){ background: var(--toolbar-bgcolor) !important; }
  210.  
  211. #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-badge-stack,
  212. #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important; }
  213.  
  214. /* tabs newtab button needs some special styling... */
  215. #tabs-newtab-button{
  216. padding-inline: 0 !important;
  217. -moz-box-align: stretch !important; /* Fx < 112 compatibility */
  218. align-items: stretch !important;
  219. }
  220. /* We draw the icon as background-image to get correct scaling regardless of toolbar height */
  221. #tabs-newtab-button > .toolbarbutton-icon{
  222. border-radius: 0 !important;
  223. width: var(--tab-min-height) !important;
  224. height: initial !important;
  225. list-style-image: none;
  226. background-image: url(chrome://global/skin/icons/plus.svg);
  227. background-position: center;
  228. background-repeat: no-repeat;
  229. }
  230.  
  231. #scrollbutton-up,
  232. #scrollbutton-down{
  233. border-radius: 0 !important;
  234. border-width: 0 !important;
  235. padding-inline: 3px !important;
  236. margin-bottom: var(--uc-compat-scrollbutton-margin,0px) !important; /* set in hide_tabs_scrollbuttons.css */
  237. }
  238.  
  239. /* This is for hide_tabs_scrollbuttons.css compatibility since we modify scrollbutton width */
  240. #tabbrowser-tabs[overflow]{
  241. --uc-scrollbox-base-margin: -22px !important;
  242. }
  243.  
  244. /* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
  245. .tabbrowser-tab[selected]{
  246. position: relative;
  247. z-index: 1;
  248. }
  249.  
  250. /* tab shaping */
  251. .tabbrowser-tab{ padding-inline: 0 !important; }
  252.  
  253. :root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{
  254. min-height: calc(var(--tab-min-height) + 2px) !important;
  255. }
  256.  
  257. .tab-content[pinned]{ padding-inline: 11px !important; }
  258.  
  259. .tab-background{
  260. border-radius: 0 !important;
  261. box-shadow: none !important;
  262. border-top: 0 !important;
  263. outline: none !important;
  264. }
  265.  
  266. .tab-background:not([selected])[multiselected]{
  267. background: color-mix(in srgb, currentColor 11%, transparent) !important;
  268. margin-inline-start: -1px;
  269. }
  270.  
  271. /* Line to mark selected tab */
  272. .tab-background[selected]::before,
  273. .tabbrowser-tab:hover > stack > .tab-background::before{
  274. display: flex;
  275. height: 2px;
  276. content: "";
  277. }
  278. .tab-stack:hover > .tab-background::before{
  279. background-color: inherit;
  280. }
  281. .tab-stack > .tab-background[selected]::before{
  282. background-color: highlight;
  283. background-image: linear-gradient(var(--lwt-tab-line-color),var(--lwt-tab-line-color));
  284. }
  285. /* Photon-like tab on hover animation for the top line */
  286. @keyframes tab-onhover-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
  287.  
  288. .tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }
  289.  
  290. /* Disable animation for selected and pinned tabs */
  291. .tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
  292.  
  293. /* moves context-line to the bottom */
  294. .tab-context-line{
  295. -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
  296. order: 2;
  297. margin-inline: 10px !important;
  298. }
  299. #nav-bar { border-top: 0px !important }
  300. /*RELOAD BUTTON*/
  301. #tabContextMenu #context_reloadTab {
  302. order: -1 !important;
  303. }
  304.  
  305. #tabContextMenu #context_reloadSelectedTabs {
  306. order: -1 !important;
  307. }
  308.  
  309.  
  310. /*** Tighten up vertical drop-down(bookmark)/context/popup menu spacing ***/
  311. menupopup > menuitem, menupopup > menu {
  312. padding-block: 3px !important;
  313. }
  314. :root {
  315. --arrowpanel-menuitem-padding: 1px 2px !important;
  316. }
  317.  
  318.  
  319. /*SHARP CORNERS*/
  320.  
  321. :root{
  322.  
  323. --arrowpanel-border-radius: 0 !important;
  324. --tab-border-radius: 0 !important;
  325. --toolbarbutton-border-radius: 0 !important;
  326. --arrowpanel-menuitem-border-radius: 0 !important;
  327. }
  328. .menupopup-arrowscrollbox{ border-radius: 0px !important; }
  329.  
  330. menupopup {
  331. border-radius: 0 !important;
  332. --panel-border-radius: 0 !important;
  333. }
  334.  
  335. #nav-bar:-moz-lwtheme {
  336. box-shadow: none !important;
  337. }
  338.  
  339.  
  340. /* Tab list button */
  341. #tabbrowser-tabs:not([overflow]) ~ #alltabs-button {
  342. display: none !important;
  343. }
  344.  
  345.  
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!