| @import 'tailwindcss/base'; |
| @import 'tailwindcss/components'; |
| @import 'tailwindcss/utilities'; |
| @import './variables.css'; |
| @import './components.css'; |
|
|
| |
| @import '@fortawesome/fontawesome-free/css/all.css'; |
|
|
| |
| body { |
| font-family: |
| 'Inter', |
| -apple-system, |
| BlinkMacSystemFont, |
| 'Segoe UI', |
| Roboto, |
| sans-serif; |
| background: linear-gradient( |
| 135deg, |
| var(--primary-color) 0%, |
| var(--secondary-color) 50%, |
| var(--accent-color) 100% |
| ); |
| background-attachment: fixed; |
| min-height: 100vh; |
| margin: 0; |
| overflow-x: hidden; |
| } |
|
|
| body::before { |
| content: ''; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: |
| radial-gradient(circle at 20% 80%, rgba(240, 147, 251, 0.2) 0%, transparent 50%), |
| radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%), |
| radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%); |
| pointer-events: none; |
| z-index: -1; |
| } |
|
|
| |
| body, |
| div, |
| button, |
| input, |
| select, |
| textarea, |
| table, |
| tr, |
| td, |
| th, |
| span, |
| p, |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6 { |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| |
| .el-button--primary { |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); |
| border-color: transparent; |
| } |
|
|
| .el-button--primary:hover, |
| .el-button--primary:focus { |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); |
| opacity: 0.9; |
| } |
|
|
| |
| .custom-scrollbar { |
| scrollbar-width: thin; |
| scrollbar-color: rgba(102, 126, 234, 0.3) rgba(102, 126, 234, 0.05); |
| } |
|
|
| .custom-scrollbar::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: rgba(102, 126, 234, 0.05); |
| border-radius: 10px; |
| } |
|
|
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%); |
| border-radius: 10px; |
| transition: background 0.3s ease; |
| } |
|
|
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%); |
| } |
|
|
| .custom-scrollbar::-webkit-scrollbar-thumb:active { |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%); |
| } |
|
|
| |
| .fade-enter-active, |
| .fade-leave-active { |
| transition: opacity 0.3s ease; |
| } |
|
|
| .fade-enter-from, |
| .fade-leave-to { |
| opacity: 0; |
| } |
|
|
| .slide-up-enter-active, |
| .slide-up-leave-active { |
| transition: all 0.3s ease; |
| } |
|
|
| .slide-up-enter-from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
|
|
| .slide-up-leave-to { |
| opacity: 0; |
| transform: translateY(-30px); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .glass, |
| .glass-strong { |
| margin: 16px; |
| border-radius: 20px; |
| } |
|
|
| .stat-card { |
| padding: 16px; |
| } |
|
|
| .tab-btn { |
| font-size: 14px; |
| padding: 12px 8px; |
| } |
|
|
| .modal-scroll-content { |
| max-height: calc(85vh - 120px); |
| } |
| } |
|
|
