Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
react-eyedropper
Advanced tools
react-eyedropper - npm Package Compare versions
+1
-1
| { | ||
| "name": "react-eyedropper", | ||
| "version": "0.0.5", | ||
| "version": "0.0.6", | ||
| "description": "React eye dropper", | ||
@@ -5,0 +5,0 @@ "scripts": { |
+1
-0
@@ -65,2 +65,3 @@ # react-eyedropper | ||
| **`initializedColor`** | Type: `function` , *required* <br> callback, arg is object {r,g,b} | ||
| **`onInit`** | Type: `function` , <br> pre condition | ||
| **`className`** | Type: `string`, <br> for style | ||
@@ -67,0 +68,0 @@ **`title`** | Type: `string`, <br> title |
Sorry, the diff of this file is not supported yet
| <html> | ||
| <head> | ||
| <script src="background.js"></script> | ||
| </head> | ||
| <body> | ||
| <textarea id="edClipboard"></textarea> | ||
| </body> | ||
| </html> |
| const BG_VERSION = 13 | ||
| const NEED_DROPPER_VERSION = 11 | ||
| const DEFAULT_COLOR = "#b48484" | ||
| // jQuery like functions | ||
| // for get element by id | ||
| function $(id) { | ||
| return document.getElementById(id) | ||
| } | ||
| // Returns -1 if value isn't in array. | ||
| // Return position starting from 0 if found | ||
| function inArray(value, array) { | ||
| for (let i = 0; i < array.length; i++) { | ||
| if (array[i] == value) return i | ||
| } | ||
| return -1 | ||
| } | ||
| // base bg object | ||
| var bg = { | ||
| tab: 0, | ||
| tabs: [], | ||
| version: BG_VERSION, | ||
| screenshotData: '', | ||
| screenshotFormat: 'png', | ||
| canvas: document.createElement("canvas"), | ||
| canvasContext: null, | ||
| debugImage: null, | ||
| debugTab: 0, | ||
| history: { | ||
| version: BG_VERSION, | ||
| last_color: DEFAULT_COLOR, | ||
| current_palette: 'default', | ||
| palettes: [], | ||
| backups: [] | ||
| }, | ||
| defaultSettings: { | ||
| autoClipboard: false, | ||
| autoClipboardNoGrid: false, | ||
| enableColorToolbox: true, | ||
| enableColorTooltip: true, | ||
| enableRightClickDeactivate: true, | ||
| dropperCursor: 'default' | ||
| }, | ||
| settings: {}, | ||
| edCb: null, | ||
| color_sources: { | ||
| 1: 'Web Page', | ||
| 2: 'Color Picker', | ||
| 3: 'Old History' | ||
| }, | ||
| // use selected tab | ||
| // need to null all tab-specific variables | ||
| useTab(tab) { | ||
| bg.tab = tab | ||
| bg.screenshotData = '' | ||
| bg.canvas = document.createElement("canvas") | ||
| bg.canvasContext = null | ||
| }, | ||
| checkDropperScripts() { | ||
| console.log('bg: checking dropper version') | ||
| bg.sendMessage({ | ||
| type: 'edropper-version' | ||
| }, function(res) { | ||
| console.log('bg: checking dropper version 2') | ||
| if (res) { | ||
| if (res.version < NEED_DROPPER_VERSION) { | ||
| bg.refreshDropper() | ||
| } else { | ||
| bg.pickupActivate() | ||
| } | ||
| } else { | ||
| bg.injectDropper() | ||
| } | ||
| }) | ||
| }, | ||
| // FIXME: try to handle this better, maybe some consolidation | ||
| injectDropper() { | ||
| console.log("bg: injecting dropper scripts") | ||
| chrome.tabs.executeScript(bg.tab.id, { | ||
| allFrames: false, | ||
| file: "inc/jquery-2.1.0.min.js" | ||
| }, function() { | ||
| console.log('bg: jquery injected') | ||
| chrome.tabs.executeScript(bg.tab.id, { | ||
| allFrames: false, | ||
| file: "inc/jquery.scrollstop.js" | ||
| }, function() { | ||
| console.log('bg: jquery.scrollstop injected') | ||
| chrome.tabs.executeScript(bg.tab.id, { | ||
| allFrames: false, | ||
| file: "inc/shortcut.js" | ||
| }, function() { | ||
| console.log('bg: shortcuts injected') | ||
| chrome.tabs.executeScript(bg.tab.id, { | ||
| allFrames: false, | ||
| file: "edropper2.js" | ||
| }, function() { | ||
| console.log('bg: edropper2 injected') | ||
| bg.pickupActivate() | ||
| }) | ||
| }) | ||
| }) | ||
| }) | ||
| }, | ||
| refreshDropper() { | ||
| console.log("bg: refreshing dropper scripts") | ||
| chrome.tabs.executeScript(bg.tab.id, { | ||
| allFrames: true, | ||
| file: "edropper2.js" | ||
| }, function() { | ||
| console.log('bg: edropper2 updated') | ||
| bg.pickupActivate() | ||
| }) | ||
| }, | ||
| sendMessage(message, callback) { | ||
| chrome.tabs.sendMessage(bg.tab.id, message, callback) | ||
| }, | ||
| shortcutListener() { | ||
| chrome.commands.onCommand.addListener(function(command) { | ||
| console.log('bg: command: ', command) | ||
| switch (command) { | ||
| case 'activate': | ||
| bg.activate2() | ||
| break | ||
| } | ||
| }) | ||
| }, | ||
| messageListener() { | ||
| // simple messages | ||
| chrome.runtime.onMessage.addListener(function(req, sender, sendResponse) { | ||
| switch (req.type) { | ||
| case 'activate-from-hotkey': | ||
| bg.activate2() | ||
| sendResponse({}) | ||
| break | ||
| // Reload background script | ||
| case 'reload-background': | ||
| window.location.reload() | ||
| break | ||
| // Clear colors history | ||
| case 'clear-history': | ||
| bg.clearHistory(sendResponse) | ||
| break | ||
| } | ||
| }) | ||
| // longer connections | ||
| chrome.extension.onConnect.addListener(function(port) { | ||
| port.onMessage.addListener(function(req, sender) { | ||
| switch (req.type) { | ||
| // Taking screenshot for content script | ||
| case 'screenshot': | ||
| ////console.log('received screenshot request') | ||
| bg.capture() | ||
| break | ||
| // Creating debug tab | ||
| case 'debug-tab': | ||
| console.info('Received debug tab request') | ||
| bg.debugImage = req.image | ||
| bg.createDebugTab() | ||
| break | ||
| // Set color given in req | ||
| // FIXME: asi lepší z inject scriptu posílat jen rgbhex, už to tak máme stejně skoro všude | ||
| case 'set-color': | ||
| console.log(sender.sender) | ||
| bg.setColor(`#${req.color.rgbhex}`, true, 1, sender.sender.url) | ||
| break | ||
| } | ||
| }) | ||
| }) | ||
| }, | ||
| // function for injecting new content | ||
| inject(file, tab) { | ||
| if (tab == undefined) | ||
| tab = bg.tab.id | ||
| ////console.log("Injecting " + file + " into tab " + tab) | ||
| chrome.tabs.executeScript(tab, { | ||
| allFrames: false, | ||
| file: file | ||
| }, function() {}) | ||
| }, | ||
| setBadgeColor(color) { | ||
| console.info(`Setting badge color to ${color}`) | ||
| chrome.browserAction.setBadgeBackgroundColor({ | ||
| color: [parseInt(color.substr(1, 2), 16), parseInt(color.substr(3, 2), 16), parseInt(color.substr(5, 2), 16), 255] | ||
| }) | ||
| }, | ||
| // method for setting color. It set bg color, update badge and save to history if possible | ||
| // source - see historyColorItem for description | ||
| setColor(color, history = true, source = 1, url = null) { | ||
| console.group('setColor') | ||
| console.info(`Received color ${color}, history: ${history}`) | ||
| if (!color || !color.match(/^#[0-9a-f]{6}$/)) { | ||
| console.error('error receiving collor from dropper') | ||
| console.groupEnd('setColor') | ||
| return | ||
| } // we are storing color with first # character | ||
| bg.setBadgeColor(color) | ||
| bg.history.last_color = color | ||
| if (bg.settings.autoClipboard) { | ||
| console.info("Copying color to clipboard") | ||
| bg.copyToClipboard(color) | ||
| } | ||
| if (history) { | ||
| console.info("Saving color to history") | ||
| bg.saveToHistory(color, source, url) | ||
| } | ||
| console.groupEnd('setColor') | ||
| }, | ||
| saveToHistory(color, source = 1, url = null) { | ||
| let palette = bg.getPalette() | ||
| if (!palette.colors.find(x => x.hex == color)) { | ||
| palette.colors.push(bg.historyColorItem(color, Date.now, source, url)) | ||
| console.info(`Color ${color} saved to palette ${bg.getPaletteName()}`) | ||
| bg.saveHistory() | ||
| } else { | ||
| console.info(`Color ${color} already in palette ${bg.getPaletteName()}`) | ||
| } | ||
| }, | ||
| copyToClipboard(color) { | ||
| bg.edCb.value = bg.settings.autoClipboardNoGrid ? color.substring(1) : color | ||
| bg.edCb.select() | ||
| document.execCommand("copy", false, null) | ||
| }, | ||
| // activate from content script | ||
| activate2() { | ||
| chrome.tabs.getSelected(null, function(tab) { | ||
| bg.useTab(tab) | ||
| bg.activate() | ||
| }) | ||
| }, | ||
| // activate Pick | ||
| activate() { | ||
| console.log('bg: received pickup activate') | ||
| // check scripts and activate pickup | ||
| bg.checkDropperScripts() | ||
| }, | ||
| pickupActivate() { | ||
| // activate picker | ||
| bg.sendMessage({ | ||
| type: 'pickup-activate', | ||
| options: { | ||
| cursor: bg.settings.dropperCursor, | ||
| enableColorToolbox: bg.settings.enableColorToolbox, | ||
| enableColorTooltip: bg.settings.enableColorTooltip, | ||
| enableRightClickDeactivate: bg.settings.enableRightClickDeactivate | ||
| } | ||
| }, function() {}) | ||
| console.log('bg: activating pickup') | ||
| }, | ||
| // capture actual Screenshot | ||
| capture() { | ||
| ////console.log('capturing') | ||
| try { | ||
| chrome.tabs.captureVisibleTab(null, { | ||
| format: 'png' | ||
| }, bg.doCapture) | ||
| // fallback for chrome before 5.0.372.0 | ||
| } catch (e) { | ||
| chrome.tabs.captureVisibleTab(null, bg.doCapture) | ||
| } | ||
| }, | ||
| getColor() { | ||
| return bg.history.last_color | ||
| }, | ||
| doCapture(data) { | ||
| if (data) { | ||
| console.log('bg: sending updated image') | ||
| bg.sendMessage({ | ||
| type: 'update-image', | ||
| data: data | ||
| }, function() {}) | ||
| } else { | ||
| console.error('bg: did not receive data from captureVisibleTab') | ||
| } | ||
| }, | ||
| createDebugTab() { | ||
| // DEBUG | ||
| if (bg.debugTab != 0) { | ||
| chrome.tabs.sendMessage(bg.debugTab, { | ||
| type: 'update' | ||
| }) | ||
| } else | ||
| chrome.tabs.create({ | ||
| url: '/html/debug-tab.html', | ||
| selected: false | ||
| }, function(tab) { | ||
| bg.debugTab = tab.id | ||
| }) | ||
| }, | ||
| tabOnChangeListener() { | ||
| // deactivate dropper if tab changed | ||
| chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) { | ||
| if (bg.tab.id == tabId) | ||
| bg.sendMessage({ | ||
| type: 'pickup-deactivate' | ||
| }, function() {}) | ||
| }) | ||
| }, | ||
| getPaletteName() { | ||
| return bg.getPalette().name | ||
| }, | ||
| isPalette(name) { | ||
| return bg.history.palettes.find(x => x.name == name) ? true : false | ||
| }, | ||
| getPalette(name) { | ||
| if (name === undefined) { | ||
| name = (bg.history.current_palette === undefined || !bg.isPalette(bg.history.current_palette)) ? 'default' : bg.history.current_palette | ||
| } | ||
| return bg.history.palettes.find(x => x.name == name) | ||
| }, | ||
| changePalette(palette_name) { | ||
| if (bg.isPalette(palette_name)) { | ||
| bg.history.current_palette = palette_name | ||
| console.info(`Switched current palette to ${palette_name}`) | ||
| } else { | ||
| console.error(`Cannot switch to palette ${palette_name}. Palette not found.`) | ||
| } | ||
| bg.saveHistory() | ||
| }, | ||
| getPaletteNames() { | ||
| return bg.history.palettes.map(x => x.name) | ||
| }, | ||
| uniquePaletteName(name) { | ||
| // default name is palette if we receive empty or undefined name | ||
| if (name === undefined || !name || name.length < 1) { | ||
| console.info(`uniquePaletteName: ${name} empty, trying 'palette'`) | ||
| return bg.uniquePaletteName("palette") | ||
| // if there is already palette with same name | ||
| } else if (bg.getPaletteNames().find(x => x == name)) { | ||
| let matches = name.match(/^(.*[^\d]+)(\d+)?$/) | ||
| // doesn't end with number, we will add 1 | ||
| if (matches[2] === undefined) { | ||
| console.info(`uniquePaletteName: ${name} occupied, trying '${name}1'`) | ||
| return bg.uniquePaletteName(`${name}1`) | ||
| // ends with number | ||
| } else { | ||
| let new_name = `${matches[1]}${parseInt(matches[2])+1}` | ||
| console.info(`uniquePaletteName: ${name} occupied, trying '${new_name}'`) | ||
| return bg.uniquePaletteName(new_name) | ||
| } | ||
| } else { | ||
| console.info(`uniquePaletteName: ${name} is free'`) | ||
| return name | ||
| } | ||
| }, | ||
| createPalette(name) { | ||
| let palette_name = bg.uniquePaletteName(name) | ||
| console.info(`Creating new palette ${name}. Unique name: ${palette_name}`) | ||
| bg.history.palettes.push({ | ||
| name: palette_name, | ||
| created: Date.now(), | ||
| colors: [] | ||
| }) | ||
| bg.saveHistory() | ||
| return bg.getPalette(palette_name) | ||
| }, | ||
| destroyPalette(name) { | ||
| if (!bg.isPalette(name)) { | ||
| return | ||
| } | ||
| if (name === 'default') { | ||
| console.info("Can't destroy default palette. Clearing only.") | ||
| bg.getPalette(name).colors = [] | ||
| } else { | ||
| console.info(`Destroying palette ${name}`) | ||
| let destroying_current = (name === bg.getPalette().name) | ||
| bg.history.palettes = bg.history.palettes.filter((obj) => { | ||
| return obj.name !== name | ||
| }) | ||
| // if we are destroying current palette, switch to default one | ||
| if (destroying_current) { | ||
| bg.changePalette('default') | ||
| } | ||
| } | ||
| bg.saveHistory(false) | ||
| chrome.storage.sync.remove(`palette.${name}`) | ||
| }, | ||
| clearHistory(sendResponse) { | ||
| let palette = bg.getPalette() | ||
| console.info(`Clearing history for palette ${palette.name}`) | ||
| palette.colors = [] | ||
| bg.saveHistory() | ||
| if (sendResponse != undefined) { | ||
| sendResponse({ | ||
| state: 'OK' | ||
| }) | ||
| } | ||
| }, | ||
| /** | ||
| * When Eye Dropper is just installed, we want to display nice | ||
| * page to user with some instructions | ||
| */ | ||
| pageInstalled() { | ||
| // only if we have support for localStorage | ||
| if (window.localStorage != null) { | ||
| // show installed or updated page | ||
| // do not display if localStorage is not supported - we don't want to spam user | ||
| if (window.localStorage && !window.localStorage.seenInstalledPage) { | ||
| console.info("Just installed: opening installed page in new tab.") | ||
| window.localStorage.seenInstalledPage = true | ||
| chrome.tabs.create({ | ||
| url: 'pages/installed.html', | ||
| selected: true | ||
| }) | ||
| } | ||
| } | ||
| }, | ||
| /** | ||
| * Load history from storage on extension start | ||
| */ | ||
| loadHistory() { | ||
| console.info("Loading history from storage") | ||
| chrome.storage.sync.get((items) => { | ||
| if (items.history) { | ||
| bg.history.current_palette = items.history.cp | ||
| bg.history.last_color = items.history.lc | ||
| console.info("History info loaded. Loading palettes.") | ||
| Object.keys(items).forEach((key, index) => { | ||
| let matches = key.match(/^palette\.(.*)$/) | ||
| if (matches) { | ||
| let palette = items[key] | ||
| bg.history.palettes.push({ | ||
| name: matches[1], | ||
| colors: palette.c, | ||
| created: palette.t | ||
| }) | ||
| } | ||
| }) | ||
| } else { | ||
| console.warn("No history in storage") | ||
| bg.createPalette('default') | ||
| } | ||
| // in any case we will try to convert local history | ||
| bg.tryConvertOldHistory() | ||
| }) | ||
| }, | ||
| /** | ||
| * Load settings from storage on extension start | ||
| */ | ||
| loadSettings() { | ||
| console.info("Loading settings from storage") | ||
| chrome.storage.sync.get('settings', (items) => { | ||
| if (items.settings) { | ||
| console.info("Settings loaded") | ||
| bg.settings = items.settings | ||
| } else { | ||
| console.warn("No settings in storage") | ||
| bg.tryConvertOldSettings() | ||
| } | ||
| }) | ||
| }, | ||
| /** | ||
| * sources: | ||
| * 1: eye dropper | ||
| * 2: color picker | ||
| * 3: converted from old history | ||
| * | ||
| * FIXME: | ||
| * url is not saved now because of quotas | ||
| * favorite not implemented yet | ||
| * | ||
| * h = hex | ||
| * n = name | ||
| * s = source | ||
| * t = timestamp when taken | ||
| * f = favorite | ||
| */ | ||
| historyColorItem(color, timestamp = Date.now(), source = 1, source_url = null, favorite = false) { | ||
| f = favorite ? 1 : 0 | ||
| return { | ||
| h: color, | ||
| n: '', | ||
| s: source, | ||
| t: timestamp, | ||
| f: f | ||
| } | ||
| }, | ||
| /** | ||
| * Convert pre 0.4 Eye Dropper local history to synced storage | ||
| * | ||
| * Backup of old history is stored in local storage in _history_backup | ||
| * in case something goes south. | ||
| */ | ||
| tryConvertOldHistory() { | ||
| if (window.localStorage.history) { | ||
| let oldHistory = JSON.parse(window.localStorage.history) | ||
| let converted_palette = bg.createPalette('converted') | ||
| console.warn(converted_palette) | ||
| // add every color from old history to new schema with current timestamp | ||
| let timestamp = Date.now() | ||
| for (let key in oldHistory) { | ||
| let color = oldHistory[key] | ||
| // in versions before 0.3.0 colors were stored without # in front | ||
| if (color[0] != '#') { | ||
| color = '#' + color | ||
| } | ||
| // push color to our converted palette | ||
| converted_palette.colors.push(bg.historyColorItem(color, timestamp, 3)) | ||
| // set this color as last | ||
| bg.history.last_color = color | ||
| } | ||
| // make backup of old history | ||
| window.localStorage._history_backup = window.localStorage.history | ||
| // remove old history from local storage | ||
| window.localStorage.removeItem('history') | ||
| // sync history | ||
| bg.saveHistory() | ||
| // change to converted history if current palette is empty | ||
| if (bg.getPalette().colors.length < 1) { | ||
| bg.changePalette(converted_palette.name) | ||
| } | ||
| } | ||
| }, | ||
| /** | ||
| * Convert pre 0.4 Eye Dropper local settings to synced storage | ||
| * | ||
| * Synced storage is much better because it finally allows as to store objects and not | ||
| * strings only. | ||
| * | ||
| */ | ||
| tryConvertOldSettings() { | ||
| // load default settings first | ||
| bg.settings = bg.defaultSettings | ||
| // convert old settings | ||
| bg.settings.autoClipboard = (window.localStorage.autoClipboard === "true") ? true : false | ||
| bg.settings.autoClipboardNoGrid = (window.localStorage.autoClipboardNoGrid === "true") ? true : false | ||
| bg.settings.enableColorToolbox = (window.localStorage.enableColorToolbox === "false") ? false : true | ||
| bg.settings.enableColorTooltip = (window.localStorage.enableColorTooltip === "false") ? false : true | ||
| bg.settings.enableRightClickDeactivate = (window.localStorage.enableRightClickDeactivate === "false") ? false : true | ||
| bg.settings.dropperCursor = (window.localStorage.dropperCursor === 'crosshair') ? 'crosshair' : 'default' | ||
| // sync settings | ||
| bg.saveSettings() | ||
| // remove old settings from local storage | ||
| let setting_keys = ['autoClipboard', 'autoClipboardNoGrid', 'enableColorTooltip', 'enableColorToolbox', 'enableRightClickDeactivate', 'dropperCursor'] | ||
| for (let setting_name of setting_keys) { | ||
| localStorage.removeItem(setting_name) | ||
| } | ||
| console.info("Removed old settings from locale storage.") | ||
| }, | ||
| saveHistory(all_palettes = true) { | ||
| let saved_object = { | ||
| 'history': { | ||
| v: bg.history.version, | ||
| cp: bg.history.current_palette, | ||
| lc: bg.history.last_color | ||
| } | ||
| } | ||
| if (all_palettes) { | ||
| for (palette of bg.history.palettes) { | ||
| saved_object[`palette.${palette.name}`] = { | ||
| c: palette.colors, | ||
| t: palette.created | ||
| } | ||
| } | ||
| } | ||
| chrome.storage.sync.set(saved_object, () => { | ||
| console.info("History synced to storage") | ||
| }) | ||
| }, | ||
| saveSettings() { | ||
| chrome.storage.sync.set({ | ||
| 'settings': bg.settings | ||
| }, () => { | ||
| console.info("Settings synced to storage") | ||
| }) | ||
| }, | ||
| init() { | ||
| console.group("init") | ||
| bg.pageInstalled() | ||
| bg.edCb = document.getElementById('edClipboard') | ||
| bg.loadSettings() | ||
| bg.loadHistory() | ||
| // set default badge text to empty string | ||
| // we are comunicating with users only through badge background color | ||
| chrome.browserAction.setBadgeText({ | ||
| text: ' ' | ||
| }) | ||
| // we have to listen for messages | ||
| bg.messageListener() | ||
| // act when tab is changed | ||
| // TODO: call only when needed? this is now used also if picker isn't active | ||
| bg.tabOnChangeListener() | ||
| // listen for shortcut commands | ||
| bg.shortcutListener() | ||
| console.groupEnd('init') | ||
| } | ||
| } | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| bg.init() | ||
| }) |
| /*! Hint.css - v2.3.1 - 2016-06-05 | ||
| * http://kushagragour.in/lab/hint/ | ||
| * Copyright (c) 2016 Kushagra Gour; Licensed */ | ||
| /*-------------------------------------* HINT.css - A CSS tooltip library | ||
| \*-------------------------------------*/ | ||
| /** | ||
| * HINT.css is a tooltip library made in pure CSS. | ||
| * | ||
| * Source: https://github.com/chinchang/hint.css | ||
| * Demo: http://kushagragour.in/lab/hint/ | ||
| * | ||
| * Release under The MIT License | ||
| * | ||
| */ | ||
| /** | ||
| * source: hint-core.scss | ||
| * | ||
| * Defines the basic styling for the tooltip. | ||
| * Each tooltip is made of 2 parts: | ||
| * 1) body (:after) | ||
| * 2) arrow (:before) | ||
| * | ||
| * Classes added: | ||
| * 1) hint | ||
| */ | ||
| [class*="hint--"] { | ||
| position: relative; | ||
| display: inline-block; | ||
| /** | ||
| * tooltip arrow | ||
| */ | ||
| /** | ||
| * tooltip body | ||
| */ } | ||
| [class*="hint--"]:before, [class*="hint--"]:after { | ||
| position: absolute; | ||
| -webkit-transform: translate3d(0, 0, 0); | ||
| -moz-transform: translate3d(0, 0, 0); | ||
| transform: translate3d(0, 0, 0); | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| z-index: 1000000; | ||
| pointer-events: none; | ||
| -webkit-transition: 0.3s ease; | ||
| -moz-transition: 0.3s ease; | ||
| transition: 0.3s ease; | ||
| -webkit-transition-delay: 0ms; | ||
| -moz-transition-delay: 0ms; | ||
| transition-delay: 0ms; } | ||
| [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { | ||
| text-transform: none; | ||
| text-align: center; | ||
| font-weight: normal; | ||
| visibility: visible; | ||
| opacity: 1; } | ||
| [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { | ||
| -webkit-transition-delay: 100ms; | ||
| -moz-transition-delay: 100ms; | ||
| transition-delay: 100ms; } | ||
| [class*="hint--"]:before { | ||
| content: ''; | ||
| position: absolute; | ||
| background: transparent; | ||
| border: 6px solid transparent; | ||
| z-index: 1000001; } | ||
| [class*="hint--"]:after { | ||
| background: #383838; | ||
| color: white; | ||
| padding: 8px 10px; | ||
| font-size: 12px; | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| line-height: 12px; | ||
| white-space: nowrap; } | ||
| [class*="hint--"][aria-label]:after { | ||
| content: attr(aria-label); } | ||
| [class*="hint--"][data-hint]:after { | ||
| content: attr(data-hint); } | ||
| [aria-label='']:before, [aria-label='']:after, | ||
| [data-hint='']:before, | ||
| [data-hint='']:after { | ||
| display: none !important; } | ||
| /** | ||
| * source: hint-position.scss | ||
| * | ||
| * Defines the positoning logic for the tooltips. | ||
| * | ||
| * Classes added: | ||
| * 1) hint--top | ||
| * 2) hint--bottom | ||
| * 3) hint--left | ||
| * 4) hint--right | ||
| */ | ||
| /** | ||
| * set default color for tooltip arrows | ||
| */ | ||
| .hint--top-left:before { | ||
| border-top-color: #383838; } | ||
| .hint--top-right:before { | ||
| border-top-color: #383838; } | ||
| .hint--top:before { | ||
| border-top-color: #383838; } | ||
| .hint--bottom-left:before { | ||
| border-bottom-color: #383838; } | ||
| .hint--bottom-right:before { | ||
| border-bottom-color: #383838; } | ||
| .hint--bottom:before { | ||
| border-bottom-color: #383838; } | ||
| .hint--left:before { | ||
| border-left-color: #383838; } | ||
| .hint--right:before { | ||
| border-right-color: #383838; } | ||
| /** | ||
| * top tooltip | ||
| */ | ||
| .hint--top:before { | ||
| margin-bottom: -11px; } | ||
| .hint--top:before, .hint--top:after { | ||
| bottom: 100%; | ||
| left: 50%; } | ||
| .hint--top:before { | ||
| left: calc(50% - 6px); } | ||
| .hint--top:after { | ||
| -webkit-transform: translateX(-50%); | ||
| -moz-transform: translateX(-50%); | ||
| transform: translateX(-50%); } | ||
| .hint--top:hover:before { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| .hint--top:hover:after { | ||
| -webkit-transform: translateX(-50%) translateY(-8px); | ||
| -moz-transform: translateX(-50%) translateY(-8px); | ||
| transform: translateX(-50%) translateY(-8px); } | ||
| /** | ||
| * bottom tooltip | ||
| */ | ||
| .hint--bottom:before { | ||
| margin-top: -11px; } | ||
| .hint--bottom:before, .hint--bottom:after { | ||
| top: 100%; | ||
| left: 50%; } | ||
| .hint--bottom:before { | ||
| left: calc(50% - 6px); } | ||
| .hint--bottom:after { | ||
| -webkit-transform: translateX(-50%); | ||
| -moz-transform: translateX(-50%); | ||
| transform: translateX(-50%); } | ||
| .hint--bottom:hover:before { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| .hint--bottom:hover:after { | ||
| -webkit-transform: translateX(-50%) translateY(8px); | ||
| -moz-transform: translateX(-50%) translateY(8px); | ||
| transform: translateX(-50%) translateY(8px); } | ||
| /** | ||
| * right tooltip | ||
| */ | ||
| .hint--right:before { | ||
| margin-left: -11px; | ||
| margin-bottom: -6px; } | ||
| .hint--right:after { | ||
| margin-bottom: -14px; } | ||
| .hint--right:before, .hint--right:after { | ||
| left: 100%; | ||
| bottom: 50%; } | ||
| .hint--right:hover:before { | ||
| -webkit-transform: translateX(8px); | ||
| -moz-transform: translateX(8px); | ||
| transform: translateX(8px); } | ||
| .hint--right:hover:after { | ||
| -webkit-transform: translateX(8px); | ||
| -moz-transform: translateX(8px); | ||
| transform: translateX(8px); } | ||
| /** | ||
| * left tooltip | ||
| */ | ||
| .hint--left:before { | ||
| margin-right: -11px; | ||
| margin-bottom: -6px; } | ||
| .hint--left:after { | ||
| margin-bottom: -14px; } | ||
| .hint--left:before, .hint--left:after { | ||
| right: 100%; | ||
| bottom: 50%; } | ||
| .hint--left:hover:before { | ||
| -webkit-transform: translateX(-8px); | ||
| -moz-transform: translateX(-8px); | ||
| transform: translateX(-8px); } | ||
| .hint--left:hover:after { | ||
| -webkit-transform: translateX(-8px); | ||
| -moz-transform: translateX(-8px); | ||
| transform: translateX(-8px); } | ||
| /** | ||
| * top-left tooltip | ||
| */ | ||
| .hint--top-left:before { | ||
| margin-bottom: -11px; } | ||
| .hint--top-left:before, .hint--top-left:after { | ||
| bottom: 100%; | ||
| left: 50%; } | ||
| .hint--top-left:before { | ||
| left: calc(50% - 6px); } | ||
| .hint--top-left:after { | ||
| -webkit-transform: translateX(-100%); | ||
| -moz-transform: translateX(-100%); | ||
| transform: translateX(-100%); } | ||
| .hint--top-left:after { | ||
| margin-left: 12px; } | ||
| .hint--top-left:hover:before { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| .hint--top-left:hover:after { | ||
| -webkit-transform: translateX(-100%) translateY(-8px); | ||
| -moz-transform: translateX(-100%) translateY(-8px); | ||
| transform: translateX(-100%) translateY(-8px); } | ||
| /** | ||
| * top-right tooltip | ||
| */ | ||
| .hint--top-right:before { | ||
| margin-bottom: -11px; } | ||
| .hint--top-right:before, .hint--top-right:after { | ||
| bottom: 100%; | ||
| left: 50%; } | ||
| .hint--top-right:before { | ||
| left: calc(50% - 6px); } | ||
| .hint--top-right:after { | ||
| -webkit-transform: translateX(0); | ||
| -moz-transform: translateX(0); | ||
| transform: translateX(0); } | ||
| .hint--top-right:after { | ||
| margin-left: -12px; } | ||
| .hint--top-right:hover:before { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| .hint--top-right:hover:after { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| /** | ||
| * bottom-left tooltip | ||
| */ | ||
| .hint--bottom-left:before { | ||
| margin-top: -11px; } | ||
| .hint--bottom-left:before, .hint--bottom-left:after { | ||
| top: 100%; | ||
| left: 50%; } | ||
| .hint--bottom-left:before { | ||
| left: calc(50% - 6px); } | ||
| .hint--bottom-left:after { | ||
| -webkit-transform: translateX(-100%); | ||
| -moz-transform: translateX(-100%); | ||
| transform: translateX(-100%); } | ||
| .hint--bottom-left:after { | ||
| margin-left: 12px; } | ||
| .hint--bottom-left:hover:before { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| .hint--bottom-left:hover:after { | ||
| -webkit-transform: translateX(-100%) translateY(8px); | ||
| -moz-transform: translateX(-100%) translateY(8px); | ||
| transform: translateX(-100%) translateY(8px); } | ||
| /** | ||
| * bottom-right tooltip | ||
| */ | ||
| .hint--bottom-right:before { | ||
| margin-top: -11px; } | ||
| .hint--bottom-right:before, .hint--bottom-right:after { | ||
| top: 100%; | ||
| left: 50%; } | ||
| .hint--bottom-right:before { | ||
| left: calc(50% - 6px); } | ||
| .hint--bottom-right:after { | ||
| -webkit-transform: translateX(0); | ||
| -moz-transform: translateX(0); | ||
| transform: translateX(0); } | ||
| .hint--bottom-right:after { | ||
| margin-left: -12px; } | ||
| .hint--bottom-right:hover:before { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| .hint--bottom-right:hover:after { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| /** | ||
| * source: hint-sizes.scss | ||
| * | ||
| * Defines width restricted tooltips that can span | ||
| * across multiple lines. | ||
| * | ||
| * Classes added: | ||
| * 1) hint--small | ||
| * 2) hint--medium | ||
| * 3) hint--large | ||
| * | ||
| */ | ||
| .hint--small:after, | ||
| .hint--medium:after, | ||
| .hint--large:after { | ||
| white-space: normal; | ||
| line-height: 1.4em; } | ||
| .hint--small:after { | ||
| width: 80px; } | ||
| .hint--medium:after { | ||
| width: 150px; } | ||
| .hint--large:after { | ||
| width: 300px; } | ||
| /** | ||
| * source: hint-theme.scss | ||
| * | ||
| * Defines basic theme for tooltips. | ||
| * | ||
| */ | ||
| [class*="hint--"] { | ||
| /** | ||
| * tooltip body | ||
| */ } | ||
| [class*="hint--"]:after { | ||
| text-shadow: 0 -1px 0px black; | ||
| box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } | ||
| /** | ||
| * source: hint-color-types.scss | ||
| * | ||
| * Contains tooltips of various types based on color differences. | ||
| * | ||
| * Classes added: | ||
| * 1) hint--error | ||
| * 2) hint--warning | ||
| * 3) hint--info | ||
| * 4) hint--success | ||
| * | ||
| */ | ||
| /** | ||
| * Error | ||
| */ | ||
| .hint--error:after { | ||
| background-color: #b34e4d; | ||
| text-shadow: 0 -1px 0px #592726; } | ||
| .hint--error.hint--top-left:before { | ||
| border-top-color: #b34e4d; } | ||
| .hint--error.hint--top-right:before { | ||
| border-top-color: #b34e4d; } | ||
| .hint--error.hint--top:before { | ||
| border-top-color: #b34e4d; } | ||
| .hint--error.hint--bottom-left:before { | ||
| border-bottom-color: #b34e4d; } | ||
| .hint--error.hint--bottom-right:before { | ||
| border-bottom-color: #b34e4d; } | ||
| .hint--error.hint--bottom:before { | ||
| border-bottom-color: #b34e4d; } | ||
| .hint--error.hint--left:before { | ||
| border-left-color: #b34e4d; } | ||
| .hint--error.hint--right:before { | ||
| border-right-color: #b34e4d; } | ||
| /** | ||
| * Warning | ||
| */ | ||
| .hint--warning:after { | ||
| background-color: #c09854; | ||
| text-shadow: 0 -1px 0px #6c5328; } | ||
| .hint--warning.hint--top-left:before { | ||
| border-top-color: #c09854; } | ||
| .hint--warning.hint--top-right:before { | ||
| border-top-color: #c09854; } | ||
| .hint--warning.hint--top:before { | ||
| border-top-color: #c09854; } | ||
| .hint--warning.hint--bottom-left:before { | ||
| border-bottom-color: #c09854; } | ||
| .hint--warning.hint--bottom-right:before { | ||
| border-bottom-color: #c09854; } | ||
| .hint--warning.hint--bottom:before { | ||
| border-bottom-color: #c09854; } | ||
| .hint--warning.hint--left:before { | ||
| border-left-color: #c09854; } | ||
| .hint--warning.hint--right:before { | ||
| border-right-color: #c09854; } | ||
| /** | ||
| * Info | ||
| */ | ||
| .hint--info:after { | ||
| background-color: #3986ac; | ||
| text-shadow: 0 -1px 0px #1a3c4d; } | ||
| .hint--info.hint--top-left:before { | ||
| border-top-color: #3986ac; } | ||
| .hint--info.hint--top-right:before { | ||
| border-top-color: #3986ac; } | ||
| .hint--info.hint--top:before { | ||
| border-top-color: #3986ac; } | ||
| .hint--info.hint--bottom-left:before { | ||
| border-bottom-color: #3986ac; } | ||
| .hint--info.hint--bottom-right:before { | ||
| border-bottom-color: #3986ac; } | ||
| .hint--info.hint--bottom:before { | ||
| border-bottom-color: #3986ac; } | ||
| .hint--info.hint--left:before { | ||
| border-left-color: #3986ac; } | ||
| .hint--info.hint--right:before { | ||
| border-right-color: #3986ac; } | ||
| /** | ||
| * Success | ||
| */ | ||
| .hint--success:after { | ||
| background-color: #458746; | ||
| text-shadow: 0 -1px 0px #1a321a; } | ||
| .hint--success.hint--top-left:before { | ||
| border-top-color: #458746; } | ||
| .hint--success.hint--top-right:before { | ||
| border-top-color: #458746; } | ||
| .hint--success.hint--top:before { | ||
| border-top-color: #458746; } | ||
| .hint--success.hint--bottom-left:before { | ||
| border-bottom-color: #458746; } | ||
| .hint--success.hint--bottom-right:before { | ||
| border-bottom-color: #458746; } | ||
| .hint--success.hint--bottom:before { | ||
| border-bottom-color: #458746; } | ||
| .hint--success.hint--left:before { | ||
| border-left-color: #458746; } | ||
| .hint--success.hint--right:before { | ||
| border-right-color: #458746; } | ||
| /** | ||
| * source: hint-always.scss | ||
| * | ||
| * Defines a persisted tooltip which shows always. | ||
| * | ||
| * Classes added: | ||
| * 1) hint--always | ||
| * | ||
| */ | ||
| .hint--always:after, .hint--always:before { | ||
| opacity: 1; | ||
| visibility: visible; } | ||
| .hint--always.hint--top:before { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| .hint--always.hint--top:after { | ||
| -webkit-transform: translateX(-50%) translateY(-8px); | ||
| -moz-transform: translateX(-50%) translateY(-8px); | ||
| transform: translateX(-50%) translateY(-8px); } | ||
| .hint--always.hint--top-left:before { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| .hint--always.hint--top-left:after { | ||
| -webkit-transform: translateX(-100%) translateY(-8px); | ||
| -moz-transform: translateX(-100%) translateY(-8px); | ||
| transform: translateX(-100%) translateY(-8px); } | ||
| .hint--always.hint--top-right:before { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| .hint--always.hint--top-right:after { | ||
| -webkit-transform: translateY(-8px); | ||
| -moz-transform: translateY(-8px); | ||
| transform: translateY(-8px); } | ||
| .hint--always.hint--bottom:before { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| .hint--always.hint--bottom:after { | ||
| -webkit-transform: translateX(-50%) translateY(8px); | ||
| -moz-transform: translateX(-50%) translateY(8px); | ||
| transform: translateX(-50%) translateY(8px); } | ||
| .hint--always.hint--bottom-left:before { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| .hint--always.hint--bottom-left:after { | ||
| -webkit-transform: translateX(-100%) translateY(8px); | ||
| -moz-transform: translateX(-100%) translateY(8px); | ||
| transform: translateX(-100%) translateY(8px); } | ||
| .hint--always.hint--bottom-right:before { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| .hint--always.hint--bottom-right:after { | ||
| -webkit-transform: translateY(8px); | ||
| -moz-transform: translateY(8px); | ||
| transform: translateY(8px); } | ||
| .hint--always.hint--left:before { | ||
| -webkit-transform: translateX(-8px); | ||
| -moz-transform: translateX(-8px); | ||
| transform: translateX(-8px); } | ||
| .hint--always.hint--left:after { | ||
| -webkit-transform: translateX(-8px); | ||
| -moz-transform: translateX(-8px); | ||
| transform: translateX(-8px); } | ||
| .hint--always.hint--right:before { | ||
| -webkit-transform: translateX(8px); | ||
| -moz-transform: translateX(8px); | ||
| transform: translateX(8px); } | ||
| .hint--always.hint--right:after { | ||
| -webkit-transform: translateX(8px); | ||
| -moz-transform: translateX(8px); | ||
| transform: translateX(8px); } | ||
| /** | ||
| * source: hint-rounded.scss | ||
| * | ||
| * Defines rounded corner tooltips. | ||
| * | ||
| * Classes added: | ||
| * 1) hint--rounded | ||
| * | ||
| */ | ||
| .hint--rounded:after { | ||
| border-radius: 4px; } | ||
| /** | ||
| * source: hint-effects.scss | ||
| * | ||
| * Defines various transition effects for the tooltips. | ||
| * | ||
| * Classes added: | ||
| * 1) hint--no-animate | ||
| * 2) hint--bounce | ||
| * | ||
| */ | ||
| .hint--no-animate:before, .hint--no-animate:after { | ||
| -webkit-transition-duration: 0ms; | ||
| -moz-transition-duration: 0ms; | ||
| transition-duration: 0ms; } | ||
| .hint--bounce:before, .hint--bounce:after { | ||
| -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); | ||
| -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); | ||
| transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } |
| /* History Square */ | ||
| .colors-history-square { | ||
| width: 15px; | ||
| height: 15px; | ||
| font-size: 1px; | ||
| } | ||
| /* Label on left side of color box */ | ||
| .ed-color-box-label { | ||
| position: absolute; | ||
| left: 50%; | ||
| margin-left: 5.5rem; | ||
| top: 2.5rem; | ||
| width: 5rem; | ||
| transform: rotate(-90deg); | ||
| } | ||
| .ed-color-box { | ||
| width: 8rem; | ||
| } | ||
| /* Label on left side of color box - new color */ | ||
| #box-new-label { | ||
| top: 8.5rem; | ||
| } | ||
| #tab-ed-link, | ||
| span.ed-tab-in { | ||
| display: none; | ||
| } | ||
| #tab-ed-active { | ||
| display: inline-block; | ||
| } | ||
| .color-picker { | ||
| position: static; | ||
| } | ||
| .color-picker-control { | ||
| width: 175px; | ||
| height: 150px; | ||
| border: 0px; | ||
| box-shadow: none; | ||
| } | ||
| .color-picker-h { | ||
| width: 19px; | ||
| border: 0px; | ||
| box-shadow: none; | ||
| } | ||
| #colorpicker-input { | ||
| width: 6em; | ||
| } |
| var EDROPPER_VERSION = 11; | ||
| const CANVAS_MAX_SIZE = 32767 - 20 | ||
| const DEBUG = false | ||
| export var page = { | ||
| width: $(document).width(), | ||
| height: $(document).height(), | ||
| imageData: null, | ||
| canvasBorders: 20, | ||
| canvasData: null, | ||
| dropperActivated: false, | ||
| screenWidth: 0, | ||
| screenHeight: 0, | ||
| options: { | ||
| cursor: 'default', | ||
| enableColorToolbox: true, | ||
| enableColorTooltip: true, | ||
| enableRightClickDeactivate: true | ||
| }, | ||
| defaults: function() { | ||
| page.canvas = document.createElement("canvas"); | ||
| page.rects = []; | ||
| page.screenshoting = false; | ||
| }, | ||
| // --------------------------------- | ||
| // MESSAGING | ||
| // --------------------------------- | ||
| messageListener: function() { | ||
| // Listen for pickup activate | ||
| console.log('dropper: page activated'); | ||
| document.addEventListener('click', function(req, sender, sendResponse) { | ||
| page.dropperActivate(); | ||
| switch (req.type) { | ||
| case 'edropper-version': | ||
| sendResponse({ | ||
| version: EDROPPER_VERSION, | ||
| tabid: req.tabid | ||
| }); | ||
| break; | ||
| case 'pickup-activate': | ||
| page.options = req.options; | ||
| page.dropperActivate(); | ||
| break; | ||
| case 'pickup-deactivate': | ||
| page.dropperDeactivate(); | ||
| break; | ||
| case 'update-image': | ||
| console.log('dropper: background send me updated screenshot'); | ||
| page.imageData = req.data; | ||
| page.capture(); | ||
| break; | ||
| } | ||
| }); | ||
| }, | ||
| sendMessage: function(message) { | ||
| console.log(message) | ||
| // chrome.extension.connect().postMessage(message); | ||
| }, | ||
| // --------------------------------- | ||
| // DROPPER CONTROL | ||
| // --------------------------------- | ||
| dropperActivate: function() { | ||
| console.log('here') | ||
| if (page.dropperActivated) | ||
| return; | ||
| // load external css for cursor changes | ||
| // var injectedCss = '<link id="eye-dropper-css-cursor" rel="stylesheet" type="text/css" href="' + chrome.extension.getURL('inject/anchor-cursor-' + page.options.cursor + '.css?0.3.0') + '" /><link id="eye-dropper-css" rel="stylesheet" type="text/css" href="' + chrome.extension.getURL('inject/edropper2.css?0.3.0') + '" />'; | ||
| // if ($("head").length == 0) { // rare cases as i.e. image page | ||
| // $("body").before(injectedCss); | ||
| // } else { | ||
| // $("head").append(injectedCss); | ||
| // } | ||
| // create overlay div | ||
| $("body").before('<div id="eye-dropper-overlay" style="position: absolute; width: ' + page.width + 'px; height: ' + page.height + 'px; opacity: 1; background: none; border: none; z-index: 5000;"></div>'); | ||
| // insert tooltip and toolbox | ||
| var inserted = '' | ||
| if (page.options.enableColorTooltip === true) { | ||
| inserted += '<div id="color-tooltip"> </div>'; | ||
| } | ||
| if (page.options.enableColorToolbox === true) { | ||
| inserted += '<div id="color-toolbox"><div id="color-toolbox-color"></div><div id="color-toolbox-text"></div></div>'; | ||
| } | ||
| $("#eye-dropper-overlay").append(inserted); | ||
| if (page.options.enableColorTooltip === true) { | ||
| page.elColorTooltip = $('#color-tooltip'); | ||
| } | ||
| if (page.options.enableColorToolbox === true) { | ||
| page.elColorToolbox = $('#color-toolbox'); | ||
| page.elColorToolboxColor = $('#color-toolbox-color'); | ||
| page.elColorToolboxText = $('#color-toolbox-text'); | ||
| } | ||
| console.log('dropper: activating page dropper'); | ||
| page.defaults(); | ||
| page.dropperActivated = true; | ||
| page.screenChanged(); | ||
| // set listeners | ||
| $(document).bind('scrollstop', page.onScrollStop); | ||
| document.addEventListener("mousemove", page.onMouseMove, false); | ||
| document.addEventListener("click", page.onMouseClick, false); | ||
| if (page.options.enableRightClickDeactivate === true) { | ||
| document.addEventListener("contextmenu", page.onContextMenu, false); | ||
| } | ||
| // enable keyboard shortcuts | ||
| page.shortcuts(true); | ||
| }, | ||
| dropperDeactivate: function() { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| // disable keyboard shortcuts | ||
| page.shortcuts(false); | ||
| // reset cursor changes | ||
| $("#eye-dropper-overlay").css('cursor', 'default'); | ||
| $("#eye-dropper-css").remove(); | ||
| $("#eye-dropper-css-cursor").remove(); | ||
| page.dropperActivated = false; | ||
| console.log('dropper: deactivating page dropper'); | ||
| document.removeEventListener("mousemove", page.onMouseMove, false); | ||
| document.removeEventListener("click", page.onMouseClick, false); | ||
| if (page.options.enableRightClickDeactivate === true) { | ||
| document.removeEventListener("contextmenu", page.onContextMenu, false); | ||
| } | ||
| $(document).unbind('scrollstop', page.onScrollStop); | ||
| if (page.options.enableColorTooltip === true) { | ||
| page.elColorTooltip.remove(); | ||
| } | ||
| if (page.options.enableColorToolbox === true) { | ||
| page.elColorToolbox.remove(); | ||
| } | ||
| $("#eye-dropper-overlay").remove(); | ||
| }, | ||
| // --------------------------------- | ||
| // EVENT HANDLING | ||
| // --------------------------------- | ||
| onMouseMove: function(e) { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| page.tooltip(e); | ||
| }, | ||
| onMouseClick: function(e) { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| e.preventDefault(); | ||
| console.log('mouse clicke=============', e) | ||
| page.dropperDeactivate(); | ||
| page.sendMessage({ | ||
| type: "set-color", | ||
| color: page.pickColor(e) | ||
| }); | ||
| }, | ||
| onScrollStop: function() { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| console.log("dropper: Scroll stop"); | ||
| page.screenChanged(); | ||
| }, | ||
| onScrollStart: function() { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| }, | ||
| // keyboard shortcuts | ||
| // enable with argument as true, disable with false | ||
| shortcuts: function(start) { | ||
| // enable shortcuts | ||
| if (start == true) { | ||
| shortcut.add('Esc', function(evt) { | ||
| page.dropperDeactivate(); | ||
| }); | ||
| shortcut.add('U', function(evt) { | ||
| page.screenChanged(true); | ||
| }); | ||
| // disable shortcuts | ||
| } else { | ||
| shortcut.remove('U'); | ||
| shortcut.remove('Esc'); | ||
| } | ||
| }, | ||
| // right click | ||
| onContextMenu: function(e) { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| e.preventDefault(); | ||
| page.dropperDeactivate(); | ||
| }, | ||
| // window is resized | ||
| onWindowResize: function(e) { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| console.log('dropper: window resized'); | ||
| // set defaults | ||
| page.defaults(); | ||
| // width and height changed so we have to get new one | ||
| page.width = $(document).width(); | ||
| page.height = $(document).height(); | ||
| //page.screenWidth = window.innerWidth; | ||
| //page.screenHeight = window.innerHeight; | ||
| // also don't forget to set overlay | ||
| $("#eye-dropper-overlay").css('width', page.width).css('height', page.height); | ||
| // call screen chaned | ||
| page.screenChanged(); | ||
| }, | ||
| // --------------------------------- | ||
| // MISC | ||
| // --------------------------------- | ||
| tooltip: function(e) { | ||
| if (!page.dropperActivated || page.screenshoting) | ||
| return; | ||
| var color = page.pickColor(e); | ||
| var fromTop = -15; | ||
| var fromLeft = 10; | ||
| if ((e.pageX - page.XOffset) > page.screenWidth / 2) | ||
| fromLeft = -20; | ||
| if ((e.pageY - page.YOffset) < page.screenHeight / 2) | ||
| fromTop = 15; | ||
| // set tooltip | ||
| if (page.options.enableColorTooltip === true) { | ||
| page.elColorTooltip.css({ | ||
| 'background-color': '#' + color.rgbhex, | ||
| 'top': e.pageY + fromTop, | ||
| 'left': e.pageX + fromLeft, | ||
| 'border-color': '#' + color.opposite | ||
| }).show(); | ||
| } | ||
| // set toolbox | ||
| if (page.options.enableColorToolbox === true) { | ||
| page.elColorToolboxColor.css({ | ||
| 'background-color': '#' + color.rgbhex | ||
| }); | ||
| page.elColorToolboxText.html('#' + color.rgbhex + '<br />rgb(' + color.r + ',' + color.g + ',' + color.b + ')'); | ||
| page.elColorToolbox.show(); | ||
| } | ||
| }, | ||
| // return true if rectangle A is whole in rectangle B | ||
| rectInRect: function(A, B) { | ||
| if (A.x >= B.x && A.y >= B.y && (A.x + A.width) <= (B.x + B.width) && (A.y + A.height) <= (B.y + B.height)) | ||
| return true; | ||
| else | ||
| return false; | ||
| }, | ||
| // found out if two points and length overlaps | ||
| // and merge it if needed. Helper method for | ||
| // rectMerge | ||
| rectMergeGeneric: function(a1, a2, length) { | ||
| // switch them if a2 is above a1 | ||
| if (a2 < a1) { | ||
| tmp = a2; | ||
| a2 = a1; | ||
| a1 = tmp; | ||
| } | ||
| // shapes are overlaping | ||
| if (a2 <= a1 + length) | ||
| return { | ||
| a: a1, | ||
| length: (a2 - a1) + length | ||
| }; | ||
| else | ||
| return false; | ||
| }, | ||
| // merge same x or y positioned rectangles if overlaps | ||
| // width (or height) of B has to be equal to A | ||
| rectMerge: function(A, B) { | ||
| var t; | ||
| // same x position and same width | ||
| if (A.x == B.x && A.width == B.width) { | ||
| t = page.rectMergeGeneric(A.y, B.y, A.height); | ||
| if (t != false) { | ||
| A.y = t.a; | ||
| A.height = length; | ||
| return A; | ||
| } | ||
| // same y position and same height | ||
| } else if (A.y == B.y && A.height == B.height) { | ||
| t = page.rectMergeGeneric(A.x, B.x, A.width); | ||
| if (t != false) { | ||
| A.x = t.a; | ||
| A.width = length; | ||
| return A; | ||
| } | ||
| } | ||
| return false; | ||
| }, | ||
| // --------------------------------- | ||
| // COLORS | ||
| // --------------------------------- | ||
| pickColor: function(e) { | ||
| console.log(e, page.canvasData, '!!!!!!!!!!!!!!!!') | ||
| if (page.canvasData === null) | ||
| return; | ||
| var canvasIndex = (e.pageX + e.pageY * page.canvas.width) * 4; | ||
| ////console.log(e.pageX + ' ' + e.pageY + ' ' + page.canvas.width); | ||
| var color = { | ||
| r: page.canvasData[canvasIndex], | ||
| g: page.canvasData[canvasIndex + 1], | ||
| b: page.canvasData[canvasIndex + 2], | ||
| alpha: page.canvasData[canvasIndex + 3] | ||
| }; | ||
| color.rgbhex = page.rgbToHex(color.r, color.g, color.b); | ||
| ////console.log(color.rgbhex); | ||
| color.opposite = page.rgbToHex(255 - color.r, 255 - color.g, 255 - color.b); | ||
| return color; | ||
| }, | ||
| // i: color channel value, integer 0-255 | ||
| // returns two character string hex representation of a color channel (00-FF) | ||
| toHex: function(i) { | ||
| if (i === undefined) return 'FF'; // TODO this shouldn't happen; looks like offset/x/y might be off by one | ||
| var str = i.toString(16); | ||
| while (str.length < 2) { | ||
| str = '0' + str; | ||
| } | ||
| return str; | ||
| }, | ||
| // r,g,b: color channel value, integer 0-255 | ||
| // returns six character string hex representation of a color | ||
| rgbToHex: function(r, g, b) { | ||
| return page.toHex(r) + page.toHex(g) + page.toHex(b); | ||
| }, | ||
| // --------------------------------- | ||
| // UPDATING SCREEN | ||
| // --------------------------------- | ||
| checkCanvas: function() { | ||
| // we have to create new canvas element | ||
| if (page.canvas.width != (page.width + page.canvasBorders) || page.canvas.height != (page.height + page.canvasBorders)) { | ||
| console.log('dropper: creating new canvas'); | ||
| page.canvas = document.createElement('canvas'); | ||
| page.canvas.width = page.width + page.canvasBorders; | ||
| page.canvas.height = page.height + page.canvasBorders; | ||
| page.canvasContext = page.canvas.getContext('2d'); | ||
| page.canvasContext.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio); | ||
| page.rects = []; | ||
| } | ||
| }, | ||
| screenChanged: function(force) { | ||
| if (!page.dropperActivated) | ||
| return; | ||
| console.log("dropper: screenChanged"); | ||
| page.YOffset = $(document).scrollTop(); | ||
| page.XOffset = $(document).scrollLeft(); | ||
| var rect = { | ||
| x: page.XOffset, | ||
| y: page.YOffset, | ||
| width: page.screenWidth, | ||
| height: page.screenHeight | ||
| }; | ||
| // don't screenshot if we already have this one | ||
| if (!force && page.rects.length > 0) { | ||
| for (index in page.rects) { | ||
| if (page.rectInRect(rect, page.rects[index])) { | ||
| console.log('dropper: already shoted, skipping'); | ||
| return; | ||
| } | ||
| } | ||
| } | ||
| page.screenshoting = true; | ||
| $("#eye-dropper-overlay").css('cursor', 'progress') | ||
| console.log('dropper: screenshoting'); | ||
| // TODO: this is terrible. It have to be done better way | ||
| if (page.options.enableColorTooltip === true && page.options.enableColorToolbox === true) { | ||
| page.elColorTooltip.hide(1, function() { | ||
| page.elColorToolbox.hide(1, function() { | ||
| page.sendMessage({ | ||
| type: 'screenshot' | ||
| }, function() {}); | ||
| }); | ||
| }); | ||
| } else if (page.options.enableColorTooltip === true) { | ||
| page.elColorTooltip.hide(1, function() { | ||
| page.sendMessage({ | ||
| type: 'screenshot' | ||
| }, function() {}); | ||
| }); | ||
| } else if (page.options.enableColorToolbox === true) { | ||
| page.elColorToolbox.hide(1, function() { | ||
| page.sendMessage({ | ||
| type: 'screenshot' | ||
| }, function() {}); | ||
| }); | ||
| } else { | ||
| page.sendMessage({ | ||
| type: 'screenshot' | ||
| }, function() {}); | ||
| } | ||
| }, | ||
| // capture actual Screenshot | ||
| capture: function() { | ||
| page.checkCanvas(); | ||
| ////console.log(page.rects); | ||
| // var image = new Image(); | ||
| var image = document.createElement('img'); | ||
| image.onload = function() { | ||
| page.screenWidth = image.width; | ||
| page.screenHeight = image.height; | ||
| var rect = { | ||
| x: page.XOffset, | ||
| y: page.YOffset, | ||
| width: image.width, | ||
| height: image.height | ||
| }; | ||
| var merged = false; | ||
| // if there are already any rectangles | ||
| if (page.rects.length > 0) { | ||
| // try to merge shot with others | ||
| for (index in page.rects) { | ||
| var t = page.rectMerge(rect, page.rects[index]); | ||
| if (t != false) { | ||
| console.log('dropper: merging'); | ||
| merged = true; | ||
| page.rects[index] = t; | ||
| } | ||
| } | ||
| } | ||
| // put rectangle in array | ||
| if (merged == false) | ||
| page.rects.push(rect); | ||
| page.canvasContext.drawImage(image, page.XOffset, page.YOffset); | ||
| page.canvasData = page.canvasContext.getImageData(0, 0, page.canvas.width, page.canvas.height).data; | ||
| // TODO - je nutne refreshnout ctverecek a nastavit mu spravnou barvu | ||
| page.screenshoting = false; | ||
| $("#eye-dropper-overlay").css('cursor', page.options.cursor); | ||
| // re-enable tooltip and toolbox | ||
| if (page.options.enableColorTooltip === true) { | ||
| page.elColorTooltip.show(1); | ||
| } | ||
| if (page.options.enableColorToolbox === true) { | ||
| page.elColorToolbox.show(1); | ||
| } | ||
| if ( DEBUG ) { | ||
| page.sendMessage({type: 'debug-tab', image: page.canvas.toDataURL()}, function() {}); | ||
| debugger | ||
| } | ||
| } | ||
| if (page.imageData) { | ||
| image.src = page.imageData; | ||
| } else { | ||
| console.error('ed: no imageData'); | ||
| } | ||
| }, | ||
| init: function() { | ||
| page.messageListener(); | ||
| if ( page.width > CANVAS_MAX_SIZE ) { | ||
| page.width = CANVAS_MAX_SIZE | ||
| } | ||
| if ( page.height > CANVAS_MAX_SIZE ) { | ||
| page.height = CANVAS_MAX_SIZE | ||
| } | ||
| } | ||
| } | ||
| page.init(); | ||
| window.onresize = function() { | ||
| page.onWindowResize(); | ||
| } |
| <div id="tab-about-content" class="content-page tc"> | ||
| <h1 class="black-90">Credits</h1> | ||
| <p><em class="text-muted">Version 0.4.3</em></p> | ||
| <div class="cf"> | ||
| <div class="fl w-50 tc"> | ||
| <h3>Author</h3> | ||
| <div> | ||
| <a class="ed-external link" href="#" data-url="http://kepi.cz/"> | ||
| <img class="dib br-100 br1 v-mid" src="https://secure.gravatar.com/avatar/6ca45309f52bd74be740151ddd470d0c?rating=PG&size=32"> | ||
| <span class="dib ml2">Ondra Kudlík (Kepi)</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="fl w-50 tc"> | ||
| <h3>Thanks for support</h3> | ||
| <div> | ||
| <a class="ed-external link" href="#" data-url="https://igloonet.cz/"> | ||
| <img class="dib v-mid" src="https://brand.igloonet.cz/favicons/igloonet_32x32.png"> | ||
| <span class="dib ml2">igloonet</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <section class="center bg-washed-green w-90 pa3 mt2 ba br2 b--washed-green black-90"> | ||
| <p>Eye Dropper is created and enhanced in my free time. Your donation will encourage me to continue with its development.</p> | ||
| <p>Any amount is greatly appreciated.</p> | ||
| <!-- Begin PayPal Donations --> | ||
| <form id="paypal-donation-footer" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> | ||
| <div class="paypal-donations hint--top hint--no-animate hint--rounded hint--small" aria-label="Want to support my Steam addiction?"><input type="hidden" name="cmd" value="_donations" class="form-control"><input type="hidden" name="business" value="kepi@orthank.net" class="form-control"><input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/" class="form-control"><input type="hidden" name="item_name" value="Eye Dropper" class="form-control"><input type="hidden" name="currency_code" value="USD" class="form-control"><input type="image" class="btn grow" src="/inc/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online."></div> | ||
| </form> | ||
| <!-- End PayPal Donations --> | ||
| </section> | ||
| <h3>Eye Dropper is using these awesome libraries</h3> | ||
| <ul class="list pl0"> | ||
| <li> | ||
| <a class="ed-external link" href="#" data-url="https://github.com/tovic/color-picker">Color Picker</a> by <a class="ed-external link" href="#" data-url="https://github.com/tovic">Taufik Nurrohman (tovic)</a> | ||
| </li> | ||
| <li> | ||
| <a class="ed-external link" href="#" data-url="https://bitbucket.org/bcronin/pusher.color.git">pusher.color.js</a> by PusherTech | ||
| </li> | ||
| <li> | ||
| <a class="ed-external link" href="#" data-url="http://www.jquery.com/">jQuery</a> and plugin <a class="ed-external link" href="#" data-url="https://github.com/ssorallen/jquery-scrollstop">jquery-scrollstop</a> | ||
| </li> | ||
| <li> | ||
| <a class="ed-external link" href="#" data-url="https://github.com/brijeshb42/medium-style-confirm">medium-style-confirm</a> by <a class="ed-external link" href="#" data-url="https://github.com/brijeshb42">Brijesh Bittu (brijeshb42)</a> | ||
| </li> | ||
| </ul> | ||
| </div> |
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script type="text/javascript" src="/src/debug_tab.js"></script> | ||
| <style type="text/css"> | ||
| body { | ||
| border: 0px; | ||
| margin: 0px; | ||
| padding: 0px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <img id="debugImage" /> | ||
| </body> | ||
| </html> |
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="/inc/tachyons.min.css"> | ||
| <link rel="stylesheet" href="/css/hint.css"> | ||
| <link rel="stylesheet" href="/inc/msc/msc-style.css"> | ||
| <link type="text/css" rel="stylesheet" href="/inc/color-picker/color-picker.css"> | ||
| <link rel="stylesheet" href="/css/popup.css"> | ||
| <script src="/inc/pusher.color.min.js"></script> | ||
| <script src="/inc/msc/msc-script.js"></script> | ||
| <script src="/src/popup.js" async></script> | ||
| </head> | ||
| <body class="bg-black-10"> | ||
| <article class="w-100 center bg-white pa2" style="width: 34rem"> | ||
| <section class="cf"> | ||
| <section class="fl w-75"> | ||
| <header class="w-100"> | ||
| <nav class="mb3 pb1"> | ||
| <span class="ed-tab b f6 f5-ns dib mr2 ttu" id="tab-ed"> | ||
| <span id="tab-ed-active" class="ed-tab-in">Eye Dropper</span> | ||
| <a id="tab-ed-link" class="ed-tab-in link blue hint--bottom hint--no-animate hint--rounded hint--small" aria-label="Pick Color from Any Web" href="#"> | ||
| <span class="dim">Eye Dropper</span> | ||
| </a> | ||
| </span> | ||
| <span class="f6 f5-ns mr2 silver">|</span> | ||
| <span class="ed-tab b f6 f5-ns dib mr2 ttu" id="tab-cp"> | ||
| <span id="tab-cp-active" class="ed-tab-in">Color Picker</span> | ||
| <a id="tab-cp-link" class="ed-tab-in link blue hint--bottom hint--no-animate hint--rounded hint--small" aria-label="Want to Mix Your Own?" href="#"> | ||
| <span class="dim">Color Picker</span> | ||
| </a> | ||
| </span> | ||
| </nav> | ||
| </header> | ||
| <section id="content"> | ||
| <div id="tab-ed-content" class="content-page"> | ||
| <div class="bg-yellow w-75 ph3 mt2 ba br1 b--gold" id="pick-message" style="display: none"></div> | ||
| <a class="ba b--black-20 bg-white black-70 link br2 dim b dib mr3 pv2 ph3" id="pick" href="#"> | ||
| <svg class="w1 h1 dib v-mid" viewBox="0 0 1792 1792" style="fill:currentcolor"> | ||
| <use xlink:href="/img/icons.svg#fa-tint"> | ||
| </svg> | ||
| <div class="h1 dib">Pick color from web page</div> | ||
| </a> | ||
| </div> | ||
| </section> | ||
| </section> | ||
| <section class="fr" id="color-boxes"> | ||
| <div id="box-current-label" class="black-40 helvetica b ed-color-box-label">Selected</div> | ||
| <div id="box-current" class="ed-color-box w-100 br2 cf pa2 mb2"> | ||
| </div> | ||
| <div id="box-new-label" class="black-40 helvetica b ed-color-box-label">New</div> | ||
| <div id="box-new" class="ed-color-box w-100 br2 cf pa2"> | ||
| </div> | ||
| </section> | ||
| <section class="cf mt2" id="color-history"> | ||
| <section class="fl w-60"> | ||
| <div class="mt3 cf"> | ||
| <span class="f5 fl">Palette: <span id="palette-name" data-palette="default">default</span></span> | ||
| <div id="colors-history-toolbar" class="fl ml2"> | ||
| <a class="link dib w1 hint--top hint--no-animate hint--rounded" aria-label="Different Palette?" href="#" id="colors-palette-change"> | ||
| <svg class="dim" viewBox="0 0 1792 1792" style="fill:gray;width:14px;"> | ||
| <use xlink:href="/img/icons.svg#fa-th"> | ||
| </svg> | ||
| </a> | ||
| <a class="link dib w1 hint--top hint--no-animate hint--rounded eb-history-tool-noempty" aria-label="Trash Colors in this Palette!" href="#" id="colors-history-clear"> | ||
| <svg class="dim" viewBox="0 0 1792 1792" style="fill:gray;width:16px;"> | ||
| <use xlink:href="/img/icons.svg#fa-trash-o"> | ||
| </svg> | ||
| </a> | ||
| <a class="link dib w1 hint--top hint--no-animate hint--rounded eb-history-tool-noempty" aria-label="Give me CSV" href="#" id="colors-history-export"> | ||
| <svg class="dim" viewBox="0 0 1792 1792" style="fill:gray;width:14px;"> | ||
| <use xlink:href="/img/icons.svg#fa-floppy-o"> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <section id="colors-palette" class="mt1" style="display:none"></section> | ||
| <section id="colors-history" class="cf mt2"></section> | ||
| <p class="i black-80" id="colors-history-instructions"> | ||
| History is empty, try to pick some color first. | ||
| </p> | ||
| </section> | ||
| </section> | ||
| </section> | ||
| </article> | ||
| <section class="mw5 mw7-ns center bg-light-gray cf pa2" style="width: 34rem"> | ||
| <section class="fl"> | ||
| <!-- Begin PayPal Donations --> | ||
| <form id="paypal-donation-footer" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> | ||
| <div class="paypal-donations hint--top hint--no-animate hint--rounded hint--small" aria-label="Want to support my Steam addiction?"><input type="hidden" name="cmd" value="_donations" class="form-control"><input type="hidden" name="business" value="kepi@orthank.net" class="form-control"><input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/" class="form-control"><input type="hidden" name="item_name" value="Eye Dropper" class="form-control"><input type="hidden" name="currency_code" value="USD" class="form-control"><input type="image" class="btn grow" src="/inc/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online."></div> | ||
| </form> | ||
| </section> | ||
| <section class="fr"> | ||
| <a href="#" data-url="http://eye-dropper.kepi.cz/" class="ed-external link gray dib h1 w1 bg-near-white ba b--black-10 br-100 pa1 mr1 hint--top hint--no-animate hint--rounded" aria-label="It's Bigger On the Inside"> | ||
| <svg class="dim" viewBox="0 0 1792 1792" style="fill:currentcolor"> | ||
| <use xlink:href="/img/icons.svg#fa-home"> | ||
| </svg> | ||
| </a> | ||
| <a href="#" id="button-about" aria-label="Thats My Bio..." class="ed-tab link gray dib h1 w1 bg-near-white ba b--black-10 br-100 pa1 mr1 hint--top hint--no-animate hint--rounded"> | ||
| <svg class="dim" viewBox="0 0 1792 1792" style="fill:currentcolor"> | ||
| <use xlink:href="/img/icons.svg#fa-question-circle"> | ||
| </svg> | ||
| </a> | ||
| <a href="#" data-url="https://github.com/kepi/chromeEyeDropper/issues" aria-label="Found a Bug? Have an Idea?" id="button-bug" class="ed-external link gray dib h1 w1 bg-near-white ba b--black-10 br-100 pa1 mr1 hint--top hint--no-animate hint--rounded hint--small"> | ||
| <svg class="dim" viewBox="0 0 1792 1792" style="fill:currentcolor"> | ||
| <use xlink:href="/img/icons.svg#fa-bug"> | ||
| </svg> | ||
| </a> | ||
| <a href="#" data-url="/options.html" aria-label="Too Many Options" class="ed-external link gray dib h1 w1 bg-near-white ba b--black-10 br-100 pa1 mr1 hint--left hint--no-animate hint--rounded hint--small"> | ||
| <svg class="dim" viewBox="0 0 1792 1792" style="fill:currentcolor"> | ||
| <use xlink:href="/img/icons.svg#fa-cog"> | ||
| </svg> | ||
| </a> | ||
| </section> | ||
| </section> | ||
| </body> | ||
| </html> |
| <div id="tab-cp-content" class="content-page fc" style="height: 160px;"> | ||
| <div class="fc"> | ||
| <div class="fl w-50" id="colorpicker"> | ||
| </div> | ||
| <div class="fr w-50"> | ||
| <button id="colorpicker-select" type="button">Select →</button> | ||
| <input id="colorpicker-input" class="db mt1" value=""> | ||
| </div> | ||
| </div> | ||
| </div> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
| <svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;"> | ||
| <path id="fa-ban" d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z"/> | ||
| <path id="fa-bug" d="M1696 960q0 26-19 45t-45 19h-224q0 171-67 290l208 209q19 19 19 45t-19 45q-18 19-45 19t-45-19l-198-197q-5 5-15 13t-42 28.5-65 36.5-82 29-97 13v-896h-128v896q-51 0-101.5-13.5t-87-33-66-39-43.5-32.5l-15-14-183 207q-20 21-48 21-24 0-43-16-19-18-20.5-44.5t15.5-46.5l202-227q-58-114-58-274h-224q-26 0-45-19t-19-45 19-45 45-19h224v-294l-173-173q-19-19-19-45t19-45 45-19 45 19l173 173h844l173-173q19-19 45-19t45 19 19 45-19 45l-173 173v294h224q26 0 45 19t19 45zm-480-576h-640q0-133 93.5-226.5t226.5-93.5 226.5 93.5 93.5 226.5z"/> | ||
| <path id="fa-cog" d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"/> | ||
| <path id="fa-floppy-o" d="M512 1536h768v-384h-768v384zm896 0h128v-896q0-14-10-38.5t-20-34.5l-281-281q-10-10-34-20t-39-10v416q0 40-28 68t-68 28h-576q-40 0-68-28t-28-68v-416h-128v1280h128v-416q0-40 28-68t68-28h832q40 0 68 28t28 68v416zm-384-928v-320q0-13-9.5-22.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 22.5v320q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5zm640 32v928q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h928q40 0 88 20t76 48l280 280q28 28 48 76t20 88z"/> | ||
| <path id="fa-home" d="M1472 992v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z"/> | ||
| <path id="fa-question-circle" d="M1024 1376v-192q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v192q0 14 9 23t23 9h192q14 0 23-9t9-23zm256-672q0-88-55.5-163t-138.5-116-170-41q-243 0-371 213-15 24 8 42l132 100q7 6 19 6 16 0 25-12 53-68 86-92 34-24 86-24 48 0 85.5 26t37.5 59q0 38-20 61t-68 45q-63 28-115.5 86.5t-52.5 125.5v36q0 14 9 23t23 9h192q14 0 23-9t9-23q0-19 21.5-49.5t54.5-49.5q32-18 49-28.5t46-35 44.5-48 28-60.5 12.5-81zm384 192q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/> | ||
| <path id="fa-th" d="M512 1248v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm0-512v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm640 512v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm-640-1024v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm640 512v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm640 512v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm-640-1024v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm640 512v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68zm0-512v192q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h320q40 0 68 28t28 68z"/> | ||
| <path id="fa-tint" d="M896 1152q0-36-20-69-1-1-15.5-22.5t-25.5-38-25-44-21-50.5q-4-16-21-16t-21 16q-7 23-21 50.5t-25 44-25.5 38-15.5 22.5q-20 33-20 69 0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm512-128q0 212-150 362t-362 150-362-150-150-362q0-145 81-275 6-9 62.5-90.5t101-151 99.5-178 83-201.5q9-30 34-47t51-17 51.5 17 33.5 47q28 93 83 201.5t99.5 178 101 151 62.5 90.5q81 127 81 275z"/> | ||
| <path id="fa-trash-o" d="M704 736v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm128 724v-948h-896v948q0 22 7 40.5t14.5 27 10.5 8.5h832q3 0 10.5-8.5t14.5-27 7-40.5zm-672-1076h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z"/> | ||
| </svg> |
| /*! | ||
| * Bootstrap v3.3.6 (http://getbootstrap.com) | ||
| * Copyright 2011-2015 Twitter, Inc. | ||
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | ||
| */.btn-danger,.btn-default,.btn-info,.btn-primary,.btn-success,.btn-warning{text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.btn-danger.active,.btn-danger:active,.btn-default.active,.btn-default:active,.btn-info.active,.btn-info:active,.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.btn-warning.active,.btn-warning:active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-danger.disabled,.btn-danger[disabled],.btn-default.disabled,.btn-default[disabled],.btn-info.disabled,.btn-info[disabled],.btn-primary.disabled,.btn-primary[disabled],.btn-success.disabled,.btn-success[disabled],.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-danger,fieldset[disabled] .btn-default,fieldset[disabled] .btn-info,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-success,fieldset[disabled] .btn-warning{-webkit-box-shadow:none;box-shadow:none}.btn-danger .badge,.btn-default .badge,.btn-info .badge,.btn-primary .badge,.btn-success .badge,.btn-warning .badge{text-shadow:none}.btn.active,.btn:active{background-image:none}.btn-default{text-shadow:0 1px 0 #fff;background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#dbdbdb;border-color:#ccc}.btn-default:focus,.btn-default:hover{background-color:#e0e0e0;background-position:0 -15px}.btn-default.active,.btn-default:active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#e0e0e0;background-image:none}.btn-primary{background-image:-webkit-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-o-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));background-image:linear-gradient(to bottom,#337ab7 0,#265a88 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#245580}.btn-primary:focus,.btn-primary:hover{background-color:#265a88;background-position:0 -15px}.btn-primary.active,.btn-primary:active{background-color:#265a88;border-color:#245580}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#265a88;background-image:none}.btn-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));background-image:linear-gradient(to bottom,#5cb85c 0,#419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:focus,.btn-success:hover{background-color:#419641;background-position:0 -15px}.btn-success.active,.btn-success:active{background-color:#419641;border-color:#3e8f3e}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#419641;background-image:none}.btn-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#2aabd2));background-image:linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#28a4c9}.btn-info:focus,.btn-info:hover{background-color:#2aabd2;background-position:0 -15px}.btn-info.active,.btn-info:active{background-color:#2aabd2;border-color:#28a4c9}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#2aabd2;background-image:none}.btn-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#eb9316));background-image:linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#e38d13}.btn-warning:focus,.btn-warning:hover{background-color:#eb9316;background-position:0 -15px}.btn-warning.active,.btn-warning:active{background-color:#eb9316;border-color:#e38d13}.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#eb9316;background-image:none}.btn-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c12e2a));background-image:linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#b92c28}.btn-danger:focus,.btn-danger:hover{background-color:#c12e2a;background-position:0 -15px}.btn-danger.active,.btn-danger:active{background-color:#c12e2a;border-color:#b92c28}.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#c12e2a;background-image:none}.img-thumbnail,.thumbnail{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{background-color:#e8e8e8;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{background-color:#2e6da4;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.navbar-default{background-image:-webkit-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-o-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f8f8f8));background-image:linear-gradient(to bottom,#fff 0,#f8f8f8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075)}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-o-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dbdbdb),to(#e2e2e2));background-image:linear-gradient(to bottom,#dbdbdb 0,#e2e2e2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.075);box-shadow:inset 0 3px 9px rgba(0,0,0,.075)}.navbar-brand,.navbar-nav>li>a{text-shadow:0 1px 0 rgba(255,255,255,.25)}.navbar-inverse{background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-o-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-o-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#080808),to(#0f0f0f));background-image:linear-gradient(to bottom,#080808 0,#0f0f0f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.25);box-shadow:inset 0 3px 9px rgba(0,0,0,.25)}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{text-shadow:0 -1px 0 rgba(0,0,0,.25)}.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top{border-radius:0}@media (max-width:767px){.navbar .navbar-nav .open .dropdown-menu>.active>a,.navbar .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}}.alert{text-shadow:0 1px 0 rgba(255,255,255,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05)}.alert-success{background-image:-webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));background-image:linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);background-repeat:repeat-x;border-color:#b2dba1}.alert-info{background-image:-webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#b9def0));background-image:linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);background-repeat:repeat-x;border-color:#9acfea}.alert-warning{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#f8efc0));background-image:linear-gradient(to bottom,#fcf8e3 0,#f8efc0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);background-repeat:repeat-x;border-color:#f5e79e}.alert-danger{background-image:-webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));background-image:linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);background-repeat:repeat-x;border-color:#dca7a7}.progress{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f5f5f5));background-image:linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x}.progress-bar{background-image:-webkit-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-o-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#286090));background-image:linear-gradient(to bottom,#337ab7 0,#286090 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);background-repeat:repeat-x}.progress-bar-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));background-image:linear-gradient(to bottom,#5cb85c 0,#449d44 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);background-repeat:repeat-x}.progress-bar-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#31b0d5));background-image:linear-gradient(to bottom,#5bc0de 0,#31b0d5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);background-repeat:repeat-x}.progress-bar-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#ec971f));background-image:linear-gradient(to bottom,#f0ad4e 0,#ec971f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);background-repeat:repeat-x}.progress-bar-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c9302c));background-image:linear-gradient(to bottom,#d9534f 0,#c9302c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);background-repeat:repeat-x}.progress-bar-striped{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.list-group{border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{text-shadow:0 -1px 0 #286090;background-image:-webkit-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2b669a));background-image:linear-gradient(to bottom,#337ab7 0,#2b669a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);background-repeat:repeat-x;border-color:#2b669a}.list-group-item.active .badge,.list-group-item.active:focus .badge,.list-group-item.active:hover .badge{text-shadow:none}.panel{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}.panel-default>.panel-heading{background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.panel-primary>.panel-heading{background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.panel-success>.panel-heading{background-image:-webkit-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#d0e9c6));background-image:linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);background-repeat:repeat-x}.panel-info>.panel-heading{background-image:-webkit-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#c4e3f3));background-image:linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);background-repeat:repeat-x}.panel-warning>.panel-heading{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#faf2cc));background-image:linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);background-repeat:repeat-x}.panel-danger>.panel-heading{background-image:-webkit-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-o-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#ebcccc));background-image:linear-gradient(to bottom,#f2dede 0,#ebcccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);background-repeat:repeat-x}.well{background-image:-webkit-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#e8e8e8),to(#f5f5f5));background-image:linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x;border-color:#dcdcdc;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)} | ||
| /*# sourceMappingURL=bootstrap-theme.min.css.map */ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
| .color-picker, | ||
| .color-picker *, | ||
| .color-picker *:before, | ||
| .color-picker *:after { | ||
| -webkit-box-sizing:border-box; | ||
| -moz-box-sizing:border-box; | ||
| box-sizing:border-box; | ||
| } | ||
| .color-picker { | ||
| position:absolute; | ||
| top:0; | ||
| left:0; | ||
| z-index:9999; | ||
| } | ||
| .color-picker-control { | ||
| border:1px solid #000; | ||
| -webkit-box-shadow:1px 5px 10px rgba(0,0,0,.5); | ||
| -moz-box-shadow:1px 5px 10px rgba(0,0,0,.5); | ||
| box-shadow:1px 5px 10px rgba(0,0,0,.5); | ||
| } | ||
| .color-picker-control:after { | ||
| content:" "; | ||
| display:table; | ||
| clear:both; | ||
| } | ||
| .color-picker i {font:inherit} | ||
| .color-picker-h { | ||
| position:relative; | ||
| width:20px; | ||
| height:150px; | ||
| float:right; | ||
| border-left:1px solid; | ||
| border-color:inherit; | ||
| cursor:ns-resize; | ||
| background:transparent url('color-picker-h.png') no-repeat 50% 50%; | ||
| background-image:-webkit-linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%); | ||
| background-image:-moz-linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%); | ||
| background-image:linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%); | ||
| -webkit-background-size:100% 100%; | ||
| -moz-background-size:100% 100%; | ||
| background-size:100% 100%; | ||
| overflow:hidden; | ||
| } | ||
| .color-picker-h i { | ||
| position:absolute; | ||
| top:-3px; | ||
| right:0; | ||
| left:0; | ||
| z-index:3; | ||
| display:block; | ||
| height:6px; | ||
| } | ||
| .color-picker-h i:before { | ||
| content:""; | ||
| position:absolute; | ||
| top:0; | ||
| right:0; | ||
| bottom:0; | ||
| left:0; | ||
| display:block; | ||
| border:3px solid; | ||
| border-color:inherit; | ||
| border-top-color:transparent; | ||
| border-bottom-color:transparent; | ||
| } | ||
| .color-picker-h i:after { | ||
| top:-1px; | ||
| right:-1px; | ||
| bottom:-1px; | ||
| left:-1px; | ||
| border-color:#000; | ||
| } | ||
| .color-picker-sv { | ||
| position:relative; | ||
| width:150px; | ||
| height:150px; | ||
| float:left; | ||
| background:transparent url('color-picker-sv.png') no-repeat 50% 50%; | ||
| background-image:-webkit-linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0)); | ||
| background-image:-moz-linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0)); | ||
| background-image:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0)); | ||
| -webkit-background-size:100% 100%; | ||
| -moz-background-size:100% 100%; | ||
| background-size:100% 100%; | ||
| cursor:crosshair; | ||
| } | ||
| .color-picker-sv i { | ||
| position:absolute; | ||
| top:-4px; | ||
| right:-4px; | ||
| z-index:3; | ||
| display:block; | ||
| width:8px; | ||
| height:8px; | ||
| } | ||
| .color-picker-sv i:before, | ||
| .color-picker-sv i:after { | ||
| content:""; | ||
| position:absolute; | ||
| top:-1px; | ||
| right:-1px; | ||
| bottom:-1px; | ||
| left:-1px; | ||
| display:block; | ||
| border:1px solid #fff; | ||
| -webkit-border-radius:100%; | ||
| -moz-border-radius:100%; | ||
| border-radius:100%; | ||
| } | ||
| .color-picker-sv i:after { | ||
| top:0; | ||
| right:0; | ||
| bottom:0; | ||
| left:0; | ||
| border-color:#000; | ||
| } |
| /*! | ||
| * ========================================================== | ||
| * COLOR PICKER PLUGIN 1.0.4 | ||
| * ========================================================== | ||
| * Author: Taufik Nurrohman <http://latitudu.com> | ||
| * License: MIT | ||
| * ---------------------------------------------------------- | ||
| */ | ||
| var CP = function(target) { | ||
| var w = window, | ||
| d = document, | ||
| r = this, | ||
| _ = false, | ||
| hooks = {}, | ||
| picker = d.createElement('div'); | ||
| function isset(x) { | ||
| return typeof x !== "undefined"; | ||
| } | ||
| function edge(a, b, c) { | ||
| if (a < b) return b; | ||
| if (a > c) return c; | ||
| return a; | ||
| } | ||
| // [h, s, v] ... 0 <= h, s, v <= 1 | ||
| function HSV2RGB(a) { | ||
| var h = +a[0], | ||
| s = +a[1], | ||
| v = +a[2], | ||
| r, g, b, i, f, p, q, t; | ||
| i = Math.floor(h * 6); | ||
| f = h * 6 - i; | ||
| p = v * (1 - s); | ||
| q = v * (1 - f * s); | ||
| t = v * (1 - (1 - f) * s); | ||
| if (isNaN(i)) i = 0; | ||
| if (isNaN(q)) q = 0; | ||
| if (isNaN(t)) t = 0; | ||
| switch (i % 6) { | ||
| case 0: | ||
| r = v, g = t, b = p; | ||
| break; | ||
| case 1: | ||
| r = q, g = v, b = p; | ||
| break; | ||
| case 2: | ||
| r = p, g = v, b = t; | ||
| break; | ||
| case 3: | ||
| r = p, g = q, b = v; | ||
| break; | ||
| case 4: | ||
| r = t, g = p, b = v; | ||
| break; | ||
| case 5: | ||
| r = v, g = p, b = q; | ||
| break; | ||
| } | ||
| return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; | ||
| } | ||
| function HSV2HEX(a) { | ||
| return RGB2HEX(HSV2RGB(a)); | ||
| } | ||
| // [r, g, b] ... 0 <= r, g, b <= 255 | ||
| function RGB2HSV(a) { | ||
| var r = +a[0], | ||
| g = +a[1], | ||
| b = +a[2], | ||
| max = Math.max(r, g, b), | ||
| min = Math.min(r, g, b), | ||
| d = max - min, | ||
| h, s = (max === 0 ? 0 : d / max), | ||
| v = max / 255; | ||
| switch (max) { | ||
| case min: | ||
| h = 0; | ||
| break; | ||
| case r: | ||
| h = (g - b) + d * (g < b ? 6 : 0); | ||
| h /= 6 * d; | ||
| break; | ||
| case g: | ||
| h = (b - r) + d * 2; | ||
| h /= 6 * d; | ||
| break; | ||
| case b: | ||
| h = (r - g) + d * 4; | ||
| h /= 6 * d; | ||
| break; | ||
| } | ||
| return [h, s, v]; | ||
| } | ||
| function RGB2HEX(a) { | ||
| var s = +a[2] | (+a[1] << 8) | (+a[0] << 16); | ||
| s = '000000' + s.toString(16); | ||
| return s.slice(-6); | ||
| } | ||
| // rrggbb or rgb | ||
| function HEX2HSV(s) { | ||
| return RGB2HSV(HEX2RGB(s)); | ||
| } | ||
| function HEX2RGB(s) { | ||
| if (s.length === 3) { | ||
| s = s.replace(/./g, '$&$&'); | ||
| } | ||
| return [parseInt(s[0] + s[1], 16), parseInt(s[2] + s[3], 16), parseInt(s[4] + s[5], 16)]; | ||
| } | ||
| // convert range from `0` to `360` and `0` to `100` in color into range from `0` to `1` | ||
| function _2HSV_pri(a) { | ||
| return [+a[0] / 360, +a[1] / 100, +a[2] / 100]; | ||
| } | ||
| // convert range from `0` to `1` into `0` to `360` and `0` to `100` in color | ||
| function _2HSV_pub(a) { | ||
| return [Math.round(+a[0] * 360), Math.round(+a[1] * 100), Math.round(+a[2] * 100)]; | ||
| } | ||
| // * | ||
| r.parse = function(x) { | ||
| if (typeof x === "object") return x; | ||
| var rgb = /\s*rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/i.exec(x), | ||
| hsv = /\s*hsv\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)\s*$/i.exec(x), | ||
| hex = x[0] === '#' && x.match(/^#([\da-f]{3}|[\da-f]{6})$/); | ||
| if (hex) { | ||
| return HEX2HSV(x.slice(1)); | ||
| } else if (hsv) { | ||
| return _2HSV_pri([+hsv[1], +hsv[2], +hsv[3]]); | ||
| } else if (rgb) { | ||
| return RGB2HSV([+rgb[1], +rgb[2], +rgb[3]]); | ||
| } | ||
| return [0, 1, 1]; // default is red | ||
| }; | ||
| // add event | ||
| function on(ev, el, fn) { | ||
| return el.addEventListener(ev, fn, false); | ||
| } | ||
| // remove event | ||
| function off(ev, el, fn) { | ||
| return el.removeEventListener(ev, fn); | ||
| } | ||
| // get mouse/finger coordinate | ||
| function point(el, e) { | ||
| var x = !!e.touches ? e.touches[0].pageX : e.pageX, | ||
| y = !!e.touches ? e.touches[0].pageY : e.pageY, | ||
| left = offset(el).l, | ||
| top = offset(el).t; | ||
| while (el = el.offsetParent) { | ||
| left += offset(el).l; | ||
| top += offset(el).t; | ||
| } | ||
| return { | ||
| x: x - left, | ||
| y: y - top | ||
| }; | ||
| } | ||
| // get position | ||
| function offset(el) { | ||
| return { | ||
| l: el.offsetLeft, | ||
| t: el.offsetTop | ||
| }; | ||
| } | ||
| // get dimension | ||
| function size(el) { | ||
| return { | ||
| w: el.offsetWidth, | ||
| h: el.offsetHeight | ||
| }; | ||
| } | ||
| // get color data | ||
| function get_data(a) { | ||
| return _ || (isset(a) ? a : false); | ||
| } | ||
| // set color data | ||
| function set_data(a) { | ||
| _ = a; | ||
| } | ||
| // add hook | ||
| function add(ev, fn, id) { | ||
| if (!isset(ev)) return hooks; | ||
| if (!isset(fn)) return hooks[ev]; | ||
| if (!isset(hooks[ev])) hooks[ev] = {}; | ||
| if (!isset(id)) id = Object.keys(hooks[ev]).length; | ||
| return hooks[ev][id] = fn, r; | ||
| } | ||
| // remove hook | ||
| function remove(ev, id) { | ||
| if (!isset(ev)) return hooks = {}, r; | ||
| if (!isset(id)) return hooks[ev] = {}, r; | ||
| return delete hooks[ev][id], r; | ||
| } | ||
| // trigger hook | ||
| function trigger(ev, a, id) { | ||
| if (!isset(hooks[ev])) return r; | ||
| if (!isset(id)) { | ||
| for (var i in hooks[ev]) { | ||
| hooks[ev][i].apply(r, a); | ||
| } | ||
| } else { | ||
| if (isset(hooks[ev][id])) { | ||
| hooks[ev][id].apply(r, a); | ||
| } | ||
| } | ||
| return r; | ||
| } | ||
| // initialize data ... | ||
| set_data(r.parse(target.getAttribute('data-color') || target.value || [0, 1, 1])); | ||
| // generate color picker pane ... | ||
| picker.className = 'color-picker'; | ||
| picker.innerHTML = '<div class="color-picker-control"><span class="color-picker-h"><i></i></span><span class="color-picker-sv"><i></i></span></div>'; | ||
| var b = d.body, | ||
| h = d.documentElement, | ||
| c = picker.firstChild.children, | ||
| HSV = get_data([0, 1, 1]), // default is red | ||
| H = c[0], | ||
| SV = c[1], | ||
| H_point = H.firstChild, | ||
| SV_point = SV.firstChild, | ||
| start_H = false, | ||
| start_SV = false, | ||
| drag_H = false, | ||
| drag_SV = false, | ||
| left = 0, | ||
| top = 0, | ||
| P_W = 0, | ||
| P_H = 0, | ||
| v = HSV2HEX(HSV), | ||
| set, exit; | ||
| // on update ... | ||
| function trigger_(k, x) { | ||
| if (!k || k === "h") { | ||
| trigger("change:h", x); | ||
| } | ||
| if (!k || k === "sv") { | ||
| trigger("change:sv", x); | ||
| } | ||
| trigger("change", x); | ||
| } | ||
| // delay | ||
| function delay(fn, t) { | ||
| return w.setTimeout(fn, t); | ||
| } | ||
| // is visible? | ||
| function visible() { | ||
| return picker.parentNode; | ||
| } | ||
| // fit to window | ||
| function fit() { | ||
| var w_W = /* w.innerWidth */ size(h).w, | ||
| w_H = w.innerHeight, | ||
| w_L = Math.max(b.scrollLeft, h.scrollLeft), | ||
| w_T = Math.max(b.scrollTop, h.scrollTop), | ||
| width = w_W + w_L, | ||
| height = w_H + w_T; | ||
| left = offset(target).l; | ||
| top = offset(target).t + size(target).h; | ||
| if (left + P_W > width) { | ||
| left = width - P_W; | ||
| } | ||
| if (top + P_H > height) { | ||
| top = height - P_H; | ||
| } | ||
| picker.style.left = left + 'px'; | ||
| picker.style.top = top + 'px'; | ||
| return trigger("fit", [r]), r; | ||
| }; | ||
| // create | ||
| function create(first) { | ||
| if (!first) b.appendChild(picker); | ||
| P_W = size(picker).w; | ||
| P_H = size(picker).h; | ||
| var H_H = size(H).h, | ||
| SV_W = size(SV).w, | ||
| SV_H = size(SV).h, | ||
| H_point_H = size(H_point).h, | ||
| SV_point_W = size(SV_point).w, | ||
| SV_point_H = size(SV_point).h; | ||
| if (first) { | ||
| picker.style.left = '-9999px'; | ||
| picker.style.top = '-9999px'; | ||
| on("resize", w, fit); | ||
| function click(e) { | ||
| trigger("before.click", [r]); | ||
| delay(function() { | ||
| create(), trigger("click", [r]); | ||
| }, .1); | ||
| e.preventDefault(); | ||
| } | ||
| on("touchdown", target, click); | ||
| on("click", target, click); | ||
| r.create = function() { | ||
| trigger("before.create", [r]); | ||
| return delay(function() { | ||
| create(1), trigger("create", [r]); | ||
| }, .1), r; | ||
| }; | ||
| r.destroy = function() { | ||
| off("touchdown", target, click); | ||
| off("click", target, click); | ||
| set_data(false), exit(); | ||
| return trigger("destroy", [r]), r; | ||
| }; | ||
| } else { | ||
| fit(), trigger("enter", [r]); | ||
| } | ||
| set = function() { | ||
| HSV = get_data(HSV), color(); | ||
| H_point.style.top = (H_H - (H_point_H / 2) - (H_H * +HSV[0])) + 'px'; | ||
| SV_point.style.right = (SV_W - (SV_point_W / 2) - (SV_W * +HSV[1])) + 'px'; | ||
| SV_point.style.top = (SV_H - (SV_point_H / 2) - (SV_H * +HSV[2])) + 'px'; | ||
| }; | ||
| exit = function(e) { | ||
| if (visible()) { | ||
| visible().removeChild(picker); | ||
| } | ||
| off("touchmove", d, move); | ||
| off("mousemove", d, move); | ||
| off("touchend", d, stop); | ||
| off("mouseup", d, stop); | ||
| off("touchdown", d, exit); | ||
| off("click", d, exit); | ||
| trigger("before.exit", [r]); | ||
| return delay(function() { | ||
| if (!visible()) trigger("exit", [r]); | ||
| }, .11), r; | ||
| }; | ||
| function color(e) { | ||
| var a = HSV2RGB(HSV), | ||
| b = HSV2RGB([HSV[0], 1, 1]); | ||
| SV.style.backgroundColor = 'rgb(' + b.join(',') + ')'; | ||
| set_data(HSV); | ||
| if (e) e.preventDefault(); | ||
| } set(); | ||
| function do_H(e) { | ||
| var y = edge(point(H, e).y, 0, H_H); | ||
| HSV[0] = (H_H - y) / H_H; | ||
| H_point.style.top = (y - (H_point_H / 2)) + 'px'; | ||
| color(e); | ||
| } | ||
| function do_SV(e) { | ||
| var o = point(SV, e), | ||
| x = edge(o.x, 0, SV_W), | ||
| y = edge(o.y, 0, SV_H); | ||
| HSV[1] = 1 - ((SV_W - x) / SV_W); | ||
| HSV[2] = (SV_H - y) / SV_H; | ||
| SV_point.style.right = (SV_W - x - (SV_point_W / 2)) + 'px'; | ||
| SV_point.style.top = (y - (SV_point_H / 2)) + 'px'; | ||
| color(e); | ||
| } | ||
| function move(e) { | ||
| if (drag_H) { | ||
| do_H(e), v = HSV2HEX(HSV); | ||
| if (!start_H) { | ||
| trigger("drag:h", [v, r]); | ||
| trigger("drag", [v, r]); | ||
| } | ||
| trigger_("h", [v, r]); | ||
| } | ||
| if (drag_SV) { | ||
| do_SV(e), v = HSV2HEX(HSV); | ||
| if (!start_SV) { | ||
| trigger("drag:sv", [v, r]); | ||
| trigger("drag", [v, r]); | ||
| } | ||
| trigger_("sv", [v, r]); | ||
| } | ||
| start_H = false, | ||
| start_SV = false; | ||
| } | ||
| function stop(e) { | ||
| if (!first) { | ||
| var k = drag_H ? "h" : "sv", | ||
| a = [HSV2HEX(HSV), r]; | ||
| trigger("stop:" + k, a); | ||
| trigger("stop", a); | ||
| trigger_(k, a); | ||
| } | ||
| drag_H = false, | ||
| drag_SV = false; | ||
| } | ||
| function down_H(e) { | ||
| start_H = true, | ||
| drag_H = true, | ||
| move(e); | ||
| trigger("start:h", [v, r]); | ||
| trigger("start", [v, r]); | ||
| trigger_("h", [v, r]); | ||
| } | ||
| function down_SV(e) { | ||
| start_SV = true, | ||
| drag_SV = true, | ||
| move(e); | ||
| trigger("start:sv", [v, r]); | ||
| trigger("start", [v, r]); | ||
| trigger_("sv", [v, r]); | ||
| } | ||
| on("touchstart", H, down_H); | ||
| on("mousedown", H, down_H); | ||
| on("touchstart", SV, down_SV); | ||
| on("mousedown", SV, down_SV); | ||
| on("touchmove", d, move); | ||
| on("mousemove", d, move); | ||
| on("touchend", d, stop); | ||
| on("mouseup", d, stop); | ||
| // on("touchdown", d, exit); | ||
| // on("click", d, exit); | ||
| } create(1); | ||
| trigger("before.create", [r]); | ||
| delay(function() { | ||
| v = HSV2HEX(HSV); | ||
| trigger("create", [v, r]); | ||
| trigger_(0, [v, r]); | ||
| }, .1); | ||
| // register to global ... | ||
| r.target = target; | ||
| r.picker = picker; | ||
| r.on = add; | ||
| r.off = remove; | ||
| r.trigger = trigger; | ||
| r.fit = fit; | ||
| r.set = function(a) { | ||
| if (!isset(a)) return get_data(); | ||
| if (typeof a === "string") { | ||
| a = r.parse(a); | ||
| } | ||
| return set_data(a), set(), r; | ||
| }; | ||
| r.HSV2RGB = function(a) { | ||
| return HSV2RGB(_2HSV_pri(a)); | ||
| }; | ||
| r._HSV2RGB = HSV2RGB; | ||
| r.HSV2HEX = function(a) { | ||
| return HSV2HEX(_2HSV_pri(a)); | ||
| }; | ||
| r._HSV2HEX = HSV2HEX; | ||
| r.RGB2HSV = function(a) { | ||
| return _2HSV_pub(RGB2HSV(a)); | ||
| }; | ||
| r._RGB2HSV = RGB2HSV; | ||
| r.RGB2HEX = RGB2HEX; | ||
| r.HEX2HSV = function(s) { | ||
| return _2HSV_pub(HEX2HSV(s)); | ||
| }; | ||
| r._HEX2HSV = HEX2HSV; | ||
| r.HEX2RGB = HEX2RGB; | ||
| r.hooks = hooks; | ||
| r.enter = create; | ||
| r.exit = exit; | ||
| // return the global object | ||
| return r; | ||
| }; |
| The MIT License (MIT) | ||
| Copyright (c) 2016 Taufik Nurrohman | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
Sorry, the diff of this file is too big to display
| /*! | ||
| * jQuery Scrollstop Plugin v1.1.0 | ||
| * https://github.com/ssorallen/jquery-scrollstop | ||
| */ | ||
| (function($) { | ||
| // $.event.dispatch was undocumented and was deprecated in jQuery 1.7[1]. It | ||
| // was replaced by $.event.handle in jQuery 1.9. | ||
| // | ||
| // Use the first of the available functions to support jQuery <1.8. | ||
| // | ||
| // [1] https://github.com/jquery/jquery-migrate/blob/master/src/event.js#L25 | ||
| var dispatch = $.event.dispatch || $.event.handle; | ||
| var special = $.event.special, | ||
| uid1 = 'D' + (+new Date()), | ||
| uid2 = 'D' + (+new Date() + 1); | ||
| special.scrollstart = { | ||
| setup: function(data) { | ||
| var _data = $.extend({ | ||
| latency: special.scrollstop.latency | ||
| }, data); | ||
| var timer, | ||
| handler = function(evt) { | ||
| var _self = this, | ||
| _args = arguments; | ||
| if (timer) { | ||
| clearTimeout(timer); | ||
| } else { | ||
| evt.type = 'scrollstart'; | ||
| dispatch.apply(_self, _args); | ||
| } | ||
| timer = setTimeout(function() { | ||
| timer = null; | ||
| }, _data.latency); | ||
| }; | ||
| $(this).bind('scroll', handler).data(uid1, handler); | ||
| }, | ||
| teardown: function() { | ||
| $(this).unbind('scroll', $(this).data(uid1)); | ||
| } | ||
| }; | ||
| special.scrollstop = { | ||
| latency: 250, | ||
| setup: function(data) { | ||
| var _data = $.extend({ | ||
| latency: special.scrollstop.latency | ||
| }, data); | ||
| var timer, | ||
| handler = function(evt) { | ||
| var _self = this, | ||
| _args = arguments; | ||
| if (timer) { | ||
| clearTimeout(timer); | ||
| } | ||
| timer = setTimeout(function() { | ||
| timer = null; | ||
| evt.type = 'scrollstop'; | ||
| dispatch.apply(_self, _args); | ||
| }, _data.latency); | ||
| }; | ||
| $(this).bind('scroll', handler).data(uid2, handler); | ||
| }, | ||
| teardown: function() { | ||
| $(this).unbind('scroll', $(this).data(uid2)); | ||
| } | ||
| }; | ||
| })(jQuery); |
| The MIT License (MIT) | ||
| Copyright (c) 2015 Bitwiser.in | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in | ||
| all copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| THE SOFTWARE. |
| (function (root, factory) { | ||
| if (typeof define === 'function' && define.amd) { | ||
| define([], factory); | ||
| } else if (typeof module === 'object' && module.exports) { | ||
| module.exports = factory(); | ||
| } else { | ||
| var expData = factory(); | ||
| for(var key in expData) { | ||
| if (expData.hasOwnProperty(key)) { | ||
| root[key] = expData[key]; | ||
| } | ||
| } | ||
| } | ||
| }(this, function(){ | ||
| function ce(tag, clas, txt) { | ||
| var ele = document.createElement(tag); | ||
| ele.setAttribute('class', clas); | ||
| if(typeof txt === 'undefined' || txt === null){ | ||
| return ele; | ||
| } | ||
| var tn = document.createTextNode(txt); | ||
| ele.appendChild(tn); | ||
| return ele; | ||
| } | ||
| var KEY_ESC = 27; | ||
| var KEY_ENTER = 13; | ||
| function buildUI(title, sub, onOk, onCancel, type) { | ||
| if (typeof window === 'undefined') { | ||
| throw 'Cannot use this in node.'; | ||
| } | ||
| var prev = document.getElementsByClassName('msc-confirm'); | ||
| if(prev.length > 0){ | ||
| document.body.removeChild(prev[0]); | ||
| } | ||
| var options = { | ||
| title: 'Confirm', | ||
| subtitle: '', | ||
| onOk: null, | ||
| onCancel: null, | ||
| okText: 'OK', | ||
| cancelText: 'Cancel', | ||
| placeholder: 'Enter value', | ||
| dismissOverlay: false, | ||
| defaultValue: '' | ||
| }; | ||
| if(typeof title === 'object') { | ||
| for(var key in title) { | ||
| options[key] = title[key]; | ||
| } | ||
| if(typeof options.onOk !== 'function') { | ||
| options.onOk = null; | ||
| } | ||
| if(typeof options.onCancel !== 'function') { | ||
| options.onCancel = null; | ||
| } | ||
| } else { | ||
| options.title = (typeof title === 'string') ? title : options.title; | ||
| options.subtitle = (typeof sub === 'string') ? sub : options.subtitle; | ||
| options.onOk = (typeof onOk === 'function') ? onOk : options.onOk; | ||
| options.onCancel = (typeof onCancel === 'function') ? onCancel : options.onCancel; | ||
| if(typeof sub === 'function') { | ||
| options.onOk = sub; | ||
| } | ||
| } | ||
| var dialog = ce('div', 'msc-confirm'), | ||
| overlay = ce('div', 'msc-overlay'), | ||
| closeBtn = ce('button', 'msc-close'); | ||
| closeBtn.innerHTML = '×'; | ||
| overlay.appendChild(closeBtn); | ||
| if(options.dismissOverlay) { | ||
| overlay.addEventListener("click", destroy); | ||
| } | ||
| closeBtn.addEventListener('click', destroy); | ||
| var content = ce('div', 'msc-content'), | ||
| cTitle = ce('h3', 'msc-title', options.title), | ||
| body = ce('div', 'msc-body'), | ||
| action = ce('div', 'msc-action'), | ||
| okBtn = ce('button', 'msc-ok', options.okText), | ||
| cancelbtn = ce('button', 'msc-cancel', options.cancelText), | ||
| input = ce('input', 'msc-input'); | ||
| body.appendChild(ce('p','msc-sub', options.subtitle)); | ||
| action.appendChild(okBtn); | ||
| if(type !== "alert") { | ||
| action.appendChild(cancelbtn); | ||
| cancelbtn.addEventListener('click', cancel); | ||
| } | ||
| okBtn.addEventListener('click', ok); | ||
| content.appendChild(cTitle); | ||
| content.appendChild(body); | ||
| content.appendChild(action); | ||
| dialog.appendChild(overlay); | ||
| dialog.appendChild(content); | ||
| document.body.appendChild(dialog); | ||
| dialog.style.display = 'block'; | ||
| content.classList.add('msc-confirm--animate'); | ||
| if(type === "prompt") { | ||
| input.setAttribute("type", "text"); | ||
| input.setAttribute("placeholder", options.placeholder); | ||
| input.value = options.defaultValue; | ||
| input.addEventListener("keyup", function(e) { | ||
| if(e.keyCode === KEY_ENTER) { | ||
| ok(); | ||
| } | ||
| }); | ||
| body.appendChild(input); | ||
| input.focus(); | ||
| }else if(type==="alert") { | ||
| okBtn.focus(); | ||
| }else { | ||
| cancelbtn.focus(); | ||
| } | ||
| document.addEventListener('keyup', _hide); | ||
| function destroy() { | ||
| closeBtn.removeEventListener('click', destroy); | ||
| okBtn.removeEventListener('click', ok); | ||
| cancelbtn.removeEventListener('click', cancel); | ||
| if(options.dismissOverlay) { | ||
| overlay.removeEventListener("click", destroy); | ||
| } | ||
| document.removeEventListener('keyup', _hide); | ||
| document.body.removeChild(dialog); | ||
| } | ||
| function ok() { | ||
| destroy(); | ||
| if(options.onOk !== null) { | ||
| if(type === "prompt") { | ||
| options.onOk(input.value); | ||
| }else { | ||
| options.onOk(); | ||
| } | ||
| } | ||
| } | ||
| function cancel() { | ||
| destroy(); | ||
| if(options.onCancel !== null) { | ||
| options.onCancel(); | ||
| } | ||
| } | ||
| function _hide(e) { | ||
| if(e.keyCode == 27) { | ||
| destroy(); | ||
| } | ||
| } | ||
| }; | ||
| var exportData = { | ||
| mscConfirm: function(title, sub, onOk, onCancel) { | ||
| buildUI(title, sub, onOk, onCancel, "confirm"); | ||
| }, | ||
| mscPrompt: function(title, sub, onOk, onCancel) { | ||
| buildUI(title, sub, onOk, onCancel, "prompt"); | ||
| }, | ||
| mscAlert: function(title, sub, onOk, onCancel) { | ||
| buildUI(title, sub, onOk, onCancel, "alert"); | ||
| }, | ||
| mscClose: function() { | ||
| var prev = document.getElementsByClassName('msc-confirm'); | ||
| if(prev.length > 0){ | ||
| document.body.removeChild(prev[0]); | ||
| } | ||
| } | ||
| }; | ||
| return exportData; | ||
| })); |
| @-webkit-keyframes scale-fade{ | ||
| 0%{opacity:0;-webkit-transform:scale(.8) rotateX(-40deg);transform:scale(.8) rotateX(-40deg)} | ||
| 50%{opacity:1}70%{-webkit-transform:scale(1.05) rotateX(0);transform:scale(1.05) rotateX(0)} | ||
| 100%{-webkit-transform:scale(1) rotateX(0);transform:scale(1) rotateX(0)} | ||
| } | ||
| @keyframes scale-fade{ | ||
| 0%{opacity:0;-webkit-transform:scale(.8) rotateX(-40deg);transform:scale(.8) rotateX(-40deg)} | ||
| 50%{opacity:1}70%{-webkit-transform:scale(1.05) rotateX(0);transform:scale(1.05) rotateX(0)} | ||
| 100%{-webkit-transform:scale(1) rotateX(0);transform:scale(1) rotateX(0)} | ||
| } | ||
| .msc-confirm--animate { | ||
| -webkit-transform-origin: bottom center; | ||
| -ms-transform-origin: bottom center; | ||
| transform-origin: bottom center; | ||
| -webkit-animation: scale-fade 300ms forwards cubic-bezier(.8, .02, .45, -1.09); | ||
| animation: scale-fade 300ms forwards cubic-bezier(.8, .02, .45, .91); | ||
| } | ||
| .msc-confirm { | ||
| display: none; | ||
| color: #252525; | ||
| -webkit-font-smoothing: antialiased; | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| .msc-overlay { | ||
| position: fixed; | ||
| top: 0; | ||
| height: 100%; | ||
| width: 100%; | ||
| opacity: 0.9; | ||
| left: 0; | ||
| background-color: #fff; | ||
| z-index: 20; | ||
| } | ||
| .msc-confirm button { | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
| transition: all 0.2s ease-in; | ||
| } | ||
| .msc-confirm button:focus { | ||
| outline: none; | ||
| } | ||
| .msc-close { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| width: 40px; | ||
| height: 40px; | ||
| border-radius: 20px; | ||
| font-size: 1.2em; | ||
| text-align: center; | ||
| vertical-align: middle; | ||
| } | ||
| .msc-close:hover { | ||
| background: #eee; | ||
| } | ||
| .msc-content { | ||
| position: relative; | ||
| z-index: 21; | ||
| background: #fff; | ||
| opacity: 1.0; | ||
| max-width: 480px; | ||
| margin: 10% auto 10% auto; | ||
| padding: 40px; | ||
| text-align: center; | ||
| } | ||
| @media (max-width: 600px) { | ||
| .msc-content { | ||
| padding: 10px 0; | ||
| } | ||
| } | ||
| .msc-title { | ||
| font-size: 2em; | ||
| margin: 0 0 0.1em 0; | ||
| } | ||
| .msc-body { | ||
| font-size: 1.2em; | ||
| margin-bottom: 1em; | ||
| color: #666; | ||
| } | ||
| .msc-body p { | ||
| margin: 0 0 10px 0; | ||
| } | ||
| .msc-input { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| height: 38px; | ||
| font-size: 14px; | ||
| text-align: center; | ||
| letter-spacing: 0.02em; | ||
| font-weight: 400; | ||
| font-style: normal; | ||
| font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif; | ||
| border: none; | ||
| border-bottom: 1px solid rgba(0,0,0,0.15); | ||
| padding: 0 15px; | ||
| } | ||
| .msc-input:focus { | ||
| outline: none; | ||
| border-color: #0F985A; | ||
| } | ||
| .msc-action button { | ||
| border: 1px solid #ccc; | ||
| padding: 10px 20px; | ||
| border-radius: 25px; | ||
| min-width: 80px; | ||
| background: #fff; | ||
| } | ||
| .msc-action button:focus { | ||
| outline: none; | ||
| } | ||
| .msc-ok { | ||
| margin-right: 10px; | ||
| } | ||
| button.msc-ok:hover, button.msc-ok:focus { | ||
| border: 1px solid #0F985A; | ||
| color: #0F985A; | ||
| } | ||
| button.msc-cancel:hover, button.msc-cancel:focus { | ||
| border: 1px solid #111; | ||
| color: #111; | ||
| } | ||
| .msc-sub{ | ||
| white-space: pre-line; | ||
| } | ||
| /* ---------------------------------------------------------------------------- | ||
| pusher.color.js | ||
| A color parsing and manipulation library | ||
| ---------------------------------------------------------------------------- | ||
| The MIT License (MIT). Copyright (c) 2013, Pusher Inc. | ||
| */ | ||
| (function(){function normalize360(v){v=v%360;return v<0?360+v:v}function unsigned(i){return i>>>0}function trimLc(s){return s.replace(/^\s+/,"").replace(/\s+$/,"").toLowerCase()}function slice(obj,index){return Array.prototype.slice.call(obj,index)}function append(arr,value){arr.push(value);return arr}function clamp(x,a,b){return!(x>a)?a:!(x<b)?b:x}function mix(x,y,a){return(1-a)*x+a*y}function f2b(f){f=Math.round(255*f);if(!(f>0))return 0;else if(!(f<255))return 255;else return f&255}function b2f(b){return b/255}function rgbToHsl(r,g,b){var max=Math.max(r,g,b),min=Math.min(r,g,b);var h,s,l=(max+min)/2;if(max==min){h=s=0}else{var d=max-min;s=l>.5?d/(2-max-min):d/(max+min);switch(max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break}h/=6}return[h,s,l]}function hslToRgb(h,s,l){var r,g,b;if(s==0){r=g=b=l}else{function hue2rgb(p,q,t){if(t<0)t+=1;if(t>1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p}var q=l<.5?l*(1+s):l+s-l*s;var p=2*l-q;r=hue2rgb(p,q,h+1/3);g=hue2rgb(p,q,h);b=hue2rgb(p,q,h-1/3)}return[r,g,b]}function hex4ToRgba(color){var rgba=[parseInt(color.substr(1,1),16),parseInt(color.substr(2,1),16),parseInt(color.substr(3,1),16),1];for(var i=0;i<3;++i)rgba[i]=(rgba[i]*16+rgba[i])/255;return rgba}function hex7ToRgba(color){return[parseInt(color.substr(1,2),16)/255,parseInt(color.substr(3,2),16)/255,parseInt(color.substr(5,2),16)/255,1]}var namedColors={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,216],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[216,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};function rgbaToHsva(rgba){var r=rgba[0];var g=rgba[1];var b=rgba[2];var min=Math.min(Math.min(r,g),b),max=Math.max(Math.max(r,g),b),delta=max-min;var value=max;var saturation,hue;if(max==min){hue=0}else if(max==r){hue=60*((g-b)/(max-min))%360}else if(max==g){hue=60*((b-r)/(max-min))+120}else if(max==b){hue=60*((r-g)/(max-min))+240}if(hue<0){hue+=360}if(max==0){saturation=0}else{saturation=1-min/max}return[Math.round(hue),Math.round(saturation*100),Math.round(value*100),rgba[3]]}function hsvaToRgba(hsva){var h=normalize360(hsva[0]);var s=hsva[1];var v=hsva[2];var s=s/100;var v=v/100;var hi=Math.floor(h/60%6);var f=h/60-hi;var p=v*(1-s);var q=v*(1-f*s);var t=v*(1-(1-f)*s);var rgb=[];switch(hi){case 0:rgb=[v,t,p];break;case 1:rgb=[q,v,p];break;case 2:rgb=[p,v,t];break;case 3:rgb=[p,q,v];break;case 4:rgb=[t,p,v];break;case 5:rgb=[v,p,q];break}return[rgb[0],rgb[1],rgb[2],hsva[3]]}function rgbaToHsl(c){var hsl=rgbToHsl(c[0],c[1],c[2]);hsl[0]=normalize360(Math.floor(hsl[0]*360));hsl[1]=Math.floor(hsl[1]*100);hsl[2]=Math.floor(hsl[2]*100);return hsl}function rgbaToHsla(c){var hsl=rgbaToHsl(c);hsl.push(c[3]);return hsl}function hslToRgba(c){var h=parseFloat(c[0])/360;var s=parseFloat(c[1])/100;var l=parseFloat(c[2])/100;var rgb=hslToRgb(h,s,l);return[rgb[0],rgb[1],rgb[2],1]}function hslaToRgba(c){var h=parseFloat(c[0])/360;var s=parseFloat(c[1])/100;var l=parseFloat(c[2])/100;var rgb=hslToRgb(h,s,l);return[rgb[0],rgb[1],rgb[2],parseFloat(c[3])]}var parse={byteOrPercent:function(s){var m;if(typeof s=="string"&&(m=s.match(/^([0-9]+)%$/)))return Math.floor(parseFloat(m[1])*255/100);else return parseFloat(s)},floatOrPercent:function(s){var m;if(typeof s=="string"&&(m=s.match(/^([0-9]+)%$/)))return parseFloat(m[1])/100;else return parseFloat(s)},numberOrPercent:function(s,scale){var m;if(typeof s=="string"&&(m=s.match(/^([0-9]+)%$/)))return parseFloat(m[1])/100*scale;else return parseFloat(s)},rgba:function(v){for(var i=0;i<3;++i)v[i]=b2f(parse.byteOrPercent(v[i]));v[3]=parse.floatOrPercent(v[i]);return new Color(v)},rgba8:function(v){return new Color([b2f(parse.byteOrPercent(v[0])),b2f(parse.byteOrPercent(v[1])),b2f(parse.byteOrPercent(v[2])),b2f(parse.byteOrPercent(v[3]))])},float3:function(v){for(var i=0;i<3;++i)v[i]=parse.floatOrPercent(v[i]);v[3]=1;return new Color(v)},float4:function(v){for(var i=0;i<3;++i)v[i]=parse.floatOrPercent(v[i]);v[3]=parse.floatOrPercent(v[i]);return new Color(v)},hsla:function(v){v[0]=parse.numberOrPercent(v[0],360);v[1]=parse.numberOrPercent(v[1],100);v[2]=parse.numberOrPercent(v[2],100);v[3]=parse.numberOrPercent(v[3],1);return new Color(hslaToRgba(v))},hsva:function(v){v[0]=normalize360(parseFloat(v[0]));v[1]=Math.max(0,Math.min(100,parseFloat(v[1])));v[2]=Math.max(0,Math.min(100,parseFloat(v[2])));v[3]=parse.floatOrPercent(v[3]);return new Color(hsvaToRgba(v))}};var supportedFormats={keyword:{},hex3:{},hex7:{},rgb:{parse:function(v){v=v.slice(0);v.push(1);return parse.rgba(v)}},rgba:{parse:parse.rgba},hsl:{parse:function(v){v=v.slice(0);v.push(1);return parse.hsla(v)}},hsla:{parse:parse.hsla},hsv:{parse:function(v){v=v.slice(0);v.push(1);return parse.hsva(v)}},hsva:{parse:parse.hsva},rgb8:{parse:function(v){v=v.slice(0);v.push(1);return parse.rgba(v)}},rgba8:{parse:function(v){return parse.rgba8(v)}},packed_rgba:{parse:function(v){v=[v>>24&255,v>>16&255,v>>8&255,(v&255)/255];return parse.rgba(v)},output:function(v){return unsigned(f2b(v[0])<<24|f2b(v[1])<<16|f2b(v[2])<<8|f2b(v[3]))}},packed_argb:{parse:function(v){v=[v>>16&255,v>>8&255,v>>0&255,(v>>24&255)/255];return parse.rgba(v)},output:function(v){return unsigned(f2b(v[3])<<24|f2b(v[0])<<16|f2b(v[1])<<8|f2b(v[2]))}},float3:{parse:parse.float3},float4:{parse:parse.float4}};function Color(value){this._value=value}var color=function(){var match=null;if(arguments[0]instanceof Color){return new Color(arguments[0]._value)}else if(typeof arguments[0]=="string"){var first=arguments[0][0];if(first=="#"){if(match=arguments[0].match(/^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/i)){return new Color(hex4ToRgba(match[0]))}else if(match=arguments[0].match(/^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/i)){return new Color(hex7ToRgba(match[0]))}}else if(match=supportedFormats[arguments[0].toLowerCase()]){if(arguments.length==2)return match.parse(arguments[1]);else return match.parse(slice(arguments,1))}else if(match=arguments[0].match(/^\s*([A-Z][A-Z0-9_]+)\s*\(\s*([\-0-9A-FX]+)\s*\)\s*$/i)){var format=supportedFormats[match[1].toLowerCase()];return format.parse(match[2])}else if(match=arguments[0].match(/^\s*([A-Z][A-Z0-9]+)\s*\(\s*([0-9\.]+%?)\s*,\s*([0-9\.]+%?)\s*,\s*([0-9\.]+%?)\s*(,\s*([0-9\.]+%?)\s*)?\)\s*$/i)){var format=supportedFormats[match[1].toLowerCase()];if(match[5]===undefined){var v=[match[2],match[3],match[4]];return format.parse(v)}else{var v=[match[2],match[3],match[4],match[6]];return format.parse(v)}}else if(arguments.length==1&&(match=namedColors[trimLc(arguments[0])])){var v=match;return new Color([b2f(v[0]),b2f(v[1]),b2f(v[2]),1])}}throw"Could not parse color '"+arguments[0]+"'"};var fixed={white:color("white"),black:color("black"),gray:color("gray")};function modifyComponent(index,arg){if(arg==undefined)return f2b(this._value[index]);var v=slice(this._value,0);if(typeof arg=="string"){var m;if(m=arg.match(/^([+\-\\*]=?)([0-9.]+)/)){var op=m[1];var offset=parseFloat(m[2]);switch(op[0]){case"+":v[index]+=offset/255;break;case"-":v[index]-=offset/255;break;case"*":v[index]*=offset;break}if(op[1]=="="){this._value=v;return this}else return new Color(v)}}else{var clone=this.clone();clone._value[index]=arg;return clone}}function modifyHsva(i){return function(){function change(obj,op,value){value=parseFloat(value);var hsva=rgbaToHsva(obj._value);var c=0;switch(op){case"=":hsva[i]=value;c=1;break;case"+":hsva[i]+=value;c=1;break;case"+=":hsva[i]+=value;break;case"-":hsva[i]-=value;c=1;break;case"-=":hsva[i]-=value;break;case"*":hsva[i]*=value;c=1;break;case"*=":hsva[i]*=value;break;default:throw"Bad op "+op}if(i==0)hsva[i]=normalize360(hsva[i]);else if(i==1||i==2){if(hsva[i]<0)hsva[i]=0;else if(hsva[i]>99)hsva[i]=99}if(c)obj=obj.clone();obj._value=hsvaToRgba(hsva);return obj}if(arguments.length==0)return rgbaToHsva(this._value)[i];else if(arguments.length==1){var m;if(typeof arguments[0]=="string"&&(m=arguments[0].match(/^([\+\-\*]=?)([0-9.]+)/)))return change(this,m[1],m[2]);else return change(this,"=",arguments[0])}else if(arguments.length==2)return change(this,arguments[0],arguments[1])}}var methods={clone:function(){return new Color(this._value.slice(0))},html:function(){var self=this;var v=this._value;var _fmt={hex3:function(){return self.hex3()},hex6:function(){return self.hex6()},rgb:function(){return"rgb("+self.rgb().join(",")+")"},rgba:function(){return"rgba("+self.rgba().join(",")+")"},hsl:function(){return"hsl("+rgbaToHsl(v).join(",")+")"},hsla:function(){return"hsla("+rgbaToHsla(v).join(",")+")"},keyword:function(){var dist=3*255*255+1;var keyword;for(name in namedColors){var c=namedColors[name];var d=0;for(var i=0;i<3;++i){var t=v[i]-b2f(c[i]);d+=t*t}if(d<dist){keyword=name;dist=d}}return keyword}};var type=arguments[0]||"rgba";return _fmt[type]()},red:function(){return modifyComponent.call(this,0,arguments[0])},green:function(){return modifyComponent.call(this,1,arguments[0])},blue:function(){return modifyComponent.call(this,2,arguments[0])},alpha:function(){if(arguments.length==1){c=this.clone();c._value[3]=parse.floatOrPercent(arguments[0]);return c}else return this._value[3]},alpha8:function(){if(arguments.length==1){c=this.clone();c._value[3]=parse.byteOrPercent(arguments[0])/255;return c}else return Math.floor(this._value[3]*255)},grayvalue:function(){var c=this._value;return(c[0]+c[1]+c[2])/3},grayvalue8:function(){return f2b(this.grayvalue())},luminance:function(){var c=this._value;return c[0]*.2126+c[1]*.7152+c[2]*.0722},luminance8:function(){return f2b(this.luminance())},hsv:function(){return rgbaToHsva(this._value).slice(0,3)},hsva:function(){return rgbaToHsva(this._value)},packed_rgba:function(){return supportedFormats.packed_rgba.output(this._value)},packed_argb:function(){return supportedFormats.packed_argb.output(this._value)},hue:modifyHsva(0),saturation:modifyHsva(1),value:modifyHsva(2),clamp:function(){var v=this._value;return new Color([clamp(v[0],0,1),clamp(v[1],0,1),clamp(v[2],0,1),clamp(v[3],0,1)])},blend:function(colorToBlend,amount){if(typeof amount!=="number")amount=parse.floatOrPercent(amount);var c=this;var c2=color(colorToBlend);return new Color([mix(c._value[0],c2._value[0],amount),mix(c._value[1],c2._value[1],amount),mix(c._value[2],c2._value[2],amount),mix(c._value[3],c2._value[3],amount)])},add:function(d){var u=this._value;var v=color(d)._value;return new Color([u[0]+v[0]*v[3],u[1]+v[1]*v[3],u[2]+v[2]*v[3],u[3]])},inc:function(d){var u=this._value;var v=color(d)._value;u[0]+=v[0]*v[3];u[1]+=v[1]*v[3];u[2]+=v[2]*v[3];return this},dec:function(d){var u=this._value;var v=color(d)._value;u[0]-=v[0]*v[3];u[1]-=v[1]*v[3];u[2]-=v[2]*v[3];return this},subtract:function(d){var u=this._value;var v=color(d)._value;return new Color([u[0]-v[0]*v[3],u[1]-v[1]*v[3],u[2]-v[2]*v[3],u[3]])},multiply:function(d){var u=this._value;var v=color(d)._value;return new Color([u[0]*v[0],u[1]*v[1],u[2]*v[2],u[3]*v[3]])},scale:function(d){var u=this._value;return new Color([u[0]*d,u[1]*d,u[2]*d,u[3]])},xor:function(d){var u=this.rgba8();var v=color(d).rgba8();return color("rgba8",u[0]^v[0],u[1]^v[1],u[2]^v[2],u[3])},tint:function(amount){return this.blend(fixed.white,amount)},shade:function(amount){return this.blend(fixed.black,amount)},tone:function(amount){return this.blend(fixed.gray,amount)},complement:function(){var hsva=this.hsva();hsva[0]=normalize360(hsva[0]+180);return new Color(hsvaToRgba(hsva))},triad:function(){return[new Color(this._value),this.hue("+120"),this.hue("+240")]},hueSet:function(){var h=0;var set=[];for(var s=100;s>=30;s-=35)for(var v=100;v>=30;v-=35)set.push(this.hue("+",h).saturation(s).value(v));return set},hueRange:function(range,count){var base=this.hue();var set=[];for(var i=0;i<count;++i){var h=base+2*(i/(count-1)-.5)*range;set.push(this.hue("=",h))}return set},contrastWhiteBlack:function(){return this.value()<50?color("white"):color("black")},contrastGray:function(){var hsva=this.hsva();var value=hsva[2]<30?hsva[2]+20:hsva[2]-20;return new Color(hsvaToRgba([hsva[0],0,value,hsva[3]]))},hex3:function(){function hex(d,max){return Math.min(Math.round(f2b(d)/16),15).toString(16)}return"#"+hex(this._value[0])+hex(this._value[1])+hex(this._value[2])},hex6:function(){function hex(d,max){var h=f2b(d).toString(16);return h.length<2?"0"+h:h}return"#"+hex(this._value[0])+hex(this._value[1])+hex(this._value[2])},rgb:function(){var v=this._value;return[f2b(v[0]),f2b(v[1]),f2b(v[2])]},rgba:function(){var v=this._value;return[f2b(v[0]),f2b(v[1]),f2b(v[2]),v[3]]},rgb8:function(){var v=this._value;return[f2b(v[0]),f2b(v[1]),f2b(v[2])]},rgba8:function(){var v=this._value;return[f2b(v[0]),f2b(v[1]),f2b(v[2]),this.alpha8()]},float3:function(){return[this._value[0],this._value[1],this._value[2]]},float4:function(){return[this._value[0],this._value[1],this._value[2],this._value[3]]}};methods["sub"]=methods["subtract"];methods["mul"]=methods["multiply"];for(var name in methods)Color.prototype[name]=methods[name];color.float3=function(r,g,b){return new Color([r,g,b,1])};color.float4=function(r,g,b,a){return new Color([r,g,b,a])};color.version="0.2.4";color.Color=Color;if(typeof module!=="undefined"&&module.exports){module.exports=color}else if(typeof window!=="undefined"){window.pusher=window.pusher||{};window.pusher.color=color}else if(typeof self!="undefined"){self.pusher=self.pusher||{};self.pusher.color=color}})(); |
| /** | ||
| * http://www.openjs.com/scripts/events/keyboard_shortcuts/ | ||
| * Version : 2.01.B | ||
| * By Binny V A | ||
| * License : BSD | ||
| */ | ||
| shortcut = { | ||
| 'all_shortcuts':{},//All the shortcuts are stored in this array | ||
| 'add': function(shortcut_combination,callback,opt) { | ||
| //Provide a set of default options | ||
| var default_options = { | ||
| 'type':'keydown', | ||
| 'propagate':false, | ||
| 'disable_in_input':false, | ||
| 'target':document, | ||
| 'keycode':false | ||
| } | ||
| if(!opt) opt = default_options; | ||
| else { | ||
| for(var dfo in default_options) { | ||
| if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo]; | ||
| } | ||
| } | ||
| var ele = opt.target; | ||
| if(typeof opt.target == 'string') ele = document.getElementById(opt.target); | ||
| var ths = this; | ||
| shortcut_combination = shortcut_combination.toLowerCase(); | ||
| //The function to be called at keypress | ||
| var func = function(e) { | ||
| e = e || window.event; | ||
| if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields | ||
| var element; | ||
| if(e.target) element=e.target; | ||
| else if(e.srcElement) element=e.srcElement; | ||
| if(element.nodeType==3) element=element.parentNode; | ||
| if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return; | ||
| } | ||
| //Find Which key is pressed | ||
| if (e.keyCode) code = e.keyCode; | ||
| else if (e.which) code = e.which; | ||
| var character = String.fromCharCode(code).toLowerCase(); | ||
| if(code == 188) character=","; //If the user presses , when the type is onkeydown | ||
| if(code == 190) character="."; //If the user presses , when the type is onkeydown | ||
| var keys = shortcut_combination.split("+"); | ||
| //Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked | ||
| var kp = 0; | ||
| //Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken | ||
| var shift_nums = { | ||
| "`":"~", | ||
| "1":"!", | ||
| "2":"@", | ||
| "3":"#", | ||
| "4":"$", | ||
| "5":"%", | ||
| "6":"^", | ||
| "7":"&", | ||
| "8":"*", | ||
| "9":"(", | ||
| "0":")", | ||
| "-":"_", | ||
| "=":"+", | ||
| ";":":", | ||
| "'":"\"", | ||
| ",":"<", | ||
| ".":">", | ||
| "/":"?", | ||
| "\\":"|" | ||
| } | ||
| //Special Keys - and their codes | ||
| var special_keys = { | ||
| 'esc':27, | ||
| 'escape':27, | ||
| 'tab':9, | ||
| 'space':32, | ||
| 'return':13, | ||
| 'enter':13, | ||
| 'backspace':8, | ||
| 'scrolllock':145, | ||
| 'scroll_lock':145, | ||
| 'scroll':145, | ||
| 'capslock':20, | ||
| 'caps_lock':20, | ||
| 'caps':20, | ||
| 'numlock':144, | ||
| 'num_lock':144, | ||
| 'num':144, | ||
| 'pause':19, | ||
| 'break':19, | ||
| 'insert':45, | ||
| 'home':36, | ||
| 'delete':46, | ||
| 'end':35, | ||
| 'pageup':33, | ||
| 'page_up':33, | ||
| 'pu':33, | ||
| 'pagedown':34, | ||
| 'page_down':34, | ||
| 'pd':34, | ||
| 'left':37, | ||
| 'up':38, | ||
| 'right':39, | ||
| 'down':40, | ||
| 'f1':112, | ||
| 'f2':113, | ||
| 'f3':114, | ||
| 'f4':115, | ||
| 'f5':116, | ||
| 'f6':117, | ||
| 'f7':118, | ||
| 'f8':119, | ||
| 'f9':120, | ||
| 'f10':121, | ||
| 'f11':122, | ||
| 'f12':123 | ||
| } | ||
| var modifiers = { | ||
| shift: { wanted:false, pressed:false}, | ||
| ctrl : { wanted:false, pressed:false}, | ||
| alt : { wanted:false, pressed:false}, | ||
| meta : { wanted:false, pressed:false} //Meta is Mac specific | ||
| }; | ||
| if(e.ctrlKey) modifiers.ctrl.pressed = true; | ||
| if(e.shiftKey) modifiers.shift.pressed = true; | ||
| if(e.altKey) modifiers.alt.pressed = true; | ||
| if(e.metaKey) modifiers.meta.pressed = true; | ||
| for(var i=0; k=keys[i],i<keys.length; i++) { | ||
| //Modifiers | ||
| if(k == 'ctrl' || k == 'control') { | ||
| kp++; | ||
| modifiers.ctrl.wanted = true; | ||
| } else if(k == 'shift') { | ||
| kp++; | ||
| modifiers.shift.wanted = true; | ||
| } else if(k == 'alt') { | ||
| kp++; | ||
| modifiers.alt.wanted = true; | ||
| } else if(k == 'meta') { | ||
| kp++; | ||
| modifiers.meta.wanted = true; | ||
| } else if(k.length > 1) { //If it is a special key | ||
| if(special_keys[k] == code) kp++; | ||
| } else if(opt['keycode']) { | ||
| if(opt['keycode'] == code) kp++; | ||
| } else { //The special keys did not match | ||
| if(character == k) kp++; | ||
| else { | ||
| if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase | ||
| character = shift_nums[character]; | ||
| if(character == k) kp++; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| if(kp == keys.length && | ||
| modifiers.ctrl.pressed == modifiers.ctrl.wanted && | ||
| modifiers.shift.pressed == modifiers.shift.wanted && | ||
| modifiers.alt.pressed == modifiers.alt.wanted && | ||
| modifiers.meta.pressed == modifiers.meta.wanted) { | ||
| callback(e); | ||
| if(!opt['propagate']) { //Stop the event | ||
| //e.cancelBubble is supported by IE - this will kill the bubbling process. | ||
| e.cancelBubble = true; | ||
| e.returnValue = false; | ||
| //e.stopPropagation works in Firefox. | ||
| if (e.stopPropagation) { | ||
| e.stopPropagation(); | ||
| e.preventDefault(); | ||
| } | ||
| return false; | ||
| } | ||
| } | ||
| } | ||
| this.all_shortcuts[shortcut_combination] = { | ||
| 'callback':func, | ||
| 'target':ele, | ||
| 'event': opt['type'] | ||
| }; | ||
| //Attach the function with the event | ||
| if(ele.addEventListener) ele.addEventListener(opt['type'], func, false); | ||
| else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func); | ||
| else ele['on'+opt['type']] = func; | ||
| }, | ||
| //Remove the shortcut - just specify the shortcut and I will remove the binding | ||
| 'remove':function(shortcut_combination) { | ||
| shortcut_combination = shortcut_combination.toLowerCase(); | ||
| var binding = this.all_shortcuts[shortcut_combination]; | ||
| delete(this.all_shortcuts[shortcut_combination]) | ||
| if(!binding) return; | ||
| var type = binding['event']; | ||
| var ele = binding['target']; | ||
| var callback = binding['callback']; | ||
| if(ele.detachEvent) ele.detachEvent('on'+type, callback); | ||
| else if(ele.removeEventListener) ele.removeEventListener(type, callback, false); | ||
| else ele['on'+type] = false; | ||
| } | ||
| } |
| /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.border-box,article,body,code,dd,div,dl,dt,fieldset,footer,form,header,html,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],li,main,ol,p,pre,section,textarea,ul{box-sizing:border-box}.cover{background-size:cover}.contain{background-size:contain}.ba{border-style:solid;border-width:1px}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none;border-width:0}.b--black{border-color:#000}.b--near-black{border-color:#111}.b--dark-gray{border-color:#333}.b--mid-gray{border-color:#555}.b--gray{border-color:#777}.b--silver{border-color:#999}.b--light-silver{border-color:#aaa}.b--light-gray{border-color:#eee}.b--near-white{border-color:#f4f4f4}.b--white{border-color:#fff}.b--white-90{border-color:hsla(0,0%,100%,.9)}.b--white-80{border-color:hsla(0,0%,100%,.8)}.b--white-70{border-color:hsla(0,0%,100%,.7)}.b--white-60{border-color:hsla(0,0%,100%,.6)}.b--white-50{border-color:hsla(0,0%,100%,.5)}.b--white-40{border-color:hsla(0,0%,100%,.4)}.b--white-30{border-color:hsla(0,0%,100%,.3)}.b--white-20{border-color:hsla(0,0%,100%,.2)}.b--white-10{border-color:hsla(0,0%,100%,.1)}.b--white-05{border-color:hsla(0,0%,100%,.05)}.b--white-025{border-color:hsla(0,0%,100%,.025)}.b--white-0125{border-color:hsla(0,0%,100%,.0125)}.b--black-90{border-color:rgba(0,0,0,.9)}.b--black-80{border-color:rgba(0,0,0,.8)}.b--black-70{border-color:rgba(0,0,0,.7)}.b--black-60{border-color:rgba(0,0,0,.6)}.b--black-50{border-color:rgba(0,0,0,.5)}.b--black-40{border-color:rgba(0,0,0,.4)}.b--black-30{border-color:rgba(0,0,0,.3)}.b--black-20{border-color:rgba(0,0,0,.2)}.b--black-10{border-color:rgba(0,0,0,.1)}.b--black-05{border-color:rgba(0,0,0,.05)}.b--black-025{border-color:rgba(0,0,0,.025)}.b--black-0125{border-color:rgba(0,0,0,.0125)}.b--dark-red{border-color:#f00008}.b--red{border-color:#ff3223}.b--orange{border-color:#f3a801}.b--gold{border-color:#f2c800}.b--yellow{border-color:#ffde37}.b--purple{border-color:#7d5da9}.b--light-purple{border-color:#8d4f92}.b--hot-pink{border-color:#d62288}.b--dark-pink{border-color:#c64774}.b--pink{border-color:#f49cc8}.b--dark-green{border-color:#006c71}.b--green{border-color:#41d69f}.b--navy{border-color:#001b44}.b--dark-blue{border-color:#00449e}.b--blue{border-color:#357edd}.b--light-blue{border-color:#96ccff}.b--lightest-blue{border-color:#cdecff}.b--washed-blue{border-color:#f6fffe}.b--washed-green{border-color:#e8fdf5}.b--washed-yellow{border-color:#fff8d5}.b--light-pink{border-color:#efa4b8}.b--light-yellow{border-color:#f3dd70}.b--light-red{border-color:#ffd3c0}.b--transparent{border-color:transparent}.br0{border-radius:0}.br1{border-radius:.125rem}.br2{border-radius:.25rem}.br3{border-radius:.5rem}.br4{border-radius:1rem}.br-100{border-radius:100%}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-right-radius:0}.br--right,.br--top{border-bottom-left-radius:0}.br--right{border-top-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}.bw0{border-width:0}.bw1{border-width:.125rem}.bw2{border-width:.25rem}.bw3{border-width:.5rem}.bw4{border-width:1rem}.bw5{border-width:2rem}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}.shadow-1{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.pre{overflow-x:auto;overflow-y:hidden;overflow:scroll}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:1rem}.right-1{right:1rem}.bottom-1{bottom:1rem}.left-1{left:1rem}.top-2{top:2rem}.right-2{right:2rem}.bottom-2{bottom:2rem}.left-2{left:2rem}.top--1{top:-1rem}.right--1{right:-1rem}.bottom--1{bottom:-1rem}.left--1{left:-1rem}.top--2{top:-2rem}.right--2{right:-2rem}.bottom--2{bottom:-2rem}.left--2{left:-2rem}.absolute--fill{top:0;right:0;bottom:0;left:0}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.dit{display:inline-table}.dt{display:table}.dtc{display:table-cell}.dt-row{display:table-row}.dt-row-group{display:table-row-group}.dt-column{display:table-column}.dt-column-group{display:table-column-group}.dt--fixed{table-layout:fixed;width:100%}.flex{display:flex}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}.fl{float:left}.fl,.fr{_display:inline}.fr{float:right}.fn{float:none}.sans-serif{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif}.serif{font-family:georgia,times,serif}.system-sans-serif{font-family:sans-serif}.system-serif{font-family:serif}.code,code{font-family:Consolas,monaco,monospace}.helvetica{font-family:helvetica neue,helvetica,sans-serif}.avenir{font-family:avenir next,avenir,sans-serif}.georgia{font-family:georgia,serif}.times{font-family:times,serif}.bodoni{font-family:Bodoni MT,serif}.calisto{font-family:Calisto MT,serif}.baskerville,.garamond{font-family:garamond,serif}.i{font-style:italic}.fs-normal{font-style:normal}.normal{font-weight:400}.b{font-weight:700}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}.input-reset{-webkit-appearance:none;-moz-appearance:none}.h1{height:1rem}.h2{height:2rem}.h3{height:4rem}.h4{height:8rem}.h5{height:16rem}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.h-auto{height:auto}.h-inherit{height:inherit}.tracked{letter-spacing:.16em}.tracked-tight{letter-spacing:-.05em}.tracked-mega{letter-spacing:.32em}.lh-solid{line-height:1}.lh-title{line-height:1.3}.lh-copy{line-height:1.6}.link{text-decoration:none}.link,.link:active,.link:focus,.link:hover,.link:link,.link:visited{transition:color .15s ease-in}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}.w1{width:1rem}.w2{width:2rem}.w3{width:4rem}.w4{width:8rem}.w5{width:16rem}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-33{width:33%}.w-34{width:34%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-75{width:75%}.w-80{width:80%}.w-100{width:100%}.w-auto{width:auto}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.o-100{opacity:1}.o-90{opacity:.9}.o-80{opacity:.8}.o-70{opacity:.7}.o-60{opacity:.6}.o-50{opacity:.5}.o-40{opacity:.4}.o-30{opacity:.3}.o-20{opacity:.2}.o-10{opacity:.1}.o-05{opacity:.05}.o-025{opacity:.025}.o-0{opacity:0}.black-90{color:rgba(0,0,0,.9)}.black-80{color:rgba(0,0,0,.8)}.black-70{color:rgba(0,0,0,.7)}.black-60{color:rgba(0,0,0,.6)}.black-50{color:rgba(0,0,0,.5)}.black-40{color:rgba(0,0,0,.4)}.black-30{color:rgba(0,0,0,.3)}.black-20{color:rgba(0,0,0,.2)}.black-10{color:rgba(0,0,0,.1)}.black-05{color:rgba(0,0,0,.05)}.white-90{color:hsla(0,0%,100%,.9)}.white-80{color:hsla(0,0%,100%,.8)}.white-70{color:hsla(0,0%,100%,.7)}.white-60{color:hsla(0,0%,100%,.6)}.white-50{color:hsla(0,0%,100%,.5)}.white-40{color:hsla(0,0%,100%,.4)}.white-30{color:hsla(0,0%,100%,.3)}.white-20{color:hsla(0,0%,100%,.2)}.white-10{color:hsla(0,0%,100%,.1)}.black{color:#000}.near-black{color:#111}.dark-gray{color:#333}.mid-gray{color:#555}.gray{color:#777}.silver{color:#999}.light-silver{color:#aaa}.moon-gray{color:#ccc}.light-gray{color:#eee}.near-white{color:#f4f4f4}.white{color:#fff}.dark-red{color:#f00008}.red{color:#ff3223}.orange{color:#f3a801}.gold{color:#f2c800}.yellow{color:#ffde37}.purple{color:#7d5da9}.light-purple{color:#8d4f92}.hot-pink{color:#d62288}.dark-pink{color:#c64774}.pink{color:#f49cc8}.dark-green{color:#006c71}.green{color:#41d69f}.navy{color:#001b44}.dark-blue{color:#00449e}.blue{color:#357edd}.light-blue{color:#96ccff}.lightest-blue{color:#cdecff}.washed-blue{color:#f6fffe}.washed-green{color:#e8fdf5}.washed-yellow{color:#fff8d5}.light-pink{color:#efa4b8}.light-yellow{color:#f3dd70}.light-red{color:#ffd3c0}.bg-black-90{background-color:rgba(0,0,0,.9)}.bg-black-80{background-color:rgba(0,0,0,.8)}.bg-black-70{background-color:rgba(0,0,0,.7)}.bg-black-60{background-color:rgba(0,0,0,.6)}.bg-black-50{background-color:rgba(0,0,0,.5)}.bg-black-40{background-color:rgba(0,0,0,.4)}.bg-black-30{background-color:rgba(0,0,0,.3)}.bg-black-20{background-color:rgba(0,0,0,.2)}.bg-black-10{background-color:rgba(0,0,0,.1)}.bg-black-05{background-color:rgba(0,0,0,.05)}.bg-white-90{background-color:hsla(0,0%,100%,.9)}.bg-white-80{background-color:hsla(0,0%,100%,.8)}.bg-white-70{background-color:hsla(0,0%,100%,.7)}.bg-white-60{background-color:hsla(0,0%,100%,.6)}.bg-white-50{background-color:hsla(0,0%,100%,.5)}.bg-white-40{background-color:hsla(0,0%,100%,.4)}.bg-white-30{background-color:hsla(0,0%,100%,.3)}.bg-white-20{background-color:hsla(0,0%,100%,.2)}.bg-white-10{background-color:hsla(0,0%,100%,.1)}.bg-black{background-color:#000}.bg-near-black{background-color:#111}.bg-dark-gray{background-color:#333}.bg-mid-gray{background-color:#555}.bg-gray{background-color:#777}.bg-silver{background-color:#999}.bg-light-silver{background-color:#aaa}.bg-moon-gray{background-color:#ccc}.bg-light-gray{background-color:#eee}.bg-near-white{background-color:#f4f4f4}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.bg-dark-red{background-color:#f00008}.bg-red{background-color:#ff3223}.bg-orange{background-color:#f3a801}.bg-gold{background-color:#f2c800}.bg-yellow{background-color:#ffde37}.bg-purple{background-color:#7d5da9}.bg-light-purple{background-color:#8d4f92}.bg-hot-pink{background-color:#d62288}.bg-dark-pink{background-color:#c64774}.bg-pink{background-color:#f49cc8}.bg-dark-green{background-color:#006c71}.bg-green{background-color:#41d69f}.bg-navy{background-color:#001b44}.bg-dark-blue{background-color:#00449e}.bg-blue{background-color:#357edd}.bg-light-blue{background-color:#96ccff}.bg-lightest-blue{background-color:#cdecff}.bg-washed-blue{background-color:#f6fffe}.bg-washed-green{background-color:#e8fdf5}.bg-washed-yellow{background-color:#fff8d5}.bg-light-pink{background-color:#efa4b8}.bg-light-yellow{background-color:#f3dd70}.bg-light-red{background-color:#ffd3c0}.hover-black:hover{color:#000}.hover-near-black:hover{color:#111}.hover-dark-gray:hover{color:#333}.hover-mid-gray:hover{color:#555}.hover-gray:hover{color:#777}.hover-silver:hover{color:#999}.hover-light-silver:hover{color:#aaa}.hover-moon-gray:hover{color:#ccc}.hover-light-gray:hover{color:#eee}.hover-near-white:hover{color:#f4f4f4}.hover-white:hover{color:#fff}.hover-bg-black:hover{background-color:#000}.hover-bg-near-black:hover{background-color:#111}.hover-bg-dark-gray:hover{background-color:#333}.hover-bg-mid-gray:hover{background-color:#555}.hover-bg-gray:hover{background-color:#777}.hover-bg-silver:hover{background-color:#999}.hover-bg-light-silver:hover{background-color:#aaa}.hover-bg-moon-gray:hover{background-color:#ccc}.hover-bg-light-gray:hover{background-color:#eee}.hover-bg-near-white:hover{background-color:#f4f4f4}.hover-bg-white:hover{background-color:#fff}.hover-bg-transparent:hover{background-color:transparent}.hover-bg-dark-red:hover{background-color:#f00008}.hover-bg-red:hover{background-color:#ff3223}.hover-bg-orange:hover{background-color:#f3a801}.hover-bg-gold:hover{background-color:#f2c800}.hover-bg-yellow:hover{background-color:#ffde37}.hover-bg-purple:hover{background-color:#7d5da9}.hover-bg-light-purple:hover{background-color:#8d4f92}.hover-bg-hot-pink:hover{background-color:#d62288}.hover-bg-dark-pink:hover{background-color:#c64774}.hover-bg-pink:hover{background-color:#f49cc8}.hover-bg-dark-green:hover{background-color:#006c71}.hover-bg-green:hover{background-color:#41d69f}.hover-bg-navy:hover{background-color:#001b44}.hover-bg-dark-blue:hover{background-color:#00449e}.hover-bg-blue:hover{background-color:#357edd}.hover-bg-light-blue:hover{background-color:#96ccff}.hover-bg-lightest-blue:hover{background-color:#cdecff}.hover-bg-washed-blue:hover{background-color:#f6fffe}.hover-bg-washed-green:hover{background-color:#e8fdf5}.hover-bg-washed-yellow:hover{background-color:#fff8d5}.hover-bg-light-pink:hover{background-color:#efa4b8}.hover-bg-light-yellow:hover{background-color:#f3dd70}.hover-bg-light-red:hover{background-color:#ffd3c0}.pa0{padding:0}.pa1{padding:.25rem}.pa2{padding:.5rem}.pa3{padding:1rem}.pa4{padding:2rem}.pa5{padding:4rem}.pa6{padding:8rem}.pa7{padding:16rem}.pl0{padding-left:0}.pl1{padding-left:.25rem}.pl2{padding-left:.5rem}.pl3{padding-left:1rem}.pl4{padding-left:2rem}.pl5{padding-left:4rem}.pl6{padding-left:8rem}.pl7{padding-left:16rem}.pr0{padding-right:0}.pr1{padding-right:.25rem}.pr2{padding-right:.5rem}.pr3{padding-right:1rem}.pr4{padding-right:2rem}.pr5{padding-right:4rem}.pr6{padding-right:8rem}.pr7{padding-right:16rem}.pb0{padding-bottom:0}.pb1{padding-bottom:.25rem}.pb2{padding-bottom:.5rem}.pb3{padding-bottom:1rem}.pb4{padding-bottom:2rem}.pb5{padding-bottom:4rem}.pb6{padding-bottom:8rem}.pb7{padding-bottom:16rem}.pt0{padding-top:0}.pt1{padding-top:.25rem}.pt2{padding-top:.5rem}.pt3{padding-top:1rem}.pt4{padding-top:2rem}.pt5{padding-top:4rem}.pt6{padding-top:8rem}.pt7{padding-top:16rem}.pv0{padding-top:0;padding-bottom:0}.pv1{padding-top:.25rem;padding-bottom:.25rem}.pv2{padding-top:.5rem;padding-bottom:.5rem}.pv3{padding-top:1rem;padding-bottom:1rem}.pv4{padding-top:2rem;padding-bottom:2rem}.pv5{padding-top:4rem;padding-bottom:4rem}.pv6{padding-top:8rem;padding-bottom:8rem}.pv7{padding-top:16rem;padding-bottom:16rem}.ph0{padding-left:0;padding-right:0}.ph1{padding-left:.25rem;padding-right:.25rem}.ph2{padding-left:.5rem;padding-right:.5rem}.ph3{padding-left:1rem;padding-right:1rem}.ph4{padding-left:2rem;padding-right:2rem}.ph5{padding-left:4rem;padding-right:4rem}.ph6{padding-left:8rem;padding-right:8rem}.ph7{padding-left:16rem;padding-right:16rem}.ma0{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.ma7{margin:16rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.ml7{margin-left:16rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mr7{margin-right:16rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.mb7{margin-bottom:16rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mt7{margin-top:16rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mv7{margin-top:16rem;margin-bottom:16rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mh7{margin-left:16rem;margin-right:16rem}.collapse{border-collapse:collapse;border-spacing:0}.striped--moon-gray:nth-child(odd){background-color:#aaa;background-color:#ccc}.striped--light-gray:nth-child(odd){background-color:#eee}.striped--near-white:nth-child(odd){background-color:#f4f4f4}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}.f-6,.f-headline{font-size:6rem}.f-5,.f-subheadline{font-size:5rem}.f1{font-size:3rem}.f2{font-size:2.25rem}.f3{font-size:1.5rem}.f4{font-size:1.25rem}.f5{font-size:1rem}.f6{font-size:.875rem}.measure{max-width:30em}.measure-wide{max-width:34em}.measure-narrow{max-width:20em}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aspect-ratio{height:0;position:relative}.aspect-ratio--16x9{padding-bottom:56.25%}.aspect-ratio--4x3{padding-bottom:75%}.aspect-ratio--8x5{padding-bottom:62.5%}.aspect-ratio--object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1}.overflow-container{overflow-y:scroll}.center{margin-right:auto;margin-left:auto}.clip{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}.dim{opacity:1}.dim,.dim:focus,.dim:hover{transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5}.dim:active{opacity:.8;transition:opacity .15s ease-out}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:active .child,.hide-child:focus .child,.hide-child:hover .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:focus,.underline-hover:hover{text-decoration:underline}.grow{transition:transform .2s}.grow:hover{transform:scale(1.05)}.grow-large{transition:transform .2s}.grow-large:hover{transform:scale(1.2)}.pointer:hover{cursor:pointer}.debug *{outline:1px solid gold}@media screen and (min-width:30em){.cover-ns{background-size:cover}.contain-ns{background-size:contain}.ba-ns{border-style:solid;border-width:1px}.bt-ns{border-top-style:solid;border-top-width:1px}.br-ns{border-right-style:solid;border-right-width:1px}.bb-ns{border-bottom-style:solid;border-bottom-width:1px}.bl-ns{border-left-style:solid;border-left-width:1px}.bn-ns{border-style:none;border-width:0}.br0-ns{border-radius:0}.br1-ns{border-radius:.125rem}.br2-ns{border-radius:.25rem}.br3-ns{border-radius:.5rem}.br4-ns{border-radius:1rem}.br-100-ns{border-radius:100%}.br--bottom-ns{border-top-left-radius:0;border-top-right-radius:0}.br--top-ns{border-bottom-right-radius:0}.br--right-ns,.br--top-ns{border-bottom-left-radius:0}.br--right-ns{border-top-left-radius:0}.br--left-ns{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted-ns{border-style:dotted}.b--dashed-ns{border-style:dashed}.b--solid-ns{border-style:solid}.b--none-ns{border-style:none}.bw0-ns{border-width:0}.bw1-ns{border-width:.125rem}.bw2-ns{border-width:.25rem}.bw3-ns{border-width:.5rem}.bw4-ns{border-width:1rem}.bw5-ns{border-width:2rem}.bt-0-ns{border-top-width:0}.br-0-ns{border-right-width:0}.bb-0-ns{border-bottom-width:0}.bl-0-ns{border-left-width:0}.shadow-1-ns{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-ns{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-ns{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-ns{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-ns{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-ns{top:0}.left-0-ns{left:0}.right-0-ns{right:0}.bottom-0-ns{bottom:0}.top-1-ns{top:1rem}.left-1-ns{left:1rem}.right-1-ns{right:1rem}.bottom-1-ns{bottom:1rem}.top-2-ns{top:2rem}.left-2-ns{left:2rem}.right-2-ns{right:2rem}.bottom-2-ns{bottom:2rem}.top--1-ns{top:-1rem}.right--1-ns{right:-1rem}.bottom--1-ns{bottom:-1rem}.left--1-ns{left:-1rem}.top--2-ns{top:-2rem}.right--2-ns{right:-2rem}.bottom--2-ns{bottom:-2rem}.left--2-ns{left:-2rem}.absolute--fill-ns{top:0;right:0;bottom:0;left:0}.cl-ns{clear:left}.cr-ns{clear:right}.cb-ns{clear:both}.cn-ns{clear:none}.dn-ns{display:none}.di-ns{display:inline}.db-ns{display:block}.dib-ns{display:inline-block}.dit-ns{display:inline-table}.dt-ns{display:table}.dtc-ns{display:table-cell}.dt-row-ns{display:table-row}.dt-row-group-ns{display:table-row-group}.dt-column-ns{display:table-column}.dt-column-group-ns{display:table-column-group}.dt--fixed-ns{table-layout:fixed;width:100%}.flex-ns{display:flex}.flex-auto-ns{flex:1 1 auto;min-width:0;min-height:0}.flex-none-ns{flex:none}.flex-column-ns{flex-direction:column}.flex-wrap-ns{flex-wrap:wrap}.items-start-ns{align-items:flex-start}.items-end-ns{align-items:flex-end}.items-center-ns{align-items:center}.items-baseline-ns{align-items:baseline}.items-stretch-ns{align-items:stretch}.self-start-ns{align-self:flex-start}.self-end-ns{align-self:flex-end}.self-center-ns{align-self:center}.self-baseline-ns{align-self:baseline}.self-stretch-ns{align-self:stretch}.justify-start-ns{justify-content:flex-start}.justify-end-ns{justify-content:flex-end}.justify-center-ns{justify-content:center}.justify-between-ns{justify-content:space-between}.justify-around-ns{justify-content:space-around}.content-start-ns{align-content:flex-start}.content-end-ns{align-content:flex-end}.content-center-ns{align-content:center}.content-between-ns{align-content:space-between}.content-around-ns{align-content:space-around}.content-stretch-ns{align-content:stretch}.order-0-ns{order:0}.order-1-ns{order:1}.order-2-ns{order:2}.order-3-ns{order:3}.order-4-ns{order:4}.order-5-ns{order:5}.order-6-ns{order:6}.order-7-ns{order:7}.order-8-ns{order:8}.order-last-ns{order:99999}.fl-ns{float:left}.fl-ns,.fr-ns{display:inline}.fr-ns{float:right}.fn-ns{float:none}.i-ns{font-style:italic}.fs-normal-ns{font-style:normal}.normal-ns{font-weight:400}.b-ns{font-weight:700}.fw1-ns{font-weight:100}.fw2-ns{font-weight:200}.fw3-ns{font-weight:300}.fw4-ns{font-weight:400}.fw5-ns{font-weight:500}.fw6-ns{font-weight:600}.fw7-ns{font-weight:700}.fw8-ns{font-weight:800}.fw9-ns{font-weight:900}.h1-ns{height:1rem}.h2-ns{height:2rem}.h3-ns{height:4rem}.h4-ns{height:8rem}.h5-ns{height:16rem}.h-25-ns{height:25%}.h-50-ns{height:50%}.h-75-ns{height:75%}.h-100-ns{height:100%}.h-auto-ns{height:auto}.h-inherit-ns{height:inherit}.tracked-ns{letter-spacing:.16em}.tracked-tight-ns{letter-spacing:-.05em}.tracked-mega-ns{letter-spacing:.32em}.lh-solid-ns{line-height:1}.lh-title-ns{line-height:1.3}.lh-copy-ns{line-height:1.6}.mw-100-ns{max-width:100%}.mw1-ns{max-width:1rem}.mw2-ns{max-width:2rem}.mw3-ns{max-width:4rem}.mw4-ns{max-width:8rem}.mw5-ns{max-width:16rem}.mw6-ns{max-width:32rem}.mw7-ns{max-width:48rem}.mw8-ns{max-width:64rem}.mw9-ns{max-width:96rem}.mw-none-ns{max-width:none}.w1-ns{width:1rem}.w2-ns{width:2rem}.w3-ns{width:4rem}.w4-ns{width:8rem}.w5-ns{width:16rem}.w-10-ns{width:10%}.w-20-ns{width:20%}.w-25-ns{width:25%}.w-33-ns{width:33%}.w-34-ns{width:34%}.w-40-ns{width:40%}.w-50-ns{width:50%}.w-60-ns{width:60%}.w-75-ns{width:75%}.w-80-ns{width:80%}.w-100-ns{width:100%}.w-auto-ns{width:auto}.overflow-visible-ns{overflow:visible}.overflow-hidden-ns{overflow:hidden}.overflow-scroll-ns{overflow:scroll}.overflow-auto-ns{overflow:auto}.overflow-x-visible-ns{overflow-x:visible}.overflow-x-hidden-ns{overflow-x:hidden}.overflow-x-scroll-ns{overflow-x:scroll}.overflow-x-auto-ns{overflow-x:auto}.overflow-y-visible-ns{overflow-y:visible}.overflow-y-hidden-ns{overflow-y:hidden}.overflow-y-scroll-ns{overflow-y:scroll}.overflow-y-auto-ns{overflow-y:auto}.static-ns{position:static}.relative-ns{position:relative}.absolute-ns{position:absolute}.fixed-ns{position:fixed}.pa0-ns{padding:0}.pa1-ns{padding:.25rem}.pa2-ns{padding:.5rem}.pa3-ns{padding:1rem}.pa4-ns{padding:2rem}.pa5-ns{padding:4rem}.pa6-ns{padding:8rem}.pa7-ns{padding:16rem}.pl0-ns{padding-left:0}.pl1-ns{padding-left:.25rem}.pl2-ns{padding-left:.5rem}.pl3-ns{padding-left:1rem}.pl4-ns{padding-left:2rem}.pl5-ns{padding-left:4rem}.pl6-ns{padding-left:8rem}.pl7-ns{padding-left:16rem}.pr0-ns{padding-right:0}.pr1-ns{padding-right:.25rem}.pr2-ns{padding-right:.5rem}.pr3-ns{padding-right:1rem}.pr4-ns{padding-right:2rem}.pr5-ns{padding-right:4rem}.pr6-ns{padding-right:8rem}.pr7-ns{padding-right:16rem}.pb0-ns{padding-bottom:0}.pb1-ns{padding-bottom:.25rem}.pb2-ns{padding-bottom:.5rem}.pb3-ns{padding-bottom:1rem}.pb4-ns{padding-bottom:2rem}.pb5-ns{padding-bottom:4rem}.pb6-ns{padding-bottom:8rem}.pb7-ns{padding-bottom:16rem}.pt0-ns{padding-top:0}.pt1-ns{padding-top:.25rem}.pt2-ns{padding-top:.5rem}.pt3-ns{padding-top:1rem}.pt4-ns{padding-top:2rem}.pt5-ns{padding-top:4rem}.pt6-ns{padding-top:8rem}.pt7-ns{padding-top:16rem}.pv0-ns{padding-top:0;padding-bottom:0}.pv1-ns{padding-top:.25rem;padding-bottom:.25rem}.pv2-ns{padding-top:.5rem;padding-bottom:.5rem}.pv3-ns{padding-top:1rem;padding-bottom:1rem}.pv4-ns{padding-top:2rem;padding-bottom:2rem}.pv5-ns{padding-top:4rem;padding-bottom:4rem}.pv6-ns{padding-top:8rem;padding-bottom:8rem}.pv7-ns{padding-top:16rem;padding-bottom:16rem}.ph0-ns{padding-left:0;padding-right:0}.ph1-ns{padding-left:.25rem;padding-right:.25rem}.ph2-ns{padding-left:.5rem;padding-right:.5rem}.ph3-ns{padding-left:1rem;padding-right:1rem}.ph4-ns{padding-left:2rem;padding-right:2rem}.ph5-ns{padding-left:4rem;padding-right:4rem}.ph6-ns{padding-left:8rem;padding-right:8rem}.ph7-ns{padding-left:16rem;padding-right:16rem}.ma0-ns{margin:0}.ma1-ns{margin:.25rem}.ma2-ns{margin:.5rem}.ma3-ns{margin:1rem}.ma4-ns{margin:2rem}.ma5-ns{margin:4rem}.ma6-ns{margin:8rem}.ma7-ns{margin:16rem}.ml0-ns{margin-left:0}.ml1-ns{margin-left:.25rem}.ml2-ns{margin-left:.5rem}.ml3-ns{margin-left:1rem}.ml4-ns{margin-left:2rem}.ml5-ns{margin-left:4rem}.ml6-ns{margin-left:8rem}.ml7-ns{margin-left:16rem}.mr0-ns{margin-right:0}.mr1-ns{margin-right:.25rem}.mr2-ns{margin-right:.5rem}.mr3-ns{margin-right:1rem}.mr4-ns{margin-right:2rem}.mr5-ns{margin-right:4rem}.mr6-ns{margin-right:8rem}.mr7-ns{margin-right:16rem}.mb0-ns{margin-bottom:0}.mb1-ns{margin-bottom:.25rem}.mb2-ns{margin-bottom:.5rem}.mb3-ns{margin-bottom:1rem}.mb4-ns{margin-bottom:2rem}.mb5-ns{margin-bottom:4rem}.mb6-ns{margin-bottom:8rem}.mb7-ns{margin-bottom:16rem}.mt0-ns{margin-top:0}.mt1-ns{margin-top:.25rem}.mt2-ns{margin-top:.5rem}.mt3-ns{margin-top:1rem}.mt4-ns{margin-top:2rem}.mt5-ns{margin-top:4rem}.mt6-ns{margin-top:8rem}.mt7-ns{margin-top:16rem}.mv0-ns{margin-top:0;margin-bottom:0}.mv1-ns{margin-top:.25rem;margin-bottom:.25rem}.mv2-ns{margin-top:.5rem;margin-bottom:.5rem}.mv3-ns{margin-top:1rem;margin-bottom:1rem}.mv4-ns{margin-top:2rem;margin-bottom:2rem}.mv5-ns{margin-top:4rem;margin-bottom:4rem}.mv6-ns{margin-top:8rem;margin-bottom:8rem}.mv7-ns{margin-top:16rem;margin-bottom:16rem}.mh0-ns{margin-left:0;margin-right:0}.mh1-ns{margin-left:.25rem;margin-right:.25rem}.mh2-ns{margin-left:.5rem;margin-right:.5rem}.mh3-ns{margin-left:1rem;margin-right:1rem}.mh4-ns{margin-left:2rem;margin-right:2rem}.mh5-ns{margin-left:4rem;margin-right:4rem}.mh6-ns{margin-left:8rem;margin-right:8rem}.mh7-ns{margin-left:16rem;margin-right:16rem}.strike-ns{text-decoration:line-through}.underline-ns{text-decoration:underline}.no-underline-ns{text-decoration:none}.tl-ns{text-align:left}.tr-ns{text-align:right}.tc-ns{text-align:center}.ttc-ns{text-transform:capitalize}.ttl-ns{text-transform:lowercase}.ttu-ns{text-transform:uppercase}.ttn-ns{text-transform:none}.f-6-ns,.f-headline-ns{font-size:6rem}.f-5-ns,.f-subheadline-ns{font-size:5rem}.f1-ns{font-size:3rem}.f2-ns{font-size:2.25rem}.f3-ns{font-size:1.5rem}.f4-ns{font-size:1.25rem}.f5-ns{font-size:1rem}.f6-ns{font-size:.875rem}.measure-ns{max-width:30em}.measure-wide-ns{max-width:34em}.measure-narrow-ns{max-width:20em}.indent-ns{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-ns{font-variant:small-caps}.truncate-ns{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-ns{position:fixed!important;position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-ns{white-space:normal}.nowrap-ns{white-space:nowrap}.pre-ns{white-space:pre}.v-base-ns{vertical-align:baseline}.v-mid-ns{vertical-align:middle}.v-top-ns{vertical-align:top}.v-btm-ns{vertical-align:bottom}}@media screen and (min-width:30em) and (max-width:60em){.cover-m{background-size:cover}.contain-m{background-size:contain}.ba-m{border-style:solid;border-width:1px}.bt-m{border-top-style:solid;border-top-width:1px}.br-m{border-right-style:solid;border-right-width:1px}.bb-m{border-bottom-style:solid;border-bottom-width:1px}.bl-m{border-left-style:solid;border-left-width:1px}.bn-m{border-style:none;border-width:0}.br0-m{border-radius:0}.br1-m{border-radius:.125rem}.br2-m{border-radius:.25rem}.br3-m{border-radius:.5rem}.br4-m{border-radius:1rem}.br-100-m{border-radius:100%}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-right-radius:0}.br--right-m,.br--top-m{border-bottom-left-radius:0}.br--right-m{border-top-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}.bw0-m{border-width:0}.bw1-m{border-width:.125rem}.bw2-m{border-width:.25rem}.bw3-m{border-width:.5rem}.bw4-m{border-width:1rem}.bw5-m{border-width:2rem}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}.shadow-1-m{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-m{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-m{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-m{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-m{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:1rem}.left-1-m{left:1rem}.right-1-m{right:1rem}.bottom-1-m{bottom:1rem}.top-2-m{top:2rem}.left-2-m{left:2rem}.right-2-m{right:2rem}.bottom-2-m{bottom:2rem}.top--1-m{top:-1rem}.right--1-m{right:-1rem}.bottom--1-m{bottom:-1rem}.left--1-m{left:-1rem}.top--2-m{top:-2rem}.right--2-m{right:-2rem}.bottom--2-m{bottom:-2rem}.left--2-m{left:-2rem}.absolute--fill-m{top:0;right:0;bottom:0;left:0}.cl-m{clear:left}.cr-m{clear:right}.cb-m{clear:both}.cn-m{clear:none}.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.dit-m{display:inline-table}.dt-m{display:table}.dtc-m{display:table-cell}.dt-row-m{display:table-row}.dt-row-group-m{display:table-row-group}.dt-column-m{display:table-column}.dt-column-group-m{display:table-column-group}.dt--fixed-m{table-layout:fixed;width:100%}.flex-m{display:flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-column-m{flex-direction:column}.flex-wrap-m{flex-wrap:wrap}.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}.fl-m{float:left}.fl-m,.fr-m{display:inline}.fr-m{float:right}.fn-m{float:none}.i-m{font-style:italic}.fs-normal-m{font-style:normal}.normal-m{font-weight:400}.b-m{font-weight:700}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-25-m{height:25%}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.h-auto-m{height:auto}.h-inherit-m{height:inherit}.tracked-m{letter-spacing:.16em}.tracked-tight-m{letter-spacing:-.05em}.tracked-mega-m{letter-spacing:.32em}.lh-solid-m{line-height:1}.lh-title-m{line-height:1.3}.lh-copy-m{line-height:1.6}.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}.w1-m{width:1rem}.w2-m{width:2rem}.w3-m{width:4rem}.w4-m{width:8rem}.w5-m{width:16rem}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-33-m{width:33%}.w-34-m{width:34%}.w-40-m{width:40%}.w-50-m{width:50%}.w-60-m{width:60%}.w-75-m{width:75%}.w-80-m{width:80%}.w-100-m{width:100%}.w-auto-m{width:auto}.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}.pa0-m{padding:0}.pa1-m{padding:.25rem}.pa2-m{padding:.5rem}.pa3-m{padding:1rem}.pa4-m{padding:2rem}.pa5-m{padding:4rem}.pa6-m{padding:8rem}.pa7-m{padding:16rem}.pl0-m{padding-left:0}.pl1-m{padding-left:.25rem}.pl2-m{padding-left:.5rem}.pl3-m{padding-left:1rem}.pl4-m{padding-left:2rem}.pl5-m{padding-left:4rem}.pl6-m{padding-left:8rem}.pl7-m{padding-left:16rem}.pr0-m{padding-right:0}.pr1-m{padding-right:.25rem}.pr2-m{padding-right:.5rem}.pr3-m{padding-right:1rem}.pr4-m{padding-right:2rem}.pr5-m{padding-right:4rem}.pr6-m{padding-right:8rem}.pr7-m{padding-right:16rem}.pb0-m{padding-bottom:0}.pb1-m{padding-bottom:.25rem}.pb2-m{padding-bottom:.5rem}.pb3-m{padding-bottom:1rem}.pb4-m{padding-bottom:2rem}.pb5-m{padding-bottom:4rem}.pb6-m{padding-bottom:8rem}.pb7-m{padding-bottom:16rem}.pt0-m{padding-top:0}.pt1-m{padding-top:.25rem}.pt2-m{padding-top:.5rem}.pt3-m{padding-top:1rem}.pt4-m{padding-top:2rem}.pt5-m{padding-top:4rem}.pt6-m{padding-top:8rem}.pt7-m{padding-top:16rem}.pv0-m{padding-top:0;padding-bottom:0}.pv1-m{padding-top:.25rem;padding-bottom:.25rem}.pv2-m{padding-top:.5rem;padding-bottom:.5rem}.pv3-m{padding-top:1rem;padding-bottom:1rem}.pv4-m{padding-top:2rem;padding-bottom:2rem}.pv5-m{padding-top:4rem;padding-bottom:4rem}.pv6-m{padding-top:8rem;padding-bottom:8rem}.pv7-m{padding-top:16rem;padding-bottom:16rem}.ph0-m{padding-left:0;padding-right:0}.ph1-m{padding-left:.25rem;padding-right:.25rem}.ph2-m{padding-left:.5rem;padding-right:.5rem}.ph3-m{padding-left:1rem;padding-right:1rem}.ph4-m{padding-left:2rem;padding-right:2rem}.ph5-m{padding-left:4rem;padding-right:4rem}.ph6-m{padding-left:8rem;padding-right:8rem}.ph7-m{padding-left:16rem;padding-right:16rem}.ma0-m{margin:0}.ma1-m{margin:.25rem}.ma2-m{margin:.5rem}.ma3-m{margin:1rem}.ma4-m{margin:2rem}.ma5-m{margin:4rem}.ma6-m{margin:8rem}.ma7-m{margin:16rem}.ml0-m{margin-left:0}.ml1-m{margin-left:.25rem}.ml2-m{margin-left:.5rem}.ml3-m{margin-left:1rem}.ml4-m{margin-left:2rem}.ml5-m{margin-left:4rem}.ml6-m{margin-left:8rem}.ml7-m{margin-left:16rem}.mr0-m{margin-right:0}.mr1-m{margin-right:.25rem}.mr2-m{margin-right:.5rem}.mr3-m{margin-right:1rem}.mr4-m{margin-right:2rem}.mr5-m{margin-right:4rem}.mr6-m{margin-right:8rem}.mr7-m{margin-right:16rem}.mb0-m{margin-bottom:0}.mb1-m{margin-bottom:.25rem}.mb2-m{margin-bottom:.5rem}.mb3-m{margin-bottom:1rem}.mb4-m{margin-bottom:2rem}.mb5-m{margin-bottom:4rem}.mb6-m{margin-bottom:8rem}.mb7-m{margin-bottom:16rem}.mt0-m{margin-top:0}.mt1-m{margin-top:.25rem}.mt2-m{margin-top:.5rem}.mt3-m{margin-top:1rem}.mt4-m{margin-top:2rem}.mt5-m{margin-top:4rem}.mt6-m{margin-top:8rem}.mt7-m{margin-top:16rem}.mv0-m{margin-top:0;margin-bottom:0}.mv1-m{margin-top:.25rem;margin-bottom:.25rem}.mv2-m{margin-top:.5rem;margin-bottom:.5rem}.mv3-m{margin-top:1rem;margin-bottom:1rem}.mv4-m{margin-top:2rem;margin-bottom:2rem}.mv5-m{margin-top:4rem;margin-bottom:4rem}.mv6-m{margin-top:8rem;margin-bottom:8rem}.mv7-m{margin-top:16rem;margin-bottom:16rem}.mh0-m{margin-left:0;margin-right:0}.mh1-m{margin-left:.25rem;margin-right:.25rem}.mh2-m{margin-left:.5rem;margin-right:.5rem}.mh3-m{margin-left:1rem;margin-right:1rem}.mh4-m{margin-left:2rem;margin-right:2rem}.mh5-m{margin-left:4rem;margin-right:4rem}.mh6-m{margin-left:8rem;margin-right:8rem}.mh7-m{margin-left:16rem;margin-right:16rem}.strike-m{text-decoration:line-through}.underline-m{text-decoration:underline}.no-underline-m{text-decoration:none}.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}.f-6-m,.f-headline-m{font-size:6rem}.f-5-m,.f-subheadline-m{font-size:5rem}.f1-m{font-size:3rem}.f2-m{font-size:2.25rem}.f3-m{font-size:1.5rem}.f4-m{font-size:1.25rem}.f5-m{font-size:1rem}.f6-m{font-size:.875rem}.measure-m{max-width:30em}.measure-wide-m{max-width:34em}.measure-narrow-m{max-width:20em}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-m{font-variant:small-caps}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-m{position:fixed!important;position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@media screen and (min-width:60em){.cover-l{background-size:cover}.contain-l{background-size:contain}.ba-l{border-style:solid;border-width:1px}.bt-l{border-top-style:solid;border-top-width:1px}.br-l{border-right-style:solid;border-right-width:1px}.bb-l{border-bottom-style:solid;border-bottom-width:1px}.bl-l{border-left-style:solid;border-left-width:1px}.bn-l{border-style:none;border-width:0}.br0-l{border-radius:0}.br1-l{border-radius:.125rem}.br2-l{border-radius:.25rem}.br3-l{border-radius:.5rem}.br4-l{border-radius:1rem}.br-100-l{border-radius:100%}.br--bottom-l{border-radius-top-left:0;border-radius-top-right:0}.br--top-l{border-bottom-right-radius:0}.br--right-l,.br--top-l{border-bottom-left-radius:0}.br--right-l{border-top-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}.bw0-l{border-width:0}.bw1-l{border-width:.125rem}.bw2-l{border-width:.25rem}.bw3-l{border-width:.5rem}.bw4-l{border-width:1rem}.bw5-l{border-width:2rem}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}.shadow-1-l{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-l{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-l{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-l{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-l{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:1rem}.left-1-l{left:1rem}.right-1-l{right:1rem}.bottom-1-l{bottom:1rem}.top-2-l{top:2rem}.left-2-l{left:2rem}.right-2-l{right:2rem}.bottom-2-l{bottom:2rem}.top--1-l{top:-1rem}.right--1-l{right:-1rem}.bottom--1-l{bottom:-1rem}.left--1-l{left:-1rem}.top--2-l{top:-2rem}.right--2-l{right:-2rem}.bottom--2-l{bottom:-2rem}.left--2-l{left:-2rem}.absolute--fill-l{top:0;right:0;bottom:0;left:0}.cl-l{clear:left}.cr-l{clear:right}.cb-l{clear:both}.cn-l{clear:none}.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.dit-l{display:inline-table}.dt-l{display:table}.dtc-l{display:table-cell}.dt-row-l{display:table-row}.dt-row-group-l{display:table-row-group}.dt-column-l{display:table-column}.dt-column-group-l{display:table-column-group}.dt--fixed-l{table-layout:fixed;width:100%}.flex-l{display:flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-column-l{flex-direction:column}.flex-wrap-l{flex-wrap:wrap}.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}.fl-l{float:left}.fl-l,.fr-l{display:inline}.fr-l{float:right}.fn-l{float:none}.i-l{font-style:italic}.fs-normal-l{font-style:normal}.normal-l{font-weight:400}.b-l{font-weight:700}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-25-l{height:25%}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.h-auto-l{height:auto}.h-inherit-l{height:inherit}.tracked-l{letter-spacing:.16em}.tracked-tight-l{letter-spacing:-.05em}.tracked-mega-l{letter-spacing:.32em}.lh-solid-l{line-height:1}.lh-title-l{line-height:1.3}.lh-copy-l{line-height:1.6}.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}.w1-l{width:1rem}.w2-l{width:2rem}.w3-l{width:4rem}.w4-l{width:8rem}.w5-l{width:16rem}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-33-l{width:33%}.w-34-l{width:34%}.w-40-l{width:40%}.w-50-l{width:50%}.w-60-l{width:60%}.w-75-l{width:75%}.w-80-l{width:80%}.w-100-l{width:100%}.w-auto-l{width:auto}.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}.pa0-l{padding:0}.pa1-l{padding:.25rem}.pa2-l{padding:.5rem}.pa3-l{padding:1rem}.pa4-l{padding:2rem}.pa5-l{padding:4rem}.pa6-l{padding:8rem}.pa7-l{padding:16rem}.pl0-l{padding-left:0}.pl1-l{padding-left:.25rem}.pl2-l{padding-left:.5rem}.pl3-l{padding-left:1rem}.pl4-l{padding-left:2rem}.pl5-l{padding-left:4rem}.pl6-l{padding-left:8rem}.pl7-l{padding-left:16rem}.pr0-l{padding-right:0}.pr1-l{padding-right:.25rem}.pr2-l{padding-right:.5rem}.pr3-l{padding-right:1rem}.pr4-l{padding-right:2rem}.pr5-l{padding-right:4rem}.pr6-l{padding-right:8rem}.pr7-l{padding-right:16rem}.pb0-l{padding-bottom:0}.pb1-l{padding-bottom:.25rem}.pb2-l{padding-bottom:.5rem}.pb3-l{padding-bottom:1rem}.pb4-l{padding-bottom:2rem}.pb5-l{padding-bottom:4rem}.pb6-l{padding-bottom:8rem}.pb7-l{padding-bottom:16rem}.pt0-l{padding-top:0}.pt1-l{padding-top:.25rem}.pt2-l{padding-top:.5rem}.pt3-l{padding-top:1rem}.pt4-l{padding-top:2rem}.pt5-l{padding-top:4rem}.pt6-l{padding-top:8rem}.pt7-l{padding-top:16rem}.pv0-l{padding-top:0;padding-bottom:0}.pv1-l{padding-top:.25rem;padding-bottom:.25rem}.pv2-l{padding-top:.5rem;padding-bottom:.5rem}.pv3-l{padding-top:1rem;padding-bottom:1rem}.pv4-l{padding-top:2rem;padding-bottom:2rem}.pv5-l{padding-top:4rem;padding-bottom:4rem}.pv6-l{padding-top:8rem;padding-bottom:8rem}.pv7-l{padding-top:16rem;padding-bottom:16rem}.ph0-l{padding-left:0;padding-right:0}.ph1-l{padding-left:.25rem;padding-right:.25rem}.ph2-l{padding-left:.5rem;padding-right:.5rem}.ph3-l{padding-left:1rem;padding-right:1rem}.ph4-l{padding-left:2rem;padding-right:2rem}.ph5-l{padding-left:4rem;padding-right:4rem}.ph6-l{padding-left:8rem;padding-right:8rem}.ph7-l{padding-left:16rem;padding-right:16rem}.ma0-l{margin:0}.ma1-l{margin:.25rem}.ma2-l{margin:.5rem}.ma3-l{margin:1rem}.ma4-l{margin:2rem}.ma5-l{margin:4rem}.ma6-l{margin:8rem}.ma7-l{margin:16rem}.ml0-l{margin-left:0}.ml1-l{margin-left:.25rem}.ml2-l{margin-left:.5rem}.ml3-l{margin-left:1rem}.ml4-l{margin-left:2rem}.ml5-l{margin-left:4rem}.ml6-l{margin-left:8rem}.ml7-l{margin-left:16rem}.mr0-l{margin-right:0}.mr1-l{margin-right:.25rem}.mr2-l{margin-right:.5rem}.mr3-l{margin-right:1rem}.mr4-l{margin-right:2rem}.mr5-l{margin-right:4rem}.mr6-l{margin-right:8rem}.mr7-l{margin-right:16rem}.mb0-l{margin-bottom:0}.mb1-l{margin-bottom:.25rem}.mb2-l{margin-bottom:.5rem}.mb3-l{margin-bottom:1rem}.mb4-l{margin-bottom:2rem}.mb5-l{margin-bottom:4rem}.mb6-l{margin-bottom:8rem}.mb7-l{margin-bottom:16rem}.mt0-l{margin-top:0}.mt1-l{margin-top:.25rem}.mt2-l{margin-top:.5rem}.mt3-l{margin-top:1rem}.mt4-l{margin-top:2rem}.mt5-l{margin-top:4rem}.mt6-l{margin-top:8rem}.mt7-l{margin-top:16rem}.mv0-l{margin-top:0;margin-bottom:0}.mv1-l{margin-top:.25rem;margin-bottom:.25rem}.mv2-l{margin-top:.5rem;margin-bottom:.5rem}.mv3-l{margin-top:1rem;margin-bottom:1rem}.mv4-l{margin-top:2rem;margin-bottom:2rem}.mv5-l{margin-top:4rem;margin-bottom:4rem}.mv6-l{margin-top:8rem;margin-bottom:8rem}.mv7-l{margin-top:16rem;margin-bottom:16rem}.mh0-l{margin-left:0;margin-right:0}.mh1-l{margin-left:.25rem;margin-right:.25rem}.mh2-l{margin-left:.5rem;margin-right:.5rem}.mh3-l{margin-left:1rem;margin-right:1rem}.mh4-l{margin-left:2rem;margin-right:2rem}.mh5-l{margin-left:4rem;margin-right:4rem}.mh6-l{margin-left:8rem;margin-right:8rem}.mh7-l{margin-left:16rem;margin-right:16rem}.strike-l{text-decoration:line-through}.underline-l{text-decoration:underline}.no-underline-l{text-decoration:none}.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}.f-6-l,.f-headline-l{font-size:6rem}.f-5-l,.f-subheadline-l{font-size:5rem}.f1-l{font-size:3rem}.f2-l{font-size:2.25rem}.f3-l{font-size:1.5rem}.f4-l{font-size:1.25rem}.f5-l{font-size:1rem}.f6-l{font-size:.875rem}.measure-l{max-width:30em}.measure-wide-l{max-width:34em}.measure-narrow-l{max-width:20em}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-l{font-variant:small-caps}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-l{position:fixed!important;position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}} | ||
| * { cursor: crosshair; } | ||
| * { cursor: default; } | ||
| #eye-dropper-overlay #color-tooltip, | ||
| #eye-dropper-overlay #color-toolbox { | ||
| z-index: 1000; | ||
| color: black; | ||
| position: absolute; | ||
| display: none; | ||
| font-size: 15px; | ||
| border: 1px solid black; | ||
| } | ||
| #eye-dropper-overlay #color-tooltip { | ||
| width: 10px; | ||
| height: 10px; | ||
| } | ||
| #eye-dropper-overlay #color-toolbox { | ||
| width: 160px; | ||
| height: 42px; | ||
| bottom: 4px; | ||
| right: 4px; | ||
| border-radius: 2px; | ||
| -webkit-box-shadow: 2px 2px 0px rgba(0,0,128,0.25); | ||
| background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f0f0f), to(#3f3f3f)); | ||
| color: white; | ||
| font-family: monospace; | ||
| border: 1px solid transparent; | ||
| position: fixed; | ||
| } | ||
| #eye-dropper-overlay #color-toolbox-color { | ||
| width: 32px; | ||
| height: 32px; | ||
| margin: 4px; | ||
| margin-right: 8px; | ||
| float: left; | ||
| /* -webkit-box-shadow: 2px 2px 0px white; */ | ||
| border: 1px solid white; | ||
| background-color: #ffbbca; | ||
| } | ||
| #eye-dropper-overlay #color-toolbox-text { | ||
| font-size: 11px; | ||
| padding: 5px 0px; | ||
| overflow: hidden; | ||
| text-align: center; | ||
| color: white; | ||
| } |
| { | ||
| "name": "Eye Dropper", | ||
| "version": "0.4.3", | ||
| "manifest_version": 2, | ||
| "description": "Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.", | ||
| "homepage_url": "http://eye-dropper.kepi.cz/", | ||
| "minimum_chrome_version": "49", | ||
| "background": { | ||
| "page": "background.html", | ||
| "persistent": true | ||
| }, | ||
| "options_page": "options.html", | ||
| "icons": { | ||
| "48": "img/icon_48.png", | ||
| "128": "img/icon_128.png" | ||
| }, | ||
| "browser_action": { | ||
| "default_icon": { | ||
| "19": "img/icon_19.png", | ||
| "38": "img/icon_38.png" | ||
| }, | ||
| "default_title": "Eye Dropper", | ||
| "default_popup": "html/popup.html" | ||
| }, | ||
| "permissions": ["activeTab", "storage"], | ||
| "web_accessible_resources": [ | ||
| "inc/jquery-2.1.0.min.js", | ||
| "inc/jquery.scrollstop.js", | ||
| "edropper2.js", | ||
| "inject/anchor-cursor-default.css", | ||
| "inject/anchor-cursor-crosshair.css", | ||
| "inject/edropper2.css" | ||
| ], | ||
| "commands": { | ||
| "activate": { | ||
| "suggested_key": { | ||
| "default": "Alt+P" | ||
| }, | ||
| "description": "Activate pick color from web page" | ||
| } | ||
| } | ||
| } |
| Copyright (c) 2010 Ondřej Kudlík, http://kepi.cz/ | ||
| Permission is hereby granted, free of charge, to any person obtaining | ||
| a copy of this software and associated documentation files (the | ||
| "Software"), to deal in the Software without restriction, including | ||
| without limitation the rights to use, copy, modify, merge, publish, | ||
| distribute, sublicense, and/or sell copies of the Software, and to | ||
| permit persons to whom the Software is furnished to do so, subject to | ||
| the following conditions: | ||
| The above copyright notice and this permission notice shall be | ||
| included in all copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | ||
| EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF | ||
| MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | ||
| NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE | ||
| LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION | ||
| OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION | ||
| WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Eye Dropper - Options</title> | ||
| <link type="text/css" rel="stylesheet" href="/inc/bootstrap/3.3.6/css/bootstrap.min.css"> | ||
| <link type="text/css" rel="stylesheet" href="/inc/bootstrap/3.3.6/css/bootstrap-theme.min.css"> | ||
| <script src="/options.js"></script> | ||
| </head> | ||
| <body id="options-body"> | ||
| <div> | ||
| <div class="jumbotron"> | ||
| <div class="container"> | ||
| <h1>Eye Dropper</h1> | ||
| <p>Settings page</p> | ||
| </div> | ||
| </div> | ||
| <div id="options" class="row"> | ||
| <div class="col-sm-6 col-md-6"> | ||
| <div style="padding-left: 60px;"> | ||
| <fieldset> | ||
| <legend>Webpage Pick Behaviour</legend> | ||
| <div class="checkbox"><label class=""><input type="checkbox" name="autoClipboard" id="autoClipboard"> Automaticaly copy picked color to clipboard</label></div> | ||
| <div class="checkbox"><label class=""><input type="checkbox" name="autoClipboardNoGrid" id="autoClipboardNoGrid"> Do not copy # character, only RGB color</label></div> | ||
| <div class="checkbox"><label class=""><input type="checkbox" name="enableRightClickDeactivate" id="enableRightClickDeactivate"> Disable pick with right mouse click</label></div> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>Webpage Pick Look</legend> | ||
| <div class="controls"> | ||
| <div class="checkbox"><label class=""><input type="checkbox" name="enableColorToolbox" id="enableColorToolbox"> Enable box with color information in right bottom corner</label></div> | ||
| </div> | ||
| <div class="controls"> | ||
| <div class="checkbox"><label class=""><input type="checkbox" name="enableColorTooltip" id="enableColorTooltip"> Enable color tooltip next to the mouse cursor</label></div> | ||
| </div> | ||
| <h5>Dropper cursor</h5> | ||
| <p><em>move mouse over icon to see how it looks like</em></p> | ||
| <div class="controls"> | ||
| <div class="checkbox"><label class=""> | ||
| <input type="radio" name="dropperCursor" value="default" id="dropperCursordefault"> <img src="img/cursor_default.png" alt="default" style="cursor: default"> pointer | ||
| </label></div> | ||
| <div class="checkbox"><label class=""> | ||
| <input type="radio" name="dropperCursor" value="crosshair" id="dropperCursorcrosshair"> <img src="img/cursor_crosshair.png" alt="crosshair" style="cursor: crosshair"> crosshair | ||
| </label></div> | ||
| </div> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>Keyboard Shortcuts for Pick Color from Web Page</legend> | ||
| <div class="bs-callout bs-callout-info"> | ||
| <h4>Pickup Color: <kbd>Alt+P</kbd></h4> | ||
| <p>Alt+P is default shortcut. Go to Extension page (chrome://extensions) to change it. There is link for changing shortcuts at bottom.</p> | ||
| </div> | ||
| <div class="bs-callout bs-callout-info"> | ||
| <h4>Cancel Pick: <kbd>Esc</kbd></h4> | ||
| <p>Simply cancel active picking color from web page. No color will be stored in history.</p> | ||
| </div> | ||
| <div class="bs-callout bs-callout-info"> | ||
| <h4>Update Colors: <kbd>U</kbd></h4> | ||
| <p>Eye dropper shows you only color which was present at moment of color pick active. If any javascript event occures (hover effect, menu appears) you can refresh its "cache" with this keyboard shortcut.</p> | ||
| </div> | ||
| </fieldset> | ||
| <hr> | ||
| <div> | ||
| <button id="saveButton" class="btn btn-success">Save settings</button> | ||
| <span id="status"></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div id="donation" class="col-lg-offset-1 col-sm-3 col-md-3"> | ||
| <div> | ||
| <h3>Do you like Eye Dropper?</h3> | ||
| <p class="alert alert-success">First of all - if you like Eye Dropper <a href="https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka/reviews">rate it on Chrome Webstore</a> please.</p> | ||
| <div class="media"> | ||
| <div class="media-body"> | ||
| <p>If you find Eye Dropper useful, you can show your support by donation through Paypal. Any amount will encourage me to spend more time with Eye Dropper development. Thanks!</p> | ||
| </div> | ||
| </div> | ||
| <!-- Begin PayPal Donations --> | ||
| <form id="paypal-donation-options" class="text-center" action="https://www.paypal.com/cgi-bin/webscr" method="post"> | ||
| <div class="paypal-donations"><input type="hidden" name="cmd" value="_donations" class="form-control"><input type="hidden" name="business" value="kepi@orthank.net" class="form-control"><input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/" class="form-control"><input type="hidden" name="item_name" value="Eye Dropper" class="form-control"><input type="hidden" name="currency_code" value="USD" class="form-control"><input type="image" class="btn" src="inc/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online." class="form-control"></div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
| const NEED_BG_VERSION = 11 // minimum version of bg script we need | ||
| let bgPage = null | ||
| ready(init) // call init when ready | ||
| /** | ||
| * Call function when document is ready | ||
| * | ||
| * @param {function} fn function to call when document is ready | ||
| */ | ||
| function ready(fn) { | ||
| if (document.readyState != 'loading') { | ||
| fn() | ||
| } else { | ||
| document.addEventListener('DOMContentLoaded', fn) | ||
| } | ||
| } | ||
| function isChecked(elementId) { | ||
| return document.getElementById(elementId).checked | ||
| } | ||
| // Saves options to localStorage. | ||
| function save_options() { | ||
| console.group("Saving options to storage") | ||
| for (setting in bgPage.bg.settings) { | ||
| let element = document.getElementById(setting) | ||
| if (element) { | ||
| bgPage.bg.settings[setting] = element.checked | ||
| console.info(`Setting ${setting}: ${bgPage.bg.settings[setting]}`) | ||
| } | ||
| } | ||
| // cursor has multiple values (radio) - special handling needed | ||
| bgPage.bg.settings.dropperCursor = document.getElementById('dropperCursorcrosshair').checked ? 'crosshair' : 'default' | ||
| console.info(`Setting dropperCursor: ${bgPage.bg.settings.dropperCursor}`) | ||
| bgPage.bg.saveSettings() | ||
| // Update status to let user know options were saved. | ||
| let status = document.getElementById("status") | ||
| status.innerHTML = "Options Saved." | ||
| setTimeout(function() { | ||
| status.innerHTML = "" | ||
| }, 750) | ||
| console.groupEnd("Saving options to storage") | ||
| } | ||
| // Restores select box state to saved value from localStorage. | ||
| function restore_options() { | ||
| console.group("Restoring options from storage") | ||
| for (setting in bgPage.bg.settings) { | ||
| let element = document.getElementById(setting) | ||
| if (element) { | ||
| element.checked = bgPage.bg.settings[setting] | ||
| console.info(`Setting ${setting}: ${bgPage.bg.settings[setting]}`) | ||
| } | ||
| } | ||
| // cursor has multiple values (radio) - special handling needed | ||
| document.getElementById(`dropperCursor${bgPage.bg.settings.dropperCursor}`).checked = true | ||
| console.info(`Setting dropperCursor: ${bgPage.bg.settings.dropperCursor}`) | ||
| console.groupEnd("Restoring options from storage") | ||
| } | ||
| function init() { | ||
| chrome.runtime.getBackgroundPage((backgroundPage) => { | ||
| gotBgPage(backgroundPage) | ||
| }) | ||
| } | ||
| function bgPageReady() { | ||
| restore_options() | ||
| document.getElementById('saveButton').onclick = () => { | ||
| save_options() | ||
| } | ||
| } | ||
| function gotBgPage(backgroundPage) { | ||
| bgPage = backgroundPage | ||
| if (bgPage.bg.version === undefined || bgPage.bg.version < NEED_BG_VERSION) { | ||
| console.warn(`Background page reload. Current version: ${bgPage.bg.version}, need version: ${NEED_BG_VERSION}`) | ||
| chrome.runtime.sendMessage({ | ||
| type: "reload-background" | ||
| }) | ||
| setTimeout('bgPageReady', 1000) | ||
| } else { | ||
| bgPageReady() | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" > | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | ||
| <title>Welcome to Eye Dropper</title> | ||
| <meta name="designer" content="digitalnature.ro" /> | ||
| <style type="text/css"> | ||
| /* <![CDATA[ */ | ||
| @import "style.css"; | ||
| /* ]]> */ | ||
| </style> | ||
| <link rel="Shortcut Icon" type="image/x-icon" href="http://eye-dropper.kepi.cz/files/favicon.ico" /> | ||
| <style type="text/css" media="screen">#features .col { float: left; width: 28%; margin: 0px 2%;}#features .col p { height: 90px;}#features h3 { font-size: 1.4em;}</style> | ||
| <script> | ||
| var _gaq = _gaq || []; | ||
| _gaq.push(['_setAccount', 'UA-18454681-4']); | ||
| _gaq.push(['_trackPageview']); | ||
| (function() { | ||
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
| ga.src = 'https://ssl.google-analytics.com/ga.js'; | ||
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
| })(); | ||
| </script> | ||
| <link href="https://plus.google.com/109246769842422078233" rel="publisher" /><script type="text/javascript"> | ||
| (function() | ||
| {var po = document.createElement("script"); | ||
| po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; | ||
| var s = document.getElementsByTagName("script")[0]; | ||
| s.parentNode.insertBefore(po, s); | ||
| })();</script> | ||
| </head> | ||
| <body class="single-page page-welcome-to-eye-dropper author-kepi col-1 fixed browser-unknown"> | ||
| <div id="page"> | ||
| <div class="page-content header-wrapper"> | ||
| <div id="header" class="bubbleTrigger"> | ||
| <div class="g-plus" data-href="https://plus.google.com/109246769842422078233" data-size="badge"></div> | ||
| <div id="site-title" class="clear-block"> | ||
| <div id="logo"><a href="http://eye-dropper.kepi.cz">Eye Dropper</a></div> <p class="headline">extension for Chrome</p> | ||
| </div> | ||
| <div class="shadow-left"> | ||
| <div class="shadow-right clear-block"> | ||
| <p class="nav-extra"><a href="http://twitter.com/EyeDropper" class="nav-extra twitter" title="Follow Eye Dropper on Twitter"><span>Follow on Twitter</span></a><a href="http://feeds.feedburner.com/EyeDropper" class="nav-extra rss" title="RSS Feeds"><span>RSS Feeds</span></a></p> | ||
| <ul class="navigation clear-block"> | ||
| <li class="page page-home "><a class="fadeThis " href="http://eye-dropper.kepi.cz/?utm_source=extension&utm_medium=welcome&utm_campaign=Welcome%2Bpage" title="Home"><span class="title">Home</span><span class="pointer"></span></a></li> | ||
| <li class="page page-news "><a class="fadeThis " href="http://eye-dropper.kepi.cz/news/?utm_source=extension&utm_medium=welcome&utm_campaign=Welcome%2Bpage" title="News"><span class="title">News</span><span class="pointer"></span></a></li> | ||
| <li class="page page-help "><a class="fadeThis " href="http://eye-dropper.kepi.cz/help/?utm_source=extension&utm_medium=welcome&utm_campaign=Welcome%2Bpage" title="Help"><span class="title">Help</span><span class="pointer"></span></a></li> | ||
| <li class="page page-issues "><a class="fadeThis " href="http://eye-dropper.kepi.cz/issues/?utm_source=extension&utm_medium=welcome&utm_campaign=Welcome%2Bpage" title="Issues"><span class="title">Issues</span><span class="pointer"></span></a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- left+right bottom shadow --> | ||
| <div class="shadow-left page-content main-wrapper"> | ||
| <div class="shadow-right"> | ||
| <!-- main content: primary + sidebar(s) --> | ||
| <div id="main"> | ||
| <div id="main-inside" class="clear-block"> | ||
| <!-- primary content --> | ||
| <div id="primary-content"> | ||
| <div class="blocks"> | ||
| <!-- post --> | ||
| <div class="hentry page post-1 odd author-admin clear-block"> | ||
| <h1 class="title">Welcome to Eye Dropper</h1> | ||
| <div id="welcome"> | ||
| <p>Eye Dropper is open source extension for Google Chrome which allows you to pick colors from various sources.</p> | ||
| <p>If you need any help, try to browse through <a href="http://eye-dropper.kepi.cz/help/?utm_source=extension&utm_medium=welcome&utm_campaign=Welcome%2Bpage">help page</a> or <a href="https://github.com/kepi/chromeEyeDropper/issues">fill an issue on Github page</a>.</p> | ||
| <p>This extension can be even better and can help you even more if you write me your ideas and founded bugs on <a href="https://github.com/kepi/chromeEyeDropper/issues">issue page</a>.</p> | ||
| </div> | ||
| <div id="features"> | ||
| <div class="col"> | ||
| <h3>Pick color from webpage</h3> | ||
| <p>You can pick any color on current webpage and store it in history or copy to clipboard.</p> | ||
| <img src="http://eye-dropper.kepi.cz/files/dropper.png" width="200" /> | ||
| </div> | ||
| <div class="col"> | ||
| <h3>Pick from color picker</h3> | ||
| <p>Eye Dropper has integrated color picker so you can comfortably find needed colors.</p> | ||
| <img src="http://eye-dropper.kepi.cz/files/picker1.png" width="200" /> | ||
| </div> | ||
| <div class="col"> | ||
| <h3>Pick color from history</h3> | ||
| <p>Every picked color is stored into history when you can find it in future.</p> | ||
| <img src="http://eye-dropper.kepi.cz/files/history1.png" width="200px" /> | ||
| </div> | ||
| <br style="clear: both" /> | ||
| </div> | ||
| <blockquote>Eye Dropper is created and enhanced in my leisure time for free. Your donation allows me to continue my development and any amount is greatly appreciated. | ||
| <!-- Begin PayPal Donations --> | ||
| <form id="paypal-donation-options" action="https://www.paypal.com/cgi-bin/webscr" method="post"><div class="paypal-donations"><input type="hidden" name="cmd" value="_donations" /><input type="hidden" name="business" value="kepi@orthank.net" /><input type="hidden" name="return" value="http://eye-dropper.kepi.cz/thanks-for-your-donation/" /><input type="hidden" name="item_name" value="Eye Dropper" /><input type="hidden" name="currency_code" value="USD" /><input type="image" src="../inc/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online." /></div></form> | ||
| </blockquote> | ||
| <h2>Whats new?</h2> | ||
| <div id="whats-new"> | ||
| <p><strong>0.4.3</strong> – <cite>6-October-2016</cite></p> | ||
| <ul> | ||
| <li>Fix: Doubled color picker (see #93 and #95)</li> | ||
| <li>Fix: use local version of tachyon.css instead of CDN</li> | ||
| </ul> | ||
| <p><strong>0.4.2</strong> – <cite>18-August-2016</cite></p> | ||
| <ul> | ||
| <li>Fix: Add color input field in color picker which was removed mistakenly during popup rewrite (see #90)</li> | ||
| </ul> | ||
| <p><strong>0.4.1</strong> – <cite>14-August-2016</cite></p> | ||
| <ul> | ||
| <li>Fix: Partially fix web page pickup on long pages (see #87)</li> | ||
| </ul> | ||
| <p><strong>0.4.0</strong> – <cite>11-August-2016</cite></p> | ||
| <ul> | ||
| <li>New: History syncing between multiple browsers</li> | ||
| <li>New: Export your color history to CSV</li> | ||
| <li>New: Ask before clearing history</li> | ||
| <li>New: New faster color picker</li> | ||
| <li>Fix: Rewritten popup. Eye Dropper should load much faster now</li> | ||
| <li>Fix: Better messages when we can't pick colors</li> | ||
| <li>Design changes in popup window</li> | ||
| <li>Removed flattr button</li> | ||
| </ul> | ||
| <p><strong>0.3.7</strong> – <cite>7-February-2015</cite></p> | ||
| <ul> | ||
| <li>Fix problem with color picking while scrolling.</li> | ||
| <li>Fix broken flattr button</li> | ||
| </ul> | ||
| <p><strong>0.3.6</strong> – <cite>25-April-2014</cite></p> | ||
| <ul> | ||
| <li>Re-introduce keyboard shortcuts, Alt+P is default for pick color from web page now</li> | ||
| <li>Fix imperfect color picking on Windows platform. Fixes #73</li> | ||
| <li>Upgrade to jQuery 2.1</li> | ||
| <li>Upgrade to Bootstrap 3</li> | ||
| </ul> | ||
| <p><strong>0.3.5</strong> – <cite>10-April-2014</cite></p> | ||
| <ul> | ||
| <li>Fix Eye Dropper to work in new Chrome 34. Fixes #72.</li> | ||
| <li><strong>Removed need for access to all pages with use of activeTab permission!</strong></li> | ||
| <li>Keyboard shortcuts disabled because they need access too all pages. I'll try to add them again later.</li> | ||
| </ul> | ||
| <p><strong>0.3.4</strong> – <cite>12-Feb-2014</cite></p> | ||
| <ul> | ||
| <li>Fix for retina displays. Fixes #67.</li> | ||
| </ul> | ||
| <p><strong>0.3.3</strong> – <cite>9-Nov-2013</cite></p> | ||
| <ul> | ||
| <li>Finally fixed long standing bug when Eye Dropper not work after installation. Fixes #63, #59, #58 and couple of others.</li> | ||
| </ul> | ||
| <p><strong>0.3.2</strong> – <cite>14-May-2013</cite></p> | ||
| <ul> | ||
| <li>Added input field to color picker (fixes <a href="https://github.com/kepi/chromeEyeDropper/issues/53">#53</a>)</li> | ||
| <li>Removed obsolete hotkeys file</li> | ||
| </ul> | ||
| <p><strong>0.3.1</strong> – <cite>10-May-2013</cite></p> | ||
| <ul> | ||
| <li>Real fix for for retina display icon (fixes <a href="https://github.com/kepi/chromeEyeDropper/issues/51">#51</a>)</li> | ||
| </ul> | ||
| <p><strong>0.3.0</strong> – <cite>8-May-2013</cite></p> | ||
| <ul> | ||
| <li>new and more clear design</li> | ||
| <li>more info about picked color</li> | ||
| <li>new extension icon</li> | ||
| <li>live preview of colors selected from history or color picker</li> | ||
| <li>amazing new color picker from @bgrings</li> | ||
| <li>clearing history is now instant and leave you on same tab</li> | ||
| <li>new options page</li> | ||
| </ul> | ||
| <strong>Bugfixes</strong> | ||
| <ul> | ||
| <li>manifest v2 (fixes <a href="https://github.com/kepi/chromeEyeDropper/issues/50">#50</a>)</li> | ||
| <li>high resolution icon for retina (fixes <a href="https://github.com/kepi/chromeEyeDropper/issues/51">#51</a>)</li> | ||
| <li>better color picker (fixes <a href="https://github.com/kepi/chromeEyeDropper/issues/42">#42</a> and <a href="https://github.com/kepi/chromeEyeDropper/issues/47">#47</a>)</li> | ||
| </ul> | ||
| <p><strong>0.2.6</strong> – <cite>25-Jan-2012</cite></p> | ||
| <ul> | ||
| <li>Support for shorthand hex colors - fixes <a href="https://github.com/kepi/chromeEyeDropper/issues/33">#33</a></li> | ||
| <li>Possibility to reset keyboard shortcuts in options</li> | ||
| <li>Correct behaviour on image pages - fixes <a href="https://github.com/kepi/chromeEyeDropper/issues/32">#32</a></li> | ||
| <li>Fix bug <a href="https://github.com/kepi/chromeEyeDropper/issues/31">#31</a> – corner preview box using website colors sometime</li> | ||
| <li>Better badge icons and some icon polishing</li> | ||
| <li>Couple of fixes of some rare bugs</li> | ||
| <li>Update to new color picker (jPicker) version</li> | ||
| </ul> | ||
| <p><strong>0.2.5</strong> – <cite>30-Apr-2011</cite></p> | ||
| <ul> | ||
| <li><strong>Shortcut for activate "Pick color from webpage".</strong> – You have to enable it in options.</li> | ||
| <li>Change of keyboard shortcut handling</li> | ||
| <li>Fix issue <a href="https://github.com/kepi/chromeEyeDropper/issues/14">#14</a> that sometime cause wrongly picking only black color after scrolling page.</li> | ||
| <li>Possiblity to support Eye Dropper development through Flattr.</li> | ||
| </ul> | ||
| <p><strong>0.2.4</strong> – <cite>20-Feb-2011</cite></p> | ||
| <ul> | ||
| <li>deactivate eye dropper while picking with right click (configurable in options)</li> | ||
| <li>freeze page</li> | ||
| <li>fix frameset problems</li> | ||
| </ul> | ||
| <p><strong>0.2.3</strong> – <cite>2-Nov-2010</cite></p> | ||
| <ul> | ||
| <li>Added new information box with hex and RGB values displayed when you choosing what to pick</li> | ||
| <li>Option to disable mouse color tooltip</li> | ||
| <li>Option to disable information box</li> | ||
| </ul> | ||
| </div> | ||
| <p><a href="http://eye-dropper.kepi.cz/category/changelog/?utm_source=extension&utm_medium=welcome&utm_campaign=Welcome%2Bpage">full changelog</a></p> | ||
| </div> | ||
| <!-- /post --> | ||
| </div> | ||
| </div> | ||
| <!-- /primary content --> | ||
| </div> | ||
| </div> | ||
| <!-- /main content --> | ||
| </div> | ||
| <!-- footer --> | ||
| <div id="footer"> | ||
| <div class="page-content"> | ||
| <div id="copyright"> | ||
| <abbr title="Mystique 2.4.3">Mystique</abbr> theme by <a href="http://digitalnature.ro">digitalnature</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- /footer --> | ||
| </div> | ||
| <!-- /shadow --> | ||
| </div> | ||
| </body> | ||
| </html> |
| /* | ||
| Theme Name: Mystique | ||
| Theme URI: http://digitalnature.ro/projects/mystique | ||
| Description: Feature-packed theme with a solid design, built-in widgets and a intuitive theme settings interface... Designed by <a href="http://digitalnature.ro/">digitalnature</a>. | ||
| Version: 2.4.3 | ||
| Author: digitalnature | ||
| Author URI: http://digitalnature.ro | ||
| Tags: light, white, two-columns, three-columns, one-column, fixed-width, flexible-width, right-sidebar, left-sidebar, theme-options, threaded-comments, translation-ready, custom-header, editor-style | ||
| Mystique Wordpress theme | ||
| http://digitalnature.ro/projects/mystique | ||
| Theme designed by digitalnature. See the project page for more info and updates | ||
| Both the design and code are released under GPL. | ||
| http://www.opensource.org/licenses/gpl-license.php | ||
| */ | ||
| /* reset spacing */ | ||
| *{margin:0;padding:0;font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;} | ||
| html,body{min-height:100%;} | ||
| body{background:#000 url(images/bg.png) repeat-x center bottom;font-size:13px;font-style:normal;color:#4e4e4e;} | ||
| #page{background:transparent url(images/header.jpg) no-repeat center top;} | ||
| /* (max. possible width is limited by design, 1735px) */ | ||
| .page-content{max-width:1600px;min-width:780px;margin:0 auto;} | ||
| /* fluid width page */ | ||
| body.fluid .page-content{ | ||
| padding:0 10px; | ||
| width: auto; | ||
| } | ||
| /* fixed width page - 960gs */ | ||
| body.fixed .page-content{ | ||
| width:940px; | ||
| } | ||
| /*** GENERAL ELEMENTS ***/ | ||
| /* links */ | ||
| a{color:#0071bb;outline:none;} | ||
| a:hover{color:#ed1e24;text-decoration:none;} | ||
| /* headings */ | ||
| h1{font-weight:normal;font-size:270%;letter-spacing:-.04em;line-height:100%;margin:.8em 0 .2em;letter-spacing:-0.04em;} | ||
| h2{font-weight:normal;font-size:200%;letter-spacing:-.04em;line-height:110%;margin:.7em 0 .2em;letter-spacing:-0.03em;} | ||
| h3{font-size:160%;font-weight:normal;letter-spacing:-.04em;line-height:110%;margin:.7em 0 .2em;letter-spacing:-0.02em;} | ||
| h4{font-size:140%;font-weight:bold;margin:.7em 0 .2em;letter-spacing:-0.02em;} | ||
| h5{font-family:"Palatino Linotype", Georgia, Serif;font-size:140%;font-weight:bold;margin:.5em 0 .2em;letter-spacing:-0.02em;} | ||
| h6{font-size:120%;font-weight:normal;text-transform:uppercase;margin:.5em 0 .2em;} | ||
| /* tables */ | ||
| table{margin:.5em 0 1em;} | ||
| table td,table th{text-align:left;border-right:1px solid #fff;padding:.4em .8em;} | ||
| table th{background-color:#5e5e5e;color:#fff;text-transform:uppercase;font-weight:bold;border-bottom:1px solid #e8e1c8;} | ||
| table td{background-color:#eee;} | ||
| table th a{color:#d6f325;} | ||
| table th a:hover{color:#fff;} | ||
| table tr.even td{background-color:#ddd;} | ||
| table tr:hover td{background-color:#fff;} | ||
| table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;} | ||
| /* forms */ | ||
| input,textarea,select{font-size:100%;margin:.2em 0;} | ||
| input,textarea{padding:.2em .4em;margin:0 2px 4px 2px;} | ||
| input.radio,input.checkbox{background-color:#fff;padding:2px;} | ||
| textarea{width:90%;} | ||
| form label{font-weight:normal;margin:0 2px;} | ||
| form .row label{display:block;margin:10px 2px 0 2px;} | ||
| fieldset{padding:.8em;border:1px solid #ddd;background-color:#fff;margin:1em 0;} | ||
| legend{padding:2px 15px 10px;text-transform:uppercase;font-style:italic;font-size:115%;background-color:#fff;border-top:1px solid #ddd;} | ||
| /* lists */ | ||
| ul,ol{margin:.4em 0 1em;line-height:150%;} | ||
| ul li,ol li{list-style-position:outside;margin-left:2.5em;} | ||
| dl{padding:.3em 0 .8em;} | ||
| dt{font-weight:bold;text-decoration:underline;} | ||
| dd{} | ||
| /* other */ | ||
| p{margin:.6em 0 .3em;line-height:150%;} | ||
| img{border:0;} | ||
| hr{color:#b4aca1;background-color:#b4aca1;border-bottom:1px solid #f6f4eb;} | ||
| small{font-size:80%;} | ||
| pre{overflow:auto;white-space:pre-wrap;/* <- css3 */white-space:0;/* <- ff */font-size:12px;font-family:"Courier New", Courier, "Lucida Console", Monaco, "DejaVu Sans Mono", "Nimbus Mono L", "Bitstream Vera Sans Mono";background-color:#fff;padding:.4em;margin:1em 0;} | ||
| pre{width:80%;overflow:hidden;border:1px solid #ddd;background-color:#fff;padding:.8em;margin:1em 0;} | ||
| blockquote{margin:2em 25% 1em 0;min-height:40px;padding:.6em 1em .6em 6em;border:1px dotted #ddd;font-style:italic;color:#474747;background:#fff url(images/blockquote.png) no-repeat 4px top;} | ||
| blockquote p{padding:8px;margin:2px;} | ||
| blockquote blockquote{margin:1em 0 1em;} | ||
| #header{display:block;position:relative;z-index:5;} | ||
| #header p.nav-extra{position:absolute;top:-25px;z-index:10;right:10px;} | ||
| #header a.nav-extra{width:64px;height:36px;display:block;float:right;margin-left:6px;} | ||
| #header a.nav-extra span{display:none;} | ||
| /*** LOGO & HEADLINE ***/ | ||
| #site-title{padding:4em 0 3.6em 0;} | ||
| #site-title #logo{font-size:400%;font-weight:bold;font-style:normal;margin:0;padding:0;float:left;line-height:60px;} | ||
| #site-title #logo a{color:#fff;text-decoration:none;text-shadow:#000 1px 1px 1px;font-variant:small-caps;letter-spacing:-0.04em;} | ||
| #site-title #logo a:hover{color:#ed1e24;} | ||
| #site-title p.headline{float:left;border-left:1px solid #999;margin:0 0 0 1em;padding:.2em 0 .2em .8em;font-weight:normal;font-size:140%;line-height:64px;letter-spacing:0.4em;} | ||
| /*** TOP NAVIGATION ***/ | ||
| ul.navigation{background:#eee url(images/nav.png) repeat-x left top;width:100%;padding:0;margin:0;list-style-type:none;position:relative;z-index:15;} | ||
| ul.navigation li{display:block;position:relative;float:left;list-style-type:none;padding:0 1px 0 0;margin:0;background:transparent url(images/nav-div.png) no-repeat right top;} | ||
| ul.navigation li a{min-height:32px;display:block;font-weight:bold;font-size:115%;text-transform:uppercase;text-decoration:none;text-shadow:#fff 1px 1px 1px;text-align:center;color:#4e4e4e;padding:0 13px 0 11px;position:relative;line-height:31px;} | ||
| ul.navigation li a.home span.title{background:transparent url(images/icons.png) no-repeat 0px -756px;padding-left:22px;} | ||
| ul.navigation li.active a.home span.title{background-position:0px -710px;} | ||
| ul.navigation li a:hover,ul.navigation li:hover a{background-color:#fff;} | ||
| ul.navigation li.active a:hover,ul.navigation li.active:hover a{background-color:#000;} | ||
| ul.navigation li a span.title{display:block;padding:0;} | ||
| ul.navigation li a span.pointer{display:none;} | ||
| ul.navigation li.active a span.pointer, | ||
| ul.navigation li.active-parent a span.pointer, | ||
| ul.navigation li.active-ancestor a span.pointer | ||
| {position:absolute;width:100%;height:7px;bottom:-7px;left:0;display:block;background:transparent url(images/nav-pointer.png) no-repeat center top;} | ||
| ul.navigation li.active a, | ||
| ul.navigation li.active-parent a, | ||
| ul.navigation li.active-ancestor a | ||
| {background:#000 url(images/nav-active.png) no-repeat left top;color:#dedede;text-shadow:#000 1px 1px 1px;} | ||
| ul.navigation li a span.arrow{display:none;} | ||
| /* fade on mouse out */ | ||
| ul.navigation li a.fadeThis{position:relative;z-index:1;} | ||
| ul.navigation li a.fadeThis span.hover{position:absolute;top:0;left:0;display:block;height:100%;width:100%;background-color:#fff;z-index:-1;margin:0;padding:0;} | ||
| ul.navigation li.active a.fadeThis span.hover, | ||
| ul.navigation li.active-parent a.fadeThis span.hover, | ||
| ul.navigation li.active-ancestor a.fadeThis span.hover | ||
| {background:none;} | ||
| ul.navigation li.active a.fadeThis span.hover | ||
| {background-color:transparent;} | ||
| /*** FEATURED CONTENT ***/ | ||
| #featured-content{ | ||
| display: block; | ||
| height:174px; | ||
| background:#5e5e5e url(images/featured.jpg) no-repeat center top; | ||
| border-top:1px solid #818389;color:#fff; | ||
| margin:0 auto; | ||
| color:#ccc; | ||
| position: relative; | ||
| } | ||
| #featured-content .slide-container{padding:0 0 25px 0;} | ||
| #featured-content .slide-container, #featured-content ul.slides li.slide{width:940px;height:174px;display:block;} | ||
| #featured-content h2{font-size:180%;font-weight:bold;text-shadow:#000 1px 1px 1px;margin:0;padding:0 0 .2em 0;line-height:140%;} | ||
| #featured-content h4{font-size:130%;font-weight:normal;text-shadow:#000 1px 1px 1px;margin:0;padding:.2em .6em .4em .6em;line-height:normal;} | ||
| #featured-content p{margin:0 0 .6em 0;} | ||
| #featured-content a{color:#fff;text-decoration:none;font-weight:bold;} | ||
| #featured-content a:hover{background-color:rgba(0,0,0, 0.15);} | ||
| #featured-content .post-thumb img{border:4px solid #777;} | ||
| #featured-content .details{padding: 0 10px;} | ||
| #featured-content .summary{font-size:125%;font-style:italic;line-height:150%;} | ||
| #featured-content a.readmore{position:absolute;z-index:2;bottom:-2px;right:20px;background:transparent url(images/readmore.png) no-repeat center top;width:130px;height:35px;line-height: 32px;text-indent:20px;color:#ddd;} | ||
| #featured-content a.readmore:hover{background-position:center bottom;color:#fff;} | ||
| /*** MAIN LAYOUT ***/ | ||
| .shadow-left{background:url(images/shadow.png) no-repeat left bottom;} | ||
| .shadow-right{background:url(images/shadow.png) no-repeat right bottom;padding-bottom:32px;position:relative;} | ||
| #main{background:#fff url(images/main-right.jpg) no-repeat right top;} | ||
| #main-inside{background:transparent url(images/main-left.jpg) no-repeat left top;min-height:380px;} | ||
| /*** MAIN LAYOUT ***/ | ||
| /* default widths - fixed layout */ | ||
| #primary-content{width:630px;} | ||
| #sidebar{width:310px;} | ||
| #sidebar2{width:230px;} | ||
| /* col-1 */ | ||
| body.col-1 #primary-content{width:940px;left:0;} | ||
| body.col-1 #sidebar, body.col-1 #sidebar2{display:none;} | ||
| /* default widths - fluid layout */ | ||
| body.fluid #primary-content{width:70%;} | ||
| body.fluid #sidebar{width:30%;} | ||
| body.fluid #sidebar2{width:25%;} | ||
| /* col-1 */ | ||
| body.fluid.col-1 #primary-content{width:100%;left:0;} | ||
| body.fluid.col-1 #sidebar, body.fluid.col-1 #sidebar2{display:none;} | ||
| #main{ | ||
| position: relative; | ||
| min-height: 540px; | ||
| } | ||
| #primary-content,#sidebar,#sidebar2{ | ||
| top:0; | ||
| position:relative; | ||
| float:left; | ||
| z-index:0; | ||
| overflow:hidden; | ||
| min-height: 150px; | ||
| } | ||
| #primary-content .blocks{ | ||
| padding: 1em 2em; | ||
| } | ||
| li.block{list-style-type:none;padding:0;margin:0;} | ||
| li.block, .arbitrary-block{margin:1em 0 2.6em;position:relative;} | ||
| .block ul{list-style-type:none;margin:0 0 .4em 0;} | ||
| .block li{background:transparent url(images/icons.png) no-repeat 4px -816px;margin:0;padding:0 0 0 18px;} | ||
| .block li:hover{background-position:4px -1005px;} | ||
| .block li li{margin-left:.4em;} | ||
| h1.title{ | ||
| font-weight: bold; | ||
| font-size: 250%; | ||
| text-shadow: #fff 1px 1px 1px; | ||
| margin: .5em 0 .3em 0; | ||
| padding: 0; | ||
| } | ||
| /* post */ | ||
| .post, .page{margin:1em 0 2em 0;padding:0 0 .6em;display:block;background:transparent url(images/dot.gif) repeat-x left bottom;} | ||
| .post.preview-title{background:none;} | ||
| body.single-page .page, body.single-post .post{background: none;margin:0;padding:0;} | ||
| .post.asides{ | ||
| border: 4px solid #eee; | ||
| background-color: #fff; | ||
| background-image: none; | ||
| padding: 5px 10px; | ||
| } | ||
| .post.sticky{ | ||
| /* needs redesigned */ | ||
| } | ||
| h2.title{ | ||
| font-weight: bold; | ||
| font-size: 180%; | ||
| margin:0 0 .2em 0; | ||
| padding:.2em 0 0 0; | ||
| text-shadow: #fff 1px 1px 1px; | ||
| } | ||
| .post.asides h2.title{ | ||
| font-size: 130%; | ||
| font-style: italic; | ||
| letter-spacing: -0.02em; | ||
| } | ||
| .post.sticky h2.title{ | ||
| font-size: 300%; | ||
| } | ||
| h2.title a{text-decoration:none;color:#4e4e4e;} | ||
| h2.title a:hover{color:#ed1e24;text-decoration:none;} | ||
| h3.title{font-size:140%;font-weight:bold;margin:1em 0 0 0;padding:0;} | ||
| h3.title a{text-decoration:none;color:#4e4e4e;} | ||
| h3.title a:hover{color:#ed1e24;text-decoration:none;} | ||
| .post-excerpt{font-size:90%;font-style:italic;color:#666;} | ||
| .post-short-info{margin:0;padding:0;} | ||
| .post-thumb img{border:4px solid #eee;} | ||
| .post-info{background:transparent url(images/info-bar.png) no-repeat right top;height:42px;margin-left:11px;color:#bbb;text-shadow:#fff 1px 1px 1px;} | ||
| .post-info a{font-weight:bold;color:#999;} | ||
| .post-info a:hover{color:#ed1e24;} | ||
| .post-info p.author{padding: 0 0 0 6px;margin:0;line-height:32px;} | ||
| .post-info p.comments{padding: 0 12px 0 0;margin:0;line-height:32px;} | ||
| .post-info p.comments a.comments{background:transparent url(images/icons.png) no-repeat 0px -49px;padding-left:20px;} | ||
| .post-info p.comments a.no.comments{background-position:0px 1px;} | ||
| .post-date{background:transparent url(images/info-bar.png) no-repeat left -75px;padding-left:11px;float:left;text-transform:uppercase;font-weight:bold;} | ||
| .post-date p.day{background:transparent url(images/info-bar.png) no-repeat right -42px;height:33px;padding:0 16px 0 0;margin:0;line-height:31px;color:#fff;} | ||
| .post-content p{margin:0 0 .8em 0;padding:0;} | ||
| .post-content a.post-edit-link{border:#ddd 1px solid;background-color:#fff;padding:3px 6px;text-decoration:none;} | ||
| .post-content a.post-edit-link:hover{border:#ff284b 1px solid;background-color:#ed1e24;color:#fff;} | ||
| .post-content a.more-link{background-color:#eee;text-decoration:none;color:#666;text-shadow:#fff 1px 1px 1px;padding:2px 6px 3px 6px;margin:0;font-size:85%;text-transform:uppercase;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} | ||
| .post-content a.more-link:hover{background-color:#999;color:#fff;text-shadow:#666 1px 1px 1px;} | ||
| .post-content a.more-link.loading{border:0;margin:0 4px;padding:3px 8px;border:0;background:transparent url(images/loader-white.gif) no-repeat center center;} | ||
| .post-tags{background:transparent url(images/icons.png) no-repeat 0px -104px;font-style:italic;padding-left:20px;line-height:22px;} | ||
| .category-description{ | ||
| font-size: 115%; | ||
| font-style: italic; | ||
| } | ||
| .about_the_author{ | ||
| padding: 8px 10px; | ||
| line-height: 150%; | ||
| background-color: #5e5e5e; | ||
| color: #ccc; | ||
| font-style: italic; | ||
| } | ||
| .about_the_author a{ | ||
| color: #f9f9f9; | ||
| text-decoration: underline; | ||
| } | ||
| .about_the_author a:hover{ | ||
| color: #fff; | ||
| text-decoration: none; | ||
| } | ||
| .about_the_author h3{ | ||
| margin: 0; | ||
| padding: 0; | ||
| font-size: 130%; | ||
| font-weight: bold; | ||
| font-style: normal; | ||
| color: #f9f9f9; | ||
| } | ||
| .about_the_author div.avatar{ | ||
| float: left; | ||
| margin-right: 8px; | ||
| } | ||
| .about_the_author div.avatar img{ | ||
| border: 6px solid #333; | ||
| } | ||
| .post-meta{padding:6px 4px;border-top:1px solid #ddd;background-color:#f6f6f6;color:#999;display:block;} | ||
| .post-meta td, .post-meta tr:hover td{ | ||
| background-color: transparent; | ||
| border: 0; | ||
| padding: 0 2px; | ||
| margin: 0; | ||
| } | ||
| .post-meta a{color:#666;text-decoration:underline;} | ||
| .post-meta a:hover{color:#ed1e24;text-decoration:none;} | ||
| .post-meta .details{font-size:80%;line-height:150%;} | ||
| .post-meta a.control{display:block;padding:2px 6px 4px;background-color:#eee;text-shadow:#fff 1px 1px 1px;font-style:italic;text-decoration:none;font-size:115%;border:1px solid #fff;border-radius:3px;text-align:center;letter-spacing:-0.02em;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:pointer;} | ||
| .post-meta a.control:hover, .post-meta a.control:hover a{background-color:#0071bb;text-shadow:#666 1px 1px 1px;color:#fff;} | ||
| .single-navigation a{font-size:85%;border:0;background-color:transparent;padding:2px 4px;color:#ccc;text-shadow:#fff 1px 1px 1px;text-decoration:none;} | ||
| .single-navigation a:hover{color:#ed1e24;} | ||
| .single-navigation div{display:block;max-width:49%;line-height:normal;color:#ccc;} | ||
| .single-navigation .alignright{text-align:right;} | ||
| /* comments */ | ||
| .tabbed-content div.section#section-comments{display:block;} /* show comment tab, just in case jquery is disabled */ | ||
| /* align to right on col-3-left layout, looks better */ | ||
| body.col-3-left .page-navigation, body.col-3-left .comment-navigation{float: right;} | ||
| .page-navigation a, .page-navigation span.current, .page-navigation span.extend, | ||
| .comment-navigation a, .comment-navigation span.current, .comment-navigation span.dots{ | ||
| padding: 3px 5px 4px 5px; | ||
| margin: 2px; | ||
| float: left; | ||
| } | ||
| .page-navigation a, .comment-navigation a{ | ||
| text-decoration: none; | ||
| border: 1px solid #ddd; | ||
| background-color: #fff; | ||
| } | ||
| .page-navigation a:hover, .comment-navigation a:hover{ | ||
| border: 1px solid #ed1e24; | ||
| color: #fff; | ||
| background-color: #ed1e24; | ||
| } | ||
| .page-navigation span.current, .comment-navigation span.current{ | ||
| border: 1px solid #0072cf; | ||
| color: #fff; | ||
| background-color: #0072cf; | ||
| } | ||
| .comment-navigation a.loading{border:0;padding:3px 8px;border:0;background:transparent url(images/loader-white.gif) no-repeat center center;} | ||
| /* block style */ | ||
| .block h3.title{font-weight:bold;font-size:130%;background-repeat:no-repeat;background-position:left top;color:#fff;line-height:100%;letter-spacing:normal;margin:0;padding:0;text-shadow:1px 1px 1px rgba(0,0,0,0.4);text-transform:uppercase;text-align:left;line-height:23px;} | ||
| .block h3.title span{background-repeat:no-repeat;background-position:right top;margin-left:7px;display:block;padding:4px 8px 0 4px;} | ||
| .block h3.title a{color:#fff;text-decoration:none;} | ||
| .block h3.title a:hover{color:#FFFF00;} | ||
| .block .block-div{background-color:transparent;background-repeat:no-repeat;background-position:left bottom;width:7px;height:23px;float:left;} | ||
| .block .block-div-arrow{background-color:transparent;background-repeat:no-repeat;background-position:right bottom;height:23px;margin-left:7px;} | ||
| .block fieldset{margin:0;padding:0 1.3em;border:0;background-color:transparent;} | ||
| .box{max-width:600px;position:relative;z-index:5;color:#eee;} | ||
| .box-top-left{background:transparent url(images/box.png) no-repeat left top;padding-left:7px;} | ||
| .box-top-right{background:transparent url(images/box.png) no-repeat right top;height:7px;} | ||
| .box-main{background:transparent url(images/box.png) no-repeat left bottom;padding-left:7px;} | ||
| .box-main .box-content{background:transparent url(images/box.png) no-repeat right bottom;padding:10px 7px 10px 0;} | ||
| .box a{color:#fff;} | ||
| .box .tag-cloud{text-align:justify;line-height:150%;} | ||
| .box .tag-cloud a{vertical-align:middle;text-decoration:none;padding:0 0.2em;letter-spacing:-0.02em;color:#ccc;text-shadow:#000 1px 1px 1px;} | ||
| .tag-cloud a:hover{background-color:#dde90d;color:#000;text-shadow:rgba(0,0,0,0.6) 1px 1px 1px;} | ||
| /*** FOOTER ***/ | ||
| #footer{ | ||
| background: #fff; | ||
| } | ||
| /* block slider */ | ||
| #footer-blocks{position:relative;margin:0 auto 1em auto;} | ||
| #footer-blocks.withSlider{width:940px;} | ||
| #footer-blocks .leftFade,#footer-blocks .rightFade{background:transparent url(images/bg-trans2.png) repeat-y left top;position:absolute;width:46px;min-height:100%;height:100%;/* <- for opera */top:0;z-index:10;} | ||
| #footer-blocks .leftFade{left:0;} | ||
| #footer-blocks .rightFade{background-position:right top;right:0;} | ||
| .slide-container{width:100%;overflow:hidden;position:relative;margin:0 auto;} | ||
| ul.slides{position:relative;top:0;left:0;list-style-type:none;margin:0;padding:0;width:100%;min-height:100%;display:block;} | ||
| /* copyright & other info */ | ||
| #footer #copyright{display:block;padding:1em 2em;text-align:center;border-top:1px solid #ddd;line-height:200%;} | ||
| #footer .button{padding:4px 8px 4px 8px;color:#fff;background-color:#666;text-decoration:none;text-transform:uppercase;font-weight:bold;} | ||
| #footer a.button.rss-subscribe{background:#666 url(images/icons.png) no-repeat 2px -666px;padding-left: 25px;} | ||
| /* other */ | ||
| .clearFieldBlurred{color:#ccc;font-style:italic;font-weight:normal;} | ||
| .clearFieldActive{color:#4e4e4e;font-weight:bold;} | ||
| .error{color:#ed1e24;} | ||
| .success{color:#a0c207;} | ||
| .divider{padding:1em 0 0 0;display:block;background:transparent url(images/dot.gif) repeat-x left bottom;height:2px;min-height:2px;} | ||
| .altText{font-style:italic;} | ||
| .highlight{background-color: #FFE4B5;} | ||
| /* clearfix */ | ||
| .clear-block:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} | ||
| img.alignleft,img.alignright{padding:3px;margin-top:4px;margin-bottom:4px;border-radius:4px;} | ||
| .alignleft{float:left;margin-right:8px;} | ||
| .alignright{float:right;margin-left:8px;} | ||
| .aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center;} | ||
| .bubble-trigger{position:relative;} | ||
| .bubble{display:none;position:absolute;z-index:10;} | ||
| /* jquery caption - to do */ | ||
| .imgCaption{position:relative;overflow:hidden;padding:0;border:0;margin-top:8px;margin-bottom:8px;display:inline-block;} | ||
| .imgCaption p{position:absolute;background-color:#000;color:#fff;width:100%;font-weight:bold;padding:0;margin:0;line-height:150%;text-align:center;border:0;z-index:10;left:0;opacity:0.6;} | ||
| .imgCaption p span{ padding:12px;display:block;} | ||
| .wp-caption{border: 1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;margin-top:10px;margin-bottom:10px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} | ||
| .wp-caption img{margin:0;padding:0;border:0 none;} | ||
| .wp-caption-dd{font-size:11px;line-height:17px;padding:0 4px 5px;margin:0;} | ||
| .webshot{position:absolute;left:-20000px;background-color:rgba(0,0,0,0.4);padding:5px;z-index:10;display:none;-moz-box-shadow:0px 0px 8px rgba(0,0,0,0.4);-webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.4);box-shadow:0px 0px 8px rgba(0,0,0,0.4);} | ||
| .webshot img{margin:0;padding:0;} | ||
| /* smiley adjustment */ | ||
| img.wp-smiley{vertical-align:-15%;} | ||
| /* tabs (code inspired by smashing magazine's comment tabs */ | ||
| ul.tabs li a{} | ||
| ul.tabs li a:hover{} | ||
| .tabbed-content div.sections{position:relative;overflow:hidden;} | ||
| .tabbed-content div.section{position:relative;display:none;} | ||
| .tabbed-content div.section h6.title{font-size:115%;font-weight:normal;font-style:italic;text-transform:uppercase;margin:0;padding:0;} | ||
| .tabs,.tabs li{margin:0;padding:0;list-style-type:none;} | ||
| .tabs-wrap{padding-bottom:30px;background-color:transparent;background-repeat:no-repeat;background-position:left 34px;margin:2em 0 .4em 0;} | ||
| .tabs{list-style:none;overflow:hidden;height:34px;position:relative;text-transform:uppercase;padding-right:12px;} | ||
| .tabs li{float:right;text-align:center;height:31px;background-color:transparent;background-repeat:no-repeat;background-position:right top;margin-right:-20px;padding-right:24px;margin-top:4px;position:relative;z-index:0;bottom:-4px;/* <-for the animation */line-height:28px;} | ||
| .tabs li a{height:31px;color:#4e4e4e;float:left;text-decoration:none;text-shadow:#fff 1px 1px 1px;font-weight:bold;background-color:transparent;background-repeat:no-repeat;background-position:left top;padding-left:26px;padding-right:4px;} | ||
| .tabs li:hover{background-position:right -66px;} | ||
| .tabs li:hover a,.tabs li a:hover{background-position:0 -66px;} | ||
| .tabs li.active{background-position:100% -33px;z-index:8;padding-right:24px;} | ||
| .tabs li.active a,.tabs li.active a:hover{background-position:0 -33px;color:#fff;text-shadow:rgba(0,0,0,0.4) 1px 1px 1px;} | ||
| a.js-link{cursor:pointer;text-decoration:underline;} | ||
| a.js-link:hover{text-decoration:none;} | ||
| .hidden{display:none;} | ||
| /* form container */ | ||
| div.form{width:50%;} | ||
| #sidebar div.form,#footer div.form{width:100%;} | ||
| /* full width if there's only one widget in the footer */ | ||
| #footer ul.slides li.slide .slide-content ul.blocks.widgetcount-1 div.form{width:50%;} | ||
| div.form .error{font-weight:bold;} | ||
| div.form fieldset{margin:0;padding:0;background:transparent;border:0;} | ||
| /*** WORDPRESS: SUPPORT FOR OTHER WIDGETS ***/ | ||
| /* tag cloud */ | ||
| .block-widget_tag_cloud{text-align:justify;line-height:150%;} | ||
| .block-widget_tag_cloud a{vertical-align:middle;text-decoration:none;padding:0 0.2em;letter-spacing:-0.02em;color:#666;} | ||
| .block-widget_tag_cloud a:hover{background-color:#dde90d;color:#000;} | ||
| #footer .alexarank{ | ||
| font-weight: normal; | ||
| color: #99CCFF; | ||
| } | ||
| /* MYSTIQUE.css */ | ||
| #header a.nav-extra.rss{background:transparent url(http://eye-dropper.kepi.cz/wp-content/themes/mystique/images/nav-icons.png) no-repeat right top;} | ||
| #header a.twitter{background:transparent url(http://eye-dropper.kepi.cz/wp-content/themes/mystique/images/nav-icons.png) no-repeat left top;} | ||
| body.fixed.col-2-right #primary-content{width:630px;left:0;} | ||
| body.fixed.col-2-right #sidebar{width:310px;} | ||
| .post-info.with-thumbs{margin-left:94px;} | ||
| .page, .post { | ||
| font-family: 'Trebuchet MS', Tahoma, Arial; | ||
| font-size: 14px; | ||
| } | ||
| .page *, .post * { font-family: 'Trebuchet MS', Tahoma, Arial !important; } | ||
| .clear { /* generic container (i.e. div) for floating buttons */ | ||
| overflow: hidden; | ||
| width: 100%; | ||
| } | ||
| #whats-new { | ||
| margin-left: 20px; | ||
| } | ||
| #welcome { | ||
| background: #f0fbd2; | ||
| color: black; | ||
| padding: 1em; | ||
| margin: 1em 0em; | ||
| } | ||
| #paypal-donation-options { | ||
| text-align: right; | ||
| margin-top: 1em; | ||
| } | ||
| div#___plus_0 { | ||
| position: absolute; | ||
| top: 4px; | ||
| right: 0px; | ||
| } |
| Eye Dropper for Google Chrome™ | ||
| ============================== | ||
| Eye Dropper is extension for Google Chrome™ and Chromium which helps you pick colors directly from websites or from nice color picker. | ||
| You can find more info, help and FAQ at [homepage](http://eye-dropper.kepi.cz/) | ||
| ##LICENSE | ||
| This extension is released under [MIT License](http://github.com/kepi/chromeEyeDropper/blob/master/MIT-LICENSE.txt). | ||
| ready(init) | ||
| function ready(fn) { | ||
| if (document.readyState != 'loading') { | ||
| fn() | ||
| } else { | ||
| document.addEventListener('DOMContentLoaded', fn) | ||
| } | ||
| } | ||
| function init() { | ||
| chrome.runtime.getBackgroundPage((bgPage) => { | ||
| document.getElementById('debugImage').src = bgPage.bg.debugImage | ||
| }) | ||
| chrome.runtime.onMessage.addListener((req, sender, sendResponse) => { | ||
| console.info("got req") | ||
| console.info(req) | ||
| if (req.reqtype == "update") | ||
| console.info("reloading") | ||
| window.location.reload() | ||
| }) | ||
| } |
| const NEED_BG_VERSION = 13 // minimum version of bg script we need | ||
| let bgPage = null | ||
| let boxes = {} | ||
| let tab_ins = {} | ||
| // section elements | ||
| let sec_color_boxes = null | ||
| let sec_color_history = null | ||
| let sec_content = null | ||
| // palettes | ||
| let sec_color_palette = null | ||
| let span_palette_name = null | ||
| // cpicker elements | ||
| let cpicker = null | ||
| let cpicker_input = null | ||
| ready(init) // call init when ready | ||
| /** | ||
| * Call function when document is ready | ||
| * | ||
| * @param {function} fn function to call when document is ready | ||
| */ | ||
| function ready(fn) { | ||
| if (document.readyState != 'loading') { | ||
| fn() | ||
| } else { | ||
| document.addEventListener('DOMContentLoaded', fn) | ||
| } | ||
| } | ||
| /** | ||
| * Init of all things needed in popup | ||
| */ | ||
| function init() { | ||
| console.group('popup init') | ||
| console.info('document ready') | ||
| initTabs() | ||
| initExternalLinks() | ||
| console.info('getting background page') | ||
| chrome.runtime.getBackgroundPage((backgroundPage) => { | ||
| gotBgPage(backgroundPage) | ||
| }) | ||
| console.groupEnd('popup init'); | ||
| sec_content = document.getElementById('content') | ||
| sec_color_boxes = document.getElementById('color-boxes') | ||
| sec_color_history = document.getElementById('color-history') | ||
| } | ||
| /** | ||
| * Init links on tabs | ||
| */ | ||
| function initTabs() { | ||
| for (let n of document.getElementsByClassName('ed-tab')) { | ||
| n.onclick = () => { | ||
| switchTab(n.id) | ||
| } | ||
| } | ||
| for (let n of document.getElementsByClassName('ed-tab-in')) { | ||
| tab_ins[n.id] = n | ||
| } | ||
| console.info('tabs initialized') | ||
| } | ||
| /** | ||
| * Init function which activates external links. | ||
| * | ||
| * External link is one with class set to 'ed-external' and data-url | ||
| * attribute present. | ||
| * | ||
| * Because we are using this from popup, we can't use simple | ||
| * href attribute, we will create new tab with help of chrome api. | ||
| */ | ||
| function initExternalLinks() { | ||
| for (let n of document.getElementsByClassName('ed-external')) { | ||
| if (n.dataset.url) { | ||
| n.onclick = () => { | ||
| chrome.tabs.create({ | ||
| url: n.dataset.url | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| console.info('external links initialized') | ||
| } | ||
| /** | ||
| * Callback - second phase of popup initialization after we got | ||
| * connection to background page | ||
| * | ||
| * @param {object} backgroundPage remote object for background page | ||
| */ | ||
| function gotBgPage(backgroundPage) { | ||
| console.group('popup init phase 2') | ||
| bgPage = backgroundPage | ||
| console.info(`Connected to background page version ${bgPage.bg.version}`) | ||
| // reload background if we need new version | ||
| if (bgPage.bg.version === undefined || bgPage.bg.version < NEED_BG_VERSION) { | ||
| console.warn(`Background page reload. Current version: ${bgPage.bg.version}, need version: ${NEED_BG_VERSION}`) | ||
| chrome.runtime.sendMessage({ | ||
| type: "reload-background" | ||
| }) | ||
| setTimeout(bgPageReady, 1000) | ||
| } else { | ||
| bgPageReady() | ||
| } | ||
| console.groupEnd('popup init phase 2') | ||
| } | ||
| function bgPageReady() { | ||
| // init pick button with selected tab | ||
| chrome.tabs.getSelected(null, (tab) => { | ||
| initPickButton(tab) | ||
| }) | ||
| initColorBoxes() | ||
| initColorHistory() | ||
| } | ||
| /** | ||
| * Callback - Init pick button if it is possible | ||
| * | ||
| * We need to check if we are not on one of special pages: | ||
| * - protocol starts with 'chrome' | ||
| * - chrome webstore | ||
| * - local page | ||
| * | ||
| */ | ||
| function initPickButton(tab) { | ||
| let pickEnabled = true; | ||
| let message = '' | ||
| // special chrome pages | ||
| if (tab.url.indexOf('chrome') == 0) { | ||
| message = "Chrome doesn't allow <i>extensions</i> to play with special Chrome pages like this one. <pre>chrome://...</pre>"; | ||
| pickEnabled = false; | ||
| } | ||
| // chrome gallery | ||
| else if (tab.url.indexOf('https://chrome.google.com/webstore') == 0) { | ||
| message = "Chrome doesn't allow its <i>extensions</i> to play on Web Store."; | ||
| pickEnabled = false; | ||
| } | ||
| // local pages | ||
| else if (tab.url.indexOf('file') == 0) { | ||
| message = "Chrome doesn't allow its <i>extensions</i> to play with your local pages."; | ||
| pickEnabled = false; | ||
| } | ||
| let pick_el = document.getElementById('pick') | ||
| if (pickEnabled) { | ||
| pick_el.onclick = () => { | ||
| bgPage.bg.useTab(tab) | ||
| bgPage.bg.activate() | ||
| window.close() | ||
| } | ||
| } else { | ||
| let message_el = document.getElementById('pick-message') | ||
| message_el.innerHTML = `<h3 class="normal">😞 Whoops. Can't pick from this page</h3><p>${message}</p>` | ||
| message_el.style.display = 'block' | ||
| pick_el.style.display = 'none' | ||
| } | ||
| } | ||
| function initColorBoxes() { | ||
| boxes = { | ||
| current: document.getElementById('box-current'), | ||
| new: document.getElementById('box-new') | ||
| } | ||
| drawColorBoxes() | ||
| } | ||
| function drawColorBoxes() { | ||
| colorBox('current', bgPage.bg.getColor()) | ||
| colorBox('new', bgPage.bg.getColor()) | ||
| } | ||
| function clearPalette() { | ||
| mscConfirm({ | ||
| title: "Wipe It?", | ||
| subtitle: `Really clear palette ${bgPage.bg.getPaletteName()}?`, | ||
| okText: "Yes, Wipe It!", | ||
| cancelText: "No", | ||
| onOk: () => { | ||
| console.info("Clearing color history") | ||
| chrome.runtime.sendMessage({ | ||
| type: "clear-history" | ||
| }, () => { | ||
| console.info("History cleared") | ||
| drawColorHistory() | ||
| drawColorBoxes() | ||
| }) | ||
| } | ||
| }) | ||
| } | ||
| function destroyPalette(palette_name) { | ||
| mscConfirm({ | ||
| title: `Destroy Palette '${palette_name}'?`, | ||
| subtitle: `Really destroy palette ${palette_name}?`, | ||
| okText: "Yes, Destroy It!", | ||
| cancelText: "No", | ||
| onOk: () => { | ||
| let destroying_current = (palette_name === bgPage.bg.getPaletteName()) | ||
| bgPage.bg.destroyPalette(palette_name) | ||
| if (destroying_current) { | ||
| switchColorPalette('default') | ||
| } else { | ||
| drawColorPalettes() | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| function drawColorHistory() { | ||
| console.info("Drawing color history") | ||
| // find element for colors history squares and instructions | ||
| let history_el = document.getElementById('colors-history') | ||
| let instructions_el = document.getElementById('colors-history-instructions') | ||
| let toolbar_el = document.getElementById('colors-history-toolbar') | ||
| let history_tool_noempty_els = document.getElementsByClassName('eb-history-tool-noempty') | ||
| // first load history from palette and assemble html | ||
| let html = '' | ||
| let palette = bgPage.bg.getPalette() | ||
| for (let color of palette.colors) { | ||
| html += colorSquare(color.h) | ||
| } | ||
| history_el.innerHTML = html | ||
| // attach javascript onmouseover and onclick events | ||
| for (let n of document.getElementsByClassName('colors-history-square')) { | ||
| n.onmouseover = () => { | ||
| colorBox('new', n.dataset.color) | ||
| } | ||
| n.onclick = () => { | ||
| colorBox('current', n.dataset.color) | ||
| bgPage.bg.setColor(n.dataset.color, false) | ||
| changeColorPicker(n.dataset.color) | ||
| } | ||
| } | ||
| if (palette.colors.length > 0) { | ||
| instructions_el.innerHTML = 'Hover over squares to preview.' | ||
| for (n of history_tool_noempty_els) { | ||
| n.style.display = '' | ||
| } | ||
| } else { | ||
| instructions_el.innerHTML = 'History is empty, try to pick some colors first.' | ||
| for (n of history_tool_noempty_els) { | ||
| n.style.display = 'none' | ||
| } | ||
| } | ||
| history_el.onmouseenter = () => { | ||
| instructions_el.innerHTML = 'Click on square to select and copy to clipboard.' | ||
| } | ||
| history_el.onmouseleave = () => { | ||
| instructions_el.innerHTML = 'Hover over squares to preview..' | ||
| } | ||
| } | ||
| function initColorHistory() { | ||
| drawColorHistory() | ||
| // attach events to history buttons | ||
| document.getElementById('colors-history-clear').onclick = () => { | ||
| clearPalette() | ||
| } | ||
| // export colors history | ||
| document.getElementById('colors-history-export').onclick = () => { | ||
| exportHistory() | ||
| } | ||
| // color palette switching | ||
| drawColorPaletteSwitching() | ||
| } | ||
| function drawColorPaletteSwitching() { | ||
| let colors_palette_change = document.getElementById('colors-palette-change') | ||
| // temp disable unfinished palette switching | ||
| colors_palette_change.style.display = 'none' | ||
| // sec_color_palette = document.getElementById('colors-palette') | ||
| // span_palette_name = document.getElementById('palette-name') | ||
| // colors_palette_change.onclick = () => { | ||
| // sec_color_palette.style.display = sec_color_palette.style.display === 'none' ? 'inline-block' : 'none' | ||
| // } | ||
| // drawColorPalettes() | ||
| } | ||
| function drawColorPalettes() { | ||
| let palettes = '<a href="#" class="dib link dim ph2 ml1 white bg-dark-green br1 b--dark-green mb1" id="new-palette">new</a>' | ||
| let palette_name = bgPage.bg.getPaletteName() | ||
| // change palette name in popup display and set data-palette attribute | ||
| span_palette_name.innerHTML = palette_name | ||
| span_palette_name.dataset.palette = palette_name | ||
| for (let palette of bgPage.bg.getPaletteNames()) { | ||
| palettes += `<span class="nowrap dib"><a href="#" class="ed-palette dib link dim pl2 pr1 ml1 white bg-light-purple br1 b--light-purple mb1" data-palette="${palette}">${palette}` | ||
| let colors = bgPage.bg.getPalette(palette).colors.length | ||
| if (colors > 0) { | ||
| palettes += `<span class="dib pink pl1">${colors}</span>` | ||
| } | ||
| if (palette !== 'default') { | ||
| palettes += ` | ||
| <a class="ed-palette-destroy link dib w1 hint--top hint--no-animate hint--rounded" aria-label="Destroy Palette ${palette}!" data-palette="${palette}" href="#"> | ||
| <svg class="dim v-mid" viewBox="0 0 1792 1792" style="fill:gray;width:14px;"> | ||
| <use xlink:href="/img/icons.svg#fa-ban"> | ||
| </svg> | ||
| </a>` | ||
| } | ||
| palettes += '</a></span>' | ||
| } | ||
| sec_color_palette.innerHTML = palettes | ||
| // Support for palette click | ||
| for (let n of document.getElementsByClassName('ed-palette')) { | ||
| n.onclick = () => { | ||
| let palette = n.dataset.palette | ||
| console.info(`Asked to switch to palette ${palette}`) | ||
| if (palette !== palette_name) { | ||
| switchColorPalette(palette) | ||
| } | ||
| } | ||
| } | ||
| // Support for palete destroy click | ||
| for (let n of document.getElementsByClassName('ed-palette-destroy')) { | ||
| n.onclick = () => { | ||
| let palette = n.dataset.palette | ||
| console.info(`Asked to destroy palette ${palette}`) | ||
| destroyPalette(palette) | ||
| } | ||
| } | ||
| document.getElementById('new-palette').onclick = () => { | ||
| mscPrompt({ | ||
| title: "Name the Color Palette", | ||
| // subtitle: "No worries, you can rename it any time.", | ||
| okText: "Create Palette", | ||
| cancelText: "Cancel", | ||
| placeholder: 'palette', | ||
| onOk: (name) => { | ||
| createColorPalette(name) | ||
| } | ||
| }) | ||
| } | ||
| } | ||
| function createColorPalette(name) { | ||
| if (name !== null) { | ||
| switchColorPalette(bgPage.bg.createPalette(name).name) | ||
| } | ||
| } | ||
| function switchColorPalette(palette) { | ||
| console.info(`Switching to palette ${palette}`) | ||
| bgPage.bg.changePalette(palette) | ||
| console.info('Redrawing history and boxes') | ||
| drawColorPalettes() | ||
| drawColorHistory() | ||
| } | ||
| function exportHistory() { | ||
| let history = bgPage.bg.getPalette().colors | ||
| let csv = 'data:text/csv;charset=utf-8,' | ||
| csv += '"RGB Hex","Name","Date","Source","RGB Hex3","HSL","RGB","HTML Keyword"' | ||
| csv += "\n" | ||
| for (let color of history) { | ||
| let d = new Date(color.t) | ||
| let datestring = `${d.getFullYear()}-${("0"+(d.getMonth()+1)).slice(-2)}-${("0" + d.getDate()).slice(-2)} ${("0" + d.getHours()).slice(-2)}:${("0" + d.getMinutes()).slice(-2)}:${("0" + d.getSeconds()).slice(-2)}`; | ||
| csv += `"${color.h}","${color.n}","${datestring}","${bgPage.bg.color_sources[color.s]}"` | ||
| color = pusher.color(color.h) | ||
| let formats = [color.hex3(), color.html('hsl'), color.html('rgb'), color.html('keyword')]; | ||
| for (let format of formats) { | ||
| csv += `,"${format}"` | ||
| } | ||
| csv += "\n" | ||
| } | ||
| let data = encodeURI(csv) | ||
| console.group("csvExport") | ||
| console.log(csv) | ||
| console.groupEnd("csvExport") | ||
| let link = document.createElement('a') | ||
| link.setAttribute('href', data) | ||
| link.setAttribute('download', 'export.csv') | ||
| link.click() | ||
| } | ||
| /** | ||
| * Handle tab switching | ||
| * | ||
| * TODO: handle ajax loading | ||
| * TODO: handle pamatovani si jestli uz je nacteny nebo ne | ||
| * | ||
| * FIXME: change to something sane and not so ugly | ||
| * | ||
| * @param {string} tabId id of tab to switch to | ||
| * | ||
| */ | ||
| function switchTab(tabId) { | ||
| // on button-about hide history and color boxes | ||
| if (tabId === 'button-about') { | ||
| sec_color_boxes.style.display = 'none' | ||
| sec_color_history.style.display = 'none' | ||
| // display them on others | ||
| } else { | ||
| sec_color_boxes.style.display = 'block' | ||
| sec_color_history.style.display = 'block' | ||
| } | ||
| // color picker tab | ||
| if (tabId !== 'tab-cp' && cpicker) { | ||
| cpicker.destroy() | ||
| } | ||
| for (let tab_id in tab_ins) { | ||
| if ((tab_id.match(/-active$/) && tab_id !== `${tabId}-active`) || (tab_id.match(/-link$/) && tab_id === `${tabId}-link`)) { | ||
| tab_ins[tab_id].style.display = 'none' | ||
| } else { | ||
| tab_ins[tab_id].style.display = 'inline-block' | ||
| } | ||
| } | ||
| loadTab(tabId) | ||
| } | ||
| function loadTab(tabId) { | ||
| console.group("tabSwitch") | ||
| let content_found = false | ||
| for (let n of document.getElementsByClassName('content-page')) { | ||
| console.info(`found tab content ${n.id}`) | ||
| if (n.id === `${tabId}-content`) { | ||
| n.style.display = 'block' | ||
| content_found = true | ||
| console.info(`Found content for ${n.id}, switching.`) | ||
| } else { | ||
| n.style.display = 'none' | ||
| console.info(`Hiding content for tab ${n.id}`) | ||
| } | ||
| } | ||
| if (!content_found) { | ||
| console.info("XMLHttp: No content found, loading through AJAX") | ||
| let request = new XMLHttpRequest() | ||
| request.open('GET', `/html/${tabId}.html`) | ||
| request.onload = () => { | ||
| if (request.status >= 200 && request.status < 400) { | ||
| sec_content.insertAdjacentHTML('afterend', request.responseText) | ||
| initExternalLinks() | ||
| if (tabId === 'tab-cp') { | ||
| loadColorPicker() | ||
| } | ||
| } else { | ||
| console.error(`Error loading ${tab.id} content through AJAX: ${request.status}`) | ||
| } | ||
| } | ||
| request.send() | ||
| } else { | ||
| // color picker tab | ||
| if (tabId === 'tab-cp') { | ||
| showColorPicker() | ||
| } | ||
| } | ||
| console.groupEnd('tabSwitch') | ||
| } | ||
| function colorBox(type, color) { | ||
| if (boxes[type]) { | ||
| color = pusher.color(color) | ||
| let formats = [color.hex6(), color.hex3(), color.html('keyword'), color.html('hsl'), color.html('rgb')]; | ||
| let html = '' | ||
| for (let value of formats) { | ||
| html += `<span class="mr1 bg-white br1 ph1 mb1 dib"><code>${value}</code></span>` | ||
| } | ||
| boxes[type].innerHTML = html | ||
| boxes[type].style = `background: ${color.hex6()}` | ||
| } | ||
| } | ||
| function colorSquare(color) { | ||
| return `<div class="fl dib dim mr1 br1 mb1 ba b--gray colors-history-square" data-color="${color}" style="background-color: ${color}"> </div>` | ||
| } | ||
| function loadColorPicker() { | ||
| let cpicker_script = document.createElement('script') | ||
| cpicker_script.onload = () => { | ||
| console.info('Showing cpicker') | ||
| cpicker_input = document.getElementById('colorpicker-input') | ||
| cpicker_input.value = bgPage.bg.getColor() | ||
| showColorPicker() | ||
| } | ||
| cpicker_script.src = '/inc/color-picker/color-picker.js' | ||
| document.head.appendChild(cpicker_script) | ||
| document.getElementById('colorpicker-select').onclick = () => { | ||
| colorBox('current', cpicker.target.value) | ||
| bgPage.bg.setColor(cpicker.target.value, true, 2) | ||
| drawColorHistory() | ||
| } | ||
| } | ||
| function showColorPicker() { | ||
| // create new cpicker instance | ||
| cpicker = new CP(cpicker_input) | ||
| // function to update color in picker and color box on cp change | ||
| function update(cpicker_color) { | ||
| colorBox('new', `#${cpicker_color}`) | ||
| cpicker.target.value = `#${cpicker_color}` | ||
| } | ||
| // attach to update function | ||
| cpicker.on('start', update) | ||
| cpicker.on('drag', update) | ||
| // move color picker panel from 'body' to 'colorpicker' element | ||
| cpicker.on('enter', () => { | ||
| document.getElementById('colorpicker').appendChild(cpicker.picker) | ||
| }) | ||
| // we need to update picker also when playing with input field | ||
| // we need try/catch because when hand editing input field, color can be | ||
| // invalid and pusher library can't handle wrong syntax | ||
| function update_from_input() { | ||
| try { | ||
| colorBox('new', cpicker.target.value) | ||
| cpicker.set(cpicker.target.value) | ||
| } catch(err) {} | ||
| } | ||
| cpicker.target.onkeyup = update_from_input | ||
| cpicker.target.oncut = update_from_input | ||
| cpicker.target.onpaste = update_from_input | ||
| cpicker.target.oninput = update_from_input | ||
| // display cpicker | ||
| cpicker.enter() | ||
| } | ||
| function changeColorPicker(color) { | ||
| if (cpicker) { | ||
| cpicker.target.value = color | ||
| cpicker.set(color) | ||
| } | ||
| } |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
AI-detected potential code anomaly
Supply chain riskAI has identified unusual behaviors that may pose a security risk.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Mixed license
LicensePackage contains multiple licenses.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Improved metrics
- Number of low license alerts
0
-100%- Number of low quality alerts
1
-66.67%- Number of lines in readme file
78
1.3%- Number of low supply chain risk alerts
0
-100%- Number of medium supply chain risk alerts
1
-50%Worsened metrics
- Total package byte prevSize
800553
-41.23%- Number of package files
13
-79.37%- Lines of code
259
-95.03%No dependency changes