codecombat/app/styles/common/site-chrome.sass

239 lines
4.9 KiB
Sass
Raw Normal View History

@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"
.site-chrome
background-color: white
&.show-background
background: url(/images/pages/base/background.jpg) top center no-repeat
background-color: rgb(150,202,68)
@media screen and ( max-height: 800px )
background-position: center -226px
padding-top: 185px
max-width: 1920px
margin: 0 auto
@media screen and ( max-height: 800px )
padding-top: 50px
//- Nav
#site-nav
position: absolute
background: url(/images/pages/base/nav_background.png) top center no-repeat
left: 0
top: 56px
right: 0
height: 144px
text-align: center
min-width: 1024px
z-index: 1
@media screen and ( max-height: 800px )
top: -80px
@media screen and ( max-width: 1024px )
.multiplayer-nav-link
display: none
#nav-logo
position: absolute
margin-right: auto
margin-left: auto
left: 0
right: 0
top: -45px
@media screen and ( max-height: 800px )
display: none
#small-nav-logo
display: none
@media screen and ( max-height: 800px )
display: inline-block
height: 30px
#site-nav-links
position: absolute
bottom: 21px
left: 0
right: 0
& > a
color: rgb(158,135,119)
&:hover
color: $white
& > a, button, select
font-size: 18px
text-transform: uppercase
font-family: $headings-font-family
margin: 0 7px
button, select
position: relative
top: -3px
height: 32px
color: #444
.signup-button
background: red
color: white
.login-button
background: white
color: black
.language-dropdown
width: auto
2014-11-28 06:10:57 -05:00
padding: 0px 10px
display: inline-block
#site-nav-smooth-edge
position: absolute
left: 0
right: 0
bottom: 0
height: 5px
//- Account menu
.dropdown
.account-settings-image
width: 18px
.dropdown-menu
width: 180px
padding: 0px
border-radius: 0px
.user-dropdown-header
background: #E4CF8C
height: 160px
padding: 10px
text-align: center
color: black
border-bottom: #32281e 1px solid
2015-02-05 14:01:18 -05:00
div
background-size: cover // Will be center along the largest dim.
border: #e3be7a 8px solid
height: 98px // Includes the border
&:hover
box-shadow: 0 0 20px #e3be7a
h3
font-variant: small-caps
font-family: Open Sans Condensed
margin-top: 10px
text-shadow: 2px 2px 3px white
color: #31281E
.user-level
position: absolute
top: 73px
right: 40px
color: gold
text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
li
color: black
font-size: 16px
#logout-button
font-weight: bold
//- Content
#site-content-area
background: rgb(240,229,199)
margin: 0 auto -20px
width: 1024px
border: 5px solid rgb(110,88,41)
padding: 20px 12px
min-height: 300px
//- Footer
#site-footer
width: 100%
height: 130px
position: relative
overflow: hidden
// Recycling the nav bar background as a rotated image
#footer-background
transform: rotate(180deg)
margin: 0 auto
display: block
#footer-links, #footer-credits
position: absolute
left: 0
right: 0
text-align: center
#footer-links
top: 20px
height: 45px
padding: 11px
a
color: rgb(158,135,119)
font-size: 18px
text-transform: uppercase
font-family: Open Sans Condensed
margin: 0 7px
&:hover
color: $white
.share-buttons
display: inline-block
position: relative
top: 3px
margin-left: 20px
.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
#footer-credits
top: 79px
height: 50px
color: rgb(158,135,119)
font-size: 12px
> *
margin: 0 15px
width: 186px
display: inline-block
#footer-logo
width: 160px
& > span
position: relative
top: 8px
a
color: rgb(238,227,131)