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
|
||||
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
|
||||
tab_width = 4
|
||||
trim_trailing_whitespace = true
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
/* Validation */
|
||||
@import "./spectre/_variables";
|
||||
@import "./spectre/mixins/_shadow";
|
||||
|
||||
/* Validation */
|
||||
.valid.modified:not([type=checkbox]) {
|
||||
outline: 1px solid #26b050;
|
||||
}
|
||||
|
||||
.invalid {
|
||||
outline: 1px solid red;
|
||||
background: lighten($error-color, 53%);
|
||||
border-color: $error-color;
|
||||
|
||||
&:focus {
|
||||
@include control-shadow($error-color);
|
||||
}
|
||||
}
|
||||
|
||||
.validation-message {
|
||||
color: red;
|
||||
color: $error-color;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -119,15 +127,17 @@
|
|||
|
||||
.tab-item a {
|
||||
padding: .6rem .4rem .6rem .4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#bookmarkGroups {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 3em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
max-width: 1440px;
|
||||
display: grid;
|
||||
grid-column-gap: 1.25rem;
|
||||
grid-row-gap: 1.25rem;
|
||||
|
|
@ -150,9 +160,12 @@
|
|||
|
||||
.bookmarkGroup {
|
||||
width: 100%;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 0.1rem 0.3rem rgba(48, 55, 66, 0.1);
|
||||
|
||||
.card-header {
|
||||
padding-top: 0;
|
||||
border-radius: 0.4em 0.4em 0 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
|
|
@ -161,6 +174,10 @@
|
|||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
|
||||
.empty {
|
||||
border-radius: 0 0 0.4em 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body:last-child {
|
||||
|
|
@ -185,10 +202,3 @@ ul.bookmarks {
|
|||
button.addBookmarkButton {
|
||||
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>
|
||||
<workingdir>${ProjectDir}</workingdir>
|
||||
</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>
|
||||
</PropertyGroup>
|
||||
|
|
@ -56,6 +61,11 @@
|
|||
<command>sass --style=compressed ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
|
||||
<workingdir>${ProjectDir}</workingdir>
|
||||
</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>
|
||||
</PropertyGroup>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<link href="css/spectre/spectre-exp.css" rel="stylesheet" />
|
||||
<link href="css/spectre/spectre-icons.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 rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue