JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

...dialog

Browse Source
This commit is contained in:
6d486f49
2026-06-04 14:08:20 -04:00
parent 814f3a3858
commit 3b165de7a9
7 changed files with 436 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Device/wwwroot/css/app.css
+1 -3
View File
@@ -37,9 +37,7 @@
--info-hover: #451376; --info-hover: #451376;
--info-border-hover: #210b36; --info-border-hover: #210b36;
--dialog-border-color: black; --dialog-radius: 12px;
--dialog-border-width: 2px;
--dialog-radius: 6px;
} }
html { html {
Pages/Dialog/ConfirmationDialogComponent.razor
+71 -47
View File
@@ -2,24 +2,25 @@
@inject IMyDialogService MyDialogService @inject IMyDialogService MyDialogService
@inject IJSRuntime JsRuntime @inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@if (MyDialogService.IsVisible) @if (MyDialogService.IsVisible)
{ {
<div class="confirmDialogBackground" onclick="@CloseDialog"> <div class="dialogOverlay" onclick="@CloseDialog">
<div class="confirmDialogContainer" <div class="dialogContainer dialogConfirm"
@onclick:preventDefault="true" @onclick:preventDefault="true"
@onclick:stopPropagation="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>
<div class="confirmDialogBody">
<div class="dialogBody">
@MyDialogService.GetDialogContents().Message @MyDialogService.GetDialogContents().Message
</div> </div>
<div class="confirmDialogFooter"> <div class="dialogFooter">
<ButtonComponent MyButtonType="MyButtonType.Secondary" <ButtonComponent MyButtonType="MyButtonType.Secondary"
OnClick="MyDialogService.GetDialogContents().OnCancel"> OnClick="MyDialogService.GetDialogContents().OnCancel">
Cancel Cancel
@@ -33,71 +34,97 @@
</div> </div>
<style> <style>
.pageContents * { .dialogOverlay {
filter: blur(2px);
}
.confirmDialogBackground {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.6);
display: flex; 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); 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; display: flex;
flex-direction: column; 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; display: flex;
gap: 12px; gap: 12px;
justify-content: flex-end; 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> </style>
} }
@code { @code {
protected override void OnInitialized() protected override void OnInitialized()
{ {
base.OnInitialized(); base.OnInitialized();
MyDialogService.Subscribe(() => InvokeAsync(StateHasChanged)); MyDialogService.Subscribe(() => InvokeAsync(StateHasChanged));
} }
@@ -106,11 +133,8 @@
MyDialogService.Unsubscribe(() => InvokeAsync(StateHasChanged)); MyDialogService.Unsubscribe(() => InvokeAsync(StateHasChanged));
} }
public void CloseDialog() public void CloseDialog()
{ {
MyDialogService.Hide(); MyDialogService.Hide();
} }
} }
Pages/Dialog/EntityDialogComponent.razor
+83 -75
View File
@@ -1,31 +1,30 @@
@implements IDisposable; @implements IDisposable;
@inject IEntityDialogService entityDialogService @inject IEntityDialogService entityDialogService
<div class="dialogBackground" onclick="@CloseDialog"> <div class="dialogOverlay" onclick="@CloseDialog">
<div class="dialogContainer entityDialog"
<div class="dialogContainer"
@onclick:preventDefault="true" @onclick:preventDefault="true"
@onclick:stopPropagation="true"> @onclick:stopPropagation="true">
@if (entity == null) @if (entity == null)
{ {
<div>Entity is null</div> <div class="dialogBody">Entity is null</div>
} }
else else
{ {
<div class="dialogHeader"> <div class="dialogHeader">
<div class="dialogHeaderLeft">
@if (entityDialogService.HasHistory()) @if (entityDialogService.HasHistory())
{ {
<button class="backButton" @onclick="entityDialogService.BackDialog"> <button class="dialogBackBtn" @onclick="entityDialogService.BackDialog" title="Back">
<div class="backButtonIcon"></div> &#8592;
</button> </button>
} }
<div class="dialogTitle">@entity.Info().Name</div>
<div class="dialogTitle"> </div>
@entity.Info().Name <button class="dialogCloseBtn" @onclick="CloseDialog">&times;</button>
</div> </div>
</div> <div class="dialogBody">
<div class="dialogContent">
<CascadingValue Value="@entity"> <CascadingValue Value="@entity">
<EntityVanguardAddedComponent/> <EntityVanguardAddedComponent/>
<EntityInfoComponent/> <EntityInfoComponent/>
@@ -39,105 +38,117 @@
<EntityWeaponsComponent/> <EntityWeaponsComponent/>
<EntityAbilitiesComponent/> <EntityAbilitiesComponent/>
</CascadingValue> </CascadingValue>
</div> </div>
<div class="dialogFooter"></div>
} }
</div> </div>
</div> </div>
<style> <style>
.dialogOverlay {
.pageContents * {
filter: blur(2px);
}
.dialogBackground {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.6);
display: flex; display: flex;
align-items: flex-start;
justify-content: center;
z-index: 1000;
padding-top: 64px;
} }
.dialogContainer { .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); 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 { .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; display: flex;
align-items: center; 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 { .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-y: auto;
overflow-x: hidden; flex: 1;
color: var(--text-primary, #ddd);
height: 800px;
}
.dialogFooter {
width: 100%;
height: 6px;
background-color: var(--paper);
} }
</style> </style>
@code { @code {
EntityModel entity = default!; EntityModel entity = default!;
private int refresh; private int refresh;
@@ -146,7 +157,6 @@
{ {
base.OnInitialized(); base.OnInitialized();
entity = EntityData.Get()[entityDialogService.GetEntityId() ?? string.Empty]; entity = EntityData.Get()[entityDialogService.GetEntityId() ?? string.Empty];
entityDialogService.Subscribe(OnUpdate); entityDialogService.Subscribe(OnUpdate);
} }
@@ -159,7 +169,6 @@
{ {
entity = EntityData.Get()[entityDialogService.GetEntityId() ?? string.Empty]; entity = EntityData.Get()[entityDialogService.GetEntityId() ?? string.Empty];
refresh++; refresh++;
StateHasChanged(); StateHasChanged();
} }
@@ -167,5 +176,4 @@
{ {
entityDialogService.CloseDialog(); entityDialogService.CloseDialog();
} }
} }
Pages/Dialog/GlossaryDialogComponent.razor
+117 -95
View File
@@ -2,31 +2,34 @@
@inject IGlossaryService glossaryService @inject IGlossaryService glossaryService
@inject IGlossaryDialogService glossaryDialogService @inject IGlossaryDialogService glossaryDialogService
<div class="dialogOverlay" onclick="@CloseDialog">
<div class="dialogBackground" onclick="@CloseDialog">
<div class="dialogContainer glossaryDialog" <div class="dialogContainer glossaryDialog"
@onclick:preventDefault="true" @onclick:preventDefault="true"
@onclick:stopPropagation="true"> @onclick:stopPropagation="true">
@if (term == null) @if (term == null)
{ {
<div>Term is null</div> <div class="dialogBody">Term is null</div>
} }
else else
{ {
<div class="dialogHeader"> <div class="dialogHeader">
<div class="dialogHeaderLeft">
@if (glossaryDialogService.HasHistory()) @if (glossaryDialogService.HasHistory())
{ {
<button class="backButton" @onclick="glossaryDialogService.BackDialog"> <button class="dialogBackBtn" @onclick="glossaryDialogService.BackDialog" title="Back">
<div class="backButtonIcon"></div> &#8592;
</button> </button>
} }
<div class="dialogTitle"> <div class="dialogTitle">@term.Term</div>
@term.Term
</div> </div>
<div class="glossaryDialogCategory">@term.Category</div> <div class="dialogHeaderRight">
<span class="glossaryCategory">@term.Category</span>
<button class="dialogCloseBtn" @onclick="CloseDialog">&times;</button>
</div> </div>
<div class="dialogContent"> </div>
<div class="dialogBody">
<div class="glossaryDefinition">@((MarkupString)RenderMarkdown(term.LongDefinition))</div> <div class="glossaryDefinition">@((MarkupString)RenderMarkdown(term.LongDefinition))</div>
@if (term.RelatedEntityIds.Count > 0) @if (term.RelatedEntityIds.Count > 0)
@@ -55,112 +58,131 @@
</div> </div>
} }
</div> </div>
<div class="dialogFooter"></div>
} }
</div> </div>
</div> </div>
<style> <style>
.dialogOverlay {
.pageContents * {
filter: blur(2px);
}
.dialogBackground {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.6);
display: flex; display: flex;
align-items: flex-start;
justify-content: center;
z-index: 1000;
padding-top: 64px;
} }
.dialogContainer { .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); 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 { .glossaryDialog {
max-width: 600px; 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 { .glossaryDefinition {
line-height: 1.6; line-height: 1.7;
} }
.glossaryDefinition p { .glossaryDefinition p {
@@ -168,15 +190,16 @@
} }
.glossaryRelatedSection { .glossaryRelatedSection {
margin-top: 20px; margin-top: 24px;
padding-top: 16px; padding-top: 16px;
border-top: 1px solid var(--info-secondary-border); border-top: 1px solid var(--info-secondary-border);
} }
.glossaryRelatedTitle { .glossaryRelatedTitle {
font-weight: 800; font-weight: 700;
font-size: 1rem; font-size: 0.95rem;
margin-bottom: 8px; margin-bottom: 8px;
color: var(--text-primary, #ddd);
} }
.glossaryRelatedList { .glossaryRelatedList {
@@ -222,5 +245,4 @@
{ {
return Markdown.ToHtml(text); return Markdown.ToHtml(text);
} }
} }
Pages/Dialog/SearchDialogComponent.razor
+131 -77
View File
@@ -2,48 +2,48 @@
@inject ISearchService searchService @inject ISearchService searchService
@inject IJSRuntime jsRuntime @inject IJSRuntime jsRuntime
@inject NavigationManager navigationManager @inject NavigationManager navigationManager
@if (searchService.IsLoaded() && searchService.IsVisible) @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:preventDefault="true"
@onclick:stopPropagation="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>
<div class="searchBox"> <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) @if (SearchText.Length > 0)
{ {
foreach (var searchSection in searchService.Searches) foreach (var searchSection in searchService.Searches)
{ {
var searchPoints = searchSection.Value.FindAll(x => x.Title.ToLower().Contains(SearchText.ToLower())); var searchPoints = searchSection.Value.FindAll(x => x.Title.ToLower().Contains(SearchText.ToLower()));
@if (searchPoints.Count > 0) if (searchPoints.Count > 0)
{ {
<div> <div class="searchSection">
<div class="searchSectionTitle"> <div class="searchSectionTitle">@searchSection.Key</div>
@searchSection.Key <div class="searchSectionItems">
</div>
<div class="searchContents">
@foreach (var searchPoint in searchPoints) @foreach (var searchPoint in searchPoints)
{ {
<div> <button class="searchItem @searchPoint.PointType.ToLower()"
<button class="searchLink @searchPoint.PointType.ToLower()"
label="@searchPoint.Title"
@onclick="() => OnSearch(searchPoint)"> @onclick="() => OnSearch(searchPoint)">
@searchPoint.Title <span class="searchItemTitle">@searchPoint.Title</span>
</button> @if (!string.IsNullOrWhiteSpace(searchPoint.Summary))
@if (!searchPoint.Summary.Trim().Equals(""))
{ {
<i> - @searchPoint.Summary</i> <span class="searchItemSummary"> - @searchPoint.Summary</span>
} }
</div> </button>
} }
</div> </div>
</div> </div>
@@ -51,90 +51,147 @@
} }
} }
</div> </div>
</div>
</div> </div>
</div> </div>
<style> <style>
.pageContents * { .dialogOverlay {
filter: blur(2px);
}
.searchBackground {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.6);
display: flex; 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; display: flex;
flex-direction: column; 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 { .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 { .searchItemTitle {
height: 230px; font-weight: 600;
}
} }
.searchItemSummary {
color: var(--info-secondary-border);
font-size: 0.9rem;
}
</style> </style>
} }
@code { @code {
private string SearchText { get; set; } = ""; private string SearchText { get; set; } = "";
protected override void OnInitialized() protected override void OnInitialized()
@@ -146,7 +203,6 @@
timer.Enabled = false; timer.Enabled = false;
} }
private void FocusTimer(object? sender, ElapsedEventArgs e) private void FocusTimer(object? sender, ElapsedEventArgs e)
{ {
jsRuntime.InvokeVoidAsync("SetFocusToElement", "searchInput"); jsRuntime.InvokeVoidAsync("SetFocusToElement", "searchInput");
@@ -171,7 +227,6 @@
timer.Elapsed -= FocusTimer; timer.Elapsed -= FocusTimer;
} }
public void CloseDialog() public void CloseDialog()
{ {
searchService.Hide(); searchService.Hide();
@@ -205,5 +260,4 @@
{ {
timer.Enabled = false; timer.Enabled = false;
} }
} }
Web/App.razor
+1 -3
View File
@@ -80,9 +80,7 @@
--info: #451376; --info: #451376;
--info-border: #210b36; --info-border: #210b36;
--dialog-border-color: black; --dialog-radius: 12px;
--dialog-border-width: 2px;
--dialog-radius: 6px;
--info-secondary: #1e1e2e; --info-secondary: #1e1e2e;
--info-secondary-border: #3a3a5c; --info-secondary-border: #3a3a5c;
Web/wwwroot/css/app.css
+1 -3
View File
@@ -37,9 +37,7 @@
--info-hover: #451376; --info-hover: #451376;
--info-border-hover: #210b36; --info-border-hover: #210b36;
--dialog-border-color: black; --dialog-radius: 12px;
--dialog-border-width: 2px;
--dialog-radius: 6px;
} }
html { html {