From a2cde36f6b9af014c66009dfdddd913dec3684a5 Mon Sep 17 00:00:00 2001 From: M1ngdaXie <156019134+M1ngdaXie@users.noreply.github.com> Date: Thu, 26 Mar 2026 15:20:20 -0700 Subject: [PATCH] feat(pixel): restyle desktop icons and context menu --- src/components/ContextMenu/ContextMenu.css | 26 +++++++++++----------- src/components/DesktopIcon/DesktopIcon.css | 16 +++++++------ 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/components/ContextMenu/ContextMenu.css b/src/components/ContextMenu/ContextMenu.css index 3044306..106a7a1 100644 --- a/src/components/ContextMenu/ContextMenu.css +++ b/src/components/ContextMenu/ContextMenu.css @@ -1,11 +1,9 @@ .context-menu { position: fixed; - background: rgba(40, 40, 52, 0.82); - backdrop-filter: var(--glass-blur); - -webkit-backdrop-filter: var(--glass-blur); - border: 1px solid var(--glass-border); - border-radius: 8px; - box-shadow: 0 8px 32px rgba(0,0,0,0.4); + background: #0d0d1a; + border: 2px solid #333333; + border-radius: 0; + box-shadow: 3px 3px 0 #000000; padding: 4px; min-width: 200px; z-index: 9000; @@ -15,19 +13,21 @@ display: flex; align-items: center; gap: 8px; - padding: 6px 10px; - border-radius: 5px; - font-size: 13px; - color: rgba(255,255,255,0.9); + padding: 8px 10px; + border-radius: 0; + font-size: 8px; + color: rgba(255, 255, 255, 0.9); cursor: default; + letter-spacing: 0.5px; } .context-menu-item:hover { - background: var(--accent-blue); + background: var(--pixel-cyan); + color: #000; } .context-menu-separator { - height: 1px; - background: var(--glass-border); + height: 2px; + background: #333333; margin: 3px 6px; } diff --git a/src/components/DesktopIcon/DesktopIcon.css b/src/components/DesktopIcon/DesktopIcon.css index ed19f88..866c68f 100644 --- a/src/components/DesktopIcon/DesktopIcon.css +++ b/src/components/DesktopIcon/DesktopIcon.css @@ -6,32 +6,34 @@ cursor: default; width: 72px; padding: 6px; - border-radius: 8px; + border-radius: 0; transition: background 0.1s; } .desktop-icon:hover { - background: rgba(255,255,255,0.08); + background: rgba(0, 255, 255, 0.08); } .desktop-icon-img { width: 56px; height: 56px; - border-radius: var(--radius-icon); + border-radius: 0; + border: 2px solid #000; display: flex; align-items: center; justify-content: center; font-size: 28px; - box-shadow: 0 2px 12px rgba(0,0,0,0.3); + box-shadow: 3px 3px 0 #000; } .desktop-icon-label { - font-size: 11px; - color: #fff; + font-size: 8px; + color: var(--pixel-cyan); text-align: center; - text-shadow: 0 1px 3px rgba(0,0,0,0.6); + text-shadow: 1px 1px 0 #000; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + letter-spacing: 0.5px; }