diff --git a/dashboard/index.html b/dashboard/index.html index cf1c484c..331a22cf 100644 --- a/dashboard/index.html +++ b/dashboard/index.html @@ -8,7 +8,6 @@ - diff --git a/dashboard/package.json b/dashboard/package.json index a48436f0..6ca8e164 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -13,7 +13,6 @@ "@tsconfig/svelte": "^2.0.1", "svelte": "^3.44.0", "svelte-check": "^2.2.7", - "svelte-preprocess": "^4.10.1", "svelte-toggle": "^3.1.0", "tslib": "^2.3.1", "typescript": "^4.4.4", @@ -24,14 +23,18 @@ "@sentry/tracing": "^6.19.5", "@types/twemoji": "^12.1.2", "axios": "^0.24.0", + "bootstrap": "^5.1.3", + "bootstrap-dark-5": "^1.1.3", "discord-markdown": "^2.5.1", "gh-pages": "^3.2.3", + "import": "^0.0.6", "moment": "^2.29.1", - "sass": "^1.47.0", + "sass": "^1.52.2", "svelecte": "^3.4.5", "svelte-autosize": "^1.0.1", "svelte-icons": "^2.1.0", "svelte-navigator": "^3.1.5", + "svelte-preprocess": "^4.10.6", "sveltestrap": "^5.6.3", "twemoji": "^13.1.0" } diff --git a/dashboard/src/App.svelte b/dashboard/src/App.svelte index 996e2237..469c1a34 100644 --- a/dashboard/src/App.svelte +++ b/dashboard/src/App.svelte @@ -17,11 +17,6 @@ import BulkGroupPrivacy from "./pages/BulkGroupPrivacy.svelte"; import BulkMemberPrivacy from "./pages/BulkMemberPrivacy.svelte"; // theme cdns (I might make some myself too) - let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"; - let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css"; - - let styleSrc = dark; - // if there's a style already set, retrieve it let style = localStorage.getItem("pk-style") && localStorage.getItem("pk-style"); @@ -31,17 +26,15 @@ import BulkMemberPrivacy from "./pages/BulkMemberPrivacy.svelte"; // not sure if there's a better way to handle this function setStyle(style) { switch (style) { - case "light": document.getElementById("app").className = "light"; - styleSrc = light; + case "light": document.documentElement.className = "light"; localStorage.setItem("pk-style", "light"); break; - case "dark": document.getElementById("app").className = "dark"; - styleSrc = dark; + case "dark": document.documentElement.className = "dark"; localStorage.setItem("pk-style", "dark"); break; - default: document.getElementById("app").className = "dark"; - styleSrc = dark; + default: document.documentElement.className = "dark"; localStorage.setItem("pk-style", "dark"); + break; }; }; @@ -57,10 +50,6 @@ import BulkMemberPrivacy from "./pages/BulkMemberPrivacy.svelte"; - - - - diff --git a/dashboard/src/pages/Settings.svelte b/dashboard/src/pages/Settings.svelte index dc65549a..3b5176f5 100644 --- a/dashboard/src/pages/Settings.svelte +++ b/dashboard/src/pages/Settings.svelte @@ -59,19 +59,19 @@
- Show banners in the background? {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> + Show banners in the background? {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> If enabled, shows banners from the top of the system, member and group pages. - Show banners at the bottom of cards? {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> + Show banners at the bottom of cards? {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> If enabled, shows banners at the bottom of the system, member and group cards. - Use twemoji? {settings.appearance.twemoji = !settings.appearance.twemoji; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> + Use twemoji? {settings.appearance.twemoji = !settings.appearance.twemoji; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> If enabled, converts all emojis into twemoji. - Colored background? {settings.appearance.color_background = !settings.appearance.color_background; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> + Colored background? {settings.appearance.color_background = !settings.appearance.color_background; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> If enabled, turns the background on member pages into the member's color. @@ -79,15 +79,15 @@
- Expand cards by default? {settings.accessibility.expandedcards = !settings.accessibility.expandedcards; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> + Expand cards by default? {settings.accessibility.expandedcards = !settings.accessibility.expandedcards; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> If enabled, lists will be expanded by default (overrides page links). - Use page links instead of cards? {settings.accessibility.pagelinks= !settings.accessibility.pagelinks; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> + Use page links instead of cards? {settings.accessibility.pagelinks= !settings.accessibility.pagelinks; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> If enabled, the list items will not expand, but instead link to the corresponding page. diff --git a/dashboard/styles/bootstrap-nightshade.scss b/dashboard/styles/bootstrap-nightshade.scss new file mode 100644 index 00000000..b9e42e27 --- /dev/null +++ b/dashboard/styles/bootstrap-nightshade.scss @@ -0,0 +1,115 @@ +/*! + * Bootstrap v5.x.x (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * + * Bootstrap-Nightshade (https://vinorodrigues.github.io/bootstrap-dark-5/) + * Copyright 2020-2021 Vino Rodrigues + * This version is a dual color theme, with the default light mode and the dark + * elements optioned in by a `.dark` class in `` tag. + * Why ``? See https://css-tricks.com/html-vs-body-in-css/#quirky-background-color + */ + +// stylelint-disable-next-line scss/dollar-variable-default +$enable-colors-hack: true; + +// Configuration +@import "../node_modules/bootstrap/scss/functions"; +@import "../node_modules/bootstrap-dark-5/scss/dark/functions"; +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap-dark-5/scss/variables-alt"; // dark color set is here +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap-dark-5/scss/dark/mixins-2"; // !!!! fix for issue #32 +@import "../node_modules/bootstrap/scss/utilities"; +@import "../node_modules/bootstrap-dark-5/scss/dark/utilities"; +@import "../node_modules/bootstrap-dark-5/scss/dark/patch"; // missing from BS, unsupported patch/hack + +// :root { color-scheme: light; } // !!!! fix for issue #33, do not set + +// Layout & components +// @import "../node_modules/bootstrap-dark-5/scss/dark/root"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap-dark-5/scss/dark/root-alts"; // !!!! fix for issue #35 +@import "../node_modules/bootstrap/scss/type"; +@import "../node_modules/bootstrap/scss/images"; +@import "../node_modules/bootstrap/scss/containers"; +@import "../node_modules/bootstrap/scss/grid"; +@import "../node_modules/bootstrap/scss/tables"; +@import "../node_modules/bootstrap/scss/forms"; +@import "../node_modules/bootstrap/scss/buttons"; +@import "../node_modules/bootstrap/scss/transitions"; +@import "../node_modules/bootstrap/scss/dropdown"; +@import "../node_modules/bootstrap/scss/button-group"; +@import "../node_modules/bootstrap/scss/nav"; +@import "../node_modules/bootstrap/scss/navbar"; +@import "../node_modules/bootstrap/scss/card"; +@import "../node_modules/bootstrap/scss/accordion"; +@import "../node_modules/bootstrap/scss/breadcrumb"; +@import "../node_modules/bootstrap/scss/pagination"; +@import "../node_modules/bootstrap/scss/badge"; +@import "../node_modules/bootstrap/scss/alert"; +@import "../node_modules/bootstrap/scss/progress"; +@import "../node_modules/bootstrap/scss/list-group"; +@import "../node_modules/bootstrap/scss/close"; +@import "../node_modules/bootstrap/scss/toasts"; +@import "../node_modules/bootstrap/scss/modal"; +@import "../node_modules/bootstrap/scss/tooltip"; +@import "../node_modules/bootstrap/scss/popover"; +@import "../node_modules/bootstrap/scss/carousel"; +@import "../node_modules/bootstrap/scss/spinners"; +@import "../node_modules/bootstrap/scss/offcanvas"; +@import "../node_modules/bootstrap/scss/placeholders"; + +// Helpers +@import "../node_modules/bootstrap/scss/helpers"; + +// Utilities +@import "../node_modules/bootstrap/scss/utilities/api"; + +/* + * ---------- Dark Mode ------------------------------------------------------ + */ + +@include color-scheme-alt("html.dark") { + + // :root { color-scheme: dark; } // !!!! fix for issue #33, do not set + + // Layout & components + // @import "../node_modules/bootstrap-dark-5/scss/dark/root"; // !!!! fix for issue #33, do not use `dark/root` + @import "../node_modules/bootstrap-dark-5/scss/dark/reboot"; + @import "../node_modules/bootstrap-dark-5/scss/dark/type"; + @import "../node_modules/bootstrap-dark-5/scss/dark/images"; + @import "../node_modules/bootstrap-dark-5/scss/dark/tables"; + @import "../node_modules/bootstrap-dark-5/scss/dark/forms"; + @import "../node_modules/bootstrap-dark-5/scss/dark/buttons-2"; // !!!! fix for issue #32 + @import "../node_modules/bootstrap-dark-5/scss/dark/dropdown"; + @import "../node_modules/bootstrap-dark-5/scss/dark/button-group"; + @import "../node_modules/bootstrap-dark-5/scss/dark/nav"; + @import "../node_modules/bootstrap-dark-5/scss/dark/navbar"; + @import "../node_modules/bootstrap-dark-5/scss/dark/card"; + @import "../node_modules/bootstrap-dark-5/scss/dark/accordion"; + @import "../node_modules/bootstrap-dark-5/scss/dark/breadcrumb"; + @import "../node_modules/bootstrap-dark-5/scss/dark/pagination"; + @import "../node_modules/bootstrap-dark-5/scss/dark/badge"; + @import "../node_modules/bootstrap-dark-5/scss/dark/alert"; + @import "../node_modules/bootstrap-dark-5/scss/dark/progress"; + @import "../node_modules/bootstrap-dark-5/scss/dark/list-group"; + @import "../node_modules/bootstrap-dark-5/scss/dark/close"; + @import "../node_modules/bootstrap-dark-5/scss/dark/toasts"; + @import "../node_modules/bootstrap-dark-5/scss/dark/modal"; + @import "../node_modules/bootstrap-dark-5/scss/dark/tooltip"; + @import "../node_modules/bootstrap-dark-5/scss/dark/popover"; + @import "../node_modules/bootstrap-dark-5/scss/dark/carousel"; + @import "../node_modules/bootstrap-dark-5/scss/dark/offcanvas"; + @import "../node_modules/bootstrap-dark-5/scss/dark/placeholders"; + + // Helpers + @import "../node_modules/bootstrap-dark-5/scss/dark/helpers"; + + // Utilities + @import "../node_modules/bootstrap-dark-5/scss/dark/utilities/api"; + + // Unique to dark-mode + @import "../node_modules/bootstrap-dark-5/scss/dark/dark"; +} diff --git a/dashboard/styles/dark.scss b/dashboard/styles/dark.scss index 57ccc1c0..4139e566 100644 --- a/dashboard/styles/dark.scss +++ b/dashboard/styles/dark.scss @@ -1,18 +1,17 @@ +$primary: #da9317; +$primary-alt: #da9317; +@import "../node_modules/bootstrap/scss/bootstrap.scss"; +@import "bootstrap-nightshade.scss"; + .dark { .navbar.bg-light { - background-color: var(--bs-body-bg) !important; + background-color: var(--bs-body-bg-alt) !important; } .footer.bg-light { - background-color: var(--bs-dark) !important; + background-color: var(--bs-dark-alt) !important; } - > * { - .description a { - color: #159bd4 !important; - } - } - > * { .nav-item { .btn.btn-transparent { @@ -20,4 +19,33 @@ } } } + + // bootstrap + .nav-tabs * .nav-link { + background-color: var(--bs-body-bg-alt) !important; + } + + //svelecte + .svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content { + color: var(--bs-body-color-alt) !important; //this can also be optionally overwritten + background-color: var(--bs-body-bg-alt) !important; + } + + .sv-item-btn { + background-color: var(--bs-light-alt) !important; + } + + // discord markdown + .d-spoiler { + color: var(--bs-dark-alt); //overwrite + background-color: var(--bs-dark-alt); //overwrite + } + + .d-spoiler::selection { + color: var(--bs-dark-alt); //overwrite + } + + .d-spoiler:active { + color: var(--bs-body-color-alt); //overwrite + } } \ No newline at end of file diff --git a/dashboard/styles/light.scss b/dashboard/styles/light.scss index c11845e3..97324f0a 100644 --- a/dashboard/styles/light.scss +++ b/dashboard/styles/light.scss @@ -1,17 +1,18 @@ -.light > * { - .footer.bg-light { - background-color: var(--bs-light) !important; - } - - .description a { - color: var(--bs-primary) !important; - } +$primary: #da9317; +@import "../node_modules/bootstrap/scss/bootstrap.scss"; - > * { - .nav-item { - .btn.btn-transparent { - color: rgba(0,0,0,.55); - } +.footer.bg-light { + background-color: var(--bs-light) !important; +} + +.description a { + color: var(--bs-primary) !important; +} + +> * { + .nav-item { + .btn.btn-transparent { + color: rgba(0,0,0,.55); } } } \ No newline at end of file diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock index 60141f29..8a520a0d 100644 --- a/dashboard/yarn.lock +++ b/dashboard/yarn.lock @@ -213,6 +213,18 @@ binary-extensions@^2.0.0: resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== +bootstrap-dark-5@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/bootstrap-dark-5/-/bootstrap-dark-5-1.1.3.tgz#a40c42083f2ee1f05ca0423f334d5edf52c35f9e" + integrity sha512-3Paopsp8wyOM1oeaLWLFuUZThhRc3tBYKUnoF+uwrU/xN4G47MCLZlALBJNqYqAecg7dSln9vgaYK1CwPnTeBw== + dependencies: + bootstrap "^5.1.3" + +bootstrap@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34" + integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -246,7 +258,22 @@ chalk@^4.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1: +"chokidar@>=3.0.0 <4.0.0": + version "3.5.3" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" + integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + +chokidar@^3.4.1: version "3.5.2" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== @@ -597,9 +624,9 @@ highlight.js@^11.2.0: integrity sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw== immutable@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23" - integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw== + version "4.1.0" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef" + integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ== import-fresh@^3.2.1: version "3.3.0" @@ -609,6 +636,13 @@ import-fresh@^3.2.1: parent-module "^1.0.0" resolve-from "^4.0.0" +import@^0.0.6: + version "0.0.6" + resolved "https://registry.yarnpkg.com/import/-/import-0.0.6.tgz#d0eb79df86aa2677c6db61578a5212b3031e6042" + integrity sha512-QPhTdjy9J4wUzmWSG7APkSgMFuPGPw+iJTYUblcfc2AfpqaatbwgCldK1HoLYx+v/+lWvab63GWZtNkcnj9JcQ== + dependencies: + optimist "0.3.x" + inflight@^1.0.4: version "1.0.6" resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" @@ -789,6 +823,13 @@ once@^1.3.0: dependencies: wrappy "1" +optimist@0.3.x: + version "0.3.7" + resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9" + integrity sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ== + dependencies: + wordwrap "~0.0.2" + p-limit@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" @@ -954,10 +995,10 @@ sander@^0.5.0: mkdirp "^0.5.1" rimraf "^2.5.2" -sass@^1.47.0: - version "1.49.0" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.0.tgz#65ec1b1d9a6bc1bae8d2c9d4b392c13f5d32c078" - integrity sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw== +sass@^1.52.2: + version "1.52.2" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.52.2.tgz#cd1f03e0e7be5bb2cebcf1c34d735f087d790936" + integrity sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" @@ -985,7 +1026,12 @@ sorcery@^0.10.0: sander "^0.5.0" sourcemap-codec "^1.3.0" -"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1: +"source-map-js@>=0.6.2 <2.0.0": + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + +source-map-js@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf" integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA== @@ -1079,10 +1125,10 @@ svelte-preprocess@^4.0.0: sorcery "^0.10.0" strip-indent "^3.0.0" -svelte-preprocess@^4.10.1: - version "4.10.1" - resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz#5f435e8aaa82976165bc8f5fa690e2e5ba084760" - integrity sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw== +svelte-preprocess@^4.10.6: + version "4.10.6" + resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz#5f9a53e7ed3b85fc7e0841120c725b76ac5a1ba8" + integrity sha512-I2SV1w/AveMvgIQlUF/ZOO3PYVnhxfcpNyGt8pxpUVhPfyfL/CZBkkw/KPfuFix5FJ9TnnNYMhACK3DtSaYVVQ== dependencies: "@types/pug" "^2.0.4" "@types/sass" "^1.16.0" @@ -1182,6 +1228,11 @@ vite@^2.7.0: optionalDependencies: fsevents "~2.3.2" +wordwrap@~0.0.2: + version "0.0.3" + resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" + integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc= + wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"