custom.css in sequenceserver-1.0.0.pre.1

- old
+ new

@@ -1,98 +1,239 @@
-html, body{
-  height: 100%;
-}
+/**********************
+ * Override Bootstrap *
+ **********************/
 
-pre {
-  font-family: Monospace;
+/**
+ * For scrollspy, etc.
+ */
+body {
+  font-size: 13px;
+  position: relative;
 }
 
-br.large {
-  line-height: 28px;
+/**
+ * No underlines on links, ever
+ */
+a:hover, .btn-link:hover {
+  text-decoration: none;
 }
 
-.control-group {
+/**
+ * Use normal font weight for labels and indicate they are clickable by setting
+ * `cursor: pointer`.
+ */
+label {
+  cursor: pointer;
   margin-bottom: 0px;
+  font-weight: normal;
 }
 
-.nojs-error {
-  margin-top: 10px;
-  padding: 10px;
-  color: white;
-  background-color: red;
+/**
+ * Most of the times we want code to wrap to next line.
+ */
+code {
+  white-space: normal;
+  word-wrap: break-word;
 }
 
-.offset-left {
-  margin-left: 20px;
+/**
+ * Without this .disable'd elements hardly look disabled.
+ */
+.disabled {
+  color: #ccc;
 }
+a.disabled:hover {
+  color: #ccc;
+  cursor: not-allowed;
+}
 
-.offset-right {
-  margin-right: 20px;
+/**
+ * Increase font size, add border, make place for subtext to app name.
+ */
+.navbar {
+  border-radius: 0px;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 35px;
 }
+.navbar-brand {
+  height: auto;
+  padding: 20px 15px;
+  font-size: 32px;
+  font-family: "Roboto";
+  color: rgb(51, 51, 51);
+}
+.navbar-brand > small {
+  font-size: 50%;
+}
 
-.box {
-  background: #D5E1DD;
-  border-radius: 6px;
-  -moz-border-radius: 6px;
+/**
+ * Take out margin from .page-header and use table layout with first cell
+ * taking up all available space left by its siblings.
+ *
+ * Useful for displaying small, extra bit of information in the page
+ * header alongside title.
+ */
+.page-header {
+  display: table;
+  margin: 0px;
+  width: 100%;
+  border-color: #ddd;
+  padding-bottom: 5px;
 }
+.page-header > * {
+  display: table-cell;
+}
+.page-header > *:first-child {
+  width: 100%;
+}
 
-fieldset legend {
-  padding-left: 2%;
-  margin-bottom: 0px;
-  font-size: 16px;
+.page-content {
+  padding: 5px 0px 0px 5px;
+}
+
+.panel {
+  border: none;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}
+.panel .panel-heading {
+  color: #428BCE;
+  padding: 10px 1px;
+  font-family: "Roboto";
+  background-color: inherit;
+}
+
+/**
+ * Take padding-right out of .control-label and keep padding of .input-group.
+ * Works better when browser is resized to smaller width.
+ */
+.control-label[class*="col-"] {
+ padding-right: 0;
+}
+.input-group[class*="col-"] {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+/**
+ * Take our border from each row and apply only to table header.
+ */
+.table {
+  margin-bottom: 0;
+}
+.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td,
+.table>tbody>tr>td, .table>tfoot>tr>td {
+  border-top: none;
+  padding-left: 0px;
+  font-weight: normal;
+}
+.table>thead>tr>th {
+  border-bottom: 1px solid #ddd;
+}
+
+
+/********************
+ * Extend Bootstrap *
+ ********************/
+
+/**
+ * Use monospace font.
+ */
+.text-monospace {
+  font-family: monospace;
+}
+
+/**
+ * Make text bold.
+ */
+.text-bold {
   font-weight: bold;
-  border: 0px;
 }
 
-body {
-  background-color: #2B3E42;
+/**
+ * Set cursor: pointer on the given element.
+ */
+.cursor-pointer {
+  cursor: pointer;
 }
 
-.page {
-  border-radius: 6px 6px 6px 6px;
-  margin: 50px 0px;
+/**
+ * Do not wrap text or show horizontal scrollbar if text overflows the width of
+ * the element. Show ellipsis instead.
+ */
+.nowrap-ellipsis {
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-#banner {
-  background: #EBCD7B;
-  padding: 2%;
-  border-radius: 6px 6px 0px 0px;
-  text-align: center;
+/**
+ * Helpers to override :hover and .active on .nav elements.
+ */
+.nav.hover-reset>li>a:hover {
+  background-color: inherit;
 }
+.nav.active-bold>li.active>a {
+  font-weight: bold;
+}
 
-#blast {
-  background-color: white;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  margin: 0px;
+/**
+ * Use with .label class to use the foreground color defined by parent element.
+ */
+.label-reset {
+  color: inherit;
+  line-height: inherit;
 }
 
-.detached-top {
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+/**
+ * Set padding: 10px and 15px on li.
+ */
+.list-padded li {
+  padding: 10px 15px;
 }
 
-.detached-bottom {
-  border-radius: 0px 0px 6px 6px;
+
+/***************************
+ * SequenceServer specific *
+ ***************************/
+.nojs-error {
+  margin-top: 10px;
+  padding: 10px;
+  color: white;
+  background-color: red;
 }
 
-#sequence {
-  height: 198px;
-  width: 890px;
-  display: block;
-  margin: 0 auto;
+.dnd-errors {
+  color: red;
+  font-size: 18px;
 }
 
+.sequence-controls {
+  position: absolute;
+  top: 4px;
+  right: 19px;
+}
+
+.biojs-vis-sequence pre {
+  margin: 0 0;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  background-color: inherit;
+}
+
 .notifications {
-  height: 0px;
+  height: 32px;
   position: relative;
-  top: -12px;
+  top: -32px;
 }
 
 .notification {
-  margin: 0 auto;
-  z-index: 1050;
+  height: 32px !important;
+}
+
+.notification .alert-info, .notification .alert-danger {
   border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
@@ -102,50 +243,44 @@
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-align: center;
   padding: 6px 12px 6px 12px;
 }
 
-#sequence-type {
-  font-style: italic;
+.databases-container {
+  margin-top: -15px;
 }
 
-#nucleotide-sequence-notification, #protein-sequence-notification {
-  width: 250px;
+.databases-container .btn {
+  text-align: left;
+  white-space: normal;
 }
 
-#mixed-sequence-notification {
-  width: 740px;
+.databases .checkbox {
+  padding-left: 5px;
 }
 
-.databases {
-  padding-bottom: 10px;
+.databases label {
+  padding-left: 0px;
 }
 
-span.highlight {
-  font-weight: bold;
+#blast > .form-group:last-child {
+  margin-top: -5px;
 }
 
-.advanced label {
-  display: inline-block;
-  font-size: 16px;
-  font-weight: bold;
-  padding-left: 2%;
+#help pre:hover {
+  background-color: #FFC;
 }
 
-.advanced input {
-  width: 440px;
-  margin: 1% 1%;
+label[for="advanced"] {
+  font-family: "Roboto";
+  font-size: 16px;
 }
 
-.advanced span {
-  cursor: pointer;
+#methods{
+  font-family: "Roboto";
 }
 
-.hover-focus {
-  background-color: #FFC;
-}
-
 #method, #methods li {
   text-transform: uppercase;
 }
 
 #methods li {
@@ -162,71 +297,177 @@
 
 .dropdown-menu li:last-child {
   border-bottom: 0px;
 }
 
-#methods > button {
-  height: 38px;
+#result {
+  margin-top: 45px;
 }
 
-.results {
-  background-color: #2B3E42;
-  padding-top: 20px;
-  padding-bottom: 20px;
+h1,h2,h3,h4,h5,h6,.page-header {
+  font-family: "Roboto";
+  color: rgb(51, 51, 51);
 }
 
-#result {
-  padding: 20px;
-  background-color: white;
-  border-radius: 6px;
-  -moz-border-radius: 6px;
+.main {
+  border-right: 1px solid #ddd;
 }
 
-.resultn {
-  background-color: #dfefe6;
-  margin: 18px 0px 18px 0px;
-  border-radius: 6px;
-  -moz-border-radius: 6px;
-  padding: 3%;
-  border: 1px solid transparent;
+.sidebar > .page-header > h4 {
+  padding: 8px 0px 0px 8px;
 }
 
-div.focussed {
-  border: 1px solid black;
+.sidebar.affix {
+  top: 0px;
 }
 
-#underbar {
-  background: #EBCD7B;
-  padding: 1%;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
+.index {
+  max-height: 416px; /* will accomodate 10 elements. IE 7 and above only. */
+  overflow-y: auto;
+}
+
+/* Result per query. */
+.resultn {
+  margin-bottom: 50px;
+}
+
+.graphical-overview {
+  font-size: 12px;
   text-align: center;
 }
+svg:not(:root) {
+  overflow: visible;
+}
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #f00;
+    stroke-width: 2px;
+    shape-rendering: crispEdges;
+}
+.axis path {
+  stroke-width: 3px;
+}
 
-#spinner {
-  color: gray;
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-  overflow: hidden;
+.tabular-view {
+  margin-bottom: 14px;
 }
 
-#spinner > div {
-  height: 200px;
+.hitn {
+  padding-top: 14px;
+  margin-top: 4px;
 }
+.hitn h4 {
+  cursor: pointer;
+}
+.hitn h4 span {
+  cursor: text;
+}
+.hitn > p {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 
-#social p {
-  font-size: 14px;
+.hsps {
+  margin-top: 14px;
 }
+.hsp-stats>thead>tr>th {
+  border-bottom: none;
+  padding: 0px;
+}
+.hsp-stats>tbody>tr>td {
+  padding: 0px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #ddd;
+}
 
-#social .buttons {
-  width: 268px;
-  margin: 0px auto;
+.alignment {
+  margin-top: 8px;
+  white-space: pre;
+  font-family: monospace;
+  line-height: 12px;
+  letter-spacing: 1px;
 }
 
-.button-container {
-  width: 74px;
-  height: 32px;
-  float: left;
-  margin-right: 20px;
+.hit-links {
+  padding: 14px 0;
+  letter-spacing: 1px;
+}
+
+.footer a:first-child {
+  vertical-align: super;
+}
+
+.dnd-overlay {
+  position: absolute;
+  top: 51px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+.dnd-overlay * {
+  pointer-events: none;
+}
+
+.dnd-overlay-container {
+  padding-top: 72px;
+}
+
+.dnd-overlay-container p {
+  font-size: 48px;
+}
+
+/* input form */
+.col-md-6 .panel-heading h4 {
+  margin: 0px;
+}
+
+.list-group.databases {
+  padding: 0px;
+}
+
+.list-group.databases .list-group-item {
+  border: none;
+  padding: 1px 0px;
+}
+
+.list-group.databases .list-group-item input {
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+}
+
+.report-statistics {
+  white-space: pre;
+  font-family: monospace;
+}
+
+.spinner {
+  width: 100%;
   text-align: center;
+  padding-bottom: 30px;
+}
+
+.glow {
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: box-shadow;
+  transition-property: box-shadow;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.pos-marker {
+  display: none;
 }