galaxy/webui/frontend/src/index.css - main - githubmirror/UFO

galaxy/webui/frontend/src/index.css
411 строк12 KB
vyokky
better visualzation
12 ноя 2025, 14:14
12 ноя 2025, 14:14318c3b5
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: Inter, system-ui, "IBM Plex Sans", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: dark;
  color: rgba(247, 250, 255, 0.92);
  background-color: #050816;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: 
    radial-gradient(circle at 15% 20%, rgba(100, 150, 255, 0.15), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(150, 100, 255, 0.12), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(33, 240, 255, 0.08), transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(80, 120, 200, 0.06), transparent 50%),
    linear-gradient(to bottom, #000814 0%, #001a33 50%, #000a1a 100%);
  overflow: hidden;
}

#root {
  width: 100vw;
  height: 100vh;
}

.high-contrast body,
body.high-contrast {
  background: #000;
  color: #fff;
}

.high-contrast *,
body.high-contrast * {
  outline-offset: 2px;
}

/* Scrollbar styling with futuristic 3D depth */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(10, 20, 35, 0.25));
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(15, 123, 255, 0.22) 50%, rgba(147, 51, 234, 0.2) 100%);
  border-radius: 6px;
  border: 1px solid rgba(6, 182, 212, 0.15);
  box-shadow: 
    0 0 4px rgba(6, 182, 212, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.4) 0%, rgba(15, 123, 255, 0.35) 50%, rgba(147, 51, 234, 0.3) 100%);
  box-shadow: 
    0 0 8px rgba(6, 182, 212, 0.25),
    0 0 12px rgba(15, 123, 255, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.5) 0%, rgba(15, 123, 255, 0.45) 50%, rgba(147, 51, 234, 0.4) 100%);
  box-shadow: 
    0 0 10px rgba(6, 182, 212, 0.3),
    0 0 16px rgba(15, 123, 255, 0.2),
    inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Galaxy background effect - static version for better performance */
.galaxy-bg {
  position: relative;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(70, 120, 200, 0.08), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(120, 80, 200, 0.06), transparent 55%),
    linear-gradient(135deg, #0a1628 0%, #0f2847 45%, #152e52 100%);
}

/* Add static "nebula" effect */
.galaxy-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 35%, rgba(100, 150, 255, 0.03), transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(200, 100, 255, 0.02), transparent 40%);
  pointer-events: none;
}

/* Removed animated stars background for performance */
/* .galaxy-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 70%, white, transparent);
  background-size: 200% 200%;
  animation: stars 60s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}

@keyframes stars {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 100%;
  }
} */

/* Glow effects */
.glow-text {
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5),
               0 0 20px rgba(123, 44, 191, 0.3);
}

.glow-border {
  border: 1px solid rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2),
              inset 0 0 10px rgba(0, 212, 255, 0.1);
}

.frosted-panel {
  background: linear-gradient(140deg, rgba(11, 24, 44, 0.85) 0%, rgba(18, 18, 32, 0.9) 100%);
  border: 1px solid rgba(33, 240, 255, 0.08);
  box-shadow: 0 12px 30px rgba(3, 7, 15, 0.45), inset 0 0 0 1px rgba(147, 197, 253, 0.02);
  /* backdrop-filter: blur(18px) saturate(140%); */ /* DISABLED: Performance testing - causes 1.8s presentation delay */
}

.glass-card {
  background: linear-gradient(165deg, rgba(8, 25, 45, 0.72) 0%, rgba(10, 13, 30, 0.78) 100%);
  border: 1px solid rgba(15, 123, 255, 0.12);
  box-shadow: 0 10px 35px rgba(2, 10, 24, 0.6);
  /* backdrop-filter: blur(16px) saturate(160%); */ /* DISABLED: Performance testing - causes 1.8s presentation delay */
}

/* Animation utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

/* Star with realistic appearance - varies by data-color attribute */
.star-static {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translateZ(0);
}

/* White-blue stars (like Sirius) */
.star-static[data-color="white"] {
  background: radial-gradient(circle, rgba(240, 245, 255, 1) 0%, rgba(200, 220, 255, 0.9) 20%, rgba(180, 200, 240, 0.4) 50%, transparent 100%);
  box-shadow: 
    0 0 2px rgba(240, 245, 255, 1),
    0 0 4px rgba(200, 220, 255, 0.8),
    0 0 8px rgba(180, 200, 240, 0.5),
    0 0 12px rgba(160, 180, 220, 0.25);
}

/* Blue stars (like Vega) */
.star-static[data-color="blue"] {
  background: radial-gradient(circle, rgba(220, 235, 255, 1) 0%, rgba(180, 210, 255, 0.85) 20%, rgba(140, 180, 255, 0.4) 50%, transparent 100%);
  box-shadow: 
    0 0 2px rgba(220, 235, 255, 1),
    0 0 5px rgba(180, 210, 255, 0.7),
    0 0 10px rgba(140, 180, 255, 0.4),
    0 0 15px rgba(100, 150, 255, 0.2);
}

/* Yellow stars (like our Sun) */
.star-static[data-color="yellow"] {
  background: radial-gradient(circle, rgba(255, 250, 230, 1) 0%, rgba(255, 240, 200, 0.9) 20%, rgba(255, 220, 150, 0.4) 50%, transparent 100%);
  box-shadow: 
    0 0 2px rgba(255, 250, 230, 1),
    0 0 4px rgba(255, 240, 200, 0.8),
    0 0 8px rgba(255, 220, 150, 0.5),
    0 0 12px rgba(255, 200, 100, 0.25);
}

/* Orange stars (like Arcturus) */
.star-static[data-color="orange"] {
  background: radial-gradient(circle, rgba(255, 220, 180, 1) 0%, rgba(255, 200, 140, 0.9) 20%, rgba(255, 180, 100, 0.4) 50%, transparent 100%);
  box-shadow: 
    0 0 2px rgba(255, 220, 180, 1),
    0 0 4px rgba(255, 200, 140, 0.75),
    0 0 8px rgba(255, 180, 100, 0.45),
    0 0 12px rgba(255, 160, 80, 0.22);
}

/* Red stars (like Betelgeuse) */
.star-static[data-color="red"] {
  background: radial-gradient(circle, rgba(255, 200, 180, 1) 0%, rgba(255, 160, 140, 0.9) 20%, rgba(255, 120, 100, 0.4) 50%, transparent 100%);
  box-shadow: 
    0 0 2px rgba(255, 200, 180, 1),
    0 0 4px rgba(255, 160, 140, 0.7),
    0 0 8px rgba(255, 120, 100, 0.4),
    0 0 12px rgba(255, 80, 60, 0.2);
}

.shooting-star-static {
  position: absolute;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(220, 235, 255, 0.95) 0%, rgba(200, 220, 255, 0.8) 25%, rgba(180, 200, 255, 0.4) 60%, rgba(200, 220, 255, 0) 100%);
  transform: rotate(15deg);
  box-shadow: 
    0 0 8px rgba(200, 220, 255, 0.6),
    0 0 4px rgba(220, 235, 255, 0.4);
}

.noise-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: screen;
}

.compose-area-shadow {
  box-shadow: 0 -12px 30px rgba(5, 12, 25, 0.6);
}

/* ReactFlow Edge Enhancements - Futuristic Glow */
.react-flow__edge-path {
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 0.3s ease, filter 0.3s ease;
}

/* Futuristic edge styles with pulsing and data flow animations */
.react-flow__edge.futuristic-edge .react-flow__edge-path {
  stroke-dasharray: 10 5;
  animation: dataFlow 2s linear infinite, edgePulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
}

/* Default edge - cyan/blue theme */
.react-flow__edge.edge-default .react-flow__edge-path {
  stroke: rgba(56, 189, 248, 0.8);
  animation: dataFlow 2s linear infinite, edgePulseCyan 3s ease-in-out infinite;
}

/* Satisfied edge - green theme */
.react-flow__edge.edge-satisfied .react-flow__edge-path {
  stroke: rgba(74, 222, 128, 0.8);
  animation: dataFlow 1.8s linear infinite, edgePulseGreen 2.8s ease-in-out infinite;
}

/* Unsatisfied edge - red theme with faster animation */
.react-flow__edge.edge-unsatisfied .react-flow__edge-path {
  stroke: rgba(248, 113, 113, 0.8);
  animation: dataFlow 1.2s linear infinite, edgePulseRed 2s ease-in-out infinite;
}

/* Data flow animation - creates moving dashes effect like data packets */
@keyframes dataFlow {
  0% {
    stroke-dashoffset: 15;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Pulse animations with different colors for different states */
@keyframes edgePulse {
  0%, 100% {
    opacity: 0.6;
    stroke-width: 2.5;
  }
  50% {
    opacity: 1;
    stroke-width: 3.5;
  }
}

@keyframes edgePulseCyan {
  0%, 100% {
    opacity: 0.6;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.5)) drop-shadow(0 0 6px rgba(6, 182, 212, 0.3));
  }
  50% {
    opacity: 1;
    stroke-width: 3.5;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) drop-shadow(0 0 12px rgba(6, 182, 212, 0.5)) drop-shadow(0 0 18px rgba(6, 182, 212, 0.3));
  }
}

@keyframes edgePulseGreen {
  0%, 100% {
    opacity: 0.65;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.5)) drop-shadow(0 0 6px rgba(16, 185, 129, 0.3));
  }
  50% {
    opacity: 1;
    stroke-width: 3.5;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.8)) drop-shadow(0 0 12px rgba(16, 185, 129, 0.5)) drop-shadow(0 0 18px rgba(16, 185, 129, 0.3));
  }
}

@keyframes edgePulseRed {
  0%, 100% {
    opacity: 0.65;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 3px rgba(248, 113, 113, 0.5)) drop-shadow(0 0 6px rgba(239, 68, 68, 0.3));
  }
  50% {
    opacity: 1;
    stroke-width: 4;
    filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.9)) drop-shadow(0 0 12px rgba(239, 68, 68, 0.6)) drop-shadow(0 0 20px rgba(239, 68, 68, 0.4));
  }
}

/* Arrow marker enhancements with glow effect */
.react-flow__arrowhead polyline {
  stroke-linejoin: round;
  stroke-linecap: round;
}

.react-flow__edge.futuristic-edge .react-flow__arrowhead {
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 6px currentColor);
}

/* Enhanced edge selection highlight */
.react-flow__edge.selected .react-flow__edge-path {
  stroke-width: 4px !important;
  filter: brightness(1.4) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor) !important;
  animation: selectedEdgePulse 1.5s ease-in-out infinite !important;
}

@keyframes selectedEdgePulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Hover effect for edges */
.react-flow__edge:hover .react-flow__edge-path {
  stroke-width: 4px;
  filter: brightness(1.3) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
}