Improved speech bubble and name length
authorGabriel Pérez-Cerezo <gabriel@gpcf.eu>
Tue, 11 Oct 2016 20:38:03 +0000 (22:38 +0200)
committerGabriel Pérez-Cerezo <gabriel@gpcf.eu>
Tue, 11 Oct 2016 20:38:03 +0000 (22:38 +0200)
static/gitweb.css
static/gitweb.scss

index 52a8b00..2ee5fe8 100644 (file)
@@ -8,7 +8,8 @@ body {
   border-radius: 7px;
   margin: 10px;
   background-color: #ffffff;
-  color: #000000; }
+  color: #000000;
+  box-shadow: 1px 1px 5px #999; }
 
 html {
   background-color: #e7aaff; }
@@ -664,25 +665,60 @@ div.heads a::before {
   font-weight: normal;
   padding: 6px; }
 
+/* .verif:hover .commiter{ */
+/*     color: #fff; */
+/*     background: $ver_color; */
+/*     border-radius: 5px; */
+/*     display: block; */
+/*     position: absolute; */
+/*     margin-top: -1em; */
+/*     margin-left: 9px; */
+/* } */
+/* .verif:hover .commiter::after { */
+/*     background-color: #F2F2F2; */
+/*     box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); */
+/*     content: "\00a0"; */
+/*     display: block; */
+/*     height: 20px; */
+/*     left: -10px; */
+/*     position: relative; */
+/*     top: 20px; */
+/*     transform:             rotate( 45deg ); */
+/*     width:  20px; */
+/* } */
 .verif:hover .commiter {
-  color: #fff;
-  background: #0a0;
+  background-color: #0a0;
   border-radius: 5px;
-  display: block;
+  border: 1px solid #bbb;
+  box-shadow: 1px 1px 5px #999;
+  display: inline-block;
+  padding: 10px 18px;
+  margin-left: 7px;
+  margin-right: 17px;
   position: absolute;
-  margin-top: -1em;
-  padding: 1em;
-  margin-left: 9px; }
+  vertical-align: top;
+  margin-top: -1.3em; }
 
-.verif:hover .commiter::before {
-  content: "";
+.verif:hover .tail {
   position: absolute;
-  top: 10px;
-  right: 100%;
-  border-right: 10px solid black;
-  border-right-color: #0a0;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent; }
+  top: 12px;
+  left: -17px;
+  height: 17px;
+  width: 17px;
+  overflow: hidden; }
+
+.verif:hover .tail::before {
+  border: 1px solid #bbb;
+  background-color: #0a0;
+  box-shadow: 1px 1px 5px #999;
+  content: "\00a0";
+  display: block;
+  position: absolute;
+  top: 0px;
+  left: 12px;
+  height: 12px;
+  width: 12px;
+  transform: skew(-45deg); }
 
 .verif .commiter {
   display: none;
index eecf770..24f2484 100644 (file)
@@ -3,6 +3,8 @@ $ver_color: #0a0;
 $theme_text_color: #550077;
 $theme_sec_color: #ddddff;
 $body_bg: #ffffff;
+$shadow_radius : 5px;
+$shadow : 1px 1px $shadow_radius #999;
 
 body {
        font-family: sans-serif; 
@@ -13,6 +15,7 @@ body {
        margin: 10px;
        background-color: $body_bg;
        color: #000000;
+       box-shadow: $shadow;
 }
 
 html {
@@ -804,26 +807,68 @@ div.heads a::before {
     font-weight: normal;
     padding: 6px;
 }
-.verif:hover .commiter{
-    color: #fff;
-    background: $ver_color;
-    border-radius: 5px;
-    display: block;
+/* .verif:hover .commiter{ */
+/*     color: #fff; */
+/*     background: $ver_color; */
+/*     border-radius: 5px; */
+/*     display: block; */
+/*     position: absolute; */
+/*     margin-top: -1em; */
+
+/*     margin-left: 9px; */
+
+/* } */
+/* .verif:hover .commiter::after { */
+/*     background-color: #F2F2F2; */
+/*     box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); */
+/*     content: "\00a0"; */
+/*     display: block; */
+/*     height: 20px; */
+/*     left: -10px; */
+/*     position: relative; */
+/*     top: 20px; */
+/*     transform:             rotate( 45deg ); */
+/*     width:  20px; */
+/* } */
+
+$nose_size : 12px;
+$border :  1px solid #bbb;
+
+.verif:hover .commiter {
+    background-color: $ver_color;
+    border-radius:    5px;
+    border:           $border;
+    box-shadow:       $shadow;
+    display:          inline-block;
+    padding:          10px 18px;
+    margin-left:     ($shadow_radius + $nose_size - 10px);
+    margin-right:    ($shadow_radius + $nose_size);
+    position:         absolute;
+    vertical-align:   top;
+    margin-top: -1.3em;
+}
+
+.verif:hover .tail {
     position: absolute;
-    margin-top: -1em;
-    padding: 1em;
-    margin-left: 9px;
-
-}
-.verif:hover .commiter::before {
-    content: "";
-   position: absolute;
-   top: 10px;
-   right: 100%;
-   border-right: 10px solid black;
-   border-right-color: $ver_color; 
-   border-top: 10px solid transparent;
-   border-bottom: 10px solid transparent;
+    top:      $nose_size;
+    left:   -($shadow_radius + $nose_size);
+    height:  ($shadow_radius + $nose_size);
+    width:   ($shadow_radius + $nose_size);
+    overflow: hidden;
+}
+.verif:hover .tail::before {
+    border:            $border;
+    background-color:  $ver_color;
+    box-shadow:        $shadow;
+    content:           "\00a0";
+
+    display:           block;
+    position:          absolute;
+    top:               0px;
+    left:              $nose_size;
+    height:            $nose_size;
+    width:             $nose_size;
+    transform: skew( -45deg );
 }