
/* 
Styles to be applied generally across the UI
*/

/* Tags */

html
  repeatingBg('/admin/ui/images/gui-bg.jpg', darkGray)

body
  padding : 0

a
  text-decoration : none

  &:visited
    color : lightGray

h1, h2, h3
  display : block

h1
  hSize(48px, 0, 5px)
  padding-left  : 15px
  padding-right : 15px

h2
  hSize(38px, 0, 12px)
  color : lightGray

h3
  copy-font()
  hSize(20px, 0, 8px)
  color      : mediumGray
  font-style : italic
  
h4
  hSize(16px, 0, 3px)

nav
  background : transparent
  float      : right

table
  dimensions(100%, auto)
  border-collapse : collapse

td
  monospace()
  padding        : 6px 5px 6px
  vertical-align : middle

tr:first-child td
  padding-top : 8px
  
th
  text-align : left
  padding    : 0 5px 5px

/* End Tags */

/* IDs & Classes */

.spinner-box
  corners()
  text-align : center
  background : rgba(255, 255, 255, .05)
  padding    : 25px

  img, h4
    vertical-align : middle

  h4
    opaque(.8)
    display      : inline-block
    padding-top  : 6px
    padding-left : 10px
    line-height  : 1.2

  &.loading-route
    margin-top  : 50px
    height      : 250px
    line-height : 250px

    img, h4
      display     : inline
      line-height : 250px
      margin-top  : 0
      padding-top : 0


#header
  dimensions(100%, 53px)
  border-bottom : 1px solid lightWhite
  background    : #171717
  margin        : 0 0 22px 0
  position      : fixed
  top           : 0
  left          : 0
  z-index       : 500
  
