Consolidated Icon CSS

src/components/PrimaryPanes/Sources.css

@@ -26,31 +26,10 @@
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
-.sources-clear-root i {
-  margin-right: 5px;
-  position: relative;
-}
-
-.sources-clear-root svg {
-  width: 13px;
-  height: 13px;
-}
-
 .theme-dark .sources-clear-root {
   fill: var(--theme-body-color);
 }
 
-.sources-clear-root .home {
-  opacity: 0.5;
-}
-
-.sources-clear-root .breadcrumb {
-  width: 5px;
-  margin: 0 2px 0 6px;
-  vertical-align: bottom;
-  background: var(--theme-body-color-alt);
-}
-
 .sources-clear-root-label {
   margin-left: 5px;
 }
@@ -80,15 +59,6 @@
   width: 100%;
 }
 
-.sources-list .img {
-  margin-inline-end: 5px;
-}
-
-.sources-list .tree .focused .img:not(.vue):not(.angular):not(.webpack):not(.dojo):not(.ember):not(.aframe):not(.marko):not(.mobx):not(.nextjs):not(.nuxtjs):not(.preact):not(.pug):not(.rxjs):not(.sencha-extjs),
-.sources-list .managed-tree .tree .node.focused .img.blackBox {
-  background: #ffffff;
-}
-
 .sources-list .tree .label .suffix {
   font-style: italic;
   font-size: 0.9em;
@@ -121,6 +91,36 @@
   display: inline-block;
 }
 
+.sources-list .source-icon {
+  top: 2px;
+}
+
+.sources-list .img.angular,
+.sources-list .img.webpack,
+.sources-list .img.vue,
+.sources-list .img.aframe,
+.sources-list .img.dojo,
+.sources-list .img.ember,
+.sources-list .img.marko,
+.sources-list .img.mobx,
+.sources-list .img.nextjs,
+.sources-list .img.nuxtjs,
+.sources-list .img.preact,
+.sources-list .img.pug,
+.sources-list .img.rxjs,
+.sources-list .img.sencha-extjs {
+  top: 3px;
+}
+
+.sources-list .tree .focused .img:not(.vue):not(.angular):not(.webpack):not(.dojo):not(.ember):not(.aframe):not(.marko):not(.mobx):not(.nextjs):not(.nuxtjs):not(.preact):not(.pug):not(.rxjs):not(.sencha-extjs),
+.sources-list .managed-tree .tree .node.focused .img.blackBox {
+  background: #ffffff;
+}
+
+.theme-dark .sources-list .managed-tree .tree .node .img.blackBox {
+  background-color: var(--theme-body-color);
+}
+
 .no-sources-message {
   width: 100%;
   font-style: italic;
@@ -212,22 +212,6 @@
   margin-top: 4px;
 }
 
-.sources-list .managed-tree .tree .node .img.blackBox {
-  mask: url(/images/blackBox.svg) no-repeat;
-  mask-size: 100%;
-  background-color: var(--theme-highlight-blue);
-  width: 13px;
-  height: 13px;
-  display: inline-block;
-  margin-inline-end: 6px;
-  margin-inline-start: 1px;
-  margin-top: 2px;
-}
-
-.theme-dark .sources-list .managed-tree .tree .node .img.blackBox {
-  background-color: var(--theme-body-color);
-}
-
 /*
   Custom root styles
 */

src/components/shared/SourceIcon.css

@@ -1,40 +1,9 @@
 .source-icon {
+  width: 15px;
+  height: 15px;
   position: relative;
   background-color: var(--theme-comment);
   mask-size: 100%;
   display: inline-block;
   margin-inline-end: 5px;
 }
-
-.source-icon {
-  width: 15px;
-  height: 15px;
-}
-
-.source-icon.prettyPrint {
-  mask: url(/images/prettyPrint.svg) no-repeat;
-  mask-size: 100%;
-  background: var(--theme-highlight-blue);
-  fill: var(--theme-textbox-box-shadow);
-}
-
-.source-icon.vue {
-  background: url(/images/vuejs.svg) 1px 1px no-repeat;
-  background-size: 15px;
-}
-
-.source-icon.angular {
-  background: url(/images/angular.svg) 1px 1px no-repeat;
-  background-size: 13px 13px;
-}
-
-.source-icon.blackBox {
-  mask: url(/images/blackBox.svg) no-repeat;
-  mask-size: 100%;
-  background: var(--theme-highlight-blue);
-}
-
-.source-icon.react {
-  mask-size: 100%;
-  background: var(--theme-highlight-bluegrey);
-}

