From ee013cdefba9b9852746e9e5aa25886f332f4e45 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 8 Oct 2012 19:38:02 +0200
Subject: [PATCH] Added color picker for WCF

---
 com.woltlab.wcf/acpMenu.xml                   |  21 -
 com.woltlab.wcf/userGroupOption.xml           |  30 -
 .../install/files/images/colorPickerBar.png   | Bin 0 -> 972 bytes
 .../files/images/colorPickerGradient.png      | Bin 0 -> 12600 bytes
 wcfsetup/install/files/js/WCF.ColorPicker.js  | 628 ++++++++++++++++++
 .../lib/data/style/StyleAction.class.php      |  52 +-
 .../style/variable/StyleVariable.class.php    |  29 +
 .../variable/StyleVariableAction.class.php    |  20 +
 .../variable/StyleVariableEditor.class.php    |  20 +
 .../variable/StyleVariableList.class.php      |  20 +
 wcfsetup/install/files/style/colorPicker.less | 121 ++++
 wcfsetup/setup/db/install.sql                 |   2 +
 12 files changed, 891 insertions(+), 52 deletions(-)
 create mode 100644 wcfsetup/install/files/images/colorPickerBar.png
 create mode 100644 wcfsetup/install/files/images/colorPickerGradient.png
 create mode 100644 wcfsetup/install/files/js/WCF.ColorPicker.js
 create mode 100644 wcfsetup/install/files/lib/data/style/variable/StyleVariable.class.php
 create mode 100644 wcfsetup/install/files/lib/data/style/variable/StyleVariableAction.class.php
 create mode 100644 wcfsetup/install/files/lib/data/style/variable/StyleVariableEditor.class.php
 create mode 100644 wcfsetup/install/files/lib/data/style/variable/StyleVariableList.class.php
 create mode 100644 wcfsetup/install/files/style/colorPicker.less

diff --git a/com.woltlab.wcf/acpMenu.xml b/com.woltlab.wcf/acpMenu.xml
index 38b8142720..a571b014ec 100644
--- a/com.woltlab.wcf/acpMenu.xml
+++ b/com.woltlab.wcf/acpMenu.xml
@@ -238,27 +238,6 @@
 			<showorder>3</showorder>
 		</acpmenuitem>
 		
-		<!-- style -->
-		<acpmenuitem name="wcf.acp.menu.link.style">
-			<parent>wcf.acp.menu.link.display</parent>
-			<showorder>1</showorder>
-		</acpmenuitem>
-		
-		<acpmenuitem name="wcf.acp.menu.link.style.list">
-			<link>index.php/StyleList/</link>
-			<parent>wcf.acp.menu.link.style</parent>
-			<permissions>admin.style.canEditStyle,admin.style.canDeleteStyle</permissions>
-			<showorder>1</showorder>
-		</acpmenuitem>
-		
-		<acpmenuitem name="wcf.acp.menu.link.style.add">
-			<link>index.php/StyleAdd/</link>
-			<parent>wcf.acp.menu.link.style</parent>
-			<permissions>admin.style.canAddStyle</permissions>
-			<showorder>2</showorder>
-		</acpmenuitem>
-		<!-- /style -->
-		
 		<acpmenuitem name="wcf.acp.menu.link.content">
 			<showorder>4</showorder>
 		</acpmenuitem>
diff --git a/com.woltlab.wcf/userGroupOption.xml b/com.woltlab.wcf/userGroupOption.xml
index 6c6e3dfcef..957b989aa2 100644
--- a/com.woltlab.wcf/userGroupOption.xml
+++ b/com.woltlab.wcf/userGroupOption.xml
@@ -44,9 +44,6 @@
 			<category name="admin.content">
 				<parent>admin</parent>
 			</category>
-			<category name="admin.style">
-				<parent>admin.display</parent>
-			</category>
 			<category name="admin.language">
 				<parent>admin.display</parent>
 			</category>
@@ -180,33 +177,6 @@
 				<admindefaultvalue>1</admindefaultvalue>
 			</option>
 			
-			<!-- admin.style -->
-			<option name="admin.style.canAddStyle">
-				<categoryname>admin.style</categoryname>
-				<optiontype>boolean</optiontype>
-				<defaultvalue>0</defaultvalue>
-				<admindefaultvalue>1</admindefaultvalue>
-			</option>
-			<option name="admin.style.canEditStyle">
-				<categoryname>admin.style</categoryname>
-				<optiontype>boolean</optiontype>
-				<defaultvalue>0</defaultvalue>
-				<admindefaultvalue>1</admindefaultvalue>
-			</option>
-			<option name="admin.style.canDeleteStyle">
-				<categoryname>admin.style</categoryname>
-				<optiontype>boolean</optiontype>
-				<defaultvalue>0</defaultvalue>
-				<admindefaultvalue>1</admindefaultvalue>
-			</option>
-			<option name="admin.style.canUseDisabledStyle">
-				<categoryname>admin.style</categoryname>
-				<optiontype>boolean</optiontype>
-				<defaultvalue>0</defaultvalue>
-				<admindefaultvalue>1</admindefaultvalue>
-			</option>
-			<!-- /admin.style -->
-			
 			<option name="admin.language.canAddLanguage">
 				<categoryname>admin.language</categoryname>
 				<optiontype>boolean</optiontype>
