codecombat/app/styles/base.sass
2014-04-03 15:10:24 -07:00

227 lines
No EOL
4.5 KiB
Sass

@import "bootstrap/variables"
@import "bootstrap/mixins"
@import "bootstrap/variables"
html
background-color: #2f261d
html, body
// For level loading view wings
overflow-x: hidden
// 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
box-shadow: 0px 0px 10px
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
#intermediate-content-wrapper
background: url(/images/pages/base/sky_repeater.png) repeat-x
#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: 10px
padding-bottom: 10px
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
padding-bottom: 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
.flag-cursor
cursor: crosshair
// Fonts
.header-font
font-family: $headings-font-family
body[lang='ru'], body[lang|='zh'], body[lang='ja'], body[lang='pl'], body[lang='tr'], body[lang='cs'], body[lang='el'], body[lang='ro'], body[lang='vi'], body[lang='th'], body[lang='ko'], body[lang='sk'], body[lang='sl'], body[lang='bg'], body[lang='he'], body[lang='lt'], body[lang='sr'], body[lang='uk'], body[lang='hi'], body[lang='ur'],
h1, h2, h3, h4, h5, h6
font-family: 'Open Sans Condensed', Impact, "Arial Narrow", "Arial", sans-serif
text-transform: uppercase
letter-spacing: -1px !important
.header-font
font-family: 'Open Sans Condensed', Impact, "Arial Narrow", "Arial", sans-serif !important
text-transform: uppercase
letter-spacing: -1px !important
@media only screen and (max-width: 800px)
.main-content-area
width: 100%
.content
width: 100%
.footer-link-text a
font-size: 17px
margin-left: 3px
margin-right: 3px
.share-buttons
margin-bottom: 20px
.partner-badges
display: none