Refine the notification panel

botanjs/src/Astro/Blog/Components/Notification.css

@@ -1,6 +1,7 @@
 .notifications {
-	position: relative;
+	float: right;
 	cursor: default;
+	position: relative;
 }
 
 .nt_body {
@@ -10,25 +11,25 @@
 	left: -300px;
 
 	max-width: 300px;
-	max-height: 600px;
 
 	text-align: left;
 
 	display: none;
+	z-index: 1;
 }
 
-.nt_body > div {
-	float: right;
-}
+.nt_body > div { float: right; }
 
 .nt_button {
+	float: left;
+
 	text-align: left;
 	display: block;
 
-	margin: 0.2em 0;
+	padding: 0 0.5em 0 0;
 
 	color: white;
-	background: #444;
+	background-color: #444;
 }
 
 .nt_button:before {
@@ -36,12 +37,13 @@
 	display: inline-block;
 
 	padding: 0 0.5em;
-	line-height: 1.5em;
+	margin-right: 0.5em;
+	line-height: 2em;
 
 	background-color: royalblue;
 }
 
-.nt_button:before, .nt_switch:before {
+.nt_button:before, .nt_switch:before, .nt_icon_settings {
 	-webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 	-moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 	-ms-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
@@ -61,6 +63,7 @@
 }
 
 .nt_arrow {
+	margin-top: 0.2em;
 	border-top: 0.8em solid transparent;
 	border-left: 1em solid #444;
 	border-bottom: 0.8em solid transparent;
@@ -73,7 +76,9 @@
 	background: #444;
 
 	margin-right: 0.5em;
-	margin-top: -1.6em;
+	margin-top: -2em;
+
+	overflow: hidden;
 }
 
 .nt_date {
@@ -81,15 +86,18 @@
 }
 
 .nt_container > ul {
-	white-space: nowrap;
+	max-height: 400px;
+	width: 120%;
 
-	overflow: hidden;
+	white-space: nowrap;
 	text-overflow: ellipsis;
+	overflow-y: scroll;
 
 	color: white;
 }
 
 .nt_container > ul > li {
+	width: 80%;
 	padding: 0.25em 0.5em;
 	color: white;
 	text-decoration: none;
@@ -100,9 +108,17 @@
 }
 
 .nt_icon_settings {
-	background-image: url(/assets/layout-images/settings.png);
-	padding-left: 25px !important;
-	background-repeat: no-repeat;
+	float: right;
+
+	padding: 0em 0.2em;
+	width: 2em; height: 2em;
+
+	background: #333 url(/assets/layout-images/settings.png) no-repeat center center;
+	background-size: 1.5em 1.5em;
+}
+
+.nt_icon_settings:hover {
+	background-color: #555;
 }
 
 ul.nt_smenu {
@@ -128,7 +144,7 @@ ul.nt_smenu > li > span {
 
 .nt_switch {
 	width: 2.5em;
-	height: 1em;
+	height: 1.2em;
 	text-align: center;
 	overflow: hidden;
 }