From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 22 Oct 2015 18:57:21 +0000 (+0200)
Subject: Updated style
X-Git-Tag: 3.0.0_Beta_1~2030^2~274
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=ed8c9052fc40bed506d19d72a88b1de9414e3993;p=GitHub%2FWoltLab%2FWCF.git

Updated style
---

diff --git a/com.woltlab.wcf/blue-temptation-style.tgz b/com.woltlab.wcf/blue-temptation-style.tgz
deleted file mode 100644
index 4b419accaf..0000000000
Binary files a/com.woltlab.wcf/blue-temptation-style.tgz and /dev/null differ
diff --git a/com.woltlab.wcf/package.xml b/com.woltlab.wcf/package.xml
index a50d2a6a92..a6bddabf84 100644
--- a/com.woltlab.wcf/package.xml
+++ b/com.woltlab.wcf/package.xml
@@ -5,8 +5,8 @@
 		<packagedescription><![CDATA[Free web-framework, designed and developed for complex community applications.]]></packagedescription>
 		<packagedescription language="de"><![CDATA[Freies Web-Framework, das für komplexe Community-Anwendungen entworfen und entwickelt wurde.]]></packagedescription>
 		<isapplication>1</isapplication>
-		<version>2.2.0 Alpha 3</version> <!-- codename: vortex -->
-		<date>2015-05-03</date>
+		<version>2.2.0 Alpha 1</version> <!-- codename: vortex -->
+		<date>2015-10-22</date>
 	</packageinformation>
 	
 	<authorinformation>
@@ -28,8 +28,7 @@
 		<instruction type="objectTypeDefinition" />
 		<instruction type="objectType" />
 		<instruction type="acpSearchProvider" />
-		<instruction type="style">blue-temptation-style.tgz</instruction>
-		<instruction type="style">woltlab-basic-style.tgz</instruction>
+		<instruction type="style">defaultStyle.tar</instruction>
 		<instruction type="userOption" />
 		<instruction type="bbcode" />
 		<instruction type="smiley" />
@@ -42,8 +41,4 @@
 		<instruction type="aclOption" />
 		<instruction type="script">acp/post_install.php</instruction>
 	</instructions>
-	
-	<instructions type="update" fromversion="2.2.0 Alpha 2">
-		<instruction type="acpMenu" />
-	</instructions>
 </package>
