From 254e47df750e5b380d3a6898816bbef009f602d7 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 12 Jan 2016 00:39:56 +0100
Subject: [PATCH] Overhauled visuals for dialogs

---
 wcfsetup/install/files/style/ui/dialog.scss | 64 +++++++++++----------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 77f55adb37..aecdc34dfb 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -1,23 +1,21 @@
 .dialogOverlay {
-	align-items: flex-start;
 	background-color: transparent;
 	bottom: 0;
-	display: flex;
-	justify-content: center;
 	left: 0;
+	opacity: 0;
 	padding: 100px 0;
 	position: fixed;
 	right: 0;
 	top: 0;
+	transition: opacity .12s linear, visibility 0s linear .3s;
 	visibility: hidden;
+	will-change: opacity;
 	z-index: 399;
 	
-	transition: visibility 0s linear .3s;
-	
 	&[aria-hidden=false] {
-		visibility: visible;
-		
+		opacity: 1;
 		transition-delay: 0s;
+		visibility: visible;
 	}
 	
 	&::before {
@@ -33,31 +31,32 @@
 	}
 }
 
-@-webkit-keyframes wcfDialog {
-	0%   { visibility: visible; opacity: 0; top: 8%; }
-	100% { visibility: visible; opacity: 1; top: 10%; }
+@keyframes wcfDialog {
+	0%   { visibility: visible; top: 8%; }
+	100% { visibility: visible; top: 10%; }
 }
 
-@-webkit-keyframes wcfDialogOut {
-	0% { visibility: visible; opacity: 1; top: 10%; }
-	100% { visibility: hidden; opacity: 0; top: 12%; }
+@keyframes wcfDialogOut {
+	0% { visibility: visible; top: 10%; }
+	100% { visibility: hidden; top: 12%; }
 }
 
 .dialogContainer {
-	border: 1px solid $wcfContentBorder;
+	animation: wcfDialogOut .3s;
+	animation-fill-mode: forwards;
 	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
+	left: 50%;
 	max-height: 80%;
 	max-width: 80%;
 	min-width: 400px;
-	will-change: opacity, transform;
+	position: absolute;
+	transform: translateX(-50%);
+	will-change: transform;
 	z-index: 200;
 	
-	-webkit-animation: wcfDialogOut .3s;
-	-webkit-animation-fill-mode: forwards;
-	
 	&[aria-hidden=false] {
-		-webkit-animation: wcfDialog .3s;
-		-webkit-animation-fill-mode: forwards;
+		animation: wcfDialog .3s;
+		animation-fill-mode: forwards;
 		
 		& ~ .dialogContainer[aria-hidden=false] {
 			z-index: 50;
@@ -65,9 +64,8 @@
 	}
 	
 	> header {
-		background-color: $wcfContentBackground;
-		border-bottom: 1px solid $wcfContentBorderInner;
-		color: $wcfContentHeadlineText;
+		background-color: $wcfHeaderBackground;
+		color: $wcfHeaderText;
 		display: flex;
 		padding: 10px 20px;
 		
@@ -78,7 +76,7 @@
 		}
 		
 		> a {
-			color: $wcfContentHeadlineLink;
+			color: $wcfHeaderLink;
 			flex: 0 0 20px;
 			font-family: FontAwesome;
 			font-size: 18px;
@@ -89,6 +87,10 @@
 				content: $fa-var-times;
 			}
 			
+			&:hover {
+				color: $wcfHeaderLinkActive;
+			}
+			
 			> span {
 				display: none;
 			}
@@ -119,6 +121,14 @@
 			border-bottom-right-radius: 3px;
 		}
 		
+		a {
+			color: $wcfContentLink;
+			
+			&:hover {
+				color: $wcfContentLinkActive;
+			}
+		}
+		
 		dl:not(.plain) {
 			> dt {
 				float: none;
@@ -136,7 +146,7 @@
 		}
 		
 		.dialogFormSubmit {
-			background-color: $wcfContentBackground;
+			background-color: $wcfSidebarBackground;
 			border-top: 1px solid $wcfContentBorderInner;
 			bottom: 0;
 			left: 0;
@@ -189,10 +199,6 @@
 	}
 }
 
-.systemConfirmation p {
-	//padding-top: @wcfGapSmall;
-}
-
 /* notification overlay */
 #systemNotification {
 	left: 0;
-- 
2.20.1