From 5499c255283ed4d125b6f9bb8f1b64e746df3b7d Mon Sep 17 00:00:00 2001 From: Francesco Spissu <94986937+francescospissu@users.noreply.github.com> Date: Wed, 29 Jun 2022 16:51:48 +0200 Subject: [PATCH] Sketchbook icons colors (#1095) --- .../cloud-sketchbook-tree-icon-filled.svg | 14 +++++++ .../style/cloud-sketchbook-tree-icon.svg | 15 +------ .../src/browser/style/cloud-sketchbook.css | 33 +++++++++++---- .../style/sketchbook-tree-icon-filled.svg | 4 ++ .../browser/style/sketchbook-tree-icon.svg | 14 ++----- .../src/browser/style/sketchbook.css | 40 +++++++++++++------ 6 files changed, 77 insertions(+), 43 deletions(-) create mode 100644 arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon-filled.svg create mode 100644 arduino-ide-extension/src/browser/style/sketchbook-tree-icon-filled.svg diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon-filled.svg b/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon-filled.svg new file mode 100644 index 00000000..cd0fc59a --- /dev/null +++ b/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon-filled.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon.svg b/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon.svg index b163d829..4b906677 100644 --- a/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon.svg +++ b/arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon.svg @@ -1,14 +1,3 @@ - - - - - - - - - - - - - + + diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css index 4eb9a7c5..9e47a215 100644 --- a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css +++ b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css @@ -13,12 +13,23 @@ margin-bottom: 20px; } - -.cloud-sketchbook-tree-icon { - background: url("./cloud-sketchbook-tree-icon.svg") center center no-repeat; +.p-TabBar-tabIcon.cloud-sketchbook-tree-icon { + background-color: var(--theia-foreground); + -webkit-mask: url(./cloud-sketchbook-tree-icon.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; width: var(--theia-icon-size); height: var(--theia-icon-size); - background-size: auto 90%; + -webkit-mask-size: 100%; +} + +.p-mod-current +.cloud-sketchbook-tree-icon { + background-color: var(--theia-foreground); + -webkit-mask: url(./cloud-sketchbook-tree-icon-filled.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; } .sketchbook-trees-container @@ -65,7 +76,7 @@ .p-Widget.p-TabBar.p-DockPanel-tabBar > ul > li.p-TabBar-tab.p-mod-current { - border-bottom: 2px solid var(--theia-statusBar-background); + border-bottom: 2px solid var(--theia-activityBar-activeBorder); } .sketchbook-trees-container .center { @@ -89,13 +100,19 @@ } .pull-sketch-icon { - background: url("./pull-sketch-icon.svg") center center no-repeat; + background-color: var(--theia-foreground); + -webkit-mask: url(./pull-sketch-icon.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; width: var(--theia-icon-size); height: var(--theia-icon-size); } .push-sketch-icon { - background: url("./push-sketch-icon.svg") center center no-repeat; + background-color: var(--theia-foreground); + -webkit-mask: url(./push-sketch-icon.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; width: var(--theia-icon-size); height: var(--theia-icon-size); } @@ -181,4 +198,4 @@ .arduino-share-sketch-dialog .sketch-link-embed textarea { width: 100%; -} \ No newline at end of file +} diff --git a/arduino-ide-extension/src/browser/style/sketchbook-tree-icon-filled.svg b/arduino-ide-extension/src/browser/style/sketchbook-tree-icon-filled.svg new file mode 100644 index 00000000..15368314 --- /dev/null +++ b/arduino-ide-extension/src/browser/style/sketchbook-tree-icon-filled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/arduino-ide-extension/src/browser/style/sketchbook-tree-icon.svg b/arduino-ide-extension/src/browser/style/sketchbook-tree-icon.svg index 93e4fec7..8d376b71 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook-tree-icon.svg +++ b/arduino-ide-extension/src/browser/style/sketchbook-tree-icon.svg @@ -1,11 +1,5 @@ - - - - + + + + diff --git a/arduino-ide-extension/src/browser/style/sketchbook.css b/arduino-ide-extension/src/browser/style/sketchbook.css index 690351ed..2c88daa3 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/arduino-ide-extension/src/browser/style/sketchbook.css @@ -1,27 +1,43 @@ .sketchbook-tab-icon { - -webkit-mask: url('./sketchbook.svg'); - mask: url('./sketchbook.svg'); + -webkit-mask: url('./sketchbook.svg'); + mask: url('./sketchbook.svg'); } .sketch-folder-icon { - background: url('./sketch-folder-icon.svg') center center no-repeat; - background-position-x: 1px; - width: var(--theia-icon-size); - height: var(--theia-icon-size); + background: url('./sketch-folder-icon.svg') center center no-repeat; + background-position-x: 1px; + width: var(--theia-icon-size); + height: var(--theia-icon-size); } +.p-TabBar-tabIcon.sketchbook-tree-icon { + background-color: var(--theia-foreground); + -webkit-mask: url(./sketchbook-tree-icon.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + width: 19px !important; + height: var(--theia-icon-size); + -webkit-mask-size: 100%; +} + +.p-mod-current .sketchbook-tree-icon { - background: url('./sketchbook-tree-icon.svg') center center no-repeat; - width: 19px !important; - height: var(--theia-icon-size); + background-color: var(--theia-foreground); + -webkit-mask: url(./sketchbook-tree-icon-filled.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; } .sketchbook-trees-container { - height: 100%; + height: 100%; } .sketchbook-tree__opts { - background: url('./sketchbook-opts-icon.svg') center center no-repeat; + background-color: var(--theia-foreground); + -webkit-mask: url(./sketchbook-opts-icon.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; width: var(--theia-icon-size); height: var(--theia-icon-size); } @@ -44,4 +60,4 @@ .theia-TreeNode:hover .sketchbook-commands-icons, .theia-TreeNode.theia-mod-selected .sketchbook-commands-icons { display: block; -} \ No newline at end of file +}