| |
|
|
| |
| :root { |
| --bg-gradient: linear-gradient(135deg, #e3e9ff 0%, #d4dafc 35%, #c7d3fa 65%, #c0cef5 100%); |
| --panel-bg: rgba(255,255,255,0.55); |
| --panel-border: rgba(160,170,200,0.55); |
| --text-color: #1d2b3a; |
| --accent: #1d6fd4; |
| --accent-hover: #3d8af0; |
| --legend-bg: rgba(255,255,255,0.70); |
| --legend-border: rgba(140,160,190,0.55); |
| --scrollbar-bg: #d0d9f2; |
| --scrollbar-thumb: #9ab4e6; |
| --scrollbar-thumb-hover: #799dd9; |
| --radius: 18px; |
| --transition: 0.28s cubic-bezier(.4,.14,.3,1); |
| --font-stack: 'Inter','Segoe UI',system-ui,sans-serif; |
| } |
|
|
| body, .gradio-container { |
| background: var(--bg-gradient) !important; |
| font-family: var(--font-stack); |
| color: var(--text-color); |
| min-height: 100vh; |
| margin: 0; |
| padding-bottom: 40px; |
| transition: background 0.6s ease, color 0.4s ease; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| |
| .hero-banner { |
| position: relative; |
| width: 100%; |
| border-radius: 24px; |
| margin: 18px 0 30px 0; |
| background: linear-gradient(125deg, #6289ff, #7d9dff 40%, #8bb1ff 75%); |
| box-shadow: 0 14px 40px -10px rgba(60,85,140,0.45), 0 4px 18px -6px rgba(60,85,140,0.35); |
| padding: 34px 30px; |
| overflow: hidden; |
| } |
|
|
| .hero-banner:before, |
| .hero-banner:after { |
| content:""; |
| position:absolute; |
| width:240px; |
| height:240px; |
| background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 70%); |
| top:-60px; |
| left:-60px; |
| filter: blur(10px); |
| opacity: 0.55; |
| pointer-events:none; |
| } |
| .hero-banner:after { |
| top:auto; |
| left:auto; |
| bottom:-70px; |
| right:-40px; |
| background: radial-gradient(circle at 70% 70%, rgba(255,255,255,0.45), transparent 65%); |
| opacity:0.45; |
| } |
|
|
| .floating { |
| animation: floatY 6.5s ease-in-out infinite; |
| } |
|
|
| @keyframes floatY { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
|
|
| .hero-title { |
| font-size: 2rem; |
| font-weight: 700; |
| letter-spacing: 1px; |
| color: #ffffff; |
| margin: 0; |
| line-height: 1.15; |
| text-shadow: 0 4px 18px rgba(0,0,0,0.35); |
| position: relative; |
| z-index: 2; |
| } |
|
|
| |
| .intro-tagline { |
| font-size: 1rem; |
| font-weight: 500; |
| letter-spacing: 0.5px; |
| margin: 0 6px 24px 6px; |
| color: #ffffff !important; |
| text-shadow: 0 2px 8px rgba(0,0,0,0.35); |
| background: rgba(255,255,255,0.10); |
| padding: 10px 16px; |
| border-radius: 14px; |
| display: inline-block; |
| backdrop-filter: blur(6px); |
| box-shadow: 0 6px 24px -10px rgba(60,85,140,0.50); |
| } |
|
|
| |
| .panel.glass { |
| background: var(--panel-bg) !important; |
| border: 1px solid var(--panel-border) !important; |
| backdrop-filter: blur(14px) saturate(160%); |
| border-radius: var(--radius) !important; |
| padding: 20px !important; |
| box-shadow: 0 10px 30px -12px rgba(70,80,120,0.45); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .panel.glass:before { |
| content:""; |
| position:absolute; |
| inset:0; |
| background: |
| radial-gradient(circle at 80% 10%, rgba(255,255,255,0.35), transparent 55%), |
| radial-gradient(circle at 15% 85%, rgba(255,255,255,0.25), transparent 60%); |
| pointer-events:none; |
| opacity:0.55; |
| } |
|
|
| #view-mode-radio label { |
| background: rgba(255,255,255,0.55); |
| border: 1px solid rgba(140,160,190,0.6); |
| border-radius: 12px; |
| padding: 7px 12px; |
| cursor: pointer; |
| transition: var(--transition); |
| font-weight: 500; |
| font-size: 0.85rem; |
| color: #2d3f55; |
| box-shadow: 0 2px 8px -4px rgba(80,100,140,0.35); |
| } |
| #view-mode-radio label:hover { |
| background: rgba(255,255,255,0.75); |
| } |
| #view-mode-radio input:checked + label { |
| background: linear-gradient(135deg, var(--accent), var(--accent-hover)); |
| border-color: rgba(255,255,255,0.8); |
| color: #fff; |
| box-shadow: 0 4px 15px -6px rgba(30,70,130,0.65); |
| } |
|
|
| #alpha-slider input[type=range] { |
| accent-color: var(--accent); |
| } |
|
|
| #run-btn, #clear-btn { |
| font-weight: 600; |
| border-radius: 16px !important; |
| padding: 12px 20px !important; |
| letter-spacing: 0.6px; |
| transition: var(--transition); |
| border: none !important; |
| font-size: 0.9rem; |
| } |
|
|
| #run-btn { |
| background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important; |
| color: #fff !important; |
| box-shadow: 0 8px 24px -10px rgba(30,70,130,0.65); |
| } |
| #run-btn:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 12px 30px -10px rgba(30,70,130,0.75); |
| } |
|
|
| #clear-btn { |
| background: rgba(200,60,60,0.15) !important; |
| color: #9d2e2e !important; |
| border: 1px solid rgba(200,60,60,0.35) !important; |
| box-shadow: 0 4px 16px -10px rgba(200,60,60,0.55); |
| } |
| #clear-btn:hover { |
| background: rgba(200,60,60,0.30) !important; |
| color: #6a1212 !important; |
| transform: translateY(-2px); |
| } |
|
|
| .download-anchor { |
| font-size: 0.95rem; |
| font-weight: 600; |
| text-decoration: none; |
| color: var(--accent); |
| display: inline-block; |
| margin-top: 10px; |
| transition: var(--transition); |
| letter-spacing: 0.5px; |
| } |
| .download-anchor:hover { |
| color: var(--accent-hover); |
| text-shadow: 0 0 6px rgba(120,170,255,0.55); |
| } |
|
|
| |
| .legend-wrapper { |
| margin-top: 14px; |
| background: var(--legend-bg); |
| border: 1px solid var(--legend-border); |
| border-radius: 16px; |
| padding: 14px 16px 12px; |
| position: relative; |
| overflow: hidden; |
| backdrop-filter: blur(12px); |
| animation: fadeIn 0.5s ease; |
| box-shadow: 0 10px 28px -14px rgba(70,80,120,0.55); |
| } |
|
|
| .legend-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-weight: 600; |
| letter-spacing: 0.6px; |
| color: var(--text-color); |
| margin-bottom: 6px; |
| } |
|
|
| .legend-toggle-btn { |
| background: rgba(255,255,255,0.55); |
| border: 1px solid rgba(130,150,180,0.55); |
| padding: 4px 11px; |
| cursor: pointer; |
| border-radius: 10px; |
| font-size: 0.78rem; |
| color: #2d3f55; |
| transition: var(--transition); |
| box-shadow: 0 3px 12px -6px rgba(60,80,120,0.35); |
| } |
| .legend-toggle-btn:hover { |
| background: rgba(255,255,255,0.8); |
| transform: translateY(-2px); |
| } |
|
|
| .legend-body { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| max-height: 240px; |
| overflow-y: auto; |
| padding-right: 4px; |
| transition: max-height 0.5s ease; |
| } |
|
|
| .legend-body.collapsed { |
| max-height: 0; |
| overflow: hidden; |
| padding: 0; |
| margin: 0; |
| } |
|
|
| .legend-item { |
| display: flex; |
| gap: 14px; |
| align-items: center; |
| background: rgba(255,255,255,0.55); |
| padding: 8px 12px; |
| border-radius: 14px; |
| border: 1px solid rgba(130,150,180,0.45); |
| position: relative; |
| backdrop-filter: blur(6px); |
| transition: var(--transition); |
| box-shadow: 0 4px 16px -10px rgba(60,80,120,0.4); |
| } |
|
|
| .legend-item:hover { |
| background: rgba(255,255,255,0.75); |
| transform: translateY(-3px); |
| } |
|
|
| .legend-color { |
| width: 42px; |
| height: 42px; |
| border-radius: 11px; |
| background: var(--c); |
| box-shadow: 0 4px 18px -8px var(--c); |
| border: 2px solid rgba(255,255,255,0.7); |
| position: relative; |
| } |
|
|
| .legend-color:after { |
| content:""; |
| position:absolute; |
| inset:0; |
| border-radius: 9px; |
| background: linear-gradient(140deg, rgba(255,255,255,0.40), transparent 70%); |
| mix-blend-mode: overlay; |
| } |
|
|
| .legend-meta { |
| display: flex; |
| flex-direction: column; |
| font-size: 0.78rem; |
| line-height: 1.1rem; |
| letter-spacing: 0.4px; |
| } |
|
|
| .legend-name { |
| font-weight: 600; |
| font-size: 0.9rem; |
| text-transform: uppercase; |
| color:#2e3f58; |
| } |
|
|
| .legend-stats { |
| display: flex; |
| gap: 12px; |
| font-size: 0.68rem; |
| opacity: 0.85; |
| color:#415671; |
| } |
|
|
| .legend-count { color: #9b6c10; } |
| .legend-pct { color: #115f9d; } |
|
|
| .legend-empty { |
| opacity: 0.65; |
| font-style: italic; |
| font-size: 0.9rem; |
| padding: 4px; |
| color:#2d3f55; |
| } |
|
|
| |
| .legend-body::-webkit-scrollbar { |
| width: 9px; |
| } |
| .legend-body::-webkit-scrollbar-track { |
| background: var(--scrollbar-bg); |
| border-radius: 10px; |
| } |
| .legend-body::-webkit-scrollbar-thumb { |
| background: var(--scrollbar-thumb); |
| border-radius: 10px; |
| border: 1px solid rgba(255,255,255,0.4); |
| } |
| .legend-body::-webkit-scrollbar-thumb:hover { |
| background: var(--scrollbar-thumb-hover); |
| } |
|
|
| |
| .gradio-image img, .gradio-image canvas { |
| border-radius: 16px !important; |
| box-shadow: 0 10px 32px -14px rgba(70,80,120,0.55); |
| } |
|
|
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(8px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| |
| #alpha-slider input[disabled] { |
| filter: grayscale(75%); |
| cursor: not-allowed; |
| opacity: 0.6; |
| } |
|
|
| |
| .markdown-body h4, .markdown-body h3, .markdown-body h2 { |
| color: #2d3f55; |
| } |
|
|
| |
| a { color: var(--accent); } |
| a:hover { color: var(--accent-hover); text-decoration: underline; } |
|
|
| |
| @media (max-width: 980px) { |
| .hero-banner { padding: 28px 22px; } |
| .hero-title { font-size: 1.55rem; } |
| #run-btn, #clear-btn { width: 100%; } |
| .legend-body { max-height: 200px; } |
| } |
|
|
| #bg-opacity-slider input[type=range] { |
| accent-color: var(--accent); |
| } |
|
|
| |
| #bg-opacity-slider input[disabled] { |
| filter: grayscale(75%); |
| cursor: not-allowed; |
| opacity: 0.55; |
| } |
