@igo2/core 18.0.0-next.1 → 18.0.0-next.11

package/theming/prebuilt-themes/bluedark-theme.css

@@ -631,8 +631,8 @@ html {
   --mdc-filled-text-field-caret-color: #164e62;
   --mdc-filled-text-field-focus-active-indicator-color: #164e62;
   --mdc-filled-text-field-focus-label-text-color: rgba(22, 78, 98, 0.87);
-  --mdc-filled-text-field-container-color: whitesmoke;
-  --mdc-filled-text-field-disabled-container-color: #fafafa;
+  --mdc-filled-text-field-container-color: rgb(244.8, 244.8, 244.8);
+  --mdc-filled-text-field-disabled-container-color: rgb(249.9, 249.9, 249.9);
   --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, 0.6);
   --mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
   --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
@@ -851,10 +851,10 @@ html {
 
 .mat-mdc-standard-chip {
   --mdc-chip-disabled-label-text-color: #212121;
-  --mdc-chip-elevated-container-color: #e0e0e0;
-  --mdc-chip-elevated-selected-container-color: #e0e0e0;
-  --mdc-chip-elevated-disabled-container-color: #e0e0e0;
-  --mdc-chip-flat-disabled-selected-container-color: #e0e0e0;
+  --mdc-chip-elevated-container-color: rgb(224.4, 224.4, 224.4);
+  --mdc-chip-elevated-selected-container-color: rgb(224.4, 224.4, 224.4);
+  --mdc-chip-elevated-disabled-container-color: rgb(224.4, 224.4, 224.4);
+  --mdc-chip-flat-disabled-selected-container-color: rgb(224.4, 224.4, 224.4);
   --mdc-chip-focus-state-layer-color: black;
   --mdc-chip-hover-state-layer-color: black;
   --mdc-chip-selected-hover-state-layer-color: black;
@@ -1081,6 +1081,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #164e62;
@@ -1096,6 +1097,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #8ba7b1;
@@ -1111,6 +1113,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #f44336;
@@ -1285,6 +1288,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #164e62;
@@ -1298,6 +1302,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #8ba7b1;
@@ -1311,6 +1316,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #f44336;
@@ -2027,10 +2033,13 @@ html {
 
 html {
   --mat-badge-text-font: Roboto, sans-serif;
+  --mat-badge-line-height: 22px;
   --mat-badge-text-size: 12px;
   --mat-badge-text-weight: 600;
   --mat-badge-small-size-text-size: 9px;
+  --mat-badge-small-size-line-height: 16px;
   --mat-badge-large-size-text-size: 24px;
+  --mat-badge-large-size-line-height: 28px;
 }
 
 html {
@@ -2076,7 +2085,7 @@ html {
   --mat-standard-button-toggle-disabled-state-background-color: white;
   --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87);
   --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
-  --mat-standard-button-toggle-divider-color: #e0e0e0;
+  --mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4);
 }
 
 html {
@@ -2114,7 +2123,7 @@ html {
   --mat-datepicker-calendar-date-in-range-state-background-color: rgba(22, 78, 98, 0.2);
   --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
   --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
-  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
   --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
   --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
   --mat-datepicker-calendar-period-button-text-color: black;
@@ -2145,7 +2154,7 @@ html {
   --mat-datepicker-calendar-date-in-range-state-background-color: rgba(139, 167, 177, 0.2);
   --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
   --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
-  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
 }
 .mat-datepicker-content.mat-warn {
   --mat-datepicker-calendar-date-selected-state-text-color: white;
@@ -2157,7 +2166,7 @@ html {
   --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, 0.2);
   --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
   --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
-  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
 }
 
 .mat-datepicker-toggle-active.mat-accent {
@@ -2322,7 +2331,7 @@ html {
 }
 
 html {
-  --mat-sort-arrow-color: #757575;
+  --mat-sort-arrow-color: rgb(117.3, 117.3, 117.3);
 }
 
 html {
@@ -2663,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #b9cad0;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2721,7 +2740,7 @@ igo-feature-details > table.igo-striped tbody tr:nth-child(odd) {
 }
 
 .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected {
-  background-color: #1b5f77;
+  background-color: rgb(26.675, 94.575, 118.825);
 }
 
 igo-ogc-filter-selection mat-button-toggle.mat-button-toggle-checked {
@@ -2736,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #164e62;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2756,14 +2783,59 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
+igo-layer-item {
+  background-color: white;
+}
+igo-layer-item button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-item button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+igo-layer-item .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
   background-color: #b9cad0;
-  color: white;
+  color: black;
 }
-igo-layer-item button:not(.mat-primary) mat-icon {
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(209.4102564103, 220.4820512821, 224.3897435897);
+  color: black;
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #8ba7b1 !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #8ba7b1;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #e3eaec;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }
 

package/theming/prebuilt-themes/bluedq-theme.css

@@ -631,8 +631,8 @@ html {
   --mdc-filled-text-field-caret-color: #095797;
   --mdc-filled-text-field-focus-active-indicator-color: #095797;
   --mdc-filled-text-field-focus-label-text-color: rgba(9, 87, 151, 0.87);
-  --mdc-filled-text-field-container-color: whitesmoke;
-  --mdc-filled-text-field-disabled-container-color: #fafafa;
+  --mdc-filled-text-field-container-color: rgb(244.8, 244.8, 244.8);
+  --mdc-filled-text-field-disabled-container-color: rgb(249.9, 249.9, 249.9);
   --mdc-filled-text-field-label-text-color: rgba(0, 0, 0, 0.6);
   --mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, 0.6);
   --mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, 0.38);
@@ -851,10 +851,10 @@ html {
 
 .mat-mdc-standard-chip {
   --mdc-chip-disabled-label-text-color: #212121;
-  --mdc-chip-elevated-container-color: #e0e0e0;
-  --mdc-chip-elevated-selected-container-color: #e0e0e0;
-  --mdc-chip-elevated-disabled-container-color: #e0e0e0;
-  --mdc-chip-flat-disabled-selected-container-color: #e0e0e0;
+  --mdc-chip-elevated-container-color: rgb(224.4, 224.4, 224.4);
+  --mdc-chip-elevated-selected-container-color: rgb(224.4, 224.4, 224.4);
+  --mdc-chip-elevated-disabled-container-color: rgb(224.4, 224.4, 224.4);
+  --mdc-chip-flat-disabled-selected-container-color: rgb(224.4, 224.4, 224.4);
   --mdc-chip-focus-state-layer-color: black;
   --mdc-chip-hover-state-layer-color: black;
   --mdc-chip-selected-hover-state-layer-color: black;
@@ -1081,6 +1081,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #095797;
@@ -1096,6 +1097,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #0d81df;
@@ -1111,6 +1113,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #f44336;
@@ -1285,6 +1288,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #095797;
@@ -1298,6 +1302,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #0d81df;
@@ -1311,6 +1316,7 @@ html {
   --mdc-radio-disabled-selected-icon-color: black;
   --mdc-radio-disabled-unselected-icon-color: black;
   --mdc-radio-unselected-hover-icon-color: #212121;
+  --mdc-radio-unselected-focus-icon-color: #212121;
   --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54);
   --mdc-radio-selected-focus-icon-color: #f44336;
@@ -2027,10 +2033,13 @@ html {
 
 html {
   --mat-badge-text-font: Roboto, sans-serif;
+  --mat-badge-line-height: 22px;
   --mat-badge-text-size: 12px;
   --mat-badge-text-weight: 600;
   --mat-badge-small-size-text-size: 9px;
+  --mat-badge-small-size-line-height: 16px;
   --mat-badge-large-size-text-size: 24px;
+  --mat-badge-large-size-line-height: 28px;
 }
 
 html {
@@ -2076,7 +2085,7 @@ html {
   --mat-standard-button-toggle-disabled-state-background-color: white;
   --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87);
   --mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
-  --mat-standard-button-toggle-divider-color: #e0e0e0;
+  --mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4);
 }
 
 html {
@@ -2114,7 +2123,7 @@ html {
   --mat-datepicker-calendar-date-in-range-state-background-color: rgba(9, 87, 151, 0.2);
   --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
   --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
-  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
   --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
   --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
   --mat-datepicker-calendar-period-button-text-color: black;
@@ -2145,7 +2154,7 @@ html {
   --mat-datepicker-calendar-date-in-range-state-background-color: rgba(13, 129, 223, 0.2);
   --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
   --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
-  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
 }
 .mat-datepicker-content.mat-warn {
   --mat-datepicker-calendar-date-selected-state-text-color: white;
@@ -2157,7 +2166,7 @@ html {
   --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, 0.2);
   --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
   --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
-  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
 }
 
 .mat-datepicker-toggle-active.mat-accent {
@@ -2322,7 +2331,7 @@ html {
 }
 
 html {
-  --mat-sort-arrow-color: #757575;
+  --mat-sort-arrow-color: rgb(117.3, 117.3, 117.3);
 }
 
 html {
@@ -2663,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #b4e5fb;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2721,7 +2740,7 @@ igo-feature-details > table.igo-striped tbody tr:nth-child(odd) {
 }
 
 .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected {
-  background-color: #0a65af;
+  background-color: rgb(10.434375, 100.865625, 175.065625);
 }
 
 igo-ogc-filter-selection mat-button-toggle.mat-button-toggle-checked {
@@ -2736,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #095797;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2756,14 +2783,59 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
+igo-layer-item {
+  background-color: white;
+}
+igo-layer-item button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-item button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+igo-layer-item .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
   background-color: #b4e5fb;
-  color: white;
+  color: black;
 }
-igo-layer-item button:not(.mat-primary) mat-icon {
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(218.7341772152, 242.4278481013, 253.0658227848);
+  color: black;
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #0d81df !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #0d81df;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #e1f5fd;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }