Master report pages design enhancements

munin-monitoring · Jan 19, 2015 · 7fa10de · 7fa10de
1 parent 9f0a705
commit 7fa10de
Show file tree

Hide file tree

Showing 4 changed files with 386 additions and 2 deletions.
diff --git a/contrib/plugin-gallery/INSTALL b/contrib/plugin-gallery/INSTALL
@@ -27,7 +27,7 @@ So HTMLDIR should initially have this structure:
 ./static/logo-h.png
 ./static/download.gif
 ./static/favicon.ico
-./static/style-new.css
+./static/style-2.1.css
 
 Setup vhost for the gallery in your webservers configuration.
 

diff --git a/master/static/logo-h-neg.png b/master/static/logo-h-neg.png
diff --git a/master/static/style-2.1.css b/master/static/style-2.1.css
@@ -0,0 +1,384 @@
+/* Overall layout */
+html, body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	background: #fdfdfd;
+	font-size: 90%;
+}
+
+select {
+  border: 1px solid #d1d1d1;
+}
+
+body, h1, h2, h3, p, span, div {
+    font-family: "vera sans","dejavu sans",helvetica,verdana,arial,sans-serif;
+	color: #666666;
+}
+
+h3 {
+    margin-top: 1em;
+    margin-bottom: 0px;
+    font-size: 110%;
+    letter-spacing: 0.05em;
+    margin-left: 0px;
+    padding-left: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+	text-decoration: underline;
+}
+
+a:link, a:visited, a:link:active, a:link:hover    { color: #486aaf; text-decoration: none; } 
+a:link:hover { text-decoration: underline;}
+
+.warntext {
+  font-weight: bold;
+  background-color: #cccc00;
+  padding: 0px;
+  margin: -1px;
+  border: 1px solid #b9b900;
+}
+
+.crittext {
+  font-weight: bold;
+  background-color: #ff6f22;
+  padding: 0px;
+  margin: -1px;
+  border: 1px solid #f16722;
+}
+
+a.unkn:link    { color: #ffaa00; } 
+a.unkn:visited { color: #ffaa00; } 
+a.unkn:active  { color: #ffaa00; } 
+a.unkn:hover   { color: #ffaa00; } 
+
+a.warn:link    { color: #ffd300; }
+a.warn:visited { color: #ffd300; }
+a.warn:active  { color: #ffd300; }
+a.warn:hover   { color: #ffd300; }
+
+a.crit:link    { color: #ff0000; } 
+a.crit:visited { color: #ff0000; } 
+a.crit:active  { color: #ff0000; } 
+a.crit:hover   { color: #ff0000; } 
+
+img        { border: 0px; }
+img.i      {
+  border: 1px solid #fff;
+  -moz-box-shadow: 0px 0px 2px 0px #888;
+  -webkit-box-shadow: 0px 0px 2px 0px #888;
+  -o-box-shadow: 0px 0px 2px 0px #888;
+  box-shadow: 0px 0px 2px 0px #888;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#888, Direction=NaN, Strength=5);
+  margin: 4px 4px 4px 0;
+}
+img.iwarn  {
+  border: 1px solid #ffd300;
+  -moz-box-shadow: 0px 0px 2px 0px #ffd300;
+  -webkit-box-shadow: 0px 0px 2px 0px #ffd300;
+  -o-box-shadow: 0px 0px 2px 0px #ffd300;
+  box-shadow: 0px 0px 2px 0px #ffd300;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#ffd300, Direction=NaN, Strength=5);
+  margin: 4px 4px 4px 0;
+}
+img.icrit  {
+  border: 1px solid #ff0000;
+  -moz-box-shadow: 0px 0px 2px 0px #ff0000;
+  -webkit-box-shadow: 0px 0px 2px 0px #ff0000;
+  -o-box-shadow: 0px 0px 2px 0px #ff0000;
+  box-shadow: 0px 0px 2px 0px #ff0000;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#ff0000, Direction=NaN, Strength=5);
+  margin: 4px 4px 4px 0;
+}
+img.iunkn  {
+  border: 1px solid #ffaa00;
+  -moz-box-shadow: 0px 0px 2px 0px #ffaa00;
+  -webkit-box-shadow: 0px 0px 2px 0px #ffaa00;
+  -o-box-shadow: 0px 0px 2px 0px #ffaa00;
+  box-shadow: 0px 0px 2px 0px #ffaa00;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#ffaa00, Direction=NaN, Strength=5);
+  margin: 4px 4px 4px 0;
+}
+
+/* Header */
+#header {
+  width: 90%;
+  margin: 0 auto;
+  background-color: #388E3C;
+  border: 1px solid #3A713C;
+  border-top-width: 0;
+  border-bottom-left-radius: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  -webkit-border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  -moz-border-radius-bottomright: 2px;
+  -webkit-border-bottom-right-radius: 2px;
+  -moz-box-shadow: 0px 0px 5px 0px #777777;
+  -webkit-box-shadow: 0px 0px 5px 0px #777777;
+  -o-box-shadow: 0px 0px 5px 0px #777777;
+  box-shadow: 0px 0px 5px 0px #777777;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#777777, Direction=NaN, Strength=5);
+  padding: 5px 50px;
+  height: 50px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+#header p {
+  margin: 0;
+}
+
+h1, h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 110%;
+  font-weight: bold;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+h1 {
+  padding: 5px 0;
+}	
+
+#nav h2 { 
+  margin-top: 0.4em;
+}
+
+h1 .logo {
+  display: inline-block;
+  float: left;
+  background-image: url('logo-h-neg.png');
+  background-repeat: no-repeat;  
+  width: 115px;
+  height: 30px;
+  -webkit-transition-duration: 200ms;
+  -moz-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  transition-duration: 200ms;
+}
+
+h1 .logo:hover {
+  opacity: 0.8;
+}
+
+h1 > .currentpage {
+  line-height: 30px;
+  font-weight: 100;
+  font-size: 16px;
+  color: #eee;
+  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  display: block;
+  width: 100%;
+  padding-right: 115px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+h1 > .currentpage > a {
+  color: #fff;
+  -webkit-transition-duration: 200ms;
+  -moz-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  transition-duration: 200ms;
+  padding: 4px 6px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border: 1px solid rgba(255, 255, 255, 0);
+}
+
+h1 > .currentpage > a:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  text-decoration: none;
+}
+
+h1 span.problems a,
+h1 span.problems { color: #fff; }
+
+#header .comparison, #header .categories {
+  float: right;
+  margin-top: 9px;
+}
+
+/* Main */
+#main {
+  width: 95%;
+  margin: 0 auto;
+}
+
+.contentpusher {
+  clear: both;
+}
+
+/* Navigation */
+#nav {
+  float: left;
+  width: 200px;
+  padding: 10px 0;
+  -moz-box-shadow: inset -4px 0px 10px -7px #656565;
+  -webkit-box-shadow: inset -4px 0px 10px -7px #656565;
+  -o-box-shadow: inset -4px 0px 10px -7px #656565;
+  box-shadow: inset -4px 0px 10px -7px #656565;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=10);
+}
+
+#nav > h2 {
+  padding: 6px 0;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.05);
+  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
+  font-weight: normal;
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+#nav ul li {
+  list-style-type: none;
+  margin: 0;
+  padding: 2px 13px 2px 0;
+  text-align: right;
+  -webkit-transition-duration: 200ms;
+  -moz-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  transition-duration: 200ms;
+  letter-spacing: -0.5px;
+}
+
+#nav ul li:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+#nav ul {
+  margin: 0.2em 0 0.8em 0;
+  padding: 0;
+}
+
+.navigationjump {
+  display: none;
+}
+
+/* Content */
+#content {
+  margin-left: 200px;
+  padding: 1em;
+}
+
+#content li { 
+  margin-left: -20px;
+}
+
+#content > ul:first-of-type { 
+  margin-left: 2em;
+} 
+
+.comparison #content {
+  margin-left: 0;
+}
+
+#content h2 {
+  display: none;
+}
+
+#content h3 {
+  font-size: 1.2em;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  text-decoration: none;
+  letter-spacing: -0.3px;
+}
+
+ul.groupview li.last {
+  margin-bottom: 1em;
+}
+
+/* Content: comparison */
+td { 
+  vertical-align: top;
+}
+.node {
+  width: 500px;
+}
+
+/* Content: service view */
+#legend {
+  margin: 2px;
+  border-collapse: collapse;
+}
+
+#legend tr, #legend td {
+  padding: 3px 2px 3px 2px;
+  margin: 1px;
+}
+
+#legend th {
+  border-bottom: 1px solid #999999;
+}
+
+#legend .oddrow {
+  background-color: #f8f8f8;
+}
+
+#legend .oddrow td {
+  border-bottom: 1px solid #d8d8d8;
+}
+
+#legend .evenrow {
+  background-color: #fdfdfd;
+}
+
+#legend .evenrow td {
+  border-bottom: 1px solid #d8d8d8;
+}
+
+#legend .lastrow td {
+  border-bottom: 0px solid transparent !important;
+}
+
+#legend .field, #legend .internal {
+  width: 20em;
+  text-align: left;
+}
+
+#legend .type {
+  width: 7em;
+  text-align: center;
+}
+
+#legend .warn, #legend .crit {
+  width: 5em;
+  text-align: center;
+}
+
+
+
+/* Footer */
+#footer {
+  width: 100%;
+  margin-top: 15px;
+  padding: 5px 5%;
+  clear: both;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+#footer p.navigation {
+  margin: 0;
+  text-align: right;
+}
+
+#footer p.tagline {
+  color: #aaa;
+  margin: 0;
+  font-size: 80%;
+  text-align: right;
+}
+
+.categoryview .node {
+  display: inline-block;
+}