Cleanup styles

popup/css/popup.css

@@ -5,20 +5,18 @@ html, body {
 }
 
 .popup {
-  --color-bg: #eeeeee;
+  --step: 8px;
+
   --color-bg: #ffffff;
   --color-text: #333333;
-  --color-accent: #666666;
-  --color-accent: #777777;
-
-  --step: 8px;
+  --color-accent: #888888;
 }
 
 @media (prefers-color-scheme: dark) {
   .popup {
-    --color-bg: darkgray;
-    --color-text: white;
-    --color-accent: blue;
+    --color-bg: #1c1c1c;
+    --color-text: #eeeeee;
+    --color-accent: #cccccc;
   }
 }
 
@@ -26,7 +24,7 @@ html, body {
 
 *:focus-visible {
   outline-color: var(--color-accent);
-  outline-offset: 2px;
+  outline-offset: 4px;
   outline-style: solid;
   outline-width: 1px;
 }

popup/tabswiper/modules/clickHandlers.js

@@ -13,4 +13,3 @@ export const attachClickHandlers = (store) => {
     })
   })
 }
-

popup/tabswiper/modules/keyboardHandlers.js

@@ -18,4 +18,3 @@ export const attachKeyboardHandlers = (store) => {
     }
   })
 }
-

popup/tabswiper/tabswiper.css

@@ -1,65 +1,56 @@
 .tabswiper {
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-accent);
-  color: var(--color-text);
-  width: 640px;
   padding: calc(2 * var(--step));
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  width: 600px;
 }
 
 /* Header */
 
-.tabswiper header {
-  padding-block-end: calc(2 * var(--step));
-  /* border-block-end: 1px solid var(--color-accent); */
-
+header {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  padding-block-end: calc(2 * var(--step));
 }
 
-.tabswiper .favicon {
+header .favicon {
   width: calc(3 * var(--step));
   height: calc(3 * var(--step));
   margin-inline-end: calc(1 * var(--step));
 }
 
-.tabswiper .tabCounter {
+header .tabCounter {
   display: flex;
   align-items: center;
 }
 
-.tabswiper .actions {
+header .actions {
   display: flex;
-  flex-direction: row;
-  gap: var(--step);
+  align-items: center;
+  gap: calc(2 * var(--step));
+}
+
+header .actions .actionButton {
+  padding: 0;
 }
 
 /* Current Tab */
 
-.tabswiper .currentTab {
-  /* padding-block-start: calc(2 * var(--step)); */
-  /* padding-block-end: calc(3 * var(--step)); */
+.currentTab {
+  display: block;
+  color: inherit;
   cursor: pointer;
+  text-decoration: none;
   word-wrap: break-word;
-  /* line-height: 1.5; */
 }
 
-.tabswiper .currentTab .title {
+.currentTab .title {
   font-size: 1.25em;
   margin-block-end: calc(1 * var(--step));
-  /* font-weight: bold; */
 }
 
-.tabswiper .currentTab .url {
-  /* font-size: 0.8em; */
+.currentTab .url {
   color: var(--color-accent);
-  text-decoration: none;
-}
-
-/* Footer */
-
-
-.tabswiper footer .actionButton {
-  flex: 1 1 auto;
 }

popup/tabswiper/tabswiper.js

@@ -21,7 +21,7 @@ const store = tabswiperStore.init({
 
     /* Update UI. */
     updateInterface(state)
-  }
+  },
 })
 
 /* Attach UI handlers. */
@@ -35,4 +35,3 @@ enableFaviconFallback()
 browser.tabs.onActivated.addListener(() => {
   window.close()
 })
-