topaLE
/
uptime-kuma
1
0
Fork 0
Code Issues 185 Pull Requests 26 Projects Releases 28 Wiki Activity
Browse Source

🌑 darkmode fixes

remotes/philippdormann/feature/gotify
Philipp Dormann 4 years ago
parent
073e2221f5
commit
35a996454a
No known key found for this signature in database GPG Key ID: 3BB9ADD52DCA4314
4 changed files with 98 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/assets/app.scss
  2. 4
      src/assets/vars.scss
  3. 73
      src/layouts/Layout.vue
  4. 2
      src/pages/Dashboard.vue

53
src/assets/app.scss
View File

@ -1,16 +1,46 @@
@import "vars.scss"; @import "vars.scss";
@import "node_modules/bootstrap/scss/bootstrap"; @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 { #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 { .shadow-box {
overflow: hidden; overflow: hidden;
box-shadow: 0 15px 70px rgba(0, 0, 0, .1); box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
padding: 10px; padding: 10px;
border-radius: 10px;
&.big-padding { &.big-padding {
padding: 20px; padding: 20px;
} }
@ -22,10 +52,14 @@
} }
.btn-primary { .btn-primary {
color: white; // color: white;
color: #0a0a0a;
&:hover, &:active, &:focus, &.active { &:hover,
color: white; &:active,
&:focus,
&.active {
color: #0a0a0a;
background-color: $highlight; background-color: $highlight;
border-color: $highlight; border-color: $highlight;
} }
@ -36,3 +70,8 @@
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
} }
@media (prefers-color-scheme: dark) {
a:hover {
color: #7ce8a4;
}
}

4
src/assets/vars.scss
View File

@ -13,6 +13,8 @@ $highlight-white: #e7faec;
--background-secondary: #d0d3d5; --background-secondary: #d0d3d5;
--background-4: #d0d3d5; --background-4: #d0d3d5;
--background-ternary: #8e8e8e; --background-ternary: #8e8e8e;
--background-sidebar-active: #e4e4e4;
--background-navbar: #8e8e8e;
--main-font-color: #212529; --main-font-color: #212529;
} }
@ -22,6 +24,8 @@ $highlight-white: #e7faec;
--background-secondary: #656565; --background-secondary: #656565;
--background-4: #313131; --background-4: #313131;
--background-ternary: #a7a7a7; --background-ternary: #a7a7a7;
--background-sidebar-active: #777777;
--background-navbar: #333333;
--main-font-color: #e4e4e4; --main-font-color: #e4e4e4;
} }
} }

73
src/layouts/Layout.vue
View File

