bluelib/dist/glass.module.css

/*
 * Bluelib Glass
 * by <me@steffo.eu>
 */
:where(.bluelib) {
  --b-panel-blur: 16px;
  --b-panel-initial-opacity: 0.3;
  --b-panel-nested-opacity: 0.075;
}
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
  :where(.bluelib) .panel,
  :where(.bluelib) .table.panel > .table-caption {
    background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));
    backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
  }
  :where(.bluelib) .panel .panel,
  :where(.bluelib) .table.panel > .table-caption .panel {
    background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
    backdrop-filter: none;
  }
  :where(.bluelib) .modifier-mark,
  :where(.bluelib) .element-mark,
  :where(.bluelib) .panel.modifier-mark {
    background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
    backdrop-filter: none;
  }
  :where(.bluelib) .modifier-mark .modifier-mark,
  :where(.bluelib) .element-mark .modifier-mark,
  :where(.bluelib) .panel.modifier-mark .modifier-mark,
  :where(.bluelib) .modifier-mark .element-mark,
  :where(.bluelib) .element-mark .element-mark,
  :where(.bluelib) .panel.modifier-mark .element-mark,
  :where(.bluelib) .modifier-mark .panel.modifier-mark,
  :where(.bluelib) .element-mark .panel.modifier-mark,
  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark {
    background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
  }
  :where(.bluelib) .modifier-mark .modifier-mark .modifier-mark,
  :where(.bluelib) .element-mark .modifier-mark .modifier-mark,
  :where(.bluelib) .panel.modifier-mark .modifier-mark .modifier-mark,
  :where(.bluelib) .modifier-mark .element-mark .modifier-mark,
  :where(.bluelib) .element-mark .element-mark .modifier-mark,
  :where(.bluelib) .panel.modifier-mark .element-mark .modifier-mark,
  :where(.bluelib) .modifier-mark .panel.modifier-mark .modifier-mark,
  :where(.bluelib) .element-mark .panel.modifier-mark .modifier-mark,
  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .modifier-mark,
  :where(.bluelib) .modifier-mark .modifier-mark .element-mark,
  :where(.bluelib) .element-mark .modifier-mark .element-mark,
  :where(.bluelib) .panel.modifier-mark .modifier-mark .element-mark,
  :where(.bluelib) .modifier-mark .element-mark .element-mark,
  :where(.bluelib) .element-mark .element-mark .element-mark,
  :where(.bluelib) .panel.modifier-mark .element-mark .element-mark,
  :where(.bluelib) .modifier-mark .panel.modifier-mark .element-mark,
  :where(.bluelib) .element-mark .panel.modifier-mark .element-mark,
  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .element-mark,
  :where(.bluelib) .modifier-mark .modifier-mark .panel.modifier-mark,
  :where(.bluelib) .element-mark .modifier-mark .panel.modifier-mark,
  :where(.bluelib) .panel.modifier-mark .modifier-mark .panel.modifier-mark,
  :where(.bluelib) .modifier-mark .element-mark .panel.modifier-mark,
  :where(.bluelib) .element-mark .element-mark .panel.modifier-mark,
  :where(.bluelib) .panel.modifier-mark .element-mark .panel.modifier-mark,
  :where(.bluelib) .modifier-mark .panel.modifier-mark .panel.modifier-mark,
  :where(.bluelib) .element-mark .panel.modifier-mark .panel.modifier-mark,
  :where(.bluelib) .panel.modifier-mark .panel.modifier-mark .panel.modifier-mark {
    background-color: hsl(var(--bhsl-mark-background-hue) var(--bhsl-mark-background-saturation) var(--bhsl-mark-background-lightness));
  }
  :where(.bluelib) .modifier-todo,
  :where(.bluelib) .panel.modifier-todo {
    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
  }
  :where(.bluelib) .modifier-todo .panel,
  :where(.bluelib) .panel.modifier-todo .panel {
    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
    backdrop-filter: none;
  }
  :where(.bluelib) .panel.modifier-todo {
    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness) / 0.3);
    backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
  }
  :where(.bluelib) .panel .panel.modifier-todo {
    background-color: hsl(var(--bhsl-todo-background-hue) var(--bhsl-todo-background-saturation) var(--bhsl-todo-background-lightness));
  }
}