sarsoo/Selector
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

Fiddling with html, padding, icons etc

Browse Source
This commit is contained in:
andy 2021-12-19 22:50:03 +00:00
parent 67a2a322ca
commit 8174f9f6f6
21 changed files with 158 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Selector.Web/Areas/Identity/Pages/Account/Login.cshtml
View File

@ -10,20 +10,18 @@
<div class="col-md-4"> <div class="col-md-4">
<section> <section>
<form id="account" method="post"> <form id="account" method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Username"></label> <label asp-for="Input.Username"></label>
<input asp-for="Input.Username" class="form-control" /> <input asp-for="Input.Username" class="form-control" />
<span asp-validation-for="Input.Username" class="text-danger"></span> <span asp-validation-for="Input.Username" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Password"></label> <label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" /> <input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span> <span asp-validation-for="Input.Password" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<div class="checkbox"> <div class="checkbox">
<label asp-for="Input.RememberMe"> <label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" /> <input asp-for="Input.RememberMe" />
@ -31,15 +29,15 @@
</label> </label>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<button type="submit" class="btn btn-primary">Log in</button> <button type="submit" class="btn btn-primary">Log in</button>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<p> <p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a> <a id="forgot-password" asp-page="./ForgotPassword">Forgot password?</a>
</p> </p>
<p> <p>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a> <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register</a>
</p> </p>
<p> <p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a> <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
@ -50,17 +48,10 @@
</div> </div>
<div class="col-md-6 col-md-offset-2"> <div class="col-md-6 col-md-offset-2">
<section> <section>
<h4>Use another service to log in.</h4>
<hr />
@{ @{
if ((Model.ExternalLogins?.Count ?? 0) == 0) if ((Model.ExternalLogins?.Count ?? 0) == 0)
{ {
<div>
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
} }
else else
{ {

8
Selector.Web/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml
View File

@ -11,22 +11,22 @@
<div class="col-md-6"> <div class="col-md-6">
<form id="change-password-form" method="post"> <form id="change-password-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.OldPassword"></label> <label asp-for="Input.OldPassword"></label>
<input asp-for="Input.OldPassword" class="form-control" /> <input asp-for="Input.OldPassword" class="form-control" />
<span asp-validation-for="Input.OldPassword" class="text-danger"></span> <span asp-validation-for="Input.OldPassword" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.NewPassword"></label> <label asp-for="Input.NewPassword"></label>
<input asp-for="Input.NewPassword" class="form-control" /> <input asp-for="Input.NewPassword" class="form-control" />
<span asp-validation-for="Input.NewPassword" class="text-danger"></span> <span asp-validation-for="Input.NewPassword" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.ConfirmPassword"></label> <label asp-for="Input.ConfirmPassword"></label>
<input asp-for="Input.ConfirmPassword" class="form-control" /> <input asp-for="Input.ConfirmPassword" class="form-control" />
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span> <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div> </div>
<button type="submit" class="btn btn-primary">Update password</button> <button type="submit" class="btn btn-primary form-element">Update password</button>
</form> </form>
</div> </div>
</div> </div>

4
Selector.Web/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml
View File

@ -18,13 +18,13 @@
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
@if (Model.RequirePassword) @if (Model.RequirePassword)
{ {
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Password"></label> <label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" /> <input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span> <span asp-validation-for="Input.Password" class="text-danger"></span>
</div> </div>
} }
<button class="btn btn-danger" type="submit">Delete data and close my account</button> <button class="btn btn-danger form-element" type="submit">Delete data and close my account</button>
</form> </form>
</div> </div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/Email.cshtml
View File

@ -11,7 +11,7 @@
<div class="col-md-6"> <div class="col-md-6">
<form id="email-form" method="post"> <form id="email-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Email"></label> <label asp-for="Email"></label>
@if (Model.IsEmailConfirmed) @if (Model.IsEmailConfirmed)
{ {
@ -28,12 +28,12 @@
<button id="email-verification" type="submit" asp-page-handler="SendVerificationEmail" class="btn btn-link">Send verification email</button> <button id="email-verification" type="submit" asp-page-handler="SendVerificationEmail" class="btn btn-link">Send verification email</button>
} }
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.NewEmail"></label> <label asp-for="Input.NewEmail"></label>
<input asp-for="Input.NewEmail" class="form-control" /> <input asp-for="Input.NewEmail" class="form-control" />
<span asp-validation-for="Input.NewEmail" class="text-danger"></span> <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
</div> </div>
<button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="btn btn-primary">Change email</button> <button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="btn btn-primary form-element">Change email</button>
</form> </form>
</div> </div>
</div> </div>

4
Selector.Web/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml
View File

@ -34,12 +34,12 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<form id="send-code" method="post"> <form id="send-code" method="post">
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Code" class="control-label">Verification Code</label> <label asp-for="Input.Code" class="control-label">Verification Code</label>
<input asp-for="Input.Code" class="form-control" autocomplete="off" /> <input asp-for="Input.Code" class="form-control" autocomplete="off" />
<span asp-validation-for="Input.Code" class="text-danger"></span> <span asp-validation-for="Input.Code" class="text-danger"></span>
</div> </div>
<button type="submit" class="btn btn-primary">Verify</button> <button type="submit" class="btn btn-primary form-element">Verify</button>
<div asp-validation-summary="ModelOnly" class="text-danger"></div> <div asp-validation-summary="ModelOnly" class="text-danger"></div>
</form> </form>
</div> </div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/Index.cshtml
View File

@ -11,16 +11,16 @@
<div class="col-md-6"> <div class="col-md-6">
<form id="profile-form" method="post"> <form id="profile-form" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div> <div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Username"></label> <label asp-for="Username"></label>
<input asp-for="Username" class="form-control" disabled /> <input asp-for="Username" class="form-control" disabled />
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.PhoneNumber"></label> <label asp-for="Input.PhoneNumber"></label>
<input asp-for="Input.PhoneNumber" class="form-control" /> <input asp-for="Input.PhoneNumber" class="form-control" />
<span asp-validation-for="Input.PhoneNumber" class="text-danger"></span> <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
</div> </div>
<button id="update-profile-button" type="submit" class="btn btn-primary">Save</button> <button id="update-profile-button" type="submit" class="btn btn-primary form-element">Save</button>
</form> </form>
</div> </div>
</div> </div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/Lastfm.cshtml
View File

@ -5,18 +5,18 @@
ViewData["ActivePage"] = ManageNavPages.LastFm; ViewData["ActivePage"] = ManageNavPages.LastFm;
} }
<h4>@ViewData["Title"]</h4> <h4>@ViewData["Title"] <a href="https://last.fm"><img src="/last-fm.png" class="lastfm-logo central" /></a></h4>
<partial name="_StatusMessage" model="Model.StatusMessage" /> <partial name="_StatusMessage" model="Model.StatusMessage" />
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<form id="lastfm-form" method="post"> <form id="lastfm-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Username"></label> <label asp-for="Input.Username"></label>
<input asp-for="Input.Username" class="form-control" /> <input asp-for="Input.Username" class="form-control" />
<span asp-validation-for="Input.Username" class="text-danger"></span> <span asp-validation-for="Input.Username" class="text-danger"></span>
</div> </div>
<button id="change-username-button" type="submit" asp-page-handler="ChangeUsername" class="btn btn-primary">Change Username</button> <button id="change-username-button" type="submit" asp-page-handler="ChangeUsername" class="btn btn-primary form-element">Change Username</button>
</form> </form>
</div> </div>
</div> </div>

2
Selector.Web/Areas/Identity/Pages/Account/Manage/ManageNavPages.cs
View File

@ -50,7 +50,7 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
{ {
var activePage = viewContext.ViewData["ActivePage"] as string var activePage = viewContext.ViewData["ActivePage"] as string
?? System.IO.Path.GetFileNameWithoutExtension(viewContext.ActionDescriptor.DisplayName); ?? System.IO.Path.GetFileNameWithoutExtension(viewContext.ActionDescriptor.DisplayName);
return string.Equals(activePage, page, StringComparison.OrdinalIgnoreCase) ? "active" : null; return string.Equals(activePage, page, StringComparison.OrdinalIgnoreCase) ? "active" : "unselected";
} }
} }
} }

