diff --git a/app/assets/images/pages/play/campaign-banner.png b/app/assets/images/pages/play/campaign-banner.png new file mode 100644 index 000000000..0ad6af9a0 Binary files /dev/null and b/app/assets/images/pages/play/campaign-banner.png differ diff --git a/app/styles/play/campaign-view.sass b/app/styles/play/campaign-view.sass index aff7eb023..0b22882f6 100644 --- a/app/styles/play/campaign-view.sass +++ b/app/styles/play/campaign-view.sass @@ -412,26 +412,29 @@ $gameControlMargin: 30px #campaign-status position: absolute left: 0 - top: 5px + top: 0 width: 100% margin: 0 text-align: center - color: rgb(254,188,68) - font-size: 30px + color: rgb(232, 217, 87) + font-size: 28px text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0 z-index: 30 pointer-events: none .campaign-status-background - background-color: rgba(255, 255, 255, 0.5) + background: transparent url(/images/pages/play/campaign-banner.png) no-repeat center center border-radius: 10px - padding: 10px + padding-top: 30px display: inline-block + min-width: 250px + height: 106px - img.banner - height: 50px - vertical-align: bottom - margin: -20px 0 -6px 5px + .campaign-name + line-height: 26px + + .levels-completed + font-size: 22px .particle-man z-index: 2 diff --git a/app/templates/play/campaign-view.jade b/app/templates/play/campaign-view.jade index 04c15f475..d4bfbde18 100644 --- a/app/templates/play/campaign-view.jade +++ b/app/templates/play/campaign-view.jade @@ -85,12 +85,12 @@ button.btn.btn-lg.btn-inverse#volume-button(data-i18n="[title]play.adjust_volume if campaign.loaded h1#campaign-status .campaign-status-background - - var fullName = i18n(campaign.attributes, 'fullName') - if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'en' || fullName != campaign.get('fullName') - // We have a translation. - span= fullName - | : - span.spl.spr= levelsCompleted - | / - span.spl= levelsTotal - img.banner(src="/images/pages/play/level-banner-complete.png") + .campaign-name + - var fullName = i18n(campaign.attributes, 'fullName') + if (me.get('preferredLanguage', true) || 'en-US').split('-')[0] == 'en' || fullName != campaign.get('fullName') + // We have a translation. + span= fullName + .levels-completed + span= levelsCompleted + | / + span= levelsTotal