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

pages/search: shaped tabs

Browse source
This commit is contained in:
He4eT 2024-01-20 04:21:59 +01:00
commit 5df95ea62c
6 changed files with 221 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

44
pages/css/common.css
View file

@ -2,29 +2,43 @@ html, body {
font-family: sans;
margin: 0;
padding: 0;
}
.popup {
--step: 8px;
--color-bg: #ffffff;
--color-text: #333333;
--color-accent: #888888;
/* @see https://acorn.firefox.com/latest/styles/color-MZHBVuZc#section-gray-c2 */
--gray-light-05: #fbfbfe;
--gray-light-10: #f9f9fb;
--gray-light-20: #f0f0f4;
--gray-light-30: #e0e0e6;
--gray-light-40: #cfcfd8;
--gray-light-50: #bfbfc9;
--gray-dark-05: #5b5b66;
--gray-dark-10: #52525e;
--gray-dark-30: #42414d;
--gray-dark-40: #3a3944;
--gray-dark-60: #2b2a33;
--gray-dark-80: #1c1b22;
--gray-dark-90: #15141a;
}
body {
--color-bg: var(--gray-light-10);
--color-text: var(--gray-dark-80);
}
@media (prefers-color-scheme: dark) {
.popup {
--color-bg: #1c1c1c;
--color-text: #eeeeee;
--color-accent: #cccccc;
body {
--color-bg: var(--gray-dark-60);
--color-text: var(--gray-light-40);
}
}
/* Controls */
/* Common */
*:focus-visible {
outline-color: var(--color-accent);
outline-offset: 4px;
outline-style: solid;
outline-width: 1px;
body {
font-size: calc(2 * var(--step));
background-color: var(--color-bg);
color: var(--color-text);
}