SCSS
// primary colors
$blue: #4285F4;
$red: #ea4335;
$yellow: #fbbc05;
$green: #34a853;
// page colors
$white: #fff;
$off-white: #f2f2f2;
$gray: #f2f2f2;
$gray-2: #dfdfdf;
$md-gray: #666;
$dk-gray: #757575;
$black: #222;
$purple: #800099;
// typography
$font-family: arial, sans-serif;
// gradients
$g-light-gray: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
$g-light-gray-hvr: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
// shadows
$box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
$box-shadow-hvr: 0 3px 8px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
body {
font-family: $font-family;
font-size: 13px;
margin: 0;
}
.toolbar {
position: absolute;
right: 2em;
height: 32px;
li {
display: inline-block;
padding-left: 15px;
vertical-align: middle;
color: #737373;
a {
color: currentColor;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
i {
&:hover {
color: #272727;
}
}
&:hover {
cursor: pointer;
}
img {
border-radius: 50%;
width: 32px;
height: 32px;
}
}
}
main.home {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: -7rem;
width: 584px;
.logo {
width: 272px;
height: 92px;
background-repeat: no-repeat;
background-image: url(http://svgur.com/i/kM.svg);
background-repeat: no-repeat;
background-size: 272px 92px;
margin: 0 auto;
margin-bottom: 30px;
&:after {
content: 'My';
display: none;
position: absolute;
right: 190px;
top: 72px;
color: $blue;
font-size: 18px;
}
}
form {
&:after {
}
}
.search {
height: 44px;
width: 584px;
line-height: 44px;
border: none;
border-radius: 2px;
box-shadow: $box-shadow;
margin-bottom: 30px;
font: 16px arial,sans-serif;
background: url(https://i.imgur.com/qJaCSqq.png) 540px center;
background-repeat: no-repeat;
background-size: 24px 24px;
padding-left: 16px;
&:hover, &:focus {
outline: none;
box-shadow: $box-shadow-hvr;
}
}
.button {
background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: $dk-gray;
cursor: default;
font-family: arial,sans-serif;
text-align: center;
&:hover {
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
background-color: #f8f8f8;
background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
border: 1px solid transparent;
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
color: $black;
}
&.button-default {
font-size: 13px;
font-weight: bold;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
&.g-search {
width: 126px;
height: 36px;
line-height: 36px;
}
&.lucky {
width: 144px;
height: 36px;
line-height: 36px;
}
} // button
.button-group {
width: 290px;
margin: 0 auto;
}
}
.footer {
position: absolute;
bottom: 1px;
width: 100%;
height: 40px;
line-height: 40px;
border-top: 1px solid #e4e4e4;
background-image: $g-light-gray;
ul {
display: inline-block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 40px;
-webkit-padding-end: 40px;
&:nth-child(1) {
li {
padding-right: 15px;
}
}
&:nth-child(2) {
float: right;
li {
float: right;
padding-left: 15px;
}
}
}
li {
display: inline-block;
a {
color: $md-gray;
text-decoration: none;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
}
}
