API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 14th, 2022
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 34.97 KB | None | 0 0
raw download clone embed print report
  1.  
  2. @import "./config/general_variables.css";
  3. @import "./css/buttons/buttons_on_navbar_windows_classic_theme_appearance.css"; /**/
  4. @import "./css/buttons/icons_colorized.css"; /**/
  5. @import "./css/locationbar/pageaction_separator_in_location_bar_hidden.css"; /**/
  6. @import "./css/locationbar/ac_popup_megabar_searchwith_and_visit_items_hidden.css"; /**/
  7. @import "./css/locationbar/ac_popup_megabar_search_engines_hidden.css"; /**/
  8.  
  9.  
  10. /* Remove Star bookmark icon */
  11.  #star-button { display: none !important; }
  12.  
  13. /* Remove Menu button */
  14. #PanelUI-menu-button {display: none;}
  15. #PanelUI-button { -moz-border-start: 0px !important;  border-image: none !important; }
  16.  
  17. /* Remove Close Tab button */
  18. .tab-close-button {
  19.     display: none !important;
  20. }
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28. @media (-moz-proton) {
  29.   /** Darkmode - Color lighter ************************************************/
  30.   :root[style*="--lwt-accent-color:rgb(12, 12, 13); --lwt-text-color:rgba(249, 249, 250);"],
  31.   :root[style*="--lwt-accent-color:rgb(28, 27, 34); --lwt-text-color:rgba(251, 251, 254);"] {
  32.     --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */
  33.   }
  34.  
  35.   /** Windows System Default Theme - Use acccent color ************************/
  36.   @media (-moz-windows-accent-color-in-titlebar) {
  37.     /* Tab Bar */
  38.     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
  39.     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
  40.       color: -moz-accent-color-foreground;
  41.       background-color: -moz-accent-color;
  42.     }
  43.  
  44.     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
  45.     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
  46.       --toolbarbutton-icon-fill: -moz-accent-color-foreground;
  47.       --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
  48.       --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
  49.     }
  50.  
  51.     /* URL Bar */
  52.     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
  53.     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
  54.       --focus-outline-color: -moz-accent-color !important;
  55.     }
  56.  
  57.     :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
  58.     :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
  59.       border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */
  60.     }
  61.   }
  62.  
  63.   /** Root - Reduce Padding ***************************************************/
  64.   :root {
  65.     /* Tab Bar */
  66.     --proton-tab-block-margin: 2px !important; /* Original: 4px */
  67.     --inline-tab-padding:      6px !important; /* Original: 8px */
  68.  
  69.     /* Panel */
  70.     --arrowpanel-menuicon-padding: 8px;
  71.     --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
  72.     --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
  73.     --arrowpanel-padding:        0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
  74.   }
  75.  
  76.   :root[uidensity=compact] {
  77.     /* Tool Bar */
  78.     --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */
  79.  
  80.     /* Panel */
  81.     --arrowpanel-menuitem-padding: 3px  !important; /* Original: 8px */
  82.   }
  83.  
  84.   :root[uidensity=touch] {
  85.     /* Tab Bar - Like Original */
  86.     --proton-tab-block-margin: 4px !important; /* Original: 4px */
  87.     --inline-tab-padding:      8px !important; /* Original: 8px */
  88.  
  89.     /* Panel - Like Original */
  90.     --arrowpanel-menuitem-padding: 8px  !important; /* Original: 8px */
  91.   }
  92.  
  93.   /** Tab Bar - Reduce Width, Show more tabs **********************************/
  94.   .titlebar-spacer[type="pre-tabs"] {
  95.     width: 30px !important; /* Original: 40px */
  96.   }
  97.   .titlebar-spacer[type="post-tabs"] {
  98.     width: 25px !important; /* Original: 40px */
  99.   }
  100.  
  101.   :root {
  102.     --newtab-button-minus-width-padding: 2px;
  103.     --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
  104.   }
  105.   #new-tab-button     > .toolbarbutton-icon,
  106.   #alltabs-button     > .toolbarbutton-badge-stack {
  107.     /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
  108.     width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;
  109.  
  110.     /* Original: --toolbarbutton-inner-padding */
  111.     padding-left:  var(--newtab-button-width-padding) !important;
  112.     padding-right: var(--newtab-button-width-padding) !important;
  113.   }
  114.  
  115.   #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
  116.     margin-inline-start: 1px !important;
  117.   }
  118.  
  119.   :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox {
  120.     --scrollbtn-inner-padding: 1px;
  121.     --scrollbtn-outer-padding: 3px;
  122.   }
  123.   #scrollbutton-up {
  124.     padding-left:  var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
  125.     padding-right: var(--scrollbtn-outer-padding, 4px) !important;
  126.   }
  127.   #scrollbutton-down {
  128.     padding-left:  var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
  129.     padding-right: var(--scrollbtn-inner-padding, 4px) !important;
  130.   }
  131.  
  132.   :root:not([uidensity=touch]) #new-tab-button, #alltabs-button {
  133.     --toolbarbutton-outer-padding: 1px; /* Original: 2px*/
  134.   }
  135.  
  136.   /* Tab - Max Size */
  137.   .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
  138.     max-width: 240px !important; /* Original: 225px */
  139.   }
  140.  
  141.   /* neighbouring tabs should "pinch" together */
  142.   .tabbrowser-tab {
  143.     padding-inline: 1px !important;
  144.   }
  145.  
  146.   .tabbrowser-tab:not([last-visible-tab]) {
  147.     margin-inline-end: -.5px !important;
  148.   }
  149.  
  150.   /** Tab Bar - Reduce Height, Show more contents *****************************/
  151.   :root:not([uidensity=touch]) #TabsToolbar {
  152.     --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
  153.   }
  154.  
  155.   .toolbar-items, .tabbrowser-tab {
  156.     max-height: 38px;
  157.   }
  158.   :root[uidensity=compact] .toolbar-items, .tabbrowser-tab {
  159.     max-height: 36px;
  160.   }
  161.   :root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
  162.     max-height: unset;
  163.   }
  164.  
  165.   :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox {
  166.     --scrollbtn-vertical-padding: 3px;
  167.   }
  168.   #scrollbutton-up,
  169.   #scrollbutton-down {
  170.     /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
  171.     /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
  172.     padding-top:    var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
  173.     padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
  174.   }
  175.  
  176.   :root[tabsintitlebar]:not([uidensity=compact]) #toolbar-menubar[autohide="true"] {
  177.     height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px); /* Compact: 28px, Normal: 33px, Touch: 38px */
  178.   }
  179.  
  180.   /* Pinned Tab - Titlechanged Indicator position fix */
  181.   :root:not([uidensity=touch]) .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  182.   :root:not([uidensity=touch]) .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  183.     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
  184.     background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important;
  185.   }
  186.   :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  187.   :root[uidensity=compact] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  188.     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
  189.     background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important;
  190.   }
  191.  
  192.   /** Tab Bar - Connect to window *********************************************/
  193.   .tab-background {
  194.     border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
  195.     margin-bottom: 0px !important;
  196.   }
  197.  
  198.   .tab-content {
  199.     margin-top: var(--proton-tab-block-margin);
  200.   }
  201.  
  202.   .tab-stack {
  203.     margin-top:    0px !important;
  204.     margin-bottom: 0px !important;
  205.   }
  206.  
  207.   /** Selected Tab - Color like toolbar ***************************************/
  208. #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
  209.     /* 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)
  210.  */
  211.     background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  212.   }
  213.  
  214.   /* Multi Selected Color */
  215.   #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):-moz-lwtheme {
  216.     background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  217.   }
  218.  
  219.   .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
  220.     background: color-mix(in srgb, currentColor 65%, transparent);
  221.     opacity: .3;
  222.   }
  223.   #TabsToolbar[brighttext] .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
  224.     opacity: .15;
  225.   }
  226.  
  227.   /** Selected Tab - Box Shadow ***********************************************/
  228.   #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background:-moz-lwtheme {
  229.     /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
  230.        Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
  231.     box-shadow: 0 0 1px var(--toolbar-color) !important;
  232.   }
  233.   #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) > .tab-stack > .tab-background:-moz-lwtheme {
  234.     box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent)  !important;
  235.   }
  236.  
  237.   /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
  238.   #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
  239.     z-index: 0 !important;
  240.   }
  241.  
  242.   /** Selected Tab - Bottom Rounded Corner ************************************/
  243.   #tabbrowser-tabs {
  244.     --tab-corner-rounding: 5px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
  245.     --tab-corner-padding:  1px;
  246.   }
  247.  
  248.   :root[lwtheme="true"] tab[visuallyselected] > stack::before,
  249.   :root[lwtheme="true"] tab[visuallyselected] > stack::after {
  250.     /* Box */
  251.     content: "" !important;
  252.     display: block !important;
  253.     position: absolute !important;
  254.     z-index: 1 !important;
  255.  
  256.     /* Shape */
  257.     width:  var(--tab-corner-rounding) !important;
  258.     height: 100% !important;
  259.  
  260.     /* Color */
  261.     fill:   var(--toolbar-bgcolor) !important;
  262.     stroke: var(--tabs-border-color, transparent) !important;
  263.     -moz-context-properties: fill, stroke !important;
  264.  
  265.     background-image: url(./icons/tab-bottom-corner.svg);
  266.     background-size:   var(--tab-corner-rounding);
  267.     background-repeat: no-repeat;
  268.     background-position-y: bottom;
  269.   }
  270.  
  271.   :root[lwtheme="true"] tab[visuallyselected] > stack::before {
  272.     left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important;
  273.   }
  274.   :root[lwtheme="true"] tab[visuallyselected] > stack::after {
  275.     left:  auto;
  276.     right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
  277.     transform: scaleX(-1) !important;
  278.   }
  279.  
  280.   /** Unselected Tab - Divide line ********************************************/
  281.   #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
  282.   .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
  283.   #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
  284.     /* Box Model */
  285.     content:  "";
  286.     display:  block;
  287.     position: absolute;
  288.     top:   50%;
  289.  
  290.     /* Bar shape */
  291.     width:     1px;
  292.     height:   30px;
  293.     overflow: hidden;
  294.  
  295.     /* Bar Color */
  296.     opacity: var(--tab-separator-opacity);
  297.     transition: opacity .2s var(--ease-basic) !important;
  298.     background-color: color-mix(in srgb, currentColor 50%, transparent) !important; /*  Replace var(--toolbarseparator-color) - Hard coded for compatibility */
  299.   }
  300.  
  301.   .tab-background::before {
  302.     transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
  303.   }
  304.   .tabbrowser-tab[last-visible-tab] .tab-background::after {
  305.     right: 0;
  306.     transform: translateX(.5px) translateY(calc(-50% + 1px)) !important;
  307.   }
  308.  
  309.   .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before,
  310.   .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before,
  311.   #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
  312.     opacity: 0 !important;
  313.   }
  314.  
  315.   /* Latest Tab & New tab margin */
  316.   #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
  317.     margin-inline-end: 4px !important;
  318.   }
  319.  
  320.   /** Clipped tabs - Letters cleary *******************************************/
  321.   #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) {
  322.     padding-inline-start: 8px !important;
  323.   }
  324.  
  325.   #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
  326.     visibility: collapse !important;
  327.   }
  328.  
  329.   #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
  330.   #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
  331.     mask-image: linear-gradient(to right, black 70%, transparent) !important;
  332.   }
  333.  
  334.   #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
  335.   #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
  336.     mask-image: linear-gradient(to left, black 70%, transparent) !important;
  337.   }
  338.  
  339.   /** Sound Tab - Hide Label **************************************************/
  340.   .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
  341.     display: none !important;
  342.   }
  343.  
  344.   /** Sound Tab - Show with Favicons ******************************************/
  345.   /* Makes the favicons always visible (also on hover) */
  346.   .tab-icon-image:not([pinned]){
  347.     opacity: 1 !important
  348.   }
  349.  
  350.   /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
  351.   .tab-icon-overlay:not([crashed]),
  352.   .tab-icon-overlay[pinned][crashed][selected] {
  353.     /* Position */
  354.     top: -3.5px !important;
  355.     inset-inline-end: -9px !important;
  356.     z-index: 1 !important;
  357.  
  358.     /* Shape */
  359.     padding: 1.5px !important;
  360.     border-radius: 10px !important;
  361.     width:  17px !important;
  362.     height: 17px !important;
  363.   }
  364.   .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  365.     /* Color */
  366.     color:  currentColor !important;
  367.     stroke: transparent !important;
  368.     background: transparent !important;
  369.     fill-opacity: 0.8 !important;
  370.     opacity: 1 !important;
  371.   }
  372.   .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  373.     margin-inline-end: 9.5px !important;
  374.   }
  375.  
  376.   /* None exist favicon */
  377.   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]) {
  378.     top: 0 !important;
  379.     inset-inline-end: 0 !important;
  380.     margin-inline-end: 5.5px !important;
  381.     padding: 2px 0 !important;
  382.   }
  383.  
  384.   /* Busy - Show */
  385.   .tab-throbber[busy], .tab-icon-pending[busy] {
  386.     opacity: 1 !important;
  387.   }
  388.  
  389.   /* Busy - Overlay Position */
  390.   .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
  391.     transform: translateX(-.5px) translateY(-2.5px);
  392.   }
  393.   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed])[busy] {
  394.     top: -3.5px !important;
  395.     inset-inline-end: -9px !important;
  396.     margin-inline-end: 9.5px !important;
  397.     padding: 1.5px !important;
  398.   }
  399.  
  400.   /* Hover */
  401.   .tab-icon-overlay:not([crashed])[soundplaying]:hover,
  402.   .tab-icon-overlay:not([crashed])[muted]:hover,
  403.   .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  404.     color:  var(--toolbar-bgcolor, white) !important;
  405.     stroke: var(--lwt-tab-text, var(--toolbar-color)) !important;
  406.     background-color: var(--lwt-tab-text, var(--toolbar-color)) !important;
  407.     fill-opacity: 0.95 !important;
  408.   }
  409.  
  410.   #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
  411.   #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover,
  412.   #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
  413.     color: var(--toolbar-bgcolor, black) !important;
  414.   }
  415.  
  416.   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]):hover {
  417.     padding: 0 !important;
  418.   }
  419.  
  420.   /** PictureInPicture Tab - Show PIP Icon ************************************/
  421.   .tab-icon-sound[pictureinpicture]:not([pinned]) {
  422.     /* Shape */
  423.     display: -moz-inline-box !important;
  424.     width:  14px;
  425.     height: 14px;
  426.     -moz-box-ordinal-group: 2 !important;
  427.  
  428.     /* Color */
  429.     fill: currentColor;
  430.     opacity: 0.8;
  431.     -moz-context-properties: fill;
  432.  
  433.     /* Icon */
  434.     list-style-image: url(chrome://global/skin/media/picture-in-picture-open.svg);
  435.   }
  436.   .tab-icon-sound[pictureinpicture]:not([pinned])[selected] {
  437.     opacity: 0.95;
  438.   }
  439.  
  440.   /* Close Button's position */
  441.   .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
  442.     margin-left: 7px !important;
  443.     -moz-box-ordinal-group: 2 !important;
  444.   }
  445.   .tabbrowser-tab[pictureinpicture]:not([pinned]):hover .tab-close-button {
  446.     margin-left: 0px !important;
  447.   }
  448.  
  449.   /** Container Tab - Color line at icon's bottom *****************************/
  450.   .tab-context-line {
  451.     display: none;
  452.   }
  453.  
  454.   .tab-icon-image {
  455.     box-sizing: content-box;
  456.     padding: 3px 0;
  457.  
  458.     border-bottom: 2px solid var(--identity-icon-color);
  459.   }
  460.  
  461.   /* None exist favicon - With Sound */
  462.   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
  463.     box-sizing: content-box;
  464.     padding: 3px 0;
  465.  
  466.     border-radius: 0 !important;
  467.     border-bottom: 2px solid var(--identity-icon-color);
  468.   }
  469.   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
  470.     padding: 0;
  471.  
  472.     border-radius: 10px !important;
  473.     border-bottom: none;
  474.   }
  475.  
  476.   /* Pinned Tab - Titlechanged Indicator override */
  477.   .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]) .tab-icon-image,
  478.   .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) .tab-icon-image {
  479.     border-bottom: 2px solid transparent !important;
  480.   }
  481.  
  482.   .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
  483.   .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  484.     /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
  485.     --dotted-identity-image: radial-gradient(circle, var(--identity-icon-color), var(--identity-icon-color) 2px, transparent 2px);
  486.     background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
  487.     background-position-x: 32%, 50%, 70% !important;
  488.   }
  489.   :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
  490.   :root[uidensity=compact] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  491.     /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
  492.     var(--dotted-identity-image) !important;
  493.     background-position-x: 30%, 50%, 70% !important;
  494.   }
  495.  
  496.   /* Pinned Tab - Titlechanged & soundplaying */
  497.   .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  498.   .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  499.     background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
  500.   }
  501.   :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  502.   :root[uidensity=compact] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  503.     var(--dotted-identity-image) !important;
  504.     background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
  505.   }
  506.  
  507.   /** Crashed Tab - Don't show Favicons ***************************************/
  508.   .tab-icon-image[crashed] {
  509.     display: none !important;
  510.   }
  511.  
  512.   /** URL Bar - Reduce Padding ************************************************/
  513.   :root:not([uidensity=touch]) #urlbar-container, #search-container {
  514.     padding-block: 2px; /* Original: 4px */
  515.     margin-inline: 5px; /* Original: 5px */
  516.   }
  517.  
  518.   /* spread menu */
  519.   :root[uidensity=compact] .urlbarView-row:not([type=tip], [type=dynamic]) {
  520.     padding-block: 1px; /* [Compact, General]: 2px, Touch: 11px */
  521.   }
  522.   :root[uidensity=compact] #urlbar .search-one-offs:not([hidden]) {
  523.     padding-block: 2px; /* [Compact, General]: 4px, Touch 11px */
  524.   }
  525.  
  526.   /** BookMark Bar - Reduce Height ********************************************/
  527.   :root[uidensity=compact] #PersonalToolbar toolbarbutton {
  528.       margin-top: 0px; /* Original: 2px */
  529.   }
  530.  
  531.   /** Menu - Reduce Padding ***************************************************/
  532.   :root:not([uidensity=touch]) menupopup > menuitem, menupopup > menu {
  533.     padding-block: 0.35em !important; /* Original: 0.5em */
  534.   }
  535.   :root:not([uidensity=touch]) .menu-text, .menu-iconic-text {
  536.     padding-inline-end: 0 !important; /* Original: 2px */
  537.   }
  538.   :root:not([uidensity=touch]) .menupopup-arrowscrollbox {
  539.     padding-block: 1px !important;    /* Original: 4px*/
  540.   }
  541.   :root:not([uidensity=touch]) #context-navigation:not([hidden]) {
  542.     padding: 0 0 1px !important;      /* Original: 0 0 4px*/
  543.   }
  544.   :root:not([uidensity=touch]) .menu-right {
  545.     margin-right: 6px !important;     /* Original: 12px */
  546.   }
  547.  
  548.   :root[uidensity=compact] menupopup > menuitem, menupopup > menu {
  549.     padding-block: 0.25em !important; /* Original: 0.5em */
  550.   }
  551.  
  552.   /** Panel - Icons ***********************************************************/
  553.   /* Padding */
  554.   :root {
  555.     --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
  556.     --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
  557.   }
  558.  
  559.   #downloadsHistory .button-text,
  560.   .subviewbutton > .toolbarbutton-text {
  561.     padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
  562.   }
  563.   #panelMenu_bookmarksMenu .subviewbutton[disabled=true] .toolbarbutton-text,
  564.   #appMenu_historyMenu     .subviewbutton[disabled=true] .toolbarbutton-text {
  565.     padding-inline-start: var(--arrowpanel-menublank-padding) !important;
  566.   }
  567.   #appMenu-proton-update-banner .toolbarbutton-text {
  568.     margin-inline-start: 0 !important;
  569.   }
  570.  
  571.   #appMenu-multiView .subviewbutton::before,
  572.   #appMenu-proton-update-banner::before {
  573.     display: -moz-inline-box;
  574.     margin-inline-end: var(--arrowpanel-menuicon-padding);
  575.     width:  16px !important;
  576.     height: 16px !important;
  577.   }
  578.   #appMenu-proton-update-banner {
  579.     margin-bottom: 2px !important;
  580.   }
  581.   #appMenu-proton-update-banner::before {
  582.     margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
  583.   }
  584.   #appMenu-fxa-status2,
  585.   #appMenu-zoom-controls2 {
  586.     align-items: center;
  587.     padding-top:    var(--arrowpanel-menuimageblank-padding) !important;
  588.     padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
  589.   }
  590.   #appMenu-zoom-controls2::before {
  591.     margin-inline-end: 0 !important;
  592.   }
  593.  
  594.   /* Icons Color */
  595.   #appMenu-multiView .subviewbutton::before,
  596.   #appMenu-proton-update-banner::before,
  597.   #downloadsHistory .button-icon,
  598.   .subviewbutton > image {
  599.     fill: currentColor !important;
  600.     fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
  601.     -moz-context-properties: fill !important;
  602.   }
  603.  
  604.   /* Panel - Main */
  605.   #appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
  606.     display: -moz-inline-box !important;
  607.     margin-inline-start: var(--arrowpanel-menuicon-padding);
  608.     -moz-box-ordinal-group: 0 !important;
  609.   }
  610.  
  611.   #appMenu-proton-update-banner::before {
  612.     content: url(chrome://browser/skin/whatsnew.svg);
  613.   }
  614.   #appMenu-fxa-status2::before { /* Don't exist img tag */
  615.     content: url(chrome://browser/skin/fxa/avatar-empty.svg);
  616.   }
  617.   #appMenu-fxa-status2[fxastatus=signedin]::before { /* Don't exist img tag */
  618.     display: none;
  619.   }
  620.   #appMenu-fxa-status2[fxastatus=signedin] #appMenu-fxa-label2::before {
  621.     /* url("https://profile.accounts.firefox.com/v1/avatar/a") */
  622.     content: '';
  623.     border-radius: 50% !important;
  624.     background-size: 16px !important;
  625.     background-image: var(--avatar-image-url) !important;
  626.   }
  627.  
  628.   #appMenu-new-tab-button2 {
  629.     list-style-image: url(chrome://browser/skin/new-tab.svg);
  630.   }
  631.   #appMenu-new-window-button2 {
  632.     list-style-image: url(chrome://browser/skin/window.svg);
  633.   }
  634.   #appMenu-new-private-window-button2 {
  635.     list-style-image: url(chrome://browser/skin/privateBrowsing.svg);
  636.   }
  637.  
  638.   #appMenu-bookmarks-button{
  639.     list-style-image: url(chrome://browser/skin/bookmark.svg);
  640.   }
  641.   #appMenu-history-button {
  642.     list-style-image: url(chrome://browser/skin/history.svg);
  643.   }
  644.   #appMenu-downloads-button {
  645.     list-style-image: url(chrome://browser/skin/downloads/downloads.svg);
  646.   }
  647.   #appMenu-passwords-button {
  648.     list-style-image: url(chrome://browser/skin/login.svg);
  649.   }
  650.   #appMenu-extensions-themes-button {
  651.     list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
  652.   }
  653.  
  654.   #appMenu-print-button2 {
  655.     list-style-image: url(chrome://global/skin/icons/print.svg);
  656.   }
  657.   #appMenu-save-file-button2 {
  658.     list-style-image: url(chrome://browser/skin/save.svg);
  659.   }
  660.   #appMenu-find-button2 {
  661.     list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  662.   }
  663.   #appMenu-zoom-controls2::before {
  664.     content: url(./icons/screenshot.svg);
  665.   }
  666.  
  667.   #appMenu-settings-button {
  668.     list-style-image: url(chrome://global/skin/icons/settings.svg);
  669.   }
  670.   #appMenu-more-button2 {
  671.     list-style-image: url(chrome://browser/skin/ion.svg);
  672.   }
  673.   #appMenu-help-button2 {
  674.     list-style-image: url(chrome://global/skin/icons/help.svg);
  675.   }
  676.  
  677.   #appMenu-quit-button2 {
  678.     list-style-image: url(chrome://browser/skin/quit.svg);
  679.   }
  680.  
  681.   /* Panel - Account */
  682.   #PanelUI-fxa-menu-connect-device-button  .toolbarbutton-icon,
  683.   #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon {
  684.     width:  16px !important;
  685.     height: 16px !important;
  686.   }
  687.  
  688.   /* Default */
  689.   #fxa-menu-avatar {
  690.     display: -moz-inline-box !important;
  691.     margin-inline-end: var(--arrowpanel-menuitem-padding);
  692.   }
  693.  
  694.   .syncNowBtn {
  695.     visibility: visible !important;
  696.     -moz-box-ordinal-group: 1 !important;
  697.     margin-inline-end: var(--arrowpanel-menuicon-padding);
  698.   }
  699.   #PanelUI-fxa-menu-setup-sync-button {
  700.     list-style-image: url(chrome://browser/skin/sync.svg);
  701.   }
  702.  
  703.   #PanelUI-fxa-menu-connect-device-button {
  704.     list-style-image: url(chrome://browser/skin/fxa/add-device.svg);
  705.   }
  706.   #PanelUI-fxa-menu-sendtab-button {
  707.     list-style-image: url(chrome://browser/skin/send-to-device.svg);
  708.   }
  709.   #PanelUI-fxa-menu-sync-prefs-button,
  710.   #PanelUI-remotetabs-view-managedevices {
  711.     list-style-image: url(chrome://global/skin/icons/settings.svg);
  712.   }
  713.   #PanelUI-fxa-menu-account-signout-button {
  714.     list-style-image: url(chrome://browser/skin/sign-out.svg);
  715.   }
  716.  
  717.   .PanelUI-remotetabs-notabsforclient-label {
  718.     margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
  719.     padding-inline-start: var(--arrowpanel-menublank-padding) !important;
  720.   }
  721.  
  722.   /* Change Separator */
  723.   #PanelUI-fxa-menu::before{
  724.     content: "";
  725.     display: -moz-box;
  726.     border-bottom: 1px solid var(--panel-separator-color);
  727.     margin: var(--panel-separator-margin);
  728.     padding: 0;
  729.   }
  730.   #PanelUI-fxa-menu > :first-child{
  731.     -moz-box-ordinal-group: 0;
  732.   }
  733.   #PanelUI-sign-out-separator {
  734.     display: none;
  735.   }
  736.   .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] {
  737.     list-style-image: url(chrome://browser/skin/send-to-device.svg);
  738.   }
  739.   .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) {
  740.     list-style-image: url(chrome://global/skin/icons/settings.svg);
  741.   }
  742.  
  743.   /* Panel - Bookmark */
  744.   #panelMenuBookmarkThisPage {
  745.     list-style-image: url(chrome://browser/skin/bookmark-hollow.svg);
  746.   }
  747.   panelMenuBookmarkThisPage[starred] {
  748.     list-style-image: url(chrome://browser/skin/bookmark.svg);
  749.   }
  750.  
  751.   #panelMenu_searchBookmarks {
  752.     list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  753.   }
  754.   #panelMenu_viewBookmarksToolbar {
  755.     list-style-image: url(chrome://browser/skin/bookmarks-toolbar.svg);
  756.   }
  757.  
  758.   #panelMenu_showAllBookmarks {
  759.     list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg);
  760.   }
  761.  
  762.   /* Panel - History */
  763.   #appMenuRecentlyClosedTabs {
  764.     list-style-image: url(chrome://browser/skin/tab.svg);
  765.   }
  766.   #appMenuRecentlyClosedWindows {
  767.     list-style-image: url(chrome://browser/skin/window.svg);
  768.   }
  769.   #appMenuRestoreSession {
  770.     list-style-image: url(chrome://browser/skin/restore-session.svg);
  771.   }
  772.   #appMenuClearRecentHistory {
  773.     list-style-image: url(chrome://browser/skin/forget.svg);
  774.   }
  775.  
  776.   #PanelUI-historyMore {
  777.     list-style-image: url(chrome://browser/skin/history.svg);
  778.   }
  779.  
  780.   #appMenu-library-recentlyClosedTabs {
  781.     list-style-image: url(./icons/movetowindow-16.svg);
  782.   }
  783.   #appMenu-library-recentlyClosedWindows {
  784.     list-style-image: url(chrome://browser/skin/restore-session.svg);
  785.   }
  786.  
  787.   /* Panel - More tools */
  788.   #appmenu-moreTools-button {
  789.     list-style-image: url(chrome://browser/skin/customize.svg);
  790.   }
  791.  
  792.   #appmenu-developer-tools-view  .subviewbutton:nth-child(1) {  /* Web Developer Tools */
  793.     list-style-image: url(chrome://browser/skin/developer.svg);
  794.   }
  795.   #appmenu-developer-tools-view  .subviewbutton:nth-child(2) {  /* Task Manager */
  796.     list-style-image: url(./icons/performance.svg);
  797.   }
  798.   #appmenu-developer-tools-view  .subviewbutton:nth-child(3) {  /* Remote Debugging - Edge bug.svg */
  799.     list-style-image: url(./icons/bug.svg);
  800.   }
  801.   #appmenu-developer-tools-view  .subviewbutton:nth-child(4) {  /* Browser Toolbox - Edge webdeveloper.svg */
  802.     list-style-image: url(./icons/webdeveloper.svg);
  803.   }
  804.   #appmenu-developer-tools-view  .subviewbutton:nth-child(5) {  /* Browser Content Toolbaox -  */
  805.     list-style-image: url(./icons/command-frames.svg);
  806.   }
  807.   #appmenu-developer-tools-view  .subviewbutton:nth-last-child(5) {  /* Browser Console */
  808.     list-style-image: url(chrome://devtools/skin/images/command-console.svg);
  809.   }
  810.   #appmenu-developer-tools-view  .subviewbutton:nth-last-child(4) {  /* Responsive Design Mode */
  811.     list-style-image: url(./icons/command-responsivemode.svg);
  812.   }
  813.   #appmenu-developer-tools-view  .subviewbutton:nth-last-child(3) {  /* Eyedropper */
  814.     list-style-image: url(chrome://devtools/skin/images/command-eyedropper.svg);
  815.   }
  816.   #appmenu-developer-tools-view  .subviewbutton:nth-last-child(2) {  /* Page Source - Edge file-search.svg */
  817.     list-style-image: url(./icons/search-file.svg);
  818.   }
  819.   #appmenu-developer-tools-view  .subviewbutton:nth-last-child(1) { /* Extensions for Devel */
  820.     list-style-image: url(chrome://devtools/skin/images/debugging-addons.svg);
  821.   }
  822.   #appmenu-developer-tools-view .subviewbutton:last-child {
  823.     margin-bottom: 6px !important;
  824.   }
  825.  
  826.   /* Panel - Help */
  827.   #appMenu_menu_openHelp {
  828.     list-style-image: url(chrome://global/skin/icons/help.svg);
  829.   }
  830.   #appMenu_feedbackPage {
  831.     list-style-image: url(./icons/send.svg);
  832.   }
  833.   #appMenu_helpSafeMode {
  834.     list-style-image: url(chrome://devtools/skin/images/debugging-workers.svg);
  835.   }
  836.   #appMenu_troubleShooting {
  837.     list-style-image: url(chrome://global/skin/icons/more.svg);
  838.   }
  839.   #appMenu_help_reportSiteIssue {
  840.     list-style-image: url(chrome://global/skin/icons/lightbulb.svg);
  841.   }
  842.   #appMenu_menu_HelpPopup_reportPhishingtoolmenu {
  843.     list-style-image: url(chrome://global/skin/icons/warning.svg);
  844.   }
  845.   #appMenu_aboutName{
  846.     list-style-image: url(chrome://global/skin/icons/info.svg);
  847.   }
  848.  
  849.   /* Panel - Library */
  850.   #appMenu-library-bookmarks-button {
  851.     list-style-image: url(chrome://browser/skin/bookmark.svg);
  852.   }
  853.   #appMenu-library-history-button {
  854.     list-style-image: url(chrome://browser/skin/history.svg);
  855.   }
  856.   #appMenu-library-downloads-button{
  857.     list-style-image: url(chrome://browser/skin/downloads/downloads.svg);
  858.   }
  859.  
  860.   /* Panel - Downloads */
  861.   #downloadsHistory {
  862.     list-style-image: url(chrome://browser/skin/downloads/downloads.svg);
  863.   }
  864.  
  865.   /* Toolbar - Overflow Menu */
  866.   #overflowMenu-customize-button {
  867.     list-style-image: url(chrome://browser/skin/customize.svg);
  868.   }
  869.  
  870.   /* All Tab Menu */
  871.   #allTabsMenu-undoCloseTab {
  872.     list-style-image: url(chrome://global/skin/icons/undo.svg);
  873.   }
  874.   #allTabsMenu-searchTabs {
  875.     list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  876.   }
  877.   #allTabsMenu-containerTabsButton {
  878.     list-style-image: url(./icons/container-openin-16.svg);
  879.   }
  880.  
  881.   #allTabsMenu-hiddenTabsButton {
  882.     list-style-image: url(./icons/password-hide.svg);
  883.   }
  884.  
  885.   #allTabsMenu-containerTabsView .subviewbutton:last-child {
  886.     list-style-image: url(chrome://global/skin/icons/settings.svg);
  887.   }
  888. }
  889.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!