@c8y/style 1023.17.20 → 1023.22.2

package/styles/{_c8y-data-explorer.less → components/specialized/_c8y-data-explorer.less}

@@ -45,52 +45,7 @@ c8y-chart {
   }
 }
 
-.top-chart-bar {
-  justify-content: space-between;
-  margin: 2px 0 0;
-  position: relative;
-  z-index: 2;
-  align-items: center;
-  + hr {
-    margin: 9px calc(@component-padding * -1);
-    .no-card-context &{
-      margin-left: 0;
-      margin-right: 0;
-    }
-    + .chart-container {
-      top: 100px !important;
-      @media (min-width: @screen-sm-min) {
-        top: 75px !important;
-      }
-      @media (min-width: @screen-md-min) {
-        top: 30px !important;
-      }
-    }
-  }
-  .measurement-icon-bar-wrapper {
-    flex: 1 0 80px;
-  }
-  c8y-item-selector {
-    display: none;
-    max-width: 170px;
-    @media (min-width: @screen-md-min) {
-      max-width: 240px;
-    }
-    .c8y-child-assets-selector {
-      > .btn {
-        background-size: @font-size-small;
-        .input-sm();
-        padding-right: 24px !important;
-        background-position: right 6px top 6px;
-      }
-    }
-  }
-  &.has-data-selector {
-    c8y-item-selector {
-      display: block;
-    }
-  }
-}
+// Removed unused control utility class - verified 0 usages: .top-chart-bar
 
 .c8yGraphFill {
   min-height: 540px;
@@ -101,27 +56,17 @@ c8y-chart {
 
 // inside dashboard widgets
 .card-dashboard {
-  .top-chart-bar {
-    margin: 0;
-  }
+  // Removed unused control utility class - verified 0 usages: .top-chart-bar
   c8y-measurements-icon-bar {
     width: 100%;
   }
-  .top-chart-bar {
-    padding-left: @component-padding;
-    padding-right: @component-padding;
-    + hr {
-      display: none;
-    }
-    c8y-item-selector {
-      max-width: 170px;
-    }
-  }
+  // Removed unused control utility class - verified 0 usages: .top-chart-bar
 }
 
-.has-aggregation .measurement-icon-bar .c8y-realtime {
-  display: none;
-}
+// Removed unused utility usage: .has-aggregation .measurement-icon-bar .c8y-realtime
+//.has-aggregation .measurement-icon-bar .c8y-realtime {
+//  display: none;
+//}
 
 .c8y-timelines-chart,
 .chart-container {
@@ -152,9 +97,7 @@ c8y-chart {
       top: 10px;
       right: @component-padding;
     }
-    .top-chart-bar + hr {
-      display: none;
-    }
+    // Removed unused control utility class - verified 0 usages: .top-chart-bar
   }
 }
 
@@ -164,45 +107,7 @@ c8y-chart {
   }
 }
 
