IMPR: Minor styling improvements

src/components/Search.ts

@@ -5,6 +5,11 @@ import { SearchResult, SearchResultComponent } from './SearchResult';
 
 type SectionRefs = Record<string, SearchResultComponent>;
 
+// focus to search element on new-tab reload
+document.addEventListener("DOMContentLoaded", function() {
+    document.getElementById('s').focus();
+});
+
 const runSearch = (text: string, section: SectionRefs) => {
   const openTabs = section[DEFAULT_SECTION_ORDER[0]];
   const bookmarks = section[DEFAULT_SECTION_ORDER[1]];

src/css/newtab.xcss

@@ -7,14 +7,14 @@
 
 body {
   overflow-y: scroll; // prevent jump on load
-  margin: 108px 0;
+  margin: 6em 0;
   color: var(--c3);
-  font-size: 18px;
+  font-size: 1rem;
   font-variant: none;
   // Although it's best practice to use a unitless value for line-height, this
   // is a hack for alignment with the minimum possible style properties. Value
   // should be the same as as bookmark bar height.
-  line-height: 42px;
+  line-height: 2.2;
   background: var(--b);
   text-rendering: optimizespeed;
 }
@@ -46,6 +46,7 @@ img {
   width: 16px;
   height: 16px; // prevents realignment jump on load
   margin: 0 10px 0 0;
+  filter: invert(var(--i));
 }
 
 svg {
@@ -65,25 +66,17 @@ svg {
   padding: 0 18px;
 }
 
-/* "Load more" button */
-button {
-  width: initial;
-  margin-top: 9px;
-  padding: 11px 20px;
-  font-size: 18px;
-}
-
 button,
 // search input
 #s {
   box-sizing: border-box;
   width: 100%;
-  margin: 0 0 35px;
-  padding: 11px 20px 11px 58px;
+  margin: 0 0 1em;
+  padding: .5em 1em .5em 4rem;
   border: 2px solid var(--c1);
-  border-radius: 24px;
+  border-radius: 1em;
   color: var(--t);
-  font-size: 21px;
+  font-size: 1.5rem;
   background: inherit;
   outline: none;
 
@@ -93,17 +86,28 @@ button,
   }
 }
 
+
+/* "Load more" button */
+button {
+    display: block;
+    width: 100%;
+    margin-top: 1em;
+    padding: .5em 1em;
+    font-size: 1.2em;
+}
+
+
 // menu icon
 #im,
 // search icon
 #i {
-  color: var(--c3);
+  color: var(--t);
 }
 
 #i {
   position: absolute;
-  top: 14px;
-  left: 38px;
+  top: 1rem;
+  left: 2rem;
 }
 
 // overflow bookmark folder icon
@@ -118,7 +122,7 @@ button,
   right: 0;
   left: 0;
   display: flex;
-  height: 42px; // should be same as body line-height
+  height: 2.2rem; // should be same as body line-height
   background: var(--c2);
   box-shadow: var(--s);
 
@@ -194,8 +198,7 @@ hr {
 // menu dropdown
 #d {
   position: absolute;
-  top: 10px;
-  padding: 18px;
+  top: .5rem;
   background: var(--c2);
   box-shadow: var(--s);
   opacity: 0;
@@ -210,3 +213,27 @@ hr {
     transition-duration: 192ms;
   }
 }
+
+#d,#b {
+    a,.f {
+        display: block;
+        line-height: 1.5;
+        padding: 0.5em;
+
+        &:hover,
+        &:focus {
+            transition: text-indent 160ms;
+            text-indent: 1em;
+            text-decoration: none;
+            color: var(--c2);
+            background: var(--t);
+        }
+    }
+
+    .f,.sf {
+        &:hover,
+        &:focus {
+            text-indent: 0;
+        }
+    }
+}

src/css/settings.xcss

