From fef41b44a8172a07d7477cbde68f133fd98d8675 Mon Sep 17 00:00:00 2001 From: Louis Lam Date: Tue, 13 Jul 2021 12:16:11 +0800 Subject: [PATCH] Revert "basic darkmode" --- src/assets/app.scss | 53 +++++---------------------------- src/assets/vars.scss | 26 ++-------------- src/components/HeartbeatBar.vue | 2 +- src/components/Status.vue | 11 +++---- src/components/Uptime.vue | 4 +-- src/layouts/Layout.vue | 6 ++-- src/pages/Dashboard.vue | 6 ++-- 7 files changed, 21 insertions(+), 87 deletions(-) diff --git a/src/assets/app.scss b/src/assets/app.scss index 96e1eb2a..cb72fb9d 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -1,46 +1,16 @@ @import "vars.scss"; @import "node_modules/bootstrap/scss/bootstrap"; -html, -body, -input, -.modal-content { - background: var(--page-background); - color: var(--main-font-color); -} -a, -.table, -.nav-link { - color: var(--main-font-color); -} -.nav-pills .nav-link.active, -.nav-pills .show > .nav-link { - color: #0a0a0a; -} - -.nav-link:hover, -.nav-link:focus { - color: #5cdd8b; -} - -.form-control, -.form-control:focus, -.form-select, -.form-select:focus { - color: var(--main-font-color); - background-color: var(--background-4); -} - #app { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, - apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji; + font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji; } .shadow-box { overflow: hidden; - box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1); + box-shadow: 0 15px 70px rgba(0, 0, 0, .1); padding: 10px; + border-radius: 10px; + &.big-padding { padding: 20px; } @@ -52,14 +22,10 @@ a, } .btn-primary { - // color: white; - color: #0a0a0a; + color: white; - &:hover, - &:active, - &:focus, - &.active { - color: #0a0a0a; + &:hover, &:active, &:focus, &.active { + color: white; background-color: $highlight; border-color: $highlight; } @@ -70,8 +36,3 @@ a, backdrop-filter: blur(3px); } -@media (prefers-color-scheme: dark) { - a:hover { - color: #7ce8a4; - } -} diff --git a/src/assets/vars.scss b/src/assets/vars.scss index 12b8e374..31b0262d 100644 --- a/src/assets/vars.scss +++ b/src/assets/vars.scss @@ -1,27 +1,7 @@ -$primary: #5cdd8b; -$danger: #dc3545; +$primary: #5CDD8B; +$danger: #DC3545; $link-color: #111; -$border-radius: .25rem; +$border-radius: 50rem; $highlight: #7ce8a4; $highlight-white: #e7faec; - -:root { - color-scheme: light dark; - // - --page-background: #fafafa; - --background-secondary: #d0d3d5; - --background-4: #d0d3d5; - --background-ternary: #d0d3d5; - --main-font-color: #212529; -} - -@media (prefers-color-scheme: dark) { - :root { - --page-background: #0a0a0a; - --background-secondary: #656565; - --background-4: #313131; - --background-ternary: #a7a7a7; - --main-font-color: #e4e4e4; - } -} \ No newline at end of file diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue index 9e063fb2..48ffd292 100644 --- a/src/components/HeartbeatBar.vue +++ b/src/components/HeartbeatBar.vue @@ -159,7 +159,7 @@ export default { border-radius: 50rem; &.empty { - background-color: var(--background-ternary); + background-color: aliceblue; } &.down { diff --git a/src/components/Status.vue b/src/components/Status.vue index 274c0a15..c5fec224 100644 --- a/src/components/Status.vue +++ b/src/components/Status.vue @@ -1,5 +1,5 @@ diff --git a/src/components/Uptime.vue b/src/components/Uptime.vue index 0c3e90e7..ad8114fc 100644 --- a/src/components/Uptime.vue +++ b/src/components/Uptime.vue @@ -57,7 +57,5 @@ export default { diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue index 8731eb07..ef116f4c 100644 --- a/src/layouts/Layout.vue +++ b/src/layouts/Layout.vue @@ -8,7 +8,7 @@
- + Uptime Kuma @@ -21,7 +21,7 @@
- + Uptime Kuma @@ -87,7 +87,7 @@ export default { height: 60px; width: 100%; left: 0; - background-color: var(--background-secondary); + background-color: #fff; box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05); text-align: center; white-space: nowrap; diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue index 8c51c5ce..c42f2765 100644 --- a/src/pages/Dashboard.vue +++ b/src/pages/Dashboard.vue @@ -129,19 +129,17 @@ export default { } &:hover { - color: var(--main-font-color); - background-color: var(--background-4); + background-color: $highlight-white; } &.active { - background-color: var(--background-secondary); + background-color: #cdf8f4; } } } .badge { min-width: 58px; - color: #0a0a0a; } .small-padding {