diff --git a/src/components/CustomContextMenu.astro b/src/components/CustomContextMenu.astro
new file mode 100644
index 0000000..a4bff7b
--- /dev/null
+++ b/src/components/CustomContextMenu.astro
@@ -0,0 +1,267 @@
+
+
+
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3bede78..c054712 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,5 +1,6 @@
---
import '../styles/site.css';
+import CustomContextMenu from '@/components/CustomContextMenu.astro';
import { publicSiteConfig, siteConfig } from '../../site.config.mjs';
interface Props {
@@ -118,6 +119,7 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/
+
diff --git a/src/styles/site.css b/src/styles/site.css
index bb9d87a..0d83c83 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -226,6 +226,126 @@ a {
color: var(--accent);
}
+.custom-context-menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+ width: min(218px, calc(100vw - 20px));
+ max-height: calc(100vh - 20px);
+ overflow-y: auto;
+ border: 1px solid rgba(255, 255, 255, 0.58);
+ border-radius: 14px;
+ padding: 8px;
+ color: #4f565b;
+ background:
+ linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(235, 248, 231, 0.68)),
+ rgba(245, 252, 241, 0.82);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.86),
+ 0 18px 42px rgba(44, 55, 63, 0.18);
+ backdrop-filter: blur(18px) saturate(165%);
+ -webkit-backdrop-filter: blur(18px) saturate(165%);
+ opacity: 0;
+ pointer-events: none;
+ transform: translate3d(0, 6px, 0) scale(0.98);
+ transform-origin: top left;
+ transition:
+ opacity 0.14s ease,
+ transform 0.14s ease;
+}
+
+.custom-context-menu.is-open {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translate3d(0, 0, 0) scale(1);
+}
+
+.custom-context-menu [hidden] {
+ display: none !important;
+}
+
+.context-menu-nav {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 6px;
+ padding-bottom: 7px;
+}
+
+.context-menu-group {
+ display: grid;
+ gap: 2px;
+ border-top: 1px dashed rgba(104, 111, 120, 0.18);
+ padding-top: 7px;
+}
+
+.context-menu-group + .context-menu-group {
+ margin-top: 7px;
+}
+
+.custom-context-menu :where(a, button) {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ min-width: 0;
+ border: 0;
+ color: inherit;
+ font: inherit;
+ line-height: 1.25;
+ text-align: left;
+ background: transparent;
+ cursor: pointer;
+}
+
+.context-menu-nav :where(a, button) {
+ justify-content: center;
+ height: 42px;
+ border: 1px solid rgba(178, 194, 170, 0.42);
+ border-radius: 14px;
+ color: #6b7174;
+ background: rgba(255, 255, 255, 0.44);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
+}
+
+.context-menu-group :where(a, button) {
+ gap: 12px;
+ min-height: 40px;
+ border-radius: 10px;
+ padding: 9px 10px;
+}
+
+.custom-context-menu :where(a, button):hover,
+.custom-context-menu :where(a, button):focus-visible {
+ color: var(--accent);
+ background: rgba(255, 255, 255, 0.58);
+ outline: 0;
+}
+
+.custom-context-menu i {
+ display: inline-grid;
+ width: 18px;
+ min-width: 18px;
+ height: 18px;
+ place-items: center;
+ color: #737a7d;
+ font-size: 0.98rem;
+ line-height: 1;
+}
+
+.custom-context-menu :where(a, button):hover i,
+.custom-context-menu :where(a, button):focus-visible i {
+ color: currentColor;
+}
+
+.custom-context-menu span {
+ min-width: 0;
+ overflow: hidden;
+ font-size: 0.95rem;
+ font-weight: 650;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.nav-links a:hover,
.nav-random:hover,
.nav-search:hover,
@@ -272,6 +392,38 @@ a {
0 8px 18px rgba(0, 0, 0, 0.18);
}
+:root[data-theme='dark'] .custom-context-menu {
+ border-color: rgba(174, 205, 197, 0.2);
+ color: #d8e5e2;
+ background:
+ linear-gradient(145deg, rgba(31, 48, 52, 0.88), rgba(13, 23, 26, 0.78)),
+ rgba(15, 25, 28, 0.82);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.1),
+ 0 18px 42px rgba(0, 0, 0, 0.34);
+}
+
+:root[data-theme='dark'] .context-menu-nav :where(a, button) {
+ border-color: rgba(174, 205, 197, 0.16);
+ color: #b7c7c4;
+ background: rgba(255, 255, 255, 0.06);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .context-menu-group {
+ border-top-color: rgba(174, 205, 197, 0.16);
+}
+
+:root[data-theme='dark'] .custom-context-menu :where(a, button):hover,
+:root[data-theme='dark'] .custom-context-menu :where(a, button):focus-visible {
+ color: var(--accent);
+ background: rgba(114, 222, 210, 0.11);
+}
+
+:root[data-theme='dark'] .custom-context-menu i {
+ color: #a8b8b5;
+}
+
.hero {
width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
min-height: 360px;
@@ -3316,6 +3468,22 @@ meting-js {
--page-gutter: 16px;
}
+ .custom-context-menu {
+ width: min(218px, calc(100vw - 16px));
+ border-radius: 12px;
+ padding: 7px;
+ }
+
+ .context-menu-nav :where(a, button) {
+ height: 40px;
+ border-radius: 13px;
+ }
+
+ .context-menu-group :where(a, button) {
+ min-height: 38px;
+ padding: 8px 9px;
+ }
+
.nav {
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;