opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor modal styles in command-detail.component.css

oggui/commands
Alvaro Puente Mella 2024-09-19 15:19:49 +02:00
parent 0b0ca83ac2
commit 7d333ae38b
1 changed files with 74 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css
View File

@ -1,64 +1,96 @@
.header-container { .modal-container {
background-color: #f8f9fa; background-color: #fff;
padding: 20px; 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; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; font-family: 'Roboto', sans-serif;
box-sizing: border-box;
} }
.title { .modal-title {
font-size: 1.5em; font-size: 1.8em;
color: #343a40; margin-bottom: 15px;
margin: 0; 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 { .button-row {
display: flex; display: flex;
align-items: center; justify-content: flex-end;
margin-top: 20px;
padding: 10px;
} }
.button-row button { .button-row button {
margin-left: 10px;
}
.primary-button {
background-color: #007bff; background-color: #007bff;
color: #fff; color: white;
border-radius: 4px; border-radius: 5px;
padding: 8px 16px;
font-size: 1em;
font-weight: 500;
} }
.button-row button:hover { .accent-button {
background-color: #0056b3; 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; 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 { .schedule-container {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex;
gap: 15px
} }
.mat-header-cell { mat-checkbox {
background-color: #e9ecef; margin-left: 20px;
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;
} }