Файл: css/smasher.css
Строк: 310
html { -webkit-font-smoothing: antialiased; }
body { background-color:
#322f2c; }
html, body, .container { height: 100%; }
body, td
{
font-family: 'Lucida Grande', Tahoma, sans-serif;
margin:
0;
}
body.centered { overflow: hidden; }
form { margin: 0;
}
.table {
width: 100%;
border-collapse:
collapse;
}
body.centered .table {
height: 100%;
}
.search
{
padding: 40px 40px 20px 40px;
text-align: center;
background:
url(/images/black_paper.gif);
box-shadow: inset 0 -4px 10px
black;
color: #999;
vertical-align: middle;
}
body.centered
.search {
box-shadow: inset 0 0 256px #111;
}
.search .tagline
{
display: none;
color: #777;
font-family: 'Helvetica Neue', Arial,
Helvetica, sans-serif;
font-weight: 300;
letter-spacing:
1px;
font-size: 20px;
margin-bottom: 5px;
}
body.centered .search
.tagline {
display: block;
}
.search .logos {
display:
none;
margin: 35px 0 0 0;
}
.search .logos img {
height:
50px;
}
body.centered .search .logos {
display: block;
}
.search
.details {
font-size: 11px;
white-space: nowrap;
line-height:
22px;
margin: 2px;
opacity: 0.5;
-webkit-transition: opacity linear
0.1s;
transition: opacity linear 0.1s;
}
.search .details:hover
{
opacity: 1.0;
}
body.centered .content {
overflow:
hidden;
display: none;
top: 100%;
}
.content {
padding:
20px;
text-align: center;
background:
url(/images/white_paper.png);
box-shadow: inset 0 2px 2px
white;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition:
all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s
ease-in-out;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
h1
{
font-family: 'Fredoka One';
margin: 0;
x-padding-top: 16px; /* IE
*/
display: inline-block;
font-size: 52px;
}
body.centered h1
{
font-size: 66px;
display: block;
}
.pagetitle a, .pagetitle
a:link, .pagetitle a:visited, .pagetitle a:hover {
text-decoration:
none;
color: #f0f0f0;
text-shadow: 0 4px 8px rgba(0, 0, 0, .5);
-webkit-mask-image: url(/images/speckle_paper.png);
-moz-mask-image: url(/images/speckle_paper.png);
-o-mask-image:
url(/images/speckle_paper.png);
mask-image:
url(/images/speckle_paper.png);
}
h2 {
font-size: 160%;
margin:
13px 0;
border-bottom: 2px solid #ddd;
text-shadow: 0 1px 0 white, 0
0px 9px #ddd;
color: #444;
line-height: 50px;
}
input#q
{
outline: 0;
background: #f0f0f0
url(/images/gray_paper.gif);
border: 3px solid #111;
border-radius:
9px;
font-size: 20px;
padding: 7px 10px;
box-shadow: inset 0 9px 10px
rgba(0,0,0,0.2), inset 0 0 2px 1px #fff;
font-family: Helvetica,
Arial;
color: #333;
vertical-align: bottom;
margin: 5px
15px;
width: 300px;
}
body.centered input#q {
font-size:
24px;
width: 390px;
}
#us {
margin-top: 10px;
}
#services
{
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.col
{
text-align: left;
}
.footer {
text-align: center;
clear:
both;
font-size: 75%;
color: silver;
width: 380px;
padding:
10px;
margin: 1em auto;
}
#links a, #links a:link {
color:
#e80;
margin: 0 4px;
}
a, a:visited, a:link {
color:
#aaa;
text-decoration: none;
}
#spotify a, #spotify a:visited,
#spotify a:link { color: #6a2; }
#rdio a, #rdio a:visited, #rdio a:link {
color: #27e; }
#grooveshark a, #grooveshark a:visited, #grooveshark a:link
{ color: #e80; }
#mog a, #mog a:visited, #mog a:link { color: #444;
}
#soundcloud a, #soundcloud a:visited, #soundcloud a:link { color:
#f45914; }
#youtube a, #youtube a:visited, #youtube a:link { color:
#c21414; }
#bandcamp a, #bandcamp a:visited, #bandcamp a:link { color:
#619aa9; }
a:hover {
text-decoration: underline;
}
.results {
overflow: hidden;
}
.toggleMore {
display: none;
text-align:
center;
width: 200px;
cursor: pointer;
font-size: 100%;
margin: 20px auto;
text-shadow: 0 1px 0 white, 0 0px 9px #ddd;
color: #aaa;
background: rgba(0,0,0,0.04);
border-radius: 6px;
padding: 5px;
}
.toggleMore:hover {
background:
rgba(0,0,0,0.06);
}
.result-list li {
list-style: none;
margin:
0;
padding: 0;
border-top: 1px solid
rgba(255,255,255,0.75);
border-bottom: 1px solid
rgba(0,0,0,0.05);
font-size: 12px;
position: relative;
clear:
both;
line-height: 20px;
white-space: nowrap;
}
.result-list
li:last-child {
border-bottom: none;
}
.result-list li:first-child
{
border-top: none;
}
.result-list li a {
width: 49%;
display:
inline-block;
vertical-align: middle;
margin-right: 1%;
overflow:
hidden;
text-overflow: ellipsis;
}
.result-list {
margin:
0;
padding: 0;
}
.num-results {
color: #bbb;
font-size:
66%;
}
.loading {
display: none;
text-align: center;
margin:
1em;
width: 100%;
}
.spinner {
margin: 10px;
width:
32px;
height: 32px;
}
.refresh { cursor: pointer; }
.refresh img
{
opacity: 0.5;
height: 12px;
width: 12px;
border: 0;
}
.note
{
text-align: center;
margin: 2em 0;
padding: 0 15%;
color:
#aaa;
text-shadow: 0 1px 0 white;
}
.album {
font-size:
90%;
color: gray;
display: inline-block;
width: 50%;
overflow:
hidden;
text-overflow: ellipsis;
vertical-align:
middle;
}
.album.withPopularity {
width: 40%;
margin-right:
1%;
}
.logo {
float: right;
height: 50px;
margin: 0
-6px;
border: 0;
}
.Button {
cursor: pointer;
border:
0;
text-decoration: none;
font-size: 24px;
text-align:
center;
text-shadow: 0px -1px 1px #aaa, 1px 2px 0px white;
background:
#eee;
padding: 7px 16px;
-webkit-border-radius:
11px;
-moz-border-radius: 11px;
border-radius:
11px;
-moz-box-shadow:inset 0px 0px 0px;
x-box-shadow: 0 2px 1px #aaa,
0 6px 1px #888, 0 10px 16px rgba(0,0,0, .33);
box-shadow: 0 2px 1px #AAA,
0 6px 2px 1px #888, 0 11px 1px 4px rgba(0, 0, 0, .33), inset 0 0 2px 1px
#BBB;
color: #666;
margin: 0px 10px 10px 10px;
vertical-align:
bottom;
}
.Button:active {
box-shadow: 0 2px 2px #888, 0 0px 3px
#888, 0 3px 8px rgba(0,0,0, .15);
border: 0;
margin-bottom:
6px;
}
.playContainer, .playContainerSpacer {
display:
none;
height: 196px;
clear: both;
}
.playContainer {
position:
fixed;
width: 100%;
bottom: 0;
background:
url(/images/black_paper.gif);
box-shadow: 0px -1px 13px 0 rgba(0, 0, 0,
0.1);
border-top: 1px solid rgba(0,0,0,0.1);
-webkit-transition: height
0.2s ease-in;
-moz-transition: height 0.2s ease-in;
}
.playContainer
.minimizeButton {
position: absolute;
top: 0px;
right:
24px;
cursor: pointer;
}
.playContainer .closeButton {
position:
absolute;
top: 0px;
right: 1px;
cursor: pointer;
}
.playContainer
.header {
position: absolute;
top: 0;
left: 0;
width:
100%;
height: 31px;
}
.playContainer .info {
display:
block;
color: #eee;
font-size: 12px;
padding: 0 70px 0
12px;
overflow: hidden;
text-overflow: ellipsis;
line-height:
31px;
height: 31px;
box-sizing: border-box;
opacity:
0.25;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity
0.5s linear;
}
.playContainer.minimized {
height: 31px
!important;
}
.playContainer.minimized .playFrame {
visibility:
hidden;
}
.playContainer.minimized .info {
opacity:
1.0;
}
.playFrame {
position: absolute;
top: 31px;
border:
0;
width: 100%;
height: 165px;
}
.grooveshark .playFrame {
/*
shrink Grooveshark a little bit */
width: 125%;
height: 206px; /* 165 *
1.25 */
-moz-transform: scale(0.80, 0.80);
-webkit-transform:
scale(0.80, 0.80);
-o-transform: scale(0.80, 0.80);
-ms-transform: scale(0.80, 0.80);
transform: scale(0.80, 0.80);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.tip, .warning {
font-size:
12px;
margin: 10px 0;
}
.warning {
color: #efef90;
}
.resulting
.tip, .resulting .warning {
display: none;
}
.spotifyTarget
{
position: absolute;
visibility: hidden;
height: 0;
width:
0;
}
.popularity {
width: 66px;
height: 8px;
background:
url(/images/popularity_meter.png) 0 -8px;
display: inline-block;
opacity: 0.3;
vertical-align: middle;
}
.popularityValue {
background: url(/images/popularity_meter.png) 0 0;
display: block;
height: 8px;
width: 0; /* overridden in template */
}