diff --git a/website/public/css/global-colors.styl b/website/public/css/global-colors.styl index 60dfa28db7..bddce574b7 100644 --- a/website/public/css/global-colors.styl +++ b/website/public/css/global-colors.styl @@ -20,7 +20,7 @@ $color-toolbar = lighten($color-herobox, 70%) $color-options-menu = lighten($color-herobox, 85%) $color-options-submenu = lighten($color-herobox, 75%) // Button colors -$color-button-style-one = $best +$color-button-highlight = $best // Task background $color-tasks = lighten($color-herobox, 65%) // Task filter colors @@ -37,4 +37,4 @@ $color-contributor-seven = #00aaff $color-contributor-mod = #130ead $color-contributor-staff = #88108f $color-contributor-npc = #000 -$color-contributor-npc-font = #00FF00 \ No newline at end of file +$color-contributor-npc-font = #00FF00 diff --git a/website/public/css/global-modules.styl b/website/public/css/global-modules.styl index 8e8908aac6..9aae889d4c 100644 --- a/website/public/css/global-modules.styl +++ b/website/public/css/global-modules.styl @@ -13,14 +13,21 @@ hrpg-text-shadow-mixin($hrpg-text-shadow-base-color) 1px 1px 1px darken($hrpg-text-shadow-base-color,70%); // Buttons // The !important declarations override Bootstrap -hrpg-button-color-mixin($hrpg-button-color) +// buttons with the .highlight class pass highlight=true to this mixin +hrpg-button-color-mixin($hrpg-button-color, highlight=false) + // this case covers button elements with the highlight class + // like the subscribe button, for which the following selectors do not apply + if highlight==true + border-color: darken($color-button-highlight, 16.18%) !important + background-color: $color-button-highlight !important + & + color: darken($hrpg-button-color, 70%) !important + hrpg-anchor-button-color-mixin($color-button-highlight) > a, > button - background-color: $hrpg-button-color !important - &:active - background-color: darken($hrpg-button-color, 61.18%) !important - @media screen and (min-width:768px) - &:hover - background-color: darken($hrpg-button-color, 2.36%) !important + if highlight==true + hrpg-anchor-button-color-mixin($color-button-highlight) + else + hrpg-anchor-button-color-mixin($hrpg-button-color) > a, > button, > input, textarea color: darken($hrpg-button-color, 70%) !important border-color: darken($hrpg-button-color, 16.18%) !important @@ -38,6 +45,9 @@ hrpg-button-color-mixin($hrpg-button-color) &:active background-color: darken($hrpg-button-color, 16.18%) !important; > a:nth-of-type(2) + if highlight==true + border-left: 1px solid darken($color-button-highlight, 3.82%) !important + else border-left: 1px solid darken($hrpg-button-color, 3.82%) !important > div @media screen and (min-width:768px) @@ -69,6 +79,13 @@ hrpg-button-color-mixin($hrpg-button-color) color: #fff !important; span color: #fff !important; +hrpg-anchor-button-color-mixin($hrpg-button-color) + background-color: $hrpg-button-color !important + &:active + background-color: darken($hrpg-button-color, 61.18%) !important + @media screen and (min-width:768px) + &:hover + background-color: darken($hrpg-button-color, 2.36%) !important $hrpg-button-master list-style: none > a, > button, > input, label::after @@ -89,9 +106,8 @@ $hrpg-button > a, > button, > input, label::after border: 1px solid #ccc !important border-radius: 0.382em !important -$hrpg-button-call-to-action - @extend $hrpg-button - hrpg-button-color-mixin($color-button-style-one) + .highlight + hrpg-button-color-mixin($color-toolbar, true) $hrpg-button-toggle @extend $hrpg-button-master border: 1px solid #ccc !important @@ -100,6 +116,8 @@ $hrpg-button-toggle border-radius: 0.382em 0em 0em 0.382em !important > a:last-of-type border-radius: 0em 0.382em 0.382em 0em !important + &.highlight + hrpg-button-color-mixin($color-toolbar, true) // Input + Button $hrpg-button-with-input @extend $hrpg-button-master diff --git a/website/public/css/menu.styl b/website/public/css/menu.styl index 39c12c6b95..e9700a2a42 100644 --- a/website/public/css/menu.styl +++ b/website/public/css/menu.styl @@ -85,6 +85,9 @@ @extend $hrpg-button-toggle @extend $hrpg-modal-dropdown-right hrpg-button-color-mixin($color-toolbar) + &.highlight + > a span.glyphicon + margin-right: 0.382em !important .toolbar-button @extend $hrpg-button hrpg-button-color-mixin($color-toolbar) @@ -163,7 +166,7 @@ @extend $hrpg-button hrpg-button-color-mixin(lighten($color-toolbar,32.8%)) .toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button - @extend $hrpg-button-call-to-action + @extend $hrpg-button @media screen and (max-width:768px) .toolbar-toggle display: none diff --git a/website/views/shared/header/menu.jade b/website/views/shared/header/menu.jade index 6f77f79fe6..f0dd838f81 100644 --- a/website/views/shared/header/menu.jade +++ b/website/views/shared/header/menu.jade @@ -146,8 +146,9 @@ nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}') a(target="_blank" ng-href='http://data.habitrpg.com?uuid={{user._id}}')=env.t('dataTool') li a(ui-sref='options.settings.export')=env.t('exportData') - li.toolbar-button-dropdown + li.toolbar-button-dropdown.highlight a(target="_blank" href='http://habitrpg.wikia.com/wiki/') + span.glyphicon.glyphicon-question-sign span=env.t('help') a(ng-click='expandMenu("help")', ng-class='{active: _expandedMenu == "help"}') span ☰ @@ -169,7 +170,7 @@ nav.toolbar(ng-controller='AuthCtrl', ng-class='{active: isToolbarHidden}') a(ng-click='showTour()', popover-placement='right', popover-trigger='mouseenter', popover=env.t('restartTour'))= env.t('showTour') ul.toolbar-subscribe(ng-if='!user.purchased.plan.customerId') li.toolbar-subscribe-button - button(ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe') + button.highlight(ui-sref='options.settings.subscription',popover-trigger='mouseenter',popover-placement='bottom',popover-title=env.t('subscriptions'),popover=env.t('subDescription'),popover-append-to-body='true')=env.t('subscribe') ul.toolbar-options li.toolbar-notifs a(ng-click='expandMenu("notifs")')