mxrixs

Untitled

Jun 13th, 2020
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.16 KB | None | 0 0
  1. @import "global/variables.css";
  2. @import "global/global.css";
  3. @import "icons/icons.css";
  4. @import "tabbar/tabbar.css";
  5. @import "navbar/navbar.css";
  6. @import "personalbar/personalbar.css";
  7. @import "popup/popup.css";
  8. @import "urlbar/urlbar.css";
  9. @import "findbar/findbar.css";
  10.  
  11. /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
  12.                                        TABS
  13. \*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  14.  
  15. :root[tabsintitlebar]{
  16.   --uc-window-control-width: 100px; /* Space reserved for window controls */
  17.   --uc-window-drag-space-width: 24px; /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
  18. }
  19.  
  20. #nav-bar{
  21.   border-inline: var(--uc-window-drag-space-width,0px) solid var(--toolbar-bgcolor);
  22.   border-inline-style: solid !important;
  23.   border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px));
  24. }
  25.  
  26. /* Use this pref to check Mac OS where window controls are on left */
  27. /* This pref defaults to true on Mac and doesn't actually do anything on other platformfts. So if your system has window controls on LEFT side you can set the pref to true */
  28. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
  29.   :root{ --uc-window-control-width: 60px; }
  30.   :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
  31.     border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px)) var(--uc-window-drag-space-width,0px)
  32.   }
  33. }
  34.  
  35. :root{ --uc-toolbar-height: 32px; }
  36.  
  37. :root:not([uidensity="compact"]){--uc-toolbar-height: 38px}
  38.  
  39. #TabsToolbar{ visibility: collapse !important }
  40.  
  41. :root:not([inFullscreen]) #nav-bar{
  42.   margin-top: calc(0px - var(--uc-toolbar-height));
  43. }
  44.  
  45. #toolbar-menubar{
  46.   min-height:unset !important;
  47.   height:var(--uc-toolbar-height) !important;
  48.   position: relative;
  49. }
  50.  
  51. #main-menubar{
  52.   -moz-box-flex: 1;
  53.   background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  54.   background-clip: padding-box;
  55.   border-right: 30px solid transparent;
  56.   border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
  57. }
  58.  
  59. #toolbar-menubar:not([inactive]){ z-index: 2 }
  60. #toolbar-menubar[inactive] > #menubar-items {
  61.   opacity: 0;
  62.   pointer-events: none;
  63.   margin-left: var(--uc-window-drag-space-width,0px)
  64. }
  65.  
  66.  
  67. /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
  68.                                SEARCHBAR STYLER
  69. \*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  70.   /*** General Preferences ***/
  71.   :root {
  72.     /* Number of pixels of enlargement when URL bar is focused */
  73.     --mbarstyler-popout-pixels: 1px; /* [0px - 7px] */
  74.  
  75.     /* Top Bar Display or Not */
  76.     --mbarstyler-top-bar-display: none; /* [block,none] */
  77.  
  78.     /* Font sizes (default: 13.8px for title, 10.2px for URL) */
  79.     --mbarstyler-title-font-size: 14px; /* [13px - 18px] */
  80.     --mbarstyler-url-font-size: 12px; /* [12px - 16px] */
  81.  
  82.     /* Rows to show without scrolling */
  83.     --mbarstyler-max-rows-without-scrolling: 20;
  84.  
  85.     /* Bottom border for each result row */
  86.     --mbarstyler-bottom-border-width: 1px; /* [0px or 1px] */
  87.  
  88.     /* Match display style */
  89.     --mbarstyler-match-weight: 700; /* [400,700] */
  90.     --mbarstyler-match-background-opacity: 0.0; /* [0.0,0.05,0.1] */
  91.   }
  92.  
  93.   /*** URL bar enlargement or lack thereof ***/
  94.  
  95.   /* Compute new position, width, and padding */
  96.   #urlbar[breakout][breakout-extend] {
  97.     top: calc(5px - var(--mbarstyler-popout-pixels)) !important;
  98.     left: calc(0px - var(--mbarstyler-popout-pixels)) !important;
  99.     width: calc(100% + (2 * var(--mbarstyler-popout-pixels))) !important;
  100.     padding: var(--mbarstyler-popout-pixels) !important;
  101.   }
  102.   [uidensity="compact"] #urlbar[breakout][breakout-extend] {
  103.     top: calc(3px - var(--mbarstyler-popout-pixels)) !important;
  104.   }
  105.   [uidensity="touch"] #urlbar[breakout][breakout-extend] {
  106.     top: calc(4px - var(--mbarstyler-popout-pixels)) !important;
  107.   }
  108.  
  109.   /* Prevent shift of URL bar contents */
  110.   #urlbar[breakout][breakout-extend] > #urlbar-input-container {
  111.     height: var(--urlbar-height) !important;
  112.     padding: 0 !important;
  113.   }
  114.  
  115.   /* Do not animate */
  116.   #urlbar[breakout][breakout-extend] > #urlbar-background {
  117.     animation: none !important;;
  118.   }
  119.  
  120.   /* Remove shadows */
  121.   #urlbar[breakout][breakout-extend] > #urlbar-background {
  122.     box-shadow: none !important;
  123.   }
  124.  
  125.   /*** Top "Blue Bar" Display ***/
  126.  
  127.   .urlbarView-row:first-of-type {
  128.     display: var(--mbarstyler-top-bar-display) !important;
  129.   }
  130.  
  131.   /*** Font Sizes and Scrolling ***/
  132.  
  133.   /* Title font-size */
  134.   .urlbarView-row .urlbarView-title {
  135.     font-size: var(--mbarstyler-title-font-size) !important;
  136.   }
  137.  
  138.   /* URL / action font-size */
  139.   .urlbarView-row .urlbarView-secondary,
  140.   .urlbarView-row .urlbarView-url,
  141.   .urlbarView-row .urlbarView-action {
  142.     font-size: var(--mbarstyler-url-font-size) !important;
  143.   }
  144.  
  145.   /* Set max-height for items visible without scrolling */
  146.   #urlbarView-results, #urlbar-results {
  147.     height: unset !important;
  148.     max-height: calc(2.5 * (var(--mbarstyler-title-font-size) + var(--mbarstyler-bottom-border-width)) * var(--mbarstyler-max-rows-without-scrolling)) !important;
  149.   }
  150.   #urlbar-results {
  151.     overflow-y: auto !important;
  152.   }
  153.  
  154.   /* Clean up extra spacing at the top and bottom */
  155.   #urlbar-results {
  156.     padding-top: 0 !important;
  157.     padding-bottom: 0 !important;
  158.   }
  159.  
  160.   /* Subtle border between results */
  161.   .urlbarView-row:not(:last-of-type) {
  162.     border-bottom: var(--mbarstyler-bottom-border-width) solid rgba(0, 0, 0, 0.1) !important;
  163.   }
  164.  
  165.   /* Match Styling Like Fx43-47 */
  166.   [lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-title strong,
  167.   [lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-url strong {
  168.     font-weight: var(--mbarstyler-match-weight) !important;
  169.     box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, calc(var(--mbarstyler-match-background-opacity) * 2));
  170.     background-color: rgba(0, 0, 0, var(--mbarstyler-match-background-opacity));
  171.     border-radius: 2px;
  172.   }
  173.   [lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-title strong,
  174.   [lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-url strong {
  175.     font-weight: var(--mbarstyler-match-weight) !important;
  176.     box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, calc(var(--mbarstyler-match-background-opacity) * 2));
  177.     background-color: rgba(255, 255, 255, var(--mbarstyler-match-background-opacity));
  178.     border-radius: 2px;
  179.   }
  180.  
  181.   /* changes colour of coloured border */
  182.    #main-window{
  183.      --toolbar-field-focus-border-color: rgb(0, 255, 204) !important;  /* theme property: toolbar_field_border_focus */
  184.    }
  185.  
  186.  
  187.   #urlbar, .searchbar-textbox {
  188.     background-color: #A1C5C5 !important;
  189.   }
  190.  
  191.   #urlbar:hover, .searchbar-textbox {
  192.     background-color: #A1C5C5 !important;
  193.   }
  194.  
  195.   #urlbar{
  196.       border-radius: 2em !important;
  197.   }
  198.  
  199. /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
  200.                                 BOOKMARKSICON COLOUR
  201. \*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  202.  
  203. #bookmarks-view treechildren::-moz-tree-image(container),
  204. #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
  205. #PlacesToolbarItems menu[container="true"] .menu-iconic-left,
  206. #BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
  207. #bookmarksMenu menu[container="true"] .menu-iconic-icon {
  208.     fill: #00CCCC !important;               /* orange; customizable */
  209.     margin-right: 8px;                      /* correction for the Firefox default imperfection */
  210. }
  211.  
  212. /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
  213.                                   ADRESSBAR CLEANUP
  214. \*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  215.  
  216. #pageActionSeparator, #pocket-button, #pageActionButton {
  217.     display: none !important;               /* customizable: delete if you want the objects back */
  218. }
  219.  /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
  220.                                     TAB SIDEBAR
  221.  \*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  222.  /* material firefox imports */
  223. @import "global/variables.css";
  224. @import "global/global.css";
  225. @import "icons/icons.css";
  226. @import "tabbar/tabbar.css";
  227. @import "navbar/navbar.css";
  228. @import "personalbar/personalbar.css";
  229. @import "popup/popup.css";
  230. @import "urlbar/urlbar.css";
  231. @import "findbar/findbar.css";
  232. @import "vars.css";
  233.  
  234. /* show bookmarks toolbar on new tab only */
  235. #main-window #PersonalToolbar {
  236.   visibility : visible !important;
  237.   z-index    : 1!important;
  238.   position   : relative!important;
  239.   margin-left: var(--initial-width);              /* shift toolbar to the right based on initial width */
  240.   margin-top : var(--toolbar-height) !important;
  241. }
  242.  
  243. #main-window[title^="Firefox Developer Edition"] #PersonalToolbar {
  244.   visibility: visible !important;
  245.   margin-top: -1px !important;
  246. }
  247.  
  248. /*
  249. There's two main sidebar components.
  250. 1. #sidebar-box (outer)
  251. 2. #sidebar (inner)
  252. */
  253. /* lock outer to height by doing the inverse margin of the toolbar element */
  254. /* set outer width = initial width */
  255. #sidebar-box {
  256.   z-index      : 1000 !important;
  257.   position     : relative!important;
  258.   margin-top   : var(--menubar-height) !important;
  259.   padding-top  : calc(-1*var(--menubar-height));
  260.   min-width    : var(--initial-width) !important;
  261.   max-width    : var(--initial-width) !important;
  262. }
  263.  
  264. #sidebar-header, #sidebar-splitter{
  265.   display: none !important;
  266. }
  267.  
  268. /* inner width = expanded width & move inner to only show initial-width long section */
  269. #sidebar-box #sidebar {
  270.   min-width    : var(--sidebar-width) !important;
  271.   max-width    : var(--sidebar-width) !important;
  272.   background   : var(--sidebar-background-color);
  273.   transform    : translateX(calc(var(--initial-width) - var(--sidebar-width))) !important;
  274.   transition   : all 0.2s ease-in-out;
  275. }
  276.  
  277. /* move inner to show entire sidebar */
  278. #sidebar-box #sidebar:hover {
  279.   transform : translateX(0) !important;
  280.   box-shadow: 2px 0 33px var(--shadow-color);
  281. }
  282.  
  283. #sidebar-box[sidebarcommand="viewBookmarksSidebar"] #sidebar {
  284.   transform : translateX(0) !important;
  285.   box-shadow: 2px 0 33px var(--shadow-color);
  286. }
  287.  
  288. #main-window[title^="Firefox Developer Edition"] #sidebar-box {
  289.   margin-top: var(--toolmenubar-height) !important;
  290. }
  291.  
  292.  
  293. /* Hide the title bar */
  294. #titlebar{ visibility: visible; !important; }
  295.  
  296. /* hide normal horizontal tab bar */
  297. #TabsToolbar { visibility: collapse !important; }
  298.  
  299. #sidebar { border-right: none !important; }
  300.  
  301. toolbar#nav-bar {
  302.   padding-top   : 12px;
  303.   padding-bottom: 7px;
  304.   margin-left   : var(--initial-width);
  305.   padding-left  : 7px;
  306.   border        : none !important;
  307. }
  308.  
  309. toolbar{
  310.   border: none !important;
  311. }
  312. /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
  313.                          Remove tabs but not window controls
  314. \*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  315.  
  316.  
  317.  
  318.  
  319. :root[tabsintitlebar]{
  320.   --uc-window-control-width: 138px; /* Space reserved for window controls */
  321.   --uc-window-drag-space-width: 32px; /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
  322. }
  323.  
  324. #nav-bar{
  325.   border-inline: var(--uc-window-drag-space-width,0px) solid var(--toolbar-bgcolor);
  326.   border-inline-style: solid !important;
  327.   border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px));
  328. }
  329.  
  330. /* Use this pref to check Mac OS where window controls are on left */
  331. /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
  332. @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
  333.   :root{ --uc-window-control-width: 72px; }
  334.   :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
  335.     border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px)) var(--uc-window-drag-space-width,0px)
  336.   }
  337. }
  338.  
  339. :root{ --uc-toolbar-height: 24px; }
  340.  
  341. :root:not([uidensity="compact"]){--uc-toolbar-height: 38px}
  342.  
  343. #TabsToolbar{ visibility: collapse !important }
  344.  
  345. :root:not([inFullscreen]) #nav-bar{
  346.   margin-top: calc(0px - var(--uc-toolbar-height));
  347. }
  348.  
  349. #toolbar-menubar{
  350.   min-height:unset !important;
  351.   height:var(--uc-toolbar-height) !important;
  352.   position: relative;
  353. }
  354.  
  355. #main-menubar{
  356.   -moz-box-flex: 1;
  357.   background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  358.   background-clip: padding-box;
  359.   border-right: 30px solid transparent;
  360.   border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px
  361. }
  362.  
  363. #toolbar-menubar:not([inactive]){ z-index: 2 }
  364. #toolbar-menubar[inactive] > #menubar-items {
  365.   opacity: 0;
  366.   pointer-events: none;
  367.   margin-left: var(--uc-window-drag-space-width,0px)
  368. }
  369.  
  370. :root
  371. {
  372.     --button-size: 24px; /* is this used? */
  373.     --icon-size: 18px; /* is this used? */
  374. }
  375.  
  376.  
  377. /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
  378.                                   WINDOW COLTROLS
  379. \*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
  380.  
  381. toolbarbutton.titlebar-button.titlebar-min {
  382.  padding-left: 3px !important;
  383.  padding-right: 3px !important;
  384.  padding-bottom: 3px !important;
  385.  padding-top: 3px !important;
  386.  margin-left: 5px !important;
  387.  margin-right: 5px !important;
  388.  margin-top: 5px !important;
  389.  margin-bottom: 5px !important;
  390.  border-radius: 20px;
  391. }
  392.  
  393. toolbarbutton.titlebar-button.titlebar-max {
  394.  padding-left: 3px !important;
  395.  padding-right: 3px !important;
  396.  padding-bottom: 3px !important;
  397.  padding-top: 3px !important;
  398.  margin-left: 5px !important;
  399.  margin-right: 5px !important;
  400.  margin-top: 5px !important;
  401.  margin-bottom: 5px !important;
  402.  border-radius: 20px !important;
  403. }
  404.  
  405. toolbarbutton.titlebar-button.titlebar-restore {
  406.  padding-left: 3px !important;
  407.  padding-right: 3px !important;
  408.  padding-bottom: 3px !important;
  409.  padding-top: 3px !important;
  410.  margin-left: 5px !important;
  411.  margin-right: 5px !important;
  412.  margin-top: 5px !important;
  413.  margin-bottom: 5px !important;
  414.  border-radius: 20px !important;
  415. }
  416.  
  417. toolbarbutton.titlebar-button.titlebar-close {
  418.  padding-left: 3px !important;
  419.  padding-right: 3px !important;
  420.  padding-bottom: 3px !important;
  421.  padding-top: 3px !important;
  422.  margin-left: 5px !important;
  423.  margin-right: 5px !important;
  424.  margin-top: 5px !important;
  425.  margin-bottom: 5px !important;
  426.  border-radius: 20px;
  427. }
  428.  
  429. toolbarbutton.titlebar-button.titlebar-max>image{
  430.  border: 2px #00B19E !important;
  431.  color: #00B19E !important;
  432.  opacity: 1 !important;
  433. }
  434.  
  435. toolbarbutton.titlebar-button.titlebar-close>image {
  436.  border: 2px #00B19E !important;
  437.  color: #00B19E !important;
  438.  opacity: 1 !important;
  439. }
  440.  
  441.  
  442. toolbarbutton.titlebar-button.titlebar-min>image {
  443.  border: 2px #00B19E !important;
  444.  color: #00B19E !important;
  445.  opacity: 1 !important;
  446. }
Add Comment
Please, Sign In to add comment