6 lines
19 KiB
HTML
6 lines
19 KiB
HTML
<!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"> <style>
|
|
@charset "UTF-8";.row{zoom:1}.row:after,.row:before{content:"";display:table}.row:after{clear:both}.ion-navicon-round:before{display:inline-block;font-family:Ionicons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ion-navicon-round:before{content:"\f20d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}header,nav{display:block}a{background-color:transparent}h1{font-size:2em;margin:.67em 0}img{border:0}.row{zoom:1}.row:after,.row:before{content:"";display:table}.row:after{clear:both}.ion-navicon-round:before{display:inline-block;font-family:Ionicons;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ion-navicon-round:before{content:"\f20d"}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}header,nav{display:block}a{background-color:transparent}h1{font-size:2em;margin:.67em 0}img{border:0}*{margin:0;padding:0;box-sizing:border-box}body,html{background-color:#121212;color:#939393;font-family:LatoWebLight,sans-serif;font-weight:300;font-size:20px;text-rendering:optimizeLegibility;overflow-x:hidden}.row{max-width:1140px;margin:0 auto}h1{font-weight:300;text-transform:uppercase}h1{margin-top:0;margin-bottom:20px;color:#fff;font-size:240%;word-spacing:4px}h1{letter-spacing:1px}a:link,a:visited{color:#66317c;text-decoration:none;padding-bottom:1px;border-bottom:1px solid #66317c}.btn:link,.btn:visited{display:inline-block;padding:10px 30px;font-weight:300;text-decoration:none;border-radius:200px}.btn-full:link,.btn-full:visited{background-color:#66317c;border:1px solid #66317c;color:#fff;margin-right:15px}.btn-ghost:link,.btn-ghost:visited{border:1px solid #66317c;color:#66317c}header{background-image:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url(GcP71BP-min.c5cef7fa.png);background-size:cover;background-position:50%;height:100vh;background-attachment:fixed}.hero-text-box{position:absolute;width:1140px;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-text-box span{font-size:30%;vertical-align:top}.scroll-down{font-size:60%;display:block;position:absolute;bottom:0;right:2%}.logo{height:125px;margin-top:20px}.logo,.logo-black{width:auto;float:left}.logo-black{display:none;height:50px;margin:5px 0}.main-nav{float:right;list-style:none;margin-top:55px}.main-nav li{display:inline-block;margin-left:40px}.main-nav li a:link,.main-nav li a:visited{padding:8px 0;color:#fff;text-decoration:none;text-transform:uppercase;font-size:90%;border-bottom:2px solid transparent}.mobile-nav-icon{float:right;margin-top:30px;display:none}.mobile-nav-icon i{font-size:200%;color:#fff}:focus{outline:0}@media only screen and (max-width:1200px){.hero-text-box{width:100%;padding:0 2%}.row{padding:0 2%}}@media only screen and (max-width:1023px){body{font-size:18px}header{background-attachment:scroll}}@media only screen and (max-width:767px){body{font-size:16px}.hero-text-box,.row{padding:0 4%}.main-nav{display:none}.mobile-nav-icon{display:inline-block;position:relative;z-index:9999}.main-nav{float:none;position:absolute;z-index:8888;width:100%;margin:0;margin-left:-4%;background-color:rgba(0,0,0,.9);text-align:center;padding:10px 0}.main-nav li{display:block;margin-left:0;font-size:110%}.main-nav li a:link,.main-nav li a:visited{display:block;border:0;padding:10px 0;font-size:100%}h1{font-size:180%}}@media only screen and (max-width:350px){h1{font-size:150%}}@media only screen and (max-height:450px){.hero-text-box{margin-top:40px}}
|
|
</style>
|
|
<link rel="preload" type="text/css" href="website.4f94ef01.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
|
<noscript><link rel="stylesheet" type="text/css" href="website.4f94ef01.css"></noscript>
|
|
<script>!function(n){"use strict";n.loadCSS||(n.loadCSS=function(){});var o=loadCSS.relpreload={};if(o.support=function(){var e;try{e=n.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),o.bindMediaToggle=function(t){var e=t.media||"all";function a(){t.media=e}t.addEventListener?t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},o.poly=function(){if(!o.support())for(var t=n.document.getElementsByTagName("link"),e=0;e<t.length;e++){var a=t[e];"preload"!==a.rel||"style"!==a.getAttribute("as")||a.getAttribute("data-loadcss")||(a.setAttribute("data-loadcss",!0),o.bindMediaToggle(a))}},!o.support()){o.poly();var t=n.setInterval(o.poly,500);n.addEventListener?n.addEventListener("load",function(){o.poly(),n.clearInterval(t)}):n.attachEvent&&n.attachEvent("onload",function(){o.poly(),n.clearInterval(t)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:n.loadCSS=loadCSS}("undefined"!=typeof global?global:this);</script> <title>ShadowFox</title> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.323fcc51.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.78c87f9c.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.98341b2f.png"> <link rel="manifest" href="site.61d91522.webmanifest"> <link rel="mask-icon" href="safari-pinned-tab.87a4d9cf.svg" color="#59297c"> <link rel="shortcut icon" href="favicon.08713f72.ico"> <meta name="msapplication-TileColor" content="#59297c"> <meta name="msapplication-config" content="resources/favicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> </head> <body> <header> <nav> <div class="row"> <img src="ShadowFox-logo-sp.6043b896.png" alt="ShadowFox logo" class="logo"> <img src="ShadowFox-logo-sp.6043b896.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 Source.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 Origin.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"> <div class="row"> <h2>Download Today</h2> </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.5.0/shadowfox_darwin_amd64">darwin_amd64 </a></li> <li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.5.0/shadowfox_darwin_386">darwin_386 </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.5.0/shadowfox_linux_amd64">linux_amd64 </a></li> <li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.5.0/shadowfox_linux_386">linux_386 </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.5.0/shadowfox_windows_amd64.exe">windows_amd64 </a></li> <li><i class="ion-android-download icon-small"></i><a href="https://github.com/SrKomodo/shadowfox-updater/releases/download/v1.5.0/shadowfox_windows_386.exe">windows_386 </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">Hide Favicons</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> </div> </footer> <script src="website.5f7fbaef.js"></script> </body> </html> |