grnsight/web-client/public/stylesheets/grnsight.styl

Web app and service for visualizing models of gene regulatory networks

//CHANGE ME IF YOU WANT TO CHANGE CSS
p
  margin: 0

.zoomLabel
  font-size: 9px
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.submission
  margin-left: 10px

.file-input-name
  font-weight: normal

.grnsight-container
  left: 250px
  top: 53px
  border:2px solid #9A9A9A
  position: absolute
  stroke: #fff
  stroke-width: 0.5px
  transition: opacity 0.25s

.scale-and-scroll
  position: absolute
  bottom: 0px
  left: 0px
  z-index: 1
  cursor: default
  margin-left: 15px

.scrollTable
  text-align: center
  table-layout: fixed
  margin-bottom: 10px

.scrollTable td
  width: 40px
  height: 40px

.scrollBtn
  border: 1px solid #AAA
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.movementArrow
  font-weight: bolder;
  font-size: 24px;

.zoomTable
  margin-bottom: 5px
  text-align: center
  table-layout: fixed

.zoomTable td
  height: 20px
  width: 120px

.zoomCenter
  position:absolute
  width: 2px
  z-index: -1;
  background-color: #AAA
  height: 25.5px
  left: 59.5px
  top: 148.5px

.containerS
  width: 1104px
  height: 648px

.containerM
  width: 1414px
  height: 840px

.containerL
  width: 1920px
  height: 1080px

.sidebar
	width: 225px
	margin-left: 10px

#lockSlidersButton
  margin-bottom: 15px

form label, form span
  margin: 5px

.navbar
  top: 1px
  margin-right: auto
  margin-bottom: 10px
  
.dropdown-menu > li > a.upload
  padding-top: 7px
  padding-bottom: 5px
  padding-left: 10px
  padding-right: 0

.dropdown-menu > li > a.demo
  padding-top: 7px
  padding-left: 30px
  padding-bottom: 5px

.dropdown-menu > li > a.create-network
  padding-top: 7px
  padding-bottom: 0px
  padding-left: 30px
  margin-bottom: -5px

.dropdown-menu > li > a.upload > label
  font-weight: normal
  margin-bottom: 0
  padding-left: 22px
  padding-right: 20px
  width: 100%

.dropdown-menu > li > a.upload > input[type=file], #upload-network
  display: none

#fileName
  color: #000000
  cursor: text

.not-yet-implemented, .nav > li.not-yet-implemented
  display: none

nav.navbar.navbar-default
  background-color: #dfebe5
  border-color: #dfebe5

.navbar-default .navbar-nav>li>a
  color: #000000

.navbar-default .navbar-nav>li>a:hover
  color: #696969

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus
  background-color: #16693F
  color: #FFFFFF

.open
  font-weight: normal

.navbar-right.graph-metadata-container > li
  margin-top: 4px
  margin-bottom: 4px

.info
  font-size: 13px

.forceVal
  font-size: 12px
  display: inline-block

.dropdown-menu > li > a:hover, .dropdown-menu > #node-coloring-navbar-options > li > a:hover
  background-color: #dfebe5
  text-decoration: none;

#undoResetButton
  margin-top: 5px

#mouseOver
  margin-top: 10px
  text-align: center

.btnSidebar
  width: 100%

.buttonPairContainer
  display: flex
  justify-content: space-between
  margin-top: 0px

.panelDropdownContainer
  margin-top 0px
  padding: 0px 10px 10px 0px
  text-align: left

.panelGeneSearchBar
  display: flex
  width: 102.5%

.generateNetworkContainer
  padding: 10px 0px
  display: flex
#panel-gene-search-bar
  width: calc(100% + 22px)
#generateNetworkButton
  width: 100%

.NetworkGenesForm
  padding-left: 0px

.buttonPairContainer > input[type=button], .buttonPairContainer > button
  padding: 6px 10px
  width: calc(50% - 2px)

.buttonPairContainer > input[type=button]:last-child, .buttonPairContainer > button:last-child
  margin-left: 5px

.panel-body
  padding: 0px 10px 10px

.forceParameterContainer
  display: flex
  flex-direction: column
  margin-bottom: 5px

.labelWithValueContainer
  align-items: baseline
  display: flex
  justify-content: flex-start
  margin-top: 10px

.edgeControl
  align-items: center
  display: flex
  justify-content: flex-start

.edgeControl > input[type=radio], .edgeControl > input[type=checkbox]
  margin: 0

.edgeControl > label
  font-size: 13px
  margin: 5px

#grayThresholdInput
  margin-bottom: 5px

#warningsModal #accordion
  margin-bottom: 0

// Many thanks to Skelly from http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing
// for the solution to creating submenus in bootstrap!

.dropdown-submenu
    position:relative

.dropdown-submenu>.dropdown-menu, .dropdown-menu > #node-coloring-navbar-options dropdown-submenu
    top:0
    left:100%
    margin-top:-6px
    margin-left:-1px
    -webkit-border-radius:0 6px 6px 6px
    -moz-border-radius:0 6px 6px 6px
    border-radius:0 6px 6px 6px

.dropdown-submenu:hover>.dropdown-menu, #node-coloring-navbar-options .dropdown-submenu:hover>.dropdown-menu
    display:block

#node-coloring-navbar-options .disabled:hover>.dropdown-menu
    display:none

.dropdown-submenu>a:after
    display:block
    content:" "
    float:right
    width:0
    height:0
    border-color:transparent
    border-style:solid
    border-width:5px 0 5px 5px
    border-left-color:#cccccc
    margin-top:5px
    margin-right:-10px

.dropdown-submenu:hover>a:after
    border-left-color:#ffffff

#node-coloring-navbar-options>li>a
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;

#node-coloring-navbar-options>.disabled>a, #node-coloring-navbar-options
    color: #999;
    cursor: not-allowed;
    text-decoration: none;
    aria-disabled: true;

.dropdown-menu > #node-coloring-navbar-options > .disabled > a:hover
    background-color: #FFFFFF;

.dropdown-submenu.pull-left, #node-coloring-navbar-options .dropdown-submenu.pull-left
    float:none

#node-coloring-navbar-options
    cursor: pointer

.dropdown-submenu.pull-left>.dropdown-menu, .dropdown-submenu.pull-left, .dropdown-menu #node-coloring-navbar-options .dropdown-submenu.pull-left
    left:-100%
    margin-left:10px
    -webkit-border-radius:6px 0 6px 6px
    -moz-border-radius:6px 0 6px 6px
    border-radius:6px 0 6px 6px

.dropdown a.with-input, #node-coloring-navbar-options a.with-input
    display:flex
    align-items:center
    user-select:none

.dropdown a.with-input>*:last-child, #node-coloring-navbar-options a.with-input > *:last-child
    margin-left:auto

// Graph statistics styling is due to absolute position and size of grnsight-container
.graph-statistics-container
  margin-top: 256px
  margin-left: 15px
  width: 1335px // 1335 + 15 = 1350

text.weight
    cursor: default
    font-size: 20px
    font-weight: 900
    fill: black
    opacity: 0.0
    stroke: #fff
    stroke-width: 0.5px
    transition: opacity 0.25s
    visibility: hidden

text.weight.visible
    opacity: 1.0
    visibility: visible

#weightsSideLabel
  line-height: 3px;
  font-size: 13px;

.sidebarPanelHeader
  margin: 10px 10px 10px
  font-weight: bold
  font-size: 18px

.sidebarPanelHeaderSpecies
  border-color: #ddd
  font-weight: bold
  font-size: 12px
  width: 100%
  
.sidebarPanelHeaderID
  margin: 0px 5px 5px
  font-weight: bold
  font-size: 12px
  width: 100%

.sideHeader
    font-weight: bold
    font-size: 13px
    margin-bottom: 4px
    margin-top: 6px

.centered-sideHeader
    font-weight: normal
    font-size: 13px
    margin-bottom: 4px
    margin-top: 6px
    text-align: center

.nodeColoringSidebarBody
  margin-top: 6px

.node-coloring select
    width: 100%

.node-coloring.disabled
    color: #AAA

.data-sidebar select
    width: 100%

.data-sidebar.disabled
.species-display select
    width: 100%

.speciesIdentifiedDropdown
    font-weight: normal

.panelDropdown
    width: 100%
    font-weight: normal

.currentSpecies
    font-weight: bold

