2348 lines
73 KiB
CSS
2348 lines
73 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
|
||
/* 自定义样式文件: status-grid */
|
||
#poolGridContainer {
|
||
position: relative; /* 仅用于定位内部的Canvas */
|
||
}
|
||
#poolGridContainer canvas {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
/* [核心UI修复] 为 Font Awesome 的 fa-spin 类，注入旋转动画 */
|
||
.fa-spin {
|
||
-webkit-animation: fa-spin 2s infinite linear;
|
||
animation: fa-spin 2s infinite linear;
|
||
}
|
||
@-webkit-keyframes fa-spin {
|
||
0% {
|
||
-webkit-transform: rotate(0deg);
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
-webkit-transform: rotate(359deg);
|
||
transform: rotate(359deg);
|
||
}
|
||
}
|
||
@keyframes fa-spin {
|
||
0% {
|
||
-webkit-transform: rotate(0deg);
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
-webkit-transform: rotate(359deg);
|
||
transform: rotate(359deg);
|
||
}
|
||
}
|
||
|
||
/* ***base*** */
|
||
|
||
.glass-card {
|
||
background: rgba(255, 255, 255, 0.95); /* High opacity white for light theme */
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(0, 0, 0, 0.08); /* Light gray border */
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.bg-gradient {
|
||
background: #ffffff; /* Clean white background */
|
||
}
|
||
/* Scrollbar styling */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(243, 244, 246, 0.8); /* bg-gray-100 with opacity */
|
||
border-radius: 10px;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(107, 114, 128, 0.6); /* gray-500 for light theme */
|
||
border-radius: 10px;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(75, 85, 99, 0.8); /* gray-600 for light theme */
|
||
}
|
||
/* Basic modal styles */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 50;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0,0,0,0.5);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
.modal.show {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Global modal content styling for light theme consistency */
|
||
.modal .w-full[style*="background-color: rgba(70, 50, 150"],
|
||
.modal .w-full[style*="background-color: rgba(80, 60, 160"] {
|
||
background-color: rgba(255, 255, 255, 0.98) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
|
||
}
|
||
|
||
/* Global modal text color fixes */
|
||
.modal .text-gray-100, .modal h2.text-gray-100, .modal h3.text-gray-100 {
|
||
color: #1f2937 !important; /* gray-800 */
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.modal .text-gray-200, .modal .text-gray-300 {
|
||
color: #6b7280 !important; /* gray-500 */
|
||
}
|
||
|
||
.modal .text-gray-300:hover {
|
||
color: #374151 !important; /* gray-700 */
|
||
}
|
||
|
||
/* Global modal button styling */
|
||
.modal .bg-violet-600, .modal button.bg-violet-600 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.modal .bg-violet-600:hover, .modal button.bg-violet-600:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Global modal blue button styling */
|
||
.modal .bg-blue-500, .modal button.bg-blue-500,
|
||
.modal .bg-blue-600, .modal button.bg-blue-600,
|
||
.modal .bg-blue-700, .modal button.bg-blue-700 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.modal .bg-blue-500:hover, .modal button.bg-blue-500:hover,
|
||
.modal .bg-blue-600:hover, .modal button.bg-blue-600:hover,
|
||
.modal .bg-blue-700:hover, .modal button.bg-blue-700:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Global modal red button styling */
|
||
.modal .bg-red-500, .modal button.bg-red-500,
|
||
.modal .bg-red-600, .modal button.bg-red-600,
|
||
.modal .bg-red-700, .modal button.bg-red-700 {
|
||
background-color: #f87171 !important; /* red-400 - bright light red */
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.modal .bg-red-500:hover, .modal button.bg-red-500:hover,
|
||
.modal .bg-red-600:hover, .modal button.bg-red-600:hover,
|
||
.modal .bg-red-700:hover, .modal button.bg-red-700:hover {
|
||
background-color: #ef4444 !important; /* red-500 - darker bright light red */
|
||
}
|
||
|
||
/* Global modal gray button styling */
|
||
.modal .bg-gray-500, .modal button.bg-gray-500,
|
||
.modal .bg-gray-600, .modal button.bg-gray-600,
|
||
.modal .bg-gray-700, .modal button.bg-gray-700 {
|
||
background-color: #e5e7eb !important; /* gray-200 - light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
}
|
||
|
||
.modal .bg-gray-500:hover, .modal button.bg-gray-500:hover,
|
||
.modal .bg-gray-600:hover, .modal button.bg-gray-600:hover,
|
||
.modal .bg-gray-700:hover, .modal button.bg-gray-700:hover {
|
||
background-color: #d1d5db !important; /* gray-300 - darker light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
}
|
||
|
||
/* Comprehensive button contrast fixes */
|
||
/* Ensure all dark background buttons have white text */
|
||
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
|
||
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900,
|
||
.bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900,
|
||
.bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900,
|
||
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900,
|
||
.bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900,
|
||
.bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900,
|
||
.bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-teal-800, .bg-teal-900,
|
||
.bg-gray-700, .bg-gray-800, .bg-gray-900,
|
||
.bg-slate-500, .bg-slate-600, .bg-slate-700, .bg-slate-800, .bg-slate-900 {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Ensure all light background buttons have dark text */
|
||
.bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
|
||
.bg-white, .bg-transparent {
|
||
color: #374151 !important; /* gray-700 */
|
||
}
|
||
|
||
/* Fix button children text inheritance */
|
||
.bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *, .bg-blue-800 *, .bg-blue-900 *,
|
||
.bg-red-500 *, .bg-red-600 *, .bg-red-700 *, .bg-red-800 *, .bg-red-900 *,
|
||
.bg-green-500 *, .bg-green-600 *, .bg-green-700 *, .bg-green-800 *, .bg-green-900 *,
|
||
.bg-purple-500 *, .bg-purple-600 *, .bg-purple-700 *, .bg-purple-800 *, .bg-purple-900 *,
|
||
.bg-violet-500 *, .bg-violet-600 *, .bg-violet-700 *, .bg-violet-800 *, .bg-violet-900 *,
|
||
.bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 *, .bg-sky-800 *, .bg-sky-900 *,
|
||
.bg-teal-500 *, .bg-teal-600 *, .bg-teal-700 *, .bg-teal-800 *, .bg-teal-900 *,
|
||
.bg-gray-700 *, .bg-gray-800 *, .bg-gray-900 *,
|
||
.bg-slate-500 *, .bg-slate-600 *, .bg-slate-700 *, .bg-slate-800 *, .bg-slate-900 * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
/* Global form element styling for consistency */
|
||
select, input[type="text"], input[type="number"], input[type="search"],
|
||
input[type="email"], input[type="password"], input[type="datetime-local"],
|
||
textarea, .form-input, .form-select {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
border-radius: 0.375rem !important; /* rounded-md */
|
||
}
|
||
|
||
select:focus, input:focus, textarea:focus,
|
||
.form-input:focus, .form-select:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* Fix dropdown option styling */
|
||
select option {
|
||
background-color: rgba(255, 255, 255, 0.98) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
padding: 8px !important;
|
||
}
|
||
|
||
/* Fix pagination controls globally */
|
||
.pagination-button, .pagination a, .pagination button {
|
||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||
transition: all 0.15s ease-in-out !important;
|
||
}
|
||
|
||
.pagination-button:hover, .pagination a:hover, .pagination button:hover {
|
||
background-color: rgba(229, 231, 235, 1) !important; /* gray-200 */
|
||
border-color: rgba(0, 0, 0, 0.12) !important;
|
||
transform: translateY(-1px) !important;
|
||
}
|
||
|
||
.pagination-button.active, .pagination a.active, .pagination button.active {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
color: #ffffff !important;
|
||
border-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
font-weight: 600 !important;
|
||
}
|
||
/* Loading spinner */
|
||
.loading-spin {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
/* Notification */
|
||
.notification {
|
||
position: fixed;
|
||
bottom: 5rem; /* Adjusted from bottom-20 */
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 0.75rem 1.25rem; /* px-5 py-3 */
|
||
border-radius: 0.5rem; /* rounded-lg */
|
||
background-color: rgba(34, 197, 94, 0.95); /* green-500 for success */
|
||
color: white;
|
||
font-weight: 500; /* font-medium */
|
||
z-index: 1000; /* Increased z-index */
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
.notification.show {
|
||
opacity: 1;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
.notification.error {
|
||
background-color: rgba(239, 68, 68, 0.95); /* red-500 for error */
|
||
}
|
||
/* Scroll buttons */
|
||
.scroll-buttons {
|
||
position: fixed;
|
||
right: 1.25rem; /* right-5 */
|
||
bottom: 5rem; /* bottom-20 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem; /* gap-2 */
|
||
z-index: 10;
|
||
}
|
||
.scroll-button {
|
||
width: 2.5rem; /* w-10 */
|
||
height: 2.5rem; /* h-10 */
|
||
background-color: #3b82f6; /* blue-500 - light blue */
|
||
color: white;
|
||
border-radius: 9999px; /* rounded-full */
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
.scroll-button:hover {
|
||
background-color: #2563eb; /* blue-600 - darker light blue */
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
|
||
}
|
||
|
||
/* Global overrides for light theme consistency */
|
||
.text-gray-200, .text-gray-300, .text-gray-400 {
|
||
color: #6b7280 !important; /* gray-500 for better contrast */
|
||
}
|
||
|
||
/* Navigation and header improvements */
|
||
.bg-primary-600, .bg-primary-700 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.text-primary-600, .text-primary-700 {
|
||
color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.border-primary-500, .focus\\:border-primary-500 {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
.ring-primary-200, .focus\\:ring-primary-200 {
|
||
--tw-ring-color: rgba(59, 130, 246, 0.2) !important; /* blue-500 with opacity */
|
||
}
|
||
|
||
/* Global purple to blue conversion */
|
||
.bg-violet-50, .bg-violet-100, .bg-violet-200, .bg-violet-300, .bg-violet-400, .bg-violet-500, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.text-violet-50, .text-violet-100, .text-violet-200, .text-violet-300, .text-violet-400, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900 {
|
||
color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.border-violet-50, .border-violet-100, .border-violet-200, .border-violet-300, .border-violet-400, .border-violet-500, .border-violet-600, .border-violet-700, .border-violet-800, .border-violet-900 {
|
||
border-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
/* Global button color overrides */
|
||
/* Blue buttons to light blue */
|
||
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
|
||
button.bg-blue-500, button.bg-blue-600, button.bg-blue-700, button.bg-blue-800, button.bg-blue-900 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.bg-blue-500:hover, .bg-blue-600:hover, .bg-blue-700:hover, .bg-blue-800:hover, .bg-blue-900:hover,
|
||
button.bg-blue-500:hover, button.bg-blue-600:hover, button.bg-blue-700:hover, button.bg-blue-800:hover, button.bg-blue-900:hover,
|
||
.hover\\:bg-blue-600:hover, .hover\\:bg-blue-700:hover, .hover\\:bg-blue-800:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Red buttons to bright light red */
|
||
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900,
|
||
button.bg-red-500, button.bg-red-600, button.bg-red-700, button.bg-red-800, button.bg-red-900 {
|
||
background-color: #f87171 !important; /* red-400 - bright light red */
|
||
}
|
||
|
||
.bg-red-500:hover, .bg-red-600:hover, .bg-red-700:hover, .bg-red-800:hover, .bg-red-900:hover,
|
||
button.bg-red-500:hover, button.bg-red-600:hover, button.bg-red-700:hover, button.bg-red-800:hover, button.bg-red-900:hover,
|
||
.hover\\:bg-red-600:hover, .hover\\:bg-red-700:hover, .hover\\:bg-red-800:hover {
|
||
background-color: #ef4444 !important; /* red-500 - darker bright light red */
|
||
}
|
||
|
||
/* Gray buttons to light gray */
|
||
.bg-gray-500, .bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900,
|
||
button.bg-gray-500, button.bg-gray-600, button.bg-gray-700, button.bg-gray-800, button.bg-gray-900 {
|
||
background-color: #e5e7eb !important; /* gray-200 - light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
}
|
||
|
||
.bg-gray-500:hover, .bg-gray-600:hover, .bg-gray-700:hover, .bg-gray-800:hover, .bg-gray-900:hover,
|
||
button.bg-gray-500:hover, button.bg-gray-600:hover, button.bg-gray-700:hover, button.bg-gray-800:hover, button.bg-gray-900:hover,
|
||
.hover\\:bg-gray-600:hover, .hover\\:bg-gray-700:hover, .hover\\:bg-gray-800:hover {
|
||
background-color: #d1d5db !important; /* gray-300 - darker light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
}
|
||
|
||
/* Ensure all text has proper contrast in light theme */
|
||
.text-white {
|
||
color: #374151 !important; /* gray-700 for better contrast on light backgrounds */
|
||
}
|
||
|
||
/* Fix dark button text - ensure white text on dark backgrounds */
|
||
.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
|
||
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800, .bg-red-900,
|
||
.bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800, .bg-green-900,
|
||
.bg-purple-500, .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900,
|
||
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-indigo-800, .bg-indigo-900,
|
||
.bg-gray-700, .bg-gray-800, .bg-gray-900,
|
||
.bg-sky-500, .bg-sky-600, .bg-sky-700, .bg-sky-800, .bg-sky-900 {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Ensure buttons with dark backgrounds have white text */
|
||
button.bg-blue-500, button.bg-blue-600, button.bg-blue-700,
|
||
button.bg-red-500, button.bg-red-600, button.bg-red-700,
|
||
button.bg-green-500, button.bg-green-600, button.bg-green-700,
|
||
button.bg-sky-500, button.bg-sky-600, button.bg-sky-700,
|
||
.btn-primary, .btn-danger, .btn-success, .btn-info {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Override any nested text color rules for dark buttons */
|
||
.bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *,
|
||
.bg-red-500 *, .bg-red-600 *, .bg-red-700 *,
|
||
.bg-green-500 *, .bg-green-600 *, .bg-green-700 *,
|
||
.bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
|
||
/* auth.html specific styles */
|
||
.auth-glass-card { /* Renamed to avoid conflict if base.html has .glass-card */
|
||
background: rgba(255, 255, 255, 0.95); /* High opacity white for light theme */
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
.auth-bg-gradient { /* Renamed to avoid conflict if base.html has .bg-gradient */
|
||
background: #f8fafc; /* Light gray background for auth page */
|
||
}
|
||
/* .input-icon class removed, using direct Tailwind classes now */
|
||
/* Keep button ripple effect if needed, or remove if base provides similar */
|
||
.auth-button { /* Renamed to avoid conflict */
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.auth-button:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
transition: width 0.6s, height 0.6s;
|
||
}
|
||
.auth-button:active:after {
|
||
width: 300px;
|
||
height: 300px;
|
||
opacity: 0;
|
||
}
|
||
|
||
/* ***keys_status.html specific styles*** */
|
||
/* ************************************** */
|
||
.key-content {
|
||
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out,
|
||
padding 0.3s ease-in-out; /* Added padding transition */
|
||
overflow: hidden; /* Keep hidden initially and during collapse */
|
||
}
|
||
.key-content.collapsed {
|
||
max-height: 0 !important; /* Use important to override inline style during transition */
|
||
opacity: 0;
|
||
padding-top: 0 !important; /* Collapse padding */
|
||
padding-bottom: 0 !important; /* Collapse padding */
|
||
/* overflow: hidden; */ /* Already set above */
|
||
}
|
||
.toggle-icon {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.toggle-icon.collapsed {
|
||
transform: rotate(-90deg);
|
||
}
|
||
/* Copy status styling is handled by base.html's notification */
|
||
|
||
/* 现代数据统计样式 */
|
||
.stats-dashboard {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.stats-dashboard {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
/* 统计卡片样式 */
|
||
.stats-card {
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
border-radius: 0.75rem;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
|
||
.stats-card:hover {
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
border-color: rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.stats-card-header {
|
||
background-color: rgba(249, 250, 251, 0.95);
|
||
padding: 0.75rem 1rem;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap; /* Allow wrapping for smaller screens */
|
||
gap: 0.5rem; /* Add gap between items */
|
||
}
|
||
|
||
.stats-card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: #374151; /* gray-700 for light theme */
|
||
text-shadow: none;
|
||
}
|
||
|
||
.stats-card-title i {
|
||
margin-right: 0.5rem;
|
||
color: #6b7280; /* gray-500 for light theme */
|
||
}
|
||
|
||
.stats-card-header h2 {
|
||
color: #374151; /* gray-700 for light theme */
|
||
}
|
||
|
||
/* =================================================================== */
|
||
/* [核心重构] 统计项样式 V3.2 - 最终精调版 */
|
||
/* =================================================================== */
|
||
/* --- 网格容器 --- */
|
||
.stats-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
padding: 0.75rem;
|
||
margin-bottom: 0.5rem !important;
|
||
}
|
||
/* --- 统计项容器 (stat-item) --- */
|
||
.stat-item {
|
||
position: relative;
|
||
display: block;
|
||
padding: 0;
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
transition: transform 0.3s ease-in-out;
|
||
min-height: 110px;
|
||
background-color: transparent !important;
|
||
}
|
||
/* --- 底部1/3的透明色块 (::before) --- */
|
||
.stat-item::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 30%;
|
||
background-color: currentColor;
|
||
opacity: 0.25;
|
||
z-index: 1;
|
||
transition: opacity 0.3s ease-in-out;
|
||
border-top-left-radius: 0.5rem;
|
||
border-top-right-radius: 0.5rem;
|
||
border-bottom-left-radius: 0.5rem;
|
||
border-bottom-right-radius: 0.5rem;
|
||
}
|
||
/* --- 悬浮动画效果 --- */
|
||
.stat-item:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
}
|
||
.stat-item:hover::before {
|
||
opacity: 0.25;
|
||
}
|
||
/* --- 核心数字 (stat-value) --- */
|
||
.stat-value {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 70%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: "Segoe UI", "Inter", "Roboto", sans-serif;
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: currentColor;
|
||
opacity: 0.85;
|
||
|
||
}
|
||
/* --- 描述标签 (stat-label) --- */
|
||
.stat-label {
|
||
position: absolute;
|
||
z-index: 2;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 30%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: #4b5563;
|
||
}
|
||
/* --- 右侧图标 (stat-icon) --- */
|
||
.stat-icon {
|
||
position: absolute;
|
||
z-index: 2;
|
||
bottom: 0;
|
||
right: 0.75rem;
|
||
height: 30%;
|
||
align-content: center;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 1.5rem;
|
||
opacity: 0.9;
|
||
transform: rotate(0deg);
|
||
transition: all 0.3s ease-in-out;
|
||
color: white;
|
||
}
|
||
.stat-item:hover .stat-icon {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
/* --- 主题颜色定义 --- */
|
||
.stat-primary { color: #459CEB; }
|
||
.stat-success { color: #49C65B; }
|
||
.stat-danger { color: #E81307; }
|
||
.stat-warning { color: #FCCC54; }
|
||
.stat-info { color: #06b6d4; }
|
||
.stat-info-rpm { color: #4EAAF6; font-size: 2.5rem; font-weight: 600;}
|
||
.stat-info-rph { color: #1F92F2; font-size: 2.5rem; font-weight: 600;}
|
||
.stat-info-rpd { color: #0D78D2; font-size: 2.5rem; font-weight: 600;}
|
||
.stat-info-rp30d { color: #0B5CA1; font-size: 2.5rem; font-weight: 600;}
|
||
|
||
|
||
/* --- 代码清理 --- */
|
||
.stat-item.stat-primary,
|
||
.stat-item.stat-success,
|
||
.stat-item.stat-danger,
|
||
.stat-item.stat-warning,
|
||
.stat-item.stat-info {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 640px) {
|
||
.stats-dashboard {
|
||
gap: 1rem;
|
||
}
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0.5rem;
|
||
padding: 0.5rem;
|
||
}
|
||
.stat-item {
|
||
padding: 0.5rem;
|
||
}
|
||
.stat-value {
|
||
font-size: 1.25rem;
|
||
}
|
||
.stat-label {
|
||
font-size: 0.625rem;
|
||
}
|
||
.stats-card-header {
|
||
padding: 0.5rem 0.75rem;
|
||
} /* Adjust header padding */
|
||
.key-content ul {
|
||
grid-template-columns: 1fr;
|
||
} /* Stack keys vertically on small screens */
|
||
}
|
||
/* Tailwind Toggle Switch Helper CSS */
|
||
.toggle-checkbox:checked {
|
||
@apply: right-0 border-blue-600;
|
||
right: 0;
|
||
border-color: #2563eb;
|
||
}
|
||
.toggle-checkbox:checked + .toggle-label {
|
||
@apply: bg-blue-600;
|
||
background-color: #2563eb;
|
||
}
|
||
|
||
/* Pagination Controls */
|
||
#validPaginationControls,
|
||
#invalidPaginationControls {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 1rem; /* mt-4 */
|
||
gap: 0.5rem; /* space-x-2 */
|
||
}
|
||
|
||
/* Ensure list items are flex for alignment */
|
||
#validKeys li,
|
||
#invalidKeys li {
|
||
display: flex;
|
||
align-items: flex-start; /* Align checkbox with top of content */
|
||
gap: 0.75rem; /* gap-3 */
|
||
}
|
||
/* Ensure grid layout for key lists */
|
||
#validKeys,
|
||
#invalidKeys {
|
||
display: grid;
|
||
grid-template-columns: 1fr; /* Default single column */
|
||
gap: 0.75rem; /* gap-3 */
|
||
}
|
||
@media (min-width: 768px) {
|
||
/* md breakpoint */
|
||
#validKeys,
|
||
#invalidKeys {
|
||
grid-template-columns: repeat(
|
||
2,
|
||
1fr
|
||
); /* Two columns on medium screens and up */
|
||
}
|
||
}
|
||
|
||
/* 修改密钥列表背景和卡片样式 */
|
||
.key-content {
|
||
background-color: rgba(249, 250, 251, 0.8) !important;
|
||
}
|
||
|
||
#validKeys li,
|
||
#invalidKeys li {
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
position: relative;
|
||
padding-left: 2.5rem; /* 为自定义复选框留出空间 */
|
||
}
|
||
|
||
#validKeys li:hover,
|
||
#invalidKeys li:hover {
|
||
border-color: rgba(0, 0, 0, 0.12);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-2px);
|
||
background-color: rgba(249, 250, 251, 0.95);
|
||
}
|
||
|
||
#validKeys li.selected,
|
||
#invalidKeys li.selected {
|
||
background-color: rgba(239, 246, 255, 0.95);
|
||
border-color: rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
/* 隐藏原生复选框 */
|
||
.key-checkbox {
|
||
display: none;
|
||
}
|
||
|
||
/* 自定义复选框样式 */
|
||
#validKeys li::before,
|
||
#invalidKeys li::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0.75rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 1.25rem; /* 20px */
|
||
height: 1.25rem; /* 20px */
|
||
border: 2px solid rgba(156, 163, 175, 0.7); /* gray-400 */
|
||
border-radius: 0.375rem; /* 6px */
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
#validKeys li.selected::before,
|
||
#invalidKeys li.selected::before {
|
||
background-color: #3b82f6; /* blue-500 */
|
||
border-color: #2563eb; /* blue-600 */
|
||
}
|
||
|
||
/* 自定义复选框对勾样式 */
|
||
#validKeys li.selected::after,
|
||
#invalidKeys li.selected::after {
|
||
content: "\f00c"; /* Font Awesome check icon */
|
||
font-family: "Font Awesome 5 Free";
|
||
font-weight: 900;
|
||
position: absolute;
|
||
left: calc(0.75rem + 0.3rem); /* 调整对勾位置 */
|
||
top: 50%;
|
||
transform: translateY(-50%) scale(0.9);
|
||
color: white;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.key-text {
|
||
color: #374151 !important; /* gray-700 for light theme */
|
||
text-shadow: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 模态框背景色调整 - comprehensive modal styling */
|
||
#apiCallDetailsModal .bg-white,
|
||
#keyUsageDetailsModal .bg-white,
|
||
#resultModal .bg-white,
|
||
#resetModal .bg-white,
|
||
#verifyModal .bg-white,
|
||
.modal .bg-white {
|
||
background-color: rgba(255, 255, 255, 0.98) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border-color: rgba(0, 0, 0, 0.08) !important;
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
|
||
}
|
||
|
||
/* 模态框标题颜色 */
|
||
#apiCallDetailsModalTitle,
|
||
#keyUsageDetailsModalTitle,
|
||
#resultModalTitle,
|
||
#resetModalTitle,
|
||
#verifyModalTitle {
|
||
color: #1f2937 !important; /* gray-800 */
|
||
text-shadow: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 密钥使用详情模态框头部特定样式 */
|
||
#keyUsageDetailsModal .bg-white > div.border-b {
|
||
/* 针对头部区域的下边框 */
|
||
border-bottom-color: rgba(0, 0, 0, 0.12) !important;
|
||
}
|
||
|
||
/* 模态框消息文本颜色 */
|
||
#apiCallDetailsContent,
|
||
#keyUsageDetailsContent,
|
||
#resultModalMessage,
|
||
#resetModalMessage,
|
||
#verifyModalMessage {
|
||
color: #374151 !important; /* gray-700 */
|
||
}
|
||
|
||
/* 特定调整操作结果模态框的消息区域样式 */
|
||
#resultModalMessage {
|
||
background-color: rgba(255, 255, 255, 0.95) !important; /* 浅色背景 */
|
||
border-color: rgba(0, 0, 0, 0.08) !important; /* 浅色边框 */
|
||
color: #374151 !important; /* 深色文本 */
|
||
}
|
||
|
||
/* 批量验证结果中普通信息列表 (如成功密钥列表) 的浅色主题样式 */
|
||
#resultModalMessage ul[class*="bg-gray-50"] {
|
||
/* 针对特定灰色背景色的ul */
|
||
background-color: rgba(249, 250, 251, 0.95) !important; /* 浅灰色背景 */
|
||
border-color: rgba(0, 0, 0, 0.08) !important; /* 浅色边框 */
|
||
}
|
||
|
||
#resultModalMessage ul[class*="bg-gray-50"] li {
|
||
color: #374151 !important; /* 深色文本 */
|
||
}
|
||
|
||
/* 批量验证结果中失败列表的浅色主题样式 */
|
||
#resultModalMessage ul[class*="bg-red-50"] {
|
||
/* 针对特定背景色的ul */
|
||
background-color: rgba(254, 242, 242, 0.95) !important; /* 浅红色背景 */
|
||
border-color: rgba(239, 68, 68, 0.2) !important; /* 浅红色边框 */
|
||
}
|
||
|
||
/* 失败列表中的密钥文本 (如 AIza...lJ6E) */
|
||
#resultModalMessage ul[class*="bg-red-50"] li span.font-mono {
|
||
color: #dc2626 !important; /* 深红色文本 */
|
||
}
|
||
|
||
/* 失败列表中的 "收起/展开" 按钮 - 协调的红色主题设计 */
|
||
#resultModalMessage ul[class*="bg-red-50"] li button[class*="bg-red-200"] {
|
||
background-color: #dc2626 !important; /* 深红色按钮背景，与外框协调 */
|
||
color: #ffffff !important; /* 白色按钮文本 */
|
||
border: 1px solid #b91c1c !important; /* 更深的红色边框 */
|
||
box-shadow: none !important;
|
||
font-weight: 500 !important; /* 增强文字粗细以提高可读性 */
|
||
}
|
||
#resultModalMessage
|
||
ul[class*="bg-red-50"]
|
||
li
|
||
button[class*="bg-red-200"]:hover {
|
||
background-color: #b91c1c !important; /* 悬停时更深的红色背景 */
|
||
color: #ffffff !important; /* 悬停时白色按钮文本 */
|
||
transform: translateY(-1px) !important; /* 轻微上移效果 */
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* 悬停阴影效果 */
|
||
}
|
||
|
||
/* 失败列表中的错误详情框 - 与红色主题协调的样式 */
|
||
#resultModalMessage ul[class*="bg-red-50"] li div[id^="error-details-"] {
|
||
background-color: rgba(254, 242, 242, 0.8) !important; /* 更浅的红色背景，与外框协调 */
|
||
border-color: rgba(248, 113, 113, 0.3) !important; /* 浅红色边框 */
|
||
color: #7f1d1d !important; /* 深红色文本，确保良好对比度 */
|
||
font-weight: 500 !important; /* 增强文字粗细以提高可读性 */
|
||
line-height: 1.5 !important; /* 改善行高以提高可读性 */
|
||
}
|
||
|
||
/* 密钥使用详情模态框内表格表头样式 */
|
||
#keyUsageDetailsModal #keyUsageDetailsContent table th {
|
||
background-color: rgba(243, 244, 246, 0.95) !important; /* 浅灰色背景 */
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; /* 浅色边框 */
|
||
color: #374151 !important; /* 深色文字 */
|
||
text-shadow: none; /* 移除文本阴影 */
|
||
}
|
||
|
||
/* 密钥使用详情模态框表格单元格样式已移除，使用默认颜色与API调用详情保持一致 */
|
||
|
||
/* 按钮文本颜色 */
|
||
.stats-card button {
|
||
color: #ffffff;
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* 表单控件背景 */
|
||
.form-input,
|
||
.form-select {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border-color: rgba(0, 0, 0, 0.12) !important;
|
||
}
|
||
|
||
/* 标签文字颜色 */
|
||
.text-gray-500,
|
||
.text-gray-600,
|
||
.text-gray-700 {
|
||
color: #374151 !important; /* dark gray for light theme */
|
||
text-shadow: none;
|
||
}
|
||
|
||
/* 调整全局背景色，使之与白色背景更加协调 */
|
||
.glass-card {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
/* 分页控件样式增强 */
|
||
.pagination-button {
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
color: #374151; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
text-shadow: none;
|
||
}
|
||
|
||
.pagination-button.active {
|
||
background-color: #3b82f6; /* blue-500 */
|
||
color: white;
|
||
border-color: #2563eb; /* blue-600 */
|
||
}
|
||
|
||
/* 状态标签增强 */
|
||
.inline-flex.items-center.px-2\.5.py-0\.5.rounded-full {
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* 按钮颜色增强 */
|
||
button.bg-success-600,
|
||
button.bg-blue-600,
|
||
button.bg-slate-500,
|
||
button.bg-purple-600,
|
||
button.bg-primary-700,
|
||
button.bg-teal-600 {
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* 复选框文本样式 */
|
||
input[type="checkbox"] + label {
|
||
color: #f1f5f9 !important;
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* 底部版权栏文本颜色修正 */
|
||
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-200,
|
||
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-300,
|
||
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-400,
|
||
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-500,
|
||
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-600,
|
||
.fixed.bottom-0.left-0.w-full.py-3.bg-white .text-gray-700 {
|
||
color: #1f2937 !important; /* 使用更深的灰色提高对比度 */
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
/* 导航链接悬停样式 - 优化以避免遮挡内容 */
|
||
.nav-link {
|
||
transition: all 0.2s ease-in-out;
|
||
position: relative;
|
||
z-index: 1; /* 确保不会遮挡重要内容 */
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background-color: rgba(59, 130, 246, 0.1) !important; /* blue-500 light */
|
||
transform: scale(1.02); /* 使用缩放代替向上移动 */
|
||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
|
||
}
|
||
|
||
/* 导航按钮容器样式 - 为悬停效果预留空间 */
|
||
.nav-buttons-container {
|
||
padding-top: 0.5rem; /* 为悬停效果预留上方空间 */
|
||
padding-bottom: 0.75rem; /* 为悬停效果预留下方空间 */
|
||
}
|
||
|
||
/* 主导航按钮的优化悬停效果 */
|
||
.main-nav-btn:hover {
|
||
transform: scale(1.02) !important; /* 使用缩放代替向上移动 */
|
||
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important; /* 蓝色阴影 */
|
||
}
|
||
|
||
/* Active navigation tab */
|
||
.bg-violet-600 {
|
||
background-color: #3b82f6 !important; /* blue-500 */
|
||
color: #ffffff !important;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
||
transform: translateY(-1px) !important;
|
||
border: 1px solid #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
.bg-violet-600:hover {
|
||
background-color: #2563eb !important; /* blue-600 */
|
||
transform: translateY(-2px) !important;
|
||
box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Fix page title gradient */
|
||
.text-transparent.bg-clip-text.bg-gradient-to-r.from-violet-400.to-pink-400 {
|
||
background: none !important;
|
||
color: #1f2937 !important; /* gray-800 */
|
||
-webkit-background-clip: unset !important;
|
||
background-clip: unset !important;
|
||
}
|
||
|
||
/* Fix refresh button */
|
||
.bg-white.bg-opacity-20 {
|
||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||
color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
.bg-white.bg-opacity-20:hover {
|
||
background-color: rgba(255, 255, 255, 1) !important;
|
||
}
|
||
|
||
/* Fix batch actions area purple background */
|
||
#validBatchActions, #invalidBatchActions {
|
||
background-color: rgba(249, 250, 251, 0.95) !important; /* light gray */
|
||
border-color: rgba(0, 0, 0, 0.08) !important;
|
||
}
|
||
|
||
#validBatchActions .text-gray-200, #invalidBatchActions .text-gray-200 {
|
||
color: #374151 !important; /* dark gray */
|
||
}
|
||
|
||
/* Fix primary button colors */
|
||
.bg-primary-600, .bg-primary-700, .bg-primary-800 {
|
||
background-color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
.bg-primary-600:hover, .bg-primary-700:hover, .bg-primary-800:hover {
|
||
background-color: #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
/* Fix text-primary colors */
|
||
.text-primary-600 {
|
||
color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
/* Fix form input focus colors */
|
||
.focus\\:ring-primary-500:focus {
|
||
--tw-ring-color: rgba(59, 130, 246, 0.2) !important;
|
||
}
|
||
|
||
.focus\\:border-primary-500:focus {
|
||
border-color: #3b82f6 !important;
|
||
}
|
||
|
||
/* 新增：密钥列表内按钮背景和悬停颜色调整 */
|
||
/* 验证按钮 (绿色) */
|
||
#validKeys li button.bg-success-600,
|
||
#invalidKeys li button.bg-success-600 {
|
||
background-color: rgba(22, 163, 74, 0.65) !important;
|
||
border: 1px solid rgba(22, 163, 74, 0.85);
|
||
}
|
||
#validKeys li button.bg-success-600:hover,
|
||
#invalidKeys li button.bg-success-600:hover {
|
||
background-color: rgba(21, 128, 61, 0.75) !important;
|
||
border-color: rgba(21, 128, 61, 0.95);
|
||
}
|
||
|
||
/* 重置按钮 (加深灰色底，白色文字) */
|
||
#validKeys li button.bg-gray-500,
|
||
#invalidKeys li button.bg-gray-500 {
|
||
background-color: #6b7280 !important; /* gray-500 - 加深的灰色底 */
|
||
border: 1px solid #4b5563 !important; /* gray-600 */
|
||
color: #ffffff !important; /* white - 白色文字 */
|
||
}
|
||
#validKeys li button.bg-gray-500:hover,
|
||
#invalidKeys li button.bg-gray-500:hover {
|
||
background-color: #4b5563 !important; /* gray-600 - 更深的灰色 */
|
||
border-color: #374151 !important; /* gray-700 */
|
||
color: #ffffff !important; /* white - 白色文字 */
|
||
}
|
||
|
||
/* 复制按钮 (蓝色底色，白色文字) */
|
||
#validKeys li button.bg-blue-500,
|
||
#invalidKeys li button.bg-blue-500 {
|
||
background-color: #3b82f6 !important; /* blue-500 - 蓝色底 */
|
||
border: 1px solid #2563eb !important; /* blue-600 */
|
||
color: #ffffff !important; /* Keep white text as specified in HTML */
|
||
}
|
||
#validKeys li button.bg-blue-500:hover,
|
||
#invalidKeys li button.bg-blue-500:hover {
|
||
background-color: #2563eb !important; /* blue-600 - 深蓝色hover */
|
||
border-color: #1d4ed8 !important; /* blue-700 */
|
||
color: #ffffff !important; /* Keep white text on hover */
|
||
}
|
||
|
||
/* 详情按钮 (改为蓝色) */
|
||
#validKeys li button.bg-purple-600,
|
||
#invalidKeys li button.bg-purple-600 {
|
||
background-color: rgba(59, 130, 246, 0.8) !important; /* blue-500 */
|
||
border: 1px solid rgba(59, 130, 246, 0.9);
|
||
}
|
||
#validKeys li button.bg-purple-600:hover,
|
||
#invalidKeys li button.bg-purple-600:hover {
|
||
background-color: rgba(37, 99, 235, 0.9) !important; /* blue-600 */
|
||
border-color: rgba(37, 99, 235, 1);
|
||
}
|
||
|
||
/* 删除按钮 (鲜艳浅红色) - HTML中使用 bg-red-800 */
|
||
#validKeys li button.bg-red-800,
|
||
#invalidKeys li button.bg-red-800 {
|
||
background-color: #f87171 !important; /* red-400 - bright light red */
|
||
border: 1px solid #ef4444 !important; /* red-500 */
|
||
color: #ffffff !important; /* Ensure white text */
|
||
}
|
||
|
||
#validKeys li button.bg-red-800:hover,
|
||
#invalidKeys li button.bg-red-800:hover {
|
||
background-color: #ef4444 !important; /* red-500 - darker bright light red */
|
||
border-color: #dc2626 !important; /* red-600 */
|
||
}
|
||
|
||
/* Comprehensive purple to light theme conversion */
|
||
[style*="background-color: rgba(80, 60, 160"],
|
||
[style*="background-color: rgba(70, 50, 150"],
|
||
[style*="background-color: rgba(120, 100, 200"] {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
border-color: rgba(0, 0, 0, 0.08) !important;
|
||
color: #374151 !important;
|
||
}
|
||
|
||
/* Fix modal button colors - specific overrides for keys_status.html */
|
||
/* Blue buttons in modals */
|
||
.bg-blue-600, button.bg-blue-600,
|
||
.bg-blue-700, button.bg-blue-700 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.bg-blue-600:hover, button.bg-blue-600:hover,
|
||
.bg-blue-700:hover, button.bg-blue-700:hover,
|
||
.hover\\:bg-blue-700:hover, .hover\\:bg-blue-800:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Red buttons in modals */
|
||
.bg-red-700, button.bg-red-700,
|
||
.bg-red-800, button.bg-red-800 {
|
||
background-color: #f87171 !important; /* red-400 - bright light red */
|
||
}
|
||
|
||
.bg-red-700:hover, button.bg-red-700:hover,
|
||
.bg-red-800:hover, button.bg-red-800:hover,
|
||
.hover\\:bg-red-800:hover {
|
||
background-color: #ef4444 !important; /* red-500 - darker bright light red */
|
||
}
|
||
|
||
/* Primary buttons in modals */
|
||
.bg-primary-700, button.bg-primary-700,
|
||
.bg-primary-800, button.bg-primary-800 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.bg-primary-700:hover, button.bg-primary-700:hover,
|
||
.bg-primary-800:hover, button.bg-primary-800:hover,
|
||
.hover\\:bg-primary-800:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Teal buttons in modals (for verify button) */
|
||
.bg-teal-700, button.bg-teal-700,
|
||
.bg-teal-800, button.bg-teal-800 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue (change teal to light blue) */
|
||
}
|
||
|
||
.bg-teal-700:hover, button.bg-teal-700:hover,
|
||
.bg-teal-800:hover, button.bg-teal-800:hover,
|
||
.hover\\:bg-teal-800:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Global slate/gray button color overrides - only for modal buttons */
|
||
/* Modal slate buttons should be light gray with dark text */
|
||
.modal .bg-slate-500, .modal button.bg-slate-500,
|
||
.modal .bg-slate-600, .modal button.bg-slate-600,
|
||
.modal .bg-slate-700, .modal button.bg-slate-700 {
|
||
background-color: #e5e7eb !important; /* gray-200 - light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
}
|
||
|
||
.modal .bg-slate-500:hover, .modal button.bg-slate-500:hover,
|
||
.modal .bg-slate-600:hover, .modal button.bg-slate-600:hover,
|
||
.modal .bg-slate-700:hover, .modal button.bg-slate-700:hover,
|
||
.modal .hover\\:bg-slate-600:hover, .modal .hover\\:bg-slate-700:hover {
|
||
background-color: #d1d5db !important; /* gray-300 - darker light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
}
|
||
|
||
/* Fix any remaining button text color issues */
|
||
.bg-blue-500, .bg-blue-600, .bg-blue-700,
|
||
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800,
|
||
.bg-green-500, .bg-green-600, .bg-green-700,
|
||
.bg-sky-500, .bg-sky-600, .bg-sky-700,
|
||
.bg-purple-500, .bg-purple-600, .bg-purple-700,
|
||
.bg-primary-700, .bg-primary-800,
|
||
.bg-teal-700, .bg-teal-800 {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Ensure button children inherit white text */
|
||
.bg-blue-500 *, .bg-blue-600 *, .bg-blue-700 *,
|
||
.bg-red-500 *, .bg-red-600 *, .bg-red-700 *, .bg-red-800 *,
|
||
.bg-green-500 *, .bg-green-600 *, .bg-green-700 *,
|
||
.bg-sky-500 *, .bg-sky-600 *, .bg-sky-700 *,
|
||
.bg-purple-500 *, .bg-purple-600 *, .bg-purple-700 * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
/* Fix key action buttons styling */
|
||
#validKeys li button, #invalidKeys li button {
|
||
font-size: 0.75rem !important; /* text-xs */
|
||
padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
|
||
border-radius: 0.375rem !important; /* rounded-md */
|
||
font-weight: 500 !important; /* font-medium */
|
||
transition: all 0.2s ease-in-out !important;
|
||
border: 1px solid transparent !important;
|
||
}
|
||
|
||
/* Verify button (green) */
|
||
#validKeys li button.bg-green-600,
|
||
#invalidKeys li button.bg-green-600 {
|
||
background-color: #16a34a !important; /* green-600 */
|
||
color: #ffffff !important;
|
||
border-color: #15803d !important; /* green-700 */
|
||
}
|
||
|
||
#validKeys li button.bg-green-600:hover,
|
||
#invalidKeys li button.bg-green-600:hover {
|
||
background-color: #15803d !important; /* green-700 */
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Details button (light blue) */
|
||
#validKeys li button.bg-blue-600,
|
||
#invalidKeys li button.bg-blue-600 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
color: #ffffff !important;
|
||
border-color: #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
#validKeys li button.bg-blue-600:hover,
|
||
#invalidKeys li button.bg-blue-600:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Disable/Enable button (yellow/orange) */
|
||
#validKeys li button.bg-yellow-500,
|
||
#invalidKeys li button.bg-yellow-500,
|
||
#validKeys li button.bg-orange-500,
|
||
#invalidKeys li button.bg-orange-500 {
|
||
background-color: #f59e0b !important; /* amber-500 */
|
||
color: #ffffff !important;
|
||
border-color: #d97706 !important; /* amber-600 */
|
||
}
|
||
|
||
#validKeys li button.bg-yellow-500:hover,
|
||
#invalidKeys li button.bg-yellow-500:hover,
|
||
#validKeys li button.bg-orange-500:hover,
|
||
#invalidKeys li button.bg-orange-500:hover {
|
||
background-color: #d97706 !important; /* amber-600 */
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Fix pagination dropdown styling */
|
||
.pagination-controls select {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
border-radius: 0.375rem !important; /* rounded-md */
|
||
padding: 0.25rem 0.5rem !important;
|
||
font-size: 0.875rem !important; /* text-sm */
|
||
}
|
||
|
||
.pagination-controls select:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* Fix pagination text */
|
||
.pagination-controls span, .pagination-controls label {
|
||
color: #374151 !important; /* gray-700 */
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
/* Fix specific pagination elements by ID and class */
|
||
#validKeysPageSize, #invalidKeysPageSize,
|
||
#itemsPerPageSelect, #invalidItemsPerPageSelect {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
border-radius: 0.375rem !important; /* rounded-md */
|
||
padding: 0.25rem 0.5rem !important;
|
||
font-size: 0.875rem !important; /* text-sm */
|
||
}
|
||
|
||
#validKeysPageSize:focus, #invalidKeysPageSize:focus,
|
||
#itemsPerPageSelect:focus, #invalidItemsPerPageSelect:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* Fix pagination container text */
|
||
.flex.items-center.gap-2 span {
|
||
color: #374151 !important; /* gray-700 */
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
/* Fix any remaining form elements */
|
||
select, input[type="text"], input[type="number"] {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
}
|
||
|
||
select:focus, input[type="text"]:focus, input[type="number"]:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* Comprehensive button text color fixes for all button states */
|
||
button.bg-success-600, button.bg-success-700,
|
||
button.bg-blue-600, button.bg-blue-700,
|
||
button.bg-purple-600, button.bg-purple-700,
|
||
button.bg-red-800, button.bg-red-900,
|
||
button.bg-teal-600, button.bg-teal-700,
|
||
button.bg-primary-700, button.bg-primary-800 {
|
||
color: #ffffff !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
/* Slate buttons in modals use dark text on light background */
|
||
.modal button.bg-slate-500, .modal button.bg-slate-600, .modal button.bg-slate-700 {
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
/* Ensure button children (icons and text) inherit color */
|
||
button.bg-success-600 *, button.bg-success-700 *,
|
||
button.bg-blue-600 *, button.bg-blue-700 *,
|
||
button.bg-purple-600 *, button.bg-purple-700 *,
|
||
button.bg-red-800 *, button.bg-red-900 *,
|
||
button.bg-teal-600 *, button.bg-teal-700 *,
|
||
button.bg-primary-700 *, button.bg-primary-800 *,
|
||
button.bg-slate-500 *, button.bg-slate-600 *, button.bg-slate-700 * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
/* Fix specific button text visibility issues */
|
||
.stats-card button, .key-content button {
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
|
||
}
|
||
|
||
/* Fix specific label text visibility issues */
|
||
label[for="selectAllValid"],
|
||
label[for="selectAllInvalid"],
|
||
label[for="failCountThreshold"],
|
||
label[for="keySearchInput"],
|
||
label[for="itemsPerPageSelect"],
|
||
label[for="invalidFailCountThreshold"],
|
||
label[for="invalidKeySearchInput"],
|
||
label[for="invalidItemsPerPageSelect"] {
|
||
color: #1f2937 !important; /* gray-800 for maximum contrast */
|
||
font-weight: 600 !important; /* font-semibold for better visibility */
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
/* Fix pagination and control text */
|
||
.pagination-controls span,
|
||
.pagination-controls label,
|
||
.stats-card-header span {
|
||
color: #1f2937 !important; /* gray-800 */
|
||
font-weight: 500 !important;
|
||
text-shadow: none !important;
|
||
}
|
||
#validKeys li button.bg-red-800:hover,
|
||
#invalidKeys li button.bg-red-800:hover {
|
||
background-color: rgba(153, 27, 27, 0.75) !important; /* Based on red-800 */
|
||
border-color: rgba(153, 27, 27, 0.95);
|
||
}
|
||
|
||
/* 新增：密钥列表内状态标签颜色调整 */
|
||
/* 有效标签 (绿色) - 改为更好的对比度 */
|
||
#validKeys li span.bg-success-50.text-success-600,
|
||
#invalidKeys li span.bg-success-50.text-success-600 {
|
||
background-color: rgba(34, 197, 94, 0.15) !important; /* green-500 with low opacity */
|
||
color: #16a34a !important; /* green-600 for better contrast on light background */
|
||
border: 1px solid rgba(22, 163, 74, 0.3) !important; /* green-600 border */
|
||
font-weight: 600 !important; /* Make text bolder for better readability */
|
||
text-shadow: none !important; /* Remove any text shadow */
|
||
}
|
||
|
||
/* 失败计数标签 (黄色) - 改为更好的对比度 */
|
||
#validKeys li span.bg-amber-50.text-amber-600,
|
||
#invalidKeys li span.bg-amber-50.text-amber-600 {
|
||
background-color: rgba(251, 191, 36, 0.15) !important; /* amber-400 with low opacity */
|
||
color: #d97706 !important; /* amber-600 for better contrast on light background */
|
||
border: 1px solid rgba(217, 119, 6, 0.3) !important; /* amber-600 border */
|
||
position: absolute; /* 移动到右下角 */
|
||
bottom: 0.75rem; /* 配合li的p-3内边距 */
|
||
right: 0.75rem;
|
||
z-index: 5; /* 确保在其他元素之上 */
|
||
font-weight: 600 !important; /* Make text bolder for better readability */
|
||
text-shadow: none !important; /* Remove any text shadow */
|
||
}
|
||
|
||
/* 无效标签 (红色) - for invalidKeys list */
|
||
#invalidKeys li span.bg-danger-50.text-danger-600 {
|
||
background-color: rgba(239, 68, 68, 0.08) !important; /* 更浅的背景色 */
|
||
color: #f87171 !important; /* 更浅的红色文字 */
|
||
border: 1px solid rgba(239, 68, 68, 0.15); /* 更浅的边框 */
|
||
font-weight: 600 !important; /* 加粗字体 */
|
||
}
|
||
|
||
/* Remove border from the last row's cells in API Call Details Modal table */
|
||
#apiCallDetailsContent table tr:last-child td {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/* Restore success/failure status colors and icon colors within the API call details table */
|
||
#apiCallDetailsContent table td span[class*="text-success"],
|
||
#apiCallDetailsContent table td span[class*="success"] {
|
||
color: #6ee7b7 !important; /* Theme success green */
|
||
}
|
||
#apiCallDetailsContent table td span[class*="text-success"] i,
|
||
#apiCallDetailsContent table td span[class*="success"] i {
|
||
color: #6ee7b7 !important;
|
||
}
|
||
|
||
#apiCallDetailsContent table td span[class*="text-danger"],
|
||
#apiCallDetailsContent table td span[class*="failure"],
|
||
#apiCallDetailsContent table td span[class*="danger"] {
|
||
color: #fca5b3 !important; /* Theme failure red */
|
||
}
|
||
#apiCallDetailsContent table td span[class*="text-danger"] i,
|
||
#apiCallDetailsContent table td span[class*="failure"] i,
|
||
#apiCallDetailsContent table td span[class*="danger"] i {
|
||
color: #fca5b3 !important;
|
||
}
|
||
/* End of API Call Details Modal Specific Styling Adjustments */
|
||
|
||
/* 下拉菜单样式 */
|
||
.dropdown-menu {
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
background-color: rgba(255, 255, 255, 0.98);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
border-radius: 0.5rem;
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
min-width: 200px;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(-10px);
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
.dropdown-menu.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.dropdown-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 1rem;
|
||
color: #374151;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease-in-out;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
width: 100%;
|
||
text-align: left;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.dropdown-item:hover {
|
||
background-color: rgba(59, 130, 246, 0.1);
|
||
color: #3b82f6;
|
||
}
|
||
|
||
.dropdown-item:first-child {
|
||
border-top-left-radius: 0.5rem;
|
||
border-top-right-radius: 0.5rem;
|
||
}
|
||
|
||
.dropdown-item:last-child {
|
||
border-bottom-left-radius: 0.5rem;
|
||
border-bottom-right-radius: 0.5rem;
|
||
}
|
||
|
||
.dropdown-item i {
|
||
width: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.dropdown-toggle {
|
||
position: relative;
|
||
}
|
||
|
||
/* config_editor.html specific styles */
|
||
/* Animations (already in base.html, but keep fade-in class usage) */
|
||
.fade-in {
|
||
animation: fadeIn 0.3s ease forwards;
|
||
}
|
||
/* Modal specific styles (already in base.html) */
|
||
.array-container {
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
padding: 1rem; /* p-4 consistency */
|
||
margin-bottom: 0.5rem; /* mb-2 consistency */
|
||
background-color: rgba(255, 255, 255, 0.95) !important; /* light theme */
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important; /* light gray border */
|
||
color: #374151 !important; /* gray-700 for light theme */
|
||
border-radius: 0.5rem; /* rounded-lg consistency */
|
||
}
|
||
#API_KEYS_container {
|
||
/* Keep specific ID styling if needed */
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
.config-section {
|
||
display: none;
|
||
/* theming: new background and border for sections */
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(5px);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
border-radius: 0.75rem; /* rounded-xl */
|
||
padding: 1.5rem; /* p-6 */
|
||
margin-bottom: 1.5rem; /* mb-6 */
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||
0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
|
||
}
|
||
.config-section.active {
|
||
display: block;
|
||
animation: fadeIn 0.3s ease forwards; /* Use base animation */
|
||
}
|
||
.provider-config {
|
||
display: none;
|
||
}
|
||
.provider-config.active {
|
||
display: block;
|
||
}
|
||
/* Tailwind Toggle Switch Helper CSS */
|
||
.toggle-checkbox:checked {
|
||
@apply: right-0 border-blue-600; /* theming: changed to blue for light theme */
|
||
right: 0;
|
||
border-color: #2563eb; /* theming: blue-600 */
|
||
}
|
||
.toggle-checkbox:checked + .toggle-label {
|
||
@apply: bg-blue-600; /* theming: changed to blue for light theme */
|
||
background-color: #2563eb; /* theming: blue-600 */
|
||
}
|
||
.toggle-label {
|
||
/* theming: style for unchecked state */
|
||
background-color: rgba(156, 163, 175, 0.3); /* gray-400 */
|
||
}
|
||
/* 统一通知样式为黑色半透明，确保与 keys_status 一致 */
|
||
.notification {
|
||
background: rgba(0, 0, 0, 0.8) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* Theming for input fields - 修复边框重影问题 */
|
||
.form-input-themed {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important; /* 为独立输入框提供边框 */
|
||
color: #374151 !important; /* gray-700 */
|
||
outline: none !important; /* 移除默认outline */
|
||
box-shadow: none !important; /* 移除默认box-shadow */
|
||
transition: border-color 0.15s ease-in-out !important;
|
||
}
|
||
.form-input-themed::placeholder {
|
||
color: #9ca3af !important; /* gray-400 */
|
||
}
|
||
.form-input-themed:focus {
|
||
border-color: #3b82f6 !important; /* focus时改变边框颜色 */
|
||
box-shadow: none !important; /* 移除focus阴影，只保留边框变化 */
|
||
outline: none !important; /* 确保没有outline */
|
||
}
|
||
|
||
/* 对于在包装器内的输入框，移除边框 */
|
||
.flex.items-center .form-input-themed,
|
||
.array-container .form-input-themed {
|
||
border: none !important; /* 在包装器内的输入框移除边框 */
|
||
}
|
||
|
||
.flex.items-center .form-input-themed:focus,
|
||
.array-container .form-input-themed:focus {
|
||
border: none !important; /* 确保focus时也没有边框 */
|
||
}
|
||
|
||
/* Theming for select fields - 改进下拉框样式 */
|
||
.form-select-themed {
|
||
background-color: rgba(255, 255, 255, 0.95) !important; /* 白色背景 */
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important; /* 灰色边框 */
|
||
color: #374151 !important; /* gray-700 文字颜色 */
|
||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; /* 灰色箭头 */
|
||
appearance: none !important;
|
||
padding: 0.6rem 2.5rem 0.6rem 0.8rem !important; /* 调整内边距 */
|
||
background-repeat: no-repeat !important;
|
||
background-position: right 0.6rem center !important;
|
||
background-size: 1.5em 1.5em !important;
|
||
border-radius: 0.5rem !important; /* 圆角 */
|
||
font-weight: 500 !important; /* 半粗体 */
|
||
height: auto !important; /* 自动高度 */
|
||
box-shadow: none !important; /* 移除阴影 */
|
||
cursor: pointer !important;
|
||
}
|
||
|
||
.form-select-themed:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: none !important; /* 移除focus阴影 */
|
||
outline: none !important;
|
||
}
|
||
|
||
.form-select-themed option {
|
||
background-color: rgba(
|
||
255,
|
||
255,
|
||
255,
|
||
0.98
|
||
) !important; /* white background */
|
||
color: #374151 !important; /* gray-700 */
|
||
padding: 8px !important;
|
||
}
|
||
|
||
/* 日志级别样式 - 浅色主题统一设计 */
|
||
#LOG_LEVEL {
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
/* 统一的日志级别选项样式 - 使用浅色主题 */
|
||
#LOG_LEVEL option[value="DEBUG"] {
|
||
background-color: rgba(255, 255, 255, 0.98) !important; /* 白色背景 */
|
||
color: #374151 !important; /* gray-700 深灰色文字 */
|
||
}
|
||
|
||
#LOG_LEVEL option[value="INFO"] {
|
||
background-color: rgba(
|
||
249,
|
||
250,
|
||
251,
|
||
0.98
|
||
) !important; /* gray-50 浅灰背景 */
|
||
color: #374151 !important; /* gray-700 深灰色文字 */
|
||
}
|
||
|
||
#LOG_LEVEL option[value="WARNING"] {
|
||
background-color: rgba(
|
||
243,
|
||
244,
|
||
246,
|
||
0.98
|
||
) !important; /* gray-100 稍深灰背景 */
|
||
color: #374151 !important; /* gray-700 深灰色文字 */
|
||
}
|
||
|
||
#LOG_LEVEL option[value="ERROR"] {
|
||
background-color: rgba(
|
||
229,
|
||
231,
|
||
235,
|
||
0.98
|
||
) !important; /* gray-200 中灰背景 */
|
||
color: #374151 !important; /* gray-700 深灰色文字 */
|
||
}
|
||
|
||
#LOG_LEVEL option[value="CRITICAL"] {
|
||
background-color: rgba(
|
||
209,
|
||
213,
|
||
219,
|
||
0.98
|
||
) !important; /* gray-300 深灰背景 */
|
||
color: #374151 !important; /* gray-700 深灰色文字 */
|
||
}
|
||
|
||
/* 思考模型预算映射样式 */
|
||
.map-item {
|
||
background-color: rgba(60, 40, 130, 0.2) !important;
|
||
border-radius: 0.5rem !important;
|
||
padding: 0.5rem !important;
|
||
border: 1px solid rgba(167, 139, 250, 0.3) !important;
|
||
transition: all 0.2s ease-in-out !important;
|
||
}
|
||
|
||
.map-item:hover {
|
||
background-color: rgba(60, 40, 130, 0.3) !important;
|
||
border-color: rgba(167, 139, 250, 0.5) !important;
|
||
}
|
||
|
||
.map-key-input {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
font-weight: 500 !important;
|
||
border-radius: 0.375rem !important;
|
||
}
|
||
|
||
.map-value-input {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
font-weight: 600 !important;
|
||
border-radius: 0.375rem !important;
|
||
box-shadow: none !important;
|
||
transition: all 0.2s !important;
|
||
}
|
||
|
||
.map-value-input:focus {
|
||
background-color: rgba(255, 255, 255, 1) !important;
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: none !important; /* 移除focus阴影 */
|
||
outline: none !important;
|
||
}
|
||
|
||
/* 警告文字样式 */
|
||
.warning-text {
|
||
color: #f87171 !important; /* red-400 */
|
||
font-weight: 600 !important;
|
||
background-color: rgba(248, 113, 113, 0.15) !important;
|
||
padding: 0.5rem 0.75rem !important;
|
||
border-radius: 0.375rem !important;
|
||
border-left: 3px solid #ef4444 !important; /* red-500 */
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
margin-top: 0.5rem !important;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
.warning-text i {
|
||
margin-right: 0.5rem !important;
|
||
color: #ef4444 !important; /* red-500 */
|
||
}
|
||
|
||
/* 令牌生成按钮样式 */
|
||
.generate-btn {
|
||
background-color: rgba(59, 130, 246, 0.1) !important; /* blue-500 light */
|
||
color: #3b82f6 !important; /* blue-500 */
|
||
border: 1px solid rgba(59, 130, 246, 0.3) !important;
|
||
border-left: none !important;
|
||
transition: all 0.2s ease !important;
|
||
}
|
||
|
||
.generate-btn:hover {
|
||
background-color: rgba(
|
||
59,
|
||
130,
|
||
246,
|
||
0.2
|
||
) !important; /* blue-500 more opaque */
|
||
color: #1d4ed8 !important; /* blue-700 */
|
||
box-shadow: 0 0 8px rgba(59, 130, 246, 0.3) !important;
|
||
}
|
||
|
||
.generate-btn:focus {
|
||
outline: none !important;
|
||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
|
||
}
|
||
|
||
/* 导航链接悬停样式 - 优化以避免遮挡内容 */
|
||
.nav-link {
|
||
transition: all 0.2s ease-in-out;
|
||
position: relative;
|
||
z-index: 1; /* 确保不会遮挡重要内容 */
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background-color: rgba(59, 130, 246, 0.1) !important; /* blue-500 light */
|
||
transform: scale(1.02); /* 使用缩放代替向上移动 */
|
||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
|
||
}
|
||
|
||
/* 导航按钮容器样式 - 为悬停效果预留空间 */
|
||
.nav-buttons-container {
|
||
padding-top: 0.5rem; /* 为悬停效果预留上方空间 */
|
||
padding-bottom: 0.75rem; /* 为悬停效果预留下方空间 */
|
||
}
|
||
|
||
/* 主导航按钮的优化悬停效果 */
|
||
.main-nav-btn:hover {
|
||
transform: scale(1.02) !important; /* 使用缩放代替向上移动 */
|
||
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important; /* 蓝色阴影 */
|
||
}
|
||
|
||
/* 操作按钮的优化悬停效果 */
|
||
.action-btn {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
transform: scale(1.02) !important; /* 使用缩放代替向上移动 */
|
||
}
|
||
|
||
.action-btn:hover#saveBtn {
|
||
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4) !important; /* 蓝色阴影 */
|
||
}
|
||
|
||
.action-btn:hover#resetBtn {
|
||
box-shadow: 0 8px 20px rgba(107, 114, 128, 0.4) !important; /* 灰色阴影 */
|
||
}
|
||
|
||
/* 刷新按钮样式 - 与监控面板页面保持一致 */
|
||
.bg-white.bg-opacity-20 {
|
||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||
color: #3b82f6 !important; /* blue-500 - 与监控面板一致 */
|
||
}
|
||
|
||
.bg-white.bg-opacity-20:hover {
|
||
background-color: rgba(255, 255, 255, 1) !important;
|
||
color: #2563eb !important; /* blue-600 - 悬停时稍深 */
|
||
}
|
||
|
||
/* General label and small text theming for light theme */
|
||
label {
|
||
color: #374151 !important; /* Dark gray for labels in light theme */
|
||
font-weight: 600; /* semibold */
|
||
}
|
||
small {
|
||
color: #6b7280 !important; /* Medium gray for small text */
|
||
}
|
||
|
||
/* Override all violet/purple buttons to light blue */
|
||
.bg-violet-600,
|
||
button.bg-violet-600 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.bg-violet-600:hover,
|
||
button.bg-violet-600:hover,
|
||
.hover\\:bg-violet-700:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Override blue buttons to light blue */
|
||
.bg-blue-600,
|
||
button.bg-blue-600 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
}
|
||
|
||
.bg-blue-600:hover,
|
||
button.bg-blue-600:hover,
|
||
.hover\\:bg-blue-700:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
}
|
||
|
||
/* Override red buttons to bright light red */
|
||
.bg-red-600,
|
||
button.bg-red-600,
|
||
.bg-red-700,
|
||
button.bg-red-700,
|
||
.bg-red-800,
|
||
button.bg-red-800 {
|
||
background-color: #f87171 !important; /* red-400 - bright light red */
|
||
}
|
||
|
||
.bg-red-600:hover,
|
||
button.bg-red-600:hover,
|
||
.bg-red-700:hover,
|
||
button.bg-red-700:hover,
|
||
.bg-red-800:hover,
|
||
button.bg-red-800:hover,
|
||
.hover\\:bg-red-700:hover,
|
||
.hover\\:bg-red-800:hover {
|
||
background-color: #ef4444 !important; /* red-500 - darker bright light red */
|
||
}
|
||
|
||
/* Update section headings */
|
||
.config-section h2 {
|
||
color: #1f2937 !important; /* gray-800 */
|
||
border-color: #d1d5db !important; /* gray-300 */
|
||
}
|
||
|
||
.config-section h2 i {
|
||
color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
/* Update tab button active state - 增强选中态样式，提高优先级 */
|
||
button.tab-btn.active {
|
||
background-color: #3b82f6 !important; /* blue-500 */
|
||
color: #ffffff !important; /* 确保白色文字 */
|
||
box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4),
|
||
0 2px 6px -1px rgba(59, 130, 246, 0.2) !important; /* 蓝色阴影 */
|
||
transform: translateY(-2px) !important; /* 更明显的上移效果 */
|
||
border: 2px solid #2563eb !important; /* blue-600 边框 */
|
||
font-weight: 600 !important; /* 加粗字体 */
|
||
}
|
||
|
||
/* Ensure inactive tabs have proper styling - 增强未选中态样式，提高优先级 */
|
||
button.tab-btn:not(.active) {
|
||
background-color: #f8fafc !important; /* slate-50 更浅的背景 */
|
||
color: #64748b !important; /* slate-500 更明显的灰色文字 */
|
||
border: 2px solid #e2e8f0 !important; /* slate-200 边框 */
|
||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important; /* 轻微阴影 */
|
||
font-weight: 500 !important; /* 中等字体粗细 */
|
||
}
|
||
|
||
button.tab-btn:not(.active):hover {
|
||
background-color: #f1f5f9 !important; /* slate-100 */
|
||
color: #475569 !important; /* slate-600 更深的文字颜色 */
|
||
transform: translateY(-1px) !important;
|
||
border-color: #cbd5e1 !important; /* slate-300 */
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Add transition for smooth state changes - 提高优先级 */
|
||
button.tab-btn {
|
||
transition: all 0.2s ease-in-out !important;
|
||
cursor: pointer !important;
|
||
/* 确保基础样式不被Tailwind覆盖 */
|
||
padding: 0.5rem 1.25rem !important; /* px-5 py-2 */
|
||
border-radius: 9999px !important; /* rounded-full */
|
||
font-size: 0.875rem !important; /* text-sm */
|
||
font-weight: 500 !important; /* font-medium */
|
||
}
|
||
|
||
/* 额外的高优先级规则确保样式生效 */
|
||
.flex.justify-center.mb-6.flex-wrap.gap-2 button.tab-btn.active {
|
||
background-color: #3b82f6 !important;
|
||
color: #ffffff !important;
|
||
border: 2px solid #2563eb !important;
|
||
box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4),
|
||
0 2px 6px -1px rgba(59, 130, 246, 0.2) !important;
|
||
transform: translateY(-2px) !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.flex.justify-center.mb-6.flex-wrap.gap-2 button.tab-btn:not(.active) {
|
||
background-color: #f8fafc !important;
|
||
color: #64748b !important;
|
||
border: 2px solid #e2e8f0 !important;
|
||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
|
||
font-weight: 500 !important;
|
||
transform: none !important;
|
||
}
|
||
|
||
/* Fix all modal backgrounds - comprehensive override */
|
||
.modal .w-full[style*="background-color: rgba(70, 50, 150"],
|
||
.modal .w-full.max-w-lg[style*="background-color: rgba(70, 50, 150"],
|
||
.modal .w-full.max-w-md[style*="background-color: rgba(70, 50, 150"] {
|
||
background-color: rgba(255, 255, 255, 0.98) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border-color: rgba(0, 0, 0, 0.08) !important;
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||
0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
|
||
}
|
||
|
||
/* Fix modal titles */
|
||
.modal h2.text-gray-800 {
|
||
color: #1f2937 !important; /* gray-800 */
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
/* Fix modal close buttons */
|
||
.modal .text-gray-300 {
|
||
color: #6b7280 !important; /* gray-500 */
|
||
}
|
||
|
||
.modal .text-gray-300:hover {
|
||
color: #374151 !important; /* gray-700 */
|
||
}
|
||
|
||
/* Fix modal body text */
|
||
.modal p,
|
||
.modal label,
|
||
.modal span {
|
||
color: #374151 !important; /* gray-700 */
|
||
}
|
||
|
||
/* Fix modal textarea and input styling */
|
||
.modal textarea,
|
||
.modal input {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
}
|
||
|
||
.modal textarea:focus,
|
||
.modal input:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
||
}
|
||
|
||
/* Fix modal button styling */
|
||
.modal .bg-violet-600,
|
||
.modal button.bg-violet-600 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
color: #ffffff !important;
|
||
border: 1px solid #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
.modal .bg-violet-600:hover,
|
||
.modal button.bg-violet-600:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Fix modal blue button styling */
|
||
.modal .bg-blue-500,
|
||
.modal button.bg-blue-500,
|
||
.modal .bg-blue-600,
|
||
.modal button.bg-blue-600,
|
||
.modal .bg-blue-700,
|
||
.modal button.bg-blue-700 {
|
||
background-color: #3b82f6 !important; /* blue-500 - light blue */
|
||
color: #ffffff !important;
|
||
border: 1px solid #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
.modal .bg-blue-500:hover,
|
||
.modal button.bg-blue-500:hover,
|
||
.modal .bg-blue-600:hover,
|
||
.modal button.bg-blue-600:hover,
|
||
.modal .bg-blue-700:hover,
|
||
.modal button.bg-blue-700:hover {
|
||
background-color: #2563eb !important; /* blue-600 - darker light blue */
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Fix modal cancel/secondary buttons */
|
||
.modal .bg-gray-500,
|
||
.modal button.bg-gray-500,
|
||
.modal .bg-gray-600,
|
||
.modal button.bg-gray-600 {
|
||
background-color: #e5e7eb !important; /* gray-200 - light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
border: 1px solid #d1d5db !important; /* gray-300 */
|
||
}
|
||
|
||
.modal .bg-gray-500:hover,
|
||
.modal button.bg-gray-500:hover,
|
||
.modal .bg-gray-600:hover,
|
||
.modal button.bg-gray-600:hover {
|
||
background-color: #d1d5db !important; /* gray-300 - darker light gray */
|
||
color: #374151 !important; /* gray-700 - dark text for contrast */
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Fix modal red/danger buttons */
|
||
.modal .bg-red-500,
|
||
.modal button.bg-red-500,
|
||
.modal .bg-red-600,
|
||
.modal button.bg-red-600,
|
||
.modal .bg-red-700,
|
||
.modal button.bg-red-700 {
|
||
background-color: #f87171 !important; /* red-400 - bright light red */
|
||
color: #ffffff !important;
|
||
border: 1px solid #ef4444 !important; /* red-500 */
|
||
}
|
||
|
||
.modal .bg-red-500:hover,
|
||
.modal button.bg-red-500:hover,
|
||
.modal .bg-red-600:hover,
|
||
.modal button.bg-red-600:hover,
|
||
.modal .bg-red-700:hover,
|
||
.modal button.bg-red-700:hover {
|
||
background-color: #ef4444 !important; /* red-500 - darker bright light red */
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
|
||
}
|
||
|
||
/* Fix all container backgrounds with purple */
|
||
[style*="background-color: rgba(255, 255, 255, 0.05)"],
|
||
[style*="background-color: rgba(80, 60, 160"],
|
||
[style*="background-color: rgba(70, 50, 150"],
|
||
[style*="background-color: rgba(60, 40, 130"],
|
||
[style*="background-color: rgba(120, 100, 200"] {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
border-color: rgba(0, 0, 0, 0.08) !important;
|
||
color: #374151 !important;
|
||
}
|
||
|
||
/* Fix map item styling */
|
||
.map-item {
|
||
background-color: rgba(249, 250, 251, 0.8) !important; /* gray-50 */
|
||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||
color: #374151 !important;
|
||
}
|
||
|
||
.map-item:hover {
|
||
background-color: rgba(243, 244, 246, 1) !important; /* gray-100 */
|
||
border-color: rgba(0, 0, 0, 0.12) !important;
|
||
}
|
||
|
||
/* Update model helper buttons */
|
||
.model-helper-trigger-btn {
|
||
color: #3b82f6 !important; /* blue-500 */
|
||
background-color: rgba(59, 130, 246, 0.1) !important;
|
||
}
|
||
|
||
.model-helper-trigger-btn:hover {
|
||
background-color: rgba(59, 130, 246, 0.2) !important;
|
||
color: #1d4ed8 !important; /* blue-700 */
|
||
}
|
||
|
||
/* Comprehensive button text color fixes */
|
||
.bg-blue-500,
|
||
.bg-blue-600,
|
||
.bg-blue-700,
|
||
.bg-red-500,
|
||
.bg-red-600,
|
||
.bg-red-700,
|
||
.bg-red-800,
|
||
.bg-green-500,
|
||
.bg-green-600,
|
||
.bg-green-700,
|
||
.bg-sky-500,
|
||
.bg-sky-600,
|
||
.bg-sky-700,
|
||
.bg-purple-500,
|
||
.bg-purple-600,
|
||
.bg-purple-700,
|
||
.bg-violet-500,
|
||
.bg-violet-600,
|
||
.bg-violet-700 {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Ensure button children inherit white text */
|
||
.bg-blue-500 *,
|
||
.bg-blue-600 *,
|
||
.bg-blue-700 *,
|
||
.bg-red-500 *,
|
||
.bg-red-600 *,
|
||
.bg-red-700 *,
|
||
.bg-red-800 *,
|
||
.bg-green-500 *,
|
||
.bg-green-600 *,
|
||
.bg-green-700 *,
|
||
.bg-sky-500 *,
|
||
.bg-sky-600 *,
|
||
.bg-sky-700 *,
|
||
.bg-purple-500 *,
|
||
.bg-purple-600 *,
|
||
.bg-purple-700 *,
|
||
.bg-violet-500 *,
|
||
.bg-violet-600 *,
|
||
.bg-violet-700 * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
/* Fix page title gradient - comprehensive override */
|
||
h1.text-transparent,
|
||
.text-transparent.bg-clip-text,
|
||
.bg-gradient-to-r.from-violet-400.to-pink-400 {
|
||
background: none !important;
|
||
color: #1f2937 !important; /* gray-800 - consistent with other pages */
|
||
-webkit-background-clip: unset !important;
|
||
background-clip: unset !important;
|
||
text-shadow: none !important;
|
||
font-weight: 800 !important; /* font-extrabold */
|
||
}
|
||
|
||
/* Fix all gradient buttons to use solid blue */
|
||
.bg-gradient-to-r.from-violet-500.to-pink-500,
|
||
.bg-gradient-to-r.from-gray-600.to-gray-700 {
|
||
background: none !important;
|
||
}
|
||
|
||
/* Ensure all violet/purple colors are converted to blue theme */
|
||
.text-violet-300,
|
||
.text-violet-400,
|
||
.text-violet-100 {
|
||
color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
.border-violet-300,
|
||
.border-violet-400 {
|
||
border-color: rgba(
|
||
59,
|
||
130,
|
||
246,
|
||
0.3
|
||
) !important; /* blue-500 with opacity */
|
||
}
|
||
|
||
.hover\\:text-violet-400:hover,
|
||
.hover\\:text-violet-100:hover {
|
||
color: #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
.hover\\:bg-violet-700:hover {
|
||
background-color: #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
/* Fix focus states for form elements */
|
||
.focus-within\\:border-violet-400:focus-within,
|
||
.focus-within\\:ring-violet-400:focus-within {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: none !important; /* 移除focus阴影 */
|
||
}
|
||
|
||
/* Fix focus-within border color for auth token wrapper */
|
||
.focus-within\\:border-blue-500:focus-within {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
/* More specific selector for auth token wrapper */
|
||
div.flex.items-center.flex-grow.border.rounded-md.focus-within\\:border-blue-500:focus-within {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
/* Even more specific selector targeting the exact auth token wrapper */
|
||
.mb-6
|
||
.flex.items-center
|
||
div.flex.items-center.flex-grow.border.rounded-md:focus-within {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
/* Fix primary color focus states - convert purple to blue */
|
||
.focus\\:border-primary-500:focus,
|
||
.focus\\:border-primary-600:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
.focus\\:ring-primary-200:focus,
|
||
.focus\\:ring-primary-300:focus {
|
||
--tw-ring-color: rgba(
|
||
59,
|
||
130,
|
||
246,
|
||
0.2
|
||
) !important; /* blue-500 with opacity */
|
||
}
|
||
|
||
/* Fix select element styling */
|
||
.form-select-themed {
|
||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||
border: 1px solid rgba(0, 0, 0, 0.12) !important;
|
||
color: #374151 !important; /* gray-700 */
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
|
||
}
|
||
|
||
.form-select-themed:focus {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: none !important; /* 移除focus阴影 */
|
||
outline: none !important;
|
||
}
|
||
|
||
/* Override any remaining primary colors */
|
||
.text-primary-600,
|
||
.text-primary-500 {
|
||
color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
.bg-primary-600,
|
||
.bg-primary-500 {
|
||
background-color: #3b82f6 !important; /* blue-500 */
|
||
}
|
||
|
||
.bg-primary-700:hover,
|
||
.hover\\:bg-primary-700:hover {
|
||
background-color: #2563eb !important; /* blue-600 */
|
||
}
|
||
|
||
/* Fix dynamic input wrapper focus states - convert violet to blue */
|
||
.focus-within\\:border-violet-400:focus-within,
|
||
.focus-within\\:ring-violet-400:focus-within {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: none !important; /* 移除focus阴影 */
|
||
}
|
||
|
||
/* Ensure all array input wrappers use blue theme */
|
||
.array-container .flex.items-center.flex-grow.rounded-md {
|
||
border-color: rgba(0, 0, 0, 0.12) !important;
|
||
}
|
||
|
||
.array-container .flex.items-center.flex-grow.rounded-md:focus-within {
|
||
border-color: #3b82f6 !important; /* blue-500 */
|
||
box-shadow: none !important; /* 移除focus阴影 */
|
||
}
|
||
|
||
|
||
/* Filename: web/static/css/output.css */
|
||
/* 按钮的“默认公民”外观 (inactive) */
|
||
.tab-btn {
|
||
padding: 0.5rem 1.25rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease-in-out;
|
||
background-color: #f8fafc !important;
|
||
color: #64748b !important;
|
||
border: 2px solid #e2e8f0 !important;
|
||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
|
||
transform: translateY(0);
|
||
}
|
||
/* 按钮在被悬停时的外观 */
|
||
.tab-btn:hover {
|
||
background-color: #f1f5f9 !important;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
|
||
}
|
||
/* 按钮被授予 .active “荣誉勋章”后的外观 */
|
||
.tab-btn.active {
|
||
background-color: #3b82f6 !important;
|
||
color: #ffffff !important;
|
||
border-color: #2563eb !important;
|
||
font-weight: 600 !important;
|
||
box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4), 0 2px 6px -1px rgba(59, 130, 246, 0.2) !important;
|
||
transform: translateY(-2px) !important;
|
||
} |