Skip to content

Commit

Permalink
Adds automatic (based on CSS prefers-color-scheme) light/dark mode. (#…
Browse files Browse the repository at this point in the history 
…199)
  • Loading branch information
@SQL-MisterMagoo
SQL-MisterMagoo committed Sep 12, 2023
1 parent ab0fb0d commit 53a6904
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 36 deletions.
12 changes: 6 additions & 6 deletions src/TagzApp.Web/Pages/Shared/_Header.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@inject IConfiguration Configuration

<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-toggleable-sm navbar-light border-bottom box-shadow mb-3 bg-body">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">TagzApp.Web</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
Expand All @@ -13,24 +13,24 @@
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
<a class="nav-link" asp-area="" asp-page="/Index">Home</a>
</li>

<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Waterfall">Waterfall</a>
<a class="nav-link" asp-area="" asp-page="/Waterfall">Waterfall</a>
</li>

@if (Configuration.GetValue<bool>("ModerationEnabled", false) && (await AuthorizationService.AuthorizeAsync(User, Security.Policy.Moderator)).Succeeded)
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Moderation">Moderation</a>
<a class="nav-link" asp-area="" asp-page="/Moderation">Moderation</a>
</li>
}
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Overlay">Overlay</a>
<a class="nav-link" asp-area="" asp-page="/Overlay">Overlay</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
<a class="nav-link" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>

Expand Down
3 changes: 2 additions & 1 deletion src/TagzApp.Web/Pages/Shared/_Layout.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark">
<title>@ViewData["Title"] - TagzApp.Web</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap-dark-5/dist/css/bootstrap-dark.min.css">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/TagzApp.Web.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/bootstrap-icons/font/bootstrap-icons.min.css" />
Expand Down
10 changes: 5 additions & 5 deletions src/TagzApp.Web/Pages/Shared/_LoginPartial.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@
{

<li class="nav-item">
<a id="admin" class="nav-link text-dark" asp-area="Admin" asp-page="/Index" title="Admin">Admin</a>
<a id="admin" class="nav-link" asp-area="Admin" asp-page="/Index" title="Admin">Admin</a>
</li>

}

<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">Hello @UserManager.GetUserName(User)!</a>
</li>
<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 = "" })">
<button id="logout" type="submit" class="nav-link btn btn-link text-dark border-0">Logout</button>
<button id="logout" type="submit" class="nav-link btn btn-link border-0">Logout</button>
</form>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" id="register" asp-area="Identity" asp-page="/Account/Register">Register</a>
<a class="nav-link" id="register" asp-area="Identity" asp-page="/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" id="login" asp-area="Identity" asp-page="/Account/Login">Login</a>
<a class="nav-link" id="login" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
}
</ul>
5 changes: 3 additions & 2 deletions src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark">
<title>@ViewData["Title"] - TagzApp.Web</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap-dark-5/dist/css/bootstrap-dark.min.css">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/TagzApp.Web.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/bootstrap-icons/font/bootstrap-icons.min.css" />
<link rel="stylesheet" href="_content/TagzApp.Providers.Blazot/css/blazot.css" />
</head>
<body style="overflow-y: hidden;">
<body style="overflow: hidden;">

@if (string.IsNullOrEmpty(ViewBag.EnableFloatingHeader?.ToString()) ? false : ViewBag.EnableFloatingHeader)
{
Expand Down
8 changes: 8 additions & 0 deletions src/TagzApp.Web/libman.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@
"font/bootstrap-icons.json",
"font/bootstrap-icons.min.css"
]
},
{
"provider": "jsdelivr",
"library": "bootstrap-dark-5@1.1.3",
"destination": "wwwroot/lib/bootstrap-dark-5/",
"files": [
"dist/css/bootstrap-dark.min.css"
]
}
]
}
43 changes: 21 additions & 22 deletions src/TagzApp.Web/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ body {
width: 100%;
height: calc(100vh - 66px);
overflow-y: scroll;
background-color: #f5f5f5;
padding: 0.3em;
display: grid;
grid-gap: 5px;
Expand All @@ -38,7 +37,6 @@ body {
/*font-size: 0.6em;*/
border: 1px solid #E2E8ED;
border-radius: 20px;
background-color: #FFF;
padding: 8px 16px 16px 16px;
overflow: hidden;
cursor: pointer;
Expand Down Expand Up @@ -78,12 +76,13 @@ body {

#taggedContent .time, #overlayDisplay .time, #overlayDisplay.showPreview .time {
grid-area: 2 / 1 / 3 / 4;
color: #697882;
color: var(--bs-body-color);
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
opacity: 0.7;
}

#taggedContent .content, #overlayDisplay .content, #overlayDisplay.showPreview .content {
Expand Down Expand Up @@ -134,7 +133,6 @@ span.invisible {
}

#overlayDisplay .author {
color: #000;
font-family: Helvetica;
font-size: 16px;
font-style: normal;
Expand All @@ -143,14 +141,14 @@ span.invisible {
}

#taggedContent .authorUserName {
color: #697882;
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-overflow: ellipsis;
overflow: hidden;
opacity: 0.7;
}

/** Overlay Display **/
Expand Down Expand Up @@ -215,7 +213,7 @@ span.invisible {

/** Modal display on Waterfall */
.modal-content {
border: 1px solid #E2E8ED;
border: 1px solid var(--bs-gray-600);
border-radius: 20px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}
Expand All @@ -240,7 +238,6 @@ span.invisible {
.modal-header .author {
grid-column: 2 / 3;
grid-row: 1 / 2;
color: #000;
font-family: Helvetica;
font-size: 16px;
font-style: normal;
Expand All @@ -251,14 +248,15 @@ span.invisible {
.modal-header .authorUserName {
grid-column: 2 / 3;
grid-row: 2 / 3;
color: #697882;
color: var(--bs-body-color);
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-overflow: ellipsis;
overflow: hidden;
opacity: 0.7;
}

.modal-header .provider {
Expand All @@ -268,12 +266,13 @@ span.invisible {
.modal-header .time {
grid-column: 1 / 3;
grid-row: 3 / 4;
color: #697882;
color: var(--bs-body-color);
font-family: Helvetica;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
opacity: 0.7;
}

.modal-header .btn-close {
Expand Down Expand Up @@ -307,29 +306,29 @@ span.invisible {
}

article.status-approved {
background-color: lightgreen !important;
background-color: rgba(var(--bs-success-rgb),.4);
}

article.status-rejected {
background-color: #FF8787 !important;
background-color: rgba(var(--bs-danger-rgb),.4);
}

article.status-rejected .time::after {
content: "Rejected";
font-weight: bold;
margin-left: 0.5em;
color: firebrick;
color: var(--bs-red);
margin-bottom: 1em;
}

article.status-rejected .author, article.status-rejected .authorUserName, article.status-rejected .time {
color: #555!important;
}
article.status-approved .time::after {
content: "Approved";
font-weight: bold;
margin-left: 0.5em;
color: var(--bs-green);
margin-bottom: 1em;
}

article.status-approved .time::after {
content: "Approved";
font-weight: bold;
margin-left: 0.5em;
color: forestgreen;
margin-bottom: 1em;
}
a {
color: var(--bs-cyan);
}
11 changes: 11 additions & 0 deletions src/TagzApp.Web/wwwroot/lib/bootstrap-dark-5/dist/css/bootstrap-dark.min.css
View file

Large diffs are not rendered by default.

0 comments on commit 53a6904

Please sign in to comment.