mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 16:17:57 -05:00
222 lines
4.6 KiB
Sass
222 lines
4.6 KiB
Sass
|
@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)
|
||
|
padding-top: 185px
|
||
|
max-width: 1920px
|
||
|
margin: 0 auto
|
||
|
|
||
|
//- 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
|
||
|
|
||
|
#nav-logo
|
||
|
position: absolute
|
||
|
margin-right: auto
|
||
|
margin-left: auto
|
||
|
left: 0
|
||
|
right: 0
|
||
|
top: -45px
|
||
|
|
||
|
#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: Open Sans Condensed
|
||
|
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
|
||
|
display: inline-block
|
||
|
|
||
|
#site-nav-smooth-edge
|
||
|
position: absolute
|
||
|
left: 0
|
||
|
right: 0
|
||
|
bottom: 0
|
||
|
height: 5px
|
||
|
|
||
|
|
||
|
//- Account menu
|
||
|
|
||
|
.dropdown
|
||
|
.dropdown-menu
|
||
|
left: auto
|
||
|
width: 280px
|
||
|
padding: 0px
|
||
|
border-radius: 0px
|
||
|
font-family: Open Sans Condensed
|
||
|
font-variant: small-caps
|
||
|
|
||
|
> .user-dropdown-header
|
||
|
position: relative
|
||
|
background: #E4CF8C
|
||
|
height: 160px
|
||
|
padding: 10px
|
||
|
text-align: center
|
||
|
color: black
|
||
|
border-bottom: #32281e 1px solid
|
||
|
> a:hover
|
||
|
background-color: transparent
|
||
|
img
|
||
|
border: #e3be7a 8px solid
|
||
|
height: 98px // Includes the border
|
||
|
&:hover
|
||
|
box-shadow: 0 0 20px #e3be7a
|
||
|
> h3
|
||
|
margin-top: 10px
|
||
|
text-shadow: 2px 2px 3px white
|
||
|
color: #31281E
|
||
|
.user-level
|
||
|
position: absolute
|
||
|
top: 73px
|
||
|
right: 86px
|
||
|
color: gold
|
||
|
text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
|
||
|
|
||
|
.user-dropdown-body
|
||
|
color: black
|
||
|
padding: 15px
|
||
|
letter-spacing: 1px
|
||
|
font: 15px 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||
|
+clearfix()
|
||
|
|
||
|
.user-dropdown-footer
|
||
|
padding: 10px
|
||
|
margin-left: 0px
|
||
|
font-size: 14px
|
||
|
+clearfix()
|
||
|
|
||
|
.btn-flat
|
||
|
border: #ddd 1px solid
|
||
|
border-radius: 0px
|
||
|
margin: 0px
|
||
|
|
||
|
|
||
|
//- 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
|
||
|
|
||
|
|
||
|
//- 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)
|