-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html-e
362 lines (356 loc) · 18.2 KB
/
index.html-e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="ShadowFox is a universal dark theme for Firefox.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<title>ShadowFox</title>
<link rel="apple-touch-icon" sizes="180x180" href="resources/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="resources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="resources/favicons/favicon-16x16.png">
<link rel="manifest" href="resources/favicons/site.webmanifest">
<link rel="mask-icon" href="resources/favicons/safari-pinned-tab.svg" color="#9440c1">
<link rel="shortcut icon" href="resources/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#9440c1">
<meta name="msapplication-config" content="resources/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/ShadowFox-logo-sp.png" alt="ShadowFox logo" class="logo">
<img src="resources/img/ShadowFox-logo-sp.png" alt="ShadowFox logo" class="logo-black">
<ul class="main-nav js--main-nav">
<li><a href="#features">What it is</a></li>
<li><a href="#works">How it works</a></li>
<li><a href="#customization">Customization</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye sore eyes<br>Hello dark theme for FireFox<span> ®</span></h1>
<a class="btn btn-full js--scroll-to-plans" href="#">Install</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
<p class="scroll-down">An open source project developed and maintained by Pat Johnson.</p>
</header>
<section class="section-features js--section-features" id="features">
<div class="row">
<h2>A universal dark theme — compatible with Firefox 57+</h2>
<p class="long-copy">
ShadowFox was inspired by changes made in Firefox 57, which limited the amount addons could customize both the user interface and "protected" web pages.<br> <br> This project aims at creating a universal dark theme for Firefox while adhering
to the modern design principles set by Mozilla.
</p>
</div>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-ios-bolt-outline icon-big"></i>
<h3>Quick installation</h3>
<p>
Our cross platform installer takes the guess work out of installation. With a few clicks of a button, ShadowFox can be downloaded or seemlesly updated without losing custom configurations.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-monitor-outline icon-big"></i>
<h3>Complete theme</h3>
<p>
ShadowFox is the most complete theme available, styling not just the entire user interface, but also "protected" webpages that aren't accessible to normal extensions, like about:preferences and about:addons.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-briefcase-outline icon-big"></i>
<h3>Addon styles</h3>
<p>
Addons are one of the hallmarks of Firefox. Unlike any other theme, ShadowFox has custom styles available for the most popular extensions, like uBlock Origin, uMatrix, ViolentMonkey, Decentraleyes, Stylus and so many more.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-color-wand-outline icon-big"></i>
<h3>Easy to customize</h3>
<p>
We don't limit your creativity, which means you can customize the colors used and add as many custom tweaks as you want. The possibilities are endless!
</p>
</div>
</div>
</section>
<section class="section-images">
<div class="row">
<div class="col span-2-of-2 gallery">
<div class="popup-gallery">
<a href="resources/img/preferences.jpg" title="Preferences"><img data-src="resources/img/preferences-small.jpg" alt="Preferences" class="lazyload"></a>
<a href="resources/img/Addons.png" title="Addons"><img data-src="resources/img/Addons-small.jpg" alt="Addons" class="lazyload"></a>
<a href="resources/img/Library.jpg" title="Library"><img data-src="resources/img/Library-small.jpg" alt="Library" class="lazyload"></a>
<a href="resources/img/blank.jpg" title="Blank"><img data-src="resources/img/blank-small.jpg" alt="Blank" class="lazyload"></a>
<a href="resources/img/View%20Source.jpg" title="View Source"><img data-src="resources/img/View%20Source-small.jpg" alt="View Source" class="lazyload"></a>
<a href="resources/img/uMatrix.jpg" title="uMatrix"><img data-src="resources/img/uMatrix-small.jpg" alt="uMatrix" class="lazyload"></a>
<a href="resources/img/uBlock%20Origin.jpg" title="uBlock Origin"><img data-src="resources/img/uBlock%20Origin-small.jpg" alt="uBlock Origin" class="lazyload"></a>
</div>
</div>
</div>
</section>
<section class="section-steps" id="works">
<div class="row">
<h2>How it works</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<div class="works-step">
<div>1</div>
<p>Activate the default dark theme Firefox provides (which only alters the navigation and tab bar).</p>
</div>
<div class="works-step clearfix">
<div>2</div>
<p>Download the updater script for your operating system.</p>
</div>
<div class="works-step clearfix">
<div>3</div>
<p>Run the script and select your Firefox profile and whether or not extensions should be styled.</p>
</div>
</div>
<div class="col span-1-of-2 steps-box">
<div class="works-step clearfix">
<div>4</div>
<p>Make customizations until your heart is content (make sure to run the updater again if you do).</p>
</div>
<div class="works-step clearfix">
<div>5</div>
<p>Restart Firefox.</p>
</div>
<div class="works-step clearfix">
<div>6</div>
<p>Enjoy your new dark theme, your eyes will thank you!</p>
</div>
</div>
</div>
</section>
<section class="section-testimonials">
<div class="row">
<h2>Users have great things to say</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
ShadowFox has relieved a lot of strain on my eyes, thank you for the project it really helps.
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Thanks for all the hard work man. Mozilla should add this project to Firefox honestly. Cheers.
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Just discovered this and wanted to say THANK YOU for this awesome project, I love it!
</blockquote>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
What a great project! Thank you so much for that awesome work!
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Just wanna say thanks for bringing my favorite theme back!
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
This should officially be merged
</blockquote>
</div>
</div>
</section>
<section class="section-plans js--section-plans" id="plans">
<!-- CURR_VER: 1.7.19 -->
<div class="row">
<h2>Download Today</h2>
<p class="long-copy">
A cross-platform installer/uninstaller/updater is maintained in the <a href="https://github.com/SrKomodo/shadowfox-updater">shadowfox-updater</a> repository. <br><br>
Latest versions can be obtained via the links below, through the <a href="https://github.com/SrKomodo/shadowfox-updater/releases">releases page</a>, <code>Homebrew</code>, or <code>AUR</code>. Please see the <a href="https://github.com/SrKomodo/shadowfox-updater/blob/master/README.md">README</a> file for details on how to use the updater (GUI and CLI options available) and solutions to common problems.<br><br>
</p>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="os-box js--wp-4">
<div>
<h3>macOS</h3>
<i class="ion-social-apple icon-big"></i>
</div>
<div>
<ul>
<li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.7.19/shadowfox_mac_x32"> MacOS_x32</a></li>
<li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.7.19/shadowfox_mac_x64"> MacOS_x64 </a></li>
<li><i class="ion-android-done icon-small"></i><a href="https://github.com/overdodactyl/ShadowFox#installation"> Homebrew </a></li>
<li><i class="ion-android-done icon-small"></i><a href="https://github.com/overdodactyl/ShadowFox#installation-and-updating"> MacPorts </a></li>
</ul>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="os-box">
<div>
<h3>Linux</h3>
<i class="ion-social-tux icon-big"></i>
</div>
<div>
<ul>
<li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.7.19/shadowfox_linux_x32"> linux_x32 </a></li>
<li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.7.19/shadowfox_linux_x64"> linux_x64 </a></li>
<li><i class="ion-android-done icon-small"></i><a href="https://aur.archlinux.org/packages/shadowfox-updater/"> AUR package </a></li>
</ul>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="os-box">
<div>
<h3>Windows</h3>
<i class="ion-social-windows icon-big"></i>
</div>
<div>
<ul>
<li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.7.19/shadowfox_windows_x32.exe"> windows_x32 </a></li>
<li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.7.19/shadowfox_windows_x64.exe"> windows_x64 </a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="section-codemirror" id="customization">
<div class="row">
<h2>Customization</h2>
</div>
<div class="row">
<button class="collapsible js--arrow-icon-1"><i class="ion-ios-arrow-right icon-small"></i>Color Customization</button>
<div class="content">
<p class="long-copy">
This section can be used to customize the colors utilized by ShadowFox. Accent colors are used for things like buttons, links and tables. The drop down box can be used to darken ShadowFox by one shade. Only necessary changes are inserted into the text
box. For more information, see <a href="https://github.com/overdodactyl/ShadowFox/wiki/Customization">here.</a>
</p>
<hr />
<div class="row color-options">
<div class="col span-2-of-3">
<label><input type="color" value="#45a1ff" id="accent-1" />Accent 1</label>
<label><input type="color" value="#0a84ff" id="accent-2" />Accent 2</label>
<label><input type="color" value="#0060df" id="accent-3" />Accent 3</label>
<select name="shade" id="shade">
<option value="default" selected>Default</option>
<option value="darker">One shade darker</option>
</select>
</div>
<div class="col span-1-of-3 color-options cm-buttons">
<input type="submit" class="insert-color" value="Insert Color">
<input type="submit" class="clear-colors" value="Reset Colors">
<input type="submit" class="btn-remove-text" value="Clear Editor">
</div>
</div>
<div class="row">
<div class="col span-2-of-2 cm-box">
<textarea class="codemirror-textarea sf-colors"></textarea>
</div>
</div>
<div class="row colors-download">
<div class="col span-2-of-2 cm-box">
<input type="submit" class="download-css" value="Download CSS">
</div>
</div>
</div>
</div>
<div class="row">
<button class="collapsible js--arrow-icon-2"><i class="ion-ios-arrow-right icon-small"></i>UI Customization — userChrome</button>
<div class="content">
<p class="long-copy">
The following tweaks are not written or maintained by me. Instead, they are pulled from popular <code>userChrome</code> repositories from across the web. The location of the tweak along with the appropriate license is attached with each code
chunk.
</p>
<div class="row chrome-options">
<div class="col span-1-of-3 chrome-options">
<button class="collapsible js--arrow-icon-3 ui-section"><i class="ion-ios-arrow-right icon-small"></i>Tabs</button>
<div class="content">
<ul style="list-style-type:none; padding-left: 0">
<li><label><input type="checkbox" id="roundedTabs">Rounded Tabs</label></li>
<li><label><input type="checkbox" id="closeHover">Close Button on Hover</label></li>
<li><label><input type="checkbox" id="greyscaleFavicons">Grayscale Favicons</label></li>
<li><label><input type="checkbox" id="hideFavicons">Hide Favicons</label></li>
<li><label><input type="checkbox" id="bottomMacos">Bottom Tabs (macOS)</label></li>
<li><label><input type="checkbox" id="leftClose">X on left</label></li>
</ul>
</div>
<button class="collapsible js--arrow-icon-4 ui-section"><i class="ion-ios-arrow-right icon-small"></i>Toolbars</button>
<div class="content">
<ul style="list-style-type:none">
<li><label><input type="checkbox" id="bookmarksNewTab">Bookmarks Bar Only on New Tab</label></li>
<li><label><input type="checkbox" id="autoHide">Auto-hide Bookmarks and Url</label></li>
<li><label><input type="checkbox" id="slidingBookmarks">Sliding Bookmarks Bar</label></li>
</ul>
</div>
<button class="collapsible js--arrow-icon-5 ui-section"><i class="ion-ios-arrow-right icon-small"></i>Sidebar</button>
<div class="content">
<ul style="list-style-type:none">
<li><label><input type="checkbox" id="hideSidebar">Auto Hide Sidebar</label></li>
</ul>
</div>
</div>
<div class="col span-2-of-3 cm-box">
<div class="row cm-buttons">
<input type="submit" class="btn-insert-text" value="Insert Code">
<input type="submit" class="clear-boxes" value="Reset Boxes">
<input type="submit" class="btn-remove-code" value="Clear Editor">
</div>
<div class="row cm-2">
<textarea class="codemirror-textarea sf-chrome" id="editor-1"></textarea>
</div>
<div class="row colors-download">
<div class="col span-2-of-2 cm-box">
<input type="submit" class="download-css-2" value="Download CSS">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-form" id="contact">
<div class="row">
<h2>Find a bug? Have a feature request? Have any questions? </h2>
<p class="long-copy">
Please first read through the <a href="https://github.com/overdodactyl/ShadowFox/wiki/"> GitHub Wiki </a>, which includes more detailed instructions and information, and take a look at any open <a href="https://github.com/overdodactyl/ShadowFox/issues"> issues </a>.
If you can't find a duplicate request, bug, or an answer to your question, please feel free to either:
</p>
<p class="long-copy bullets">
• Open a new <a href="https://github.com/overdodactyl/ShadowFox/issues/new"> GitHub issue. </a><br> • Make a post on the ShadowFox <a href="https://www.reddit.com/r/ShadowFoxCSS/"> subreddit. </a><br> • Message me on <a href="https://join.slack.com/t/shadowfox-workspace/shared_invite/enQtMzU3NTU2NTQ0NDA1LTcwN2I1M2I4MzlkMWFlMWEzODc2MTY1NzU2NjhlYTgzOGY5ZTQzM2UxZTFiZDMxNDM1NDMyNjlhOWQ4MWQ3ZDc"> Slack. </a>
</p>
</div>
</section>
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li><a href="https://www.mozilla.org/en-US/firefox/new/">Download Firefox.</a></li>
<li><a href="http://codemirror.net/">Get CodeMiror</a></li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<li><a href="https://github.com/overdodactyl/ShadowFox/"><i class="ion-social-github"></i></a></li>
<li><a href="https://www.reddit.com/r/ShadowFoxCSS/"><i class="ion-social-reddit"></i></a></li>
<li><a href="https://join.slack.com/t/shadowfox-workspace/shared_invite/enQtMzI5Nzk5OTk1MjcxLThkMDgwOGE5ZDY1MDUyNjIwNWQ2MTlmMjEwZTJiZmZjYTUxODM4ZTRkNzhiNGRhZTFhMjdjMTFjMTQ3YjZjYzU"><i class="ion-pound"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<p>
Copyright Pat Johnson © 2018 (MIT). All rights reserved.<br /> Firefox is a registered trademark of the Mozilla Foundation.<br /> CodeMirror Text Editor, ShadowFox Theme Copyright © 2017 (MIT).
</p><a href="no_empty_iframes_testpage.html"></a>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>