@charset "utf-8"; @namespace url('http://www.w3.org/1999/xhtml'); /* * Alien Tech Firefox Add-ons - boosts for Firefox 3.1+ * * Author : Ze Thriller (green[dot]glopp[at]gmail[dot]com) * Updated : April, 21, 2009 (v1.4) - matches Alien Tech Firefox Add-ons v1.4 * Description : Dark tech appearance for Firefox Addons site (http://addons.mozilla.org). * text-shadow has been natively supported since firefox 3.1a1-pre (nightly builds), so let's celebrate ! * Usage : Use with the 'Stylish' Firefox extension (http://userstyles.org/) * This style is NOT for now intended to work with addons for Thunderbird, Seamonkey and Sunbird on then mozilla.org site. * I am not able to reskin the addon management part because I don't have any. * I HIGHLY recommand to use this style in combination with Alien Tech Firefox Add-ons. * I don't know at all what side effets could occur if used separately. Maybe it can explode or burn ^^ * (this is just a joke !) * CSS version used : CSS 3, for text-shadow. You can find a CSS 3 testcase at http://www.css3.info/preview/text-shadow/ * Works with : Stylish in Firefox 3, Stylish in Firefox 2 * Tested with : Stylish 0.5.9 and: Firefox 3.0.8 (WinXP), Firefox 3.0.7 (Ubuntu Hardy), Firefox "Minefield" 3.1b2pre (old nightlies), * Firefox "Shiretoko" 3.5b4pre (nighlies, daily updates) * Licence : Creative Commons v3.0 BY-NC-SA (see http://creativecommons.org/licenses/by-nc-sa/3.0/ ) * Credits : Thanks to css3.info for some examples of complex usages of text-shadow ;) * Known bugs : Doesn't work with Firefox 2.x and Firefox 3.0.x , text-shadow was not yet implemented . * Probably some missing styling in the "Developer Tools" pages. Please help if you can ! * * Notes : Firefox 3.1 has been renumbered as Firefox 3.5 in latest betas so this style will work on both. * * PS: I recently found an add-on to simulate text-shadow rendering. * It works rather fine with firefox 2 but is ugly with Firefox 3.0.x , * but it doesn't deal with styles from chrome or stylish. * ******************** * * Full Alien Tech version history available at http://quantumsearcher.net/designs/addons_tech/changelog * ******************** * */ @-moz-document domain("addons.mozilla.org") { /* Basic black glow, reduced opacity (main search field) */ input#query { text-shadow: 0 0 4px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.7), 2px 0 1px rgba(0, 0, 0, 0.7), -2px 0 1px rgba(0, 0, 0, 0.7), 0 2px 1px rgba(0, 0, 0, 0.7), 0 -2px 1px rgba(0, 0, 0, 0.7) !important; } /* Purple glow (main search field) */ input#query:focus { text-shadow: 0 0 4px #60C, 0 0 16px #60C, 2px 0 1px #60C, -2px 0 1px #60C, 0 2px 1px #60C, 0 -2px 1px #60C !important; } /* Flame text, effect taken from http://www.css3.info/preview/text-shadow/ */ div#page-title > div > h1 { text-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 -5px 4px rgba(255, 255, 51, 0.8), 2px -10px 6px rgba(255, 221, 51, 0.8), -2px -15px 11px rgba(255, 136, 0, 0.8), 2px -25px 18px rgba(255, 34, 0, 0.8) !important; } /* Categories green glow */ div#categories > h3 > span { text-shadow: 0 0 2px #000, 0 0 2px #000, -10px 0 4px rgba(110, 236, 183, 0.7), 10px 0 4px rgba(110, 236, 183, 0.7), -18px 0 4px rgba(110, 236, 183, 0.4), 18px 0 4px rgba(110, 236, 183, 0.4), -24px 0 4px rgba(110, 236, 183, 0.2), 24px 0 4px rgba(110, 236, 183, 0.2), -28px 0 4px rgba(110, 236, 183, 0.15), 28px 0 4px rgba(110, 236, 183, 0.15) !important; } /* Blue glow */ ul#addon-summary > li:not([class~=exp]) h3.name a:hover, ul#addon-summary > li:not([class~=exp]) h3.name a:focus, div#addon-summary:not([class~=exp]) h3.name, div[id^="feature"]:not([class~=exp]) h4.name a:hover, div[id^="feature"]:not([class~=exp]) h4.name a:focus, div#secondaries > div:not([class~=exp]) h4.name a:hover, div#secondaries > div:not([class~=exp]) h4.name a:focus, div#recommended div#feature1:not([class~=exp]) h4.name a:hover, div#recommended div#feature1:not([class~=exp]) h4.name a:focus, div#recommended div#feature2:not([class~=exp]) h4.name a:hover, div#recommended div#feature2:not([class~=exp]) h4.name a:focus, li[id^="feature"]:not([class~=exp]) > h4.name > a:hover, li[id^="feature"]:not([class~=exp]) > h4.name > a:focus, div.choices a.uniquify:hover, div.choices a.uniquify:focus { text-shadow: 0 0 2px #000, 0 0 2px #000, -10px 0 4px rgba(76, 150, 214, 0.6), 10px 0 4px rgba(76, 150, 214, 0.6), -20px 0 4px rgba(76, 150, 214, 0.3), 20px 0 4px rgba(76, 150, 214, 0.3), -30px 0 4px rgba(76, 150, 214, 0.15), 30px 0 4px rgba(76, 150, 214, 0.15) !important; } /* Red glow */ ul#addon-summary > li[class~=exp] h3.name a:hover, ul#addon-summary > li[class~=exp] h3.name a:focus, div#addon-summary[class~=exp] h3.name, div[id^="feature"][class~=exp] h4.name a:hover, div[id^="feature"][class~=exp] h4.name a:focus, div#secondaries > div[class~=exp] h4.name a:hover, div#secondaries > div[class~=exp] h4.name a:focus, div#recommended div#feature1[class~=exp] h4.name a:hover, div#recommended div#feature1[class~=exp] h4.name a:focus, div#recommended div#feature2[class~=exp] h4.name a:hover, div#recommended div#feature2[class~=exp] h4.name a:focus, li[id^="feature"][class~=exp] > h4.name > a:hover, li[id^="feature"][class~=exp] > h4.name > a:focus { text-shadow: 0 0 2px #000, 0 0 2px #000, -10px 0 4px rgba(138, 98, 37, 0.6), 10px 0 4px rgba(138, 98, 37, 0.6), -20px 0 4px rgba(138, 98, 37, 0.3), 20px 0 4px rgba(76, 150, 214, 0.3), -30px 0 4px rgba(76, 150, 214, 0.15), 30px 0 4px rgba(76, 150, 214, 0.15) !important; } }