From a8a7589973b615188db1e555f821cb2bb4674297 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 9 Feb 2017 17:13:23 +0000 Subject: [PATCH] More style adjustments. --- .../project/editor/feature-onboarding.pug | 32 ++++++------ .../app/editor/feature-onboarding.less | 50 ++++++------------- 2 files changed, 32 insertions(+), 50 deletions(-) diff --git a/services/web/app/views/project/editor/feature-onboarding.pug b/services/web/app/views/project/editor/feature-onboarding.pug index 2b81e304ab..5c2baff6f5 100644 --- a/services/web/app/views/project/editor/feature-onboarding.pug +++ b/services/web/app/views/project/editor/feature-onboarding.pug @@ -6,11 +6,11 @@ ) .feat-onboard-wrapper h1.feat-onboard-title - span.feat-onboard-title-name Commenting + span.feat-onboard-highlight Commenting |  &  - span.feat-onboard-title-name Track Changes + span.feat-onboard-highlight Track Changes p.feat-onboard-description - | Collaboration features are finally here!  + | Collaboration features are here!  p.feat-onboard-description span.feat-onboard-highlight Commenting  | and  @@ -60,38 +60,38 @@ i.fa.fa-arrow-right div(ng-switch="onboarding.innerStep") - .row.feat-onboard-adv-wrapper(ng-switch-when="1") + .row(ng-switch-when="1") .col-xs-6 h2.feat-onboard-adv-title Commenting - p Want to discuss specific parts of the text? - p Use our brand-new commenting system. + p.feat-onboard-description Want to discuss specific parts of the text? + p.feat-onboard-description Use our brand-new commenting system. .col-xs-6 h2.feat-onboard-adv-title Track Changes - p See changes in your documents, live. - p Track, accept and reject changes individually. - .row.feat-onboard-adv-wrapper(ng-switch-when="2") + p.feat-onboard-description See changes in your documents, live. + p.feat-onboard-description Track, accept and reject changes individually. + .row(ng-switch-when="2") .col-xs-12 h2.feat-onboard-adv-title Commenting - p + p.feat-onboard-description span.feat-onboard-highlight Commenting  | is very easy. - p Just select a span of text and click on  + p.feat-onboard-description Just select a span of text and click on  span.feat-onboard-highlight “Add comment” | . - .row.feat-onboard-adv-wrapper(ng-switch-when="3") + .row(ng-switch-when="3") .col-xs-12 h2.feat-onboard-adv-title Track Changes - p + p.feat-onboard-description | Let your peers know what you've been up to. - p + p.feat-onboard-description | Click on the span.feat-onboard-highlight “Track Changes”  | toggle to start marking your insertions, as well as your deletions. - .row.feat-onboard-adv-wrapper(ng-switch-when="4") + .row(ng-switch-when="4") .col-xs-12 h2.feat-onboard-adv-title Track Changes - p + p.feat-onboard-description | Click  span.feat-onboard-highlight “Accept”  | or  diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index 65c70001e2..870004509b 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -1,6 +1,3 @@ -@feat-onboard-wrapper-width: 750px; -@feat-onboard-max-text-width: 700px; - .feat-onboard { position: fixed; top: 0; @@ -9,7 +6,7 @@ left: 0; display: flex; justify-content: center; - align-items: center; + align-items: baseline; background-color: rgba(0, 0, 0, .85); background-repeat: no-repeat; background-position-x: 0; @@ -18,53 +15,37 @@ z-index: 102; overflow: auto; } - .feat-onboard-wrapper { + padding-top: 30px; } + .feat-onboard-title { color: #FFF; - margin-bottom: 40px; - + margin-bottom: 30px; } - .feat-onboard-title-name { - font-weight: bold; - } .feat-onboard-description { - max-width: @feat-onboard-max-text-width; + max-width: 30em; margin: 0 auto 5px; - padding: 0 80px; } - - .feat-onboard-highlight { - font-weight: bold; - white-space: nowrap; - } - - .feat-onboard-adv-wrapper { - text-align: left; - } - .feat-onboard-adv-title { + + .feat-onboard-highlight { font-weight: bold; white-space: nowrap; - color: #FFF; - font-size: 23px; - margin-top: 0; } - .feat-onboard-btn-wrapper { - margin-top: 30px; - margin-bottom: 10px; - - > .btn { - box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); - } - } + .feat-onboard-adv-title { + font-weight: bold; + white-space: nowrap; + color: #FFF; + font-size: 23px; + margin-top: 0; + } .feat-onboard-tutorial-wrapper { display: flex; align-items: center; - padding: 30px 0; + padding: 30px 0 15px; } .feat-onboard-video { width: 616px; @@ -80,6 +61,7 @@ padding: 0; font-size: 1.3em; line-height: 1em; + box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); &[disabled] { opacity: 0.2;