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