From fcaf48802e270db1722fc92169805279f23c1b82 Mon Sep 17 00:00:00 2001 From: Sakooooo <78461130+Sakooooo@users.noreply.github.com> Date: Thu, 12 Sep 2024 16:01:53 +0400 Subject: [PATCH] (feat) use hm for firefox --- config/firefox/userChrome.css | 51 ++- modules/desktop/browsers/firefox/default.nix | 321 ++++++++++++++++++- 2 files changed, 342 insertions(+), 30 deletions(-) diff --git a/config/firefox/userChrome.css b/config/firefox/userChrome.css index c9a46d81..c701412b 100644 --- a/config/firefox/userChrome.css +++ b/config/firefox/userChrome.css @@ -29,11 +29,6 @@ /* Bottom left page loading status or url preview */ #statuspanel { display: none !important; } -/* Hide dropdown that appears when you type in search bar */ -.autocomplete-history-popup, panel[type=autocomplete-richlistbox], panel[type=autocomplete] { - display: none !important; -} - /* remove radius from right-click popup */ menupopup, panel { --panel-border-radius: 0px !important; } menu, menuitem, menucaption { border-radius: 0px !important; } @@ -59,6 +54,11 @@ menupopup > #context-sep-navigation { display: none !important; } /* remove padding between toolbar buttons */ toolbar .toolbarbutton-1 { padding: 0 0 !important; } +/* add it back to the downloads button, otherwise it's too close to the urlbar */ +#downloads-button { + margin-left: 2px !important; +} + /* add padding to the right of the last button so that it doesn't touch the edge of the window */ #PanelUI-menu-button { padding: 0px 4px 0px 0px !important; @@ -96,6 +96,11 @@ toolbar .toolbarbutton-1 { padding: 0 0 !important; } #customizationui-widget-panel { margin: 0 !important; } #unified-extensions-panel { margin: 0 !important; } +/* make browser dialog boxes not overlap the navbar */ +:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox:not(.spotlightBox) { + margin-top: 0px !important; +} + /* --- UNIFIED EXTENSIONS BUTTON ------------------------ */ /* make extension icons smaller */ @@ -116,10 +121,6 @@ toolbar .toolbarbutton-1 { padding: 0 0 !important; } padding: 3px 0px !important; } -#unified-extensions-view .unified-extensions-item-menu-button { - margin-inline-end: 0 !important; -} - #unified-extensions-view .toolbarbutton-icon { padding: 0 !important; } @@ -129,6 +130,15 @@ toolbar .toolbarbutton-1 { padding: 0 0 !important; } white-space: nowrap !important; } +#unified-extensions-panel .unified-extensions-item { + margin-block: 0 !important; +} + +.toolbar-menupopup :is(menu, menuitem), .subview-subheader, panelview +.toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 { + padding: 4px !important; +} + /* --- DEBLOAT URLBAR ----------------------------------- */ #identity-box { display: none; } @@ -216,7 +226,7 @@ tab { /* remove dark space between pinned tab and first non-pinned tab */ #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > -.tabbrowser-tab[first-visible-unpinned-tab] { +.tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { margin-inline-start: 0px !important; } @@ -236,14 +246,6 @@ tab { display: none !important; } -/* remove firefox view */ -#firefox-view-button { display: none !important; } -#tabbrowser-tabs { - border-inline-start: 0 !important; - padding-inline-start: 0 !important; - margin-inline-start: 0 !important; -} - /* hide private browsing indicator */ #private-browsing-indicator-with-label { display: none; @@ -256,20 +258,13 @@ tab { min-height: 0 !important; max-height: 0 !important; height: 0 !important; - --moz-transform: scaleY(0) !important; - transform: scaleY(0) !important; } -/* show on focus */ +/* show on focus - uncomment the line below this if you want cursor hover + * events to trigger the navbar */ +/* #titlebar:hover ~ .browser-toolbar, #nav-bar:hover, */ #nav-bar:focus-within { - --moz-transform: scale(1) !important; - transform: scale(1) !important; max-height: var(--urlbar-height-setting) !important; height: var(--urlbar-height-setting) !important; min-height: var(--urlbar-height-setting) !important; } - -#navigator-toolbox:focus-within > .browser-toolbar { - transform: translateY(0); - opacity: 1; -} diff --git a/modules/desktop/browsers/firefox/default.nix b/modules/desktop/browsers/firefox/default.nix index a0e1f114..a5deeae0 100644 --- a/modules/desktop/browsers/firefox/default.nix +++ b/modules/desktop/browsers/firefox/default.nix @@ -4,8 +4,7 @@ lib, pkgs, ... -}: -let +}: let cfg = config.modules.desktop.browsers.firefox; in { options.modules.desktop.browsers.firefox = { @@ -24,6 +23,324 @@ in { }; }; + home-manager.users.sako = { + programs.firefox = { + enable = true; + profiles = { + "user" = { + id = 0; + isDefault = true; + + userChrome = '' + :root { + --tab-active-bg-color: #057; + --tab-inactive-bg-color: #333; + --tab-active-fg-fallback-color: #eee; /* color of text in an active tab without a container */ + --tab-inactive-fg-fallback-color: #888; /* color of text in an inactive tab without a container */ + --urlbar-focused-bg-color: #41404c; + --urlbar-not-focused-bg-color: #1c1b22; + --toolbar-bgcolor: #2b2a33 !important; + --tab-font: 'Jetbrains Mono'; + --urlbar-font: 'Jetbrains Mono'; + + /* try increasing if you encounter problems */ + --urlbar-height-setting: 24px; + --tab-min-height: 16px !important; + + /* I don't recommend you touch this unless you know what you're doing */ + --arrowpanel-menuitem-padding: 2px !important; + --arrowpanel-border-radius: 0px !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --toolbarbutton-border-radius: 0px !important; + --toolbarbutton-inner-padding: 0px 2px !important; + --toolbar-field-focus-background-color: var(--urlbar-focused-bg-color) !important; + --toolbar-field-background-color: var(--urlbar-not-focused-bg-color) !important; + --toolbar-field-focus-border-color: transparent !important; + } + + /* --- GENERAL DEBLOAT ---------------------------------- */ + + /* Bottom left page loading status or url preview */ + #statuspanel { display: none !important; } + + /* remove radius from right-click popup */ + menupopup, panel { --panel-border-radius: 0px !important; } + menu, menuitem, menucaption { border-radius: 0px !important; } + + /* no stupid large buttons in right-click menu */ + menupopup > #context-navigation { display: none !important; } + menupopup > #context-sep-navigation { display: none !important; } + + /* --- DEBLOAT NAVBAR ----------------------------------- */ + + #back-button { display: none; } + #forward-button { display: none; } + #reload-button { display: none; } + #stop-button { display: none; } + #home-button { display: none; } + #library-button { display: none; } + #fxa-toolbar-menu-button { display: none; } + /* empty space before and after the url bar */ + #customizableui-special-spring1, #customizableui-special-spring2 { display: none; } + + /* --- STYLE NAVBAR ------------------------------------ */ + + /* remove padding between toolbar buttons */ + toolbar .toolbarbutton-1 { padding: 0 0 !important; } + + /* add it back to the downloads button, otherwise it's too close to the urlbar */ + #downloads-button { + margin-left: 2px !important; + } + + /* add padding to the right of the last button so that it doesn't touch the edge of the window */ + #PanelUI-menu-button { + padding: 0px 4px 0px 0px !important; + } + + #urlbar-container { + --urlbar-container-height: var(--urlbar-height-setting) !important; + margin-left: 0 !important; + margin-right: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + font-family: var(--urlbar-font, 'monospace'); + font-size: 11px; + } + + #urlbar { + --urlbar-height: var(--urlbar-height-setting) !important; + --urlbar-toolbar-height: var(--urlbar-height-setting) !important; + min-height: var(--urlbar-height-setting) !important; + border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25)) !important; + } + + #urlbar-input { + margin-left: 0.8em !important; + margin-right: 0.4em !important; + } + + #navigator-toolbox { + border: none !important; + } + + /* keep pop-up menus from overlapping with navbar */ + #widget-overflow { margin: 0 !important; } + #appMenu-popup { margin: 0 !important; } + #customizationui-widget-panel { margin: 0 !important; } + #unified-extensions-panel { margin: 0 !important; } + + /* make browser dialog boxes not overlap the navbar */ + :not(.content-prompt-dialog) > .dialogOverlay > .dialogBox:not(.spotlightBox) { + margin-top: 0px !important; + } + + /* --- UNIFIED EXTENSIONS BUTTON ------------------------ */ + + /* make extension icons smaller */ + #unified-extensions-view { + --uei-icon-size: 16px; + } + + /* hide bloat */ + .unified-extensions-item-message-deck, + #unified-extensions-view > .panel-header, + #unified-extensions-view > toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* add 3px padding on the top and the bottom of the box */ + .panel-subview-body { + padding: 3px 0px !important; + } + + #unified-extensions-view .toolbarbutton-icon { + padding: 0 !important; + } + + .unified-extensions-item-contents { + line-height: 1 !important; + white-space: nowrap !important; + } + + #unified-extensions-panel .unified-extensions-item { + margin-block: 0 !important; + } + + .toolbar-menupopup :is(menu, menuitem), .subview-subheader, panelview + .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 { + padding: 4px !important; + } + + /* --- DEBLOAT URLBAR ----------------------------------- */ + + #identity-box { display: none; } + #pageActionButton { display: none; } + #pocket-button { display: none; } + #urlbar-zoom-button { display: none; } + #tracking-protection-icon-container { display: none !important; } + #reader-mode-button{ display: none !important; } + #star-button { display: none; } + #star-button-box:hover { background: inherit !important; } + + /* Go to arrow button at the end of the urlbar when searching */ + #urlbar-go-button { display: none; } + + /* remove container indicator from urlbar */ + #userContext-label, #userContext-indicator { display: none !important;} + + /* --- STYLE TAB TOOLBAR -------------------------------- */ + + #titlebar { + --proton-tab-block-margin: 0px !important; + --tab-block-margin: 0px !important; + } + + #TabsToolbar, .tabbrowser-tab { + max-height: var(--tab-min-height) !important; + font-size: 11px !important; + } + + /* Change color of normal tabs */ + tab:not([selected="true"]) { + background-color: var(--tab-inactive-bg-color) !important; + color: var(--identity-icon-color, var(--tab-inactive-fg-fallback-color)) !important; + } + + tab { + font-family: var(--tab-font, monospace); + font-weight: bold; + border: none !important; + } + + /* safari style tab width */ + .tabbrowser-tab[fadein] { + max-width: 100vw !important; + border: none + } + + /* Hide close button on tabs */ + #tabbrowser-tabs .tabbrowser-tab .tab-close-button { display: none !important; } + + /* disable favicons in tab */ + /* .tab-icon-stack:not([pinned]) { display: none !important; } */ + + .tabbrowser-tab { + /* remove border between tabs */ + padding-inline: 0px !important; + /* reduce fade effect of tab text */ + --tab-label-mask-size: 1em !important; + /* fix pinned tab behaviour on overflow */ + overflow-clip-margin: 0px !important; + } + + /* Tab: selected colors */ + #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content { + background: var(--tab-active-bg-color) !important; + color: var(--identity-icon-color, var(--tab-active-fg-fallback-color)) !important; + } + + /* Tab: hovered colors */ + #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content { + background: var(--tab-active-bg-color) !important; + } + + /* hide window controls */ + .titlebar-buttonbox-container { display: none; } + + /* remove titlebar spacers */ + .titlebar-spacer { display: none !important; } + + /* disable tab shadow */ + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: none !important; + } + + /* remove dark space between pinned tab and first non-pinned tab */ + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > + #tabbrowser-arrowscrollbox > + .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { + margin-inline-start: 0px !important; + } + + /* remove dropdown menu button which displays all tabs on overflow */ + #alltabs-button { display: none !important } + + /* fix displaying of pinned tabs on overflow */ + #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { + height: var(--tab-min-height) !important; + } + + /* remove overflow scroll buttons */ + #scrollbutton-up, #scrollbutton-down { display: none !important; } + + /* remove new tab button */ + #tabs-newtab-button { + display: none !important; + } + + /* hide private browsing indicator */ + #private-browsing-indicator-with-label { + display: none; + } + + /* --- AUTOHIDE NAVBAR ---------------------------------- */ + + /* hide navbar unless focused */ + #nav-bar { + min-height: 0 !important; + max-height: 0 !important; + height: 0 !important; + } + + /* show on focus - uncomment the line below this if you want cursor hover + * events to trigger the navbar */ + /* #titlebar:hover ~ .browser-toolbar, #nav-bar:hover, */ + #nav-bar:focus-within { + max-height: var(--urlbar-height-setting) !important; + height: var(--urlbar-height-setting) !important; + min-height: var(--urlbar-height-setting) !important; + } + ''; + + search.engines = { + "Nix Packages" = { + urls = [ + { + template = "https://search.nixos.org/packages?channel=unstable"; + params = [ + { + name = "query"; + value = "{searchTerms}"; + } + ]; + } + ]; + icon = "${pkgs.nixos-icons}/share/icons/hicolor/scalable/apps/nix-snowflake.svg"; + definedAliases = ["@nixpkgs"]; + }; + "Nix Options" = { + definedAliases = ["@nixopts"]; + icon = "${pkgs.nixos-icons}/share/icons/hicolor/scalable/apps/nix-snowflake.svg"; + urls = [ + { + template = "https://search.nixos.org/options?channel=unstable"; + params = [ + { + name = "query"; + value = "{searchTerms}"; + } + ]; + } + ]; + }; + }; + }; + }; + }; + }; + programs.browserpass.enable = true; }; }