label.sideLabel
  font-weight: normal;

path.mousezone
    opacity: 0.0

.logFoldChangeControlContainer
  display: flex
  justify-content: space-between
  margin-top: 0px

.logFoldChangeControlContainer > button:last-child
  margin-left: 5px
  padding-bottom: 0
  padding-top: 0

.logFoldChangeMaxValue
  flex-grow: 1
  max-width: 50%

.normalization-form
  width: 100%
  margin-bottom: 5px

.cursorGrab
    cursor: -webkit-grab;
    cursor: grab;

.cursorGrabbing
    cursor: -webkit-grabbing;
    cursor: grabbing;

.btn-norm
    display: inline-block;
    width: 100px;

#grayLabel
    margin-top: 10px;

#normLabel
  margin-bottom: 5px
  margin-top: 10px

#gray-edge-threshold-menu
    margin-right:0.5ex

.menu-subheader
    padding-left: 12px;
.menu-subheader
    padding-left: 12px;

#force-graph input[type=range]
    box-shadow: none
    margin-top: -12px

.minimum-zoom-display
    margin-right: 0.25rem

.maximum-zoom-display
    margin-left: 0.25rem

.edge-weight-sidebar.disabled
    color: #AAA

#activateExpressionDBLabel
    text-align: center

#expressionDBcheckbox
    text-align: center

.expression-db-loader
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #aeaeae;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite
    margin: auto
    display: none

@keyframes spin 
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

.expression-db-loader-text
    font-weight: bolder
    text-align: center
    margin-top: 15 px
    display: none

#Saccharomyces-cerevisiae
  color: #AAA
  margin-left: 20px


.create-network-label
  font-weight: normal

.sub-divider
  border-top: 1px dotted #bbb
  width:95%
  margin: auto

.network-source-section
  margin-left: 12px

#network-source
  width: 60%
  text-align: left


#network-source-label
  margin-left: 0px

.long-sub-divider
  border-top: 1px dotted #bbb
  margin: 0px 0px 10px

.network-button-container
  border:1px solid #CCC
  border-radius: 5px
  height: 45px

  justify-content: center
  display: flex

.network-button
  width:100%
  margin:5px 0px
  height:34px


#upload-network
  border: 2px solid #6c5ce7
  padding: .2em .4em
  border-radius: .2em
  background-color: #a29bfe
  transition: 1s


#upload-network:hover 
  background-color: #81ecec
  border: 2px solid #00cec9

.glyphicon
  min-width: 22px

.sidebar-glyphicon
  margin-right: 0px

.network-button.disabled
  color: #AAA

.network-dropdown
  width: 50%

#enter-search
  margin-left: 0px
  height: 100%
  margin-bottom: 2px
  padding: 0
  border-color:#aeaeae

#network-search-bar
  margin-right: 0px
  height: 100%
  border-radius:5px
  border: 1px solid #aeaeae

.custom-network-gene
  border:1px solid #CCC
  border-radius: 5px
  height: 50px
  padding: auto
  display: flex
  justify-content: center
  align-items:center
  flex-direction: column
  width: 100%
  margin:5px

#custom-network-genes-container
  display: grid
  column-gap: 20px
  row-gap: 5px
  grid-template-columns: 1fr 1fr 1fr
  padding: 10px 5px

#submit-network
.custom-network-gene-display-id
  font-size: 14px

.custom-network-gene-id
  color: #BBB
  font-size: 12px

.network-type
  font-size: 12px
  display: inline-block
  font-style: italic

.network-source-section-title
  font-weight: bold
  font-size: 14px

.network-source-label
  margin-left: 0px

.hidden-button
  display:none

.modal-footer-div
  display: flex

.modal-footer-div >div:last-of-type {
  margin-left: auto;
}

.export-excel-workbook-sheet-option-subheader
  margin-left: -20px

.export-radio-label.disabled
  color: #AAA

# demoSourceDropdown > option { 
  direction: ltr; 
  }
# networkModeDropdown > option {
  font-size: 14px
}

.panelDropdownContainer > select {
  right: auto;
  direction: ltr;
}

option {
  text-align: left
}

.panelDropdownContainer .btn 
  text-align: left

upload-network
  text-align: left