4
Selector.Web/Areas/Identity/Pages/Account/Manage/PersonalData.cshtml
View File

@ -13,11 +13,11 @@
<p> <p>
<strong>Deleting this data will permanently remove your account, and this cannot be recovered.</strong> <strong>Deleting this data will permanently remove your account, and this cannot be recovered.</strong>
</p> </p>
<form id="download-data" asp-page="DownloadPersonalData" method="post" class="form-group"> <form id="download-data" asp-page="DownloadPersonalData" method="post" class="form-group form-element">
<button class="btn btn-primary" type="submit">Download</button> <button class="btn btn-primary" type="submit">Download</button>
</form> </form>
<p> <p>
<a id="delete" asp-page="DeletePersonalData" class="btn btn-secondary">Delete</a> <a id="delete" asp-page="DeletePersonalData" class="btn btn-secondary form-element">Delete</a>
</p> </p>
</div> </div>
</div> </div>

6
Selector.Web/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml
View File

@ -15,17 +15,17 @@
<div class="col-md-6"> <div class="col-md-6">
<form id="set-password-form" method="post"> <form id="set-password-form" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div> <div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.NewPassword"></label> <label asp-for="Input.NewPassword"></label>
<input asp-for="Input.NewPassword" class="form-control" /> <input asp-for="Input.NewPassword" class="form-control" />
<span asp-validation-for="Input.NewPassword" class="text-danger"></span> <span asp-validation-for="Input.NewPassword" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.ConfirmPassword"></label> <label asp-for="Input.ConfirmPassword"></label>
<input asp-for="Input.ConfirmPassword" class="form-control" /> <input asp-for="Input.ConfirmPassword" class="form-control" />
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span> <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div> </div>
<button type="submit" class="btn btn-primary">Set password</button> <button type="submit" class="btn btn-primary form-element">Set password</button>
</form> </form>
</div> </div>
</div> </div>

