/* borrow_management.css - Optimized for literary female audience */ /* Main typography and colors */ body { font-family: 'Georgia', serif; color: #4a3728; background-color: #fcf8f3; } .page-title { margin-bottom: 1.5rem; color: #5d3511; border-bottom: 2px solid #d9c7b8; padding-bottom: 15px; font-family: 'Playfair Display', Georgia, serif; letter-spacing: 0.5px; position: relative; } .page-title:after { content: "❦"; position: absolute; bottom: -12px; left: 50%; font-size: 18px; color: #8d6e63; background: #fcf8f3; padding: 0 10px; transform: translateX(-50%); } .container { background-color: #fff9f5; border-radius: 8px; box-shadow: 0 3px 15px rgba(113, 66, 20, 0.1); padding: 25px; margin-top: 20px; margin-bottom: 20px; border: 1px solid #e8d9cb; } /* Tabs styling */ .tabs { display: flex; border-bottom: 1px solid #d9c7b8; margin-bottom: 25px; position: relative; } .tabs:before { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: linear-gradient(to right, transparent, #8d6e63, transparent); } .tab { padding: 12px 22px; text-decoration: none; color: #5d3511; margin-right: 5px; border-radius: 8px 8px 0 0; position: relative; transition: all 0.3s ease; font-family: 'Georgia', serif; } .tab:hover { background-color: #f1e6dd; color: #704214; text-decoration: none; } .tab.active { background-color: #704214; color: #f8f0e5; font-weight: 500; } .tab.overdue-tab { background-color: #f9e8e8; color: #a15950; } .tab.overdue-tab:hover { background-color: #f4d3d3; } /* 修改 count 样式,避免与顶部导航冲突 */ .tabs .count { background-color: rgba(113, 66, 20, 0.15); border-radius: 12px; padding: 2px 10px; font-size: 0.8em; margin-left: 8px; font-family: 'Arial', sans-serif; display: inline-block; position: static; width: auto; height: auto; } .tab.active .count { background-color: rgba(255, 243, 224, 0.3); } .count.overdue-count { background-color: rgba(161, 89, 80, 0.2); } /* Search and filters */ .search-card { margin-bottom: 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(113, 66, 20, 0.08); border: 1px solid #e8d9cb; background: linear-gradient(to bottom right, #fff, #fcf8f3); } .search-card .card-body { padding: 20px; } .search-form { margin-bottom: 0; } .search-card .form-control { border: 1px solid #d9c7b8; border-radius: 6px; color: #5d3511; background-color: #fff9f5; transition: all 0.3s ease; font-family: 'Georgia', serif; } .search-card .form-control:focus { border-color: #704214; box-shadow: 0 0 0 0.2rem rgba(113, 66, 20, 0.15); background-color: #fff; } .search-card .btn-outline-secondary { color: #704214; border-color: #d9c7b8; background-color: transparent; } .search-card .btn-outline-secondary:hover { color: #fff; background-color: #8d6e63; border-color: #8d6e63; } .clear-filters { display: block; width: 100%; text-align: center; font-style: italic; } /* Table styling */ .borrow-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(113, 66, 20, 0.05); border-radius: 8px; overflow: hidden; border: 1px solid #e8d9cb; } .borrow-table th, .borrow-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid #e8d9cb; vertical-align: middle; } /* 调整借阅用户列向左偏移15px */ .borrow-table th:nth-child(3), .borrow-table td:nth-child(3) { padding-right: 3px; } .borrow-table th { background-color: #f1e6dd; color: #5d3511; font-weight: 600; letter-spacing: 0.5px; } /* 状态列调整 - 居中并确保内容显示 */ .borrow-table th:nth-child(6) { text-align: center; } .borrow-table td:nth-child(6) { text-align: center; } .borrow-item:hover { background-color: #f8f0e5; } .borrow-item:last-child td { border-bottom: none; } .book-cover img { width: 65px; height: 90px; object-fit: cover; border-radius: 6px; box-shadow: 0 3px 8px rgba(113, 66, 20, 0.15); border: 2px solid #fff; transition: transform 0.3s ease; } .book-cover img:hover { transform: scale(1.05); } .book-title { font-weight: 600; font-family: 'Georgia', serif; } .book-title a { color: #5d3511; text-decoration: none; transition: color 0.3s ease; } .book-title a:hover { color: #a66321; text-decoration: underline; } .book-author { color: #8d6e63; font-size: 0.9em; margin-top: 5px; font-style: italic; } /* 修改借阅用户显示方式 */ .borrow-table .user-info { text-align: center; display: table-cell; vertical-align: middle; height: 100%; } .borrow-table .user-info a { color: #5d3511; text-decoration: none; font-weight: 600; transition: color 0.3s ease; display: block; margin-bottom: 8px; } .borrow-table .user-info a:hover { color: #a66321; text-decoration: underline; } .user-nickname { color: #8d6e63; font-size: 0.9em; display: block; margin-top: 0; } /* Badges and status indicators - 修复与顶部导航栏冲突 */ .borrow-table .badge { padding: 5px 12px; border-radius: 20px; font-weight: 500; font-size: 0.85em; letter-spacing: 0.5px; display: inline-block; margin-bottom: 5px; position: static; width: auto; height: auto; top: auto; right: auto; } /* 给状态列的徽章额外的特异性 */ .borrow-table td .badge { position: static; width: auto; height: auto; display: inline-block; font-size: 0.85em; border-radius: 20px; padding: 5px 12px; } .borrow-table .badge-primary { background-color: #704214; color: white; } .borrow-table .badge-success { background-color: #5b8a72; color: white; } .borrow-table .badge-danger { background-color: #a15950; color: white; } .borrow-table .badge-info { background-color: #6a8da9; color: white; } .borrow-table .badge-warning { background-color: #d4a76a; color: #4a3728; } .return-date { color: #8d6e63; font-size: 0.9em; margin-top: 5px; } /* 确保状态显示正确 */ .borrow-item td:nth-child(6) span.badge { min-width: 80px; } /* 只为表格中的操作按钮设置样式 */ .actions .btn { margin-right: 5px; margin-bottom: 6px; border-radius: 20px; padding: 8px 16px; transition: all 0.3s ease; font-family: 'Georgia', serif; letter-spacing: 0.5px; } .actions .btn-success { background-color: #5b8a72; border-color: #5b8a72; } .actions .btn-success:hover, .actions .btn-success:focus { background-color: #4a7561; border-color: #4a7561; } .actions .btn-warning { background-color: #d4a76a; border-color: #d4a76a; color: #4a3728; } .actions .btn-warning:hover, .actions .btn-warning:focus { background-color: #c29355; border-color: #c29355; color: #4a3728; } .actions .btn-primary { background-color: #704214; border-color: #704214; } .actions .btn-primary:hover, .actions .btn-primary:focus { background-color: #5d3511; border-color: #5d3511; box-shadow: 0 0 0 0.2rem rgba(113, 66, 20, 0.25); } .text-danger { color: #a15950 !important; } .overdue { background-color: rgba(161, 89, 80, 0.05); } /* Empty states */ .no-records { text-align: center; padding: 60px 20px; background-color: #f8f0e5; border-radius: 8px; margin: 25px 0; border: 1px dashed #d9c7b8; } .empty-icon { font-size: 4.5em; color: #d9c7b8; margin-bottom: 25px; } .empty-text { color: #8d6e63; margin-bottom: 25px; font-style: italic; font-size: 1.1em; } /* Pagination */ .pagination-container { display: flex; justify-content: center; margin-top: 25px; } .pagination .page-link { color: #5d3511; border-color: #e8d9cb; margin: 0 3px; border-radius: 4px; } .pagination .page-item.active .page-link { background-color: #704214; border-color: #704214; } .pagination .page-link:hover { background-color: #f1e6dd; color: #5d3511; } /* Modal customization */ .modal-content { border-radius: 8px; border: 1px solid #e8d9cb; box-shadow: 0 5px 20px rgba(113, 66, 20, 0.15); background-color: #fff9f5; } .modal-header { border-bottom: 1px solid #e8d9cb; background-color: #f1e6dd; border-radius: 8px 8px 0 0; } .modal-title { color: #5d3511; font-family: 'Georgia', serif; } .modal-footer { border-top: 1px solid #e8d9cb; } /* Decorative elements */ .container:before { content: ""; position: absolute; top: 0; right: 0; width: 150px; height: 150px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23d9c7b8' fill-opacity='0.2' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; z-index: -1; } /* Responsive design */ @media (max-width: 992px) { .tabs { flex-wrap: wrap; } .tab { margin-bottom: 8px; } } @media (max-width: 768px) { .tabs { flex-direction: column; border-bottom: none; } .tab { border-radius: 8px; margin-right: 0; margin-bottom: 8px; border: 1px solid #d9c7b8; } .borrow-table { display: block; overflow-x: auto; } .book-cover img { width: 50px; height: 70px; } .search-card .row { margin-bottom: 15px; } } .container .btn-primary { background-color: #704214; border-color: #704214; color: white; border-radius: 20px; } .container .btn-primary:hover, .container .btn-primary:focus { background-color: #5d3511; border-color: #5d3511; box-shadow: 0 0 0 0.2rem rgba(113, 66, 20, 0.25); }