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
1html,
2body,
3#page {
4 background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
5 url(/images/client-loading.png);
6 background-color: #222222;
7 background-size: 400px;
8 background-position: center;
9}
10
11#page {
12 margin-top: 7.5rem;
13 width: 65%;
14 margin-right: auto;
15 margin-left: auto;
16 margin-bottom: 3.5rem;
17}
18
19h1 {
20 font-size: 4.6rem;
21 /*color: rgb(48, 48, 48);*/
22}
23
24h1 span.indent {
25 border-left: 10px solid rgb(48, 48, 48);
26 margin-right: 15px;
27}
28
29h1 span.highlight {
30 color: red;
31}
32
33h2 {
34 color: rgb(48, 48, 48);
35}
36
37h2 span.indent {
38 border-left: 7.5px solid rgb(48, 48, 48);
39 margin-right: 15px;
40}
41
42.setting-container:not(:last-child) {
43 margin-bottom: 30px;
44}
45
46.setting-container .title {
47 font-size: 1.4rem;
48 font-weight: bold;
49}
50
51.setting-container .desc,
52.setting-container .warning,
53.setting-container .note {
54 display: block;
55 width: 75%;
56}
57
58.setting-container .desc {
59 color: rgb(120, 120, 120);
60}
61
62.setting-buttons {
63 float: right;
64}
65
66.setting-buttons button {
67 width: 100px;
68}
69
70.setting-buttons button:first-child:not(:last-child) {
71 margin-right: 5px;
72}
73
74.setting-container select:first-of-type {
75 margin-top: 10px;
76}
77
78.goback {
79 color: rgb(120, 120, 120);
80 text-decoration: none;
81}
82
83dialog {
84 background-color: #080808;
85 color: #c4c4c4;
86 border: 1px solid #3bafff;
87 border-radius: 10px;
88}
89
90.input-group-text {
91 background-color: #000;
92 border-color: #000;
93 color: #fff;
94}
95
96label {
97 font-size: 0.8rem;
98 margin-bottom: 2.75px;
99}
100
101dialog::backdrop {
102 background-color: rgba(0, 0, 0, 0.73);
103}
104
105dialog .modal-header p {
106 margin-bottom: 0px;
107 color: #fff;
108}
109
110dialog .modal-body p:first-child {
111 font-size: 0.9rem;
112}
113
114.setting-container .indicator {
115 border-radius: 5rem;
116 display: inline-block;
117 cursor: default;
118 margin-right: 4px;
119 height: 20px;
120 /* vertical-align: text-top; */
121}
122
123.setting-container.enabled .indicator {
124 background-color: #007bff;
125}
126.setting-container.enabled .title {
127 text-shadow: 0px 1px 3px blue;
128}
129.setting-container.disabled .indicator {
130 background-color: orangered;
131}
132.setting-container.disabled .title {
133 text-shadow: 0px 1px 3px orangered;
134}
135
136.limited-time {
137 background: transparent;
138 border-color: transparent;
139 /*
140 changed the box shadow to black cause @dargy begged me to
141 box-shadow: -3px -3px 15px 0 rgba(255, 116, 16, 0.25) inset, 3px 3px 15px 0 rgba(205, 96, 255, 0.25) inset;
142 */
143 box-shadow: -3px -3px 15px 0 black inset;
144 border: none;
145}
146
147.limited-time * {
148 position: relative;
149 z-index: 2;
150}
151
152.limited-time .row {
153 --bs-gutter-x: 10px;
154}
155
156.limited-time .indicator {
157 height: 100%;
158}
159
160.limited-time .desc {
161 margin-bottom: 10px;
162 width: 85%;
163}
164
165.limited-time-tag {
166 font-size: 0.7rem;
167 color: rgba(255, 116, 16, 0.25);
168
169 -webkit-animation: LimitedTimeTag 5s ease infinite alternate;
170 -moz-animation: LimitedTimeTag 5s ease infinite alternate;
171 animation: LimitedTimeTag 5s ease infinite alternate;
172}
173
174.limited-time::before {
175 content: "";
176 position: absolute;
177 inset: 0;
178 padding: 3px;
179 background: linear-gradient(
180 45deg,
181 /*
182 changed the gradient to blue and green cause @ItsLuiggiYahoo begged me to
183 rgba(255, 116, 16, 1),
184 rgba(205, 96, 255, 1)
185 */
186 blue,
187 green
188 );
189 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
190 -webkit-mask-composite: xor;
191 mask-composite: exclude;
192 display: block;
193 border-radius: inherit;
194}
195
196.setting-container .warning {
197 font-size: 0.8rem;
198 color: orange;
199 font-weight: lighter;
200}
201
202.setting-container .note {
203 font-size: 0.8rem;
204 color: #439eff;
205 font-weight: lighter;
206}
207
208.card {
209 --bs-card-border-color: #1e1e1e;
210 --bs-card-bg: #121212;
211}
212
213@-webkit-keyframes LimitedTimeTag {
214 0% {
215 color: rgba(255, 116, 16, 1);
216 }
217 50% {
218 color: rgba(23, 107, 233, 1);
219 }
220 100% {
221 color: rgba(205, 96, 255, 1);
222 }
223}
224
225@-moz-keyframes LimitedTimeTag {
226 0% {
227 color: rgba(255, 116, 16, 1);
228 }
229 50% {
230 color: rgba(23, 107, 233, 1);
231 }
232 100% {
233 color: rgba(205, 96, 255, 1);
234 }
235}
236
237@keyframes LimitedTimeTag {
238 0% {
239 color: rgba(255, 116, 16, 1);
240 }
241 50% {
242 color: rgba(23, 107, 233, 1);
243 }
244 100% {
245 color: rgba(205, 96, 255, 1);
246 }
247}
248
249.title-popup-bg {
250 font-size: 2.5rem;
251 padding: 20px !important;
252 background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9)),
253 url("/images/preferences-splash2.png");
254 background-size: cover;
255 background-position: center;
256 border-radius: 0.5rem;
257 text-shadow: none !important;
258 outline: 1px solid black;
259 height: 10rem;
260}
261
262.title-popup-bg span {
263 vertical-align: middle;
264}
265
266/*
267#discovery {
268 position: relative;
269}
270*/
271
272/* For Firefox */
273#discovery {
274 scrollbar-width: none;
275}
276
277/* For Chrome, Safari and Opera */
278#discovery::-webkit-scrollbar {
279 display: none;
280}