@c8y/style 1023.17.19 → 1023.22.2

package/styles/{_c8y-dashboard-style.less → dashboard/_c8y-dashboard-style.less}

@@ -261,9 +261,7 @@ body fieldset > .dashboard-preview-slot {
         z-index: 9;
         height: 100%;
 
-        &.has-footer {
-          height: calc(~'100% - 65px');
-        }
+        // Removed unused state modifier class - verified 0 usages: .has-footer
 
         &:before {
           display: none;
@@ -275,7 +273,7 @@ body fieldset > .dashboard-preview-slot {
         .c8y-map-status {
           margin-top: 0;
         }
-        .top-chart-bar, .sticky-top{
+        .sticky-top {
           padding-top: @margin-base;
         }
       }
@@ -326,7 +324,7 @@ body fieldset > .dashboard-preview-slot {
         .c8y-map-status {
           margin-top: 24px;
         }
-        .top-chart-bar, .sticky-top{
+        .sticky-top {
           padding-top: @margin-base;
         }
       }
@@ -360,7 +358,7 @@ body fieldset > .dashboard-preview-slot {
 }
 
 .dashboard-template-marker{
-  color: @status-info;
+  color: var(--palette-status-info, var(--c8y-palette-status-info));
   line-height: .5;
   font-size: 10px;
   font-weight: bold;

package/styles/dashboard/_c8y-dashboard-style.scss

@@ -0,0 +1,409 @@
+@use "../../variables/index" as *;
+
+@use "sass:string";
+@use "../../variables/dlt-c8y-icons-vars";
+@use "../mixins/c8y-scrollbar";
+@use "../mixins/icon-base";
+
+/**
+ * Dashboard Styles - Grid-based dashboard layout with drag-and-drop
+ *
+ * Note: Uses design tokens for spacing ($size-*, $component-padding) and colors.
+ *
+ * Intentionally hardcoded values:
+ * - Media query breakpoint (768px): Responsive breakpoint
+ * - Border widths (1px, 2px): Standard border sizes
+ * - Widget dimensions (30px, 40px, 65px, 99vh): Component-specific sizes
+ * - Min-heights (6px): Off-grid positioning
+ * - Transition duration (0.3s): Animation timing
+ * - Opacity values: Visual effects
+ * - Z-index values (1085, 100, 12, 11, 10, 9): Stacking order
+ * - Percentages and viewport units: Layout calculations
+ * - Line-height (0.5): Typography ratio
+ * - Padding 3px (off-grid): Fine-tuning for template marker
+ * - Height 14px (off-grid): Template marker height
+ */
+
+@media (max-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .dashboard-grid-child {
+    grid-column-start: 1 !important;
+    grid-column-end: 1 !important;
+    grid-row-start: auto !important;
+  }
+  .card-header-grid.cdk-drag-handle {
+    cursor: auto;
+  }
+}
+
+body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
+  opacity: 0.8;
+}
+
+.dashboard-grid {
+  display: grid;
+
+  .dashboard-grid-child {
+    min-width: 0;
+  }
+
+  .cdk-drop-list {
+    position: relative;
+  }
+
+  .card-dashboard {
+    overflow: hidden;
+  }
+
+  .card-dashboard.on-resize {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.8;
+  }
+
+  .card-dashboard.panel-content-transparent.on-resize {
+    outline: 1px solid $component-brand-primary;
+  }
+
+  .card-header-grid {
+    min-height: 6px;
+    height: auto !important;
+  }
+
+  .card-header-actions:after,
+  .card-header-actions + .card-inner-scroll:before {
+    display: none;
+  }
+
+  .header-actions {
+    top: 0;
+    right: 0;
+    z-index: 10;
+  }
+
+  .resize-handle {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 12;
+    width: 30px;
+    height: 30px;
+    cursor: se-resize;
+  }
+
+  .resize-icon {
+    position: absolute;
+    @include icon-base.dlt-c8y-icon;
+    right: $size-4;
+    bottom: $size-4;
+    z-index: 11;
+    width: $size-20;
+    height: $size-20;
+    opacity: 0;
+    cursor: se-resize;
+    transition: opacity 0.3s ease-in-out;
+    transform: rotate(-90deg);
+
+    &:before {
+      content: dlt-c8y-icons-vars.$dlt-c8y-icon-enlarge;
+    }
+  }
+
+  .card-dashboard:hover .resize-icon {
+    opacity: 0.25;
+  }
+
+  .resize-handle:hover + .resize-icon {
+    opacity: 1;
+  }
+
+  .on-resize .resize-icon {
+    opacity: 1 !important;
+  }
+
+  .card-placeholder {
+    height: 100%;
+    opacity: 1 !important;
+    outline: 2px dotted $component-border-color !important;
+    outline-offset: 0;
+  }
+
+  .cdk-drop-list,
+  .card-dashboard {
+    height: 100%;
+  }
+}
+
+@mixin fullscreen-dashboard-styles {
+  overflow: hidden;
+  .navigator,
+  .app-main-header {
+    display: none;
+  }
+
+  .mcontainer {
+    margin-top: 0;
+    margin-left: 0 !important;
+    padding: 0 !important;
+    background-color: $body-background-color;
+
+    > .container-fluid {
+      padding-bottom: 0;
+    }
+  }
+
+  .c8y-ui-action-bar {
+    top: 0 !important;
+    left: 0 !important;
+  }
+
+
+
+  .dashboard {
+    top: 0;
+    left: 0;
+    z-index: 1085 !important;
+    overflow-y: auto;
+    margin: 0 !important;
+    padding-top: calc($size-base * 10);
+    padding-bottom: $size-24 !important;
+    width: 100vw;
+    height: 99vh;
+    @include c8y-scrollbar.c8y-scrollbar();
+
+    .dashboard {
+      padding-bottom: 0 !important;
+
+      all: unset;
+    }
+
+    .dashboard-container {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .page-tabs:not(.c8y-top-drawer--tabs) {
+    display: none;
+  }
+}
+
+.fullscreen-dashboard {
+  @include fullscreen-dashboard-styles;
+}
+
+// hide action bar when a single widget is in fullscreen
+.singleWidget {
+  .c8y-ui-action-bar {
+    display: none !important;
+  }
+  .dashboard-grid-child:not(.fullscreen) {
+    display: none !important;
+  }
+  .dashboard-grid-child.fullscreen {
+    position: fixed;
+    inset: $size-24;
+    z-index: 100;
+    margin: 0 !important;
+  }
+  .dashboard {
+    overflow: hidden !important;
+  }
+}
+
+:-webkit-full-screen:not(:root) {
+  @include fullscreen-dashboard-styles;
+}
+
+:-moz-full-screen:not(:root) {
+  @include fullscreen-dashboard-styles;
+}
+
+:-ms-fullscreen:not(:root) {
+  @include fullscreen-dashboard-styles;
+}
+
+:fullscreen:not(:root) {
+  @include fullscreen-dashboard-styles;
+}
+
+body .dashboard-preview-slot {
+  margin: 0 !important;
+  padding: 30px;
+  border: 1px solid $component-border-color;
+  .page-tabs-horizontal {
+    margin-top: 2px !important;
+  }
+
+  .card.card-dashboard {
+    position: relative;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0 !important;
+  }
+}
+body fieldset > .dashboard-preview-slot {
+  border: 0;
+  padding: 0;
+  margin: 0 !important;
+}
+
+// title hidden
+.card.card-dashboard {
+  .panel-title-hidden &,
+  .dashboard-preview-slot.panel-title-hidden,
+  &.panel-title-hidden.cdk-drag-disabled {
+    .card-header-actions {
+      position: absolute;
+      z-index: 10;
+      min-height: 6px;
+      width: 100%;
+      height: 0;
+      border: 0;
+      pointer-events: none;
+      &:after {
+        display: none;
+      }
+
+      > * {
+        display: none;
+      }
+
+      > .header-actions {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        display: flex;
+        border-left: 0;
+        opacity: 0;
+      }
+
+      + .card-inner-scroll {
+        top: 0;
+        z-index: 9;
+        height: 100%;
+
+        // Removed unused state modifier class - verified 0 usages: .has-footer
+
+        &:before {
+          display: none;
+        }
+
+        .leaflet-top .leaflet-control {
+          margin-top: $size-16;
+        }
+        .c8y-map-status {
+          margin-top: 0;
+        }
+        .sticky-top {
+          padding-top: $size-base;
+        }
+      }
+    }
+  }
+}
+
+// title overlay
+.card.card-dashboard {
+  .panel-title-overlay &,
+  .dashboard-preview-slot.panel-title-overlay &,
+  &.panel-title-overlay.cdk-drag-disabled {
+    .card-header-actions {
+      position: absolute;
+      z-index: 10;
+      width: 100%;
+      border: 0;
+      pointer-events: none;
+
+      &:after {
+        display: none;
+      }
+
+      .card-header-title {
+        min-height: 40px;
+      }
+
+      > .header-actions {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        display: flex;
+        border-left: 0;
+        opacity: 0;
+      }
+
+      + .card-inner-scroll {
+        top: 0;
+        z-index: 9;
+        height: 100%;
+        &:before {
+          display: none;
+        }
+        .leaflet-top .leaflet-control {
+          margin-top: 40px;
+        }
+        .c8y-map-status {
+          margin-top: $size-24;
+        }
+        .sticky-top {
+          padding-top: $size-base;
+        }
+      }
+    }
+  }
+}
+
+//title border
+.card.card-dashboard {
+  .panel-title-border &,
+  .dashboard-preview-slot.panel-title-border &,
+  &.panel-title-border {
+    .card-header-actions {
+      z-index: 10;
+      border-color: $component-border-color;
+      border-top: 1px solid transparent;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+
+      &:after {
+        display: none;
+      }
+
+      + .card-inner-scroll {
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.dashboard-template-marker {
+  color: var(--palette-status-info, var(--c8y-palette-status-info));
+  line-height: 0.5;
+  font-size: $size-10;
+  font-weight: bold;
+  padding: $size-4 3px;
+  border: 1px solid;
+  height: 14px;
+  display: inline-block;
+  &::before {
+    content: 'T';
+  }
+  .label &,
+  .tag & {
+    position: static;
+    margin: 0 $size-4 0 calc(-1 * $size-4);
+  }
+  .tag--info & {
+    color: inherit;
+  }
+}

package/styles/{_c8y-gauges.less → dashboard/_c8y-gauges.less}

@@ -1,4 +1,4 @@
-@image-directory: if(@use-relative-paths, '../img/', 'img/');
+@image-directory: if(@use-relative-paths, '../../img/', 'img/');
 
 .c8y-radial-gauge {
   width: 99%;

package/styles/dashboard/_c8y-gauges.scss

@@ -0,0 +1,62 @@
+@use "../../variables/index" as *;
+
+@use "../core/buttons/buttons";
+
+/**
+ * Gauges - Radial gauge widget styles
+ *
+ * Note: Uses $size-base for padding and $size-4 for border-radius.
+ *
+ * Intentionally hardcoded values:
+ * - Percentages (99%): Near-full dimensions
+ * - Aspect-ratio (1): Square ratio
+ * - Transition duration (0.25s): Animation timing
+ * - Outline width (1px): Standard border
+ * - Outline-offset (-2px): Inset positioning
+ */
+
+$image-directory: if($use-relative-paths, '../../img/', 'img/');
+
+.c8y-radial-gauge {
+  width: 99%;
+  height: 99%;
+  position: relative;
+  display: block;
+  &--square {
+    height: auto;
+    aspect-ratio: 1;
+  }
+  &__preset {
+    @include buttons.btn-clean();
+    padding: $size-base !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.25s linear;
+    outline: 0;
+    &:hover, &.selected {
+      outline: 1px solid $component-brand-primary;
+      outline-offset: -2px;
+      border-radius: $size-4;
+    }
+
+    &.preset-custom::before {
+      content: '';
+      display: block;
+      aspect-ratio: 1;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      min-width: 100%;
+      background-image: url('#{$image-directory}gauge-presets/custom.webp');
+      .c8y-dark-theme & {
+        background-image: url('#{$image-directory}gauge-presets/custom-dark.webp');
+      }
+    }
+
+    .c8y-radial-gauge--square {
+      pointer-events: none;
+    }
+  }
+}

package/styles/dashboard/_dashboard-widgets.scss

@@ -0,0 +1,47 @@
+@use "../../variables/index" as *;
+
+/**
+ * Dashboard Widgets - Widget-specific styles for dashboards
+ *
+ * Note: Uses $component-padding and $size-16 for spacing. Uses $text-muted for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Clamp font-size (14px, 75%, 54px): Responsive font constraints
+ * - Transition duration (0.25s): Animation timing
+ * - Bottom positioning (12px): Off-grid fine-tuning
+ * - Aspect-ratio (281/148): Specific thumbnail ratio
+ * - Min-height (240px): Chart container height
+ */
+
+.kpi-widget__container {
+  padding: 0 $component-padding $component-padding;
+  .panel-title-hidden & {
+    padding-top: $component-padding;
+  }
+  small {
+    color: $text-muted;
+    font-size: clamp(14px, 75%, 54px);
+  }
+  .dot-info {
+    transition: all 0.25s ease;
+  }
+}
+
+.pie-chart-warning {
+  position: absolute;
+  bottom: 12px;
+  margin-left: $size-16;
+}
+
+.widget-thumbnail {
+  width: 100%;
+  aspect-ratio: 281/148;
+  object-fit: cover;
+  object-position: top left;
+}
+
+.widget-preview {
+  .chart-container {
+    min-height: 240px;
+  }
+}

package/styles/dashboard/_info-gauge.scss

@@ -0,0 +1,107 @@
+@use "../../variables/index" as *;
+
+/**
+ * Info Gauge - SVG-based label-value-unit gauge widget
+ *
+ * Note: Uses $size-24 for padding and $size-10 for font-size. Uses color tokens.
+ *
+ * Intentionally hardcoded values:
+ * - SVG stroke-widths (24px, 22px, 7): Gauge appearance
+ * - SVG stroke-dasharray/-offset values (503, -503px, -125.75px): Gauge drawing calculations
+ * - Font-sizes (26px, 14px): Component-specific typography
+ * - Letter-spacing (-1px): Typography fine-tuning
+ * - Transition duration (0.25s): Animation timing
+ * - Min-height (280px): Chart container height
+ * - Container query breakpoint (150px): Responsive layout
+ * - Container query units (40cqw, 100cqh): Container-relative sizing
+ * - SVG em-based dasharray (0.03em, 5): Stroke pattern
+ */
+
+.label-value-unit-gauge {
+  display: block;
+  padding: 0 $size-24;
+  min-height: 100%;
+  .gauge-legend {
+    width: 100%;
+    h3 {
+      margin: 0;
+    }
+  }
+  circle.empty {
+    stroke: transparent;
+    stroke-width: 24px;
+    fill: none;
+  }
+  .center-value,
+  .center-label,
+  .center-unit,
+  .center-date-time {
+    text-anchor: middle;
+    fill: $component-color-default;
+    color: $component-color-default;
+  }
+  .center-value {
+    letter-spacing: -1px;
+    font-size: 26px;
+    font-weight: bold;
+  }
+  .center-label {
+    font-size: 14px;
+  }
+
+  .center-unit,
+  .center-date-time {
+    font-size: $size-10;
+    fill: $text-muted;
+    color: $text-muted;
+  }
+  .gauge-svg svg {
+    path.track,
+    path.track-value {
+      display: block;
+      stroke-linejoin: miter;
+      stroke-linecap: miter;
+      fill: none;
+      stroke-width: 22px;
+      stroke-dasharray: 503;
+      stroke-dashoffset: -503px;
+    }
+    path.track {
+      stroke-dashoffset: -125.75px;
+      stroke: $component-background-active;
+    }
+    path.track-value {
+      transition: stroke-dashoffset 0.25s ease;
+    }
+    path.track-scale {
+      stroke: $component-background-active;
+      stroke-width: 7;
+      fill: none;
+      stroke-dasharray: 0.03em, 5;
+    }
+  }
+  #mask {
+    fill: $component-background-default;
+  }
+}
+
+.chart-container {
+  min-height: 280px;
+}
+
+
+
+@container (min-width: 150px) {
+  .label-value-unit-gauge {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    .gauge-legend {
+      width: 40cqw;
+    }
+  }
+  .gauge-svg {
+    height: 100cqh;
+    width: 100%;
+  }
+}

package/styles/dashboard/_quick-links-widget.scss

@@ -0,0 +1,49 @@
+@use "../../variables/index" as *;
+
+/**
+ * Quick Links Widget - Link list widget for dashboards
+ *
+ * Note: Uses $component-padding and $size-20 for spacing. Uses drawer color tokens.
+ *
+ * Intentionally hardcoded values:
+ * - Vertical padding (6px): Off-grid fine-tuning for link items
+ * - Outline width (2px): Focus indicator
+ * - Outline-offset (-2px): Inset positioning
+ */
+
+.c8y-quick-links__link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: inherit;
+  text-align: left;
+  padding: 6px $component-padding;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+  &.sticky-top {
+    background-color: inherit;
+  }
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'],
+  .c8y-icon {
+    font-size: $size-20;
+  }
+
+  &:active {
+    background-color: $drawer-background-active;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    outline: 2px solid $drawer-border-selected;
+    outline-offset: -2px;
+    color: $drawer-color;
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'],
+    .c8y-icon {
+      color: $drawer-border-selected;
+    }
+  }
+}