qiprofile/app/stylesheets/base.styl

Quantitative Imaging Profile ( QiPr) web application

//** The base CSS style overrides. **//

body
  margin 1em
  font-family 'Open Sans', sans-serif

h1, h2, h3
  margin 0
  padding 0

a
  text-decoration none
  color Peru
  &:hover
    color Chocolate
    cursor pointer
  & img
    border none
  & > text
    fill Peru
  &:hover > text
    fill Chocolate
    text-decoration none

// Override the bootstrap button to change the left margin
// from the odd setting -1px to .5em.
.btn-group
  .btn + .btn
    margin-left 0.5em

// Override the bootstrap accordian panel heading style
// to emulate the preceding hyperlink style.
.panel-heading
  & a
    color Peru
    &:hover
      color Chocolate
      text-decoration none

// Override the bootstrap panel heading background color.
.panel-default > .panel-heading
  background-color MintCream

// Override the bootstrap panel style to remove the superfluous
// margin, but add a slightly larger border the same color as the
// surrounding border.
.panel-group
  // Remove the bootstrap bottom margin.
  margin-bottom 0
  // Add a thin border to a nested panel group.
  & .panel-group
    border-top: 1px solid SlateGray
  // Add a thin border to separate panel groups.
  & .panel + .panel
    border-top: 1px solid SlateGray
    margin-top: 0

// Reduce the bootstrap panel body padding from 15 to 5.
.panel-body
  padding 5px

// Change the SVG hyperlink cursor to a pointer.
svg
  a
    cursor pointer
    pointer-events all

hr
  display none

// TODO - Commenting out the settings below wraps the modal
// Registration Protocol pop-up right column. Why is that?
// No wrap should be the table default.
//
// TODO - for all tables, use:
//   table.table.table.qi-table
// and any other detailed CSS modifier styles as appropriate.
// Then double-check that all tables format correctly.
// If any of the settings below are useful as reasonable
// defaults, then fold only those settings into the
// common.styl .qi-table and delete the commented-out
// lines below. The th settings are reasonable defaults,
// the table border is reasonable, but setting it adds an
// undesirable border to the Image Detail page overlay
// selection. Try the changes on all tables, e.g. in the
// Image Detail page, examine the Overlays table, modal
// pop-up Modeling Info table and Registration Protocol
// table all preserve their formatting.
//
// table
//   border-collapse collapse
//
// table, th, td
//   border 1px solid Black
//
// th
//   padding 0.5em
//   font-size 110%
//   vertical-align bottom
//
// td
//   padding 0 0.5em 0 0.5em
//
// ul, ol
//   margin-bottom 0.6em

// The following style is necessary per
// https://angular-ui.github.io/bootstrap/
.nav, .pagination, .carousel, .panel-title a
  cursor: pointer


// Undo Bootstrap changing the color of a small
// span in the heading.
for n in 1 2 3 4 5
  h{n}
    .qi-small
      color Black