Improve dark mode styling
This commit is contained in:
Neil Brommer
parent
4e9f710162
commit
1b8460fd3e
|
|
@ -4,7 +4,7 @@ root = true
|
||||||
insert_final_newline = true
|
insert_final_newline = true
|
||||||
max_line_length = 100
|
max_line_length = 100
|
||||||
|
|
||||||
[*.{cs,cshtml,html,xml,js,css,csproj,json,md}]
|
[*.{cs,cshtml,html,xml,js,css,csproj,json,md,scss}]
|
||||||
indent_style = tab
|
indent_style = tab
|
||||||
tab_width = 4
|
tab_width = 4
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = true
|
||||||
|
|
|
||||||
|
|
@ -1,194 +1,204 @@
|
||||||
/* Validation */
|
@import "./spectre/_variables";
|
||||||
|
@import "./spectre/mixins/_shadow";
|
||||||
|
|
||||||
|
/* Validation */
|
||||||
.valid.modified:not([type=checkbox]) {
|
.valid.modified:not([type=checkbox]) {
|
||||||
outline: 1px solid #26b050;
|
outline: 1px solid #26b050;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invalid {
|
.invalid {
|
||||||
outline: 1px solid red;
|
background: lighten($error-color, 53%);
|
||||||
|
border-color: $error-color;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include control-shadow($error-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.validation-message {
|
.validation-message {
|
||||||
color: red;
|
color: $error-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Blazor */
|
/* Blazor */
|
||||||
#blazor-error-ui {
|
#blazor-error-ui {
|
||||||
background: lightyellow;
|
background: lightyellow;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
||||||
display: none;
|
display: none;
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
|
||||||
.dismiss {
|
.dismiss {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0.75rem;
|
right: 0.75rem;
|
||||||
top: 0.5rem;
|
top: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Spectre's default is no padding */
|
/* Spectre's default is no padding */
|
||||||
.container {
|
.container {
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The splash screen */
|
/* The splash screen */
|
||||||
.appLoadingContainer {
|
.appLoadingContainer {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.authorizingContainer {
|
.authorizingContainer {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
#sidebarHeading {
|
#sidebarHeading {
|
||||||
padding: 0.5rem 1.5rem;
|
padding: 0.5rem 1.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
padding: 0.5rem 1.5rem;
|
padding: 0.5rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebarItems {
|
#sidebarItems {
|
||||||
flex: 1; /* Fill remaining space */
|
flex: 1; /* Fill remaining space */
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accountActions {
|
.accountActions {
|
||||||
border-top: solid 1px #dadee4;
|
border-top: solid 1px #dadee4;
|
||||||
|
|
||||||
.accountName {
|
.accountName {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.off-canvas .off-canvas-content {
|
.off-canvas .off-canvas-content {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menuButton .icon {
|
#menuButton .icon {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#containerTabStrip {
|
#containerTabStrip {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
#menuButton {
|
#menuButton {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.containerList {
|
.containerList {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
|
|
||||||
.tab-item a {
|
.tab-item a {
|
||||||
padding: .6rem .4rem .6rem .4rem;
|
padding: .6rem .4rem .6rem .4rem;
|
||||||
}
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#bookmarkGroups {
|
#bookmarkGroups {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-left: auto;
|
margin-bottom: 3em;
|
||||||
margin-right: auto;
|
margin-left: auto;
|
||||||
max-width: 1280px;
|
margin-right: auto;
|
||||||
display: grid;
|
max-width: 1440px;
|
||||||
grid-column-gap: 1.25rem;
|
display: grid;
|
||||||
grid-row-gap: 1.25rem;
|
grid-column-gap: 1.25rem;
|
||||||
|
grid-row-gap: 1.25rem;
|
||||||
|
|
||||||
@media screen and (max-width: 960px) {
|
@media screen and (max-width: 960px) {
|
||||||
grid-template-columns: repeat(1, 1fr);
|
grid-template-columns: repeat(1, 1fr);
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 960px) {
|
@media screen and (min-width: 960px) {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1440) {
|
@media screen and (min-width: 1440) {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bookmarkGroup {
|
.bookmarkGroup {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
box-shadow: 0 0.1rem 0.3rem rgba(48, 55, 66, 0.1);
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
border-radius: 0.4em 0.4em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.card-body:last-child {
|
.empty {
|
||||||
padding: 0;
|
border-radius: 0 0 0.4em 0.4em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body:last-child {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.bookmarks {
|
ul.bookmarks {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
li.noBookmarksItem {
|
li.noBookmarksItem {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.addBookmarkGroupButton button {
|
.addBookmarkGroupButton button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.addBookmarkButton {
|
button.addBookmarkButton {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (prefers-color-scheme: dark) {
|
|
||||||
body {
|
|
||||||
color: #fafafa;
|
|
||||||
background-color: #111111;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
127
Start/Client/Sass/dark-mode.scss
Normal file
127
Start/Client/Sass/dark-mode.scss
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
@import "./spectre/_variables";
|
||||||
|
|
||||||
|
$dark-primary-color: $primary-color-light;
|
||||||
|
$dark-primary-color-dark: $primary-color;
|
||||||
|
$dark-text-color: $light-color;
|
||||||
|
$dark-bg-color: $dark-color;
|
||||||
|
$dark-bg-color-dark: darken($dark-color, 3%);
|
||||||
|
$dark-border-color: darken($dark-color, 10%);
|
||||||
|
|
||||||
|
@media screen and (prefers-color-scheme: dark) {
|
||||||
|
// Base
|
||||||
|
body {
|
||||||
|
color: $dark-text-color;
|
||||||
|
background-color: $dark-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $primary-color-light;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: $link-color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
.btn {
|
||||||
|
color: $dark-primary-color;
|
||||||
|
background-color: $dark-bg-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $dark-bg-color-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-link {
|
||||||
|
color: $dark-primary-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-primary-color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Off canvas
|
||||||
|
.off-canvas {
|
||||||
|
.off-canvas-sidebar {
|
||||||
|
color: $dark-text-color;
|
||||||
|
background-color: $dark-bg-color-dark;
|
||||||
|
box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.off-canvas-overlay {
|
||||||
|
background: rgba($dark-color, .2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Tabs
|
||||||
|
.tab {
|
||||||
|
border-bottom-color: $dark-border-color;
|
||||||
|
|
||||||
|
.tab-item.active {
|
||||||
|
color: $dark-primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Cards
|
||||||
|
.card {
|
||||||
|
border-color: $dark-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Empty
|
||||||
|
.empty {
|
||||||
|
color: $dark-text-color;
|
||||||
|
background: $dark-bg-color-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Modals
|
||||||
|
.modal-container {
|
||||||
|
color: $dark-text-color;
|
||||||
|
background-color: $dark-bg-color;
|
||||||
|
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
color: $dark-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
&:target, &.active {
|
||||||
|
.modal-overlay {
|
||||||
|
background: rgba($dark-bg-color, .75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
.form-input {
|
||||||
|
background-color: $dark-bg-color;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $dark-primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
&:not([multiple]):not([size]) {
|
||||||
|
background-color: $dark-bg-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Custom
|
||||||
|
#sidebar .accountActions {
|
||||||
|
border-top-color: $dark-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -30,6 +30,11 @@
|
||||||
<command>sass ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
|
<command>sass ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
|
||||||
<workingdir>${ProjectDir}</workingdir>
|
<workingdir>${ProjectDir}</workingdir>
|
||||||
</Command>
|
</Command>
|
||||||
|
<Command>
|
||||||
|
<type>BeforeBuild</type>
|
||||||
|
<command>sass ${ProjectDir}/Sass/dark-mode.scss ${ProjectDir}/wwwroot/css/dark-mode.css</command>
|
||||||
|
<workingdir>${ProjectDir}</workingdir>
|
||||||
|
</Command>
|
||||||
</CustomCommands>
|
</CustomCommands>
|
||||||
</CustomCommands>
|
</CustomCommands>
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
|
|
@ -56,6 +61,11 @@
|
||||||
<command>sass --style=compressed ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
|
<command>sass --style=compressed ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
|
||||||
<workingdir>${ProjectDir}</workingdir>
|
<workingdir>${ProjectDir}</workingdir>
|
||||||
</Command>
|
</Command>
|
||||||
|
<Command>
|
||||||
|
<type>BeforeBuild</type>
|
||||||
|
<command>sass --style=compressed ${ProjectDir}/Sass/dark-mode.scss ${ProjectDir}/wwwroot/css/dark-mode.css</command>
|
||||||
|
<workingdir>${ProjectDir}</workingdir>
|
||||||
|
</Command>
|
||||||
</CustomCommands>
|
</CustomCommands>
|
||||||
</CustomCommands>
|
</CustomCommands>
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<link href="css/spectre/spectre-exp.css" rel="stylesheet" />
|
<link href="css/spectre/spectre-exp.css" rel="stylesheet" />
|
||||||
<link href="css/spectre/spectre-icons.css" rel="stylesheet" />
|
<link href="css/spectre/spectre-icons.css" rel="stylesheet" />
|
||||||
<link href="css/app.css" rel="stylesheet" />
|
<link href="css/app.css" rel="stylesheet" />
|
||||||
<link href="Start.Client.styles.css" rel="stylesheet" />
|
<link href="css/dark-mode.css" rel="stylesheet" />
|
||||||
|
|
||||||
<link href="manifest.json" rel="manifest" />
|
<link href="manifest.json" rel="manifest" />
|
||||||
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue