codecombat/app/styles/account/profile.sass

@import "app/styles/bootstrap/variables"

#profile-view
  $sideBackground: rgb(220, 220, 220)

  .profile-control-bar
    background-color: rgb(78, 78, 78)
    width: 100%
    text-align: center
    max-height: 70px

    button
      margin: 2px
      i
        margin-right: 5px

    .sample-profile
      position: absolute
      right: 5px
  
    .profile-completion-progress
      width: 100%
      display: inline-block
      height: 33px
      margin-bottom: 0
      border-radius: 0
      background-color: $sideBackground
  
      .progress-bar
        line-height: 33px
        font-size: 16px
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
  
  .main-content-area
    padding: 0
    background-color: white

    .flat-button
      width: 100%
      margin-bottom: 10px
      background: rgb(78, 78, 78)
      border: 0
      border-radius: 0
      padding: 10px

    .public-profile-container
      padding: 20px

      img.profile-photo
        width: 256px
        border-radius: 6px

    .job-profile-container
      width: 100%
      height: 100%
      min-height: 600px
      padding: 0
      display: table
      
      h1, h2, h3, h4, h5, h6
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
        color: #555

      ul.links, ul.projects
        margin: 0
        padding: 0
    
        li
          list-style: none

      .job-profile-row
        height: 100%
        display: table-row
        $side-width: 250px
        $side-padding: 5px
        $middle-width: 524px
        $middle-padding: 20px

        .full-height-column
          height: 100%
          padding: $side-padding
          display: table-cell
          vertical-align: top

          h3:first-child
            margin: 5px 0 5px 0
      
        .left-column
          width: $side-width - 2 * $side-padding
          padding: $side-padding
          background-color: $sideBackground

          .sub-column
            width: $side-width - 2 * $side-padding
            overflow-wrap: break-word

          #profile-photo-container
            position: relative
            margin-bottom: 10px

            img.profile-photo
              width: $side-width - 2 * $side-padding
              border-radius: 6px

            .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
              text-align: center

          ul.links
            li.has-icon
              display: inline-block
              img
                margin: 0 0 10px 0
            li.has-icon:not(:nth-child(5))
              img
                margin: 0 10px 10px 0

          #contact-candidate
            margin-top: 20px
            background-color: rgb(177, 55, 25)
            padding: 15px
            font-size: 20px
      
        .middle-column
          width: $middle-width - 2 * $middle-padding
          padding-left: $middle-padding
          padding-right: $middle-padding
          background-color: white

          .sub-column
            width: $middle-width - 2 * $middle-padding
            overflow-wrap: break-word

          &.double-column
            width: $middle-width + $side-width + 2 * $side-padding - 2 * $middle-padding
            $middle-padding-double: 30px
            padding-left: $middle-padding-double
            padding-right: $middle-padding-double

            .sub-column
              width: $middle-width + $side-width + 2 * $side-padding - 2 * $middle-padding - 2 * $middle-padding-double
              overflow-wrap: break-word

          code
            background-color: $sideBackground
            color: #555
            margin: 2px 0
            display: inline-block
            text-transform: lowercase

          .long-description
            margin-top: 10px
            img
              max-width: 524px - 60px
              max-height: 200px

          .experience-header
            margin-top: 25px

          .header-icon
            margin-right: 10px
            width: 32px
            height: 32px

          .experience-entry
            margin-bottom: 15px
      
          .duration
            margin-left: 10px
            margin-bottom: 10px

          #job-profile-notes
            width: 100%
            height: 100px

        .right-column
          width: $side-width
          background-color: $sideBackground

          .sub-column
            width: $side-width - 2 * $side-padding
            overflow-wrap: break-word

            > h3:first-child
              background-color: white
              padding: 5px 5px
              margin: 5px 2px 5px 2px

          ul.projects
            li
              margin-bottom: 10px
              padding: 5px 3px
              border: 2px solid $sideBackground
              transition: .5s ease-in-out
              position: relative
              background-color: white

              &:hover
                border-color: rgb(100, 130, 255)

              a
                position: relative
                z-index: 2

              > a
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0
                z-index: 1
        
          .project-image
            width: 230px
            height: 115px
            background-size: cover
            background-repeat: no-repeat
            background-position: center

            -webkit-filter: grayscale(100%)
            -webkit-transition: .5s ease-in-out
            -moz-filter: grayscale(100%) 
            -moz-transition: .5s ease-in-out
            -o-filter: grayscale(100%) 
            -o-transition: .5s ease-in-out
            filter: grayscale(100%)
            transition: .5s ease-in-out

          ul.projects li:hover .project-image, .project-image:hover
            -webkit-filter: grayscale(0%)
            -moz-filter: grayscale(0%)
            -o-filter: grayscale(0%)
            filter: grayscale(0%)

  .main-content-area

    .job-profile-container
      .editable-section
        position: relative
        transition: box-shadow 0.5s easeInOutQuad

        &.just-saved
          box-shadow: 0px 0px 80px 0px #080
          z-index: 1

        .editable-form
          display: none
          background-color: white
          padding: 5px 5px 5px 5px

          .skill-array-item
            display: inline-block

            input
              width: 120px
              margin: 5px

          .project-image
            width: 210px
            height: 105px
            cursor: pointer

      .editable-icon
        display: none
  
    .job-profile-container.editable-profile

      .full-height-column.deemphasized
        background-color: $sideBackground

      .saving
        opacity: 0.75
  
      .editable-thinner
        padding-right: 30px
                
      .editable-icon
        display: block
        position: absolute
        right: 5px
        top: 5px
        font-size: 20px
        color: $blue
        opacity: 0.5
          
      .edit-label
        color: $blue

      .edit-example-button
        background-color: transparentize($blue, 0.25)

      .edit-example-text
        color: $blue

      code.edit-example-tag
        color: $blue
      
      .editable-section.deemphasized:not(.just-saved), .our-notes-section.deemphasized
        opacity: 0.5

      .editable-section:hover
        cursor: pointer
        outline: 1px solid $blue
  
        .editable-icon
          opacity: 1.0
          cursor: pointer

        .editable-form
          cursor: default