@ -1,28 +1,35 @@
<template> <template>
<div class="lost-connection" v-if="!$root.socket.connected && !$root.socket.firstConnect">
<div class="lost-connection" v-if="! $root.socket.connected && ! $root.socket.firstConnect"> <div class="container-fluid">Lost connection to the socket server. Reconnecting...</div>
<div class="container-fluid">
Lost connection to the socket server. Reconnecting...
</div>
</div> </div>
<!-- Desktop header --> <!-- Desktop header -->
<header class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom" v-if="! $root.isMobile"> <header
<router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom"
<object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg"></object> v-if="!$root.isMobile"
>
<router-link
to="/dashboard"
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none"
>
<img class="bi me-2 ms-4" width="40" height="40" src="/icon.svg" />
<span class="fs-4 title">Uptime Kuma</span> <span class="fs-4 title">Uptime Kuma</span>
</router-link> </router-link>
<ul class="nav nav-pills" > <ul class="nav nav-pills">
<li class="nav-item"><router-link to="/dashboard" class="nav-link">📊 Dashboard</router-link></li> <li class="nav-item">
<li class="nav-item"><router-link to="/settings" class="nav-link">🔧 Settings</router-link></li> <router-link to="/dashboard" class="nav-link">📊 Dashboard</router-link>
</li>
<li class="nav-item">
<router-link to="/settings" class="nav-link">🔧 Settings</router-link>
</li>
</ul> </ul>
</header> </header>
<!-- Mobile header --> <!-- Mobile header -->
<header class="d-flex flex-wrap justify-content-center mt-3 mb-3" v-else> <header class="d-flex flex-wrap justify-content-center mt-3 mb-3" v-else>
<router-link to="/dashboard" class="d-flex align-items-center text-dark text-decoration-none"> <router-link to="/dashboard" class="d-flex align-items-center text-decoration-none">
<object class="bi" width="40" height="40" data="/icon.svg"></object> <img style="height:2rem;" src="/icon.svg" />
<span class="fs-4 title ms-2">Uptime Kuma</span> <span class="fs-4 title ms-2">Uptime Kuma</span>
</router-link> </router-link>
</header> </header>
@ -30,24 +37,39 @@
<main> <main>
<!-- Add :key to disable vue router re-use the same component --> <!-- Add :key to disable vue router re-use the same component -->
<router-view v-if="$root.loggedIn" :key="$route.fullPath" /> <router-view v-if="$root.loggedIn" :key="$route.fullPath" />
<Login v-if="! $root.loggedIn && $root.allowLoginDialog" /> <Login v-if="!$root.loggedIn && $root.allowLoginDialog" />
</main> </main>
<footer> <footer>
<div class="container-fluid"> <div class="container-fluid">
Uptime Kuma - Uptime Kuma -
Version: {{ $root.info.version }} - Version: {{ $root.info.version }} -
<a href="https://github.com/louislam/uptime-kuma/releases" target="_blank">Check Update On GitHub</a> <a
href="https://github.com/louislam/uptime-kuma/releases"
target="_blank"
>Check Update On GitHub</a>
</div> </div>
</footer> </footer>
<!-- Mobile Only --> <!-- Mobile Only -->
<div style="width: 100%;height: 60px;" v-if="$root.isMobile"></div> <div style="width: 100%;height: 60px;" v-if="$root.isMobile"></div>
<nav class="bottom-nav" v-if="$root.isMobile"> <nav class="bottom-nav" v-if="$root.isMobile">
<router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList"><div>📊</div>Dashboard</router-link> <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
<a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile"><div>📃</div>List</a> <div>📊</div>Dashboard
<router-link to="/add" class="nav-link" @click="$root.cancelActiveList"><div>➕</div>Add</router-link> </router-link>
<router-link to="/settings" class="nav-link" @click="$root.cancelActiveList"><div>🔧</div>Settings</router-link> <a
href="#"
:class="{ 'router-link-exact-active': $root.showListMobile }"
@click="$root.showListMobile = !$root.showListMobile"
>
<div>📃</div>List
</a>
<router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
<div>➕</div>Add
</router-link>
<router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
<div>🔧</div>Settings
</router-link>
</nav> </nav>
</template> </template>
@ -70,7 +92,7 @@ export default {
this.init(); this.init();
}, },
watch: { watch: {
$route (to, from) { $route(to, from) {
this.init(); this.init();
} }
}, },
@ -95,8 +117,9 @@ export default {
height: 60px; height: 60px;
width: 100%; width: 100%;
left: 0; left: 0;
background-color: #fff; background-color: var(--background-navbar);
box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05); 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; text-align: center;
white-space: nowrap; white-space: nowrap;
padding: 0 35px; padding: 0 35px;
@ -108,7 +131,7 @@ export default {
height: 100%; height: 100%;
padding: 8px 10px 0; padding: 8px 10px 0;
font-size: 13px; font-size: 13px;
color: #c1c1c1; color: var(--main-font-color);
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
@ -138,14 +161,12 @@ export default {
} }
main { main {
} }
footer { footer {
color: #AAA; color: #aaa;
font-size: 13px; font-size: 13px;
margin-bottom: 30px; margin-bottom: 30px;
margin-left: 10px; margin-left: 10px;
} }
</style> </style>

2
src/pages/Dashboard.vue
View File

@ -133,7 +133,7 @@ export default {
} }
&.active { &.active {
background-color: #cdf8f4; background-color: var(--background-sidebar-active);
} }
} }
} }

Write Preview
Loading…
Cancel
Save