diff --git a/.editorconfig b/.editorconfig
index 3c250c4..4b31907 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -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
diff --git a/Start/Client/Sass/app.scss b/Start/Client/Sass/app.scss
index 9bc8081..d048cb0 100644
--- a/Start/Client/Sass/app.scss
+++ b/Start/Client/Sass/app.scss
@@ -1,194 +1,204 @@
-/* Validation */
+@import "./spectre/_variables";
+@import "./spectre/mixins/_shadow";
+
+/* Validation */
.valid.modified:not([type=checkbox]) {
- outline: 1px solid #26b050;
+ 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;
}
/* Blazor */
#blazor-error-ui {
- background: lightyellow;
- bottom: 0;
- box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
- display: none;
- left: 0;
- padding: 0.6rem 1.25rem 0.7rem 1.25rem;
- position: fixed;
- width: 100%;
- z-index: 1000;
+ background: lightyellow;
+ bottom: 0;
+ box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+ display: none;
+ left: 0;
+ padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
- .dismiss {
- cursor: pointer;
- position: absolute;
- right: 0.75rem;
- top: 0.5rem;
- }
+ .dismiss {
+ cursor: pointer;
+ position: absolute;
+ right: 0.75rem;
+ top: 0.5rem;
+ }
}
/* Spectre's default is no padding */
.container {
- padding: 0.4rem;
+ padding: 0.4rem;
}
/* The splash screen */
.appLoadingContainer {
- height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
.authorizingContainer {
- height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
#sidebar {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
- #sidebarHeading {
- padding: 0.5rem 1.5rem;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
+ #sidebarHeading {
+ padding: 0.5rem 1.5rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
- h1 {
- margin: 0;
- }
- }
+ h1 {
+ margin: 0;
+ }
+ }
- .nav {
- padding: 0.5rem 1.5rem;
- }
+ .nav {
+ padding: 0.5rem 1.5rem;
+ }
- #sidebarItems {
- flex: 1; /* Fill remaining space */
- overflow-y: auto;
- }
+ #sidebarItems {
+ flex: 1; /* Fill remaining space */
+ overflow-y: auto;
+ }
- .accountActions {
- border-top: solid 1px #dadee4;
+ .accountActions {
+ border-top: solid 1px #dadee4;
- .accountName {
- font-weight: bold;
- margin-bottom: 1em;
- }
- }
+ .accountName {
+ font-weight: bold;
+ margin-bottom: 1em;
+ }
+ }
}
.off-canvas .off-canvas-content {
- padding: 0;
+ padding: 0;
}
#menuButton .icon {
- transform: scale(1.2);
+ transform: scale(1.2);
}
#containerTabStrip {
- width: 100%;
- display: flex;
- align-items: center;
+ width: 100%;
+ display: flex;
+ align-items: center;
- #menuButton {
- flex: 0 0 auto;
- margin-right: 1em;
- margin-left: 1em;
+ #menuButton {
+ flex: 0 0 auto;
+ margin-right: 1em;
+ margin-left: 1em;
- .icon {
- transform: scale(1.2);
- }
- }
+ .icon {
+ transform: scale(1.2);
+ }
+ }
- .containerList {
- flex: 1 0 0;
+ .containerList {
+ flex: 1 0 0;
- .tab-item a {
- padding: .6rem .4rem .6rem .4rem;
- }
- }
+ .tab-item a {
+ padding: .6rem .4rem .6rem .4rem;
+ cursor: pointer;
+ }
+ }
}
#bookmarkGroups {
- margin-top: 1em;
- margin-left: auto;
- margin-right: auto;
- max-width: 1280px;
- display: grid;
- grid-column-gap: 1.25rem;
- grid-row-gap: 1.25rem;
+ margin-top: 1em;
+ margin-bottom: 3em;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1440px;
+ display: grid;
+ grid-column-gap: 1.25rem;
+ grid-row-gap: 1.25rem;
- @media screen and (max-width: 960px) {
- grid-template-columns: repeat(1, 1fr);
- padding: 1em;
- }
+ @media screen and (max-width: 960px) {
+ grid-template-columns: repeat(1, 1fr);
+ padding: 1em;
+ }
- @media screen and (min-width: 960px) {
- grid-template-columns: repeat(2, 1fr);
- width: 60%;
- }
+ @media screen and (min-width: 960px) {
+ grid-template-columns: repeat(2, 1fr);
+ width: 60%;
+ }
- @media screen and (min-width: 1440) {
- grid-template-columns: repeat(3, 1fr);
- width: 60%;
- }
+ @media screen and (min-width: 1440) {
+ grid-template-columns: repeat(3, 1fr);
+ width: 60%;
+ }
}
.bookmarkGroup {
- width: 100%;
+ width: 100%;
+ border-radius: 0.5em;
+ box-shadow: 0 0.1rem 0.3rem rgba(48, 55, 66, 0.1);
- .card-header {
- padding-top: 0;
- }
+ .card-header {
+ padding-top: 0;
+ border-radius: 0.4em 0.4em 0 0;
+ }
- .card-title {
- margin-top: 0.5em;
- }
+ .card-title {
+ margin-top: 0.5em;
+ }
- .card-body {
- padding: 0;
- }
+ .card-body {
+ padding: 0;
- .card-body:last-child {
- padding: 0;
- }
+ .empty {
+ border-radius: 0 0 0.4em 0.4em;
+ }
+ }
+
+ .card-body:last-child {
+ padding: 0;
+ }
}
ul.bookmarks {
- list-style: none;
- margin: 0;
+ list-style: none;
+ margin: 0;
- li.noBookmarksItem {
- margin-top: 0;
- }
+ li.noBookmarksItem {
+ margin-top: 0;
+ }
}
.addBookmarkGroupButton button {
- width: 100%;
- margin-top: 0.5em;
+ width: 100%;
+ margin-top: 0.5em;
}
button.addBookmarkButton {
- width: 100%;
-}
-
-@media screen and (prefers-color-scheme: dark) {
- body {
- color: #fafafa;
- background-color: #111111;
- }
+ width: 100%;
}
diff --git a/Start/Client/Sass/dark-mode.scss b/Start/Client/Sass/dark-mode.scss
new file mode 100644
index 0000000..6e4d3ca
--- /dev/null
+++ b/Start/Client/Sass/dark-mode.scss
@@ -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;
+ }
+}
diff --git a/Start/Client/Start.Client.csproj b/Start/Client/Start.Client.csproj
index 32fbad9..7a8c2a3 100644
--- a/Start/Client/Start.Client.csproj
+++ b/Start/Client/Start.Client.csproj
@@ -30,6 +30,11 @@
sass ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css
${ProjectDir}
+
+ BeforeBuild
+ sass ${ProjectDir}/Sass/dark-mode.scss ${ProjectDir}/wwwroot/css/dark-mode.css
+ ${ProjectDir}
+
@@ -56,6 +61,11 @@
sass --style=compressed ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css
${ProjectDir}
+
+ BeforeBuild
+ sass --style=compressed ${ProjectDir}/Sass/dark-mode.scss ${ProjectDir}/wwwroot/css/dark-mode.css
+ ${ProjectDir}
+
diff --git a/Start/Client/wwwroot/index.html b/Start/Client/wwwroot/index.html
index f3261c0..ffe46aa 100644
--- a/Start/Client/wwwroot/index.html
+++ b/Start/Client/wwwroot/index.html
@@ -13,7 +13,7 @@
-
+