921 lines
17 KiB
CSS
921 lines
17 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
|
||
|
||
:root {
|
||
--font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--nav-bg: #f8f9fb;
|
||
--nav-surface: rgba(0, 0, 0, 0.02);
|
||
--nav-border: #e5e7eb;
|
||
--nav-text: #1f2937;
|
||
--nav-text-muted: #6b7280;
|
||
--nav-hover: rgba(0, 0, 0, 0.04);
|
||
--nav-active: rgba(99, 102, 241, 0.08);
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font-sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
background: #f8f9fc;
|
||
color: #1a1a2e;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
|
||
#root {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ── Scrollbar ─────────────────────────── */
|
||
::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 5px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #d1d5db;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #9ca3af;
|
||
}
|
||
|
||
/* ── Electric Border Animation ─────────── */
|
||
@keyframes electric-pulse {
|
||
|
||
0%,
|
||
100% {
|
||
opacity: 0.4;
|
||
filter: blur(1px);
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
filter: blur(0);
|
||
}
|
||
}
|
||
|
||
@keyframes electric-flow {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
|
||
.content_box {
|
||
margin: -24px -32px -32px;
|
||
border-radius: 0 0 16px 16px;
|
||
height: calc(100vh - 34px);
|
||
overflow: auto;
|
||
scrollbar-width: none;
|
||
padding: 20px;
|
||
}
|
||
|
||
.electric-border-card {
|
||
position: relative;
|
||
}
|
||
|
||
.electric-border {
|
||
position: absolute;
|
||
inset: -2px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(90deg,
|
||
#6366f1,
|
||
#8b5cf6,
|
||
#a855f7,
|
||
#6366f1,
|
||
#8b5cf6,
|
||
#a855f7,
|
||
#6366f1);
|
||
background-size: 300% 100%;
|
||
animation: electric-flow 3s linear infinite, electric-pulse 2s ease-in-out infinite;
|
||
z-index: 0;
|
||
}
|
||
|
||
.electric-border-inner {
|
||
position: absolute;
|
||
inset: 2px;
|
||
border-radius: 14px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(12px);
|
||
z-index: 0;
|
||
}
|
||
|
||
.electric-border-card:hover .electric-border {
|
||
animation-duration: 1.5s, 1s;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* ── Shiny Text Animation ─────────────── */
|
||
@keyframes shiny {
|
||
0% {
|
||
background-position: -200% center;
|
||
}
|
||
|
||
100% {
|
||
background-position: 200% center;
|
||
}
|
||
}
|
||
|
||
.shiny-text-container {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.shiny-text {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
background: linear-gradient(90deg,
|
||
#6366f1 0%,
|
||
#8b5cf6 20%,
|
||
#a855f7 40%,
|
||
#c084fc 50%,
|
||
#a855f7 60%,
|
||
#8b5cf6 80%,
|
||
#6366f1 100%);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: shiny 3s linear infinite;
|
||
display: inline-block;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* ── Keyframe Animations ───────────────── */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInLeft {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInRight {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes float1 {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0) scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: translate(20px, -30px) scale(1.05);
|
||
}
|
||
}
|
||
|
||
@keyframes float2 {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0) scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: translate(-15px, 20px) scale(0.95);
|
||
}
|
||
}
|
||
|
||
@keyframes float3 {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0) rotate(0deg);
|
||
}
|
||
|
||
50% {
|
||
transform: translate(10px, -15px) rotate(3deg);
|
||
}
|
||
}
|
||
|
||
@keyframes slideInCard {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(14px) scale(0.97);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes spinSlow {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.animate-fadeInUp {
|
||
animation: fadeInUp 0.45s ease-out both;
|
||
}
|
||
|
||
.animate-fadeInLeft {
|
||
animation: fadeInLeft 0.55s ease-out both;
|
||
}
|
||
|
||
.animate-fadeInRight {
|
||
animation: fadeInRight 0.55s ease-out both;
|
||
}
|
||
|
||
.animate-slideInCard {
|
||
animation: slideInCard 0.4s ease-out both;
|
||
}
|
||
|
||
.animate-float1 {
|
||
animation: float1 8s ease-in-out infinite;
|
||
}
|
||
|
||
.animate-float2 {
|
||
animation: float2 10s ease-in-out infinite;
|
||
}
|
||
|
||
.animate-float3 {
|
||
animation: float3 12s ease-in-out infinite;
|
||
}
|
||
|
||
.ref-thumb:hover .ref-delete {
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
.stagger-children>*:nth-child(1) {
|
||
animation-delay: 0.04s;
|
||
}
|
||
|
||
.stagger-children>*:nth-child(2) {
|
||
animation-delay: 0.10s;
|
||
}
|
||
|
||
.stagger-children>*:nth-child(3) {
|
||
animation-delay: 0.16s;
|
||
}
|
||
|
||
.stagger-children>*:nth-child(4) {
|
||
animation-delay: 0.22s;
|
||
}
|
||
|
||
.stagger-children>*:nth-child(5) {
|
||
animation-delay: 0.28s;
|
||
}
|
||
|
||
.stagger-children>*:nth-child(6) {
|
||
animation-delay: 0.34s;
|
||
}
|
||
|
||
/* ── Ant Design Overrides ──────────────── */
|
||
.ant-input,
|
||
.ant-input-affix-wrapper,
|
||
.ant-select-selector,
|
||
.ant-input-number {
|
||
border-radius: 10px !important;
|
||
transition: all 0.25s ease !important;
|
||
}
|
||
|
||
.ant-input:focus,
|
||
.ant-input-affix-wrapper:focus,
|
||
.ant-input-affix-wrapper-focused,
|
||
.ant-select-focused .ant-select-selector {
|
||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
|
||
border-color: #6366f1 !important;
|
||
}
|
||
|
||
.ant-btn {
|
||
border-radius: 10px !important;
|
||
transition: all 0.25s ease !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
.ant-btn:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.ant-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.ant-card {
|
||
border-radius: 16px !important;
|
||
transition: all 0.3s ease !important;
|
||
}
|
||
|
||
.ant-modal-content {
|
||
border-radius: 20px !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ant-tag {
|
||
font-size: 12px;
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
/* ── Recharge card hover ───────────────── */
|
||
.recharge-card {
|
||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.recharge-card:hover {
|
||
transform: translateY(-8px) scale(1.02) !important;
|
||
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15) !important;
|
||
}
|
||
|
||
.recharge-card .recharge-price {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.recharge-card:hover .recharge-price {
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
/* ── Homepage tabs ────────────────────── */
|
||
.homepage-tabs .ant-tabs-nav {
|
||
margin-bottom: 8px !important;
|
||
}
|
||
|
||
.homepage-tabs .ant-tabs-tab {
|
||
padding: 8px 16px !important;
|
||
font-size: 13px !important;
|
||
font-weight: 500 !important;
|
||
color: #6b7280 !important;
|
||
transition: all 0.25s !important;
|
||
}
|
||
|
||
.homepage-tabs .ant-tabs-tab:hover {
|
||
color: #6366f1 !important;
|
||
}
|
||
|
||
.homepage-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
|
||
color: #6366f1 !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.homepage-tabs .ant-tabs-ink-bar {
|
||
background: linear-gradient(90deg, #6366f1, #a855f7) !important;
|
||
height: 3px !important;
|
||
border-radius: 2px !important;
|
||
}
|
||
|
||
/* ── Project card hover ────────────────── */
|
||
.project-card {
|
||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||
position: relative;
|
||
overflow: visible;
|
||
}
|
||
|
||
.project-card:hover {
|
||
transform: translateY(-4px) !important;
|
||
box-shadow: 0 16px 40px rgba(99, 102, 241, 0.12) !important;
|
||
border-color: #6366f1 !important;
|
||
}
|
||
|
||
/* ── Mobile Bottom Nav ─────────────────── */
|
||
.mobile-bottom-nav {
|
||
display: none;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 200;
|
||
height: 60px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(24px);
|
||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.mobile-bottom-nav .nav-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
color: #8b8fa3;
|
||
font-size: 9px;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.mobile-bottom-nav .nav-item.active {
|
||
color: #08080c;
|
||
}
|
||
|
||
.mobile-bottom-nav .nav-item .nav-icon {
|
||
font-size: 18px;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.mobile-bottom-nav .nav-item.active .nav-icon {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* ── Responsive Breakpoints ────────────── */
|
||
@media (max-width: 768px) {
|
||
.desktop-sidebar {
|
||
display: none !important;
|
||
}
|
||
|
||
.desktop-content {
|
||
margin-left: 0 !important;
|
||
padding: 16px !important;
|
||
padding-bottom: 80px !important;
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
.desktop-sidebar-toggle-zone {
|
||
display: none !important;
|
||
}
|
||
|
||
.mobile-bottom-nav {
|
||
display: flex !important;
|
||
}
|
||
|
||
/* Prevent horizontal overflow globally */
|
||
html,
|
||
body {
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
.mobile-hide {
|
||
display: none !important;
|
||
}
|
||
|
||
.mobile-full {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.mobile-stack {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.mobile-p-16 {
|
||
padding: 16px !important;
|
||
}
|
||
|
||
.mobile-gap-12 {
|
||
gap: 12px !important;
|
||
}
|
||
|
||
/* Login page */
|
||
.login-page {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.login-left {
|
||
display: none !important;
|
||
}
|
||
|
||
.login-right {
|
||
padding: 24px 16px !important;
|
||
}
|
||
|
||
.login-card {
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* Project list */
|
||
.project-item {
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
}
|
||
|
||
.project-item .project-actions {
|
||
margin-left: 0 !important;
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* Generate page header */
|
||
.gen-header {
|
||
flex-direction: column !important;
|
||
gap: 12px !important;
|
||
padding: 16px 18px !important;
|
||
}
|
||
|
||
/* Operation flow bar */
|
||
.gen-flow-bar {
|
||
flex-direction: column !important;
|
||
gap: 14px !important;
|
||
padding: 16px !important;
|
||
}
|
||
|
||
.gen-flow-divider {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Config form params row */
|
||
.gen-form-row {
|
||
flex-direction: column !important;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
/* Credits estimate bar */
|
||
.gen-credits-bar {
|
||
flex-direction: column !important;
|
||
gap: 8px !important;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Prompt rows */
|
||
.gen-prompt-row {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.gen-prompt-row>* {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.gen-params {
|
||
flex-wrap: wrap !important;
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.gen-params>div {
|
||
flex: 1 1 45% !important;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Expanded detail left+right stacks */
|
||
.gen-detail-row {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.gen-detail-row>* {
|
||
width: 100% !important;
|
||
min-width: 0 !important;
|
||
flex: 1 1 auto !important;
|
||
}
|
||
|
||
/* Record filter bar stacks */
|
||
.record-filter-bar {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.record-filter-bar .ant-space {
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
.record-filter-bar .ant-select {
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* Record summary row stacks */
|
||
.record-item {
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
gap: 8px !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.record-item .record-actions {
|
||
width: 100% !important;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.record-item>span[style*="textOverflow"] {
|
||
white-space: normal !important;
|
||
overflow: visible !important;
|
||
text-overflow: unset !important;
|
||
}
|
||
|
||
/* Hide less important meta on mobile */
|
||
.mobile-meta {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Credits page */
|
||
.credits-balance {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.recharge-grid {
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.recharge-grid>* {
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* Video player fits mobile */
|
||
video {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
/* InitialReplication page */
|
||
.replication-container {
|
||
flex-direction: column !important;
|
||
gap: 16px !important;
|
||
padding: 16px !important;
|
||
height: calc(100vh - 64px) !important;
|
||
}
|
||
|
||
.replication-preview {
|
||
width: 100% !important;
|
||
height: 30vh !important;
|
||
border-radius: 12px !important;
|
||
}
|
||
|
||
.replication-form {
|
||
width: 100% !important;
|
||
height: auto !important;
|
||
max-height: calc(70vh - 32px) !important;
|
||
border-radius: 12px !important;
|
||
}
|
||
|
||
.replication-form-content {
|
||
padding: 16px !important;
|
||
max-height: calc(70vh - 64px) !important;
|
||
}
|
||
}
|
||
|
||
/* ── Date Display ──────────────────────── */
|
||
.date-display {
|
||
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
||
}
|
||
|
||
/* ── Small Mobile Breakpoint (max-width: 480px) ────────────── */
|
||
@media (max-width: 480px) {
|
||
|
||
/* Base styles */
|
||
html,
|
||
body {
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
/* Login page */
|
||
.login-card {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.login-right {
|
||
padding: 16px !important;
|
||
}
|
||
|
||
/* Header adjustments */
|
||
.gen-header {
|
||
padding: 12px 14px !important;
|
||
}
|
||
|
||
/* Form elements */
|
||
.gen-form-row {
|
||
gap: 8px !important;
|
||
}
|
||
|
||
/* Button adjustments */
|
||
.ant-btn {
|
||
height: 36px !important;
|
||
font-size: 13px !important;
|
||
padding: 0 12px !important;
|
||
}
|
||
|
||
/* Input adjustments */
|
||
.ant-input,
|
||
.ant-input-affix-wrapper,
|
||
.ant-select-selector {
|
||
height: 36px !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
/* Card padding */
|
||
.ant-card {
|
||
padding: 12px !important;
|
||
}
|
||
|
||
/* Mobile bottom nav adjustments */
|
||
.mobile-bottom-nav {
|
||
height: 56px !important;
|
||
}
|
||
|
||
.mobile-bottom-nav .nav-item .nav-icon {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
.mobile-bottom-nav .nav-item {
|
||
font-size: 9px !important;
|
||
gap: 2px !important;
|
||
}
|
||
|
||
/* InitialReplication page - Small Mobile */
|
||
.replication-container {
|
||
padding: 12px !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
.replication-preview {
|
||
height: 25vh !important;
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
.replication-form-content {
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.replication-form-content .ant-btn {
|
||
height: 36px !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.replication-form-content .ant-input,
|
||
.replication-form-content .ant-input-affix-wrapper {
|
||
height: 36px !important;
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
/* Video and image containers */
|
||
video,
|
||
img {
|
||
max-height: 160px !important;
|
||
border-radius: 6px !important;
|
||
}
|
||
|
||
/* Upload areas */
|
||
.upload-area {
|
||
padding: 12px !important;
|
||
}
|
||
|
||
/* Spacing adjustments */
|
||
.mobile-p-16 {
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.mobile-gap-12 {
|
||
gap: 8px !important;
|
||
}
|
||
|
||
/* Font size adjustments */
|
||
h1 {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
p {
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
/* Button text */
|
||
.btn-text-sm {
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
/* Margin adjustments */
|
||
.mobile-mb-8 {
|
||
margin-bottom: 8px !important;
|
||
}
|
||
|
||
.mobile-mb-12 {
|
||
margin-bottom: 12px !important;
|
||
}
|
||
}
|
||
|
||
/* ── Tablet Breakpoint (769px to 1024px) ────────────── */
|
||
@media (min-width: 769px) and (max-width: 1024px) {
|
||
/*
|
||
左侧栏宽度必须统一由 AppLayout.tsx 的 sidebarW 控制。
|
||
不要在这里覆盖 .desktop-sidebar width 或 .desktop-content margin-left，
|
||
否则展开/折叠状态会和真实布局宽度不一致。
|
||
*/
|
||
|
||
/* Card max-width */
|
||
.ant-card {
|
||
max-width: calc(50% - 8px) !important;
|
||
}
|
||
|
||
/* Font adjustments */
|
||
html,
|
||
body {
|
||
font-size: 15px !important;
|
||
}
|
||
}
|
||
|
||
/* ── Large Desktop Breakpoint (min-width: 1200px) ────────────── */
|
||
@media (min-width: 1200px) {
|
||
|
||
/* Max width container */
|
||
.max-w-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Card grid */
|
||
.card-grid {
|
||
grid-template-columns: repeat(3, 1fr) !important;
|
||
}
|
||
}
|
||
|
||
/* ── HomePage Tabs ────────────── */
|
||
.homepage-tabs .ant-tabs-nav {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.homepage-tabs .ant-tabs-tab {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
padding: 8px 20px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.homepage-tabs .ant-tabs-tab-active {
|
||
color: #6366f1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.homepage-tabs .ant-tabs-ink-bar {
|
||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||
}
|
||
|
||
.media-download-btn {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
z-index: 10;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.media-card:hover .media-download-btn {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.media-preview-tip {
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.media-card:hover .media-preview-tip {
|
||
opacity: 1;
|
||
} |