From c1a5a2ba3f8a80005e72332ce2828d2a79b3f811 Mon Sep 17 00:00:00 2001
From: BeepBeepBopBop <116374330+BeepBeepBopBop@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:27:43 +0100
Subject: [PATCH] move css to separated files

---
 LM-Kit-Maestro/UI/Razor/Components/Chat.razor | 228 +++---------------
 .../UI/Razor/Components/Chat.razor.css        | 145 +++++++++++
 .../UI/Razor/Components/ChatMessage.razor     | 124 ----------
 .../UI/Razor/Components/ChatMessage.razor.css | 121 ++++++++++
 .../UI/Razor/Components/UserInput.razor       | 104 --------
 .../UI/Razor/Components/UserInput.razor.css   | 103 ++++++++
 LM-Kit-Maestro/UI/Razor/MainLayout.razor      |   2 +-
 LM-Kit-Maestro/UI/Razor/MainLayout.razor.css  |   3 +-
 LM-Kit-Maestro/wwwroot/index.html             |   2 +-
 9 files changed, 413 insertions(+), 419 deletions(-)
 create mode 100644 LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
 create mode 100644 LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor.css
 create mode 100644 LM-Kit-Maestro/UI/Razor/Components/UserInput.razor.css

diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
index 9b431c1..1eef6d3 100644
--- a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
+++ b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor
@@ -10,46 +10,46 @@
 <div id="container">
     <div id="conversation-container">
         <div id="conversation-content"
-        class="chat-element dark @(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
+             class="chat-element dark @(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
             @if (ViewModel?.ConversationListViewModel.CurrentConversation != null)
             {
                 if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
                 {
-                                                            <div id="empty-conversation" class="vertical-stack small">
-                                                                <div class="vertical-stack spacing-4">
-                                                                    <div class="welcome-message">Hello, human.</div>
-                                                                    <div class="welcome-message">
-                                                                        It is likely that similar software programs are now assuming professional tasks that
-                                                                        were
-                                                                        previously your responsibility.
-                                                                    </div>
-                                                                    <div class="welcome-message">
-                                                                        Developers and other software programs are working to enhance my
-                                                                        ability to assist you in the process of making sense about this, or to generate witty
-                                                                        jokes
-                                                                        involving robots and humans.
-                                                                    </div>
-                                                                </div>
-
-                                                                <div class="vertical-stack" style="gap:12px;">
-                                                                    <div class="shortcut-instruction">
-                                                                        Press Enter to send a new message
-                                                                    </div>
-
-                                                                    <div class="shortcut-instruction">
-                                                                        Hold Shift + Enter to insert a new line
-                                                                    </div>
-                                                                </div>
-                                                            </div>
+                    <div id="empty-conversation" class="vertical-stack small">
+                        <div class="vertical-stack spacing-4">
+                            <div class="welcome-message">Hello, human.</div>
+                            <div class="welcome-message">
+                                It is likely that similar software programs are now assuming professional tasks that
+                                were
+                                previously your responsibility.
+                            </div>
+                            <div class="welcome-message">
+                                Developers and other software programs are working to enhance my
+                                ability to assist you in the process of making sense about this, or to generate witty
+                                jokes
+                                involving robots and humans.
+                            </div>
+                        </div>
+
+                        <div class="vertical-stack" style="gap:12px;">
+                            <div class="shortcut-instruction">
+                                Press Enter to send a new message
+                            </div>
+
+                            <div class="shortcut-instruction">
+                                Hold Shift + Enter to insert a new line
+                            </div>
+                        </div>
+                    </div>
                 }
                 else
                 {
-                                                            <div id="message-list">
+                    <div id="message-list">
                         @foreach (var message in ViewModel.ConversationListViewModel.CurrentConversation.Messages)
                         {
-                                                                                        <ChatMessage MessageViewModel="message"/>
+                            <ChatMessage MessageViewModel="message" />
                         }
-                                                            </div>
+                    </div>
                 }
             }
         </div>
