index.styl

@import "jeet"
@import "rupture"
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

// edit()

// color pallete
color-bg-edx = #D6D6D6
color-bg-card = #FFF
color-text-title = #3C3C3C
color-text-content = #666
color-primary = #1D9DD9
color-secondary = #BC2A6C
color-success = #A0D468
color-error = #D9321D
color-warning = #FFCE54

// helpers
addborder(suffix)
  border{suffix} 1px solid #AAA

boxshadow()
  box-shadow 0 1px 2px rgba(0, 0, 0, 0.1)

unselectable()
  -webkit-touch-callout none
  -webkit-user-select none
  -khtml-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none

labeltext()
  text-align center
  font-size 14px
  color color-text-content

// main
*
  box-sizing border-box
  margin 0
  padding 0

body
  background-color color-bg-edx
  font-family 'Open Sans', Verdana, Geneva, sans-serif
  font-size 14px
  text-align left

// fake edX main navbar
header
  height 60px
  width 100%
  padding 10px
  background-color color-bg-card
  overflow hidden
  addborder('-bottom')
  boxshadow()

.nav
  center(1200px)
  font-size 14px
  height 40px
  line-height 40px

.nav-logo
  padding 0 15px 0 15px

.nav-provider
  padding-left 15px
  addborder('-left')
  color color-text-title
  font-weight bold
  vertical-align text-bottom

.nav-hide-on-small
  +below(550px)
    display none

.nav-float-right
  float right
  padding-right 15px

.nav-text
  color color-text-content
  vertical-align text-bottom

.nav-course
  center(1200px)
  height 60px
  font-weight 700
  line-height 14px
  color color-text-title
  padding 23px 0 0 23px
  span
    padding 8px 15px 8px 15px
  .tab-active
    color color-bg-card
    text-shadow 0px 1px 0px rgba(0, 0, 0, 0.4)
    border-radius 3px
    box-shadow 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.3) inset
    background-image linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.25))


// content

.content
  center(1180px)
  padding-bottom 60px
  +below(1000px)
    center(600px)

#rcol, #lcol
  col(1/2)
  +below(1000px)
    stack()

#lcol + #rcol
  +below(1000px)
    margin-top 25px

.card
  center()
  border-radius 3px
  background-color color-bg-card
  addborder('')
  boxshadow()
  padding 20px

.card + .card
  margin-top 25px

.card-header
  addborder('-bottom')
  color color-text-title
  font-weight 300
  margin 0 0 10px 0

.card-content
  color color-text-content

.chart-options
  center()
  labeltext()
  select
    labeltext()
    border none
    addborder('-bottom')
    margin-bottom 10px
    appearance none
    -webkit-appearance none
    -moz-appearance none
    unselectable()
    cursor pointer

svg
  center()
  unselectable()

// progress chart

#progress
  svg
    cursor pointer
  text
    text-anchor middle
    dominant-baseline middle

.arc-bg
  stroke color-bg-card
  fill color-bg-edx

.arc-comparison
  stroke color-bg-card

.back-button
  font-size 36px
  font-weight 700

.report-title
  font-size 22px
  fill color-text-content

.percentage
  font-size 52px

.category-problem
  fill color-primary

.category-video
  fill color-secondary

// timeline chart

.curtain
  fill color-bg-card

.tl-active
  fill color-success

.tl-inactive
  fill color-bg-edx

.problem-line, .video-line
  fill none
  stroke-width 2

.problem-line
  stroke color-primary

.video-line
  stroke color-secondary

.reference-line
  stroke color-bg-edx

.certificate-line
  stroke color-success
  stroke-dasharray 10,10

.certificate-text, .reference-text
  dominant-baseline hanging
  font-size 10px

.reference-text
  fill color-bg-edx

.certificate-text
  fill color-success

.reference-line, .certificate-line, .reference-text, .certificate-text
  opacity 0.7

.tooltip
  background-color color-bg-card
  font-size 12px
  color color-text-content
  width 95px
  height 75px
  padding 3px
  position absolute
  z-index 1001
  boxshadow()

.tooltip-active
  color color-success

.tooltip-inactive
  color color-bg-edx

.tooltip-video
  color color-secondary

.tooltip-problem
  color color-primary

// leaderboard chart

#leaderboard
  table
    font-size 12px

.text-scores
  color color-bg-card

.text-student-names
  text-align center

.text-ranks
  text-align right

.lb-oneself
  font-weight 700

.lb-top10-problem, .lb-top10-video, .lb-top10-active, .lb-top10-timespent
  padding-left 10px

.lb-top10-problem
  background-color color-primary

.lb-top10-video
  background-color color-secondary

.lb-top10-active
  background-color color-success

.lb-top10-timespent
  background-color color-warning