美化

Author: JiuLing-zhang

src/ComputerLock/Components/TitleBar.razor

@@ -1,8 +1,8 @@
 <div class="d-flex align-start @Class">
-
-    <MudIconButton Icon="@Icons.Material.Filled.Minimize"
+    <MudIconButton Icon="@Icons.Material.Filled.Remove"
                    Size="Size.Small"
-                   OnClick="MinimizeAsync" />
+                   OnClick="MinimizeAsync"
+                   Class="titlebar-btn" />
 
     @*     <MudIconButton Icon=@(_maximizerIcon)
     Size="Size.Medium"
@@ -11,5 +11,6 @@
 
     <MudIconButton Icon="@Icons.Material.Filled.Close"
                    Size="Size.Small"
-                   OnClick="CloseAsync" />
+                   OnClick="CloseAsync"
+                   Class="titlebar-btn close-btn" />
 </div>

src/ComputerLock/Shared/MainLayout.razor

@@ -2,10 +2,10 @@
 
 <MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode" Theme="_customTheme" />
 <MudPopoverProvider />
-<MudDialogProvider/>
+<MudDialogProvider />
 <MudSnackbarProvider />
 
-<MudLayout>
+<MudLayout Class="@(_isDarkMode ? "dark-mode" : "light-mode")">
     <MudAppBar Class="px-2"
                Elevation="25"
                Gutters="false"

src/ComputerLock/Shared/MainLayout.razor.cs

@@ -52,7 +52,7 @@ protected override async Task OnInitializedAsync()
         {
             LayoutProperties = new LayoutProperties
             {
-                AppbarHeight = "32px",
+                AppbarHeight = "36px",
                 DrawerWidthLeft = "200px"
             },
 
@@ -64,8 +64,6 @@ protected override async Task OnInitializedAsync()
                 AppbarText = "#FFA500",
                 Background = "#FFFFFF",
                 Surface = "#FFFFFF",
-                TableStriped = "#FAFAFA",
-                TableHover = "#E3F2FD",
                 LinesDefault = "#E0E0E0",
 
                 Success = "#43A047",
@@ -76,7 +74,8 @@ protected override async Task OnInitializedAsync()
                 TextSecondary = "#616161",
                 DrawerBackground = "#FFFFFF",
                 DrawerText = "#212121",
-                ActionDefault = "#9E9E9E"
+                ActionDefault = "#FFE2B0",
+                HoverOpacity = 0.2
             },
 
             PaletteDark = new PaletteDark()
@@ -87,8 +86,6 @@ protected override async Task OnInitializedAsync()
                 AppbarText = "#FFA500",
                 Background = "#212121",
                 Surface = "#424242",
-                TableStriped = "#292929",
-                TableHover = "#37474F",
                 LinesDefault = "#555555",
 
                 Success = "#66BB6A",
@@ -99,7 +96,8 @@ protected override async Task OnInitializedAsync()
                 TextSecondary = "#B0BEC5",
                 DrawerBackground = "#2C2C2C",
                 DrawerText = "#FFFFFF",
-                ActionDefault = "#BDBDBD"
+                ActionDefault = "#505050",
+                HoverOpacity = 0.2
             }
         };
 

src/ComputerLock/wwwroot/app.css

@@ -10,6 +10,10 @@ body,
     display: none;
 }
 
+.mud-appbar.mud-appbar-fixed-top {
+    padding-right: 0 !important;
+}
+
 .app-icon {
     width: 20px;
     height: 20px;
@@ -27,4 +31,33 @@ body,
 .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
     color: var(--mud-palette-primary) !important;
     font-weight: var(--mud-typography-default-weight) !important;
-}
+}
+
+.titlebar-btn.mud-icon-button {
+    border-radius: 0 !important;
+    padding: 8px !important;
+    color: #424242 !important;
+}
+
+    .titlebar-btn.mud-icon-button:hover {
+        background-color: #E0E0E0 !important;
+    }
+
+
+.dark-mode .titlebar-btn.mud-icon-button {
+    color: #CCCCCC !important;
+}
+
+    .dark-mode .titlebar-btn.mud-icon-button:hover {
+        background-color: #333333 !important;
+    }
+
+.close-btn.mud-icon-button:hover {
+    background-color: #E57373 !important;
+    color: #FFFFFF !important;
+}
+
+.dark-mode .close-btn.mud-icon-button:hover {
+    background-color: #E81123 !important;
+    color: #FFFFFF !important;
+}