contest.page.styl

$highlight-button-color = #F6DF45

.page--contest_main
  .contest__title
    font-size: rem($font-size-title)
    line-height: 1.2em
    margin-bottom: rem(10px)

  .contest__date
    margin-right: rem(10px)
    white-space: nowrap
    width: rem(60px)

  .contest__info-attended
    color: $success-color

  .contest__item
    border-left: rem(5px) solid transparent
    padding-left: rem(5px)
    
    &.live
      border-left: rem(5px) solid #E98696

    &.ready
      border-left: rem(5px) solid #469DCF

  .section--contest
    &.live
      background: #E98696
      background-image: -webkit-radial-gradient(left top, ellipse farthest-corner, #E98696 0%, #E96B6B 100%)

    &.ready
      background: #469DCF
      background-image: -webkit-radial-gradient(left top, ellipse farthest-corner, #8ACDE6 0%, #469DCF 100%)

    .status_title
      display: inline-block
      font-size: rem($font-size-secondary)
      color: #FFF
      background: rgba(#000, 0.3)
      padding: rem(7px 10px)
      border-radius: rem(2px)

    h1
      line-height: 1.2
      font-size: rem(25px)
      margin: rem(20px 0)

    .info
      color: #FFF
      font-size: rem($font-size-secondary)

      .icon
        color: #FFEB81
        font-size: rem($font-size-icon)

      li
        display: inline-block
        margin-right: rem(10px)

    .attandance
      margin-top: rem(15px)
      font-size: rem($font-size-secondary)
      opacity: 0.8

    .detail-button
      cursor: pointer
      display: block
      text-align: center
      background: $highlight-button-color
      color: darken($highlight-button-color, 70%)
      line-height: rem(40px)
      border-radius: rem(20px)
      width: rem(150px)
      position: relative
      overflow: hidden
      transition: box-shadow .4s, background-color .4s
      transition-timing-function: ease-out-cubic

      &:after
        position: absolute
        background: #fff
        content: ""
        height: rem(100px)
        left: rem(-70px)
        top: rem(-25px)
        width: rem(50px)
        opacity: 0.2
        transform: rotate(35deg)
        transition: left 0.6s ease-out-cubic
        z-index: 1

      &:hover
        text-decoration: none
        box-shadow: 0 2px 20px rgba($highlight-button-color, 0.8)
        background: lighten($highlight-button-color, 20%)

        &:after
          left: 150%

    +mobile()
      .media, .media_body, .media__right
        display: block
        padding: 0

      .media__right .section__body
        padding-top: 0

      .detail-button
        width: auto

.page--contest_problemlist
  .col--status, .col--correction
    width: rem(150px)

  .col--submit-at
    width: rem(130px)
    text-align: center

  &.nojs .col--submit-at
    width: rem(160px)

  .col--score
    width: rem(80px)
    text-align: center;

  .col--problem
    border-left: 1px solid $table-border-color

  +mobile()
    .col--submit-at, .col--correction
      display: none

  +tablet()
    .col--time,
    .col--memory,
    .col--lang
      display: none

  +mobile()
    .col--time,
    .col--memory,
    .col--submit-at,
    .col--lang
      display: none
  
  .col--submit-by
    display: none

  .record_main__table
    .col--status
      width: rem(170px)

    .col--time, .col--memory, .col--lang
      width: rem(95px)
      text-align: center

    .col--lang
      border-right: 1px solid $table-border-color


.page--contest_scoreboard
  .main
    .row
      max-width: 100vw !important;

  .col--rank
    width: rem(60px)
    text-align: center
    border-right: 1px solid $table-border-color

  .col--user
    min-width: rem(150px)

  .col--solved, .col--time
    width: rem(70px)
    text-align: center

  .col--total_score
    width: rem(100px)
    text-align: center

  .col--problem
    width: rem(100px)
    border-left: 1px solid $table-border-color
    text-align: center

  .scoreboard--acm
    .col--problem
      width: rem(70px) !important

  +mobile()
    .col--user
      width: auto

    .col--problem
      display: none

  .star-highlight
  	background: lighten($primary-color, 90%)

.page--contest_user
  .col--uid
    width: rem(100px)

.page--contest_balloon
  .col--bid
    width: rem(100px)
  
  .col--status
    width: rem(100px)

  .col--problem
    width: rem(150px)

  .col--awards
    width: rem(130px)

.page--contest_manage
  .col--id
    width: rem(80px)
  .col--score
    width: rem(80px)