Spaces:
Runtime error
Runtime error
| /* ------------------------------------------------ */ | |
| /* Global */ | |
| /* ------------------------------------------------ */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| background: #f4f6f9; | |
| color: #222; | |
| padding: 40px; | |
| } | |
| .container { | |
| max-width: 1100px; | |
| margin: auto; | |
| } | |
| /* ------------------------------------------------ */ | |
| /* Header */ | |
| /* ------------------------------------------------ */ | |
| header { | |
| margin-bottom: 30px; | |
| } | |
| header h1 { | |
| color: #2c3e50; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| color: #666; | |
| margin-bottom: 5px; | |
| } | |
| .tables { | |
| color: #888; | |
| font-size: 0.9rem; | |
| } | |
| /* ------------------------------------------------ */ | |
| /* Form */ | |
| /* ------------------------------------------------ */ | |
| form { | |
| margin-bottom: 25px; | |
| } | |
| label { | |
| display: block; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| } | |
| textarea { | |
| width: 100%; | |
| resize: vertical; | |
| min-height: 120px; | |
| border: 1px solid #ccc; | |
| border-radius: 6px; | |
| padding: 12px; | |
| font-size: 1rem; | |
| font-family: inherit; | |
| margin-bottom: 15px; | |
| } | |
| textarea:focus { | |
| outline: none; | |
| border-color: #0078d4; | |
| box-shadow: 0 0 4px rgba(0,120,212,.25); | |
| } | |
| button { | |
| background: #0078d4; | |
| color: white; | |
| border: none; | |
| padding: 12px 22px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| button:hover { | |
| background: #005fa3; | |
| } | |
| /* ------------------------------------------------ */ | |
| /* Cards */ | |
| /* ------------------------------------------------ */ | |
| .card { | |
| background: white; | |
| padding: 20px; | |
| margin-top: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,.08); | |
| } | |
| .card h2 { | |
| margin-bottom: 15px; | |
| color: #2c3e50; | |
| } | |
| .error { | |
| border-left: 6px solid #d32f2f; | |
| } | |
| /* ------------------------------------------------ */ | |
| /* SQL Display */ | |
| /* ------------------------------------------------ */ | |
| pre { | |
| background: #272822; | |
| color: #f8f8f2; | |
| padding: 15px; | |
| overflow-x: auto; | |
| border-radius: 6px; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| /* ------------------------------------------------ */ | |
| /* Table */ | |
| /* ------------------------------------------------ */ | |
| .table-wrapper { | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th { | |
| background: #0078d4; | |
| color: white; | |
| text-align: left; | |
| padding: 10px; | |
| } | |
| td { | |
| padding: 10px; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| tbody tr:nth-child(even) { | |
| background: #f8f8f8; | |
| } | |
| tbody tr:hover { | |
| background: #eef5ff; | |
| } | |
| /* ------------------------------------------------ */ | |
| /* Explanation */ | |
| /* ------------------------------------------------ */ | |
| .card p { | |
| line-height: 1.7; | |
| font-size: 1rem; | |
| } | |
| /* ------------------------------------------------ */ | |
| /* Mobile */ | |
| /* ------------------------------------------------ */ | |
| @media (max-width: 768px) { | |
| body { | |
| padding: 15px; | |
| } | |
| button { | |
| width: 100%; | |
| } | |
| h1 { | |
| font-size: 1.7rem; | |
| } | |
| } |