codecombat/app/styles/common/common.sass

306 lines
No EOL
6.5 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 "app/styles/bootstrap/variables"
@import "app/styles/mixins"
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, h5, h6
font-variant: small-caps
a
cursor: pointer
.error
left: 8px
.selectable
cursor: pointer
.modal-dialog
padding: 5px
margin-top: 30px
margin-bottom: 0px
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
.plain
h1, h2, h3, h4, h5, h6
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
.modal-content
@include box-shadow(none)
.modal-header
margin: 0 14px
padding: 8px 0
border-bottom-color: #ccc
.close
font-size: 28px
padding: 15px
margin-right: -15px
margin-top: -15px
@include opacity(0.60)
&:hover
@include opacity(1)
.modal-footer
background-color: transparent
margin: 0 14px
border-bottom-color: #ccc
.modal-footer.linkedin
text-align: center
.signin-text
font-size: 15px
padding-bottom: 10px
.login-link
cursor: pointer
// loading screens for everything but the play view
.loading-screen
.progress
width: 50%
margin: 0 25%
margin-bottom: 20px
// all loading screens
.loading-container
text-align: center
.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
// Override jQuery UI widget images that we don't use
.ui-widget-content, .ui-widget-header, .ui-widget-overlay, .ui-widget-shadow
background-image: none
.ui-widget-content, .ui-state-default, .ui-widget-header
.ui-state-default, .ui-state-focus, .ui-state-active, .ui-state-highlight, .ui-state-error
background-image: none
// DOM highlight pointer arrow
.highlight-pointer
position: absolute
left: 0
top: 0
height: 100px
opacity: 0.0
pointer-events: none
z-index: 10
// Fonts
.header-font
font-family: $headings-font-family
font-variant: small-caps
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
font-variant: small-caps
letter-spacing: -1px !important
.header-font
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, " Pゴシック", "MS PGothic", 'Open Sans Condensed', sans-serif
font-variant: small-caps
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")
.spr:after
content: " "
.spl:before
content: " "
a[data-toggle="coco-modal"]
cursor: pointer
.achievement-corner
position: fixed
bottom: 0px
right: 0px
z-index: 1001
kbd
padding: 2px 4px
font-size: 90%
color: #fff
background-color: #333
border-radius: 3px
@include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .25))
.gem
display: inline-block
background: transparent url(/images/common/gem.png) no-repeat center
background-size: contain
width: 80px
height: 80px
margin: 0px 2px
&.gem-20
width: 20px
height: 20px
&.gem-25
width: 25px
height: 25px
&.gem-40
width: 40px
height: 40px
&.gem-60
width: 60px
height: 60px
.popover
border-image: url(/images/level/popover_background.png) 29 39 fill stretch
border-width: 15px 20px
.arrow
display: none
.btn
font-size: 20px
width: 100%
.btn.btn-illustrated
background: 0
border: 0
border-radius: 0
@include box-shadow(none)
border-image: url(/images/common/button-background-active-border.png) 14 20 20 20 fill round
border-width: 7px 10px 10px 10px
padding: 0
font-family: Open Sans Condensed
text-transform: uppercase
font-weight: bold
color: rgb(248, 197, 146)
&:hover
color: lighten(rgb(248, 197, 146), 5%)
&:active
border-image: url(/images/common/button-background-pressed-border.png) 14 16 16 20 fill round
padding: 2px 0 0 2px
border-width: 7px 8px 8px 10px
&.disabled, &:disabled
border-image: url(/images/common/button-background-disabled-border.png) 14 20 20 20 fill round
@include opacity(1)
> *
@include opacity(0.5)
> *
@include opacity(0.75)
&:hover > *
@include opacity(1)
html.no-borderimage
.popover
border: 0
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
padding: 10px 20px
.btn.btn-illustrated
border: 0
background-image: url(/images/common/button-background-active.png)
background-size: 100% 100%
padding: 7px 10px 10px 10px
&:active
background-image: url(/images/common/button-background-pressed.png)
padding: 9px 8px 8px 12px
border: 0
&.disabled, &:disabled
background-image: url(/images/common/button-background-disabled.png)
body > iframe[src^="https://apis.google.com"]
display: none
#module-load-progress
position: absolute
top: 0
left: 0
right: 0
height: 5px
z-index: 1
transition: 1s
.progress-bar
background-color: lightblue