416 lines
8.7 KiB
CSS
416 lines
8.7 KiB
CSS
/* 自定义样式，用于增强Tailwind CSS框架 */
|
||
|
||
/* 暗黑模式样式 */
|
||
.dark-mode {
|
||
--bg-color: #121212;
|
||
--text-color: #ffffff;
|
||
--card-bg: #1e1e1e;
|
||
--border-color: #444;
|
||
--hover-color: #2d2d2d;
|
||
--sidebar-bg: #1a1a1a;
|
||
--sidebar-hover: #252525;
|
||
--sidebar-border: #444;
|
||
--button-text: #ffffff;
|
||
--tag-bg: #2a2a2a;
|
||
--tag-text: #ffffff;
|
||
--tag-border: #555;
|
||
}
|
||
|
||
body.dark-mode {
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.dark-mode nav,
|
||
.dark-mode footer,
|
||
.dark-mode .bg-white {
|
||
background-color: var(--card-bg) !important;
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
|
||
.dark-mode .border,
|
||
.dark-mode .border-t,
|
||
.dark-mode .border-b {
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
|
||
.dark-mode .text-gray-900 {
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
.dark-mode .text-gray-600,
|
||
.dark-mode .text-gray-500,
|
||
.dark-mode .text-gray-700 {
|
||
color: #d0d0d0 !important;
|
||
}
|
||
|
||
.dark-mode input,
|
||
.dark-mode select {
|
||
background-color: #252525;
|
||
border-color: var(--border-color);
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.dark-mode input::placeholder {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.dark-mode .hover\:bg-gray-200:hover {
|
||
background-color: var(--hover-color) !important;
|
||
}
|
||
|
||
.dark-mode .bg-gray-100 {
|
||
background-color: #252525 !important;
|
||
}
|
||
|
||
.dark-mode .hover\:bg-gray-200:hover {
|
||
background-color: #3a3a3a !important;
|
||
}
|
||
|
||
.dark-mode .bg-gray-50 {
|
||
background-color: #1a1a1a !important;
|
||
}
|
||
|
||
/* 侧边栏暗黑模式 */
|
||
.dark-mode #sidebar {
|
||
background-color: var(--sidebar-bg);
|
||
border-right-color: var(--sidebar-border);
|
||
}
|
||
|
||
.dark-mode #sidebar .border-b,
|
||
.dark-mode #sidebar .border-t {
|
||
border-color: var(--sidebar-border);
|
||
}
|
||
|
||
.dark-mode #sidebar .hover\:bg-gray-100:hover {
|
||
background-color: var(--sidebar-hover) !important;
|
||
}
|
||
|
||
.dark-mode #sidebar .active-nav-item {
|
||
background-color: var(--sidebar-hover);
|
||
}
|
||
|
||
.dark-mode #sidebar .bg-gray-50 {
|
||
background-color: #151515 !important;
|
||
}
|
||
|
||
.dark-mode #sidebar .bg-gray-200 {
|
||
background-color: #444 !important;
|
||
}
|
||
|
||
/* 工具标签样式增强 - 暗黑模式 */
|
||
.dark-mode button.px-3.py-1\.5:not(.bg-gray-800),
|
||
.dark-mode .px-3.py-1\.5.bg-gray-100 {
|
||
background-color: var(--tag-bg) !important;
|
||
color: var(--tag-text) !important;
|
||
border: 1px solid var(--tag-border) !important;
|
||
}
|
||
|
||
.dark-mode button.px-3.py-1\.5:hover:not(.bg-gray-800),
|
||
.dark-mode .px-3.py-1\.5.bg-gray-100:hover {
|
||
background-color: #3d3d3d !important;
|
||
}
|
||
|
||
/* 全部按钮特殊样式 */
|
||
.dark-mode button.px-3.py-1\.5.bg-gray-800 {
|
||
background-color: #4a4a4a !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* 统计卡片文字增强 */
|
||
.dark-mode .text-gray-500.text-sm {
|
||
color: #c0c0c0 !important;
|
||
}
|
||
|
||
.dark-mode .text-2xl.font-bold {
|
||
color: #ffffff !important;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* 质量滑块样式 */
|
||
input[type=range] {
|
||
-webkit-appearance: none;
|
||
height: 5px;
|
||
border-radius: 5px;
|
||
background: #e2e8f0;
|
||
outline: none;
|
||
}
|
||
|
||
.dark-mode input[type=range] {
|
||
background: #4b5563;
|
||
}
|
||
|
||
input[type=range]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: #1f2937;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dark-mode input[type=range]::-webkit-slider-thumb {
|
||
background: #d1d5db;
|
||
}
|
||
|
||
/* 切换开关样式 */
|
||
input:checked ~ div.w-5 {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
input:checked ~ div.bg-gray-300 {
|
||
background-color: #6b7280;
|
||
}
|
||
|
||
.dark-mode input:checked ~ div.w-5 {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.dark-mode input:checked ~ div.bg-gray-300 {
|
||
background-color: #6b7280;
|
||
}
|
||
|
||
/* 文件拖放区域 */
|
||
#upload-container.drag-over {
|
||
border-color: #4b5563;
|
||
background-color: rgba(243, 244, 246, 0.1);
|
||
}
|
||
|
||
.dark-mode #upload-container.drag-over {
|
||
border-color: #9ca3af;
|
||
background-color: rgba(30, 30, 30, 0.5);
|
||
}
|
||
|
||
/* 动画效果 */
|
||
.fade-in {
|
||
animation: fadeIn 0.3s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* 侧边栏动画 */
|
||
.active-nav-item {
|
||
background-color: #f3f4f6;
|
||
position: relative;
|
||
}
|
||
|
||
.active-nav-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
background-color: #1f2937;
|
||
}
|
||
|
||
.dark-mode .active-nav-item::before {
|
||
background-color: #60a5fa;
|
||
}
|
||
|
||
/* 卡片悬停效果 */
|
||
.hover-card-shadow:hover {
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.dark-mode .hover-card-shadow:hover {
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* 按钮渐变 */
|
||
.btn-gradient {
|
||
background: linear-gradient(45deg, #1a202c, #2d3748);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-gradient:hover {
|
||
background: linear-gradient(45deg, #111827, #1f2937);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.dark-mode .btn-gradient {
|
||
background: linear-gradient(45deg, #2d3748, #4a5568);
|
||
}
|
||
|
||
.dark-mode .btn-gradient:hover {
|
||
background: linear-gradient(45deg, #4a5568, #6b7280);
|
||
}
|
||
|
||
/* 顶部信息卡片渐变线 */
|
||
.gradient-line {
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
|
||
border-radius: 0 0 4px 4px;
|
||
}
|
||
|
||
/* 滚动条美化 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #a1a1a1;
|
||
}
|
||
|
||
.dark-mode ::-webkit-scrollbar-track {
|
||
background: #2d3748;
|
||
}
|
||
|
||
.dark-mode ::-webkit-scrollbar-thumb {
|
||
background: #4a5568;
|
||
}
|
||
|
||
.dark-mode ::-webkit-scrollbar-thumb:hover {
|
||
background: #6b7280;
|
||
}
|
||
|
||
/* 卡片加载动画 */
|
||
.pulse {
|
||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
/* 悬浮按钮 */
|
||
.fab-button {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background-color: #1f2937;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
.fab-button:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.dark-mode .fab-button {
|
||
background-color: #3b82f6;
|
||
}
|
||
|
||
/* 菜单动画 */
|
||
.menu-dropdown {
|
||
transform-origin: top;
|
||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||
transform: scaleY(0);
|
||
opacity: 0;
|
||
}
|
||
|
||
.menu-dropdown.open {
|
||
transform: scaleY(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 图标旋转动画 */
|
||
.icon-rotate {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.icon-rotate.rotate {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 640px) {
|
||
h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.container {
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
.fab-button {
|
||
width: 48px;
|
||
height: 48px;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
}
|
||
}
|
||
|
||
/* 顶部信息卡片按钮样式 - 暗黑模式 */
|
||
/* 浏览工具按钮 */
|
||
.dark-mode a.inline-flex.items-center.bg-white.bg-opacity-20 {
|
||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||
color: #ffffff !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
||
}
|
||
|
||
.dark-mode a.inline-flex.items-center.bg-white.bg-opacity-20:hover {
|
||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* 收藏工具按钮 */
|
||
.dark-mode button.inline-flex.items-center.bg-white.text-gray-800,
|
||
.dark-mode button.bg-white.text-gray-800 {
|
||
background-color: #2d2d2d !important;
|
||
color: #ffffff !important;
|
||
border: 1px solid #555 !important;
|
||
}
|
||
|
||
.dark-mode button.inline-flex.items-center.bg-white.text-gray-800:hover,
|
||
.dark-mode button.bg-white.text-gray-800:hover {
|
||
background-color: #3d3d3d !important;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* 收藏工具图标高亮 */
|
||
.dark-mode button.inline-flex.items-center.bg-white.text-gray-800 i.fas.fa-star,
|
||
.dark-mode button.bg-white.text-gray-800 i.fas.fa-star {
|
||
color: #fbbf24 !important; /* 星星图标使用金黄色 */
|
||
}
|
||
|
||
/* 禁用按钮样式 - 暗黑模式 */
|
||
.dark-mode button.bg-gray-300.text-gray-500,
|
||
.dark-mode button.inline-flex.bg-gray-300.text-gray-500 {
|
||
background-color: #3a3a3a !important;
|
||
color: #a0a0a0 !important;
|
||
border: 1px solid #555 !important;
|
||
}
|
||
|
||
/* 按钮旁的禁用图标按钮 */
|
||
.dark-mode button.text-gray-300.cursor-not-allowed {
|
||
color: #666666 !important;
|
||
}
|
||
|
||
/* 开发中的标签 */
|
||
.dark-mode span.bg-purple-100.text-purple-600 {
|
||
background-color: rgba(124, 58, 237, 0.2) !important;
|
||
color: #c084fc !important;
|
||
} |