From 3d4b7f6b40cc46f15a3e437eabdc1bf3fb956ccf Mon Sep 17 00:00:00 2001
From: ooks-io <ooks@protonmail.com>
Date: Mon, 12 Aug 2024 19:13:57 +1200
Subject: [PATCH] feat(home:firefox): minor adjustments to ooksfox css

---
 .../desktop/browser/firefox/theme/ooksfox.nix | 267 ++++++++----------
 1 file changed, 122 insertions(+), 145 deletions(-)

diff --git a/home/modules/desktop/browser/firefox/theme/ooksfox.nix b/home/modules/desktop/browser/firefox/theme/ooksfox.nix
index 1a05b6b..3374111 100644
--- a/home/modules/desktop/browser/firefox/theme/ooksfox.nix
+++ b/home/modules/desktop/browser/firefox/theme/ooksfox.nix
@@ -3,174 +3,151 @@
   fonts,
   ...
 }:
-# css
-''
-  /* minimal firefox css ooks  */
+with palette;
+#css
+  ''
+      /* minimal firefox css ooks  */
 
-  /* ===== Color Variables and Root Styles ===== */
-  :root {
-    /* Base colors */
-    --base00: #${palette.base00}; /* ---- */
-    --base01: #${palette.base01}; /* --- */
-    --base02: #${palette.base02}; /* -- */
-    --base03: #${palette.base03}; /* - */
-    --base04: #${palette.base04}; /* + */
-    --base05: #${palette.base05}; /* ++ */
-    --base06: #${palette.base06}; /* +++ */
-    --base07: #${palette.base07}; /* ++++ */
+      /* ===== Color Variables and Root Styles ===== */
+      :root {
+        /* Fonts */
+        --font-mono: ${fonts.monospace.family}, monospace;
+        }
 
-    /* Accent colors */
-    --base08: #${palette.base08}; /* red */
-    --base09: #${palette.base09}; /* orange */
-    --base0A: #${palette.base0A}; /* yellow */
-    --base0B: #${palette.base0B}; /* green */
-    --base0C: #${palette.base0C}; /* aqua/cyan */
-    --base0D: #${palette.base0D}; /* blue */
-    --base0E: #${palette.base0E}; /* purple */
-    --base0F: #${palette.base0F}; /* brown */
+      /* ===== General UI Modifications ===== */
+      /* Hide status panel */
+      #statuspanel { display: none !important; }
 
-    /* UI-specific colors */
-    --toolbar-bgcolor: red;
-    --tab-active-bg-color: red;
+      /* Remove border radius from menus */
+      menupopup, panel { --panel-border-radius: 0px !important; }
+      menu, menuitem, menucaption { border-radius: 0px !important; }
 
-    /* Fonts */
-    --font-mono: ${fonts.monospace.family}, monospace;
-    }
+      /* Hide navigation context menu items */
+      menupopup > #context-navigation,
+      menupopup > #context-sep-navigation { display: none !important; }
 
-  /* ===== General UI Modifications ===== */
-  /* Hide status panel */
-  #statuspanel { display: none !important; }
+      /* Hide various toolbar buttons */
+      #back-button,
+      #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; }
 
-  /* Remove border radius from menus */
-  menupopup, panel { --panel-border-radius: 0px !important; }
-  menu, menuitem, menucaption { border-radius: 0px !important; }
+      /* Hide customizable UI springs */
+      #customizableui-special-spring1,
+      #customizableui-special-spring2 { display: none; }
 
-  /* Hide navigation context menu items */
-  menupopup > #context-navigation,
-  menupopup > #context-sep-navigation { display: none !important; }
+      /* Hide Personal Toolbar */
+      #PersonalToolbar { display: none !important; }
 
-  /* Hide various toolbar buttons */
-  #back-button,
-  #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; }
+      /* ===== URL Bar Styling ===== */
 
-  /* Hide customizable UI springs */
-  #customizableui-special-spring1,
-  #customizableui-special-spring2 { display: none; }
+      #urlbar-container {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        padding-top: 0 !important;
+        padding-bottom: 0!important;
+      }
 
-  /* Hide Personal Toolbar */
-  #PersonalToolbar { display: none !important; }
+      #urlbar-background {
+        border: solid 1px !important;
+        border-radius: 0 !important;
+        outline: none !important;
+        background: #${crust} !important;
+      }
 
-  /* ===== URL Bar Styling ===== */
-  /* Style input box */
-  moz-input-box {
-    background: var(--base01) !important;
-    color: var(--base07) !important;
-    border: solid 1px var(--base05) !important;
-  }
+      #navigator-toolbox {
+        border: none !important;
+        border-bottom: solid 1px !important;\
+      }
 
