translation UI

LM-Kit · Jan 2, 2025 · bb52907 · bb52907
1 parent 1805365
commit bb52907
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 50 deletions.
diff --git a/LM-Kit-Maestro/UI/Razor/Components/Translation.razor b/LM-Kit-Maestro/UI/Razor/Components/Translation.razor
@@ -1,7 +1,7 @@
 @inject IClipboardHandler ClipboardHandler
 
 <div id="translation-container">
-    <div id="translation-header">
+    <div id="translation-header" class="translation-grid">
 
         <div class="language-select">
             <MudSelect Label="Input language" @bind-Value="TranslationViewModel.InputLanguage">
@@ -37,6 +37,7 @@
         </div> *@
 
         @* <IconButton Style="IconButton.IconButtonStyle.Square" Icon="fa-arrow-right-arrow-left" OnClick="OnCopyResultButtonClicked" /> *@
+        <div class="vertical-separator"></div>
 
         <div class="language-select">
             <MudSelect Label="Output language" @bind-Value="TranslationViewModel.OutputLanguage">
@@ -48,7 +49,9 @@
         </div>
     </div>
 
-    <div id="translation-body">
+    <div class="horizontal-separator"/>
+
+    <div id="translation-body" class="translation-grid">
         <div id="translation-input">
             <InputBox @bind-InputText="TranslationViewModel.InputText" />
         </div>

diff --git a/LM-Kit-Maestro/UI/Razor/Components/Translation.razor.css b/LM-Kit-Maestro/UI/Razor/Components/Translation.razor.css
@@ -17,7 +17,7 @@
     border-radius: 8px;
     overflow: hidden;
     display: grid;
-    grid-template-rows: auto auto;
+    grid-template-rows: auto auto auto;
 }
 
 #translation-input, #translation-output {
@@ -29,13 +29,14 @@
 #translation-header {
     display: inline-grid;
     align-items: center;
-    padding-block: 20px;
-    padding-inline: 10px;
-    grid-template-columns: 1fr 1fr;
 }
 
 #translation-body {
     grid-template-columns: 1fr auto 1fr;
+}
+
+.translation-grid {
+    grid-template-columns: 1fr auto 1fr;
     display: grid;
 }
 
@@ -45,8 +46,19 @@
     height: 100%;
 }
 
+.horizontal-separator {
+    height: 1px;
+    background-color: var(--OutlineVariant);
+    width: 100%;
+}
+
 .language-select {
+    margin-block: 8px;
     margin-inline: 8px;
-    min-width: 180px;
+    max-width: 200px;
     display: inline-block;
-}
+}
+
+.language-select:hover{
+    background-color: var(--Surface2);
+}
diff --git a/LM-Kit-Maestro/UI/Razor/MainLayout.razor b/LM-Kit-Maestro/UI/Razor/MainLayout.razor
@@ -19,48 +19,28 @@
                 Surface = "#06080A",
                 Background = "#12181F",
                 TextPrimary = "#F0F6FC",
-                BackgroundGray = "#FF0000",
-                AppbarText = "#FF0000",
-                AppbarBackground = "#FF0000",
-                DrawerBackground = "#FF0000",
-                ActionDefault = "#FF0000",
-                ActionDisabled = "#FF0000",
-                ActionDisabledBackground = "#FF0000",
-                TextSecondary = "#FF0000",
-                TextDisabled = "#FF0000",
-                DrawerIcon = "#FF0000",
-                DrawerText = "#FF0000",
-                GrayLight = "#FF0000",
-                GrayLighter = "#FF0000",
-                Info = "#FF0000",
-                Success = "#FF0000",
-                Warning = "#FF0000",
-                Error = "#FF0000",
-                LinesDefault = "#FF0000",
-                TableLines = "#FF0000",
-                Divider = "#FF0000",
-                OverlayLight = "#FF0000",
-                // BackgroundGray = "#151521",
-                // AppbarText = "#92929f",
-                // AppbarBackground = "rgba(26,26,39,0.8)",
-                // DrawerBackground = "#1a1a27",
-                // ActionDefault = "#74718e",
-                // ActionDisabled = "#9999994d",
-                // ActionDisabledBackground = "#605f6d4d",
-                // TextSecondary = "#92929f",
-                // TextDisabled = "#ffffff33",
-                // DrawerIcon = "#92929f",
-                // DrawerText = "#92929f",
-                // GrayLight = "#2a2833",
-                // GrayLighter = "#06080A",
-                // Info = "#4a86ff",
-                // Success = "#3dcb6c",
-                // Warning = "#ffb545",
-                // Error = "#ff3f5f",
-                // LinesDefault = "#33323e",
-                // TableLines = "#33323e",
-                // Divider = "#292838",
-                // OverlayLight = "#12181F",
+
+                BackgroundGray = "#151521",
+                AppbarText = "#92929f",
+                AppbarBackground = "rgba(26,26,39,0.8)",
+                DrawerBackground = "#1a1a27",
+                ActionDefault = "#74718e",
+                ActionDisabled = "#9999994d",
+                ActionDisabledBackground = "#605f6d4d",
+                TextSecondary = "#92929f",
+                TextDisabled = "#ffffff33",
+                DrawerIcon = "#92929f",
+                DrawerText = "#92929f",
+                GrayLight = "#2a2833",
+                GrayLighter = "#06080A",
+                Info = "#4a86ff",
+                Success = "#3dcb6c",
+                Warning = "#ffb545",
+                Error = "#ff3f5f",
+                LinesDefault = "#33323e",
+                TableLines = "#33323e",
+                Divider = "#292838",
+                OverlayLight = "#12181F",
             }
         };