From 40460fa00a354382c6c21ce6682d248e932ea30b Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Wed, 7 Oct 2020 16:23:14 -0400 Subject: [PATCH] FIX: missing SVG mask asset in wizard (#10856) The dark-mode-friendly SVG mask for the wizard's background image introduced in 8fcfb9586cb3b81e7862be48984d9d3c0b8f7d50 does not work with CDNs, because CORS restrictions apply to SVG masks. It would be complicated to modify CDN access origin rules for this one specific assets, so instead, this PR moves the contents of the SVG file inside the stylesheet. --- app/assets/stylesheets/wizard.scss | 703 +++++++++++++++++++++++++++- public/images/wizard/bubbles.svg | 710 ----------------------------- 2 files changed, 701 insertions(+), 712 deletions(-) delete mode 100644 public/images/wizard/bubbles.svg diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss index a5fd0ca6dd1..97ef15dbcdc 100644 --- a/app/assets/stylesheets/wizard.scss +++ b/app/assets/stylesheets/wizard.scss @@ -9,6 +9,705 @@ @import "common/select-kit/*"; @import "common/components/svg"; +$bubbles-mask: svg-uri( + ' + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +' +); + body.wizard { background-color: var(--secondary); background-repeat: repeat; @@ -27,8 +726,8 @@ body.wizard { } #wizard-main:before { - mask: asset-url("/images/wizard/bubbles.svg"); - -webkit-mask: asset-url("/images/wizard/bubbles.svg"); + mask: $bubbles-mask; + -webkit-mask: $bubbles-mask; mask-size: 30%; -webkit-mask-size: 30%; background-color: var(--primary-low-mid); diff --git a/public/images/wizard/bubbles.svg b/public/images/wizard/bubbles.svg deleted file mode 100644 index 77f97f05bad..00000000000 --- a/public/images/wizard/bubbles.svg +++ /dev/null @@ -1,710 +0,0 @@ - - - - - Artboard 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -