...dialog

Device/wwwroot/css/app.css

@@ -37,9 +37,7 @@
     --info-hover: #451376;
     --info-border-hover: #210b36;
 
-    --dialog-border-color: black;
+    --dialog-radius: 12px;
-    --dialog-border-width: 2px;
-    --dialog-radius: 6px;
 }
 
 html {

Pages/Dialog/ConfirmationDialogComponent.razor

@@ -2,24 +2,25 @@
 @inject IMyDialogService MyDialogService
 @inject IJSRuntime JsRuntime
 
-
 @inject NavigationManager NavigationManager
 
 @if (MyDialogService.IsVisible)
 {
-    <div class="confirmDialogBackground" onclick="@CloseDialog">
+    <div class="dialogOverlay" onclick="@CloseDialog">
-        <div class="confirmDialogContainer"
+        <div class="dialogContainer dialogConfirm"
              @onclick:preventDefault="true"
              @onclick:stopPropagation="true">
 
-            <div class="confirmDialogHeader">
+            <div class="dialogHeader">
-                @MyDialogService.GetDialogContents().Title
+                <div class="dialogTitle">@MyDialogService.GetDialogContents().Title</div>
+                <button class="dialogCloseBtn" @onclick="CloseDialog">&times;</button>
             </div>
-            <div class="confirmDialogBody">
+
+            <div class="dialogBody">
                 @MyDialogService.GetDialogContents().Message
             </div>
 
-            <div class="confirmDialogFooter">
+            <div class="dialogFooter">
                 <ButtonComponent MyButtonType="MyButtonType.Secondary"
                                  OnClick="MyDialogService.GetDialogContents().OnCancel">
                     Cancel
@@ -33,71 +34,97 @@
     </div>
 
     <style>
-        .pageContents * {
+        .dialogOverlay {
-            filter: blur(2px);
-        }
-
-        .confirmDialogBackground {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
-            background-color: rgba(0, 0, 0, 0.5);
+            background-color: rgba(0, 0, 0, 0.6);
             display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            z-index: 1000;
+            padding-top: 64px;
         }
 
-
+        .dialogContainer {
-        .confirmDialogContainer {
+            background-color: var(--paper);
-            margin-left: auto;
-            margin-right: auto;
-            margin-top: 64px;
-            width: 800px;
-            height: 600px;
-
-            background-color: var(--background);
-            border-width: var(--dialog-border-width);
-            border-style: solid;
-            border-color: var(--dialog-border-color);
             border-radius: var(--dialog-radius);
-
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-            padding: 8px;
-
-
-            box-shadow: 1px 2px 2px black;
-
             display: flex;
             flex-direction: column;
-
+            max-height: calc(100vh - 128px);
+            overflow: hidden;
         }
 
-        .confirmDialogHeader {
+        .dialogConfirm {
-            font-size: 1.4em;
+            width: 480px;
-            padding: 12px;
         }
 
-        .confirmDialogBody {
+        .dialogHeader {
-            padding: 12px;
+            display: flex;
-            flex-grow: 1;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--paper-border);
+            background-color: var(--accent);
+            border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
+            min-height: 56px;
         }
 
-        .confirmDialogFooter {
+        .dialogTitle {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: white;
+        }
+
+        .dialogCloseBtn {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            transition: background 0.15s, color 0.15s;
+        }
+
+        .dialogCloseBtn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            color: white;
+        }
+
+        .dialogBody {
+            padding: 20px;
+            overflow-y: auto;
+            flex: 1;
+            color: var(--text-primary, #ddd);
+            line-height: 1.6;
+        }
+
+        .dialogFooter {
             display: flex;
             gap: 12px;
             justify-content: flex-end;
-            padding: 12px;
+            padding: 16px 20px;
+            border-top: 1px solid var(--paper-border);
+            background-color: var(--background);
+            border-radius: 0 0 var(--dialog-radius) var(--dialog-radius);
         }
-
     </style>
 }
 
-
 @code {
-
     protected override void OnInitialized()
     {
         base.OnInitialized();
-
         MyDialogService.Subscribe(() => InvokeAsync(StateHasChanged));
     }
 
@@ -106,11 +133,8 @@
         MyDialogService.Unsubscribe(() => InvokeAsync(StateHasChanged));
     }
 
-
     public void CloseDialog()
     {
         MyDialogService.Hide();
     }
-
-
 }

Pages/Dialog/EntityDialogComponent.razor

@@ -1,31 +1,30 @@
 @implements IDisposable;
 @inject IEntityDialogService entityDialogService
 
-<div class="dialogBackground" onclick="@CloseDialog">
+<div class="dialogOverlay" onclick="@CloseDialog">
-
+    <div class="dialogContainer entityDialog"
-    <div class="dialogContainer"
          @onclick:preventDefault="true"
          @onclick:stopPropagation="true">
         @if (entity == null)
         {
-            <div>Entity is null</div>
+            <div class="dialogBody">Entity is null</div>
         }
         else
         {
             <div class="dialogHeader">
-                @if (entityDialogService.HasHistory())
+                <div class="dialogHeaderLeft">
-                {
+                    @if (entityDialogService.HasHistory())
-                    <button class="backButton" @onclick="entityDialogService.BackDialog">
+                    {
-                        <div class="backButtonIcon"></div>
+                        <button class="dialogBackBtn" @onclick="entityDialogService.BackDialog" title="Back">
-                    </button>
+                            &#8592;
-                }
+                        </button>
-
+                    }
-                <div class="dialogTitle">
+                    <div class="dialogTitle">@entity.Info().Name</div>
-                    @entity.Info().Name
                 </div>
-
+                <button class="dialogCloseBtn" @onclick="CloseDialog">&times;</button>
             </div>
-            <div class="dialogContent">
+
+            <div class="dialogBody">
                 <CascadingValue Value="@entity">
                     <EntityVanguardAddedComponent/>
                     <EntityInfoComponent/>
@@ -39,105 +38,117 @@
                     <EntityWeaponsComponent/>
                     <EntityAbilitiesComponent/>
                 </CascadingValue>
-
             </div>
-            <div class="dialogFooter"></div>
         }
-
     </div>
-
 </div>
 
 <style>
-
+    .dialogOverlay {
-    .pageContents * {
-        filter: blur(2px);
-    }
-
-
-    .dialogBackground {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgba(0, 0, 0, 0.6);
         display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        z-index: 1000;
+        padding-top: 64px;
     }
 
     .dialogContainer {
-        margin-left: auto;
+        background-color: var(--paper);
-        margin-right: auto;
-        margin-top: 64px;
-        width: 800px;
-        height: 600px;
-
-        background-color: var(--background);
-        border-width: var(--dialog-border-width);
-        border-style: solid;
-        border-color: var(--dialog-border-color);
         border-radius: var(--dialog-radius);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+        display: flex;
+        flex-direction: column;
+        max-height: calc(100vh - 128px);
+        overflow: hidden;
+    }
 
-
+    .entityDialog {
-        box-shadow: 1px 2px 2px black;
+        width: 800px;
-
+        max-width: calc(100% - 32px);
     }
 
     .dialogHeader {
-        width: 100%;
-        background-color: var(--accent);
-        border-top-left-radius: var(--dialog-radius);
-        border-top-right-radius: var(--dialog-radius);
-        border-bottom: 4px solid black;
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--paper-border);
+        background-color: var(--accent);
+        border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
+        min-height: 52px;
+        gap: 8px;
     }
 
-    .backButton {
+    .dialogHeaderLeft {
-        margin-left: 16px;
+        display: flex;
-        padding: 12px;
+        align-items: center;
-
+        gap: 8px;
-        border: 1px solid var(--accent);
+        min-width: 0;
     }
 
-    .backButton:hover {
+    .dialogBackBtn {
-        background-color: var(--primary-hover);
+        background: none;
-        border: 1px solid var(--primary-border-hover);
+        border: none;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 1.4rem;
+        cursor: pointer;
+        padding: 4px 8px;
+        line-height: 1;
+        border-radius: 6px;
+        transition: background 0.15s, color 0.15s;
     }
 
-    .backButtonIcon {
+    .dialogBackBtn:hover {
-        height: 32px;
+        background: rgba(255, 255, 255, 0.15);
-        width: 32px;
+        color: white;
-        border: solid white;
-        border-width: 0 9px 9px 0;
-        transform: rotate(135deg);
     }
 
     .dialogTitle {
-        padding: 16px;
+        font-size: 1.25rem;
-        font-size: 2rem;
+        font-weight: 700;
-        font-weight: bold;
+        color: white;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
-    .dialogContent {
+    .dialogCloseBtn {
-        flex-grow: 1;
+        background: none;
-        padding: 6px;
+        border: none;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 1.5rem;
+        cursor: pointer;
+        padding: 0;
+        line-height: 1;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        transition: background 0.15s, color 0.15s;
+    }
+
+    .dialogCloseBtn:hover {
+        background: rgba(255, 255, 255, 0.15);
+        color: white;
+    }
+
+    .dialogBody {
+        padding: 20px;
         overflow-y: auto;
-        overflow-x: hidden;
+        flex: 1;
-
+        color: var(--text-primary, #ddd);
-        height: 800px;
-    }
-
-    .dialogFooter {
-        width: 100%;
-        height: 6px;
-        background-color: var(--paper);
     }
 </style>
 
 @code {
-
     EntityModel entity = default!;
 
     private int refresh;
@@ -146,7 +157,6 @@
     {
         base.OnInitialized();
         entity = EntityData.Get()[entityDialogService.GetEntityId() ?? string.Empty];
-
         entityDialogService.Subscribe(OnUpdate);
     }
 
@@ -159,7 +169,6 @@
     {
         entity = EntityData.Get()[entityDialogService.GetEntityId() ?? string.Empty];
         refresh++;
-
         StateHasChanged();
     }
 
@@ -167,5 +176,4 @@
     {
         entityDialogService.CloseDialog();
     }
-
 }

Pages/Dialog/GlossaryDialogComponent.razor

@@ -2,31 +2,34 @@
 @inject IGlossaryService glossaryService
 @inject IGlossaryDialogService glossaryDialogService
 
-
+<div class="dialogOverlay" onclick="@CloseDialog">
-<div class="dialogBackground" onclick="@CloseDialog">
     <div class="dialogContainer glossaryDialog"
          @onclick:preventDefault="true"
          @onclick:stopPropagation="true">
 
         @if (term == null)
         {
-            <div>Term is null</div>
+            <div class="dialogBody">Term is null</div>
         }
         else
         {
             <div class="dialogHeader">
-                @if (glossaryDialogService.HasHistory())
+                <div class="dialogHeaderLeft">
-                {
+                    @if (glossaryDialogService.HasHistory())
-                    <button class="backButton" @onclick="glossaryDialogService.BackDialog">
+                    {
-                        <div class="backButtonIcon"></div>
+                        <button class="dialogBackBtn" @onclick="glossaryDialogService.BackDialog" title="Back">
-                    </button>
+                            &#8592;
-                }
+                        </button>
-                <div class="dialogTitle">
+                    }
-                    @term.Term
+                    <div class="dialogTitle">@term.Term</div>
+                </div>
+                <div class="dialogHeaderRight">
+                    <span class="glossaryCategory">@term.Category</span>
+                    <button class="dialogCloseBtn" @onclick="CloseDialog">&times;</button>
                 </div>
-                <div class="glossaryDialogCategory">@term.Category</div>
             </div>
-            <div class="dialogContent">
+
+            <div class="dialogBody">
                 <div class="glossaryDefinition">@((MarkupString)RenderMarkdown(term.LongDefinition))</div>
 
                 @if (term.RelatedEntityIds.Count > 0)
@@ -55,112 +58,131 @@
                     </div>
                 }
             </div>
-            <div class="dialogFooter"></div>
         }
     </div>
-
 </div>
 
 <style>
-
+    .dialogOverlay {
-
-    .pageContents * {
-        filter: blur(2px);
-    }
-
-
-    .dialogBackground {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgba(0, 0, 0, 0.6);
         display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        z-index: 1000;
+        padding-top: 64px;
     }
 
     .dialogContainer {
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 64px;
-        width: 800px;
-        height: 600px;
-
-        background-color: var(--background);
-        border-width: var(--dialog-border-width);
-        border-style: solid;
-        border-color: var(--dialog-border-color);
-        border-radius: var(--dialog-radius);
-
-
-        box-shadow: 1px 2px 2px black;
-
-    }
-
-    .dialogHeader {
-        width: 100%;
-        background-color: var(--accent);
-        border-top-left-radius: var(--dialog-radius);
-        border-top-right-radius: var(--dialog-radius);
-        border-bottom: 4px solid black;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-    }
-
-    .backButton {
-        margin-left: 16px;
-        padding: 12px;
-
-        border: 1px solid var(--accent);
-    }
-
-    .backButton:hover {
-        background-color: var(--primary-hover);
-        border: 1px solid var(--primary-border-hover);
-    }
-
-    .backButtonIcon {
-        height: 32px;
-        width: 32px;
-        border: solid white;
-        border-width: 0 9px 9px 0;
-        transform: rotate(135deg);
-    }
-
-    .dialogTitle {
-        padding: 16px;
-        font-size: 2rem;
-        font-weight: bold;
-    }
-
-    .dialogContent {
-        flex-grow: 1;
-        padding: 6px;
-        overflow-y: auto;
-        overflow-x: hidden;
-
-        height: 800px;
-    }
-
-    .dialogFooter {
-        width: 100%;
-        height: 6px;
         background-color: var(--paper);
+        border-radius: var(--dialog-radius);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+        display: flex;
+        flex-direction: column;
+        max-height: calc(100vh - 128px);
+        overflow: hidden;
     }
 
     .glossaryDialog {
         max-width: 600px;
+        width: calc(100% - 32px);
     }
 
-    .glossaryDialogCategory {
+    .dialogHeader {
-        font-size: 0.8rem;
+        display: flex;
-        opacity: 0.7;
+        align-items: center;
-        margin-left: 12px;
+        justify-content: space-between;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--paper-border);
+        background-color: var(--accent);
+        border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
+        min-height: 52px;
+        gap: 8px;
+    }
+
+    .dialogHeaderLeft {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+    }
+
+    .dialogHeaderRight {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+    }
+
+    .dialogBackBtn {
+        background: none;
+        border: none;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 1.4rem;
+        cursor: pointer;
+        padding: 4px 8px;
+        line-height: 1;
+        border-radius: 6px;
+        transition: background 0.15s, color 0.15s;
+    }
+
+    .dialogBackBtn:hover {
+        background: rgba(255, 255, 255, 0.15);
+        color: white;
+    }
+
+    .dialogTitle {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: white;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .dialogCloseBtn {
+        background: none;
+        border: none;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 1.5rem;
+        cursor: pointer;
+        padding: 0;
+        line-height: 1;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        transition: background 0.15s, color 0.15s;
+    }
+
+    .dialogCloseBtn:hover {
+        background: rgba(255, 255, 255, 0.15);
+        color: white;
+    }
+
+    .glossaryCategory {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.6);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-weight: 600;
+    }
+
+    .dialogBody {
+        padding: 20px;
+        overflow-y: auto;
+        flex: 1;
+        color: var(--text-primary, #ddd);
     }
 
     .glossaryDefinition {
-        line-height: 1.6;
+        line-height: 1.7;
     }
 
     .glossaryDefinition p {
@@ -168,15 +190,16 @@
     }
 
     .glossaryRelatedSection {
-        margin-top: 20px;
+        margin-top: 24px;
         padding-top: 16px;
         border-top: 1px solid var(--info-secondary-border);
     }
 
     .glossaryRelatedTitle {
-        font-weight: 800;
+        font-weight: 700;
-        font-size: 1rem;
+        font-size: 0.95rem;
         margin-bottom: 8px;
+        color: var(--text-primary, #ddd);
     }
 
     .glossaryRelatedList {
@@ -222,5 +245,4 @@
     {
         return Markdown.ToHtml(text);
     }
-
 }

Pages/Dialog/SearchDialogComponent.razor

@@ -2,139 +2,196 @@
 @inject ISearchService searchService
 @inject IJSRuntime jsRuntime
 
-
 @inject NavigationManager navigationManager
 
 @if (searchService.IsLoaded() && searchService.IsVisible)
 {
-    <div id="searchBackground" class="searchBackground" onclick="@CloseDialog">
+    <div class="dialogOverlay" onclick="@CloseDialog">
-        <div class="searchContainer"
+        <div class="dialogContainer searchDialog"
              @onclick:preventDefault="true"
              @onclick:stopPropagation="true">
 
-            <FormLayoutComponent>
+            <div class="dialogHeader">
-                <FormTextComponent OnFocus="OnFocus" Id="searchInput" Placeholder="Search..."
+                <div class="dialogTitle">Search</div>
-                                   OnInput="SearchChanged"></FormTextComponent>
+                <button class="dialogCloseBtn" @onclick="CloseDialog">&times;</button>
-            </FormLayoutComponent>
-
-            <div class="searchBox">
-                @if (SearchText.Length > 0)
-                {
-                    foreach (var searchSection in searchService.Searches)
-                    {
-                        var searchPoints = searchSection.Value.FindAll(x => x.Title.ToLower().Contains(SearchText.ToLower()));
-
-                        @if (searchPoints.Count > 0)
-                        {
-                            <div>
-                                <div class="searchSectionTitle">
-                                    @searchSection.Key
-                                </div>
-                                <div class="searchContents">
-                                    @foreach (var searchPoint in searchPoints)
-                                    {
-                                        <div>
-                                            <button class="searchLink @searchPoint.PointType.ToLower()"
-                                                    label="@searchPoint.Title"
-                                                    @onclick="() => OnSearch(searchPoint)">
-                                                @searchPoint.Title
-                                            </button>
-                                            @if (!searchPoint.Summary.Trim().Equals(""))
-                                            {
-                                                <i> - @searchPoint.Summary</i>
-                                            }
-                                        </div>
-                                    }
-                                </div>
-                            </div>
-                        }
-                    }
-                }
             </div>
 
+            <div class="dialogBody">
+                <div class="searchInputWrapper">
+                    <FormTextComponent OnFocus="OnFocus" Id="searchInput" Placeholder="Type to search..."
+                                       OnInput="SearchChanged"></FormTextComponent>
+                </div>
+
+                <div class="searchResults">
+                    @if (SearchText.Length > 0)
+                    {
+                        foreach (var searchSection in searchService.Searches)
+                        {
+                            var searchPoints = searchSection.Value.FindAll(x => x.Title.ToLower().Contains(SearchText.ToLower()));
+
+                            if (searchPoints.Count > 0)
+                            {
+                                <div class="searchSection">
+                                    <div class="searchSectionTitle">@searchSection.Key</div>
+                                    <div class="searchSectionItems">
+                                        @foreach (var searchPoint in searchPoints)
+                                        {
+                                            <button class="searchItem @searchPoint.PointType.ToLower()"
+                                                    @onclick="() => OnSearch(searchPoint)">
+                                                <span class="searchItemTitle">@searchPoint.Title</span>
+                                                @if (!string.IsNullOrWhiteSpace(searchPoint.Summary))
+                                                {
+                                                    <span class="searchItemSummary"> - @searchPoint.Summary</span>
+                                                }
+                                            </button>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                        }
+                    }
+                </div>
+            </div>
         </div>
     </div>
 
     <style>
-        .pageContents * {
+        .dialogOverlay {
-            filter: blur(2px);
-        }
-
-        .searchBackground {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
-            background-color: rgba(0, 0, 0, 0.5);
+            background-color: rgba(0, 0, 0, 0.6);
             display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            z-index: 1000;
+            padding-top: 64px;
         }
 
-        .searchBox {
+        .dialogContainer {
-            padding: 12px;
+            background-color: var(--paper);
-            overflow-y: scroll;
+            border-radius: var(--dialog-radius);
-            overflow-x: hidden;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-            height: 530px;
-            border: 1px solid black;
-            border-radius: 2px;
-        }
-
-        .searchContents {
             display: flex;
             flex-direction: column;
-            gap: 6px;
+            max-height: calc(100vh - 128px);
-            align-items: flex-start;
+            overflow: hidden;
-
-            padding: 12px;
         }
 
+        .searchDialog {
+            width: 600px;
+            max-width: calc(100% - 32px);
+        }
+
+        .dialogHeader {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 20px;
+            border-bottom: 1px solid var(--paper-border);
+            background-color: var(--accent);
+            border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
+            min-height: 52px;
+        }
+
+        .dialogTitle {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: white;
+        }
+
+        .dialogCloseBtn {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            transition: background 0.15s, color 0.15s;
+        }
+
+        .dialogCloseBtn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            color: white;
+        }
+
+        .dialogBody {
+            padding: 20px;
+            overflow-y: auto;
+            flex: 1;
+        }
+
+        .searchInputWrapper {
+            margin-bottom: 16px;
+        }
+
+        .searchResults {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .searchSection {
+            display: flex;
+            flex-direction: column;
+        }
 
         .searchSectionTitle {
-            font-weight: bolder;
+            font-weight: 700;
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--info-secondary-border);
+            margin-bottom: 8px;
+            padding-bottom: 4px;
+            border-bottom: 1px solid var(--paper-border);
         }
 
-
+        .searchSectionItems {
-        .searchContainer {
+            display: flex;
-            margin-left: auto;
+            flex-direction: column;
-            margin-right: auto;
+            gap: 4px;
-            margin-top: 64px;
-            width: 800px;
-            height: 600px;
-
-            background-color: var(--background);
-            border-width: var(--dialog-border-width);
-            border-style: solid;
-            border-color: var(--dialog-border-color);
-            border-radius: var(--dialog-radius);
-
-            padding: 8px;
-
-
-            box-shadow: 1px 2px 2px black;
-
         }
 
-        .searchLink {
+        .searchItem {
-            text-decoration: underline;
+            display: block;
+            width: 100%;
+            text-align: left;
+            background: none;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 12px;
+            color: var(--text-primary, #ddd);
+            cursor: pointer;
+            transition: background 0.15s;
         }
 
-        @@media only screen and (max-width: 1025px) {
+        .searchItem:hover {
-            .searchContainer {
+            background: var(--paper-hover);
-                height: 300px;
+            color: white;
-
-            }
-
-            .searchBox {
-                height: 230px;
-            }
         }
 
+        .searchItemTitle {
+            font-weight: 600;
+        }
+
+        .searchItemSummary {
+            color: var(--info-secondary-border);
+            font-size: 0.9rem;
+        }
     </style>
 }
 
-
 @code {
-
     private string SearchText { get; set; } = "";
 
     protected override void OnInitialized()
@@ -146,7 +203,6 @@
         timer.Enabled = false;
     }
 
-
     private void FocusTimer(object? sender, ElapsedEventArgs e)
     {
         jsRuntime.InvokeVoidAsync("SetFocusToElement", "searchInput");
@@ -171,7 +227,6 @@
         timer.Elapsed -= FocusTimer;
     }
 
-
     public void CloseDialog()
     {
         searchService.Hide();
@@ -205,5 +260,4 @@
     {
         timer.Enabled = false;
     }
-
 }

Web/App.razor

@@ -80,9 +80,7 @@
         --info: #451376;
         --info-border: #210b36;
 
-        --dialog-border-color: black;
+        --dialog-radius: 12px;
-        --dialog-border-width: 2px;
-        --dialog-radius: 6px;
 
         --info-secondary: #1e1e2e;
         --info-secondary-border: #3a3a5c;

Web/wwwroot/css/app.css

@@ -37,9 +37,7 @@
     --info-hover: #451376;
     --info-border-hover: #210b36;
 
-    --dialog-border-color: black;
+    --dialog-radius: 12px;
-    --dialog-border-width: 2px;
-    --dialog-radius: 6px;
 }
 
 html {