diff --git a/lib/BaseViewer.js b/lib/BaseViewer.js index 26ce4570..81136697 100644 --- a/lib/BaseViewer.js +++ b/lib/BaseViewer.js @@ -745,7 +745,8 @@ function findBPMNDiagram(definitions, diagramId) { import { open as openPoweredBy, - BPMNIO_IMG + BPMNIO_IMG, + LINK_STYLES as BPMNIO_LINK_STYLES } from './util/PoweredByUtil'; import { @@ -768,7 +769,7 @@ function addProjectLogo(container) { 'target="_blank" ' + 'class="bjs-powered-by" ' + 'title="Powered by bpmn.io" ' + - 'style="position: absolute; bottom: 15px; right: 15px; z-index: 100">' + + 'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + BPMNIO_LINK_STYLES + '">' + img + ''; diff --git a/lib/util/PoweredByUtil.js b/lib/util/PoweredByUtil.js index 2b968e23..b3250e38 100644 --- a/lib/util/PoweredByUtil.js +++ b/lib/util/PoweredByUtil.js @@ -11,16 +11,18 @@ import { // inlined ../../resources/logo.svg -var BPMNIO_LOGO_SVG = ''; +var BPMNIO_LOGO_SVG = ''; -var BPMNIO_LOGO_URL = 'data:image/svg+xml,' + encodeURIComponent(BPMNIO_LOGO_SVG); - -export var BPMNIO_IMG = ''; +export var BPMNIO_IMG = BPMNIO_LOGO_SVG; function css(attrs) { return attrs.join(';'); } +export var LINK_STYLES = css([ + 'color: #404040' +]); + var LIGHTBOX_STYLES = css([ 'z-index: 1001', 'position: fixed', @@ -33,33 +35,35 @@ var LIGHTBOX_STYLES = css([ var BACKDROP_STYLES = css([ 'width: 100%', 'height: 100%', - 'background: rgba(0,0,0,0.2)' + 'background: rgba(40,40,40,0.2)' ]); var NOTICE_STYLES = css([ 'position: absolute', 'left: 50%', 'top: 40%', - 'margin: 0 -130px', + 'transform: translate(-50%)', 'width: 260px', 'padding: 10px', 'background: white', - 'border: solid 1px #AAA', - 'border-radius: 3px', + 'box-shadow: 0 1px 4px rgba(0,0,0,0.3)', 'font-family: Helvetica, Arial, sans-serif', 'font-size: 14px', - 'line-height: 1.2em' + 'display: flex', + 'line-height: 1.3' ]); var LIGHTBOX_MARKUP = '
' + '
' + '
' + - '' + + '' + BPMNIO_IMG + '' + - 'Web-based tooling for BPMN, DMN and CMMN diagrams ' + - 'powered by bpmn.io.' + + '' + + 'Web-based tooling for BPMN, DMN and CMMN diagrams ' + + 'powered by bpmn.io.' + + '' + '
' + '
'; @@ -77,4 +81,4 @@ export function open() { } document.body.appendChild(lightbox); -} \ No newline at end of file +} diff --git a/resources/logo.svg b/resources/logo.svg index 47f2492d..1b3e1f0a 100644 --- a/resources/logo.svg +++ b/resources/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file