port LESS to Stylus
This commit is contained in:
Chris Van
Родитель
f2ca4b9077
Коммит
039f37dba9
|
|
@ -24,6 +24,7 @@ media/external/*
|
|||
*-min.js
|
||||
*-all.js
|
||||
*.less.css
|
||||
*.styl.css
|
||||
locale
|
||||
vendor
|
||||
.nose*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
@import 'lib';
|
||||
|
||||
#abuse {
|
||||
padding: 0 15px;
|
||||
form, form .simple-field {
|
||||
margin: 0;
|
||||
}
|
||||
form label[for=id_text] {
|
||||
display: none;
|
||||
}
|
||||
.form-footer button {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import 'lib';
|
||||
|
||||
#page .account {
|
||||
padding: 15px;
|
||||
> .toggles:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#feedback-overlay section {
|
||||
width: 450px;
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
@import 'lib';
|
||||
|
||||
.incompatible-browser {
|
||||
transition(unquote('.2s opacity, .2s visibility, .2s top'));
|
||||
background: #292f33;
|
||||
box-shadow: 0 -1px 0 $dark-gray inset;
|
||||
margin: 0 auto -95px;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: -95px;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
&.active {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
top: 50px;
|
||||
visibility: visible;
|
||||
}
|
||||
div {
|
||||
background: url(../../img/mkt/icons/firefox-beta.png) 8px 66% no-repeat;
|
||||
background-size: auto 75px;
|
||||
height: 95px;
|
||||
margin: 0 auto;
|
||||
max-width: $desktop-content;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 90%;
|
||||
}
|
||||
.helper {
|
||||
// This lets us vertically center them inline-blocks.
|
||||
height: 100%;
|
||||
width: 0;
|
||||
}
|
||||
.download {
|
||||
color: #c3d0d9;
|
||||
line-height: 1.3;
|
||||
padding: 0 10px 0 90px;
|
||||
b {
|
||||
color: #33c2ff;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
}
|
||||
&:hover {
|
||||
color: lighten(#c3d0d9, 10%);
|
||||
b {
|
||||
color: lighten(#33c2ff, 10%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close {
|
||||
hidetext();
|
||||
right: 0;
|
||||
width: 32px;
|
||||
z-index: 4;
|
||||
&:before {
|
||||
gradientTop(unquote('rgba(11, 12, 13, 0), rgba(117, 127, 133, 0.35) 35%, rgba(117, 127, 133, 0.35) 65%, rgba(11, 12, 13, 0) 100%'));
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
right: 31px;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
background: url(../../img/mkt/icons/close-2x.png) 50% 50% no-repeat;
|
||||
background-size: auto 16px;
|
||||
display: block;
|
||||
margin: -18px auto 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
&:hover {
|
||||
header-hover();
|
||||
}
|
||||
&:active {
|
||||
header-active();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.incompatible-browser {
|
||||
div {
|
||||
background-position: 15px 66%;
|
||||
}
|
||||
.download {
|
||||
font-size: 120%;
|
||||
padding-left: 98px;
|
||||
span {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
width: 50px;
|
||||
&:before {
|
||||
right: 49px;
|
||||
}
|
||||
&:after {
|
||||
background-size: auto 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media $retina {
|
||||
.incompatible-browser {
|
||||
div {
|
||||
background-image: url(../../img/mkt/icons/firefox-beta-2x.png);
|
||||
}
|
||||
.close:after {
|
||||
background-image: url(../../img/mkt/icons/close-2x.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
@import 'lib';
|
||||
|
||||
// Move these to 'lib' if needed elsewhere.
|
||||
btn-shadow() {
|
||||
box-shadow: 0, 0 -2px 0 0 rgba(255, 255, 255, .1) inset;
|
||||
}
|
||||
alt-btn-shadow() {
|
||||
box-shadow: 0, 0 -1px 0 0 rgba(255, 255, 255, .5) inset;
|
||||
}
|
||||
btn-shadow-active() {
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, .2) inset, 0 12px 24px 6px rgba(0, 0, 0, .2) inset, 0 0 2px 2px rgba(0, 0, 0, .2) inset;
|
||||
}
|
||||
fatten() {
|
||||
height: 48px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.button, .button:visited, button {
|
||||
// Bluish.
|
||||
btn-shadow();
|
||||
gradient-two-color(#4cb1ff, #1793e5);
|
||||
background-repeat: repeat-x;
|
||||
border: 1px solid #1793e5;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font: 400 14px/48px $open-stack;
|
||||
height: 48px;
|
||||
min-width: 100px;
|
||||
white-space: nowrap;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
&:hover, &:focus {
|
||||
gradient-two-color(darken(#4cb1ff, 10%), darken(#1793e5, 10%));
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover, &:focus, &:active {
|
||||
color: darken($white, 10%);
|
||||
}
|
||||
&:active {
|
||||
btn-shadow-active();
|
||||
border: 1px solid darken(#1793e5, 10%);
|
||||
}
|
||||
}
|
||||
.button {
|
||||
// Grayish.
|
||||
&.disabled {
|
||||
gradient-two-color(#e7e7e7, #fafbfc);
|
||||
box-shadow: none;
|
||||
color: #a7a7a7;
|
||||
pointer-events: none;
|
||||
border: 1px solid #b7b7b7;
|
||||
}
|
||||
// Redish.
|
||||
&.manage {
|
||||
gradient-two-color(#DA5132, #A91300);
|
||||
border: 1px solid #A91300;
|
||||
&:hover, &:focus {
|
||||
gradient-two-color(darken(#DA5132, 10%), darken(#A91300, 10%));
|
||||
}
|
||||
&:active {
|
||||
btn-shadow-active();
|
||||
border: 1px solid darken(#A91300, 10%);
|
||||
}
|
||||
}
|
||||
// Grayish (legacy).
|
||||
&.alt {
|
||||
alt-btn-shadow();
|
||||
gradient-two-color(#fff, #e7e7e7);
|
||||
border: 1px solid #b7b7b7;
|
||||
color: #5f5f5f;
|
||||
&:hover, &:focus {
|
||||
gradient-two-color(darken(#fff, 10%), darken(#e7e7e7, 10%));
|
||||
}
|
||||
&:hover, &:focus, &:active {
|
||||
color: darken(#5f5f5f, 10%);
|
||||
}
|
||||
&:active {
|
||||
btn-shadow-active();
|
||||
border: 1px solid darken(#b7b7b7, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
&.product {
|
||||
fatten();
|
||||
}
|
||||
// Grayish.
|
||||
&[disabled] {
|
||||
gradient-two-color(#e7e7e7, #fafbfc);
|
||||
color: #a7a7a7;
|
||||
border: 1px solid #b7b7b7;
|
||||
}
|
||||
&[disabled], &.disabled,
|
||||
&.purchasing, &.purchased,
|
||||
&.installing, &.installed {
|
||||
pointer-events: none;
|
||||
}
|
||||
&.installed, &.purchased, &.incompatible {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.button .spin {
|
||||
webkit-spin();
|
||||
background: url(../../img/mkt/loading-16.png) no-repeat center center;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
margin: 3px 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.button, button {
|
||||
padding: 0 15px;
|
||||
&.fat {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
@import 'lib';
|
||||
|
||||
.categories {
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid li {
|
||||
border-left: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
&:nth-child(3n) {
|
||||
border-right: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
.grid .mkt-tile .icon {
|
||||
background: url(../../img/mkt/glyphs/categories.png) no-repeat;
|
||||
background-size: 86px auto;
|
||||
height: 86px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -50px 0 0 -43px;
|
||||
width: 86px;
|
||||
// &.cat-books-reference {
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
&.cat-business {
|
||||
background-position: 0 -86px;
|
||||
}
|
||||
&.cat-education {
|
||||
background-position: 0 -172px;
|
||||
}
|
||||
&.cat-entertainment-sports {
|
||||
background-position: 0 -258px;
|
||||
}
|
||||
&.cat-games {
|
||||
background-position: 0 -344px;
|
||||
}
|
||||
&.cat-health-fitness {
|
||||
background-position: 0 -430px;
|
||||
}
|
||||
&.cat-lifestyle {
|
||||
background-position: 0 -516px;
|
||||
}
|
||||
&.cat-music {
|
||||
background-position: 0 -602px;
|
||||
}
|
||||
&.cat-news-weather {
|
||||
background-position: 0 -688px;
|
||||
}
|
||||
&.cat-photos-media {
|
||||
background-position: 0 -774px;
|
||||
}
|
||||
&.cat-productivity {
|
||||
background-position: 0 -860px;
|
||||
}
|
||||
&.cat-shopping {
|
||||
background-position: 0 -946px;
|
||||
}
|
||||
&.cat-social {
|
||||
background-position: 0 -1032px;
|
||||
}
|
||||
&.cat-travel {
|
||||
background-position: 0 -1118px;
|
||||
}
|
||||
&.cat-utilities {
|
||||
background-position: 0 -1204px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media $retina {
|
||||
.categories .grid .mkt-tile .icon {
|
||||
background-image: url(../../img/mkt/glyphs/categories-2x.png);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
@import 'lib';
|
||||
|
||||
.account-links {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 39px;
|
||||
z-index: 12;
|
||||
ul {
|
||||
background: rgb(43, 54, 63);
|
||||
border-radius: 3px 0 3px 3px;
|
||||
line-height: 15px;
|
||||
opacity: 0;
|
||||
padding: 6px 4px;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
+ li {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&:before {
|
||||
gradientLeft(unquote('rgba(33, 40, 46, 0), rgba(33, 40, 46, .75) 25%, rgba(33, 40, 46, .75) 75%, rgba(33, 40, 46, 0) 100%'));
|
||||
}
|
||||
&:after {
|
||||
gradientLeft(unquote('rgba(59, 71, 80, 0), rgba(59, 71, 80, .95) 25%, rgba(59, 71, 80, .95) 75%, rgba(59, 71, 80, 0) 100%'));
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 .5px 0 $black;
|
||||
padding: 10px 15px;
|
||||
&:hover {
|
||||
gradientTop(unquote('rgba(36, 45, 51, 1) 0%, rgba(36, 45, 51, 0.57) 18%, rgba(36, 45, 51, 0) 42%)'));
|
||||
color: rgb(26, 149, 252);
|
||||
}
|
||||
}
|
||||
}
|
||||
a em {
|
||||
color: $note-gray;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
a:hover em {
|
||||
color: $light-gray;
|
||||
}
|
||||
&.inactive {
|
||||
display: none;
|
||||
}
|
||||
&.active {
|
||||
width: 210px;
|
||||
ul {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.settings {
|
||||
&:after {
|
||||
gradientTop(unquote('rgba(252, 252, 253, 0) 0%, rgba(43, 54, 63, 0.07) 15%, rgba(43, 54, 63, 1) 100%'));
|
||||
content: "";
|
||||
display: block;
|
||||
height: 39px;
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 40px;
|
||||
z-index: 2;
|
||||
}
|
||||
&:before {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@import 'lib';
|
||||
|
||||
.account h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#page section.main.account {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.toggles {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
@import 'lib';
|
||||
|
||||
.detail {
|
||||
#page {
|
||||
padding: 120px 0 40px;
|
||||
section.main {
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
}
|
||||
}
|
||||
#reviews {
|
||||
margin: 20px;
|
||||
}
|
||||
.listing {
|
||||
border: 0;
|
||||
.mkt-tile h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
#reviews-detail {
|
||||
padding: 20px;
|
||||
ul {
|
||||
margin: 0 -20px;
|
||||
position: relative;
|
||||
.review {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 0;
|
||||
bottom: 20px;
|
||||
border-left: 1px solid rgba(255, 255, 255, .5);
|
||||
border-right: 1px solid rgba(3, 16, 26, .13);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.infobox {
|
||||
> div {
|
||||
padding: 20px;
|
||||
}
|
||||
ul.c {
|
||||
margin: -5px;
|
||||
li {
|
||||
margin: 0;
|
||||
width: 25%;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Chrome fix. This seems to be the reflow issue: http://is.gd/d06sTY
|
||||
.actions .button {
|
||||
width: 572px;
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
@import 'lib';
|
||||
|
||||
#filters {
|
||||
h2, #filter-prices {
|
||||
display: none;
|
||||
}
|
||||
position: relative;
|
||||
height: 40px;
|
||||
background: none;
|
||||
z-index: 9;
|
||||
form {
|
||||
margin: 0;
|
||||
> div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
#filter-sort {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
li {
|
||||
float: left;
|
||||
margin-right: 13px;
|
||||
background: url(../../img/mkt/divider.png) no-repeat 0 2px;
|
||||
padding-left: 13px;
|
||||
&:first-child {
|
||||
background-image: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
a {
|
||||
border-top: 1px solid transparent; // Preserve spacing.
|
||||
display: block;
|
||||
color: darken($white, 15%);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
outline: 0;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
|
||||
&:hover {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.sel {
|
||||
border-top: 1px solid #3ec3fc;
|
||||
color: #3ec3fc;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
nav .header-button.expand {
|
||||
margin: 35px 0 0;
|
||||
}
|
||||
.search {
|
||||
#page {
|
||||
padding-top: 80px;
|
||||
&:before {
|
||||
gradient-two-color(#2b343b, #2e383f);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
border-top: 1px solid #262f34;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
.incompatible-browser.active {
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
.incompatible {
|
||||
.header-button.expand {
|
||||
margin-top: 130px;
|
||||
}
|
||||
}
|
||||
#search-results {
|
||||
padding: 50px 0;
|
||||
h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.search .listing {
|
||||
border-top: 1px solid $light-gray;
|
||||
}
|
||||
.header-button.expand.icon:before {
|
||||
left: 24px;
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
@import 'lib';
|
||||
|
||||
.friendly h1 + p.intro {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
float: left;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
.form-footer {
|
||||
button {
|
||||
height: auto;
|
||||
line-height: 26px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.form-label {
|
||||
label {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-col {
|
||||
.styled {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
select {
|
||||
appearance-none();
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
margin-top: 0;
|
||||
max-width: 115%;
|
||||
padding: 5px;
|
||||
width: 115%;
|
||||
}
|
||||
&.select {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
width: 60%;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
}
|
||||
&:before {
|
||||
border: transparent 8px solid;
|
||||
border-top-color: #e1e2e4;
|
||||
height: 0;
|
||||
right: 11px;
|
||||
width: 0;
|
||||
}
|
||||
&:after {
|
||||
background: #c4c9cc;
|
||||
height: 1px;
|
||||
right: 12px;
|
||||
width: 13.5px;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
border-top-color: darken(#e1e2e4, 10%);
|
||||
}
|
||||
&:after {
|
||||
background: darken(#c4c9cc, 10%);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, .9);
|
||||
border-color: $medium-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
@import 'lib';
|
||||
|
||||
#site-header {
|
||||
height: 80px;
|
||||
#search-q {
|
||||
gradient-two-color-with-image(#21292f, #2a353c, url(../../img/mkt/icons/search.png), unquote('8px 8px'), no-repeat);
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
height: 26px;
|
||||
margin-top: -14px;
|
||||
line-height: 23px;
|
||||
padding: 1px 30px 0 25px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
z-index: 13;
|
||||
&:-moz-placeholder {
|
||||
color: lighten(#48535d, 25%);
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: lighten(#48535d, 25%);
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: lighten(#48535d, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This is stupid. Fix this.
|
||||
|
||||
#search,
|
||||
#search-q,
|
||||
body[data-page-type='search'] #search,
|
||||
body[data-page-type='search'] .suggestions #search {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
body[data-page-type='root'] #search {
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
#page {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.incompatible-browser.active {
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
// Hide page titles. Show just the logo. Everywhere.
|
||||
#site-header h1.page {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#site-header section.main,
|
||||
#site-header nav,
|
||||
#search {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#search {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 57px;
|
||||
}
|
||||
|
||||
.logged #search {
|
||||
right: 47px;
|
||||
}
|
||||
|
||||
#site-header, .classic-header {
|
||||
box-shadow: 0 -1px 0 rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .1) inset;
|
||||
background: darken(#3f4f5b, 5%) $grain-src;
|
||||
background-size: 100px 100px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
body, .home {
|
||||
#site-header h1.site {
|
||||
//background: url(../../img/mkt/logos/large.png) 0 50% no-repeat;
|
||||
background: url(../../img/mkt/logos/mp_aurora_wordmark_large.png) 0 50% no-repeat;
|
||||
background-size: 280px auto;
|
||||
text-indent: -9999px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
max-width: 280px;
|
||||
top: 0;
|
||||
width: 280px;
|
||||
a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-button {
|
||||
float: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
&.back,
|
||||
&.home {
|
||||
display: none !important;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
&.settings {
|
||||
display: block;
|
||||
&:before {
|
||||
background-image: url(../../img/mkt/icons/settings.png);
|
||||
left: 9px;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
&.browserid {
|
||||
display: block;
|
||||
height: 100%;
|
||||
line-height: 80px;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 60px;
|
||||
&.loading-submit {
|
||||
hidetext();
|
||||
webkit-spin();
|
||||
background: url(../../img/mkt/loading-16.png) center no-repeat;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-search-suggestions,
|
||||
#site-search-suggestions .wrap,
|
||||
#site-search-suggestions ul,
|
||||
#site-search-suggestions li:only-child a {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#site-search-suggestions {
|
||||
box-shadow: 0 0 1px;
|
||||
height: auto;
|
||||
margin: -24px 57px 0 0;
|
||||
position: static;
|
||||
float: right;
|
||||
width: 230px;
|
||||
z-index: 11;
|
||||
.wrap {
|
||||
position: relative;
|
||||
height: auto;
|
||||
top: 0;
|
||||
a {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
span {
|
||||
ellipsis();
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
li:first-child a {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
li:last-child a {
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
li:only-child a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.suggestions {
|
||||
h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Undoing search stuff from navigation.styl - forgive my sins.
|
||||
|
||||
body.logged #site-search-suggestions {
|
||||
margin-right: 47px;
|
||||
}
|
||||
|
||||
body[data-page-type="root"] {
|
||||
#search {
|
||||
padding-right: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
.fancy {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media $retina {
|
||||
body, .home {
|
||||
#site-header h1.site {
|
||||
//background-image: url(../../img/mkt/logos/large-2x.png);
|
||||
//background-size: 280px auto;
|
||||
}
|
||||
.header-button.settings:before {
|
||||
background-image: url(../../img/mkt/icons/settings-2x.png);
|
||||
background-size: 23px auto;
|
||||
}
|
||||
}
|
||||
#site-header #search-q {
|
||||
gradient-two-color-with-image(#21292f, #2a353c, url(../../img/mkt/icons/search-2x.png), unquote('8px 8px'), no-repeat);
|
||||
background-size: 12px auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
@import 'lib';
|
||||
|
||||
.listing {
|
||||
li {
|
||||
border: 0;
|
||||
position: relative;
|
||||
&.item:hover {
|
||||
background-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
&.item + li.item {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&:before {
|
||||
gradientLeft(unquote('rgba(199, 199, 203, 0), rgba(199, 199, 203, .75) 25%, rgba(199, 199, 203, .75) 75%, rgba(199, 199, 203, 0) 100%'));
|
||||
}
|
||||
&:after {
|
||||
gradientLeft(unquote('rgba(235, 238, 239, 0), rgba(255, 255, 255, .75) 25%, rgba(255, 255, 255, .75) 75%, rgba(235, 238, 239, 0) 100%'));
|
||||
top: 1px;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
.mkt-tile {
|
||||
background: none;
|
||||
padding: 20px 20px 20px 108px;
|
||||
.icon {
|
||||
left: 20px;
|
||||
}
|
||||
.author {
|
||||
color: $text;
|
||||
text-shadow: 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mkt-tile + .tray {
|
||||
gradient-two-color-with-image(rgba(221, 225, 228, .05), rgba(159, 164, 169, .15), $grain-src);
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid rgba(3, 16, 26, 0.13);
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&:before {
|
||||
gradientLeft(unquote('rgba(199, 199, 203, 0), rgba(199, 199, 203, .75) 25%, rgba(199, 199, 203, .75) 75%, rgba(199, 199, 203, 0) 100%'));
|
||||
}
|
||||
&:after {
|
||||
gradientLeft(unquote('rgba(235, 238, 239, 0), rgba(255, 255, 255, .75) 25%, rgba(255, 255, 255, .75) 75%, rgba(235, 238, 239, 0) 100%'));
|
||||
top: 1px;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.tray {
|
||||
.dots {
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.dot {
|
||||
box-shadow: 0 0 1px #fff;
|
||||
cursor: pointer;
|
||||
&.current {
|
||||
box-shadow: 0 -1px 1px rgba(#03101a, 65%) inset, 0 0 4px fade-out(#0091ff,0.56);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid .mkt-tile {
|
||||
&.category {
|
||||
background: $grain-src rgba(255, 255, 255, .3);
|
||||
background-size: 10px 10px;
|
||||
h3 {
|
||||
light-text-shadow();
|
||||
color: $medium-gray;
|
||||
font-weight: 400;
|
||||
}
|
||||
&:hover, &:active {
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
h3 {
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
depressed();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
@import 'lib';
|
||||
|
||||
#edit-review {
|
||||
form {
|
||||
padding: 5px 25px;
|
||||
textarea {
|
||||
min-height: 110px;
|
||||
padding-top: 40px;
|
||||
width: 385px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
footer button {
|
||||
width: auto;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.form-footer {
|
||||
margin-bottom: 15px;
|
||||
.char-count {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.reply {
|
||||
.brform.rating {
|
||||
display: none;
|
||||
}
|
||||
form textarea {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.req-error {
|
||||
margin-top: 0;
|
||||
}
|
||||
// hmm
|
||||
.simple-field.rating {
|
||||
background: $faint-gray;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
width: 383px;
|
||||
left: 26px;
|
||||
> label {
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.ratingwidget {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
// Override mobile stars. In our galaxy all stars are mobile no?
|
||||
.stars {
|
||||
&.ratingwidget {
|
||||
label {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background: url(../../img/mkt/stars/sprite_18.png) 100% 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
@import 'lib';
|
||||
|
||||
|
||||
.grid {
|
||||
max-width: $desktop-content;
|
||||
.mkt-tile {
|
||||
width: 152px;
|
||||
height: 128px;
|
||||
}
|
||||
li {
|
||||
width: 25%;
|
||||
&.featured {
|
||||
width: 50%;
|
||||
height: 256px;
|
||||
// Here for an override.
|
||||
max-height: 256px;
|
||||
// These are 1px larger to deal with the double-border.
|
||||
.mkt-tile {
|
||||
width: 305px;
|
||||
height: 257px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
.next, .prev {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
width: 0;
|
||||
border: 15px solid rgba(#252525,0.7);
|
||||
border-radius: 0 30px 30px 0;
|
||||
top: 50%;
|
||||
margin-top: -30px;
|
||||
&:after {
|
||||
content: "";
|
||||
background: url(../../img/mkt/icons/slider_arrow.png) no-repeat;
|
||||
height: 22px;
|
||||
width: 15px;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
.next {
|
||||
border-radius: 30px 0 0 30px;
|
||||
right: 0;
|
||||
&:after {
|
||||
transform(scaleX(-1));
|
||||
}
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media $retina {
|
||||
.next, .prev {
|
||||
&:after {
|
||||
background: url(../../img/mkt/icons/slider_arrow-2x.png) no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
@import 'lib';
|
||||
|
||||
html, body, #site-header, .classic-header {
|
||||
min-width: $desktop;
|
||||
overflow-x: inherit;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
#page {
|
||||
background: $grain-src rgb(208, 213, 217);
|
||||
}
|
||||
|
||||
#featured-home {
|
||||
border-bottom: 1px solid rgb(183, 183, 183);
|
||||
}
|
||||
|
||||
.categories {
|
||||
padding: 50px 0;
|
||||
h2 {
|
||||
light-text-shadow();
|
||||
color: $dark-gray;
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.grid li {
|
||||
border-color: transparent;
|
||||
&:nth-child(4n + 1) {
|
||||
// Leftmost tile.
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
&:nth-child(4n), &:nth-child(3n) {
|
||||
// Rightmost tile.
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer,
|
||||
#directory-footer {
|
||||
padding: 30px 0;
|
||||
.pad {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: $desktop-ftr;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
background: $white;
|
||||
border-top-color: rgba(183, 183, 183, .8);
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
right: 10px;
|
||||
top: 34px;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
#directory-footer {
|
||||
border-top: 1px solid #c7c9cc;
|
||||
box-shadow: 0 1px 0 #e6e9eb inset;
|
||||
background: $grain-src rgb(216, 220, 224);
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
.links a {
|
||||
margin-top: 8px;
|
||||
+ a {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.devhub {
|
||||
background: url(../../img/mkt/icons/rocket.png) 50px 35px no-repeat;
|
||||
margin: -30px 0 -30px;
|
||||
padding: 30px 0 30px 114px;
|
||||
h1 {
|
||||
color: $dark-gray;
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 1px 1px rgba(245, 247, 250, .75);
|
||||
}
|
||||
b {
|
||||
color: $link;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
margin-top: 5px;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
h1 {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group {
|
||||
float: left;
|
||||
min-height: 71px;
|
||||
padding: 0 40px;
|
||||
width: 25%;
|
||||
position: relative;
|
||||
+ .group:after,
|
||||
+ .group:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
}
|
||||
+ .group:after {
|
||||
gradientTop(unquote('rgba(185, 190, 195, 0), rgba(185, 190, 195, .75) 25%, rgba(185, 190, 195, .75) 75%, rgba(185, 190, 195, 0) 100%'));
|
||||
left: 0;
|
||||
}
|
||||
+ .group:before {
|
||||
gradientTop(unquote('rgba(226, 228, 231, 0), rgba(226, 228, 231, .75) 25%, rgba(226, 228, 231, .75) 75%, rgba(226, 228, 231, 0) 100%'));
|
||||
left: 1px;
|
||||
}
|
||||
&:first-child {
|
||||
width: 50%;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-header section.main {
|
||||
max-width: $desktop-hdr;
|
||||
}
|
||||
#page section.main {
|
||||
max-width: $desktop-content;
|
||||
}
|
||||
#site-footer {
|
||||
max-width: $desktop-ftr;
|
||||
}
|
||||
|
||||
.container,
|
||||
.listing,
|
||||
.form-grid {
|
||||
background-color: rgba(0, 0, 0, .03);
|
||||
border: 1px solid rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.container.listing {
|
||||
// Fix: 834593
|
||||
background-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.container {
|
||||
&.product-details,
|
||||
&.results,
|
||||
&.prose {
|
||||
margin: 50px 0;
|
||||
}
|
||||
&.prose,
|
||||
&.form-grid {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
body[data-page-type="notice"],
|
||||
body[data-page-type="alpha"] {
|
||||
section.primary {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Move this out of here. This is not your diaper.
|
||||
|
||||
// detail
|
||||
// At desktop width, let's float the content ratings.
|
||||
.desktop .content-rating {
|
||||
float: left;
|
||||
padding: 0 5px 0 0;
|
||||
width: 50%;
|
||||
&:nth-child(2n+1) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// ratings
|
||||
.split {
|
||||
float: left;
|
||||
padding: 0 5px 15px 0;
|
||||
width: 286px;
|
||||
+ .split {
|
||||
margin-top: 0;
|
||||
padding: 0 0 15px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Feedback form support links.
|
||||
.several-buttons .button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#directory-footer .group a.region {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px auto;
|
||||
min-height: 20px;
|
||||
overflow: visible;
|
||||
padding: 1px 0 0 28px;
|
||||
text-overflow: normal;
|
||||
&.region-worldwide {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.region-br {
|
||||
background-image: url(../../img/mkt/icons/regions/br.png);
|
||||
}
|
||||
|
||||
.region-spain {
|
||||
background-image: url(../../img/mkt/icons/regions/es.png);
|
||||
}
|
||||
|
||||
.region-uk {
|
||||
background-image: url(../../img/mkt/icons/regions/uk.png);
|
||||
}
|
||||
|
||||
.region-us {
|
||||
background-image: url(../../img/mkt/icons/regions/us.png);
|
||||
}
|
||||
|
||||
#footzilla {
|
||||
background: url(../../img/mkt/logos/footzilla.png) 0 5px no-repeat;
|
||||
float: left;
|
||||
text-indent: -9999px;
|
||||
width: 100px;
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#footzilla,
|
||||
#footzilla a {
|
||||
height: 26px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-top: 1px solid #bdc3c6;
|
||||
color: $note-gray;
|
||||
overflow: hidden;
|
||||
padding: 30px 0;
|
||||
width: 100%;
|
||||
p, ul {
|
||||
border-left: 1px dotted $light-gray;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
p {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
ul {
|
||||
float: right;
|
||||
line-height: 1.2;
|
||||
width: 20%;
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
li + li {
|
||||
margin-top: 2px;
|
||||
}
|
||||
a {
|
||||
color: lighten(#2189d9, 10%);
|
||||
&:hover {
|
||||
color: #2189d9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media $retina {
|
||||
#directory-footer {
|
||||
.devhub {
|
||||
background-image: url(../../img/mkt/icons/rocket-2x.png);
|
||||
background-size: 47px auto;
|
||||
}
|
||||
}
|
||||
#footzilla {
|
||||
background-image: url(../../img/mkt/logos/footzilla-2x.png);
|
||||
background-size: 81px auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
@import 'lib';
|
||||
|
||||
$text-gray = #424f5a; // Why's this not in lib.styl?
|
||||
$link = #2d87ca;
|
||||
|
||||
|
||||
// Description.
|
||||
|
||||
.detail {
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
.infobox .button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.blurbs {
|
||||
clear: both;
|
||||
color: $text-gray;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
ul, ol {
|
||||
margin: 10px 0;
|
||||
}
|
||||
blockquote {
|
||||
background: $faint-gray;
|
||||
border-left: 2px solid $light-gray;
|
||||
color: $medium-gray;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.show-toggle {
|
||||
display: block;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: -5px -10px 0 0;
|
||||
padding: 5px 10px 10px;
|
||||
text-align: right;
|
||||
text-transform: lowercase;
|
||||
&:before {
|
||||
content: "(";
|
||||
font-weight: 200;
|
||||
}
|
||||
&:after {
|
||||
content: ")";
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#product-rating-status {
|
||||
a {
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
color: $medium-gray;
|
||||
font-size: 12px;
|
||||
&.toggle {
|
||||
color: $dark-gray;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.toggle {
|
||||
&:hover a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
+ div {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
address {
|
||||
color: $note-gray;
|
||||
font-size: 12px;
|
||||
margin: 10px 0 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-rating {
|
||||
color: $text-gray;
|
||||
display: table;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
.icon {
|
||||
border-radius: 5px;
|
||||
background: $black;
|
||||
color: $white;
|
||||
float: left;
|
||||
font: 600 32px/64px $open-stack;
|
||||
height: 64px;
|
||||
margin-right: 15px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 64px;
|
||||
}
|
||||
.icon-L {
|
||||
background: $box-green;
|
||||
}
|
||||
.icon-10 {
|
||||
background: $box-blue;
|
||||
}
|
||||
.icon-12 {
|
||||
background: $box-yellow;
|
||||
}
|
||||
.icon-14 {
|
||||
background: $box-orange;
|
||||
}
|
||||
.icon-16 {
|
||||
background: $box-red;
|
||||
}
|
||||
.description {
|
||||
display: table-cell;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
p {
|
||||
margin: 0;
|
||||
+ p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details + #product-status {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
#upsell {
|
||||
gradient-two-color(#fafbfc, #ebeff2);
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .5), 0 1px 1px 0 rgba(0, 0, 0, .1) inset;
|
||||
color: #333638;
|
||||
margin-top: 15px;
|
||||
padding: 10px 33px 10px 52px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
h3 {
|
||||
color: darken(#ffe, 75%);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.upsell, .prose, .vitals {
|
||||
padding-left: 86px;
|
||||
width: 75%;
|
||||
}
|
||||
.upsell {
|
||||
ellipsis();
|
||||
display: block;
|
||||
float: left;
|
||||
font-weight: 200;
|
||||
font-size: 21px;
|
||||
min-height: 35px;
|
||||
line-height: 32px;
|
||||
position: relative;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
margin-right: 15px;
|
||||
position: absolute;
|
||||
vertical-align: top;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
max-height: 32px;
|
||||
max-width: 32px;
|
||||
}
|
||||
.prose {
|
||||
color: $medium-gray;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&:active {
|
||||
depressed();
|
||||
}
|
||||
&:after {
|
||||
background: $arrow-src 100% 50% no-repeat;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 14px;
|
||||
opacity: .8;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 10px;
|
||||
width: 13px;
|
||||
}
|
||||
.avail, .name, .icon {
|
||||
opacity: .85;
|
||||
}
|
||||
&:hover {
|
||||
border-color: $bg-gray;
|
||||
text-decoration: none;
|
||||
&:after, .avail, .name, .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.avail, .name {
|
||||
ellipsis();
|
||||
display: block;
|
||||
}
|
||||
.avail {
|
||||
color: $green;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
margin-bottom: -4px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: -4px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details {
|
||||
font-size: 14px;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
.icon {
|
||||
max-width: 120px;
|
||||
}
|
||||
.vitals {
|
||||
float: left;
|
||||
margin-left: 22px;
|
||||
max-width: 624px;
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 100;
|
||||
margin: 0 0 0 -1px;
|
||||
}
|
||||
.authors {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.price {
|
||||
text-shadow: 0 1px 0 $black;
|
||||
&:after {
|
||||
text-shadow: 0 1px 0 $white;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
margin: 10px 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.support {
|
||||
font-size: 14px;
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
a, time {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
margin-bottom: 10px;
|
||||
min-height: 100px;
|
||||
width: 480px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Slider next/prev page controls are smaller here.
|
||||
.alt-slider .controls a {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.no-payments.notification-box {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 -1px 0 #ddd inset, 0 1px 0 rgba(0, 0, 0, .1);
|
||||
border: 1px solid #CCD6E3;
|
||||
padding: 15px;
|
||||
background: #E3EDFA;
|
||||
line-height: 1.3;
|
||||
margin: 15px 0;
|
||||
p {
|
||||
margin: 0;
|
||||
+ p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
b {
|
||||
color: #333;
|
||||
}
|
||||
a {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.notice {
|
||||
b, a {
|
||||
color: #258;
|
||||
}
|
||||
a:hover {
|
||||
color: darken(#258, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
@import 'lib';
|
||||
|
||||
.device-list {
|
||||
margin-top: 10px;
|
||||
h4, ul {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
ul {
|
||||
color: $medium-gray;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
height: 23px;
|
||||
position: relative;
|
||||
text-indent: -9999px;
|
||||
vertical-align: middle;
|
||||
width: 26px;
|
||||
background: url(../../img/mkt/icons/device_icons.png) no-repeat;
|
||||
&.android-mobile {
|
||||
background-position: 0 -138px;
|
||||
margin-left: 2px;
|
||||
&.unavailable {
|
||||
background-position: 0 -161px;
|
||||
}
|
||||
}
|
||||
&.android-tablet {
|
||||
background-position: 0 -230px;
|
||||
height: 17px;
|
||||
margin-left: 4px;
|
||||
&.unavailable {
|
||||
background-position: 0 -253px;
|
||||
}
|
||||
}
|
||||
&.desktop {
|
||||
background-position: 0 -92px;
|
||||
&.unavailable {
|
||||
background-position: 0 -115px;
|
||||
}
|
||||
}
|
||||
&.firefoxos {
|
||||
background-position: 0 -184px;
|
||||
&.unavailable {
|
||||
background-position: 0 -207px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
@import 'lib';
|
||||
|
||||
#filters {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $bg;
|
||||
grain();
|
||||
top: 0;
|
||||
form > div {
|
||||
padding: 0 15px;
|
||||
margin-top: 84px;
|
||||
> h2 {
|
||||
font-size: 16px;
|
||||
margin: 35px 0 10px;
|
||||
}
|
||||
}
|
||||
header {
|
||||
.apply, .back {
|
||||
display: block;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
display: block;
|
||||
color: $white;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-button.back::after {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
.toggles {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
li {
|
||||
box-shadow: 0 1px 0 0 #f2f4f5;
|
||||
float: left;
|
||||
width: 33%;
|
||||
height: 35px;
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&:first-child, &:first-child a, &:nth-child(3n+1), &:nth-child(3n+1) a {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
&:last-child, &:last-child a, &:nth-child(3n), &:nth-child(3n) a {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggles.two-col {
|
||||
li {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.toggles li a, .footer-action .apply {
|
||||
ellipsis();
|
||||
gradient-two-color(#f7f7f7, $faint-gray);
|
||||
border: 1px solid #cdcbcb;
|
||||
color: $text;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
&.sel, &:active {
|
||||
gradient-two-color(#328ccc, #2475b3);
|
||||
border-color: #235f8c;
|
||||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3) inset;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggles li + li a {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.footer-action {
|
||||
text-align: right;
|
||||
margin: 30px 0 10px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #cdcbcb;
|
||||
.apply {
|
||||
font-size: 14px;
|
||||
width: auto;
|
||||
padding: 0 15px;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,369 @@
|
|||
@import 'lib';
|
||||
|
||||
.potato-captcha {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font: 100% $open-stack;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button, input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
button, input[type=button], input[type=reset], input[type=submit] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=search] {
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
input:-moz-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
input[placeholder] {
|
||||
// Because bug 673873 is stupidface.
|
||||
// Yes, the order matters. Firefox 18 (and below) is clownshoes.
|
||||
&:-moz-placeholder:focus {
|
||||
color: transparent !important;
|
||||
}
|
||||
&:focus::-moz-placeholder {
|
||||
color: transparent !important;
|
||||
}
|
||||
&:focus::-webkit-input-placeholder {
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text], input[type=email], input[type=search], select, textarea, .input {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 1px 1px rgba(0, 0, 0, .1) inset, 0 1px 0 #fff inset;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border: 1px solid $light-gray;
|
||||
color: $dark-gray;
|
||||
padding: 5px;
|
||||
&:focus {
|
||||
background: rgba(255, 255, 255, .9);
|
||||
color: $black;
|
||||
border-color: $medium-gray;
|
||||
}
|
||||
&[disabled], &[readonly] {
|
||||
background-color: $faint-gray;
|
||||
color: $note-gray;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=file], select {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type=file] {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
&[type=checkbox],
|
||||
&[type=radio] {
|
||||
margin-right: 5px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl {
|
||||
input {
|
||||
&[type=checkbox],
|
||||
&[type=radio] {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
option {
|
||||
max-width: 634px;
|
||||
}
|
||||
|
||||
label, .label {
|
||||
font-weight: bold;
|
||||
text-shadow: .5px .5px $white;
|
||||
}
|
||||
|
||||
.choice label,
|
||||
label.choice,
|
||||
li label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choice label,
|
||||
label.choice {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.req,
|
||||
.errorlist,
|
||||
.error,
|
||||
.error label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.notification-box .error {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
form .error {
|
||||
margin-bottom: 5px;
|
||||
input[type=text], input[type=password], input[type=email], select,
|
||||
textarea {
|
||||
border-color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.errorlist {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p.req {
|
||||
font-size: 11px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.optional {
|
||||
color: $note-gray;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.simple-field {
|
||||
label, .label {
|
||||
color: $dark-gray;
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.errorlist {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 10px 0;
|
||||
.note,
|
||||
.html-support {
|
||||
color: $medium-gray;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.html-support {
|
||||
margin: 5px 0 0;
|
||||
text-align: right;
|
||||
span {
|
||||
border-bottom: 1px dotted $light-gray;
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page form {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
clear: both;
|
||||
color: $medium-gray;
|
||||
}
|
||||
|
||||
.friendly .form-footer .or a:only-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
.simple-field {
|
||||
padding: 0 0 5px;
|
||||
width: 100%;
|
||||
label, .label {
|
||||
margin: 0;
|
||||
}
|
||||
+ .simple-field {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
.form-label,
|
||||
.form-col {
|
||||
float: left;
|
||||
}
|
||||
.form-label {
|
||||
padding: 5px 0;
|
||||
min-height: 1px;
|
||||
width: 25%;
|
||||
}
|
||||
.form-col {
|
||||
color: $text;
|
||||
width: 75%;
|
||||
p,
|
||||
.errorlist {
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
}
|
||||
.form-col p,
|
||||
input + a,
|
||||
.form-col a:only-child {
|
||||
color: $medium-gray;
|
||||
}
|
||||
.form-col p,
|
||||
input + a,
|
||||
.form-col a:only-child,
|
||||
.errorlist {
|
||||
font-size: 11px;
|
||||
line-height: 13px;
|
||||
}
|
||||
.form-col a:only-child {
|
||||
line-height: 28px;
|
||||
}
|
||||
.form-footer {
|
||||
padding-top: 5px;
|
||||
}
|
||||
input[type=text],
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
input[type=text] {
|
||||
height: 32px;
|
||||
}
|
||||
.html-support {
|
||||
max-width: 264px;
|
||||
}
|
||||
input + a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.edit_with_prefix {
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl .form-grid {
|
||||
input {
|
||||
+ a {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.form-grid {
|
||||
.form-label,
|
||||
.form-col {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
button {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
&:only-child {
|
||||
float: right;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
&:only-child {
|
||||
margin: 0;
|
||||
}
|
||||
&.logout {
|
||||
min-width: 50%;
|
||||
line-height: 33px;
|
||||
border: 1px solid #cdcbcb;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
gradient-two-color(#f7f7f7, $faint-gray);
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
ellipsis();
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl .form-footer {
|
||||
button {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
a {
|
||||
margin-left: 0 5px 0 0;
|
||||
&:only-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button.loading-submit {
|
||||
position: relative;
|
||||
&:after {
|
||||
background-image: url(../../img/mkt/loading-16.png);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 16px;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
right: -26px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.button.full {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
p.form-footer {
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
.form-footer {
|
||||
margin-top: 10px;
|
||||
.button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
button:only-child {
|
||||
width: 100%;
|
||||
}
|
||||
.or {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,498 @@
|
|||
// styles for the global site header only.
|
||||
@import 'lib';
|
||||
|
||||
// Oh, I beg your pardon? Is this too many styles for you?
|
||||
// Then let's fix that and not create new stylesheets for the header.
|
||||
// Oh, were you hoping for a pun? NO. THIS IS NO JOKING MATTER. OMG.
|
||||
|
||||
// compensate for fixed header.
|
||||
#page {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
// if there is a page title we want in the header, give it the id of #top
|
||||
#top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 672px) {
|
||||
.login.home #top {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
color: #fff;
|
||||
display: none;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
gradient-two-color(#566773, #3e4e59);
|
||||
box-shadow: 0 -1px 0 rgba(0, 0, 0, .15) inset, 0 0 3px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
line-height: 50px;
|
||||
max-width: 200px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
text-shadow: 0 1px 0 $black;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header {
|
||||
section.main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
nav,
|
||||
section.main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.home, .offline {
|
||||
#site-header {
|
||||
h1 {
|
||||
height: 30px;
|
||||
left: 10px;
|
||||
overflow: hidden;
|
||||
text-indent: -99999px;
|
||||
top: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
.page:before,
|
||||
.wordmark {
|
||||
background: url(../../img/mkt/logos/mp_aurora_wordmark_small.png) no-repeat;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 30px;
|
||||
}
|
||||
.page:before {
|
||||
background-position: 0 0;
|
||||
content: '';
|
||||
width: 32px;
|
||||
}
|
||||
.wordmark {
|
||||
background-position: 100% 0;
|
||||
left: 8px;
|
||||
position: relative;
|
||||
width: 168px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjusts more header title space next to the 'home' icon.
|
||||
body[data-page-type=notice] #site-header h1 {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.header-button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
&:after {
|
||||
content: '';
|
||||
z-index: 11;
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 2px;
|
||||
background: url(../../img/mkt/divider.png) no-repeat;
|
||||
margin-top: 7px;
|
||||
}
|
||||
&.right {
|
||||
float: right;
|
||||
&:after {
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
float: left;
|
||||
&:after {
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.filter {
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
&.cancel {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
// icons for header buttons
|
||||
&.icon {
|
||||
text-indent: -1000%;
|
||||
}
|
||||
&.icon:before {
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(../../img/mkt/header-icons.png) 0 24px no-repeat;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 13px;
|
||||
}
|
||||
&.settings:before {
|
||||
background-position: 0 0;
|
||||
}
|
||||
&.cancel:before,
|
||||
&.dismiss:before {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
&.search:before {
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
&.back {
|
||||
width: 40px;
|
||||
&:after {
|
||||
right: 19px;
|
||||
top: 0;
|
||||
}
|
||||
&:before {
|
||||
background-position: 0 -72px;
|
||||
width: 12px;
|
||||
left: 4px;
|
||||
}
|
||||
/* Gives us a big click target without being totally insane. */
|
||||
b {
|
||||
display: block;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
width: 20px;
|
||||
}
|
||||
&:hover b {
|
||||
header-hover();
|
||||
}
|
||||
&:active b {
|
||||
header-active();
|
||||
}
|
||||
}
|
||||
|
||||
&.expand {
|
||||
width: 78px;
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
&.expand:before {
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
background: url(../../img/mkt/expand-toggle.png) no-repeat;
|
||||
}
|
||||
&.expand.active:before {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-overlay.show {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Content header (breadcrumbs, heading, subnav) - used on Account Settings, etc. */
|
||||
|
||||
#page .account header.c {
|
||||
margin-bottom: 10px;
|
||||
h1 {
|
||||
float: left;
|
||||
}
|
||||
.sub-nav {
|
||||
float: right;
|
||||
}
|
||||
.sub-nav {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 1px 0 $barely-gray;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
background-clip: padding-box;
|
||||
float: left;
|
||||
a {
|
||||
gradient-two-color($white, rgba(238, 238, 238, .8));
|
||||
border: 1px solid $note-gray;
|
||||
border-right: 0;
|
||||
color: $medium-gray;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
padding: 5px 15px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
|
||||
&:hover {
|
||||
gradient-two-color($barely-gray, darken($barely-gray, 15%));
|
||||
color: $dark-gray;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
|
||||
}
|
||||
&:active {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
|
||||
background: $faint-gray;
|
||||
border-color: $note-gray;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
a, a:hover {
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, .2) inset;
|
||||
gradient-two-color($medium-gray, fade-out($medium-gray, 75%));
|
||||
border-color: $medium-gray;
|
||||
color: $white;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
&:first-child a {
|
||||
border-radius: 15px 0 0 15px;
|
||||
}
|
||||
&:last-child a {
|
||||
border-radius: 0 15px 15px 0;
|
||||
border-right: 1px solid $note-gray;
|
||||
}
|
||||
&:only-child a {
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
float: left;
|
||||
margin: 0 0 0 12px;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
label {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-q {
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(0, 0, 0, .5) inset, 0 1px 1px rgba(0, 0, 0, .5) inset;
|
||||
gradient-two-color-with-image(#21292f, #2a353c, url(../../img/mkt/icons/magnifier.png), unquote('8px 8px'), no-repeat);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: 0;
|
||||
color: lighten(#99abb9, 2%);
|
||||
display: block;
|
||||
font: 17px/30px $open-stack;
|
||||
height: 30px;
|
||||
outline: none;
|
||||
padding: 0 30px 0 30px;
|
||||
z-index: 2;
|
||||
width: 93px;
|
||||
&:focus {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) inset, 0 0 8px rgba(80, 160, 220, 0.6);
|
||||
color: $white;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
color: lighten(#99abb9, 3%);
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: lighten(#99abb9, 3%);
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: lighten(#99abb9, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl #site-header #search-q {
|
||||
background-position: 0 50%;
|
||||
padding: 5px 15px 5px 50px;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
hidetext();
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 11px;
|
||||
background: url(../../img/mkt/icons/clear.png) no-repeat;
|
||||
top: 20px;
|
||||
right: -50px;
|
||||
}
|
||||
|
||||
@media $retina {
|
||||
.search-clear {
|
||||
background-image: url(../../img/mkt/icons/clear-2x.png);
|
||||
background-size: 11px auto;
|
||||
}
|
||||
}
|
||||
|
||||
input:invalid ~ .search-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
body.show-search {
|
||||
#search-q {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
#search {
|
||||
float: right;
|
||||
}
|
||||
body:not(.show-search) {
|
||||
body[data-page-type='search'] #site-header h1.page {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header {
|
||||
section.main {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When to show what header buttons where.
|
||||
body {
|
||||
.header-button {
|
||||
display: none;
|
||||
}
|
||||
&[data-page-type='search'] {
|
||||
.header-button {
|
||||
&.back, &.expand, &.filter {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#site-header h1.page {
|
||||
display: none;
|
||||
}
|
||||
#search-q {
|
||||
width: 100%;
|
||||
}
|
||||
#search {
|
||||
display: block;
|
||||
width: calc(unquote('100% - 221px'));
|
||||
}
|
||||
#site-header:not(.suggestions) #search {
|
||||
float: left;
|
||||
margin-left: -7px;
|
||||
}
|
||||
.suggestions {
|
||||
#search {
|
||||
margin-left: 12px;
|
||||
}
|
||||
#search {
|
||||
width: calc(unquote('100% - 143px'));
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-page-type='leaf'], &[data-page-type='alpha'] {
|
||||
.header-button {
|
||||
&.back {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-page-type='root'] {
|
||||
.fancy {
|
||||
opacity: 0;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
}
|
||||
.header-button {
|
||||
&.search, &.settings {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#search {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-right: 12px;
|
||||
width: calc(unquote('100% - 62px'));
|
||||
}
|
||||
#search-q {
|
||||
width: calc(unquote('100% - 100px'));
|
||||
}
|
||||
&.show-search {
|
||||
#search-q {
|
||||
left: 40px;
|
||||
}
|
||||
.suggestions {
|
||||
.settings {
|
||||
display: none;
|
||||
}
|
||||
#search {
|
||||
width: calc(unquote('100% - 72px'));
|
||||
}
|
||||
}
|
||||
#site-header .wordmark {
|
||||
opacity: 0;
|
||||
top: -20px;
|
||||
transition(unquote('top .5s, opacity .5s'));
|
||||
z-index: 5;
|
||||
}
|
||||
#site-header .fancy {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
transition(unquote('top .5s, opacity .5s, visibility .5s'));
|
||||
visibility: visible;
|
||||
z-index: 10;
|
||||
.search-clear {
|
||||
right: 50px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 532px) {
|
||||
body[data-page-type='root'] {
|
||||
.fancy {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
#search {
|
||||
width: 212px;
|
||||
}
|
||||
.header-button {
|
||||
&.search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Market header suggestions mode. (Searchatron Terrorize!)
|
||||
#site-header.suggestions {
|
||||
nav {
|
||||
.back, .expand, .filter {
|
||||
display: none;
|
||||
}
|
||||
.cancel {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
h1 .wordmark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
@import 'lib';
|
||||
|
||||
.infobox {
|
||||
border-top: 1px solid rgba(255, 255, 255, .5);
|
||||
border-bottom: 1px solid rgba(3, 16, 26, .13);
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
> div {
|
||||
padding: 15px;
|
||||
}
|
||||
.not-rated {
|
||||
color: $medium-gray;
|
||||
}
|
||||
.average-rating {
|
||||
width: 100%;
|
||||
}
|
||||
ul.c {
|
||||
list-style-type: none;
|
||||
margin: -15px 0 0;
|
||||
padding: 0;
|
||||
li {
|
||||
float: left;
|
||||
margin: 15px 0 0;
|
||||
min-height: inherit;
|
||||
padding-right: 5px;
|
||||
width: 50%;
|
||||
&:nth-child(2n) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
dl {
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
dt, dd {
|
||||
color: $text;
|
||||
display: inline-block;
|
||||
}
|
||||
dt {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
// Widths
|
||||
$desktop = 672px;
|
||||
|
||||
// These are potentially temporary while real desktop widths are birthed.
|
||||
$desktop-content = 612px;
|
||||
$desktop-hdr = 732px;
|
||||
$desktop-ftr = $desktop-hdr;
|
||||
|
||||
|
||||
// Colors
|
||||
// TODO: Have Michael take a peek at these!
|
||||
$link = #2d87ca;
|
||||
$link-dark = darken($link, 10%);
|
||||
$faded-link = fade-out($link, 50%);
|
||||
$shadow-blue = #98B2C9;
|
||||
$border-blue = #C9DDF2;
|
||||
$border-black = rgba(#000,0.19999999999999996);
|
||||
$faded-blue = fade-out($border-blue, 90%);
|
||||
$orange = darken(#d60, 5%);
|
||||
$red = #c00000;
|
||||
$maroon = #800;
|
||||
$green = #090;
|
||||
$black = #000;
|
||||
$dark-gray = #333;
|
||||
$navy-gray = #394C58;
|
||||
$overlay-gray = #2a353c;
|
||||
$text = #424f5a;
|
||||
$subtext = #74828d;
|
||||
$darker-text = darken($text, 25%);
|
||||
$medium-gray = #666;
|
||||
$gray = #888;
|
||||
$note-gray = #999;
|
||||
$bg-gray = #bbb;
|
||||
$light-gray = #ccc;
|
||||
$faint-gray = #eee;
|
||||
$barely-gray = #fcfcfc;
|
||||
$white = #fff;
|
||||
$bg = #eff1f3;
|
||||
$black-border = #14171a;
|
||||
$bg-lite = lighten($bg, 2%);
|
||||
$faint-blue = #ECF5FE;
|
||||
$grain = #394C58;
|
||||
|
||||
// Used for content ratings for games in Brazil.
|
||||
// You can use them elsewhere when you want colourful boxes.
|
||||
// Don't be a square.
|
||||
$box-green = #00b963;
|
||||
$box-blue = #00d5ff;
|
||||
$box-yellow = #ffd300;
|
||||
$box-orange = #ff7c00;
|
||||
$box-red = #ff2600;
|
||||
|
||||
|
||||
$btn-b = #44A5E1;
|
||||
$btn-b-dark = #267CC2;
|
||||
$btn-b-lite = saturate(spin($btn-b, 4), 4%);
|
||||
|
||||
|
||||
// Font Stacks
|
||||
$open-stack = "Open Sans", "OpenSansWeb", "Helvetica Neue", Arial, sans-serif;
|
||||
|
||||
|
||||
// Retina
|
||||
$retina = unquote('screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)');
|
||||
|
||||
|
||||
// Mixins
|
||||
$grain-src = url(../../img/mkt/grain.png);
|
||||
grain() {
|
||||
background-image: $grain-src;
|
||||
}
|
||||
|
||||
$arrow-src = url(../../img/mkt/arrows/plain.png);
|
||||
|
||||
light-text-shadow() {
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
transform($tform) {
|
||||
-webkit-transform: $tform;
|
||||
-moz-transform: $tform;
|
||||
-ms-transform: $tform;
|
||||
transform: $tform;
|
||||
}
|
||||
|
||||
transform-origin($x, $y) {
|
||||
-moz-transform-origin: $x $y;
|
||||
-webkit-transform-origin: $x $y;
|
||||
-ms-transform-origin: $x $y;
|
||||
transform-origin: $x $y;
|
||||
}
|
||||
|
||||
transition($property) {
|
||||
-webkit-transition: $property;
|
||||
transition: $property;
|
||||
}
|
||||
|
||||
transition-property($property) {
|
||||
-webkit-transition-property: $property;
|
||||
transition-property: $property;
|
||||
}
|
||||
|
||||
transition-duration($duration = 2s) {
|
||||
-webkit-transition-duration: $duration;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
|
||||
transition-delay($delay = 1s) {
|
||||
-webkit-transition-delay: $delay;
|
||||
transition-delay: $delay;
|
||||
}
|
||||
|
||||
text-columns($count, $gap = 1em) {
|
||||
column-count: $count;
|
||||
-moz-column-count: $count;
|
||||
-webkit-column-count: $count;
|
||||
column-gap: $gap;
|
||||
-moz-column-gap: $gap;
|
||||
-webkit-column-gap: $gap;
|
||||
}
|
||||
|
||||
ellipsis() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Image replacement.
|
||||
hidetext() {
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
animation($animation) {
|
||||
-webkit-animation: $animation;
|
||||
-moz-animation: $animation;
|
||||
animation: $animation;
|
||||
}
|
||||
|
||||
gradientLeft($gradient) {
|
||||
background-image: -webkit-linear-gradient(left, $gradient);
|
||||
background-image: linear-gradient(to right, $gradient);
|
||||
}
|
||||
|
||||
gradientTop($gradient) {
|
||||
background-image: -webkit-linear-gradient(top, $gradient);
|
||||
background-image: linear-gradient(to bottom, $gradient);
|
||||
}
|
||||
|
||||
gradient-two-color($color1, $color2) {
|
||||
background-color: $color2;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from($color1), to($color2));
|
||||
background-image: -webkit-linear-gradient($color1, $color2);
|
||||
background-image: linear-gradient($color1, $color2);
|
||||
}
|
||||
|
||||
gradient-two-color-with-image($color1, $color2, $image=unquote(''), $position=unquote(''), $repeat=unquote('')) {
|
||||
background: $color2;
|
||||
background: $image $position $repeat, -webkit-gradient(linear, left bottom, left top, from($color1), to($color2));
|
||||
background: $image $position $repeat, -webkit-linear-gradient($color1, $color2);
|
||||
background: $image $position $repeat, linear-gradient($color1, $color2);
|
||||
}
|
||||
|
||||
// Depressed button/link styles
|
||||
depressed() {
|
||||
box-shadow: inset 0 8px 20px 6px rgba(0, 0, 0, .1), inset 0 0 1px 1px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
appearance-none() {
|
||||
// appearance: none; // This isn't even a proposed descriptor.
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
header-hover() {
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .25) 25%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, 0) 100%);
|
||||
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .25) 25%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
|
||||
header-active() {
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35) 25%, rgba(0, 0, 0, .35) 75%, rgba(0, 0, 0, 0) 100%);
|
||||
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35) 25%, rgba(0, 0, 0, .35) 75%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
|
||||
// Because WebKit can't figure out how to animate PNGs.
|
||||
webkit-spin() {
|
||||
-webkit-animation-duration: 1.5s;
|
||||
-webkit-animation-name: spin;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
@import 'lib';
|
||||
|
||||
#lightbox {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
z-index: 9000;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
-moz-transition: .5s opacity ease;
|
||||
-webkit-transition: .5s opacity ease;
|
||||
pointer-events: none;
|
||||
color: white;
|
||||
.close {
|
||||
color: transparent;
|
||||
display: block;
|
||||
height: 80px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 80px;
|
||||
z-index: 20;
|
||||
&:after {
|
||||
background: url(../../img/mkt/header-icons.png) 0 -24px no-repeat;
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
height: 100%;
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
.content {
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&.loading {
|
||||
background: url(../../img/zamboni/mobile/loading-white.png) 50% 50% no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
.caption {
|
||||
font-size: 18px;
|
||||
padding: 0 15px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
white-space: normal;
|
||||
}
|
||||
img, video, .err {
|
||||
padding-bottom: 82px;
|
||||
margin: auto;
|
||||
max-height: 95%;
|
||||
max-width: 95%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
.err {
|
||||
font-size: 100px;
|
||||
max-height: 80px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
@import 'lib';
|
||||
|
||||
.centre {
|
||||
text-align: center;
|
||||
h2, footer {
|
||||
text-align: center;
|
||||
}
|
||||
.proceed {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: $medium-gray;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@import 'lib';
|
||||
|
||||
#notification {
|
||||
background: #ccc;
|
||||
bottom: 0;
|
||||
height: 32px;
|
||||
left: 50%;
|
||||
padding: 10px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
max-width: 600px;
|
||||
line-height: 14px;
|
||||
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
color: $text;
|
||||
font-weight: bold;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transform(unquote('translate(-50%, 110%)'));
|
||||
transition-property(unquote('transform, -moz-transform, -webkit-transform, -ms-transform'));
|
||||
transition-duration(unquote('.3s, .3s, .3s, .3s'));
|
||||
|
||||
&.show {
|
||||
transform(unquote('translate(-50%, 0%)'));
|
||||
}
|
||||
&.error {
|
||||
background: lighten(#f99, 15%);
|
||||
color: lighten(#600, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#notification {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
@import 'lib';
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $dark-gray;
|
||||
font-size: 26px;
|
||||
line-height: 120%;
|
||||
text-shadow: .5px .5px $white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.offline {
|
||||
h3 {
|
||||
text-align: center;
|
||||
margin: 2em;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#site-header h1 {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
@import 'lib';
|
||||
|
||||
body.overlayed {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
z-index: 2000;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
color: #000;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
pointer-events: none;
|
||||
-moz-transition: .5s opacity ease;
|
||||
-webkit-transition: .5s opacity ease;
|
||||
&.show {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
> section {
|
||||
border: 2px solid $text;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 2px rgba(#000,0.5);
|
||||
gradient-two-color(#dee3e6, #fff);
|
||||
transform(unquote('translate(-50%, -50%)'));
|
||||
padding: 1em;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-moz-transition: .5s all ease;
|
||||
-webkit-transition: .5s all ease;
|
||||
color: $text;
|
||||
footer {
|
||||
margin-top: 10px;
|
||||
backround-color: #ccc;
|
||||
width: 100%;
|
||||
display: block;
|
||||
button {
|
||||
margin: 10px 0 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
&.bare {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
.header-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
header .dismiss {
|
||||
width: 50px;
|
||||
}
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
h2, .char-count {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.req-error {
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.dismiss {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.overlay > section {
|
||||
padding: 10px;
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#msg-overlay {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@import 'lib';
|
||||
|
||||
.loadmore {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
list-style-type: none;
|
||||
button {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
padding: 0;
|
||||
}
|
||||
.throbber {
|
||||
display: none;
|
||||
}
|
||||
&.loading {
|
||||
button {
|
||||
visibility: hidden;
|
||||
}
|
||||
.throbber {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 20px;
|
||||
border: 4px solid #666;
|
||||
border-color: #666 transparent;
|
||||
animation(unquote('spin 1s linear infinite'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listing .loadmore {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
@import 'lib';
|
||||
|
||||
.promo-grid .mkt-tile {
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $faint-gray;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:active {
|
||||
depressed();
|
||||
}
|
||||
}
|
||||
|
||||
.promo-grid, .slider {
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider .rating {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.promo-grid {
|
||||
ul {
|
||||
float: left;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
padding: 0 20px 20px 0;
|
||||
width: 33.33%;
|
||||
&:nth-of-type(3n) {
|
||||
padding-right: 0;
|
||||
}
|
||||
// We can have up to 10 apps (so we have two equal columns of five on tablet).
|
||||
&:nth-of-type(10n) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.rating {
|
||||
float: right;
|
||||
}
|
||||
.mkt-tile {
|
||||
light-text-shadow();
|
||||
background: fade-out($light-gray, 50%);
|
||||
display: block;
|
||||
height: 64px;
|
||||
padding: 10px 10px 10px 90px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
box-shadow: 0 1px 2px fade-out($black, 50%);
|
||||
background: $faint-gray;
|
||||
.author {
|
||||
color: $medium-gray;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background: $light-gray;
|
||||
box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, .2), inset 0 12px 24px 6px rgba(0, 0, 0, .2), inset 0 0 2px 2px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.img.icon {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.img.preview {
|
||||
background-image: none !important;
|
||||
display: none;
|
||||
}
|
||||
h3, .author {
|
||||
ellipsis();
|
||||
// Because `overflow: hidden` is required for `text-overflow: ellipsis`
|
||||
// and the letter 'g' gets clipped, my g.
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
h3 {
|
||||
padding: 0 25px 2px 0;
|
||||
}
|
||||
.author {
|
||||
color: $medium-gray;
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
font-style: normal;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.price {
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl .promo-grid {
|
||||
a {
|
||||
padding: 10px 90px 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.promo-grid {
|
||||
li {
|
||||
width: 50%;
|
||||
&:nth-of-type(2n) {
|
||||
padding-right: 0;
|
||||
}
|
||||
&:nth-of-type(2n + 1) {
|
||||
padding-right: 20px;
|
||||
}
|
||||
&:nth-of-type(10n) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.featured.slider {
|
||||
.controls {
|
||||
.next-page, .prev-page {
|
||||
top: 15px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
.promo-slider {
|
||||
height: 145px;
|
||||
}
|
||||
}
|
||||
.promo-grid .rating {
|
||||
display: none;
|
||||
}
|
||||
.promo-slider {
|
||||
ul {
|
||||
li,
|
||||
li .img {
|
||||
width: 120px;
|
||||
}
|
||||
li {
|
||||
.img {
|
||||
background-position: 50% 50%;
|
||||
height: 120px;
|
||||
margin-bottom: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
h3 {
|
||||
color: lighten($text, 60%);
|
||||
font-size: 15px;
|
||||
margin: 2px 0 0;
|
||||
max-width: 100%;
|
||||
text-shadow: .5px .5px 0 $navy-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.promo-grid {
|
||||
h3, .author {
|
||||
margin-bottom: -9px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
text-shadow: .2px .2px 0 $barely-gray;
|
||||
}
|
||||
.author {
|
||||
font-size: 15px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.price {
|
||||
color: darken($green, 15%);
|
||||
font-size: 13px;
|
||||
bottom: 10px;
|
||||
}
|
||||
ul {
|
||||
background: $bg-lite;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
}
|
||||
li {
|
||||
border-bottom: 1px solid darken($light-gray, 2%);
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
+ li {
|
||||
border-top: 1px solid lighten($faint-gray, 4%);
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
.mkt-tile {
|
||||
background: darken($bg, 1%);
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2n + 1) {
|
||||
padding-right: 0;
|
||||
}
|
||||
.img {
|
||||
top: 10px;
|
||||
}
|
||||
.mkt-tile {
|
||||
background: $bg-lite;
|
||||
height: 74px;
|
||||
padding: 10px 40px 0 85px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.html-rtl .promo-grid {
|
||||
li .mkt-tile {
|
||||
padding: 10px 85px 10px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
@import 'lib';
|
||||
|
||||
#installed {
|
||||
margin: 20px 0 0;
|
||||
color: $dark-gray;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background-color: $light-gray;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
line-height: 27px;
|
||||
a {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page section.main#installed {
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
||||
#installed {
|
||||
display: none;
|
||||
padding: 0;
|
||||
border-top: 1px solid #c2c8cc;
|
||||
border-bottom: 1px solid #bdc2c5;
|
||||
gradient-two-color(rgba(176, 186, 192, 0.13), rgba(187, 195, 199, 0.66));
|
||||
color: $text;
|
||||
p {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.how {
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: $white;
|
||||
box-shadow: inset 0 1px 2px $text;
|
||||
display: none;
|
||||
font-weight: normal;
|
||||
&.mac {
|
||||
b {
|
||||
background: url(../../img/mkt/icons/mac-applications.jpg) 5px 0 no-repeat;
|
||||
padding: 0 5px 0 35px;
|
||||
}
|
||||
}
|
||||
&.windows {
|
||||
b:last-child {
|
||||
background: url(../../img/mkt/icons/win-start.png) 5px 0 no-repeat;
|
||||
background-size: 21px 20px;
|
||||
padding: 0 0 0 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
@import 'lib';
|
||||
|
||||
// On page load this gets transformed by JS into a star picker.
|
||||
select[name=rating] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.replies .review.reply {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Detail page.
|
||||
#reviews {
|
||||
position: relative;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#submit-review {
|
||||
position: absolute;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.not-rated + p a {
|
||||
padding: 5px 20px 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.review {
|
||||
list-style-type: none;
|
||||
padding: 10px 16px;
|
||||
position: relative;
|
||||
&.reply {
|
||||
background: url(../../img/mkt/icons/reply.png) 10px 15px no-repeat;
|
||||
display: none;
|
||||
padding-left: 35px;
|
||||
}
|
||||
&.deleting {
|
||||
background: fade-out($red, 60%);
|
||||
}
|
||||
&.deleted {
|
||||
border: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
+ .review {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
.byline, .timestamp {
|
||||
font-size: 12px;
|
||||
}
|
||||
.byline {
|
||||
color: $medium-gray;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
vertical-align: middle;
|
||||
b {
|
||||
color: $gray;
|
||||
}
|
||||
strong {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
.timestamp {
|
||||
color: $note-gray;
|
||||
float: right;
|
||||
&:hover {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
.body {
|
||||
margin: 5px 0 15px;
|
||||
}
|
||||
.view-reply {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
ul {
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
&:not(.hidden) + li:before,
|
||||
+ li.hidden + li:before {
|
||||
color: $note-gray;
|
||||
content: "\00a0\2022\00a0\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This applies to "app details" pages only.
|
||||
.reviews {
|
||||
border-top: 1px solid rgba(255, 255, 255, .5);
|
||||
border-bottom: 1px solid rgba(3, 16, 26, .13);
|
||||
.not-rated {
|
||||
color: lighten($text, 5%);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.full .button {
|
||||
display: block;
|
||||
}
|
||||
#reviews {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#reviews-detail {
|
||||
padding: 15px;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.review {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#edit-review.reply .brform.rating {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// This applies to "reviews list" pages only.
|
||||
// TODO: make proper review tiles. This is an interim solution.
|
||||
.reviews-listing {
|
||||
#add-review {
|
||||
margin: 30px 16px;
|
||||
}
|
||||
.button.fat {
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
&:hover {
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
.review {
|
||||
border-top: 1px solid #bcc0c2;
|
||||
border-bottom: 1px solid #bcc0c2;
|
||||
&:nth-of-type(2n) {
|
||||
border-top: 1px solid #eceff0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#review-list .review:nth-of-type(2n + 1) {
|
||||
background-color: darken($bg, 5%);
|
||||
+ .replies .review {
|
||||
background-color: darken($bg, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
#submit-review {
|
||||
padding: 0 15px;
|
||||
header.product .simple-field,
|
||||
&.friendly header .errorlist {
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.req,
|
||||
label[for=id_body], label[for=id_rating] {
|
||||
display: none;
|
||||
}
|
||||
.charlimit {
|
||||
font-size: 12px;
|
||||
margin: 5px 0 15px;
|
||||
text-align: right;
|
||||
line-height: 12px;
|
||||
}
|
||||
.submit-review {
|
||||
button, .button {
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
width: auto;
|
||||
line-height: 48px;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.button {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.two-up {
|
||||
&:nth-child(2n+1) {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 180x18, 120x12, 90x9, 332x32
|
||||
.stars {
|
||||
background: url(../../img/mkt/stars/sprite_12.png) no-repeat;
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
margin-right: 4px;
|
||||
text-indent: -9999px;
|
||||
vertical-align: middle;
|
||||
width: 60px;
|
||||
&.stars-4 { background-position: -12px 0; }
|
||||
&.stars-3 { background-position: -24px 0; }
|
||||
&.stars-2 { background-position: -36px 0; }
|
||||
&.stars-1 { background-position: -48px 0; }
|
||||
&.stars-0 { background-position: -60px 0; }
|
||||
&.ratingwidget {
|
||||
background: url(../../img/mkt/stars/sprite_32.png) repeat-x;
|
||||
background-repeat: repeat-x 5px 0;
|
||||
height: 32px;
|
||||
width: 200px;
|
||||
// Yeah, maybe I should just set a class in JS. I thought I was being clever.
|
||||
&.stars-1 label[data-stars="1"], &.stars-2 label[data-stars="1"], &.stars-2 label[data-stars="2"],
|
||||
&.stars-3 label[data-stars="1"], &.stars-3 label[data-stars="2"], &.stars-3 label[data-stars="3"],
|
||||
&.stars-4 label[data-stars="1"], &.stars-4 label[data-stars="2"], &.stars-4 label[data-stars="3"], &.stars-4 label[data-stars="4"],
|
||||
&.stars-5 label[data-stars="1"], &.stars-5 label[data-stars="2"], &.stars-5 label[data-stars="3"], &.stars-5 label[data-stars="4"], &.stars-5 label[data-stars="5"] {
|
||||
background: url(../../img/mkt/stars/sprite_32.png) 100% 100%;
|
||||
}
|
||||
label {
|
||||
height: 32px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
&.large {
|
||||
background: url(../../img/mkt/stars/sprite_18.png) no-repeat 0 0;
|
||||
width: 90px;
|
||||
height: 18px;
|
||||
&.stars-4 { background-position: -18px 0; }
|
||||
&.stars-3 { background-position: -36px 0; }
|
||||
&.stars-2 { background-position: -54px 0; }
|
||||
&.stars-1 { background-position: -72px 0; }
|
||||
&.stars-0 { background-position: -90px 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl .stars {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.creatured .stars,
|
||||
.featured .stars {
|
||||
background-image: url(../../img/mkt/stars/sprite_9.png);
|
||||
height: 9px;
|
||||
width: 45px;
|
||||
&.stars-4 { background-position: -9px 0; }
|
||||
&.stars-3 { background-position: -18px 0; }
|
||||
&.stars-2 { background-position: -27px 0; }
|
||||
&.stars-1 { background-position: -36px 0; }
|
||||
&.stars-0 { background-position: -45px 0; }
|
||||
}
|
||||
|
||||
.featured .rating .cnt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-rating strong {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.average-rating {
|
||||
span {
|
||||
color: $text;
|
||||
vertical-align: middle;
|
||||
&:first-child {
|
||||
line-height: 48px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full #add-first-review {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#add-review .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.split {
|
||||
+ .split {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-field.rating {
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .8);
|
||||
background: rgba(200, 200, 200, .2);
|
||||
margin-bottom: 15px;
|
||||
padding: 20px 10px;
|
||||
.ratingwidget {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.errorlist {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ratingwidget {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 65px;
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0;
|
||||
text-indent: -9999px;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,539 @@
|
|||
/*! normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */
|
||||
|
||||
/* =============================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects block display not defined in IE6/7/8/9 & FF3
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents modern browsers from displaying 'audio' without controls
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
|
||||
* Known issue: no IE6 support
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
|
||||
* http://clagnut.com/blog/348/#c790
|
||||
* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
|
||||
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses font-family inconsistency between 'textarea' and other form elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses margins handled incorrectly in IE6/7
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses outline displayed oddly in Chrome
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability when focused and also mouse hovered in all browsers
|
||||
* people.opera.com/patrickl/experiments/keyboard/test
|
||||
*/
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses font sizes and margins set differently in IE6/7
|
||||
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin.7 em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin.3 em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size.3 em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size.5 em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE7/8/9, S5, Chrome
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses style set to 'bolder' in FF3+, S4/5, Chrome
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in S5, Chrome
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE6/7/8/9
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses margins set differently in IE6/7
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects font family set oddly in IE6, S4/5, Chrome
|
||||
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
|
||||
*/
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability of pre-formatted text in all browsers
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses CSS quotes not supported in IE6/7
|
||||
* 2. Addresses quote property not supported in S4
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/* 2 */
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents sub and sup affecting line-height in all browsers
|
||||
* gist.github.com/413930
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margins set differently in IE6/7
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
.html-rtl dd {
|
||||
margin: 0 40px 0 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses paddings set differently in IE6/7
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
.html-rtl {
|
||||
menu, ol, ul {
|
||||
padding: 0 40px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects list images handled incorrectly in IE7
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
|
||||
* 2. Improves image quality when scaled in IE7
|
||||
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overflow displayed oddly in IE9
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margin not present in IE6/7/8/9, S5, O11
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects margin displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding.5 em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE6/7/8/9
|
||||
* 2. Corrects text not wrapping in FF3
|
||||
* 3. Corrects alignment displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font size not being inherited in all browsers
|
||||
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
|
||||
* 3. Improves appearance and consistency in all browsers
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal; /* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
|
||||
* 2. Corrects inability to style clickable 'input' types in iOS
|
||||
* 3. Removes inner spacing in IE7 without affecting normal text inputs
|
||||
* Known issue: inner spacing remains in IE6
|
||||
*/
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer; /* 1 */
|
||||
-webkit-appearance: button; /* 2 */
|
||||
*overflow: visible; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to content-box in IE8/9
|
||||
* 2. Removes excess padding in IE8/9
|
||||
* 3. Removes excess padding in IE7
|
||||
Known issue: excess padding remains in IE6
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses appearance set to searchfield in S5, Chrome
|
||||
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in S5, Chrome on OS X
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in FF3+
|
||||
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE6/7/8/9
|
||||
* 2. Improves readability and alignment in all browsers
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
These are easy to forget
|
||||
*/
|
||||
|
||||
img::selection {
|
||||
background: transparent;
|
||||
}
|
||||
img::-moz-selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-tap-highlight-color: rgba(255, 0, 0, 0.62);
|
||||
}
|
||||
|
||||
/* >> The Magnificent CLEARFIX <<
|
||||
Lifted from html5boilerplate.com
|
||||
License is Public domain */
|
||||
.c:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
.c { display: inline-block; }
|
||||
* html .c { height: 1%; } /* Hides from IE-mac \*/
|
||||
.c { display: block; }
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@import 'lib';
|
||||
|
||||
.no-results {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
opacity: .5;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
b[data-href] {
|
||||
color: $link-dark;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
@import 'lib';
|
||||
|
||||
// Site-wide or structural styles only in this file.
|
||||
// Can't find a better file for your style? Create one!
|
||||
// This is not your diaper.
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizeLegibility;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.js-hidden, .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emaillink-wrapper {
|
||||
/* Necessary when emaillink is in a paragraph. */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span.emaillink {
|
||||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
.i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $link;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: $grain-src $bg;
|
||||
color: $text;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Specificified!
|
||||
body .loading-fragment {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 11; // To cover the header.
|
||||
em {
|
||||
webkit-spin();
|
||||
background: url(../../img/zamboni/mobile/loading-white.png) center no-repeat;
|
||||
display: inline-block;
|
||||
height: 86px;
|
||||
margin: -43px 0 0 -43px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 86px;
|
||||
&:before {
|
||||
border-radius: 180px;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 86px;
|
||||
margin: -43px 0 0 -43px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 86px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-box {
|
||||
box-shadow: 0 -1px 0 #ddd inset, 0 1px 0 rgba(0, 0, 0, .1);
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
form {
|
||||
line-height: 28px;
|
||||
button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
ol, ul {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: .5em 0 0;
|
||||
}
|
||||
b {
|
||||
color: #333;
|
||||
}
|
||||
h1 {
|
||||
color: maroon;
|
||||
font-size: 14px;
|
||||
}
|
||||
h2 {
|
||||
color: #458;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
&.error {
|
||||
background: #FEE3E5;
|
||||
border-color: #E0C9D6;
|
||||
h2 {
|
||||
color: #B14949;
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
background: #fd9;
|
||||
border: 1px solid darken(#fd9, 60%);
|
||||
}
|
||||
&.full {
|
||||
a:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
+ p {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-header, #page {
|
||||
min-width: 320px;
|
||||
section.main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
&.full {
|
||||
width: 100%;
|
||||
> div {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page {
|
||||
position: relative;
|
||||
section.main {
|
||||
&:only-child {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#site-header section.main,
|
||||
#page section.main {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#page > .overlay {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// 'Notice' pages have a padded body and a home icon in the header.
|
||||
// 'Alpha' pages have a padded body and a back icon.
|
||||
body[data-page-type=notice], body[data-page-type=alpha] {
|
||||
section.primary {
|
||||
padding: 15px;
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
border-bottom: 1px solid $dark-gray;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#offline-pixel {
|
||||
display: none;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.several-buttons {
|
||||
box-shadow: 0 1px 0 rgba(3, 16, 26, .13) inset, 0 2px 0 rgba(255, 255, 255, .5) inset;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
.button {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.two-up {
|
||||
width: 50%;
|
||||
padding: 0 5px;
|
||||
float: left;
|
||||
&:nth-child(2n+1) {
|
||||
padding-right: 0;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
from { -webkit-transform: rotate(0turn); }
|
||||
to { -webkit-transform: rotate(1turn); }
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
from { -moz-transform: rotate(0turn); }
|
||||
to { -moz-transform: rotate(1turn); }
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0turn); }
|
||||
to { transform: rotate(1turn); }
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,70 @@
|
|||
@import 'lib';
|
||||
|
||||
#site-search-suggestions {
|
||||
transition-property(unquote('bottom, opacity, visibility'));
|
||||
transition-duration(.3s);
|
||||
font: 13px/26px $open-stack;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
right: -10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
bottom: 5px;
|
||||
visibility: visible;
|
||||
}
|
||||
.wrap {
|
||||
background: $bg $grain-src;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0 0 1px;
|
||||
padding: 0;
|
||||
}
|
||||
a {
|
||||
border-top: 1px solid $white;
|
||||
border-bottom: 1px solid #cbd0d3;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
z-index: 6;
|
||||
color: $text;
|
||||
font-size: 19px;
|
||||
background: $bg $grain-src;
|
||||
line-height: 44px;
|
||||
&:after {
|
||||
clear: both;
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
li a:hover,
|
||||
li a.sel,
|
||||
&.sel li a.sel:hover {
|
||||
gradient-two-color(rgba(85, 170, 204, .1), rgba(17, 102, 153, .05));
|
||||
border-color: $faded-link;
|
||||
color: darken($link, 20%);
|
||||
}
|
||||
&.sel li a:hover {
|
||||
background: transparent;
|
||||
border-color: $faint-gray transparent transparent transparent;
|
||||
color: $link;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,450 @@
|
|||
@import 'lib';
|
||||
|
||||
// base class
|
||||
|
||||
.mkt-tile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
color: $text;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
.info h3 {
|
||||
ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
.grid, .listing {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-details .mkt-tile .icon.asset-tile,
|
||||
.listing .mkt-tile .icon.asset-tile,
|
||||
.mkt-tile .icon.featured_tile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.creatured .mkt-tile .icon,
|
||||
.featured .mkt-tile .icon {
|
||||
display: none;
|
||||
&.asset-tile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.creatured .grid,
|
||||
.creatured .grid li {
|
||||
padding: 0;
|
||||
}
|
||||
.creatured .grid li + li {
|
||||
border-left: 1px solid rgba(0, 0, 0, .4);
|
||||
}
|
||||
.creatured .grid {
|
||||
.mkt-tile {
|
||||
background: $grain-src darken($grain, 15%);
|
||||
height: 55px;
|
||||
padding: 12px 10px;
|
||||
.info, &:hover .info, &:active .info {
|
||||
background: transparent;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken($grain, 12%);
|
||||
}
|
||||
&:active {
|
||||
depressed();
|
||||
}
|
||||
.info {
|
||||
box-shadow: none;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
position: static;
|
||||
}
|
||||
h3 {
|
||||
color: $white;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
margin-bottom: -4px;
|
||||
padding-left: 21px;
|
||||
}
|
||||
.rating {
|
||||
font-size: 11px;
|
||||
margin: 4px 0 0 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rating .cnt,
|
||||
.unrated {
|
||||
display: block;
|
||||
text-indent: -999px;
|
||||
}
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
&.featured_tile {
|
||||
background-size: auto 16px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 11px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
&.asset-tile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Listing
|
||||
// name + icon + price + rating in a vertical listview.
|
||||
// also used as standalone "card" on detail pages.
|
||||
|
||||
.product-details,
|
||||
.listing .mkt-tile {
|
||||
// TODO: Maybe we don't need this twice. We'll see when we do desktop.
|
||||
gradient-two-color-with-image(#f7f7f7, $barely-gray, $grain-src);
|
||||
}
|
||||
|
||||
.listing .mkt-tile {
|
||||
min-height: 66px;
|
||||
padding: 20px 10px 20px 88px;
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
margin: -4px 0 -7px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
.icon {
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 10px;
|
||||
}
|
||||
.author {
|
||||
color: $subtext;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
max-height: 28px;
|
||||
margin-bottom: -3px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.button {
|
||||
float: right;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 13px;
|
||||
margin: 2px 0 2px 10px;
|
||||
padding: 0;
|
||||
width: 70px;
|
||||
}
|
||||
.rating {
|
||||
clear: both;
|
||||
margin-top: 4px;
|
||||
color: $subtext;
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
.cnt {
|
||||
border-bottom: 1px solid transparent;
|
||||
color: $note-gray;
|
||||
font-weight: 600;
|
||||
padding-bottom: 1px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
a {
|
||||
color: $note-gray;
|
||||
text-decoration: none;
|
||||
&:hover .cnt {
|
||||
border-bottom-color: $note-gray;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.listing .result .mkt-tile .rating .cnt {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Grid
|
||||
// store graphic, name, price in a floated grid (3 tiles wide at 320).
|
||||
|
||||
.grid {
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
li {
|
||||
border-left: 1px solid $black-border;
|
||||
border-bottom: 1px solid $black-border;
|
||||
float: left;
|
||||
width: 100%/3;
|
||||
max-height: 141px;
|
||||
&:nth-child(3n) {
|
||||
border-right: 1px solid $black-border;
|
||||
}
|
||||
}
|
||||
.mkt-tile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 106px;
|
||||
.info {
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .25);
|
||||
background: rgba(255, 255, 255, .85);
|
||||
height: 40px;
|
||||
padding: 6px 4px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
h3, .vital {
|
||||
font-size: 12px;
|
||||
line-height: 13px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: -2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.price {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: $link;
|
||||
}
|
||||
.icon {
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.price,
|
||||
.rating {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rating {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.button,
|
||||
.author,
|
||||
.unrated,
|
||||
.cnt {
|
||||
display: none;
|
||||
}
|
||||
&.category {
|
||||
background-color: #f1f1f1;
|
||||
h3 {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&:hover, &:active {
|
||||
.info {
|
||||
background: rgba(255, 255, 255, .95);
|
||||
}
|
||||
}
|
||||
&.category {
|
||||
&:hover, &:active {
|
||||
h3 {
|
||||
color: $darker-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .icon {
|
||||
opacity: .8;
|
||||
}
|
||||
&:active .icon,
|
||||
&.category:active h3 {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
&.featured {
|
||||
grain();
|
||||
.mkt-tile {
|
||||
height: 55px;
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
.info {
|
||||
background: none;
|
||||
top: 7px;
|
||||
box-shadow: none;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.vital {
|
||||
font-size: 10px;
|
||||
}
|
||||
.rating {
|
||||
color: $note-gray;
|
||||
width: 52px;
|
||||
ellipsis();
|
||||
}
|
||||
h3 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
li {
|
||||
border-right: 1px solid $black-border;
|
||||
border-bottom: 1px solid $black-border;
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.listing {
|
||||
> li {
|
||||
border-top: 1px solid $light-gray;
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Previews tray.
|
||||
.expanded .mkt-tile + .tray {
|
||||
display: block;
|
||||
height: 232px;
|
||||
}
|
||||
.mkt-tile + .tray {
|
||||
display: none;
|
||||
gradient-two-color-with-image(rgba(221, 225, 228, .35), rgba(159, 164, 169, .95), $grain-src);
|
||||
height: 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .3);
|
||||
border-top: 1px solid rgba(0, 0, 0, .05);
|
||||
position: relative;
|
||||
.slider {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
ul {
|
||||
padding: 15px 0;
|
||||
margin: 0 auto;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
height: 232px;
|
||||
}
|
||||
li {
|
||||
margin-left: 15px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 180px;
|
||||
height: 270px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
img {
|
||||
-moz-user-select: none;
|
||||
max-width: 180px;
|
||||
max-height: 215px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tray {
|
||||
.dots {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
text-align: center;
|
||||
height: 6px;
|
||||
line-height: 6px;
|
||||
}
|
||||
.dot {
|
||||
gradient-two-color(#667480, #828f99);
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, .5), 1px 0 2px 2px rgba(0, 0, 0, .21) inset, 0 1px 1px rgba(0, 0, 0, .005);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
margin: 0 3px;
|
||||
&.current {
|
||||
gradient-two-color(#368dd9, #57a9fa);
|
||||
box-shadow: 0 -1px 1px rgba(#03101a, 65%) inset, 0 0 4px fade-out(#0091ff,0.56);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bad-app {
|
||||
color: $maroon;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.grid .bad-app {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
// Mobile.
|
||||
.grid {
|
||||
.mkt-tile.category h3 {
|
||||
bottom: 0;
|
||||
}
|
||||
li {
|
||||
// Hide rightmost and leftmost borders on mobile.
|
||||
&:nth-child(3n) {
|
||||
border-right: 0;
|
||||
}
|
||||
&:nth-child(3n + 1) {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 614px) {
|
||||
.grid {
|
||||
.mkt-tile {
|
||||
.info {
|
||||
color: #fff;
|
||||
background: rgba(#252a2e,0.85);
|
||||
}
|
||||
&:hover, &:active {
|
||||
.info {
|
||||
background: rgba(#252a2e,0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#featured-home {
|
||||
background: #252a2e;
|
||||
}
|
||||
#page > #featured-home {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
@import 'lib';
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSansWeb';
|
||||
src: url('fonts/OpenSans-Light-webfont.eot');
|
||||
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSansWeb';
|
||||
src: url('fonts/OpenSans-Regular-webfont.eot');
|
||||
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSansWeb';
|
||||
src: url('fonts/OpenSans-Semibold-webfont.eot');
|
||||
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $open-stack;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $dark-gray;
|
||||
font-size: 26px;
|
||||
line-height: 120%;
|
||||
text-shadow: .5px .5px $white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.listing h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $dark-gray;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
address {
|
||||
color: $medium-gray;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.policy-statement {
|
||||
line-height: 1.4;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
color: $dark-gray;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.lineclamp.author {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -384,3 +384,31 @@ def jquery_migrated():
|
|||
files.insert(jquery + 1, 'js/lib/jquery-migrate-1.1.0.js')
|
||||
new_JS[bundle] = tuple(files)
|
||||
return new_JS
|
||||
|
||||
|
||||
def less2stylus():
|
||||
"""
|
||||
This will return a dict of the CSS bundles with `.styl` stylesheets
|
||||
instead of `.less` ones.
|
||||
|
||||
Put in your local settings::
|
||||
|
||||
try:
|
||||
MINIFY_BUNDLES['css'].update(asset_bundles.less2stylus())
|
||||
except AttributeError:
|
||||
pass
|
||||
|
||||
"""
|
||||
import os
|
||||
ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
|
||||
|
||||
def stylus(fn):
|
||||
fn_styl = fn.replace('.less', '.styl')
|
||||
if os.path.exists(os.path.join(ROOT, 'media', fn_styl)):
|
||||
fn = fn_styl
|
||||
return fn
|
||||
|
||||
new_CSS = dict(CSS)
|
||||
for bundle, files in new_CSS.iteritems():
|
||||
new_CSS[bundle] = tuple(stylus(f) for f in files)
|
||||
return new_CSS
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"dependencies": {
|
||||
"clean-css": "0.10.x",
|
||||
"less": "1.3.x",
|
||||
"stylus": "0.32.x",
|
||||
"uglify-js": "2.2.x"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче