src/app/styles/property-scales.css - dev - 45case/ptable

src/app/styles/property-scales.css
125 строк4 KB
Olya
Страница Электроны + сайдбар с характеритстиками (Степень окисления, Конфигурация, Развёрнутая, Уровни энергии, ВЗМО)
24 июл 2026, 11:54
24 июл 2026, 11:543cf1d48
/* Numeric property heatmaps (ptable Properties parity). */

:root,
html[data-theme="light"] {
  /* Weight: white → saturated red */
  --property-weight-start: rgb(255, 255, 255);
  --property-weight-end: hsl(0, 100%, 47%);
  --property-weight-unknown: hsl(0, 0%, 90%);

  /* Energy levels: pale yellow-green → olive (ptable --electrons-*) */
  --property-electrons-start: hsl(80, 70%, 95%);
  --property-electrons-end: hsl(80, 53%, 33%);
  --property-electrons-unknown: hsl(0, 0%, 90%);

  /* Electronegativity: yellow → orange (ptable --electroneg-*) */
  --property-electroneg-start: hsl(60, 100%, 50%);
  --property-electroneg-end: hsl(25, 100%, 39%);
  --property-electroneg-unknown: hsl(0, 0%, 90%);

  /* Melting / boiling: blue → blocks(zero) → red (ptable --meltboil-*) */
  --property-meltboil-start: hsl(240, 100%, 75%);
  --property-meltboil-end: hsl(0, 100%, 47%);
  --property-meltboil-zero: #ffffff;
  --property-meltboil-unknown: hsl(0, 0%, 90%);

  /* Electron affinity: blocks → magenta (ptable --affinity-end), log */
  --property-affinity-start: #ffffff;
  --property-affinity-end: hsl(302, 100%, 42%);
  --property-affinity-unknown: hsl(0, 0%, 90%);

  /* Ionization energy: green → blue-violet (ptable --ionize-*), log */
  --property-ionize-start: hsl(120, 100%, 50%);
  --property-ionize-end: hsl(240, 100%, 69%);
  --property-ionize-unknown: hsl(0, 0%, 90%);

  /* Atomic radius: cyan pale → teal (ptable --radius-*), lin */
  --property-radius-start: hsl(180, 100%, 94%);
  --property-radius-end: hsl(180, 45%, 35%);
  --property-radius-unknown: hsl(0, 0%, 90%);

  /* Hardness: blocks → purple (ptable --hardness-end), log */
  --property-hardness-start: #ffffff;
  --property-hardness-end: hsl(276, 100%, 60%);
  --property-hardness-unknown: hsl(0, 0%, 90%);

  /* Modulus: pale amber → orange (ptable --modulus-*), lin */
  --property-modulus-start: hsl(38, 100%, 96%);
  --property-modulus-end: hsl(38, 100%, 44%);
  --property-modulus-unknown: hsl(0, 0%, 90%);

  /* Density: pale teal → deep teal (ptable --density-*), lin */
  --property-density-start: hsl(165, 100%, 91%);
  --property-density-end: hsl(165, 100%, 27%);
  --property-density-unknown: hsl(0, 0%, 90%);

  /* Conductivity: pale blue → blue-violet (ptable --conduct-*), lin */
  --property-conduct-start: hsl(240, 66%, 94%);
  --property-conduct-end: hsl(240, 100%, 69%);
  --property-conduct-unknown: hsl(0, 0%, 90%);

  /* Heat: yellow → red (ptable --heat-*), specific=log others=lin */
  --property-heat-start: hsl(60, 100%, 50%);
  --property-heat-end: hsl(0, 100%, 50%);
  --property-heat-unknown: hsl(0, 0%, 90%);

  /* Abundance: blocks → red (ptable --abundance-*), log */
  --property-abundance-start: #ffffff;
  --property-abundance-end: hsl(0, 97%, 49%);
  --property-abundance-unknown: hsl(0, 0%, 90%);
}

html[data-theme="dark"] {
  --property-weight-start: #191919;
  --property-weight-end: hsl(0, 100%, 45%);
  --property-weight-unknown: #333;

  --property-electrons-start: hsl(20, 0%, 23%);
  --property-electrons-end: hsl(80, 55%, 32%);
  --property-electrons-unknown: #333;

  --property-electroneg-start: hsl(233, 97%, 31%);
  --property-electroneg-end: hsl(51, 80%, 29%);
  --property-electroneg-unknown: #333;

  --property-meltboil-start: hsl(240, 100%, 68%);
  --property-meltboil-end: hsl(0, 100%, 46%);
  --property-meltboil-zero: #191919;
  --property-meltboil-unknown: #333;

  --property-affinity-start: #191919;
  --property-affinity-end: hsl(302, 100%, 41%);
  --property-affinity-unknown: #333;

  --property-ionize-start: hsl(294, 100%, 21%);
  --property-ionize-end: hsl(52, 80%, 23%);
  --property-ionize-unknown: #333;

  --property-radius-start: hsl(0, 0%, 20%);
  --property-radius-end: hsl(180, 49%, 33%);
  --property-radius-unknown: #333;

  --property-hardness-start: #191919;
  --property-hardness-end: hsl(276, 100%, 59%);
  --property-hardness-unknown: #333;

  --property-modulus-start: hsl(0, 0%, 31%);
  --property-modulus-end: hsl(38, 100%, 32%);
  --property-modulus-unknown: #333;

  --property-density-start: hsl(0, 0%, 17%);
  --property-density-end: hsl(165, 100%, 25%);
  --property-density-unknown: #333;

  --property-conduct-start: hsl(0, 0%, 26%);
  --property-conduct-end: hsl(240, 100%, 68%);
  --property-conduct-unknown: #333;

  --property-heat-start: hsl(60, 100%, 35%);
  --property-heat-end: hsl(0, 100%, 55%);
  --property-heat-unknown: #333;

  --property-abundance-start: hsl(0, 5%, 21%);
  --property-abundance-end: hsl(0, 50%, 50%);
  --property-abundance-unknown: #333;
}