13
Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml
View File

@ -5,22 +5,29 @@
ViewData["ActivePage"] = ManageNavPages.Spotify; ViewData["ActivePage"] = ManageNavPages.Spotify;
} }
<h4>@ViewData["Title"]</h4> <h4>@ViewData["Title"] <a href="https://spotify.com"><img src="/Spotify_Icon_RGB_White.png" class="spotify-logo central" /></a></h4>
<partial name="_StatusMessage" model="Model.StatusMessage" /> <partial name="_StatusMessage" model="Model.StatusMessage" />
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<form id="spotify-form" method="post"> <form id="spotify-form" method="post">
@if (Model.SpotifyIsLinked) @if (Model.SpotifyIsLinked)
{ {
<button id="unlink-button" type="submit" asp-page-handler="Unlink" class="btn btn-primary">Unlink</button> <button id="unlink-button" type="submit" asp-page-handler="Unlink" class="btn btn-primary form-element">Unlink</button>
} }
else else
{ {
<button id="link-button" type="submit" asp-page-handler="Link" class="btn btn-primary">Link</button> <button id="link-button" type="submit" asp-page-handler="Link" class="btn btn-primary form-element">Link</button>
} }
</form> </form>
</div> </div>
</div> </div>
@if (Model.SpotifyIsLinked)
{
<div class="row">
<p class="small">Token last refreshed: <span class="data-value">@Model.LastRefresh</span></p>
</div>
}
@section Scripts { @section Scripts {
<partial name="_ValidationScriptsPartial" /> <partial name="_ValidationScriptsPartial" />

4
Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml.cs
View File

@ -37,6 +37,9 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
[BindProperty] [BindProperty]
public bool SpotifyIsLinked { get; set; } public bool SpotifyIsLinked { get; set; }
[BindProperty]
public DateTime LastRefresh { get; set; }
[TempData] [TempData]
public string StatusMessage { get; set; } public string StatusMessage { get; set; }
@ -49,6 +52,7 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
} }
SpotifyIsLinked = user.SpotifyIsLinked; SpotifyIsLinked = user.SpotifyIsLinked;
LastRefresh = user.SpotifyLastRefresh;
return Page(); return Page();
} }

6
Selector.Web/Areas/Identity/Pages/Account/Manage/_Layout.cshtml
View File

