Skip to content

Commit ee30e57

Browse files
misumisumimisumisumi
committed
feat(vimium): add theme css
1 parent d9f1b1e commit ee30e57

File tree

2 files changed

+392
-0
lines changed

2 files changed

+392
-0
lines changed

‎apps/user/color-theme/nord/vimium/theme.css

+257
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
/*****************************************************************************/
2+
/* THEMES */
3+
/*****************************************************************************/
4+
5+
:root {
6+
--font-size: 24px;
7+
--font-weight: normal;
8+
/*--font: Source Han Sans;*/
9+
--padding: 5px;
10+
--shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
11+
12+
/***********************************/
13+
/* Uncomment Theme to Select */
14+
/***********************************/
15+
16+
/* ---------- Tomorrow Night ---------- */
17+
/* -- DELETE LINE TO ENABLE THEME
18+
--fg: #C5C8C6;
19+
--bg: #282A2E;
20+
--border: #373B41;
21+
--main-fg: #81A2BE;
22+
--accent-fg: #52C196;
23+
-- DELETE LINE TO ENABLE THEME */
24+
25+
/* Unused Alternate Colors */
26+
/* --bg-dark: #1D1F21; */
27+
/* --cyan: #4CB3BC; */
28+
/* --purple: #AC7BBA; */
29+
/* --red: #CC6666; */
30+
/* --yellow: #CBCA77; */
31+
32+
/* ---------- NORD ---------- */
33+
--fg: #E5E9F0;
34+
--bg: #2E3440;
35+
--border: #3B4252;
36+
/* --main-fg: #88C0D0; */
37+
--main-fg: #a6ecff;
38+
--accent-fg: #A3BE8C;
39+
-- DELETE LINE TO ENABLE THEME
40+
41+
/* Unused Alternate Colors */
42+
--bg-dark: #4C566A;
43+
--main-fg-alt: #5E81AC;
44+
--orange: #D08770;
45+
--red: #BF616A;
46+
--yellow: #EBCB8B;
47+
48+
/* ---------- DOOM ONE ---------- */
49+
/* -- DELETE LINE TO ENABLE THEME
50+
--fg: #51AFEF;
51+
--bg: #2E3440;
52+
--border: #282C34;
53+
--main-fg: #51AFEF;
54+
--accent-fg: #98be65;
55+
-- DELETE LINE TO ENABLE THEME */
56+
57+
/* Unused Alternate Colors */
58+
/* --bg-dark: #21242B; */
59+
/* --main-fg-alt: #2257A0; */
60+
/* --cyan: #46D9FF; */
61+
/* --orange: #DA8548; */
62+
/* --purple: #C678DD; */
63+
/* --red: #FF6C6B; */
64+
/* --yellow: #ECBE7B; */
65+
66+
/* ---------- MONOKAI ---------- */
67+
/* -- DELETE LINE TO ENABLE THEME
68+
--fg: #F8F8F2;
69+
--bg: #272822;
70+
--bg-dark: #1D1E19;
71+
--border: #2D2E2E;
72+
--main-fg: #F92660;
73+
--accent-fg: #E6DB74;
74+
-- DELETE LINE TO ENABLE THEME */
75+
76+
/* Unused Alternate Colors */
77+
/* --red: #E74C3C; */
78+
/* --orange: #FD971F; */
79+
/* --blue: #268BD2; */
80+
/* --violet: #9C91E4; */
81+
/* --cyan: #66D9EF; */
82+
83+
/* ---------- Edge Dark ---------- */
84+
/* -- DELETE LINE TO ENABLE THEME
85+
--fg: #c5cdd9;
86+
--bg: #2c2e34;
87+
--border: #828a98;
88+
--main-fg: #6cb6eb;
89+
--accent-fg: #a0c980;
90+
-- DELETE LINE TO ENABLE THEME */
91+
92+
/* Unused Alternate Colors */
93+
/* --bg-dark: #21242f; */
94+
/* --cyan: #5dbbc1; */
95+
/* --purple: #d38aea; */
96+
/* --red: #ec7279; */
97+
/* --yellow: #deb974; */
98+
99+
/* ---------- Gruvbox Dark ---------- */
100+
/* -- DELETE LINE TO ENABLE THEME
101+
--fg: #ebdbb2;
102+
--bg: #282828;
103+
--border: #3c3836;
104+
--main-fg: #83a598;
105+
--accent-fg: #b8bb26;
106+
-- DELETE LINE TO ENABLE THEME */
107+
108+
/* Unused Alternate Colors */
109+
/*--bg-dark: #1d2021;*/
110+
/*--cyan: #076678;*/
111+
/*--purple: #8f3f71;*/
112+
/*--red: #fb4934;*/
113+
/*--yellow: #fabd2f;*/
114+
115+
}
116+
117+
/*****************************************************************************/
118+
/* CSS */
119+
/*****************************************************************************/
120+
121+
/* -------- HINTS -------- */
122+
#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
123+
background: var(--bg);
124+
border: 1px solid var(--border);
125+
box-shadow: var(--shadow);
126+
padding: 3px 4px;
127+
}
128+
129+
#vimiumHintMarkerContainer div span {
130+
color: var(--main-fg);
131+
/* font-family: var(--font); */
132+
font-size: var(--font-size);
133+
font-weight: var(--font-weight);
134+
text-shadow: none;
135+
}
136+
137+
#vimiumHintMarkerContainer div > .matchingCharacter {
138+
opacity: 0.3;
139+
}
140+
141+
#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
142+
color: var(--main-fg);
143+
}
144+
145+
/* -------- VOMNIBAR -------- */
146+
#vomnibar {
147+
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
148+
background: var(--bg);
149+
border: none;
150+
box-shadow: var(--shadow);
151+
}
152+
153+
/* Animate Slide in */
154+
@keyframes show {
155+
0% {
156+
opacity: 0;
157+
transform: translateY(50px);
158+
}
159+
100% {
160+
opacity: 1;
161+
transform: translateY(0);
162+
}
163+
}
164+
165+
#vomnibar .vomnibarSearchArea,
166+
#vomnibar input {
167+
background: transparent;
168+
border: none;
169+
box-shadow: none;
170+
color: var(--fg);
171+
/* font-family: var(--font); */
172+
font-size: var(--font-size);
173+
font-weight: var(--font-weight);
174+
}
175+
176+
#vomnibar .vomnibarSearchArea {
177+
padding: var(--padding) 30px;
178+
}
179+
180+
#vomnibar input {
181+
padding: var(--padding)}
182+
183+
#vomnibar ul {
184+
background: var(--bg);
185+
border-top: 1px solid var(--border);
186+
margin: 0;
187+
padding: var(--padding);
188+
}
189+
190+
#vomnibar li {
191+
border-bottom: 1px solid var(--border);
192+
padding: var(--padding);
193+
}
194+
195+
#vomnibar li .vomnibarTopHalf,
196+
#vomnibar li .vomnibarBottomHalf {
197+
padding: var(--padding) 0;
198+
}
199+
200+
#vomnibar li .vomnibarSource {
201+
color: var(--main-fg);
202+
/* font-family: var(--font); */
203+
font-size: var(--font-size);
204+
font-weight: var(--font-weight);
205+
}
206+
207+
#vomnibar li em,
208+
#vomnibar li .vomnibarTitle {
209+
color: var(--main-fg);
210+
/* font-family: var(--font); */
211+
font-size: var(--font-size);
212+
font-weight: var(--font-weight);
213+
}
214+
215+
#vomnibar li .vomnibarUrl {
216+
color: var(--fg);
217+
/* font-family: var(--font); */
218+
font-size: var(--font-size);
219+
font-weight: var(--font-weight);
220+
}
221+
222+
#vomnibar li .vomnibarMatch {
223+
color: var(--accent-fg);
224+
font-weight: normal;
225+
}
226+
227+
#vomnibar li .vomnibarTitle .vomnibarMatch {
228+
color: var(--main-fg);
229+
}
230+
231+
#vomnibar li.vomnibarSelected {
232+
background-color: var(--border);
233+
}
234+
235+
/* -------- HUD -------- */
236+
div.vimiumHUD {
237+
background: var(--bg);
238+
border: 1px solid var(--border);
239+
box-shadow: var(--shadow);
240+
}
241+
242+
div.vimiumHUD span#hud-find-input,
243+
div.vimiumHUD .vimiumHUDSearchAreaInner {
244+
color: var(--fg);
245+
/* font-family: var(--font); */
246+
font-size: var(--font-size);
247+
font-weight: var(--font-weight);
248+
}
249+
250+
div.vimiumHUD .hud-find {
251+
background-color: transparent;
252+
border: none;
253+
}
254+
255+
div.vimiumHUD .vimiumHUDSearchArea {
256+
background-color: transparent;
257+
}

