右键菜单

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;