visual/src/index.css - comb - obuxxxov/CodeForge

visual/src/index.css
165 строк4 KB
ObliInSe
start
18 авг 2025, 00:31
18 авг 2025, 00:310671f4e
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: dark;
  color: rgba(255, 255, 255, 0.87);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Neon grid theme variables */
  --bg: #111a24;              /* dark blue-gray */
  --grid: #ffffff0a;          /* thin grid lines */
  --grid-strong: #ffffff14;   /* every 5th stronger line */
  --cell: 80px;               /* cell size */

  /* Typography and borders */
  --text-primary: #E6F1FF;
  --text-secondary: #AAB6C5;
  --border-color: rgba(255,255,255,.08);
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text-primary);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(1200px 600px at 50% 30%, #0000, #0006 70%);
  background-size:
    calc(var(--cell) * 5) var(--cell),
    var(--cell) calc(var(--cell) * 5),
    var(--cell) var(--cell),
    var(--cell) var(--cell),
    100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, center;
  background-attachment: fixed;
  /* отключаем анимацию смещения сетки */
  /* animation: pan 48s linear infinite; */
}

/* Subtle noise + vignette overlay for readability */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.02) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.02) 0 1px, transparent 1px);
  background-size: 3px 3px, 3px 3px;
}

/* Aurora — animated blobs */
body.theme-aurora {
  background:
    radial-gradient(1100px 700px at 20% 25%, rgba(247,37,133,0.25), transparent 60%),
    radial-gradient(1200px 750px at 80% 20%, rgba(114,9,183,0.25), transparent 60%),
    radial-gradient(1000px 700px at 55% 80%, rgba(76,201,240,0.25), transparent 60%),
    #0b1020;
  animation: auroraShift 60s ease-in-out infinite alternate;
}

/* Glass + glowing spots */
body.theme-glass {
  background:
    radial-gradient(800px 600px at 20% 30%, rgba(247,37,133,0.18), transparent 60%),
    radial-gradient(900px 650px at 80% 25%, rgba(114,9,183,0.16), transparent 60%),
    radial-gradient(900px 700px at 60% 80%, rgba(76,201,240,0.18), transparent 60%),
    #0d1222;
}
body.theme-glass .card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Minimalism with dots */
body.theme-minimal {
  background:
    radial-gradient(1000px 600px at 10% 15%, rgba(67,97,238,0.07), transparent 70%),
    radial-gradient(1200px 700px at 90% 85%, rgba(76,201,240,0.06), transparent 70%),
    #0c111e;
}
body.theme-minimal::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
}

@keyframes pan {
  to {
    background-position:
      -200px 0, 0 -200px,
      -40px 0, 0 -40px,
      center;
  }
}

@keyframes auroraShift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, center; }
  50% { background-position: 20% 10%, 80% 20%, 45% 90%, center; }
  100% { background-position: 0% 20%, 90% 10%, 55% 80%, center; }
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}