Notifications Email

by risherry

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;background-color:#F5F5F5;padding:15px;margin:0 auto;color: #1d1f24;">
  <table width="100%" style="max-width:570px;margin:0 auto" align="center" cellspacing="0" cellpadding="0">
    <tbody>
      <tr height="55px">
        <td style="border-collapse:collapse;padding-bottom: 15px;" valign="middle">
          <a href="localhost" style="margin:0;padding:0;color:#3b7ed5;font-size:13px;font-weight:400;line-height:18px;text-decoration:none" target="_blank"><img src="http://playground.xwiki.org/xwiki/skins/flamingo/logo.svg" style="border:0;line-height:100%;outline:none;text-decoration:none;max-width:100%; width: 100px;margin-left: -5px;"></a>
        </td>
        <td style="border-collapse:collapse;padding-left:4px; text-align: right;padding-bottom: 15px;"><a href="localhost" style="margin:0;padding:0;font-size:13px;font-weight:400;line-height:18px;text-decoration:none;color:#0088CC" target="_blank"><span class="fa fa-cog"></span> Notifications</a></td>
      </tr>
      <tr>
        <td style="border-collapse:collapse;padding-bottom:5px;" valign="middle" colspan="2">
          <div style="border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;">
            <div style="background:white;margin-bottom:20px;padding:1em; border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #ddd;border-top: 1px solid #f0f0f0;">
              <h1 style="font-size:30px;font-style:normal;font-weight:500;line-height:42px;letter-spacing:normal;margin-top: 0;font-size:21px;margin-bottom: 0;">Summary</h1>
              <p style="font-size:14px;font-style:normal;font-weight:400;line-height:42px;letter-spacing:normal;margin:0;padding:0;">2 new events by 1 user on 2 pages, since 12:00 (Wed, 11...

CSS

.jstree-node,
.jstree-children,
.jstree-container-ul {
  list-style-type: none;
  list-style-image: none;
}

.jstree-icon:empty {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: inherit;
  text-align: center;
  padding-right: 5px;
  margin-left: -7px;
}

.jstree-anchor {
  color: inherit;
  text-decoration: none;
}

.jstree-node {
  min-height: 24px;
  line-height: 24px;
  min-width: 24px;
}

.jstree-anchor {
  line-height: 28px;
  height: 24px;
}

.jstree-icon {
  color: #333333;
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: inherit;
  text-align: center;
}

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

ul.tree ul {
  margin-left: 10px;
}

ul.tree li {
  margin: 0;
  padding: 0 0 0 10px;
  line-height: 20px;
  border-left: 1px solid rgb(100, 100, 100);
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -0.3em;
  height: 1em;
  width: 12px;
  color: white;
  border-bottom: 1px solid rgb(100, 100, 100);
  content: "";
  display: inline-block;
  left: -10px;
}

ul.tree li:last-child:before {
  border-left: 1px solid rgb(100, 100, 100);
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 9px;
  color: #757575;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  background-color: #F5F5F5;
  border-radius: 10px;
  margin-left: 5px;
  margin-bottom: 4px;
  border: 1px solid #eaeaea;
}

.img-thumbnail {
  padding: 4px;
  line-height: 1.428571429;
  background-color: #F5F5F5;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

.notification-icon span...

JavaScript

Go to "Result" tab