codecombat/app/styles/base.sass

181 lines
3.3 KiB
Sass

@import "bootstrap/variables"
@import "bootstrap/mixins"
html
background-color: #2f261d
// https://github.com/twbs/bootstrap/issues/9237 -- need a version that's not !important
.secret
display: none
h1 h2 h3 h4
letter-spacing: 2px
.main-content-area
position: relative
width: 1024px
margin: 56px auto 0
min-height: 600px
padding: 14px 12px 5px 12px
@include box-sizing(border-box)
#outer-content-wrapper
background: #8cc63f url(/images/pages/base/repeat-tile.png) top center
#inner-content-wrapper
background: url(/images/pages/base/background_texture.png) top center no-repeat
#front-summary-points-left
width: 250px
margin: 0px 20px 10px 15px
#front-summary-points-left p.lead
margin-bottom: 5px
#front-screenshot
width: 710px
.content
width: 1024px
margin: 0 auto
.footer
height: 75px
border-top: 1px solid black
background-color: #2f261d
p
margin: 0
padding-top: 25px
text-align: center
.mixpanel-badge, .firebase-badge
width: 100px
margin: 10px 10px 0px
.footer-link-text a
font-family: 'Bangers', cursive
font-weight: normal
font-size: 25px
letter-spacing: 1px
color: #ffffff
cursor: pointer
margin: 0px 10px
&:hover
color: $white
a[data-toggle="modal"]
cursor: pointer
.share-buttons, .partner-badges
margin-top: 10px
text-align: center
@include opacity(0.75)
&.fade-in
@include opacity(0)
&:hover, &:active
@include opacity(1)
@include transition(opacity .10s linear)
.github-star-button
margin-left: 20px
&>div
display: inline-block
vertical-align: top
.error
left: 8px
.selectable
cursor: pointer
.modal-dialog
padding: 5px
background: transparent url(/images/pages/base/modal_background.png)
background-size: 100% 100%
border: 0
@include box-shadow(0 0 0 #000)
.modal-content
@include box-shadow(none)
.modal-header
margin: 0 14px
padding: 8px 0
border-bottom-color: #ccc
.close
font-size: 28px
@include opacity(0.60)
&:hover
@include opacity(1)
.modal-footer
background-color: transparent
margin: 0 14px
border-bottom-color: #ccc
// Bigger versions of some Bootstrap icons
// TODO: make the non-white versions of these if we ever need them
.icon.big
background-image: url(/images/pages/base/glyphicons-simplified.png)
.icon-white.big
background-image: url(/images/pages/base/glyphicons-simplified.png)
.icon.big, .icon-white.big
width: 19px
height: 19px
line-height: 19px
.icon-pause.big
background-position: -114px 0px
.icon-play.big
background-position: -95px 0px
.icon-repeat.big
background-position: -76px 0px
.icon-volume-off.big
background-position: -57px 0px
.icon-volume-down.big
background-position: -38px 0px
.icon-volume-up.big
background-position: -19px 0px
.icon-cog.big
background-position: 0px 0px
.loading-screen
text-align: center
.progress
width: 50%
margin: 0 25%
.progress-bar
width: 100%
.modal
.wait
h3
text-align: center
.progress
width: 50%
margin: 10px auto
.progress-bar
width: 100%
table.table
background-color: white
//.ui-autocomplete
// z-index: $zindexAutocomplete
.ui-slider
border: 1px solid black
.ui-slider-handle
border: 1px solid black !important