From 88a354930bccdfd2c6e92a168dd1085d2138a3ab Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Tue, 25 Oct 2011 19:39:09 +0200
Subject: [PATCH] New icon & Overlay design

Overlay is now always centered and now has the right dark color; The
dark transparent background is now always 100% wide; New additional
white close icon.
---
 wcfsetup/install/files/acp/style/style.css | 91 +++++++++++++++++-----
 wcfsetup/install/files/icon/delete2.svg    | 55 +++++++++++++
 2 files changed, 126 insertions(+), 20 deletions(-)
 create mode 100755 wcfsetup/install/files/icon/delete2.svg

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index b691d634c8..bc06d6bd1b 100644
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -397,6 +397,28 @@ nav.mainMenu ul li.activeMenuItem:only-child {
 	margin: 5px 0 -5px;
 }
 
+nav.mainMenu ul li a,
+nav.mainMenu ul li:hover a {
+	text-decoration: none;
+}
+
+/* Special */
+
+nav.mainMenu ul li.activeMenuItem .badge {
+	font-size: 75% !important;
+	color: #fff;
+	background-color: #369;
+	top: -3px;	
+	
+	-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	-moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	-ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	-o-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+	box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+}
+
+
+
 
 
 /* -- -- -- Header Navigation -- -- -- */
@@ -1588,6 +1610,7 @@ input[type='button'],
 
 .breadcrumbs ul li a {
 	text-decoration: none;
+	text-shadow: 0 1px 0 #fff;
 	color: #999;
 	margin: 0;
 	padding: 5px 1px 5px 20px;
@@ -2135,46 +2158,75 @@ div#ajaxExceptionStacktrace {
 	width: 24px;
 }
 
