From 96d15b75050c5a97482b597e2ece1c614cca5dff Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sun, 3 Apr 2022 18:06:16 -0400 Subject: [PATCH] Make spinner themeable --- .../@node-red/editor-client/src/sass/base.scss | 13 ++++++++++--- .../@node-red/editor-client/src/sass/colors.scss | 2 ++ .../editor-client/src/sass/ui/common/treeList.scss | 11 +++++++++-- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index b4d538794..c22a1d606 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -142,9 +142,16 @@ body { line-height: 14px; vertical-align: text-top; margin-top: 0px; - background: url(images/spin.svg) no-repeat 50% 50%; - background-size: contain - } + -webkit-mask-image: url(images/spin.svg); + mask-image: url(images/spin.svg); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $spinner-color; + } .red-ui-font-code { font-family: $monospace-font; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index e8e4eda4d..e414476b0 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss @@ -305,6 +305,8 @@ $grip-color: #ccc; $icons-flow-color: #808080; +$spinner-color: #999; + // Deprecated $text-color-green: $text-color-success; $info-text-code-color: $text-color-code; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss index beba6b047..5f1d27037 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss @@ -135,6 +135,13 @@ } .red-ui-treeList-spinner { height: 32px; - background: url(images/spin.svg) 50% 50% no-repeat; - background-size: auto 20px; + -webkit-mask-image: url(images/spin.svg); + mask-image: url(images/spin.svg); + -webkit-mask-size: auto 20px; + mask-size: auto 20px; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: $spinner-color; }