-  /* Style input box */
-  #urlbar-input-container {
-    background: var(--base08) !important;
-    color: var(--base07) !important;
-    border: none !important;
-    border-radius: 5 !important;
-  }
+      /* Hide URL bar go button */
+      .urlbar-go-button { display: none !important; }
 
-  /* Hide URL bar go button */
-  .urlbar-go-button { display: none !important; }
+      /* Remove navigation bar background */
+      #nav-bar.browser-toolbar { background: none !important; }
 
-  /* Remove navigation bar background */
-  #nav-bar.browser-toolbar { background: none !important; }
+      /* Position and style navigation bar */
 
-  /* Position and style navigation bar */
-  #nav-bar {
-    opacity: 0;
-    text-align: center;
-    position: fixed !important;
-    border: solid 1px var(--nix-fg1) !important;
-    top: 30px;
-    left: 25%;
-    right: 25%;
-    z-index: 1;
-  }
+      #nav-bar {
+        text-align: center;
+        min-height: 0 !important;
+        max-height: 0 !important;
+        height: 0 !important;
+      }
 
-  /* Expand navigation bar on focus */
-  #nav-bar:focus-within {
-    opacity: 1;
-    max-height: 40px !important;
-    height: 60px !important;
-    min-height: 15px !important;
-  }
+    /* Expand navigation bar on focus */
+      #nav-bar:focus-within {
+        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; }
+      /* ===== Tab Bar Styling ===== */
+      /* Hide title bar buttons and spacer */
+      .titlebar-close,
+      .titlebar-spacer { display: none !important; }
 
-  /* Remove tab margin */
-  #titlebar {
-    --proton-tab-block-margin: 0px !important;
-    --tab-block-margin: 0px !important;
-  }
+      /* Remove tab margin */
+      #titlebar {
+        --proton-tab-block-margin: 0px !important;
+        --tab-block-margin: 0px !important;
+      }
 
-  /* Remove tab shadows */
-  #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
-    box-shadow: none !important;
-  }
+      /* Remove tab shadows */
+      #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
+        box-shadow: none !important;
+      }
 
-  /* Hide tab-related buttons */
-  #alltabs-button,
-  #tabs-newtab-button,
-  #firefox-view-button,
-  #new-tab-button,
-  .tab-close-button { display: none !important; }
+      /* Hide tab-related buttons */
+      #alltabs-button,
+      #tabs-newtab-button,
+      #firefox-view-button,
+      #new-tab-button,
+      .tab-close-button { display: none !important; }
 
-  /* Style tabs */
-  tab {
-    font-family: var(--font-mono);
-    font-weight: bold;
-  }
+      /* Style tabs */
+      tab {
+        font-family: var(--font-mono);
+        font-weight: bold;
+      }
 
-  /* Set tab and tab bar height */
-  #TabsToolbar, .tabbrowser-tab {
-    max-height: 35px !important;
-    background: var(--base00) !important;
-    padding-bottom:0 !important;
-    border: none;
-  }
+      /* Set tab and tab bar height */
+      #TabsToolbar, .tabbrowser-tab {
+        max-height: 35px !important;
+        background: #${crust} !important;
+        border: none;
+      }
 
-  /* Center tabs when not overflowing */
-  #tabbrowser-arrowscrollbox:not([overflowing]) {
-    --uc-flex-justify: center;
-  }
+      /* Center tabs when not overflowing */
+      #tabbrowser-arrowscrollbox:not([overflowing]) {
+        --uc-flex-justify: center;
+      }
 
-  scrollbox[orient="horizontal"] {
-    justify-content: var(--uc-flex-justify, initial);
-  }
+      scrollbox[orient="horizontal"] {
+        justify-content: var(--uc-flex-justify, initial);
+      }
 
-  /* Style selected tabs */
-  #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
-    border: solid 1px var(--base05) !important;
-    color: var(--base07);
-    background: var(--base02)
-  }
+      /* Style selected tabs */
+      #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
+        border: solid 1px var(--base05) !important;
+        color: var(--base07);
+        background: var(--base02)
+      }
 
-  /* Style non-selected tabs */
-  tab:not([selected="true"]) {
-    /* border: solid 1px var(--base05) !important; */
-    background: var(--base01) !important;
-  }
-''
+      /* Style non-selected tabs */
+      tab:not([selected="true"]) {
+        /* border: solid 1px var(--base05) !important; */
+        background: var(--base01) !important;
+      }
+  ''