fix(ui): improve script code contrast and relocate action buttons to header
parent
e5a83a05cd
commit
c4aa997516
|
|
@ -2,18 +2,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.plugin-header-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.08) 0%, rgba(33, 150, 243, 0.03) 100%);
|
||||
border: 1px solid rgba(25, 118, 210, 0.18);
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
|
||||
padding: 20px 24px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.plugin-header-icon-box {
|
||||
|
|
@ -22,11 +21,10 @@
|
|||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #1976d2;
|
||||
color: #ffffff;
|
||||
background: #e0f2fe;
|
||||
color: #0284c7;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(25, 118, 210, 0.3);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
|
||||
}
|
||||
|
||||
.plugin-header-icon {
|
||||
|
|
@ -38,45 +36,44 @@
|
|||
.plugin-header-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.plugin-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.plugin-title {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1e293b;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.plugin-version-tag {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.plugin-status-tag {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
margin: 0;
|
||||
margin: 6px 0 0 0;
|
||||
color: #475569;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +91,15 @@
|
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.section-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.section-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -175,23 +181,58 @@
|
|||
height: 48px;
|
||||
}
|
||||
|
||||
.code-textarea {
|
||||
font-family: 'Consolas', 'Courier New', monospace;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.45;
|
||||
background: #0f172a;
|
||||
color: #38bdf8;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
/* Visor de código para scripts con alto contraste */
|
||||
.code-field {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.code-field .mat-mdc-text-field-wrapper {
|
||||
background-color: #0b1120 !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
textarea.code-textarea,
|
||||
.code-field textarea.mat-mdc-input-element {
|
||||
font-family: 'Consolas', 'Fira Code', 'Monaco', monospace !important;
|
||||
font-size: 0.92rem !important;
|
||||
line-height: 1.6 !important;
|
||||
background-color: #0b1120 !important;
|
||||
color: #38bdf8 !important;
|
||||
-webkit-text-fill-color: #38bdf8 !important;
|
||||
caret-color: #38bdf8 !important;
|
||||
padding: 14px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.code-field .mdc-notched-outline__leading,
|
||||
.code-field .mdc-notched-outline__notch,
|
||||
.code-field .mdc-notched-outline__trailing {
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
|
||||
.code-field:hover .mdc-notched-outline__leading,
|
||||
.code-field:hover .mdc-notched-outline__notch,
|
||||
.code-field:hover .mdc-notched-outline__trailing {
|
||||
border-color: #64748b !important;
|
||||
}
|
||||
|
||||
.code-field.mat-focused .mdc-notched-outline__leading,
|
||||
.code-field.mat-focused .mdc-notched-outline__notch,
|
||||
.code-field.mat-focused .mdc-notched-outline__trailing {
|
||||
border-color: #38bdf8 !important;
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
.form-actions-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-actions-bar.top-actions {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.btn-save, .btn-reset, .btn-regenerate {
|
||||
|
|
@ -199,7 +240,8 @@
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
padding: 0 20px;
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.no-plugin-box {
|
||||
|
|
@ -219,6 +261,17 @@
|
|||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.section-header-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-actions-bar.top-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-fields-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,10 +16,30 @@
|
|||
</div>
|
||||
|
||||
<div class="settings-form-wrapper">
|
||||
<div class="section-title-box">
|
||||
<mat-icon class="section-icon">tune</mat-icon>
|
||||
<h3 class="section-heading">Parámetros de Configuración del Plugin</h3>
|
||||
<div class="section-header-row">
|
||||
<div class="section-title-box">
|
||||
<mat-icon class="section-icon">tune</mat-icon>
|
||||
<h3 class="section-heading">Parámetros de Configuración del Plugin</h3>
|
||||
</div>
|
||||
|
||||
<div class="form-actions-bar top-actions">
|
||||
<button mat-stroked-button color="warn" (click)="reset()" class="btn-reset">
|
||||
<mat-icon>restart_alt</mat-icon>
|
||||
Restaurar por defecto
|
||||
</button>
|
||||
@if (hasScriptFields()) {
|
||||
<button mat-stroked-button color="accent" (click)="regenerateScripts()" class="btn-regenerate">
|
||||
<mat-icon>auto_fix_high</mat-icon>
|
||||
Regenerar Scripts desde Parámetros
|
||||
</button>
|
||||
}
|
||||
<button mat-raised-button color="primary" (click)="save()" class="btn-save">
|
||||
<mat-icon>save</mat-icon>
|
||||
Guardar Configuración
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="section-subheading">
|
||||
Ajusta el comportamiento y las opciones de ejecución. Los cambios se aplicarán inmediatamente a las nuevas órdenes enviadas a los puestos.
|
||||
</p>
|
||||
|
|
@ -76,23 +96,6 @@
|
|||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="form-actions-bar">
|
||||
<button mat-stroked-button color="warn" (click)="reset()" class="btn-reset">
|
||||
<mat-icon>restart_alt</mat-icon>
|
||||
Restaurar por defecto
|
||||
</button>
|
||||
@if (hasScriptFields()) {
|
||||
<button mat-stroked-button color="accent" (click)="regenerateScripts()" class="btn-regenerate">
|
||||
<mat-icon>auto_fix_high</mat-icon>
|
||||
Regenerar Scripts desde Parámetros
|
||||
</button>
|
||||
}
|
||||
<button mat-raised-button color="primary" (click)="save()" class="btn-save">
|
||||
<mat-icon>save</mat-icon>
|
||||
Guardar Configuración
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="no-plugin-box">
|
||||
|
|
|
|||
Loading…
Reference in New Issue