pascalx/pathloss-predictor
0
1/* Professional Pathloss Prediction App Styles */2 3:root {4 --primary-color: #2c3e50;5 --secondary-color: #3498db;6 --accent-color: #27ae60;7 --light-bg: #f8f9fa;8 --white: #ffffff;9 --gray-light: #e9ecef;10 --gray-medium: #6c757d;11 --gray-dark: #495057;12 --success: #28a745;13 --danger: #dc3545;14 --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);15 --border-radius: 8px;16 --transition: all 0.3s ease;17}18 19* {20 box-sizing: border-box;21}22 23body {24 background-color: var(--light-bg);25 min-height: 100vh;26 font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;27 line-height: 1.5;28 color: var(--gray-dark);29 margin: 0;30 padding: 0;31 font-size: 0.95rem;32}33 34.container {35 padding-top: 2rem;36 padding-bottom: 2rem;37}38 39/* Card Styles */40.card {41 background: var(--white);42 border-radius: var(--border-radius);43 box-shadow: var(--shadow);44 border: 1px solid var(--gray-light);45 margin-bottom: 2rem;46 overflow: hidden;47}48 49.card-header {50 background: var(--primary-color);51 color: var(--white);52 padding: 1.5rem;53 text-align: center;54 border-bottom: none;55}56 57.card-header h2 {58 margin: 0;59 font-weight: 600;60 font-size: 1.5rem;61}62 63.card-header p {64 margin: 0.5rem 0 0 0;65 opacity: 0.9;66 font-size: 0.9rem;67}68 69.card-body {70 padding: 1.5rem;71}72 73/* Form Styles */74.form-label {75 font-weight: 600;76 color: var(--primary-color);77 margin-bottom: 0.5rem;78 font-size: 0.9rem;79}80 81.form-control, .form-select {82 border: 2px solid var(--gray-light);83 border-radius: var(--border-radius);84 padding: 0.6rem 0.8rem;85 font-size: 0.9rem;86 transition: var(--transition);87 background-color: var(--white);88 height: calc(2.5rem + 2px);89}90 91.form-control:focus, .form-select:focus {92 border-color: var(--secondary-color);93 box-shadow: 0 0 0 0.15rem rgba(52, 152, 219, 0.1);94 outline: none;95}96 97.form-text {98 color: var(--gray-medium);99 font-size: 0.8rem;100 margin-top: 0.25rem;101}102 103/* Button Styles */104.btn {105 border-radius: var(--border-radius);106 padding: 0.6rem 1.5rem;107 font-weight: 600;108 font-size: 0.9rem;109 text-decoration: none;110 display: inline-block;111 text-align: center;112 border: none;113 cursor: pointer;114 transition: var(--transition);115 border: 2px solid transparent;116}117 118.btn-primary {119 background: var(--secondary-color);120 color: var(--white);121}122 123.btn-primary:hover {124 background: #2980b9;125 transform: translateY(-1px);126 box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);127}128 129.btn-success {130 background: var(--success);131 color: var(--white);132}133 134.btn-success:hover {135 background: #218838;136}137 138.btn-danger {139 background: var(--danger);140 color: var(--white);141}142 143.btn-danger:hover {144 background: #c82333;145}146 147.btn-outline-secondary {148 background: transparent;149 color: var(--gray-medium);150 border-color: var(--gray-medium);151}152 153.btn-outline-secondary:hover {154 background: var(--gray-medium);155 color: var(--white);156}157 158/* Alert Styles */159.alert {160 border-radius: var(--border-radius);161 border: none;162 padding: 1rem 1.5rem;163 margin-bottom: 1rem;164}165 166.alert-success {167 background-color: #d4edda;168 color: #155724;169 border: 1px solid #c3e6cb;170}171 172.alert-danger {173 background-color: #f8d7da;174 color: #721c24;175 border: 1px solid #f5c6cb;176}177 178/* Table Styles */179.table {180 background-color: var(--white);181 border-radius: var(--border-radius);182 overflow: hidden;183}184 185.table th {186 background-color: var(--primary-color);187 color: var(--white);188 border: none;189 font-weight: 600;190 padding: 1rem;191}192 193.table td {194 border: none;195 padding: 1rem;196 vertical-align: middle;197}198 199.table-striped tbody tr:nth-of-type(odd) {200 background-color: var(--light-bg);201}202 203/* Result Display */204.display-4 {205 font-size: 2.5rem;206 font-weight: 700;207 margin: 1rem 0;208}209 210.text-center {211 text-align: center;212}213 214.text-success {215 color: var(--success) !important;216}217 218/* Instructions Section */219.card-title {220 color: var(--primary-color);221 font-weight: 600;222 margin-bottom: 1rem;223}224 225.list-unstyled li {226 padding: 0.5rem 0;227 border-bottom: 1px solid var(--gray-light);228 display: flex;229 align-items: flex-start;230}231 232.list-unstyled li:last-child {233 border-bottom: none;234}235 236.list-unstyled li i {237 margin-top: 0.125rem;238 flex-shrink: 0;239}240 241/* Loading State */242.btn:disabled {243 opacity: 0.7;244 cursor: not-allowed;245}246 247/* Responsive Design */248@media (max-width: 768px) {249 .container {250 padding-top: 1rem;251 padding-bottom: 1rem;252 }253 254 .card-header {255 padding: 1.5rem;256 }257 258 .card-body {259 padding: 1.5rem;260 }261 262 .display-4 {263 font-size: 2.5rem;264 }265 266 .btn {267 padding: 0.625rem 1.5rem;268 font-size: 0.9rem;269 }270}271 272/* Custom Scrollbar */273::-webkit-scrollbar {274 width: 8px;275}276 277::-webkit-scrollbar-track {278 background: var(--light-bg);279}280 281::-webkit-scrollbar-thumb {282 background: var(--gray-medium);283 border-radius: 4px;284}285 286::-webkit-scrollbar-thumb:hover {287 background: var(--gray-dark);288}289 290/* Focus States */291.btn:focus, .form-control:focus, .form-select:focus {292 outline: none;293}294 295/* Hover Effects */296.card:hover {297 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);298}299 300/* Animation */301@keyframes fadeIn {302 from {303 opacity: 0;304 transform: translateY(20px);305 }306 to {307 opacity: 1;308 transform: translateY(0);309 }310}311 312.card {313 animation: fadeIn 0.5s ease-out;314}315 316/* Print Styles */317@media print {318 body {319 background: white !important;320 }321 322 .btn, .card:hover {323 box-shadow: none !important;324 }325 326 .no-print {327 display: none !important;328 }329}330