From 63467b3ff9b46eb85372c9b3627a06be68e440fd Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 21 Jun 2022 15:18:09 +0200 Subject: [PATCH 1/5] fix sketchbook icons colors --- .../src/browser/style/cloud-sketchbook.css | 25 +++++++++---- .../src/browser/style/sketchbook.css | 35 ++++++++++++------- 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css index 4eb9a7c58..3b1a29a86 100644 --- a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css +++ b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css @@ -13,12 +13,19 @@ margin-bottom: 20px; } - .cloud-sketchbook-tree-icon { - background: url("./cloud-sketchbook-tree-icon.svg") center center no-repeat; + background-color: #424242; + -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: auto 90%; +} + +.p-mod-current +.cloud-sketchbook-tree-icon { + background-color: var(--theia-statusBar-background); } .sketchbook-trees-container @@ -89,13 +96,19 @@ } .pull-sketch-icon { - background: url("./pull-sketch-icon.svg") center center no-repeat; + background-color: #424242; + -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: #424242; + -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 +194,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.css b/arduino-ide-extension/src/browser/style/sketchbook.css index 690351ede..4291407e2 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/arduino-ide-extension/src/browser/style/sketchbook.css @@ -1,27 +1,38 @@ .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); } .sketchbook-tree-icon { - background: url('./sketchbook-tree-icon.svg') center center no-repeat; - width: 19px !important; - height: var(--theia-icon-size); + background-color: #424242; + -webkit-mask: url(./sketchbook-tree-icon.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + width: 19px !important; + height: var(--theia-icon-size); +} + +.p-mod-current +.sketchbook-tree-icon { + background-color: var(--theia-statusBar-background); } .sketchbook-trees-container { - height: 100%; + height: 100%; } .sketchbook-tree__opts { - background: url('./sketchbook-opts-icon.svg') center center no-repeat; + background-color: #424242; + -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 +55,4 @@ .theia-TreeNode:hover .sketchbook-commands-icons, .theia-TreeNode.theia-mod-selected .sketchbook-commands-icons { display: block; -} \ No newline at end of file +} From f2b969e6511d2079b8f408f94aa7122a94ab3ccd Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 28 Jun 2022 17:07:50 +0200 Subject: [PATCH 2/5] use correct variables for sketchbook icons --- .../src/browser/style/cloud-sketchbook.css | 6 +++--- arduino-ide-extension/src/browser/style/sketchbook.css | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css index 3b1a29a86..9c521b38e 100644 --- a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css +++ b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css @@ -14,7 +14,7 @@ } .cloud-sketchbook-tree-icon { - background-color: #424242; + background-color: var(--theia-sideBar-foreground); -webkit-mask: url(./cloud-sketchbook-tree-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -96,7 +96,7 @@ } .pull-sketch-icon { - background-color: #424242; + background-color: var(--theia-sideBar-foreground); -webkit-mask: url(./pull-sketch-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -105,7 +105,7 @@ } .push-sketch-icon { - background-color: #424242; + background-color: var(--theia-sideBar-foreground); -webkit-mask: url(./push-sketch-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; diff --git a/arduino-ide-extension/src/browser/style/sketchbook.css b/arduino-ide-extension/src/browser/style/sketchbook.css index 4291407e2..3933700c8 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/arduino-ide-extension/src/browser/style/sketchbook.css @@ -11,7 +11,7 @@ } .sketchbook-tree-icon { - background-color: #424242; + background-color: var(--theia-sideBar-foreground); -webkit-mask: url(./sketchbook-tree-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -29,7 +29,7 @@ } .sketchbook-tree__opts { - background-color: #424242; + background-color: var(--theia-sideBar-foreground); -webkit-mask: url(./sketchbook-opts-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; From 47ae07b95e138cee5f0050dc220dc69deb80c4b4 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Wed, 29 Jun 2022 09:40:27 +0200 Subject: [PATCH 3/5] add sketchbook tree icons --- .../style/cloud-sketchbook-tree-icon-filled.svg | 14 ++++++++++++++ .../browser/style/cloud-sketchbook-tree-icon.svg | 15 ++------------- .../src/browser/style/cloud-sketchbook.css | 8 ++++++-- .../browser/style/sketchbook-tree-icon-filled.svg | 4 ++++ .../src/browser/style/sketchbook-tree-icon.svg | 14 ++++---------- .../src/browser/style/sketchbook.css | 11 ++++++++--- 6 files changed, 38 insertions(+), 28 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 000000000..cd0fc59a5 --- /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 b163d8293..4b906677b 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 9c521b38e..de031d260 100644 --- a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css +++ b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css @@ -13,19 +13,23 @@ margin-bottom: 20px; } -.cloud-sketchbook-tree-icon { +.p-TabBar-tabIcon.cloud-sketchbook-tree-icon { background-color: var(--theia-sideBar-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); - -webkit-mask-size: auto 90%; + -webkit-mask-size: 100%; } .p-mod-current .cloud-sketchbook-tree-icon { background-color: var(--theia-statusBar-background); + -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 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 000000000..15368314f --- /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 93e4fec7c..8d376b71d 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 3933700c8..1011ceddc 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/arduino-ide-extension/src/browser/style/sketchbook.css @@ -10,18 +10,23 @@ height: var(--theia-icon-size); } -.sketchbook-tree-icon { +.p-TabBar-tabIcon.sketchbook-tree-icon { background-color: var(--theia-sideBar-foreground); -webkit-mask: url(./sketchbook-tree-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; - width: 19px !important; + width: var(--theia-icon-size); height: var(--theia-icon-size); + -webkit-mask-size: 100%; } .p-mod-current .sketchbook-tree-icon { - background-color: var(--theia-statusBar-background); + background-color: var(--theia-statusBar-background); + -webkit-mask: url(./sketchbook-tree-icon-filled.svg); + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100%; } .sketchbook-trees-container { From bf02977421826b92c739b6e55487243ab3c73700 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Wed, 29 Jun 2022 10:14:21 +0200 Subject: [PATCH 4/5] increase sketchbook-tree-icon width --- arduino-ide-extension/src/browser/style/sketchbook.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/arduino-ide-extension/src/browser/style/sketchbook.css b/arduino-ide-extension/src/browser/style/sketchbook.css index 1011ceddc..c2bbdae68 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/arduino-ide-extension/src/browser/style/sketchbook.css @@ -15,7 +15,7 @@ -webkit-mask: url(./sketchbook-tree-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; - width: var(--theia-icon-size); + width: 19px !important; height: var(--theia-icon-size); -webkit-mask-size: 100%; } From d5cc76942ce59e2f9f7f5c596c465c2f24f9c795 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Wed, 29 Jun 2022 16:42:36 +0200 Subject: [PATCH 5/5] fix background-color sketchbook tree icons --- .../src/browser/style/cloud-sketchbook.css | 10 +++++----- arduino-ide-extension/src/browser/style/sketchbook.css | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css index de031d260..9e47a2157 100644 --- a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css +++ b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css @@ -14,7 +14,7 @@ } .p-TabBar-tabIcon.cloud-sketchbook-tree-icon { - background-color: var(--theia-sideBar-foreground); + background-color: var(--theia-foreground); -webkit-mask: url(./cloud-sketchbook-tree-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -25,7 +25,7 @@ .p-mod-current .cloud-sketchbook-tree-icon { - background-color: var(--theia-statusBar-background); + background-color: var(--theia-foreground); -webkit-mask: url(./cloud-sketchbook-tree-icon-filled.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -76,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 { @@ -100,7 +100,7 @@ } .pull-sketch-icon { - background-color: var(--theia-sideBar-foreground); + background-color: var(--theia-foreground); -webkit-mask: url(./pull-sketch-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -109,7 +109,7 @@ } .push-sketch-icon { - background-color: var(--theia-sideBar-foreground); + background-color: var(--theia-foreground); -webkit-mask: url(./push-sketch-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; diff --git a/arduino-ide-extension/src/browser/style/sketchbook.css b/arduino-ide-extension/src/browser/style/sketchbook.css index c2bbdae68..2c88daa3f 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/arduino-ide-extension/src/browser/style/sketchbook.css @@ -11,7 +11,7 @@ } .p-TabBar-tabIcon.sketchbook-tree-icon { - background-color: var(--theia-sideBar-foreground); + background-color: var(--theia-foreground); -webkit-mask: url(./sketchbook-tree-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -22,7 +22,7 @@ .p-mod-current .sketchbook-tree-icon { - background-color: var(--theia-statusBar-background); + background-color: var(--theia-foreground); -webkit-mask: url(./sketchbook-tree-icon-filled.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; @@ -34,7 +34,7 @@ } .sketchbook-tree__opts { - background-color: var(--theia-sideBar-foreground); + background-color: var(--theia-foreground); -webkit-mask: url(./sketchbook-opts-icon.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;