Rework style and loading
All checks were successful
Game Ideas build for PR / build_test (pull_request) Successful in 59s
All checks were successful
Game Ideas build for PR / build_test (pull_request) Successful in 59s
This commit is contained in:
@@ -3,10 +3,4 @@
|
||||
|
||||
<div class="page">
|
||||
@Body
|
||||
</div>
|
||||
|
||||
<div class="background">
|
||||
<span class="orb red"></span>
|
||||
<span class="orb blue"></span>
|
||||
<span class="orb green"></span>
|
||||
</div>
|
||||
@@ -2,47 +2,4 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
z-index: var(--index-orb);
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 80vh;
|
||||
height: 80vh;
|
||||
top: -20vh;
|
||||
background: #315941;
|
||||
filter: blur(30vh);
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
left: 10vw;
|
||||
top: 50vh;
|
||||
background: #3A4156;
|
||||
filter: blur(30vh);
|
||||
}
|
||||
|
||||
.red {
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
left: 60vw;
|
||||
top: -40vh;
|
||||
background: #593533;
|
||||
filter: blur(30vh);
|
||||
}
|
||||
|
||||
.background {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: var(--background);
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: var(--index-background);
|
||||
}
|
||||
@@ -96,16 +96,4 @@
|
||||
.tags, .storage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
50% {
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
}
|
||||
100% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
@@ -50,6 +50,6 @@
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(0, 0, 0, 0.2);
|
||||
border-top-color: var(--white);
|
||||
animation: loading 1s linear infinite;
|
||||
animation: spin 1s linear infinite;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
@@ -54,16 +54,3 @@
|
||||
fill: var(--yellow);
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
50% {
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,13 +19,3 @@
|
||||
height: 60px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,8 +22,6 @@
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.2s;
|
||||
}
|
||||
|
||||
.line {
|
||||
|
||||
@@ -81,65 +81,21 @@ html, body, #app {
|
||||
content: "An error has occurred."
|
||||
}
|
||||
|
||||
.loading-progress {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin: 20vh auto 1rem auto;
|
||||
#loading-progress {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: loading-background 4s linear infinite;
|
||||
}
|
||||
|
||||
.loading-progress circle {
|
||||
fill: none;
|
||||
stroke: #e0e0e0;
|
||||
stroke-width: 0.6rem;
|
||||
transform-origin: 50% 50%;
|
||||
transform: rotate(-90deg);
|
||||
#loading-progress > #loading-icon {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
animation: loading-icon 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-progress circle:last-child {
|
||||
stroke: #1b6ec2;
|
||||
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
|
||||
transition: stroke-dasharray 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
.loading-progress-text {
|
||||
color: #000;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
|
||||
}
|
||||
|
||||
.loading-progress-text:after {
|
||||
content: var(--blazor-load-percentage-text, "Loading");
|
||||
}
|
||||
|
||||
code {
|
||||
color: #c02d76;
|
||||
}
|
||||
|
||||
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.expand-col-2 {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.expand-row-2 {
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.body-sm {
|
||||
color: #ccc
|
||||
}
|
||||
@@ -158,14 +114,55 @@ code {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@keyframes loading-background {
|
||||
0% {
|
||||
background: rgb(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {opacity: 0}
|
||||
100% {opacity: 1}
|
||||
50% {
|
||||
background: rgb(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: rgb(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes loading-icon {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
to {
|
||||
0% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
50% {
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
z-index: var(--index-orb);
|
||||
}
|
||||
|
||||
.green {
|
||||
width: 80vh;
|
||||
height: 80vh;
|
||||
top: -20vh;
|
||||
background: #315941;
|
||||
filter: blur(30vh);
|
||||
}
|
||||
|
||||
.blue {
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
left: 10vw;
|
||||
top: 50vh;
|
||||
background: #3A4156;
|
||||
filter: blur(30vh);
|
||||
}
|
||||
|
||||
.red {
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
left: 60vw;
|
||||
top: -40vh;
|
||||
background: #593533;
|
||||
filter: blur(30vh);
|
||||
}
|
||||
|
||||
#background {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: var(--background);
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: var(--index-background);
|
||||
}
|
||||
@@ -7,17 +7,23 @@
|
||||
<title>Game Ideas</title>
|
||||
<base href="/" />
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
<link rel="stylesheet" href="css/background.css" />
|
||||
<link rel="icon" type="image/png" href="icon.png" />
|
||||
<link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<svg class="loading-progress">
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
</svg>
|
||||
<div class="loading-progress-text"></div>
|
||||
</div>
|
||||
|
||||
<div id="loading-progress">
|
||||
<img src="icon.png" alt="" id="loading-icon">
|
||||
</div>
|
||||
|
||||
<div id="background">
|
||||
<span class="orb red"></span>
|
||||
<span class="orb blue"></span>
|
||||
<span class="orb green"></span>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui">
|
||||
@@ -25,6 +31,7 @@
|
||||
<a href="." class="reload">Reload</a>
|
||||
<span class="dismiss">🗙</span>
|
||||
</div>
|
||||
|
||||
<script src="_framework/blazor.webassembly.js"></script>
|
||||
<script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
|
||||
<script src="Pages/Games/Components/GameCreationForm.razor.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user