diff --git a/flake.nix b/flake.nix index 8c8b867..1031bde 100644 --- a/flake.nix +++ b/flake.nix @@ -61,7 +61,7 @@ # Theme Modules stylix.nixosModules.stylix - ./themes/targets/all.nix + ./themes/targets/all-desktop.nix ./themes/tokyonight # Host Module diff --git a/home/applications/browsers/default.nix b/home/applications/browsers/default.nix index 3269d22..893fed7 100644 --- a/home/applications/browsers/default.nix +++ b/home/applications/browsers/default.nix @@ -42,8 +42,7 @@ }; }; - /* - Preferences = { + Preferences = { # This is a sample Nix GPO file generated from Betterfox preferences # SECTION: FASTFOX @@ -279,13 +278,458 @@ "general.smoothScroll.stopDecelerationWeighting" = 1.0; "mousewheel.default.delta_multiplier_y" = 300; # 250-400; adjust this number to your liking }; - */ }; profiles.panotaka = { settings = { "widget.use-xdg-desktop-portal.file-picker" = 1; }; + userChrome = '' + /* # arcticfox - userChrome + - under MPL 2.0 + + dragon's (very hacky) arc browser-like theme for firefox + ft. sidebery, and userchrome-toggle + + !!! for the theme to work: + - the side bar needs to always be visible + and with sidebery (maybe TST but nothing guaranteed) opened + - the order of the toolbar widgets should be: + [url-bar sidebar-toggle back forward reload spacer extensions overflow hamburger-menu] + you can change the order of some of those, but the url bar must be the first item + - preferencially have userchrome-toggle addon or something else to toggle keeping the + sidebar opened + - disable the bookmarks toolbar + - use flat color themes instead of ones with gradients or backgrounds, preferencially + themes from Firefox Color + + when navigating this file you can use ctrl + f + (or whatever the 'find' shortuc is on your editor) + to jump to spefic parts: + + ## for sections + // for comments + ** for thing you can change + + !!! some extra warnings (drawbacks) + - the menu bar (activated with alt) doesn't work + - the bookmarks toolbar doesn't work + - the 'customise toolbar...' page will not let you rearrange + things in the toolbar, do it with the theme disabled + (can still put things in the overflow menu tho) + - there will be visual glitches in certain areas, for example + in some places the background may be transparent (showing behind the window) + and flicker + - pages and addons that expect ui elements to be in certain places may nor work + - some browser color themes may not work well or need some tweak + - some menus you open (or if change the addon in the sidebar) may toggle off the + window preface and not keep the sidebar open + - using addons that use the sidebar (for example firefox side view) is awkard + - might not work well depending on your window controls + + */ + + :root { + /* ** spacing around the web page and other things */ + --spacing: .75rem; + + /* ** sidebar width when open */ + --sdb-wdt-max: 360px; + + /* // sidebar width (don't change this setup) */ + /* --sdb-wdt: var(--sdb-wdt-max); */ + --sdb-wdt: 0; + + /* ** theme border radius */ + --br: 10px; + + /* **? height of the toolbox (browser header/tool bar) */ + --toolbox-height: 6.25rem; + + /* ** transitions (mainly sidebar) duration */ + --trans: .5s; + + /* // browser background color, don't change this var */ + --bbg: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } + + /* // hide the contens of the toolbox by default + // and give some padding area to be able to hover it + */ + #navigator-toolbox { + padding-right: var(--spacing); + } + #navigator-toolbox > * { + opacity: 0%; + } + + /* // when hovering the toolbox or sidebar, show them + ** you can change the 'preface' value + + wish normal CSS had sass,stylus,less style nesting + */ + #main-window[titlepreface*="|| "], + #main-window:has(#sidebar-box:hover), + #main-window:has(#navigator-toolbox:hover), + #main-window:has(#navigator-toolbox:focus-within), + #main-window:has(toolbarbutton[open="true"]) + { + --sdb-wdt: var(--sdb-wdt-max); + } + + #main-window[titlepreface*="|| "] #navigator-toolbox, + #main-window:has(#sidebar-box:hover) #navigator-toolbox, + #main-window:has(#navigator-toolbox:hover) #navigator-toolbox, + #main-window:has(#navigator-toolbox:focus-within) #navigator-toolbox, + #main-window:has(toolbarbutton[open="true"]) #navigator-toolbox + { + padding-right: 0; + } + + #main-window[titlepreface*="|| "] #navigator-toolbox > *, + #main-window:has(#sidebar-box:hover) #navigator-toolbox > *, + #main-window:has(#navigator-toolbox:hover) #navigator-toolbox > *, + #main-window:has(#navigator-toolbox:focus-within) #navigator-toolbox > *, + #main-window:has(toolbarbutton[open="true"]) #navigator-toolbox > * + { + opacity: 100%; + } + + /* // background of the area around the web page */ + .browserStack { + background: var(--bbg); + } + + #appcontent { + height: 100vh; + /* // offset the web page up to fit the browser height */ + margin-top: calc(var(--toolbox-height) * -1); + } + + /* // for the toolbox to not hide in fullscreen */ + #navigator-toolbox[inFullscreen="true"] { + margin-top: 0 !important; + } + /* // reset the web page offset when playing some video in fullscreen */ + #main-window[inDOMFullscreen="true"] #appcontent { + margin-top: 0; + } + + #appcontent browser { + margin: var(--spacing); + margin-left: 0; + margin-top: var(--spacing); + border-radius: var(--br); + + box-sizing: border-box; + + /* ** small details to separate the web page from the surroundings + // feel free to disable these, and use Adaptive Tab Bar Color to + make the entire browser fit the page color + */ + box-shadow: 0px 0px 7px #00000030; + border: 1px solid #fafafa30; + } + + /* // remove margin from the dev tools */ + #appcontent .devtools-toolbox-side-iframe { + margin: 0 !important; + } + #appcontent .devtools-toolbox-bottom-iframe { + margin: 0; + border-radius: 0; + } + + /* // make status panel (the bar with url when you hover links) + * // fit better with theme + */ + #statuspanel { + margin-bottom: var(--spacing); + margin-right: var(--spacing); + } + #statuspanel-label { + background: var(--bbg) !important; + border: 1px solid #00000020 !important; + color: var(--toolbar-color) !important;; + } + + /* // make find bar fit with theme */ + findbar { + background: var(--bbg) !important; + border: none !important; + padding-top: 0 !important;; + } + + /* + #sidebar-box { + display: block !important; + } + */ + + /* // hide the sidebar header (only when sidebery opened) + ** feel free to disable this + ** or change the sidebarcommand to some other addon (get from browser dev mode) + */ + #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header { + display: none; + /* */ + } + + #sidebar-header { + border: none !important;; + } + + /* // hide the sidebar close button (closing the sidebar messes the theme) */ + #sidebar-header #sidebar-close { + display: none; + } + + #sidebar-box { + padding-right: var(--spacing); + background: var(--bbg) !important; + + min-width: 0px !important; + width: var(--sdb-wdt) !important; + overflow: clip; + transition: width var(--trans); + } + + #sidebar-splitter { + display: none; + } + + #sidebar { + overflow: clip; + /*border-radius: var(--br); */ /* // adds some visual glitches */ + + /* // keep the sidebar content in a specific size */ + width: calc(var(--sdb-wdt-max) - var(--spacing) * 0.5); + margin-left: calc(var(--spacing) * 0.4); + } + + #main-window #titlebar { + overflow: clip; + } + + /* // default state: Set initial height to enable animation */ + #main-window #titlebar { height: 3rem !important; } + #main-window[uidensity="touch"] #titlebar { height: 3.35em !important; } + #main-window[uidensity="compact"] #titlebar { height: 2.7em !important; } + + /* // hide the defaul tab bar and the private window label */ + #tabbrowser-tabs, + #alltabs-button, + #new-tab-button, + #private-browsing-indicator-with-label + { + display: none; + } + + :root { + /* ** feel free to change this color */ + --poiple: #6e00bc; + } + /* ** in private window, put an outline around the page and url bar */ + #main-window[privatebrowsingmode="temporary"] #appcontent browser { + border: 1px solid var(--poiple); + } + #main-window[privatebrowsingmode="temporary"] { + --toolbar-field-border-color: var(--poiple) !important; + } + + #navigator-toolbox { + padding-bottom: var(--spacing); + transition: width var(--trans); + border: none !important; + border-radius: 0 !important; + } + + .titlebar-buttonbox-container { + margin-top: .5rem; + } + + #navigator-toolbox { + width: var(--sdb-wdt); + height: var(--toolbox-height); + } + + #navigator-toolbox > * { + transition: opacity var(--trans); + } + + + /* // show toolbar if sidebar is closed (so you can open it with the button) */ + #main-window:has(#sidebar-box[hidden="true"]) #navigator-toolbox { + --sdb-wdt: var(--sdb-wdt-max); + + border-radius: 0 0 var(--br) 0 !important;; + padding: 0 !important; + z-index: 1; + } + #main-window:has(#sidebar-box[hidden="true"]) #navigator-toolbox > * { + opacity: 100%; + } + + /* // hide sidebar button (when sidebar is open) + // closing the sidebar messes up the theme + */ + #main-window:has(#sidebar-box:not([hidden="true"])) #sidebar-button { + display: none; + /* */ + } + #main-window:has(#sidebar-box[hidden="true"]) #sidebar-button { + border: 1px solid #fafafaa0; + background: #fafafa20; + border-radius: var(--br); + margin: .25rem !important;; + } + + #main-window:has(#sidebar-box[hidden="true"]) #appcontent browser { + margin-left: var(--spacing); + } + + /* ** WINDOWS - make the window buttons less huge + // uncomment if you're on windows. + recomended --wbt-wdt: 7rem + */ + /* + .titlebar-buttonbox { + margin-right: var(--spacing); + border-radius: calc(var(--br) / 2); + max-width: 7.5rem; + justify-content: center; + overflow: clip; + } + .titlebar-buttonbox .titlebar-button { + padding: .75rem !important; + } + */ + + #nav-bar { + /* ** width of the window control buttons (min max close) + that the toolbar should take into account + // change to 0 if using server side decorations + */ + --wbt-wdt: 3.5rem; + + margin-top: -2.75rem; + width: calc(var(--sdb-wdt) - var(--wbt-wdt)) !important; + background: none !important; + margin-left: calc(var(--spacing) * -.75); + + border: none !important; + box-shadow: none !important; + } + + #nav-bar.browser-toolbar { + overflow: visible !important; + height: 3rem; + } + + #urlbar-container { + position: absolute; + + flex: 0 !important; + + margin: 0; + top: 2.75rem; + + overflow: visible !important; + box-sizing: border-box !important; + } + + /* // put the url bar in the right position */ + #urlbar { + width: calc(var(--sdb-wdt) - var(--spacing) * 1.5) !important; + margin-left: calc(var(--spacing) * 1); + height: 2.75rem; + } + + #urlbar-background { + border-radius: var(--br) !important; + height: 100%; + } + + /* // means when the suggestions list is showing */ + #urlbar[breakout-extend="true"] { + padding: 0 !important; + width: calc(var(--sdb-wdt) - var(--spacing) * 1) !important; + margin-left: calc(var(--spacing) * 1.25); + border: 1px solid #fafafa40; + border-radius: var(--br); + + box-shadow: 0px 3px 7px #00000030; + } + + #main-window[privatebrowsingmode="temporary"] #urlbar[breakout-extend="true"] { + border: 2px solid var(--poiple); + } + + #urlbar[breakout-extend="true"] #urlbar-background { + border-radius: var(--br) var(--br) 0 0 !important; + } + + .urlbarView { + background: var(--toolbar-field-focus-background-color) !important; + width: calc(100%) !important; + margin-left: 0 !important; + margin-top: -.25rem !important; + box-sizing: border-box; + border-radius: 0 0 var(--br) var(--br); + } + + /* ## extras + // feel free to comment or uncomment each setting + I personally would recommend to keep them to keep + stuff cleaner + */ + + /* ** hide reader mode button when editing url bar */ + #urlbar[breakout-extend="true"] #reader-mode-button { + display: none; + } + + /* hide pip mode button when editing url bar */ + #urlbar[breakout-extend="true"] #picture-in-picture-button { + display: none; + } + + /* ** hide "Shield" icon */ + #urlbar:not(:hover) #tracking-protection-icon-container { + width: 0; + overflow: clip; + } + + /* ** hide Site information buttons */ + #urlbar:not(:hover) #identity-box { + width: 0; + overflow: clip; + } + + /* ** hide the "Search with" indicator on the urlbar */ + #urlbar-search-mode-indicator { display: none; } + + /* ** hide the "Always open in container" button */ + #urlbar #pageAction-urlbar-_testpilot-containers { + display: none; + } + + /* ** hide Container name */ + #userContext-label, #userContext-icons, #userContext-indicator { + display: none; + } + + /* ** hide identity box */ + #identity-box { + width: 0px; + overflow: hidden; + } + + /* ** hide 'open in side view' button*/ + #pageAction-urlbar-side-view_mozilla_org { + display: none; + } + ''; }; /* package = pkgs.wrapFirefox pkgs.firefox-unwrapped {