diff --git a/com.woltlab.wcf/woltlab-basic-style.tgz b/com.woltlab.wcf/woltlab-basic-style.tgz
deleted file mode 100644
index 0f36ac58ee..0000000000
Binary files a/com.woltlab.wcf/woltlab-basic-style.tgz and /dev/null differ
diff --git a/defaultStyle/style.xml b/defaultStyle/style.xml
new file mode 100644
index 0000000000..5604e54ed2
--- /dev/null
+++ b/defaultStyle/style.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<style xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/maelstrom/style.xsd">
+	<general>
+		<stylename><![CDATA[Lantia Default Style]]></stylename>
+		<date><![CDATA[2015-10-22]]></date>
+		<copyright><![CDATA[WoltLab GmbH]]></copyright>
+		<license><![CDATA[GNU Lesser General Public License]]></license>
+		<version>2.2.0 Alpha 1</version>
+		<image><![CDATA[stylePreview-defaultStyle.png]]></image> 
+	</general>
+	
+	<author>
+		<authorname><![CDATA[Alexander Ebert, Marcel Werk]]></authorname>
+		<authorurl><![CDATA[https://www.woltlab.com]]></authorurl>
+	</author>
+	
+	<files>
+		<variables><![CDATA[variables.xml]]></variables>
+	</files>
+</style>
diff --git a/defaultStyle/stylePreview-defaultStyle.png b/defaultStyle/stylePreview-defaultStyle.png
new file mode 100644
index 0000000000..a188330502
Binary files /dev/null and b/defaultStyle/stylePreview-defaultStyle.png differ
diff --git a/defaultStyle/variables.xml b/defaultStyle/variables.xml
new file mode 100644
index 0000000000..249739e2df
--- /dev/null
+++ b/defaultStyle/variables.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<variables xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/maelstrom/styleVariables.xsd"/>
diff --git a/wcfsetup/install/files/acp/templates/labelAdd.tpl b/wcfsetup/install/files/acp/templates/labelAdd.tpl
index 9d01ce98d8..393d1d37f0 100644
--- a/wcfsetup/install/files/acp/templates/labelAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/labelAdd.tpl
@@ -86,7 +86,7 @@
 				<dl{if $errorField == 'cssClassName'} class="formError"{/if}>
 					<dt><label for="cssClassName">{lang}wcf.acp.label.cssClassName{/lang}</label></dt>
 					<dd>
-						<ul id="labelList">
+						<ul id="labelList" class="inlineList">
 							{foreach from=$availableCssClassNames item=className}
 								{if $className == 'custom'}
 									<li class="labelCustomClass"><input type="radio" name="cssClassName" value="custom"{if $cssClassName == 'custom'} checked="checked"{/if} /> <span><input type="text" id="customCssClassName" name="customCssClassName" value="{$customCssClassName}" class="long" /></span></li>
diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
index efefde96e8..58bcaf376b 100644
--- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
@@ -469,20 +469,6 @@ class StyleAddForm extends AbstractForm {
 			'wcfFooter' => ['background', 'text', 'link', 'linkActive']
 		];
 		
-		// DEBUG ONLY
-		if (false) {
-			echo "<pre>";
-			foreach ($this->colors as $key => $values) {
-				foreach ($values as $v) {
-					$variableName = $key . ucfirst($v);
-					
-					echo "INSERT IGNORE INTO wcf1_style_variable (variableName, defaultValue) VALUES ('{$variableName}', 'rgba(255, 255, 255, 1)');\n";
-				}
-			}
-			exit;
-		}
-		// DEBUG ONLY
-		
 		// set global variables
 		$this->globals = [
 			'wcfFontSizeSmall',
diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 0101f3cd6b..9f0335e268 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -105,6 +105,26 @@ dl {
 		
 		> dd {
 			display: block;
+			
+			> small:not(.innerError) {
+				color: $wcfContentDimmedText;
+				display: block;
+				margin-top: 5px;
+			}
+			
+			&.floated {
+				display: flex;
+				flex-wrap: wrap;
+				
+				> label {
+					flex: 0 0 auto;
+					margin: 0 10px 5px 0;
+					
+					&:last-child {
+						margin-right: 0;
+					}
+				}
+			}
 		}
 		
 		&.wide > dt {
@@ -191,14 +211,6 @@ dl {
 		}
 	}
 	
-	&:not(.plain) > dd {
-		> small:not(.innerError) {
-			color: $wcfContentDimmedText;
-			display: block;
-			margin-top: 5px;
-		}
-	}
-	
 	&.condensed {
 		display: block;
 		
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index 3cb6d0fbbe..ae465e7162 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -8,7 +8,8 @@ html, body {
 
 body {
 	font-family: $wcfFontFamily;
-	line-height: 1.428571429;
+	//line-height: 1.428571429;
+	line-height: 1.61803399;
 	position: relative;
 	word-wrap: break-word;
 	
@@ -78,7 +79,7 @@ a {
 
 /* CONTENT AREA */
 .boxHeadline {
-	// TODO: border-bottom: 1px solid $wcfContentBorder;
+	border-bottom: 1px solid $wcfContentBorderInner;
 	color: $wcfContentHeadlineText;
 	margin-bottom: 30px;
 	padding-bottom: 10px;
diff --git a/wcfsetup/install/files/style/layout/navigation.scss b/wcfsetup/install/files/style/layout/navigation.scss
index 8d584a95df..42a91d3d1d 100644
--- a/wcfsetup/install/files/style/layout/navigation.scss
+++ b/wcfsetup/install/files/style/layout/navigation.scss
@@ -1,7 +1,7 @@
 .navigation {
 	background-color: $wcfNavigationBackground;
 	color: $wcfNavigationText;
-	flex: 0 auto;
+	flex: 0 0 auto;
 	padding: 5px 0;
 	z-index: 25;
 	
@@ -27,11 +27,11 @@
 
 .navigationIcons {
 	display: flex;
-	flex: 0 auto;
+	flex: 0 0 auto;
 	flex-direction: row-reverse;
 	
 	> li {
-		flex: 0 auto;
+		flex: 0 0 auto;
 		
 		&:not(:last-child) {
 			margin-left: 10px;
@@ -65,7 +65,7 @@
 	}
 	
 	> nav {
-		flex: 1 auto;
+		flex: 1 1 auto;
 		
 		& + nav {
 			flex: 0 0 auto;
diff --git a/wcfsetup/install/files/style/layout/pageFooter.scss b/wcfsetup/install/files/style/layout/pageFooter.scss
index 85fc4283c5..1eaff4e3f4 100644
--- a/wcfsetup/install/files/style/layout/pageFooter.scss
+++ b/wcfsetup/install/files/style/layout/pageFooter.scss
@@ -1,7 +1,8 @@
 #pageFooterBoxes {
 	background-color: $wcfFooterBoxBackground;
 	color: $wcfFooterBoxText;
-	padding: 30px;
+	flex: 0 0 auto;
+	padding: 20px;
 	z-index: 40;
 	
 	a {
@@ -47,7 +48,7 @@
 #pageFooter {
 	background-color: $wcfFooterBackground;
 	color: $wcfFooterText;
-	padding: 20px 0;
+	padding: 10px 0;
 	z-index: 20;
 	
 	a {
diff --git a/wcfsetup/install/files/style/ui/alert.scss b/wcfsetup/install/files/style/ui/alert.scss
index f83dc8c00b..e7e36eafb4 100644
--- a/wcfsetup/install/files/style/ui/alert.scss
+++ b/wcfsetup/install/files/style/ui/alert.scss
@@ -1,23 +1,33 @@
 .error,
 .info,
-.success {
-	border-radius: 3px;
+.success,
+.warning {
+	border-left: 5px solid transparent;
 	padding: 10px 20px;
 }
 
 .error {
-	background-color: rgb(242, 222, 222);
-	color: rgb(169, 68, 66);
+	background-color: $wcfStatusErrorBackground;
+	border-color: $wcfStatusErrorBorder;
+	color: $wcfStatusErrorText;
 }
 
 .info {
-	background-color: rgb(217, 237, 247);
-	color: rgb(49, 112, 143);
+	background-color: $wcfStatusInfoBackground;
+	border-color: $wcfStatusInfoBorder;
+	color: $wcfStatusInfoText;
 }
 
 .success {
-	background-color: rgb(223, 240, 216);
-	color: rgb(60, 118, 61);
+	background-color: $wcfStatusSuccessBackground;
+	border-color: $wcfStatusSuccessBorder;
+	color: $wcfStatusSuccessText;
+}
+
+.warning {
+	background-color: $wcfStatusWarningBackground;
+	border-color: $wcfStatusWarningBorder;
+	color: $wcfStatusWarningText;
 }
 
 /* inline errors */
diff --git a/wcfsetup/install/files/style/ui/badge.less b/wcfsetup/install/files/style/ui/badge.less
deleted file mode 100644
index be43c17212..0000000000
--- a/wcfsetup/install/files/style/ui/badge.less
+++ /dev/null
@@ -1,112 +0,0 @@
-.badge {
-	background-color: @wcfColor;
-	border: 1px solid rgb(255, 255, 255);
-	border-radius: 3px;
-	color: @wcfContentBackgroundColor;
-	display: inline-block;
-	font-size: .85rem;
-	padding: 2px 5px;
-	position: relative;
-	text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
-	vertical-align: middle;
-	white-space: nowrap;
-	word-wrap: normal;
-	
-	/* colors */
-	&.badgeUpdate {
-		background-color: @wcfTabularBoxBackgroundColor;
-		color: @wcfTabularBoxColor;
-	}
-	
-	&.badgeInverse {
-		background-color: @wcfTabularBoxColor;
-		color: @wcfTabularBoxBackgroundColor;
-	}
-	
-	/* default label colors */
-	&.green {
-		background-color: rgba(0, 153, 0, 1);
-		color: rgba(238, 255, 238, 1);
-	}
-	
-	&.red {
-		background-color: rgba(204, 0, 0, 1);
-		color: rgba(255, 238, 238, 1);
-	}
-	
-	&.black {
-		background-color: #333;
-		color: #fff;
-	}
-	
-	&.brown {
-		background-color: #c63;
-		color: #fff;
-	}
-	
-	&.orange {
-		background-color: #f90;
-		color: #fff;
-	}
-	
-	&.yellow {
-		background-color: #ff0;
-		color: #333;
-	}
-	
-	&.blue {
-		background-color: #369;
-		color: #fff;
-	}
-	
-	&.purple {
-		background-color: #c0f;
-		color: #fff;
-	}
-	
-	&.pink {
-		background-color: #f0c;
-		color: #fff;
-	}
-}
-
-a.badge:hover {
-	color: @wcfContentBackgroundColor;
-	text-decoration: none;
-	
-	&.black {
-		background-color: #000;
-	}
-	
-	&.brown {
-		background-color: #930;
-	}
-	
-	&.red {
-		background-color: #900;
-	}
-	
-	&.orange {
-		background-color: #f60;
-	}
-	
-	&.yellow {
-		background-color: #cc0;
-	}
-	
-	&.green {
-		background-color: #060;
-	}
-	
-	&.blue {
-		background-color: #036;
-	}
-	
-	&.purple {
-		background-color: #90c;
-	}
-	
-	&.pink {
-		background-color: #c09;
-	}
-}
diff --git a/wcfsetup/install/files/style/ui/badge.scss b/wcfsetup/install/files/style/ui/badge.scss
new file mode 100644
index 0000000000..35bc935aa7
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/badge.scss
@@ -0,0 +1,112 @@
+.badge,
+a.badge {
+	background-color: $wcfContentText;
+	color: $wcfContentBackground;
+	display: inline-block;
+	padding: 3px 5px;
+	position: relative;
+	text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
+	vertical-align: middle;
+	white-space: nowrap;
+	word-wrap: normal;
+	
+	@extend .wcfFontSmall;
+	
+	/* colors */
+	&.badgeUpdate {
+		//background-color: @wcfTabularBoxBackgroundColor;
+		//color: @wcfTabularBoxColor;
+	}
+	
+	&.badgeInverse {
+		background-color: $wcfContentBackground;
+		color: $wcfContentText;
+	}
+	
+	/* default label colors */
+	&.green {
+		background-color: rgba(0, 153, 0, 1);
+		color: rgba(238, 255, 238, 1);
+	}
+	
+	&.red {
+		background-color: rgba(204, 0, 0, 1);
+		color: rgba(255, 238, 238, 1);
+	}
+	
+	&.black {
+		background-color: #333;
+		color: #fff;
+	}
+	
+	&.brown {
+		background-color: #c63;
+		color: #fff;
+	}
+	
+	&.orange {
+		background-color: #f90;
+		color: #fff;
+	}
+	
+	&.yellow {
+		background-color: #ff0;
+		color: #333;
+	}
+	
+	&.blue {
+		background-color: #369;
+		color: #fff;
+	}
+	
+	&.purple {
+		background-color: #c0f;
+		color: #fff;
+	}
+	
+	&.pink {
+		background-color: #f0c;
+		color: #fff;
+	}
+}
+
+a.badge:hover {
+	//color: @wcfContentBackgroundColor;
+	text-decoration: none;
+	
+	&.black {
+		background-color: #000;
+	}
+	
+	&.brown {
+		background-color: #930;
+	}
+	
+	&.red {
+		background-color: #900;
+	}
+	
+	&.orange {
+		background-color: #f60;
+	}
+	
+	&.yellow {
+		background-color: #cc0;
+	}
+	
+	&.green {
+		background-color: #060;
+	}
+	
+	&.blue {
+		background-color: #036;
+	}
+	
+	&.purple {
+		background-color: #90c;
+	}
+	
+	&.pink {
+		background-color: #c09;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index 0a55836834..56ed239776 100644
--- a/wcfsetup/install/files/style/ui/button.scss
+++ b/wcfsetup/install/files/style/ui/button.scss
@@ -2,11 +2,12 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"],
-.button {
+.button,
+a.button {
 	background-color: $wcfButtonBackground;
 	border: 1px solid $wcfButtonBorder;
 	border-radius: 3px;
-	color: $wcfButtonText !important;
+	color: $wcfButtonText;
 	cursor: pointer;
 	display: inline-block;
 	padding: 5px 10px;
@@ -19,7 +20,7 @@ input[type="submit"],
 	&:hover {
 		background-color: $wcfButtonBackgroundActive;
 		border-color: $wcfButtonBorderActive;
-		color: $wcfButtonTextActive !important;
+		color: $wcfButtonTextActive;
 		
 		.icon {
 			color: $wcfButtonTextActive;
@@ -36,10 +37,11 @@ input[type="submit"],
 button.buttonPrimary,
 input[type="button"].buttonPrimary,
 input[type="submit"],
-.button.buttonPrimary {
+.button.buttonPrimary,
+a.button.buttonPrimary {
 	background-color: $wcfButtonPrimaryBackground;
 	border-color: $wcfButtonPrimaryBorder;
-	color: $wcfButtonPrimaryText !important;
+	color: $wcfButtonPrimaryText;
 	
 	.icon {
 		color: $wcfButtonPrimaryText;
@@ -49,7 +51,7 @@ input[type="submit"],
 	&:hover {
 		background-color: $wcfButtonPrimaryBackgroundActive;
 		border-color: $wcfButtonPrimaryBorderActive;
-		color: $wcfButtonPrimaryTextActive !important;
+		color: $wcfButtonPrimaryTextActive;
 		
 		.icon {
 			color: $wcfButtonPrimaryTextActive;
@@ -63,10 +65,11 @@ input[type="submit"],
 	> input[type="button"],
 	> input[type="reset"],
 	> input[type="submit"],
-	> .button {
+	> .button,
+	> a.button {
 		background-color: $wcfButtonBackgroundActive;
 		border-color: $wcfButtonBorderActive;
-		color: $wcfButtonTextActive !important;
+		color: $wcfButtonTextActive;
 		
 		.icon {
 			color: $wcfButtonTextActive;
@@ -76,10 +79,11 @@ input[type="submit"],
 	> button.buttonPrimary,
 	> input[type="button"].buttonPrimary,
 	> input[type="submit"],
-	> .button.buttonPrimary {
+	> .button.buttonPrimary,
+	> a.button.buttonPrimary {
 		background-color: $wcfButtonPrimaryBackgroundActive;
 		border-color: $wcfButtonPrimaryBorderActive;
-		color: $wcfButtonPrimaryTextActive !important;
+		color: $wcfButtonPrimaryTextActive;
 		
 		.icon {
 			color: $wcfButtonPrimaryTextActive;
diff --git a/wcfsetup/install/files/style/ui/label.scss b/wcfsetup/install/files/style/ui/label.scss
new file mode 100644
index 0000000000..2bf09baf60
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/label.scss
@@ -0,0 +1,49 @@
+/* #### Labels #### */
+/* label list */
+.labelList {
+	@extend .inlineList;
+}
+
+.boxHeadline.labeledHeadline {
+	@extend .inlineList;
+	
+	> ul.statusIcons {
+		> li {
+			display: inline-block;
+		}
+	}
+	
+	> ul.labelList {
+		position: relative;
+		top: -4px;
+	}
+}
+
+.boxHeadline.labeledHeadline > h1,
+.boxSubHeadline.labeledHeadline > h2 {
+	display: inline-block;
+	margin-right: 5px;
+}
+
+/* ACP label list */
+#labelList > li {
+	flex-basis: 30%;
+	margin-bottom: 10px;
+	
+	&.labelCustomClass {
+		display: flex;
+		
+		> input[type='radio'] {
+			flex: 0 0 auto;
+			margin-right: 7px;
+		}
+		
+		> span {
+			flex: 1 1 auto;
+		}
+	}
+}
+
+.labelChooser > .dropdownToggle > span {
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 311ea7da7c..e4251ff7c8 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -1,5 +1,5 @@
 .messageList {
-	border: 1px solid $wcfSidebarBackground;
+	border: 1px solid $wcfContentBorder;
 	border-width: 1px 0;
 	margin: 30px 0;
 	
@@ -8,7 +8,7 @@
 		padding: 40px 0;
 		
 		&:not(:first-child) {
-			border-top: 1px solid $wcfSidebarBackground;
+			border-top: 1px solid $wcfContentBorder;
 		}
 	}
 }
@@ -23,7 +23,7 @@
 	background-color: $wcfSidebarBackground;
 	border-radius: 3px;
 	color: $wcfSidebarText;
-	flex: 0 0 170px;
+	flex: 0 0 240px;
 	padding: 20px;
 	position: relative;
 	text-align: center;
diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
index e23f6dd528..44c0ad4c1c 100644
--- a/wcfsetup/install/files/style/ui/tabularBox.scss
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -234,7 +234,7 @@ div.tabularBoxTitle > header {
 		}
 		
 		&:not(:last-child) > td {
-			// TODO: border-bottom: 1px solid $wcfTabularBoxBorderInner;
+			border-bottom: 1px solid $wcfContentBorderInner;
 		}
 	}
 	
diff --git a/wcfsetup/install/files/style/ui/tooltip.scss b/wcfsetup/install/files/style/ui/tooltip.scss
index ca5605a15a..0193545f6f 100644
--- a/wcfsetup/install/files/style/ui/tooltip.scss
+++ b/wcfsetup/install/files/style/ui/tooltip.scss
@@ -1,10 +1,9 @@
 .balloonTooltip {
-	// TODO: background-color: $wcfTooltipBackgroundColor;
-	border-radius: 6px;
-	// TODO: color: $wcfTooltipColor;
+	background-color: $wcfTooltipBackground;
+	color: $wcfTooltipText;
 	max-width: 300px;
 	opacity: 0;
-	padding: 5px 10px 7px;
+	padding: 5px 10px;
 	pointer-events: none;
 	position: absolute;
 	top: 0;
@@ -15,7 +14,7 @@
 	@extend .wcfFontSmall;
 	
 	> .elementPointer {
-		// TODO: border-color: $wcfTooltipBackgroundColor transparent;
+		border-color: $wcfTooltipBackground transparent;
 		border-style: solid;
 		border-width: 0 5px 5px;
 		
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index c07a28b962..8d052bfbbf 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -1797,103 +1797,134 @@ INSERT INTO wcf1_package_update_server (serverURL, status, isDisabled, errorMess
 INSERT INTO wcf1_package_update_server (serverURL, status, isDisabled, errorMessage, lastUpdateTime, loginUsername, loginPassword) VALUES ('http://store.woltlab.com/typhoon/', 'online', 0, NULL, 0, '', '');
 
 -- style default values
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBackgroundColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfColor', 'rgba(102, 102, 102, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLinkColor', 'rgba(63, 127, 191, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLinkHoverColor', 'rgba(15, 79, 143, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContainerBackgroundColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContainerAccentBackgroundColor', 'rgba(249, 249, 249, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContainerHoverBackgroundColor', 'rgba(244, 244, 244, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContainerBorderColor', 'rgba(221, 221, 221, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContainerBorderRadius', '0px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTabularBoxBackgroundColor', 'rgba(63, 127, 191, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTabularBoxColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTabularBoxHoverColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserPanelBackgroundColor', 'rgba(45, 45, 45, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserPanelColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserPanelHoverColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBackgroundColor', 'rgba(249, 249, 249, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorderColor', 'rgba(221, 221, 221, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorderRadius', '3px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSmallButtonBorderRadius', '3px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonColor', 'rgba(102, 102, 102, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackgroundColor', 'rgba(211, 232, 254, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorderColor', 'rgba(136, 194, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryColor', 'rgba(102, 153, 204, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverBackgroundColor', 'darken(@wcfButtonPrimaryBackgroundColor, 3%)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverBorderColor', 'darken(@wcfButtonPrimaryBorderColor, 10%)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryHoverColor', '@wcfButtonPrimaryColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverBackgroundColor', 'rgba(241, 241, 241, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverBorderColor', 'rgba(224, 224, 224, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonHoverColor', 'rgba(102, 102, 102, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackgroundColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputColor', 'rgba(102, 102, 102, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorderColor', 'rgba(204, 204, 204, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputHoverBackgroundColor', 'rgba(239, 247, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputHoverBorderColor', 'rgba(198, 222, 248, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorderRadius', '0');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfBaseFontSize', '13px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfBaseFontFamily', '"Trebuchet MS", Arial, sans-serif');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutMinWidth', '980px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutMaxWidth', '90%');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutFixedWidth', '1200px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfPageBackgroundColor', 'rgba(224, 224, 224, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfPageColor', 'rgba(102, 102, 102, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfPageLinkColor', 'rgba(63, 127, 191, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfPageLinkHoverColor', 'rgba(15, 79, 143, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarBackgroundColor', '@wcfContainerHoverBackgroundColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDimmedColor', 'rgba(136, 136, 136, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfExtraDimmedColor', 'lighten(@wcfDimmedColor, 20%)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLabelColor', '@wcfColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeadlineColor', '@wcfColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeadlineFontFamily', '"Trebuchet MS", Arial, sans-serif');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackgroundColor', '@wcfContentBackgroundColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownColor', '@wcfColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorderColor', '@wcfContainerBorderColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownHoverBackgroundColor', '@wcfContainerHoverBackgroundColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfBaseLineHeight', '1.28');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeadlineFontSize', '1.7rem');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSubHeadlineFontSize', '1.4rem');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTitleFontSize', '1.2rem');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSmallFontSize', '.85rem');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningColor', 'rgba(153, 153, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningBackgroundColor', 'rgba(255, 255, 221, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfWarningBorderColor', 'rgba(204, 204, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorColor', 'rgba(204, 0, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorBackgroundColor', 'rgba(255, 238, 238, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfErrorBorderColor', 'rgba(255, 153, 153, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessColor', 'rgba(0, 153, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessBackgroundColor', 'rgba(238, 255, 238, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSuccessBorderColor', 'rgba(0, 204, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoColor', 'rgba(102, 136, 187, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoBackgroundColor', 'rgba(221, 238, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInfoBorderColor', 'rgba(153, 187, 238, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltipBackgroundColor', 'rgba(0, 0, 0, .8)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltipColor', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHighlightBackgroundColor', 'rgba(255, 255, 102, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapTiny', '4px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapSmall', '7px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapMedium', '14px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapLarge', '21px');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationHeaderBackgroundColor', '@wcfContentBackgroundColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationFooterBackgroundColor', '@wcfContainerAccentBackgroundColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfMainMenuBackgroundColor', '@wcfContainerAccentBackgroundColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfMainMenuColor', '@wcfColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfMainMenuActiveColor', '@wcfLinkColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfUserPanelHoverBackgroundColor', 'rgba(60, 60, 60, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSelectedBackgroundColor', 'rgba(255, 255, 200, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSelectedColor', '@wcfColor');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDeletedBackgroundColor', 'rgba(255, 238, 238, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDeletedColor', 'rgba(204, 0, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDisabledBackgroundColor', 'rgba(238, 255, 238, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDisabledColor', 'rgba(0, 153, 0, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTextShadowLightColor', 'transparent');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTextShadowDarkColor', 'transparent');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('useFluidLayout', '1');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('pageLogo', '');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('individualLess', '');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('overrideLess', '');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('messageSidebarOrientation', 'left');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('pageLogo', '');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('useFluidLayout', '1');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('useGoogleFont', '1');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfBaseLineHeight', '1.28');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorder', 'rgba(255, 255, 255, 1);');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonBorderActive', 'rgba(255, 255, 255, 1);');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonDisabledText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryBorderActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonPrimaryTextActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfButtonTextActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentBorderInner', 'rgba(238, 238, 238, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentDimmedText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentHeadlineBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentHeadlineLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentHeadlineLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentHeadlineText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentLink', 'rgba(211, 84, 0, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentLinkActive', 'rgba(192, 57, 43, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfContentText', 'rgba(44, 62, 80, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownBorderInner', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyFallback', '"Segoe UI", "Lucida Grande", "Helveltica", sans-serif');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyGoogle', 'Open Sans');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeDefault', '13px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeHeadline', '18px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeSmall', '12px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeTitle', '26px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxHeadlineLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxHeadlineLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxHeadlineText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterBoxText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFooterText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapLarge', '21px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapMedium', '14px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapSmall', '7px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfGapTiny', '4px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorderActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputDisabledText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputTextActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutFixedWidth', '1200px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutMaxWidth', '90%');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfLayoutMinWidth', '980px');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfNavigationText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarDimmedLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarDimmedLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarDimmedText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarHeadlineText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfSidebarText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusErrorText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusInfoBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusInfoBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusInfoLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusInfoLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusInfoText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusSuccessBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusSuccessBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusSuccessLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusSuccessLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusSuccessText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusWarningBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusWarningBorder', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusWarningLink', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusWarningLinkActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfStatusWarningText', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTabularBoxBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTabularBoxBorderInner', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTabularBoxHeadline', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTabularBoxHeadlineActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTextShadowDark', 'rgba(0, 0, 0, .8)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTextShadowLight', 'rgba(255, 255, 255, .8)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltipBackground', 'rgba(0, 0, 0, .8)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltipText', 'rgba(255, 255, 255, 1)');
 
 -- media providers
 -- Videos