he4et/tabswiper
1
0
Fork 0
mirror of https://github.com/He4eT/tabswiper.git synced 2026-05-04 16:47:23 +00:00
Code Issues Projects Releases Packages Wiki Activity

Cleanup styles

Browse source
This commit is contained in:
He4eT 2023-08-17 04:13:22 +03:00
commit a66868cf0c
5 changed files with 28 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

16
popup/css/popup.css
View file

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

1
popup/tabswiper/modules/clickHandlers.js
View file

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

1
popup/tabswiper/modules/keyboardHandlers.js
View file

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

51
popup/tabswiper/tabswiper.css
View file

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

3
popup/tabswiper/tabswiper.js
View file

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