/* DoH MCP Server - Additional Styles */
/* 响应式设计优化 */
@media (max-width: 480px) {
.header h1 {
font-size: 1.5rem;
}
.header p {
font-size: 1rem;
}
.main-content {
padding: 15px;
}
.query-form {
padding: 15px;
}
.stats {
grid-template-columns: 1fr;
}
}
/* 加载动画增强 */
.spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 20px auto;
}
/* 成功/失败状态指示器 */
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.status-success {
background-color: #28a745;
}
.status-failed {
background-color: #dc3545;
}
.status-warning {
background-color: #ffc107;
}
/* 工具提示 */
.tooltip {
position: relative;
cursor: help;
}
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 0.8rem;
white-space: nowrap;
z-index: 1000;
}
/* 代码块样式 */
.code-block {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 15px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
margin: 10px 0;
overflow-x: auto;
}
/* 表格样式 */
.data-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.data-table th,
.data-table td {
border: 1px solid #e9ecef;
padding: 12px;
text-align: left;
}
.data-table th {
background: #f8f9fa;
font-weight: 600;
color: #495057;
}
.data-table tr:nth-child(even) {
background: #f8f9fa;
}
/* 按钮变体 */
.btn-secondary {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.btn-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.btn-danger {
background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
}
/* 输入验证状态 */
.form-group input.invalid,
.form-group select.invalid {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.form-group input.valid,
.form-group select.valid {
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}
/* 折叠面板 */
.collapsible {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
margin: 10px 0;
}
.collapsible-header {
padding: 15px;
cursor: pointer;
font-weight: 600;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.collapsible-header:hover {
background: #e9ecef;
}
.collapsible-content {
padding: 0 15px 15px;
display: none;
}
.collapsible.active .collapsible-content {
display: block;
}
.collapsible-arrow {
transition: transform 0.3s ease;
}
.collapsible.active .collapsible-arrow {
transform: rotate(180deg);
}
/* 性能优化 */
* {
will-change: auto;
}
.btn:hover,
.tab-button:hover,
.form-group input:focus,
.form-group select:focus {
will-change: transform, box-shadow, border-color;
}
/* 打印样式 */
@media print {
.header {
background: none !important;
color: black !important;
-webkit-print-color-adjust: exact;
}
.btn {
display: none;
}
.results-tabs {
display: none;
}
.query-form {
background: none !important;
border: 1px solid #333;
}
}
