sketchbook.css

.sketchbook-tab-icon {
  -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);
}

.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-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%;
}

.sketchbook-tree__opts {
  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);
}

.active-sketch {
  font-weight: 500;
  background-color: var(--theia-list-activeSelectionBackground) !important;
  color: var(--theia-list-inactiveSelectionForeground) !important;

}

#arduino-sketchbook-tree-widget .theia-TreeNode {
  line-height: 30px;
}

#arduino-sketchbook-tree-widget .theia-TreeNodeSegmentGrow {
  flex: 1;
}

.theia-TreeNode .sketchbook-commands-icons {
  display: none;
}

.theia-TreeNode:hover .sketchbook-commands-icons,
.theia-TreeNode.theia-mod-selected .sketchbook-commands-icons {
  display: block;
}

.theia-Tree:focus .theia-TreeNode.theia-mod-selected,
.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
  background: var(--theia-list-inactiveSelectionBackground);
}


/* High Contrast Theme rules */
/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
.hc-black.hc-theia.theia-hc .theia-TreeNode:hover {
  outline: 1px dashed var(--theia-focusBorder);
}

.hc-black.hc-theia.theia-hc .theia-Tree .theia-TreeNode.theia-mod-selected {
  outline: 1px dotted var(--theia-focusBorder);
}

.hc-black.hc-theia.theia-hc .theia-Tree:focus .theia-TreeNode.theia-mod-selected, 
.hc-black.hc-theia.theia-hc .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
  outline: 1px solid var(--theia-focusBorder);
}