diff --git a/wcfsetup/install/files/images/colorPickerBar.png b/wcfsetup/install/files/images/colorPickerBar.png
new file mode 100644
index 0000000000000000000000000000000000000000..65d4bec5fb8f5ee3e9dfd37e6d26c0cedaa793b3
GIT binary patch
literal 972
zcmaJ=F>KR76m?-Kg|Y(@I=L(H-8o59TQMbx6Kbh$OB$&e7;x=tW3~3V_Jued05KpT
zDkLNZSXfyQ5)uPar4oq+Pz3`UObi_>78sBU;+!Ta1HrO%|4#3{|Ng&!cNgX^kB^-l
z69i%0n9-|z9ZCMtV?6qG_1;ImoMGiUTcj(jWraj2ICPl+!?RXNl~_)D;~mKh!g0~9
z)mhz~Rc-1?R)UdYFW_uJ$WO<CWv>wimdUE?YvQ-<*CKEoO<c;F$P7xP;m&M^WN~w@
zW^b<9iX%>61o>Fy0v=%&h`n_`Qe#c*>Z&|Wj-d#;5Vod?ho<W00w~dtfUJa4Hk!m>
zG9%#(QZmW~AR~+*mLbZeFjBKQ6=Bf(M4l~lR@ACq>E+@(O>8h0s1UYVEvc23Xt)Zo
zq9_o_P?l31k&4<rv*MH=P4pFX64{{}FqiruQM8t6lW8J%dRT%N3}pSN*CyUD7+V3v
z5=u(y15NY)P|q8nBUU9xe*Y;P)!G4pRT9x=X!DC(nMhIvYAGZZqhXEG^?nx@8kEtf
zK?6`)%t{z6xxPbNQ5SETs^Le>@@-=1n#dI-*LBo%Ifsf_xrj<i5#zEvHKpXr7-urL
zl1`^9N}sD!yXg_1^|{Uww=|TSjDi>N%sL6(>%^&q)C1j;Rd=`-WvE_{>kRi&7|Mm*
z3`{QeuZ!*<@##sz!PxT6VDO30r#<9joo}Dd@h5S~&<nNr^X`KeCpyBZH~O95H|fkq
z_WS6$mnR>0I-gE|-Fy3NXYbY4`~A+(8y|MQ+<(Hu17m;t$D@byw?>3nd29FS!Ik;s
NeHrCB{dw`)?LPsSI8Oio

literal 0
HcmV?d00001

diff --git a/wcfsetup/install/files/images/colorPickerGradient.png b/wcfsetup/install/files/images/colorPickerGradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..608c3f7d18ac6d2b0d0979bbd98e9a036f6eaf3c
GIT binary patch
literal 12600
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

literal 0
HcmV?d00001

diff --git a/wcfsetup/install/files/js/WCF.ColorPicker.js b/wcfsetup/install/files/js/WCF.ColorPicker.js
new file mode 100644
index 0000000000..68c4f97d38
--- /dev/null
+++ b/wcfsetup/install/files/js/WCF.ColorPicker.js
@@ -0,0 +1,628 @@
+WCF.ColorPicker = Class.extend({
+	/**
+	 * hue bar element
+	 * @var	jQuery
+	 */
+	_bar: null,
+	
+	/**
+	 * bar selector is being moved
+	 * @var	boolean
+	 */
+	_barActive: false,
+	
+	/**
+	 * bar selector element
+	 * @var	jQuery
+	 */
+	_barSelector: null,
+	
+	/**
+	 * dialog overlay
+	 * @var	jQuery
+	 */
+	_dialog: null,
+	
+	/**
+	 * initialization state
+	 * @var	boolean
+	 */
+	_didInit: false,
+	
+	/**
+	 * active element id
+	 * @var	string
+	 */
+	_elementID: '',
+	
+	/**
+	 * saturation and value gradient element
+	 * @var	jQuery
+	 */
+	_gradient: null,
+	
+	/**
+	 * gradient selector is being moved
+	 * @var	boolean
+	 */
+	_gradientActive: false,
+	
+	/**
+	 * gradient selector element
+	 * @var	jQuery
+	 */
+	_gradientSelector: null,
+	
+	/**
+	 * HEX input element
+	 * @var	jQuery
+	 */
+	_hex: null,
+	
+	/**
+	 * HSV representation
+	 * @var	object
+	 */
+	_hsv: { },
+	
+	/**
+	 * visual new color element
+	 * @var	jQuery
+	 */
+	_newColor: null,
+	
+	/**
+	 * visual previous color element
+	 * @var	jQuery
+	 */
+	_oldColor: null,
+	
+	/**
+	 * list of RGBa input elements
+	 * @var	object
+	 */
+	_rgba: { },
+	
+	/**
+	 * RegExp to parse rgba()
+	 * @var	RegExp
+	 */
+	_rgbaRegExp: null,
+	
+	/**
+	 * Initializes the WCF.ColorPicker class.
+	 * 
+	 * @param	string		selector
+	 */
+	init: function(selector) {
+		this._elementID = '';
+		this._hsv = { h: 0, s: 100, v: 100 };
+		this._position = { };
+		
+		var $elements = $(selector);
+		if (!$elements.length) {
+			console.debug("[WCF.ColorPicker] Selector does not match any element, aborting.");
+			return;
+		}
+		
+		$elements.click($.proxy(this._open, this));
+	},
+	
+	/**
+	 * Opens the color picker overlay.
+	 * 
+	 * @param	object		event
+	 */
+	_open: function(event) {
+		if (!this._didInit) {
+			// init color picker on first usage
+			this._initColorPicker();
+			this._didInit = true;
+		}
+		
+		// load values from element
+		var $element = $(event.currentTarget);
+		this._elementID = $element.wcfIdentify();
+		this._parseColor($element);
+		
+		// set 'current' color
+		var $rgb = this.hsvToRgb(this._hsv.h, this._hsv.s, this._hsv.v);
+		this._oldColor.css({ backgroundColor: 'rgb(' + $rgb.r + ', ' + $rgb.g + ', ' + $rgb.b + ')' });
+		
+		this._dialog.wcfDialog({
+			'title': WCF.Language.get('wcf.style.colorPicker')
+		});
+	},
+	
+	/**
+	 * Parses the color of an element.
+	 * 
+	 * @param	jQuery		element
+	 */
+	_parseColor: function(element) {
+		if (element.data('hsv')) {
+			// create an explicit copy here, otherwise it would be only a reference
+			var $hsv = element.data('hsv');
+			for (var $type in $hsv) {
+				this._hsv[$type] = $hsv[$type];
+			}
+			this._updateValues(null, true, true);
+			this._rgba.a.val(parseInt(element.data('alpha')));
+		}
+		else {
+			if (this._rgbaRegExp === null) {
+				this._rgbaRegExp = new RegExp("^rgba\\((\\d{1,3}), ?(\\d{1,3}), ?(\\d{1,3}), ?(1|1\\.00?|0|0?\\.[0-9]{1,2})\\)$");
+			}
+			
+			// parse value
+			this._rgbaRegExp.exec(element.data('color'));
+			var $alpha = RegExp.$4;
+			// convert into x.yz
+			if ($alpha.indexOf('.') === 0) {
+				$alpha = "0" + $alpha;
+			}
+			$alpha *= 100;
+			
+			this._updateValues({
+				r: RegExp.$1,
+				g: RegExp.$2,
+				b: RegExp.$3,
+				a: Math.round($alpha)
+			}, true, true);
+		}
+	},
+	
+	/**
+	 * Initializes the color picker upon first usage.
+	 */
+	_initColorPicker: function() {
+		this._dialog = $('<div id="colorPickerContainer" />').hide().appendTo(document.body);
+		
+		// create gradient
+		this._gradient = $('<div id="colorPickerGradient" />').appendTo(this._dialog);
+		this._gradientSelector = $('<span id="colorPickerGradientSelector"><span></span></span>').appendTo(this._gradient);
+		
+		// create bar
+		this._bar = $('<div id="colorPickerBar" />').appendTo(this._dialog);
+		this._barSelector = $('<span id="colorPickerBarSelector" />').appendTo(this._bar);
+		
+		// bind event listener
+		this._gradient.mousedown($.proxy(this._mouseDownGradient, this));
+		this._bar.mousedown($.proxy(this._mouseDownBar, this));
+		
+		var self = this;
+		$(document).mouseup(function(event) {
+			if (self._barActive) {
+				self._barActive = false;
+				self._mouseBar(event);
+			}
+			else if (self._gradientActive) {
+				self._gradientActive = false;
+				self._mouseGradient(event);
+			}
+		}).mousemove(function(event) {
+			if (self._barActive) {
+				self._mouseBar(event);
+			}
+			else if (self._gradientActive) {
+				self._mouseGradient(event);
+			}
+		});
+		
+		this._initColorPickerForm();
+	},
+	
+	/**
+	 * Initializes the color picker input elements upon first usage.
+	 */
+	_initColorPickerForm: function() {
+		var $form = $('<div id="colorPickerForm" />').appendTo(this._dialog);
+		
+		// new and current color
+		$('<small>' + WCF.Language.get('wcf.style.colorPicker.new') + '</small>').appendTo($form);
+		var $colors = $('<ul class="colors" />').appendTo($form);
+		this._newColor = $('<li class="new" />').appendTo($colors);
+		this._oldColor = $('<li class="old" />').appendTo($colors);
+		$('<small>' + WCF.Language.get('wcf.style.colorPicker.current') + '</small>').appendTo($form);
+		
+		// RGBa input
+		var $rgba = $('<ul class="rgba" />').appendTo($form);
+		this._createInputElement('r', 'R', 0, 255).appendTo($rgba);
+		this._createInputElement('g', 'G', 0, 255).appendTo($rgba);
+		this._createInputElement('b', 'B', 0, 255).appendTo($rgba);
+		this._createInputElement('a', 'a', 0, 100).appendTo($rgba);
+		
+		// HEX input
+		var $hex = $('<ul class="hex"><li><label><span>#</span></label></li></ul>').appendTo($form);
+		this._hex = $('<input type="text" maxlength="6" />').appendTo($hex.find('label'));
+		
+		// bind event listener
+		this._rgba.r.blur($.proxy(this._blurRgba, this));
+		this._rgba.g.blur($.proxy(this._blurRgba, this));
+		this._rgba.b.blur($.proxy(this._blurRgba, this));
+		this._rgba.a.blur($.proxy(this._blurRgba, this));
+		this._hex.blur($.proxy(this._blurHex, this));
+		
+		// submit button
+		var $submitForm = $('<div class="formSubmit" />').appendTo(this._dialog);
+		$('<button>' + WCF.Language.get('wcf.global.button.submit') + '</button>').appendTo($submitForm).click($.proxy(this._submit, this));
+	},
+	
+	/**
+	 * Assigns the new color for active element.
+	 */
+	_submit: function() {
+		var $rgb = this.hsvToRgb(this._hsv.h, this._hsv.s, this._hsv.v);
+		
+		// create an explicit copy here, otherwise it would be only a reference
+		var $hsv = { };
+		for (var $type in this._hsv) {
+			$hsv[$type] = this._hsv[$type];
+		}
+		
+		var $element = $('#' + this._elementID);
+		$element.data('hsv', $hsv).css({ backgroundColor: 'rgb(' + $rgb.r + ', ' + $rgb.g + ', ' + $rgb.b + ')' }).data('alpha', parseInt(this._rgba.a.val()));
+		$('#' + $element.data('store')).val('rgba(' + this._rgba.r.val() + ', ' + this._rgba.g.val() + ', ' + this._rgba.b.val() + ', ' + (this._rgba.a.val() / 100) + ')');
+		
+		this._dialog.wcfDialog('close');
+	},
+	
+	/**
+	 * Creates an input element.
+	 * 
+	 * @param	string		type
+	 * @param	string		label
+	 * @param	integer		min
+	 * @param	integer		max
+	 * @return	jQuery
+	 */
+	_createInputElement: function(type, label, min, max) {
+		// create elements
+		var $listItem = $('<li class="' + type + '" />');
+		var $label = $('<label />').appendTo($listItem);
+		$('<span>' + label + '</span>').appendTo($label);
+		this._rgba[type] = $('<input type="number" value="0" min="' + min + '" max="' + max + '" step="1" />').appendTo($label);
+		
+		return $listItem;
+	},
+	
+	/**
+	 * Handles the mouse down event on the gradient.
+	 * 
+	 * @param	object		event
+	 */
+	_mouseDownGradient: function(event) {
+		this._gradientActive = true;
+		this._mouseGradient(event);
+	},
+	
+	/**
+	 * Handles updates of gradient selector position.
+	 * 
+	 * @param	object		event
+	 */
+	_mouseGradient: function(event) {
+		var $position = this._gradient.getOffsets('offset');
+		
+		var $left = Math.max(Math.min(event.pageX - $position.left, 255), 0);
+		var $top = Math.max(Math.min(event.pageY - $position.top, 255), 0);
+		
+		// calculate saturation and value
+		this._hsv.s = Math.max(0, Math.min(1, $left / 255)) * 100;
+		this._hsv.v = Math.max(0, Math.min(1, (255 - $top) / 255)) * 100;
+		
+		// update color
+		this._updateValues(null);
+	},
+	
+	/**
+	 * Handles the mouse down event on the bar.
+	 * 
+	 * @param	object		event
+	 */
+	_mouseDownBar: function(event) {
+		this._barActive = true;
+		this._mouseBar(event);
+	},
+	
+	/**
+	 * Handles updates of the bar selector position.
+	 * 
+	 * @param	object		event
+	 */
+	_mouseBar: function(event) {
+		var $position = this._bar.getOffsets('offset');
+		var $top = Math.max(Math.min(event.pageY - $position.top, 255), 0);
+		this._barSelector.css({ top: $top + 'px' });
+		
+		// calculate hue
+		this._hsv.h = Math.max(0, Math.min(359, Math.round((255 - $top) / 255 * 360)));
+		
+		// update color
+		this._updateValues(null);
+	},
+	
+	/**
+	 * Handles changes of RGBa input fields.
+	 */
+	_blurRgba: function() {
+		for (var $type in this._rgba) {
+			var $value = parseInt(this._rgba[$type].val()) || 0;
+			
+			// alpha
+			if ($type === 'a') {
+				this._rgba[$type].val(Math.max(0, Math.min(100, $value)));
+			}
+			else {
+				// rgb
+				this._rgba[$type].val(Math.max(0, Math.min(255, $value)));
+			}
+		}
+		
+		this._updateValues({
+			r: this._rgba.r.val(),
+			g: this._rgba.g.val(),
+			b: this._rgba.b.val()
+		}, true, true);
+	},
+	
+	/**
+	 * Handles change of HEX value.
+	 */
+	_blurHex: function() {
+		var $value = this.hexToRgb(this._hex.val());
+		if ($value !== Number.NaN) {
+			this._updateValues($value, true, true);
+		}
+	},
+	
+	/**
+	 * Updates the values of all elements, including color picker and
+	 * input elements. Argument 'rgb' may be null.
+	 * 
+	 * @param	object		rgb
+	 * @param	boolean		changeH
+	 * @param	boolean		changeSV
+	 */
+	_updateValues: function(rgb, changeH, changeSV) {
+		changeH = (changeH === true) ? true : false;
+		changeSV = (changeSV === true) ? true : false;
+		
+		// calculate RGB values from HSV
+		if (rgb === null) {
+			rgb = this.hsvToRgb(this._hsv.h, this._hsv.s, this._hsv.v);
+		}
+		
+		// add alpha channel
+		if (rgb.a === undefined) {
+			rgb.a = this._rgba.a.val();
+		}
+		
+		// adjust RGBa input
+		for (var $type in rgb) {
+			this._rgba[$type].val(rgb[$type]);
+		}
+		
+		// set hex input
+		this._hex.val(this.rgbToHex(rgb.r, rgb.g, rgb.b));
+		
+		// calculate HSV to adjust selectors
+		if (changeH || changeSV) {
+			var $hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);
+			
+			// adjust hue
+			if (changeH) {
+				this._hsv.h = $hsv.h;
+			}
+			
+			// adjust saturation and value
+			if (changeSV) {
+				this._hsv.s = $hsv.s;
+				this._hsv.v = $hsv.v;
+			}
+		}
+		
+		// adjust bar selector
+		var $top = Math.max(0, Math.min(255, 255 - (this._hsv.h / 360) * 255));
+		this._barSelector.css({ top: $top + 'px' });
+		
+		// adjust gradient selector
+		var $left = Math.max(0, Math.min(255, (this._hsv.s / 100) * 255));
+		var $top = Math.max(0, Math.min(255, 255 - ((this._hsv.v / 100) * 255)));
+		this._gradientSelector.css({
+			left: ($left - 6) + 'px',
+			top: ($top - 6) + 'px'
+		});
+				
+		// update 'new' color
+		this._newColor.css({ backgroundColor: 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')' });
+		
+		// adjust gradient color
+		var $rgb = this.hsvToRgb(this._hsv.h, 100, 100);
+		this._gradient.css({ backgroundColor: 'rgb(' + $rgb.r + ', ' + $rgb.g + ', ' + $rgb.b + ')' });
+	},
+	
+	/**
+	 * Converts a HSV color into RGB.
+	 * 
+	 * @see	https://secure.wikimedia.org/wikipedia/de/wiki/HSV-Farbraum#Transformation_von_RGB_und_HSV
+	 * 
+	 * @param	integer		h
+	 * @param	integer		s
+	 * @param	integer		v
+	 * @return	object
+	 */
+	hsvToRgb: function(h, s, v) {
+		var $rgb = { r: 0, g: 0, b: 0 };
+		var $h, $f, $p, $q, $t;
+		
+		$h = Math.floor(h / 60);
+		$f = h / 60 - $h;
+		
+		s /= 100;
+		v /= 100;
+		
+		$p = v * (1 - s);
+		$q = v * (1 - s * $f);
+		$t = v * (1 - s * (1 - $f));
+		
+		if (s == 0) {
+			$rgb.r = $rgb.g = $rgb.b = v;
+		}
+		else {
+			switch ($h) {
+				case 1:
+					$rgb.r = $q;
+					$rgb.g = v;
+					$rgb.b = $p;
+				break;
+				
+				case 2:
+					$rgb.r = $p;
+					$rgb.g = v;
+					$rgb.b = $t;
+				break;
+				
+				case 3:
+					$rgb.r = $p;
+					$rgb.g = $q;
+					$rgb.b = v;
+				break;
+				
+				case 4:
+					$rgb.r = $t;
+					$rgb.g = $p;
+					$rgb.b = v;
+				break;
+				
+				case 5:
+					$rgb.r = v;
+					$rgb.g = $p;
+					$rgb.b = $q;
+				break;
+				
+				case 0:
+				case 6:
+					$rgb.r = v;
+					$rgb.g = $t;
+					$rgb.b = $p;
+				break;
+			}
+		}
+		
+		return {
+			r: Math.round($rgb.r * 255),
+			g: Math.round($rgb.g * 255),
+			b: Math.round($rgb.b * 255)
+		};
+	},
+	
+	/**
+	 * Converts a RGB color into HSV.
+	 * 
+	 * @see	https://secure.wikimedia.org/wikipedia/de/wiki/HSV-Farbraum#Transformation_von_RGB_und_HSV
+	 * 
+	 * @param	integer		r
+	 * @param	integer		g
+	 * @param	integer		b
+	 * @return	object
+	 */
+	rgbToHsv: function(r, g, b) {
+		var $h, $s, $v;
+		var $max, $min, $diff;
+		
+		r /= 255;
+		g /= 255;
+		b /= 255;
+		
+		$max = Math.max(Math.max(r, g), b);
+		$min = Math.min(Math.min(r, g), b);
+		$diff = $max - $min;
+		
+		$h = 0;
+		if ($max !== $min) {
+			switch ($max) {
+				case r:
+					$h = 60 * (0 + (g - b) / $diff);
+				break;
+				
+				case g:
+					$h = 60 * (2 + (b - r) / $diff);
+				break;
+				
+				case b:
+					$h = 60 * (4 + (r - g) / $diff);
+				break;
+			}
+			
+			if ($h < 0) {
+				$h += 360;
+			}
+		}
+		
+		if ($max === 0) {
+			$s = 0;
+		}
+		else {
+			$s = $diff / $max;
+		}
+		
+		$v = $max;
+		
+		return {
+			h: Math.round($h),
+			s: Math.round($s * 100),
+			v: Math.round($v * 100)
+		};
+	},
+	
+	/**
+	 * Converts HEX into RGB.
+	 * 
+	 * @param	string		hex
+	 * @return	object
+	 */
+	hexToRgb: function(hex) {
+		if (/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
+			// only convert #abc and #abcdef
+			hex = hex.split('');
+			
+			// drop the hashtag
+			if (hex[0] === '#') {
+				hex.shift();
+			}
+			
+			// parse shorthand #xyz
+			if (hex.length === 3) {
+				return {
+					r: parseInt(hex[0] + '' + hex[0], 16),
+					g: parseInt(hex[1] + '' + hex[1], 16),
+					b: parseInt(hex[2] + '' + hex[2], 16)
+				};
+			}
+			else {
+				return {
+					r: parseInt(hex[0] + '' + hex[1], 16),
+					g: parseInt(hex[2] + '' + hex[3], 16),
+					b: parseInt(hex[4] + '' + hex[5], 16)
+				};
+			}
+		}
+		
+		return Number.NaN;
+	},
+	
+	/**
+	 * Converts a RGB into HEX.
+	 * 
+	 * @see	http://www.linuxtopia.org/online_books/javascript_guides/javascript_faq/rgbtohex.htm
+	 * 
+	 * @param	integer		r
+	 * @param	integer		g
+	 * @param	integer		b
+	 * @return	string
+	 */
+	rgbToHex: function(r, g, b) {
+		return ("0123456789ABCDEF".charAt((r - r % 16) / 16) + '' + "0123456789ABCDEF".charAt(r % 16)) + '' + ("0123456789ABCDEF".charAt((g - g % 16) / 16) + '' + "0123456789ABCDEF".charAt(g % 16)) + '' + ("0123456789ABCDEF".charAt((b - b % 16) / 16) + '' + "0123456789ABCDEF".charAt(b % 16));
+	}
+});
\ No newline at end of file
diff --git a/wcfsetup/install/files/lib/data/style/StyleAction.class.php b/wcfsetup/install/files/lib/data/style/StyleAction.class.php
index 99baa14eb6..218c98e9f7 100644
--- a/wcfsetup/install/files/lib/data/style/StyleAction.class.php
+++ b/wcfsetup/install/files/lib/data/style/StyleAction.class.php
@@ -1,12 +1,13 @@
 <?php
 namespace wcf\data\style;
 use wcf\data\AbstractDatabaseObjectAction;
+use wcf\system\WCF;
 
 /**
  * Executes style-related actions.
  * 
  * @author	Alexander Ebert
- * @copyright	2001-2010 WoltLab GmbH
+ * @copyright	2001-2012 WoltLab GmbH
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @package	com.woltlab.wcf
  * @subpackage	data.style
@@ -17,4 +18,53 @@ class StyleAction extends AbstractDatabaseObjectAction {
 	 * @see wcf\data\AbstractDatabaseObjectAction::$className
 	 */
 	protected $className = 'wcf\data\style\StyleEditor';
+	
+	/**
+	 * @see	wcf\data\AbstractDatabaseObjectAction::create()
+	 */
+	public function create() {
+		$style = parent::create();
+		
+		// add variables
+		if (isset($this->parameters['variables']) && !empty($this->parameters['variables'])) {
+			$sql = "SELECT	variableID, variableName, defaultValue
+				FROM	wcf".WCF_N."_style_variable";
+			$statement = WCF::getDB()->prepareStatement($sql);
+			$statement->execute();
+			$variables = array();
+			while ($row = $statement->fetchArray()) {
+				$variableName = $row['variableName'];
+				
+				// ignore variables with identical value
+				if (isset($this->parameters['variables'][$variableName])) {
+					if ($this->parameters['variables'][$variableName] == $row['defaultValue']) {
+						continue;
+					}
+					else {
+						$variables[$row['variableID']] = $this->parameters['variables'][$variableName];
+					}
+				}
+			}
+			
+			// insert variables that differ from default values
+			if (!empty($variables)) {
+				$sql = "INSERT INTO	wcf".WCF_N."_style_variable_value
+							(styleID, variableID, variableValue)
+					VALUES		(?, ?, ?)";
+				$statement = WCF::getDB()->prepareStatement($sql);
+				
+				WCF::getDB()->beginTransaction();
+				foreach ($variables as $variableID => $variableValue) {
+					$statement->execute(array(
+						$style->styleID,
+						$variableID,
+						$variableValue
+					));
+				}
+				WCF::getDB()->commitTransaction();
+			}
+		}
+		
+		return $style;
+	}
 }