-.c8y-chart-hover-box {
-  position: absolute;
-  display: inline-block;
-  background-color: @popover-background-default;
-  padding: 10px;
-  top: 0;
-  z-index: 1100;
-  pointer-events: none;
-  .boxShadowHelper(md, right);
-}
-
-.c8y-chart-hover-box {
-  .dlt-c8y-icon-circle {
-    font-size: 10px;
-  }
-}
-
-.c8y-chart-hover-box .label {
-  padding: 0 5px 0 0;
-  color: @popover-label-color;
-  margin: 0;
-  font-weight: bold;
-  font-size: 100%;
-}
-
-.c8y-chart-hover-box .value {
-  color: @popover-color-default;
-}
-
-.c8y-chart-hover-box .value-holder {
-  font-size: 12px;
-  margin-top: 3px;
-  line-height: 10px;
-}
-
-.c8y-chart-hover-box .time-holder {
-  color: @component-color-text-muted;
-  font-size: 10px;
-}
+// Removed unused deprecated component class - verified 0 usages: .c8y-chart-hover-box
 
 .c8y-chart .clock {
   color: @component-form-legend-color;
@@ -306,16 +211,11 @@ c8y-chart {
   min-width: 404px;
 }
 
-.meausurements2 .top-controls {
-  position: relative;
-  z-index: 100;
-  margin-bottom: 10px;
-}
+// Removed unused control utility class - verified 0 usages: .top-controls
 
 @media (max-width: 768px) {
   .meausurements2 .measurements-date-from,
-  .meausurements2 .measurements-date-to,
-  .meausurements2 .top-controls {
+  .meausurements2 .measurements-date-to {
     position: absolute;
     transform: scale(0.8);
   }
@@ -333,10 +233,7 @@ c8y-chart {
     right: -35px;
   }
 
-  .meausurements2 .top-controls {
-    top: 0;
-    right: -35px;
-  }
+  // Removed unused control utility class - verified 0 usages: .top-controls
 }
 
 .e-charts--aggregated-datapoint{

package/styles/components/specialized/_c8y-data-explorer.scss

@@ -0,0 +1,260 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/shadows-helper";
+
+
+/**
+ * c8y data explorer - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+// Note: LESS mixin with guard removed - was never used
+// checkBG($check) when not ($check=inherit) {
+//   padding: $size-base;
+//   .form-control:not(:focus),
+//   .c8y-select-wrapper {
+//     background-color: transparent;
+//     color: inherit;
+//   }
+// }
+
+.c8y-data-explorer {
+  background-color: inherit;
+  color: inherit;
+  margin-top: $size-10;
+}
+
+c8y-chart {
+  z-index: 10;
+}
+
+.chart-container,
+.c8y-timelines-chart {
+  fill: currentColor;
+}
+
+.data-point-explorer .chart-container{
+  min-height: 280px;
+}
+
+.card-dashboard .chart-container{
+  max-height: calc(100% - 46px);
+  max-width: 99.5%;
+  min-height: unset;
+}
+
+.card-dashboard {
+  c8y-datapoints-graph-widget-view{
+    flex-grow: 1;
+  }
+  &:has(c8y-aggregation-picker),
+  &:has(c8y-auto-refresh-control),
+  &:has(c8y-date-time-context-picker) {
+    .chart-container {
+      max-height: calc(100% - 80px);
+    }
+  }
+}
+
+// Removed unused control utility class - verified 0 usages: .top-chart-bar
+
+.c8yGraphFill {
+  min-height: 540px;
+  @media screen and (min-width: $screen-lg-min) {
+    min-height: unset;
+  }
+}
+
+// inside dashboard widgets
+.card-dashboard {
+  // Removed unused control utility class - verified 0 usages: .top-chart-bar
+  c8y-measurements-icon-bar {
+    width: 100%;
+  }
+  // Removed unused control utility class - verified 0 usages: .top-chart-bar
+}
+
+// Removed unused utility usage: .has-aggregation .measurement-icon-bar .c8y-realtime
+
+.c8y-timelines-chart,
+.chart-container {
+  svg {
+    padding: 0;
+  }
+  .strictValue {
+    rect {
+      fill: $tooltip-background-default;
+      + text {
+        fill: $tooltip-color-default;
+      }
+    }
+  }
+}
+
+//.fragment-chart
+.measurements-tab .fragment-chart {
+  .realtime-form {
+    text-align: right;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .measurements-tab .fragment-chart {
+    .realtime-form {
+      position: absolute;
+      top: $size-10;
+      right: $component-padding;
+    }
+    // Removed unused control utility class - verified 0 usages: .top-chart-bar
+  }
+}
+
+.tab-pane {
+  .realtime-form {
+    float: right;
+  }
+}
+
+// Removed unused deprecated component class - verified 0 usages: .c8y-chart-hover-box
+
+.c8y-chart .clock {
+  color: $component-form-legend-color;
+  font-size: $font-size-small;
+}
+
+.c8y-chart .axis {
+  line,
+  path {
+    stroke: $component-color-default;
+  }
+}
+
+.truncated,
+.chart-help,
+.chart-loading {
+  position: absolute;
+  bottom: 3px;
+  left: 15px;
+  right: 7px;
+  font-size: $font-size-small;
+}
+
+.chart-loading {
+  left: 17px;
+  bottom: 5px;
+}
+
+.chart-help,
+.chart-loading {
+  color: $component-color-default;
+}
+
+.chart-help,
+.truncated {
+  left: 56px;
+}
+
+.chart-load-more{
+  position: absolute;
+  left: $size-16;
+  right: $size-16;
+  bottom: 3px;
+  z-index: 20;
+}
+
+.meausurements2 c8y-measurements-icon-bar {
+  display: block;
+  padding-top: 5px;
+  color: $component-color-default;
+}
+
+.meausurements2 .measurement-icon-bar {
+  padding-left: $size-10;
+  position: relative;
+  z-index: 120;
+}
+
+.meausurements2 .measurement-icon {
+  padding: 3px;
+  margin: 1px;
+  position: static;
+  font-size: $font-size-small;
+  background: none;
+}
+
+.meausurements2 .timeField input {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: $font-size-small;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.meausurements2 .timeField table {
+  margin-top: calc(-1 * $size-24);
+}
+.meausurements2 .timeField .btn {
+  height: $size-24;
+}
+
+.meausurements2 .timeField .btn-link {
+  color: $component-color-actions !important;
+}
+
+.meausurements2 .timeField tr:hover td {
+  background: transparent;
+}
+
+.meausurements2 .timeField tr:nth-child(3) a {
+  position: relative;
+  top: -3px;
+}
+
+.meausurements2 .measurements-time-control {
+  position: absolute;
+  bottom: 1px;
+  right: $size-5;
+  left: 5px;
+  z-index: 100;
+  min-width: 404px;
+}
+
+// Removed unused control utility class - verified 0 usages: .top-controls
+
+@media (max-width: 768px) {
+  .meausurements2 .measurements-date-from,
+  .meausurements2 .measurements-date-to {
+    position: absolute;
+    transform: scale(0.8);
+  }
+
+  .meausurements2 .measurements-date-from,
+  .meausurements2 .measurements-date-to {
+    bottom: 0;
+  }
+
+  .meausurements2 .measurements-date-from {
+    left: -35px;
+  }
+
+  .meausurements2 .measurements-date-to {
+    right: -35px;
+  }
+
+  // Removed unused control utility class - verified 0 usages: .top-controls
+}
+
+.e-charts--aggregated-datapoint{
+  position: absolute;
+  right: 17px;
+  bottom: 3px;
+  display: flex;
+  align-items: center;
+}

package/styles/components/specialized/_c8y-datapoint-pill.scss

@@ -0,0 +1,105 @@
+@use "../../../variables/index" as *;
+
+@use "../../core/buttons/buttons";
+
+
+/**
+ * c8y datapoint pill - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+.c8y-datapoint-pill, .c8y-alarm-pill, .c8y-event-pill {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  min-height: $size-24;
+  max-width: 100%;
+  border-radius: $size-16;
+  background-color: $component-background-default;
+  box-shadow: none;
+  border: 1px solid $component-color-text-muted;
+  font-size: $font-size-small;
+  line-height: 1;
+  &__btn {
+    @include buttons.btn-clean();
+    align-self: stretch;
+    padding: $size-4 $size-4 $size-4 $size-base;
+    border-right: 1px solid $component-color-text-muted;
+    color: $text-muted;
+    line-height: 1;
+  }
+  &__label {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    padding: $size-4 calc($size-base + $size-4) $size-4 $size-4;
+    line-height: 1;
+  }
+}
+
+.c8y-datapoint-pill{
+  &__btn {
+    &, &:not(.btn){
+      padding: $size-4;
+      &:first-child{
+        border-bottom-left-radius: $size-16!important;
+        border-top-left-radius: $size-16!important;
+      }
+      + .c8y-datapoint-pill__btn{
+        border-right: 0;
+        padding-right: $size-base;
+      }
+    }
+  }
+}
+
+.c8y-alarm-pill {
+  border-radius: $size-4;
+  &__btn {
+    &, &:not(.btn){
+      padding: $size-4!important;
+      + .c8y-alarm-pill__btn{
+        border-right: 0;
+      }
+    }
+  }
+}
+
+.c8y-event-pill {
+  border-radius: 2px;
+  border: 1px dotted $component-color-text-muted;
+  &__btn {
+    &, &:not(.btn){
+      border-right: 1px dotted $component-color-text-muted;
+      padding: $size-4 !important;
+      + .c8y-event-pill__btn{
+        border-right: 0;
+      }
+    }
+  }
+}
+.c8y-datapoint-pill, .c8y-alarm-pill, .c8y-event-pill{
+  &.pill--sm{
+    .c8y-datapoint-pill, .c8y-alarm-pill, .c8y-event-pill {
+      &__btn {
+        &, &:not(.btn){
+          font-size: 11px;
+          padding: 1px $size-8 1px $size-4!important;
+          + .c8y-datapoint-pill__btn,
+          + .c8y-alarm-pill__btn,
+          + .c8y-event-pill__btn {
+            border-right: 0;
+            padding-right: $size-base;
+          }
+        }
+      }
+    }
+  }
+}

package/styles/{_c8y-login.less → components/specialized/_c8y-login.less}

@@ -34,21 +34,21 @@
 .password-green {
   .password-bar {
     width: 100%;
-    background-color: @status-success;
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
   }
 }
 
 .password-yellow {
   .password-bar {
     width: 50%;
-    background-color: @status-warning;
+    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
   }
 }
 
 .password-red {
   .password-bar {
     width: 25%;
-    background-color: @status-danger;
+    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
   }
 }
 

package/styles/components/specialized/_c8y-login.scss

@@ -0,0 +1,120 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * c8y login - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+.password-strength {
+  width: 180px;
+  margin-bottom: $size-20;
+
+  .table & {
+    width: 100px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.password-strength>div {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background-color: $gray-90;
+}
+
+.password-strength>.password-strength-label {
+  float: left;
+  color: $component-form-label-color;
+}
+
+.password-green .password-bar,
+.password-yellow .password-bar,
+.password-red .password-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.password-green {
+  .password-bar {
+    width: 100%;
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+  }
+}
+
+.password-yellow {
+  .password-bar {
+    width: 50%;
+    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+  }
+}
+
+.password-red {
+  .password-bar {
+    width: 25%;
+    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+  }
+}
+
+.loading {
+  max-width: 320px;
+  height: auto;
+  min-height: 300px;
+  padding: $size-32;
+  margin: auto;
+  border-radius: 2px;
+
+  // Note: LESS guard removed - was: & when not ($powered-by='')
+  // Only apply powered-by image if variable is not empty
+  @if $powered-by != '' {
+    background-image: url($powered-by);
+    padding-bottom: 120px;
+    background-size: contain;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    max-width: 400px;
+    margin-top: 50px;
+  }
+}
+
+.init-load {
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: 320px;
+}
+
+.mainlogo {
+  // Note: LESS guard removed - was: & when not($extending)
+  background-image: $brand-logo-img;
+
+  width: 100%;
+  height: 110px;
+  padding-bottom: $brand-logo-height;
+  margin: 0 auto;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: top center;
+  display: block;
+}
+
+.mainlogo[src] {
+  background: none;
+  padding-bottom: 0;
+}

package/styles/components/specialized/_c8y-message-banner.less

@@ -0,0 +1,37 @@
+.c8y-message-banner{
+  position: fixed;
+  z-index: 10000;
+  width: 100%;
+  pointer-events: none;
+  .alert{
+    margin: @margin-16 auto;
+    box-shadow: var(--c8y-elevation-lg);
+    pointer-events: auto;
+    .close{
+      margin: -4px -4px 0 8px;
+    }
+    > span{
+      white-space: normal;
+    }
+    &.alert-info{
+      background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
+      border: 2px solid var(--palette-status-info, var(--c8y-palette-status-info));
+    }
+    &.alert-warning{
+      background-color: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
+      border: 2px solid var(--palette-status-warning, var(--c8y-palette-status-warning));
+    }
+    &.alert-danger{
+      background-color: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
+      border: 2px solid var(--palette-status-danger, var(--c8y-palette-status-danger));
+    }
+    &.alert-success{
+      background-color: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
+      border: 2px solid var(--palette-status-success, var(--c8y-palette-status-success));
+    }
+    &.alert-system{
+      background-color: var(--brand-80, var(--c8y-brand-80));
+      border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
+    }
+  }
+}