@@ -58,179 +58,31 @@
             <div id="scroll-to-end">
                 @if (!IsScrolledToEnd)
                 {
-                                        <button @onclick="OnScrollToEndButtonClicked"
-                                        class="material-icons round-button scroll-to-end-button">
-                                            arrow_downward
-                                        </button>
+                    <button @onclick="OnScrollToEndButtonClicked"
+                            class="material-icons round-button scroll-to-end-button">
+                        arrow_downward
+                    </button>
                 }
             </div>
         </div>
     </div>
 
     <div id="user-input" class="chat-element">
-        <UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation"/>
+        <UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation" />
     </div>
 
-  <div id="bottom-space" class="chat-element">
+    <div id="bottom-space" class="chat-element">
         @if (ViewModel?.ConversationListViewModel?.CurrentConversation?.LMKitConversation?.ContextSize > 0)
         {
             <text>
-                    Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
+                Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
                 @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize
-                    (@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
-                                ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
+                (@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
+                        ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
             </text>
         }
+    </div>
 </div>
-</div>
-
-<style>
-    #container {
-    color: white;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    grid-template-rows: 1fr auto auto;
-    padding-inline: 8px;
-    padding-block: 8px;
-    display: grid;
-    }
-
-    #conversation-container {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    /*         display: flex;
-    flex-direction: column;
-    */
-    overflow-y: hidden;
-    scrollbar-gutter: both-edges stable;
-    }
-
-    #conversation-container:hover {
-    overflow-y: scroll; /* Show the scrollbar on hover */
-    }
-
-    #conversation-container::-webkit-scrollbar {
-    width: 8px;
-    }
-
-    #conversation-container::-webkit-scrollbar-thumb {
-    background-color: var(--Surface);
-    border-radius: 4px;
-    border: 10px solid transparent;
-    }
-
-    #conversation-container::-webkit-scrollbar-track {
-    background-color: transparent;
-    }
-
-    #conversation-container::-webkit-scrollbar-thumb:hover {
-    background-color: var(--Surface3);
-    }
-
-    #conversation-content {
-    }
-
-
-    #user-input {
-    overflow: hidden;
-    }
-
-
-    #bottom-space {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 0;
-    margin-block: 8px;
-    }
-
-    .chat-element {
-    padding-inline: 8px;
-    width: 100%;
-    justify-content: center;
-    align-self: center;
-    margin-left: auto;
-    margin-right: auto;
-    }
-
-    body.windows .chat-element {
-    max-width: 800px;
-    }
-
-    body.mac .chat-element {
-    max-width: 1000px;
-    }
-
-    .top-align-container {
-    align-items: flex-start;
-    }
-
-    .centered-container {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    justify-content: center;
-    }
-
-    #message-list {
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    }
-
-    #empty-conversation {
-    flex-direction: column;
-    gap: 32px;
-    display: flex;
-    }
-
-    #chat-info {
-    position: sticky;
-    display: flex;
-    bottom: 8px;
-    height: 100px;
-    }
-
-    .scroll-to-end-button {
-    color: var(--OnSurface);
-    background-color: var(--Surface4);
-    display: flex;
-    border: none;
-    align-self: center;
-    }
-
-    body.windows .scroll-to-end-button {
-    margin-top: -32px; /* Setting negative margin to the height of the button so that it does not add height to parent containers. */
-    }
-
-    body.mac .scroll-to-end-button {
-    margin-top: -40px; /* Setting negative margin to the height of the button so that it does not add height to parent containers. */
-    }
-
-    .vertical-stack {
-    gap: 8px;
-    display: flex;
-    flex-direction: column;
-    }
-
-    .welcome-message {
-    color: var(--Outline);
-    text-align: center;
-    }
-
-    .shortcut-instruction {
-    padding: 12px;
-    border: 1px solid;
-    display: flex;
-    flex-direction: row;
-    border-radius: 0;
-    border-color: var(--Surface4);
-    color: var(--Outline);
-    }
-</style>
 
 <script>
     function initializeScrollHandler(dotNetHelper) {
diff --git a/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
new file mode 100644
index 0000000..8859ed6
--- /dev/null
+++ b/LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
@@ -0,0 +1,145 @@
+#container {
+    color: white;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    grid-template-rows: 1fr auto auto;
+    padding-inline: 8px;
+    padding-block: 8px;
+    display: grid;
+}
+
+#conversation-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    /*         display: flex;
+    flex-direction: column;
+    */
+    overflow-y: hidden;
+    scrollbar-gutter: both-edges stable;
+}
+
+    #conversation-container:hover {
+        overflow-y: scroll; /* Show the scrollbar on hover */
+    }
+
+    #conversation-container::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    #conversation-container::-webkit-scrollbar-thumb {
+        background-color: var(--Surface);
+        border-radius: 4px;
+        border: 10px solid transparent;
+    }
+
+    #conversation-container::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    #conversation-container::-webkit-scrollbar-thumb:hover {
+        background-color: var(--Surface3);
+    }
+
+#conversation-content {
+}
+
+
+#user-input {
+    overflow: hidden;
+}
+
+
+#bottom-space {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 0;
+    margin-block: 8px;
+}
+
+.chat-element {
+    padding-inline: 8px;
+    width: 100%;
+    justify-content: center;
+    align-self: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+body.windows .chat-element {
+    max-width: 800px;
+}
+
+body.mac .chat-element {
+    max-width: 1000px;
+}
+
+.top-align-container {
+    align-items: flex-start;
+}
+
+.centered-container {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    justify-content: center;
+}
+
+#message-list {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+#empty-conversation {
+    flex-direction: column;
+    gap: 32px;
+    display: flex;
+}
+
+#chat-info {
+    position: sticky;
+    display: flex;
+    bottom: 8px;
+    height: 100px;
+}
+
+.scroll-to-end-button {
+    color: var(--OnSurface);
+    background-color: var(--Surface4);
+    display: flex;
+    border: none;
+    align-self: center;
+}
+
+body.windows .scroll-to-end-button {
+    margin-top: -32px; /* Setting negative margin to the height of the button so that it does not add height to parent containers. */
+}
+
+body.mac .scroll-to-end-button {
+    margin-top: -40px; /* Setting negative margin to the height of the button so that it does not add height to parent containers. */
+}
+
+.vertical-stack {
+    gap: 8px;
+    display: flex;
+    flex-direction: column;
+}
+
+.welcome-message {
+    color: var(--Outline);
+    text-align: center;
+}
+
+.shortcut-instruction {
+    padding: 12px;
+    border: 1px solid;
+    display: flex;
+    flex-direction: row;
+    border-radius: 0;
+    border-color: var(--Surface4);
+    color: var(--Outline);
+}
diff --git a/LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor b/LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor
index 622f17f..ffdae48 100644
--- a/LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor
+++ b/LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor
@@ -72,130 +72,6 @@
     }
 </div>
 
-<style>
-    .rootContainer {
-        display: flex;
-        position: relative;
-        flex-direction: column;
-        margin-top: 2px;
-        margin-bottom: 20px;
-        padding-inline: 8px;
-        padding-block: 16px;
-        border-radius: 0px;
-    }
-
-    .assistantMessageRootContainer:hover {
-        background-color: var(--Surface15);
-    }
-
-    .userMessageRootContainer:hover .userMessageContent {
-        background-color: var(--Surface15);
-    }
-
-    .rootContainer:hover > div {
-        visibility: visible;
-    }
-
-    .userMessageDiv {
-        max-width: 75%;
-        margin-left: auto;
-    }
-
-    .userMessageDiv {
-    }
-
-    .messageContent {
-        padding-block: 12px;
-        padding-inline: 16px;
-        word-break: break-word; /* Ensures long words break and wrap */
-        overflow-wrap: break-word; /* Allows wrapping long words */
-        max-width: 100%; /* Prevents the div from exceeding the width of its container */
-    }
-
-    .userMessageContent {
-        display: block;
-        background-color: var(--Surface);
-        border-radius: 32px;
-    }
-
-
-    .assistantMessageContent {
-        padding: 4px;
-        margin-bottom: -16px; /* workaround: this syntax adds 16px bottom margin to the html block '(MarkupString)Markdig.Markdown.ToHtml(MessageViewModel.Content)'*/
-    }
-
-    .show {
-        visibility: visible;
-    }
-
-    .hide {
-        visibility: hidden;
-    }
-
-    .chatActionButton {
-        align-self: center;
-        border-radius: 50%;
-        border-width: 0;
-        font-size: 12px;
-        padding: 2px;
-        min-height: 20px;
-        min-width: 20px;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        background-color: transparent;
-        color: var(--Outline);
-    }
-
-    .chatActionButton:hover {
-        background-color: var(--Surface3);
-    }
-
-    .dot {
-        height: 10px;
-        width: 10px;
-        margin-left: 4px;
-        background-color: var(--OnBackground);
-        border-radius: 50%;
-        display: inline-block;
-    }
-
-    .align-right {
-        margin-left: auto;
-    }
-
-    .align-left {
-        margin-right: auto;
-    }
-
-    .messageFooter {
-        margin-top: 12px;
-        display: flex;
-        align-items: center;
-    }
-
-    .messageFooter:hover {
-        visibility: visible;
-    }
-
-    .messageFooterText {
-        line-height: 20px;
-        color: var(--Outline);
-        display: inline-block;
-        transform: translateY(-2px); /* tweaking text vertical position to align it with button icons */
-        align-self: center;
-        margin-inline: 4px;
-    }
-
-    .messageButtonDiv {
-        display: inline;
-    }
-
-    .userMessageFooterContent {
-        margin-left: auto;
-    }
-</style>
-
 @code {
 
     const string ProgressIndicatorHtml = "<span class=\"dot \"></span>";
diff --git a/LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor.css b/LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor.css
new file mode 100644
index 0000000..09b4c2e
--- /dev/null
+++ b/LM-Kit-Maestro/UI/Razor/Components/ChatMessage.razor.css
@@ -0,0 +1,121 @@
+.rootContainer {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    margin-top: 2px;
+    margin-bottom: 20px;
+    padding-inline: 8px;
+    padding-block: 16px;
+    border-radius: 0px;
+}
+
+.assistantMessageRootContainer:hover {
+    background-color: var(--Surface15);
+}
+
+.userMessageRootContainer:hover .userMessageContent {
+    background-color: var(--Surface15);
+}
+
+.rootContainer:hover > div {
+    visibility: visible;
+}
+
+.userMessageDiv {
+    max-width: 75%;
+    margin-left: auto;
+}
+
+.userMessageDiv {
+}
+
+.messageContent {
+    padding-block: 12px;
+    padding-inline: 16px;
+    word-break: break-word; /* Ensures long words break and wrap */
+    overflow-wrap: break-word; /* Allows wrapping long words */
+    max-width: 100%; /* Prevents the div from exceeding the width of its container */
+}
+
+.userMessageContent {
+    display: block;
+    background-color: var(--Surface);
+    border-radius: 32px;
+}
+
+
+.assistantMessageContent {
+    padding: 4px;
+    margin-bottom: -16px; /* workaround: this syntax adds 16px bottom margin to the html block '(MarkupString)Markdig.Markdown.ToHtml(MessageViewModel.Content)'*/
+}
+
+.show {
+    visibility: visible;
+}
+
+.hide {
+    visibility: hidden;
+}
+
+.chatActionButton {
+    align-self: center;
+    border-radius: 50%;
+    border-width: 0;
+    font-size: 12px;
+    padding: 2px;
+    min-height: 20px;
+    min-width: 20px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+    color: var(--Outline);
+}
+
+    .chatActionButton:hover {
+        background-color: var(--Surface3);
+    }
+
+.dot {
+    height: 10px;
+    width: 10px;
+    margin-left: 4px;
+    background-color: var(--OnBackground);
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.align-right {
+    margin-left: auto;
+}
+
+.align-left {
+    margin-right: auto;
+}
+
+.messageFooter {
+    margin-top: 12px;
+    display: flex;
+    align-items: center;
+}
+
+    .messageFooter:hover {
+        visibility: visible;
+    }
+
+.messageFooterText {
+    line-height: 20px;
+    color: var(--Outline);
+    display: inline-block;
+    transform: translateY(-2px); /* tweaking text vertical position to align it with button icons */
+    align-self: center;
+    margin-inline: 4px;
+}
+
+.messageButtonDiv {
+    display: inline;
+}
+
+.userMessageFooterContent {
+    margin-left: auto;
+}
diff --git a/LM-Kit-Maestro/UI/Razor/Components/UserInput.razor b/LM-Kit-Maestro/UI/Razor/Components/UserInput.razor
index 19e59a8..05bbfaf 100644
--- a/LM-Kit-Maestro/UI/Razor/Components/UserInput.razor
+++ b/LM-Kit-Maestro/UI/Razor/Components/UserInput.razor
@@ -20,110 +20,6 @@
     </button>
 </div>
 
-<style>
-
-    body.mac #chat-border {
-        max-width: 1000px;
-    }
-
-    body.windows #chat-border {
-        max-width: 800px;
-    }
-
-    #chat-border {
-        display: flex;
-        position: relative;
-        margin: 0;
-        width: 100%;
-        padding-block: 8px;
-        background-color: var(--Surface);
-        border: 2px solid var(--OutlineVariant);
-        transition: border-color 0.3s;
-        color: white;
-    }
-
-    .chat-border-small {
-        border-radius: 32px;
-    }
-
-    .chat-border-large {
-        border-radius: 16px;
-    }
-
-    #chat-box {
-        color: var(--OnBackground);
-        margin-block: auto;
-        background-color: transparent;
-        width: 100%;
-        max-height: 200px;
-        overflow-y: auto;
-        border: none;
-        outline: none;
-        resize: none;
-        padding-right: 40px;
-        margin-left: 16px;
-        margin-bottom: 0;
-    }
-
-    .chat-box:focus-within {
-        border-color: var(--Primary);
-    }
-
-    #chat-box::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    #chat-box::-webkit-scrollbar-thumb {
-        background-color: var(--Surface2);
-        border-radius: 4px;
-        border: 10px solid transparent;
-    }
-
-    #chat-box::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-
-    #chat-box::-webkit-scrollbar-thumb:hover {
-        background-color: var(--Surface3);
-    }
-
-    .send-button {
-        position: absolute;
-        right: 0;
-        bottom: 6px;
-        margin-top: auto;
-        margin-right: 8px;
-        margin-left: auto;
-        border: none;
-        background-color: var(--Surface4);
-        cursor: pointer;
-        transition: background-color 0.3s;
-    }
-
-    body.mac .send-button {
-        width: 40px;
-        height: 40px;
-    }
-
-    body.windows .send-button {
-        width: 32px;
-        height: 32px;
-    }
-
-    .disabled-button {
-        color: var(--Surface);
-        cursor: not-allowed;
-    }
-
-    .enabled-button {
-        color: var(--OnSurface);
-    }
-
-    /*     .send-button:hover:not(:disabled) {
-        background-color: var(--OutlineVariant);
-        } */
-</style>
-
 <script>
 
     document.getElementById('chat-box').addEventListener('keydown', function (e) {
diff --git a/LM-Kit-Maestro/UI/Razor/Components/UserInput.razor.css b/LM-Kit-Maestro/UI/Razor/Components/UserInput.razor.css
new file mode 100644
index 0000000..842e8d4
--- /dev/null
+++ b/LM-Kit-Maestro/UI/Razor/Components/UserInput.razor.css
@@ -0,0 +1,103 @@
+<style >
+
+body.mac #chat-border {
+    max-width: 1000px;
+}
+
+body.windows #chat-border {
+    max-width: 800px;
+}
+
+#chat-border {
+    display: flex;
+    position: relative;
+    margin: 0;
+    width: 100%;
+    padding-block: 8px;
+    background-color: var(--Surface);
+    border: 2px solid var(--OutlineVariant);
+    transition: border-color 0.3s;
+    color: white;
+}
+
+.chat-border-small {
+    border-radius: 32px;
+}
+
+.chat-border-large {
+    border-radius: 16px;
+}
+
+#chat-box {
+    color: var(--OnBackground);
+    margin-block: auto;
+    background-color: transparent;
+    width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    border: none;
+    outline: none;
+    resize: none;
+    padding-right: 40px;
+    margin-left: 16px;
+    margin-bottom: 0;
+}
+
+.chat-box:focus-within {
+    border-color: var(--Primary);
+}
+
+#chat-box::-webkit-scrollbar {
+    width: 8px;
+}
+
+#chat-box::-webkit-scrollbar-thumb {
+    background-color: var(--Surface2);
+    border-radius: 4px;
+    border: 10px solid transparent;
+}
+
+#chat-box::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+#chat-box::-webkit-scrollbar-thumb:hover {
+    background-color: var(--Surface3);
+}
+
+.send-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+    margin-top: auto;
+    margin-right: 8px;
+    margin-left: auto;
+    border: none;
+    background-color: var(--Surface4);
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+body.mac .send-button {
+    width: 40px;
+    height: 40px;
+}
+
+body.windows .send-button {
+    width: 32px;
+    height: 32px;
+}
+
+.disabled-button {
+    color: var(--Surface);
+    cursor: not-allowed;
+}
+
+.enabled-button {
+    color: var(--OnSurface);
+}
+
+/*     .send-button:hover:not(:disabled) {
+        background-color: var(--OutlineVariant);
+        } */
+</style >
diff --git a/LM-Kit-Maestro/UI/Razor/MainLayout.razor b/LM-Kit-Maestro/UI/Razor/MainLayout.razor
index 53a4e95..4d5c0e6 100644
--- a/LM-Kit-Maestro/UI/Razor/MainLayout.razor
+++ b/LM-Kit-Maestro/UI/Razor/MainLayout.razor
@@ -1,3 +1,3 @@
 @inherits LayoutComponentBase
 
-@Body
\ No newline at end of file
+    @Body
diff --git a/LM-Kit-Maestro/UI/Razor/MainLayout.razor.css b/LM-Kit-Maestro/UI/Razor/MainLayout.razor.css
index 53213f4..cb99934 100644
--- a/LM-Kit-Maestro/UI/Razor/MainLayout.razor.css
+++ b/LM-Kit-Maestro/UI/Razor/MainLayout.razor.css
@@ -1,4 +1,4 @@
-.page {
+/*.page {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -73,3 +73,4 @@ main {
         padding-right: 1.5rem !important;
     }
 }
+*/
\ No newline at end of file
diff --git a/LM-Kit-Maestro/wwwroot/index.html b/LM-Kit-Maestro/wwwroot/index.html
index 7ee3f4f..f5ae8be 100644
--- a/LM-Kit-Maestro/wwwroot/index.html
+++ b/LM-Kit-Maestro/wwwroot/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>Maestro</title>
     <base href="/" />
-    <link rel="stylesheet" href="css/bootstrap.min.css" />
+    <link rel="stylesheet" href="Maestro.styles.css" />
     <link rel="stylesheet" href="css/lmkitmaestro.css" />
     <link rel="stylesheet" href="css/font-awesome.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />