|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
:root { |
|
|
--primary-gradient: linear-gradient(135deg, #FFA8A8 0%, #8D96FF 100%); |
|
|
--secondary-gradient: linear-gradient(135deg, #FFA8A8 0%, #FFCECE 100%); |
|
|
--success-gradient: linear-gradient(135deg, #8D96FF 0%, #B8BFFF 100%); |
|
|
--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%); |
|
|
--warning-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); |
|
|
--glass-bg: rgba(255, 250, 240, 0.15); |
|
|
--glass-border: rgba(255, 168, 168, 0.3); |
|
|
--glass-hover: rgba(255, 250, 240, 0.25); |
|
|
--text-primary: #1a1a1a; |
|
|
--text-secondary: #333333; |
|
|
--text-muted: #666666; |
|
|
--text-disabled: #999999; |
|
|
--shadow-sm: 0 2px 10px rgba(255, 168, 168, 0.2); |
|
|
--shadow: 0 8px 32px rgba(255, 168, 168, 0.3); |
|
|
--shadow-lg: 0 15px 50px rgba(255, 168, 168, 0.4); |
|
|
--border-radius-sm: 8px; |
|
|
--border-radius: 16px; |
|
|
--border-radius-lg: 20px; |
|
|
--border-radius-xl: 24px; |
|
|
--border-radius-2xl: 32px; |
|
|
--spacing-xs: 0.25rem; |
|
|
--spacing-sm: 0.5rem; |
|
|
--spacing-md: 1rem; |
|
|
--spacing-lg: 1.5rem; |
|
|
--spacing-xl: 2rem; |
|
|
--spacing-2xl: 3rem; |
|
|
--font-size-xs: 0.75rem; |
|
|
--font-size-sm: 0.875rem; |
|
|
--font-size-base: 1rem; |
|
|
--font-size-lg: 1.125rem; |
|
|
--font-size-xl: 1.25rem; |
|
|
--font-size-2xl: 1.5rem; |
|
|
--font-size-3xl: 2rem; |
|
|
--font-size-4xl: 2.5rem; |
|
|
--transition-fast: 0.15s ease; |
|
|
--transition-base: 0.3s ease; |
|
|
--transition-slow: 0.5s ease; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
background: linear-gradient(135deg, #FFFAF0 0%, #FFE8E8 50%, #E8ECFF 100%); |
|
|
color: var(--text-primary); |
|
|
min-height: 100vh; |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
font-size: var(--font-size-base); |
|
|
} |
|
|
|
|
|
.plugins-search { |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.search-container { |
|
|
position: relative; |
|
|
max-width: 500px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.search-container i.fa-search { |
|
|
position: absolute; |
|
|
left: 1rem; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
color: #8D96FF; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.tag-section { |
|
|
margin-bottom: 2rem; |
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
backdrop-filter: blur(5px); |
|
|
border-radius: 16px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.4); |
|
|
overflow: hidden; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tag-section:hover { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border: 1px solid rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.tag-header { |
|
|
padding: 1.5rem; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
transition: all 0.3s ease; |
|
|
background: rgba(255, 255, 255, 0.02); |
|
|
} |
|
|
|
|
|
.tag-header:hover { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.tag-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
font-size: 1.2rem; |
|
|
font-weight: 600; |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
|
|
|
.tag-title i { |
|
|
color: rgba(133, 48, 48, 0.9); |
|
|
font-size: 1.3rem; |
|
|
} |
|
|
|
|
|
.plugin-count { |
|
|
background: rgba(133, 48, 48, 0.2); |
|
|
color: rgba(255, 168, 168, 0.9); |
|
|
padding: 0.3rem 0.8rem; |
|
|
border-radius: 12px; |
|
|
font-size: 0.85rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.tag-expand { |
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
font-size: 1.2rem; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.tag-expand.expanded { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
.tag-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.4s ease; |
|
|
padding: 0 1.5rem; |
|
|
} |
|
|
|
|
|
.tag-content.expanded { |
|
|
max-height: 10000px; |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.tag-content .plugin-card { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.tag-content .plugin-card:last-child { |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.search-container input { |
|
|
width: 100%; |
|
|
padding: 1rem 1rem 1rem 3rem; |
|
|
border: 2px solid rgba(255, 168, 168, 0.3); |
|
|
border-radius: 25px; |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
color: var(--text-primary); |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.search-container input:focus { |
|
|
outline: none; |
|
|
border-color: #FFA8A8; |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
box-shadow: 0 0 20px rgba(255, 168, 168, 0.3); |
|
|
} |
|
|
|
|
|
.search-container input::placeholder { |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.search-container button { |
|
|
position: absolute; |
|
|
right: 0.5rem; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
background: #FFA8A8; |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 2.5rem; |
|
|
height: 2.5rem; |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.search-container button:hover { |
|
|
background: #FF8E8E; |
|
|
transform: translateY(-50%) scale(1.1); |
|
|
} |
|
|
|
|
|
.admin-card .ban-actions { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.admin-card .ban-actions .btn { |
|
|
flex: 1; |
|
|
padding: 0.75rem 1rem; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.admin-card .ban-actions .btn-danger { |
|
|
background: #e74c3c; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.admin-card .ban-actions .btn-danger:hover { |
|
|
background: #c0392b; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.admin-card .ban-actions .btn-success { |
|
|
background: #8D96FF; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.admin-card .ban-actions .btn-success:hover { |
|
|
background: #7580EE; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.ban-status { |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
margin-top: 1rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.ban-status.banned { |
|
|
background: rgba(231, 76, 60, 0.1); |
|
|
border: 1px solid #e74c3c; |
|
|
color: #e74c3c; |
|
|
} |
|
|
|
|
|
.ban-status.active { |
|
|
background: rgba(141, 150, 255, 0.1); |
|
|
border: 1px solid #8D96FF; |
|
|
color: #8D96FF; |
|
|
} |
|
|
|
|
|
.usage-timeline { |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
border-radius: 15px; |
|
|
padding: 1.5rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 0.75rem 0; |
|
|
border-bottom: 1px solid rgba(255, 168, 168, 0.2); |
|
|
} |
|
|
|
|
|
.timeline-item:last-child { |
|
|
border-bottom: none; |
|
|
} |
|
|
|
|
|
.timeline-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, #FFA8A8, #8D96FF); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
margin-right: 1rem; |
|
|
} |
|
|
|
|
|
.timeline-content { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.timeline-title { |
|
|
font-weight: 600; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 0.25rem; |
|
|
} |
|
|
|
|
|
.timeline-details { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.timeline-time { |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-muted); |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
body::before { |
|
|
content: ''; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: |
|
|
radial-gradient(circle at 20% 80%, rgba(255, 168, 168, 0.3), transparent 50%), |
|
|
radial-gradient(circle at 80% 20%, rgba(141, 150, 255, 0.3), transparent 50%), |
|
|
radial-gradient(circle at 40% 40%, rgba(255, 250, 240, 0.3), transparent 50%); |
|
|
z-index: -1; |
|
|
animation: backgroundShift 20s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes backgroundShift { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.8; } |
|
|
} |
|
|
|
|
|
.navbar { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
backdrop-filter: blur(20px); |
|
|
border-bottom: 1px solid var(--glass-border); |
|
|
padding: var(--spacing-md) 0; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 1000; |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.nav-container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 0 var(--spacing-xl); |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-brand h2 { |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
font-size: var(--font-size-2xl); |
|
|
font-weight: 800; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
letter-spacing: -0.02em; |
|
|
} |
|
|
|
|
|
.nav-brand a { |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
display: flex; |
|
|
gap: var(--spacing-xl); |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: var(--text-secondary); |
|
|
text-decoration: none; |
|
|
padding: var(--spacing-sm) var(--spacing-lg); |
|
|
border-radius: var(--border-radius); |
|
|
transition: var(--transition-base); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
font-weight: 500; |
|
|
background: var(--glass-bg); |
|
|
border: 1px solid transparent; |
|
|
backdrop-filter: blur(10px); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
background: var(--glass-hover); |
|
|
color: var(--text-primary); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: var(--shadow-sm); |
|
|
border-color: var(--glass-border); |
|
|
} |
|
|
|
|
|
.hero { |
|
|
text-align: center; |
|
|
padding: 8rem var(--spacing-xl) 6rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: clamp(2.5rem, 5vw, 4.5rem); |
|
|
font-weight: 800; |
|
|
margin-bottom: var(--spacing-lg); |
|
|
background: linear-gradient(135deg, #FFA8A8, #8D96FF, #FFA8A8); |
|
|
background-size: 300% 300%; |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
animation: gradientShift 6s ease-in-out infinite; |
|
|
letter-spacing: -0.03em; |
|
|
line-height: 1.1; |
|
|
} |
|
|
|
|
|
@keyframes gradientShift { |
|
|
0%, 100% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
} |
|
|
|
|
|
.hero-subtitle { |
|
|
font-size: var(--font-size-xl); |
|
|
margin-bottom: var(--spacing-2xl); |
|
|
color: var(--text-secondary); |
|
|
font-weight: 400; |
|
|
max-width: 600px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
display: flex; |
|
|
gap: var(--spacing-lg); |
|
|
justify-content: center; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: var(--spacing-md) var(--spacing-xl); |
|
|
border: none; |
|
|
border-radius: var(--border-radius); |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
font-size: var(--font-size-base); |
|
|
cursor: pointer; |
|
|
transition: var(--transition-base); |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid transparent; |
|
|
font-family: inherit; |
|
|
white-space: nowrap; |
|
|
min-height: 48px; |
|
|
} |
|
|
|
|
|
.btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); |
|
|
transition: left 0.6s ease; |
|
|
} |
|
|
|
|
|
.btn:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
box-shadow: 0 4px 20px rgba(255, 168, 168, 0.4); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: var(--glass-bg); |
|
|
color: var(--text-primary); |
|
|
border-color: var(--glass-border); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background: var(--glass-hover); |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.btn-warning { |
|
|
background: var(--secondary-gradient); |
|
|
color: white; |
|
|
box-shadow: 0 4px 20px rgba(255, 168, 168, 0.4); |
|
|
} |
|
|
|
|
|
.btn-warning:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5); |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background: var(--danger-gradient); |
|
|
color: white; |
|
|
box-shadow: 0 4px 20px rgba(250, 112, 154, 0.4); |
|
|
} |
|
|
|
|
|
.btn-danger:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 30px rgba(250, 112, 154, 0.5); |
|
|
} |
|
|
|
|
|
.btn-info { |
|
|
background: var(--success-gradient); |
|
|
color: white; |
|
|
box-shadow: 0 4px 20px rgba(141, 150, 255, 0.4); |
|
|
} |
|
|
|
|
|
.btn-info:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 30px rgba(141, 150, 255, 0.5); |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
padding: var(--spacing-sm) var(--spacing-lg); |
|
|
font-size: var(--font-size-sm); |
|
|
min-height: 36px; |
|
|
} |
|
|
|
|
|
.btn:disabled { |
|
|
opacity: 0.6; |
|
|
cursor: not-allowed; |
|
|
transform: none !important; |
|
|
box-shadow: none !important; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 0 var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.features { |
|
|
padding: 8rem 0; |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
backdrop-filter: blur(20px); |
|
|
border-top: 1px solid var(--glass-border); |
|
|
border-bottom: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
text-align: center; |
|
|
font-size: var(--font-size-4xl); |
|
|
margin-bottom: 4rem; |
|
|
font-weight: 800; |
|
|
position: relative; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
letter-spacing: -0.02em; |
|
|
} |
|
|
|
|
|
.section-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -15px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 100px; |
|
|
height: 4px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.features-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); |
|
|
gap: 2.5rem; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-lg); |
|
|
padding: var(--spacing-2xl); |
|
|
text-align: center; |
|
|
transition: var(--transition-slow); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.feature-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: var(--primary-gradient); |
|
|
opacity: 0; |
|
|
transition: opacity var(--transition-base); |
|
|
} |
|
|
|
|
|
.feature-card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-15px); |
|
|
border-color: rgba(255, 168, 168, 0.6); |
|
|
box-shadow: var(--shadow-lg); |
|
|
background: var(--glass-hover); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
font-size: 4rem; |
|
|
margin-bottom: var(--spacing-xl); |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
transition: transform var(--transition-base); |
|
|
} |
|
|
|
|
|
.feature-card:hover .feature-icon { |
|
|
transform: scale(1.1) rotate(5deg); |
|
|
} |
|
|
|
|
|
.feature-card h3 { |
|
|
font-size: var(--font-size-2xl); |
|
|
margin-bottom: var(--spacing-lg); |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.feature-card p { |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.8; |
|
|
font-size: var(--font-size-base); |
|
|
} |
|
|
|
|
|
.stats { |
|
|
padding: 8rem 0; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.stats-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
|
|
gap: 2.5rem; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-lg); |
|
|
padding: var(--spacing-2xl); |
|
|
text-align: center; |
|
|
transition: var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.stat-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: radial-gradient(circle, rgba(255, 168, 168, 0.15) 0%, transparent 70%); |
|
|
opacity: 0; |
|
|
transition: opacity var(--transition-base); |
|
|
} |
|
|
|
|
|
.stat-card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.stat-card:hover { |
|
|
transform: translateY(-10px); |
|
|
border-color: rgba(255, 168, 168, 0.6); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.stat-number { |
|
|
font-size: 3.5rem; |
|
|
font-weight: 800; |
|
|
margin-bottom: var(--spacing-md); |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
display: block; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
line-height: 1.1; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: var(--font-size-lg); |
|
|
color: var(--text-secondary); |
|
|
font-weight: 500; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.auth-container { |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.auth-card { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-xl); |
|
|
padding: var(--spacing-2xl); |
|
|
width: 100%; |
|
|
max-width: 480px; |
|
|
box-shadow: var(--shadow); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.auth-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: var(--primary-gradient); |
|
|
} |
|
|
|
|
|
.auth-tabs { |
|
|
display: flex; |
|
|
margin-bottom: 2.5rem; |
|
|
background: rgba(255, 168, 168, 0.1); |
|
|
border-radius: var(--border-radius); |
|
|
padding: 0.4rem; |
|
|
border: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.tab-btn { |
|
|
flex: 1; |
|
|
padding: var(--spacing-md) var(--spacing-sm); |
|
|
border: none; |
|
|
background: transparent; |
|
|
color: var(--text-muted); |
|
|
border-radius: 12px; |
|
|
cursor: pointer; |
|
|
transition: var(--transition-base); |
|
|
font-weight: 600; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: var(--spacing-sm); |
|
|
font-size: var(--font-size-sm); |
|
|
min-height: 44px; |
|
|
} |
|
|
|
|
|
.tab-btn.active { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
box-shadow: 0 4px 15px rgba(255, 168, 168, 0.3); |
|
|
} |
|
|
|
|
|
.auth-form h2 { |
|
|
text-align: center; |
|
|
margin-bottom: 2.5rem; |
|
|
font-size: var(--font-size-3xl); |
|
|
font-weight: 700; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 1.8rem; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: var(--spacing-sm); |
|
|
font-weight: 600; |
|
|
color: var(--text-primary); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
.form-group input, |
|
|
.form-group select { |
|
|
width: 100%; |
|
|
padding: 1.2rem 1.5rem; |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius); |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
color: var(--text-primary); |
|
|
font-size: var(--font-size-base); |
|
|
transition: var(--transition-base); |
|
|
backdrop-filter: blur(10px); |
|
|
font-weight: 500; |
|
|
min-height: 52px; |
|
|
} |
|
|
|
|
|
.form-group input::placeholder { |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.form-group input:focus, |
|
|
.form-group select:focus { |
|
|
outline: none; |
|
|
border-color: #FFA8A8; |
|
|
box-shadow: 0 0 0 3px rgba(255, 168, 168, 0.2); |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
.dashboard-container { |
|
|
display: flex; |
|
|
min-height: calc(100vh - 80px); |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 280px; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
backdrop-filter: blur(20px); |
|
|
border-right: 1px solid var(--glass-border); |
|
|
padding: var(--spacing-xl) 0; |
|
|
position: sticky; |
|
|
top: 80px; |
|
|
height: calc(100vh - 80px); |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.sidebar-menu { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--spacing-sm); |
|
|
padding: 0 var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.menu-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-md); |
|
|
padding: 1.2rem var(--spacing-lg); |
|
|
color: var(--text-muted); |
|
|
text-decoration: none; |
|
|
border-radius: var(--border-radius); |
|
|
transition: var(--transition-base); |
|
|
font-weight: 500; |
|
|
position: relative; |
|
|
background: transparent; |
|
|
border: 1px solid transparent; |
|
|
min-height: 52px; |
|
|
} |
|
|
|
|
|
.menu-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
width: 4px; |
|
|
height: 0; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 2px; |
|
|
transition: height var(--transition-base); |
|
|
} |
|
|
|
|
|
.menu-item:hover, |
|
|
.menu-item.active { |
|
|
background: var(--glass-bg); |
|
|
color: var(--text-primary); |
|
|
transform: translateX(8px); |
|
|
border-color: var(--glass-border); |
|
|
} |
|
|
|
|
|
.menu-item:hover::before, |
|
|
.menu-item.active::before { |
|
|
height: 30px; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
flex: 1; |
|
|
padding: 2.5rem; |
|
|
overflow-y: auto; |
|
|
max-width: calc(100vw - 280px); |
|
|
} |
|
|
|
|
|
.section { |
|
|
display: none; |
|
|
animation: fadeInUp var(--transition-slow); |
|
|
} |
|
|
|
|
|
.section.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.section h2 { |
|
|
font-size: 2.8rem; |
|
|
margin-bottom: 2.5rem; |
|
|
font-weight: 800; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
letter-spacing: -0.02em; |
|
|
} |
|
|
|
|
|
.stats-cards { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: var(--spacing-xl); |
|
|
margin-bottom: var(--spacing-2xl); |
|
|
} |
|
|
|
|
|
.stats-cards .stat-card { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-xl); |
|
|
padding: 2.5rem; |
|
|
text-align: left; |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-lg); |
|
|
box-shadow: var(--shadow); |
|
|
transition: var(--transition-base); |
|
|
} |
|
|
|
|
|
.stats-cards .stat-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.stat-icon { |
|
|
font-size: var(--font-size-4xl); |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background: var(--glass-bg); |
|
|
padding: var(--spacing-lg); |
|
|
border-radius: var(--border-radius); |
|
|
border: 1px solid var(--glass-border); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
min-width: 80px; |
|
|
height: 80px; |
|
|
} |
|
|
|
|
|
.stat-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.stat-info .stat-number { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: var(--spacing-sm); |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
font-weight: 800; |
|
|
line-height: 1.1; |
|
|
} |
|
|
|
|
|
.stat-info .stat-label { |
|
|
font-size: var(--font-size-base); |
|
|
color: var(--text-secondary); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.plugin-form { |
|
|
background: rgba(255, 255, 255, 0.4); |
|
|
border-radius: var(--border-radius); |
|
|
padding: var(--spacing-xl); |
|
|
border: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.form-title { |
|
|
color: var(--text-primary); |
|
|
font-size: var(--font-size-xl); |
|
|
font-weight: 700; |
|
|
margin-bottom: var(--spacing-xl); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.form-grid { |
|
|
display: grid; |
|
|
gap: var(--spacing-lg); |
|
|
margin-bottom: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.form-field { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.form-field label { |
|
|
color: var(--text-primary); |
|
|
font-weight: 600; |
|
|
font-size: var(--font-size-sm); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-xs); |
|
|
} |
|
|
|
|
|
.form-field label .required { |
|
|
color: #ff6b6b; |
|
|
font-size: var(--font-size-lg); |
|
|
} |
|
|
|
|
|
.form-field input, |
|
|
.form-field select { |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius); |
|
|
padding: var(--spacing-md) var(--spacing-lg); |
|
|
color: var(--text-primary); |
|
|
font-size: var(--font-size-sm); |
|
|
transition: var(--transition-base); |
|
|
backdrop-filter: blur(10px); |
|
|
min-height: 48px; |
|
|
} |
|
|
|
|
|
.form-field input::placeholder { |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.form-field input:focus, |
|
|
.form-field select:focus { |
|
|
outline: none; |
|
|
border-color: #FFA8A8; |
|
|
box-shadow: 0 0 0 3px rgba(255, 168, 168, 0.2); |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
.form-actions { |
|
|
display: flex; |
|
|
gap: var(--spacing-lg); |
|
|
align-items: center; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.form-row { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: var(--spacing-lg); |
|
|
margin-bottom: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
display: flex; |
|
|
gap: var(--spacing-md); |
|
|
align-items: end; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.input-group input { |
|
|
flex: 1; |
|
|
min-width: 200px; |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 2px solid rgba(255, 168, 168, 0.3); |
|
|
border-radius: 50%; |
|
|
border-top-color: #FFA8A8; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.loading { |
|
|
text-align: center; |
|
|
padding: var(--spacing-2xl); |
|
|
color: var(--text-muted); |
|
|
font-size: var(--font-size-lg); |
|
|
} |
|
|
|
|
|
.response-container { |
|
|
margin-top: var(--spacing-xl); |
|
|
display: none; |
|
|
border-radius: var(--border-radius); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.response-container.show { |
|
|
display: block; |
|
|
animation: fadeIn var(--transition-base); |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.response-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: var(--spacing-md); |
|
|
flex-wrap: wrap; |
|
|
gap: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.response-title { |
|
|
color: var(--text-primary); |
|
|
font-weight: 700; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
font-size: var(--font-size-lg); |
|
|
} |
|
|
|
|
|
.response-status { |
|
|
padding: var(--spacing-xs) var(--spacing-md); |
|
|
border-radius: 15px; |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
.response-status.success { |
|
|
background: rgba(141, 150, 255, 0.2); |
|
|
color: #8D96FF; |
|
|
border: 1px solid rgba(141, 150, 255, 0.4); |
|
|
} |
|
|
|
|
|
.response-status.error { |
|
|
background: rgba(250, 112, 154, 0.2); |
|
|
color: #fa709a; |
|
|
border: 1px solid rgba(250, 112, 154, 0.4); |
|
|
} |
|
|
|
|
|
.response-body { |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
border-radius: var(--border-radius); |
|
|
padding: var(--spacing-lg); |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
font-size: var(--font-size-sm); |
|
|
white-space: pre-wrap; |
|
|
color: #1a1a1a; |
|
|
border: 1px solid var(--glass-border); |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.copy-btn { |
|
|
background: rgba(255, 168, 168, 0.2); |
|
|
border: 1px solid rgba(255, 168, 168, 0.4); |
|
|
color: #FFA8A8; |
|
|
padding: var(--spacing-sm) var(--spacing-md); |
|
|
border-radius: var(--border-radius); |
|
|
font-size: var(--font-size-xs); |
|
|
cursor: pointer; |
|
|
transition: var(--transition-base); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-xs); |
|
|
min-height: 32px; |
|
|
} |
|
|
|
|
|
.copy-btn:hover { |
|
|
background: rgba(255, 168, 168, 0.35); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.plugins-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr; |
|
|
gap: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.plugin-card { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-lg); |
|
|
overflow: hidden; |
|
|
transition: var(--transition-slow); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.plugin-card:hover { |
|
|
border-color: rgba(255, 168, 168, 0.6); |
|
|
transform: translateY(-5px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.plugin-card.expanded { |
|
|
border-color: rgba(255, 168, 168, 0.8); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.plugin-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: var(--spacing-xl); |
|
|
cursor: pointer; |
|
|
user-select: none; |
|
|
transition: background var(--transition-base); |
|
|
min-height: 80px; |
|
|
} |
|
|
|
|
|
.plugin-header:hover { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.plugin-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-md); |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.plugin-name { |
|
|
font-size: var(--font-size-xl); |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.plugin-description { |
|
|
color: var(--text-secondary); |
|
|
font-size: var(--font-size-base); |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.plugin-type { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
padding: var(--spacing-sm) var(--spacing-md); |
|
|
border-radius: 20px; |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
box-shadow: 0 2px 10px rgba(255, 168, 168, 0.3); |
|
|
white-space: nowrap; |
|
|
min-height: 32px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.plugin-expand { |
|
|
font-size: var(--font-size-2xl); |
|
|
color: var(--text-muted); |
|
|
transition: var(--transition-base); |
|
|
margin-left: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.plugin-expand.expanded { |
|
|
transform: rotate(180deg); |
|
|
color: #FFA8A8; |
|
|
} |
|
|
|
|
|
.plugin-content { |
|
|
display: none; |
|
|
border-top: 1px solid var(--glass-border); |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.plugin-content.expanded { |
|
|
display: block; |
|
|
animation: slideDown var(--transition-base); |
|
|
} |
|
|
|
|
|
@keyframes slideDown { |
|
|
from { opacity: 0; max-height: 0; } |
|
|
to { opacity: 1; max-height: 1000px; } |
|
|
} |
|
|
|
|
|
.plugin-details { |
|
|
padding: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.plugin-tags { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: var(--spacing-sm); |
|
|
margin-bottom: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.tag { |
|
|
background: rgba(255, 168, 168, 0.2); |
|
|
color: #FFA8A8; |
|
|
padding: var(--spacing-xs) var(--spacing-md); |
|
|
border-radius: 15px; |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: 500; |
|
|
border: 1px solid rgba(255, 168, 168, 0.3); |
|
|
transition: var(--transition-base); |
|
|
min-height: 28px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.tag:hover { |
|
|
background: rgba(255, 168, 168, 0.35); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.plugin-routes { |
|
|
background: rgba(255, 255, 255, 0.4); |
|
|
padding: var(--spacing-lg); |
|
|
border-radius: var(--border-radius); |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
font-size: var(--font-size-sm); |
|
|
color: #1a1a1a; |
|
|
border: 1px solid var(--glass-border); |
|
|
overflow-x: auto; |
|
|
margin-bottom: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.btn-execute { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: var(--spacing-md) var(--spacing-xl); |
|
|
border-radius: var(--border-radius); |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: var(--transition-base); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
font-size: var(--font-size-base); |
|
|
box-shadow: 0 4px 20px rgba(255, 168, 168, 0.3); |
|
|
min-height: 48px; |
|
|
} |
|
|
|
|
|
.btn-execute:hover:not(:disabled) { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 30px rgba(255, 168, 168, 0.4); |
|
|
} |
|
|
|
|
|
.btn-execute:disabled { |
|
|
opacity: 0.6; |
|
|
cursor: not-allowed; |
|
|
transform: none !important; |
|
|
box-shadow: none !important; |
|
|
} |
|
|
|
|
|
.btn-reset { |
|
|
background: var(--glass-bg); |
|
|
color: var(--text-secondary); |
|
|
border: 1px solid var(--glass-border); |
|
|
padding: var(--spacing-md) var(--spacing-xl); |
|
|
border-radius: var(--border-radius); |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: var(--transition-base); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
font-size: var(--font-size-base); |
|
|
backdrop-filter: blur(10px); |
|
|
min-height: 48px; |
|
|
} |
|
|
|
|
|
.btn-reset:hover { |
|
|
background: var(--glass-hover); |
|
|
color: var(--text-primary); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.events-container { |
|
|
max-width: 600px; |
|
|
} |
|
|
|
|
|
.profile-container { |
|
|
max-width: 1000px; |
|
|
margin: var(--spacing-xl) auto; |
|
|
padding: 0 var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.profile-header { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-xl); |
|
|
padding: var(--spacing-2xl); |
|
|
text-align: center; |
|
|
margin-bottom: var(--spacing-xl); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.profile-header::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: var(--primary-gradient); |
|
|
} |
|
|
|
|
|
.profile-avatar { |
|
|
font-size: 6rem; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: var(--spacing-xl); |
|
|
background: var(--glass-bg); |
|
|
width: 140px; |
|
|
height: 140px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto var(--spacing-xl); |
|
|
border: 3px solid var(--glass-border); |
|
|
backdrop-filter: blur(10px); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.profile-avatar img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.profile-info h2 { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: var(--spacing-md); |
|
|
font-weight: 800; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
line-height: 1.1; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: var(--spacing-sm) var(--spacing-lg); |
|
|
border-radius: 20px; |
|
|
font-size: var(--font-size-xs); |
|
|
font-weight: 600; |
|
|
margin: var(--spacing-xs); |
|
|
min-height: 32px; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid; |
|
|
} |
|
|
|
|
|
.badge:hover { |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.badge.user { |
|
|
background: rgba(255, 168, 168, 0.2); |
|
|
color: #FFA8A8; |
|
|
border-color: rgba(255, 168, 168, 0.3); |
|
|
} |
|
|
|
|
|
.badge.cheap { |
|
|
background: linear-gradient(135deg, rgba(184, 127, 13, 0.95), rgba(184, 127, 13, 0.75)); |
|
|
color: white; |
|
|
border-color: rgba(184, 127, 13, 0.4); |
|
|
box-shadow: 0 2px 8px rgba(184, 127, 13, 0.3); |
|
|
} |
|
|
|
|
|
.badge.cheap:hover { |
|
|
background: linear-gradient(135deg, rgba(184, 127, 13, 1), rgba(184, 127, 13, 0.85)); |
|
|
box-shadow: 0 4px 12px rgba(184, 127, 13, 0.45); |
|
|
} |
|
|
|
|
|
.badge.premium { |
|
|
background: var(--secondary-gradient); |
|
|
color: white; |
|
|
border-color: rgba(255, 168, 168, 0.3); |
|
|
box-shadow: 0 2px 8px rgba(255, 168, 168, 0.3); |
|
|
} |
|
|
|
|
|
.badge.premium:hover { |
|
|
background: linear-gradient(135deg, #ffa8a8, #ff8b8b); |
|
|
box-shadow: 0 4px 12px rgba(255, 168, 168, 0.45); |
|
|
} |
|
|
|
|
|
.badge.vip { |
|
|
background: linear-gradient(135deg, rgba(255, 191, 0, 0.95), rgba(255, 191, 0, 0.75)); |
|
|
color: #1a1a1a; |
|
|
border-color: rgba(255, 191, 0, 0.4); |
|
|
box-shadow: 0 2px 8px rgba(255, 191, 0, 0.3); |
|
|
font-weight: 700; |
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.badge.vip:hover { |
|
|
background: linear-gradient(135deg, rgba(255, 191, 0, 1), rgba(255, 191, 0, 0.85)); |
|
|
box-shadow: 0 4px 12px rgba(255, 191, 0, 0.45); |
|
|
} |
|
|
|
|
|
.badge.supreme { |
|
|
background: linear-gradient(135deg, rgba(238, 62, 75, 0.95), rgba(238, 62, 75, 0.75)); |
|
|
color: white; |
|
|
border-color: rgba(238, 62, 75, 0.4); |
|
|
box-shadow: 0 2px 8px rgba(238, 62, 75, 0.3); |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.badge.supreme:hover { |
|
|
background: linear-gradient(135deg, rgba(238, 62, 75, 1), rgba(238, 62, 75, 0.85)); |
|
|
box-shadow: 0 4px 12px rgba(238, 62, 75, 0.45); |
|
|
} |
|
|
|
|
|
.badge.admin { |
|
|
background: linear-gradient(135deg, #853030 0%, #292727 100%); |
|
|
color: white; |
|
|
border-color: rgba(133, 48, 48, 0.4); |
|
|
box-shadow: 0 2px 8px rgba(133, 48, 48, 0.3); |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.badge.admin:hover { |
|
|
background: linear-gradient(135deg, #9a3838 0%, #353535 100%); |
|
|
box-shadow: 0 4px 12px rgba(133, 48, 48, 0.45); |
|
|
} |
|
|
|
|
|
.badge i { |
|
|
margin-right: 0.35rem; |
|
|
font-size: 0.85em; |
|
|
} |
|
|
|
|
|
.badge.glow-cheap { |
|
|
animation: glowCheap 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.badge.glow-premium { |
|
|
animation: glowPremium 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.badge.glow-vip { |
|
|
animation: glowVip 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.badge.glow-supreme { |
|
|
animation: glowSupreme 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes glowCheap { |
|
|
0%, 100% { |
|
|
box-shadow: 0 2px 8px rgba(184, 127, 13, 0.3); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 4px 20px rgba(184, 127, 13, 0.6); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes glowPremium { |
|
|
0%, 100% { |
|
|
box-shadow: 0 2px 8px rgba(255, 168, 168, 0.3); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 4px 20px rgba(255, 168, 168, 0.6); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes glowVip { |
|
|
0%, 100% { |
|
|
box-shadow: 0 2px 8px rgba(255, 191, 0, 0.3); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 4px 20px rgba(255, 191, 0, 0.6); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes glowSupreme { |
|
|
0%, 100% { |
|
|
box-shadow: 0 2px 8px rgba(238, 62, 75, 0.3); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 4px 20px rgba(238, 62, 75, 0.6); |
|
|
} |
|
|
} |
|
|
|
|
|
.profile-content { |
|
|
display: grid; |
|
|
gap: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.profile-section { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-lg); |
|
|
padding: 2.5rem; |
|
|
box-shadow: var(--shadow); |
|
|
transition: var(--transition-base); |
|
|
} |
|
|
|
|
|
.profile-section:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.profile-section h3 { |
|
|
margin-bottom: var(--spacing-xl); |
|
|
color: var(--text-primary); |
|
|
font-size: var(--font-size-xl); |
|
|
font-weight: 700; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.info-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.info-item { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.info-item label { |
|
|
font-weight: 600; |
|
|
color: var(--text-secondary); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
.info-value { |
|
|
font-size: var(--font-size-xl); |
|
|
font-weight: 700; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.api-key-display { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-md); |
|
|
background: rgba(255, 255, 255, 0.4); |
|
|
padding: var(--spacing-md) var(--spacing-lg); |
|
|
border-radius: var(--border-radius); |
|
|
border: 1px solid var(--glass-border); |
|
|
min-height: 52px; |
|
|
} |
|
|
|
|
|
.api-key-display code { |
|
|
flex: 1; |
|
|
color: #FFA8A8; |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
font-weight: 500; |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
.redeem-section, |
|
|
.setting-card, |
|
|
.admin-card { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-lg); |
|
|
padding: 2.5rem; |
|
|
box-shadow: var(--shadow); |
|
|
margin-bottom: var(--spacing-xl); |
|
|
transition: var(--transition-base); |
|
|
} |
|
|
|
|
|
.redeem-section:hover, |
|
|
.setting-card:hover, |
|
|
.admin-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.redeem-section h3, |
|
|
.setting-card h3, |
|
|
.admin-card h3 { |
|
|
margin-bottom: var(--spacing-xl); |
|
|
color: var(--text-primary); |
|
|
font-size: var(--font-size-xl); |
|
|
font-weight: 700; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.redeem-section p { |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: var(--spacing-lg); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.settings-container, |
|
|
.admin-container { |
|
|
display: grid; |
|
|
gap: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.settings-grid { |
|
|
display: grid; |
|
|
gap: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.setting-item { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.premium-actions { |
|
|
display: flex; |
|
|
gap: var(--spacing-lg); |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.danger-zone { |
|
|
border: 1px solid rgba(250, 112, 154, 0.4) !important; |
|
|
background: rgba(250, 112, 154, 0.05) !important; |
|
|
} |
|
|
|
|
|
.danger-actions { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.warning-text { |
|
|
margin-top: var(--spacing-lg); |
|
|
color: var(--text-muted); |
|
|
font-size: var(--font-size-sm); |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.usage-progress { |
|
|
margin-bottom: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.progress-item { |
|
|
margin-bottom: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.progress-item label { |
|
|
display: block; |
|
|
margin-bottom: var(--spacing-sm); |
|
|
font-weight: 600; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
width: 100%; |
|
|
height: 12px; |
|
|
background: rgba(255, 168, 168, 0.2); |
|
|
border-radius: 6px; |
|
|
overflow: hidden; |
|
|
border: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 6px; |
|
|
transition: width var(--transition-base); |
|
|
} |
|
|
|
|
|
.progress-text { |
|
|
font-size: var(--font-size-sm); |
|
|
color: var(--text-secondary); |
|
|
margin-top: var(--spacing-sm); |
|
|
display: block; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.activity-list { |
|
|
max-height: 350px; |
|
|
overflow-y: auto; |
|
|
padding-right: var(--spacing-xs); |
|
|
} |
|
|
|
|
|
.activity-item { |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
gap: var(--spacing-lg); |
|
|
padding: var(--spacing-lg); |
|
|
border-bottom: 1px solid var(--glass-border); |
|
|
transition: background var(--transition-base); |
|
|
border-radius: var(--border-radius); |
|
|
margin-bottom: var(--spacing-sm); |
|
|
min-height: 60px; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.activity-item:last-child { |
|
|
border-bottom: none; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|
|
|
.activity-item:hover { |
|
|
background: var(--glass-bg); |
|
|
} |
|
|
|
|
|
.activity-item i { |
|
|
margin-top: var(--spacing-xs); |
|
|
font-size: var(--font-size-lg); |
|
|
color: #FFA8A8; |
|
|
min-width: 20px; |
|
|
} |
|
|
|
|
|
.stat-item { |
|
|
text-align: center; |
|
|
padding: var(--spacing-lg); |
|
|
background: var(--glass-bg); |
|
|
border-radius: var(--border-radius); |
|
|
border: 1px solid var(--glass-border); |
|
|
transition: var(--transition-base); |
|
|
min-height: 100px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.stat-item:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
display: block; |
|
|
font-size: 2.2rem; |
|
|
font-weight: 800; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: var(--spacing-sm); |
|
|
line-height: 1.1; |
|
|
} |
|
|
|
|
|
.usage-chart { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: var(--border-radius-lg); |
|
|
padding: 2.5rem; |
|
|
margin-bottom: var(--spacing-2xl); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.usage-chart h3 { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--spacing-sm); |
|
|
margin-bottom: var(--spacing-xl); |
|
|
color: var(--text-primary); |
|
|
font-size: var(--font-size-2xl); |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.chart-placeholder { |
|
|
text-align: center; |
|
|
padding: 4rem; |
|
|
color: var(--text-muted); |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
border-radius: var(--border-radius); |
|
|
border: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.chart-placeholder i { |
|
|
font-size: var(--font-size-4xl); |
|
|
margin-bottom: var(--spacing-md); |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.text-muted { |
|
|
color: var(--text-muted); |
|
|
font-size: var(--font-size-sm); |
|
|
margin-top: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.footer { |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
border-top: 1px solid var(--glass-border); |
|
|
padding: 4rem 0; |
|
|
text-align: center; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(255, 168, 168, 0.1); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: linear-gradient(135deg, #FF8E8E 0%, #7580EE 100%); |
|
|
} |
|
|
|
|
|
.swal2-popup { |
|
|
background: rgba(255, 255, 255, 0.9) !important; |
|
|
backdrop-filter: blur(20px) !important; |
|
|
border: 1px solid var(--glass-border) !important; |
|
|
border-radius: var(--border-radius-lg) !important; |
|
|
box-shadow: var(--shadow) !important; |
|
|
} |
|
|
|
|
|
.swal2-title { |
|
|
color: var(--text-primary) !important; |
|
|
font-weight: 700 !important; |
|
|
} |
|
|
|
|
|
.swal2-content { |
|
|
color: var(--text-secondary) !important; |
|
|
} |
|
|
|
|
|
.swal2-confirm { |
|
|
background: var(--primary-gradient) !important; |
|
|
border: none !important; |
|
|
border-radius: var(--border-radius) !important; |
|
|
font-weight: 600 !important; |
|
|
min-height: 44px !important; |
|
|
} |
|
|
|
|
|
.swal2-cancel { |
|
|
background: var(--danger-gradient) !important; |
|
|
border: none !important; |
|
|
border-radius: var(--border-radius) !important; |
|
|
font-weight: 600 !important; |
|
|
min-height: 44px !important; |
|
|
} |
|
|
|
|
|
.swal2-input { |
|
|
background: rgba(255, 255, 255, 0.6) !important; |
|
|
border: 1px solid var(--glass-border) !important; |
|
|
border-radius: var(--border-radius) !important; |
|
|
color: var(--text-primary) !important; |
|
|
min-height: 48px !important; |
|
|
padding: var(--spacing-md) !important; |
|
|
} |
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.nav-menu { |
|
|
gap: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.stats-cards { |
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
|
|
} |
|
|
|
|
|
.info-grid { |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
:root { |
|
|
--spacing-xl: 1.5rem; |
|
|
--spacing-2xl: 2rem; |
|
|
--font-size-4xl: 2rem; |
|
|
--font-size-3xl: 1.75rem; |
|
|
--font-size-2xl: 1.25rem; |
|
|
} |
|
|
|
|
|
.dashboard-container { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
position: relative; |
|
|
top: 0; |
|
|
order: 2; |
|
|
border-right: none; |
|
|
border-top: 1px solid var(--glass-border); |
|
|
padding: var(--spacing-md) 0; |
|
|
} |
|
|
|
|
|
.sidebar-menu { |
|
|
flex-direction: row; |
|
|
overflow-x: auto; |
|
|
padding: 0 var(--spacing-md); |
|
|
gap: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.menu-item { |
|
|
white-space: nowrap; |
|
|
min-width: 140px; |
|
|
justify-content: center; |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
order: 1; |
|
|
max-width: 100vw; |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.hero { |
|
|
padding: 4rem var(--spacing-md) 3rem; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.auth-card { |
|
|
margin: var(--spacing-sm); |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.sidebar-menu { |
|
|
padding: 0 var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.stats-cards .stat-card, |
|
|
.plugin-details, |
|
|
.redeem-section, |
|
|
.setting-card, |
|
|
.admin-card, |
|
|
.profile-section { |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.plugin-header { |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.form-field input, |
|
|
.form-field select, |
|
|
.form-group input, |
|
|
.form-group select, |
|
|
.btn, |
|
|
.menu-item, |
|
|
.api-key-display { |
|
|
min-height: 44px; |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
min-height: 32px; |
|
|
} |
|
|
} |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
gap: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.features-grid, |
|
|
.stats-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.features { |
|
|
padding: 4rem 0; |
|
|
} |
|
|
|
|
|
.stats { |
|
|
padding: 4rem 0; |
|
|
} |
|
|
|
|
|
.auth-card { |
|
|
padding: var(--spacing-xl); |
|
|
margin: var(--spacing-md); |
|
|
max-width: none; |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
flex-direction: column; |
|
|
gap: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.tab-btn { |
|
|
font-size: var(--font-size-sm); |
|
|
padding: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.stats-cards { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.stats-cards .stat-card { |
|
|
flex-direction: column; |
|
|
text-align: center; |
|
|
gap: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.section h2 { |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
|
|
|
.form-actions { |
|
|
flex-direction: column; |
|
|
align-items: stretch; |
|
|
} |
|
|
|
|
|
.btn-execute, |
|
|
.btn-reset { |
|
|
width: 100%; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.form-row { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.premium-actions { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.info-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.response-header { |
|
|
flex-direction: column; |
|
|
align-items: stretch; |
|
|
gap: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.activity-item { |
|
|
flex-direction: column; |
|
|
text-align: center; |
|
|
gap: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.plugin-header { |
|
|
flex-direction: column; |
|
|
gap: var(--spacing-md); |
|
|
text-align: center; |
|
|
min-height: auto; |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.plugin-left { |
|
|
order: 2; |
|
|
} |
|
|
|
|
|
.plugin-type { |
|
|
order: 1; |
|
|
} |
|
|
|
|
|
.plugin-expand { |
|
|
order: 3; |
|
|
margin-left: 0; |
|
|
} |
|
|
|
|
|
.profile-container { |
|
|
padding: 0 var(--spacing-md); |
|
|
} |
|
|
|
|
|
.profile-header { |
|
|
padding: var(--spacing-xl); |
|
|
} |
|
|
|
|
|
.profile-section { |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.container { |
|
|
padding: 0 var(--spacing-md); |
|
|
} |
|
|
|
|
|
.hero { |
|
|
padding: 3rem var(--spacing-md) 2rem; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.auth-card { |
|
|
margin: var(--spacing-sm); |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.sidebar-menu { |
|
|
padding: 0 var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.stats-cards .stat-card, |
|
|
.plugin-details, |
|
|
.redeem-section, |
|
|
.setting-card, |
|
|
.admin-card, |
|
|
.profile-section { |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.plugin-header { |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.form-field input, |
|
|
.form-field select, |
|
|
.form-group input, |
|
|
.form-group select, |
|
|
.btn, |
|
|
.menu-item, |
|
|
.api-key-display { |
|
|
min-height: 44px; |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
min-height: 32px; |
|
|
} |
|
|
} |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.auth-card { |
|
|
margin: var(--spacing-sm); |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.sidebar-menu { |
|
|
padding: 0 var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.stats-cards .stat-card, |
|
|
.plugin-details, |
|
|
.redeem-section, |
|
|
.setting-card, |
|
|
.admin-card, |
|
|
.profile-section { |
|
|
padding: var(--spacing-lg); |
|
|
} |
|
|
|
|
|
.plugin-header { |
|
|
padding: var(--spacing-md); |
|
|
} |
|
|
|
|
|
.form-field input, |
|
|
.form-field select, |
|
|
.form-group input, |
|
|
.form-group select, |
|
|
.btn, |
|
|
.menu-item, |
|
|
.api-key-display { |
|
|
min-height: 44px; |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
min-height: 32px; |
|
|
} |
|
|
|
