diff options
Diffstat (limited to 'recipes/instagram')
-rw-r--r-- | recipes/instagram/darkmode.css | 421 | ||||
-rw-r--r-- | recipes/instagram/package.json | 2 |
2 files changed, 422 insertions, 1 deletions
diff --git a/recipes/instagram/darkmode.css b/recipes/instagram/darkmode.css new file mode 100644 index 0000000..c71469a --- /dev/null +++ b/recipes/instagram/darkmode.css | |||
@@ -0,0 +1,421 @@ | |||
1 | /* Copied from: https://github.com/ducfilan/Dark-mode-Franz-Ferdi */ | ||
2 | |||
3 | :root:not(#z) { | ||
4 | --bshadow: 0 2px 4px var(--shadow); | ||
5 | --t: transparent !important; | ||
6 | --avatar: a_radius; | ||
7 | --ui-font: "font_name", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | ||
8 | Helvetica, Arial, Ubuntu, Cantarell, "Noto Sans", var(--emoji-font), | ||
9 | sans-serif; | ||
10 | --emoji-font: "font_name", "joypixels", "Apple Color Emoji", "Segoe UI Emoji", | ||
11 | "Segoe UI Symbol", "Noto Color Emoji"; | ||
12 | --white: #fff; | ||
13 | --dark: #1f232a; | ||
14 | --darken: #252a33; | ||
15 | --darker: #333943; | ||
16 | --light: #e9e9e9; | ||
17 | --lighter: #a1a1a1; | ||
18 | --accent: #7289da; | ||
19 | --shadow: rgba(0, 0, 0, 0.145); | ||
20 | --yellow: #e5c512; | ||
21 | --orange: #df4b16; | ||
22 | --red: #dc322f; | ||
23 | --magenta: #f33682; | ||
24 | --violet: #6c71c4; | ||
25 | --blue: #268bd2; | ||
26 | --cyan: #2aa198; | ||
27 | --green: #859900; | ||
28 | --dark-rgb: 31, 35, 42; | ||
29 | --darken-rgb: 37, 42, 51; | ||
30 | --darker-rgb: 51, 57, 67; | ||
31 | --light-rgb: 233, 233, 233; | ||
32 | --lighter-rgb: 161, 161, 161; | ||
33 | --accent-rgb: 114, 137, 218; | ||
34 | --shadow-rgb: 0, 0, 0; | ||
35 | --white-rgb: 255, 255, 255; | ||
36 | --b6a: var(--darker-rgb); | ||
37 | --b38: var(--darker-rgb); | ||
38 | --ce3: var(--darker-rgb); | ||
39 | --ca6: var(--darker-rgb); | ||
40 | --d87: var(--darken-rgb); | ||
41 | --f23: var(--darken-rgb); | ||
42 | --b3f: var(--dark-rgb); | ||
43 | --i1d: var(--light-rgb); | ||
44 | --f75: var(--light-rgb); | ||
45 | --f52: var(--lighter-rgb); | ||
46 | --bb2: var(--darken-rgb); | ||
47 | --f23: var(--dark-rgb); | ||
48 | --fe0: var(--accent-rgb); | ||
49 | --d69: var(--accent-rgb); | ||
50 | --c37: var(--accent-rgb); | ||
51 | --eca: var(--darken-rgb); | ||
52 | --jb7: var(--shadow-rgb); | ||
53 | --fa7: var(--darken-rgb); | ||
54 | --de5: var(--white-rgb); | ||
55 | } | ||
56 | ::-webkit-scrollbar { | ||
57 | width: 0.5em; | ||
58 | } | ||
59 | * { | ||
60 | scrollbar-width: thin; | ||
61 | } | ||
62 | html { | ||
63 | scrollbar-color: var(--accent) rgba(136, 136, 136, 0.082); | ||
64 | } | ||
65 | ::-webkit-scrollbar { | ||
66 | background-color: rgba(136, 136, 136, 0.082) !important; | ||
67 | } | ||
68 | ::-webkit-scrollbar-thumb { | ||
69 | background-color: var(--accent) !important; | ||
70 | } | ||
71 | body { | ||
72 | color: var(--light) !important; | ||
73 | background-color: var(--dark) !important; | ||
74 | } | ||
75 | body ::placeholder { | ||
76 | color: var(--lighter) !important; | ||
77 | } | ||
78 | body ::-webkit-input-placeholder { | ||
79 | color: var(--lighter) !important; | ||
80 | } | ||
81 | body, | ||
82 | body button, | ||
83 | body input, | ||
84 | body textarea { | ||
85 | font-family: var(--ui-font) !important; | ||
86 | } | ||
87 | body[style*="background: white"] { | ||
88 | background-color: var(--dark) !important; | ||
89 | } | ||
90 | body[style*="background: white"] svg { | ||
91 | fill: var(--lighter) !important; | ||
92 | } | ||
93 | body[class*="error"] .top-bar, | ||
94 | body[class*="404"] .top-bar { | ||
95 | color: var(--light) !important; | ||
96 | border-color: var(--darker) !important; | ||
97 | background-color: var(--darken) !important; | ||
98 | } | ||
99 | body[class*="error"] .top-bar .logo, | ||
100 | body[class*="404"] .top-bar .logo { | ||
101 | filter: invert(0.8) !important; | ||
102 | } | ||
103 | body[class*="error"] a, | ||
104 | body[class*="404"] a, | ||
105 | body[class*="error"] strong, | ||
106 | body[class*="404"] strong { | ||
107 | color: var(--accent) !important; | ||
108 | } | ||
109 | body svg[fill="#262626"] { | ||
110 | fill: var(--light); | ||
111 | } | ||
112 | body svg[fill="#ffffff"] { | ||
113 | fill: var(--light); | ||
114 | } | ||
115 | body svg[fill="#8e8e8e"] { | ||
116 | fill: var(--lighter); | ||
117 | } | ||
118 | body svg[fill="#ed4956"] { | ||
119 | fill: var(--red); | ||
120 | } | ||
121 | body svg[fill="#0095f6"] { | ||
122 | fill: var(--blue); | ||
123 | } | ||
124 | body svg path { | ||
125 | transition: fill-opacity 0.2s ease; | ||
126 | } | ||
127 | body svg:hover path { | ||
128 | fill-opacity: 0.6; | ||
129 | } | ||
130 | body .coreSpriteLoggedOutWordmark, | ||
131 | body .coreSpriteMobileNavDirect, | ||
132 | body .coreSpriteTaggedNull { | ||
133 | filter: invert(0.8) !important; | ||
134 | } | ||
135 | [class*="SpriteDirect"], | ||
136 | [class*="SpriteFacebook"], | ||
137 | [class*="SpriteLink"], | ||
138 | [class*="SpriteMail"], | ||
139 | [class*="SpriteApp"], | ||
140 | [class*="Spritez"], | ||
141 | [class*="SpriteKeyhole"], | ||
142 | [class*="SpriteFriend_"], | ||
143 | [class*="SpriteAdd_friend_"], | ||
144 | [class*="SpriteDropdownArrowGrey"], | ||
145 | [class*="SpritePagingChevron"], | ||
146 | [class*="SpriteCamera"], | ||
147 | [class*="SpriteProfileChannelNullState"], | ||
148 | [class*="SpriteLocation_"], | ||
149 | [class*="SpriteInfo__filled__16__grey"], | ||
150 | [class*="SpriteCircle_add"] { | ||
151 | filter: invert(0.8) !important; | ||
152 | } | ||
153 | img[src*="44884218_345707102882519_2446069589734326272"] { | ||
154 | filter: invert(0.8) !important; | ||
155 | } | ||
156 | body ._2Lks6 { | ||
157 | color: var(--accent) !important; | ||
158 | } | ||
159 | body nav a[href="/"] img, | ||
160 | [src*="logo.png"] { | ||
161 | filter: invert(0.8); | ||
162 | } | ||
163 | body .HZ802, | ||
164 | body .nHGTw { | ||
165 | color: var(--white) !important; | ||
166 | background-color: var(--accent) !important; | ||
167 | } | ||
168 | body .HZ802 .H9zXO::after, | ||
169 | body .nHGTw .H9zXO::after { | ||
170 | background-color: var(--accent) !important; | ||
171 | } | ||
172 | .iMofo { | ||
173 | box-shadow: 0 4px 16px var(--shadow) !important; | ||
174 | } | ||
175 | body .HZ802 [class*="Sprite"] + div > div, | ||
176 | body .nHGTw [class*="Sprite"] + div > div { | ||
177 | color: var(--white) !important; | ||
178 | } | ||
179 | body > [role="presentation"], | ||
180 | body > [role="dialog"] { | ||
181 | background: rgba(var(--b3f), 0.8) !important; | ||
182 | } | ||
183 | .not-logged-in .N9d2H { | ||
184 | display: none !important; | ||
185 | } | ||
186 | .not-logged-in [style*="overflow: hidden"] { | ||
187 | overflow: unset !important; | ||
188 | } | ||
189 | .not-logged-in [style*="overflow: hidden"] > [role="presentation"] { | ||
190 | display: none !important; | ||
191 | } | ||
192 | body .LFGs8 { | ||
193 | color: var(--accent) !important; | ||
194 | } | ||
195 | body .yQ0j1 { | ||
196 | color: var(--lighter) !important; | ||
197 | } | ||
198 | body .M-jxE, | ||
199 | body .M-jxE > button { | ||
200 | background-color: var(--darken) !important; | ||
201 | } | ||
202 | body ._4Kbb_ { | ||
203 | margin-top: 1rem; | ||
204 | color: var(--light) !important; | ||
205 | border-color: var(--darker) !important; | ||
206 | background-color: var(--darken) !important; | ||
207 | } | ||
208 | .hUQXy, | ||
209 | .hUQXy:visited { | ||
210 | color: var(--accent) !important; | ||
211 | } | ||
212 | body .jju9v { | ||
213 | border: 1px solid var(--darker); | ||
214 | color: var(--light) !important; | ||
215 | background-color: var(--darken) !important; | ||
216 | } | ||
217 | body .hI7cq { | ||
218 | color: var(--light) !important; | ||
219 | } | ||
220 | body .isgrP > ul { | ||
221 | background-color: var(--t) !important; | ||
222 | } | ||
223 | body ._7LpC8 a, | ||
224 | body .rin8p { | ||
225 | color: var(--accent) !important; | ||
226 | } | ||
227 | body .rb9ad, | ||
228 | body .-wdIA, | ||
229 | body .d-Vzv { | ||
230 | border-color: var(--darker) !important; | ||
231 | } | ||
232 | body .leaflet-container { | ||
233 | background-color: var(--darken) !important; | ||
234 | box-shadow: 0 1px var(--darker); | ||
235 | } | ||
236 | body .leaflet-tile { | ||
237 | filter: invert(0.9) hue-rotate(180deg) !important; | ||
238 | } | ||
239 | body .leaflet-popup-content-wrapper, | ||
240 | body .leaflet-popup-tip { | ||
241 | background-color: var(--darken) !important; | ||
242 | box-shadow: 0 3px 14px var(--shadow); | ||
243 | } | ||
244 | body .Sux9m { | ||
245 | border-color: #aaa !important; | ||
246 | background-color: rgba(238, 238, 238, 0.067) !important; | ||
247 | --eca: var(--light-rgb); | ||
248 | } | ||
249 | body .Sux9m ::placeholder { | ||
250 | color: #eee !important; | ||
251 | } | ||
252 | body .Sux9m ::-webkit-input-placeholder { | ||
253 | color: #eee !important; | ||
254 | } | ||
255 | body .Sux9m + div [class*="glyphsSpriteDirect_"] { | ||
256 | filter: invert(0.3) !important; | ||
257 | } | ||
258 | body .tCibT { | ||
259 | border: 1px solid var(--darker) !important; | ||
260 | box-shadow: var(--bshadow) !important; | ||
261 | } | ||
262 | .R8iOs { | ||
263 | border: 1px solid var(--darker) !important; | ||
264 | color: var(--light) !important; | ||
265 | background-color: var(--dark) !important; | ||
266 | } | ||
267 | .R8iOs > * { | ||
268 | color: inherit; | ||
269 | } | ||
270 | [role="button"] + span[class=""] > div[class], | ||
271 | .G_hoz { | ||
272 | background-color: var(--darker) !important; | ||
273 | } | ||
274 | body header + div + div.GZkEI li[style] > div > div > [role], | ||
275 | body article + div + div.GZkEI li[style] > div > div > [role] { | ||
276 | --d87: var(--dark-rgb); | ||
277 | } | ||
278 | body .WidCF, | ||
279 | body .HaS-3 { | ||
280 | border-right: 1px solid var(--darker); | ||
281 | background-size: 200% 200% !important; | ||
282 | background: linear-gradient( | ||
283 | 115deg, | ||
284 | var(--dark) 40%, | ||
285 | var(--darken), | ||
286 | var(--dark) 60% | ||
287 | ); | ||
288 | animation: Loader 2.5s ease infinite !important; | ||
289 | background-color: var(--darken) !important; | ||
290 | } | ||
291 | body > [role="dialog"] > [role="dialog"] > [role="dialog"] { | ||
292 | border: 1px solid var(--darker) !important; | ||
293 | box-shadow: 0 0px 16px var(--darken); | ||
294 | } | ||
295 | body [role="dialog"] > article > header { | ||
296 | overflow-x: hidden !important; | ||
297 | } | ||
298 | body [role="dialog"] > article > header + div { | ||
299 | --jb7: var(--darken-rgb); | ||
300 | } | ||
301 | body > [role="presentation"] > [role="dialog"] > div { | ||
302 | border: 1px solid var(--darker) !important; | ||
303 | } | ||
304 | body > [role="presentation"] button.aOOlW:not(.SRPMb):hover, | ||
305 | body > [role="presentation"] button.aOOlW:not(.SRPMb):active { | ||
306 | background-color: var(--darken) !important; | ||
307 | } | ||
308 | body article > header ~ div .WXPwG .Yi5aA { | ||
309 | background-color: var(--white) !important; | ||
310 | } | ||
311 | body img + div[style="height: 100%;"], | ||
312 | body video + div[style="height: 100%;"] { | ||
313 | position: unset !important; | ||
314 | display: none !important; | ||
315 | } | ||
316 | body ._9AhH0 { | ||
317 | position: unset !important; | ||
318 | } | ||
319 | body .PyenC, | ||
320 | body .fXIG0 { | ||
321 | bottom: 40px !important; | ||
322 | } | ||
323 | body .GBPOY { | ||
324 | border-radius: 3px; | ||
325 | border-color: var(--darker) !important; | ||
326 | background-color: var(--darken) !important; | ||
327 | } | ||
328 | body .GBPOY a { | ||
329 | color: var(--light) !important; | ||
330 | } | ||
331 | body .uo5MA, | ||
332 | body .uo5MA > div:nth-child(1) { | ||
333 | box-shadow: var(--bshadow) !important; | ||
334 | border: 1px solid var(--darker); | ||
335 | background-color: var(--dark) !important; | ||
336 | } | ||
337 | body .uo5MA > div:nth-child(2) { | ||
338 | background-color: var(--dark) !important; | ||
339 | } | ||
340 | body .uo5MA > div:nth-child(3) { | ||
341 | border-radius: 0 0 6px 6px; | ||
342 | } | ||
343 | body .uo5MA .DPiy6 { | ||
344 | background-color: var(--t) !important; | ||
345 | } | ||
346 | body .QOqBd { | ||
347 | background-color: var(--darker) !important; | ||
348 | } | ||
349 | .X3a-9 { | ||
350 | background-color: var(--dark) !important; | ||
351 | } | ||
352 | body .CMoMH:not(._6FEQj) { | ||
353 | background-color: var(--dark) !important; | ||
354 | } | ||
355 | body .CMoMH._6FEQj { | ||
356 | background-color: var(--darker) !important; | ||
357 | } | ||
358 | body .XjicZ { | ||
359 | border-top: 1px solid var(--darker); | ||
360 | background-color: var(--darken) !important; | ||
361 | } | ||
362 | body .XjicZ p { | ||
363 | color: var(--light) !important; | ||
364 | } | ||
365 | body footer { | ||
366 | width: 100% !important; | ||
367 | margin: 0 auto !important; | ||
368 | max-width: 935px !important; | ||
369 | border-top: 1px solid var(--darker) !important; | ||
370 | } | ||
371 | .XfvCs { | ||
372 | margin-bottom: 30px !important; | ||
373 | } | ||
374 | body footer > div::after { | ||
375 | content: var(--note); | ||
376 | text-align: center; | ||
377 | margin-top: 2rem; | ||
378 | } | ||
379 | @keyframes Loader { | ||
380 | 0% { | ||
381 | background-position: 33% 0%; | ||
382 | } | ||
383 | 50% { | ||
384 | background-position: 68% 100%; | ||
385 | } | ||
386 | 100% { | ||
387 | background-position: 33% 0%; | ||
388 | } | ||
389 | } | ||
390 | |||
391 | :root:not(#z) { | ||
392 | scrollbar-color: var(--accent) transparent; | ||
393 | } | ||
394 | |||
395 | :root ::-webkit-scrollbar { | ||
396 | background-color: transparent !important; | ||
397 | width: 0 !important; | ||
398 | } | ||
399 | :root ::-webkit-scrollbar-thumb { | ||
400 | background-color: var(--accent) !important; | ||
401 | } | ||
402 | div.Igw0E.IwRSH.eGOV_._4EzTm._5VUwz.ZUqME ::-webkit-scrollbar, | ||
403 | div.N9abW::-webkit-scrollbar, | ||
404 | div.frMpI.-sxBV::-webkit-scrollbar { | ||
405 | background-color: transparent !important; | ||
406 | width: 0.5em !important; | ||
407 | } | ||
408 | div.N9abW::-webkit-scrollbar-thumb, | ||
409 | div.Igw0E.IwRSH.eGOV_._4EzTm._5VUwz.ZUqME ::-webkit-scrollbar-thumb, | ||
410 | div.frMpI.-sxBV::-webkit-scrollbar-thumb { | ||
411 | background-color: var(--accent) !important; | ||
412 | } | ||
413 | |||
414 | div.frMpI.-sxBV { | ||
415 | padding: 20px 30px 0 20px !important; | ||
416 | } | ||
417 | |||
418 | body footer nav + span::before, | ||
419 | button.sXUSN:hover { | ||
420 | cursor: pointer !important; | ||
421 | } | ||
diff --git a/recipes/instagram/package.json b/recipes/instagram/package.json index 99590fd..a3180d3 100644 --- a/recipes/instagram/package.json +++ b/recipes/instagram/package.json | |||
@@ -1,7 +1,7 @@ | |||
1 | { | 1 | { |
2 | "id": "instagram", | 2 | "id": "instagram", |
3 | "name": "Instagram", | 3 | "name": "Instagram", |
4 | "version": "2.0.2", | 4 | "version": "2.1.0", |
5 | "license": "MIT", | 5 | "license": "MIT", |
6 | "config": { | 6 | "config": { |
7 | "serviceURL": "https://instagram.com/direct/inbox", | 7 | "serviceURL": "https://instagram.com/direct/inbox", |