Update blazor architecture
This commit is contained in:
@@ -1,11 +1,13 @@
|
|||||||
<Router AppAssembly="@typeof(App).Assembly">
|
@using GameIdeas.BlazorApp.Layouts
|
||||||
|
|
||||||
|
<Router AppAssembly="@typeof(App).Assembly">
|
||||||
<Found Context="routeData">
|
<Found Context="routeData">
|
||||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(GamesBase)" />
|
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||||
</Found>
|
</Found>
|
||||||
<NotFound>
|
<NotFound>
|
||||||
<PageTitle>Not found</PageTitle>
|
<PageTitle>Not found</PageTitle>
|
||||||
<LayoutView Layout="@typeof(GamesBase)">
|
<LayoutView Layout="@typeof(MainLayout)">
|
||||||
<p role="alert">Sorry, there's nothing at this address.</p>
|
<p role="alert">Sorry, there's nothing at this address.</p>
|
||||||
</LayoutView>
|
</LayoutView>
|
||||||
</NotFound>
|
</NotFound>
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
@using GameIdeas.BlazorApp.Shared.Components
|
||||||
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
@if (IsLoading) {
|
||||||
|
<Loader />
|
||||||
|
}
|
||||||
|
|
||||||
|
@Body
|
||||||
|
|
||||||
|
<span class="orb red"></span>
|
||||||
|
<span class="orb blue"></span>
|
||||||
|
<span class="orb green"></span>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
|
||||||
|
using System.Net.Http.Json;
|
||||||
|
using GameIdeas.Resources;
|
||||||
|
|
||||||
|
namespace GameIdeas.BlazorApp.Layouts
|
||||||
|
{
|
||||||
|
public partial class MainLayout
|
||||||
|
{
|
||||||
|
public bool IsLoading { get; set; } = true;
|
||||||
|
|
||||||
|
protected override void OnInitialized()
|
||||||
|
{
|
||||||
|
IsLoading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
.page {
|
||||||
|
background: var(--background);
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.orb {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
position: absolute;
|
||||||
|
width: 80vh;
|
||||||
|
height: 80vh;
|
||||||
|
top: -20vh;
|
||||||
|
background: #315941;
|
||||||
|
filter: blur(30vh);
|
||||||
|
z-index: -999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
position: absolute;
|
||||||
|
width: 80vw;
|
||||||
|
height: 80vw;
|
||||||
|
left: 10vw;
|
||||||
|
top: 50vh;
|
||||||
|
background: #3A4156;
|
||||||
|
filter: blur(30vh);
|
||||||
|
z-index: -999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vh;
|
||||||
|
height: 100vh;
|
||||||
|
left: 60vw;
|
||||||
|
top: -30vh;
|
||||||
|
background: #593533;
|
||||||
|
filter: blur(30vh);
|
||||||
|
z-index: -999;
|
||||||
|
}
|
||||||
@@ -1,5 +1,14 @@
|
|||||||
@page "/"
|
@page "/Games"
|
||||||
|
@using GameIdeas.BlazorApp.Layouts
|
||||||
|
@using GameIdeas.BlazorApp.Shared.Components
|
||||||
|
@using GameIdeas.Resources
|
||||||
|
|
||||||
@inherits LayoutComponentBase
|
@layout MainLayout
|
||||||
|
|
||||||
|
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
|
||||||
|
|
||||||
|
<HeaderLayout>
|
||||||
|
<Body>
|
||||||
|
<div class="temp">Prout</div>
|
||||||
|
</Body>
|
||||||
|
</HeaderLayout>
|
||||||
|
|||||||
@@ -1,24 +1,5 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
|
||||||
using System.Net.Http.Json;
|
|
||||||
using GameIdeas.Resources;
|
|
||||||
|
|
||||||
namespace GameIdeas.BlazorApp.Pages.Games;
|
namespace GameIdeas.BlazorApp.Pages.Games;
|
||||||
|
|
||||||
public partial class GamesBase (
|
public partial class GamesBase ()
|
||||||
IHttpClientFactory HttpClientFactory,
|
|
||||||
TranslationService TranslationService,
|
|
||||||
Translations Translations) : LayoutComponentBase
|
|
||||||
{
|
{
|
||||||
protected override async Task OnInitializedAsync()
|
|
||||||
{
|
|
||||||
var client = HttpClientFactory.CreateClient("GameIdeas.WebAPI");
|
|
||||||
var response = await client.GetAsync("api/Translations");
|
|
||||||
var dictionary = await response.Content.ReadFromJsonAsync<Dictionary<string, string>>();
|
|
||||||
if (dictionary != null)
|
|
||||||
{
|
|
||||||
TranslationService.Initialize(dictionary);
|
|
||||||
ResourcesKey.Initialize(Translations);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
using System.Net.Http.Json;
|
||||||
using GameIdeas.BlazorApp;
|
using GameIdeas.BlazorApp;
|
||||||
using GameIdeas.Resources;
|
using GameIdeas.Resources;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
@@ -23,4 +24,17 @@ builder.Services.AddHttpClient(
|
|||||||
builder.Services.AddSingleton<TranslationService>();
|
builder.Services.AddSingleton<TranslationService>();
|
||||||
builder.Services.AddSingleton<Translations>();
|
builder.Services.AddSingleton<Translations>();
|
||||||
|
|
||||||
await builder.Build().RunAsync();
|
var app = builder.Build();
|
||||||
|
|
||||||
|
var client = app.Services.GetService<IHttpClientFactory>()?.CreateClient("GameIdeas.WebAPI") ??
|
||||||
|
throw new Exception("Http client not found");
|
||||||
|
var response = await client.GetAsync("api/Translations");
|
||||||
|
var dictionary = await response.Content.ReadFromJsonAsync<Dictionary<string, string>>();
|
||||||
|
|
||||||
|
if (dictionary != null)
|
||||||
|
{
|
||||||
|
app.Services.GetService<TranslationService>()!.Initialize(dictionary);
|
||||||
|
ResourcesKey.Initialize(app.Services.GetService<Translations>()!);
|
||||||
|
}
|
||||||
|
|
||||||
|
await app.RunAsync();
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
@using GameIdeas.Resources
|
|
||||||
@inherits ComponentBase
|
|
||||||
|
|
||||||
<div class="header-tab">
|
|
||||||
<div class="header-icon" @onclick="HandleIconClicked">
|
|
||||||
<img src="icon.png" alt="Game Ideas">
|
|
||||||
</div>
|
|
||||||
<div class="header-body">
|
|
||||||
@Body
|
|
||||||
</div>
|
|
||||||
<div class="account-container">
|
|
||||||
<div class="add-container">
|
|
||||||
<div class="manual-add button">
|
|
||||||
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
|
|
||||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="more-add button">
|
|
||||||
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
|
|
||||||
<path d="M1 3H23L12 22" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="dropdown-more-add">
|
|
||||||
<div class="drowdown-more-element">
|
|
||||||
@ResourcesKey.ManualAdd
|
|
||||||
</div>
|
|
||||||
<div class="drowdown-more-element">
|
|
||||||
@ResourcesKey.AutoAdd
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="account-icon">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
|
||||||
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -1,257 +0,0 @@
|
|||||||
.header-tab {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
padding: 0px 10px;
|
|
||||||
height: 40px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4px;
|
|
||||||
width: 40%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-body {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-icon {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-icon {
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-container {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.manual-add {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-add {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-more-add {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.drowdown-more-element {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Frame */
|
|
||||||
|
|
||||||
/* Auto layout */
|
|
||||||
|
|
||||||
padding: 0px;
|
|
||||||
gap: 40px;
|
|
||||||
|
|
||||||
width: 136px;
|
|
||||||
height: 40px;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 2;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Frame 9 */
|
|
||||||
width: 56px;
|
|
||||||
height: 28px;
|
|
||||||
/* Violet */
|
|
||||||
background: #A380D1;
|
|
||||||
border-radius: 4px;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Frame 55 */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: 0px;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
width: 132px;
|
|
||||||
height: 56px;
|
|
||||||
left: 0px;
|
|
||||||
top: 28px;
|
|
||||||
/* Violet */
|
|
||||||
background: #A380D1;
|
|
||||||
box-shadow:
|
|
||||||
border-radius: 4px;
|
|
||||||
/* Frame 56 */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: 4px;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
width: 132px;
|
|
||||||
height: 56px;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Ajout manuel */
|
|
||||||
width: 89px;
|
|
||||||
height: 19px;
|
|
||||||
|
|
||||||
font-family: 'Noto Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 19px;
|
|
||||||
/* identical to box height */
|
|
||||||
color: #FFFFFF;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Ajout automatique */
|
|
||||||
width: 124px;
|
|
||||||
height: 19px;
|
|
||||||
|
|
||||||
font-family: 'Noto Sans';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 19px;
|
|
||||||
/* identical to box height */
|
|
||||||
color: #FFFFFF;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 1;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Frame */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
/* Frame 10 */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Frame */
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Vector */
|
|
||||||
position: absolute;
|
|
||||||
left: 20.83%;
|
|
||||||
right: 20.83%;
|
|
||||||
top: 20.83%;
|
|
||||||
bottom: 20.83%;
|
|
||||||
/* White */
|
|
||||||
background: #FFFFFF;
|
|
||||||
/* Line 5 */
|
|
||||||
position: absolute;
|
|
||||||
width: 28px;
|
|
||||||
height: 0px;
|
|
||||||
left: 28px;
|
|
||||||
top: 0px;
|
|
||||||
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
/* Frame */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
left: 28px;
|
|
||||||
top: 0px;
|
|
||||||
/* Frame 10 */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Polygon 11 */
|
|
||||||
width: 16px;
|
|
||||||
height: 10px;
|
|
||||||
/* White */
|
|
||||||
background: #FFFFFF;
|
|
||||||
transform: rotate(-180deg);
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
align-self: stretch;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Icon account */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4px;
|
|
||||||
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 1;
|
|
||||||
flex-grow: 0;
|
|
||||||
/* Vector */
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
/* Light black */
|
|
||||||
background: #5C5C5E;
|
|
||||||
/* Inside auto layout */
|
|
||||||
flex: none;
|
|
||||||
order: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
@using GameIdeas.Resources
|
||||||
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
|
<div class="header-tab">
|
||||||
|
<div class="icon-container" @onclick="HandleIconClicked">
|
||||||
|
<img src="icon.png" alt="Game Ideas">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@Body
|
||||||
|
|
||||||
|
<div class="account-add-container">
|
||||||
|
<div class="add-container">
|
||||||
|
<div class="add-buttons">
|
||||||
|
<div class="first-button button">
|
||||||
|
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
|
||||||
|
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
|
||||||
|
<path d="M1 3H23L12 22" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dropdown-more-add">
|
||||||
|
<div class="drowdown-more-element">
|
||||||
|
@ResourcesKey.ManualAdd
|
||||||
|
</div>
|
||||||
|
<div class="drowdown-more-element">
|
||||||
|
@ResourcesKey.AutoAdd
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="icon-container">
|
||||||
|
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||||
|
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -2,10 +2,8 @@ using Microsoft.AspNetCore.Components;
|
|||||||
|
|
||||||
namespace GameIdeas.BlazorApp.Shared.Components;
|
namespace GameIdeas.BlazorApp.Shared.Components;
|
||||||
|
|
||||||
public partial class Header
|
public partial class HeaderLayout : LayoutComponentBase
|
||||||
{
|
{
|
||||||
[Parameter] public RenderFragment? Body { get; set; }
|
|
||||||
|
|
||||||
private Task HandleIconClicked()
|
private Task HandleIconClicked()
|
||||||
{
|
{
|
||||||
throw new NotImplementedException();
|
throw new NotImplementedException();
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
.header-tab {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 0px 10px;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-add-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-container {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
background: var(--violet);
|
||||||
|
border-radius: var(--small-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-button {
|
||||||
|
border-right: 1px solid var(--line-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-icon {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-icon {
|
||||||
|
color: var(--light-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-more-add {
|
||||||
|
background: var(--violet);
|
||||||
|
box-shadow: var(--drop-shadow);
|
||||||
|
border-radius: var(--small-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drowdown-more-element {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<div class="overlay"> <div class="loader"></div> </div>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--semi-black);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
border: 8px solid var(--white);
|
||||||
|
border-top: 8px solid var(--violet);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -6,4 +6,3 @@
|
|||||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||||
@using Microsoft.AspNetCore.Components.WebAssembly.Http
|
@using Microsoft.AspNetCore.Components.WebAssembly.Http
|
||||||
@using Microsoft.JSInterop
|
@using Microsoft.JSInterop
|
||||||
@using GameIdeas.BlazorApp.Pages.Games
|
|
||||||
|
|||||||
@@ -10,66 +10,22 @@
|
|||||||
--black: rgba(44, 43, 46, 0.8);
|
--black: rgba(44, 43, 46, 0.8);
|
||||||
--white: #fff;
|
--white: #fff;
|
||||||
--semi-black: rgba(0, 0, 0, 0.5);
|
--semi-black: rgba(0, 0, 0, 0.5);
|
||||||
|
--line-black: rgba(0, 0, 0, 0.2);
|
||||||
--small-radius: 4px;
|
--small-radius: 4px;
|
||||||
--radius: 6px;
|
--radius: 6px;
|
||||||
--drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
|
--drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html {
|
||||||
|
font-family: 'Noto Sans', sans-serif;
|
||||||
|
font-size: 12px
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, .app {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
font-family: 'Noto Sans', sans-serif;
|
|
||||||
font-size: 12rem
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: var(--background);
|
|
||||||
overflow: hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
html::before,
|
|
||||||
body::before,
|
|
||||||
body::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
html::before {
|
|
||||||
/*Green orb*/
|
|
||||||
position: absolute;
|
|
||||||
width: 80vh;
|
|
||||||
height: 80vh;
|
|
||||||
top: -20vh;
|
|
||||||
background: #315941;
|
|
||||||
filter: blur(30vh);
|
|
||||||
z-index: -999;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::before {
|
|
||||||
/*Blue orb*/
|
|
||||||
position: absolute;
|
|
||||||
width: 80vw;
|
|
||||||
height: 80vw;
|
|
||||||
left: 10vw;
|
|
||||||
top: 50vh;
|
|
||||||
background: #3A4156;
|
|
||||||
filter: blur(30vh);
|
|
||||||
z-index: -999;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::after {
|
|
||||||
/*Reb orb*/
|
|
||||||
position: absolute;
|
|
||||||
width: 100vh;
|
|
||||||
height: 100vh;
|
|
||||||
left: 60vw;
|
|
||||||
top: -30vh;
|
|
||||||
background: #593533;
|
|
||||||
filter: blur(30vh);
|
|
||||||
z-index: -999;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1:focus {
|
h1:focus {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Game Ideas</title>
|
<title>Game Ideas</title>
|
||||||
<base href="/" />
|
<base href="/Games" />
|
||||||
<link rel="stylesheet" href="css/app.css" />
|
<link rel="stylesheet" href="css/app.css" />
|
||||||
<link rel="icon" type="image/png" href="icon.png" />
|
<link rel="icon" type="image/png" href="icon.png" />
|
||||||
<link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />
|
<link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />
|
||||||
|
|||||||
Reference in New Issue
Block a user