104 lines
2.8 KiB
CSS
104 lines
2.8 KiB
CSS
/* Zusätzliche Stile für den Ceph-Rechner */
|
|
|
|
/* Sanfter Farbübergang im Hintergrund */
|
|
body {
|
|
background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
|
|
}
|
|
|
|
/* Grundlegende Formular-Styles */
|
|
.form-control, input, select, textarea {
|
|
background-color: #ffffff !important;
|
|
border: 1px solid #e2e8f0 !important;
|
|
color: #2d3748 !important;
|
|
}
|
|
|
|
.form-control:focus, input:focus, select:focus, textarea:focus {
|
|
background-color: #ffffff !important;
|
|
border-color: #4299e1 !important;
|
|
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25) !important;
|
|
}
|
|
|
|
.form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
|
|
color: #a0aec0 !important;
|
|
}
|
|
|
|
select option {
|
|
background-color: #ffffff !important;
|
|
color: #2d3748 !important;
|
|
}
|
|
|
|
/* Bessere Lesbarkeit für Ergebnisse */
|
|
.result-value {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Hover-Effekte für Karten */
|
|
.card-hover {
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Light Mode Anpassungen */
|
|
@media (prefers-color-scheme: light) {
|
|
.form-control, input, select, textarea {
|
|
background-color: #ffffff !important;
|
|
border: 1px solid #e2e8f0 !important;
|
|
color: #2d3748 !important;
|
|
}
|
|
|
|
.form-control:focus, input:focus, select:focus, textarea:focus {
|
|
background-color: #ffffff !important;
|
|
border-color: #4299e1 !important;
|
|
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25) !important;
|
|
}
|
|
|
|
.form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
|
|
color: #a0aec0 !important;
|
|
}
|
|
|
|
select option {
|
|
background-color: #ffffff !important;
|
|
color: #2d3748 !important;
|
|
}
|
|
}
|
|
|
|
/* Darkmode Anpassungen */
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
|
|
}
|
|
|
|
/* Eingabefelder im Darkmode */
|
|
.form-control, input, select, textarea {
|
|
background-color: #2d3748 !important;
|
|
border: 1px solid #4a5568 !important;
|
|
color: #e2e8f0 !important;
|
|
}
|
|
|
|
.form-control:focus, input:focus, select:focus, textarea:focus {
|
|
background-color: #2d3748 !important;
|
|
border-color: #63b3ed !important;
|
|
box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.25) !important;
|
|
}
|
|
|
|
.form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
|
|
color: #718096 !important;
|
|
}
|
|
|
|
select option {
|
|
background-color: #2d3748 !important;
|
|
color: #e2e8f0 !important;
|
|
}
|
|
}
|
|
|
|
/* Responsive Anpassungen */
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
} |