#navbar
  dimensions(auto, 49px)
  gradient(#606060, #383838)
  vendor('box-shadow', inset 0 1px 2px lightWhite)

#nav-ul
  dimensions(auto, 49px)

.nav-li
  gui-text-bold()
  dimensions(63px, 49px)
  gradient(#606060, #3a3a3a)
  vendor('box-shadow', inset 0 1px 2px lightWhite)
  border-left : 1px solid #171717
  float       : right
  position    : relative
  
  &:hover
    gradient(lighten(#606060, 7%), lighten(#3a3a3a, 7%))
    
    a
      opaque(1)
    
  a
    opaque(.6)


#nav-snapshot  a { background-position : 15px -343px }
#nav-cluster   a { background-position : 16px 10px   }
#nav-ring      a { background-position : 15px -39px  }
#nav-objects   a { background-position : 14px -90px  }
#nav-mapreduce a { background-position : 14px -140px }
#nav-graphs    a { background-position : 14px -192px }
#nav-logs      a { background-position : 14px -248px }
#nav-support   a { background-position : 14px -300px }
#nav-nodes     a { background-position : 15px -392px   }

.nav-item
  dimensions(63px, 49px)
  background  : url('/admin/ui/images/nav-icons.png') -100px 100px no-repeat transparent
  display        : block
  font-size      : 18px;
  vertical-align : middle
  
.indicator
  dimensions(63px, 4px)
  vendor('box-shadow', inset 0 1px 2px rgba(255, 255, 255, .4))
  display    : block
  background : offlight
  border-top : 1px solid #171717
  position   : absolute
  bottom     : 0
  left       : 0
    
.nav-li.active
  vendor('box-shadow', inset 0 0 18px rgba(0, 0, 0, .7))
  background : #363636
  
  a
    opaque(1)

  span
    vendor('box-shadow', 0 0 20px riakorange)
    gradient(lightorange, riakorange)

.nav-li .nav-item:hover
  cursor : pointer

#riak-control-logo
  dimensions(224px, 42px)
  display    : block
  background : url('/admin/ui/images/riak-control-logo.png') right bottom no-repeat transparent
  float      : left

#wrapper
  dimensions()
  background : transparent
  margin     : 75px auto 8px
  z-index    : 1

#content-well
  overflow      : hidden
  background    : transparent
  padding       : 5px 25px 0
  margin-bottom : 50px

#title-container, footer
  text-align : center

.side-line, .title-box
  vertical-align : top
  float          : left

.side-line
  dimensions(26%, 30px)
  border-bottom : 1px solid lightWhite
  
.title-box
  dimensions(48%, auto)
  padding       : 0 0 8px
  border-bottom : 1px solid lightWhite
  position      : relative

.vert-border
  dimensions(1px, 100%)
  display    : block
  background : lightWhite
  position   : absolute
  top        : 0

.vert-border-left
  @extend .vert-border
  left : 0

.vert-border-right
  @extend .vert-border
  right : 0

footer
  padding       : 0 25px 0
  margin-bottom : 25px

  .title-box
    dimensions(16%, auto)
    border-bottom : none
    margin-bottom : 25px
    
  .side-line
    dimensions(42%, 25px)

#basho-logo
  display    : block
  background : transparent

/* Ende IDs & Classes */

/* CODE FOR DROPDOWNS */

.gui-dropdown-wrapper
  dimensions(auto, 30px)
  background : url('/admin/ui/images/dropdown-left.png') left top no-repeat transparent
  position   : relative
  max-width  : 250px

.gui-dropdown-wrapper.long
  dimensions(292px, auto)
  max-width : 1000px

.gui-dropdown-bg
  dimensions(auto, 22px)
  headline-font()
  padding    : 8px 0 0 5px
  font-size  : 14px
  background : url('/admin/ui/images/dropdown-bg.png') left top repeat-x transparent
  margin     : 0 28px 0 10px

.gui-dropdown-cap
  dimensions(30px, 30px)
  absoluteRight(0, 0)
  background : url('/admin/ui/images/dropdown-right.png') right top no-repeat transparent

.gui-dropdown
  dimensions(100%, 30px)
  opaque(0)
  border     : 0
  outline    : none
  float      : left
  margin-top : -30px

/* END CODE FOR DROPDOWNS */

/* CODE FOR POINT BUTTONS */

.gui-point-button, .gui-rect-button, .gui-point-button-right
    dimensions(137px, 40px)
    display    : inline-block
    cursor     : pointer
    border     : 0
    margin-top : 3px

.gui-point-button       { background: url('/admin/ui/images/pointbutton-sprite.png') left top no-repeat transparent; }
.gui-point-button-right { background: url('/admin/ui/images/pointbutton-right-sprite.png') left top no-repeat transparent; }
.gui-rect-button        { background: url('/admin/ui/images/rectbutton-sprite.png')  left top no-repeat transparent; }

.gui-button-msg
  headline-bold()
  font-size   : 15px
  display     : block
  padding-top : 8px
  text-align  : center

.gui-point-button-right .gui-button-msg
  padding-right : 11px

.gui-point-button:hover,  .gui-rect-button:hover, .gui-point-button-right:hover
  background-position : left -40px

.gui-point-button:active,       .gui-point-button.pressed,
.gui-rect-button:active,        .gui-rect-button.pressed,
.gui-point-button-right:active, .gui-point-button-right.pressed
  background-position : left -80px !important

.gui-point-button:active        .gui-button-msg, 
.gui-point-button.pressed       .gui-button-msg,
.gui-rect-button:active         .gui-button-msg, 
.gui-rect-button.pressed        .gui-button-msg,
.gui-point-button-right:active  .gui-button-msg,
.gui-point-button-right.pressed .gui-button-msg { padding-top : 9px; }

input.gui-point-button, input.gui-rect-button, input.gui-point-button-right
  padding-bottom : 12px
  
input.gui-point-button:active, input.gui-rect-button:active, input.gui-point-button-right:active
  padding-bottom : 9px

.button-column
  dimensions(150px, auto)

/* END CODE FOR POINT BUTTONS */

/* CODE FOR TOGGLE SWITCHES */

.gui-switch
  dimensions(78px, 37px)
  background     : url('/admin/ui/images/hide-show-toggle.png') no-repeat transparent
  display        : inline-block
  vertical-align : middle
  
  &.on
    background-position : left top
    
  &.off
    background-position : left bottom

/* END CODE FOR TOGGLE SWITCHES */

/* CODE FOR CHECKBOXES AND RADIO BUTTONS */

.gui-checkbox-wrapper, .gui-radio-wrapper
  dimensions(auto, 24px)
  background     : url('/admin/ui/images/checkbox-sprite.png') left top no-repeat transparent
  vertical-align : middle
  margin-top     : 5px

  &.default
    background-position : left bottom
  
  span, label
    headline-bold()
    display    : inline-block
    margin     : 5px 0 0 8px
    color      : lightGray

    &.serif
      copy-font()
      font-weight : normal
      color       : mediumGray
      font-style  : italic

.gui-radio-wrapper
  background : url('/admin/ui/images/radio-sprite.png') left top no-repeat transparent

.gui-checkbox, .gui-radio
  dimensions(25px, 24px)
  opaque(0)
  display : inline-block
  float   : left
  margin  : 0  

.gui-checkbox-wrapper .gui-text, .gui-radio-wrapper .gui-text
  dimensions(auto, 24px)
  display      : block
  float        : left
  padding-left : 5px
  font-size    : 15px

/* END CODE FOR CHECKBOXES AND RADIO BUTTONS */

/* CODE FOR PAGINATION */
.pagination
  text-align  : center
  font-size   : 12px
  cursor      : pointer
  padding-top : 25px
  
  li
    corners()
    display       : inline-block;
    background    : #1d1d1d
    padding       : 2px
    margin        : 0 1px 10px
    border-bottom : 1px solid lightWhite
    
  li.dots
    background     : none
    border         : 0
    letter-spacing : 1px
    padding        : 2px 4px

.pagination-bottom
  margin-bottom : 36px
  margin-top    : 25px

.paginator
  headline-font()
  corners(3px)
  gradient(#616161, #434343)
  color      : #fff
  display    : block;
  border-top : 1px solid #777
  cursor     : pointer
  padding    : 3px 8px 4px

  &:hover
    gradient(#777, #434343)

  &:active
    background : #535353
    cursor     : pointer

.paginator.pageNumber
  opaque(.4)

.paginator.pageNumber:hover, .paginator.pageNumber:active, .pageNumber.active
  opaque(1)

.pagination li.disabled .paginator:hover, .pagination li.disabled .paginator:active, .pageNumber.active:hover, .pageNumber.active:active
  gradient(#616161, #434343)
  cursor : default

/* END CODE FOR PAGINATION*/

/* CODE FOR GENERAL GUI ELEMENTS */

.gui-text-flat
  textShadow(none)
  color     : mediumGray
  font-size : 14px

.gui-text
  @extend .gui-text-flat
  textShadow()

.gui-text-bold
  @extend .gui-text
  copy-bold()
  color : lightGray

.gui-headline
  headline-font()
  textShadow()
  text-shadow : 0 2px 0 #000

.gui-headline-bold
  @extend .gui-headline
  headline-bold()
  color       : lightGray
  font-weight : bold

.gui-field
  monospace()
  corners()
  vendor('box-shadow', inset 0 1px 3px darkened)
  background    : darkened
  padding       : 10px
  border-bottom : 1px solid lightWhite
  margin-right  : 2em
  font-size     : 13px;

.gui-input
  @extend .gui-field
  dimensions(100%, auto)
  padding      : 8px
  border-left  : 0
  border-right : 0
  border-top   : 0
  
  &:focus
    outline : none
  

.gui-light
  background : url('/admin/ui/images/light-sprite.png') left top no-repeat transparent
  padding    : 11px 0 9px 33px
  min-height : 14px
  min-width  : 14px
  display    : inline-block
  
  &.gray
    background-position : -4px -145px
  
  &.green
    background-position : -4px 0
  
  &.red
    background-position : -4px -36px
    
  &.blue
    background-position : -4px -109px
  
  &.orange
    background-position : -4px -73px
  
/* END CODE FOR GENERAL GUI ELEMENTS */

/* CODE FOR PURE CSS TOOLTIPS */

div.tooltip
  dimensions(25px, 25px)
  position        : relative    
  color           : #b2564e
  text-decoration : none
  display         : block
  background      : url('/admin/ui/images/tooltip-mark.png') center center no-repeat transparent
  text-align      : center

  &.right
    margin-left : 5px

  a
    color : riakorange

  a:hover
    text-decoration : underline

  a.docs:before
    content : 'Read the docs »'

div.tooltip span
  display : none

div.tooltip > span
  dimensions(190px)
  corners(3px)
  absoluteLeft(-402%, 30px)
  css-transition(opacity .8s ease)
  headline-font()
  padding     : 20px
  background  : rgba(85, 85, 85, .95)
  color       : #ffffff
  text-align  : left
  text-shadow : none
  z-index     : 200
  font-size   : 15px
  line-height : 1.3

  .tooltip-heading
    headline-bold()
    display       : block
    margin-bottom : 15px


div.tooltip > span:before
  dimensions(0, 0)
  absoluteLeft(45.5%, -6px)
  border-left   : 8px solid transparent
  border-right  : 8px solid transparent
  border-bottom : 6px solid rgba(85, 85, 85, .95)
  z-index       : 205
  content       : " "

div.tooltip:hover span
  display : block

div.tooltip:hover > span
  vendor('animation', fadeOpacity .5s)

@-webkit-keyframes fadeOpacity {
  0%   {
    opaque(0)
  }
  100% {
    opaque(1)
  }
}
@-moz-keyframes fadeOpacity {
  0%   {
    opaque(0)
  }
  100% {
    opaque(1)
  }
}
@-o-keyframes fadeOpacity {
  0%   {
    opaque(0)
  }
  100% {
    opaque(1)
  }
}
@keyframes fadeOpacity {
  0%   {
    opaque(0)
  }
  100% {
    opaque(1)
  }
}

/* END CODE FOR TOOLTIPS */

.has-cut
  background : url('/admin/ui/images/cut-bg.png') left bottom repeat-x transparent
  
.cut
  @extend .has-cut
  dimensions(100%, 2px)
  margin-top : 15px
    
.bulleted
  list-style-type : disc

.clear
  clear : both

.hide
  display : none
  
.italic
  copy-font()
  font-style : italic

.serif
  copy-font()

.left
  float : left
  
.disabled
  opaque(.4)
  
.unreachable
  color : riakred

.inline-block
  display : inline-block



/* RESPONSIVE MEDIA QUERIES */

@media screen and (min-width : 1100px)

  #wrapper
    max-width : 1500px

@media screen and (max-width : 699px)

  h1
    hSize(36px, 0, 5px)
    padding-left  : 15px
    padding-right : 15px

  h2
    hSize(26px, 0, 12px)
    color : lightGray

  h3
    copy-font()
    hSize(16px, 0, 8px)
    color      : mediumGray
    font-style : italic
    
  .gui-field, .gui-input
    margin-right : 0
    
  .side-line
    width : 18%
    
  .title-box
    width : 64%
    
@media screen and (max-width : 699px)

  #content-well
    padding : 5px 15px 0
    
  #riak-control-logo
    width : 212px
    
@media screen and (max-width : 499px)

  #header
    height : 44px

  #navbar, #nav-ul
    height : 41px

  .nav-li
    dimensions(45px, 41px)

    .nav-item
      dimensions(45px, 41px)
      background : url('/admin/ui/images/nav-icons-small.png') center bottom no-repeat transparent

    .indicator
      dimensions(45px, 2px)

  #riak-control-logo
    dimensions(123px, 32px)
    background : url('/admin/ui/images/riak-control-logo-small.png') right bottom no-repeat transparent
    margin     : 6px 0 0 10px

  #nav-snapshot a
    background-position : 8px -237px

  #nav-cluster a
    background-position : 8px 11px

  #nav-nodes a
    background-position : 7px -269px

  #nav-ring a
    background-position : 8px -24px
  
  h1
    hSize(30px, 0, 5px)
    
/* END RESPONSIVE MEDIA QUERIES */
