mirror of
https://github.com/orange-cpp/omath.git
synced 2026-02-13 07:03:25 +00:00
247 lines
6.3 KiB
CSS
247 lines
6.3 KiB
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;
|
|
}
|
|
|
|
/* ============================================================
|
|
Dynamic Liquid Glass — mouse-tracking specular highlight
|
|
============================================================ */
|
|
|
|
/* Shared: every glass surface gets a hidden radial-light overlay
|
|
that becomes visible when JS adds the .glass-active class and
|
|
sets --glass-x / --glass-y custom properties. */
|
|
.md-header,
|
|
.md-content,
|
|
.md-sidebar__scrollwrap,
|
|
.highlight,
|
|
.md-search__form,
|
|
.md-footer {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.md-header::after,
|
|
.md-content::after,
|
|
.md-sidebar__scrollwrap::after,
|
|
.highlight::after,
|
|
.md-search__form::after,
|
|
.md-footer::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
background: radial-gradient(
|
|
circle 220px at var(--glass-x, 50%) var(--glass-y, 50%),
|
|
rgba(255, 200, 120, 0.10) 0%,
|
|
rgba(255, 152, 0, 0.04) 40%,
|
|
transparent 70%
|
|
);
|
|
z-index: 1;
|
|
}
|
|
|
|
.md-header.glass-active::after,
|
|
.md-content.glass-active::after,
|
|
.md-sidebar__scrollwrap.glass-active::after,
|
|
.highlight.glass-active::after,
|
|
.md-search__form.glass-active::after,
|
|
.md-footer.glass-active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Keep header text / nav icons above the overlay */
|
|
.md-header > *,
|
|
.md-content > *,
|
|
.md-sidebar__scrollwrap > *,
|
|
.md-search__form > *,
|
|
.md-footer > * {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Highlight code blocks get a slightly brighter spot */
|
|
.highlight.glass-active::after {
|
|
background: radial-gradient(
|
|
circle 180px at var(--glass-x, 50%) var(--glass-y, 50%),
|
|
rgba(255, 200, 120, 0.12) 0%,
|
|
rgba(255, 152, 0, 0.05) 35%,
|
|
transparent 65%
|
|
);
|
|
}
|