fnordmetric.css in fnordmetric-0.5.0

- old
+ new

@@ -1,23 +1,34 @@
 body, html{ height:100%; padding:0px;}
-body{ background:#fff; color:#333; margin:0; padding:0; overflow-y:scroll; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
+body{ background:#3b3e45; color:#333; margin:0; padding:0; overflow-y:scroll; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
-#wrap{ margin:0 40px; }
+.topbar{ height:43px; background:#24272c; display:none; }
 
-#tabs{ width:200px; position:fixed; height:100%; margin-top:70px; }
-#tabs ul{ list-style-type:none; padding:0; margin:0; }
-#tabs ul li{ height:34px; line-height:35px; border-bottom:1px dotted #ececec; cursor:pointer; color:#666; font-size:13px; }
+#wrap{ margin:0 20px; }
+
+#tabs{ width:150px; position:fixed; height:100%; margin-top:70px; }
+#tabs ul{ list-style-type:none; padding:0; margin:0; width:156px;}
+#tabs ul li{ height:34px; line-height:35px; cursor:pointer; color:#ccc; font-size:13px; border-radius:3px; margin-bottom:5px; }
 #tabs ul li:after{ content:'›'; display:block; float:right; margin-right:15px; color:#ccc; font-size:16px; line-height:35px; }
 #tabs ul li .picto{ margin-top:10px; margin-right:7px; }
-#tabs ul li:hover, #tabs ul li:hover:after{ color:#000; }
+#tabs ul li:hover, #tabs ul li:hover:after{ color:#fff; }
 #tabs ul li:hover .picto{ opacity:1; }
 
 .picto{ display:block; height:14px; width:14px; float:left; background:url('/fnordmetric/sprite.png') no-repeat 14px 14px; opacity:0.7; }
 .picto.piechart{ background-position:-42px -173px; width:9px; margin-right:5px; }
 
-#viewport{ min-height:800px; float:left; margin-left:220px; padding-top:20px; border-right:1px solid #e0e0e0; border-left:1px solid #e0e0e0; }
+#viewport{ float:left; margin-left:150px; margin-top:30px; border-radius:3px; min-width:790px; }
+#viewport .viewport_inner{ margin:6px; background:#fff; min-height:1200px; border-radius:2px; }
 
+#viewport, #tabs ul li:hover, #tabs ul li.active{ background:#24272c; box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.4); }
+
+.widget{ min-height:100px; border-right:1px solid #ececec; float:left; }
+.widget.full_width{ border-right:none; }
+.widget .inner{ margin:20px; }
+.widget .headbar{ margin-bottom:30px; }
+
+/*
 .headbar{ height:36px; background:#f2f2f2; border-bottom:1px solid #e2e2e2; }
 .headbar h2{ margin:8px; line-height:21px; float:left; height:20px; font-size:14px; }
 .headbar .datepicker{ background:#fff; border:1px solid #999; height:20px; padding:0 7px; float:right; margin:8px -1px; min-width:100px; font-size:11px; font-style:italic; }
 .headbar .button.mr{ margin-right:16px;  }
 
@@ -40,14 +51,70 @@
   vertical-align:top;
   white-space:nowrap;
 }
 
 .headbar .button:hover, .headbar.button.active{background:#ddd;border-bottom-color:#999;-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .05)}
-
-.numbers_container, .number{ float:left; border-right:1px solid #ececec;}
+*/
+.numbers_container, .number{ float:left; border-right:1px solid #ececec; }
 .number{ margin-left:12px; padding-right:20px; margin-right:10px; }
 .number .value{ color:#333; font-size:30px; display:block; margin-bottom:5px; }
 .number .desc{ color:#999; font-size:12px; }
 .number:last-child{ border-right:none; }
 .numbers_container{ padding-right:0px; width:33.2%; }
 
 .numbers_container .title{ padding:4px 10px 1px 10px; color:#333; font-size:13px; display:block; background:#f2f2f2; border-bottom:1px solid #e2e2e2; margin-bottom:15px; }
+
+
+.headbar {
+background-color: #F4F4F4;
+background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e9e9e9));
+background-image: -webkit-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: -moz-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: -ms-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: -o-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: linear-gradient(top, #f4f4f4, #e9e9e9);
+filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f4f4f4', EndColorStr='#e9e9e9');
+padding: 0 15px;
+border-bottom: 1px solid #C9C9C9;
+border-top: 1px solid #F9F9F9;
+height: 28px;
+font-size:13px;
+line-height:29px;
+text-shadow: 1px 0px 2px rgba(255, 255, 255, 1);
+-moz-text-shadow: 1px 0px 2px rgba(255,255,255,1);
+-webkit-text-shadow: 1px 0px 2px rgba(255,255,255,1);
+}
+
+
+ul.session_list{ list-style-type:none; margin:0; padding:9px 16px 0 11px; }
+ul.session_list li{ color:#0A0A0A; margin-bottom:10px; height:18px; overflow:hidden; line-height:18px; padding:4px; }
+ul.session_list li:hover{ background:#eee; cursor:pointer; }
+ul.session_list li .picture{ height:18px; width:18px; float:left; background:#333; overflow:hidden; }
+ul.session_list li .name{ float:left; width:120px; overflow:hidden; margin-left:10px; font-size:12px; }
+ul.session_list li .time{ float:right; width:40px; overflow:hidden; text-align:right; font-size:10px; }
+
+.sessions_feed{ min-width:300px; min-height:100px; float:left; }
+.sessions_feed ul.feed_inner{ margin:5px 15px; min-height:100px; padding:0px; }
+.sessions_feed ul.feed_inner li{ list-style-type:none; border-bottom:1px solid #e2e2e2; min-height:54px; }
+.sessions_feed ul.feed_inner li .message{ font-size:12px; line-height:19px; padding-top:9px; display:block; }
+.sessions_feed ul.feed_inner li .properties{ margin-left:50px; font-size:10px; display:block; color:#555; }
+.sessions_feed ul.feed_inner li .time{ font-size:10px; line-height:20px; padding-top:19px; padding-right:10px; display:block; color:#999; float:right; font-style:italic; }
+.sessions_feed ul.feed_inner li .picture{ height:40px; overflow:hidden; width:40px; float:left; background:#333; margin:7px 10px 0 0;  }
+.sessions_sidebar{ min-height:1200px; float:right; width:250px; border-left:1px solid #C7C9CC; }
+.events_sidebar{ min-height:1200px; float:left; width:200px; border-right:1px solid #C7C9CC; }
+
+ul.event_type_list{ margin:10px; padding:0; }
+ul.event_type_list li{ list-style-type:none; color:#0A0A0A; margin-bottom:8px; height:18px; overflow:hidden; line-height:18px; padding:4px; }
+ul.event_type_list li input{ margin-right:7px; }
+ul.event_type_list li:hover{ background:#eee; cursor:pointer; }
+ul.event_type_list li .history{ float:right; color:#999; font-size:10px; }
+ul.event_type_list li .history:hover{ color:#333; text-decoration:underline; }
+
+.clearfix:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+ 