121 lines
2.4 KiB
CSS
121 lines
2.4 KiB
CSS
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
background-color: #121212;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.container {
|
|
padding: 20px;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
}
|
|
|
|
h1 {
|
|
color: #1DB954; /* Spotify Green */
|
|
text-align: center;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
background-color: #1e1e1e;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #333;
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #282828;
|
|
cursor: pointer;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #222;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pagination button, .pagination select {
|
|
padding: 8px 12px;
|
|
margin: 0 5px;
|
|
background-color: #1DB954;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pagination button:disabled {
|
|
background-color: #555;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.filters {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
}
|
|
|
|
.filters label, .filters select, .filters input {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.filters select, .filters input {
|
|
padding: 8px;
|
|
background-color: #282828;
|
|
color: #e0e0e0;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.status-COMPLETED { color: #1DB954; font-weight: bold; }
|
|
.status-ERROR { color: #FF4136; font-weight: bold; }
|
|
.status-CANCELLED { color: #AAAAAA; }
|
|
|
|
.error-message-toggle {
|
|
cursor: pointer;
|
|
color: #FF4136; /* Red for error indicator */
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.error-details {
|
|
display: none; /* Hidden by default */
|
|
white-space: pre-wrap; /* Preserve formatting */
|
|
background-color: #303030;
|
|
padding: 5px;
|
|
margin-top: 5px;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Styling for the Details icon button in the table */
|
|
.details-btn {
|
|
background-color: transparent; /* Or a subtle color like #282828 */
|
|
border: none;
|
|
border-radius: 50%; /* Make it circular */
|
|
padding: 5px; /* Adjust padding to control size */
|
|
cursor: pointer;
|
|
display: inline-flex; /* Important for aligning the image */
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.details-btn img {
|
|
width: 16px; /* Icon size */
|
|
height: 16px;
|
|
filter: invert(1); /* Make icon white if it's dark, adjust if needed */
|
|
}
|
|
|
|
.details-btn:hover {
|
|
background-color: #333; /* Darker on hover */
|
|
} |