美化

Author: JiuLing-zhang

src/ComputerLock/Components/Settings/UnlockSettings.razor

@@ -9,7 +9,7 @@
 
 <MudText Typo="Typo.h6" Class="mb-4">@(Lang["UnlockOptions"])</MudText>
 
-<div @onclick="@(() => SelectUnlockMethod(ScreenUnlockMethods.Hotkey))" style="position:relative;">
+<div class="unlock-card-wrapper@(isHotkeySelected ? " selected" : "")" @onclick="@(() => SelectUnlockMethod(ScreenUnlockMethods.Hotkey))" style="position:relative;">
     <MudPaper Class="@hotkeyCardClass" Elevation="5">
         <div class="card-header">
             <span class="card-title">@($"{Lang["HotkeyUnlock"]} ⚡")</span>
@@ -39,7 +39,7 @@
     </MudPaper>
 </div>
 
-<div @onclick="@(() => SelectUnlockMethod(ScreenUnlockMethods.Password))" style="position:relative;">
+<div class="unlock-card-wrapper@(isPasswordSelected ? " selected" : "")" @onclick="@(() => SelectUnlockMethod(ScreenUnlockMethods.Password))" style="position:relative;">
     <MudPaper Class="@passwordCardClass" Elevation="5">
         <div class="card-header">
             <span class="card-title">@($"{Lang["PasswordUnlock"]} 🧩")</span>

src/ComputerLock/Components/Settings/UnlockSettings.razor.css

@@ -9,6 +9,14 @@
         border-radius: 8px;
     }
 
+.unlock-card:not(.selected):hover {
+    cursor: pointer;
+}
+
+.unlock-card-wrapper:not(.selected):hover {
+    cursor: pointer;
+}
+
 .card-header {
     display: flex;
     align-items: center;
@@ -39,6 +47,7 @@
     border-radius: 8px;
     pointer-events: all;
     transition: background 0.2s;
+    cursor: pointer;
 }
 
 .dark-mode .card-mask {