@@ -2,7 +2,7 @@ body,
 button,
 select {
   color: #293742;
-  font-size: 18px;
+  font-size: 1rem;
 }
 
 svg {
@@ -16,14 +16,19 @@ svg {
 
 label {
   display: block;
-  margin-bottom: 6px;
-  font-size: 20px;
+  margin-bottom: .5em;
+  font-size: 1rem;
   font-weight: bold;
 }
 
 fieldset {
-  border: 1px solid #aaa;
-  border-radius: 2px;
+    padding-top: 1em;
+    border: 1px solid #d8d7d7;
+    border-radius: 2px;
+}
+
+fieldset + fieldset {
+    margin-top: 1rem;
 }
 
 ul {
@@ -34,11 +39,19 @@ ul {
 }
 
 legend {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 select {
-  padding: 0.25em 0.5em;
+    border-color: #888;
+    background: #fff;
+    padding: 0.25em 0.5em;
+    width: 100%;
+}
+
+button {
+    width: 100%;
+    padding: 0.5em 1em;
 }
 
 .muted {
@@ -64,13 +77,14 @@ select {
   position: relative;
   display: flex;
   align-items: center;
-  margin: 0 0 6px;
-  padding: 10px;
-  border: 2px solid currentcolor;
-  border-radius: 4px;
+  margin: 0 0 0.5em;
+  padding: 0.5em;
+  border: 1px solid currentcolor;
+  border-radius: 0.25em;
   font-weight: bold;
   line-height: 0;
   background: #ffffff8c;
+  border-color: #ccc;
   cursor: grab;
 
   &:last-of-type {

src/css/themes/dark.xcss

@@ -5,10 +5,11 @@
 :root {
   --s: 0 2px 4px #00001126; // shadow
   --b: #23252d; // background
-  --t: #9da5b4; // text
+  --t: #bec4ce; // text
   --c1: #2c313a; // bookmark node hover background, hr, button border, search input border
   --c2: #292d35; // bookmarks bar, menu dropdown, "load more" button
-  --c3: #383e4a; // icons, empty folder text, text fallback (headings, etc.)
+  --c3: #d6b48c; // icons, empty folder text, text fallback (headings, etc.)
+  --i: 1; // invert icons
 
   color-scheme: dark;
 }

src/css/themes/hacker-terminal.xcss

@@ -9,6 +9,7 @@
   --c1: #113321; // bookmark node hover background, hr, button border, search input border
   --c2: #001104; // bookmarks bar, menu dropdown, "load more" button
   --c3: #26ba3c; // icons, empty folder text, text fallback (headings, etc.)
+  --i: 1; // invert icons
 
   color-scheme: dark;
 }

src/css/themes/light.xcss

@@ -9,4 +9,5 @@
   --c1: #e5e5e6; // bookmark node hover background, hr, button border, search input border
   --c2: #fff; // bookmarks bar, menu dropdown, "load more" button
   --c3: #dbdbdc; // icons, empty folder text, text fallback (headings, etc.)
+  --i: 0; // invert icons
 }

src/css/themes/neon-dreams.xcss

@@ -9,6 +9,7 @@
   --c1: #00334d; // bookmark node hover background, hr, button border, search input border
   --c2: #000a0f; // bookmarks bar, menu dropdown, "load more" button
   --c3: #0af; // icons, empty folder text, text fallback (headings, etc.)
+  --i: 1; // invert icons
 
   color-scheme: dark;
 }

src/css/themes/rich-black.xcss

@@ -9,6 +9,7 @@
   --c1: #1d1616; // bookmark node hover background, hr, button border, search input border
   --c2: #0f0b0b; // bookmarks bar, menu dropdown, "load more" button
   --c3: #392d2d; // icons, empty folder text, text fallback (headings, etc.)
+  --i: 1; // invert icons
 
   color-scheme: dark;
 }

src/css/themes/tilde-club.xcss

@@ -11,6 +11,7 @@
   --c1: #fb5; // bookmark node hover background, hr, button border, search input border
   --c2: #111; // bookmarks bar, menu dropdown, "load more" button
   --c3: #fb5; // icons, empty folder text, text fallback (headings, etc.)
+  --i: 1; // invert icons
 
   color-scheme: dark;
 }

src/utils.ts

@@ -23,4 +23,9 @@ export const handleClick = (event: MouseEvent): void => {
       void chrome.tabs.update({ url });
     }
   }
+
+  // focus search element on bad click
+  if(target.tagName=== 'BODY') {
+    document.getElementById('s').focus();
+  }
 };