Remove spectrum.js from project

Was used in Menus, replaced by html "color" input

CHANGELOG-2.x.md

@@ -0,0 +1,4 @@
+## [2.0-dev - x.x.2025]
+
+### Changed
+* Reworked account action logs to use single IP column as varchar(45) for both ipv4 and ipv6 (https://github.com/slawkens/myaac/pull/289)

admin/pages/accounts.php

@@ -9,6 +9,7 @@
  */
 
 use MyAAC\Models\Account as AccountModel;
+use MyAAC\Models\AccountAction;
 use MyAAC\Models\Player;
 
 defined('MYAAC') or die('Direct access not allowed!');
@@ -481,9 +482,8 @@ else if (isset($_REQUEST['search'])) {
 									</thead>
 									<tbody>
 										<?php
-											$accountActions = \MyAAC\Models\AccountAction::where('account_id', $account->getId())->orderByDesc('date')->get();
+											$accountActions = AccountAction::where('account_id', $account->getId())->orderByDesc('date')->get();
 											foreach ($accountActions as $i => $log):
-												$log->ip = ($log->ip != 0 ? long2ip($log->ip) : inet_ntop($log->ipv6));
 												?>
 											<tr>
 												<td><?php echo $i + 1; ?></td>

admin/pages/menus.php

@@ -23,6 +23,7 @@ if (!hasFlag(FLAG_CONTENT_MENUS) && !superAdmin()) {
 }
 
 $pluginThemes = Plugins::getThemes();
+$groups = new OTS_Groups_List();
 
 if (isset($_POST['template'])) {
 	$template = $_POST['template'];
@@ -32,6 +33,8 @@ if (isset($_POST['template'])) {
 		$post_menu_link = $_POST['menu_link'] ?? [];
 		$post_menu_blank = $_POST['menu_blank'] ?? [];
 		$post_menu_color = $_POST['menu_color'] ?? [];
+		$post_menu_access = $_POST['menu_access'] ?? [];
+
 		if (count($post_menu) != count($post_menu_link)) {
 			echo 'Menu count is not equal menu links. Something went wrong when sending form.';
 			return;
@@ -50,6 +53,7 @@ if (isset($_POST['template'])) {
 						'link' => $post_menu_link[$category][$i],
 						'blank' => $post_menu_blank[$category][$i] == 'on' ? 1 : 0,
 						'color' => str_replace('#', '', $post_menu_color[$category][$i]),
+						'access' => $post_menu_access[$category][$i],
 						'category' => $category,
 						'ordering' => $i
 					]);
@@ -122,7 +126,7 @@ if (isset($_POST['template'])) {
 	?>
 	<?php
 	$menus = Menu::query()
-		->select('name', 'link', 'blank', 'color', 'category', 'ordering')
+		->select('name', 'link', 'access', 'blank', 'color', 'category', 'ordering')
 		->where('enabled', 1)
 		->where('template', $template)
 		->orderBy('ordering')
@@ -151,11 +155,34 @@ if (isset($_POST['template'])) {
 									foreach ($menus[$id] as $menu):
 										$color = (empty($menu['color']) ? ($cat['default_links_color'] ?? ($config['menu_default_links_color'] ?? ($config['menu_default_color'] ?? '#ffffff'))) : '#' . $menu['color']);
 										?>
-										<li class="ui-state-default" id="list-<?php echo $id ?>-<?php echo $i ?>"><label>Name:</label> <input type="text" name="menu[<?php echo $id ?>][]" value="<?php echo escapeHtml($menu['name']); ?>"/>
-											<label>Link:</label> <input type="text" name="menu_link[<?php echo $id ?>][]" value="<?php echo $menu['link'] ?>"/>
-											<input type="hidden" name="menu_blank[<?php echo $id ?>][]" value="0"/>
-											<label><input class="blank-checkbox" type="checkbox" <?php echo($menu['blank'] == 1 ? 'checked' : '') ?>/><span title="Open in New Window">New Window</span></label>
-											<input class="color-picker" type="text" name="menu_color[<?php echo $id ?>][]" value="<?php echo $color; ?>"/>
+										<li class="ui-state-default" id="list-<?php echo $id ?>-<?php echo $i ?>">
+											<label class="label_menu_name">Name: <input type="text" name="menu[<?php echo $id ?>][]" class="form-control menu-name" value="<?php echo escapeHtml($menu['name']); ?>"/>
+											</label>
+
+											<label class="label_menu_link">Link: <input type="text" name="menu_link[<?= $id ?>][]" class="form-control menu-link" value="<?php echo $menu['link'] ?>"/>
+											</label>
+
+											<br/>
+
+											<div class="menu-options-row">
+
+												<label>Access:
+													<select name="menu_access[<?= $id ?>][]" class="form-control menu-access">
+														<option value="0" <?= ($menu['access'] == 0 ? 'selected' : ''); ?>>Guest*</option>
+														<?php foreach ($groups->getGroups() as $group): ?>
+															<option value="<?= $group->getId(); ?>" <?= ($menu['access'] == $group->getId() ? 'selected' : ''); ?>><?= ucfirst($group->getName()); ?></option>
+														<?php endforeach; ?>
+													</select>
+												</label>
+
+												<label>Color: <input class="menu-color" type="color" name="menu_color[<?php echo $id ?>][]" value="<?php echo $color; ?>"/>
+												</label>
+
+												<input type="hidden" name="menu_blank[<?php echo $id ?>][]" class="menu-blank" value="0"/>
+												<label><input type="checkbox" class="menu-blank-checkbox" <?php echo($menu['blank'] == 1 ? 'checked' : '') ?>/><span title="Open in New Window">New Window</span></label>
+
+											</div>
+
 											<a class="remove-button" id="remove-button-<?php echo $id ?>-<?php echo $i ?>"><i class="fas fa-trash"></a></i></li>
 										<?php $i++; $last_id[$id] = $i;
 									endforeach;

common.php

@@ -26,8 +26,8 @@
 if (version_compare(phpversion(), '8.1', '<')) die('PHP version 8.1 or higher is required.');
 
 const MYAAC = true;
-const MYAAC_VERSION = '1.8.5';
-const DATABASE_VERSION = 46;
+const MYAAC_VERSION = '2.0-dev';
+const DATABASE_VERSION = 48;
 const TABLE_PREFIX = 'myaac_';
 define('START_TIME', microtime(true));
 define('MYAAC_OS', stripos(PHP_OS, 'WIN') === 0 ? 'WINDOWS' : (strtoupper(PHP_OS) === 'DARWIN' ? 'MAC' : 'LINUX'));

install/includes/schema.sql

@@ -1,11 +1,11 @@
 CREATE TABLE IF NOT EXISTS `myaac_account_actions`
 (
+	`id` int NOT NULL AUTO_INCREMENT,
 	`account_id` int NOT NULL,
-	`ip` int unsigned NOT NULL DEFAULT 0,
-	`ipv6` binary(16) NOT NULL DEFAULT 0,
+	`ip` varchar(45) NOT NULL DEFAULT '',
 	`date` int NOT NULL DEFAULT 0,
 	`action` varchar(255) NOT NULL DEFAULT '',
-	KEY (`account_id`)
+	PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8mb4;
 
 CREATE TABLE IF NOT EXISTS `myaac_account_emails_verify`
@@ -102,6 +102,7 @@ CREATE TABLE IF NOT EXISTS `myaac_menu`
 	`template` varchar(255) NOT NULL,
 	`name` varchar(255) NOT NULL,
 	`link` varchar(255) NOT NULL,
+	`access` tinyint NOT NULL DEFAULT 0,
 	`blank` tinyint NOT NULL DEFAULT 0,
 	`color` varchar(6) NOT NULL DEFAULT '',
 	`category` int NOT NULL DEFAULT 1,

system/libs/pot/OTS_Account.php

@@ -12,6 +12,8 @@
  * @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU Lesser General Public License, Version 3
  */
 
+use MyAAC\Models\AccountAction;
+
 /**
  * OTServ account abstraction.
  *
@@ -1007,26 +1009,16 @@ class OTS_Account extends OTS_Row_DAO implements IteratorAggregate, Countable
 
 	public function logAction($action)
 	{
-		$ip = get_browser_real_ip();
-		if(!str_contains($ip, ":")) {
-			$ipv6 = '0';
-		}
-		else {
-			$ipv6 = $ip;
-			$ip = '';
-		}
-
-		return $this->db->exec('INSERT INTO `' . TABLE_PREFIX . 'account_actions` (`account_id`, `ip`, `ipv6`, `date`, `action`) VALUES (' . $this->db->quote($this->getId()).', ' . ($ip == '' ? '0' : $this->db->quote(ip2long($ip))) . ', (' . ($ipv6 == '0' ? $this->db->quote('') : $this->db->quote(inet_pton($ipv6))) . '), UNIX_TIMESTAMP(NOW()), ' . $this->db->quote($action).')');
+		AccountAction::create([
+			'account_id' => $this->getId(),
+			'ip' => get_browser_real_ip(),
+			'date' => time(),
+			'action' => $action,
+		]);
 	}
 
-	public function getActionsLog($limit1, $limit2)
-	{
-		$actions = array();
-
-		foreach($this->db->query('SELECT `ip`, `ipv6`, `date`, `action` FROM `' . TABLE_PREFIX . 'account_actions` WHERE `account_id` = ' . $this->data['id'] . ' ORDER by `date` DESC LIMIT ' . $limit1 . ', ' . $limit2 . '')->fetchAll() as $a)
-			$actions[] = array('ip' => $a['ip'], 'ipv6' => $a['ipv6'], 'date' => $a['date'], 'action' => $a['action']);
-
-		return $actions;
+	public function getActionsLog($limit) {
+		return AccountAction::where('account_id', $this->data['id'])->orderByDesc('date')->limit($limit)->get()->toArray();
 	}
 /**
  * Returns players iterator.

system/libs/pot/OTS_DB_MySQL.php

@@ -277,6 +277,7 @@ class OTS_DB_MySQL extends OTS_Base_DB
 				'field' => $result['Field'],
 				'type' => $result['Type'],
 				'null' => strtolower($result['Null']),
+				'key' => strtolower($result['Key'] ?? ''),
 				'default' => $result['Default'],
 				'extra' => $result['Extra'],
 			];

system/migrations/47.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * @var OTS_DB_MySQL $db
+ */
+
+// 2025-02-27
+// remove ipv6, change to ip (for both ipv4 + ipv6) as VARCHAR(45)
+$up = function () use ($db) {
+	$accountActionsInfo = $db->getColumnInfo(TABLE_PREFIX . 'account_actions', 'account_id');
+	if ($accountActionsInfo && is_array($accountActionsInfo) && $accountActionsInfo['key'] == 'pri') {
+		$db->query("ALTER TABLE `myaac_account_actions` DROP KEY `account_id`;");
+	}
+
+	if (!$db->hasColumn(TABLE_PREFIX . 'account_actions', 'id')) {
+		$db->addColumn(TABLE_PREFIX . 'account_actions', 'id', 'INT NOT NULL AUTO_INCREMENT FIRST, ADD PRIMARY KEY (`id`)');
+	}
+
+	$db->modifyColumn(TABLE_PREFIX . 'account_actions', 'ip', "VARCHAR(45) NOT NULL DEFAULT ''");
+	$db->query("UPDATE `" . TABLE_PREFIX . "account_actions` SET `ip` = INET_NTOA(`ip`) WHERE `ip` != '0';");
+	$db->query("UPDATE `" . TABLE_PREFIX . "account_actions` SET `ip` = INET6_NTOA(`ipv6`) WHERE `ip` = '0';");
+
+	if ($db->hasColumn(TABLE_PREFIX . 'account_actions', 'ipv6')) {
+		$db->dropColumn(TABLE_PREFIX . 'account_actions', 'ipv6');
+	}
+};
+
+$down = function () use ($db) {
+	if ($db->hasColumn(TABLE_PREFIX . 'account_actions', 'id')) {
+		$db->query("ALTER TABLE `" . TABLE_PREFIX . "account_actions` DROP `id`;");
+	}
+
+	$db->query("ALTER TABLE  `" . TABLE_PREFIX . "account_actions` ADD KEY (`account_id`);");
+
+	if (!$db->hasColumn(TABLE_PREFIX . 'account_actions', 'ipv6')) {
+		$db->addColumn(TABLE_PREFIX . 'account_actions', 'ipv6', "BINARY(16) NOT NULL DEFAULT 0x00000000000000000000000000000000 AFTER ip");
+	}
+
+	$db->query("UPDATE `" . TABLE_PREFIX . "account_actions` SET `ipv6` = INET6_ATON(ip) WHERE NOT IS_IPV4(`ip`);");
+	$db->query("UPDATE `" . TABLE_PREFIX . "account_actions` SET `ip` = INET_ATON(`ip`) WHERE IS_IPV4(`ip`);");
+	$db->query("UPDATE `" . TABLE_PREFIX . "account_actions` SET `ip` = 0 WHERE `ipv6` != 0x00000000000000000000000000000000;");
+	$db->modifyColumn(TABLE_PREFIX . 'account_actions', 'ip', "INT(11) UNSIGNED NOT NULL DEFAULT 0;");
+};

system/migrations/48.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * @var OTS_DB_MySQL $db
+ */
+
+$up = function () use ($db) {
+	if (!$db->hasColumn(TABLE_PREFIX . 'menu', 'access')) {
+		$db->addColumn(TABLE_PREFIX . 'menu', 'access', 'TINYINT NOT NULL DEFAULT 0 AFTER `link`');
+	}
+};
+
+$down = function () use ($db) {
+	if ($db->hasColumn(TABLE_PREFIX . 'menu', 'access')) {
+		$db->dropColumn(TABLE_PREFIX . 'menu', 'access');
+	}
+};

system/pages/account/manage.php

@@ -96,12 +96,8 @@ if($email_new_time > 1)
 	}
 }
 
-$actions = array();
-foreach($account_logged->getActionsLog(0, 1000) as $action) {
-	$actions[] = array('action' => $action['action'], 'date' => $action['date'], 'ip' => $action['ip'] != 0 ? long2ip($action['ip']) : inet_ntop($action['ipv6']));
-}
+$actions = $account_logged->getActionsLog(1000);
 
-$players = array();
 /** @var OTS_Players_List $account_players */
 $account_players = $account_logged->getPlayersList();
 $account_players->orderBy('id');

system/src/Models/AccountAction.php

@@ -9,6 +9,6 @@ class AccountAction extends Model {
 
 	public $timestamps = false;
 
-	protected $fillable = ['account_id', 'ip', 'ipv6', 'date', 'action'];
+	protected $fillable = ['account_id', 'ip', 'date', 'action'];
 
 }

system/src/Models/Menu.php

@@ -9,6 +9,6 @@ class Menu extends Model {
 
 	public $timestamps = false;
 
-	protected $fillable = ['template', 'name', 'link', 'blank', 'color', 'category', 'ordering', 'enabled'];
+	protected $fillable = ['template', 'name', 'link', 'access', 'blank', 'color', 'category', 'ordering', 'enabled'];
 
 }

system/template.php

@@ -146,10 +146,10 @@ if($twig_loader) {
 
 function get_template_menus(): array
 {
-	global $template_name;
+	global $template_name, $logged_access;
 
 	$result = Cache::remember('template_menus_' . $template_name, 10 * 60, function () use ($template_name) {
-		$result = Menu::select(['name', 'link', 'blank', 'color', 'category'])
+		$result = Menu::select(['name', 'link', 'access', 'blank', 'color', 'category'])
 			->where('template', $template_name)
 			->orderBy('category')
 			->orderBy('ordering')
@@ -163,6 +163,10 @@ function get_template_menus(): array
 
 	$menus = [];
 	foreach($result as $menu) {
+		if ($menu['access'] > $logged_access) {
+			continue;
+		}
+
 		if (empty($menu['link'])) {
 			$menu['link'] = 'news';
 		}

system/templates/admin.menus.header.html.twig

@@ -2,7 +2,8 @@
 	<p class="note">You are editing: {{ template }}<br/><br/>
 		Hint: You can drag menu items.<br/>
 		Hint: Add links to external sites using: <b>http://</b> or <b>https://</b> prefix.<br/>
-		Not all templates support blank and colorful links.
+		Not all templates support blank and colorful links.<br/>
+		* Guest means everyone will see the link. Player means registered and logged-in user.
 	</p>
 	<div class="row text-center">
 		<div class="col-md-2 col-sm-1"></div>

system/templates/admin.menus.js.html.twig

@@ -14,42 +14,62 @@
 	colors[{{ cat }}] = '{{ options['default_links_color'] ?? (menuDefaultLinksColor ?? config('menu_default_color')) }}';
 	{% endfor %}
 
+	function confirmRemoveMenuItem(that)
+	{
+		let id = $(that).attr("id");
+		if (confirm('Are you sure, that you want to remove this element?')) {
+			$('#list-' + id.replace('remove-button-', '')).remove();
+		}
+	}
+
 	$(function () {
 		const $sortable = $(".sortable");
 		$sortable.sortable();
 		$sortable.disableSelection();
 
 		$(".remove-button").on('click', function () {
-			var id = $(this).attr("id");
-			$('#list-' + id.replace('remove-button-', '')).remove();
+			confirmRemoveMenuItem(this);
 		});
 
 		$(".add-button").on('click', function () {
-			var cat = $(this).attr("id").replace('add-button-', '');
-			var id = last_id[cat];
+			let cat = $(this).attr("id").replace('add-button-', '');
+			let id = last_id[cat];
 			last_id[cat]++;
 			const color = colors[cat];
-			$('#sortable-' + cat).append('<li class="ui-state-default" id="list-' + cat + '-' + id + '"><label>Name:</label> <input type="text" name="menu[' + cat + '][]" value=""/> <label>Link:</label> <input type="text" name="menu_link[' + cat + '][]" value=""/><input type="hidden" name="menu_blank[' + cat + '][]" value="0" /> <label><input class="blank-checkbox" type="checkbox"/><span title="Open in New Window">New Window</span></label> <input class="color-picker" type="text" name="menu_color[' + cat + '][]" value="#' + color + '" /> <a class="remove-button" id="remove-button-' + cat + '-' + id + '"><i class="fas fa-trash"></i></a></li>'); //add input bo
-			$('#remove-button-' + cat + '-' + id).on('click', function () {
-				$('#list-' + $(this).attr("id").replace('remove-button-', '')).remove();
-			});
 
-			initializeSpectrum();
+			let copy = $('.ui-state-default:first').clone();
+
+			copy.attr('id', 'list-' + cat + '-' + id);
+
+			copy.find('.menu-name').val('').attr('name', 'menu[' + cat + '][]');
+			copy.find('.menu-link').val('').attr('name', 'menu_link[' + cat + '][]');
+			copy.find('.menu-access').val('0').attr('name', 'menu_access[' + cat + '][]');
+			copy.find('.menu-color').val(color).attr('name', 'menu_color[' + cat + '][]');
+			copy.find('.menu-blank').attr('name', 'menu_blank[' + cat + '][]');
+			copy.find('.menu-blank-checkbox').prop('checked', false);
+
+			copy.find('.remove-button').attr('id', 'remove-button-' + cat + '-' + id);
+
+			$('#sortable-' + cat).append(copy);
+
+			$('#remove-button-' + cat + '-' + id).on('click', function () {
+				confirmRemoveMenuItem(this);
+			});
 		});
 
 		$("#menus-form").on('submit', function (e) {
-			$('.blank-checkbox:not(:checked)').each(function (i, obj) {
+			$('.menu-blank-checkbox:not(:checked)').each(function (i, obj) {
 				$(obj).parent().prev().val("off");
 			});
 
-			$('.blank-checkbox:checked').each(function (i, obj) {
+			$('.menu-blank-checkbox:checked').each(function (i, obj) {
 				$(obj).parent().prev().val("on");
 			});
 		});
 
 	});
 </script>
-<style type="text/css">
+<style>
 	.sortable {
 		list-style-type: none;
 		margin: 0;
@@ -60,24 +80,16 @@
 	.remove-button, .add-button {
 		cursor: pointer;
 	}
-</style>
-<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/js/spectrum.js"></script>
-<link type="text/css" rel="stylesheet" href="{{ constant('BASE_URL') }}tools/css/spectrum.css"/>
-<script type="text/javascript">
-	$(function () {
-		initializeSpectrum();
-	});
 
-	function initializeSpectrum() {
-		$(".color-picker").spectrum({
-			preferredFormat: "hex",
-			showInput: true,
-			showPalette: true,
-			palette: [
-				['black', 'white', 'blanchedalmond',
-					'rgb(255, 128, 0);', 'hsv 100 70 50'],
-				['red', 'yellow', 'green', 'blue', 'violet']
-			]
-		});
+	.ui-sortable-handle {
+		padding: 10px;
 	}
-</script>
+
+	.label_menu_name, .label_menu_link {
+		width: 45%;
+	}
+
+	.menu-name, .menu-link {
+		width: 100%;
+	}
+</style>

tools/css/spectrum.css

@@ -1,507 +0,0 @@
-/***
-Spectrum Colorpicker v1.8.0
-https://github.com/bgrins/spectrum
-Author: Brian Grinstead
-License: MIT
-***/
-
-.sp-container {
-    position:absolute;
-    top:0;
-    left:0;
-    display:inline-block;
-    *display: inline;
-    *zoom: 1;
-    /* https://github.com/bgrins/spectrum/issues/40 */
-    z-index: 9999994;
-    overflow: hidden;
-}
-.sp-container.sp-flat {
-    position: relative;
-}
-
-/* Fix for * { box-sizing: border-box; } */
-.sp-container,
-.sp-container * {
-    -webkit-box-sizing: content-box;
-       -moz-box-sizing: content-box;
-            box-sizing: content-box;
-}
-
-/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
-.sp-top {
-  position:relative;
-  width: 100%;
-  display:inline-block;
-}
-.sp-top-inner {
-   position:absolute;
-   top:0;
-   left:0;
-   bottom:0;
-   right:0;
-}
-.sp-color {
-    position: absolute;
-    top:0;
-    left:0;
-    bottom:0;
-    right:20%;
-}
-.sp-hue {
-    position: absolute;
-    top:0;
-    right:0;
-    bottom:0;
-    left:84%;
-    height: 100%;
-}
-
-.sp-clear-enabled .sp-hue {
-    top:33px;
-    height: 77.5%;
-}
-
-.sp-fill {
-    padding-top: 80%;
-}
-.sp-sat, .sp-val {
-    position: absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-}
-
-.sp-alpha-enabled .sp-top {
-    margin-bottom: 18px;
-}
-.sp-alpha-enabled .sp-alpha {
-    display: block;
-}
-.sp-alpha-handle {
-    position:absolute;
-    top:-4px;
-    bottom: -4px;
-    width: 6px;
-    left: 50%;
-    cursor: pointer;
-    border: 1px solid black;
-    background: white;
-    opacity: .8;
-}
-.sp-alpha {
-    display: none;
-    position: absolute;
-    bottom: -14px;
-    right: 0;
-    left: 0;
-    height: 8px;
-}
-.sp-alpha-inner {
-    border: solid 1px #333;
-}
-
-.sp-clear {
-    display: none;
-}
-
-.sp-clear.sp-clear-display {
-    background-position: center;
-}
-
-.sp-clear-enabled .sp-clear {
-    display: block;
-    position:absolute;
-    top:0px;
-    right:0;
-    bottom:0;
-    left:84%;
-    height: 28px;
-}
-
-/* Don't allow text selection */
-.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
-    -webkit-user-select:none;
-    -moz-user-select: -moz-none;
-    -o-user-select:none;
-    user-select: none;
-}
-
-.sp-container.sp-input-disabled .sp-input-container {
-    display: none;
-}
-.sp-container.sp-buttons-disabled .sp-button-container {
-    display: none;
-}
-.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
-    display: none;
-}
-.sp-palette-only .sp-picker-container {
-    display: none;
-}
-.sp-palette-disabled .sp-palette-container {
-    display: none;
-}
-
-.sp-initial-disabled .sp-initial {
-    display: none;
-}
-
-
-/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
-.sp-sat {
-    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
-    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
-    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
-    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
-    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
-}
-.sp-val {
-    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
-    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
-    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
-    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
-    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
-}
-
-.sp-hue {
-    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
-    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-}
-
-/* IE filters do not support multiple color stops.
-   Generate 6 divs, line them up, and do two color gradients for each.
-   Yes, really.
- */
-.sp-1 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
-}
-.sp-2 {
-    height:16%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
-}
-.sp-3 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
-}
-.sp-4 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
-}
-.sp-5 {
-    height:16%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
-}
-.sp-6 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
-}
-
-.sp-hidden {
-    display: none !important;
-}
-
-/* Clearfix hack */
-.sp-cf:before, .sp-cf:after { content: ""; display: table; }
-.sp-cf:after { clear: both; }
-.sp-cf { *zoom: 1; }
-
-/* Mobile devices, make hue slider bigger so it is easier to slide */
-@media (max-device-width: 480px) {
-    .sp-color { right: 40%; }
-    .sp-hue { left: 63%; }
-    .sp-fill { padding-top: 60%; }
-}
-.sp-dragger {
-   border-radius: 5px;
-   height: 5px;
-   width: 5px;
-   border: 1px solid #fff;
-   background: #000;
-   cursor: pointer;
-   position:absolute;
-   top:0;
-   left: 0;
-}
-.sp-slider {
-    position: absolute;
-    top:0;
-    cursor:pointer;
-    height: 3px;
-    left: -1px;
-    right: -1px;
-    border: 1px solid #000;
-    background: white;
-    opacity: .8;
-}
-
-/*
-Theme authors:
-Here are the basic themeable display options (colors, fonts, global widths).
-See http://bgrins.github.io/spectrum/themes/ for instructions.
-*/
-
-.sp-container {
-    border-radius: 0;
-    background-color: #ECECEC;
-    border: solid 1px #f0c49B;
-    padding: 0;
-}
-.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
-    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
-}
-.sp-top {
-    margin-bottom: 3px;
-}
-.sp-color, .sp-hue, .sp-clear {
-    border: solid 1px #666;
-}
-
-/* Input */
-.sp-input-container {
-    float:right;
-    width: 100px;
-    margin-bottom: 4px;
-}
-.sp-initial-disabled  .sp-input-container {
-    width: 100%;
-}
-.sp-input {
-   font-size: 12px !important;
-   border: 1px inset;
-   padding: 4px 5px;
-   margin: 0;
-   width: 100%;
-   background:transparent;
-   border-radius: 3px;
-   color: #222;
-}
-.sp-input:focus  {
-    border: 1px solid orange;
-}
-.sp-input.sp-validation-error {
-    border: 1px solid red;
-    background: #fdd;
-}
-.sp-picker-container , .sp-palette-container {
-    float:left;
-    position: relative;
-    padding: 10px;
-    padding-bottom: 300px;
-    margin-bottom: -290px;
-}
-.sp-picker-container {
-    width: 172px;
-    border-left: solid 1px #fff;
-}
-
-/* Palettes */
-.sp-palette-container {
-    border-right: solid 1px #ccc;
-}
-
-.sp-palette-only .sp-palette-container {
-    border: 0;
-}
-
-.sp-palette .sp-thumb-el {
-    display: block;
-    position:relative;
-    float:left;
-    width: 24px;
-    height: 15px;
-    margin: 3px;
-    cursor: pointer;
-    border:solid 2px transparent;
-}
-.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
-    border-color: orange;
-}
-.sp-thumb-el {
-    position:relative;
-}
-
-/* Initial */
-.sp-initial {
-    float: left;
-    border: solid 1px #333;
-}
-.sp-initial span {
-    width: 30px;
-    height: 25px;
-    border:none;
-    display:block;
-    float:left;
-    margin:0;
-}
-
-.sp-initial .sp-clear-display {
-    background-position: center;
-}
-
-/* Buttons */
-.sp-palette-button-container,
-.sp-button-container {
-    float: right;
-}
-
-/* Replacer (the little preview div that shows up instead of the <input>) */
-.sp-replacer {
-    margin:0;
-    overflow:hidden;
-    cursor:pointer;
-    padding: 4px;
-    display:inline-block;
-    *zoom: 1;
-    *display: inline;
-    border: solid 1px #91765d;
-    background: #eee;
-    color: #333;
-    vertical-align: middle;
-}
-.sp-replacer:hover, .sp-replacer.sp-active {
-    border-color: #F0C49B;
-    color: #111;
-}
-.sp-replacer.sp-disabled {
-    cursor:default;
-    border-color: silver;
-    color: silver;
-}
-.sp-dd {
-    padding: 2px 0;
-    height: 16px;
-    line-height: 16px;
-    float:left;
-    font-size:10px;
-}
-.sp-preview {
-    position:relative;
-    width:25px;
-    height: 20px;
-    border: solid 1px #222;
-    margin-right: 5px;
-    float:left;
-    z-index: 0;
-}
-
-.sp-palette {
-    *width: 220px;
-    max-width: 220px;
-}
-.sp-palette .sp-thumb-el {
-    width:16px;
-    height: 16px;
-    margin:2px 1px;
-    border: solid 1px #d0d0d0;
-}
-
-.sp-container {
-    padding-bottom:0;
-}
-
-
-/* Buttons: http://hellohappy.org/css3-buttons/ */
-.sp-container button {
-  background-color: #eeeeee;
-  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
-  border: 1px solid #ccc;
-  border-bottom: 1px solid #bbb;
-  border-radius: 3px;
-  color: #333;
-  font-size: 14px;
-  line-height: 1;
-  padding: 5px 4px;
-  text-align: center;
-  text-shadow: 0 1px 0 #eee;
-  vertical-align: middle;
-}
-.sp-container button:hover {
-    background-color: #dddddd;
-    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
-    border: 1px solid #bbb;
-    border-bottom: 1px solid #999;
-    cursor: pointer;
-    text-shadow: 0 1px 0 #ddd;
-}
-.sp-container button:active {
-    border: 1px solid #aaa;
-    border-bottom: 1px solid #888;
-    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-}
-.sp-cancel {
-    font-size: 11px;
-    color: #d93f3f !important;
-    margin:0;
-    padding:2px;
-    margin-right: 5px;
-    vertical-align: middle;
-    text-decoration:none;
-
-}
-.sp-cancel:hover {
-    color: #d93f3f !important;
-    text-decoration: underline;
-}
-
-
-.sp-palette span:hover, .sp-palette span.sp-thumb-active {
-    border-color: #000;
-}
-
-.sp-preview, .sp-alpha, .sp-thumb-el {
-    position:relative;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-}
-.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
-    display:block;
-    position:absolute;
-    top:0;left:0;bottom:0;right:0;
-}
-
-.sp-palette .sp-thumb-inner {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-}
-
-.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
-}
-
-.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
-}
-
-.sp-clear-display {
-    background-repeat:no-repeat;
-    background-position: center;
-    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
-}