src/app/styles/element-categories.css - dev - 45case/ptable

src/app/styles/element-categories.css
349 строк11 KB
Olya
Характеристики температура кипения, энергия сродства к электрону, энергия ионизации, радиус, твердость, модуль, плотность, проводимость, тепло, изобилие, открыли
23 июл 2026, 13:15
23 июл 2026, 13:15f20cdb6
:root,
html[data-theme="light"] {
  --alkali-metal: #ff6666;
  --alkaline-earth-metal: #ffdead;
  --transition-metal: #ffc0c0;
  --post-transition-metal: #cccccc;
  --metalloid: #cccc99;
  --nonmetal: #f0ff8f;
  --halogen: #d8ff85;
  --noble-gas: #c0ffff;
  --lanthanide: #ffbfff;
  --actinide: #ff99cc;
  --unknown: #e8e8e8;

  --element-card-ink-strong: #1b2430;
  --element-card-ink: color-mix(in oklab, var(--element-card-ink-strong) 82%, #5d6c7b);
  --element-card-ink-muted: color-mix(in oklab, var(--element-card-ink-strong) 58%, #5d6c7b);
  --element-card-accent-ink: color-mix(in oklab, var(--element-card-ink-strong) 92%, black);
  --element-card-phase-ink: color-mix(in oklab, var(--element-card-ink-strong) 72%, #5d6c7b);
  --element-category-dim-mix: #2a2a2a;
  --element-category-dim-opacity: 0.4;
  --element-category-dim-brightness: 0.5;
  --element-category-dim-saturate: 0.62;
}

html[data-theme="dark"] {
  --alkali-metal: #6c3b01;
  --alkaline-earth-metal: #846011;
  --lanthanide: #402c17;
  --actinide: #732e4c;
  --transition-metal: #711019;
  --post-transition-metal: #003666;
  --metalloid: #015146;
  --nonmetal: #3e6418;
  --halogen: #3e6418;
  --noble-gas: #3a2151;
  --unknown: #3c3a3a;

  --element-card-ink-strong: #eef3f8;
  --element-card-ink: color-mix(in oklab, var(--element-card-ink-strong) 84%, #9eacbb);
  --element-card-ink-muted: color-mix(in oklab, var(--element-card-ink-strong) 62%, #9eacbb);
  --element-card-accent-ink: #ffffff;
  --element-card-phase-ink: color-mix(in oklab, var(--element-card-ink-strong) 76%, #9eacbb);
  --element-category-dim-mix: #070707;
  --element-category-dim-opacity: 0.36;
  --element-category-dim-brightness: 0.55;
  --element-category-dim-saturate: 0.66;
}

/* Home Series (light): classic bright palette. */
html[data-theme="light"]
  .table-grid[data-home-property]:not([data-home-property="article"]):not(.table-grid--article) {
  --alkali-metal: #ff6666;
  --alkaline-earth-metal: #ffdead;
  --transition-metal: #ffc0c0;
  --post-transition-metal: #cccccc;
  --metalloid: #cccc99;
  --nonmetal: #f0ff8f;
  --halogen: #d8ff85;
  --noble-gas: #c0ffff;
  --lanthanide: #ffbfff;
  --actinide: #ff99cc;
  --unknown: #e8e8e8;
  --element-card-ink-strong: #1b2430;
  --element-card-ink: color-mix(in oklab, var(--element-card-ink-strong) 82%, #5d6c7b);
  --element-card-ink-muted: color-mix(in oklab, var(--element-card-ink-strong) 58%, #5d6c7b);
  --element-card-accent-ink: color-mix(in oklab, var(--element-card-ink-strong) 92%, black);
  --element-card-phase-ink: color-mix(in oklab, var(--element-card-ink-strong) 72%, #5d6c7b);
  --element-category-dim-mix: #2a2a2a;
}

/* Home Series (dark): custom series palette. */
html[data-theme="dark"]
  .table-grid[data-home-property]:not([data-home-property="article"]):not(.table-grid--article) {
  --alkali-metal: #6c3b01;
  --alkaline-earth-metal: #846011;
  --lanthanide: #402c17;
  --actinide: #732e4c;
  --transition-metal: #711019;
  --post-transition-metal: #003666;
  --metalloid: #015146;
  --nonmetal: #3e6418;
  --halogen: #3e6418;
  --noble-gas: #3a2151;
  --unknown: #3c3a3a;
  --element-card-ink-strong: #eef3f8;
  --element-card-ink: color-mix(in oklab, var(--element-card-ink-strong) 84%, #9eacbb);
  --element-card-ink-muted: color-mix(in oklab, var(--element-card-ink-strong) 62%, #9eacbb);
  --element-card-accent-ink: #ffffff;
  --element-card-phase-ink: color-mix(in oklab, var(--element-card-ink-strong) 76%, #9eacbb);
  --element-category-dim-mix: #070707;
}

/* Article: muted category palette. */
.table-grid--article,
.table-grid[data-home-property="article"] {
  --alkali-metal: #532020;
  --alkaline-earth-metal: #483d2c;
  --lanthanide: #3e2d3e;
  --actinide: #64384e;
  --transition-metal: #5b4444;
  --post-transition-metal: #3c3a3a;
  --metalloid: #464618;
  --nonmetal: #5d642e;
  --halogen: #5d642e;
  --noble-gas: #264242;
  --unknown: #3c3a3a;
  --element-card-ink-strong: #eef3f8;
  --element-card-ink: color-mix(in oklab, var(--element-card-ink-strong) 84%, #9eacbb);
  --element-card-ink-muted: color-mix(in oklab, var(--element-card-ink-strong) 62%, #9eacbb);
  --element-card-accent-ink: #ffffff;
  --element-card-phase-ink: color-mix(in oklab, var(--element-card-ink-strong) 76%, #9eacbb);
  --element-category-dim-mix: #070707;
  --element-article-link: #99c3ff;
}

.table-grid--article .element-card.alkali-metal:not([data-state]),
.table-grid[data-home-property="article"] .element-card.alkali-metal:not([data-state]) {
  --element-card-background: #532020;
  background-color: #532020;
}

.table-grid--article .element-card.alkaline-earth-metal:not([data-state]),
.table-grid[data-home-property="article"] .element-card.alkaline-earth-metal:not([data-state]) {
  --element-card-background: #483d2c;
  background-color: #483d2c;
}

.table-grid--article .element-card.lanthanide:not([data-state]),
.table-grid[data-home-property="article"] .element-card.lanthanide:not([data-state]) {
  --element-card-background: #3e2d3e;
  background-color: #3e2d3e;
}

.table-grid--article .element-card.actinide:not([data-state]),
.table-grid[data-home-property="article"] .element-card.actinide:not([data-state]) {
  --element-card-background: #64384e;
  background-color: #64384e;
}

.table-grid--article .element-card.transition-metal:not([data-state]),
.table-grid[data-home-property="article"] .element-card.transition-metal:not([data-state]) {
  --element-card-background: #5b4444;
  background-color: #5b4444;
}

.table-grid--article .element-card.post-transition-metal:not([data-state]),
.table-grid[data-home-property="article"] .element-card.post-transition-metal:not([data-state]) {
  --element-card-background: #3c3a3a;
  background-color: #3c3a3a;
}

.table-grid--article .element-card.metalloid:not([data-state]),
.table-grid[data-home-property="article"] .element-card.metalloid:not([data-state]) {
  --element-card-background: #464618;
  background-color: #464618;
}

.table-grid--article .element-card.nonmetal:not([data-state]),
.table-grid--article .element-card.halogen:not([data-state]),
.table-grid[data-home-property="article"] .element-card.nonmetal:not([data-state]),
.table-grid[data-home-property="article"] .element-card.halogen:not([data-state]) {
  --element-card-background: #5d642e;
  background-color: #5d642e;
}

.table-grid--article .element-card.noble-gas:not([data-state]),
.table-grid[data-home-property="article"] .element-card.noble-gas:not([data-state]) {
  --element-card-background: #264242;
  background-color: #264242;
}

.table-grid--article .element-card.unknown:not([data-state]),
.table-grid[data-home-property="article"] .element-card.unknown:not([data-state]) {
  --element-card-background: #3c3a3a;
  background-color: #3c3a3a;
}

.table-grid--article .category-legend__item.alkali-metal {
  --element-card-background: #532020;
}

.table-grid--article .category-legend__item.alkaline-earth-metal {
  --element-card-background: #483d2c;
}

.table-grid--article .category-legend__item.lanthanide {
  --element-card-background: #3e2d3e;
}

.table-grid--article .category-legend__item.actinide {
  --element-card-background: #64384e;
}

.table-grid--article .category-legend__item.transition-metal {
  --element-card-background: #5b4444;
}

.table-grid--article .category-legend__item.post-transition-metal {
  --element-card-background: #3c3a3a;
}

.table-grid--article .category-legend__item.metalloid {
  --element-card-background: #464618;
}

.table-grid--article .category-legend__item.nonmetal {
  --element-card-background: #5d642e;
}

.table-grid--article .category-legend__item.noble-gas {
  --element-card-background: #264242;
}

.element-card {
  color: var(--element-card-ink-strong);
  border-color: color-mix(in oklab, var(--element-card-background, var(--table-surface)) 72%, var(--color-border-strong));
  opacity: 1;
  filter: none;
  transition:
    opacity 150ms ease,
    filter 150ms ease,
    background-color 150ms ease;
}

.element-card:not([data-state]) {
  background-color: var(--element-card-background);
}

.element-card.alkali-metal {
  --element-card-background: var(--alkali-metal);
}

.element-card.alkaline-earth-metal {
  --element-card-background: var(--alkaline-earth-metal);
}

.element-card.transition-metal {
  --element-card-background: var(--transition-metal);
}

.element-card.post-transition-metal {
  --element-card-background: var(--post-transition-metal);
}

.element-card.metalloid {
  --element-card-background: var(--metalloid);
}

.element-card.nonmetal {
  --element-card-background: var(--nonmetal);
}

.element-card.halogen {
  --element-card-background: var(--halogen);
}

.element-card.noble-gas {
  --element-card-background: var(--noble-gas);
}

.element-card.lanthanide {
  --element-card-background: var(--lanthanide);
}

.element-card.actinide {
  --element-card-background: var(--actinide);
}

.element-card.unknown {
  --element-card-background: var(--unknown);
}

.element-card__number {
  color: var(--element-card-phase-ink);
}

.element-card__symbol {
  color: var(--element-card-accent-ink);
}

.element-card__name,
.element-card__mass {
  color: var(--element-card-ink);
}

.element-card.is-muted {
  opacity: 0.76;
  filter: saturate(0.84);
}

.element-card.is-undiscovered {
  background-color: transparent !important;
  border-color: color-mix(in oklab, var(--color-border) 55%, transparent);
  box-shadow: none;
  filter: none;
  opacity: 0.42;
}

.element-card.highlighted {
  position: relative;
  z-index: 2;
  opacity: 1;
  filter: none;
  border-color: color-mix(in oklab, var(--element-card-background, var(--table-surface)) 58%, var(--color-selected-border));
  box-shadow: var(--table-shadow-focus);
}

.element-card.highlighted:not([data-state]) {
  background-color: var(--element-card-background);
}

.element-card.dimmed {
  opacity: var(--element-category-dim-opacity);
  filter: brightness(var(--element-category-dim-brightness))
    saturate(var(--element-category-dim-saturate));
}

.element-card.dimmed:not([data-state]) {
  background-color: color-mix(
    in oklab,
    var(--element-card-background) 32%,
    var(--element-category-dim-mix)
  );
}

.element-card.dimmed[data-state] {
  filter: brightness(var(--element-category-dim-brightness))
    saturate(var(--element-category-dim-saturate));
}

.element-card.is-highlighted {
  position: relative;
  z-index: 1;
  border-color: color-mix(in oklab, var(--element-card-background, var(--table-surface)) 58%, var(--color-selected-border));
  box-shadow: var(--table-shadow-focus);
}

.element-card.is-selected {
  box-shadow:
    var(--table-shadow-rest),
    inset 0 0 0 2px color-mix(in oklab, var(--element-card-accent-ink) 72%, var(--color-selected-border));
}

.element-card:hover:not(.dimmed) {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--element-card-background, var(--table-surface)) 52%, var(--color-border-strong));
  box-shadow: var(--table-shadow-hover);
}