html {
-webkit-tap-highlight-color: fade(@link-color, 20%);
tap-highlight-color: fade(@link-color, 20%);
}
body {
background: @body-bg;
}
//
// Topbar
//
.topbar {
.clearfix;
background: #f1f4f7;
.row {
margin-top: @line-height-computed/2;
margin-bottom: @line-height-computed/2;
position: relative;
}
}
//
// Banner
//
.banner {
float: left;
.banner-title {
margin-top: .1em;
margin-bottom: 0;
// display toned down logo
// by default
.logo;
}
.banner-logo {
.ir;
// repeat logo
// but display hover version
.logo;
background-position: left bottom;
// hide by default
opacity: 0;
// show smooooothly on hover
&:hover { opacity: 1 }
&:active { top: 0 }
}
}
//
// close button
//
a.close,
.close {
width: 16px;
height: 16px;
line-height: 12px;
font-size: 16px;
padding: 0;
.border-radius(16px);
text-align: center;
display: block;
background: @brand-grey-light;
color: #fff;
&:hover { background: @link-color-hover }
}
// Footer
/////////////////////////////////////
.footer {
text-align: center;
background: fade(@brand-dark, 5%);
.footer-description {
.h5;
}
&,
.footer-description {
color: @text-color-light;
line-height: @line-height-computed;
}
.footer-copyright {
.divider-top;
padding-top: @line-height-computed;
padding-bottom: @line-height-computed;
p {
margin-bottom: 0;
font-size: @font-size-mini;
}
}
}
// Subscribe component
.subscribe {
margin: @line-height-computed auto;
p {
margin: 0;
.clearfix;
.btn {
margin-bottom: 0;
padding: .3em 1em;
&:first-child {
margin-left:0
}
&:last-child {
margin-right: 0;
}
span {
.visuallyhidden;
}
}
}
i {
display: block;
color: @text-color-light;
&:before {
// Icon resets for color animations
.transition(color .3s ease-in-out);
color: inherit;
margin-right: 0;
}
}
}
.footer:hover .subscribe .rss i:before {
color: #e15a00;
}
.footer:hover .subscribe .twitter i:before {
color: #019ad2;
}
.footer:hover .subscribe .google i:before {
color: #c63b1e;
}
.footer:hover .subscribe .facebook i:before {
color: #3b5998;
}