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.

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index b691d634c8c8117754a653cfe8897ef21ec103fc..bc06d6bd1b64fbe1d9ca6f1dddcf732ccd8eb187 100644 (file)
--- 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 (executable)
index 0000000..f24552b
--- /dev/null
+++ b/wcfsetup/install/files/icon/delete2.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<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">\r
+       \r
+       <title>Delete</title> \r
+       <desc>Delete Icon (outlined)</desc> \r
+       \r
+       <!--\r
+               @author         Harald Szekely \r
+               @copyright      2011 WoltLab GmbH \r
+               @license        GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> \r
+       --> \r
+       \r
+       <defs>\r
+               \r
+       </defs>\r
+       \r
+       <g id="IconDelete">\r
+               <g class="Lower">\r
+                       <path id="Circle" style="fill-rule: evenodd; clip-rule: evenodd; fill: #000;" d="M2.347168,8.5\r
+                               c0,2.8476562,2.3066406,5.1533203,5.152832,5.1533203c2.8447266,0,5.1523438-2.3056641,5.1523438-5.1533203\r
+                               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\r
+                               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\r
+                               C3.909668,15,1,12.0908203,1,8.5z"/>\r
+                       <path id="Delete_1_" style="fill-rule: evenodd; clip-rule: evenodd; fill: #000;" d="M10.328125,11.328125\r
+                               c0.3115234-0.3105469,0.3125-0.8193359,0.0009766-1.1308594L9.1972656,9.0654297\r
+                               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\r
+                               l0,0c-0.3115234-0.3115234-0.8203125-0.3105469-1.1308594,0.0004883L8.065918,6.8032227\r
+                               C7.7543945,7.1147461,7.246582,7.1147461,6.9345703,6.8027344L5.8032227,5.6713867\r
+                               C5.4916992,5.3598633,4.9824219,5.3608398,4.671875,5.671875l0,0c-0.3115234,0.3110352-0.3115234,0.8193359,0,1.1308594\r
+                               L5.8032227,7.934082c0.3115234,0.3120117,0.3115234,0.8203125,0.0004883,1.1313477L4.671875,10.1972656\r
+                               c-0.3115234,0.3115234-0.3115234,0.8193359,0,1.1308594l0,0c0.3115234,0.3115234,0.8193359,0.3115234,1.1308594,0\r
+                               l1.1318359-1.1318359c0.3115234-0.3105469,0.8198242-0.3105469,1.1313477,0l1.1313477,1.1318359\r
+                               C9.5087891,11.6396484,10.0175781,11.6396484,10.328125,11.328125L10.328125,11.328125z"/>\r
+               </g>\r
+               <g class="Upper">\r
+                       <path id="Circle_1_" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M2.347168,7.5\r
+                               c0,2.8476562,2.3066406,5.1533203,5.152832,5.1533203c2.8447266,0,5.1523438-2.3056641,5.1523438-5.1533203\r
+                               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\r
+                               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\r
+                               C3.909668,14,1,11.0908203,1,7.5z"/>\r
+                       <path id="Delete" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M10.328125,10.328125\r
+                               c0.3115234-0.3105469,0.3125-0.8193359,0.0009766-1.1308594L9.1972656,8.0654297\r
+                               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\r
+                               l0,0c-0.3115234-0.3115234-0.8203125-0.3105469-1.1308594,0.0004883L8.065918,5.8032227\r
+                               C7.7543945,6.1147461,7.246582,6.1147461,6.9345703,5.8027344L5.8032227,4.6713867\r
+                               C5.4916992,4.3598633,4.9824219,4.3608398,4.671875,4.671875l0,0c-0.3115234,0.3110352-0.3115234,0.8193359,0,1.1308594\r
+                               L5.8032227,6.934082c0.3115234,0.3120117,0.3115234,0.8203125,0.0004883,1.1313477L4.671875,9.1972656\r
+                               c-0.3115234,0.3115234-0.3115234,0.8193359,0,1.1308594l0,0c0.3115234,0.3115234,0.8193359,0.3115234,1.1308594,0\r
+                               l1.1318359-1.1318359c0.3115234-0.3110352,0.8198242-0.3110352,1.1313477,0l1.1313477,1.1318359\r
+                               C9.5087891,10.6396484,10.0175781,10.6396484,10.328125,10.328125L10.328125,10.328125z"/>\r
+               </g>\r
+       </g>\r
+</svg>\r