npm - gramene-search - Versions diffs - 1.7.7 → 1.7.9 - Mend

gramene-search 1.7.7 → 1.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/.parcel-cache/83e7562660f7cc15-BundleGraph +0 -0
package/.parcel-cache/d3a1b9507cb44047-AssetGraph +0 -0
package/.parcel-cache/data.mdb +0 -0
package/.parcel-cache/dc1da35000e13623-RequestGraph +0 -0
package/.parcel-cache/lock.mdb +0 -0
package/.parcel-cache/snapshot-dc1da35000e13623.txt +2 -2
package/dist/index.css +110 -20
package/dist/index.css.map +1 -1
package/package.json +1 -1
package/src/components/results/genes.css +53 -9
package/src/components/styles.css +64 -11
package/src/demo.js +12 -15
package/src/grapevine.html +1 -1
package/src/index.html +1 -0
package/src/maize.html +1 -1
package/src/rice.html +1 -0
package/src/sorghum.html +1 -0
package/src/static/gramene-dalliance/css/dalliance-scoped.css +2 -2
package/src/static/style.css +11 -1

package/.parcel-cache/83e7562660f7cc15-BundleGraph CHANGED Viewed

Binary file

package/.parcel-cache/d3a1b9507cb44047-AssetGraph CHANGED Viewed

Binary file

package/.parcel-cache/data.mdb CHANGED Viewed

Binary file

package/.parcel-cache/dc1da35000e13623-RequestGraph CHANGED Viewed

Binary file

package/.parcel-cache/lock.mdb CHANGED Viewed

Binary file

package/.parcel-cache/snapshot-dc1da35000e13623.txt CHANGED Viewed

@@ -1,2 +1,2 @@
-941360923
-1770054109633800000
+189930140
+1774984866173165000

package/dist/index.css CHANGED Viewed

@@ -1,19 +1,48 @@
-.gramene-sidebar {
-  background-color: #557b74;
-  width: 250px;
+.search-views-layout {
+  align-items: flex-start;
+  display: flex;
+}
+.search-views-content {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.gramene-sidebar, .sorghumbase-sidebar {
+  flex: 0 0 250px;
+  max-height: 100vh;
   padding-bottom: 8px;
   padding-left: 8px;
   padding-right: 8px;
-  position: fixed;
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+}
+.gramene-sidebar {
+  background-color: #557b74;
 }
 .sorghumbase-sidebar {
   background-color: #a03e34;
-  width: 250px;
-  padding-bottom: 8px;
-  padding-left: 8px;
-  padding-right: 8px;
-  position: fixed;
+}
+@media (width <= 767px) {
+  .search-views-layout {
+    flex-direction: column;
+  }
+  .gramene-sidebar, .sorghumbase-sidebar {
+    flex: none;
+    width: 100%;
+    max-height: none;
+    position: static;
+    overflow-y: visible;
+  }
+  .search-views-content {
+    width: 100%;
+  }
 }
 .gramene-auth-container, .sorghumbase-auth-container, .gramene-filter-container, .sorghumbase-filter-container {
@@ -27,7 +56,7 @@
   padding-bottom: 4px;
   padding-left: 4px;
   padding-right: 4px;
-  font-size: small;
+  font-size: .875rem;
 }
 .gramene-filter span:hover {
@@ -64,7 +93,7 @@
 .gramene-filter-menu li {
   cursor: pointer;
-  padding-left: 15px;
+  padding: 8px 8px 8px 15px;
   display: block;
 }
@@ -148,6 +177,24 @@
   border-color: #6c757d;
 }
+@media (width <= 767px) {
+  .gramene-view-container > div {
+    align-items: center;
+    min-height: 36px;
+    display: flex;
+  }
+  #gramene-suggestion button {
+    margin-bottom: 4px;
+    padding: .5rem .75rem;
+  }
+  #search-input {
+    min-height: 44px;
+    font-size: 1rem;
+  }
+}
 .visible-detail {
   border: 1px solid #557b74;
   padding: 6px 12px;
@@ -227,29 +274,50 @@
 }
 .gene-extras {
-  float: right;
   border: 1px dashed #00f;
 }
 .gene-panlink {
-  float: right;
+  flex-shrink: 0;
 }
 .gene-panlink img {
   vertical-align: top;
   width: auto;
+  max-width: 100%;
   height: 60px;
 }
 .suggestion-panlink img {
-  float: left;
   width: auto;
+  max-width: 100%;
   height: 60px;
 }
+@media (width <= 767px) {
+  .result-gene-summary {
+    flex-wrap: wrap;
+  }
+  .result-gene-title-body {
+    flex: 100%;
+  }
+  .model-ortholog, .closest-ortholog, .gene-summary-tair {
+    flex: 100%;
+    max-width: 100%;
+    margin-top: 8px;
+    margin-left: 0;
+  }
+  .gene-panlink img, .suggestion-panlink img {
+    height: 40px;
+  }
+}
 .gene-curation {
-  float: right;
   border: 1px solid gray;
+  flex-shrink: 0;
   margin-top: 20px;
 }
@@ -269,12 +337,31 @@
 }
 .gene-detail-tabs {
-  white-space: nowrap;
   flex-wrap: wrap;
-  width: 80em;
+  width: 100%;
+  display: flex;
+}
+.gene-detail-tabs > div {
+  box-sizing: border-box;
+  flex: 0 0 25%;
+  justify-content: center;
+  align-items: center;
+  width: 25%;
+  max-width: 25%;
+  min-height: 36px;
+  padding: 6px 4px;
   display: flex;
 }
+@media (width >= 992px) {
+  .gene-detail-tabs > div {
+    flex: 0 0 12.5%;
+    width: 12.5%;
+    max-width: 12.5%;
+  }
+}
 .gene-detail-tab-closed {
   color: #006400;
   cursor: pointer;
@@ -304,6 +391,7 @@
 .result-gene-summary {
   flex-flow: row;
   justify-content: flex-start;
+  align-items: flex-start;
   display: flex;
 }
@@ -314,14 +402,16 @@
 .result-gene-title-body {
   flex: auto;
-  width: 1036px;
+  width: 100%;
+  max-width: 1036px;
 }
 .model-ortholog, .closest-ortholog, .gene-summary-tair {
   cursor: pointer;
   border: 1px solid #ff8c00;
   flex: auto;
-  width: 500px;
+  width: 100%;
+  max-width: 500px;
   margin-top: 10px;
   margin-left: 1rem;
   padding: 0 1rem;
@@ -378,7 +468,7 @@
 }
 .rep-identity {
-  float: right;
+  margin-left: auto;
   padding-top: 5px;
   padding-right: 10px;
   font-style: italic;

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"ACAA;;;;;;;;;AAQA;;;;;;;;;AAQA;;;;;;AAoBA;;;;;;;;AAOA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;AAMA;;;;;AAIA;;;;AAIA;;;;;;AAKA;;;;;;AAKA;;;;AAIA;;;;;;;;;;;;AAaA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;;;AASA;;;;;AAIA;;;;;AAIA;;;;;;AAKA;;;;;AAIA;;;;;;AC/IA;;;;;AAIA;;;;;;;AAMA;;;;;AAIA;;;;;;;AAMA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;AAIA;;;;AAMA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;;;AAKA;;;;;;AAKA;;;;;;AAKA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;AAKA;;;;;AAMA;;;;;;AAMA;;;;AAGA;;;;;;AAKA;;;;;;AAKA;;;;;AAIA;;;;;AAIA;;;;;;;;;;;AAWA;;;;AAGA;;;;AAIA;;;;AAGA;;;;AAIA;;;;AAMA;;;;AAQA;;;;;;;;;;AAYA;;;;;AAIA;;;;;AAMA;;;;;AAKA;;;;;;;AAMA;;;;AAGA;;;;;;;AAMA;;;;;;;;;;;AAUA;;;;;;;AAMA;;;;;;AAOA;;;;;;AAOA;;;;;;AClQA;;;;AAIA;;;;;;;AAMA;;;;AASA;;;;;AAKA;;;;AAMA;;;;;AAKA;;;;AAGA;;;;AAGA;;;;AAIA;;;;AAGA;;;;AAKA;;;;AAGA;;;;;;;AAMA;;;;AAOA;;;;;AAMA;;;;AAMA;;;;AAIA;;;;AAGA;;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;;AAIA;;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAKA;;;;AAGA;;;;;;;;AAOA;;;;AAGA;;;;AAIA;;;;AAQA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAcA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAQA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;ACjjBA;;;;;AAMA;;;;AAGA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;AA0IA;;;;;AAKA;;;;;;;AAOA;;;;;;;;;;AAYA;;;;;AChMA;;;;AAEE;;;;;;;AAQF;;;;;;;;AAQA;;;;;;;;;;;AAUE;;;;;;AAMA;;;;;AAMF;;;;;;AC1BA;;;;AAYA;;;;;AAqBA;;;;;AAUA;;;;;;;AAYA;;;;;;ACxEA;;;;;;;;;;ACCA;;;;;;;;;AASA;;;;;;AAKA;;;;;;AAKA;;;;;;;AAMA;;;;;AAIA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;AAKA;;;;;;AAKA;;;;;;AAMA;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;;;;;AAUA;;;;;;;;;;;;;ACpGA;;;;;AAAA;;;;AAAA;;;;AAAA;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;AAAA;;;;ACAA;;;;AAGA","sources":["b17bddada667de42","src/components/styles.css","src/components/results/genes.css","node_modules/gramene-genetree-vis/src/styles/msa.less","node_modules/gramene-genetree-vis/src/styles/tree.less","node_modules/react-simple-tree-menu/src/sass/main.scss","src/components/results/details/tree-view.css","src/components/results/details/VEP.css","src/components/results/details/sequences.css","node_modules/gramene-search-vis/styles/main.less","src/components/results/expression.css"],"sourcesContent":["@import \"5abb1db407612521\";\n@import \"1caf78728b2f5137\";\n@import \"2166a150e9f31214\";\n@import \"938d6be3f57789df\";\n@import \"aa165d1be5d1c755\";\n@import \"996096824b9f7d5a\";\n@import \"41a1dcf3bc8b5377\";\n@import \"c52016833805a9f9\";\n@import \"6f643ac0480217ea\";\n@import \"c6576577b854e1eb\";\n",".gramene-sidebar {\n position: fixed;\n background-color: #557b74;\n padding-left: 8px;\n padding-right: 8px;\n padding-bottom: 8px;\n width: 250px;\n}\n.sorghumbase-sidebar {\n position: fixed;\n background-color: #a03e34;\n padding-left: 8px;\n padding-right: 8px;\n padding-bottom: 8px;\n width: 250px;\n}\n.gramene-auth-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.sorghumbase-auth-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.gramene-filter-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.sorghumbase-filter-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.gramene-filter {\n padding-left: 4px;\n padding-right: 4px;\n padding-bottom: 4px;\n background-color: white;\n font-size: small;\n}\n.gramene-filter span:hover {\n font-weight:bolder;\n}\n.gramene-filter-AND {\n background-color: #ffcd82;\n}\n.gramene-filter-OR {\n background-color: #c5eeb9;\n}\n.gramene-filter-NOT {\n border-left-color: #ff5354;\n border-left-style: inset;\n border-left-width: 4px;\n padding-left: 4px;\n}\n.gramene-filter-operation {\n text-align: center;\n font-style: italic;\n}\n.gramene-filter-marked {\n font-weight: bolder;\n /background-color: #feff96;/\n}\n.gramene-filter-menu ul {\n border-top-style: solid;\n border-top-width: 2px;\n padding-left: 0;\n}\n.gramene-filter-menu li {\n display: block;\n cursor: pointer;\n padding-left: 15px;\n}\n.gramene-filter-menu li:hover {\n background-color: #feff96;\n}\n\n.gramene-view-header {\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n justify-content: space-evenly;\n font-size: larger;\n font-weight: bold;\n background-color: #fff3a96e;\n border-top: solid;\n border-top-color: #557b74;\n color: #a03e34;\n}\n\n.gramene-view-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-right: 4px;\n padding-bottom: 4px;\n}\n.gramene-view {\n padding-left: 0px;\n padding-right: 10px;\n margin-bottom: 0;\n background-color: white;\n}\n.gramene-view-span-on {\n padding-left: 5px;\n cursor: pointer;\n vertical-align: text-bottom;\n color: #a03e34;\n}\n.gramene-view-span-off {\n padding-left: 5px;\n cursor: pointer;\n vertical-align: text-bottom;\n color: darkgray;\n}\n.gramene-view li {\n display: block;\n cursor: pointer;\n padding-left: 5px;\n border-left-style: inset;\n border-left-width: 8px;\n margin-bottom: 2px;\n}\n\n.gramene-view-on {\n border-left-color: #40a0ff;\n font-weight: bold;\n}\n.gramene-view-off {\n border-left-color: #ff6d68;\n color: grey;\n}\n.gramene-view-disabled {\n color: darkgray;\n border-left-color: #efefef;\n cursor: default!important;\n}\n#gramene-suggestion button {\n border-radius: .6rem;\n line-height: 1;\n}\n#gramene-suggestion button:focus {\n color: #fff;\n background-color: #6c757d;\n border-color: #6c757d;\n}\n\n",".visible-detail {\n border: 1px solid #557B74;\n padding: 6px 12px;\n}\n.detail {\n margin-right: auto;\n margin-left: auto;\n padding-left: 15px;\n padding-right: 15px;\n}\n.table {\n width: 100%;\n max-width: 100%;\n}\n.xrefs {\n border-collapse: collapse;\n border-spacing: 0;\n border-color: grey;\n table-layout: fixed;\n}\n.xref-name-col {\n width: 20%;\n}\n.xref-value-col {\n width: 80%;\n}\n.xref-80-col {\n width: 80%;\n}\n.xref-70-col {\n width: 70%;\n}\n.xref-10-col {\n width: 10%;\n}\n.xref-id-list {\n padding-left: 0;\n list-style: none;\n}\n.result-gene {\n padding: 0.2em;\n border: 5px solid white;\n}\n.result-gene:hover {\n border-color: antiquewhite;\n}\n.gene-title {\n /padding-top:0.5em;/\n}\n.gene-id {\n /white-space: nowrap;/\n color: black;\n}\n.gene-name {\n color: #557B74;\n margin-bottom: 0;\n}\n.gene-description {\n margin-bottom: 0;\n}\n.gene-species {\n white-space: nowrap;\n font-style: italic;\n font-size:small;\n font-weight: bold;\n}\n.gene-synonyms {\n font-size: small;\n}\n.gene-extras {\n float: right;\n border: dashed 1px blue;\n}\n.gene-panlink {\n float:right;\n}\n.gene-panlink img {\n height: 60px;\n width: auto;\n vertical-align: top;\n}\n.suggestion-panlink img {\n height: 60px;\n width: auto;\n float: left;\n}\n.gene-curation {\n float:right;\n margin-top: 20px;\n border: 1px solid grey;\n}\n.gene-curation span {\n width: 20px;\n display: inline-block;\n color: white;\n text-align: center;\n}\n.gene-curation .okay {\n background-color: #0c00f3;\n}\n.gene-curation .flagged {\n background-color: darkorange;\n}\n.gene-detail-tabs {\n display: flex;\n flex-wrap: wrap;\n white-space: nowrap;\n width: 80em;\n}\n.gene-detail-tab-closed {\n color: darkgreen;\n cursor: pointer;\n /background-color: lightgray;/\n}\n.gene-detail-tab-disabled {\n /color: white;/\n /background-color: lightgray;/\n color: lightgray;\n cursor: not-allowed;\n}\n.gene-detail-tab-empty {\n color: darkgreen;\n cursor: pointer;\n font-style: oblique;\n /background-color: lightgray;/\n}\n.gene-detail-tab-empty::before {\n content: \"Add \";\n}\n.gene-detail-tab-expanded {\n color: white;\n background-color: #557B74;\n cursor: pointer;\n}\n.result-gene-summary {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n}\n.result-gene-summary .species-name {\n white-space: nowrap;\n font-style: italic;\n}\n.result-gene-title-body {\n flex: 1 1 auto;\n width: 1036px;\n}\n.model-ortholog, .closest-ortholog, .gene-summary-tair {\n cursor: pointer;\n flex: 1 1 auto;\n width: 500px;\n font-size: smaller;\n margin-top: 10px;\n padding: 0 1rem;\n margin-left: 1rem;\n border: 1px solid darkorange;\n}\n\n.model-ortholog {\n border: 1px dotted darkorange;\n}\n.closest-ortholog {\n border: 1px dotted darkgreen;\n}\n\n.gene-summary-tair {\n border: 1px dotted darkblue;\n}\n.gene-summary-tair .rest {\n display: none;\n}\n\n.gene-summary-tair:hover .rest {\n display: inline;\n}\n.gene-summary-tair:focus .rest {\n display: inline;\n}\n.gene-summary-tair:hover .ellipsis {\n display: none;\n}\n.gene-summary-tair:focus .ellipsis {\n display: none;\n}\n\n/* this is the \"title\" of the closest ortholog box /\n.closest-ortholog::before,\n.model-ortholog::before,\n.gene-summary-tair::before {\n position: relative;\n float: right;\n margin-top: -12px;\n margin-right: 6px;\n border: dotted 1px;\n padding: 0 1rem;\n background: #fff;\n}\n\n.model-ortholog::before {\n content: \"Model Species Homolog\";\n color: orange;\n}\n.closest-ortholog::before {\n content: \"Closest Annotated Homolog\";\n color: darkgreen;\n}\n\n/ this is the \"title\" of the closest ortholog box /\n.gene-summary-tair::before {\n content: \"TAIR Curated Description\";\n color: darkblue;\n}\n\n.rep-identity {\n float: right;\n padding-right: 10px;\n padding-top: 5px;\n font-style: italic;\n}\n.rep-identity::after {\n content: \"% identity\";\n}\n.eFP::before {\n content: url(\"../../static/images/BAR-logo.png\");\n padding-right:5px;\n position: relative;\n top: 5px;\n}\n.eFP::after {\n content: 'New!';\n color: red;\n padding-left:2px;\n font-weight: bold;\n font-style: italic;\n font-size: x-small;\n line-height: normal;\n vertical-align: super;\n}\n.gxa::before {\n content: url(\"../../static/images/expression-atlas-logo.png\");\n padding-right:5px;\n position: relative;\n top: 5px;\n}\n.gene-search-pic-sugg {\n width: 100%;\n height: 200px;\n background: url(\"../../static/images/suggestions.png\");\n background-size: contain;\n background-repeat: no-repeat;\n}\n.gene-search-pic-results {\n width: 100%;\n height: 200px;\n background: url(\"../../static/images/results.png\");\n background-size: contain;\n background-repeat: no-repeat;\n}\n.gene-search-pic-genetree {\n width: 100%;\n height: 200px;\n background: url(\"../../static/images/genetree.png\");\n background-size: contain;\n background-repeat: no-repeat;\n}\n",".MSAlignments-wrapper {\n overflow-x: scroll;\n overflow-y: hidden;\n}\n.clustal {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.clustal .A,\n.clustal .I,\n.clustal .L,\n.clustal .M,\n.clustal .F,\n.clustal .W,\n.clustal .V {\n background-color: #80a0f0;\n}\n.clustal .R,\n.clustal .K {\n background-color: #f01505;\n color: #fcff89;\n}\n.clustal .N,\n.clustal .Q,\n.clustal .S,\n.clustal .T {\n background-color: #00ff00;\n}\n.clustal .D,\n.clustal .E {\n background-color: #c048c0;\n color: #fcff89;\n}\n.clustal .C {\n background-color: #f08080;\n}\n.clustal .G {\n background-color: #f09048;\n}\n.clustal .Y\n.clustal .H {\n background-color: #15a4a4;\n}\n.clustal .P {\n background-color: #ffff00;\n}\n.clustal .B,\n.clustal .X,\n.clustal .Z {\n background-color: #ffffff;\n}\n.clustal .gap {\n color: #ccc;\n}\n.zappo {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.zappo .A,\n.zappo .I,\n.zappo .L,\n.zappo .M,\n.zappo .V {\n background-color: #ffafaf;\n}\n.zappo .R,\n.zappo .H,\n.zappo .K {\n background-color: #6464ff;\n color: #fcff89;\n}\n.zappo .N,\n.zappo .Q,\n.zappo .S,\n.zappo .T {\n background-color: #00ff00;\n}\n.zappo .D,\n.zappo .E {\n background-color: #ff0000;\n}\n.zappo .C {\n background-color: #ffff00;\n}\n.zappo .G,\n.zappo .P {\n background-color: #ff00ff;\n color: #fcff89;\n}\n.zappo .F,\n.zappo .W,\n.zappo .Y {\n background-color: #ffc800;\n}\n.zappo .B,\n.zappo .X,\n.zappo .Z {\n background-color: #ffffff;\n}\n.zappo .gap {\n color: #ccc;\n}\n.taylor {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.taylor .A {\n background-color: #ccff00;\n}\n.taylor .R {\n background-color: #0000ff;\n color: #fcff89;\n}\n.taylor .N {\n background-color: #cc00ff;\n color: #fcff89;\n}\n.taylor .D {\n background-color: #ff0000;\n color: #fcff89;\n}\n.taylor .C {\n background-color: #ffff00;\n}\n.taylor .Q {\n background-color: #ff00cc;\n}\n.taylor .E {\n background-color: #ff0066;\n color: #fcff89;\n}\n.taylor .G {\n background-color: #ff9900;\n}\n.taylor .H {\n background-color: #0066ff;\n color: #fcff89;\n}\n.taylor .I {\n background-color: #66ff00;\n}\n.taylor .L {\n background-color: #33ff00;\n}\n.taylor .K {\n background-color: #6600ff;\n color: #fcff89;\n}\n.taylor .M {\n background-color: #00ff00;\n}\n.taylor .F {\n background-color: #00ff66;\n}\n.taylor .P {\n background-color: #ffcc00;\n}\n.taylor .S {\n background-color: #ff3300;\n color: #fcff89;\n}\n.taylor .T {\n background-color: #ff6600;\n}\n.taylor .W {\n background-color: #00ccff;\n}\n.taylor .Y {\n background-color: #00ffcc;\n}\n.taylor .V {\n background-color: #99ff00;\n}\n.taylor .B,\n.taylor .X,\n.taylor .Z {\n background-color: #ffffff;\n}\n.taylor .gap {\n color: #ccc;\n}\n.hydrophobicity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n color: #fcff89;\n}\n.hydrophobicity .A {\n background-color: #ad0052;\n}\n.hydrophobicity .R,\n.hydrophobicity .K {\n background-color: #0000ff;\n}\n.hydrophobicity .N,\n.hydrophobicity .D,\n.hydrophobicity .Q,\n.hydrophobicity .E,\n.hydrophobicity .B,\n.hydrophobicity .Z {\n background-color: #0c00f3;\n}\n.hydrophobicity .C {\n background-color: #c2003d;\n}\n.hydrophobicity .G {\n background-color: #6a0095;\n}\n.hydrophobicity .H {\n background-color: #1500ea;\n}\n.hydrophobicity .L {\n background-color: #ea0015;\n}\n.hydrophobicity .M {\n background-color: #b0004f;\n}\n.hydrophobicity .F {\n background-color: #cb0034;\n}\n.hydrophobicity .P {\n background-color: #4600b9;\n}\n.hydrophobicity .S {\n background-color: #5e00a1;\n}\n.hydrophobicity .T {\n background-color: #61009e;\n}\n.hydrophobicity .W {\n background-color: #5b00a4;\n}\n.hydrophobicity .Y {\n background-color: #4f00b0;\n}\n.hydrophobicity .V {\n background-color: #f60009;\n}\n.hydrophobicity .X {\n background-color: #680097;\n}\n.hydrophobicity .gap {\n color: #ccc;\n}\n.helix_propensity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.helix_propensity .A {\n background-color: #e718e7;\n}\n.helix_propensity .R {\n background-color: #6f906f;\n}\n.helix_propensity .N {\n background-color: #1be41b;\n}\n.helix_propensity .D {\n background-color: #778877;\n}\n.helix_propensity .C {\n background-color: #23dc23;\n}\n.helix_propensity .Q {\n background-color: #926d92;\n}\n.helix_propensity .E {\n background-color: #ff00ff;\n}\n.helix_propensity .G {\n background-color: #00ff00;\n}\n.helix_propensity .H {\n background-color: #758a75;\n}\n.helix_propensity .I {\n background-color: #8a758a;\n}\n.helix_propensity .L {\n background-color: #ae51ae;\n}\n.helix_propensity .K {\n background-color: #a05fa0;\n}\n.helix_propensity .M {\n background-color: #ef10ef;\n}\n.helix_propensity .F {\n background-color: #986798;\n}\n.helix_propensity .P {\n background-color: #00ff00;\n}\n.helix_propensity .S {\n background-color: #36c936;\n}\n.helix_propensity .T {\n background-color: #47b847;\n}\n.helix_propensity .W {\n background-color: #8a758a;\n}\n.helix_propensity .Y {\n background-color: #21de21;\n}\n.helix_propensity .V {\n background-color: #857a85;\n}\n.helix_propensity .B {\n background-color: #49b649;\n}\n.helix_propensity .X {\n background-color: #758a75;\n}\n.helix_propensity .Z {\n background-color: #c936c9;\n}\n.helix_propensity .gap {\n color: #ccc;\n}\n.strand_propensity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.strand_propensity .A {\n background-color: #5858a7;\n}\n.strand_propensity .R {\n background-color: #6b6b94;\n}\n.strand_propensity .N {\n background-color: #64649b;\n}\n.strand_propensity .D {\n background-color: #2121de;\n}\n.strand_propensity .C {\n background-color: #9d9d62;\n}\n.strand_propensity .Q {\n background-color: #8c8c73;\n}\n.strand_propensity .E {\n background-color: #0000ff;\n}\n.strand_propensity .G {\n background-color: #4949b6;\n}\n.strand_propensity .H {\n background-color: #60609f;\n}\n.strand_propensity .I {\n background-color: #ecec13;\n}\n.strand_propensity .L {\n background-color: #b2b24d;\n}\n.strand_propensity .K {\n background-color: #4747b8;\n}\n.strand_propensity .M {\n background-color: #82827d;\n}\n.strand_propensity .F {\n background-color: #c2c23d;\n}\n.strand_propensity .P {\n background-color: #2323dc;\n}\n.strand_propensity .S {\n background-color: #4949b6;\n}\n.strand_propensity .T {\n background-color: #9d9d62;\n}\n.strand_propensity .W {\n background-color: #c0c03f;\n}\n.strand_propensity .Y {\n background-color: #d3d32c;\n}\n.strand_propensity .V {\n background-color: #ffff00;\n}\n.strand_propensity .B {\n background-color: #4343bc;\n}\n.strand_propensity .X {\n background-color: #797986;\n}\n.strand_propensity .Z {\n background-color: #4747b8;\n}\n.strand_propensity .A,\n.strand_propensity .R,\n.strand_propensity .N,\n.strand_propensity .D,\n.strand_propensity .E,\n.strand_propensity .G,\n.strand_propensity .H,\n.strand_propensity .K,\n.strand_propensity .P,\n.strand_propensity .S,\n.strand_propensity .B,\n.strand_propensity .Z {\n color: #fcff89;\n}\n.strand_propensity .gap {\n color: #ccc;\n}\n.turn_propensity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.turn_propensity .gap {\n color: #ccc;\n}\n.turn_propensity .A {\n background-color: #2cd3d3;\n}\n.turn_propensity .R {\n background-color: #708f8f;\n}\n.turn_propensity .N {\n background-color: #ff0000;\n}\n.turn_propensity .D {\n background-color: #e81717;\n}\n.turn_propensity .C {\n background-color: #a85757;\n}\n.turn_propensity .Q {\n background-color: #3fc0c0;\n}\n.turn_propensity .E {\n background-color: #778888;\n}\n.turn_propensity .G {\n background-color: #ff0000;\n}\n.turn_propensity .H {\n background-color: #708f8f;\n}\n.turn_propensity .I {\n background-color: #00ffff;\n}\n.turn_propensity .L {\n background-color: #1ce3e3;\n}\n.turn_propensity .K {\n background-color: #7e8181;\n}\n.turn_propensity .M {\n background-color: #1ee1e1;\n}\n.turn_propensity .F {\n background-color: #1ee1e1;\n}\n.turn_propensity .P {\n background-color: #f60909;\n}\n.turn_propensity .S {\n background-color: #e11e1e;\n}\n.turn_propensity .T {\n background-color: #738c8c;\n}\n.turn_propensity .W {\n background-color: #738c8c;\n}\n.turn_propensity .Y {\n background-color: #9d6262;\n}\n.turn_propensity .V {\n background-color: #07f8f8;\n}\n.turn_propensity .B {\n background-color: #f30c0c;\n}\n.turn_propensity .X {\n background-color: #7c8383;\n}\n.turn_propensity .Z {\n background-color: #5ba4a4;\n}\n.turn_propensity .N,\n.turn_propensity .D,\n.turn_propensity .G,\n.turn_propensity .P,\n.turn_propensity .S,\n.turn_propensity .B {\n color: #fcff89;\n}\n.buried_index {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.buried_index .gap {\n color: #ccc;\n}\n.buried_index .A {\n background-color: #00a35c;\n}\n.buried_index .R {\n background-color: #00fc03;\n}\n.buried_index .N {\n background-color: #00eb14;\n}\n.buried_index .D {\n background-color: #00eb14;\n}\n.buried_index .C {\n background-color: #0000ff;\n}\n.buried_index .Q {\n background-color: #00f10e;\n}\n.buried_index .E {\n background-color: #00f10e;\n}\n.buried_index .G {\n background-color: #009d62;\n}\n.buried_index .H {\n background-color: #00d52a;\n}\n.buried_index .I {\n background-color: #0054ab;\n}\n.buried_index .L {\n background-color: #007b84;\n}\n.buried_index .K {\n background-color: #00ff00;\n}\n.buried_index .M {\n background-color: #009768;\n}\n.buried_index .F {\n background-color: #008778;\n}\n.buried_index .P {\n background-color: #00e01f;\n}\n.buried_index .S {\n background-color: #00d52a;\n}\n.buried_index .T {\n background-color: #00db24;\n}\n.buried_index .W {\n background-color: #00a857;\n}\n.buried_index .Y {\n background-color: #00e619;\n}\n.buried_index .V {\n background-color: #005fa0;\n}\n.buried_index .B {\n background-color: #00eb14;\n}\n.buried_index .X {\n background-color: #00b649;\n}\n.buried_index .Z {\n background-color: #00f10e;\n}\n.buried_index .C,\n.buried_index .I,\n.buried_index .V {\n color: #fcff89;\n}\n","@transition_time: 20ms;\n\n/ see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) /\n@hover_scale_factor: 2;\n@hover_stroke_width: 2;\n@collapsed_node_stroke_width: 1;\n\n@default_node_fill: #fff;\n@default_node_stroke: #777;\n\n@ortholog_stroke_color: orange;\n@paralog_stroke_color: green;\n@representative_fill_color: @ortholog_stroke_color;\n@self_color: red;\n\n@speciation_color: #000080;\n@duplication_color: #cd0000;\n\n@font_size: 11px;\n@font_weight_highlight: bolder;\n\n@invisible: 0;\n@visible: 1;\n\n.display-mode {\n .btn-toolbar {\n position: absolute;\n padding-left: 10px\n }\n}\n.tooltip-inner {\n max-width : 400px;\n}\n.genetree-vis {\n .node, .edge {\n cursor: pointer;\n }\n\n .tree-wrapper {\n / transitions for mouse hover, etc, interactions /\n {\n transition: all @transition_time ease-in-out;\n }\n\n /* transitions for expanding/contracting clades /\n .clade {\n transition: transform @transition_time ease-in-out;\n\n .edge-rect {\n transition: scaleY @transition_time ease-in-out, scaleX @transition_time ease-in-out, transform @transition_time ease-in-out;\n }\n }\n }\n\n .interaction-helper {\n opacity: @invisible;\n }\n\n .node circle {\n stroke: @default_node_stroke;\n fill: @default_node_fill;\n }\n\n .speciation rect {\n fill: @speciation_color;\n }\n\n .duplication rect {\n fill: @duplication_color;\n }\n\n .node:hover, .edge:hover {\n .internal,\n .gene circle,\n ~ .clade .node rect,\n + .node rect {\n transform: scale(@hover_scale_factor);\n }\n\n ~ .clade .interaction-rect {\n opacity: @visible;\n fill-opacity: @visible;\n }\n\n ~ .clade circle,\n + .node circle,\n .collapsed path,\n ~ .clade .collapsed path,\n + .node .collapsed path {\n stroke-width: @hover_stroke_width;\n }\n\n ~ .clade text, text {\n font-weight: @font_weight_highlight;\n }\n }\n\n .node {\n .gene.ortholog_one2one circle,\n .gene.ortholog_one2many circle,\n .gene.ortholog_many2many circle {\n stroke: @ortholog_stroke_color;\n }\n\n .gene.within_species_paralog circle {\n stroke: @paralog_stroke_color;\n }\n\n .gene.self {\n circle {\n stroke: @self_color;\n fill: @self_color;\n }\n text {\n font-weight: @font_weight_highlight;\n }\n }\n\n .gene.representative circle {\n stroke: @ortholog_stroke_color;\n fill: @representative_fill_color;\n }\n\n text {\n font-size: @font_size;\n fill-opacity: @visible;\n text-anchor: start;\n }\n }\n\n .collapsed {\n path {\n stroke-width: @collapsed_node_stroke_width;\n }\n }\n\n .domains rect {\n cursor: pointer;\n stroke-opacity: 0\n }\n\n .domains rect:hover {\n cursor: pointer;\n stroke-opacity: 1.0\n }\n @transition_time: 20ms;\n\n / see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) /\n @hover_scale_factor: 2;\n @hover_stroke_width: 2;\n @collapsed_node_stroke_width: 1;\n\n @default_node_fill: #fff;\n @default_node_stroke: #777;\n\n @ortholog_stroke_color: orange;\n @paralog_stroke_color: green;\n @representative_fill_color: @ortholog_stroke_color;\n @self_color: red;\n\n @speciation_color: #000080;\n @duplication_color: #cd0000;\n\n @font_size: 11px;\n @font_weight_highlight: bolder;\n\n @invisible: 0;\n @visible: 1;\n\n}\n\n.popover-title .tooltip-title-button {\n margin-top: -4px !important;\n margin-right: 4px !important;\n}\n\n.msa-slider {\n position: relative;\n padding-top: 10px;\n padding-bottom: 0px;\n margin-bottom: -10px;\n}\n\n.resize-drag {\n background: rgba(0, 0, 0, 0.0);\n border: 4px solid #7c8383;\n color: red;\n font-size: 1px;\n font-family: sans-serif;\n border-radius: 8px;\n\n / This makes things much easier /\n box-sizing: border-box;\n}\n\n.resize-container {\n width: 100%;\n height: 100%;\n}\n",null,"/\n\n<classNamePrefix>-root\n\nThe outer container\n\n/\n.tree-view-root {\n}\n\n/\n\n<classNamePrefix>-root\n\nThe outer container for a single node\n\n/\n.tree-view-node {\n margin-left: 10px;\n}\n\n\n/\n\n<classNamePrefix>-node-collapse-toggle.collapse-spacer\n\nUsed to provide spacing when a parent node has no children\n\n/\n.tree-view-node-collapse-toggle.collapse-spacer {\n width: 14px;\n display: inline-block;\n}\n\n/\n<classNamePrefix>-node-collapse-toggle.<expandIconClass>\n\nThe class to use for the icon that expands a collapsed parent node\n\n/\n\n\n/\n\n<classNamePrefix>-node-collapse-toggle.<collapseIconClass>\n\nThe class to use for the icon that collapses an expanded parent node\n\n/\n\n.tree-view-node-collapse-toggle {\n margin-right: 3px;\n width: 14px;\n}\n\n/\n\n<classNamePrefix>-node-label\n\n/\n.tree-view-node-label {\n font-size: smaller;\n margin-left: 3px;\n padding: 1px;\n border: 1px solid #fff;\n}\n\n/\n\n<classNamePrefix>-node-label.selected\n\n/\n.tree-view-node-label.selected {\n border: 1px solid #003f81;\n border-radius: 3px;\n background-color: #808080;\n}\n\n/\n\n<classNamePrefix>-node-checkbox\n\nThe class for a node checkbox\n\n/\n\n.tree-view-node-checkbox {}\n\n/\n\n<classNamePrefix>-node-children\n\nThe class for the element that wraps a nodes children (if any exist)\n\n/\n\n.tree-view-node-children {}\n\n",".button-like-link {\n display: inline-block;\n padding: 0;\n background-color: #fff0;\n color: #007bff;\n text-decoration: underline;\n border: none;\n cursor: pointer;\n}\n","/ styles.css /\n.fasta-container {\n position: relative;\n padding: 2ch;\n background-color: #fcfffd;\n border-color: #557b74;\n border-style: dashed;\n line-height: 0.925em;\n /margin: auto; !* Center the container !/\n}\n.styled-span {\n display: flex;\n align-items: center;\n text-align: center;\n}\n.vertical-line {\n flex-grow: 1;\n height: 20px;\n background-color: black;\n}\n.horizontal-line {\n width: 57px;\n height: 3px;\n background-color: black;\n margin: 0 0px;\n}\ncode.fasta {\n white-space: pre-wrap;\n color: #595959;\n}\n.header {\n color: black;\n}\n.upstream {\n color: #80a0a0;\n}\n.downstream {\n color: #80a0a0;\n}\n.intron {\n color: #aaaaaa;\n}\n.utr5 {\n background-color: #aaccaf;\n}\n.utr5-other {\n background-color: #cfe1d2;\n}\n.cds {\n background-color: #a7b4d3;\n}\n.cds-other {\n background-color: #d0d8e6;\n}\n.utr3 {\n background-color: #c5a3bf;\n}\n.utr3-other {\n background-color: #dcc9d9;\n}\n.square-utr5 {\n width: 20px;\n height: 20px;\n background: linear-gradient(to bottom right, #aaccaf 0%, #aaccaf 50%, #cfe1d2 50%, #cfe1d2 100%);\n}\n.square-cds {\n width: 20px;\n height: 20px;\n background: linear-gradient(to bottom right, #a7b4d3 0%, #a7b4d3 50%, #d0d8e6 50%, #d0d8e6 100%);\n}\n.square-utr3 {\n width: 20px;\n height: 20px;\n background: linear-gradient(to bottom right, #c5a3bf 0%, #c5a3bf 50%, #dcc9d9 50%, #dcc9d9 100%);\n}\n\n.reverse-slide {\n direction: rtl;\n}\n.fasta-key {\n position: absolute;\n top: 9px;\n right: 40px;\n background: none;\n border: none;\n cursor: default;\n font-family: monospace;\n font-size: 11pt;\n color: #555;\n}\n.copy-button {\n position: absolute;\n top: 3px;\n right: -5px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.5rem;\n color: #555;\n}\n.notification {\n position: absolute;\n top: 0;\n right: 0;\n background-color: #050505;\n color: #fff;\n padding: 5px;\n z-index: 999;\n font-weight: bold;\n font-style: italic;\n font-size: smaller;\n}",".taxogenomic-vis {\n @import 'taxonomy';\n}",".accordion-button {\n padding:0.4rem!important;\n}\n.accordion-button:hover {\n background-color: #dbe8f3;\n}"],"names":[],"version":3,"file":"index.css.map"}
1	+ {"mappings":"ACCA;;;;;AAKA;;;;;AAKA;;;;;;;;;;;AAYA;;;;AAGA;;;;AAKA;EACI;;;;EAGA;;;;;;;;EAQA;;;;;AAIJ;;;;;;AAoBA;;;;;;;;AAOA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;AAMA;;;;;AAIA;;;;AAIA;;;;;;AAKA;;;;;;AAKA;;;;AAIA;;;;;;;;;;;;AAaA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;AAMA;;;;;;;;;AASA;;;;;AAIA;;;;;AAIA;;;;;;AAKA;;;;;AAIA;;;;;;AAOA;EAEI;;;;;;EAOA;;;;;EAMA;;;;;;ACpMJ;;;;;AAIA;;;;;;;AAMA;;;;;AAIA;;;;;;;AAMA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;;AAIA;;;;AAMA;;;;AAIA;;;;;AAIA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;;;AAKA;EAGI;;;;EAGA;;;;EAGA;;;;;;;EAQA;;;;;AAKJ;;;;;;AAKA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;;;AAMA;;;;;;;;;;;;AAYA;EACI;;;;;;;AAMJ;;;;;AAKA;;;;;AAMA;;;;;;AAMA;;;;AAGA;;;;;;AAKA;;;;;;;AAMA;;;;;AAIA;;;;;;AAKA;;;;;;;;;;;;AAYA;;;;AAGA;;;;AAIA;;;;AAGA;;;;AAIA;;;;AAMA;;;;AAQA;;;;;;;;;;AAYA;;;;;AAIA;;;;;AAMA;;;;;AAKA;;;;;;;AAMA;;;;AAGA;;;;;;;AAMA;;;;;;;;;;;AAUA;;;;;;;AAMA;;;;;;AAOA;;;;;;AAOA;;;;;;AC9SA;;;;AAIA;;;;;;;AAMA;;;;AASA;;;;;AAKA;;;;AAMA;;;;;AAKA;;;;AAGA;;;;AAGA;;;;AAIA;;;;AAGA;;;;AAKA;;;;AAGA;;;;;;;AAMA;;;;AAOA;;;;;AAMA;;;;AAMA;;;;AAIA;;;;AAGA;;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;;AAIA;;;;;AAIA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;AAIA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAKA;;;;AAGA;;;;;;;;AAOA;;;;AAGA;;;;AAIA;;;;AAQA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAcA;;;;AAGA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAQA;;;;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;ACjjBA;;;;;AAMA;;;;AAGA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;AA0IA;;;;;AAKA;;;;;;;AAOA;;;;;;;;;;AAYA;;;;;AChMA;;;;AAEE;;;;;;;AAQF;;;;;;;;AAQA;;;;;;;;;;;AAUE;;;;;;AAMA;;;;;AAMF;;;;;;AC1BA;;;;AAYA;;;;;AAqBA;;;;;AAUA;;;;;;;AAYA;;;;;;ACxEA;;;;;;;;;;ACCA;;;;;;;;;AASA;;;;;;AAKA;;;;;;AAKA;;;;;;;AAMA;;;;;AAIA;;;;AAGA;;;;AAMA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;;AAKA;;;;;;AAKA;;;;;;AAMA;;;;AAGA;;;;;;;;;;;;AAWA;;;;;;;;;;;AAUA;;;;;;;;;;;;;ACpGA;;;;;AAAA;;;;AAAA;;;;AAAA;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;AAAA;;;;ACAA;;;;AAGA","sources":["b17bddada667de42","src/components/styles.css","src/components/results/genes.css","node_modules/gramene-genetree-vis/src/styles/msa.less","node_modules/gramene-genetree-vis/src/styles/tree.less","node_modules/react-simple-tree-menu/src/sass/main.scss","src/components/results/details/tree-view.css","src/components/results/details/VEP.css","src/components/results/details/sequences.css","node_modules/gramene-search-vis/styles/main.less","src/components/results/expression.css"],"sourcesContent":["@import \"5abb1db407612521\";\n@import \"1caf78728b2f5137\";\n@import \"2166a150e9f31214\";\n@import \"938d6be3f57789df\";\n@import \"aa165d1be5d1c755\";\n@import \"996096824b9f7d5a\";\n@import \"41a1dcf3bc8b5377\";\n@import \"c52016833805a9f9\";\n@import \"6f643ac0480217ea\";\n@import \"c6576577b854e1eb\";\n","/* ── Main search layout: sidebar + content ──────────────────────────────── /\n.search-views-layout {\n display: flex;\n align-items: flex-start;\n}\n\n.search-views-content {\n flex: 1 1 0;\n min-width: 0; / prevent flex children from overflowing /\n}\n\n.gramene-sidebar,\n.sorghumbase-sidebar {\n flex: 0 0 250px;\n position: sticky;\n top: 0;\n max-height: 100vh;\n overflow-y: auto;\n padding-left: 8px;\n padding-right: 8px;\n padding-bottom: 8px;\n}\n\n.gramene-sidebar {\n background-color: #557b74;\n}\n.sorghumbase-sidebar {\n background-color: #a03e34;\n}\n\n/ ── Mobile: stack sidebar above content ────────────────────────────────── /\n@media (max-width: 767px) {\n .search-views-layout {\n flex-direction: column;\n }\n .gramene-sidebar,\n .sorghumbase-sidebar {\n flex: 0 0 auto;\n position: static;\n width: 100%;\n max-height: none;\n overflow-y: visible;\n }\n .search-views-content {\n width: 100%;\n }\n}\n.gramene-auth-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.sorghumbase-auth-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.gramene-filter-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.sorghumbase-filter-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-bottom: 4px;\n}\n.gramene-filter {\n padding-left: 4px;\n padding-right: 4px;\n padding-bottom: 4px;\n background-color: white;\n font-size: 0.875rem; / ~14px — explicit instead of 'small' keyword /\n}\n.gramene-filter span:hover {\n font-weight:bolder;\n}\n.gramene-filter-AND {\n background-color: #ffcd82;\n}\n.gramene-filter-OR {\n background-color: #c5eeb9;\n}\n.gramene-filter-NOT {\n border-left-color: #ff5354;\n border-left-style: inset;\n border-left-width: 4px;\n padding-left: 4px;\n}\n.gramene-filter-operation {\n text-align: center;\n font-style: italic;\n}\n.gramene-filter-marked {\n font-weight: bolder;\n /background-color: #feff96;/\n}\n.gramene-filter-menu ul {\n border-top-style: solid;\n border-top-width: 2px;\n padding-left: 0;\n}\n.gramene-filter-menu li {\n display: block;\n cursor: pointer;\n padding: 8px 8px 8px 15px; / vertical padding makes tap targets ~36px+ /\n}\n.gramene-filter-menu li:hover {\n background-color: #feff96;\n}\n\n.gramene-view-header {\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n justify-content: space-evenly;\n font-size: larger;\n font-weight: bold;\n background-color: #fff3a96e;\n border-top: solid;\n border-top-color: #557b74;\n color: #a03e34;\n}\n\n.gramene-view-container {\n background-color: #fff3a9;\n padding-left: 4px;\n padding-right: 4px;\n padding-bottom: 4px;\n}\n.gramene-view {\n padding-left: 0px;\n padding-right: 10px;\n margin-bottom: 0;\n background-color: white;\n}\n.gramene-view-span-on {\n padding-left: 5px;\n cursor: pointer;\n vertical-align: text-bottom;\n color: #a03e34;\n}\n.gramene-view-span-off {\n padding-left: 5px;\n cursor: pointer;\n vertical-align: text-bottom;\n color: darkgray;\n}\n.gramene-view li {\n display: block;\n cursor: pointer;\n padding-left: 5px;\n border-left-style: inset;\n border-left-width: 8px;\n margin-bottom: 2px;\n}\n\n.gramene-view-on {\n border-left-color: #40a0ff;\n font-weight: bold;\n}\n.gramene-view-off {\n border-left-color: #ff6d68;\n color: grey;\n}\n.gramene-view-disabled {\n color: darkgray;\n border-left-color: #efefef;\n cursor: default!important;\n}\n#gramene-suggestion button {\n border-radius: .6rem;\n line-height: 1;\n}\n#gramene-suggestion button:focus {\n color: #fff;\n background-color: #6c757d;\n border-color: #6c757d;\n}\n\n/ ── Mobile touch-target improvements ──────────────────────────────────── /\n@media (max-width: 767px) {\n / View toggle rows: tall enough to tap with a finger /\n .gramene-view-container > div {\n min-height: 36px;\n display: flex;\n align-items: center;\n }\n\n / Suggestion buttons: increase tap area /\n #gramene-suggestion button {\n padding: 0.5rem 0.75rem;\n margin-bottom: 4px;\n }\n\n / Ensure search input is large enough to tap on mobile /\n #search-input {\n font-size: 1rem; / prevents iOS zoom-on-focus when < 16px /\n min-height: 44px;\n }\n}\n\n",".visible-detail {\n border: 1px solid #557B74;\n padding: 6px 12px;\n}\n.detail {\n margin-right: auto;\n margin-left: auto;\n padding-left: 15px;\n padding-right: 15px;\n}\n.table {\n width: 100%;\n max-width: 100%;\n}\n.xrefs {\n border-collapse: collapse;\n border-spacing: 0;\n border-color: grey;\n table-layout: fixed;\n}\n.xref-name-col {\n width: 20%;\n}\n.xref-value-col {\n width: 80%;\n}\n.xref-80-col {\n width: 80%;\n}\n.xref-70-col {\n width: 70%;\n}\n.xref-10-col {\n width: 10%;\n}\n.xref-id-list {\n padding-left: 0;\n list-style: none;\n}\n.result-gene {\n padding: 0.2em;\n border: 5px solid white;\n}\n.result-gene:hover {\n border-color: antiquewhite;\n}\n.gene-title {\n /padding-top:0.5em;/\n}\n.gene-id {\n /white-space: nowrap;/\n color: black;\n}\n.gene-name {\n color: #557B74;\n margin-bottom: 0;\n}\n.gene-description {\n margin-bottom: 0;\n}\n.gene-species {\n white-space: nowrap;\n font-style: italic;\n font-size:small;\n font-weight: bold;\n}\n.gene-synonyms {\n font-size: small;\n}\n.gene-extras {\n border: dashed 1px blue;\n}\n.gene-panlink {\n flex-shrink: 0;\n}\n.gene-panlink img {\n height: 60px;\n width: auto;\n max-width: 100%;\n vertical-align: top;\n}\n.suggestion-panlink img {\n height: 60px;\n width: auto;\n max-width: 100%;\n}\n@media (max-width: 767px) {\n / Allow the ortholog/TAIR box to stack below the gene title on mobile.\n It stays inside .result-gene-summary, so it still appears above .gene-detail-tabs. /\n .result-gene-summary {\n flex-wrap: wrap;\n }\n .result-gene-title-body {\n flex: 1 1 100%;\n }\n .model-ortholog,\n .closest-ortholog,\n .gene-summary-tair {\n flex: 1 1 100%;\n max-width: 100%;\n margin-left: 0;\n margin-top: 8px;\n }\n .gene-panlink img,\n .suggestion-panlink img {\n height: 40px;\n }\n}\n.gene-curation {\n flex-shrink: 0;\n margin-top: 20px;\n border: 1px solid grey;\n}\n.gene-curation span {\n width: 20px;\n display: inline-block;\n color: white;\n text-align: center;\n}\n.gene-curation .okay {\n background-color: #0c00f3;\n}\n.gene-curation .flagged {\n background-color: darkorange;\n}\n.gene-detail-tabs {\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n}\n/ Tab items: 4-per-row by default, overrides Bootstrap col-md-1 (8.33%) /\n.gene-detail-tabs > div {\n flex: 0 0 25%;\n width: 25%;\n max-width: 25%;\n box-sizing: border-box;\n padding: 6px 4px;\n min-height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n/ At wide viewports, all 8 fit comfortably in one row /\n@media (min-width: 992px) {\n .gene-detail-tabs > div {\n flex: 0 0 12.5%;\n width: 12.5%;\n max-width: 12.5%;\n }\n}\n.gene-detail-tab-closed {\n color: darkgreen;\n cursor: pointer;\n /background-color: lightgray;/\n}\n.gene-detail-tab-disabled {\n /color: white;/\n /background-color: lightgray;/\n color: lightgray;\n cursor: not-allowed;\n}\n.gene-detail-tab-empty {\n color: darkgreen;\n cursor: pointer;\n font-style: oblique;\n /background-color: lightgray;/\n}\n.gene-detail-tab-empty::before {\n content: \"Add \";\n}\n.gene-detail-tab-expanded {\n color: white;\n background-color: #557B74;\n cursor: pointer;\n}\n.result-gene-summary {\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n}\n.result-gene-summary .species-name {\n white-space: nowrap;\n font-style: italic;\n}\n.result-gene-title-body {\n flex: 1 1 auto;\n max-width: 1036px;\n width: 100%;\n}\n.model-ortholog, .closest-ortholog, .gene-summary-tair {\n cursor: pointer;\n flex: 1 1 auto;\n max-width: 500px;\n width: 100%;\n font-size: smaller;\n margin-top: 10px;\n padding: 0 1rem;\n margin-left: 1rem;\n border: 1px solid darkorange;\n}\n\n.model-ortholog {\n border: 1px dotted darkorange;\n}\n.closest-ortholog {\n border: 1px dotted darkgreen;\n}\n\n.gene-summary-tair {\n border: 1px dotted darkblue;\n}\n.gene-summary-tair .rest {\n display: none;\n}\n\n.gene-summary-tair:hover .rest {\n display: inline;\n}\n.gene-summary-tair:focus .rest {\n display: inline;\n}\n.gene-summary-tair:hover .ellipsis {\n display: none;\n}\n.gene-summary-tair:focus .ellipsis {\n display: none;\n}\n\n/ this is the \"title\" of the closest ortholog box /\n.closest-ortholog::before,\n.model-ortholog::before,\n.gene-summary-tair::before {\n position: relative;\n float: right;\n margin-top: -12px;\n margin-right: 6px;\n border: dotted 1px;\n padding: 0 1rem;\n background: #fff;\n}\n\n.model-ortholog::before {\n content: \"Model Species Homolog\";\n color: orange;\n}\n.closest-ortholog::before {\n content: \"Closest Annotated Homolog\";\n color: darkgreen;\n}\n\n/ this is the \"title\" of the closest ortholog box /\n.gene-summary-tair::before {\n content: \"TAIR Curated Description\";\n color: darkblue;\n}\n\n.rep-identity {\n margin-left: auto;\n padding-right: 10px;\n padding-top: 5px;\n font-style: italic;\n}\n.rep-identity::after {\n content: \"% identity\";\n}\n.eFP::before {\n content: url(\"../../static/images/BAR-logo.png\");\n padding-right:5px;\n position: relative;\n top: 5px;\n}\n.eFP::after {\n content: 'New!';\n color: red;\n padding-left:2px;\n font-weight: bold;\n font-style: italic;\n font-size: x-small;\n line-height: normal;\n vertical-align: super;\n}\n.gxa::before {\n content: url(\"../../static/images/expression-atlas-logo.png\");\n padding-right:5px;\n position: relative;\n top: 5px;\n}\n.gene-search-pic-sugg {\n width: 100%;\n height: 200px;\n background: url(\"../../static/images/suggestions.png\");\n background-size: contain;\n background-repeat: no-repeat;\n}\n.gene-search-pic-results {\n width: 100%;\n height: 200px;\n background: url(\"../../static/images/results.png\");\n background-size: contain;\n background-repeat: no-repeat;\n}\n.gene-search-pic-genetree {\n width: 100%;\n height: 200px;\n background: url(\"../../static/images/genetree.png\");\n background-size: contain;\n background-repeat: no-repeat;\n}\n",".MSAlignments-wrapper {\n overflow-x: scroll;\n overflow-y: hidden;\n}\n.clustal {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.clustal .A,\n.clustal .I,\n.clustal .L,\n.clustal .M,\n.clustal .F,\n.clustal .W,\n.clustal .V {\n background-color: #80a0f0;\n}\n.clustal .R,\n.clustal .K {\n background-color: #f01505;\n color: #fcff89;\n}\n.clustal .N,\n.clustal .Q,\n.clustal .S,\n.clustal .T {\n background-color: #00ff00;\n}\n.clustal .D,\n.clustal .E {\n background-color: #c048c0;\n color: #fcff89;\n}\n.clustal .C {\n background-color: #f08080;\n}\n.clustal .G {\n background-color: #f09048;\n}\n.clustal .Y\n.clustal .H {\n background-color: #15a4a4;\n}\n.clustal .P {\n background-color: #ffff00;\n}\n.clustal .B,\n.clustal .X,\n.clustal .Z {\n background-color: #ffffff;\n}\n.clustal .gap {\n color: #ccc;\n}\n.zappo {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.zappo .A,\n.zappo .I,\n.zappo .L,\n.zappo .M,\n.zappo .V {\n background-color: #ffafaf;\n}\n.zappo .R,\n.zappo .H,\n.zappo .K {\n background-color: #6464ff;\n color: #fcff89;\n}\n.zappo .N,\n.zappo .Q,\n.zappo .S,\n.zappo .T {\n background-color: #00ff00;\n}\n.zappo .D,\n.zappo .E {\n background-color: #ff0000;\n}\n.zappo .C {\n background-color: #ffff00;\n}\n.zappo .G,\n.zappo .P {\n background-color: #ff00ff;\n color: #fcff89;\n}\n.zappo .F,\n.zappo .W,\n.zappo .Y {\n background-color: #ffc800;\n}\n.zappo .B,\n.zappo .X,\n.zappo .Z {\n background-color: #ffffff;\n}\n.zappo .gap {\n color: #ccc;\n}\n.taylor {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.taylor .A {\n background-color: #ccff00;\n}\n.taylor .R {\n background-color: #0000ff;\n color: #fcff89;\n}\n.taylor .N {\n background-color: #cc00ff;\n color: #fcff89;\n}\n.taylor .D {\n background-color: #ff0000;\n color: #fcff89;\n}\n.taylor .C {\n background-color: #ffff00;\n}\n.taylor .Q {\n background-color: #ff00cc;\n}\n.taylor .E {\n background-color: #ff0066;\n color: #fcff89;\n}\n.taylor .G {\n background-color: #ff9900;\n}\n.taylor .H {\n background-color: #0066ff;\n color: #fcff89;\n}\n.taylor .I {\n background-color: #66ff00;\n}\n.taylor .L {\n background-color: #33ff00;\n}\n.taylor .K {\n background-color: #6600ff;\n color: #fcff89;\n}\n.taylor .M {\n background-color: #00ff00;\n}\n.taylor .F {\n background-color: #00ff66;\n}\n.taylor .P {\n background-color: #ffcc00;\n}\n.taylor .S {\n background-color: #ff3300;\n color: #fcff89;\n}\n.taylor .T {\n background-color: #ff6600;\n}\n.taylor .W {\n background-color: #00ccff;\n}\n.taylor .Y {\n background-color: #00ffcc;\n}\n.taylor .V {\n background-color: #99ff00;\n}\n.taylor .B,\n.taylor .X,\n.taylor .Z {\n background-color: #ffffff;\n}\n.taylor .gap {\n color: #ccc;\n}\n.hydrophobicity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n color: #fcff89;\n}\n.hydrophobicity .A {\n background-color: #ad0052;\n}\n.hydrophobicity .R,\n.hydrophobicity .K {\n background-color: #0000ff;\n}\n.hydrophobicity .N,\n.hydrophobicity .D,\n.hydrophobicity .Q,\n.hydrophobicity .E,\n.hydrophobicity .B,\n.hydrophobicity .Z {\n background-color: #0c00f3;\n}\n.hydrophobicity .C {\n background-color: #c2003d;\n}\n.hydrophobicity .G {\n background-color: #6a0095;\n}\n.hydrophobicity .H {\n background-color: #1500ea;\n}\n.hydrophobicity .L {\n background-color: #ea0015;\n}\n.hydrophobicity .M {\n background-color: #b0004f;\n}\n.hydrophobicity .F {\n background-color: #cb0034;\n}\n.hydrophobicity .P {\n background-color: #4600b9;\n}\n.hydrophobicity .S {\n background-color: #5e00a1;\n}\n.hydrophobicity .T {\n background-color: #61009e;\n}\n.hydrophobicity .W {\n background-color: #5b00a4;\n}\n.hydrophobicity .Y {\n background-color: #4f00b0;\n}\n.hydrophobicity .V {\n background-color: #f60009;\n}\n.hydrophobicity .X {\n background-color: #680097;\n}\n.hydrophobicity .gap {\n color: #ccc;\n}\n.helix_propensity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.helix_propensity .A {\n background-color: #e718e7;\n}\n.helix_propensity .R {\n background-color: #6f906f;\n}\n.helix_propensity .N {\n background-color: #1be41b;\n}\n.helix_propensity .D {\n background-color: #778877;\n}\n.helix_propensity .C {\n background-color: #23dc23;\n}\n.helix_propensity .Q {\n background-color: #926d92;\n}\n.helix_propensity .E {\n background-color: #ff00ff;\n}\n.helix_propensity .G {\n background-color: #00ff00;\n}\n.helix_propensity .H {\n background-color: #758a75;\n}\n.helix_propensity .I {\n background-color: #8a758a;\n}\n.helix_propensity .L {\n background-color: #ae51ae;\n}\n.helix_propensity .K {\n background-color: #a05fa0;\n}\n.helix_propensity .M {\n background-color: #ef10ef;\n}\n.helix_propensity .F {\n background-color: #986798;\n}\n.helix_propensity .P {\n background-color: #00ff00;\n}\n.helix_propensity .S {\n background-color: #36c936;\n}\n.helix_propensity .T {\n background-color: #47b847;\n}\n.helix_propensity .W {\n background-color: #8a758a;\n}\n.helix_propensity .Y {\n background-color: #21de21;\n}\n.helix_propensity .V {\n background-color: #857a85;\n}\n.helix_propensity .B {\n background-color: #49b649;\n}\n.helix_propensity .X {\n background-color: #758a75;\n}\n.helix_propensity .Z {\n background-color: #c936c9;\n}\n.helix_propensity .gap {\n color: #ccc;\n}\n.strand_propensity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.strand_propensity .A {\n background-color: #5858a7;\n}\n.strand_propensity .R {\n background-color: #6b6b94;\n}\n.strand_propensity .N {\n background-color: #64649b;\n}\n.strand_propensity .D {\n background-color: #2121de;\n}\n.strand_propensity .C {\n background-color: #9d9d62;\n}\n.strand_propensity .Q {\n background-color: #8c8c73;\n}\n.strand_propensity .E {\n background-color: #0000ff;\n}\n.strand_propensity .G {\n background-color: #4949b6;\n}\n.strand_propensity .H {\n background-color: #60609f;\n}\n.strand_propensity .I {\n background-color: #ecec13;\n}\n.strand_propensity .L {\n background-color: #b2b24d;\n}\n.strand_propensity .K {\n background-color: #4747b8;\n}\n.strand_propensity .M {\n background-color: #82827d;\n}\n.strand_propensity .F {\n background-color: #c2c23d;\n}\n.strand_propensity .P {\n background-color: #2323dc;\n}\n.strand_propensity .S {\n background-color: #4949b6;\n}\n.strand_propensity .T {\n background-color: #9d9d62;\n}\n.strand_propensity .W {\n background-color: #c0c03f;\n}\n.strand_propensity .Y {\n background-color: #d3d32c;\n}\n.strand_propensity .V {\n background-color: #ffff00;\n}\n.strand_propensity .B {\n background-color: #4343bc;\n}\n.strand_propensity .X {\n background-color: #797986;\n}\n.strand_propensity .Z {\n background-color: #4747b8;\n}\n.strand_propensity .A,\n.strand_propensity .R,\n.strand_propensity .N,\n.strand_propensity .D,\n.strand_propensity .E,\n.strand_propensity .G,\n.strand_propensity .H,\n.strand_propensity .K,\n.strand_propensity .P,\n.strand_propensity .S,\n.strand_propensity .B,\n.strand_propensity .Z {\n color: #fcff89;\n}\n.strand_propensity .gap {\n color: #ccc;\n}\n.turn_propensity {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.turn_propensity .gap {\n color: #ccc;\n}\n.turn_propensity .A {\n background-color: #2cd3d3;\n}\n.turn_propensity .R {\n background-color: #708f8f;\n}\n.turn_propensity .N {\n background-color: #ff0000;\n}\n.turn_propensity .D {\n background-color: #e81717;\n}\n.turn_propensity .C {\n background-color: #a85757;\n}\n.turn_propensity .Q {\n background-color: #3fc0c0;\n}\n.turn_propensity .E {\n background-color: #778888;\n}\n.turn_propensity .G {\n background-color: #ff0000;\n}\n.turn_propensity .H {\n background-color: #708f8f;\n}\n.turn_propensity .I {\n background-color: #00ffff;\n}\n.turn_propensity .L {\n background-color: #1ce3e3;\n}\n.turn_propensity .K {\n background-color: #7e8181;\n}\n.turn_propensity .M {\n background-color: #1ee1e1;\n}\n.turn_propensity .F {\n background-color: #1ee1e1;\n}\n.turn_propensity .P {\n background-color: #f60909;\n}\n.turn_propensity .S {\n background-color: #e11e1e;\n}\n.turn_propensity .T {\n background-color: #738c8c;\n}\n.turn_propensity .W {\n background-color: #738c8c;\n}\n.turn_propensity .Y {\n background-color: #9d6262;\n}\n.turn_propensity .V {\n background-color: #07f8f8;\n}\n.turn_propensity .B {\n background-color: #f30c0c;\n}\n.turn_propensity .X {\n background-color: #7c8383;\n}\n.turn_propensity .Z {\n background-color: #5ba4a4;\n}\n.turn_propensity .N,\n.turn_propensity .D,\n.turn_propensity .G,\n.turn_propensity .P,\n.turn_propensity .S,\n.turn_propensity .B {\n color: #fcff89;\n}\n.buried_index {\n white-space: nowrap;\n font-family: monospace;\n height: 18px;\n font-size: 12px;\n}\n.buried_index .gap {\n color: #ccc;\n}\n.buried_index .A {\n background-color: #00a35c;\n}\n.buried_index .R {\n background-color: #00fc03;\n}\n.buried_index .N {\n background-color: #00eb14;\n}\n.buried_index .D {\n background-color: #00eb14;\n}\n.buried_index .C {\n background-color: #0000ff;\n}\n.buried_index .Q {\n background-color: #00f10e;\n}\n.buried_index .E {\n background-color: #00f10e;\n}\n.buried_index .G {\n background-color: #009d62;\n}\n.buried_index .H {\n background-color: #00d52a;\n}\n.buried_index .I {\n background-color: #0054ab;\n}\n.buried_index .L {\n background-color: #007b84;\n}\n.buried_index .K {\n background-color: #00ff00;\n}\n.buried_index .M {\n background-color: #009768;\n}\n.buried_index .F {\n background-color: #008778;\n}\n.buried_index .P {\n background-color: #00e01f;\n}\n.buried_index .S {\n background-color: #00d52a;\n}\n.buried_index .T {\n background-color: #00db24;\n}\n.buried_index .W {\n background-color: #00a857;\n}\n.buried_index .Y {\n background-color: #00e619;\n}\n.buried_index .V {\n background-color: #005fa0;\n}\n.buried_index .B {\n background-color: #00eb14;\n}\n.buried_index .X {\n background-color: #00b649;\n}\n.buried_index .Z {\n background-color: #00f10e;\n}\n.buried_index .C,\n.buried_index .I,\n.buried_index .V {\n color: #fcff89;\n}\n","@transition_time: 20ms;\n\n/ see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) /\n@hover_scale_factor: 2;\n@hover_stroke_width: 2;\n@collapsed_node_stroke_width: 1;\n\n@default_node_fill: #fff;\n@default_node_stroke: #777;\n\n@ortholog_stroke_color: orange;\n@paralog_stroke_color: green;\n@representative_fill_color: @ortholog_stroke_color;\n@self_color: red;\n\n@speciation_color: #000080;\n@duplication_color: #cd0000;\n\n@font_size: 11px;\n@font_weight_highlight: bolder;\n\n@invisible: 0;\n@visible: 1;\n\n.display-mode {\n .btn-toolbar {\n position: absolute;\n padding-left: 10px\n }\n}\n.tooltip-inner {\n max-width : 400px;\n}\n.genetree-vis {\n .node, .edge {\n cursor: pointer;\n }\n\n .tree-wrapper {\n / transitions for mouse hover, etc, interactions /\n {\n transition: all @transition_time ease-in-out;\n }\n\n /* transitions for expanding/contracting clades /\n .clade {\n transition: transform @transition_time ease-in-out;\n\n .edge-rect {\n transition: scaleY @transition_time ease-in-out, scaleX @transition_time ease-in-out, transform @transition_time ease-in-out;\n }\n }\n }\n\n .interaction-helper {\n opacity: @invisible;\n }\n\n .node circle {\n stroke: @default_node_stroke;\n fill: @default_node_fill;\n }\n\n .speciation rect {\n fill: @speciation_color;\n }\n\n .duplication rect {\n fill: @duplication_color;\n }\n\n .node:hover, .edge:hover {\n .internal,\n .gene circle,\n ~ .clade .node rect,\n + .node rect {\n transform: scale(@hover_scale_factor);\n }\n\n ~ .clade .interaction-rect {\n opacity: @visible;\n fill-opacity: @visible;\n }\n\n ~ .clade circle,\n + .node circle,\n .collapsed path,\n ~ .clade .collapsed path,\n + .node .collapsed path {\n stroke-width: @hover_stroke_width;\n }\n\n ~ .clade text, text {\n font-weight: @font_weight_highlight;\n }\n }\n\n .node {\n .gene.ortholog_one2one circle,\n .gene.ortholog_one2many circle,\n .gene.ortholog_many2many circle {\n stroke: @ortholog_stroke_color;\n }\n\n .gene.within_species_paralog circle {\n stroke: @paralog_stroke_color;\n }\n\n .gene.self {\n circle {\n stroke: @self_color;\n fill: @self_color;\n }\n text {\n font-weight: @font_weight_highlight;\n }\n }\n\n .gene.representative circle {\n stroke: @ortholog_stroke_color;\n fill: @representative_fill_color;\n }\n\n text {\n font-size: @font_size;\n fill-opacity: @visible;\n text-anchor: start;\n }\n }\n\n .collapsed {\n path {\n stroke-width: @collapsed_node_stroke_width;\n }\n }\n\n .domains rect {\n cursor: pointer;\n stroke-opacity: 0\n }\n\n .domains rect:hover {\n cursor: pointer;\n stroke-opacity: 1.0\n }\n @transition_time: 20ms;\n\n / see src/components/Edge.js#HOVER_SCALE_FACTOR (currently line 8) /\n @hover_scale_factor: 2;\n @hover_stroke_width: 2;\n @collapsed_node_stroke_width: 1;\n\n @default_node_fill: #fff;\n @default_node_stroke: #777;\n\n @ortholog_stroke_color: orange;\n @paralog_stroke_color: green;\n @representative_fill_color: @ortholog_stroke_color;\n @self_color: red;\n\n @speciation_color: #000080;\n @duplication_color: #cd0000;\n\n @font_size: 11px;\n @font_weight_highlight: bolder;\n\n @invisible: 0;\n @visible: 1;\n\n}\n\n.popover-title .tooltip-title-button {\n margin-top: -4px !important;\n margin-right: 4px !important;\n}\n\n.msa-slider {\n position: relative;\n padding-top: 10px;\n padding-bottom: 0px;\n margin-bottom: -10px;\n}\n\n.resize-drag {\n background: rgba(0, 0, 0, 0.0);\n border: 4px solid #7c8383;\n color: red;\n font-size: 1px;\n font-family: sans-serif;\n border-radius: 8px;\n\n / This makes things much easier /\n box-sizing: border-box;\n}\n\n.resize-container {\n width: 100%;\n height: 100%;\n}\n",null,"/\n\n<classNamePrefix>-root\n\nThe outer container\n\n/\n.tree-view-root {\n}\n\n/\n\n<classNamePrefix>-root\n\nThe outer container for a single node\n\n/\n.tree-view-node {\n margin-left: 10px;\n}\n\n\n/\n\n<classNamePrefix>-node-collapse-toggle.collapse-spacer\n\nUsed to provide spacing when a parent node has no children\n\n/\n.tree-view-node-collapse-toggle.collapse-spacer {\n width: 14px;\n display: inline-block;\n}\n\n/\n<classNamePrefix>-node-collapse-toggle.<expandIconClass>\n\nThe class to use for the icon that expands a collapsed parent node\n\n/\n\n\n/\n\n<classNamePrefix>-node-collapse-toggle.<collapseIconClass>\n\nThe class to use for the icon that collapses an expanded parent node\n\n/\n\n.tree-view-node-collapse-toggle {\n margin-right: 3px;\n width: 14px;\n}\n\n/\n\n<classNamePrefix>-node-label\n\n/\n.tree-view-node-label {\n font-size: smaller;\n margin-left: 3px;\n padding: 1px;\n border: 1px solid #fff;\n}\n\n/\n\n<classNamePrefix>-node-label.selected\n\n/\n.tree-view-node-label.selected {\n border: 1px solid #003f81;\n border-radius: 3px;\n background-color: #808080;\n}\n\n/\n\n<classNamePrefix>-node-checkbox\n\nThe class for a node checkbox\n\n/\n\n.tree-view-node-checkbox {}\n\n/\n\n<classNamePrefix>-node-children\n\nThe class for the element that wraps a nodes children (if any exist)\n\n/\n\n.tree-view-node-children {}\n\n",".button-like-link {\n display: inline-block;\n padding: 0;\n background-color: #fff0;\n color: #007bff;\n text-decoration: underline;\n border: none;\n cursor: pointer;\n}\n","/ styles.css /\n.fasta-container {\n position: relative;\n padding: 2ch;\n background-color: #fcfffd;\n border-color: #557b74;\n border-style: dashed;\n line-height: 0.925em;\n /margin: auto; !* Center the container !/\n}\n.styled-span {\n display: flex;\n align-items: center;\n text-align: center;\n}\n.vertical-line {\n flex-grow: 1;\n height: 20px;\n background-color: black;\n}\n.horizontal-line {\n width: 57px;\n height: 3px;\n background-color: black;\n margin: 0 0px;\n}\ncode.fasta {\n white-space: pre-wrap;\n color: #595959;\n}\n.header {\n color: black;\n}\n.upstream {\n color: #80a0a0;\n}\n.downstream {\n color: #80a0a0;\n}\n.intron {\n color: #aaaaaa;\n}\n.utr5 {\n background-color: #aaccaf;\n}\n.utr5-other {\n background-color: #cfe1d2;\n}\n.cds {\n background-color: #a7b4d3;\n}\n.cds-other {\n background-color: #d0d8e6;\n}\n.utr3 {\n background-color: #c5a3bf;\n}\n.utr3-other {\n background-color: #dcc9d9;\n}\n.square-utr5 {\n width: 20px;\n height: 20px;\n background: linear-gradient(to bottom right, #aaccaf 0%, #aaccaf 50%, #cfe1d2 50%, #cfe1d2 100%);\n}\n.square-cds {\n width: 20px;\n height: 20px;\n background: linear-gradient(to bottom right, #a7b4d3 0%, #a7b4d3 50%, #d0d8e6 50%, #d0d8e6 100%);\n}\n.square-utr3 {\n width: 20px;\n height: 20px;\n background: linear-gradient(to bottom right, #c5a3bf 0%, #c5a3bf 50%, #dcc9d9 50%, #dcc9d9 100%);\n}\n\n.reverse-slide {\n direction: rtl;\n}\n.fasta-key {\n position: absolute;\n top: 9px;\n right: 40px;\n background: none;\n border: none;\n cursor: default;\n font-family: monospace;\n font-size: 11pt;\n color: #555;\n}\n.copy-button {\n position: absolute;\n top: 3px;\n right: -5px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.5rem;\n color: #555;\n}\n.notification {\n position: absolute;\n top: 0;\n right: 0;\n background-color: #050505;\n color: #fff;\n padding: 5px;\n z-index: 999;\n font-weight: bold;\n font-style: italic;\n font-size: smaller;\n}",".taxogenomic-vis {\n @import 'taxonomy';\n}",".accordion-button {\n padding:0.4rem!important;\n}\n.accordion-button:hover {\n background-color: #dbe8f3;\n}"],"names":[],"version":3,"file":"index.css.map"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "description": "search wrapper for gramene",
   "source": "src/index.js",
   "main": "dist/index.js",

package/src/components/results/genes.css CHANGED Viewed

@@ -68,24 +68,46 @@
     font-size: small;
 }
 .gene-extras {
-    float: right;
     border: dashed 1px blue;
 }
 .gene-panlink {
-    float:right;
+    flex-shrink: 0;
 }
 .gene-panlink img {
     height: 60px;
     width: auto;
+    max-width: 100%;
     vertical-align: top;
 }
 .suggestion-panlink img {
     height: 60px;
     width: auto;
-    float: left;
+    max-width: 100%;
+}
+@media (max-width: 767px) {
+    /* Allow the ortholog/TAIR box to stack below the gene title on mobile.
+       It stays inside .result-gene-summary, so it still appears above .gene-detail-tabs. */
+    .result-gene-summary {
+        flex-wrap: wrap;
+    }
+    .result-gene-title-body {
+        flex: 1 1 100%;
+    }
+    .model-ortholog,
+    .closest-ortholog,
+    .gene-summary-tair {
+        flex: 1 1 100%;
+        max-width: 100%;
+        margin-left: 0;
+        margin-top: 8px;
+    }
+    .gene-panlink img,
+    .suggestion-panlink img {
+        height: 40px;
+    }
 }
 .gene-curation {
-    float:right;
+    flex-shrink: 0;
     margin-top: 20px;
     border: 1px solid grey;
 }
@@ -104,8 +126,27 @@
 .gene-detail-tabs {
     display: flex;
     flex-wrap: wrap;
-    white-space: nowrap;
-    width: 80em;
+    width: 100%;
+}
+/* Tab items: 4-per-row by default, overrides Bootstrap col-md-1 (8.33%) */
+.gene-detail-tabs > div {
+    flex: 0 0 25%;
+    width: 25%;
+    max-width: 25%;
+    box-sizing: border-box;
+    padding: 6px 4px;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+/* At wide viewports, all 8 fit comfortably in one row */
+@media (min-width: 992px) {
+    .gene-detail-tabs > div {
+        flex: 0 0 12.5%;
+        width: 12.5%;
+        max-width: 12.5%;
+    }
 }
 .gene-detail-tab-closed {
     color: darkgreen;
@@ -136,6 +177,7 @@
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
+    align-items: flex-start;
 }
 .result-gene-summary .species-name {
     white-space: nowrap;
@@ -143,12 +185,14 @@
 }
 .result-gene-title-body {
     flex: 1 1 auto;
-    width: 1036px;
+    max-width: 1036px;
+    width: 100%;
 }
 .model-ortholog, .closest-ortholog, .gene-summary-tair {
     cursor: pointer;
     flex: 1 1 auto;
-    width: 500px;
+    max-width: 500px;
+    width: 100%;
     font-size: smaller;
     margin-top: 10px;
     padding: 0 1rem;
@@ -212,7 +256,7 @@
 }
 .rep-identity {
-    float: right;
+    margin-left: auto;
     padding-right: 10px;
     padding-top: 5px;
     font-style: italic;

package/src/components/styles.css CHANGED Viewed

@@ -1,18 +1,49 @@
-.gramene-sidebar {
-    position: fixed;
-    background-color: #557b74;
+/* ── Main search layout: sidebar + content ──────────────────────────────── */
+.search-views-layout {
+    display: flex;
+    align-items: flex-start;
+}
+.search-views-content {
+    flex: 1 1 0;
+    min-width: 0; /* prevent flex children from overflowing */
+}
+.gramene-sidebar,
+.sorghumbase-sidebar {
+    flex: 0 0 250px;
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+    overflow-y: auto;
     padding-left: 8px;
     padding-right: 8px;
     padding-bottom: 8px;
-    width: 250px;
+}
+.gramene-sidebar {
+    background-color: #557b74;
 }
 .sorghumbase-sidebar {
-    position: fixed;
     background-color: #a03e34;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-bottom: 8px;
-    width: 250px;
+}
+/* ── Mobile: stack sidebar above content ────────────────────────────────── */
+@media (max-width: 767px) {
+    .search-views-layout {
+        flex-direction: column;
+    }
+    .gramene-sidebar,
+    .sorghumbase-sidebar {
+        flex: 0 0 auto;
+        position: static;
+        width: 100%;
+        max-height: none;
+        overflow-y: visible;
+    }
+    .search-views-content {
+        width: 100%;
+    }
 }
 .gramene-auth-container {
     background-color: #fff3a9;
@@ -39,7 +70,7 @@
     padding-right: 4px;
     padding-bottom: 4px;
     background-color: white;
-    font-size: small;
+    font-size: 0.875rem; /* ~14px — explicit instead of 'small' keyword */
 }
 .gramene-filter span:hover {
     font-weight:bolder;
@@ -72,7 +103,7 @@
 .gramene-filter-menu li {
     display: block;
     cursor: pointer;
-    padding-left: 15px;
+    padding: 8px 8px 8px 15px; /* vertical padding makes tap targets ~36px+ */
 }
 .gramene-filter-menu li:hover {
     background-color: #feff96;
@@ -147,3 +178,25 @@
     border-color: #6c757d;
 }
+/* ── Mobile touch-target improvements ──────────────────────────────────── */
+@media (max-width: 767px) {
+    /* View toggle rows: tall enough to tap with a finger */
+    .gramene-view-container > div {
+        min-height: 36px;
+        display: flex;
+        align-items: center;
+    }
+    /* Suggestion buttons: increase tap area */
+    #gramene-suggestion button {
+        padding: 0.5rem 0.75rem;
+        margin-bottom: 4px;
+    }
+    /* Ensure search input is large enough to tap on mobile */
+    #search-input {
+        font-size: 1rem; /* prevents iOS zoom-on-focus when < 16px */
+        min-height: 44px;
+    }
+}

package/src/demo.js CHANGED Viewed

@@ -299,28 +299,26 @@ const getStore = composeBundles(
 const GeneSearchUI = (store) => (
   <Provider store={store}>
     <div className="row no-margin no-padding">
-      <div className="col-md-2 no-padding">
+      <div className="col-12 col-md-2 no-padding">
         <Status/>
         <Filters/>
         <Views/>
       </div>
-      <div className="col-md-10 no-padding">
+      <div className="col-12 col-md-10 no-padding">
         <Results/>
       </div>
     </div>
   </Provider>
 );
 const SearchViewsCmp = props => (
-    <div className="no-margin no-padding">
-      <div style={{width:250}}>
-        <div className={props.configuration.id === 'sorghum' ? 'sorghumbase-sidebar' : 'gramene-sidebar'}>
-          <Status/>
-          <Filters/>
-          {props.configuration.showViews && <Views/>}
-          <Auth/>
-        </div>
+    <div className="no-margin no-padding search-views-layout">
+      <div className={props.configuration.id === 'sorghum' ? 'sorghumbase-sidebar' : 'gramene-sidebar'}>
+        <Status/>
+        <Filters/>
+        {props.configuration.showViews && <Views/>}
+        <Auth/>
       </div>
-      <div style={{width:"calc(100% - 250px", left:250, position:'relative'}}>
+      <div className="search-views-content">
         <Results/>
       </div>
     </div>
@@ -421,7 +419,7 @@ const SearchUI_ = (store) => (
 );
 const SearchMenu = props => (
-  <div id="searchbar-parent" style={{width:'500px'}}>
+  <div id="searchbar-parent" style={{maxWidth:'500px', width:'100%'}}>
     <div id="searchbar">
       {/*<Form inline>*/}
         <SearchBar/>
@@ -465,14 +463,13 @@ const demo = (store) => (
           <Navbar.Brand href="/">
             <img
               src={`/static/images/${subsite}_logo.svg`}
-              height="80"
-              className="d-inline-block align-top"
+              className="d-inline-block align-top gramene-navbar-logo"
               alt="Gene Search"
             />
           </Navbar.Brand>
           <Navbar.Toggle aria-controls="basic-navbar-nav" />
           <Navbar.Collapse id="basic-navbar-nav">
-            <Nav className="mr-auto">
+            <Nav className="me-auto">
               <Switch>
                 <Route exact path="/" component={SearchMenu} />
                 <Route>

package/src/grapevine.html CHANGED Viewed

@@ -10,7 +10,7 @@
     <script async src="./static/gramene-dalliance/dalliance-all.js"></script>
     <script async src="https://plantreactome.gramene.org/DiagramJs/diagram/diagram.nocache.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="static/style.css">
     <link rel="apple-touch-icon" sizes="57x57" href="./static/icons/apple-touch-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="./static/icons/apple-touch-icon-60x60.png">

package/src/index.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Gramene Search</title>
     <script>
       window.gramene = {};

package/src/maize.html CHANGED Viewed

@@ -10,7 +10,7 @@
     <script async src="./static/gramene-dalliance/dalliance-all.js"></script>
     <script async src="https://plantreactome.gramene.org/DiagramJs/diagram/diagram.nocache.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="static/style.css">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1624628-15"></script>

package/src/rice.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Gramene Search</title>
     <script>
       window.gramene = {};

package/src/sorghum.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Gramene Search</title>
     <script>
       window.gramene = {};

package/src/static/gramene-dalliance/css/dalliance-scoped.css CHANGED Viewed

@@ -125,11 +125,11 @@
   background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                     -moz-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
-                    linear-gradient(135deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+                    linear-gradient(135deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
 }
 *.dalliance .loc-field {
-  width: 240px;
+  width: min(240px, 100%);
   margin-bottom: 0px;
 }
 *.dalliance .loc-status {

package/src/static/style.css CHANGED Viewed

@@ -1,8 +1,18 @@
 .subsite-header {
     background-color: #fcfeec;
-    height: 45px;
+    min-height: 45px;
     font-size: small;
 }
 .mdview h2 {
     scroll-margin-top: 120px;
+}
+/* Navbar logo: tall on desktop, shorter on mobile */
+.gramene-navbar-logo {
+    height: 60px;
+}
+@media (max-width: 767px) {
+    .gramene-navbar-logo {
+        height: 36px;
+    }
 }