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; | |
} |