mirror of
https://github.com/sassanix/Warracker.git
synced 2026-01-01 11:09:40 -06:00
b4855af43f
## [0.5.0] - 2025-03-07 ### Added - Enhanced filtering and sorting capabilities - Status filter (All, Active, Expiring Soon, Expired) - Multiple sorting options (Expiration Date, Purchase Date, Name) - Export filtered warranties as CSV - Improved filter controls layout - Mobile-responsive filter design - Multiple view options for warranty display - Grid view with card layout (default) - List view for compact horizontal display - Table view for structured data presentation - View preference saved between sessions - Responsive design for all view types - Optional purchase price tracking - Users can now add purchase prices to warranties - Price information displayed in warranty cards - Currency formatting with dollar sign - Included in warranty summary and exports ### Changed - Completely redesigned user interface - Modern card-based layout for warranties - Enhanced filter controls with improved styling - Better visual hierarchy with labeled filter groups - Custom dropdown styling with intuitive icons - Improved spacing and alignment throughout - Consistent color scheme and visual feedback - Responsive grid layout for warranty cards ### Fixed - Status indicator borders now correctly displayed for all warranty states - Green border for active warranties - Orange border for warranties expiring soon - Red border for expired warranties - Consistent status styling across all warranty cards - Form now resets to first tab after successful warranty submission - Manual filename now properly cleared when form is reset ## [0.4.0] - 2025-03-07 ### Added - Improved warranty creation process - Multi-step form with intuitive navigation - Progress indicator showing completion status - Enhanced validation with clear error messages - Summary review step before submission - Expiration date preview in summary - Responsive design for all device sizes ### Fixed - Progress indicator alignment issue in multi-step form - Contained indicator within form boundaries - Prevented overflow with improved CSS approach - Ensured consistent tab widths for better alignment - Improved tab navigation visual feedback ## [0.3.0] - 2025-03-07 ### Added - Product manual upload support - Users can now upload a second document for product manuals - Manual documents are displayed alongside invoices in the warranty details - Both add and edit forms support manual uploads - Product URL support - Users can now add website URLs for products - Links to product websites displayed in warranty cards - Easy access to product support and information pages ### Changed - Improved document link styling for consistency - Enhanced visual appearance of document links - Consistent styling between invoice and manual links - Better hover effects for document links - Fixed styling inconsistencies between document links - Improved warranty card layout - Document links now displayed side by side for better space utilization - Responsive design adapts to different screen sizes - More compact and organized appearance ### Fixed - Styling inconsistency between View Invoice and View Manual buttons - Removed unused CSS file to prevent styling conflicts
1929 lines
34 KiB
CSS
1929 lines
34 KiB
CSS
/* ===== GLOBAL STYLES ===== */
|
|
:root[data-theme="light"] {
|
|
--bg-color: #f5f5f5;
|
|
--card-bg: #ffffff;
|
|
--text-color: #333333;
|
|
--border-color: #e0e0e0;
|
|
--modal-backdrop: rgba(0, 0, 0, 0.5);
|
|
--loading-backdrop: rgba(255, 255, 255, 0.8);
|
|
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
|
|
--primary-color: #3498db;
|
|
--primary-dark: #2980b9;
|
|
--secondary-color: #2ecc71;
|
|
--danger-color: #e74c3c;
|
|
--warning-color: #f39c12;
|
|
--text-color: #333333;
|
|
--light-gray: #f5f5f5;
|
|
--medium-gray: #e0e0e0;
|
|
--dark-gray: #777777;
|
|
--white: #ffffff;
|
|
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
--border-radius: 8px;
|
|
--transition: all 0.3s ease;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--bg-color: #1a1a1a;
|
|
--card-bg: #2d2d2d;
|
|
--text-color: #e0e0e0;
|
|
--border-color: #404040;
|
|
--modal-backdrop: rgba(0, 0, 0, 0.7);
|
|
--loading-backdrop: rgba(0, 0, 0, 0.8);
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--primary-color: #4dabf7;
|
|
--primary-dark: #339af0;
|
|
--secondary-color: #40c057;
|
|
--danger-color: #fa5252;
|
|
--warning-color: #ff922b;
|
|
--light-gray: #2d2d2d;
|
|
--medium-gray: #404040;
|
|
--dark-gray: #909090;
|
|
--white: #2d2d2d;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-color);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ===== HEADER ===== */
|
|
header {
|
|
background-color: var(--card-bg);
|
|
box-shadow: var(--shadow);
|
|
padding: 20px 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
header .container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.app-title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.app-title h1 {
|
|
color: var(--primary-color);
|
|
font-size: 2.2rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.app-title i {
|
|
font-size: 2rem;
|
|
margin-right: 15px;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* ===== MAIN CONTENT ===== */
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ===== FORM PANEL ===== */
|
|
.form-panel {
|
|
background-color: var(--card-bg);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 25px;
|
|
}
|
|
|
|
/* Form Tabs */
|
|
.form-tabs {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
border-bottom: 2px solid var(--medium-gray);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-tabs::after {
|
|
display: none;
|
|
}
|
|
|
|
.form-tabs::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
height: 2px;
|
|
background-color: var(--secondary-color);
|
|
transition: all 0.3s ease;
|
|
width: 25%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.form-tabs[data-step="0"]::before {
|
|
left: 0;
|
|
}
|
|
|
|
.form-tabs[data-step="1"]::before {
|
|
left: 25%;
|
|
}
|
|
|
|
.form-tabs[data-step="2"]::before {
|
|
left: 50%;
|
|
}
|
|
|
|
.form-tabs[data-step="3"]::before {
|
|
left: 75%;
|
|
}
|
|
|
|
.form-tab {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 15px 10px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
color: var(--dark-gray);
|
|
transition: color 0.3s ease;
|
|
box-sizing: border-box;
|
|
width: 25%; /* Ensure each tab is exactly 25% width */
|
|
}
|
|
|
|
.form-tab:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.form-tab.active {
|
|
color: var(--primary-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-tab.completed {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.form-tab.completed::after {
|
|
content: '\f00c';
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.form-tab i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
animation: fade-in 0.3s ease;
|
|
}
|
|
|
|
.tab-navigation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--medium-gray);
|
|
}
|
|
|
|
.tab-navigation .btn {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.tab-navigation .btn i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.tab-navigation .btn:last-child i {
|
|
margin-right: 0;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
input.invalid {
|
|
border-color: var(--danger-color);
|
|
box-shadow: 0 0 0 1px var(--danger-color);
|
|
animation: shake 0.3s ease;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
/* Progress indicator */
|
|
.form-tabs {
|
|
display: flex;
|
|
border-bottom: 2px solid var(--medium-gray);
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.form-tabs::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
height: 2px;
|
|
background-color: var(--secondary-color);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.form-tabs[data-step="0"]::after {
|
|
width: calc(100% / 3);
|
|
}
|
|
|
|
.form-tabs[data-step="1"]::after {
|
|
width: calc(200% / 3);
|
|
}
|
|
|
|
.form-tabs[data-step="2"]::after {
|
|
width: 100%;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.form-panel h2 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 20px;
|
|
font-size: 1.5rem;
|
|
border-bottom: 2px solid var(--medium-gray);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid var(--medium-gray);
|
|
border-radius: var(--border-radius);
|
|
font-size: 1rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
|
|
}
|
|
|
|
.file-input-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.file-input-label {
|
|
display: block;
|
|
background-color: var(--primary-color);
|
|
color: var(--white);
|
|
text-align: center;
|
|
padding: 12px;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.file-input-label:hover {
|
|
background-color: var(--primary-dark);
|
|
}
|
|
|
|
.file-input-label i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.file-input {
|
|
position: absolute;
|
|
font-size: 100px;
|
|
opacity: 0;
|
|
right: 0;
|
|
top: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.file-name {
|
|
margin-top: 8px;
|
|
font-size: 0.9rem;
|
|
color: var(--dark-gray);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
border: none;
|
|
padding: 12px 25px;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
border-radius: var(--border-radius);
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary {
|
|
color: var(--white);
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-dark);
|
|
}
|
|
|
|
.btn-secondary {
|
|
color: var(--white);
|
|
background-color: var(--secondary-color);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #27ae60;
|
|
}
|
|
|
|
.btn-danger {
|
|
color: var(--white);
|
|
background-color: var(--danger-color);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c0392b;
|
|
}
|
|
|
|
/* ===== WARRANTIES LIST ===== */
|
|
.warranties-panel {
|
|
background-color: var(--card-bg);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 25px;
|
|
}
|
|
|
|
.warranties-panel h2 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 20px;
|
|
font-size: 1.5rem;
|
|
border-bottom: 2px solid var(--medium-gray);
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.refresh-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--primary-color);
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.refresh-btn:hover {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.search-box {
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 12px 15px 12px 40px;
|
|
border: 1px solid var(--medium-gray);
|
|
border-radius: var(--border-radius);
|
|
font-size: 1rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.search-box input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
|
|
}
|
|
|
|
.search-box i {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--dark-gray);
|
|
}
|
|
|
|
.warranties-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.warranty-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
transition: var(--transition);
|
|
border: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.warranty-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.warranty-card.expired {
|
|
border-left: 4px solid var(--danger-color);
|
|
}
|
|
|
|
.warranty-card.expiring-soon {
|
|
border-left: 4px solid var(--warning-color);
|
|
}
|
|
|
|
.warranty-card.active {
|
|
border-left: 4px solid var(--secondary-color);
|
|
}
|
|
|
|
.warranty-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px;
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.warranty-title {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.warranty-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
color: var(--dark-gray);
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.edit-btn:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.warranty-details {
|
|
padding: 15px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.warranty-details div {
|
|
margin-bottom: 8px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.warranty-details span {
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.warranty-status {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.status-active {
|
|
background-color: rgba(46, 204, 113, 0.15);
|
|
color: #27ae60;
|
|
}
|
|
|
|
.status-expired {
|
|
background-color: rgba(231, 76, 60, 0.15);
|
|
color: #c0392b;
|
|
}
|
|
|
|
.status-expiring {
|
|
background-color: rgba(241, 196, 15, 0.15);
|
|
color: #f39c12;
|
|
}
|
|
|
|
.serial-numbers {
|
|
margin-top: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.serial-numbers strong {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.serial-numbers ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.serial-numbers li {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
/* ===== MODAL ===== */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--modal-backdrop);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.modal-backdrop.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.modal {
|
|
background-color: var(--card-bg);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
width: 90%;
|
|
max-width: 500px;
|
|
transform: translateY(-20px);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.modal-backdrop.active .modal {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid var(--medium-gray);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.2rem;
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
}
|
|
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
color: var(--dark-gray);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 15px 20px;
|
|
border-top: 1px solid var(--medium-gray);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.modal-footer .btn {
|
|
width: auto;
|
|
}
|
|
|
|
/* ===== TOAST NOTIFICATIONS ===== */
|
|
.toast-container {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.toast {
|
|
min-width: 250px;
|
|
margin-bottom: 10px;
|
|
padding: 15px 20px;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
animation: slide-in 0.3s ease, fade-out 0.3s ease 2.7s forwards;
|
|
}
|
|
|
|
@keyframes slide-in {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
.toast-success {
|
|
background-color: var(--secondary-color);
|
|
color: var(--white);
|
|
}
|
|
|
|
.toast-error {
|
|
background-color: var(--danger-color);
|
|
color: var(--white);
|
|
}
|
|
|
|
.toast-warning {
|
|
background-color: #f39c12;
|
|
color: var(--white);
|
|
}
|
|
|
|
.toast-info {
|
|
background-color: var(--primary-color);
|
|
color: var(--white);
|
|
}
|
|
|
|
.toast-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--white);
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.toast-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ===== LOADING SPINNER ===== */
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.loading-spinner:after {
|
|
content: " ";
|
|
display: block;
|
|
border-radius: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 8px;
|
|
box-sizing: border-box;
|
|
border: 32px solid var(--primary-color);
|
|
border-color: var(--primary-color) transparent var(--primary-color) transparent;
|
|
animation: loading-spinner 1.2s infinite;
|
|
}
|
|
|
|
@keyframes loading-spinner {
|
|
0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
|
|
50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--loading-backdrop);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1002;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.loading-container.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ===== EMPTY STATE ===== */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--dark-gray);
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 3rem;
|
|
margin-bottom: 15px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.empty-state h3 {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.empty-state p {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* ===== RESPONSIVE ADJUSTMENTS ===== */
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-panel, .warranties-panel {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.warranty-header {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.warranty-actions {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.document-links-row {
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.invoice-link, .manual-link, .product-link {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* ===== SETTINGS MENU ===== */
|
|
.settings-container {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.settings-btn {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--primary-color);
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.settings-btn:hover {
|
|
transform: rotate(30deg);
|
|
background-color: var(--primary-color);
|
|
color: var(--white);
|
|
}
|
|
|
|
.settings-menu {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
background-color: var(--card-bg);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 15px;
|
|
min-width: 220px;
|
|
z-index: 100;
|
|
display: none;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.settings-menu.active {
|
|
display: block;
|
|
animation: slide-in-top 0.3s forwards;
|
|
}
|
|
|
|
@keyframes slide-in-top {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.settings-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.settings-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.settings-item span {
|
|
font-weight: 500;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Toggle Switch */
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--medium-gray);
|
|
transition: var(--transition);
|
|
border-radius: 34px;
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.toggle-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: var(--white);
|
|
transition: var(--transition);
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
input:checked + .toggle-slider {
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
input:checked + .toggle-slider:before {
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
.toggle-slider:after {
|
|
content: '☀️';
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 6px;
|
|
font-size: 12px;
|
|
color: var(--white);
|
|
opacity: 0.7;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
input:checked + .toggle-slider:after {
|
|
content: '🌙';
|
|
left: auto;
|
|
right: 6px;
|
|
}
|
|
|
|
/* ===== UTILITIES ===== */
|
|
.text-danger {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.text-warning {
|
|
color: #f39c12;
|
|
}
|
|
|
|
.text-success {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.mt-10 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.mt-20 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.mb-10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.mb-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Navigation Links */
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.nav-link {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-link i {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Status Page Styles */
|
|
.status-content {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.status-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.status-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.status-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.status-card[data-status="active"] .card-icon {
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.status-card[data-status="expiring"] .card-icon {
|
|
color: #FF9800;
|
|
}
|
|
|
|
.status-card[data-status="expired"] .card-icon {
|
|
color: #F44336;
|
|
}
|
|
|
|
.status-card[data-status="total"] .card-icon {
|
|
color: #3498db;
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 2.5rem;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.card-content h3 {
|
|
margin: 0 0 5px 0;
|
|
font-size: 1rem;
|
|
color: var(--dark-gray);
|
|
}
|
|
|
|
.card-content .count {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.charts-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.chart-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chart-card h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
font-size: 1.2rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.chart-container {
|
|
height: 300px;
|
|
position: relative;
|
|
}
|
|
|
|
.recent-expirations {
|
|
background-color: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.recent-expirations h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
font-size: 1.2rem;
|
|
color: var(--text-color);
|
|
text-align: left;
|
|
}
|
|
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#recentExpirationsTable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
#recentExpirationsTable th,
|
|
#recentExpirationsTable td {
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Define column widths */
|
|
#recentExpirationsTable th:nth-child(1),
|
|
#recentExpirationsTable td:nth-child(1) {
|
|
width: 25%;
|
|
text-align: left;
|
|
}
|
|
|
|
#recentExpirationsTable th:nth-child(2),
|
|
#recentExpirationsTable td:nth-child(2) {
|
|
width: 20%;
|
|
text-align: left;
|
|
}
|
|
|
|
#recentExpirationsTable th:nth-child(3),
|
|
#recentExpirationsTable td:nth-child(3) {
|
|
width: 20%;
|
|
text-align: left;
|
|
}
|
|
|
|
#recentExpirationsTable th:nth-child(4),
|
|
#recentExpirationsTable td:nth-child(4) {
|
|
width: 20%;
|
|
text-align: left;
|
|
}
|
|
|
|
#recentExpirationsTable th:nth-child(5),
|
|
#recentExpirationsTable td:nth-child(5) {
|
|
width: 15%;
|
|
text-align: left;
|
|
}
|
|
|
|
#recentExpirationsTable thead th {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
color: var(--text-color);
|
|
font-weight: 600;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
#recentExpirationsTable tbody tr:hover {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
#recentExpirationsTable .no-data {
|
|
text-align: center;
|
|
color: var(--dark-gray);
|
|
padding: 30px;
|
|
}
|
|
|
|
/* Status styling */
|
|
.status-expired {
|
|
color: #F44336;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-expiring {
|
|
color: #FF9800;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
background-color: rgba(255, 152, 0, 0.1);
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-active {
|
|
color: #4CAF50;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
background-color: rgba(76, 175, 80, 0.1);
|
|
display: inline-block;
|
|
}
|
|
|
|
tr.status-expired {
|
|
background-color: rgba(244, 67, 54, 0.05);
|
|
}
|
|
|
|
tr.status-expiring {
|
|
background-color: rgba(255, 152, 0, 0.05);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.status-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.charts-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 250px;
|
|
}
|
|
|
|
#recentExpirationsTable th:nth-child(2),
|
|
#recentExpirationsTable td:nth-child(2) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.status-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#recentExpirationsTable th:nth-child(3),
|
|
#recentExpirationsTable td:nth-child(3) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Error message on status page */
|
|
.error-message {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
background-color: rgba(244, 67, 54, 0.05);
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.error-message i {
|
|
font-size: 3rem;
|
|
color: #F44336;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.error-message h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 10px;
|
|
color: #F44336;
|
|
}
|
|
|
|
.error-message p {
|
|
color: var(--text-color);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.error-message p:last-child {
|
|
font-family: monospace;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Fix for table alignment */
|
|
.recent-expirations table {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.recent-expirations thead,
|
|
.recent-expirations tbody,
|
|
.recent-expirations tr,
|
|
.recent-expirations th,
|
|
.recent-expirations td {
|
|
display: revert;
|
|
text-align: left;
|
|
}
|
|
|
|
.settings-link {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
padding: 5px 0;
|
|
transition: var(--transition);
|
|
width: 100%;
|
|
}
|
|
|
|
.settings-link i {
|
|
margin-right: 10px;
|
|
font-size: 1rem;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.settings-link:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.dashboard-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dashboard-header h2 {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.table-header h3 {
|
|
margin: 0;
|
|
font-size: 1.2rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-options {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.filter-select {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--card-bg);
|
|
color: var(--text-color);
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.filter-select:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
|
}
|
|
|
|
.sortable {
|
|
cursor: pointer;
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
|
|
.sortable i {
|
|
font-size: 0.8rem;
|
|
margin-left: 5px;
|
|
opacity: 0.5;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.sortable:hover i {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sortable.sort-asc i:before {
|
|
content: "\f0de"; /* fa-sort-up */
|
|
}
|
|
|
|
.sortable.sort-desc i:before {
|
|
content: "\f0dd"; /* fa-sort-down */
|
|
}
|
|
|
|
/* Export button */
|
|
.export-btn {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-color);
|
|
padding: 6px 12px;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.9rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Animation for refresh button */
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.refresh-btn.loading i {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Document links */
|
|
.document-link-container {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.document-links-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 15px;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.invoice-link, .manual-link, .product-link {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
color: var(--primary-color) !important;
|
|
text-decoration: none !important;
|
|
font-weight: 500 !important;
|
|
padding: 5px 10px !important;
|
|
background-color: var(--light-gray) !important;
|
|
border-radius: var(--border-radius) !important;
|
|
transition: var(--transition) !important;
|
|
border: none !important;
|
|
margin: 0 !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.invoice-link i, .manual-link i, .product-link i {
|
|
margin-right: 5px !important;
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.invoice-link:hover, .manual-link:hover, .product-link:hover {
|
|
text-decoration: none !important;
|
|
background-color: var(--medium-gray) !important;
|
|
color: var(--primary-dark) !important;
|
|
}
|
|
.validation-message {
|
|
color: var(--danger-color);
|
|
font-size: 0.85rem;
|
|
margin-top: 5px;
|
|
animation: fade-in 0.3s ease;
|
|
}
|
|
|
|
/* Improve the visual feedback for invalid inputs */
|
|
input.invalid {
|
|
border-color: var(--danger-color);
|
|
box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.25);
|
|
background-color: rgba(231, 76, 60, 0.05);
|
|
}
|
|
|
|
/* Add a subtle shake animation for validation errors */
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
input.invalid {
|
|
animation: shake 0.4s ease-in-out;
|
|
}
|
|
.summary-container {
|
|
background-color: var(--light-gray);
|
|
border-radius: var(--border-radius);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.summary-section {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid var(--medium-gray);
|
|
}
|
|
|
|
.summary-section:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.summary-section h4 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 15px;
|
|
font-size: 1.1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.summary-section h4 i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.summary-item {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.summary-label {
|
|
font-weight: 500;
|
|
width: 150px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.summary-value {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.summary-value ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* Filter controls */
|
|
.filter-controls {
|
|
margin-bottom: 20px;
|
|
background-color: var(--card-bg);
|
|
border-radius: var(--border-radius);
|
|
padding: 15px;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.search-box i {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--dark-gray);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 10px 10px 10px 35px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
font-size: 0.95rem;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.search-box input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
|
}
|
|
|
|
.filter-options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 5px;
|
|
color: var(--dark-gray);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-select {
|
|
padding: 10px 12px;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
background-size: 1em;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.filter-select:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
|
}
|
|
|
|
.export-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 15px;
|
|
border-radius: var(--border-radius);
|
|
border: none;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
height: 40px;
|
|
align-self: flex-end;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background-color: var(--primary-dark);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.export-btn i {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Responsive filter controls */
|
|
@media (max-width: 768px) {
|
|
.filter-options {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
gap: 15px;
|
|
}
|
|
|
|
.filter-group {
|
|
width: 100%;
|
|
}
|
|
|
|
.filter-select, .export-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.export-btn {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
/* View Switcher */
|
|
.view-switcher {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.view-buttons {
|
|
display: flex;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.view-btn {
|
|
background-color: var(--bg-color);
|
|
border: none;
|
|
color: var(--dark-gray);
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.view-btn:not(:last-child) {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.view-btn:hover {
|
|
background-color: var(--light-gray);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.view-btn.active {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
/* Grid View (Default) */
|
|
.warranties-list.grid-view {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* List View */
|
|
.warranties-list.list-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.list-view .warranty-card {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-view .warranty-header {
|
|
width: 200px;
|
|
border-bottom: none;
|
|
border-right: 1px solid var(--border-color);
|
|
height: 100%;
|
|
padding: 15px;
|
|
}
|
|
|
|
.list-view .warranty-details {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.list-view .warranty-details > div {
|
|
margin-bottom: 0;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.list-view .document-links-row {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Table View */
|
|
.warranties-list.table-view {
|
|
display: table;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.table-view .warranty-card {
|
|
display: table-row;
|
|
border: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.table-view .warranty-card.expired {
|
|
border-left: none;
|
|
background-color: rgba(231, 76, 60, 0.05);
|
|
}
|
|
|
|
.table-view .warranty-card.expiring-soon {
|
|
border-left: none;
|
|
background-color: rgba(241, 196, 15, 0.05);
|
|
}
|
|
|
|
.table-view .warranty-card.active {
|
|
border-left: none;
|
|
background-color: rgba(46, 204, 113, 0.05);
|
|
}
|
|
|
|
.table-view .warranty-header,
|
|
.table-view .warranty-details {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.table-view .warranty-header {
|
|
width: 200px;
|
|
border-bottom: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.table-view .warranty-status {
|
|
margin: 0;
|
|
}
|
|
|
|
.table-view .document-links-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.table-view .serial-numbers {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Table Headers */
|
|
.table-view-header {
|
|
display: none;
|
|
}
|
|
|
|
.table-view-header.visible {
|
|
display: table-header-group;
|
|
}
|
|
|
|
.table-view-header th {
|
|
text-align: left;
|
|
padding: 12px 15px;
|
|
background-color: var(--light-gray);
|
|
font-weight: 600;
|
|
color: var(--text-color);
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.view-switcher {
|
|
width: 100%;
|
|
}
|
|
|
|
.list-view .warranty-card,
|
|
.table-view .warranty-card {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.list-view .warranty-header,
|
|
.table-view .warranty-header {
|
|
width: 100%;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.list-view .warranty-details,
|
|
.table-view .warranty-details {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.list-view .document-links-row,
|
|
.table-view .document-links-row {
|
|
margin-left: 0;
|
|
margin-top: 10px;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Price input styling */
|
|
.price-input-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.currency-symbol {
|
|
position: absolute;
|
|
left: 12px;
|
|
color: var(--dark-gray);
|
|
font-weight: 500;
|
|
z-index: 1;
|
|
}
|
|
|
|
.price-input-wrapper .form-control {
|
|
padding-left: 25px;
|
|
} |