- {{ _('Previous') }}
- {{ _('Next') }} diff --git a/media/css/impala/promos.less b/media/css/impala/promos.less index 483392ab60..a734ed2ff5 100644 --- a/media/css/impala/promos.less +++ b/media/css/impala/promos.less @@ -2,26 +2,26 @@ #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; + .button { + margin-top: 15px; + } } - h2, h3 { font-style: normal; font-family: "Lucida Grande","Lucida Sans",Helvetica,Arial,sans-serif; } - .control { position: absolute; top: 0; @@ -72,53 +72,46 @@ } .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; - } - } - /* @end */ - - /* @Collection *********/ - .collection { - h2 { - max-width: 650px; - margin: 10px auto; - } - + .promo-collection { &.promo h2 { margin: 0; max-width: auto; @@ -131,184 +124,213 @@ text-align: center; } } +} +.promo-collection h2, +#featured-addons h2 { + max-width: 650px; + margin: 10px auto; +} + +.promo hgroup, +#monthly .wrap, +#go-mobile .wrap { + margin: 0 auto; + max-width: 650px; + width: 100%; +} + +#promos.island { .promo hgroup, - #monthly .wrap, - #go-mobile .wrap { - margin: 0 auto; - max-width: 650px; - width: 100%; + #go-mobile .wrap, + #monthly .wrap { + max-width: 540px; } - - .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; - } + #go-mobile .wrap, + #monthly .wrap { + margin: 0 5%; } +} - #starter .more, - #st-patricks .more, - #fx4-collection .more { - display: none; +.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; + } +} +#starter .more, +#st-patricks .more, +#fx4-collection .more, +#travel .more, +#school .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; + width: 300px; + } + .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: 0 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; + } +} + +#featured-addons { + padding: 10px 9%; +} + +.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 { + 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 +338,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; } } diff --git a/media/css/zamboni/discovery-pane.css b/media/css/zamboni/discovery-pane.css index 63eba20363..3a2191b79d 100644 --- a/media/css/zamboni/discovery-pane.css +++ b/media/css/zamboni/discovery-pane.css @@ -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,16 @@ 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 { +#main #promos.js { height: 273px; overflow: hidden; } -#main-feature.js .feature { +#promos.js .feature { height: 251px; position: relative; overflow: hidden; @@ -387,7 +394,7 @@ header:after, position: relative; } -#main-feature.js #nav-features, +#promos.js #nav-features, .recs #recs #nav-recs.js { display: block; } @@ -410,6 +417,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 +484,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; @@ -1072,7 +783,7 @@ ul.addons { width: 100%; } - #main #main-feature { + #main #promos { height: 290px; } @@ -1814,7 +1525,7 @@ body.eula #main { } /* App Specific ****/ -.seamonkey #main-feature { +.seamonkey #promos { /* Hide this for SeaMonkey as it has no content */ display: none !important; } diff --git a/media/img/zamboni/discovery_pane/promos/school-bg-left.png b/media/img/zamboni/discovery_pane/promos/school-bg-left.png new file mode 100644 index 0000000000..a6f6c9fe5e Binary files /dev/null and b/media/img/zamboni/discovery_pane/promos/school-bg-left.png differ diff --git a/media/img/zamboni/discovery_pane/promos/school-bg-right.png b/media/img/zamboni/discovery_pane/promos/school-bg-right.png new file mode 100644 index 0000000000..e656f2708c Binary files /dev/null and b/media/img/zamboni/discovery_pane/promos/school-bg-right.png differ diff --git a/media/img/zamboni/discovery_pane/promos/school-bg.jpg b/media/img/zamboni/discovery_pane/promos/school-bg.jpg new file mode 100644 index 0000000000..83e344d594 Binary files /dev/null and b/media/img/zamboni/discovery_pane/promos/school-bg.jpg differ diff --git a/media/img/zamboni/discovery_pane/promos/travel-bg-left.png b/media/img/zamboni/discovery_pane/promos/travel-bg-left.png new file mode 100644 index 0000000000..754e152999 Binary files /dev/null and b/media/img/zamboni/discovery_pane/promos/travel-bg-left.png differ diff --git a/media/img/zamboni/discovery_pane/promos/travel-bg-right.png b/media/img/zamboni/discovery_pane/promos/travel-bg-right.png new file mode 100644 index 0000000000..5a130fa03b Binary files /dev/null and b/media/img/zamboni/discovery_pane/promos/travel-bg-right.png differ diff --git a/media/img/zamboni/discovery_pane/promos/travel-bg.jpg b/media/img/zamboni/discovery_pane/promos/travel-bg.jpg new file mode 100644 index 0000000000..5ea78aa1c2 Binary files /dev/null and b/media/img/zamboni/discovery_pane/promos/travel-bg.jpg differ diff --git a/media/js/zamboni/discovery_pane.js b/media/js/zamboni/discovery_pane.js index be53df6c34..93f107c0a9 100644 --- a/media/js/zamboni/discovery_pane.js +++ b/media/js/zamboni/discovery_pane.js @@ -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 }); diff --git a/settings.py b/settings.py index ea74b25b78..e22669e95e 100644 --- a/settings.py +++ b/settings.py @@ -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': (