firefox: rework useChrome theme

modules/home/workstation/browser/firefox/default.nix

@@ -3,6 +3,7 @@
   lib,
   inputs',
   osConfig,
+  hozen,
   ...
 }: let
   inherit (lib) mkIf mkMerge;
@@ -45,7 +46,7 @@ in {
             # onepassword-password-manager # cannot get this to work unfree issue.
           ];
           settings = import ./settings/ooksJs.nix;
-          userChrome = import ./theme/ooksfox.nix {inherit fonts palette;};
+          userChrome = import ./theme/ooksfox.nix {inherit fonts hozen;};
           userContent = import ./theme/penguinFoxContent.nix;
         };
         profiles.testing = {

modules/home/workstation/browser/firefox/theme/ooksfox.nix

@@ -1,152 +1,200 @@
 {
-  palette,
+  hozen,
   fonts,
   ...
-}:
+}: let
-with palette;
+  inherit (hozen) color;
+in
   #css
   ''
-      /* minimal firefox css ooks  */
-
-      /* ===== Color Variables and Root Styles ===== */
     :root {
-        /* Fonts */
+
-        --font-mono: ${fonts.monospace.family}, monospace;
+      --clr-menu: #${color.layout.menu};
+      --clr-fg: #${color.typography.text};
+      --clr-secondary: #${color.secondary.base};
+
+
+      --border: 1px solid var(--clr-fg);
+      --border-active: 1px solid var(--clr-fg);
+      --border-inactive: 1px solid var(--clr-secondary);
+
+      --font-base: ${fonts.monospace.family};
+
     }
 
-      /* ===== General UI Modifications ===== */
+    * {
-      /* Hide status panel */
+      border-radius: 0 !important;
-      #statuspanel { display: none !important; }
+      font-family: ${fonts.monospace.family};
+    }
 
-      /* Remove border radius from menus */
+    #nav-bar {
-      menupopup, panel { --panel-border-radius: 0px !important; }
+      border: var(--border) !important;
-      menu, menuitem, menucaption { border-radius: 0px !important; }
+      background-color: var(--clr-menu) !important;
-
+    }
-      /* Hide navigation context menu items */
+    #urlbar {
-      menupopup > #context-navigation,
+      text-align: center;
-      menupopup > #context-sep-navigation { display: none !important; }
-
-      /* Hide various toolbar buttons */
-      #forward-button,
-      #reload-button,
-      #stop-button,
-      #home-button,
-      #library-button,
-      #PanelUI-button,
-      #unified-extensions-button,
-      #star-button,
-      #reader-mode-button,
-      #save-to-pocket-button,
-      #tracking-protection-icon-container,
-      #page-action-buttons,
-      #fxa-toolbar-menu-button,
-      #identity-box { display: none !important; }
-
-      /* Hide customizable UI springs */
-      #customizableui-special-spring1,
-      #customizableui-special-spring2 { display: none; }
-
-      /* Hide Personal Toolbar */
-      #PersonalToolbar { display: none !important; }
-
-      /* ===== URL Bar Styling ===== */
-
-      #urlbar-container {
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        padding-top: 0 !important;
-        padding-bottom: 0!important;
     }
 
     #urlbar-background {
-        border: solid 1px !important;
+      background-color: transparent !important;
-        border-radius: 0 !important;
+      border: unset !important;
-        outline: none !important;
+      box-shadow: unset !important;
-        background: #${crust} !important;
     }
 
-      #navigator-toolbox {
+    #urlbar-container {
-        border: none !important;
+     padding: 0 !important;
-        border-bottom: solid 1px !important;\
     }
 
-      /* Hide URL bar go button */
+    .urlbarView {
-      .urlbar-go-button { display: none !important; }
+      text-align: start;
-
+      border: var(--border) !important;
-      /* Remove navigation bar background */
+      margin: 0;
-      #nav-bar.browser-toolbar { background: none !important; }
+      padding: 0 !important;
-
+      background-color: var(--clr-menu);
-      /* Position and style navigation bar */
-
-      #nav-bar {
-        text-align: center;
-        min-height: 0 !important;
-        max-height: 0 !important;
-        height: 0 !important;
     }
 
-    /* Expand navigation bar on focus */
+    .urlbar-input-container {
-      #nav-bar:focus-within {
+      margin: 0px !important;
-        max-height: 40px !important;
-        height: 60px !important;
-        min-height: 15px !important;
     }
 
-      /* ===== Tab Bar Styling ===== */
-      /* Hide title bar buttons and spacer */
-      .titlebar-close,
-      .titlebar-spacer { display: none !important; }
 
-      /* Remove tab margin */
+    #identity-icon {
-      #titlebar {
+      color: red !important;
-        --proton-tab-block-margin: 0px !important;
-        --tab-block-margin: 0px !important;
     }
 
-      /* Remove tab shadows */
+    #forward-button,
-      #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
+    #stop-button,
-        box-shadow: none !important;
+    #star-button-box,
+    #translations-button,
+    #reload-button,
+    #identity-box,
+    #tracking-protection-icon-container,
+    #save-to-pocket-button,
+    .urlbar-page-action,
+    .urlbar-go-button,
+    /* firefox account button */
+    #fxa-toolbar-menu-button,
+    /* hamburger menu icon */
+    #PanelUI-button,
+    #PersonalToolbar
+    {
+      display: none;
     }
 
-      /* Hide tab-related buttons */
+    .titlebar-buttonbox-container,
-      #alltabs-button,
+    .tab-close-button,
+    .titlebar-spacer,
     #tabs-newtab-button,
+    #alltabs-button,
     #firefox-view-button,
-      #new-tab-button,
+    #new-tab-button {
-      .tab-close-button { display: none !important; }
+      display: none;
-
-      /* Style tabs */
-      tab {
-        font-family: var(--font-mono);
-        font-weight: bold;
     }
 
-      /* Set tab and tab bar height */
+
-      #TabsToolbar, .tabbrowser-tab {
+    #tabbrowser-tabs {
-        max-height: 35px !important;
+      margin: 0 !important;
-        background: #${crust} !important;
+      padding: 0 !important;
-        border: none;
+
+      margin-inline: 0px !important;
+      border: unset !important;
+      border-bottom: var(--border-inactive) !important;
     }
 
-      /* Center tabs when not overflowing */
+    .tabbrowser-tab {
-      #tabbrowser-arrowscrollbox:not([overflowing]) {
+      padding: 5px !important;
-        --uc-flex-justify: center;
+      padding-left: 5px !important;
     }
 
-      scrollbox[orient="horizontal"] {
+    .tabbrowser-tab[pinned] {
-        justify-content: var(--uc-flex-justify, initial);
+      margin: 0px !important;
+      padding: 5px !important;
     }
 
-      /* Style selected tabs */
+    #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
-      #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
+      margin-inline-start: 0px !important;
-        border: solid 1px var(--base05) !important;
-        color: var(--base07);
-        background: var(--base02)
     }
 
-      /* Style non-selected tabs */
+    .tab-stack {
-      tab:not([selected="true"]) {
+      margin-inline: 0 !important;
-        /* border: solid 1px var(--base05) !important; */
-        background: var(--base01) !important;
     }
+    .tab-background {
+      border-radius: 0px;
+      border: var(--border-inactive);
+    }
+    .tab-background[selected] {
+     border: var(--border-active);
+    }
+
+    #TabsToolbar {
+      padding-left: 0px !important;
+      margin: 0;
+      padding: 0;
+    }
+
+    root{
+      --uc-navbar-transform: -40px;
+    }
+    :root[uidensity="compact"]{ --uc-navbar-transform: -34px }
+
+    #navigator-toolbox > div{ display: contents; }
+    :root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
+      transform: translateY(var(--uc-navbar-transform))
+    }
+    :root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#tab-notification-deck,.global-notificationbox){
+      transform: none !important;
+      opacity: 1 !important;
+    }
+
+    #nav-bar:not([customizing]){
+      opacity: 0;
+      position: relative;
+      z-index: 2;
+    }
+    #titlebar{ position: relative; z-index: 3 }
+
+    #navigator-toolbox,
+    #sidebar-box,
+    #sidebar-main,
+    #sidebar-splitter,
+    #tabbrowser-tabbox{
+      z-index: auto !important;
+    }
+    #navigator-toolbox:focus-within > .browser-toolbar{
+      transform: translateY(0);
+      opacity: 1;
+    }
+    #titlebar:hover ~ .browser-toolbar,
+    .browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar),
+    #nav-bar:hover,
+    #nav-bar:hover + #PersonalToolbar{
+      transform: translateY(0);
+      opacity: 1;
+    }
+    :root[sessionrestored] #urlbar[popover]{
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(var(--uc-navbar-transform));
+    }
+    #mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
+    .browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
+    #nav-bar:is(:hover,:focus-within) #urlbar[popover],
+    #urlbar-container > #urlbar[popover]:is([focused],[open]){
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0);
+    }
+    #mainPopupSet:has(> [role="group"][panelopen]) ~ #navigator-toolbox > .browser-toolbar{
+      transform: translateY(0);
+      opacity: 1;
+    }
+    #nav-bar.browser-titlebar{
+      background: inherit;
+    }
+    #toolbar-menubar:not([autohide="true"]) ~ #nav-bar.browser-titlebar{
+      background-position-y: -28px; /* best guess, could vary */
+      border-top: none !important;
+    }
+    /* Move up the content view */
+    :root[sessionrestored]:not([inFullscreen],[chromehidden~="toolbar"]) > body > #browser{ margin-top: var(--uc-navbar-transform); }
   ''