codecombat/app/styles/base.sass

267 lines
5.9 KiB
Sass
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import "bootstrap/variables"
@import "bootstrap/mixins"
@import "bootstrap/variables"
html
background-color: #2f261d
body
position: absolute !important
// 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
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
margin-top: 0px !important
margin-bottom: 0px !important
padding-top: 30px
.background-wrapper
background: url("/images/pages/base/modal_background.png")
background-size: 100% 100%
border: 0
@include box-shadow(0 0 0 #000)
//position: absolute
width: 99%
.background-wrapper.plain
background: white
.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: 0%
transition: width 0.1s ease
.errors .alert
padding: 5px
display: block
margin: 10px auto
.btn
margin-left: 10px
.modal
overflow-y: auto !important
.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='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'], body[lang='hu']
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
body[lang='ja']
h1, h2, h3, h4, h5, h6
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, " Pゴシック", "MS PGothic", 'Open Sans Condensed', sans-serif
text-transform: uppercase
letter-spacing: -1px !important
.header-font
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, " Pゴシック", "MS PGothic", 'Open Sans Condensed', sans-serif
text-transform: uppercase
letter-spacing: -1px !important
#top-nav
.navbar-nav
li
a.header-font
font-size: 16px
@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
// point the new glyphicons to the fonts in public
@font-face
font-family: 'Glyphicons Halflings'
src: url("/fonts/glyphicons-halflings-regular.eot")
src: url("/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/glyphicons-halflings-regular.woff") format("woff"), url("/fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")