diff --git a/wcfsetup/install/files/lib/data/style/variable/StyleVariable.class.php b/wcfsetup/install/files/lib/data/style/variable/StyleVariable.class.php
new file mode 100644
index 0000000000..d12505bba0
--- /dev/null
+++ b/wcfsetup/install/files/lib/data/style/variable/StyleVariable.class.php
@@ -0,0 +1,29 @@
+<?php
+namespace wcf\data\style\variable;
+use wcf\data\DatabaseObject;
+
+/**
+ * Represents a style variable.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2012 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package	com.woltlab.wcf
+ * @subpackage	data.style.variable
+ * @category 	Community Framework
+ */
+class StyleVariable extends DatabaseObject {
+	/**
+	 * @see	wcf\data\DatabaseObject::$databaseTableName
+	 */
+	protected static $databaseTableName = 'style_variable';
+	
+	/**
+	 * @see	wcf\data\DatabaseObject::$databaseTableIndexName
+	 */
+	protected static $databaseTableIndexName = 'variableID';
+	
+	const TYPE_COLOR = 'color';
+	const TYPE_TEXT = 'text';
+	const TYPE_UNIT = 'unit';
+}
diff --git a/wcfsetup/install/files/lib/data/style/variable/StyleVariableAction.class.php b/wcfsetup/install/files/lib/data/style/variable/StyleVariableAction.class.php
new file mode 100644
index 0000000000..2d077e4a01
--- /dev/null
+++ b/wcfsetup/install/files/lib/data/style/variable/StyleVariableAction.class.php
@@ -0,0 +1,20 @@
+<?php
+namespace wcf\data\style\variable;
+use wcf\data\AbstractDatabaseObjectAction;
+
+/**
+ * Executes style variable-related actions.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2012 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package	com.woltlab.wcf
+ * @subpackage	data.style.variable
+ * @category 	Community Framework
+ */
+class StyleVariableAction extends AbstractDatabaseObjectAction {
+	/**
+	 * @see wcf\data\AbstractDatabaseObjectAction::$className
+	 */
+	protected $className = 'wcf\data\style\variable\StyleVariableEditor';
+}
diff --git a/wcfsetup/install/files/lib/data/style/variable/StyleVariableEditor.class.php b/wcfsetup/install/files/lib/data/style/variable/StyleVariableEditor.class.php
new file mode 100644
index 0000000000..1c41990d2d
--- /dev/null
+++ b/wcfsetup/install/files/lib/data/style/variable/StyleVariableEditor.class.php
@@ -0,0 +1,20 @@
+<?php
+namespace wcf\data\style\variable;
+use wcf\data\DatabaseObjectEditor;
+
+/**
+ * Provides functions to create, edit and delete a style variable.
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2012 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package	com.woltlab.wcf
+ * @subpackage	data.style.variable
+ * @category 	Community Framework
+ */
+class StyleVariableEditor extends DatabaseObjectEditor {
+	/**
+	 * @see	wcf\data\DatabaseObjectDecorator::$baseClass
+	 */
+	protected static $baseClass = 'wcf\data\style\variable\StyleVariable';
+}
diff --git a/wcfsetup/install/files/lib/data/style/variable/StyleVariableList.class.php b/wcfsetup/install/files/lib/data/style/variable/StyleVariableList.class.php
new file mode 100644
index 0000000000..405727d4e4
--- /dev/null
+++ b/wcfsetup/install/files/lib/data/style/variable/StyleVariableList.class.php
@@ -0,0 +1,20 @@
+<?php
+namespace wcf\data\style\variable;
+use wcf\data\DatabaseObjectList;
+
+/**
+ * Represents a list of style variables.
+ * 
+ * @author 	Alexander Ebert
+ * @copyright	2001-2012 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package	com.woltlab.wcf
+ * @subpackage	data.style.variable
+ * @category 	Community Framework
+ */
+class StyleVariableList extends DatabaseObjectList {
+	/**
+	 * @see	wcf\data\DatabaseObjectList::$className
+	 */
+	public $className = 'wcf\data\style\variable\StyleVariable';
+}
diff --git a/wcfsetup/install/files/style/colorPicker.less b/wcfsetup/install/files/style/colorPicker.less
new file mode 100644
index 0000000000..58e0ae2b34
--- /dev/null
+++ b/wcfsetup/install/files/style/colorPicker.less
@@ -0,0 +1,121 @@
+#colorPickerGradient {
+	background-color: #f00;
+	background-image: url('images/colorPickerGradient.png');
+	background-repeat: no-repeat;
+	border: 1px solid rgba(0, 0, 0, 1);
+	cursor: default;
+	display: inline-block;
+	height: 256px;
+	overflow: hidden;
+	position: relative;
+	width: 256px;
+	
+	> span {
+		border: 1px solid rgba(0, 0, 0, 1);
+		border-radius: 10px;
+		display: block;
+		height: 10px;
+		left: -4px;
+		position: absolute;
+		top: -4px;
+		width: 10px;
+		
+		> span {
+			border: 1px solid rgba(255, 255, 255, 1);
+			border-radius: 10px;
+			display: block;
+			height: 8px;
+			width: 8px;
+		}
+	}
+} 
+
+#colorPickerBar {
+	background-image: url('images/colorPickerBar.png');
+	background-repeat: repeat-x;
+	border: 1px solid rgba(0, 0, 0, 1);
+	cursor: default;
+	display: inline-block;
+	height: 256px;
+	margin-left: 10px;
+	position: relative;
+	width: 16px;
+	
+	> span {
+		display: inline-block;
+		height: 1px;
+		left: 0;
+		position: absolute;
+		top: 27px;
+		width: 16px;
+
+		&:after,
+		&:before {
+			content: "";
+			display: block;
+			height: 0;
+			position: absolute;
+			top: 0;
+			width: 0;
+		}
+		
+		&:after {
+			border-bottom: 5px solid transparent;
+			border-right: 5px solid rgba(0, 0, 0, 1);
+			border-top: 5px solid transparent;
+			right: -7px;
+			top: -5px;
+		}
+		
+		&:before {
+			border-bottom: 5px solid transparent;
+			border-left: 5px solid rgba(0, 0, 0, 1);
+			border-top: 5px solid transparent;
+			left: -7px;
+			top: -5px;
+		}
+	}
+}
+
+#colorPickerForm {
+	display: inline-block;
+	margin-left: 20px;
+	position: relative;
+	text-align: right;
+	width: 100px;
+
+	> .colors {
+		> .new,
+		> .old {
+			border: 1px solid rgba(0, 0, 0, 1);
+			display: block;
+			height: 24px;
+		}
+		
+		> .old {
+			border-top-width: 0;
+		}
+	}
+	
+	> .hex {
+		margin-top: 21px;
+	}
+	
+	> .rgba {
+		margin-top: 21px;
+		
+		> li.a {
+			margin-top: 7px;
+		}
+	}
+	
+	> .rgba > li,
+	> .hex > li {
+		text-align: right;
+		
+		input {
+			margin-left: 7px;
+			width: 80px;
+		}
+	}
+}
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index bdfccb5bfe..58a3be2dd3 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -575,6 +575,7 @@ CREATE TABLE wcf1_style (
 	authorName VARCHAR(255) NOT NULL DEFAULT '',
 	authorURL VARCHAR(255) NOT NULL DEFAULT '',
 	iconPath VARCHAR(255) NOT NULL DEFAULT '',
+	imagePath VARCHAR(255) NOT NULL DEFAULT ''
 );
 
 DROP TABLE IF EXISTS wcf1_style_to_package;
@@ -1014,3 +1015,4 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfMainMen
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfMainMenuColor', 'rgba(102, 102, 102, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfMainMenuActiveColor', 'rgba(0, 0, 0, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfMarkedBackgroundColor', 'rgba(255, 255, 200, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('useFluidLayout', '1');
-- 
2.20.1