196 lines
3.2 KiB
CSS
196 lines
3.2 KiB
CSS
.card-box-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-box-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #e9ecef;
|
|
}
|
|
|
|
.card-box-header h3 {
|
|
color: #495057;
|
|
margin: 0;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.box-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.uri-display {
|
|
background: #e3f2fd;
|
|
border: 1px solid #bbdefb;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.uri-display p {
|
|
margin: 0;
|
|
color: #1565c0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.uri-display code {
|
|
background: #ffffff;
|
|
border: 1px solid #90caf9;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 12px;
|
|
color: #0d47a1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.json-button,
|
|
.refresh-button,
|
|
.retry-button,
|
|
.delete-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.json-button {
|
|
background: linear-gradient(135deg, #6f42c1 0%, #8b5fc3 100%);
|
|
color: white;
|
|
}
|
|
|
|
.json-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4);
|
|
}
|
|
|
|
.refresh-button {
|
|
background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
|
|
color: white;
|
|
}
|
|
|
|
.refresh-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
|
|
}
|
|
|
|
.retry-button {
|
|
background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
|
|
color: white;
|
|
}
|
|
|
|
.retry-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(253, 126, 20, 0.4);
|
|
}
|
|
|
|
.delete-button {
|
|
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
|
color: white;
|
|
}
|
|
|
|
.delete-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
|
|
}
|
|
|
|
.delete-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.json-display {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.json-display h4 {
|
|
color: #495057;
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.json-content {
|
|
background: #ffffff;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 12px;
|
|
color: #495057;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.box-stats {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.box-stats p {
|
|
margin: 0;
|
|
color: #495057;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.box-card-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.card-info {
|
|
margin-top: 8px;
|
|
color: #6c757d;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.empty-box {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #6c757d;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.empty-box p {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.loading,
|
|
.error {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #6c757d;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.error {
|
|
color: #dc3545;
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
border-radius: 8px;
|
|
} |