implement Traveler's Pack (bug 668536) and Back to School promos (bug 668541)
This commit is contained in:
Chris Van
Родитель
852b38e71f
Коммит
3d7237c709
|
|
@ -2,6 +2,7 @@ import caching.base as caching
|
|||
import jingo
|
||||
import jinja2
|
||||
from tower import ugettext_lazy as _
|
||||
import waffle
|
||||
|
||||
from addons.models import Addon
|
||||
from api.views import addon_filter
|
||||
|
|
@ -190,3 +191,39 @@ class ThunderbirdCollection(CollectionPromo):
|
|||
cls = 'promo'
|
||||
title = _(u'Thunderbird Collection')
|
||||
subtitle = _(u'Here are some great add-ons for Thunderbird.')
|
||||
|
||||
|
||||
class TravelCollection(CollectionPromo):
|
||||
slug = 'Travelers Pack'
|
||||
pk = 4
|
||||
id = 'travel'
|
||||
cls = 'promo'
|
||||
title = _(u'Sit Back and Relax')
|
||||
subtitle = _(u'Add-ons that help you on your travels!')
|
||||
|
||||
def get_descriptions(self):
|
||||
return {
|
||||
5791: _(u"Displays a country flag depicting the location of the "
|
||||
"current website's server and more."),
|
||||
1117: _(u'FoxClocks let you keep an eye on the time around the '
|
||||
'world.'),
|
||||
11377: _(u'Automatically get the lowest price when you shop '
|
||||
'online or search for flights.')
|
||||
}
|
||||
|
||||
|
||||
class SchoolCollection(CollectionPromo):
|
||||
slug = 'School'
|
||||
pk = 2128026 # TODO(push): Change this to 2133887.
|
||||
id = 'school'
|
||||
cls = 'promo'
|
||||
title = _(u'A+ add-ons for School')
|
||||
subtitle = _(u'Add-ons for teachers, parents, and students heading back '
|
||||
'to school.')
|
||||
|
||||
def get_descriptions(self):
|
||||
return {
|
||||
3456: _(u'Would you like to know which websites you can trust?'),
|
||||
2410: _(u'Xmarks is the #1 bookmarking add-on.'),
|
||||
2444: _(u'Web page and text translator, dictionary, and more!')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% set collection = promo.collection %}
|
||||
<li class="panel">
|
||||
<div id="{{ promo.id }}" class="feature collection {{ promo.cls }}">
|
||||
<div id="{{ promo.id }}" class="feature promo-collection {{ promo.cls }}">
|
||||
<hgroup>
|
||||
{% if promo.linkify_title %}
|
||||
<h2>
|
||||
|
|
@ -40,11 +40,5 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p class="more">
|
||||
{% set src = 'discovery-promo' if module_context == 'discovery' else 'homepage' %}
|
||||
{% trans name=collection.name,
|
||||
url=collection.get_url_path()|urlparams(src=src) %}
|
||||
Find more add-ons in the <a href="{{ url }}">{{ name }}</a> collection.
|
||||
{% endtrans %}</p>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ data-upandcoming-url="{{ services_url('discovery.pane.more_addons', 'up-and-comi
|
|||
|
||||
<section id="main">
|
||||
|
||||
<section id="main-feature">
|
||||
<section id="promos">
|
||||
<ul id="nav-features">
|
||||
<li class="nav-prev"><a href="#" class="prev">{{ _('Previous') }}</a></li>
|
||||
<li class="nav-next"><a href="#" class="next">{{ _('Next') }}</a></li>
|
||||
|
|
@ -65,7 +65,7 @@ data-upandcoming-url="{{ services_url('discovery.pane.more_addons', 'up-and-comi
|
|||
</ul>
|
||||
<div class="gallery-addons">
|
||||
<div class="gallery">
|
||||
<ul class="slider rec-addons"></ul>
|
||||
<ul class="slider addons"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -382,14 +382,6 @@ class TestDownloadSources(amo.tests.TestCase):
|
|||
def setUp(self):
|
||||
self.url = reverse('discovery.pane', args=['3.7a1pre', 'Darwin'])
|
||||
|
||||
def test_promo(self):
|
||||
import nose
|
||||
raise nose.SkipTest()
|
||||
r = self.client.get(self.url)
|
||||
doc = pq(r.content)
|
||||
urls = doc('#main-feature .collection a[href$="?src=discovery-promo"]')
|
||||
eq_(urls.length, 2)
|
||||
|
||||
def test_detail(self):
|
||||
url = reverse('discovery.addons.detail', args=['a3615'])
|
||||
r = self.client.get(url)
|
||||
|
|
|
|||
|
|
@ -2,26 +2,19 @@
|
|||
|
||||
#promos {
|
||||
display: none;
|
||||
height: 268px;
|
||||
max-height: 268px;
|
||||
height: 271px;
|
||||
margin-bottom: 30px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
div {
|
||||
> div,
|
||||
li > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
font-style: normal;
|
||||
font-family: "Lucida Grande","Lucida Sans",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -72,243 +65,213 @@
|
|||
}
|
||||
|
||||
.feature {
|
||||
.border-radius(5px);
|
||||
height: 251px;
|
||||
padding: 10px 10%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
&.ryff {
|
||||
color: #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 20px 10% 0 270px;
|
||||
background: url(../../img/zamboni/discovery_pane/promos/ryff-bg.png) no-repeat;
|
||||
h2 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
color: #7e100a;
|
||||
text-decoration: none;
|
||||
}
|
||||
white-space: wrap;
|
||||
}
|
||||
p {
|
||||
color: #333;
|
||||
}
|
||||
img {
|
||||
width: 40%;
|
||||
float: right;
|
||||
margin: 0 0 .5em 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* @group Rock Your Firefox (RYFF) */
|
||||
.ryff h3,
|
||||
.promo h2 {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.ryff {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 20px 10% 10px 270px;
|
||||
background: url(../../img/zamboni/discovery_pane/promos/ryff-bg.png) 0 0 no-repeat;
|
||||
color: #333;
|
||||
h2 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
color: #7e100a;
|
||||
text-decoration: none;
|
||||
}
|
||||
white-space: wrap;
|
||||
}
|
||||
img {
|
||||
width: 40%;
|
||||
float: right;
|
||||
margin: 0 0 .5em 10px;
|
||||
.promo-collection {
|
||||
&.promo h2 a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
/* @end */
|
||||
}
|
||||
|
||||
/* @Collection *********/
|
||||
.collection {
|
||||
h2 {
|
||||
max-width: 650px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
&.promo h2 {
|
||||
margin: 0;
|
||||
max-width: auto;
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
text-align: center;
|
||||
}
|
||||
.promo {
|
||||
h2, h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.promo hgroup,
|
||||
#monthly .wrap,
|
||||
#go-mobile .wrap {
|
||||
margin: 0 auto;
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
h2 {
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.promo {
|
||||
h2, h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
hgroup {
|
||||
margin: 10px auto 20px;
|
||||
}
|
||||
hgroup {
|
||||
margin: 10px auto 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#starter .more,
|
||||
#st-patricks .more,
|
||||
#fx4-collection .more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* @group Starter Pack */
|
||||
#starter.feature {
|
||||
#starter {
|
||||
&.feature {
|
||||
background: none;
|
||||
background-image:
|
||||
url(../../img/zamboni/discovery_pane/promos/starter-bg-left.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/starter-bg-right.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/starter-bg.png);
|
||||
background-position: -5% bottom, right top, center top;
|
||||
background-position: -5% 100%, 100% 0, 50% 100%;
|
||||
background-repeat: no-repeat, no-repeat, repeat-x;
|
||||
}
|
||||
|
||||
#starter h2 {
|
||||
h2 {
|
||||
color: #075f7a;
|
||||
}
|
||||
/* @end */
|
||||
}
|
||||
|
||||
/* @group St. Patrick's Day Personas */
|
||||
#st-patricks {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/st-patricks-bg.png) 50% 0 no-repeat;
|
||||
h2 {
|
||||
color: #296215;
|
||||
}
|
||||
#st-patricks {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/st-patricks-bg.png) 50% 0 no-repeat;
|
||||
h2 {
|
||||
color: #296215;
|
||||
}
|
||||
/* @end */
|
||||
}
|
||||
|
||||
/* @group Monthly Pick */
|
||||
#monthly {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/monthly-bg.png) 50% 0 no-repeat;
|
||||
.wrap > div {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 120px;
|
||||
padding: 20px;
|
||||
#monthly {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/monthly-bg.png) 50% 0 no-repeat;
|
||||
.wrap > div {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 120px;
|
||||
padding: 20px;
|
||||
> div {
|
||||
> div {
|
||||
> div {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
> p {
|
||||
padding-right: 20px;
|
||||
}
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
> p {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
color: #8b0101;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
p.install-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
float: right;
|
||||
max-width: 50%;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Go Mobile */
|
||||
#go-mobile {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/go-mobile-bg.png) left top no-repeat;
|
||||
h2 {
|
||||
color: #485c65;
|
||||
width: 300px;
|
||||
}
|
||||
.wrap {
|
||||
width: 384px;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.wrap > div {
|
||||
padding: 20px;
|
||||
}
|
||||
p.install-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
color: #8b0101;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Firefox 4 Collection */
|
||||
#fx4-collection {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/fx4-collection-bg.png) 50% 0 no-repeat;
|
||||
h2 {
|
||||
color: #2c5c89;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
#featured-addons {
|
||||
padding: 10px 9%;
|
||||
p.install-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* @Addon @boxes *********/
|
||||
.addons ul,
|
||||
ul.addons {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
margin: 0 auto 1em;
|
||||
}
|
||||
|
||||
.addons li {
|
||||
float: left;
|
||||
width: 30%;
|
||||
position: relative;
|
||||
margin-right: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.html-rtl .addons li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.addons li:nth-child(3n),
|
||||
.html-rtl .addons li:nth-child(3n + 1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.html-rtl .addons li:nth-child(3n) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.addons li > a,
|
||||
#monthly > div,
|
||||
#go-mobile > div {
|
||||
.gradient-two-color(#fff, #ecf1f7);
|
||||
border: 1px solid #b7c3d7;
|
||||
.border-radius(6px);
|
||||
.box-shadow(0 -2px 0 rgba(58,78,103,0.08) inset, 0 2px 0 rgba(190,210,230,0.5);
|
||||
}
|
||||
|
||||
.addons li > a {
|
||||
img {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
width: 84%;
|
||||
padding: 10px 8%;
|
||||
-moz-transition-property: border-color, box-shadow;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
float: right;
|
||||
max-width: 50%;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.addons li > a:hover,
|
||||
.addons li > a:focus,
|
||||
.addons li > a:active {
|
||||
#go-mobile {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/go-mobile-bg.png) 0 100% no-repeat;
|
||||
h2 {
|
||||
color: #485c65;
|
||||
}
|
||||
.wrap {
|
||||
width: 384px;
|
||||
margin: 0;
|
||||
}
|
||||
.wrap > div {
|
||||
padding: 20px;
|
||||
}
|
||||
p.install-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#fx4-collection {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/fx4-collection-bg.png) 50% 0 no-repeat;
|
||||
h2 {
|
||||
color: #2c5c89;
|
||||
}
|
||||
}
|
||||
|
||||
#travel {
|
||||
background: none;
|
||||
background-image:
|
||||
url(../../img/zamboni/discovery_pane/promos/travel-bg-left.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/travel-bg-right.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/travel-bg.jpg);
|
||||
background-position: -5% 0, 100% 100%, 50% 0;
|
||||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||||
h2 {
|
||||
color: #063;
|
||||
}
|
||||
}
|
||||
|
||||
#school {
|
||||
background: none;
|
||||
background-image:
|
||||
url(../../img/zamboni/discovery_pane/promos/school-bg-left.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/school-bg-right.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/school-bg.jpg);
|
||||
background-position: -5px 100%, 100% 100%, 50% 0;
|
||||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||||
h2 {
|
||||
color: #933;
|
||||
}
|
||||
}
|
||||
|
||||
.addons li {
|
||||
float: left;
|
||||
width: 30%;
|
||||
position: relative;
|
||||
margin-right: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.html-rtl .addons li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.addons li:nth-child(3n),
|
||||
.html-rtl .addons li:nth-child(3n + 1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.html-rtl .addons li:nth-child(3n) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.addons li > a,
|
||||
#monthly > div,
|
||||
#go-mobile > div {
|
||||
.gradient-two-color(#fff, #ecf1f7);
|
||||
border: 1px solid #b7c3d7;
|
||||
.border-radius(6px);
|
||||
.box-shadow(0 -2px 0 rgba(58,78,103,0.08) inset, 0 2px 0 rgba(190,210,230,0.5);
|
||||
}
|
||||
|
||||
.addons li > a {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
width: 84%;
|
||||
padding: 10px 8%;
|
||||
-moz-transition-property: border-color, box-shadow;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
&:hover, &:focus, &:active {
|
||||
border-color: rgba(165,175,185,1);
|
||||
box-shadow: inset 0 -2px 0 rgba(58,78,103,0.1), 0 2px 0 rgba(190,210,230,0.85);
|
||||
-moz-transition-property: border-color, box-shadow;
|
||||
|
|
@ -316,66 +279,67 @@
|
|||
-moz-transition-timing-function: ease-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.addons h3 {
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
max-height: 1.1em;
|
||||
font-weight: bold;
|
||||
font-family: inherit;
|
||||
margin: .25em 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.addons h3 {
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
max-height: 1.1em;
|
||||
font-weight: bold;
|
||||
font-family: inherit;
|
||||
margin: .25em 0;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.addons li > a:hover h3,
|
||||
.addons li > a:focus h3,
|
||||
.addons li > a:active h3 {
|
||||
.addons li > a {
|
||||
&:hover h3,
|
||||
&:focus h3,
|
||||
&:active h3 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.addons p.desc {
|
||||
overflow: hidden;
|
||||
max-height: 5.4em;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
.addons p.desc {
|
||||
overflow: hidden;
|
||||
max-height: 5.4em;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
color: #373d48;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
a {
|
||||
color: #373d48;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
a {
|
||||
color: #373d48;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl .addons p.desc {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.addons img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.promo:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl .addons p.desc {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.addons img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.promo:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
html[lang=it],
|
||||
html[lang=fr] {
|
||||
#promos {
|
||||
.ryff h3,
|
||||
.promo h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
.ryff h3,
|
||||
.promo h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -318,13 +318,20 @@ header:after,
|
|||
}
|
||||
|
||||
/* @Main @Feature *********/
|
||||
#main #main-feature {
|
||||
display: none;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
#main #promos {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#promos .prev {
|
||||
left: 0 !important;
|
||||
}
|
||||
#promos .next {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.feature {
|
||||
|
|
@ -340,16 +347,24 @@ header:after,
|
|||
#main #featured-addons {
|
||||
margin-top: 283px;
|
||||
}
|
||||
#main #main-feature.js + #featured-addons {
|
||||
#main #promos.js + #featured-addons {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#main #main-feature.js {
|
||||
section#featured-addons {
|
||||
padding: 20px 10% 0;
|
||||
}
|
||||
|
||||
#promos ul.addons {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#main #promos.js {
|
||||
height: 273px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main-feature.js .feature {
|
||||
#promos.js .feature {
|
||||
height: 251px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -387,7 +402,7 @@ header:after,
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#main-feature.js #nav-features,
|
||||
#promos.js #nav-features,
|
||||
.recs #recs #nav-recs.js {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -410,6 +425,14 @@ header:after,
|
|||
-moz-transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.nav-prev a.prev {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.nav-next a.next {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
#nav-recs a {
|
||||
margin: 0;
|
||||
height: 183px;
|
||||
|
|
@ -469,310 +492,6 @@ header:after,
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* @group Rock Your Firefox (RYFF) */
|
||||
.ryff {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 20px 10% 10px 270px;
|
||||
background: url(../../img/zamboni/discovery_pane/promos/ryff-bg.png) 0 0 no-repeat;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ryff h3,
|
||||
.promo h2 {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.ryff h2 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ryff h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ryff h3 a {
|
||||
color: #7e100a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ryff img {
|
||||
width: 40%;
|
||||
float: right;
|
||||
margin: 0 0 .5em 10px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @Collection *********/
|
||||
.collection h2,
|
||||
#featured-addons h2 {
|
||||
max-width: 650px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.collection.promo h2 {
|
||||
margin: 0;
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
.collection.promo h2 a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.promo hgroup,
|
||||
#monthly .wrap,
|
||||
#go-mobile .wrap,
|
||||
#recs .header h2,
|
||||
#recs .gallery {
|
||||
margin: 0 auto;
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.promo h2,
|
||||
.promo h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.promo h2 {
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.promo hgroup {
|
||||
margin: 10px auto 20px;
|
||||
}
|
||||
|
||||
.collection .more {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#starter .more,
|
||||
#st-patricks .more,
|
||||
#fx4-collection .more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shopping {
|
||||
background-image: url("../../img/zamboni/discovery_pane/bg-hanger.png"),
|
||||
url("../../img/zamboni/discovery_pane/bg-gift.png");
|
||||
background-position: 107% 20px, 9% 92%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* @group Starter Pack */
|
||||
#starter.feature {
|
||||
background: none;
|
||||
background-image:
|
||||
url(../../img/zamboni/discovery_pane/promos/starter-bg-left.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/starter-bg.png),
|
||||
url(../../img/zamboni/discovery_pane/promos/starter-bg-right.png);
|
||||
background-position: 0 100%, 50% 0, 100% 0;
|
||||
background-repeat: no-repeat, repeat-x, no-repeat;
|
||||
}
|
||||
|
||||
#starter.feature hgroup:after {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/starter-bg-right.png) 100% 0 no-repeat;
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 153px;
|
||||
}
|
||||
|
||||
#starter h2 {
|
||||
color: #075f7a;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group St. Patrick's Day Personas */
|
||||
#st-patricks.feature {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/st-patricks-bg.png) 50% 0 no-repeat;
|
||||
}
|
||||
#st-patricks h2 {
|
||||
color: #296215;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Monthly Pick */
|
||||
#monthly {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/monthly-bg.png) 50% 0 no-repeat;
|
||||
}
|
||||
#monthly .wrap > div,
|
||||
#go-mobile .wrap > div {
|
||||
padding: 20px;
|
||||
}
|
||||
#monthly .wrap > div {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 120px;
|
||||
}
|
||||
#monthly h2 {
|
||||
color: #8b0101;
|
||||
}
|
||||
#monthly h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#monthly .wrap > div > div > p {
|
||||
padding-right: 20px;
|
||||
}
|
||||
#monthly p.install-button,
|
||||
#go-mobile p.install-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#monthly .wrap > div > div {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
#monthly img {
|
||||
display: block;
|
||||
float: right;
|
||||
max-width: 50%;
|
||||
max-height: 120px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Go Mobile */
|
||||
#go-mobile {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/go-mobile-bg.png) 50% 0 no-repeat;
|
||||
}
|
||||
#go-mobile h2 {
|
||||
color: #485c65;
|
||||
width: 300px;
|
||||
}
|
||||
#go-mobile .wrap {
|
||||
width: 384px;
|
||||
margin: 0;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Firefox 4 Collection */
|
||||
#fx4-collection {
|
||||
background: url(../../img/zamboni/discovery_pane/promos/fx4-collection-bg.png) 50% 0 no-repeat;
|
||||
}
|
||||
#fx4-collection h2 {
|
||||
color: #2c5c89;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
#featured-addons {
|
||||
padding: 10px 9%;
|
||||
}
|
||||
|
||||
/* @Addon @boxes *********/
|
||||
.addons ul,
|
||||
ul.addons {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
margin: 0 auto 1em;
|
||||
}
|
||||
|
||||
.addons li {
|
||||
float: left;
|
||||
width: 30%;
|
||||
position: relative;
|
||||
margin-right: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.html-rtl .addons li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.addons li:nth-child(3n),
|
||||
.html-rtl .addons li:nth-child(3n + 1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.html-rtl .addons li:nth-child(3n) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.addons li > a,
|
||||
.rec-addons li > a,
|
||||
#monthly > div,
|
||||
#go-mobile > div {
|
||||
background: -moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
|
||||
border: 1px solid #b7c3d7;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 -2px 0 rgba(58,78,103,0.08), 0 2px 0 rgba(190,210,230,0.5);
|
||||
}
|
||||
|
||||
.addons li > a,
|
||||
.rec-addons li > a {
|
||||
display: block;
|
||||
display: -moz-box;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-align: center;
|
||||
position: relative;
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
width: -moz-calc(100% - 22px);
|
||||
padding: 10px;
|
||||
-moz-transition-property: border-color, box-shadow;
|
||||
-moz-transition-duration: 0.5s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.addons li > a:hover,
|
||||
.addons li > a:focus,
|
||||
.addons li > a:active,
|
||||
.rec-addons li > a:hover,
|
||||
.rec-addons li > a:focus,
|
||||
.rec-addons li > a:active {
|
||||
border-color: rgba(165,175,185,1);
|
||||
box-shadow: inset 0 -2px 0 rgba(58,78,103,0.1), 0 2px 0 rgba(190,210,230,0.85);
|
||||
-moz-transition-property: border-color, box-shadow;
|
||||
-moz-transition-duration: 0.1s;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.addons h3,
|
||||
.rec-addons h3 {
|
||||
font-size: 14px;
|
||||
line-height: 1.1;
|
||||
font-weight: bold;
|
||||
font-family: inherit;
|
||||
margin: .25em 0;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.addons li > a:hover h3,
|
||||
.addons li > a:focus h3,
|
||||
.addons li > a:active h3,
|
||||
.rec-addons li > a:hover h3,
|
||||
.rec-addons li > a:focus h3,
|
||||
.rec-addons li > a:active h3 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.addons p.desc,
|
||||
.rec-addons p.desc {
|
||||
-moz-box-flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
color: #373d48;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.html-rtl .addons p.desc,
|
||||
.html-rtl .rec-addons p.desc {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.addons img,
|
||||
.rec-addons img {
|
||||
display: block;
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
/* @group Top Add-ons and Featured Personas */
|
||||
#sub .featured {
|
||||
position: relative;
|
||||
|
|
@ -792,8 +511,8 @@ ul.addons {
|
|||
|
||||
#recs .header {
|
||||
margin: 0;
|
||||
padding: 0.45em 9%;
|
||||
width: 82%;
|
||||
padding: 0.45em 10%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#sub ul {
|
||||
|
|
@ -1072,7 +791,7 @@ ul.addons {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#main #main-feature {
|
||||
#main #promos {
|
||||
height: 290px;
|
||||
}
|
||||
|
||||
|
|
@ -1688,7 +1407,7 @@ a#lightbox-secNav-btnClose {
|
|||
|
||||
#recs .gallery-addons {
|
||||
margin: 0 auto;
|
||||
width: 82%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#images + .addon-info {
|
||||
|
|
@ -1813,7 +1532,7 @@ body.eula #main {
|
|||
}
|
||||
|
||||
/* App Specific ****/
|
||||
.seamonkey #main-feature {
|
||||
.seamonkey #promos {
|
||||
/* Hide this for SeaMonkey as it has no content */
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 17 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 27 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
|
|
@ -31,9 +31,9 @@ $(document).ready(function(){
|
|||
initRecs();
|
||||
|
||||
// Set up the promo carousel.
|
||||
$("#main-feature").fadeIn("slow").addClass("js").zCarousel({
|
||||
btnNext: "#main-feature .nav-next a",
|
||||
btnPrev: "#main-feature .nav-prev a",
|
||||
$("#promos").fadeIn("slow").addClass("js").zCarousel({
|
||||
btnNext: "#promos .nav-next a",
|
||||
btnPrev: "#promos .nav-prev a",
|
||||
circular: true
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -443,6 +443,7 @@ MINIFY_BUNDLES = {
|
|||
),
|
||||
'zamboni/discovery-pane': (
|
||||
'css/zamboni/discovery-pane.css',
|
||||
'css/impala/promos.less',
|
||||
'css/legacy/jquery-lightbox.css',
|
||||
),
|
||||
'zamboni/devhub': (
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче