servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

tweak config section layout

Browse source
This commit is contained in:
Tobias Brunner 2025-07-23 14:35:15 +02:00
parent 491dbacda4
commit e4ba1378b6
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
3 changed files with 394 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

260
hub/services/static/css/roi-calculator.css
View file

@ -394,15 +394,171 @@
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.main-config-section .form-label {
color: #495057;
font-weight: 600;
.main-config-fields {
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border: 1px solid #e9ecef;
}
.main-config-section .input-group-text {
background-color: #e9ecef;
border-color: #ced4da;
font-weight: 500;
.main-config-fields .form-label {
color: #2c3e50;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.main-config-fields .input-group-text {
background-color: #f8f9fa;
border-color: #dee2e6;
font-weight: 600;
color: #495057;
}
.main-config-fields .form-control {
border-color: #dee2e6;
font-size: 1.1rem;
}
.main-config-fields .form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}
.main-config-fields .form-select {
border-color: #dee2e6;
font-size: 1.1rem;
}
.main-config-fields .form-select:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}
/* Results Panel Styling */
.results-panel {
position: sticky;
top: 1rem;
}
.results-panel .card {
border-radius: 12px;
overflow: hidden;
background: #ffffff;
}
.results-panel .card-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-bottom: none;
padding: 1.25rem;
}
.results-panel .card-body {
padding: 2rem 1.5rem;
min-height: 400px;
}
.result-item {
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: 8px;
}
.result-item:hover {
background: rgba(0, 123, 255, 0.02);
transform: translateX(5px);
}
.result-icon {
flex-shrink: 0;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.result-item:hover .result-icon {
transform: scale(1.1);
}
.result-metrics {
border: 1px solid #dee2e6;
transition: all 0.3s ease;
}
.result-item:hover .result-metrics {
border-color: #007bff;
background: rgba(248, 249, 250, 0.8) !important;
}
/* Enhanced form styling */
.form-check-lg .form-check-input {
width: 1.5rem;
height: 1.5rem;
margin-top: 0.125rem;
}
.form-check-lg .form-check-label {
font-size: 1.1rem;
margin-left: 0.5rem;
}
/* Enhanced range sliders */
.form-range {
height: 8px;
background: linear-gradient(to right, #e9ecef 0%, #dee2e6 100%);
border-radius: 4px;
margin: 1rem 0 0.5rem 0;
}
.form-range::-webkit-slider-thumb {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
cursor: pointer;
transition: all 0.2s ease;
}
.form-range::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}
.form-range::-moz-range-thumb {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
cursor: pointer;
transition: all 0.2s ease;
}
.form-range::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}
/* Button styling improvements */
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
}
.btn-outline-info:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}
.btn-outline-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}
/* Advanced controls styling */
@ -482,10 +638,70 @@
}
/* Responsive improvements */
@media (max-width: 991px) {
.results-panel {
position: static;
margin-top: 2rem;
}
.results-panel .card-body {
min-height: auto;
padding: 1.5rem;
}
.result-item {
margin-bottom: 1.5rem;
}
.result-item:last-child {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.main-config-section {
.main-config-fields {
padding: 1rem;
margin: 0 -15px;
border-radius: 0;
border-left: none;
border-right: none;
}
.main-config-fields .form-label {
font-size: 1rem;
}
.main-config-fields .form-control,
.main-config-fields .form-select {
font-size: 1rem;
}
.btn-lg {
font-size: 1rem;
padding: 0.6rem 1.2rem;
}
.form-check-lg .form-check-input {
width: 1.25rem;
height: 1.25rem;
}
.form-check-lg .form-check-label {
font-size: 1rem;
}
.results-panel .card-header {
padding: 1rem;
}
.results-panel .card-body {
padding: 1rem;
}
.result-icon {
width: 35px !important;
height: 35px !important;
font-size: 1rem;
}
.advanced-controls-section .card {
@ -497,6 +713,34 @@
}
}
@media (max-width: 576px) {
.d-flex.gap-3.flex-wrap {
flex-direction: column;
gap: 0.75rem !important;
}
.btn-lg {
width: 100%;
justify-content: center;
}
.form-check-lg {
margin-bottom: 0.75rem;
}
.results-panel .card-body {
padding: 0.75rem;
}
.result-metrics .row {
text-align: center;
}
.result-metrics .col-6 {
margin-bottom: 0.5rem;
}
}
/* Model comparison box */
.model-comparison-box {
border: 1px solid #dee2e6;