diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 66bff761a1..86cc63a5e5 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -100,7 +100,6 @@ div.full-size( ng-if="onboarding.autoCompile == 'show'" ng-class="placement" ) - .arrow .popover-inner h3.popover-title #{translate("auto_compile")} .popover-content diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index ef89a93df4..475658f885 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -104,28 +104,42 @@ a.feat-onboard-dismiss { display: block; top: 10px; - .arrow { - top: 17px !important; - } - img { margin-bottom: 10px; border: 1px solid @gray-lighter; } - &.right > .arrow { - left: -10px !important; - - &:after { - border-right-color: #f7f7f7 !important; - } + &::before, &::after { + content: ''; + border-width: 11px; + border-style: solid; + border-color: transparent; + top: 7px; + display: block; + position: absolute; } - &.left > .arrow { - right: -10px !important; + &.right::before { + border-left-width: 0; + border-right-color: rgba(0, 0, 0, .3); + left: -11px; + } - &:after { - border-left-color: #f7f7f7 !important; - } + &.right::after { + border-left-width: 0; + border-right-color: #f7f7f7; + left: -9.5px; + } + + &.left::before { + border-right-width: 0; + border-left-color: rgba(0, 0, 0, .3); + right: -11px + } + + &.left::after { + border-right-width: 0; + border-left-color: #f7f7f7; + right: -9.5px; } }