diff --git a/drivers/chrome/_locales/en/messages.json b/drivers/chrome/_locales/en/messages.json index 6fc0fc08d..aad3436bd 100644 --- a/drivers/chrome/_locales/en/messages.json +++ b/drivers/chrome/_locales/en/messages.json @@ -1,4 +1,8 @@ { + "options": { "message": "Wappalyzer Options" }, + "optionsSave": { "message": "Save options" }, + "optionsSaved": { "message": "Saved" }, + "optionTracking": { "message": "Anonymously send reports on detected applications to wappalyzer.com for research" }, "analyzeHeaders": { "message": "Analyze headers" }, "nothingToDo": { "message": "Nothing to do here." }, "noAppsDetected": { "message": "No applications detected." }, diff --git a/drivers/chrome/css/options.css b/drivers/chrome/css/options.css new file mode 100644 index 000000000..0f74c9cff --- /dev/null +++ b/drivers/chrome/css/options.css @@ -0,0 +1,46 @@ +body { + color: #303942; + cursor: default; + font-family: 'DejaVu Sans', Arial, sans-serif; font-size: 75%; + margin: 0 20px; +} + +p { + line-height: 1.8em; +} + +h1, h2, h3 { + font-weight: normal; + line-height: 1; +} + +h1 { + border-bottom: 1px solid #eee; + font-size: 1.5em; + margin: 0; + padding: 21px 0 13px; +} + +h2 { + font-size: 1.3em; + margin-bottom: 0.4em; +} + +h3 { + color: black; + font-size: 1.2em; + margin-bottom: 0.5em; +} + +a { + color: rgb(17, 85, 204); + text-decoration: underline; +} + +a:active { + color: rgb(5, 37, 119); +} + +#options-saved { + display: none; +} diff --git a/drivers/chrome/popup.css b/drivers/chrome/css/popup.css similarity index 100% rename from drivers/chrome/popup.css rename to drivers/chrome/css/popup.css diff --git a/drivers/chrome/css/widgets.css b/drivers/chrome/css/widgets.css new file mode 100644 index 000000000..9322e4635 --- /dev/null +++ b/drivers/chrome/css/widgets.css @@ -0,0 +1,298 @@ +/* Copyright (c) 2012 The Chromium Authors. All rights reserved. + * Use of this source code is governed by a BSD-style license that can be + * found in the LICENSE file. + */ + +/* This file defines styles for form controls. The order of rule blocks is + * important as there are some rules with equal specificity that rely on order + * as a tiebreaker. These are marked with OVERRIDE. + */ + +/* Default state **************************************************************/ + +button:not(.custom-appearance):not(.link-button), +input[type='button']:not(.custom-appearance):not(.link-button), +input[type='submit']:not(.custom-appearance):not(.link-button), +select, +input[type='checkbox'], +input[type='radio'] { + -webkit-appearance: none; + -webkit-user-select: none; + background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); + border: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 2px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), + inset 0 1px 2px rgba(255, 255, 255, 0.75); + color: #444; + font: inherit; + margin: 0 1px 0 0; + text-shadow: 0 1px 0 rgb(240, 240, 240); +} + +button:not(.custom-appearance):not(.link-button), +input[type='button']:not(.custom-appearance):not(.link-button), +input[type='submit']:not(.custom-appearance):not(.link-button), +select { + min-height: 2em; + min-width: 4em; + + +} + +button:not(.custom-appearance):not(.link-button), +input[type='button']:not(.custom-appearance):not(.link-button), +input[type='submit']:not(.custom-appearance):not(.link-button) { + -webkit-padding-end: 10px; + -webkit-padding-start: 10px; +} + +select { + -webkit-appearance: none; + -webkit-padding-end: 20px; + -webkit-padding-start: 6px; + /* OVERRIDE */ + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAWklEQVQokWNgoAOIAuI0PDiKaJMSgYCZmfkbkPkfHYPEQfJEG/b//3+FBQsWLGRjY/uJbBCIDxIHyRNtGDYDyTYI3UA+Pr4vFBmEbODbt2+bKDYIyUBWYtQBAIRzRP/XKJ//AAAAAElFTkSuQmCC"), + -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); + background-position: right center; + background-repeat: no-repeat; +} + +html[dir='rtl'] select { + background-position: center left; +} + +input[type='checkbox'] { + bottom: 2px; + height: 13px; + position: relative; + vertical-align: middle; + width: 13px; +} + +input[type='radio'] { + /* OVERRIDE */ + border-radius: 100%; + bottom: 3px; + height: 15px; + position: relative; + vertical-align: middle; + width: 15px; +} + +/* TODO(estade): add more types here? */ +input[type='password'], +input[type='search'], +input[type='text'], +input[type='url'], +input:not([type]) { + border: 1px solid #bfbfbf; + border-radius: 2px; + box-sizing: border-box; + color: #444; + font: inherit; + margin: 0; + /* Use min-height to accommodate addditional padding for touch as needed. */ + min-height: 2em; + padding: 3px; + + +} + +input[type='search'] { + -webkit-appearance: textfield; + /* NOTE: Keep a relatively high min-width for this so we don't obscure the end + * of the default text in relatively spacious languages (i.e. German). */ + min-width: 160px; +} + +/* Checked ********************************************************************/ + +input[type='checkbox']:checked::before { + -webkit-user-select: none; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wDBhYcG79aGIsAAACbSURBVBjTjdFBCkFhFAXgj4fp24PBy0SZ2ICRXRgYGb2xlKzBSEo2YgsiKWVoZgFKMjD5X/2Ux6lb99bpnNO5lKMR5i8MsEQHkhJiEzlS9HCqfiFWMUIt3AfsC3KKLCL30Qr7HfM4Ro4h6rhiEqmusIMKuphGqo+ogSPGcbYLzh91vdkXSHDDBk+0gxussS3rNcMCs+D6E18/9gLPPhbDshfzLgAAAABJRU5ErkJggg=="); + background-size: 100% 100%; + content: ''; + display: block; + height: 100%; + width: 100%; +} + +html[dir='rtl'] input[type='checkbox']:checked::before { + -webkit-transform: scaleX(-1); +} + +input[type='radio']:checked::before { + background-color: #666; + border-radius: 100%; + bottom: 25%; + content: ''; + display: block; + left: 25%; + position: absolute; + right: 25%; + top: 25%; +} + +/* Hover **********************************************************************/ + +button:not(.custom-appearance):not(.link-button):enabled:hover, +input[type='button']:not(.custom-appearance):not(.link-button):enabled:hover, +input[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover, +select:enabled:hover, +input[type='checkbox']:enabled:hover, +input[type='radio']:enabled:hover { + background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); + border-color: rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), + inset 0 1px 2px rgba(255, 255, 255, 0.95); + color: black; +} + +select:enabled:hover { + /* OVERRIDE */ + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAWklEQVQokWNgoAOIAuI0PDiKaJMSgYCZmfkbkPkfHYPEQfJEG/b//3+FBQsWLGRjY/uJbBCIDxIHyRNtGDYDyTYI3UA+Pr4vFBmEbODbt2+bKDYIyUBWYtQBAIRzRP/XKJ//AAAAAElFTkSuQmCC"), + -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); +} + +/* Active *********************************************************************/ + +button:not(.custom-appearance):not(.link-button):enabled:active, +input[type='button']:not(.custom-appearance):not(.link-button):enabled:active, +input[type='submit']:not(.custom-appearance):not(.link-button):enabled:active, +select:enabled:active, +input[type='checkbox']:enabled:active, +input[type='radio']:enabled:active { + background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); + box-shadow: none; + text-shadow: none; +} + +select:enabled:active { + /* OVERRIDE */ + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAWklEQVQokWNgoAOIAuI0PDiKaJMSgYCZmfkbkPkfHYPEQfJEG/b//3+FBQsWLGRjY/uJbBCIDxIHyRNtGDYDyTYI3UA+Pr4vFBmEbODbt2+bKDYIyUBWYtQBAIRzRP/XKJ//AAAAAElFTkSuQmCC"), + -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); +} + +/* Disabled *******************************************************************/ + +button:not(.custom-appearance):not(.link-button):disabled, +input[type='button']:not(.custom-appearance):not(.link-button):disabled, +input[type='submit']:not(.custom-appearance):not(.link-button):disabled, +select:disabled { + background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); + border-color: rgba(80, 80, 80, 0.2); + box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), + inset 0 1px 2px rgba(255, 255, 255, 0.75); + color: #aaa; +} + +select:disabled { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAYAAAAbQcSUAAAAAXNSR0IArs4c6QAAAAd0SU1FB9sLAxYEBKriBmwAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAACxMAAAsTAQCanBgAAABLSURBVCiRY2CgA4gC4jQ8OIpokxKBoKGh4T8uDJIn2rD///8rLFiwYCE2g0DiIHkSfIndQLIMwmYgRQYhG/j27dsmig1CMpCVGHUAo8FcsHfxfXQAAAAASUVORK5CYII="), + -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); +} + +input[type='checkbox']:disabled, +input[type='radio']:disabled { + opacity: .75; +} + +input[type='password']:disabled, +input[type='search']:disabled, +input[type='text']:disabled, +input[type='url']:disabled, +input:not([type]):disabled { + color: #999; +} + +/* Focus **********************************************************************/ + +button:not(.custom-appearance):not(.link-button):enabled:focus, +input[type='button']:not(.custom-appearance):enabled:focus, +input[type='checkbox']:enabled:focus, +input[type='password']:enabled:focus, +input[type='radio']:enabled:focus, +input[type='search']:enabled:focus, +input[type='submit']:not(.custom-appearance):enabled:focus, +input[type='text']:enabled:focus, +input[type='url']:enabled:focus, +input:not([type]):enabled:focus, +select:enabled:focus { + /* OVERRIDE */ + -webkit-transition: border-color 200ms; + /* We use border color because it follows the border radius (unlike outline). + * This is particularly noticeable on mac. */ + border-color: rgb(77, 144, 254); + outline: none; +} + +/* Link buttons ***************************************************************/ + +.link-button { + -webkit-box-shadow: none; + background: transparent none; + border: none; + color: rgb(17, 85, 204); + cursor: pointer; + /* Input elements have -webkit-small-control which can override the body font. + * Resolve this by using 'inherit'. */ + font: inherit; + margin: 0; + padding: 0 4px; +} + +.link-button:hover { + text-decoration: underline; +} + +.link-button:active { + color: rgb(5, 37, 119); + text-decoration: underline; +} + +.link-button[disabled] { + color: #999; + cursor: default; + text-decoration: none; +} + +/* Checkbox/radio helpers ****************************************************** + * + * .checkbox and .radio classes wrap labels. Checkboxes and radios should use + * these classes with the markup structure: + * + *
+ +
+ ++ +
+ + diff --git a/drivers/chrome/popup.html b/drivers/chrome/popup.html index 2dd1c67df..a83267c7f 100644 --- a/drivers/chrome/popup.html +++ b/drivers/chrome/popup.html @@ -4,16 +4,17 @@