‎apps/user/color-theme/tokyonight/vimium/theme.css

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/* Copy the content into the `CSS for Vimium UI` textarea field on the vimium options page */
2+
3+
:root {
4+
--font-size: 24px;
5+
--font-weight: normal;
6+
--vimium-blue: #7aa2f7;
7+
--vimium-green: #9ece6a;
8+
--vimium-fg: #c0caf5;
9+
--vimium-fg-dark: #a9b1d6;
10+
--vimium-border: #1d202f;
11+
--vimium-border-highlight: #29a4bd;
12+
--vimium-bg: #24283b;
13+
--vimium-bg-highlight: #292e42;
14+
}
15+
16+
#vimiumHintMarkerContainer div.internalVimiumHintMarker,
17+
#vimiumHintMarkerContainer div.vimiumHintMarker {
18+
padding: 3px 4px;
19+
border: 1;
20+
background: var(--vimium-blue);
21+
border-color: var(--vimium-border);
22+
box-shadow:
23+
0 1px 3px rgba(0, 0, 0, 0.12),
24+
0 1px 2px rgba(0, 0, 0, 0.24);
25+
}
26+
27+
#vimiumHintMarkerContainer div span {
28+
color: var(--vimium-border) !important;
29+
text-shadow: none;
30+
}
31+
32+
#vimiumHintMarkerContainer div > .matchingCharacter {
33+
opacity: 1;
34+
}
35+
36+
#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
37+
color: var(--vimium-fg-dark);
38+
}
39+
40+
#vomnibar {
41+
background: var(--vimium-bg);
42+
border: 2px solid var(--vimium-border-highlight);
43+
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
44+
max-height: calc(100vh - 70px);
45+
overflow: hidden;
46+
}
47+
48+
@keyframes show {
49+
0% {
50+
transform: translateY(50px);
51+
opacity: 0;
52+
}
53+
100% {
54+
transform: translateY(0);
55+
opacity: 1;
56+
}
57+
}
58+
59+
#vomnibar input {
60+
color: var(--vimium-fg);
61+
background: var(--vimium-bg);
62+
border: none;
63+
height: unset;
64+
padding: 16px 30px;
65+
}
66+
67+
#vomnibar .vomnibarSearchArea {
68+
border: none;
69+
padding: unset;
70+
background: var(--vimium-bg);
71+
}
72+
73+
#vomnibar ul {
74+
padding: 0;
75+
margin: 0;
76+
background: var(--vimium-bg);
77+
border-top: 1px solid var(--vimium-border);
78+
}
79+
80+
#vomnibar li {
81+
padding: 10px;
82+
border-bottom: 1px solid var(--vimium-border);
83+
}
84+
85+
#vomnibar li .vomnibarTopHalf,
86+
#vomnibar li .vomnibarBottomHalf {
87+
padding: 3px 0;
88+
}
89+
90+
#vomnibar li .vomnibarSource {
91+
color: var(--vimium-green);
92+
}
93+
94+
#vomnibar li em,
95+
#vomnibar li .vomnibarTitle {
96+
color: var(--vimium-blue);
97+
}
98+
99+
#vomnibar li .vomnibarUrl {
100+
color: var(--vimium-fg);
101+
}
102+
103+
#vomnibar li .vomnibarMatch {
104+
color: var(--vimium-blue);
105+
}
106+
107+
#vomnibar li .vomnibarTitle .vomnibarMatch {
108+
color: var(--vimium-blue);
109+
}
110+
111+
#vomnibar li.vomnibarSelected {
112+
background-color: var(--vimium-bg-highlight);
113+
}
114+
115+
div.vimiumHUD {
116+
background: var(--vimium-bg);
117+
border: none;
118+
box-shadow:
119+
0 1px 3px rgba(0, 0, 0, 0.12),
120+
0 1px 2px rgba(0, 0, 0, 0.24);
121+
}
122+
123+
div.vimiumHUD span#hud-find-input,
124+
div.vimiumHUD .vimiumHUDSearchAreaInner {
125+
color: var(--vimium-fg);
126+
}
127+
128+
div.vimiumHUD .hud-find {
129+
background-color: var(--vimium-bg);
130+
border: none;
131+
}
132+
133+
div.vimiumHUD .vimiumHUDSearchArea {
134+
background-color: var(--vimium-bg);
135+
}

0 commit comments

Comments
 (0)