Fix word wrapping for bridgelines by adding a custom scrollbar.

isislovecruft · Jan 22, 2015 · c542e05 · c542e05
1 parent d8b9815
commit c542e05
Showing 1 changed file with 38 additions and 3 deletions.
diff --git a/lib/bridgedb/templates/assets/css/custom.css b/lib/bridgedb/templates/assets/css/custom.css
@@ -112,12 +112,47 @@ div.bridge-lines {
     line-height: 175%;
     color: rgb(44, 62, 80);
     word-break: break-all;
-    word-wrap: break-word;
-    white-space: pre-wrap;
+    word-wrap: normal;
+    white-space: nowrap;
+    overflow-x: auto;
+    z-index: 1000;
     background-color: rgb(236, 240, 241);
-    border: 1px solid transparent;
+    border: 0px solid transparent;
     border-radius: 6px 6px 6px 6px;
+    border-color: #2C3E50;
     box-shadow: none;
+    box-sizing: border-box;
     -moz-box-sizing: border-box;
     cursor: copy;
 }
+
+div.bridge-lines.-webkit-scrollbar {
+    width: 9px;
+    height: 9px;
+}
+div.bridge-lines.-webkit-scrollbar-button.start.decrement {
+    display: block;
+    height: 0;
+    background-color: transparent;
+}
+div.bridge-lines.-webkit-scrollbar-button.end.increment {
+    display: block;
+    height: 0;
+    background-color: transparent;
+}
+div.bridge-lines.-webkit-scrollbar-track-piece {
+    background-color: #FAFAFA;
+    -webkit-border-radius: 0;
+    -webkit-border-bottom-right-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+}
+div.bridge-lines.-webkit-scrollbar-thumb.vertical {
+    height: 50px;
+    background-color: #999;
+    -webkit-border-radius: 6px;
+}
+div.bridge-lines.-webkit-scrollbar-thumb.horizontal{
+    width: 50px;
+    background-color: #999;
+    -webkit-border-radius: 6px;
+}