155 lines
3.6 KiB
CSS
155 lines
3.6 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap');
|
|
|
|
:root {
|
|
--nexus-neon: #00ff99;
|
|
--nexus-bg: #121212;
|
|
--nexus-card: #1a1a1a;
|
|
--nexus-text: #ffffff;
|
|
--nexus-paper: #F9F9F9;
|
|
--nexus-font-sans: 'Inter', sans-serif;
|
|
--nexus-font-serif: 'Merriweather', serif;
|
|
|
|
/* Safe Area Insets with fallbacks */
|
|
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
|
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
|
|
|
/* Transitions */
|
|
--nexus-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
|
|
.theme-light {
|
|
--nexus-bg: var(--nexus-paper);
|
|
--nexus-card: #ffffff;
|
|
--nexus-text: #121212;
|
|
}
|
|
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--nexus-bg);
|
|
color: var(--nexus-text);
|
|
font-family: var(--nexus-font-sans);
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
/* Handle Notches */
|
|
padding-top: var(--safe-area-inset-top);
|
|
padding-bottom: var(--safe-area-inset-bottom);
|
|
padding-left: var(--safe-area-inset-left);
|
|
padding-right: var(--safe-area-inset-right);
|
|
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Modern Scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
|
|
/* Platform Specific Tweaks */
|
|
.platform-mobile .nexus-button {
|
|
min-height: var(--touch-target-size);
|
|
min-width: var(--touch-target-size);
|
|
font-size: 1.1rem;
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
.platform-desktop .nexus-button {
|
|
min-height: 36px;
|
|
font-size: 0.9rem;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
/* D3.js Touch Optimization */
|
|
svg {
|
|
touch-action: none;
|
|
}
|
|
|
|
h1:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.blazor-error-boundary {
|
|
background: #b32121;
|
|
padding: 1rem;
|
|
color: white;
|
|
margin: 1rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Preloader Styles */
|
|
#app-preloader, .app-preloader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle at center, #1a1a1a 0%, var(--nexus-bg) 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
transition: opacity 0.8s ease, visibility 0.8s;
|
|
}
|
|
|
|
#app-preloader.loaded {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.preloader-spinner {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 3px solid rgba(0, 255, 153, 0.1);
|
|
border-top: 3px solid var(--nexus-neon);
|
|
border-radius: 50%;
|
|
animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
filter: drop-shadow(0 0 10px var(--nexus-neon));
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.preloader-text {
|
|
color: var(--nexus-neon);
|
|
font-family: var(--nexus-font-sans);
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(0.95); }
|
|
}
|
|
|