qiprofile/app/stylesheets/image.styl

Quantitative Imaging Profile ( QiPr) web application

//**  The Image Display styles. **//

// TODO - is the following style useful? If not, then delete it.
//.qi-image
//  position relative
//  display inline-block
//  height 44em
//  width 100%

// TODO - try to avoid absolute size and convert 512px to %
//   in the following two styles.
//
// TODO - convert occurences of px >= 10 to em in all style files.

// TODO - put volume CSS on the volume branch and delete from the
// master.
//
// The volume rendering styles.
.qi-volume-display
  position relative
  width 512px
  height 512px
  margin-top 10px
  margin-bottom 10px

.qi-volume-display-ctrl
  position absolute
  right 0
  min-width 20em
  font-size smaller
  & .row
    vertical-align middle
    margin 0.5em


// The slice display control styles.
.qi-slice-ctrl-panel
  position absolute
  right 0
  min-width 28em
  font-size smaller
  & .row
    padding 0.3em 1em 4em 0.4em
    text-align center
  & .qi-slider
    margin 0.4em 0 0 0.5em

.qi-slice-sel
  margin 0.5em 0 0.5em 0

// Override some of the noUiSlider styles.
.noUi-horizontal
  height 14px
  border 1px solid Silver
  .noUi-handle
    width 34px
    height 20px
    top -4px
    left -17px
    border-radius 18px
    background-color Peru
    cursor pointer
    &:hover
      background-color Chocolate

.noUi-handle:before, .noUi-handle:after
  height 10px
  top 4px
  background-color Black

.noUi-value, .noUi-tooltip
  font-size 12px

.noUi-value
  margin-top 10px


// The loading indicator.
.qi-loading
  display inline-block
  font-size larger
  color IndianRed

// The slice rendering styles.
.qi-slice-viewport
  position absolute
  top 0
  left 0
  width 512px
  height 512px


// The obsolete slider styles.
//-.qi-slider-label
//-  padding-top .5em

// This style is adapted from
// http://prajwalkman.github.io/angular-slider/angular-slider/angular-slider.css
// with the following modifications:
// * The pointer width and height are aligned so they are not off-center
// * The pointer background colors are consistent with the app
//
// TODO - cull the styles as follows:
// * Remove CSS attributes that are superfluous, e.g. width 100%,
//   and visually confirm that the display is still correct
// * autoprefixer-stylus should take care of the background variants
// * change the px to comparable em
// * color should be a name
// * the pointer can probably be subsumed by common.styl .qi-btn
// * Add comments, e.g. what is bubble?
//-.qi-slider
//-  position relative
//-  height 1em
//-  width 100%
//-  margin 2em 0 1em 0
//-  span
//-    white-space nowrap
//-    &.bar
//-      height 100%
//-      z-index 0
//-      -webkit-border-radius 1em/1em
//-      border-radius 1em/1em
//-      background -webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c0c0), color-stop(1, #8d8d8d))
//-      background -webkit-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%)
//-      background -moz-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%)
//-      background -o-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%)
//-      background -ms-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%)
//-      background linear-gradient(to bottom, #c0c0c0 0, #8d8d8d 100%)
//-      -webkit-box-shadow inset 2px 2px 5px
//-      box-shadow inset 2px 2px 5px
//-      &.selection
//-        z-index 1
//-        background -webkit-gradient(linear, left top, left bottom, color-stop(0, #13b6ff), color-stop(1, #00a8f3))
//-        background -webkit-linear-gradient(top, #13b6ff 0, #00a8f3 100%)
//-        background -moz-linear-gradient(top, #13b6ff 0, #00a8f3 100%)
//-        background -o-linear-gradient(top, #13b6ff 0, #00a8f3 100%)
//-        background -ms-linear-gradient(top, #13b6ff 0, #00a8f3 100%)
//-        background linear-gradient(to bottom, #13b6ff 0, #00a8f3 100%)
//-        -webkit-box-shadow none
//-        box-shadow none
//-    &.pointer
//-      cursor pointer
//-      width 22px
//-      height 22px
//-      top -8px
//-      background-color #fff
//-      border 1px solid #000
//-      z-index 2
//-      -webkit-border-radius 1em/1em
//-      border-radius 1em/1em
//-      &:after
//-        content ''
//-        background-color Peru
//-        width 8px
//-        height 8px
//-        position absolute
//-        top 6px
//-        left 6px
//-        -webkit-border-radius 1em/1em
//-        border-radius 1em/1em
//-      &:hover
//-        &:after
//-          background-color Chocolate
//-      &.active
//-        &:after
//-          background-color Chocolate
//-    &.bubble
//-      cursor default
//-      top -22px
//-      padding 1px 3px 1px 3px
//-      font-size smaller
//-      &.selection
//-        top 15px
//-      &.limit
//-        color #808080