src/components/shared/Svg.css

@@ -21,7 +21,6 @@
 .worker,
 .file,
 .folder,
-.sources-list .source-icon,
 .extension {
   position: relative;
   top: 2px;
@@ -88,6 +87,7 @@
 .img.react {
   mask: url(/images/react.svg) no-repeat;
   mask-size: 100%;
+  background: var(--theme-highlight-bluegrey);
 }
 
 .img.aframe {
@@ -195,7 +195,6 @@ span.img.marko {
 
 .img.vue {
   background: url(/images/vuejs.svg) 1px 1px no-repeat;
-  background-size: 15px;
 }
 
 .img.typescript {
@@ -255,18 +254,38 @@ span.img.marko {
 .img.breadcrumb {
   mask: url(/images/breadcrumbs-divider.svg) no-repeat;
   mask-size: 100%;
+  width: 5px;
+  margin: 0 2px 0 6px;
+  vertical-align: bottom;
+  background: var(--theme-body-color-alt);
+}
+
+.img.blackBox {
+  mask: url(/images/blackBox.svg) no-repeat;
+  mask-size: 100%;
+  background-color: var(--theme-highlight-blue);
 }
 
 .img.home {
   mask: url(/images/home.svg) no-repeat;
   mask-size: 100%;
+  opacity: 0.5;
 }
 
 .img.angular {
   background-image: url(/images/angular.svg);
   background-repeat: no-repeat;
 }
 
+/* Can't replicate .prettyPrint (see issue #7784). Once resolved, */
+/* selector can be changed to .img.prettyPrint for consistency */
+.source-icon.prettyPrint {
+  mask: url(/images/prettyPrint.svg) no-repeat;
+  mask-size: 100%;
+  background: var(--theme-highlight-blue);
+  fill: var(--theme-textbox-box-shadow);
+}
+
 .img.angular,
 .img.webpack,
 .img.vue,
@@ -288,27 +307,20 @@ span.img.marko {
   position: relative;
 }
 
-.sources-list .img.angular,
-.sources-list .img.webpack,
-.sources-list .img.vue,
-.sources-list .img.aframe,
-.sources-list .img.dojo,
-.sources-list .img.ember,
-.sources-list .img.marko,
-.sources-list .img.mobx,
-.sources-list .img.nextjs,
-.sources-list .img.nuxtjs,
-.sources-list .img.preact,
-.sources-list .img.pug,
-.sources-list .img.rxjs,
-.sources-list .img.sencha-extjs {
-  top: 3px;
+.img.angular,
+.img.webpack {
+  opacity: 0.8;
+  margin-inline-end: 5px;
+}
+
+.theme-dark .img.angular,
+.theme-dark .webpack {
+  opacity: 0.5;
 }
 
 .img.domain,
 .img.folder,
 .img.file,
-.sources-list .img.source-icon,
 .img.extension,
 .img.worker {
   mask-size: 100%;
@@ -325,8 +337,7 @@ span.img.marko {
 
 .img.refresh,
 .img.shortcut,
-.img.worker,
-.img.arrow {
+.img.worker {
   margin-inline-end: 5px;
 }
 
@@ -337,7 +348,7 @@ span.img.marko {
 
 .img.arrow {
   mask: url(/images/arrow.svg);
-  margin-inline-end: 4px;
+  margin-inline-end: 5px;
   width: 10px;
   height: 10px;
   padding-top: 9px;
@@ -381,17 +392,3 @@ html[dir="rtl"] .arrow,
 .arrow.hidden {
   visibility: hidden;
 }
-
-.angular,
-.webpack {
-  opacity: 0.8;
-}
-
-.theme-dark .angular,
-.theme-dark .webpack {
-  opacity: 0.5;
-}
-
-.source-icon svg {
-  fill: var(--theme-comment);
-}