A rewrite of Poly+, my quality-of-life browser extension for Polytoria. Built entirely fresh using the WXT extension framework, Typescript, and with added better overall code quality.
indexx.dev
extension
1:root {
2 font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 line-height: 1.5;
4 font-weight: 400;
5
6 color-scheme: light dark;
7 color: rgba(255, 255, 255, 0.87);
8 background-color: #242424;
9
10 font-synthesis: none;
11 text-rendering: optimizeLegibility;
12 -webkit-font-smoothing: antialiased;
13 -moz-osx-font-smoothing: grayscale;
14 -webkit-text-size-adjust: 100%;
15}
16
17a {
18 font-weight: 500;
19 color: #646cff;
20 text-decoration: inherit;
21}
22a:hover {
23 color: #535bf2;
24}
25
26body {
27 margin: 0;
28 display: flex;
29 place-items: center;
30 min-width: 320px;
31 min-height: 100vh;
32}
33
34h1 {
35 font-size: 3.2em;
36 line-height: 1.1;
37}
38
39#app {
40 max-width: 1280px;
41 margin: 0 auto;
42 padding: 2rem;
43 text-align: center;
44}
45
46.logo {
47 height: 6em;
48 padding: 1.5em;
49 will-change: filter;
50 transition: filter 300ms;
51}
52.logo:hover {
53 filter: drop-shadow(0 0 2em #54bc4ae0);
54}
55.logo.vanilla:hover {
56 filter: drop-shadow(0 0 2em #3178c6aa);
57}
58
59.card {
60 padding: 2em;
61}
62
63.read-the-docs {
64 color: #888;
65}
66
67button {
68 border-radius: 8px;
69 border: 1px solid transparent;
70 padding: 0.6em 1.2em;
71 font-size: 1em;
72 font-weight: 500;
73 font-family: inherit;
74 background-color: #1a1a1a;
75 cursor: pointer;
76 transition: border-color 0.25s;
77}
78button:hover {
79 border-color: #646cff;
80}
81button:focus,
82button:focus-visible {
83 outline: 4px auto -webkit-focus-ring-color;
84}
85
86@media (prefers-color-scheme: light) {
87 :root {
88 color: #213547;
89 background-color: #ffffff;
90 }
91 a:hover {
92 color: #747bff;
93 }
94 button {
95 background-color: #f9f9f9;
96 }
97}