From 5ece8cfec92b97101a0e4be8e961982980b0e6be Mon Sep 17 00:00:00 2001 From: jmbardallo Date: Fri, 31 Jul 2026 14:03:58 +0200 Subject: [PATCH] fix(inventory): unify badge colors and fix disk type badge missing in deploy and create image views --- .../create-image/create-image.component.ts | 8 +- .../deploy-image/deploy-image.component.ts | 4 +- .../partition-assistant.component.css | 2950 +++++++++-------- .../client-details.component.css | 15 +- .../disk-partition-selector.component.css | 15 +- .../disk-partition-selector.component.ts | 2 +- 6 files changed, 1502 insertions(+), 1492 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts index 05b4510..fffa10a 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts @@ -125,14 +125,10 @@ export class CreateClientImageComponent implements OnInit{ this.client = response; this.clientName = response.name; this.selectedRepository = response.repository; - - const validPartitions = response.partitions.filter((partition: any) => { - return partition.partitionNumber !== 0; - }); - this.dataSource.data = validPartitions; + this.dataSource.data = response.partitions; - const firstValidPartition = validPartitions.find((partition: any) => { + const firstValidPartition = response.partitions.find((partition: any) => { return partition.operativeSystem; }); diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts index f1c587c..fcb7223 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts @@ -273,9 +273,7 @@ export class DeployImageComponent implements OnInit { } if (fullClientData.partitions) { - this.filteredPartitions = fullClientData.partitions.filter((partition: any) => { - return partition.partitionNumber !== 0; - }); + this.filteredPartitions = fullClientData.partitions; this.p2pMode = fullClientData.organizationalUnit?.networkSettings?.p2pMode; this.p2pTime = fullClientData.organizationalUnit?.networkSettings?.p2pTime; this.mcastSpeed = fullClientData.organizationalUnit?.networkSettings?.mcastSpeed; diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css index ad7ded3..f1057f4 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css @@ -1,1468 +1,1482 @@ -.partition-assistant { - padding: 16px 20px; - margin: 0 20px 20px; - background: white !important; - border-radius: 0 0 16px 16px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - border: 1px solid #bbdefb; - border-top: none; -} - -.header-container { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 24px; - background: white; - border-radius: 12px; - margin-bottom: 16px; -} - -.header-container-title { - flex-grow: 1; - text-align: left; -} - -.header-container-title h2 { - margin: 0 0 8px 0; - color: #333; - font-weight: 600; -} - -.header-container-title h4 { - margin: 0; - font-size: 16px; - opacity: 0.9; - font-weight: 400; -} - -.destination-info { - margin-top: 12px; -} - -.destination-badge { - display: inline-flex; - align-items: center; - background: #e3f2fd; - color: #1565c0; - padding: 12px 16px; - border-radius: 12px; - border: 1px solid #bbdefb; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - transition: all 0.2s ease; -} - -.destination-icon { - font-size: 20px; - width: 20px; - height: 20px; - margin-right: 12px; - color: #1976d2; -} - -.destination-content { - display: flex; - flex-direction: column; - gap: 2px; -} - -.destination-label { - font-size: 11px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - color: #1976d2; - line-height: 1; -} - -.destination-value { - font-size: 14px; - font-weight: 600; - line-height: 1.2; - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: #0d47a1; -} - -.button-row { - display: flex; - gap: 12px; - align-items: center; -} - -.action-button { - color: white; - border: none; - padding: 12px 24px; - border-radius: 8px; - font-weight: 500; - transition: all 0.3s ease; - cursor: pointer; - margin-top: 10px; - margin-bottom: 10px; - margin-right: 16px; -} - -.action-button:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); -} - -.action-button:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.secondary-button { - background: #e3f2fd !important; - color: #1976d2 !important; -} - -.secondary-button:hover:not(:disabled) { - background: #bbdefb !important; -} - -.row-button { - display: flex; - align-items: center; - gap: 16px; -} - -.disk-and-partitions-container { - margin: 0 20px; -} - -.disk-toolbar { - display: flex; - align-items: center; - gap: 16px; - padding: 12px 20px; - background: white; - border-radius: 16px 16px 0 0; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - border: 1px solid #bbdefb; - flex-wrap: wrap; -} - -.disk-toolbar-select { - flex: 0 0 280px; - margin-bottom: -1.25em; -} - -.disk-toolbar-info { - display: flex; - align-items: center; - gap: 16px; - flex: 1; - min-width: 0; -} - -.disk-stat { - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; -} - -.disk-stat-label { - font-size: 10px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - color: #6c757d; -} - -.disk-stat-value { - font-size: 13px; - font-weight: 600; - color: #333; -} - -.disk-stat-value.used { - color: #dc3545; -} - -.disk-stat-value.free { - color: #28a745; -} - -.disk-usage-bar-inline { - display: flex; - align-items: center; - gap: 8px; - flex: 1; - min-width: 80px; - max-width: 200px; -} - -.disk-usage-bar-inline .usage-bar-container { - flex: 1; -} - -.usage-percent-label { - font-size: 12px; - font-weight: 600; - color: #666; - white-space: nowrap; -} - -.disk-toolbar-meta { - display: flex; - gap: 8px; - align-items: center; -} - -.meta-chip { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 4px 10px; - border-radius: 16px; - background: #f0f4ff; - color: #495057; - font-size: 12px; - font-weight: 500; - border: 1px solid #d0d9ff; -} - -.meta-chip mat-icon { - font-size: 14px; - width: 14px; - height: 14px; - color: #667eea; -} - -.add-partition-btn { - display: inline-flex; - align-items: center; - gap: 4px; - white-space: nowrap; - margin: 0 !important; - padding: 8px 16px !important; -} - -.add-partition-btn mat-icon { - font-size: 18px; - width: 18px; - height: 18px; -} - -/* Opciones del select */ -::ng-deep .disk-option { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - padding: 8px 0; -} - -.disk-info { - display: flex; - flex-direction: column; - gap: 4px; -} - -.disk-name { - font-weight: 600; - font-size: 16px; - color: #2c3e50; -} - -.disk-size { - font-size: 14px; - color: #6c757d; - font-weight: 500; -} - -.disk-details { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 4px; -} - -.partitions-count { - font-size: 12px; - color: #667eea; - font-weight: 500; - background: rgba(102, 126, 234, 0.1); - padding: 2px 8px; - border-radius: 12px; -} - -.usage-percent { - font-size: 12px; - color: #6c757d; - font-weight: 500; -} - -.selection-info { - display: flex; - align-items: center; - padding: 16px 20px; - background: #e8f5e8; - border: 1px solid #c8e6c9; - border-radius: 12px; - margin-top: 0; - flex-shrink: 0; - min-width: 250px; -} - -.info-icon { - font-size: 20px; - width: 20px; - height: 20px; - margin-right: 12px; - color: #388e3c; -} - -.info-text { - display: flex; - flex-direction: column; - gap: 2px; -} - -.info-title { - font-size: 14px; - font-weight: 600; - color: #2e7d32; -} - -.info-subtitle { - font-size: 12px; - color: #388e3c; -} - -.no-disks-message { - display: flex; - align-items: center; - padding: 16px 20px; - background: #fff3e0; - border: 1px solid #ffcc02; - border-radius: 12px; - margin-top: 16px; -} - -.warning-icon { - font-size: 20px; - width: 20px; - height: 20px; - margin-right: 12px; - color: #f57c00; -} - -.message-text { - display: flex; - flex-direction: column; - gap: 2px; -} - -.message-title { - font-size: 14px; - font-weight: 600; - color: #e65100; -} - -.message-subtitle { - font-size: 12px; - color: #f57c00; -} - -.info-badge { - display: inline-flex; - align-items: center; - background: #e8f5e8; - color: #2e7d32; - padding: 12px 16px; - border-radius: 12px; - border: 1px solid #c8e6c9; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - transition: all 0.2s ease; - margin: 0 8px; -} - -.info-badge:hover { - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} - -.info-content { - display: flex; - flex-direction: column; - gap: 2px; -} - -.info-label { - font-size: 11px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - color: #388e3c; - line-height: 1; -} - -.info-value { - font-size: 14px; - font-weight: 600; - line-height: 1.2; - max-width: 150px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: #1b5e20; -} - -.info-badge:first-of-type { - background: #e3f2fd; - border-color: #bbdefb; -} - -.info-badge:first-of-type .info-icon { - color: #1976d2; -} - -.info-badge:first-of-type .info-label { - color: #1976d2; -} - -.info-badge:first-of-type .info-value { - color: #0d47a1; -} - -.info-badge:last-of-type { - background: #fff3e0; - border-color: #ffcc02; -} - -.info-badge:last-of-type .info-icon { - color: #f57c00; -} - -.info-badge:last-of-type .info-label { - color: #f57c00; -} - -.info-badge:last-of-type .info-value { - color: #e65100; -} - -.select-container { - margin-top: 12px; - align-items: center; - width: 100%; - box-sizing: border-box; - padding: 0 20px 12px; -} - -/* Expansion panel */ -::ng-deep .mat-expansion-panel { - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; - border-radius: 12px !important; - margin-bottom: 20px; - background: #f7fbff !important; - border: 1px solid #bbdefb !important; -} - -::ng-deep .mat-expansion-panel-header { - padding: 20px 24px !important; - border-radius: 12px !important; -} - -::ng-deep .mat-expansion-panel-header-title { - font-weight: 600 !important; - color: #2c3e50 !important; -} - -::ng-deep .mat-expansion-panel-header-description { - color: #6c757d !important; -} - -.mat-expansion-panel-header-description { - justify-content: space-between; - align-items: center; -} - -.clients-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); - gap: 8px; -} - -.client-item { - position: relative; -} - -.client-card { - background: #ffffff; - border-radius: 6px; - overflow: hidden; - position: relative; - padding: 8px; - text-align: center; - cursor: pointer; - transition: background-color 0.3s, transform 0.2s; -} - -.client-card:hover { - background-color: #f0f0f0; - transform: scale(1.02); -} - -.selected-client { - background: linear-gradient(135deg, #8fa1f0 0%, #9b7bc8 100%); - color: white; - border-color: #667eea; -} - -.selected-client .client-name, -.selected-client .client-ip { - color: white; -} - -.client-image { - width: 40px; - height: 40px; - margin: 0 auto 8px; -} - -.client-details { - margin-top: 4px; -} - -.client-name { - font-size: 0.9em; - font-weight: 500; - color: #333; - margin-bottom: 5px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 150px; - display: inline-block; -} - -.client-ip { - display: block; - font-size: 0.9em; - color: #666; -} - -/* Tooltip personalizado */ -::ng-deep .custom-tooltip { - white-space: pre-line !important; - max-width: 200px; - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 8px; - border-radius: 4px; -} - -.row { - display: flex; - flex-wrap: wrap; - margin-bottom: 20px; -} - -.form-container { - flex: 1; - min-width: 0; - padding-right: 20px; - box-sizing: border-box; - background: white; - border-radius: 16px; - border: none; -} - - -.usage-bar-container { - width: 100%; - height: 12px; - background: #e9ecef; - border-radius: 6px; - overflow: hidden; - margin-bottom: 8px; -} - -.usage-bar-fill { - height: 100%; - background: linear-gradient(90deg, #28a745, #20c997); - border-radius: 6px; - transition: width 0.3s ease; -} - - -.partition-table { - width: 100%; - border-collapse: collapse; - table-layout: fixed; -} - -.partition-table th { - background: white !important; - color: #495057; - padding: 16px 12px; - font-weight: 600; - text-align: left; - border-bottom: 2px solid #e9ecef; - font-size: 14px; -} - -.partition-table th:nth-child(1), .partition-table td:nth-child(1) { width: 5%; } -.partition-table th:nth-child(2), .partition-table td:nth-child(2) { width: 20%; } -.partition-table th:nth-child(3), .partition-table td:nth-child(3) { width: 20%; } -.partition-table th:nth-child(4), .partition-table td:nth-child(4) { width: 15%; } -.partition-table th:nth-child(5), .partition-table td:nth-child(5) { width: 15%; } -.partition-table th:nth-child(6), .partition-table td:nth-child(6) { width: 5%; } -.partition-table th:nth-child(7), .partition-table td:nth-child(7) { width: 5%; } - -.partition-table td { - padding: 6px 8px; - border-bottom: 1px solid #f1f3f4; - vertical-align: middle; -} - -.partition-table select, -.partition-table input[type="number"], -.partition-table input[type="checkbox"] { - padding: 5px; - width: 100%; -} - -.remove-btn { - background-color: #dc3545; - color: white !important; - border-radius: 4px !important; - border: none !important; - cursor: pointer !important; - border-radius: 4px !important; - padding: 7px 10px !important; -} - -.remove-btn:hover { - background-color: #c82333; -} - -/* EXTENDED partition row */ -.extended-row { - background-color: #fff8e1 !important; - border-left: 4px solid #ffa000; -} - -.extended-row td { - border-bottom: 1px solid #ffe082; -} - -/* Logical partitions (inside EXTENDED) */ -.logical-row { - background-color: #fffde7 !important; - border-left: 4px solid #ffd54f; -} - -.logical-row td { - border-bottom: 1px solid #fff9c4; -} - -.logical-indent { - color: #ffa000; - font-size: 14px; - margin-right: 4px; - font-weight: bold; -} - -/* Disabled size inputs */ -.partition-table input[type="number"]:disabled { - background-color: #f5f5f5; - color: #9e9e9e; - cursor: not-allowed; - border-color: #e0e0e0; -} - -.chart-container { - flex: 0 0 280px; - max-width: 280px; - align-self: flex-start; -} - -.chart-header { - text-align: center; - margin-bottom: 20px; -} - -.chart-header h3 { - margin: 0 0 8px 0; - color: #2c3e50; - font-weight: 600; - font-size: 18px; -} - -.chart-header p { - margin: 0; - color: #6c757d; - font-size: 14px; -} - -.chart-container ngx-charts-pie-chart { - width: 100% !important; - min-width: 0; -} - -/* Forzar la leyenda debajo del gráfico */ -::ng-deep .chart-container ngx-charts-pie-chart .chart-legend { - position: relative !important; - top: auto !important; - left: auto !important; - right: auto !important; - bottom: auto !important; - display: block !important; - margin-top: 20px !important; -} - -::ng-deep .chart-container ngx-charts-pie-chart .chart-legend .legend-labels { - display: flex !important; - flex-direction: column !important; - align-items: center !important; - justify-content: center !important; -} - -::ng-deep .chart-container ngx-charts-pie-chart .chart-legend .legend-label { - display: flex !important; - align-items: center !important; - margin: 5px 0 !important; -} - -.partition-layout { - display: flex; - flex-direction: column; - gap: 24px; - margin-top: 20px; -} - -.partition-progress-container { - background: white; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - border: 1px solid #e0e0e0; - padding: 24px; - margin-bottom: 20px; -} - -.progress-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - flex-wrap: wrap; - gap: 16px; -} - -.progress-header h3 { - margin: 0; - color: #333; - font-size: 18px; - font-weight: 600; -} - -.disk-info-summary { - display: flex; - gap: 16px; - flex-wrap: wrap; -} - -.disk-info-summary span { - padding: 6px 12px; - border-radius: 6px; - font-size: 14px; - font-weight: 500; -} - -.total-size { - background: #e3f2fd; - color: #1976d2; -} - -.used-size { - background: #fff3e0; - color: #f57c00; -} - -.free-size { - background: #e8f5e8; - color: #388e3c; -} - -.partition-progress-bar { - margin-bottom: 20px; -} - -.progress-segments { - display: flex; - height: 60px; - border-radius: 8px; - overflow: hidden; - border: 2px solid #e0e0e0; - background: #f5f5f5; -} - -.progress-segment { - position: relative; - display: flex; - align-items: center; - justify-content: center; - min-width: 20px; - transition: all 0.3s ease; - cursor: pointer; - border-right: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); -} - -.progress-segment:hover { - filter: brightness(1.2); - transform: scale(1.02); - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); - z-index: 2; -} - -.progress-segment:last-child { - border-right: none; -} - -.progress-segment.removed { - opacity: 0.3; - background: #ccc !important; -} - -.progress-segment.free-space { - background: linear-gradient(45deg, #e8f5e8, #c8e6c9); - border-left: 1px solid #e0e0e0; -} - -.segment-label { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - color: white; - font-weight: 600; - font-size: 12px; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); - width: 100%; - height: 100%; -} - -.partition-number { - font-size: 14px; - font-weight: bold; -} - -.partition-percentage { - font-size: 10px; - opacity: 0.9; -} - -.free-label { - font-size: 12px; - font-weight: bold; -} - -.free-percentage { - font-size: 10px; - opacity: 0.9; -} - -.partition-legend { - display: flex; - flex-wrap: wrap; - gap: 12px; - padding: 20px; - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - border-radius: 12px; - border: 1px solid #e9ecef; - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); -} - -.legend-item { - display: flex; - align-items: center; - gap: 10px; - padding: 10px 16px; - background: white; - border-radius: 8px; - border: 1px solid #e0e0e0; - font-size: 14px; - transition: all 0.3s ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.legend-item:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); - transform: translateY(-1px); -} - -.legend-item.removed { - opacity: 0.5; - text-decoration: line-through; -} - -.legend-color { - width: 18px; - height: 18px; - border-radius: 4px; - border: 2px solid rgba(255, 255, 255, 0.8); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; -} - -.legend-item:hover .legend-color { - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.legend-color.free-color { - background: linear-gradient(45deg, #e8f5e8, #c8e6c9); -} - -.legend-text { - font-weight: 600; - color: #333; - font-size: 14px; -} - -.legend-size { - font-size: 12px; - color: #666; - font-weight: 500; - background: #f8f9fa; - padding: 2px 6px; - border-radius: 4px; - border: 1px solid #e9ecef; -} - -.table-container { - background: white; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - border: 1px solid #e0e0e0; - overflow: hidden; -} - -.table-header { - padding: 20px 24px 16px 24px; - border-bottom: 1px solid #e0e0e0; - background: #f8f9fa; -} - -.table-header h3 { - margin: 0; - color: #333; - font-size: 18px; - font-weight: 600; -} - -.partition-mat-table { - width: 100%; - background: white; -} - -.partition-mat-table .mat-header-cell { - background: #f8f9fa; - color: #495057; - font-weight: 600; - font-size: 14px; - padding: 16px 12px; - border-bottom: 2px solid #e9ecef; -} - -.partition-mat-table .mat-cell { - padding: 12px; - border-bottom: 1px solid #f1f3f4; - vertical-align: middle; -} - -.partition-mat-table .mat-row:hover { - background: #f8f9fa; -} - -.compact-form-field { - width: 100%; - margin: 0; -} - -.compact-form-field .mat-form-field-wrapper { - padding-bottom: 0; - margin: 0; -} - -.compact-form-field .mat-form-field-infix { - padding: 2px 0; - min-height: 20px; - font-size: 13px; -} - -.compact-form-field .mat-form-field-outline { - border-radius: 4px; -} - -.compact-form-field .mat-form-field-outline-start, -.compact-form-field .mat-form-field-outline-end { - border-width: 1px; -} - -.compact-form-field .mat-form-field-outline-gap { - border-width: 1px; -} - -.compact-form-field input, -.compact-form-field .mat-select { - line-height: 1.2; -} - -.compact-form-field .mat-select-value { - color: #333; -} - -.partition-mat-table .mat-cell { - padding: 6px 6px; - vertical-align: middle; -} - -.partition-mat-table .mat-header-cell { - padding: 10px 6px; -} - -.compact-form-field .mat-form-field-infix { - padding: 2px 0; - min-height: 20px; -} - -.compact-form-field .mat-select-trigger { - height: 20px; -} - -.compact-form-field input[type="number"] { - padding: 2px 6px; -} - -.compact-form-field .mat-form-field-wrapper { - padding-bottom: 0; - margin: 0; - line-height: 1.2; -} - -.compact-form-field .mat-form-field-outline { - top: 0; - bottom: 0; -} - -.compact-form-field .mat-form-field-outline-start, -.compact-form-field .mat-form-field-outline-end, -.compact-form-field .mat-form-field-outline-gap { - border-width: 1px; -} - -.partition-mat-table .mat-checkbox { - margin: 0; -} - -.partition-mat-table .mat-icon-button { - width: 32px; - height: 32px; - line-height: 32px; -} - -.partition-mat-table .mat-icon { - font-size: 18px; - width: 18px; - height: 18px; -} - -/* ===== RESPONSIVE ===== */ -@media (max-width: 768px) { - .partition-layout { - gap: 16px; - } - - .progress-header { - flex-direction: column; - align-items: flex-start; - } - - .disk-info-summary { - width: 100%; - justify-content: space-between; - } - - .partition-legend { - flex-direction: column; - gap: 8px; - } - - .legend-item { - justify-content: space-between; - } - - .partition-mat-table { - font-size: 12px; - } - - .compact-form-field { - font-size: 12px; - } -} - -@media (max-width: 480px) { - .progress-segments { - height: 40px; - } - - .segment-label { - font-size: 10px; - } - - .partition-number { - font-size: 12px; - } - - .partition-percentage { - font-size: 8px; - } - - .partition-mat-table .mat-header-cell, - .partition-mat-table .mat-cell { - padding: 8px 6px; - } -} - -.progress-segment { - animation: slideIn 0.3s ease-out; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: scaleX(0); - } - to { - opacity: 1; - transform: scaleX(1); - } -} - -.legend-item { - animation: fadeIn 0.3s ease-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - - -.warning { - color: #ff9800 !important; -} - -.usage-bar-fill.warning { - background: linear-gradient(90deg, #ff9800, #ffb74d) !important; -} - -.free-icon.warning { - color: #ff9800 !important; -} - -.danger { - color: #f44336 !important; - font-weight: bold !important; -} - -.usage-bar-fill.danger { - background: linear-gradient(90deg, #f44336, #ef5350) !important; - animation: pulse 2s infinite; -} - -.free-icon.danger { - color: #f44336 !important; - animation: pulse 2s infinite; -} - -@keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} - -.instructions-box { - margin-top: 15px; - padding: 15px; - border-radius: 6px; -} - -.instructions-box .instructions-card { - padding: 24px 32px; - background: white; - border-radius: 12px; - border: 1px solid #bbdefb; -} - -.instructions-box .instructions-card .mat-card-title { - margin-bottom: 8px; -} - -.instructions-card pre { - font-family: monospace; - white-space: pre; - background: #f8f9fa; - padding: 16px; - border-radius: 8px; - border: 1px solid #e9ecef; - overflow-x: auto; - font-size: 14px; - line-height: 1.5; -} - -/* Script textarea for generated instructions */ -.instructions-card .script-textarea { - width: 100%; - min-height: 260px; - font-family: monospace; - font-size: 13px; - line-height: 1.4; - white-space: pre; - resize: vertical; - padding: 12px; - box-sizing: border-box; -} - -.instructions-top { - margin: 12px 0 20px 0; - padding: 0 20px; -} - -@media (max-width: 768px) { - .header-container { - flex-direction: column; - gap: 16px; - text-align: center; - } - - .button-row { - flex-direction: column; - gap: 8px; - } - - .destination-badge { - flex-direction: column; - text-align: center; - } - - .destination-icon { - margin-right: 0; - margin-bottom: 8px; - } - - .destination-value { - max-width: none; - } - - .destination-label { - text-align: center; - } - - .form-section { - padding: 20px; - } - - .disk-toolbar { - flex-direction: column; - align-items: stretch; - } - - .disk-toolbar-select { - flex: none; - } - - .disk-toolbar-info { - flex-wrap: wrap; - } - - .row { - flex-direction: column; - } - - .chart-container { - flex: none; - width: 100%; - margin-top: 20px; - } - - .partition-table { - font-size: 12px; - } - - .partition-table th, - .partition-table td { - padding: 8px 4px; - } -} - -.partition-validation-indicator { - margin: 8px 0; - border-radius: 12px; - transition: all 0.3s ease; -} - -.validation-status { - display: flex; - align-items: center; - gap: 12px; - font-size: 14px; - font-weight: 500; - padding: 12px 16px; - border-radius: 8px; - border: 2px solid; -} - -.validation-status.loading { - color: #1976d2; - background: #e3f2fd; - border-color: #bbdefb; -} - -.validation-status.success { - color: #2e7d32; - background: #e8f5e8; - border-color: #4caf50; -} - -.validation-status.error { - color: #d32f2f; - background: #ffebee; - border-color: #f44336; -} - -.validation-icon { - font-size: 20px; - width: 20px; - height: 20px; -} - -.validation-icon.loading { - color: #1976d2; - animation: spin 1s linear infinite; -} - -.validation-icon.success { - color: #2e7d32; -} - -.validation-icon.error { - color: #d32f2f; -} - -.validation-message { - flex: 1; - margin-left: 8px; -} - -@keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.section-hint { - display: flex; - align-items: center; - gap: 8px; - padding: 10px 12px; - margin: 8px 0 12px 0; - background: #f7faff; - border: 1px solid #e2e8ff; - border-radius: 8px; - color: #334155; - font-size: 13px; -} -.section-hint mat-icon { - color: #667eea; - font-size: 18px; - width: 18px; - height: 18px; -} - -.client-card { - background: white; - border-radius: 10px 10px 0 0; - border: 2px solid #e9ecef; - border-bottom: none; - padding: 12px; - text-align: center; - cursor: pointer; - transition: all 0.3s ease; - width: 100%; - box-sizing: border-box; -} - -.selected-client { - background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%); - color: #1f2937; - border-color: #e9ecef; - border-bottom: none; -} -.selected-client .client-name, -.selected-client .client-ip { - color: #1f2937; -} - -.model-selector { - background: #ffffff; - border: 2px solid #e9ecef; - border-radius: 0 0 10px 10px; - border-top: none; - display: flex; - align-items: center; - width: 100%; - box-sizing: border-box; - cursor: pointer; - transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; -} -.model-selector:hover { - background: #f3f6ff; - border-color: #b3c2ff; - box-shadow: 0 1px 8px rgba(102, 126, 234, 0.2); -} - -.selected-client + .model-selector { - border-left: 2px solid #e9ecef; - border-right: 2px solid #e9ecef; - border-bottom: 2px solid #e9ecef; - border-top: none; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; -} - -/* Radios y labels del radio button */ -::ng-deep .model-selector .mat-radio-label, -::ng-deep .model-selector .mat-radio-label-content { color: #2c3e50 !important; } -::ng-deep .model-selector .mat-radio-outer-circle { border-color: #667eea !important; } -::ng-deep .model-selector .mat-radio-inner-circle { background-color: #667eea !important; } - - - - - - -.badge-disk-type { display: inline-block; padding: 2px 6px; font-size: 11px; font-weight: bold; color: #fff; background-color: #607d8b; border-radius: 4px; margin-left: 8px; vertical-align: middle; } - \ No newline at end of file +.partition-assistant { + padding: 16px 20px; + margin: 0 20px 20px; + background: white !important; + border-radius: 0 0 16px 16px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + border: 1px solid #bbdefb; + border-top: none; +} + +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + background: white; + border-radius: 12px; + margin-bottom: 16px; +} + +.header-container-title { + flex-grow: 1; + text-align: left; +} + +.header-container-title h2 { + margin: 0 0 8px 0; + color: #333; + font-weight: 600; +} + +.header-container-title h4 { + margin: 0; + font-size: 16px; + opacity: 0.9; + font-weight: 400; +} + +.destination-info { + margin-top: 12px; +} + +.destination-badge { + display: inline-flex; + align-items: center; + background: #e3f2fd; + color: #1565c0; + padding: 12px 16px; + border-radius: 12px; + border: 1px solid #bbdefb; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + transition: all 0.2s ease; +} + +.destination-icon { + font-size: 20px; + width: 20px; + height: 20px; + margin-right: 12px; + color: #1976d2; +} + +.destination-content { + display: flex; + flex-direction: column; + gap: 2px; +} + +.destination-label { + font-size: 11px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + color: #1976d2; + line-height: 1; +} + +.destination-value { + font-size: 14px; + font-weight: 600; + line-height: 1.2; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #0d47a1; +} + +.button-row { + display: flex; + gap: 12px; + align-items: center; +} + +.action-button { + color: white; + border: none; + padding: 12px 24px; + border-radius: 8px; + font-weight: 500; + transition: all 0.3s ease; + cursor: pointer; + margin-top: 10px; + margin-bottom: 10px; + margin-right: 16px; +} + +.action-button:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.action-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.secondary-button { + background: #e3f2fd !important; + color: #1976d2 !important; +} + +.secondary-button:hover:not(:disabled) { + background: #bbdefb !important; +} + +.row-button { + display: flex; + align-items: center; + gap: 16px; +} + +.disk-and-partitions-container { + margin: 0 20px; +} + +.disk-toolbar { + display: flex; + align-items: center; + gap: 16px; + padding: 12px 20px; + background: white; + border-radius: 16px 16px 0 0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + border: 1px solid #bbdefb; + flex-wrap: wrap; +} + +.disk-toolbar-select { + flex: 0 0 280px; + margin-bottom: -1.25em; +} + +.disk-toolbar-info { + display: flex; + align-items: center; + gap: 16px; + flex: 1; + min-width: 0; +} + +.disk-stat { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; +} + +.disk-stat-label { + font-size: 10px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + color: #6c757d; +} + +.disk-stat-value { + font-size: 13px; + font-weight: 600; + color: #333; +} + +.disk-stat-value.used { + color: #dc3545; +} + +.disk-stat-value.free { + color: #28a745; +} + +.disk-usage-bar-inline { + display: flex; + align-items: center; + gap: 8px; + flex: 1; + min-width: 80px; + max-width: 200px; +} + +.disk-usage-bar-inline .usage-bar-container { + flex: 1; +} + +.usage-percent-label { + font-size: 12px; + font-weight: 600; + color: #666; + white-space: nowrap; +} + +.disk-toolbar-meta { + display: flex; + gap: 8px; + align-items: center; +} + +.meta-chip { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 10px; + border-radius: 16px; + background: #f0f4ff; + color: #495057; + font-size: 12px; + font-weight: 500; + border: 1px solid #d0d9ff; +} + +.meta-chip mat-icon { + font-size: 14px; + width: 14px; + height: 14px; + color: #667eea; +} + +.add-partition-btn { + display: inline-flex; + align-items: center; + gap: 4px; + white-space: nowrap; + margin: 0 !important; + padding: 8px 16px !important; +} + +.add-partition-btn mat-icon { + font-size: 18px; + width: 18px; + height: 18px; +} + +/* Opciones del select */ +::ng-deep .disk-option { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 8px 0; +} + +.disk-info { + display: flex; + flex-direction: column; + gap: 4px; +} + +.disk-name { + font-weight: 600; + font-size: 16px; + color: #2c3e50; +} + +.disk-size { + font-size: 14px; + color: #6c757d; + font-weight: 500; +} + +.disk-details { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 4px; +} + +.partitions-count { + font-size: 12px; + color: #667eea; + font-weight: 500; + background: rgba(102, 126, 234, 0.1); + padding: 2px 8px; + border-radius: 12px; +} + +.usage-percent { + font-size: 12px; + color: #6c757d; + font-weight: 500; +} + +.selection-info { + display: flex; + align-items: center; + padding: 16px 20px; + background: #e8f5e8; + border: 1px solid #c8e6c9; + border-radius: 12px; + margin-top: 0; + flex-shrink: 0; + min-width: 250px; +} + +.info-icon { + font-size: 20px; + width: 20px; + height: 20px; + margin-right: 12px; + color: #388e3c; +} + +.info-text { + display: flex; + flex-direction: column; + gap: 2px; +} + +.info-title { + font-size: 14px; + font-weight: 600; + color: #2e7d32; +} + +.info-subtitle { + font-size: 12px; + color: #388e3c; +} + +.no-disks-message { + display: flex; + align-items: center; + padding: 16px 20px; + background: #fff3e0; + border: 1px solid #ffcc02; + border-radius: 12px; + margin-top: 16px; +} + +.warning-icon { + font-size: 20px; + width: 20px; + height: 20px; + margin-right: 12px; + color: #f57c00; +} + +.message-text { + display: flex; + flex-direction: column; + gap: 2px; +} + +.message-title { + font-size: 14px; + font-weight: 600; + color: #e65100; +} + +.message-subtitle { + font-size: 12px; + color: #f57c00; +} + +.info-badge { + display: inline-flex; + align-items: center; + background: #e8f5e8; + color: #2e7d32; + padding: 12px 16px; + border-radius: 12px; + border: 1px solid #c8e6c9; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + transition: all 0.2s ease; + margin: 0 8px; +} + +.info-badge:hover { + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.info-content { + display: flex; + flex-direction: column; + gap: 2px; +} + +.info-label { + font-size: 11px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; + color: #388e3c; + line-height: 1; +} + +.info-value { + font-size: 14px; + font-weight: 600; + line-height: 1.2; + max-width: 150px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #1b5e20; +} + +.info-badge:first-of-type { + background: #e3f2fd; + border-color: #bbdefb; +} + +.info-badge:first-of-type .info-icon { + color: #1976d2; +} + +.info-badge:first-of-type .info-label { + color: #1976d2; +} + +.info-badge:first-of-type .info-value { + color: #0d47a1; +} + +.info-badge:last-of-type { + background: #fff3e0; + border-color: #ffcc02; +} + +.info-badge:last-of-type .info-icon { + color: #f57c00; +} + +.info-badge:last-of-type .info-label { + color: #f57c00; +} + +.info-badge:last-of-type .info-value { + color: #e65100; +} + +.select-container { + margin-top: 12px; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 0 20px 12px; +} + +/* Expansion panel */ +::ng-deep .mat-expansion-panel { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; + border-radius: 12px !important; + margin-bottom: 20px; + background: #f7fbff !important; + border: 1px solid #bbdefb !important; +} + +::ng-deep .mat-expansion-panel-header { + padding: 20px 24px !important; + border-radius: 12px !important; +} + +::ng-deep .mat-expansion-panel-header-title { + font-weight: 600 !important; + color: #2c3e50 !important; +} + +::ng-deep .mat-expansion-panel-header-description { + color: #6c757d !important; +} + +.mat-expansion-panel-header-description { + justify-content: space-between; + align-items: center; +} + +.clients-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 8px; +} + +.client-item { + position: relative; +} + +.client-card { + background: #ffffff; + border-radius: 6px; + overflow: hidden; + position: relative; + padding: 8px; + text-align: center; + cursor: pointer; + transition: background-color 0.3s, transform 0.2s; +} + +.client-card:hover { + background-color: #f0f0f0; + transform: scale(1.02); +} + +.selected-client { + background: linear-gradient(135deg, #8fa1f0 0%, #9b7bc8 100%); + color: white; + border-color: #667eea; +} + +.selected-client .client-name, +.selected-client .client-ip { + color: white; +} + +.client-image { + width: 40px; + height: 40px; + margin: 0 auto 8px; +} + +.client-details { + margin-top: 4px; +} + +.client-name { + font-size: 0.9em; + font-weight: 500; + color: #333; + margin-bottom: 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 150px; + display: inline-block; +} + +.client-ip { + display: block; + font-size: 0.9em; + color: #666; +} + +/* Tooltip personalizado */ +::ng-deep .custom-tooltip { + white-space: pre-line !important; + max-width: 200px; + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 8px; + border-radius: 4px; +} + +.row { + display: flex; + flex-wrap: wrap; + margin-bottom: 20px; +} + +.form-container { + flex: 1; + min-width: 0; + padding-right: 20px; + box-sizing: border-box; + background: white; + border-radius: 16px; + border: none; +} + + +.usage-bar-container { + width: 100%; + height: 12px; + background: #e9ecef; + border-radius: 6px; + overflow: hidden; + margin-bottom: 8px; +} + +.usage-bar-fill { + height: 100%; + background: linear-gradient(90deg, #28a745, #20c997); + border-radius: 6px; + transition: width 0.3s ease; +} + + +.partition-table { + width: 100%; + border-collapse: collapse; + table-layout: fixed; +} + +.partition-table th { + background: white !important; + color: #495057; + padding: 16px 12px; + font-weight: 600; + text-align: left; + border-bottom: 2px solid #e9ecef; + font-size: 14px; +} + +.partition-table th:nth-child(1), .partition-table td:nth-child(1) { width: 5%; } +.partition-table th:nth-child(2), .partition-table td:nth-child(2) { width: 20%; } +.partition-table th:nth-child(3), .partition-table td:nth-child(3) { width: 20%; } +.partition-table th:nth-child(4), .partition-table td:nth-child(4) { width: 15%; } +.partition-table th:nth-child(5), .partition-table td:nth-child(5) { width: 15%; } +.partition-table th:nth-child(6), .partition-table td:nth-child(6) { width: 5%; } +.partition-table th:nth-child(7), .partition-table td:nth-child(7) { width: 5%; } + +.partition-table td { + padding: 6px 8px; + border-bottom: 1px solid #f1f3f4; + vertical-align: middle; +} + +.partition-table select, +.partition-table input[type="number"], +.partition-table input[type="checkbox"] { + padding: 5px; + width: 100%; +} + +.remove-btn { + background-color: #dc3545; + color: white !important; + border-radius: 4px !important; + border: none !important; + cursor: pointer !important; + border-radius: 4px !important; + padding: 7px 10px !important; +} + +.remove-btn:hover { + background-color: #c82333; +} + +/* EXTENDED partition row */ +.extended-row { + background-color: #fff8e1 !important; + border-left: 4px solid #ffa000; +} + +.extended-row td { + border-bottom: 1px solid #ffe082; +} + +/* Logical partitions (inside EXTENDED) */ +.logical-row { + background-color: #fffde7 !important; + border-left: 4px solid #ffd54f; +} + +.logical-row td { + border-bottom: 1px solid #fff9c4; +} + +.logical-indent { + color: #ffa000; + font-size: 14px; + margin-right: 4px; + font-weight: bold; +} + +/* Disabled size inputs */ +.partition-table input[type="number"]:disabled { + background-color: #f5f5f5; + color: #9e9e9e; + cursor: not-allowed; + border-color: #e0e0e0; +} + +.chart-container { + flex: 0 0 280px; + max-width: 280px; + align-self: flex-start; +} + +.chart-header { + text-align: center; + margin-bottom: 20px; +} + +.chart-header h3 { + margin: 0 0 8px 0; + color: #2c3e50; + font-weight: 600; + font-size: 18px; +} + +.chart-header p { + margin: 0; + color: #6c757d; + font-size: 14px; +} + +.chart-container ngx-charts-pie-chart { + width: 100% !important; + min-width: 0; +} + +/* Forzar la leyenda debajo del gráfico */ +::ng-deep .chart-container ngx-charts-pie-chart .chart-legend { + position: relative !important; + top: auto !important; + left: auto !important; + right: auto !important; + bottom: auto !important; + display: block !important; + margin-top: 20px !important; +} + +::ng-deep .chart-container ngx-charts-pie-chart .chart-legend .legend-labels { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; +} + +::ng-deep .chart-container ngx-charts-pie-chart .chart-legend .legend-label { + display: flex !important; + align-items: center !important; + margin: 5px 0 !important; +} + +.partition-layout { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 20px; +} + +.partition-progress-container { + background: white; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #e0e0e0; + padding: 24px; + margin-bottom: 20px; +} + +.progress-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + flex-wrap: wrap; + gap: 16px; +} + +.progress-header h3 { + margin: 0; + color: #333; + font-size: 18px; + font-weight: 600; +} + +.disk-info-summary { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +.disk-info-summary span { + padding: 6px 12px; + border-radius: 6px; + font-size: 14px; + font-weight: 500; +} + +.total-size { + background: #e3f2fd; + color: #1976d2; +} + +.used-size { + background: #fff3e0; + color: #f57c00; +} + +.free-size { + background: #e8f5e8; + color: #388e3c; +} + +.partition-progress-bar { + margin-bottom: 20px; +} + +.progress-segments { + display: flex; + height: 60px; + border-radius: 8px; + overflow: hidden; + border: 2px solid #e0e0e0; + background: #f5f5f5; +} + +.progress-segment { + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-width: 20px; + transition: all 0.3s ease; + cursor: pointer; + border-right: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +.progress-segment:hover { + filter: brightness(1.2); + transform: scale(1.02); + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); + z-index: 2; +} + +.progress-segment:last-child { + border-right: none; +} + +.progress-segment.removed { + opacity: 0.3; + background: #ccc !important; +} + +.progress-segment.free-space { + background: linear-gradient(45deg, #e8f5e8, #c8e6c9); + border-left: 1px solid #e0e0e0; +} + +.segment-label { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + color: white; + font-weight: 600; + font-size: 12px; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; +} + +.partition-number { + font-size: 14px; + font-weight: bold; +} + +.partition-percentage { + font-size: 10px; + opacity: 0.9; +} + +.free-label { + font-size: 12px; + font-weight: bold; +} + +.free-percentage { + font-size: 10px; + opacity: 0.9; +} + +.partition-legend { + display: flex; + flex-wrap: wrap; + gap: 12px; + padding: 20px; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + border-radius: 12px; + border: 1px solid #e9ecef; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.legend-item { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 16px; + background: white; + border-radius: 8px; + border: 1px solid #e0e0e0; + font-size: 14px; + transition: all 0.3s ease; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.legend-item:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transform: translateY(-1px); +} + +.legend-item.removed { + opacity: 0.5; + text-decoration: line-through; +} + +.legend-color { + width: 18px; + height: 18px; + border-radius: 4px; + border: 2px solid rgba(255, 255, 255, 0.8); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; +} + +.legend-item:hover .legend-color { + transform: scale(1.1); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.legend-color.free-color { + background: linear-gradient(45deg, #e8f5e8, #c8e6c9); +} + +.legend-text { + font-weight: 600; + color: #333; + font-size: 14px; +} + +.legend-size { + font-size: 12px; + color: #666; + font-weight: 500; + background: #f8f9fa; + padding: 2px 6px; + border-radius: 4px; + border: 1px solid #e9ecef; +} + +.table-container { + background: white; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #e0e0e0; + overflow: hidden; +} + +.table-header { + padding: 20px 24px 16px 24px; + border-bottom: 1px solid #e0e0e0; + background: #f8f9fa; +} + +.table-header h3 { + margin: 0; + color: #333; + font-size: 18px; + font-weight: 600; +} + +.partition-mat-table { + width: 100%; + background: white; +} + +.partition-mat-table .mat-header-cell { + background: #f8f9fa; + color: #495057; + font-weight: 600; + font-size: 14px; + padding: 16px 12px; + border-bottom: 2px solid #e9ecef; +} + +.partition-mat-table .mat-cell { + padding: 12px; + border-bottom: 1px solid #f1f3f4; + vertical-align: middle; +} + +.partition-mat-table .mat-row:hover { + background: #f8f9fa; +} + +.compact-form-field { + width: 100%; + margin: 0; +} + +.compact-form-field .mat-form-field-wrapper { + padding-bottom: 0; + margin: 0; +} + +.compact-form-field .mat-form-field-infix { + padding: 2px 0; + min-height: 20px; + font-size: 13px; +} + +.compact-form-field .mat-form-field-outline { + border-radius: 4px; +} + +.compact-form-field .mat-form-field-outline-start, +.compact-form-field .mat-form-field-outline-end { + border-width: 1px; +} + +.compact-form-field .mat-form-field-outline-gap { + border-width: 1px; +} + +.compact-form-field input, +.compact-form-field .mat-select { + line-height: 1.2; +} + +.compact-form-field .mat-select-value { + color: #333; +} + +.partition-mat-table .mat-cell { + padding: 6px 6px; + vertical-align: middle; +} + +.partition-mat-table .mat-header-cell { + padding: 10px 6px; +} + +.compact-form-field .mat-form-field-infix { + padding: 2px 0; + min-height: 20px; +} + +.compact-form-field .mat-select-trigger { + height: 20px; +} + +.compact-form-field input[type="number"] { + padding: 2px 6px; +} + +.compact-form-field .mat-form-field-wrapper { + padding-bottom: 0; + margin: 0; + line-height: 1.2; +} + +.compact-form-field .mat-form-field-outline { + top: 0; + bottom: 0; +} + +.compact-form-field .mat-form-field-outline-start, +.compact-form-field .mat-form-field-outline-end, +.compact-form-field .mat-form-field-outline-gap { + border-width: 1px; +} + +.partition-mat-table .mat-checkbox { + margin: 0; +} + +.partition-mat-table .mat-icon-button { + width: 32px; + height: 32px; + line-height: 32px; +} + +.partition-mat-table .mat-icon { + font-size: 18px; + width: 18px; + height: 18px; +} + +/* ===== RESPONSIVE ===== */ +@media (max-width: 768px) { + .partition-layout { + gap: 16px; + } + + .progress-header { + flex-direction: column; + align-items: flex-start; + } + + .disk-info-summary { + width: 100%; + justify-content: space-between; + } + + .partition-legend { + flex-direction: column; + gap: 8px; + } + + .legend-item { + justify-content: space-between; + } + + .partition-mat-table { + font-size: 12px; + } + + .compact-form-field { + font-size: 12px; + } +} + +@media (max-width: 480px) { + .progress-segments { + height: 40px; + } + + .segment-label { + font-size: 10px; + } + + .partition-number { + font-size: 12px; + } + + .partition-percentage { + font-size: 8px; + } + + .partition-mat-table .mat-header-cell, + .partition-mat-table .mat-cell { + padding: 8px 6px; + } +} + +.progress-segment { + animation: slideIn 0.3s ease-out; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: scaleX(0); + } + to { + opacity: 1; + transform: scaleX(1); + } +} + +.legend-item { + animation: fadeIn 0.3s ease-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + + +.warning { + color: #ff9800 !important; +} + +.usage-bar-fill.warning { + background: linear-gradient(90deg, #ff9800, #ffb74d) !important; +} + +.free-icon.warning { + color: #ff9800 !important; +} + +.danger { + color: #f44336 !important; + font-weight: bold !important; +} + +.usage-bar-fill.danger { + background: linear-gradient(90deg, #f44336, #ef5350) !important; + animation: pulse 2s infinite; +} + +.free-icon.danger { + color: #f44336 !important; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.7; + } + 100% { + opacity: 1; + } +} + +.instructions-box { + margin-top: 15px; + padding: 15px; + border-radius: 6px; +} + +.instructions-box .instructions-card { + padding: 24px 32px; + background: white; + border-radius: 12px; + border: 1px solid #bbdefb; +} + +.instructions-box .instructions-card .mat-card-title { + margin-bottom: 8px; +} + +.instructions-card pre { + font-family: monospace; + white-space: pre; + background: #f8f9fa; + padding: 16px; + border-radius: 8px; + border: 1px solid #e9ecef; + overflow-x: auto; + font-size: 14px; + line-height: 1.5; +} + +/* Script textarea for generated instructions */ +.instructions-card .script-textarea { + width: 100%; + min-height: 260px; + font-family: monospace; + font-size: 13px; + line-height: 1.4; + white-space: pre; + resize: vertical; + padding: 12px; + box-sizing: border-box; +} + +.instructions-top { + margin: 12px 0 20px 0; + padding: 0 20px; +} + +@media (max-width: 768px) { + .header-container { + flex-direction: column; + gap: 16px; + text-align: center; + } + + .button-row { + flex-direction: column; + gap: 8px; + } + + .destination-badge { + flex-direction: column; + text-align: center; + } + + .destination-icon { + margin-right: 0; + margin-bottom: 8px; + } + + .destination-value { + max-width: none; + } + + .destination-label { + text-align: center; + } + + .form-section { + padding: 20px; + } + + .disk-toolbar { + flex-direction: column; + align-items: stretch; + } + + .disk-toolbar-select { + flex: none; + } + + .disk-toolbar-info { + flex-wrap: wrap; + } + + .row { + flex-direction: column; + } + + .chart-container { + flex: none; + width: 100%; + margin-top: 20px; + } + + .partition-table { + font-size: 12px; + } + + .partition-table th, + .partition-table td { + padding: 8px 4px; + } +} + +.partition-validation-indicator { + margin: 8px 0; + border-radius: 12px; + transition: all 0.3s ease; +} + +.validation-status { + display: flex; + align-items: center; + gap: 12px; + font-size: 14px; + font-weight: 500; + padding: 12px 16px; + border-radius: 8px; + border: 2px solid; +} + +.badge-disk-type { + display: inline-flex; + align-items: center; + padding: 2px 8px; + font-size: 0.75rem; + font-weight: 600; + color: #1976d2; + background-color: #e3f2fd; + border-radius: 12px; + margin-left: 8px; + vertical-align: middle; +} + +.validation-status.loading { + color: #1976d2; + background: #e3f2fd; + border-color: #bbdefb; +} + +.validation-status.success { + color: #2e7d32; + background: #e8f5e8; + border-color: #4caf50; +} + +.validation-status.error { + color: #d32f2f; + background: #ffebee; + border-color: #f44336; +} + +.validation-icon { + font-size: 20px; + width: 20px; + height: 20px; +} + +.validation-icon.loading { + color: #1976d2; + animation: spin 1s linear infinite; +} + +.validation-icon.success { + color: #2e7d32; +} + +.validation-icon.error { + color: #d32f2f; +} + +.validation-message { + flex: 1; + margin-left: 8px; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.section-hint { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + margin: 8px 0 12px 0; + background: #f7faff; + border: 1px solid #e2e8ff; + border-radius: 8px; + color: #334155; + font-size: 13px; +} +.section-hint mat-icon { + color: #667eea; + font-size: 18px; + width: 18px; + height: 18px; +} + +.client-card { + background: white; + border-radius: 10px 10px 0 0; + border: 2px solid #e9ecef; + border-bottom: none; + padding: 12px; + text-align: center; + cursor: pointer; + transition: all 0.3s ease; + width: 100%; + box-sizing: border-box; +} + +.selected-client { + background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%); + color: #1f2937; + border-color: #e9ecef; + border-bottom: none; +} +.selected-client .client-name, +.selected-client .client-ip { + color: #1f2937; +} + +.model-selector { + background: #ffffff; + border: 2px solid #e9ecef; + border-radius: 0 0 10px 10px; + border-top: none; + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + cursor: pointer; + transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} +.model-selector:hover { + background: #f3f6ff; + border-color: #b3c2ff; + box-shadow: 0 1px 8px rgba(102, 126, 234, 0.2); +} + +.selected-client + .model-selector { + border-left: 2px solid #e9ecef; + border-right: 2px solid #e9ecef; + border-bottom: 2px solid #e9ecef; + border-top: none; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} + +/* Radios y labels del radio button */ +::ng-deep .model-selector .mat-radio-label, +::ng-deep .model-selector .mat-radio-label-content { color: #2c3e50 !important; } +::ng-deep .model-selector .mat-radio-outer-circle { border-color: #667eea !important; } +::ng-deep .model-selector .mat-radio-inner-circle { background-color: #667eea !important; } + + + + + + +.badge-disk-type { display: inline-block; padding: 2px 6px; font-size: 11px; font-weight: bold; color: #fff; background-color: #607d8b; border-radius: 4px; margin-left: 8px; vertical-align: middle; } + + diff --git a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css index 96dac70..583b364 100644 --- a/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css +++ b/ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css @@ -192,13 +192,14 @@ table { font-weight: bold; } .badge-disk-type { - display: inline-block; - padding: 2px 6px; - font-size: 11px; - font-weight: bold; - color: #fff; - background-color: #607d8b; - border-radius: 4px; + display: inline-flex; + align-items: center; + padding: 2px 8px; + font-size: 0.75rem; + font-weight: 600; + color: #1976d2; + background-color: #e3f2fd; + border-radius: 12px; margin-left: 8px; vertical-align: middle; } diff --git a/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css index eeb072e..e02df24 100644 --- a/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css +++ b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css @@ -33,13 +33,14 @@ } .badge-disk-type { - display: inline-block; - padding: 2px 6px; - font-size: 11px; - font-weight: bold; - color: #fff; - background-color: #607d8b; - border-radius: 4px; + display: inline-flex; + align-items: center; + padding: 2px 8px; + font-size: 0.75rem; + font-weight: 600; + color: #1976d2; + background-color: #e3f2fd; + border-radius: 12px; margin-left: 8px; vertical-align: middle; } diff --git a/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts index 4281f0d..ee85cf7 100644 --- a/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts +++ b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts @@ -47,7 +47,7 @@ export class DiskPartitionSelectorComponent implements OnChanges { const partitionZero = diskPartitions.find((p: any) => p.partitionNumber === 0); this.diskUsageData.push({ diskNumber: diskNum, - partitions: diskPartitions, + partitions: diskPartitions.filter((p: any) => p.partitionNumber !== 0), diskType: partitionZero ? partitionZero.diskType : undefined }); }