diff --git a/popup/css/popup.css b/popup/css/popup.css index 88c365c..9945410 100644 --- a/popup/css/popup.css +++ b/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; } diff --git a/popup/tabswiper/modules/clickHandlers.js b/popup/tabswiper/modules/clickHandlers.js index ad652cf..1b384cd 100644 --- a/popup/tabswiper/modules/clickHandlers.js +++ b/popup/tabswiper/modules/clickHandlers.js @@ -13,4 +13,3 @@ export const attachClickHandlers = (store) => { }) }) } - diff --git a/popup/tabswiper/modules/keyboardHandlers.js b/popup/tabswiper/modules/keyboardHandlers.js index d6b10d0..70fb52d 100644 --- a/popup/tabswiper/modules/keyboardHandlers.js +++ b/popup/tabswiper/modules/keyboardHandlers.js @@ -18,4 +18,3 @@ export const attachKeyboardHandlers = (store) => { } }) } - diff --git a/popup/tabswiper/tabswiper.css b/popup/tabswiper/tabswiper.css index 3907296..8c58367 100644 --- a/popup/tabswiper/tabswiper.css +++ b/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; } diff --git a/popup/tabswiper/tabswiper.js b/popup/tabswiper/tabswiper.js index 133eaff..5d41ff6 100644 --- a/popup/tabswiper/tabswiper.js +++ b/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() }) -