initial commit

1 files changed, 175 insertions, 0 deletions

diff --git a/userChrome.css b/userChrome.css
new file mode 100644
index 0000000..7ec4588
--- /dev/null
+++ b/userChrome.css
@@ -0,0 +1,175 @@
+/* TODO create separate repo for this */
+/* TOP BAR */
+#navigator-toolbox {
+  --uc-navigationbar-width: 40vw;
+
+  #TabsToolbar {
+    /* Move new tab to far right */
+    #tabbrowser-arrowscrollbox-periphery { margin-left: auto }
+    /* remove alltabs button */
+    #alltabs-button { display: none }
+  }
+
+  #nav-bar {
+    /* Remove overflow button */
+    #nav-bar-overflow-button { display: none }
+  }
+
+  #PersonalToolbar {
+    /* Change background color of bookmarks toolbar */
+    background: var(--toolbox-bgcolor) !important;
+    /* Adjust spacing of toolbar items */
+    #PlacesToolbarItems { gap: .35rem; margin-block: .2rem }
+  }
+}
+
+/* Media queries for width of nav bar */
+@media screen and (max-width: 1000px) {
+  #navigator-toolbox { --uc-navigationbar-width: 50vw }
+}
+@media screen and (max-width: 800px) {
+  #navigator-toolbox { --uc-navigationbar-width: 60vw }
+}
+
+/* Change look of tabs in smaller view */
+@media screen and (max-width: 800px) {
+  #TabsToolbar-customization-target {
+    /* TODO fix w/o. Don't allow tabbar to move up when moving tabs */
+    height: 37px;
+    /* Make tabs fill more vertical space */
+    .tab-background { margin-block: 1px !important }
+  }
+}
+
+
+/* COMBINE TOP BAR */
+/* Combine top bar into single line if width >= 800px */
+@media screen and (min-width: 800px) {
+  /* Half height bar */
+  :root { --uc-toolbar-height: 36px }
+
+  /* Modify these to change relative widths or default height */
+  #navigator-toolbox {
+    margin-bottom: 0px;
+    padding-top: 1px; /* Top bar is cut off otherwise */
+
+    #TabsToolbar {
+      margin-left: calc(var(--uc-navigationbar-width) + 2px); /* Resize tab bar */
+      margin-top: -4px;
+      margin-bottom: 2px;
+
+      #TabsToolbar-customization-target {
+        height: var(--uc-toolbar-height);
+
+        /* Tabs extend to bottom of bar */
+        .tab-background {
+          margin-bottom: 0 !important;
+          margin-top: 3px !important; /* See above navigator-toolbox rule. Avoid cutting off top */
+        }
+
+        /* 1px margin on touch density causes tabs to be too high */
+        .tab-close-button { margin-top: 0 !important }
+      }
+
+       /* Center tab buttons */
+      #tabs-newtab-button, #alltabs-button { margin-top: 4px !important }
+    }
+
+    /* Integrate url / nav bar */
+    #nav-bar {
+      margin-right:calc(100vw - var(--uc-navigationbar-width));
+      margin-top: calc(0px - var(--uc-toolbar-height));
+      border-radius: 0 var(--tab-border-radius) var(--tab-border-radius) 0;
+      border-right: 1px solid ThreeDShadow !important;
+      box-shadow: 0 0 4px rgba(0,0,0,.4) !important;
+      /* Fix spacing around tabs by removing nav bar top border */
+      border: none !important;
+
+      #urlbar-container {
+        /* Remove min and max width of urlbar */
+        width: 0 !important;
+        /* Make opened urlbar overlay the toolbar */
+        #urlbar[open]:focus-within { min-width: 50vw !important }
+      }
+    }
+
+    /* Bottom of tags is cut off by 1px without this */
+    #PersonalToolbar { margin-top: 1px }
+  }
+
+  /* Fix customization view */
+  #customization-panelWrapper .panel-arrowbox .panel-arrow {
+    margin-inline-end: initial !important;
+  }
+
+  /* Shorten findbar */
+  findbar {
+    width: 600px !important;
+    border-radius: 0 0 0 5px;
+    border-bottom: none !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,.4); /* Move down 2px so it doesn't go over the tab bar */
+  }
+}
+
+
+/* FINDBAR */
+findbar {
+  width: 100vw;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 !important;
+  padding-top: 1px !important;
+  background: -moz-headerbar Field !important;
+  border-top-width: 0px !important;
+  border-bottom: 1px solid ThreeDShadow;
+
+  .findbar-container {
+    padding-bottom: 5px !important; /* Move search bar closer to left edge */
+    padding-top:    2px !important; /* Move search bar closer to left edge */
+    height: max-content !important;
+    gap: 2px;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    /* Force textbox to fill up first line */
+    .findbar-textbox {
+      width: 100% !important;
+      background: Field !important; /* Set the background color to be consistent with found-matches label when unfocused */
+    }
+
+    description {
+      /* Hide description showing wrap conditions etc. */
+      display: none;
+      /* Show description when it says "Phrase Not Found" */
+      &[status=notfound] { display: inline-block }
+    }
+
+    /* Move found matches label (roughly) into the textbox */
+    label.found-matches,
+    description {
+      position: absolute;
+      top: 6.5px;
+      right: 110px;
+      color: color-mix(in srgb, -moz-headerbartext, transparent 46%) !important;
+      /* So this text overrides the text below, TODO find a more elegant solution */
+      padding-inline: 1ex;
+      background: Field;
+    }
+
+    /* Force checkboxes onto second line */
+    hbox { width: 100% }
+  }
+}
+
+
+/* BOOKMARK BAR */
+@-moz-document url(chrome://browser/content/browser.xhtml) {
+  #PersonalToolbar {
+    background: -moz-headerbar Field !important;
+    border-top: 1px solid ThreeDShadow !important;
+    z-index: 1000; /* To not be affected by shadow from navbar */
+    /* Space out bookmark items */
+   .bookmark-item .toolbarbutton-text { padding: 2.5px 4px }
+  }
+}