Improved minor visuals and detail card layout

mohamedmansour · Apr 8, 2012 · 400501c · 400501c
1 parent 17c006c
commit 400501c
Showing 1 changed file with 29 additions and 14 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -274,16 +274,18 @@ body, html {
   width: 10px;
   height: 10px;
   display: block;
-  bottom: 4px;
-  left: 2px;
+  bottom: 3px;
+  left: 0px;
   background-color: #ca333a;
+  font-family: Verdana, Arial, sans-serif;
   font-size: 8px;
   color: #eee;
   text-align: center;
   font-weight: bold;
-  opacity: 0.75;
+  opacity: 1;
   cursor: pointer;
-  border-top-right-radius: 5px;
+  box-shadow:0 0 4px rgba(0,0,0,0.2);
+  border:1px solid #a00;
 }
 .in_my_circle img {
   border: 2px solid transparent;
@@ -293,7 +295,7 @@ body, html {
   border: 2px solid transparent;
 }
 .in_my_circle:hover span {
-  opacity: 0.8;
+  opacity: 1;
   background-color: #fff;
   color: #444;
 }
@@ -363,27 +365,40 @@ body, html {
 
 #hangout-detail-container ul  li {
   float: left;
-  width: 285px;
+  width: 276px;
   list-style-type: none;
-  height: 64px;
-  margin-bottom: 5px;
+  height: 68px;
   overflow: hidden;
+  margin:0 8px 8px 0;
+}
+
+#hangout-detail-container ul li:hover {
+  background:#f1f1f1;
 }
 
 .detail-card-header {
   height: 50px;
-  line-height: 50px;
-  margin: 0 5px;
-  font-size: 1.2em;
+  line-height: 3.5em;
+  margin: 0 2px 10px;
+  padding: 0 10px;
+  font-size:1.2em;
+  border-bottom:1px solid #ccc;
+  color:#666;
 }
+.detail-card-header .clickable { position:absolute; right:0; top:12px; }
 
 .participant-card-image {
-  float: left;
+  float:left;
+  outline:3px solid #ccc;
+  margin:0 10px 10px 0;
+  width:64px; height:64px;
+  overflow:hidden;
 }
 
 .participant-card-detail {
-  margin-left: 70px;
-  font-size: 0.9em;
+  float:left;
+  font-size: 0.85em;
+  width:200px;
 }
 
 .map_feature_control {