1 files changed, 200 insertions, 0 deletions
diff --git a/apps/system/style/notifications/notifications.css b/apps/system/style/notifications/notifications.css
new file mode 100644
index 0000000..5dbfe5e
--- /dev/null
+++ b/apps/system/style/notifications/notifications.css
@@ -0,0 +1,200 @@
+html, body {
+  font-family: 'MozTT', sans-serif;
+  font-size: 10px;
+}
+
+#notification-toaster {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  overflow: hidden;
+  background-image: url('images/grey-noise-bg.png');
+  background-repeat: repeat-x;
+  -moz-box-sizing: border-box;
+  border-bottom: 1px #2c2c2c solid;
+  -moz-transform: translateY(-50px);
+  -moz-transition: -moz-transform .3s ease-in-out;
+}
+
+#toaster-icon {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: 7px;
+  left: 10px;
+  pointer-events: none;
+}
+
+#notification-toaster > div {
+  left: 50px;
+  width: -moz-calc(100% - 55px);
+  height: 19px;
+  padding: 0;
+
+  line-height: 1.9rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#toaster-title {
+  position: absolute;
+  top: 3px;
+  color: #52b8cc;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+#toaster-detail {
+  position: absolute;
+  top: 22px;
+  color: white;
+  font-size: 1.4rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notification-toaster.displayed {
+  -moz-transform: translateY(0);
+}
+
+#notification-bar {
+  height: 30px;
+  background-color: #52b6cc;
+  color: #1b3f46;
+}
+
+#notification-bar span {
+  display: inline-block;
+  margin-left: 15px;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 30px;
+}
+
+#notification-bar button {
+  float: right;
+  margin-right: 15px;
+  width: 30%;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: right;
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+/* remove ugly dotted outline when focus */
+#notification-bar button::-moz-focus-inner {
+  border: 0;
+}
+
+#notifications-container {
+  width: 100%;
+
+  /* minus cost control, quick settings, bar and grippy */
+  height: -moz-calc(100% - 4.5rem - 60px - 30px - 20px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+
+.notification {
+  position: relative;
+  height: 60px;
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.9rem;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  border-top: 1px #404547 solid;
+  border-bottom: 1px black solid;
+}
+
+.notification:first-child {
+  border-top-color: black;
+}
+
+.notification div {
+  pointer-events: none;
+}
+
+.notification > div:first-of-type {
+  width: 19.5rem;
+  margin: 1rem 0 0 5rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.9rem;
+  color: #FFFFFF;
+}
+
+.notification > div {
+  margin: 0 0 0 50px;
+  padding: 0;
+  width: -moz-calc(100% - 55px);
+  color: #bfbfbf;
+  font-size: 1.4rem;
+  line-height: 1.9rem;
+  min-height: 1.9rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notification > .timestamp {
+  position: absolute;
+  right: 0;
+  top: -.2rem;
+  color: #52B6CC;
+  margin: 13px 15px 0 0;
+  padding: 0;
+  display: inline;
+  line-height: 16px;
+}
+
+.notification > img {
+  float: left;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 15px 10px;
+  pointer-events: none;
+}
+
+.notification.disappearing,
+#notification-toaster.disappearing {
+  transition: transform 0.3s linear;
+  transform: translateX(100%);
+}
+
+.notification.disappearing ~ .notification {
+  transition: transform 0.3s linear;
+  transform: translateY(-62px);
+}
+
+#notifications-lockscreen-container {
+  position: absolute;
+  top: 18rem;
+  left: 0;
+  width: 100%;
+  max-height: 186px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9),
+                              rgba(0, 0, 0, 0.6) 78%,
+                              rgba(0, 0, 0, 0));
+  background-size: 100% 186px;
+}
+
+#notifications-lockscreen-container .notification {
+  background-color: transparent;
+}