Lungo.Notification improved

src/Lungo.Notification.js

@@ -14,7 +14,7 @@ Lungo.Notification = (function(lng, undefined) {
     var _window = null;
 
     var DELAY_TIME = 1;
-    var ANIMATION_MILISECONDS = 300;
+    var ANIMATION_MILISECONDS = 200;
     var ATTRIBUTE = lng.Constants.ATTRIBUTE;
     var BINDING = lng.Constants.BINDING;
 
@@ -63,7 +63,7 @@ Lungo.Notification = (function(lng, undefined) {
      */
     var confirm = function(options) {
         _options = options;
-        _new_instance(false);
+        _new_instance(true);
 
         var markup = '<p>' + _markup(options.title, options.description, options.icon) + '</p><hr/>';
         markup += _button_markup(options.accept, 'accept');
@@ -167,6 +167,7 @@ Lungo.Notification = (function(lng, undefined) {
     };
 
     var _markup = function(title, description, icon) {
+        description = !description ? "&nbsp;" : description;
         return '<span class="icon ' + icon + '"></span><strong>' + title + '</strong><small>' + description + '</small>';
     };
 

src/stylesheets/Lungo.theme.default.less

@@ -8,6 +8,8 @@
  */
 
 @import "mixins.less";
+@import "constants.less";
+
 
 @theme: #2A95D3;
 @theme-light:  #39ABE1;
@@ -343,3 +345,28 @@ input[type="range"] {
     }
     aside .list .bubble { background: rgba(0,0,0,0.25); }
 /* @end */
+
+/* @group .bubble */
+.notification {
+    color: #fff;
+    & .window {
+        &.confirm { background: #333; }
+
+        &.notify {
+            text-shadow: 0 1px 0px rgba(0,0,0,0.1);
+            .box-shadow(~'inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25)');
+
+            &.error { background: @red; }
+            &.alert { background: @yellow; }
+            &.success { background: @green; }
+        }
+
+        &.url {
+            & .close {
+                background: #000;
+                border: solid 2px #fff;
+                box-shadow: 0 0 4px black;
+            }
+        }
+    }
+}

src/stylesheets/css/Lungo.theme.default.css

@@ -6,6 +6,8 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
+/* DIMENSIONS */
+/* COLORS */
 .app {
   background: #000;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
@@ -22,6 +24,11 @@ a.theme:active {
 }
 /* @group <header> & <footer> & <article> */
 section > header {
+  background-image: -webkit-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -moz-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -ms-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: -o-linear-gradient(top , #2a95d3 , #1984c2);
+  background-image: linear-gradient(top , #2a95d3 , #1984c2);
   background-image: -webkit-linear-gradient(top , #2a95d3 , #1984c2);
   background-image: -moz-linear-gradient(top , #2a95d3 , #1984c2);
   background-image: -ms-linear-gradient(top , #2a95d3 , #1984c2);
@@ -30,6 +37,15 @@ section > header {
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
   -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
   -webkit-border-radius: 4px 4px 0px 0px;
   -moz-border-radius: 4px 4px 0px 0px;
   border-radius: 4px 4px 0px 0px;
@@ -51,6 +67,17 @@ section > footer {
   background-image: -ms-linear-gradient(top , #292f34 0% , #23282c 60%);
   background-image: -o-linear-gradient(top , #292f34 0% , #23282c 60%);
   background-image: linear-gradient(top , #292f34 0% , #23282c 60%);
+  background-image: -webkit-linear-gradient(top , #292f34 0% , #23282c 60%);
+  background-image: -moz-linear-gradient(top , #292f34 0% , #23282c 60%);
+  background-image: -ms-linear-gradient(top , #292f34 0% , #23282c 60%);
+  background-image: -o-linear-gradient(top , #292f34 0% , #23282c 60%);
+  background-image: linear-gradient(top , #292f34 0% , #23282c 60%);
+  -webkit-border-radius: 0px 0px 4px 4px;
+  -moz-border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 4px 4px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
   -webkit-border-radius: 0px 0px 4px 4px;
   -moz-border-radius: 0px 0px 4px 4px;
   border-radius: 0px 0px 4px 4px;
@@ -60,6 +87,9 @@ section > footer {
   -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
   -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
   box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05);
 }
 section > nav.groupbar {
   background-image: -webkit-linear-gradient(top , #23282c 0% , #292f34 60%);
@@ -67,6 +97,11 @@ section > nav.groupbar {
   background-image: -ms-linear-gradient(top , #23282c 0% , #292f34 60%);
   background-image: -o-linear-gradient(top , #23282c 0% , #292f34 60%);
   background-image: linear-gradient(top , #23282c 0% , #292f34 60%);
+  background-image: -webkit-linear-gradient(top , #23282c 0% , #292f34 60%);
+  background-image: -moz-linear-gradient(top , #23282c 0% , #292f34 60%);
+  background-image: -ms-linear-gradient(top , #23282c 0% , #292f34 60%);
+  background-image: -o-linear-gradient(top , #23282c 0% , #292f34 60%);
+  background-image: linear-gradient(top , #23282c 0% , #292f34 60%);
 }
 section > article {
   background: #f4f5f5;
@@ -80,6 +115,9 @@ header nav.box {
   -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
   box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
+  box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
 }
 header nav.box.accept {
   background: rgba(0, 255, 0, 0.4);
@@ -103,6 +141,9 @@ header nav.box.right a {
   -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
   -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
   box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
 }
 header nav.button a {
   border-radius: 4px;
@@ -111,6 +152,11 @@ header nav.button a {
   background-image: -ms-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
   background-image: -o-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
   background-image: linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
+  background-image: -webkit-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
+  background-image: -moz-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
+  background-image: -ms-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
+  background-image: -o-linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
+  background-image: linear-gradient(top , rgba(0, 0, 0, 0) , rgba(0, 0, 0, 0.1));
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.5);
 }
 header nav.button a:active {
@@ -121,11 +167,15 @@ footer nav a.current {
   -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
   -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
   box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
 }
 footer nav a,
 nav.groupbar a {
   color: rgba(0, 0, 0, 0.7);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 footer nav a.current,
 nav.groupbar a.current {
@@ -136,6 +186,9 @@ nav.groupbar a.current {
   -webkit-box-shadow: inset 0 -3px 0 #2a95d3;
   -moz-box-shadow: inset 0 -3px 0 #2a95d3;
   box-shadow: inset 0 -3px 0 #2a95d3;
+  -webkit-box-shadow: inset 0 -3px 0 #2a95d3;
+  -moz-box-shadow: inset 0 -3px 0 #2a95d3;
+  box-shadow: inset 0 -3px 0 #2a95d3;
 }
 /* @end */
 /* @group <aside> */
@@ -145,6 +198,9 @@ aside {
 }
 aside header,
 aside footer {
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
   -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
   -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
   box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
@@ -160,11 +216,17 @@ section.aside {
   -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
   -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
   box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+  box-shadow: -4px 0 8px rgba(0,0,0,0.5);
 }
 section.aside.right {
   -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
   -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
   box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
+  box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 }
 /*
 @media handheld, only screen and (min-width: 768px) {
@@ -226,6 +288,11 @@ aside .list li.current {
   background-image: -ms-linear-gradient(top , #39abe1 25% , #1984c2 100%);
   background-image: -o-linear-gradient(top , #39abe1 25% , #1984c2 100%);
   background-image: linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 25% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 25% , #1984c2 100%);
 }
 aside .list li strong {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
@@ -252,6 +319,12 @@ aside .list li small {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px 2px 0 0;
+  -moz-border-radius: 2px 2px 0 0;
+  border-radius: 2px 2px 0 0;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
 }
 .indented li:last-child {
   -webkit-border-radius: 0 0 2px 2px;
@@ -260,6 +333,15 @@ aside .list li small {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 0 0 2px 2px;
+  -moz-border-radius: 0 0 2px 2px;
+  border-radius: 0 0 2px 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -272,6 +354,15 @@ a.button {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
+  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
+  box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
   -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
   -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
   box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2);
@@ -282,6 +373,9 @@ a.button:active {
   -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
   -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
   box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
+  box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
 }
 /* @end */
 /* @group <form> */
@@ -298,11 +392,20 @@ select {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
   color: #858585;
   font-family: Helvetica, Arial, sans-serif;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 }
 input:focus,
 textarea:focus,
@@ -312,6 +415,9 @@ select:focus {
   -webkit-box-shadow: 0 0 6px #39abe1;
   -moz-box-shadow: 0 0 6px #39abe1;
   box-shadow: 0 0 6px #39abe1;
+  -webkit-box-shadow: 0 0 6px #39abe1;
+  -moz-box-shadow: 0 0 6px #39abe1;
+  box-shadow: 0 0 6px #39abe1;
 }
 .select:after {
   background: #ccc;
@@ -330,6 +436,12 @@ input[type="radio"] + span {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
 }
 input[type="checkbox"] + span::before,
 input[type="radio"] + span::before {
@@ -340,9 +452,20 @@ input[type="radio"] + span::before {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
 }
 input[type="checkbox"]:checked + span,
 input[type="radio"]:checked + span {
+  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
   background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
   background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
   background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
@@ -354,6 +477,12 @@ input[type="radio"]:checked + span {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
 }
 /* @end */
 /* @group range */
@@ -365,6 +494,15 @@ input[type="range"] {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
@@ -373,8 +511,17 @@ input[type="range"]:active {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 input[type="range"]::-webkit-slider-thumb {
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
@@ -384,6 +531,9 @@ input[type="range"]::-webkit-slider-thumb {
   background: #a0a0a0;
 }
 input[type="range"]:active::-webkit-slider-thumb {
+  -webkit-box-shadow: 0px 0px 4px #39abe1;
+  -moz-box-shadow: 0px 0px 4px #39abe1;
+  box-shadow: 0px 0px 4px #39abe1;
   -webkit-box-shadow: 0px 0px 4px #39abe1;
   -moz-box-shadow: 0px 0px 4px #39abe1;
   box-shadow: 0px 0px 4px #39abe1;
@@ -392,6 +542,11 @@ input[type="range"]:active::-webkit-slider-thumb {
   background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
   background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
   background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #2a95d3 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #2a95d3 0% , #1984c2 100%);
 }
 /* @end */
 /* @group .progress */
@@ -409,6 +564,12 @@ input[type="range"]:active::-webkit-slider-thumb {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
 }
 .progress .bar .value {
   background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
@@ -416,6 +577,17 @@ input[type="range"]:active::-webkit-slider-thumb {
   background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
   background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
   background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -441,6 +613,12 @@ input[type="range"]:active::-webkit-slider-thumb {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
 }
 .bubble.count {
   background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
@@ -448,18 +626,59 @@ input[type="range"]:active::-webkit-slider-thumb {
   background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
   background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
   background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -webkit-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -moz-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -ms-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: -o-linear-gradient(top , #39abe1 0% , #1984c2 100%);
+  background-image: linear-gradient(top , #39abe1 0% , #1984c2 100%);
 }
 footer .bubble {
   -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
   -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
   box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
 }
 article .list .bubble {
   -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
   box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
 }
 aside .list .bubble {
   background: rgba(0, 0, 0, 0.25);
 }
 /* @end */
+/* @group .bubble */
+.notification {
+  color: #fff;
+}
+.notification .window.confirm {
+  background: #333;
+}
+.notification .window.notify {
+  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.25);
+}
+.notification .window.notify.error {
+  background: #e33100;
+}
+.notification .window.notify.alert {
+  background: #ffb515;
+}
+.notification .window.notify.success {
+  background: #009600;
+}
+.notification .window.url .close {
+  background: #000;
+  border: solid 2px #fff;
+  box-shadow: 0 0 4px black;
+}

src/stylesheets/css/lungo.widgets.notification.css

@@ -6,107 +6,103 @@
   height: 100%;
   z-index: 3;
   background: none;
-  font-size: 0.9em;
-  color: #ffffff;
   display: none;
 }
 .notification.modal {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .notification .window {
   position: relative;
   opacity: 0;
-  -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: all 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
 }
 .notification .window.show {
   opacity: 1;
-  -webkit-transition-delay: 300ms;
-  -moz-transition-delay: 300ms;
-  -ms-transition-delay: 300ms;
-  -o-transition-delay: 300ms;
-  transition-delay: 300ms;
-  -webkit-transition-delay: 300ms;
-  -moz-transition-delay: 300ms;
-  -ms-transition-delay: 300ms;
-  -o-transition-delay: 300ms;
-  transition-delay: 300ms;
+  -webkit-transition-delay: 200ms;
+  -moz-transition-delay: 200ms;
+  -ms-transition-delay: 200ms;
+  -o-transition-delay: 200ms;
+  transition-delay: 200ms;
+  -webkit-transition-delay: 200ms;
+  -moz-transition-delay: 200ms;
+  -ms-transition-delay: 200ms;
+  -o-transition-delay: 200ms;
+  transition-delay: 200ms;
+}
+.notification .window strong,
+.notification .window small {
+  display: block;
+}
+.notification .window small {
+  font-size: 0.7em;
 }
 .notification .window:not(.special) {
   left: 50%;
   top: 50%;
-  width: 114px;
-  margin: -64px auto auto -64px;
+  width: 104px;
+  margin: -52px auto auto -52px;
   padding: 8px;
   background-color: rgba(0, 0, 0, 0.8);
   text-align: center;
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-  -webkit-transform: translate3d(0, 10%, 0);
-  -moz-transform: translate3d(0, 10%, 0);
-  -ms-transform: translate3d(0, 10%, 0);
-  -o-transform: translate3d(0, 10%, 0);
-  transform: translate3d(0, 10%, 0);
-  -webkit-transform: translate3d(0, 10%, 0);
-  -moz-transform: translate3d(0, 10%, 0);
-  -ms-transform: translate3d(0, 10%, 0);
-  -o-transform: translate3d(0, 10%, 0);
-  transform: translate3d(0, 10%, 0);
+  -webkit-transform: scale(0.8);
+  -moz-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  -o-transform: scale(0.8);
+  transform: scale(0.8);
+  -webkit-transform: scale(0.8);
+  -moz-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  -o-transform: scale(0.8);
+  transform: scale(0.8);
 }
 .notification .window:not(.special).show {
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
 }
 .notification .window:not(.special) .icon {
   display: block;
-  font-size: 5.0em;
+  font-size: 4.0em;
 }
 .notification .window:not(.special) .icon.loading {
   margin-top: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
 }
-.notification .window:not(.special) strong {
-  display: block;
-  margin-bottom: 4px;
+.notification .window:not(.special) small {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .notification .window.confirm,
 .notification .window.notify {
-  -webkit-transform: translate3d(0, -150%, 0);
-  -moz-transform: translate3d(0, -150%, 0);
-  -ms-transform: translate3d(0, -150%, 0);
-  -o-transform: translate3d(0, -150%, 0);
-  transform: translate3d(0, -150%, 0);
-  -webkit-transform: translate3d(0, -150%, 0);
-  -moz-transform: translate3d(0, -150%, 0);
-  -ms-transform: translate3d(0, -150%, 0);
-  -o-transform: translate3d(0, -150%, 0);
-  transform: translate3d(0, -150%, 0);
+  top: 0;
+  font-size: 1.1em !important;
+  -webkit-transform: translate3d(0, -100%, 0);
+  -moz-transform: translate3d(0, -100%, 0);
+  -ms-transform: translate3d(0, -100%, 0);
+  -o-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+  -webkit-transform: translate3d(0, -100%, 0);
+  -moz-transform: translate3d(0, -100%, 0);
+  -ms-transform: translate3d(0, -100%, 0);
+  -o-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
 }
 .notification .window.confirm.show,
 .notification .window.notify.show {
@@ -124,110 +120,33 @@
 .notification .window.confirm .icon,
 .notification .window.notify .icon {
   float: left;
-  font-size: 2.5em;
-  margin-right: 8px;
-}
-.notification .window.confirm strong,
-.notification .window.notify strong {
-  line-height: 1.5em;
+  font-size: 2.0em;
+  margin: -3px 10px 0 0;
 }
 .notification .window.confirm {
   opacity: 1;
   padding: 10px 12px;
-  top: 0;
-  top: 42px;
-  background: #333;
 }
-.notification .window.confirm hr {
-  margin: 10px 0;
-  height: 1px;
-  background: rgba(0, 0, 0, 0.75);
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+.notification .window.confirm p {
+  height: 44px;
 }
 .notification .window.confirm .button {
   width: 42%;
-  font-size: 15px;
-  line-height: 40px;
 }
 .notification .window.confirm .button:last-child {
   float: right;
 }
 .notification .window.notify {
-  padding: 3px 0px 7px 7px;
+  padding: 8px;
   top: 0;
-  color: #555555;
-  text-shadow: 0 1px 0px #ffffff;
-  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-}
-.notification .window.notify.error,
-.notification .window.notify.alert,
-.notification .window.notify.success {
-  color: #ffffff;
-  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
-}
-.notification .window.notify.error {
-  background-image: -webkit-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: -moz-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: -ms-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: -o-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: -webkit-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: -moz-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: -ms-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: -o-linear-gradient(top , #e33100 0% , #c5280f 85%);
-  background-image: linear-gradient(top , #e33100 0% , #c5280f 85%);
-}
-.notification .window.notify.alert {
-  background-image: -webkit-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: -moz-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: -ms-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: -o-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: -webkit-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: -moz-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: -ms-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: -o-linear-gradient(top , #ffb515 0% , #dfa020 85%);
-  background-image: linear-gradient(top , #ffb515 0% , #dfa020 85%);
-}
-.notification .window.notify.success {
-  background-image: -webkit-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: -moz-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: -ms-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: -o-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: -webkit-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: -moz-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: -ms-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: -o-linear-gradient(top , #009600 0% , #00770e 85%);
-  background-image: linear-gradient(top , #009600 0% , #00770e 85%);
 }
 .notification .window.url {
-  left: 0%;
-  top: 00%;
+  left: 0;
+  top: 0;
   width: 280px;
   height: auto;
   margin: 64px auto 0px;
   padding: 0px;
-  -webkit-transform: translate3d(0, 75%, 0);
-  -moz-transform: translate3d(0, 75%, 0);
-  -ms-transform: translate3d(0, 75%, 0);
-  -o-transform: translate3d(0, 75%, 0);
-  transform: translate3d(0, 75%, 0);
-  -webkit-transform: translate3d(0, 75%, 0);
-  -moz-transform: translate3d(0, 75%, 0);
-  -ms-transform: translate3d(0, 75%, 0);
-  -o-transform: translate3d(0, 75%, 0);
-  transform: translate3d(0, 75%, 0);
 }
 .notification .window.url .close {
   position: absolute;
@@ -238,10 +157,7 @@
   font-weight: normal;
   width: 24px;
   height: 24px;
-  background: #000;
   border-radius: 14px;
-  border: solid 2px #fff;
-  box-shadow: 0 0 4px black;
 }
 .notification .window.working span {
   -webkit-animation: notification-working 1s infinite;

src/stylesheets/lungo.widgets.notification.less

@@ -1,19 +1,13 @@
 @import "mixins.less";
 @import "constants.less";
 
-@notification_opacity: rgba(0,0,0,0.3);
+@notification_opacity: rgba(0,0,0,0.5);
 @defaultTrasition : @easeOutSine;
-@keyframe: 300ms;
+@keyframe: 200ms;
 
 @modal_opacity: rgba(0,0,0,0.8);
-@modal_size: 114px;
-    @modal_size_middle: 64px;
-    @modal_border_radius: 1px;
-
-@notify_font_color: #555;
-@notify_font_shadow: 0 1px 0px #fff;
-
-@font_color: #fff;
+@modal_size: 104px;
+    @modal_size_middle: 52px;
 
 .notification {
     position: absolute;
@@ -21,8 +15,6 @@
     height: 100%;
     z-index: 3;
     background: none;
-    font-size: 0.9em;
-    color: @font_color;
     display: none;
 
     &.modal { background-color: @notification_opacity; }
@@ -37,6 +29,14 @@
             .transition-delay(@keyframe);
         }
 
+        & strong, small {
+            display: block;
+        }
+
+        & small {
+            font-size: 0.7em;
+        }
+
         &:not(.special) {
             left: 50%;
             top: 50%;
@@ -45,89 +45,66 @@
             padding: 8px;
             background-color: @modal_opacity;
             text-align: center;
+            .transform(scale(0.8));
 
-            .border-radius(@modal_border_radius);
-            .transform(translate3d(0, 10%, 0));
-
-            &.show { .transform(translate3d(0, 0, 0)); }
+            &.show {
+                .transform(scale(1.0));
+            }
 
             & .icon {
                 display: block;
-                font-size: 5.0em;
+                font-size: 4.0em;
                 &.loading {
                     margin-top: 24px;
-                    margin-bottom: 24px;
+                    margin-bottom: 20px;
                 }
             }
 
-            & strong {
-                display: block;
-                margin-bottom: 4px;
+            & small {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
             }
         }
 
         &.confirm, &.notify {
-            .transform(translate3d(0, -150%, 0));
+            top: 0;
+            font-size: 1.1em !important;
+            .transform(translate3d(0, -100%, 0));
+
             &.show { .transform(translate3d(0, 0%, 0)); }
 
             & .icon {
                 float: left;
-                font-size: 2.5em;
-                margin-right: 8px;
-            }
-
-            & strong {
-                line-height: 1.5em;
+                font-size: 2.0em;
+                margin: -3px 10px 0 0;
             }
         }
 
         &.confirm {
             opacity: 1;
             padding: 10px 12px;
-            top: 0;
-            top: 42px;
-            background: #333;
-
-            & hr {
-                margin: 10px 0;
-                height: 1px;
-                background: rgba(0,0,0,0.75);
-                .box-shadow(0 1px 0 rgba(255,255,255,0.25));
-            }
+
+            & p { height: 44px;}
 
             & .button {
-                width: 42%;
-                font-size: 15px;
-                line-height: 40px;
+               width: 42%;
                &:last-child {float: right;}
             }
         }
 
         &.notify {
-            padding: 3px 0px 7px 7px;
+            padding: 8px;
             top:  0;
-            color: @notify_font_color;
-            text-shadow: @notify_font_shadow;
-
-            .box-shadow(0px 1px 3px rgba(0,0,0,0.5));
-
-            &.error, &.alert, &.success {
-                color: @font_color;
-                text-shadow: 0 1px 0px rgba(0,0,0,0.1);
-            }
-            &.error { .linear-gradient(top, ~','@red 0%, ~','@red-active 85%); }
-            &.alert { .linear-gradient(top, ~','@yellow 0%, ~','@yellow-active 85%); }
-            &.success { .linear-gradient(top, ~','@green 0%, ~','@green-active 85%); }
         }
 
         &.url {
-            left: 0%;
-            top: 00%;
+            left: 0;
+            top: 0;
             width: 280px;
             height: auto;
             margin: 64px auto 0px;
             padding: 0px;
-            .transform(translate3d(0, 75%, 0));
 
             & .close {
                 position: absolute;
@@ -139,10 +116,7 @@
                 font-weight: normal;
                 width: 24px;
                 height: 24px;
-                background: #000;
                 border-radius: 14px;
-                border: solid 2px #fff;
-                box-shadow: 0 0 4px black;
             }
         }
     }