codecombat/app/styles/game-menu/options-view.sass

@import "app/styles/bootstrap/variables"

#options-view
  
  //- Volume slider
  
  #volume-group
    position: relative
    width: 100%
    height: 25px
    margin: 15px 0
    
    & > *
      position: absolute
      
    .ui-slider
      left: 40px
      right: 40px
      top: 4px
      background-color: rgb(248,169,67)
      border: 4px solid rgb(26,21,18)
      height: 18px
      border-radius: 18px
      
      .ui-slider-handle
        background-color: rgb(26,21,18)
        width: 28px
        height: 28px
        border-radius: 28px
        top: -9px
        outline: 0
      
    .glyphicon
      font-size: 30px
      top: -2px
      color: rgb(26,21,18)
      
    .glyphicon-volume-down
      position: absolute
      left: 0
      
    .glyphicon-volume-up
      position: absolute
      right: 0
    
    
  //- header, horizontal rule
  
  .hr
    width: 100%
    height: 10px
    
  h3
    margin-top: 5px
    color: rgb(26,21,18)
    

  //- All form groups
  
  .form-group
    font-size: 16px
    color: rgb(51,51,51)
    padding-top: 4px
    padding-left: 40px
   
  label
    font-weight: normal

  //- Check boxes
  
  .form-group.checkbox
    
    label
      position: relative
    
    input
      display: none
      
      & + .custom-checkbox
        .glyphicon
          display: none
        
      &:checked + .custom-checkbox .glyphicon
        display: inline
        color: rgb(248,169,67)
        text-align: center
        text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black
        font-size: 14px
        position: relative
        top: -1px
  
    .custom-checkbox
      border-radius: 2px
      height: 27px
      width: 27px
      border: 4px solid rgb(26,21,18)
      position: absolute
      background: rgb(228,217,196)
      text-align: center

      // this undoes the padding of the form groups
      left: -40px 
      top: -4px
    

  //- Select boxes
  
  select
    border: 3px solid black
    text-transform: uppercase
      
  //.form-group.radio-inline
  //  input
  //    margin-left: 0px
  //    margin-right: 5px
  //
  //  .radio-inline-parent-label
  //    padding-left: 0
  //
  //
  #player-avatar-container
    position: relative
    margin: 0 auto 40px
    width: 230px
    max-height: 230px
    border-radius: 6px
  
    img.profile-photo
      width: 100%
      border-radius: 6px
  
      &.saving
        opacity: 0.5
  
    .profile-caption
      background-color: rgba(0, 0, 0, 0.5)
      color: white
      border-bottom-right-radius: 6px
      border-bottom-left-radius: 6px
      position: absolute
      width: 100%
      bottom: 0px
      left: 0px
      text-align: center
      border: 0
      font-size: 18px
  
    .editable-icon
      display: block
      position: absolute
      right: 5px
      top: 5px
      font-size: 20px
      color: $blue
      opacity: 0.5
  
    &:hover
      cursor: pointer
      box-shadow: 0px 0px 2px 1px $blue
  
      .editable-icon
        opacity: 1.0
        cursor: pointer