Spaces:
Sleeping
Sleeping
| body{ | |
| background-image:url("../static/Images/Background.jpg"); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| header { | |
| display: flex; | |
| align-items: center; | |
| zoom: 130%; | |
| padding: 15px; | |
| } | |
| header img { | |
| /* Original width & height is 70px */ | |
| width: 200px; | |
| height: 200px; | |
| margin-left: 300px; | |
| } | |
| header h1 { | |
| margin-left: 50px; | |
| font-size: 40px; | |
| color: rgb(26, 25, 25); | |
| } | |
| main { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .user-story { | |
| flex-basis: 30%; | |
| margin-left: 50px; | |
| } | |
| .user-story h2 { | |
| margin-bottom: 10px; | |
| } | |
| textarea { | |
| width: 900px; | |
| height: 400px; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| resize: none ; | |
| margin-bottom: 10px; | |
| } | |
| table { | |
| flex-basis: 60%; | |
| margin-right: 20px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| overflow-y: scroll; /* To make the table scrollable */ | |
| height: 200px; /* To match text area size */ | |
| display: block; | |
| border-collapse: separate; /* Added to separate the border between the headers and the data cells */ | |
| border-spacing: 0; /* Added to remove the extra space between the border */ | |
| } | |
| #breakdown-table { | |
| width: 900px; | |
| height: 400px; | |
| margin-left: 20px; | |
| } | |
| #breakdown-table th, | |
| #breakdown-table td { | |
| border: 1px solid #ddd; | |
| padding: 8px; | |
| text-align: left; | |
| } | |
| #breakdown-table th:first-child { | |
| border-left: none; | |
| } | |
| #breakdown-table th:last-child { | |
| border-right: none; | |
| } | |
| #breakdown-table th:not(:first-child) { | |
| border-left: none; | |
| border-right: none; | |
| } | |
| #breakdown-table th div { | |
| border-bottom: 1px solid #ddd; | |
| padding: 8px; | |
| } | |
| #breakdown-table td div { | |
| padding: 8px; | |
| } | |
| #breakdown-table thead th { | |
| background-color: #f2f2f2; | |
| } | |
| #breakdown-table tbody tr:nth-child(even) { | |
| background-color: #f2f2f2; | |
| } | |
| #breakdown-table tbody tr:hover { | |
| background-color: #ddd; | |
| } | |
| #clear-btn { | |
| background-color: #d3d5d6; | |
| color: rgb(32, 31, 31); | |
| border: 2px; | |
| border-radius: 5px; | |
| padding: 10px; | |
| cursor: pointer; | |
| } | |
| #breakdown-btn { | |
| background-color: #2f3030; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| padding: 10px; | |
| cursor: pointer; | |
| /* Added these 2 lines to make button appear at btm-right of user story contents. | |
| Not sure if this is the correct way to do it, but it looks alright for me? */ | |
| position: absolute; | |
| left: 1750px; | |
| } | |
| .user-story-list { | |
| flex-basis: 60%; | |
| margin-right: 20px; | |
| } | |
| .user-story-list h2 { | |
| margin-bottom: 10px; | |
| } | |
| .scrollable-box { | |
| height: 200px; | |
| overflow-y: auto; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| resize: none; | |
| } | |
| #user-story-ul { | |
| list-style: none; | |
| padding: 10px; | |
| } | |
| .back-Btn-Container { | |
| display: flex; | |
| justify-content: end; | |
| align-items: end; | |
| padding: 0 20px; | |
| margin-top: 20px; | |
| } | |
| .buttons-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 20px; | |
| margin-top: 20px; | |
| } | |
| .back-btn { | |
| background-color: #555; | |
| color: #fff; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| margin-right: 150px; | |
| width: 110px; | |
| height: 40px; | |
| } |