From 7d333ae38b8a00695ae6352f774d070acec5d7e0 Mon Sep 17 00:00:00 2001 From: apuente Date: Thu, 19 Sep 2024 15:19:49 +0200 Subject: [PATCH] Refactor modal styles in command-detail.component.css --- .../command-detail.component.css | 116 +++++++++++------- 1 file changed, 74 insertions(+), 42 deletions(-) diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css index d444716..48e4f08 100644 --- a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css +++ b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css @@ -1,64 +1,96 @@ -.header-container { - background-color: #f8f9fa; +.modal-container { + background-color: #fff; padding: 20px; - border-bottom: 1px solid #dee2e6; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border-radius: 10px; + width: calc(100% - 40px); + height: calc(100% - 40px); + margin: 20px; display: flex; + flex-direction: column; justify-content: space-between; - align-items: center; + font-family: 'Roboto', sans-serif; + box-sizing: border-box; } -.title { - font-size: 1.5em; - color: #343a40; - margin: 0; +.modal-title { + font-size: 1.8em; + margin-bottom: 15px; + color: #333; + border-bottom: 2px solid #eee; + padding-bottom: 10px; +} + +.modal-content { + flex-grow: 1; + overflow-y: auto; + padding: 10px; +} + +.modal-content p { + margin: 10px 0; + font-size: 1em; + color: #555; +} + +.script-display { + margin-top: 20px; + background-color: #282c34; + color: #ffffff; + padding: 15px; + border-radius: 8px; + font-size: 0.9em; + overflow: auto; } .button-row { display: flex; - align-items: center; + justify-content: flex-end; + margin-top: 20px; + padding: 10px; } .button-row button { + margin-left: 10px; +} + +.primary-button { background-color: #007bff; - color: #fff; - border-radius: 4px; - padding: 8px 16px; - font-size: 1em; - font-weight: 500; + color: white; + border-radius: 5px; } -.button-row button:hover { - background-color: #0056b3; +.accent-button { + background-color: #17a2b8; + color: white; + border-radius: 5px; } -.table-container { +.cancel-button { + background-color: #dc3545; + color: white; + border-radius: 5px; +} + +.primary-button:hover, +.accent-button:hover, +.cancel-button:hover { + opacity: 0.9; +} + +.additional-section { + margin-top: 20px; padding: 20px; - background-color: #fff; + border-radius: 10px; + background-color: #f9f9f9; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } -.mat-elevation-z8 { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +.schedule-container { + display: flex; + gap: 15px } -.mat-header-cell { - background-color: #e9ecef; - color: #495057; - font-weight: bold; - text-align: left; - padding: 16px; -} - -.mat-cell { - padding: 16px; - color: #495057; - border-bottom: 1px solid #dee2e6; -} - -.mat-row:hover { - background-color: #f1f1f1; - cursor: pointer; -} - -.mat-header-row { - border-bottom: 2px solid #007bff; -} +mat-checkbox { + margin-left: 20px; +} \ No newline at end of file