omath/docs/styles/liquid-glass.css

/* ============================================================
   Apple Liquid Glass Design — glassmorphism overrides
   for Material for MkDocs (slate / dark mode)
   ============================================================ */

/* ---------- shared glass mixin values ---------- */
:root {
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.12);
  --glass-blur: 16px;
  --glass-radius: 14px;
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --glass-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.18);
  --glass-accent: rgba(255, 152, 0, 0.12);
}

/* ---------- header / top-bar ---------- */
.md-header {
  background: rgba(30, 30, 30, 0.55) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
}

/* ---------- navigation sidebar ---------- */
.md-sidebar {
  background: transparent !important;
}

.md-sidebar__scrollwrap {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
  backdrop-filter: saturate(160%) blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
  border-radius: 0 var(--glass-radius) var(--glass-radius) 0;
}

/* active nav item — subtle glass highlight */
.md-nav__item--active > .md-nav__link {
  background: var(--glass-accent) !important;
  border-radius: 8px;
}

/* ---------- content area ---------- */
.md-main__inner {
  background: transparent;
}

.md-content {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  margin: 12px 0;
  padding: 4px;
}

/* ---------- code blocks ---------- */
.highlight {
  background: rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-strong);
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              var(--glass-shadow-sm);
  overflow: hidden;
}

.highlight code {
  background: transparent !important;
}

/* inline code */
:not(pre) > code {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 2px 6px;
}

/* ---------- tables ---------- */
.md-typeset table:not([class]) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--glass-shadow-sm);
}

.md-typeset table:not([class]) th {
  background: rgba(255, 152, 0, 0.08);
}

/* ---------- admonitions / call-outs ---------- */
.md-typeset .admonition,
.md-typeset details {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow-sm);
}

/* ---------- tabs ---------- */
.md-typeset .tabbed-set {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
}

/* ---------- search bar ---------- */
.md-search__form {
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px !important;
}

/* ---------- footer ---------- */
.md-footer {
  background: rgba(30, 30, 30, 0.50) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
}

/* ---------- horizontal rules — subtle glow ---------- */
.md-typeset hr {
  border-image: linear-gradient(
    to right,
    transparent,
    rgba(255, 152, 0, 0.25),
    transparent
  ) 1;
}

/* ---------- scrollbar ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- links — subtle glass-glow on hover ---------- */
.md-typeset a:hover {
  text-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
}

/* ---------- images — soft glass frame ---------- */
.md-typeset img {
  border-radius: 10px;
}