-div.wcfDimensions {
+
+
+
+
+
+
+.wcfDimensions {
 	display: inline-block;
 }
 
-div.overlayLoading {
+
+
+
+
+
+.overlayLoading {
 	background-color: #fff;
 	background-image: url('../../icon/spinner.svg');
 	background-position: center center;
 	background-repeat: no-repeat;
 }
 
-div.ui-dialog {
-	border: 10px solid rgba(0, 0, 0, .2);
+
+/* ############## ToDo: Overlay ############## */
+
+.ui-dialog {
+	border: 13px solid rgba(0, 0, 0, .5);
 	border-radius: 15px;
-	display: inline-block !important;
+	margin-right: auto !important;
+	margin-left: auto !important;
+	display: block !important;
 	width: auto !important;
-	min-width: 80px;
+	min-width: 80px !important;
+	max-width: 770px !important;
+	top: -350px !important;
+	left: auto !important;
+	
+	-webkit-box-shadow: 0 1px 23px rgba(0, 0, 0, 1);
+	-moz-box-shadow: 0 1px 23px rgba(0, 0, 0, 1);
+	-ms-box-shadow: 0 1px 23px rgba(0, 0, 0, 1);
+	-o-box-shadow: 0 1px 23px rgba(0, 0, 0, 1);
+	box-shadow: 0 1px 23px rgba(0, 0, 0, 1);
 }
 
-div.ui-dialog-titlebar {
-	border-bottom: 5px solid rgba(0, 0, 0, .6);
-	background-color: #ccc;
+.ui-dialog-titlebar {
+	background-color: #333;
 	padding: 7px;
 	position: relative;
 }
 
-span.ui-dialog-title {
+.ui-dialog-title {
 	text-shadow: 5px 0 0 #000;
-	color: #fff;
+}
+
+.ui-dialog-content {
+	background-color: #333;
+	padding-bottom: 25px;
 }
 
 a.ui-dialog-titlebar-close {
-	background-image: url('../../icon/delete1.svg');
+	background-image: url('../../icon/delete2.svg');
 	background-position: top left;
 	background-repeat: no-repeat;
+	background-size: 32px;
 	position: absolute !important;
-	top: -16px;
-	right: -16px;
-	width: 24px;
-	height: 24px;
+	top: 3px;
+	right: 3px;
+	width: 32px;
+	height: 32px;
 }
 
 a.ui-dialog-titlebar-close span {
@@ -2184,8 +2236,9 @@ a.ui-dialog-titlebar-close span {
 
 div.ui-widget-overlay {
 	background-color: #000;
-	opacity: .6;
+	opacity: .7;
 	position: fixed;
+	width: 100% !important;
 	top: 0;
 	left: 0;
 }
@@ -2219,9 +2272,6 @@ div.ui-widget-overlay {
 	left: 0;
 }
 
-.ui-dialog {
-	background-color: rgba(255, 255, 255, .9);
-}
 
 
 /* ############## Badges ############## */
@@ -2230,6 +2280,7 @@ div.ui-widget-overlay {
 
 .badge {
 	font-size: 85%;
+	font-weight: normal;
 	text-shadow: none;
 	color: #666;
 	border-radius: 13px;
diff --git a/wcfsetup/install/files/icon/delete2.svg b/wcfsetup/install/files/icon/delete2.svg
new file mode 100755
index 0000000000..f24552bac9
--- /dev/null
+++ b/wcfsetup/install/files/icon/delete2.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" xml:space="preserve">
+	
+	<title>Delete</title> 
+	<desc>Delete Icon (outlined)</desc> 
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		
+	</defs>
+	
+	<g id="IconDelete">
+		<g class="Lower">
+			<path id="Circle" style="fill-rule: evenodd; clip-rule: evenodd; fill: #000;" d="M2.347168,8.5
+				c0,2.8476562,2.3066406,5.1533203,5.152832,5.1533203c2.8447266,0,5.1523438-2.3056641,5.1523438-5.1533203
+				c0-2.8466797-2.3076172-5.1533203-5.1523438-5.1533203C4.6538086,3.3466797,2.347168,5.6533203,2.347168,8.5z M1,8.5
+				C1,4.9101562,3.909668,2,7.5,2C11.0898438,2,14,4.9101562,14,8.5c0,3.5908203-2.9101562,6.5-6.5,6.5
+				C3.909668,15,1,12.0908203,1,8.5z"/>
+			<path id="Delete_1_" style="fill-rule: evenodd; clip-rule: evenodd; fill: #000;" d="M10.328125,11.328125
+				c0.3115234-0.3105469,0.3125-0.8193359,0.0009766-1.1308594L9.1972656,9.0654297
+				c-0.3115234-0.3115234-0.3115234-0.8198242,0-1.1313477l1.1308594-1.1308594c0.3105469-0.3110352,0.3115234-0.8198242,0-1.1313477
+				l0,0c-0.3115234-0.3115234-0.8203125-0.3105469-1.1308594,0.0004883L8.065918,6.8032227
+				C7.7543945,7.1147461,7.246582,7.1147461,6.9345703,6.8027344L5.8032227,5.6713867
+				C5.4916992,5.3598633,4.9824219,5.3608398,4.671875,5.671875l0,0c-0.3115234,0.3110352-0.3115234,0.8193359,0,1.1308594
+				L5.8032227,7.934082c0.3115234,0.3120117,0.3115234,0.8203125,0.0004883,1.1313477L4.671875,10.1972656
+				c-0.3115234,0.3115234-0.3115234,0.8193359,0,1.1308594l0,0c0.3115234,0.3115234,0.8193359,0.3115234,1.1308594,0
+				l1.1318359-1.1318359c0.3115234-0.3105469,0.8198242-0.3105469,1.1313477,0l1.1313477,1.1318359
+				C9.5087891,11.6396484,10.0175781,11.6396484,10.328125,11.328125L10.328125,11.328125z"/>
+		</g>
+		<g class="Upper">
+			<path id="Circle_1_" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M2.347168,7.5
+				c0,2.8476562,2.3066406,5.1533203,5.152832,5.1533203c2.8447266,0,5.1523438-2.3056641,5.1523438-5.1533203
+				c0-2.8466797-2.3076172-5.1533203-5.1523438-5.1533203C4.6538086,2.3466797,2.347168,4.6533203,2.347168,7.5z M1,7.5
+				C1,3.9101562,3.909668,1,7.5,1C11.0898438,1,14,3.9101562,14,7.5c0,3.5908203-2.9101562,6.5-6.5,6.5
+				C3.909668,14,1,11.0908203,1,7.5z"/>
+			<path id="Delete" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M10.328125,10.328125
+				c0.3115234-0.3105469,0.3125-0.8193359,0.0009766-1.1308594L9.1972656,8.0654297
+				c-0.3115234-0.3115234-0.3115234-0.8198242,0-1.1313477l1.1308594-1.1308594c0.3105469-0.3110352,0.3115234-0.8198242,0-1.1313477
+				l0,0c-0.3115234-0.3115234-0.8203125-0.3105469-1.1308594,0.0004883L8.065918,5.8032227
+				C7.7543945,6.1147461,7.246582,6.1147461,6.9345703,5.8027344L5.8032227,4.6713867
+				C5.4916992,4.3598633,4.9824219,4.3608398,4.671875,4.671875l0,0c-0.3115234,0.3110352-0.3115234,0.8193359,0,1.1308594
+				L5.8032227,6.934082c0.3115234,0.3120117,0.3115234,0.8203125,0.0004883,1.1313477L4.671875,9.1972656
+				c-0.3115234,0.3115234-0.3115234,0.8193359,0,1.1308594l0,0c0.3115234,0.3115234,0.8193359,0.3115234,1.1308594,0
+				l1.1318359-1.1318359c0.3115234-0.3110352,0.8198242-0.3110352,1.1313477,0l1.1313477,1.1318359
+				C9.5087891,10.6396484,10.0175781,10.6396484,10.328125,10.328125L10.328125,10.328125z"/>
+		</g>
+	</g>
+</svg>
-- 
2.20.1