@c8y/style 1024.13.0 → 1024.14.0

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

@@ -1,565 +0,0 @@
-@import '../mixins/_c8y-scrollbar.less';
-@import '../mixins/_icon-base.less';
-
-/**
- * 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;
-    min-width: 0;
-  }
-
-  .resize-handle {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    z-index: 12;
-    width: 30px;
-    height: 30px;
-    cursor: se-resize;
-  }
-
-  .resize-icon {
-    position: absolute;
-    .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-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%;
-  }
-}
-
-.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;
-    .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 {
-  .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) {
-  .fullscreen-dashboard-styles;
-}
-
-:-moz-full-screen:not(:root) {
-  .fullscreen-dashboard-styles;
-}
-
-:-ms-fullscreen:not(:root) {
-  .fullscreen-dashboard-styles;
-}
-
-:fullscreen:not(:root) {
-  .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;
-  flex-grow: 1;
-  min-height: 0;
-  grid-template-rows: repeat(1, 1fr);
-
-  .card-inner-scroll {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    > * {
-      flex: 1 1 0;
-      min-height: 0;
-    }
-  }
-  c8y-local-controls,
-  c8y-global-context-widget-wrapper {
-    flex-grow: 0 !important;
-    min-height: min-content !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;
-      &: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;
-  }
-}
-
-// data-grid--custom-column-header- styles
-.dashboard-preview-slot,
-.card-dashboard {
-  .table-data-grid-header > .h4 {
-    display: none;
-  }
-  .content-fullpage {
-    height: 100% !important;
-  }
-  c8y-asset-table-widget-view.hide-footer {
-    .table-data-grid-footer {
-      display: none;
-    }
-  }
-}
-
-
-.c8y-header-controls-group {
-  display: inline-flex;
-  align-items: stretch;
-  border: 1px solid @component-border-color;
-  border-radius: 16px;
-  transition: all 0.25s ease;
-  overflow: hidden;
-  min-width: 32px;
-  &:has(c8y-auto-refresh-control + c8y-date-time-context-picker + .input-group-btn) {
-    min-width: 132px;
-  }
-  &:has([data-cy="global-context-link--all"]:not(.active)) {
-    min-width: 74px;
-
-    &:has(c8y-date-time-context-picker) {
-      min-width:128px;
-    }
-    &:has(c8y-aggregation-picker + c8y-date-time-context-picker + .input-group-btn) {
-      min-width: 186px;
-    }
-    &:has(c8y-auto-refresh-control + c8y-date-time-context-picker + .input-group-btn) {
-      min-width: 180px;
-    }
-  }
-  &:has(c8y-date-time-context-picker:last-child) {
-    min-width:91px;
-  }
- .btn-icon-dot-set {
-    border: none !important;
-    border-radius: 16px !important;
-  }
-  c8y-context-controls{
-    min-width: 0;
-  }
-  c8y-date-time-context-picker{
-    min-width: 55px;
-  }
-  .btn-icon-dot-set {
-    &:first-child:not(:last-child) {
-    border-radius: 16px 0 0 16px !important;
-    }
-  }
-
-  .form-control{
-    background: transparent;
-    height: 30px;
-    &:not(:focus){
-      box-shadow: none;
-    }
-  }
-
-  .input-group {
-    c8y-aggregation-picker {
-      .form-control{
-        border-left:1px solid @component-border-color;
-      }
-    }
-  }
-  &:not(.c8y-header-controls-group--has-summary){
-    .input-group:first-child {
-      c8y-aggregation-picker .form-control{
-        border-left:0;
-        border-top-left-radius: 16px!important;
-        border-bottom-left-radius: 16px!important;
-      }
-    }
-  }
-  c8y-date-time-context-picker {
-    .form-control{
-      border-left:1px solid @component-border-color;
-    }
-    &:last-child {
-      .form-control{
-        border-top-right-radius: 16px!important;
-        border-bottom-right-radius: 16px!important;
-      }
-    }
-  }
-  .toggle-countdown{
-    border-top: 0;
-    border-bottom: 0;
-    min-height: 30px;
-    min-width: 36px;
-  }
-  &:not(.c8y-header-controls-group--has-summary){
-    c8y-auto-refresh-control{
-      &:first-child{
-        .toggle-countdown{
-          border-top-left-radius: 16px!important;
-          border-bottom-left-radius: 16px!important;
-        }
-      }
-    }
-  }
-  c8y-auto-refresh-control:last-child{
-    .toggle-countdown{
-      border-top-left-radius: 0!important;
-      border-bottom-left-radius: 0!important;
-      border-top-right-radius: 16px!important;
-      border-bottom-right-radius: 16px!important;
-      border-right: 0;
-    }
-  }
-  .input-group-btn{
-    max-height: 30px;
-    .btn:not(:focus){
-      border-color: transparent!important;
-      border-left-color: @component-border-color!important;
-    }
-    &:last-child{
-      .btn{
-        border-top-right-radius: 16px!important;
-        border-bottom-right-radius: 16px!important;
-      }
-    }
-  }
-
-}
-
-.c8y-expandable-controls__panel {
-  position: relative;
-  z-index: 5;
-  background: @component-background-default;
-  box-shadow: inset 0 -1px 0 0 @component-border-color;
-}

package/styles/dashboard/_dashboard-widgets.less

@@ -1,46 +0,0 @@
-
-/**
- * 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;
-  }
-}