LoanHistory.css
/* /src/styles/LoanHistory.css */ .loan-history { padding: 20px; } .history-table { width: 98%; border-collapse: collapse; margin-top: 20px; } .history-table th, .history-table td { border: 1px solid #ffffff; padding: 8px; text-align: left; } .history-table th { background-color: #FFD36A; text-align: center; color: #030303; } .history-image { width: 100px; height: 150px; } .history-table td { text-align: center; color: #fbfbfb; background-color: #1A2D31; } .Name { font-size: 1.3em; } .history-table th:nth-child(1), td:nth-child(1) { width: 5%; } .history-table th:nth-child(2), td:nth-child(2) { width: 15%; } .history-table th:nth-child(3), td:nth-child(3) { width: 40%; } .history-table th:nth-child(4), td:nth-child(4) { width: 10%; } .history-table th:nth-child(5), td:nth-child(5) { width: 10%; } .history-table th:nth-child(6), td:nth-child(6) { width: 10%; } .history-table th:nth-child(7), td:nth-child(7) { width: 20%; } .button-group{ margin-top: 10px; } .loan-history .button-group button { padding: 10px 20px; margin: 0 10px; border: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; font-size: 16px; background-color: #FFD36A; color: #333; border-radius: 4px; } .loan-history .button-group button:hover { background-color: #000000; color: #fff; } .loan-history .button-group button:active { background-color: #080808; color: #fff; } .loan-history .button-group .active { background-color: #060606; color: #fff; } /* Additional hover effects for table rows */ .loan-history .history-table tbody tr:hover { background-color: #f1f1f1; } .history-table td.borrowed { color: red; font-weight: bold; } .history-table td.returned { color: rgb(126, 234, 126); font-weight: bold; }
Leave a Comment