Got text ontop of image!

This commit is contained in:
BOT Alex 2023-05-10 03:46:11 +02:00
parent 1269a13375
commit 60d218f8b6
6 changed files with 13 additions and 33 deletions

View File

@ -21,9 +21,13 @@
@for (int i = 0; i < 25; i++)
{
<MudItem>
<MudPaper Class="md-8">
<MudText Style="position: absolute; z-index: 1" Typo="Typo.h6">@RandomUsernames[random.Next(0, RandomUsernames.Length)]</MudText>
<MudImage Style="position: relative" Class="rounded-lg ma-4" Src="@GetRandomImage()" Height="250" Width="250"></MudImage>
<MudPaper Class="md-8" Style="position:relative">
<MudContainer Style="position:absolute;" Class="mt-4">
<MudText Style="background-color:rgba(0, 0, 0, 0.4); backdrop-filter:blur(2px)" Class="pl-2 rounded-t-lg" Color="Color.Secondary" Typo="Typo.h6">@("@" + RandomUsernames[random.Next(0, RandomUsernames.Length)])</MudText>
</MudContainer>
<MudContainer>
<MudImage Class="rounded-lg my-4" Src="@GetRandomImage()" Height="250" Width="250"></MudImage>
</MudContainer>
</MudPaper>
</MudItem>
}

View File

@ -0,0 +1 @@


View File

@ -1,10 +1,5 @@
{
"dependencies": {
"mssql2": {
"type": "mssql",
"connectionId": "ConnectionString",
"dynamicId": null
},
"secrets1": {
"type": "secrets",
"connectionId": null

View File

@ -1,11 +1,5 @@
{
"dependencies": {
"mssql2": {
"secretStore": "LocalSecretsFile",
"type": "mssql.onprem",
"connectionId": "ConnectionString",
"dynamicId": null
},
"secrets1": {
"secretStore": null,
"resourceId": null,

View File

@ -2,24 +2,7 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
background-color: black;
}
.content {
@ -73,6 +56,8 @@ a, .btn-link {
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
background-color: dimgray;
border-radius: 5em;
}
.loading-progress circle {
@ -93,6 +78,7 @@ a, .btn-link {
position: absolute;
text-align: center;
font-weight: bold;
color: aliceblue;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

View File

@ -14,7 +14,7 @@
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
</head>
<body style="background-color:black;">
<body>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<div id="app">
<svg class="loading-progress">