imerss-bioinfo 1.0.0

package/docs/css/xetthecum.css

@@ -0,0 +1,526 @@
+:root {
+  --imerss-map-width: 500px;
+  --imerss-eco-colour: #DEE0B0;
+  --imerss-map-colour: #DDE8C8;
+}
+
+body {
+    margin: 0;
+}
+
+.fld-imerss-region-subtidal {
+    fill: url(#marine);
+    background-repeat: repeat;
+}
+
+.fld-imerss-region-lake-laughlin-lake {
+    fill: url(#lacustrine);
+    background-repeat: repeat;
+}
+
+.fld-imerss-region-wetland {
+    fill: url(#wetland);
+    background-repeat: repeat;
+}
+
+.fld-imerss-region-clearcut {
+    fill: url(#recently-harvested);
+    background-repeat: repeat;
+}
+
+.fld-imerss-region-pole-sapling {
+    fill: url(#pole-sapling);
+    background-repeat: repeat;
+}
+
+.fld-imerss-region-young-forest {
+    fill: url(#young-forest);
+    background-repeat: repeat;
+}
+
+.fld-imerss-region-mature-forest {
+    fill: url(#mature-forest);
+    background-repeat: repeat;
+}
+
+.fld-imerss-region-woodland {
+    fill: url(#woodland);
+    background-repeat: repeat;
+}
+
+
+.fl-xetthecum-banner {
+    margin: 0;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    padding-left: 1.5rem;
+    font-size: 2.5rem;
+    display: flex;
+    background: #EDEFE9 no-repeat;
+    background-size: cover;
+}
+
+.fld-imerss-banner-marine {
+    background-image: url(../img/Xetthecum/Marine_banner.jpg);
+}
+
+.fld-imerss-banner-freshwater {
+    background-image: url(../img/Xetthecum/Freshwater_banner.jpg);
+    color: white;
+}
+
+.fld-imerss-banner-forests {
+    background-image: url(../img/Xetthecum/Forests_banner.jpg);
+    color: white;
+}
+
+.fld-imerss-banner-woodlands-and-rock-outcrops {
+    background-image: url(../img/Xetthecum/Woodland_banner.jpg);
+    color: white;
+}
+
+.fld-imerss-banner-anthropogenic {
+    background-image: url(../img/Xetthecum/Anthropogenic_banner.jpg);
+}
+
+
+.fld-imerss-class-image-shoreline {
+    background-image: url(../img/Xetthecum/Intertidal.jpg);
+}
+
+.fld-imerss-class-image-subtidal {
+    background-image: url(../img/Xetthecum/Subtidal.jpg);
+}
+
+.fld-imerss-class-image-pole-sapling {
+    background-image: url(../img/Xetthecum/Conifer_Pole_Sapling.jpg);
+}
+
+.fld-imerss-class-image-mature-forest {
+    background-image: url(../img/Xetthecum/Mature_Conifer_Forest.jpg);
+}
+
+.fld-imerss-class-image-young-forest {
+    background-image: url(../img/Xetthecum/Young_Conifer_Forest.jpg);
+}
+
+.fld-imerss-class-image-wetland {
+    background-image: url(../img/Xetthecum/Wetland.jpg);
+}
+
+.fld-imerss-class-image-laughlin-lake {
+    background-image: url(../img/Xetthecum/Laughlin_Lake.jpg);
+}
+
+.fld-imerss-class-image-greig-creek {
+    background-image: url(../img/Xetthecum/Greig_Creek.jpg);
+}
+
+.fld-imerss-class-image-riparian {
+    background-image: url(../img/Xetthecum/Riparian.jpg);
+}
+
+.fld-imerss-class-image-coastal-bluff {
+    background-image: url(../img/Xetthecum/Coastal_Bluffs.jpg);
+}
+
+.fld-imerss-class-image-woodland {
+    background-image: url(../img/Xetthecum/Woodland.jpg);
+}
+
+.fld-imerss-class-image-agricultural {
+    background-image: url(../img/Xetthecum/Agricultural.jpg);
+}
+
+.fld-imerss-class-image-developed {
+    background-image: url(../img/Xetthecum/Developed.jpg);
+}
+
+.fld-imerss-class-image-rural {
+    background-image: url(../img/Xetthecum/Rural.jpg);
+}
+
+.fld-imerss-class-image-road {
+    background-image: url(../img/Xetthecum/Porlier_Pass_Road.jpg);
+}
+
+.fld-imerss-class-image-dock {
+    background-image: url(../img/Xetthecum/Dock.jpg);
+}
+
+.fld-imerss-class-image-eelgrass-beds {
+    background-image: url(../img/Xetthecum/Eelgrass.jpg);
+}
+
+
+.fl-imerss-container {
+    margin: 1.5rem 0.5rem 0.5rem 0.5rem;
+}
+
+.fld-imerss-map-holder {
+    background: var(--imerss-map-colour);
+}
+
+.fl-imerss-active-panel {
+    border: 3px solid #4F5346;
+}
+
+.fl-imerss-map-panel {
+    padding: 1rem 0rem 2rem 2rem;
+}
+
+.fl-imerss-map-panel .fld-imerss-panel-label {
+    position: unset;
+    padding-bottom: 1.5rem;
+}
+
+.fld-imerss-map-outer-panel {
+    background: var(--imerss-map-colour);
+    padding: 1rem 1rem 1rem 1rem;
+    margin: 1px; /* Fight strange layout bug on Chrome 76 */
+}
+
+.fld-imerss-infoPanel {
+    margin-left: 2.5rem;
+}
+
+/* Very odd that this doesn't work on the panel itself */
+.fld-imerss-infoPanel > * {
+    position: sticky;
+    top: 0;
+}
+
+.fld-imerss-infoPanel .fld-imerss-panel-label {
+    padding: 1rem 2rem 0.5rem 1rem;
+}
+
+.fld-imerss-map-community {
+    font-size: 1.7rem;
+    padding-bottom: 1rem;
+}
+
+.fld-imerss-map-class {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.fld-imerss-map-panel-block {
+    font-size: 1.5rem;
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-bottom: #ccc 2px solid;
+}
+
+.fld-imerss-map-class-tagline {
+    font-size: 1.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.fld-imerss-map-class-se-col {
+    font-weight: bold;
+}
+
+.fld-imerss-map-class-se-val {
+    padding-bottom: 0.5rem;
+    text-indent: 1rem;
+}
+
+.fl-imerss-map-info-panel {
+    width: 28rem;
+    margin-left: 2rem;
+}
+
+.fld-imerss-map-legend > span {
+    display: inline-block;
+    font-size: 1.3rem;
+    margin-left: 2rem;
+    margin-bottom: 0.4rem;
+}
+
+.fld-imerss-map-legend-keys {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 500px;
+}
+
+.fld-imerss-legend-block {
+}
+
+.fld-imerss-legend-block-name {
+    margin-top: 0.7rem;
+    display: inline-block;
+    width: 8rem;
+    text-indent: -1rem;
+    padding-left: 1.5rem;
+}
+
+
+.fld-imerss-legend-row {
+    padding: 2px;
+}
+
+.fld-imerss-legend-row.fld-imerss-selected {
+    background: #FCFF63;
+}
+
+
+.fld-imerss-legend-icon {
+    display: inline-block;
+    width: 2rem;
+    height: 1rem;
+}
+
+.fld-imerss-legend-row.fld-imerss-selected .fld-imerss-legend-icon {
+    background-image: url(../img/selected-tick.svg);
+    background-size: 1rem;
+    background-position: center center; 
+    background-repeat: no-repeat;
+}
+
+.fld-imerss-legend-preview {
+    display: inline-block;
+    width: 1.2rem;
+    height: 1.2rem;
+    border: 1px solid #353030;
+    margin-right: 5px;
+    position: relative;
+    top: 3px;
+}
+
+.fld-imerss-legend-label {
+    display: inline-block;
+    font-size: 0.9rem;
+    width: 8rem;
+    position: relative;
+    top: -2px;
+}
+
+.fld-imerss-map {
+    height: 450px;
+}
+
+.fld-imerss-tabs {
+    position: relative;
+}
+
+.flc-imerss-autocomplete-row {
+    position: absolute;
+    top: 3rem;
+    left: 8rem;
+    z-index: 999;
+}
+
+#fli-imerss-autocomplete {
+    background: white;
+}
+
+#fli-tab-sunburst, #fli-tab-checklist, #fli-tab-simple-checklist {
+    background: var(--imerss-eco-colour);
+}
+
+#fli-tab-sunburst {
+    padding-top: 4rem;
+}
+
+.fl-imerss-checklist-spacer {
+    height: 4rem;
+}
+
+/* We've inserted the "spacer" between the real panel and the contents so it can scroll independently of the
+ * autocomplete */
+#fli-tab-checklist.ui-tabs-panel, #fli-tab-simple-checklist.ui-tabs-panel {
+    padding: 0;
+}
+
+.ui-tabs .ui-tabs-panel {
+    border-bottom: 2px solid #4F5346;
+    border-left: 2px solid #4F5346;
+    border-right: 2px solid #4F5346;
+    border-top: 2px solid #4F5346;
+    margin: 1px;
+}
+
+.ui-tabs {
+    padding: 0;
+}
+
+/** Temporary until we can use ordinary 3px border on tabs **/
+.fld-imerss-tabs {
+    width: 1031px;
+}
+
+.fl-imerss-checklist-holder {
+    padding: 1em 1.4em;
+}
+
+.flc-checklist-hulq-name {
+    font-weight: bolder;
+}
+
+.fl-imerss-taxa .fld-imerss-panel-label {
+    position: absolute;
+    right: 1.5rem;
+}
+
+.fld-imerss-panel-label {
+    font-weight: bold;
+    font-size: 1.7rem;
+    top: 1rem;
+}
+
+#fli-tab-sunburst {
+    padding-top: 3rem;
+}
+
+.fld-imerss-taxonDisplay {
+    margin-top: 4.4rem;
+    border: none;
+}
+
+.fl-taxonDisplay-row {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    border-bottom: #888 1px solid;
+}
+
+.fl-taxonDisplay-row.fl-taxonDisplay-expanded {
+    border-bottom: none;
+}
+
+.fl-taxonDisplay-row .fl-taxonDisplay-row {
+    border-bottom: none;
+}
+
+/** Undo this insane rule from imerss-viz.css - this whole system needs to be rewritten **/
+.fl-taxonDisplay-row.fld-taxonDisplay-expandable-remainder.fl-taxonDisplay-runon-remainder.fl-taxonDisplay-row {
+    border-bottom: #888 1px solid;
+}
+
+.fl-taxonDisplay-rank .fl-taxonDisplay-key {
+    font-size: 1.5rem;
+    font-weight: bold;
+    padding-left: 0;
+    padding-bottom: 5px;
+}
+
+.fl-taxonDisplay-rank span {
+    display: inline-block
+}
+
+.fl-imerss-right-column {
+    width: 544px;
+}
+
+/*
+.fl-imerss-photo {
+    width: calc(448px + 6rem);
+}
+*/
+
+.fld-imerss-map-outer-panel .fl-imerss-photo {
+    margin-left: -1rem;
+    margin-right: -1rem;
+    margin-bottom: 1rem;
+}
+
+.fld-imerss-taxonDisplay-wrapper {
+    background: var(--imerss-eco-colour);
+    width: 500px;
+}
+
+.fld-imerss-tabs .ui-state-active.ui-tabs-active a {
+    background: var(--imerss-eco-colour);
+}
+
+.fld-imerss-tabs .ui-state-active.ui-tabs-tab {
+    background: var(--imerss-eco-colour);
+}
+
+.fld-imerss-map-outer-panel-wrapper {
+    background: var(--imerss-map-colour);
+    width: 500px;
+}
+
+.ui-widget-header { /* Override theme to avoid clutter in tab top */
+    background: none;
+    border: none;
+}
+
+.ui-widget-content {
+    border: none;
+}
+
+.ui-widget.ui-widget-content {
+    border: none;
+}
+
+.fl-xetthecum-audio {
+    width: 2.5rem;
+    height: 2.5rem;
+    padding-bottom: 0.4rem;
+    margin-left: 1rem;
+    border: none;
+    background: none;
+    background-image: url(../img/audio.svg);
+    background-size: 2.5rem;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+.fl-xetthecum-small-audio {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding-bottom: 0.2rem;
+    margin-left: 0.5rem;
+    border: none;
+    background: none;
+    background-image: url(../img/audio.svg);
+    background-size: 1.5rem;
+    background-position: center center; 
+    background-repeat: no-repeat;
+}
+
+.fl-xetthecum-audio:hover, .fl-xetthecum-small-audio:hover {
+    outline: 1px solid black;
+    outline-offset: 1px;
+}
+
+.fl-taxonDisplay-value iframe {
+    margin-top: 5px;
+}
+
+
+.fld-imerss-taxonDisplay {
+    margin-top: 0;
+    width: auto;
+}
+
+.fl-taxonDisplay-wikipediaSummary {
+    display: block;
+    margin-left: 2.5rem;
+    margin-right: 1rem;
+    width: auto;
+}
+
+/*
+on .ui-tabs .ui-tabs-nav li.ui-tabs-active
+will move it down so that it can overwrite border
+
+    z-index: 999;
+    position: relative;
+    top: 3px;
+
+and then e.g. on the tab #fli-tab-checklist
+    border: 2px dashed black;
+
+To straighten out first tab:
+
+.ui-tabs .ui-tabs-nav
+padding: 0
+
+*/