File size: 3,077 Bytes
d716b42 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
/* General Styles */
body {
font-family: 'Roboto', sans-serif;
background-color: #f0f4f8; /* Light background color */
}
/* App Window */
.app-window {
max-width: 800px; /* Set maximum width */
margin: auto; /* Center align */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
background-color: #ffffff; /* White background for content */
padding: 2rem; /* Padding for content */
}
/* Header Section */
.bg-primary {
background-color: #007bff !important; /* Primary blue color */
}
/* Logo Styles */
.logo {
width: 120px; /* Adjust logo size */
height: auto; /* Maintain aspect ratio */
}
/* Form Styles */
h2 {
color: #333; /* Darker text for headings */
margin-bottom: 1.5rem; /* Spacing below heading */
}
.form-group {
margin-bottom: 1.5rem; /* Spacing between form groups */
}
.col-form-label {
font-weight: bold; /* Bold labels */
color: #0056b3; /* Dark blue for labels */
}
/* Input and Select Styles */
input.form-control,
select.form-control {
border: 2px solid #ced4da; /* Thicker border for input and select */
border-radius: 0.25rem; /* Rounded input corners */
transition: border-color 0.3s, box-shadow 0.3s; /* Transition for border color and shadow */
padding: 0.5rem; /* Add padding to inputs */
}
input.form-control:focus,
select.form-control:focus {
border-color: #28a745; /* Green border on focus */
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green shadow effect on focus */
}
/* Button Styles */
.btn-primary {
background-color: #28a745; /* Green button color */
border: none; /* Remove border */
color: #ffffff; /* White text color */
transition: background-color 0.3s, transform 0.3s; /* Transition for hover effect */
}
.btn-primary:hover {
background-color: #218838; /* Darker green on hover */
transform: scale(1.05); /* Slightly enlarge button on hover */
}
/* Result Display Styles */
.prediction-result {
background-color: #e9f7ef; /* Light green background */
border-left: 5px solid #28a745; /* Green left border */
padding: 1rem; /* Padding for the result box */
border-radius: 5px; /* Rounded corners */
}
.result-title {
color: #155724; /* Dark green for title */
font-weight: bold; /* Bold title */
}
.result-value {
font-size: 1.5rem; /* Larger font for result value */
color: #155724; /* Dark green for result value */
}
/* Footer Styles */
footer {
margin-top: 20px; /* Space above the footer */
background-color: #007bff; /* Footer background */
padding: 1rem 0; /* Padding for footer */
color: white; /* White text color for footer */
}
footer p {
margin: 0; /* Remove margin */
}
/* Responsive Styles */
@media (max-width: 576px) {
.app-window {
padding: 1rem; /* Less padding on smaller screens */
}
.logo {
width: 100px; /* Smaller logo for mobile */
}
h2 {
font-size: 1.5rem; /* Smaller heading size for mobile */
}
}
|