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;