A browser extension that lets you summarize any webpage and ask questions using AI.
Update popup and options branding icon
Made-with: Cursor
+87
-24
+9
lightning.svg
+9
lightning.svg
···
1
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+
<svg width="100%" height="100%" viewBox="0 0 571 991" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
+
<g transform="matrix(1,0,0,1,-242.737675,-4.302677)">
5
+
<g transform="matrix(2.061595,0.357455,-0.357455,2.061595,-342.211752,-730.395512)">
6
+
<path d="M520.828,281.713L496.332,468.258L618.867,419.852C623.264,418.115 628.272,419.151 631.619,422.489C634.966,425.827 636.015,430.832 634.29,435.233C591.046,545.573 527.57,652.425 447.165,756.331C443.667,760.853 437.444,762.24 432.356,759.633C427.268,757.027 424.759,751.165 426.385,745.684L487.827,538.566L392.453,556.504C388.107,557.321 383.666,555.656 380.929,552.182C378.192,548.709 377.611,544.002 379.422,539.967L498.215,275.303C500.629,269.926 506.62,267.132 512.291,268.739C517.961,270.347 521.595,275.869 520.828,281.713Z" style="fill:rgb(241,91,47);"/>
7
+
</g>
8
+
</g>
9
+
</svg>
+23
-9
options/options.css
+23
-9
options/options.css
···
4
4
box-sizing: border-box;
5
5
}
6
6
7
+
:root {
8
+
--brand: #F15B2F;
9
+
--brand-hover: #D94E27;
10
+
}
11
+
7
12
body {
8
13
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
9
14
background: #f5f0e8;
···
26
31
}
27
32
28
33
.page-header .logo-mark {
29
-
font-size: 14px;
30
-
color: #999;
34
+
width: 14px;
35
+
height: 14px;
36
+
display: inline-flex;
37
+
align-items: center;
38
+
justify-content: center;
39
+
}
40
+
41
+
.page-header .logo-mark .brand-icon {
42
+
width: 100%;
43
+
height: 100%;
44
+
display: block;
31
45
}
32
46
33
47
.page-header h1 {
···
68
82
width: 16px;
69
83
height: 16px;
70
84
cursor: pointer;
71
-
accent-color: #1a1a1a;
85
+
accent-color: var(--brand);
72
86
}
73
87
74
88
input[type="text"],
···
91
105
textarea:focus,
92
106
select:focus {
93
107
outline: none;
94
-
border-color: #aaa;
108
+
border-color: var(--brand);
95
109
}
96
110
97
111
select {
···
141
155
142
156
.btn-primary {
143
157
padding: 8px 18px;
144
-
background: #1a1a1a;
145
-
color: #f5f0e8;
158
+
background: var(--brand);
159
+
color: #fff;
146
160
border: none;
147
161
border-radius: 6px;
148
162
font-size: 12.5px;
149
163
font-weight: 500;
150
164
}
151
165
152
-
.btn-primary:hover { background: #333; }
166
+
.btn-primary:hover { background: var(--brand-hover); }
153
167
154
168
.btn-secondary {
155
169
padding: 8px 14px;
···
256
270
}
257
271
258
272
.info-section a {
259
-
color: #555;
273
+
color: var(--brand);
260
274
text-decoration: underline;
261
275
}
262
276
263
-
.info-section a:hover { color: #111; }
277
+
.info-section a:hover { color: var(--brand-hover); }
+3
-1
options/options.html
+3
-1
options/options.html
+46
-12
popup/popup.css
+46
-12
popup/popup.css
···
39
39
--heading: #111;
40
40
--strong: #111;
41
41
--blockquote: #888;
42
+
--brand: #F15B2F;
43
+
--brand-hover: #D94E27;
44
+
--brand-active: #BF4522;
42
45
}
43
46
44
47
/* ── Dark theme ── */
···
76
79
--heading: #e8e3db;
77
80
--strong: #e8e3db;
78
81
--blockquote: #666;
82
+
--brand: #F15B2F;
83
+
--brand-hover: #D94E27;
84
+
--brand-active: #BF4522;
79
85
}
80
86
81
87
body {
···
117
123
}
118
124
119
125
.logo-mark {
120
-
font-size: 13px;
121
-
color: var(--text-muted);
126
+
width: 13px;
127
+
height: 13px;
128
+
display: inline-flex;
129
+
align-items: center;
130
+
justify-content: center;
131
+
}
132
+
133
+
.logo-mark .brand-icon {
134
+
width: 100%;
135
+
height: 100%;
136
+
display: block;
122
137
}
123
138
124
139
.logo-text {
···
174
189
.initial-state.hidden { display: none; }
175
190
176
191
.initial-icon {
177
-
font-size: 18px;
178
-
color: var(--text-faint);
192
+
width: 18px;
193
+
height: 18px;
179
194
margin-bottom: 4px;
195
+
}
196
+
197
+
.initial-icon .brand-icon {
198
+
width: 100%;
199
+
height: 100%;
200
+
display: block;
180
201
}
181
202
182
203
.initial-title {
···
326
347
}
327
348
328
349
.result a { color: var(--link); text-decoration: underline; }
329
-
.result a:hover { color: var(--link-hover); }
350
+
.result a:hover { color: var(--brand); }
330
351
331
352
.result hr {
332
353
border: none;
···
431
452
.footer-btn:disabled {
432
453
opacity: 0.35;
433
454
cursor: not-allowed;
455
+
}
456
+
457
+
.footer-btn.primary {
458
+
background: var(--brand);
459
+
color: #fff;
460
+
}
461
+
462
+
.footer-btn.primary:hover {
463
+
background: var(--brand-hover);
464
+
}
465
+
466
+
.footer-btn.primary:active {
467
+
background: var(--brand-active);
434
468
}
435
469
436
470
.hidden {
···
502
536
}
503
537
504
538
.suggestion-btn:hover {
505
-
border-color: var(--border-hover);
506
-
color: var(--text);
539
+
border-color: var(--brand);
540
+
color: var(--brand);
507
541
background: var(--bg);
508
542
}
509
543
···
663
697
}
664
698
665
699
.chat-message.assistant a:hover {
666
-
color: var(--link-hover);
700
+
color: var(--brand);
667
701
}
668
702
669
703
/* User message markdown */
···
699
733
}
700
734
701
735
.chat-input:focus {
702
-
border-color: var(--border-hover);
736
+
border-color: var(--brand);
703
737
}
704
738
705
739
.chat-input::placeholder {
···
711
745
height: 32px;
712
746
border-radius: 6px;
713
747
border: none;
714
-
background: var(--primary-bg);
715
-
color: var(--primary-text);
748
+
background: var(--brand);
749
+
color: #fff;
716
750
cursor: pointer;
717
751
display: flex;
718
752
align-items: center;
···
722
756
}
723
757
724
758
.chat-send-btn:hover {
725
-
background: var(--primary-bg-hover);
759
+
background: var(--brand-hover);
726
760
}
727
761
728
762
.chat-send-btn:disabled {
+6
-2
popup/popup.html
+6
-2
popup/popup.html
···
9
9
<div class="app">
10
10
<div class="header">
11
11
<div class="header-left">
12
-
<div class="logo-mark">✦</div>
12
+
<div class="logo-mark">
13
+
<img src="../lightning.svg" alt="" class="brand-icon" />
14
+
</div>
13
15
<span class="logo-text">Summarize</span>
14
16
</div>
15
17
<div class="header-right">
···
49
51
50
52
<div class="content-container">
51
53
<div id="initial-state" class="initial-state">
52
-
<div class="initial-icon">✦</div>
54
+
<div class="initial-icon">
55
+
<img src="../lightning.svg" alt="" class="brand-icon" />
56
+
</div>
53
57
<p class="initial-title">Ready to summarize</p>
54
58
<p class="initial-sub">Get an AI-powered summary of the page you're reading.</p>
55
59
</div>