@ -9,16 +9,14 @@
} }
} }
<h2>Manage your account</h2> <h2>Manage</h2>
<div> <div>
<h4>Change your account settings</h4>
<hr />
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<partial name="_ManageNav" /> <partial name="_ManageNav" />
</div> </div>
<div class="col-md-9"> <div class="col-md-9" style="margin-top: 20px">
@RenderBody() @RenderBody()
</div> </div>
</div> </div>

16
Selector.Web/Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml
View File

@ -4,15 +4,15 @@
var hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any(); var hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
} }
<ul class="nav nav-pills flex-column"> <ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Profile</a></li> <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Profile</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.SpotifyNavClass(ViewContext)" id="spotify" asp-page="./Spotify">Spotify</a></li> <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.SpotifyNavClass(ViewContext)" id="spotify" asp-page="./Spotify">Spotify <img src="/Spotify_Icon_RGB_White.png" class="spotify-logo menu-icon" /></a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.LastFmNavClass(ViewContext)" id="lastfm" asp-page="./Lastfm">Last.fm</a></li> <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.LastFmNavClass(ViewContext)" id="lastfm" asp-page="./Lastfm">Last.fm <img src="/last-fm.png" class="lastfm-logo menu-icon" /></a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a></li> <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a></li> <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a></li>
@if (hasExternalLogins) @if (hasExternalLogins)
{ {
<li id="external-logins" class="nav-item"><a id="external-login" class="nav-link @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External logins</a></li> <li id="external-logins" class="nav-item"><a id="external-login" class="nav-link dash-underline @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External logins</a></li>
} }
<li class="nav-item"><a class="nav-link @ManageNavPages.TwoFactorAuthenticationNavClass(ViewContext)" id="two-factor" asp-page="./TwoFactorAuthentication">Two-factor authentication</a></li> <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.TwoFactorAuthenticationNavClass(ViewContext)" id="two-factor" asp-page="./TwoFactorAuthentication">Two-factor authentication</a></li>
<li class="nav-item"><a class="nav-link @ManageNavPages.PersonalDataNavClass(ViewContext)" id="personal-data" asp-page="./PersonalData">Personal data</a></li> <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.PersonalDataNavClass(ViewContext)" id="personal-data" asp-page="./PersonalData">Personal data</a></li>
</ul> </ul>

12
Selector.Web/Areas/Identity/Pages/Account/Register.cshtml
View File

@ -9,30 +9,28 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<form asp-route-returnUrl="@Model.ReturnUrl" method="post"> <form asp-route-returnUrl="@Model.ReturnUrl" method="post">
<h4>Create a new account.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Username"></label> <label asp-for="Input.Username"></label>
<input asp-for="Input.Username" class="form-control" /> <input asp-for="Input.Username" class="form-control" />
<span asp-validation-for="Input.Username" class="text-danger"></span> <span asp-validation-for="Input.Username" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Email"></label> <label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" /> <input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span> <span asp-validation-for="Input.Email" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.Password"></label> <label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" /> <input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span> <span asp-validation-for="Input.Password" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group form-element">
<label asp-for="Input.ConfirmPassword"></label> <label asp-for="Input.ConfirmPassword"></label>
<input asp-for="Input.ConfirmPassword" class="form-control" /> <input asp-for="Input.ConfirmPassword" class="form-control" />
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span> <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div> </div>
<button type="submit" class="btn btn-primary">Register</button> <button type="submit" class="btn btn-primary form-element">Register</button>
</form> </form>
</div> </div>
<div class="col-md-6 col-md-offset-2"> <div class="col-md-6 col-md-offset-2">

82
Selector.Web/CSS/index.scss
View File

