client/css/globals/profiles.styl
.user-header
.profile-box
margin-bottom 1em
.name, .school
margin 0 auto
.name
color $csDarkGreen
.school, .tagline
margin-top 0.25em
color $csGray
.profile-address
color $csGray
p
margin 0
.all-profiles
.profile-grid-box
width 250px
display inline-block
text-align center
vertical-align top
.name
margin 0
font-size 1.25em
a
color $csDarkGreen
.fa
margin-left 0.25em
color $csGray
.tagline
margin-top 0.25em
font-size 0.90em
color $csGray
//- Profile mugshot
//- Used in profile page and in all-profiles
.profile-image
position relative
margin 1em auto
width 100px
height 100px
border 4px solid $csBlue
border-radius 50%
background-color $csLightGray
background-position center center
background-size cover
font-size 1rem
overflow hidden
user-select none
.profile-link
position absolute
display block
width 100%
height 100%
left 0
top 0
&:hover
.uploader
display block
.uploader
display none
width 100%
height 100%
padding-top 1.8em
background-color rgba(0,0,0,0.5)
text-align center
text-shadow 0 1px 2px rgba(0,0,0,0.5)
color white
p
line-height 1.1em
font-size 1.3em
padding 0.25em 1em
input
position absolute
top 0
bottom 0
left 0
right 0
padding 0
border 0
background-color transparent
opacity 0
cursor pointer
&.editable:active
// Note: this works pretty poorly in Chrome because
// the browser is actually busy opening UI
// (and maybe doesn't work in Firefox at all)
animation blink-border 250ms 2 step-start
-webkit-animation blink-border 250ms 2 step-start
.upload-icon
font-size 3em
.user-profile
.resume-sample
margin-top 2em
img
margin 0 auto
border 1px solid $csLightGray
.postgame-survey
padding 1em
h2
margin-top 0
.resume-row-two
margin-top 1em
p
font-family $buttonFont
.motivations
h2
color $csDarkGreen
p
color $csGreen
.background
h2
color $csDarkOrange
p
color $csOrange
.goals
h2
color $csLightGray2
p
color $csGray
.objectives
h2
color $csDarkBlue
p
color $csBlue
.feedback
.row
display none
margin-top 10px
.comment
padding 5px 10px
background $csPurple
font-family $buttonFont
p
color white
h4
color rgba(255,255,255,0.75)
font-size 1em
.play-game
margin-top 1em
.resume-content
padding-top 2em
.resume-content-two
margin-top 2em
padding-top 1em
.resume-headings
margin-top -0.3em
@media screen and (min-width $screen-sm-min)
text-align right
h3
margin-top 0
color $csDarkBlue
.resume-text
font-family $buttonFont
padding-bottom 1em
@media screen and (min-width $screen-sm-min)
border-left 2px solid $csLightGray
min-height 6em
ul
list-style-type none
padding-left 0
.footer
margin-top 1em
margin-bottom -3em // Override margin on body
padding 2em
text-align center
background-color #dbff85
@media screen and (min-width $screen-sm-min)
padding 3em
border-top-left-radius 10px
border-top-right-radius 10px
img
max-width 100%
height auto
vendors = webkit
@keyframes blink-border {
0% {
border-color $csBlue
}
50% {
border-color $csOrange
}
100% {
border-color $csBlue
}
}
.profile-divider
border-top 4px solid $csLightGray
.profile-toggle
color $csBlue
cursor pointer
text-align right
user-select none
@media screen and (max-width $screen-sm-min)
text-align center
.public-lock
padding-top 1em
padding-bottom 1em
border-top 4px solid $csLightGray
// Extend into margin area (how Bootstrap does it)
margin-left -15px
margin-right -15px
&:hover
background-color #eeeeee
.profile-toggle-icon
font-size 50%
display inline-block
margin-right 1em
.profile-toggle-text
display inline-block
line-height 1em
.share-box
margin 1em auto
text-align center
border 1px solid lightgray
border-radius 10px
background-color whitesmoke
padding 1em
h2, h4
color $csDarkGray
p
font-family $buttonFont
form
margin 1em
input,
.input-group
font-family $buttonFont
#customize-share-link-group
// Initial visibility condition, toggled via JS
display none
.form-control[readonly]
// Override bootstrap defaults
// Reset to default first in case "copy" is not available
cursor default
cursor copy
background-color white
.share-link-button
cursor pointer
user-select none
.change-share-link-button
background-color $csDarkBlue
color white
.save-share-link-button
background-color $csOrange
color white
.share-link-message
text-align center
font-weight bold
margin-top 0.5em
// Overrides for profile lock toggle inside the .share-box
.profile-toggle
text-align center
margin 0.5em 0
.public-lock div
display inline-block
.profile-toggle-icon
margin-right 0.5em
@media screen and (max-width $screen-sm-min)
font-size 100%
.seal-container
position relative
.seal-image
@media screen and (min-width $screen-sm-min)
width 50%
.seal-code
@media screen and (min-width $screen-sm-min)
width 50%
position absolute
right 0
top 0
h5
font-weight bold
color $csPurple
textarea
height 100px
resize none
background-color white
.demo-profile
p, li
font-family $buttonFont
h1
color $csBlue
margin-bottom 1em
h3
color $csGreen
iframe
margin-top 1em
.resume-text-editable
-webkit-user-modify read-write
-moz-user-modify read-write
.color-map
text-align center
img
margin 0 auto
border 1px solid $csLightGray
.save-profile-button
background $csGreen