mirror of
https://github.com/orange-cpp/omath.git
synced 2026-02-13 07:03:25 +00:00
Add Apple Liquid Glass glassmorphism design for mkdocs site
Co-authored-by: orange-cpp <59374393+orange-cpp@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
179
docs/styles/liquid-glass.css
Normal file
179
docs/styles/liquid-glass.css
Normal file
@@ -0,0 +1,179 @@
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user