diff --git a/public/css/style.css b/public/css/style.css index 3d59ba0..6f33339 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1982,4 +1982,67 @@ input:checked+.slider:before { .stat-cards { grid-template-columns: 1fr; } +} + +/* ---- Globe Card Expansion ---- */ +.globe-card.expanded { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 95vw !important; + height: 90vh !important; + z-index: 2000; + box-shadow: 0 0 100px rgba(0, 0, 0, 0.8), 0 0 0 100vh rgba(0, 0, 0, 0.6); + backdrop-filter: blur(15px); + animation: globeExpand 0.4s cubic-bezier(0.16, 1, 0.3, 1); + margin: 0 !important; +} + +@keyframes globeExpand { + from { + opacity: 0; + transform: translate(-50%, -45%) scale(0.95); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} + +.globe-card.expanded .globe-body { + height: calc(100% - 130px) !important; +} + +.chart-header-actions { + display: flex; + gap: 8px; + align-items: center; +} + +.btn-icon { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + color: var(--text-muted); + cursor: pointer; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-sm); + transition: all 0.2s; + outline: none; +} + +.btn-icon:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + border-color: var(--accent-indigo); +} + +.btn-icon.active { + color: var(--accent-indigo); + background: rgba(99, 102, 241, 0.1); + border-color: var(--accent-indigo); } \ No newline at end of file diff --git a/public/index.html b/public/index.html index 6b57ff1..4f438ca 100644 --- a/public/index.html +++ b/public/index.html @@ -250,6 +250,13 @@ 全球服务器分布 +
+ +