@ -1,5 +1,85 @@
@import "now.scss"; @import "now.scss";
body { body {
background-color: #c6c6c6; background-color: #121212;
color: #efefef;
}
.navbar-bg {
background-color: #232323;
}
.form-element {
margin-top: 10px;
margin-bottom: 10px;
}
.menu-icon {
vertical-align: middle;
float: right;
}
.unselected img {
filter: brightness(0.4);
}
.black-img {
filter: brightness(0);
}
.central {
vertical-align: middle;
}
.data-value {
color: grey;
}
.separator-border {
border-bottom: 1px solid #191919;
}
.dash-underline {
text-decoration: dotted;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
&: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;
&:hover {
text-decoration: solid;
text-decoration-line: underline;
text-decoration-thickness: 3.4px;
}
}
.link-dark {
color: #a3a3a3;
&:hover {
color: #a3a3a3;
}
}
input[type=text], input[type=email], input[type=tel], input[type=password] {
background-color: #444444 !important;
border-color: #545454;
color: $text-color;
&:focus {
color: $text-color;
}
} }

11
Selector.Web/CSS/now.scss
View File

@ -3,13 +3,14 @@
} }
$text-color: white; $text-color: white;
$shadow-color: #1e1e1e;
.card { .card {
background-color: grey; background-color: #333232;
color: $text-color; color: $text-color;
margin: 5px; margin: 5px;
padding: 15px; padding: 15px;
box-shadow: 4px 4px 2px #5e5e5e; box-shadow: 4px 4px 2px $shadow-color;
transition: box-shadow 0.5s; transition: box-shadow 0.5s;
&:hover { &:hover {
@ -21,10 +22,10 @@ $text-color: white;
.now-playing-card { .now-playing-card {
// max-width: 300px; // max-width: 300px;
text-shadow: 2px 2px 2px #5e5e5e; text-shadow: 2px 2px 2px $shadow-color;
.cover-art { .cover-art {
box-shadow: 4px 4px 2px #5e5e5e; box-shadow: 4px 4px 2px $shadow-color;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -85,7 +86,7 @@ $text-color: white;
.popularity-progress { .popularity-progress {
margin-top: 10px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 2px 2px 2px #5e5e5e; box-shadow: 2px 2px 2px $shadow-color;
} }
.subtle-link { .subtle-link {

4
Selector.Web/Pages/Index.cshtml
View File

@ -6,4 +6,8 @@
<div class="text-center"> <div class="text-center">
<h1 class="display-4">Welcome</h1> <h1 class="display-4">Welcome</h1>
<p>Selector is a tool for monitoring Spotify usage.</p>
<a href="/now" class="dash-underline-lg link-dark" style="">Now Playing</a>
</div> </div>

10
Selector.Web/Pages/Shared/_Layout.cshtml
View File

@ -9,17 +9,13 @@
</head> </head>
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <nav class="navbar navbar-expand-sm navbar-dark navbar-bg separator-border box-shadow mb-3">
<div class="container"> <div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">Selector</a> <a class="navbar-brand" asp-area="" asp-page="/Index">Selector</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Now">Now</a> <a class="nav-link" asp-area="" asp-page="/Now">Now</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -33,7 +29,7 @@
</main> </main>
</div> </div>
<footer class="border-top footer text-muted"> <footer class="footer text-muted">
<div class="container"> <div class="container">
&copy; 2021 - Selector.Web - <a asp-area="" asp-page="/Privacy">Privacy</a> &copy; 2021 - Selector.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div> </div>

4
Selector.Web/Pages/Shared/_LoginPartial.cshtml
View File

@ -8,11 +8,11 @@
@if (SignInManager.IsSignedIn(User)) @if (SignInManager.IsSignedIn(User))
{ {
<li class="nav-item"> <li class="nav-item">
<a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a> <a id="manage" class="nav-link" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">@UserManager.GetUserName(User)</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/Index", new { area = "" })"> <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/Index", new { area = "" })">
<button id="logout" type="submit" class="nav-link btn btn-link text-dark">Logout</button> <button id="logout" type="submit" class="nav-link btn btn-link">Logout</button>
</form> </form>
</li> </li>
} }

2
Selector.Web/scripts/Now/Spotify.ts
View File

@ -103,7 +103,7 @@ export let AudioFeatureChartCard: Vue.Component = {
elements: { elements: {
line: { line: {
borderWidth: 4, borderWidth: 4,
borderColor: "#3a3a3a", borderColor: "#a34c77",
backgroundColor: "#727272", backgroundColor: "#727272",
borderCapStyle: "round", borderCapStyle: "round",
borderJoinStyle: "round" borderJoinStyle: "round"