adding css, resources

This commit is contained in:
Andy Pack 2023-01-23 20:24:41 +00:00
parent cad4a68677
commit 7037dce2da
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
12 changed files with 183 additions and 19 deletions

View File

@ -37,8 +37,15 @@
<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Release|net7.0-ios|AnyCPU'"> <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Release|net7.0-ios|AnyCPU'">
<CreatePackage>false</CreatePackage> <CreatePackage>false</CreatePackage>
</PropertyGroup> </PropertyGroup>
<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'"> <!-- <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
<CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements> <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup> -->
<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net7.0-maccatalyst|AnyCPU'">
<CreatePackage>false</CreatePackage>
<CodesignKey>Mac Developer</CodesignKey>
<PackageSigningKey>3rd Party Mac Developer Installer</PackageSigningKey>
<EnableCodeSigning>True</EnableCodeSigning>
<CodesignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodesignEntitlements>
</PropertyGroup> </PropertyGroup>
<ItemGroup> <ItemGroup>
<!-- App Icon --> <!-- App Icon -->
@ -74,7 +81,6 @@
<None Remove="Models\" /> <None Remove="Models\" />
<None Remove="Microsoft.AspNetCore.SignalR.Client" /> <None Remove="Microsoft.AspNetCore.SignalR.Client" />
<None Remove="Microsoft.AspNetCore.Components.Forms" /> <None Remove="Microsoft.AspNetCore.Components.Forms" />
<None Remove="Platforms\iOS\Entitlements.plist" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<Folder Include="Services\" /> <Folder Include="Services\" />
@ -92,4 +98,22 @@
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory> <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</None> --> </None> -->
</ItemGroup> </ItemGroup>
<ItemGroup>
<BundleResource Include="wwwroot\andy.png">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</BundleResource>
<BundleResource Include="wwwroot\last_fm.png">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</BundleResource>
<BundleResource Include="wwwroot\live.gif">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</BundleResource>
<BundleResource Include="wwwroot\spotify_icon.png">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</BundleResource>
</ItemGroup>
</Project> </Project>

View File

@ -12,7 +12,7 @@
} }
<main> <main>
<div class="top-row px-4"> <div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> <a href="https://sarsoo.xyz/posts/selector/" class="dash-underline-lg link-dark" target="_blank">About</a>
</div> </div>
<article class="content px-4"> <article class="content px-4">
@ -21,3 +21,20 @@
</main> </main>
</div> </div>
@*<footer class="footer text-muted">
<div class="container">
&copy; 2023 - Selector.MAUI - <a href="https://selector.sarsoo.xyz/privacy/">Privacy</a>
</div>
<div style="text-align: center">
<a href="https://sarsoo.xyz/about/" style="display: inline-block">
<img src="/andy.png"
alt="AP"
width="120px"
style="display: block;
margin-left: auto;
margin-right: auto;
padding: 8px">
</a>
</div>
</footer>*@

View File

@ -9,11 +9,12 @@ main {
} }
.sidebar { .sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); /* background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); */
background-color: #232323;
} }
.top-row { .top-row {
background-color: #f7f7f7; background-color: #232323;
border-bottom: 1px solid #d6d5d5; border-bottom: 1px solid #d6d5d5;
justify-content: flex-end; justify-content: flex-end;
height: 3.5rem; height: 3.5rem;
@ -21,20 +22,20 @@ main {
align-items: center; align-items: center;
} }
.top-row ::deep a, .top-row ::deep .btn-link { .top-row ::deep a, .top-row ::deep .btn-link {
white-space: nowrap; white-space: nowrap;
margin-left: 1.5rem; margin-left: 1.5rem;
text-decoration: none; text-decoration: none;
} }
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover { .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
text-decoration: underline; text-decoration: underline;
} }
.top-row ::deep a:first-child { .top-row ::deep a:first-child {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@media (max-width: 640.98px) { @media (max-width: 640.98px) {
.top-row:not(.auth) { .top-row:not(.auth) {

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -4,13 +4,18 @@ html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
body {
background-color: #2b2b2b;
color: #efefef;
}
h1:focus { h1:focus {
outline: none; outline: none;
} }
a, .btn-link { /*a, .btn-link {
color: #0071c1; color: #0071c1;
} }*/
.btn-primary { .btn-primary {
color: #fff; color: #fff;

View File

@ -0,0 +1,72 @@
.card {
background-color: #3c3c3c;
color: white;
margin: 5px;
padding: 15px;
box-shadow: 5px 5px 0px #0f0f0f;
transition: box-shadow 0.5s;
border-style: solid;
border-color: black;
border-width: 5px;
}
.card:hover {
box-shadow: none;
offset: 4px 4px;
}
@media only screen and (min-width: 768px) {
.now-playing-card {
position: fixed;
z-index: 10;
right: 20px;
bottom: 20px;
width: 250px;
}
}
@media only screen and (min-width: 768px) {
.info-card {
min-width: 200px;
max-width: 500px;
}
.chart-card {
width: 500px;
}
}
.now-playing-card {
text-shadow: 2px 2px 2px #0f0f0f;
}
.now-playing-card .cover-art {
box-shadow: 4px 4px 2px #0f0f0f;
margin-bottom: 15px;
}
.info-card {
margin-top: 10px;
margin-bottom: 10px;
}
.chart-card {
margin-top: 10px;
margin-bottom: 10px;
}
.spotify-logo {
width: 21px;
}
.spotify-logo img {
width: 21px;
}
.lastfm-logo {
width: 24px;
}
.lastfm-logo img {
width: 24px;
}

View File

@ -0,0 +1,9 @@
input[type=text], input[type=email], input[type=tel], input[type=password] {
background-color: #444444 !important;
border-color: #545454;
color: white;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus {
color: white;
}

View File

@ -0,0 +1,33 @@
.dash-underline {
text-decoration: dotted;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.dash-underline:hover {
text-decoration: solid;
text-decoration-line: underline;
text-decoration-thickness: 1.5px;
}
.dash-underline-lg {
font-size: 24px;
text-decoration: dotted;
text-decoration-line: underline;
text-decoration-thickness: 4px;
text-underline-offset: 5px;
}
.dash-underline-lg:hover {
text-decoration: solid;
text-decoration-line: underline;
text-decoration-thickness: 3.4px;
}
.link-dark {
color: #a3a3a3;
}
.link-dark:hover {
color: #a3a3a3;
}

View File

@ -7,6 +7,9 @@
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/app.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" />
<link href="css/card.css" rel="stylesheet" />
<link href="css/link.css" rel="stylesheet" />
<link href="css/input.css" rel="stylesheet" />
<link href="Selector.MAUI.styles.css" rel="stylesheet" /> <link href="Selector.MAUI.styles.css" rel="stylesheet" />
</head> </head>

Binary file not shown.

After

Width:  |  Height:  |  Size: 687 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB