sync both themes with toolkit windows theme changes in Mozilla 33 cycle
[themes.git] / EarlyBlue / global / alerts / alert.css
index 6a63465bba432e41d374b68f7ce8fea40ae52f24..e6d562c592851525ba14f76229fdffe3477f6182 100644 (file)
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 .alertBox {
-  border: 2px solid #666699;
+  border: 1px solid #666699;
   background-color: #CCD0DD;
-  min-height: 50px;
+}
+
+.alertImageBox {
+  padding: 8px 0;
+  width: 64px;
+  -moz-border-end: 1px solid #9999CC;
+}
+
+.alertTextBox {
+  padding: 8px;
+  -moz-padding-start: 16px;
+  width: 255px;
+}
+
+.alertTextBox,
+.alertCloseBox {
 }
 
 .alertBox[orient="horizontal"] > .alertImageBox {
-  -moz-margin-start: 4px;
-  -moz-margin-end: 6px;
-  min-height: 46px;
+  -moz-margin-end: 8px;
 }
 
 .alertBox[orient="vertical"] > .alertImageBox {
-  margin-top: 6px;
-  margin-bottom: 4px;
-  min-width: 46px;
+  margin-bottom: 8px;
+}
+
+#alertNotification[clickable="true"]:hover .alertTextBox,
+#alertNotification[clickable="true"]:hover .alertCloseBox {
+/*  background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.3)); */
 }
 
 .alertTitle {
   font-weight: bold;
+  font-size: 110%;
 }
 
 #alertImage {
   max-width: 48px;
   max-height: 48px;
-}
-
-.alertText {
-  -moz-margin-end: 6px;
+  list-style-image: url("chrome://global/skin/alerts/notification-48.png");
 }
 
 #alertNotification[clickable="true"] {
@@ -49,23 +63,22 @@ label {
   cursor: inherit;
 }
 
-.alertText[clickable="true"] {
-  color: blue;
-  text-decoration: underline;
-}
-
-.alertText[clickable="true"]:hover:active {
-  color: red;
-}
-
-.alertBox[orient="horizontal"] > .alertTextBox {
-  -moz-padding-end: 10px;
-  padding-top: 5px;
+@keyframes alert-animation {
+  from {
+    opacity: 0;
+  }
+  6.25% {
+    opacity: 1;
+  }
+  93.75% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
-.alertBox[orient="vertical"] > .alertTextBox {
-  -moz-padding-start: 5px;
-  -moz-padding-end: 5px;
-  margin-bottom: 8px;
-  -moz-box-align: center;
+.alertCloseButton {
+  list-style-image: url("chrome://global/skin/icons/close-button.gif");
+  padding: 4px 2px;
 }